Skip to content

Commit

Permalink
fix: extract split-button styles as a separate module
Browse files Browse the repository at this point in the history
  • Loading branch information
@Juveniel @joneff
Juveniel authored and joneff committed Apr 15, 2022
1 parent fc94a37 commit b52a8ba
Show file tree
Hide file tree
Showing 32 changed files with 184 additions and 111 deletions.
2 changes: 0 additions & 2 deletions packages/bootstrap/scss/button/_index.scss
View file
Expand Up @@ -4,8 +4,6 @@
// Dependencies
@import "../badge/_index.scss";
@import "../icons/_index.scss";
@import "../popup/_index.scss";
@import "../list/_index.scss";
@import "../typography/_variables.scss";


Expand Down
14 changes: 0 additions & 14 deletions packages/bootstrap/scss/button/_variables.scss
View file
Expand Up @@ -48,20 +48,6 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
/// @group button
$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;

/// Horizontal padding of the arrow button.
/// @group button
$kendo-button-arrow-padding-x: $kendo-button-padding-y !default;
$kendo-button-arrow-padding-x-sm: $kendo-button-padding-y-sm !default;
$kendo-button-arrow-padding-x-md: $kendo-button-padding-y-md !default;
$kendo-button-arrow-padding-x-lg: $kendo-button-padding-y-lg !default;

/// Vertical padding of the arrow button.
/// @group button
$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
$kendo-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
$kendo-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
$kendo-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;

/// Theme colors map for the button.
/// @group button
$kendo-button-theme-colors: map-merge(
Expand Down
1 change: 1 addition & 0 deletions packages/bootstrap/scss/index.scss
View file
Expand Up @@ -42,6 +42,7 @@

// Native forms
@import "button/_index.scss";
@import "split-button/_index.scss";
@import "input/_index.scss";
@import "textbox/_index.scss";
@import "textarea/_index.scss";
Expand Down
12 changes: 12 additions & 0 deletions packages/bootstrap/scss/split-button/_index.scss
View file
@@ -0,0 +1,12 @@
@import "../core/_index.scss";


// Dependencies
@import "../button/_index.scss";
@import "../menu/_index.scss";


// Component
@import "_variables.scss";
@import "_layout.scss";
@import "_theme.scss";
1 change: 1 addition & 0 deletions packages/bootstrap/scss/split-button/_layout.scss
View file
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/split-button/_layout.scss";
1 change: 1 addition & 0 deletions packages/bootstrap/scss/split-button/_theme.scss
View file
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/split-button/_theme.scss";
19 changes: 19 additions & 0 deletions packages/bootstrap/scss/split-button/_variables.scss
View file
@@ -0,0 +1,19 @@
// Split-button

/// Focus shadow of the split button.
/// @group split-button
$kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;

/// Horizontal padding of the arrow button.
/// @group split-button
$kendo-split-button-arrow-padding-x: $kendo-button-padding-y !default;
$kendo-split-button-arrow-padding-x-sm: $kendo-button-padding-y-sm !default;
$kendo-split-button-arrow-padding-x-md: $kendo-button-padding-y-md !default;
$kendo-split-button-arrow-padding-x-lg: $kendo-button-padding-y-lg !default;

/// Vertical padding of the arrow button.
/// @group split-button
$kendo-split-button-arrow-padding-y: $kendo-button-padding-y !default;
$kendo-split-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
$kendo-split-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
$kendo-split-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;
2 changes: 0 additions & 2 deletions packages/classic/scss/button/_index.scss
View file
Expand Up @@ -4,8 +4,6 @@
// Dependencies
@import "../badge/_index.scss";
@import "../icons/_index.scss";
@import "../popup/_index.scss";
@import "../list/_index.scss";
@import "../typography/_variables.scss";

// Component
Expand Down
14 changes: 0 additions & 14 deletions packages/classic/scss/button/_variables.scss
View file
Expand Up @@ -48,20 +48,6 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
/// @group button
$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;

/// Horizontal padding of the arrow button.
/// @group button
$kendo-button-arrow-padding-x: $kendo-button-padding-y !default;
$kendo-button-arrow-padding-x-sm: $kendo-button-padding-y-sm !default;
$kendo-button-arrow-padding-x-md: $kendo-button-padding-y-md !default;
$kendo-button-arrow-padding-x-lg: $kendo-button-padding-y-lg !default;

/// Vertical padding of the arrow button.
/// @group button
$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
$kendo-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
$kendo-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
$kendo-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;

/// Theme colors map for the button.
/// @group button
$kendo-button-theme-colors: map-merge(
Expand Down
1 change: 1 addition & 0 deletions packages/classic/scss/index.scss
View file
Expand Up @@ -42,6 +42,7 @@

// Native forms
@import "button/_index.scss";
@import "split-button/_index.scss";
@import "input/_index.scss";
@import "textbox/_index.scss";
@import "textarea/_index.scss";
Expand Down
12 changes: 12 additions & 0 deletions packages/classic/scss/split-button/_index.scss
View file
@@ -0,0 +1,12 @@
@import "../core/_index.scss";


// Dependencies
@import "../button/_index.scss";
@import "../menu/_index.scss";


// Component
@import "_variables.scss";
@import "_layout.scss";
@import "_theme.scss";
1 change: 1 addition & 0 deletions packages/classic/scss/split-button/_layout.scss
View file
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/split-button/_layout.scss";
1 change: 1 addition & 0 deletions packages/classic/scss/split-button/_theme.scss
View file
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/split-button/_theme.scss";
19 changes: 19 additions & 0 deletions packages/classic/scss/split-button/_variables.scss
View file
@@ -0,0 +1,19 @@
// Split-button

/// Focus shadow of the split button.
/// @group split-button
$kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;

/// Horizontal padding of the arrow button.
/// @group split-button
$kendo-split-button-arrow-padding-x: $kendo-button-padding-y !default;
$kendo-split-button-arrow-padding-x-sm: $kendo-button-padding-y-sm !default;
$kendo-split-button-arrow-padding-x-md: $kendo-button-padding-y-md !default;
$kendo-split-button-arrow-padding-x-lg: $kendo-button-padding-y-lg !default;

/// Vertical padding of the arrow button.
/// @group split-button
$kendo-split-button-arrow-padding-y: $kendo-button-padding-y !default;
$kendo-split-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
$kendo-split-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
$kendo-split-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;
2 changes: 0 additions & 2 deletions packages/default/scss/button/_index.scss
View file
Expand Up @@ -4,8 +4,6 @@
// Dependencies
@import "../badge/_index.scss";
@import "../icons/_index.scss";
@import "../popup/_index.scss";
@import "../list/_index.scss";
@import "../typography/_variables.scss";


Expand Down
31 changes: 1 addition & 30 deletions packages/default/scss/button/_layout.scss
View file
Expand Up @@ -210,34 +210,6 @@
}


// Split button
.k-split-button {

.k-split-button-arrow {
padding: $kendo-button-arrow-padding-y $kendo-button-arrow-padding-x;
width: auto;
aspect-ratio: auto;
flex: none;

&.k-button-sm {
padding: $kendo-button-arrow-padding-y-sm $kendo-button-arrow-padding-x-sm;
}

&.k-button-md {
padding: $kendo-button-arrow-padding-y-md $kendo-button-arrow-padding-x-md;
}

&.k-button-lg {
padding: $kendo-button-arrow-padding-y-lg $kendo-button-arrow-padding-x-lg;
}

.k-button-icon {
min-width: 0;
}
}
}


// Flat button
.k-button-flat {
border-color: transparent !important; // sass-lint:disable-line no-important
Expand Down Expand Up @@ -296,8 +268,7 @@


// IE
.k-ie .k-button-group,
.k-ie .k-split-button {
.k-ie .k-button-group {
.k-button {
@include border-radius( 0 );
}
Expand Down
6 changes: 0 additions & 6 deletions packages/default/scss/button/_theme.scss
View file
Expand Up @@ -280,10 +280,4 @@
.k-button-group {}


// Split button
.k-split-button:focus,
.k-split-button.k-focus {
@include box-shadow( $kendo-button-focus-shadow );
}

}
14 changes: 0 additions & 14 deletions packages/default/scss/button/_variables.scss
View file
Expand Up @@ -48,20 +48,6 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
/// @group button
$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;

/// Horizontal padding of the arrow button.
/// @group button
$kendo-button-arrow-padding-x: $kendo-button-padding-y !default;
$kendo-button-arrow-padding-x-sm: $kendo-button-padding-y-sm !default;
$kendo-button-arrow-padding-x-md: $kendo-button-padding-y-md !default;
$kendo-button-arrow-padding-x-lg: $kendo-button-padding-y-lg !default;

/// Vertical padding of the arrow button.
/// @group button
$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
$kendo-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
$kendo-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
$kendo-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;

/// Theme colors map for the button.
/// @group button
$kendo-button-theme-colors: map-merge(
Expand Down
1 change: 1 addition & 0 deletions packages/default/scss/index.scss
View file
Expand Up @@ -42,6 +42,7 @@

// Native forms
@import "button/_index.scss";
@import "split-button/_index.scss";
@import "input/_index.scss";
@import "textbox/_index.scss";
@import "textarea/_index.scss";
Expand Down
12 changes: 12 additions & 0 deletions packages/default/scss/split-button/_index.scss
View file
@@ -0,0 +1,12 @@
@import "../core/_index.scss";


// Dependencies
@import "../button/_index.scss";
@import "../menu/_index.scss";


// Component
@import "_variables.scss";
@import "_layout.scss";
@import "_theme.scss";
40 changes: 40 additions & 0 deletions packages/default/scss/split-button/_layout.scss
View file
@@ -0,0 +1,40 @@
@include exports("split-button/layout") {


// Split button arrow
.k-split-button .k-split-button-arrow {
padding: $kendo-split-button-arrow-padding-y $kendo-split-button-arrow-padding-x;
width: auto;
aspect-ratio: auto;
flex: none;

&.k-button-sm {
padding: $kendo-split-button-arrow-padding-y-sm $kendo-split-button-arrow-padding-x-sm;
}

&.k-button-md {
padding: $kendo-split-button-arrow-padding-y-md $kendo-split-button-arrow-padding-x-md;
}

&.k-button-lg {
padding: $kendo-split-button-arrow-padding-y-lg $kendo-split-button-arrow-padding-x-lg;
}

.k-button-icon {
min-width: 0;
}
}


}


@include exports("split-button/layout/legacy") {

.k-ie .k-split-button {
.k-button {
@include border-radius( 0 );
}
}

}
9 changes: 9 additions & 0 deletions packages/default/scss/split-button/_theme.scss
View file
@@ -0,0 +1,9 @@
@include exports("split-button/theme") {

// Split button
.k-split-button:focus,
.k-split-button.k-focus {
@include box-shadow( $kendo-split-button-focus-shadow );
}

}
19 changes: 19 additions & 0 deletions packages/default/scss/split-button/_variables.scss
View file
@@ -0,0 +1,19 @@
// Split-button

/// Focus shadow of the split button.
/// @group split-button
$kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;

/// Horizontal padding of the arrow button.
/// @group split-button
$kendo-split-button-arrow-padding-x: $kendo-button-padding-y !default;
$kendo-split-button-arrow-padding-x-sm: $kendo-button-padding-y-sm !default;
$kendo-split-button-arrow-padding-x-md: $kendo-button-padding-y-md !default;
$kendo-split-button-arrow-padding-x-lg: $kendo-button-padding-y-lg !default;

/// Vertical padding of the arrow button.
/// @group split-button
$kendo-split-button-arrow-padding-y: $kendo-button-padding-y !default;
$kendo-split-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
$kendo-split-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
$kendo-split-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;
2 changes: 0 additions & 2 deletions packages/material/scss/button/_index.scss
View file
Expand Up @@ -4,8 +4,6 @@
// Dependencies
@import "../badge/_index.scss";
@import "../icons/_index.scss";
@import "../popup/_index.scss";
@import "../list/_index.scss";
@import "../typography/_variables.scss";


Expand Down
4 changes: 0 additions & 4 deletions packages/material/scss/button/_layout.scss
View file
Expand Up @@ -74,10 +74,6 @@
.k-button-group {}


// Split button
.k-split-button {}


// Popup button group
.k-overflow-button,
.k-overflow-group {
Expand Down
7 changes: 0 additions & 7 deletions packages/material/scss/button/_theme.scss
View file
Expand Up @@ -100,13 +100,6 @@
}


// Split button
.k-split-button:focus,
.k-split-button.k-focus {
// @include box-shadow( $kendo-button-focus-shadow );
}


// Variant button group
.k-button-group-flat,
.k-button-group-link,
Expand Down
14 changes: 0 additions & 14 deletions packages/material/scss/button/_variables.scss
View file
Expand Up @@ -48,20 +48,6 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
/// @group button
$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;

/// Horizontal padding of the arrow button.
/// @group button
$kendo-button-arrow-padding-x: map-get( $spacing, 1 ) !default;
$kendo-button-arrow-padding-x-sm: map-get( $spacing, 1 ) !default;
$kendo-button-arrow-padding-x-md: map-get( $spacing, 1 ) !default;
$kendo-button-arrow-padding-x-lg: map-get( $spacing, 1 ) !default;

/// Vertical padding of the arrow button.
/// @group button
$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
$kendo-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
$kendo-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
$kendo-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;

/// Theme colors map for the button.
/// @group button
$kendo-button-theme-colors: map-merge(
Expand Down
1 change: 1 addition & 0 deletions packages/material/scss/index.scss
View file
Expand Up @@ -42,6 +42,7 @@

// Native forms
@import "button/_index.scss";
@import "split-button/_index.scss";
@import "input/_index.scss";
@import "textbox/_index.scss";
@import "textarea/_index.scss";
Expand Down

0 comments on commit b52a8ba

Please sign in to comment.