Skip to content

Commit 2ada5ea

Browse files
hybs123hybs123
committed
fix:Button Padding Problem Fixed(SCSS update)
1 parent d610bd3 commit 2ada5ea

File tree

7 files changed

+1138
-111
lines changed

7 files changed

+1138
-111
lines changed

‎css/pico.classless.css‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -549,7 +549,6 @@ progress,
549549
:where(:root) {
550550
-webkit-tap-highlight-color: transparent;
551551
-webkit-text-size-adjust: 100%;
552-
-moz-text-size-adjust: 100%;
553552
text-size-adjust: 100%;
554553
background-color: var(--pico-background-color);
555554
color: var(--pico-color);
@@ -560,8 +559,6 @@ progress,
560559
text-underline-offset: var(--pico-text-underline-offset);
561560
text-rendering: optimizeLegibility;
562561
overflow-wrap: break-word;
563-
-moz-tab-size: 4;
564-
-o-tab-size: 4;
565562
tab-size: 4;
566563
}
567564

@@ -778,10 +775,6 @@ del {
778775
color: var(--pico-del-color);
779776
}
780777

781-
::-moz-selection {
782-
background-color: var(--pico-text-selection-color);
783-
}
784-
785778
::selection {
786779
background-color: var(--pico-text-selection-color);
787780
}
@@ -797,13 +790,10 @@ del {
797790
outline: none;
798791
background-color: var(--pico-background-color);
799792
color: var(--pico-color);
800-
-webkit-text-decoration: var(--pico-text-decoration);
801793
text-decoration: var(--pico-text-decoration);
802794
text-decoration-color: var(--pico-underline);
803795
text-underline-offset: 0.125em;
804-
transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
805796
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
806-
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
807797
}
808798
:where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
809799
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
@@ -860,8 +850,6 @@ button,
860850
text-align: center;
861851
text-decoration: none;
862852
cursor: pointer;
863-
-webkit-user-select: none;
864-
-moz-user-select: none;
865853
user-select: none;
866854
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
867855
}
@@ -1194,8 +1182,6 @@ textarea {
11941182
input:not([type=checkbox], [type=radio], [type=range], [type=file]),
11951183
select,
11961184
textarea {
1197-
-webkit-appearance: none;
1198-
-moz-appearance: none;
11991185
appearance: none;
12001186
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
12011187
}
@@ -1384,7 +1370,6 @@ label > :where(input, select, textarea) {
13841370
* Checkboxes, Radios and Switches
13851371
*/
13861372
label:has([type=checkbox], [type=radio]) {
1387-
width: -moz-fit-content;
13881373
width: fit-content;
13891374
cursor: pointer;
13901375
}
@@ -1616,23 +1601,20 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
16161601
height: 0.375rem;
16171602
border-radius: var(--pico-border-radius);
16181603
background-color: var(--pico-range-border-color);
1619-
-webkit-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
16201604
transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
16211605
}
16221606
[type=range]::-moz-range-track {
16231607
width: 100%;
16241608
height: 0.375rem;
16251609
border-radius: var(--pico-border-radius);
16261610
background-color: var(--pico-range-border-color);
1627-
-moz-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
16281611
transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
16291612
}
16301613
[type=range]::-ms-track {
16311614
width: 100%;
16321615
height: 0.375rem;
16331616
border-radius: var(--pico-border-radius);
16341617
background-color: var(--pico-range-border-color);
1635-
-ms-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
16361618
transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
16371619
}
16381620
[type=range]::-webkit-slider-thumb {
@@ -1644,7 +1626,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
16441626
border-radius: 50%;
16451627
background-color: var(--pico-range-thumb-color);
16461628
cursor: pointer;
1647-
-webkit-transition: background-color var(--pico-transition), transform var(--pico-transition);
16481629
transition: background-color var(--pico-transition), transform var(--pico-transition);
16491630
}
16501631
[type=range]::-moz-range-thumb {
@@ -1656,7 +1637,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
16561637
border-radius: 50%;
16571638
background-color: var(--pico-range-thumb-color);
16581639
cursor: pointer;
1659-
-moz-transition: background-color var(--pico-transition), transform var(--pico-transition);
16601640
transition: background-color var(--pico-transition), transform var(--pico-transition);
16611641
}
16621642
[type=range]::-ms-thumb {
@@ -1668,7 +1648,6 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
16681648
border-radius: 50%;
16691649
background-color: var(--pico-range-thumb-color);
16701650
cursor: pointer;
1671-
-ms-transition: background-color var(--pico-transition), transform var(--pico-transition);
16721651
transition: background-color var(--pico-transition), transform var(--pico-transition);
16731652
}
16741653
[type=range]:active, [type=range]:focus-within {
@@ -2003,7 +1982,6 @@ dialog {
20031982
min-height: 100%;
20041983
padding: 0;
20051984
border: 0;
2006-
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
20071985
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
20081986
background-color: var(--pico-modal-overlay-background-color);
20091987
color: var(--pico-color);
@@ -2115,6 +2093,7 @@ nav li :where(a, [role=link]):not(:hover) {
21152093
}
21162094
nav li button,
21172095
nav li [role=button],
2096+
nav li [type=button],
21182097
nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
21192098
nav li select {
21202099
height: auto;
@@ -2200,7 +2179,6 @@ progress::-webkit-progress-bar {
22002179
}
22012180
progress[value]::-webkit-progress-value {
22022181
background-color: var(--pico-progress-color);
2203-
-webkit-transition: inline-size var(--pico-transition);
22042182
transition: inline-size var(--pico-transition);
22052183
}
22062184
progress::-moz-progress-bar {

‎css/pico.conditional.css‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -617,7 +617,6 @@ nav details.dropdown summary:focus-visible {
617617
:where(:root) {
618618
-webkit-tap-highlight-color: transparent;
619619
-webkit-text-size-adjust: 100%;
620-
-moz-text-size-adjust: 100%;
621620
text-size-adjust: 100%;
622621
background-color: var(--pico-background-color);
623622
color: var(--pico-color);
@@ -628,8 +627,6 @@ nav details.dropdown summary:focus-visible {
628627
text-underline-offset: var(--pico-text-underline-offset);
629628
text-rendering: optimizeLegibility;
630629
overflow-wrap: break-word;
631-
-moz-tab-size: 4;
632-
-o-tab-size: 4;
633630
tab-size: 4;
634631
}
635632

@@ -882,10 +879,6 @@ main {
882879
color: var(--pico-del-color);
883880
}
884881

885-
.pico ::-moz-selection {
886-
background-color: var(--pico-text-selection-color);
887-
}
888-
889882
.pico ::selection {
890883
background-color: var(--pico-text-selection-color);
891884
}
@@ -901,13 +894,10 @@ main {
901894
outline: none;
902895
background-color: var(--pico-background-color);
903896
color: var(--pico-color);
904-
-webkit-text-decoration: var(--pico-text-decoration);
905897
text-decoration: var(--pico-text-decoration);
906898
text-decoration-color: var(--pico-underline);
907899
text-underline-offset: 0.125em;
908-
transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
909900
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
910-
transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
911901
}
912902
.pico :where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
913903
.pico [role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
@@ -984,8 +974,6 @@ main {
984974
text-align: center;
985975
text-decoration: none;
986976
cursor: pointer;
987-
-webkit-user-select: none;
988-
-moz-user-select: none;
989977
user-select: none;
990978
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
991979
}
@@ -1370,8 +1358,6 @@ main {
13701358
.pico input:not([type=checkbox], [type=radio], [type=range], [type=file]),
13711359
.pico select,
13721360
.pico textarea {
1373-
-webkit-appearance: none;
1374-
-moz-appearance: none;
13751361
appearance: none;
13761362
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
13771363
}
@@ -1560,7 +1546,6 @@ main {
15601546
* Checkboxes, Radios and Switches
15611547
*/
15621548
.pico label:has([type=checkbox], [type=radio]) {
1563-
width: -moz-fit-content;
15641549
width: fit-content;
15651550
cursor: pointer;
15661551
}
@@ -1792,23 +1777,20 @@ main {
17921777
height: 0.375rem;
17931778
border-radius: var(--pico-border-radius);
17941779
background-color: var(--pico-range-border-color);
1795-
-webkit-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
17961780
transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
17971781
}
17981782
.pico [type=range]::-moz-range-track {
17991783
width: 100%;
18001784
height: 0.375rem;
18011785
border-radius: var(--pico-border-radius);
18021786
background-color: var(--pico-range-border-color);
1803-
-moz-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
18041787
transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
18051788
}
18061789
.pico [type=range]::-ms-track {
18071790
width: 100%;
18081791
height: 0.375rem;
18091792
border-radius: var(--pico-border-radius);
18101793
background-color: var(--pico-range-border-color);
1811-
-ms-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
18121794
transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
18131795
}
18141796
.pico [type=range]::-webkit-slider-thumb {
@@ -1820,7 +1802,6 @@ main {
18201802
border-radius: 50%;
18211803
background-color: var(--pico-range-thumb-color);
18221804
cursor: pointer;
1823-
-webkit-transition: background-color var(--pico-transition), transform var(--pico-transition);
18241805
transition: background-color var(--pico-transition), transform var(--pico-transition);
18251806
}
18261807
.pico [type=range]::-moz-range-thumb {
@@ -1832,7 +1813,6 @@ main {
18321813
border-radius: 50%;
18331814
background-color: var(--pico-range-thumb-color);
18341815
cursor: pointer;
1835-
-moz-transition: background-color var(--pico-transition), transform var(--pico-transition);
18361816
transition: background-color var(--pico-transition), transform var(--pico-transition);
18371817
}
18381818
.pico [type=range]::-ms-thumb {
@@ -1844,7 +1824,6 @@ main {
18441824
border-radius: 50%;
18451825
background-color: var(--pico-range-thumb-color);
18461826
cursor: pointer;
1847-
-ms-transition: background-color var(--pico-transition), transform var(--pico-transition);
18481827
transition: background-color var(--pico-transition), transform var(--pico-transition);
18491828
}
18501829
.pico [type=range]:active, .pico [type=range]:focus-within {
@@ -2032,8 +2011,6 @@ main {
20322011
color: var(--pico-form-element-placeholder-color);
20332012
line-height: inherit;
20342013
cursor: pointer;
2035-
-webkit-user-select: none;
2036-
-moz-user-select: none;
20372014
user-select: none;
20382015
transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
20392016
}
@@ -2080,7 +2057,6 @@ main {
20802057
left: 0;
20812058
flex-direction: column;
20822059
width: 100%;
2083-
min-width: -moz-fit-content;
20842060
min-width: fit-content;
20852061
margin: 0;
20862062
margin-top: var(--pico-outline-width);
@@ -2339,7 +2315,6 @@ main {
23392315
min-height: 100%;
23402316
padding: 0;
23412317
border: 0;
2342-
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
23432318
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
23442319
background-color: var(--pico-modal-overlay-background-color);
23452320
color: var(--pico-color);
@@ -2437,7 +2412,6 @@ main {
24372412

24382413
@keyframes modal-overlay {
24392414
from {
2440-
-webkit-backdrop-filter: none;
24412415
backdrop-filter: none;
24422416
background-color: transparent;
24432417
}
@@ -2496,6 +2470,7 @@ main {
24962470
}
24972471
.pico nav li button,
24982472
.pico nav li [role=button],
2473+
.pico nav li [type=button],
24992474
.pico nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
25002475
.pico nav li select {
25012476
height: auto;
@@ -2581,7 +2556,6 @@ main {
25812556
}
25822557
.pico progress[value]::-webkit-progress-value {
25832558
background-color: var(--pico-progress-color);
2584-
-webkit-transition: inline-size var(--pico-transition);
25852559
transition: inline-size var(--pico-transition);
25862560
}
25872561
.pico progress::-moz-progress-bar {

0 commit comments

Comments
 (0)