Skip to content

Commit fe54017

Browse files
inikolovainikolova
committed
chore(button): set default appearance
1 parent a1d657f commit fe54017

File tree

5 files changed

+67
-11
lines changed

5 files changed

+67
-11
lines changed

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@
3232
position: relative;
3333
transition: $kendo-button-transition;
3434

35+
font-size: $kendo-button-font-size;
36+
line-height: $kendo-button-line-height;
37+
padding-block: $kendo-button-default-padding-y;
38+
padding-inline: $kendo-button-default-padding-x;
39+
3540
*,
3641
*::before,
3742
*::after {
@@ -74,8 +79,22 @@
7479
position: relative;
7580
}
7681

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

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

8099
// Sizes
81100
@each $size, $size-props in $kendo-button-sizes {

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

Lines changed: 9 additions & 5 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,
@@ -86,7 +86,7 @@
8686
$_button-active-bg: k-color(#{$name}-active);
8787
$_button-active-border: k-color(#{$name}-active);
8888

89-
.k-button-solid-#{$name} {
89+
.k-button-#{$name} {
9090
@include fill(
9191
$_button-text,
9292
$_button-bg,
@@ -146,14 +146,18 @@
146146
}
147147
}
148148

149+
.k-button-outline {
150+
background-color: transparent;
151+
@include box-shadow( none );
152+
}
149153

150154
// Outline button
151155
@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 );
156+
.k-button-outline.k-button-#{$name} {
157+
// @include box-shadow( none );
154158
border-color: currentColor;
155159
color: k-color(#{$name}-on-surface);
156-
background-color: transparent;
160+
// background-color: transparent;
157161

158162
// Hover state
159163
&:hover,

‎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/window/_layout.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -168,10 +168,10 @@
168168

169169
// Resize Handles
170170
.k-window { // stylelint-disable-line
171-
.k-resize-n { inset-block-start: 0; }
172-
.k-resize-e { inset-inline-end: 0; }
173-
.k-resize-s { inset-block-end: 0; }
174-
.k-resize-w { inset-inline-start: 0; }
171+
.k-resize-n { top: 0; }
172+
.k-resize-e { right: 0; }
173+
.k-resize-s { bottom: 0; }
174+
.k-resize-w { left: 0; }
175175
}
176176

177177
}

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ $kendo-button-border-width: 1px !default;
1010

1111
/// The border radius of the Button.
1212
/// @group button
13-
$kendo-button-border-radius: null !default;
13+
$kendo-button-border-radius: k-border-radius(md) !default;
1414

15+
$kendo-button-default-padding-x: k-spacing(2) !default;
1516
/// The horizontal padding of the small Button.
1617
/// @group button
1718
$kendo-button-sm-padding-x: k-spacing(2) !default;
@@ -21,7 +22,11 @@ $kendo-button-md-padding-x: k-spacing(2) !default;
2122
/// The horizontal padding of the large Button.
2223
/// @group button
2324
$kendo-button-lg-padding-x: k-spacing(2) !default;
25+
/// The horizontal padding of the none Button.
26+
/// @group button
27+
$kendo-button-none-padding-x: 0 !default;
2428

29+
$kendo-button-default-padding-y: k-spacing(1) !default;
2530
/// The vertical padding of the small Button.
2631
/// @group button
2732
$kendo-button-sm-padding-y: k-spacing(0.5) !default;
@@ -31,6 +36,9 @@ $kendo-button-md-padding-y: k-spacing(1) !default;
3136
/// The vertical padding of the large Button.
3237
/// @group button
3338
$kendo-button-lg-padding-y: k-spacing(2) !default;
39+
/// The horizontal padding of the none Button.
40+
/// @group button
41+
$kendo-button-none-padding-y: 0 !default;
3442

3543
/// The font family of the Button.
3644
/// @group button
@@ -51,6 +59,10 @@ $kendo-button-md-font-size: $kendo-button-font-size !default;
5159
/// The font size of the large Button.
5260
/// @group button
5361
$kendo-button-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
62+
/// The font size of the none Button.
63+
/// @group button
64+
$kendo-button-none-font-size: var( --kendo-font-size, inherit ) !default;
65+
5466

5567
/// The line height used along with the $kendo-font-size the.
5668
/// @group button
@@ -64,6 +76,9 @@ $kendo-button-md-line-height: $kendo-button-line-height !default;
6476
/// The line height used along with the $kendo-font-size the of the large Button.
6577
/// @group button
6678
$kendo-button-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
79+
/// The line height used along with the $kendo-font-size the of the none Button.
80+
/// @group button
81+
$kendo-button-none-line-height: var( --kendo-line-height, normal ) !default;
6782

6883
/// The calculated height of the Button.
6984
/// @group button
@@ -98,6 +113,12 @@ $kendo-button-sizes: (
98113
padding-y: $kendo-button-lg-padding-y,
99114
font-size: $kendo-button-lg-font-size,
100115
line-height: $kendo-button-lg-line-height
116+
),
117+
size-none: (
118+
padding-x: $kendo-button-none-padding-x,
119+
padding-y: $kendo-button-none-padding-y,
120+
font-size: $kendo-button-none-font-size,
121+
line-height: $kendo-button-none-line-height
101122
)
102123
) !default;
103124

@@ -260,12 +281,16 @@ $kendo-button-transition: color .2s ease-in-out !default;
260281
@forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with (
261282
$kendo-button-border-width: $kendo-button-border-width,
262283
$kendo-button-border-radius: $kendo-button-border-radius,
284+
$kendo-button-default-padding-x: $kendo-button-default-padding-x,
263285
$kendo-button-sm-padding-x: $kendo-button-sm-padding-x,
264286
$kendo-button-md-padding-x: $kendo-button-md-padding-x,
265287
$kendo-button-lg-padding-x: $kendo-button-lg-padding-x,
288+
$kendo-button-none-padding-x: $kendo-button-none-padding-x,
289+
$kendo-button-default-padding-y: $kendo-button-default-padding-y,
266290
$kendo-button-sm-padding-y: $kendo-button-sm-padding-y,
267291
$kendo-button-md-padding-y: $kendo-button-md-padding-y,
268292
$kendo-button-lg-padding-y: $kendo-button-lg-padding-y,
293+
$kendo-button-none-padding-y: $kendo-button-none-padding-y,
269294
$kendo-button-font-family: $kendo-button-font-family,
270295
$kendo-button-font-weight: $kendo-button-font-weight,
271296
$kendo-button-font-size: $kendo-button-font-size,

0 commit comments

Comments
 (0)