assets/stylesheets/material/variables/_variable-material.scss in material-sass-4.0.0.beta3 vs assets/stylesheets/material/variables/_variable-material.scss in material-sass-4.0.0

- old
+ new

@@ -34,20 +34,20 @@ $btn-padding-y-sm: (($btn-height-sm - $btn-font-size-sm * $btn-line-height) / 2) !default; // 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-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 $btn-group-bg: $white-primary !default; -$btn-group-divider-bg: $border-color !default; $btn-group-inner-spacer-x: 1px !default; $btn-group-inner-spacer-y: 1px !default; $btn-group-toggle-opacity: 0.7 !default; // Card (Bootstrap card) @@ -79,29 +79,32 @@ $chip-color: $black-primary !default; $chip-elevation-shadow-hover: $elevation-shadow-2dp !default; $chip-font-size: 0.875rem !default; $chip-font-weight: $font-weight-regular !default; $chip-height: 2rem !default; -$chip-icon-bg: map-get(theme-color(secondary), color) !default; +$chip-icon-bg: theme-color(secondary) !default; $chip-icon-font-size: 1rem !default; $chip-inner-spacer-x: 0.25rem !default; $chip-line-height: 1 !default; $chip-padding-x: 0.75rem !default; // Data table (Bootstrap table) // Based on https://material.google.com/components/data-tables.html#data-tables-structure $table-bg: $white !default; +$table-bg-active: $material-color-grey-200 !default; +$table-bg-active-hover: $material-color-grey-300 !default; $table-bg-accent: $material-color-grey-100 !default; $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; $table-dark-bg-accent: $dark-theme-3 !default; $table-dark-bg-hover: $dark-theme-2 !default; $table-dark-border-color: $dark-theme-3 !default; @@ -227,11 +230,11 @@ $navdrawer-inner-spacer-y: 0.5rem !default; $navdrawer-nav-icon-color: $black-secondary !default; $navdrawer-nav-icon-width: 3.5rem !default; $navdrawer-nav-link-bg-hover: $material-color-grey-100 !default; $navdrawer-nav-link-color: $black-primary !default; -$navdrawer-nav-link-color-active: map-get(theme-color(primary), color) !default; +$navdrawer-nav-link-color-active: theme-color(primary) !default; $navdrawer-nav-link-color-disabled: $black-hint !default; $navdrawer-nav-link-font-size: 0.875rem !default; $navdrawer-nav-link-font-weight: $font-weight-medium !default; $navdrawer-nav-link-height: 3rem !default; $navdrawer-subheader-color: $black-hint !default; @@ -241,28 +244,31 @@ $navdrawer-width: 17.5rem !default; // Picker // Based on https://material.google.com/components/pickers.html#pickers-date-pickers -$picker-border-radius: $border-radius !default; -$picker-cell-size: 2.5rem !default; -$picker-content-bg: $dialog-content-bg !default; -$picker-day-bg-selected: map-get(theme-color(primary), color) !default; -$picker-day-color-disabled: $black-hint !default; -$picker-day-color-today: map-get(theme-color(primary), color) !default; -$picker-elevation-shadow: $dialog-elevation-shadow !default; -$picker-header-bg: map-get(theme-color(primary), color) !default; -$picker-header-padding-x: 1.5rem !default; -$picker-header-padding-y: 1rem !default; -$picker-holder-bg: $dialog-backdrop-bg !default; -$picker-inner-spacer-x: 0.5rem !default; -$picker-inner-spacer-y: 0.5rem !default; -$picker-margin-x: $dialog-margin-x !default; -$picker-margin-y: $dialog-margin-y !default; -$picker-nav-next-icon: 'keyboard_arrow_right' !default; -$picker-nav-prev-icon: 'keyboard_arrow_left' !default; -$picker-weekday-color: $black-hint !default; +$picker-border-radius: $border-radius !default; +$picker-cell-size: 2.5rem !default; +$picker-content-bg: $dialog-content-bg !default; +$picker-day-bg-selected: theme-color(primary) !default; +$picker-day-color-disabled: $black-hint !default; +$picker-day-color-today: theme-color(primary) !default; +$picker-elevation-shadow: $dialog-elevation-shadow !default; +$picker-header-bg: theme-color(primary) !default; +$picker-header-padding-x: 1.5rem !default; +$picker-header-padding-y: 1rem !default; +$picker-holder-bg: $dialog-backdrop-bg !default; +$picker-inner-spacer-x: 0.5rem !default; +$picker-inner-spacer-y: 0.5rem !default; +$picker-margin-x: $dialog-margin-x !default; +$picker-margin-y: $dialog-margin-y !default; +$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-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; @@ -280,11 +286,11 @@ $selection-control-checkbox-icon: 'check_box_outline_blank' !default; $selection-control-checkbox-icon-checked: 'check_box' !default; $selection-control-checkbox-icon-indeterminate: 'indeterminate_check_box' !default; $selection-control-color: $black-secondary !default; -$selection-control-color-active: map-get(theme-color(secondary), color) !default; +$selection-control-color-active: theme-color(secondary) !default; $selection-control-color-disabled: rgba(0, 0, 0, 0.26) !default; $selection-control-indicator-size: $material-icon-size !default; $selection-control-radial-opacity: $black-divider-opacity !default; $selection-control-radio-icon: 'radio_button_unchecked' !default; $selection-control-radio-icon-checked: 'radio_button_checked' !default; @@ -303,11 +309,11 @@ $stepper-bg: $white !default; $stepper-border-color: $material-color-grey-400 !default; $stepper-border-width: $border-width !default; $stepper-icon-bg: $black-hint !default; -$stepper-icon-bg-active: map-get(theme-color(primary), color) !default; +$stepper-icon-bg-active: theme-color(primary) !default; $stepper-icon-color: $white-primary !default; $stepper-icon-font-size: 0.75rem !default; $stepper-icon-font-weight: $font-weight-regular !default; $stepper-icon-height: $material-icon-size !default; $stepper-inner-spacer: 0.5rem !default; @@ -323,27 +329,27 @@ $nav-tab-bg-hover: $black-divider !default; $nav-tab-border-color: $border-color !default; $nav-tab-border-width: $border-width !default; $nav-tab-color: $black-primary !default; -$nav-tab-color-active: map-get(theme-color(secondary), color) !default; +$nav-tab-color-active: theme-color(secondary) !default; $nav-tab-color-disabled: $black-hint !default; $nav-tab-font-size: 0.875rem !default; $nav-tab-font-weight: $font-weight-medium !default; $nav-tab-height: 3rem !default; -$nav-tab-indicator-bg: map-get(theme-color(secondary), color) !default; +$nav-tab-indicator-bg: theme-color(secondary) !default; $nav-tab-indicator-height: 0.125rem !default; $nav-tab-line-height: 1 !default; $nav-tab-link-opacity: 0.7 !default; $nav-tab-link-padding-x: 0.75rem !default; $nav-tab-link-padding-y: (($nav-tab-height - $nav-tab-font-size * $nav-tab-line-height) / 2) !default; // 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: map-get(theme-color(primary), color) !default; +$textfield-border-color-focus: theme-color(primary) !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; @@ -390,11 +396,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: map-get(theme-color(primary), color) !default; +$floating-label-color-focus: theme-color(primary) !default; $floating-label-font-size-focus: 0.75rem !default; // Toolbar (Bootstrap navbar) // Based on https://material.google.com/components/toolbars.html#toolbars-usage @@ -405,19 +411,18 @@ $toolbar-element-height: 2.25rem !default; $toolbar-element-opacity: 0.7 !default; $toolbar-elevation-shadow: $elevation-shadow-4dp !default; $toolbar-height: 3.5rem !default; $toolbar-inner-spacer-x: 1rem !default; -$toolbar-inner-spacer-y: 1rem !default; $toolbar-link-font-size: 1rem !default; $toolbar-link-height: $toolbar-element-height !default; $toolbar-link-line-height: 1 !default; $toolbar-link-padding-x: 1rem !default; $toolbar-link-padding-y: (($toolbar-link-height - $toolbar-link-font-size * $toolbar-link-line-height) / 2) !default; $toolbar-padding-x: 1rem !default; $toolbar-padding-y: (($toolbar-height - $toolbar-element-height) / 2) !default; $toolbar-toggler-icon: 'menu' !default; -$toolbar-waterfall-bg: map-get(theme-color(primary), color) !default; +$toolbar-waterfall-bg: theme-color(primary) !default; $toolbar-dark-color: $white-primary !default; $toolbar-dark-color-lighter: $white-hint !default; $toolbar-dark-element-bg: $white-divider !default;