fix(appbar): extract appbar variables into separate files

telerik · Sep 17, 2020 · 685591a · 685591a
1 parent 3a6123e
commit 685591a
Show file tree

Hide file tree

Showing 13 changed files with 92 additions and 93 deletions.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -1791,28 +1791,6 @@ $actions-gradient: null !default;
 $actions-stretched-border: $base-border !default;
 
 
-// Appbar
-$appbar-margin-y: null !default;
-$appbar-margin-x: null !default;
-$appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 4 ) !default;
-$appbar-border-width: 0px !default;
-
-$appbar-font-size: $font-size !default;
-$appbar-line-height: $line-height !default;
-$appbar-font-family: $font-family !default;
-$appbar-gap: map-get( $spacing, 2 ) !default;
-
-$appbar-light-bg: #ffffff !default;
-$appbar-light-text: #6c757d !default;
-
-$appbar-dark-bg: #343a40 !default;
-$appbar-dark-text: rgba(#f8f9fa, .6) !default;
-
-$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16);
-$appbar-bottom-box-shadow:  0px -1px 1px rgba(0, 0, 0, .16);
-
-
 // Toolbar
 
 /// The horizontal padding of the container.

diff --git a/packages/bootstrap/scss/appbar/_index.scss b/packages/bootstrap/scss/appbar/_index.scss
@@ -7,5 +7,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/bootstrap/scss/appbar/_variables.scss b/packages/bootstrap/scss/appbar/_variables.scss
@@ -0,0 +1,20 @@
+// Appbar
+$appbar-margin-y: null !default;
+$appbar-margin-x: null !default;
+$appbar-padding-y: map-get( $spacing, 2 ) !default;
+$appbar-padding-x: map-get( $spacing, 4 ) !default;
+$appbar-border-width: 0px !default;
+
+$appbar-font-size: $font-size !default;
+$appbar-line-height: $line-height !default;
+$appbar-font-family: $font-family !default;
+$appbar-gap: map-get( $spacing, 2 ) !default;
+
+$appbar-light-bg: #ffffff !default;
+$appbar-light-text: #6c757d !default;
+
+$appbar-dark-bg: #343a40 !default;
+$appbar-dark-text: rgba(#f8f9fa, .6) !default;
+
+$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16);
+$appbar-bottom-box-shadow:  0px -1px 1px rgba(0, 0, 0, .16);
diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss
@@ -1743,28 +1743,6 @@ $actions-gradient: null !default;
 $actions-stretched-border: $base-border !default;
 
 
-// Appbar
-$appbar-margin-y: null !default;
-$appbar-margin-x: null !default;
-$appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 4 ) !default;
-$appbar-border-width: 0px !default;
-
-$appbar-font-size: $font-size !default;
-$appbar-line-height: $line-height !default;
-$appbar-font-family: $font-family !default;
-$appbar-gap: map-get( $spacing, 2 ) !default;
-
-$appbar-light-bg: $bg-color !default;
-$appbar-light-text: $text-color !default;
-
-$appbar-dark-bg: $text-color !default;
-$appbar-dark-text: $bg-color !default;
-
-$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16);
-$appbar-bottom-box-shadow:  0px -1px 1px rgba(0, 0, 0, .16);
-
-
 // Toolbar
 
 $toolbar-bg: $button-bg !default;

diff --git a/packages/classic/scss/appbar/_index.scss b/packages/classic/scss/appbar/_index.scss
@@ -1,2 +1,4 @@
+// Component
+@import "_variables.scss";
 @import "~@progress/kendo-theme-default/scss/appbar/_layout.scss";
 @import "~@progress/kendo-theme-default/scss/appbar/_theme.scss";
diff --git a/packages/classic/scss/appbar/_variables.scss b/packages/classic/scss/appbar/_variables.scss
@@ -0,0 +1,20 @@
+// Appbar
+$appbar-margin-y: null !default;
+$appbar-margin-x: null !default;
+$appbar-padding-y: map-get( $spacing, 2 ) !default;
+$appbar-padding-x: map-get( $spacing, 4 ) !default;
+$appbar-border-width: 0px !default;
+
+$appbar-font-size: $font-size !default;
+$appbar-line-height: $line-height !default;
+$appbar-font-family: $font-family !default;
+$appbar-gap: map-get( $spacing, 2 ) !default;
+
+$appbar-light-bg: $bg-color !default;
+$appbar-light-text: $text-color !default;
+
+$appbar-dark-bg: $text-color !default;
+$appbar-dark-text: $bg-color !default;
+
+$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16);
+$appbar-bottom-box-shadow:  0px -1px 1px rgba(0, 0, 0, .16);
diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -1799,28 +1799,6 @@ $actions-gradient: null !default;
 $actions-stretched-border: $base-border !default;
 
 
-// Appbar
-$appbar-margin-y: null !default;
-$appbar-margin-x: null !default;
-$appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 4 ) !default;
-$appbar-border-width: 0px !default;
-
-$appbar-font-size: $font-size !default;
-$appbar-line-height: $line-height !default;
-$appbar-font-family: $font-family !default;
-$appbar-gap: map-get( $spacing, 2 ) !default;
-
-$appbar-light-bg: $bg-color !default;
-$appbar-light-text: $text-color !default;
-
-$appbar-dark-bg: $text-color !default;
-$appbar-dark-text: $bg-color !default;
-
-$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16);
-$appbar-bottom-box-shadow:  0px -1px 1px rgba(0, 0, 0, .16);
-
-
 // Toolbar
 
 /// The horizontal padding of the container.

diff --git a/packages/default/scss/appbar/_index.scss b/packages/default/scss/appbar/_index.scss
@@ -7,5 +7,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/default/scss/appbar/_theme.scss b/packages/default/scss/appbar/_theme.scss
@@ -1,11 +1,12 @@
 @include exports("appbar/theme") {
-    .k-appbar {
-        @include box-shadow($appbar-box-shadow);
 
-        &.k-appbar-bottom {
-            @include box-shadow($appbar-bottom-box-shadow);
-        }
+    .k-appbar {
+        @include box-shadow( $appbar-box-shadow );
     }
+    .k-appbar-bottom {
+        @include box-shadow( $appbar-bottom-box-shadow );
+    }
+
 
     // AppBar theme colors
     @each $name, $color in $theme-colors {
@@ -22,4 +23,5 @@
             }
         }
     }
+
 }
diff --git a/packages/default/scss/appbar/_variables.scss b/packages/default/scss/appbar/_variables.scss
@@ -0,0 +1,20 @@
+// Appbar
+$appbar-margin-y: null !default;
+$appbar-margin-x: null !default;
+$appbar-padding-y: map-get( $spacing, 2 ) !default;
+$appbar-padding-x: map-get( $spacing, 4 ) !default;
+$appbar-border-width: 0px !default;
+
+$appbar-font-size: $font-size !default;
+$appbar-line-height: $line-height !default;
+$appbar-font-family: $font-family !default;
+$appbar-gap: map-get( $spacing, 2 ) !default;
+
+$appbar-light-bg: $bg-color !default;
+$appbar-light-text: $text-color !default;
+
+$appbar-dark-bg: $text-color !default;
+$appbar-dark-text: $bg-color !default;
+
+$appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16);
+$appbar-bottom-box-shadow:  0px -1px 1px rgba(0, 0, 0, .16);
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -1842,28 +1842,6 @@ $actions-gradient: null !default;
 $actions-stretched-border: $base-border !default;
 
 
-// Appbar
-$appbar-margin-y: null !default;
-$appbar-margin-x: null !default;
-$appbar-padding-y: map-get( $spacing, 2 ) !default;
-$appbar-padding-x: map-get( $spacing, 6 ) !default;
-$appbar-border-width: 0px !default;
-
-$appbar-font-size: $font-size !default;
-$appbar-line-height: $line-height !default;
-$appbar-font-family: $font-family !default;
-$appbar-gap: map-get( $spacing, 2 ) !default;
-
-$appbar-light-bg: #ffffff !default;
-$appbar-light-text: #000000 !default;
-
-$appbar-dark-bg: #121212 !default;
-$appbar-dark-text: rgba(#ffffff, .87) !default;
-
-$appbar-box-shadow: 0px 2px 3px rgba(0, 0, 0, .24);
-$appbar-bottom-box-shadow:  0px -2px 3px rgba(0, 0, 0, .24);
-
-
 // Toolbar
 
 /// The horizontal padding of the container.

diff --git a/packages/material/scss/appbar/_index.scss b/packages/material/scss/appbar/_index.scss
@@ -7,5 +7,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/material/scss/appbar/_variables.scss b/packages/material/scss/appbar/_variables.scss
@@ -0,0 +1,20 @@
+// Appbar
+$appbar-margin-y: null !default;
+$appbar-margin-x: null !default;
+$appbar-padding-y: map-get( $spacing, 2 ) !default;
+$appbar-padding-x: map-get( $spacing, 6 ) !default;
+$appbar-border-width: 0px !default;
+
+$appbar-font-size: $font-size !default;
+$appbar-line-height: $line-height !default;
+$appbar-font-family: $font-family !default;
+$appbar-gap: map-get( $spacing, 2 ) !default;
+
+$appbar-light-bg: #ffffff !default;
+$appbar-light-text: #000000 !default;
+
+$appbar-dark-bg: #121212 !default;
+$appbar-dark-text: rgba(#ffffff, .87) !default;
+
+$appbar-box-shadow: 0px 2px 3px rgba(0, 0, 0, .24);
+$appbar-bottom-box-shadow:  0px -2px 3px rgba(0, 0, 0, .24);