Skip to content

Commit f6b3e95

Browse files
pat270pat270
committed
feat(@clayui/css): Buttons convert .btn-lg and .btn-sm to use clay-button-variant mixin
feat(@clayui/css): Buttons adds `$btn-lg` and `$btn-sm` Sass maps
1 parent 617befc commit f6b3e95

File tree

3 files changed

+88
-49
lines changed

3 files changed

+88
-49
lines changed

‎packages/clay-css/src/scss/atlas/variables/_buttons.scss

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,19 +42,50 @@ $btn: map-deep-merge(
4242

4343
$btn-link-disabled-color: $link-color !default;
4444

45-
// Button Sizes
45+
// Button Lg
4646

4747
$btn-border-radius-lg: $border-radius !default;
4848
$btn-font-size-lg: $font-size-lg !default; // 18px
4949
$btn-padding-x-lg: 1.5rem !default; // 24px
5050
$btn-padding-y-lg: 0.59375rem !default; // 9.5px
5151
$btn-inline-item-font-size-lg: $font-size-lg !default; // 18px
5252

53+
$btn-lg: () !default;
54+
$btn-lg: map-deep-merge(
55+
(
56+
border-radius: clay-enable-rounded($btn-border-radius-lg),
57+
font-size: $btn-font-size-lg,
58+
padding-bottom: $btn-padding-y-lg,
59+
padding-left: $btn-padding-x-lg,
60+
padding-right: $btn-padding-x-lg,
61+
padding-top: $btn-padding-y-lg,
62+
inline-item: (
63+
font-size: $btn-inline-item-font-size-lg,
64+
),
65+
),
66+
$btn-lg
67+
);
68+
69+
// Button Sm
70+
5371
$btn-font-size-sm: $font-size-sm !default; // 14px
5472
$btn-line-height-sm: 1.15 !default;
5573
$btn-padding-x-sm: 0.75rem !default; // 12px
5674
$btn-padding-y-sm: 0.4375rem !default; // 7px
5775

76+
$btn-sm: () !default;
77+
$btn-sm: map-deep-merge(
78+
(
79+
font-size: $btn-font-size-sm,
80+
line-height: $btn-line-height-sm,
81+
padding-bottom: $btn-padding-y-sm,
82+
padding-left: $btn-padding-x-sm,
83+
padding-right: $btn-padding-x-sm,
84+
padding-top: $btn-padding-y-sm,
85+
),
86+
$btn-sm
87+
);
88+
5889
// Button Monospaced
5990

6091
$btn-monospaced-padding-y: 0.25rem !default; // 4px

‎packages/clay-css/src/scss/components/_buttons.scss

Lines changed: 2 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -19,61 +19,15 @@ fieldset:disabled a.btn {
1919
// Button Sizes
2020

2121
%clay-btn-lg {
22-
@include border-radius($btn-border-radius-lg, 0);
23-
24-
font-size: $btn-font-size-lg;
25-
line-height: $btn-line-height-lg;
26-
padding-bottom: $btn-padding-y-lg;
27-
padding-left: $btn-padding-x-lg;
28-
padding-right: $btn-padding-x-lg;
29-
padding-top: $btn-padding-y-lg;
30-
31-
@include clay-scale-component {
32-
font-size: $btn-font-size-lg-mobile;
33-
padding-bottom: $btn-padding-y-lg-mobile;
34-
padding-left: $btn-padding-x-lg-mobile;
35-
padding-right: $btn-padding-x-lg-mobile;
36-
padding-top: $btn-padding-y-lg-mobile;
37-
}
38-
39-
.inline-item {
40-
font-size: $btn-inline-item-font-size-lg;
41-
}
42-
43-
.btn-section {
44-
font-size: $btn-section-font-size-lg;
45-
}
22+
@include clay-button-variant($btn-lg);
4623
}
4724

4825
.btn-lg {
4926
@extend %clay-btn-lg !optional;
5027
}
5128

5229
%clay-btn-sm {
53-
@include border-radius($btn-border-radius-sm, 0);
54-
55-
font-size: $btn-font-size-sm;
56-
line-height: $btn-line-height-sm;
57-
padding-bottom: $btn-padding-y-sm;
58-
padding-left: $btn-padding-x-sm;
59-
padding-right: $btn-padding-x-sm;
60-
padding-top: $btn-padding-y-sm;
61-
62-
@include clay-scale-component {
63-
font-size: $btn-font-size-sm-mobile;
64-
padding-bottom: $btn-padding-y-sm-mobile;
65-
padding-left: $btn-padding-x-sm-mobile;
66-
padding-right: $btn-padding-x-sm-mobile;
67-
padding-top: $btn-padding-y-sm-mobile;
68-
}
69-
70-
.inline-item {
71-
font-size: $btn-inline-item-font-size-sm;
72-
}
73-
74-
.btn-section {
75-
font-size: $btn-section-font-size-sm;
76-
}
30+
@include clay-button-variant($btn-sm);
7731
}
7832

7933
.btn-sm {

‎packages/clay-css/src/scss/variables/_buttons.scss

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,33 @@ $btn-font-size-lg-mobile: null !default;
117117
$btn-padding-x-lg-mobile: null !default;
118118
$btn-padding-y-lg-mobile: null !default;
119119

120+
$btn-lg: () !default;
121+
$btn-lg: map-deep-merge(
122+
(
123+
border-radius: clay-enable-rounded($btn-border-radius-lg),
124+
font-size: $btn-font-size-lg,
125+
line-height: $btn-line-height-lg,
126+
padding-bottom: $btn-padding-y-lg,
127+
padding-left: $btn-padding-x-lg,
128+
padding-right: $btn-padding-x-lg,
129+
padding-top: $btn-padding-y-lg,
130+
mobile: (
131+
font-size: $btn-font-size-lg-mobile,
132+
padding-bottom: $btn-padding-y-lg-mobile,
133+
padding-left: $btn-padding-x-lg-mobile,
134+
padding-right: $btn-padding-x-lg-mobile,
135+
padding-top: $btn-padding-y-lg-mobile,
136+
),
137+
inline-item: (
138+
font-size: $btn-inline-item-font-size-lg,
139+
),
140+
btn-section: (
141+
font-size: $btn-section-font-size-lg,
142+
),
143+
),
144+
$btn-lg
145+
);
146+
120147
// Button Sm
121148

122149
$btn-border-radius-sm: $border-radius-sm !default;
@@ -131,6 +158,33 @@ $btn-font-size-sm-mobile: null !default;
131158
$btn-padding-x-sm-mobile: null !default;
132159
$btn-padding-y-sm-mobile: null !default;
133160

161+
$btn-sm: () !default;
162+
$btn-sm: map-deep-merge(
163+
(
164+
border-radius: clay-enable-rounded($btn-border-radius-sm),
165+
font-size: $btn-font-size-sm,
166+
line-height: $btn-line-height-sm,
167+
padding-bottom: $btn-padding-y-sm,
168+
padding-left: $btn-padding-x-sm,
169+
padding-right: $btn-padding-x-sm,
170+
padding-top: $btn-padding-y-sm,
171+
mobile: (
172+
font-size: $btn-font-size-sm-mobile,
173+
padding-bottom: $btn-padding-y-sm-mobile,
174+
padding-left: $btn-padding-x-sm-mobile,
175+
padding-right: $btn-padding-x-sm-mobile,
176+
padding-top: $btn-padding-y-sm-mobile,
177+
),
178+
inline-item: (
179+
font-size: $btn-inline-item-font-size-sm,
180+
),
181+
btn-section: (
182+
font-size: $btn-section-font-size-sm,
183+
),
184+
),
185+
$btn-sm
186+
);
187+
134188
// Button Monospaced
135189

136190
$btn-monospaced-padding-x: 0 !default;

0 commit comments

Comments
 (0)