Skip to content

Commit

Permalink
fix(drawer): extract drawer variables into separate files
Browse files Browse the repository at this point in the history
* rename selected-hover-color variable to selected-hover-text
  • Loading branch information
joneff committed Sep 17, 2020
1 parent 3dc2797 commit 55e56ea
Show file tree
Hide file tree
Showing 12 changed files with 147 additions and 151 deletions.
37 changes: 0 additions & 37 deletions packages/bootstrap/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1599,43 +1599,6 @@ $window-sizes: map-merge((
), $window-sizes);


// Drawer
$drawer-bg: $body-bg !default;
$drawer-text: $body-text !default;
$drawer-border: $component-border !default;
$drawer-border-width: 1px !default;
$drawer-font-family: $font-family !default;
$drawer-font-size: $font-size !default;
$drawer-line-height: $line-height !default;
$drawer-content-padding-x: $padding-x !default;
$drawer-content-padding-y: $padding-y !default;

$drawer-scrollbar-width: 7px !default;
$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
$drawer-scrollbar-bg: #dedede !default;
$drawer-scrollbar-radius: 20px !default;
$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;

$drawer-item-padding-x: $padding-x !default;
$drawer-item-padding-y: $padding-y !default;
$drawer-item-font-size: 16px !default;
$drawer-item-line-height: $line-height-lg !default;
$drawer-icon-size: $icon-size !default;

$drawer-mini-initial-width: calc(2 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;

$drawer-hovered-text: $hovered-text !default;
$drawer-hovered-bg: $hovered-bg !default;

$drawer-focused-bg: $hovered-bg !default;
$drawer-focused-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .15) !default;

$drawer-selected-text: $selected-text !default;
$drawer-selected-bg: $selected-bg !default;
$drawer-selected-hover-text: $selected-text !default;
$drawer-selected-hover-bg: try-darken( $selected-bg, 7.5% ) !default;


// Notification
$notification-padding-x: $alert-padding-x !default;
$notification-padding-y: $alert-padding-y !default;
Expand Down
1 change: 1 addition & 0 deletions packages/bootstrap/scss/drawer/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,6 @@


// Component
@import "_variables.scss";
@import "_layout.scss";
@import "_theme.scss";
35 changes: 35 additions & 0 deletions packages/bootstrap/scss/drawer/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// Drawer
$drawer-bg: $body-bg !default;
$drawer-text: $body-text !default;
$drawer-border: $component-border !default;
$drawer-border-width: 1px !default;
$drawer-font-family: $font-family !default;
$drawer-font-size: $font-size !default;
$drawer-line-height: $line-height !default;
$drawer-content-padding-x: $padding-x !default;
$drawer-content-padding-y: $padding-y !default;

$drawer-scrollbar-width: 7px !default;
$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
$drawer-scrollbar-bg: #dedede !default;
$drawer-scrollbar-radius: 20px !default;
$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;

$drawer-item-padding-x: $padding-x !default;
$drawer-item-padding-y: $padding-y !default;
$drawer-item-font-size: 16px !default;
$drawer-item-line-height: $line-height-lg !default;
$drawer-icon-size: $icon-size !default;

$drawer-mini-initial-width: calc(2 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;

$drawer-hovered-bg: $hovered-bg !default;
$drawer-hovered-text: $hovered-text !default;

$drawer-focused-bg: $hovered-bg !default;
$drawer-focused-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .15) !default;

$drawer-selected-bg: $selected-bg !default;
$drawer-selected-text: $selected-text !default;
$drawer-selected-hover-bg: try-darken( $selected-bg, 7.5% ) !default;
$drawer-selected-hover-text: $selected-text !default;
39 changes: 1 addition & 38 deletions packages/classic/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ $selected-border: try-shade( $selected-bg, 2 ) !default;
$selected-gradient: $base-gradient !default;

$selected-hover-bg: try-shade( $selected-bg ) !default;
$selected-hover-color: contrast-wcag( $selected-hover-bg ) !default;
$selected-hover-text: contrast-wcag( $selected-hover-bg ) !default;

$focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
$primary-focused-shadow: inset 0 0 0 2px rgba($primary, .3) !default;
Expand Down Expand Up @@ -1567,43 +1567,6 @@ $window-sizes: map-merge((
), $window-sizes);


// Drawer
$drawer-text: $base-text !default;
$drawer-bg: $base-bg !default;
$drawer-border: $base-border !default;
$drawer-border-width: 1px !default;
$drawer-font-family: $font-family !default;
$drawer-font-size: $font-size !default;
$drawer-line-height: $line-height !default;
$drawer-content-padding-x: $padding-x !default;
$drawer-content-padding-y: $padding-y !default;

$drawer-scrollbar-width: 7px !default;
$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
$drawer-scrollbar-bg: #dedede !default;
$drawer-scrollbar-radius: 20px !default;
$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;

$drawer-item-padding-x: $padding-x !default;
$drawer-item-padding-y: $padding-x !default;
$drawer-item-font-size: 16px !default;
$drawer-item-line-height: $line-height-lg !default;
$drawer-icon-size: $icon-size !default;

$drawer-mini-initial-width: calc(4 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;

$drawer-hovered-text: $hovered-text !default;
$drawer-hovered-bg: $hovered-bg !default;

$drawer-focused-bg: $drawer-bg !default;
$drawer-focused-shadow: $list-item-focused-shadow !default;

$drawer-selected-text: $selected-text !default;
$drawer-selected-bg: $selected-bg !default;
$drawer-selected-hover-text: $selected-hover-color !default;
$drawer-selected-hover-bg: $selected-hover-bg !default;


// Notification
$notification-padding-x: 8px !default;
$notification-padding-y: 4px !default;
Expand Down
1 change: 1 addition & 0 deletions packages/classic/scss/drawer/_index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// Component
@import "_variables.scss";
@import "~@progress/kendo-theme-default/scss/drawer/_layout.scss";
@import "~@progress/kendo-theme-default/scss/drawer/_theme.scss";
35 changes: 35 additions & 0 deletions packages/classic/scss/drawer/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// Drawer
$drawer-bg: $base-bg !default;
$drawer-text: $base-text !default;
$drawer-border: $base-border !default;
$drawer-border-width: 1px !default;
$drawer-font-family: $font-family !default;
$drawer-font-size: $font-size !default;
$drawer-line-height: $line-height !default;
$drawer-content-padding-x: $padding-x !default;
$drawer-content-padding-y: $padding-y !default;

$drawer-scrollbar-width: 7px !default;
$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
$drawer-scrollbar-bg: #dedede !default;
$drawer-scrollbar-radius: 20px !default;
$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;

$drawer-item-padding-x: $padding-x !default;
$drawer-item-padding-y: $padding-x !default;
$drawer-item-font-size: 16px !default;
$drawer-item-line-height: $line-height-lg !default;
$drawer-icon-size: $icon-size !default;

$drawer-mini-initial-width: calc(4 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;

$drawer-hovered-bg: $hovered-bg !default;
$drawer-hovered-text: $hovered-text !default;

$drawer-focused-bg: $drawer-bg !default;
$drawer-focused-shadow: $list-item-focused-shadow !default;

$drawer-selected-bg: $selected-bg !default;
$drawer-selected-text: $selected-text !default;
$drawer-selected-hover-bg: $selected-hover-bg !default;
$drawer-selected-hover-text: $selected-hover-text !default;
39 changes: 1 addition & 38 deletions packages/default/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -281,8 +281,8 @@ $selected-border: rgba( black, .1 ) !default;
/// The gradient background of selected items.
$selected-gradient: none !default;

$selected-hover-color: $selected-text !default;
$selected-hover-bg: shade( $selected-bg ) !default;
$selected-hover-text: $selected-text !default;

// TODO: refactor
$focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
Expand Down Expand Up @@ -1608,43 +1608,6 @@ $window-sizes: map-merge((
), $window-sizes);


// Drawer
$drawer-text: $base-text !default;
$drawer-bg: $base-bg !default;
$drawer-border: $base-border !default;
$drawer-border-width: 1px !default;
$drawer-font-family: $font-family !default;
$drawer-font-size: $font-size !default;
$drawer-line-height: $line-height !default;
$drawer-content-padding-x: $padding-x !default;
$drawer-content-padding-y: $padding-y !default;

$drawer-scrollbar-width: 7px !default;
$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
$drawer-scrollbar-bg: #dedede !default;
$drawer-scrollbar-radius: 20px !default;
$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;

$drawer-item-padding-x: $padding-x !default;
$drawer-item-padding-y: $padding-x !default;
$drawer-item-font-size: 16px !default;
$drawer-item-line-height: $line-height-lg !default;
$drawer-icon-size: $icon-size !default;

$drawer-mini-initial-width: calc(4 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;

$drawer-hovered-text: $hovered-text !default;
$drawer-hovered-bg: $hovered-bg !default;

$drawer-focused-bg: $drawer-bg !default;
$drawer-focused-shadow: $list-item-focused-shadow !default;

$drawer-selected-text: $selected-text !default;
$drawer-selected-bg: $selected-bg !default;
$drawer-selected-hover-text: $selected-hover-color !default;
$drawer-selected-hover-bg: $selected-hover-bg !default;


// Notification
$notification-padding-x: 8px !default;
$notification-padding-y: 4px !default;
Expand Down
1 change: 1 addition & 0 deletions packages/default/scss/drawer/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,6 @@


// Component
@import "_variables.scss";
@import "_layout.scss";
@import "_theme.scss";
35 changes: 35 additions & 0 deletions packages/default/scss/drawer/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// Drawer
$drawer-bg: $base-bg !default;
$drawer-text: $base-text !default;
$drawer-border: $base-border !default;
$drawer-border-width: 1px !default;
$drawer-font-family: $font-family !default;
$drawer-font-size: $font-size !default;
$drawer-line-height: $line-height !default;
$drawer-content-padding-x: $padding-x !default;
$drawer-content-padding-y: $padding-y !default;

$drawer-scrollbar-width: 7px !default;
$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
$drawer-scrollbar-bg: #dedede !default;
$drawer-scrollbar-radius: 20px !default;
$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;

$drawer-item-padding-x: $padding-x !default;
$drawer-item-padding-y: $padding-x !default;
$drawer-item-font-size: 16px !default;
$drawer-item-line-height: $line-height-lg !default;
$drawer-icon-size: $icon-size !default;

$drawer-mini-initial-width: calc(4 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;

$drawer-hovered-bg: $hovered-bg !default;
$drawer-hovered-text: $hovered-text !default;

$drawer-focused-bg: $drawer-bg !default;
$drawer-focused-shadow: $list-item-focused-shadow !default;

$drawer-selected-bg: $selected-bg !default;
$drawer-selected-text: $selected-text !default;
$drawer-selected-hover-bg: $selected-hover-bg !default;
$drawer-selected-hover-text: $selected-hover-text !default;
39 changes: 1 addition & 38 deletions packages/material/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ $selected-border: rgba( if($theme-type == dark, white, black), .1 ) !default;
$selected-gradient: null !default;

$selected-hover-bg: try-shade( $selected-bg ) !default;
$selected-hover-color: $selected-text !default;
$selected-hover-text: $selected-text !default;

$transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;

Expand Down Expand Up @@ -1650,43 +1650,6 @@ $window-sizes: map-merge((
), $window-sizes);


// Drawer
$drawer-text: $base-text !default;
$drawer-bg: $base-bg !default;
$drawer-border: $base-border !default;
$drawer-border-width: 1px !default;
$drawer-font-family: $font-family !default;
$drawer-font-size: $font-size !default;
$drawer-line-height: $line-height !default;
$drawer-content-padding-x: $padding-x !default;
$drawer-content-padding-y: $padding-y !default;

$drawer-scrollbar-width: 7px !default;
$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
$drawer-scrollbar-bg: #dedede !default;
$drawer-scrollbar-radius: 20px !default;
$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;

$drawer-item-padding-x: $padding-x !default;
$drawer-item-padding-y: 12px !default;
$drawer-item-font-size: 16px !default;
$drawer-item-line-height: $line-height-lg !default;
$drawer-icon-size: $icon-size !default;

$drawer-mini-initial-width: calc(2 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;

$drawer-hovered-text: $hovered-text !default;
$drawer-hovered-bg: $hovered-bg !default;

$drawer-focused-bg: $hovered-bg !default;
$drawer-focused-shadow: none !default;

$drawer-selected-text: $secondary !default;
$drawer-selected-bg: $base-bg !default;
$drawer-selected-hover-text: $secondary !default;
$drawer-selected-hover-bg: $hovered-bg !default;


// Notification
$notification-padding-x: 16px !default;
$notification-padding-y: 14px !default;
Expand Down
1 change: 1 addition & 0 deletions packages/material/scss/drawer/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,6 @@


// Component
@import "_variables.scss";
@import "_layout.scss";
@import "_theme.scss";
35 changes: 35 additions & 0 deletions packages/material/scss/drawer/_variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// Drawer
$drawer-bg: $base-bg !default;
$drawer-text: $base-text !default;
$drawer-border: $base-border !default;
$drawer-border-width: 1px !default;
$drawer-font-family: $font-family !default;
$drawer-font-size: $font-size !default;
$drawer-line-height: $line-height !default;
$drawer-content-padding-x: $padding-x !default;
$drawer-content-padding-y: $padding-y !default;

$drawer-scrollbar-width: 7px !default;
$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
$drawer-scrollbar-bg: #dedede !default;
$drawer-scrollbar-radius: 20px !default;
$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;

$drawer-item-padding-x: $padding-x !default;
$drawer-item-padding-y: 12px !default;
$drawer-item-font-size: 16px !default;
$drawer-item-line-height: $line-height-lg !default;
$drawer-icon-size: $icon-size !default;

$drawer-mini-initial-width: calc(2 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;

$drawer-hovered-bg: $hovered-bg !default;
$drawer-hovered-text: $hovered-text !default;

$drawer-focused-bg: $hovered-bg !default;
$drawer-focused-shadow: none !default;

$drawer-selected-bg: $base-bg !default;
$drawer-selected-text: $secondary !default;
$drawer-selected-hover-bg: $hovered-bg !default;
$drawer-selected-hover-text: $secondary !default;

0 comments on commit 55e56ea

Please sign in to comment.