Skip to content

Commit 4eca9e7

Browse files
devvaannshdevvaannsh
committed
fix: make the buttons UI consistent to other parts
1 parent d3ce4b4 commit 4eca9e7

File tree

2 files changed

+3
-192
lines changed

2 files changed

+3
-192
lines changed

‎src/extensionsIntegrated/CustomSnippets/htmlContent/snippets-panel.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
</div>
108108

109109
<div id="save-custom-snippet-btn">
110-
<button disabled>Save</button>
110+
<button class="dialog-button btn primary" disabled>Save</button>
111111
</div>
112112
</div>
113113

@@ -152,8 +152,8 @@
152152
</div>
153153

154154
<div id="edit-snippet-buttons">
155-
<button id="reset-snippet-btn">Reset</button>
156-
<button id="save-edit-snippet-btn" disabled>Save</button>
155+
<button id="reset-snippet-btn" class="dialog-button btn">Reset</button>
156+
<button id="save-edit-snippet-btn" class="dialog-button btn primary" disabled>Save</button>
157157
</div>
158158
</div>
159159
</div>

‎src/styles/Extn-CustomSnippets.less‎

Lines changed: 0 additions & 189 deletions
Original file line numberDiff line numberDiff line change
@@ -580,74 +580,6 @@
580580
.dark & {
581581
border-top: 1px solid @dark-bc-panel-separator;
582582
}
583-
584-
button {
585-
background-color: @bc-primary-btn-bg;
586-
border: 1px solid @bc-primary-btn-border;
587-
border-radius: @bc-border-radius;
588-
color: @bc-text-alt;
589-
padding: 8px 20px;
590-
cursor: pointer;
591-
transition: all 0.15s ease;
592-
box-shadow: inset 0 1px 0 @bc-highlight;
593-
min-width: 80px;
594-
font-weight: @font-weight-semibold;
595-
text-shadow: 0 -1px 0 @bc-shadow-small;
596-
597-
.dark & {
598-
background-color: @dark-bc-primary-btn-bg;
599-
border: 1px solid @dark-bc-primary-btn-border;
600-
color: @dark-bc-text-alt;
601-
box-shadow: inset 0 1px 0 @dark-bc-highlight;
602-
text-shadow: 0 -1px 0 @dark-bc-shadow-small;
603-
}
604-
605-
&:hover:not(:disabled) {
606-
background-color: lighten(@bc-primary-btn-bg, 10%);
607-
608-
.dark & {
609-
background-color: lighten(@dark-bc-primary-btn-bg, 10%);
610-
}
611-
}
612-
613-
&:focus {
614-
outline: none;
615-
border: 1px solid @bc-primary-btn-border;
616-
box-shadow:
617-
inset 0 1px 0 @bc-highlight,
618-
0 0 0 1px @bc-primary-btn-border-focused-glow;
619-
620-
.dark & {
621-
border: 1px solid @dark-bc-primary-btn-border;
622-
box-shadow:
623-
inset 0 1px 0 @dark-bc-highlight,
624-
0 0 0 1px @dark-bc-btn-border-focused-glow;
625-
}
626-
}
627-
628-
&:disabled {
629-
opacity: @bc-disabled-opacity;
630-
cursor: default;
631-
background-color: @bc-primary-btn-bg;
632-
box-shadow: inset 0 1px 0 @bc-highlight;
633-
634-
.dark & {
635-
opacity: @dark-bc-disabled-opacity;
636-
background-color: @dark-bc-primary-btn-bg;
637-
box-shadow: inset 0 1px 0 @dark-bc-highlight;
638-
}
639-
}
640-
641-
&:active:not(:disabled) {
642-
background-color: @bc-primary-btn-bg-down;
643-
box-shadow: inset 0 1px 0 @bc-shadow-small;
644-
645-
.dark & {
646-
background-color: @dark-bc-primary-btn-bg-down;
647-
box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
648-
}
649-
}
650-
}
651583
}
652584
}
653585

@@ -813,126 +745,5 @@
813745
.dark & {
814746
border-top: 1px solid @dark-bc-panel-separator;
815747
}
816-
817-
button {
818-
border-radius: @bc-border-radius;
819-
padding: 8px 20px;
820-
cursor: pointer;
821-
transition: all 0.15s ease;
822-
min-width: 80px;
823-
font-weight: @font-weight-semibold;
824-
text-shadow: 0 -1px 0 @bc-shadow-small;
825-
826-
.dark & {
827-
text-shadow: 0 -1px 0 @dark-bc-shadow-small;
828-
}
829-
}
830-
831-
#reset-snippet-btn {
832-
background-color: @bc-btn-bg;
833-
border: 1px solid @bc-btn-border;
834-
color: @bc-text;
835-
box-shadow: inset 0 1px 0 @bc-highlight;
836-
837-
.dark & {
838-
background-color: @dark-bc-btn-bg;
839-
border: 1px solid @dark-bc-btn-border;
840-
color: @dark-bc-text;
841-
box-shadow: inset 0 1px 0 @dark-bc-highlight;
842-
}
843-
844-
&:hover {
845-
background-color: lighten(@bc-btn-bg, 5%);
846-
847-
.dark & {
848-
background-color: lighten(@dark-bc-btn-bg, 5%);
849-
}
850-
}
851-
852-
&:focus {
853-
outline: none;
854-
border: 1px solid @bc-btn-border-focused;
855-
box-shadow:
856-
inset 0 1px 0 @bc-highlight,
857-
0 0 0 1px @bc-btn-border-focused-glow;
858-
859-
.dark & {
860-
border: 1px solid @dark-bc-btn-border-focused;
861-
box-shadow:
862-
inset 0 1px 0 @dark-bc-highlight,
863-
0 0 0 1px @dark-bc-btn-border-focused-glow;
864-
}
865-
}
866-
867-
&:active {
868-
background-color: @bc-btn-bg-down;
869-
box-shadow: inset 0 1px 0 @bc-shadow-small;
870-
871-
.dark & {
872-
background-color: @dark-bc-btn-bg-down;
873-
box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
874-
}
875-
}
876-
}
877-
878-
#save-edit-snippet-btn {
879-
background-color: @bc-primary-btn-bg;
880-
border: 1px solid @bc-primary-btn-border;
881-
color: @bc-text-alt;
882-
box-shadow: inset 0 1px 0 @bc-highlight;
883-
884-
.dark & {
885-
background-color: @dark-bc-primary-btn-bg;
886-
border: 1px solid @dark-bc-primary-btn-border;
887-
color: @dark-bc-text-alt;
888-
box-shadow: inset 0 1px 0 @dark-bc-highlight;
889-
}
890-
891-
&:hover:not(:disabled) {
892-
background-color: lighten(@bc-primary-btn-bg, 10%);
893-
894-
.dark & {
895-
background-color: lighten(@dark-bc-primary-btn-bg, 10%);
896-
}
897-
}
898-
899-
&:focus {
900-
outline: none;
901-
border: 1px solid @bc-primary-btn-border;
902-
box-shadow:
903-
inset 0 1px 0 @bc-highlight,
904-
0 0 0 1px @bc-primary-btn-border-focused-glow;
905-
906-
.dark & {
907-
border: 1px solid @dark-bc-primary-btn-border;
908-
box-shadow:
909-
inset 0 1px 0 @dark-bc-highlight,
910-
0 0 0 1px @dark-bc-btn-border-focused-glow;
911-
}
912-
}
913-
914-
&:disabled {
915-
opacity: @bc-disabled-opacity;
916-
cursor: default;
917-
background-color: @bc-primary-btn-bg;
918-
box-shadow: inset 0 1px 0 @bc-highlight;
919-
920-
.dark & {
921-
opacity: @dark-bc-disabled-opacity;
922-
background-color: @dark-bc-primary-btn-bg;
923-
box-shadow: inset 0 1px 0 @dark-bc-highlight;
924-
}
925-
}
926-
927-
&:active:not(:disabled) {
928-
background-color: @bc-primary-btn-bg-down;
929-
box-shadow: inset 0 1px 0 @bc-shadow-small;
930-
931-
.dark & {
932-
background-color: @dark-bc-primary-btn-bg-down;
933-
box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
934-
}
935-
}
936-
}
937748
}
938749
}

0 commit comments

Comments
 (0)