Skip to content

Commit 37032fc

Browse files
inikolovainikolova
committed
chore(button): set default appearance
1 parent 9229866 commit 37032fc

File tree

6 files changed

+107
-18
lines changed

6 files changed

+107
-18
lines changed

‎packages/core/scss/components/button/_layout.scss‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
box-sizing: border-box;
1313
border-width: $kendo-button-border-width;
1414
border-style: solid;
15-
border-radius: $kendo-button-border-radius;
15+
1616
color: inherit;
1717
background: none;
1818
font-family: $kendo-button-font-family;
@@ -32,6 +32,12 @@
3232
position: relative;
3333
transition: $kendo-button-transition;
3434

35+
font-size: $kendo-button-font-size;
36+
line-height: $kendo-button-line-height;
37+
border-radius: $kendo-button-border-radius;
38+
padding-block: $kendo-button-default-padding-y;
39+
padding-inline: $kendo-button-default-padding-x;
40+
3541
*,
3642
*::before,
3743
*::after {
@@ -74,8 +80,22 @@
7480
position: relative;
7581
}
7682

77-
.k-button-text {}
83+
.k-icon-button {
84+
padding: $kendo-button-default-padding-y;
7885

86+
.k-button-icon {
87+
min-width: calc( #{$kendo-button-line-height} * #{$kendo-button-font-size} );
88+
min-height: calc( #{$kendo-button-line-height} * #{$kendo-button-font-size} );
89+
90+
&.k-svg-icon > svg,
91+
&.k-icon > svg {
92+
width: $kendo-icon-size;
93+
height: $kendo-icon-size;
94+
}
95+
}
96+
}
97+
98+
.k-button-text {}
7999

80100
// Sizes
81101
@each $size, $size-props in $kendo-button-sizes {
@@ -229,18 +249,18 @@
229249

230250
// Outline button
231251
.k-button-outline {
232-
border-color: currentColor;
233-
color: inherit;
234-
background: none;
252+
// border-color: currentColor;
253+
// color: inherit;
254+
// background: none;
235255
}
236256

237257

238258
// Link button
239259
.k-button-link {
240-
border-color: transparent;
260+
border-color: transparent !important; // stylelint-disable-line declaration-no-important
241261
color: inherit;
242262
text-decoration: none;
243-
background: none;
263+
background: none !important; // stylelint-disable-line declaration-no-important
244264

245265
&:hover,
246266
&.k-hover {

‎packages/core/scss/components/button/_theme.scss‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
@mixin kendo-button--theme-base() {
1010

1111
// Solid button
12-
.k-button-solid-base {
12+
.k-button {
1313
@include fill(
1414
$kendo-button-text,
1515
$kendo-button-bg,
@@ -70,6 +70,16 @@
7070
);
7171
@include box-shadow( $kendo-button-disabled-shadow );
7272
}
73+
74+
&:where(.k-button-flat) {
75+
color: inherit;
76+
}
77+
78+
&:where(.k-button-outline) {
79+
border-color: currentColor;
80+
color: inherit;
81+
background: none;
82+
}
7383
}
7484

7585
@each $name, $color in $kendo-button-theme-colors {
@@ -86,7 +96,7 @@
8696
$_button-active-bg: k-color(#{$name}-active);
8797
$_button-active-border: k-color(#{$name}-active);
8898

89-
.k-button-solid-#{$name} {
99+
.k-button-#{$name} {
90100
@include fill(
91101
$_button-text,
92102
$_button-bg,
@@ -144,16 +154,27 @@
144154
}
145155
}
146156
}
157+
@if ($name == "warning" or $name == "light") {
158+
.k-button-#{$name} {
159+
&.k-selected {
160+
color: inherit;
161+
}
162+
}
163+
}
147164
}
148165

166+
.k-button-outline {
167+
background-color: transparent;
168+
@include box-shadow( none );
169+
}
149170

150171
// Outline button
151172
@each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color(on-app-surface) ) ) {
152-
.k-button-outline-#{$name} {
153-
@include box-shadow( none );
173+
.k-button-outline.k-button-#{$name} {
174+
// @include box-shadow( none );
154175
border-color: currentColor;
155176
color: k-color(#{$name}-on-surface);
156-
background-color: transparent;
177+
// background-color: transparent;
157178

158179
// Hover state
159180
&:hover,
@@ -231,7 +252,7 @@
231252

232253
// Flat button
233254
@each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
234-
.k-button-flat-#{$name} {
255+
.k-button-flat.k-button-#{$name} {
235256
@if $name == "base" {
236257
color: inherit;
237258
} @else {
@@ -246,10 +267,9 @@
246267
}
247268
}
248269

249-
250270
// Link button
251271
@each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color(on-app-surface ) ) ) {
252-
.k-button-link-#{$name} {
272+
.k-button-link.k-button-#{$name} {
253273
color: $color;
254274

255275
// Hover
@@ -304,7 +324,7 @@
304324

305325
// Clear button
306326
@each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color(on-app-surface ) ) ) {
307-
.k-button-clear-#{$name} {
327+
.k-button-clear.k-button-#{$name} {
308328
color: k-color(#{$name}-on-surface);
309329

310330
&:focus,

‎packages/core/scss/components/button/_variables.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,34 @@ $kendo-button-border-width: null !default;
44

55
$kendo-button-border-radius: null !default;
66

7+
$kendo-button-default-padding-x: null !default;
78
$kendo-button-sm-padding-x: null !default;
89
$kendo-button-md-padding-x: null !default;
910
$kendo-button-lg-padding-x: null !default;
11+
$kendo-button-none-padding-x: null !default;
1012

13+
$kendo-button-default-padding-y: null !default;
1114
$kendo-button-sm-padding-y: null !default;
1215
$kendo-button-md-padding-y: null !default;
1316
$kendo-button-lg-padding-y: null !default;
17+
$kendo-button-none-padding-y: null !default;
1418

1519
$kendo-button-font-family: null !default;
1620
$kendo-button-font-weight: null !default;
1721

22+
// $kendo-button-default-font-size: null !default;
1823
$kendo-button-font-size: null !default;
1924
$kendo-button-sm-font-size: null !default;
2025
$kendo-button-md-font-size: null !default;
2126
$kendo-button-lg-font-size: null !default;
27+
$kendo-button-none-font-size: null !default;
2228

29+
// $kendo-button-default-line-height: null !default;
2330
$kendo-button-line-height: null !default;
2431
$kendo-button-sm-line-height: null !default;
2532
$kendo-button-md-line-height: null !default;
2633
$kendo-button-lg-line-height: null !default;
34+
$kendo-button-none-line-height: null !default;
2735

2836
$kendo-button-sm-calc-size: null !default;
2937
$kendo-button-md-calc-size: null !default;

‎packages/core/scss/components/input/_layout.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -365,7 +365,8 @@
365365
flex: none;
366366
aspect-ratio: auto;
367367
box-shadow: none;
368-
368+
border-radius: 0;
369+
369370
> .k-button-icon {
370371
min-width: auto !important; // stylelint-disable-line declaration-no-important
371372
// min-height: auto !important; // stylelint-disable-line declaration-no-important

‎packages/default/scss/button/_layout.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
@use "@progress/kendo-theme-core/scss/components/button/_layout.scss" as *;
2+
// @use "./variables" as *;
23

34

45
@mixin kendo-button--layout() {
56
@include kendo-button--layout-base();
7+
8+
// .k-button {
9+
// border-radius: $kendo-button-default-rounded;
10+
// @extend .k-rounded-full !optional;
11+
// @extend .k-rounded-#{$kendo-button-default-rounded};
12+
// }
613
}

‎packages/default/scss/button/_variables.scss‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,22 @@
44

55
// Button
66

7+
/// The default border radius for buttons in this theme
8+
/// @group button
9+
// $kendo-button-default-rounded: k-border-radius(full) !default;
10+
// $kendo-button-default-rounded: full !default;
11+
12+
13+
714
/// The width of the border around the Button.
815
/// @group button
916
$kendo-button-border-width: 1px !default;
1017

1118
/// The border radius of the Button.
1219
/// @group button
13-
$kendo-button-border-radius: null !default;
20+
$kendo-button-border-radius: k-border-radius(md) !default;
1421

22+
$kendo-button-default-padding-x: k-spacing(2) !default;
1523
/// The horizontal padding of the small Button.
1624
/// @group button
1725
$kendo-button-sm-padding-x: k-spacing(2) !default;
@@ -21,7 +29,11 @@ $kendo-button-md-padding-x: k-spacing(2) !default;
2129
/// The horizontal padding of the large Button.
2230
/// @group button
2331
$kendo-button-lg-padding-x: k-spacing(2) !default;
32+
/// The horizontal padding of the none Button.
33+
/// @group button
34+
$kendo-button-none-padding-x: 0 !default;
2435

36+
$kendo-button-default-padding-y: k-spacing(1) !default;
2537
/// The vertical padding of the small Button.
2638
/// @group button
2739
$kendo-button-sm-padding-y: k-spacing(0.5) !default;
@@ -31,6 +43,9 @@ $kendo-button-md-padding-y: k-spacing(1) !default;
3143
/// The vertical padding of the large Button.
3244
/// @group button
3345
$kendo-button-lg-padding-y: k-spacing(2) !default;
46+
/// The horizontal padding of the none Button.
47+
/// @group button
48+
$kendo-button-none-padding-y: 0 !default;
3449

3550
/// The font family of the Button.
3651
/// @group button
@@ -51,6 +66,10 @@ $kendo-button-md-font-size: $kendo-button-font-size !default;
5166
/// The font size of the large Button.
5267
/// @group button
5368
$kendo-button-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
69+
/// The font size of the none Button.
70+
/// @group button
71+
$kendo-button-none-font-size: var( --kendo-font-size, inherit ) !default;
72+
5473

5574
/// The line height used along with the $kendo-font-size the.
5675
/// @group button
@@ -64,6 +83,9 @@ $kendo-button-md-line-height: $kendo-button-line-height !default;
6483
/// The line height used along with the $kendo-font-size the of the large Button.
6584
/// @group button
6685
$kendo-button-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
86+
/// The line height used along with the $kendo-font-size the of the none Button.
87+
/// @group button
88+
$kendo-button-none-line-height: var( --kendo-line-height, normal ) !default;
6789

6890
/// The calculated height of the Button.
6991
/// @group button
@@ -98,6 +120,12 @@ $kendo-button-sizes: (
98120
padding-y: $kendo-button-lg-padding-y,
99121
font-size: $kendo-button-lg-font-size,
100122
line-height: $kendo-button-lg-line-height
123+
),
124+
size-none: (
125+
padding-x: $kendo-button-none-padding-x,
126+
padding-y: $kendo-button-none-padding-y,
127+
font-size: $kendo-button-none-font-size,
128+
line-height: $kendo-button-none-line-height
101129
)
102130
) !default;
103131

@@ -258,14 +286,19 @@ $kendo-flat-button-focus-ring-opacity: .12 !default;
258286
$kendo-button-transition: color .2s ease-in-out !default;
259287

260288
@forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with (
289+
// $kendo-button-default-rounded: $kendo-button-default-rounded, // For testing purpose only - ToDo - remove it
261290
$kendo-button-border-width: $kendo-button-border-width,
262291
$kendo-button-border-radius: $kendo-button-border-radius,
292+
$kendo-button-default-padding-x: $kendo-button-default-padding-x,
263293
$kendo-button-sm-padding-x: $kendo-button-sm-padding-x,
264294
$kendo-button-md-padding-x: $kendo-button-md-padding-x,
265295
$kendo-button-lg-padding-x: $kendo-button-lg-padding-x,
296+
$kendo-button-none-padding-x: $kendo-button-none-padding-x,
297+
$kendo-button-default-padding-y: $kendo-button-default-padding-y,
266298
$kendo-button-sm-padding-y: $kendo-button-sm-padding-y,
267299
$kendo-button-md-padding-y: $kendo-button-md-padding-y,
268300
$kendo-button-lg-padding-y: $kendo-button-lg-padding-y,
301+
$kendo-button-none-padding-y: $kendo-button-none-padding-y,
269302
$kendo-button-font-family: $kendo-button-font-family,
270303
$kendo-button-font-weight: $kendo-button-font-weight,
271304
$kendo-button-font-size: $kendo-button-font-size,

0 commit comments

Comments
 (0)