assets/stylesheets/material/variables/_variable-material.scss in material-sass-4.0.0 vs assets/stylesheets/material/variables/_variable-material.scss in material-sass-4.1.0
- old
+ new
@@ -10,12 +10,12 @@
$btn-border-radius: $border-radius !default;
$btn-block-margin-y: $spacer-xs !default;
$btn-color: $black-primary !default;
$btn-color-disabled: rgba(0, 0, 0, 0.26) !default;
$btn-color-disabled-inverse: rgba(255, 255, 255, 0.3) !default;
-$btn-elevation-shadow: $elevation-shadow-2dp !default;
-$btn-elevation-shadow-active: $elevation-shadow-8dp !default;
+$btn-elevation-shadow: map-get($elevation-shadows, 2) !default;
+$btn-elevation-shadow-active: map-get($elevation-shadows, 8) !default;
$btn-font-weight: $font-weight-medium !default;
$btn-line-height: 1 !default;
$btn-min-width: 5.5rem !default;
$btn-overlay: $black-divider !default;
$btn-overlay-inverse: $white-divider !default;
@@ -35,12 +35,12 @@
// Button: floating action button
// Based on https://material.google.com/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button
$btn-float-dropdown-inner-spacer-y: 1rem !default;
-$btn-float-elevation-shadow: $elevation-shadow-6dp !default;
-$btn-float-elevation-shadow-active: $elevation-shadow-12dp !default;
+$btn-float-elevation-shadow: map-get($elevation-shadows, 6) !default;
+$btn-float-elevation-shadow-active: map-get($elevation-shadows, 12) !default;
$btn-float-size: 3.5rem !default;
$btn-float-size-sm: 2.5rem !default;
// Button: toggle buttons (Boostrap button group)
// Based on https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons
@@ -56,30 +56,31 @@
$card-action-inner-spacer-x: 0.5rem !default;
$card-action-inner-spacer-y: 0.25rem !default;
$card-action-padding-x: 0.5rem !default;
$card-action-padding-y: 0.5rem !default;
$card-bg: $white !default;
+$card-border-color: $border-color !default;
$card-border-radius: $border-radius !default;
$card-border-width: $border-width !default;
$card-columns-count: 2 !default;
$card-columns-count-desktop: 3 !default;
-$card-elevation-shadow: $elevation-shadow-2dp !default;
-$card-elevation-shadow-hover: $elevation-shadow-8dp !default;
+$card-elevation-shadow: map-get($elevation-shadows, 2) !default;
+$card-elevation-shadow-hover: map-get($elevation-shadows, 8) !default;
$card-inner-spacer-x: 1rem !default;
$card-inner-spacer-y: 1rem !default;
$card-margin-x: $spacer-sm !default;
$card-margin-y: $spacer-sm !default;
$card-padding-x: 1rem !default;
-$card-padding-y: 1.5rem !default;
+$card-padding-y: 1rem !default;
// Chip
// Based on https://material.google.com/components/chips.html#chips-specs
$chip-bg: $material-color-grey-300 !default;
$chip-bg-active: $material-color-grey-400 !default;
$chip-color: $black-primary !default;
-$chip-elevation-shadow-hover: $elevation-shadow-2dp !default;
+$chip-elevation-shadow-hover: map-get($elevation-shadows, 2) !default;
$chip-font-size: 0.875rem !default;
$chip-font-weight: $font-weight-regular !default;
$chip-height: 2rem !default;
$chip-icon-bg: theme-color(secondary) !default;
$chip-icon-font-size: 1rem !default;
@@ -97,11 +98,10 @@
$table-bg-hover: $material-color-grey-200 !default;
$table-border-color: $border-color-solid !default;
$table-border-width: $border-width !default;
$table-cell-padding-x: 1.75rem !default;
$table-cell-padding-x-alt: 1.5rem !default;
-$table-elevation-shadow: $elevation-shadow-2dp !default;
$table-line-height: $line-height-base !default;
$table-margin-y: $spacer !default;
$table-striped-order: odd !default;
$table-dark-bg: $dark-theme-4 !default;
@@ -142,11 +142,11 @@
// Based on https://material.google.com/components/dialogs.html#dialogs-specs
$dialog-backdrop-bg: $black-hint !default;
$dialog-border-radius: $border-radius !default;
$dialog-content-bg: $white !default;
-$dialog-elevation-shadow: $elevation-shadow-24dp !default;
+$dialog-elevation-shadow: map-get($elevation-shadows, 24) !default;
$dialog-footer-btn-min-width: 4rem !default;
$dialog-footer-btn-stacked-height: 3rem !default;
$dialog-footer-btn-stacked-padding-x: 1rem !default;
$dialog-footer-btn-stacked-padding-y: (($dialog-footer-btn-stacked-height - $btn-font-size * $btn-line-height) / 2) !default;
$dialog-footer-inner-spacer-x: 0.5rem !default;
@@ -154,11 +154,11 @@
$dialog-footer-padding-y: 0.5rem !default;
$dialog-margin-x: $spacer-lg !default;
$dialog-margin-y: $spacer-lg !default;
$dialog-padding-x: 1.5rem !default;
$dialog-padding-y: 1.25rem !default;
-$dialog-scale: 0.87 !default;
+$dialog-transition-scale: $transition-scale !default;
$dialog-width: 35rem !default;
$dialog-width-lg: 52.5rem !default;
$dialog-width-sm: 17.5rem !default;
// Expansion panel (Bootstrap list group)
@@ -169,11 +169,11 @@
$expansion-panel-border-color: $border-color !default;
$expansion-panel-border-radius: $border-radius !default;
$expansion-panel-border-width: $border-width !default;
$expansion-panel-color: $black-primary !default;
$expansion-panel-color-disabled: $black-hint !default;
-$expansion-panel-elevation-shadow: $elevation-shadow-1dp !default;
+$expansion-panel-elevation-shadow: map-get($elevation-shadows, 1) !default;
$expansion-panel-font-size: 0.9375rem !default;
$expansion-panel-footer-btn-min-width: 4rem !default;
$expansion-panel-footer-inner-spacer-x: 0.5rem !default;
$expansion-panel-footer-inner-spacer-y: 0.25rem !default;
$expansion-panel-footer-padding-x: 0.5rem !default;
@@ -192,11 +192,11 @@
$menu-border-radius: $border-radius !default;
$menu-divider-bg: $border-color !default;
$menu-font-size: 1rem !default;
$menu-font-size-cascading: 0.9375rem !default;
$menu-font-weight: $font-weight-regular !default;
-$menu-elevation-shadow: $elevation-shadow-8dp !default;
+$menu-elevation-shadow: map-get($elevation-shadows, 8) !default;
$menu-header-color: $black-primary !default;
$menu-line-height: 1.5rem !default;
$menu-line-height-cascading: $menu-line-height !default;
$menu-link-bg: transparent !default;
$menu-link-bg-hover: $material-color-grey-100 !default;
@@ -219,11 +219,11 @@
$navdrawer-backdrop-bg: $dialog-backdrop-bg !default;
$navdrawer-border-color: $border-color !default;
$navdrawer-border-width: $border-width !default;
$navdrawer-content-bg: $dialog-content-bg !default;
$navdrawer-divider-bg: $border-color !default;
-$navdrawer-elevation-shadow: $elevation-shadow-16dp !default;
+$navdrawer-elevation-shadow: map-get($elevation-shadows, 16) !default;
$navdrawer-gutter-width: 3.5rem !default;
$navdrawer-header-bg: $material-color-grey-100 !default;
$navdrawer-header-border-color: $border-color !default;
$navdrawer-header-border-width: $border-width !default;
$navdrawer-inner-spacer-x: 1rem !default;
@@ -264,17 +264,19 @@
$picker-nav-next-icon: 'keyboard_arrow_right' !default;
$picker-nav-prev-icon: 'keyboard_arrow_left' !default;
$picker-select-bg: $black-divider !default;
$picker-select-border-radius: $border-radius !default;
$picker-select-opacity: 0.7 !default;
+$picker-transition-scale: $transition-scale !default;
$picker-weekday-color: $black-hint !default;
// Progress (Bootstrap progress bar)
// Based on https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators
$progress-bar-bg: $material-color-indigo-500 !default;
$progress-bar-border-radius: 0.25rem !default;
+$progress-bar-buffer-width: 1.5rem !default;
$progress-bar-height: 0.25rem !default;
$progress-bg: $material-color-indigo-100 !default;
$progress-circular-animation-duration: 5.332s !default;
$progress-circular-bg: $material-color-indigo-500 !default;
@@ -300,12 +302,46 @@
$selection-control-thumb-bg-disabled: #bdbdbd !default;
$selection-control-thumb-shadow: 0 1px 5px 0 rgba(0, 0, 0, $black-secondary-opacity) !default;
$selection-control-track-bg: $black-hint !default;
$selection-control-track-bg-disabled: $black-divider !default;
$selection-control-track-height: 1rem !default;
+$selection-control-track-opacity: 0.5 !default;
$selection-control-track-width: ($selection-control-indicator-size * 2) !default;
+// Slider (Bootstrap custom form control)
+// Based on https://material.io/guidelines/components/sliders.html#sliders-continuous-slider
+
+$slider-thumb-bg: theme-color(secondary) !default;
+$slider-thumb-radial-opacity: $black-divider-opacity !default;
+$slider-thumb-size: ($material-icon-size / 2) !default;
+$slider-track-bg: rgba(0, 0, 0, 0.26) !default;
+$slider-track-bg-active: rgba(0, 0, 0, 0.38) !default;
+$slider-track-height: 0.125rem !default;
+
+// Snackbar
+// Based on https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-specs
+
+$snackbar-bg: #323232 !default;
+$snackbar-border-radius: $border-radius !default;
+$snackbar-breakpoint: sm !default;
+$snackbar-btn-color: theme-color(secondary) !default;
+$snackbar-btn-color-hover: theme-color-light(secondary) !default;
+$snackbar-color: $white-primary !default;
+$snackbar-elevation-shadow: map-get($elevation-shadows, 6) !default;
+$snackbar-font-size: 0.875rem !default;
+$snackbar-height-multi: 5rem !default;
+$snackbar-inner-spacer-x: 1.5rem !default;
+$snackbar-inner-spacer-x-desktop: 3rem !default;
+$snackbar-line-height: $line-height-base !default;
+$snackbar-margin-x: $spacer-lg !default;
+$snackbar-margin-y: $spacer-lg !default;
+$snackbar-max-width: 35.5rem !default;
+$snackbar-min-width: 18rem !default;
+$snackbar-padding-x: 1.5rem !default;
+$snackbar-padding-y: 0.875rem !default;
+$snackbar-padding-y-multi: 1.25rem !default;
+
// Stepper
// Based on https://material.google.com/components/steppers.html#steppers-specs
$stepper-bg: $white !default;
$stepper-border-color: $material-color-grey-400 !default;
@@ -345,20 +381,21 @@
// Text field (Bootstrap form control)
// Based on https://material.io/guidelines/components/text-fields.html#text-fields-states
$textfield-border-color: rgba(0, 0, 0, 0.42) !default;
-$textfield-border-color-focus: theme-color(primary) !default;
+$textfield-border-color-focus: theme-color(secondary) !default;
$textfield-border-color-hover: rgba(0, 0, 0, 0.87) !default;
$textfield-border-width: $border-width !default;
$textfield-border-width-focus: ($textfield-border-width * 2) !default;
$textfield-border-width-hover: ($textfield-border-width * 2) !default;
$textfield-color: $black-primary !default;
$textfield-color-disabled: $black-hint !default;
$textfield-hint-color: $black-hint !default;
$textfield-line-height: $line-height-base !default;
$textfield-margin-x: $spacer !default;
+$textfield-plaintext-color: $body-color !default;
$textfield-font-size: 1rem !default;
$textfield-font-size-lg: 2.125rem !default;
$textfield-font-size-sm: 0.8125rem !default;
$textfield-height: 2.25rem !default;
@@ -396,11 +433,11 @@
// Text field: floating label
// Based on https://material.google.com/components/text-fields.html#text-fields-labels
$floating-label-color: $textfield-hint-color !default;
-$floating-label-color-focus: theme-color(primary) !default;
+$floating-label-color-focus: theme-color(secondary) !default;
$floating-label-font-size-focus: 0.75rem !default;
// Toolbar (Bootstrap navbar)
// Based on https://material.google.com/components/toolbars.html#toolbars-usage
@@ -408,11 +445,11 @@
$toolbar-color-lighter: $black-hint !default;
$toolbar-element-bg: $black-divider !default;
$toolbar-element-border-radius: $border-radius !default;
$toolbar-element-height: 2.25rem !default;
$toolbar-element-opacity: 0.7 !default;
-$toolbar-elevation-shadow: $elevation-shadow-4dp !default;
+$toolbar-elevation-shadow: map-get($elevation-shadows, 4) !default;
$toolbar-height: 3.5rem !default;
$toolbar-inner-spacer-x: 1rem !default;
$toolbar-link-font-size: 1rem !default;
$toolbar-link-height: $toolbar-element-height !default;
$toolbar-link-line-height: 1 !default;
@@ -430,10 +467,11 @@
// Tooltip (Bootstrap tooltip)
// Based on https://material.google.com/components/tooltips.html#tooltips-tooltips-desktop
$tooltip-bg: $material-color-grey-700 !default;
$tooltip-border-radius: $border-radius !default;
+$tooltip-breakpoint: md !default;
$tooltip-color: $white-primary !default;
$tooltip-font-size: 0.875rem !default;
$tooltip-font-size-desktop: 0.625rem !default;
$tooltip-height: 2rem !default;
$tooltip-height-desktop: 1.375rem !default;
@@ -444,6 +482,6 @@
$tooltip-padding-x: 1rem !default;
$tooltip-padding-x-desktop: 0.5rem !default;
$tooltip-padding-y: (($tooltip-height - $tooltip-font-size * $tooltip-line-height) / 2) !default;
$tooltip-padding-y-desktop: (($tooltip-height-desktop - $tooltip-font-size-desktop * $tooltip-line-height) / 2) !default;
$tooltip-scale: 0.87 !default;
-$tooltip-zindex: $elevation-24dp !default;
+$tooltip-zindex: map-get($elevations, 24) !default;