fix(toolbar): extract toolbar variables

telerik · Sep 30, 2020 · 5126f1d · 5126f1d
1 parent b19a8ff
commit 5126f1d
Show file tree

Hide file tree

Showing 16 changed files with 138 additions and 134 deletions.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -754,36 +754,6 @@ $drag-clue-line-height: null !default;
 $drag-clue-border-radius: null !default;
 
 
-// Toolbar
-
-/// The horizontal padding of the container.
-/// @group toolbar
-$toolbar-padding-x: $table-cell-padding / 2 !default;
-/// The vertical padding of the container.
-/// @group toolbar
-$toolbar-padding-y: $table-cell-padding / 2 !default;
-$toolbar-border-width: 1px !default;
-$toolbar-border-radius: null !default;
-$toolbar-spacing: $toolbar-padding-x !default;
-
-$toolbar-inner-calc-size: calc( #{$button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
-
-$toolbar-font-family: $font-family !default;
-$toolbar-font-size: $font-size !default;
-$toolbar-line-height: $line-height !default;
-
-$toolbar-bg: $header-bg !default;
-$toolbar-text: $header-text !default;
-$toolbar-border: $header-border !default;
-$toolbar-gradient: null !default;
-$toolbar-shadow: null !default;
-
-$toolbar-button-expanded-bg: null !default;
-$toolbar-button-expanded-shadow: none !default;
-
-$toolbar-separator-border: inherit !default;
-
-
 // Window
 $window-border-width: 1px !default;
 $window-border-radius: $border-radius !default;

diff --git a/packages/bootstrap/scss/forms/_index.scss b/packages/bootstrap/scss/forms/_index.scss
@@ -3,6 +3,7 @@
 
 
 // Dependencies
+@import "../toolbar/_index.scss"; // TODO: extract variables
 
 
 // Component

diff --git a/packages/bootstrap/scss/toolbar/_index.scss b/packages/bootstrap/scss/toolbar/_index.scss
@@ -10,5 +10,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/bootstrap/scss/toolbar/_variables.scss b/packages/bootstrap/scss/toolbar/_variables.scss
@@ -0,0 +1,28 @@
+// Toolbar
+
+/// The horizontal padding of the container.
+/// @group toolbar
+$toolbar-padding-x: $table-cell-padding / 2 !default;
+/// The vertical padding of the container.
+/// @group toolbar
+$toolbar-padding-y: $table-cell-padding / 2 !default;
+$toolbar-border-width: 1px !default;
+$toolbar-border-radius: null !default;
+$toolbar-spacing: $toolbar-padding-x !default;
+
+$toolbar-inner-calc-size: calc( #{$button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+
+$toolbar-font-family: $font-family !default;
+$toolbar-font-size: $font-size !default;
+$toolbar-line-height: $line-height !default;
+
+$toolbar-bg: $header-bg !default;
+$toolbar-text: $header-text !default;
+$toolbar-border: $header-border !default;
+$toolbar-gradient: null !default;
+$toolbar-shadow: null !default;
+
+$toolbar-button-expanded-bg: null !default;
+$toolbar-button-expanded-shadow: none !default;
+
+$toolbar-separator-border: inherit !default;
diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss
@@ -737,50 +737,6 @@ $drag-clue-line-height: null !default;
 $drag-clue-border-radius: null !default;
 
 
-// Toolbar
-
-$toolbar-bg: $button-bg !default;
-$toolbar-text: $button-text !default;
-$toolbar-border: $button-border !default;
-$toolbar-gradient: null !default;
-
-$toolbar-border-width: 1px !default;
-$toolbar-border-radius: 0px !default;
-
-/// The horizontal padding of the container.
-/// @group toolbar
-$toolbar-padding-x: $padding-x !default;
-
-/// The vertical padding of the container.
-/// @group toolbar
-$toolbar-padding-y: $padding-x !default;
-
-$toolbar-font-family: $font-family !default;
-$toolbar-font-size: $font-size !default;
-$toolbar-line-height: $line-height !default;
-
-$toolbar-spacing: $toolbar-padding-x !default;
-
-$toolbar-button-border-width: $button-border-width !default;
-$toolbar-button-border-radius: 0px !default;
-
-$toolbar-button-padding-x: $button-padding-x !default;
-$toolbar-button-padding-y: $button-padding-y !default;
-$toolbar-button-line-height: $button-line-height !default;
-
-$toolbar-button-calc-size: calc( #{$toolbar-button-line-height * 1em} + #{$toolbar-button-padding-y * 2} + #{$toolbar-button-border-width * 2} ) !default;
-$toolbar-button-inner-calc-size: calc( #{$toolbar-button-line-height * 1em} + #{$toolbar-button-padding-y * 2} ) !default;
-
-$toolbar-inner-calc-size: calc( #{$toolbar-button-line-height * 1em} + #{$toolbar-button-padding-y * 2} + #{$toolbar-button-border-width * 2} + #{$toolbar-padding-y * 2} ) !default;
-
-$toolbar-button-expanded-bg: null !default;
-$toolbar-button-expanded-shadow: none !default;
-
-$toolbar-shadow: none !default;
-$toolbar-separator-padding-y: $toolbar-button-padding-y !default;
-$toolbar-separator-border: inherit !default;
-
-
 // Window
 $window-border-width: 0 !default;
 $window-border-radius: 0 !default;

diff --git a/packages/classic/scss/forms/_index.scss b/packages/classic/scss/forms/_index.scss
@@ -1,2 +1,7 @@
+// Dependencies
+@import "../toolbar/_index.scss"; // TODO: extract variables
+
+
+// Component
 @import "~@progress/kendo-theme-default/scss/forms/_layout.scss";
 @import "~@progress/kendo-theme-default/scss/forms/_theme.scss";
diff --git a/packages/classic/scss/toolbar/_index.scss b/packages/classic/scss/toolbar/_index.scss
@@ -1,3 +1,4 @@
 // Component
+@import "_variables.scss";
 @import "~@progress/kendo-theme-default/scss/toolbar/_layout.scss";
 @import "~@progress/kendo-theme-default/scss/toolbar/_theme.scss";
diff --git a/packages/classic/scss/toolbar/_variables.scss b/packages/classic/scss/toolbar/_variables.scss
@@ -0,0 +1,42 @@
+// Toolbar
+
+$toolbar-bg: $button-bg !default;
+$toolbar-text: $button-text !default;
+$toolbar-border: $button-border !default;
+$toolbar-gradient: null !default;
+
+$toolbar-border-width: 1px !default;
+$toolbar-border-radius: 0px !default;
+
+/// The horizontal padding of the container.
+/// @group toolbar
+$toolbar-padding-x: $padding-x !default;
+
+/// The vertical padding of the container.
+/// @group toolbar
+$toolbar-padding-y: $padding-x !default;
+
+$toolbar-font-family: $font-family !default;
+$toolbar-font-size: $font-size !default;
+$toolbar-line-height: $line-height !default;
+
+$toolbar-spacing: $toolbar-padding-x !default;
+
+$toolbar-button-border-width: $button-border-width !default;
+$toolbar-button-border-radius: 0px !default;
+
+$toolbar-button-padding-x: $button-padding-x !default;
+$toolbar-button-padding-y: $button-padding-y !default;
+$toolbar-button-line-height: $button-line-height !default;
+
+$toolbar-button-calc-size: calc( #{$toolbar-button-line-height * 1em} + #{$toolbar-button-padding-y * 2} + #{$toolbar-button-border-width * 2} ) !default;
+$toolbar-button-inner-calc-size: calc( #{$toolbar-button-line-height * 1em} + #{$toolbar-button-padding-y * 2} ) !default;
+
+$toolbar-inner-calc-size: calc( #{$toolbar-button-line-height * 1em} + #{$toolbar-button-padding-y * 2} + #{$toolbar-button-border-width * 2} + #{$toolbar-padding-y * 2} ) !default;
+
+$toolbar-button-expanded-bg: null !default;
+$toolbar-button-expanded-shadow: none !default;
+
+$toolbar-shadow: none !default;
+$toolbar-separator-padding-y: $toolbar-button-padding-y !default;
+$toolbar-separator-border: inherit !default;
diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -758,36 +758,6 @@ $drag-clue-line-height: null !default;
 $drag-clue-border-radius: null !default;
 
 
-// Toolbar
-
-/// The horizontal padding of the container.
-/// @group toolbar
-$toolbar-padding-x: $padding-x !default;
-/// The vertical padding of the container.
-/// @group toolbar
-$toolbar-padding-y: $padding-x !default;
-$toolbar-border-width: 1px !default;
-$toolbar-border-radius: null !default;
-$toolbar-spacing: $toolbar-padding-x !default;
-
-$toolbar-inner-calc-size: calc( #{$button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
-
-$toolbar-font-family: $font-family !default;
-$toolbar-font-size: $font-size !default;
-$toolbar-line-height: $line-height !default;
-
-$toolbar-bg: $button-bg !default;
-$toolbar-text: $button-text !default;
-$toolbar-border: $button-border !default;
-$toolbar-gradient: null !default;
-$toolbar-shadow: null !default;
-
-$toolbar-button-expanded-bg: null !default;
-$toolbar-button-expanded-shadow: none !default;
-
-$toolbar-separator-border: inherit !default;
-
-
 // Window
 $window-border-width: 0px !default;
 $window-border-radius: 0px !default;

diff --git a/packages/default/scss/forms/_index.scss b/packages/default/scss/forms/_index.scss
@@ -3,6 +3,7 @@
 
 
 // Dependencies
+@import "../toolbar/_index.scss"; // TODO: extract variables
 
 
 // Component

diff --git a/packages/default/scss/toolbar/_index.scss b/packages/default/scss/toolbar/_index.scss
@@ -10,5 +10,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/default/scss/toolbar/_variables.scss b/packages/default/scss/toolbar/_variables.scss
@@ -0,0 +1,28 @@
+// Toolbar
+
+/// The horizontal padding of the container.
+/// @group toolbar
+$toolbar-padding-x: $padding-x !default;
+/// The vertical padding of the container.
+/// @group toolbar
+$toolbar-padding-y: $padding-x !default;
+$toolbar-border-width: 1px !default;
+$toolbar-border-radius: null !default;
+$toolbar-spacing: $toolbar-padding-x !default;
+
+$toolbar-inner-calc-size: calc( #{$button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+
+$toolbar-font-family: $font-family !default;
+$toolbar-font-size: $font-size !default;
+$toolbar-line-height: $line-height !default;
+
+$toolbar-bg: $button-bg !default;
+$toolbar-text: $button-text !default;
+$toolbar-border: $button-border !default;
+$toolbar-gradient: null !default;
+$toolbar-shadow: null !default;
+
+$toolbar-button-expanded-bg: null !default;
+$toolbar-button-expanded-shadow: none !default;
+
+$toolbar-separator-border: inherit !default;
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -800,36 +800,6 @@ $drag-clue-line-height: $line-height !default;
 $drag-clue-border-radius: calc( ( #{$drag-clue-line-height} * ( #{$font-size} + #{$padding-y} ) ) / 2 ) !default;
 
 
-// Toolbar
-
-/// The horizontal padding of the container.
-/// @group toolbar
-$toolbar-padding-x: 6px !default;
-/// The vertical padding of the container.
-/// @group toolbar
-$toolbar-padding-y: 6px !default;
-$toolbar-border-width: 0 !default;
-$toolbar-border-radius: null !default;
-$toolbar-spacing: $toolbar-padding-x !default;
-
-$toolbar-font-family: $font-family !default;
-$toolbar-font-size: $font-size !default;
-$toolbar-line-height: (20 / 14) !default;
-
-$toolbar-inner-calc-size: calc( #{$button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
-
-$toolbar-bg: $component-bg !default;
-$toolbar-text: $component-text !default;
-$toolbar-border: null !default;
-$toolbar-gradient: null !default;
-$toolbar-shadow: $box-shadow-depth-2 !default;
-
-$toolbar-button-expanded-bg: $popup-bg !default;
-$toolbar-button-expanded-shadow: $button-focused-shadow !default;
-
-$toolbar-separator-border: $component-border !default;
-
-
 // Window
 $window-border-width: 0px !default;
 $window-border-radius: 4px !default;

diff --git a/packages/material/scss/forms/_index.scss b/packages/material/scss/forms/_index.scss
@@ -3,6 +3,7 @@
 
 
 // Dependencies
+@import "../toolbar/_index.scss"; // TODO: extract variables
 
 
 // Component

diff --git a/packages/material/scss/toolbar/_index.scss b/packages/material/scss/toolbar/_index.scss
@@ -10,5 +10,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/material/scss/toolbar/_variables.scss b/packages/material/scss/toolbar/_variables.scss
@@ -0,0 +1,28 @@
+// Toolbar
+
+/// The horizontal padding of the container.
+/// @group toolbar
+$toolbar-padding-x: 6px !default;
+/// The vertical padding of the container.
+/// @group toolbar
+$toolbar-padding-y: 6px !default;
+$toolbar-border-width: 0 !default;
+$toolbar-border-radius: null !default;
+$toolbar-spacing: $toolbar-padding-x !default;
+
+$toolbar-font-family: $font-family !default;
+$toolbar-font-size: $font-size !default;
+$toolbar-line-height: (20 / 14) !default;
+
+$toolbar-inner-calc-size: calc( #{$button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+
+$toolbar-bg: $component-bg !default;
+$toolbar-text: $component-text !default;
+$toolbar-border: null !default;
+$toolbar-gradient: null !default;
+$toolbar-shadow: $box-shadow-depth-2 !default;
+
+$toolbar-button-expanded-bg: $popup-bg !default;
+$toolbar-button-expanded-shadow: $button-focused-shadow !default;
+
+$toolbar-separator-border: $component-border !default;