| /** |
| * Copyright 2016 Leif Olsen. All Rights Reserved. |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| @import "functions"; |
| |
| // ---------------------------------------------------------------- |
| // Sample colors |
| // ---------------------------------------------------------------- |
| $mdlext-palette-amber-50: #FFF8E1; |
| $mdlext-palette-amber-100: #FFECB3; |
| $mdlext-palette-amber-500: #FFC107; |
| $mdlext-palette-amber-700: #FFA000; |
| $mdlext-palette-blue-grey-500: #607D8B; |
| $mdlext-palette-deep-orange-500: #FF5722; |
| $mdlext-palette-deep-purple-100: #D1C4E9; |
| $mdlext-palette-deep-purple-500: #512DA8; |
| $mdlext-palette-deep-purple-700: #673AB7; |
| $mdlext-palette-green-50: #E8F5E9; |
| $mdlext-palette-green-100: #C8E6C9; |
| $mdlext-palette-green-500: #4CAF50; |
| $mdlext-palette-green-700: #388E3C; |
| $mdlext-palette-grey-50: #FAFAFA; |
| $mdlext-palette-grey-100: #F5F5F5; |
| $mdlext-palette-grey-200: #EEEEEE; |
| $mdlext-palette-grey-300: #E0E0E0; |
| $mdlext-palette-grey-400: #BDBDBD; |
| $mdlext-palette-grey-500: #9E9E9E; |
| $mdlext-palette-grey-600: #757575; |
| $mdlext-palette-grey-700: #616161; |
| $mdlext-palette-grey-800: #424242; |
| $mdlext-palette-grey-900: #212121; |
| $mdlext-palette-indigo-A200: #536DFE; |
| $mdlext-palette-light-blue-500: #03A9F4; |
| $mdlext-palette-light-green-500: #8BC34A; |
| $mdlext-palette-pink-500: #E91E63; |
| $mdlext-palette-pink-700: #C2185B; |
| $mdlext-palette-pink-A400: #F50057; |
| $mdlext-palette-purple-A200: #E040FB; |
| $mdlext-palette-red-700: #D32F2F; |
| $mdlext-palette-red-A200: #FF5252; |
| $mdlext-palette-red-A400: #FF1744; |
| $mdlext-palette-yellow-500: #FFEB3B; |
| $mdlext-color-black: #000000; |
| $mdlext-color-white: #FFFFFF; |
| |
| |
| /* ========== Sticky Header ========== */ |
| $mdlext-sticky-header-background-color : transparent !default; |
| $mdlext-sticky-header-background-color-scroll : transparent !default; |
| $mdlext-sticky-header-gradient-color : rgb-string-to-hex($color-primary) !default; |
| $mdlext-sticky-header-gradient-color-start : $mdlext-sticky-header-gradient-color !default; |
| $mdlext-sticky-header-gradient-color-end : $mdlext-sticky-header-gradient-color-start !default; |
| $mdlext-sticky-header-gradient-color-scroll-start: rgba($mdlext-sticky-header-gradient-color, 0.98) !default; |
| $mdlext-sticky-header-gradient-color-scroll-end : rgba($mdlext-sticky-header-gradient-color, 0.95) !default; |
| |
| // Background shorthand |
| /* stylelint-disable */ |
| $mdlext-sticky-header-background : $mdlext-sticky-header-background-color |
| linear-gradient(to bottom, |
| $mdlext-sticky-header-gradient-color-start 0, |
| $mdlext-sticky-header-gradient-color-end 100%) !default; |
| |
| // Background shorthand when content is scrolling |
| $mdlext-sticky-header-background-scroll : $mdlext-sticky-header-background-color-scroll |
| linear-gradient(to bottom, |
| $mdlext-sticky-header-gradient-color-scroll-start 100%, |
| $mdlext-sticky-header-gradient-color-scroll-end 100%) !default; |
| /* stylelint-enable */ |
| |
| /* ========== Accordion ========== */ |
| $mdlext-accordion-header-background-color-base : $mdlext-palette-grey-500 !default; |
| $mdlext-accordion-header-background-color : rgba($mdlext-accordion-header-background-color-base, 0.20) !default; |
| $mdlext-accordion-header-background-open-color : rgba($mdlext-accordion-header-background-color-base, 0.30) !default; |
| $mdlext-accordion-header-background-active-color : rgba($mdlext-accordion-header-background-color-base, 0.40) !default; |
| $mdlext-accordion-header-border-color : rgba($mdlext-accordion-header-background-color-base, 0.50) !default; |
| $mdlext-accordion-header-background-hover-color : rgba($mdlext-accordion-header-background-color-base, 0.40) !default; |
| $mdlext-accordion-header-focus-outline-color : invert !default; |
| $mdlext-accordion-header-disabled-color : rgba($mdlext-accordion-header-background-color-base, 0.12) !default; |
| $mdlext-accordion-header-secondary-color : $mdlext-color-black !default; |
| $mdlext-accordion-header-secondary-color-disabled: rgba($mdlext-color-black, 0.26) !default; |
| $mdlext-accordion-header-highlight-color : darken($mdlext-accordion-header-border-color, 3%) !default; |
| $mdlext-accordion-ripple-color : rgba(rgb-string-to-hex($color-accent-contrast), 0.5) !default; |
| $mdlext-accordion-header-padding : 8px !default; |
| $mdlext-accordion-header-height : 56px !default; |
| $mdlext-accordion-content-padding : $mdlext-accordion-header-padding !default; |
| $mdlext-accordion-content-color : inherit !default; |
| $mdlext-accordion-content-background-color : transparent !default; |
| |
| |
| /* ========== Dialog ========== */ |
| $mdlext-dialog-padding : 0; |
| $mdlext-dialog-background-color : transparent !default; |
| $mdlext-dialog-backdrop-color : rgba(0, 0, 0, 0.86) !default; |
| $mdlext-dialog-open-animation : 0.5s 0.2s forwards !default; |
| $mdlext-dialog-backdrop-animation: 0.2s forwards !default; |
| |
| |
| /* ========== Lightbox ========== */ |
| $mdlext-lightbox-background-color : $card-background-color !default; |
| $mdlext-lightbox-border : 0 !default; |
| $mdlext-lightbox-border-radius : 0 !default; |
| $mdlext-lightbox-figure-margin : 0 !default; |
| $mdlext-lightbox-figure-padding : 0 !default; |
| $mdlext-lightbox-figcaption-background-color: rgba(255, 255, 255, 0.76) !default; |
| $mdlext-lightbox-footer-background-color : rgba(255, 255, 255, 0.86) !default; |
| |
| |
| /* ========== Lightboard ========== */ |
| $mdlext-lightboard-medium-small-breakpoint : $grid-tablet-breakpoint !default; // 480 |
| $mdlext-lightboard-medium-breakpoint : $grid-tablet-breakpoint + 180px !default; // 480 + 180 |
| $mdlext-lightboard-medium-large-breakpoint : $grid-desktop-breakpoint !default; // 840 |
| $mdlext-lightboard-large-breakpoint : $grid-desktop-breakpoint + 360px !default; // 840+360 |
| |
| $mdlext-lightboard-small-gutter : 2px !default; |
| $mdlext-lightboard-small-margin : 0 !default; |
| $mdlext-lightboard-small-columns : 2 !default; |
| $mdlext-lightboard-small-frame-width : 8px !default; |
| |
| $mdlext-lightboard-medium-small-gutter : 4px !default; |
| $mdlext-lightboard-medium-small-margin : 0 !default; |
| $mdlext-lightboard-medium-small-columns : 4 !default; |
| $mdlext-lightboard-medium-small-frame-width : 8px !default; |
| |
| $mdlext-lightboard-medium-gutter : 4px !default; |
| $mdlext-lightboard-medium-margin : 0 !default; |
| $mdlext-lightboard-medium-columns : 5 !default; |
| $mdlext-lightboard-medium-frame-width : 8px !default; |
| |
| $mdlext-lightboard-medium-large-gutter : 8px !default; |
| $mdlext-lightboard-medium-large-margin : 0 !default; |
| $mdlext-lightboard-medium-large-columns : 6 !default; |
| $mdlext-lightboard-medium-large-frame-width : 12px !default; |
| |
| $mdlext-lightboard-large-gutter : 8px !default; |
| $mdlext-lightboard-large-margin : 0 !default; |
| $mdlext-lightboard-large-columns : 7 !default; |
| $mdlext-lightboard-large-frame-width : 12px !default; |
| |
| $mdlext-lightboard-slide-max-size : 250px !default; |
| $mdlext-lightboard-slide-border-color : #D8D8D8 !default; |
| $mdlext-lightboard-slide-background-color : #F8F8F8 !default; |
| $mdlext-lightboard-slide-border-radius : 5px !default; |
| $mdlext-lightboard-slide-inner-border-radius : 3px !default; |
| $mdlext-lightboard-slide-box-shadow : 2px 2px 6px -1px rgba(219, 215, 219, 0.5) !default; |
| $mdlext-lightboard-slide-border-color-hover : #B8B8B8 !default; |
| $mdlext-lightboard-slide-background-color-hover: #E8E8E8 !default; |
| $mdlext-lightboard-slide-active-bacground-color: #E8E8E8 !default; |
| $mdlext-lightboard-slide-box-shadow-hover : 2px 2px 12px -1px rgba(219, 215, 219, 1) !default; |
| $mdlext-lightboard-ripple-color : $tab-highlight-color !default; |
| $mdlext-lightboard-focus-outline-color : inherit !default; |
| $mdlext-lightboard-figcaption-text-color : rgb-string-to-hex($palette-grey-400) !default; |
| |
| |
| /* ========== Carousel ========== */ |
| $mdlext-carousel-slide-border-top-width : 2px !default; |
| $mdlext-carousel-slide-border-top-color : rgb-string-to-hex($color-accent) !default; |
| $mdlext-carousel-slide-margin-horizontal : 0; |
| $mdlext-carousel-slide-figcaption-color : $mdlext-lightboard-figcaption-text-color !default; |
| $mdlext-carousel-slide-ripple-color : $mdlext-lightboard-ripple-color !default; |
| |
| |
| /* ========== Bordered fields ========== */ |
| $mdlext-bordered-field-vertical-spacing-top : 0 !default; |
| $mdlext-bordered-field-vertical-spacing-bottom : $input-text-vertical-spacing !default; |
| |
| $mdlext-bordered-field-input-text-font-size : $input-text-font-size !default; |
| $mdlext-bordered-field-font-weight : normal !default; |
| $mdlext-bordered-field-border-width : 1px !default; |
| $mdlext-bordered-field-border-radius : 3px !default; |
| $mdlext-bordered-field-padding : $input-text-padding + 4px !default; |
| $mdlext-bordered-field-padding-top : $input-text-vertical-spacing !default; |
| $mdlext-bordered-field-padding-bottom : $input-text-padding !default; |
| |
| $mdlext-bordered-field-input-text-color : inherit !default; |
| $mdlext-bordered-field-border-color : rgba($mdlext-color-black, 0.26) !default; |
| $mdlext-bordered-field-background-color : rgba(#FFFFFF, 0.2) !default; |
| $mdlext-bordered-field-focus-border-color : rgb-string-to-hex($color-primary) !default; |
| $mdlext-bordered-field-focus-background-color : rgba(#EEEEEE, 0.2) !default; |
| |
| $mdlext-bordered-field-input-text-disabled-text-color : rgba($mdlext-color-black, 0.12) !default; |
| $mdlext-bordered-field-disabled-border-color : rgba($mdlext-color-black, 0.12) !default; |
| $mdlext-bordered-field-disabled-background-color : $mdlext-bordered-field-background-color !default; |
| |
| $mdlext-bordered-field-input-text-error-color : $mdlext-bordered-field-input-text-color !default; |
| $mdlext-bordered-field-error-border-color : rgb-string-to-hex($input-text-error-color) !default; |
| $mdlext-bordered-field-error-background-color : rgba(lighten($mdlext-bordered-field-error-border-color, 50%), 0.5) !default; |
| $mdlext-bordered-field-error-focus-border-color : darken($mdlext-bordered-field-error-border-color, 10%) !default; |
| $mdlext-bordered-field-error-focus-background-color : $mdlext-bordered-field-error-background-color !default; |
| |
| $mdlext-bordered-field-input-text-label-color : rgba($mdlext-color-black, 0.26) !default; |
| $mdlext-bordered-field-input-text-label-focus-color : $mdlext-bordered-field-focus-border-color !default; |
| $mdlext-bordered-field-input-text-label-error-color : $mdlext-bordered-field-error-border-color !default; |
| $mdlext-bordered-field-input-text-label-disabled-color: rgba($mdlext-color-black, 0.12) !default; |
| |
| $mdlext-bordered-field-label-font-size : $mdlext-bordered-field-input-text-font-size !default; |
| $mdlext-bordered-field-floating-label-font-size : $input-text-floating-label-fontsize !default; |
| $mdlext-bordered-field-floating-label-font-weight : normal !default; |
| |
| $mdlext-bordered-field-height : $mdlext-bordered-field-padding-top + $mdlext-bordered-field-padding-bottom + $mdlext-bordered-field-input-text-font-size + 6px !default; |
| $mdlext-bordered-field-floating-label-focus-bottom : $mdlext-bordered-field-height - $mdlext-bordered-field-floating-label-font-size - $mdlext-bordered-field-padding-top/2 !default; |
| |
| |
| // MDL can not handle required attribute properly. Planned for MDL-v2 |
| //$mdlext-bordered-field-required-border-color : rgba(rgb-string-to-hex($color-accent), 0.8) !default; |
| //$mdlext-bordered-field-required-background-color : $mdlext-bordered-field-background-color !default; |
| //$mdlext-bordered-field-required-focus-border-color : rgba(rgb-string-to-hex($color-accent), 0.8) !default; |
| //$mdlext-bordered-field-required-focus-background-color: $mdlext-bordered-field-background-color !default; |
| //$mdlext-bordered-field-label-required-color : $mdlext-bordered-field-required-border-color !default; |
| |
| |
| |
| /* ========== Color Themes ========== */ |
| |
| // ---------------------------------------------------------------- |
| // Light Color Theme. |
| // ---------------------------------------------------------------- |
| $mdlext-light-color-primary: #4CAF50 !default; |
| $mdlext-light-color-primary-dark: #388E3C !default; |
| $mdlext-light-color-primary-light: #4CAF50 !default; // Fallback color. Set to color-primary if fallback is not needed |
| $mdlext-light-color-primary-contrast: #C8E6C9 !default; // text color on primary/primary dark background |
| $mdlext-light-color-accent: #E040FB !default; |
| $mdlext-light-color-accent-light: #E040FB !default; // Fallback color. Set to color-accent if fallback is not needed |
| $mdlext-light-color-accent-contrast: #FAFAFA !default; |
| |
| $mdlext-light-content-background-color: #FAFAFA !default; // background color on content (paper/card) background |
| $mdlext-light-text-color-primary: rgba($mdlext-color-black, 0.87) !default; // text color on content (paper/card) background |
| $mdlext-light-text-color-secondary: rgba($mdlext-color-black, 0.54) !default; // text color on content (paper/card) background |
| $mdlext-light-text-color-disabled: rgba($mdlext-color-black, 0.38) !default; // disabled text, hint text, and icons |
| $mdlext-light-divider-color: rgba($mdlext-color-black, 0.12) !default; // -> $card-border-color |
| $mdlext-light-error-color: #D32F2F !default; |
| |
| // Anchor |
| $mdlext-light-text-link-color: $mdlext-light-color-accent !default; |
| |
| // Card |
| $mdlext-light-card-background-color: $mdlext-light-content-background-color !default; |
| $mdlext-light-card-text-color: $mdlext-light-text-color-primary !default; |
| $mdlext-light-card-image-placeholder-color: $mdlext-light-color-accent !default; |
| $mdlext-light-card-supporting-text-text-color: rgba($mdlext-color-black, 0.54) !default; |
| $mdlext-light-card-border-color: rgba(0, 0, 0, 0.1) !default; |
| $mdlext-light-card-subtitle-color: rgba($mdlext-color-black, 0.54) !default; |
| |
| // Item |
| |
| // Default Item Colors |
| $mdlext-light-default-item-text-color: rgba($mdlext-color-black, 0.87) !default; |
| $mdlext-light-default-item-outline-color: $mdlext-palette-grey-400 !default; |
| $mdlext-light-default-item-hover-bg-color: $mdlext-palette-grey-200 !default; |
| $mdlext-light-default-item-focus-bg-color: $mdlext-palette-grey-200 !default; |
| $mdlext-light-default-item-active-bg-color: $mdlext-palette-grey-300 !default; |
| $mdlext-light-default-item-divider-color: rgba($mdlext-color-black, 0.12) !default; |
| |
| // Disabled Button Colors |
| $mdlext-light-disabled-item-text-color: $mdlext-palette-grey-400 !default; |
| |
| // Dropdown menu / menu-button |
| $mdlext-light-default-dropdown-bg-color: $mdlext-color-white !default; |
| |
| // Badge |
| $mdlext-light-badge-color: $mdlext-light-color-accent-contrast !default; |
| $mdlext-light-badge-color-inverse: $mdlext-light-color-accent !default; |
| $mdlext-light-badge-background: $mdlext-light-color-accent !default; |
| $mdlext-light-badge-background-inverse: $mdlext-light-color-accent-contrast !default; |
| |
| // Default button colors. |
| $mdlext-light-button-primary-color: rgba($mdlext-palette-grey-500, 0.20) !default; |
| $mdlext-light-button-secondary-color: $mdlext-color-black !default; |
| $mdlext-light-button-hover-color: $mdlext-light-button-primary-color !default; |
| $mdlext-light-button-active-color: rgba($mdlext-palette-grey-500, 0.40) !default; |
| $mdlext-light-button-focus-color: rgba($mdlext-color-black, 0.12) !default; |
| |
| // Colored button colors. |
| $mdlext-light-button-primary-color-alt: $mdlext-light-color-primary-light !default; |
| $mdlext-light-button-secondary-color-alt: $mdlext-light-color-primary-contrast !default; |
| $mdlext-light-button-hover-color-alt: darken($mdlext-light-color-primary-light, 10%) !default; |
| $mdlext-light-button-active-color-alt: darken($mdlext-light-color-primary-light, 10%) !default; |
| $mdlext-light-button-focus-color-alt: $mdlext-light-button-focus-color !default; |
| |
| // Ripple color for colored raised buttons. |
| $mdlext-light-button-ripple-color-alt: $mdlext-light-color-primary-contrast !default; |
| |
| // Disabled button colors. |
| $mdlext-light-button-primary-color-disabled: rgba($mdlext-color-black, 0.12) !default; |
| $mdlext-light-button-secondary-color-disabled: rgba($mdlext-color-black, 0.26) !default; |
| |
| // FAB colors and sizes. |
| $mdlext-light-button-fab-color-alt: $mdlext-light-color-accent !default; |
| $mdlext-light-button-fab-hover-color-alt: $mdlext-light-color-accent !default; |
| $mdlext-light-button-fab-active-color-alt: $mdlext-light-color-accent !default; |
| $mdlext-light-button-fab-text-color-alt: $mdlext-light-color-accent-contrast !default; |
| $mdlext-light-button-fab-ripple-color-alt: $mdlext-light-color-accent-contrast !default; |
| |
| // Slider |
| $mdlext-light-range-bg-color: rgba($mdlext-color-black, 0.26) !default; |
| $mdlext-light-range-color: $mdlext-light-color-accent-light !default; |
| $mdlext-light-range-faded-color: rgba($mdlext-light-color-accent-light, 0.26) !default; |
| $mdlext-light-range-bg-focus-color: rgba($mdlext-color-black, 0.12) !default; |
| |
| // Textfields |
| $mdlext-light-input-text-background-color: transparent !default; |
| $mdlext-light-input-text-label-color: rgba($mdlext-color-black, 0.54) !default; |
| $mdlext-light-input-text-bottom-border-color: rgba($mdlext-color-black, 0.26) !default; |
| $mdlext-light-input-text-highlight-color: $mdlext-light-color-accent-light !default; |
| $mdlext-light-input-text-disabled-color: rgba($mdlext-color-black, 0.12) !default; |
| $mdlext-light-input-text-disabled-text-color: rgba($mdlext-color-black, 0.26) !default; |
| $mdlext-light-input-text-error-color: $mdlext-light-error-color !default; |
| |
| // Checkboxes |
| $mdlext-light-checkbox-color: $mdlext-light-color-accent-light !default; |
| $mdlext-light-checkbox-off-color: rgba($mdlext-color-black, 0.54) !default; |
| $mdlext-light-checkbox-disabled-color: rgba($mdlext-color-black, 0.26) !default; |
| $mdlext-light-checkbox-focus-color: rgba($mdlext-light-color-accent-light, 0.26) !default; |
| |
| // Icon Toggles |
| $mdlext-light-icon-toggle-color: $mdlext-palette-grey-700 !default; |
| $mdlext-light-icon-toggle-focus-color: $mdlext-light-button-focus-color !default; |
| $mdlext-light-icon-toggle-checked-color: $mdlext-light-color-accent-light !default; |
| $mdlext-light-icon-toggle-checked-focus-color: rgba($mdlext-light-color-accent-light, 0.26) !default; |
| $mdlext-light-icon-toggle-disabled-color: rgba($mdlext-color-black, 0.26) !default; |
| |
| // Radio Buttons |
| $mdlext-light-radio-color: $mdlext-light-color-accent-light !default; |
| $mdlext-light-radio-off-color: rgba($mdlext-color-black, 0.54) !default; |
| $mdlext-light-radio-disabled-color: rgba($mdlext-color-black, 0.26) !default; |
| |
| // Switches |
| $mdlext-light-switch-color: $mdlext-light-color-accent-light !default; |
| $mdlext-light-switch-faded-color: rgba($mdlext-light-color-accent-light, 0.26) !default; |
| $mdlext-light-switch-thumb-color: $mdlext-light-switch-color !default; |
| $mdlext-light-switch-track-color: rgba($mdlext-light-color-accent-light, 0.54) !default; |
| $mdlext-light-switch-off-thumb-color: $mdlext-palette-grey-50 !default; |
| $mdlext-light-switch-off-track-color: rgba($mdlext-color-black, 0.26) !default; |
| $mdlext-light-switch-disabled-thumb-color: $mdlext-palette-grey-400 !default; |
| $mdlext-light-switch-disabled-track-color: rgba($mdlext-color-black, 0.12) !default; |
| |
| // Data table |
| $mdlext-light-data-table-background-color: $mdlext-light-content-background-color !default; |
| $mdlext-light-data-table-header-color: rgba($mdlext-color-black, 0.54) !default; |
| $mdlext-light-data-table-header-sorted-color: rgba($mdlext-color-black, 0.87) !default; |
| $mdlext-light-data-table-header-sorted-icon-hover-color: rgba($mdlext-color-black, 0.26) !default; |
| $mdlext-light-data-table-hover-color: $mdlext-palette-grey-200 !default; |
| $mdlext-light-data-table-selection-color: $mdlext-palette-grey-200 !default; |
| $mdlext-light-data-table-divider-color: rgba($mdlext-color-black, 0.12) !default; |
| $mdlext-light-data-table-dividers: 1px solid $mdlext-light-data-table-divider-color !default; |
| |
| |
| // Selectfield |
| // Uses variables from textfield |
| $mdlext-selectfield-arrow-width: 0.7em; |
| $mdlext-selectfield-arrow-length: 0.5em; |
| |
| |
| // Accordion |
| $mdlext-light-accordion-header-background-color-base : $mdlext-palette-grey-600 !default; |
| $mdlext-light-accordion-header-background-color : rgba($mdlext-light-accordion-header-background-color-base, 0.20) !default; |
| $mdlext-light-accordion-header-background-open-color : rgba($mdlext-light-accordion-header-background-color-base, 0.30) !default; |
| $mdlext-light-accordion-header-background-active-color : rgba($mdlext-light-accordion-header-background-color-base, 0.40) !default; |
| $mdlext-light-accordion-header-border-color : rgba($mdlext-light-accordion-header-background-color-base, 0.50) !default; |
| $mdlext-light-accordion-header-background-hover-color : rgba($mdlext-light-accordion-header-background-color-base, 0.40) !default; |
| $mdlext-light-accordion-header-focus-outline-color : darken($mdlext-light-accordion-header-border-color, 3%) !default; |
| $mdlext-light-accordion-header-disabled-color : rgba($mdlext-light-accordion-header-background-color-base, 0.12) !default; |
| $mdlext-light-accordion-header-secondary-color : $mdlext-color-black !default; |
| $mdlext-light-accordion-header-secondary-color-disabled: rgba($mdlext-color-black, 0.26) !default; |
| $mdlext-light-accordion-header-highlight-color : darken($mdlext-light-accordion-header-border-color, 6%) !default; |
| $mdlext-light-accordion-ripple-color : rgba($mdlext-light-accordion-header-background-color-base, 0.4) !default; |
| $mdlext-light-accordion-content-color : inherit !default; |
| $mdlext-light-accordion-content-background-color : transparent !default; |
| |
| |
| // Bordered fields |
| $mdlext-light-bordered-field-input-text-color : inherit !default; |
| $mdlext-light-bordered-field-border-color : $mdlext-light-input-text-bottom-border-color !default; |
| $mdlext-light-bordered-field-background-color : rgba($mdlext-light-content-background-color, 0.1) !default; |
| $mdlext-light-bordered-field-focus-border-color : $mdlext-light-color-accent-light !default; |
| $mdlext-light-bordered-field-focus-background-color : rgba(darken($mdlext-light-bordered-field-background-color, 10%), 0.1) !default; |
| |
| $mdlext-light-bordered-field-input-text-disabled-text-color : $mdlext-light-input-text-disabled-text-color; |
| $mdlext-light-bordered-field-disabled-border-color : $mdlext-light-input-text-disabled-color !default; |
| $mdlext-light-bordered-field-disabled-background-color : $mdlext-light-bordered-field-background-color !default; |
| |
| $mdlext-light-bordered-field-input-text-error-color : $mdlext-light-bordered-field-input-text-color !default; |
| $mdlext-light-bordered-field-error-border-color : $mdlext-light-input-text-error-color !default; |
| $mdlext-light-bordered-field-error-background-color : rgba(lighten($mdlext-light-bordered-field-error-border-color, 50%), 0.5) !default; |
| $mdlext-light-bordered-field-error-focus-border-color : darken($mdlext-light-bordered-field-error-border-color, 10%) !default; |
| $mdlext-light-bordered-field-error-focus-background-color : $mdlext-light-bordered-field-error-background-color !default; |
| |
| $mdlext-light-bordered-field-input-text-label-color : $mdlext-light-input-text-label-color !default; |
| $mdlext-light-bordered-field-input-text-label-focus-color : $mdlext-light-bordered-field-focus-border-color !default; |
| $mdlext-light-bordered-field-input-text-label-error-color : $mdlext-light-bordered-field-error-border-color !default; |
| $mdlext-light-bordered-field-input-text-label-disabled-color: $mdlext-light-input-text-disabled-text-color !default; |
| |
| |
| |
| // ---------------------------------------------------------------- |
| // Dark Color Theme. |
| // ---------------------------------------------------------------- |
| $mdlext-dark-color-primary: #FFC107 !default; |
| $mdlext-dark-color-primary-dark: #FFA000 !default; |
| $mdlext-dark-color-primary-light: #FFC107 !default; // Fallback color. Set to color-primary if fallback is not needed |
| $mdlext-dark-color-primary-contrast: #FFF8E1 !default; // text color on primary/primary dark background |
| $mdlext-dark-color-accent: #536DFE !default; |
| $mdlext-dark-color-accent-light: #536DFE !default; // Fallback color. Set to color-accent if fallback is not needed |
| $mdlext-dark-color-accent-contrast: #FFFFFF !default; |
| |
| $mdlext-dark-content-background-color: #303030 !default; // #424242 or #303030, background color on content (paper/card) background |
| $mdlext-dark-text-color-primary: rgba(#FFFFFF, 1.00) !default; // text color on content (paper/card) background |
| $mdlext-dark-text-color-secondary: rgba(#FFFFFF, 0.70) !default; // text color on content (paper/card) background |
| $mdlext-dark-text-color-disabled: rgba(#FFFFFF, 0.50) !default; // disabled text, hint text, and icons |
| $mdlext-dark-divider-color: rgba(#FFFFFF, 0.12) !default; // -> $card-border-color |
| $mdlext-dark-error-color: #FF1744 !default; |
| |
| // Anchor |
| $mdlext-dark-text-link-color: $mdlext-dark-color-accent !default; |
| |
| // Card |
| $mdlext-dark-card-background-color: $mdlext-dark-content-background-color !default; |
| $mdlext-dark-card-text-color: $mdlext-dark-text-color-primary !default; |
| $mdlext-dark-card-image-placeholder-color: $mdlext-dark-color-accent !default; |
| $mdlext-dark-card-supporting-text-text-color: rgba($mdlext-color-white, 0.70) !default; |
| $mdlext-dark-card-border-color: rgba(0, 0, 0, 0.1) !default; |
| $mdlext-dark-card-subtitle-color: rgba($mdlext-color-black, 0.70) !default; |
| |
| // Item |
| |
| // Default Item Colors |
| $mdlext-dark-default-item-text-color: rgba($mdlext-color-white, 0.87) !default; |
| $mdlext-dark-default-item-outline-color: $mdlext-palette-grey-700 !default; |
| $mdlext-dark-default-item-hover-bg-color: $mdlext-palette-grey-900 !default; |
| $mdlext-dark-default-item-focus-bg-color: $mdlext-palette-grey-900 !default; |
| $mdlext-dark-default-item-active-bg-color: $mdlext-palette-grey-800 !default; |
| $mdlext-dark-default-item-divider-color: rgba($mdlext-color-white, 0.20) !default; |
| |
| // Disabled Button Colors |
| $mdlext-dark-disabled-item-text-color: $mdlext-palette-grey-500 !default; |
| |
| // Dropdown menu / menu-button |
| $mdlext-dark-default-dropdown-bg-color: $mdlext-color-black !default; |
| |
| // Badge |
| $mdlext-dark-badge-color: $mdlext-dark-color-accent-contrast !default; |
| $mdlext-dark-badge-color-inverse: $mdlext-dark-color-accent !default; |
| $mdlext-dark-badge-background: $mdlext-dark-color-accent !default; |
| $mdlext-dark-badge-background-inverse: $mdlext-dark-color-accent-contrast !default; |
| |
| // Default button colors. |
| $mdlext-dark-button-primary-color: rgba($mdlext-palette-grey-500, 0.20) !default; |
| $mdlext-dark-button-secondary-color: $mdlext-color-white !default; |
| $mdlext-dark-button-hover-color: $mdlext-dark-button-primary-color !default; |
| $mdlext-dark-button-active-color: rgba($mdlext-palette-grey-500, 0.40) !default; |
| $mdlext-dark-button-focus-color: rgba($mdlext-color-black, 0.12) !default; |
| |
| // Colored button colors. |
| $mdlext-dark-button-primary-color-alt: $mdlext-dark-color-primary-light !default; |
| $mdlext-dark-button-secondary-color-alt: $mdlext-dark-color-primary-contrast !default; |
| $mdlext-dark-button-hover-color-alt: darken($mdlext-dark-color-primary-light, 10%) !default; |
| $mdlext-dark-button-active-color-alt: darken($mdlext-dark-color-primary-light, 10%) !default; |
| $mdlext-dark-button-focus-color-alt: $mdlext-dark-button-focus-color !default; |
| |
| // Ripple color for colored raised buttons. |
| $mdlext-dark-button-ripple-color-alt: $mdlext-dark-color-primary-contrast !default; |
| |
| // Disabled button colors. |
| $mdlext-dark-button-primary-color-disabled: rgba($mdlext-color-white, 0.12) !default; |
| $mdlext-dark-button-secondary-color-disabled: rgba($mdlext-color-white, 0.26) !default; |
| |
| // FAB colors and sizes. |
| $mdlext-dark-button-fab-color-alt: $mdlext-dark-color-accent !default; |
| $mdlext-dark-button-fab-hover-color-alt: $mdlext-dark-color-accent !default; |
| $mdlext-dark-button-fab-active-color-alt: $mdlext-dark-color-accent !default; |
| $mdlext-dark-button-fab-text-color-alt: $mdlext-dark-color-accent-contrast !default; |
| $mdlext-dark-button-fab-ripple-color-alt: $mdlext-dark-color-accent-contrast !default; |
| |
| // Slider |
| $mdlext-dark-range-bg-color: rgba($mdlext-color-white, 0.87) !default; |
| $mdlext-dark-range-color: $mdlext-dark-color-accent-light !default; |
| $mdlext-dark-range-faded-color: rgba($mdlext-dark-color-accent-light, 0.50) !default; |
| $mdlext-dark-range-bg-focus-color: rgba($mdlext-color-white, 0.50) !default; |
| |
| // Textfields |
| $mdlext-dark-input-text-background-color: transparent !default; |
| $mdlext-dark-input-text-label-color: rgba($mdlext-color-white, 0.50) !default; |
| $mdlext-dark-input-text-bottom-border-color: rgba($mdlext-color-white, 0.26) !default; |
| $mdlext-dark-input-text-highlight-color: $mdlext-dark-color-accent-light !default; |
| $mdlext-dark-input-text-disabled-color: rgba($mdlext-color-white, 0.12) !default; |
| $mdlext-dark-input-text-disabled-text-color: rgba($mdlext-color-white, 0.26) !default; |
| $mdlext-dark-input-text-error-color: $mdlext-dark-error-color !default; |
| |
| // Checkboxes |
| $mdlext-dark-checkbox-color: $mdlext-dark-color-accent-light !default; |
| $mdlext-dark-checkbox-off-color: rgba($mdlext-color-white, 0.50) !default; |
| $mdlext-dark-checkbox-disabled-color: rgba($mdlext-color-white, 0.26) !default; |
| $mdlext-dark-checkbox-focus-color: rgba($mdlext-dark-color-accent-light, 0.26) !default; |
| |
| // Icon Toggles |
| $mdlext-dark-icon-toggle-color: $mdlext-palette-grey-700 !default; |
| $mdlext-dark-icon-toggle-focus-color: $mdlext-dark-button-focus-color !default; |
| $mdlext-dark-icon-toggle-checked-color: $mdlext-dark-color-accent-light !default; |
| $mdlext-dark-icon-toggle-checked-focus-color: rgba($mdlext-dark-color-accent-light, 0.26) !default; |
| $mdlext-dark-icon-toggle-disabled-color: rgba($mdlext-color-white, 0.50) !default; |
| |
| // Radio Buttons |
| $mdlext-dark-radio-color: $mdlext-dark-color-accent-light !default; |
| $mdlext-dark-radio-off-color: rgba($mdlext-color-white, 0.50) !default; |
| $mdlext-dark-radio-disabled-color: rgba($mdlext-color-white, 0.26) !default; |
| |
| // Switches |
| $mdlext-dark-switch-color: $mdlext-dark-color-accent-light !default; |
| $mdlext-dark-switch-faded-color: rgba($mdlext-dark-color-accent-light, 0.26) !default; |
| $mdlext-dark-switch-thumb-color: $mdlext-dark-switch-color !default; |
| $mdlext-dark-switch-track-color: rgba($mdlext-dark-color-accent-light, 0.5) !default; |
| $mdlext-dark-switch-off-thumb-color: $mdlext-palette-grey-50 !default; |
| $mdlext-dark-switch-off-track-color: rgba($mdlext-color-white, 0.26) !default; |
| $mdlext-dark-switch-disabled-thumb-color: $mdlext-palette-grey-50 !default; |
| $mdlext-dark-switch-disabled-track-color: rgba($mdlext-color-white, 0.12) !default; |
| |
| // Data table |
| $mdlext-dark-data-table-background-color: $mdlext-dark-content-background-color !default; |
| $mdlext-dark-data-table-header-color: rgba($mdlext-color-white, 0.87) !default; |
| $mdlext-dark-data-table-header-sorted-color: rgba($mdlext-color-white, 0.87) !default; |
| $mdlext-dark-data-table-header-sorted-icon-hover-color: rgba($mdlext-color-white, 0.26) !default; |
| $mdlext-dark-data-table-hover-color: $mdlext-dark-default-item-hover-bg-color !default; |
| $mdlext-dark-data-table-selection-color: $mdlext-dark-default-item-active-bg-color !default; |
| $mdlext-dark-data-table-divider-color: rgba($mdlext-color-white, 0.12) !default; |
| $mdlext-dark-data-table-dividers: 1px solid $mdlext-dark-data-table-divider-color !default; |
| |
| |
| // Selectfield |
| // Uses variables from textfield |
| |
| |
| // Accordion |
| $mdlext-dark-accordion-header-background-color-base : $mdlext-color-black !default; |
| $mdlext-dark-accordion-header-background-color : rgba($mdlext-dark-accordion-header-background-color-base, 1.0) !default; |
| $mdlext-dark-accordion-header-background-open-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.9) !default; |
| $mdlext-dark-accordion-header-border-color : $mdlext-palette-grey-800 !default; |
| $mdlext-dark-accordion-header-background-hover-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.5) !default; |
| $mdlext-dark-accordion-header-background-active-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.6) !default; |
| $mdlext-dark-accordion-header-focus-outline-color : lighten($mdlext-dark-accordion-header-border-color, 40%) !default; |
| $mdlext-dark-accordion-header-disabled-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.4) !default; |
| $mdlext-dark-accordion-header-secondary-color : $mdlext-dark-text-color-primary !default; |
| $mdlext-dark-accordion-header-secondary-color-disabled: $mdlext-dark-text-color-disabled !default; |
| $mdlext-dark-accordion-header-highlight-color : lighten($mdlext-dark-accordion-header-border-color, 40%) !default; |
| $mdlext-dark-accordion-ripple-color : rgba($mdlext-dark-accordion-header-background-color-base, 0.3) !default; |
| $mdlext-dark-accordion-content-color : inherit !default; |
| $mdlext-dark-accordion-content-background-color : transparent !default; |
| |
| |
| // Bordered fields |
| $mdlext-dark-bordered-field-input-text-color : inherit !default; |
| $mdlext-dark-bordered-field-border-color : $mdlext-dark-input-text-bottom-border-color !default; |
| $mdlext-dark-bordered-field-background-color : rgba($mdlext-dark-content-background-color, 0.1) !default; |
| $mdlext-dark-bordered-field-focus-border-color : $mdlext-dark-color-accent-light !default; |
| $mdlext-dark-bordered-field-focus-background-color : rgba(darken($mdlext-dark-bordered-field-background-color, 10%), 0.1) !default; |
| |
| $mdlext-dark-bordered-field-input-text-disabled-text-color : $mdlext-dark-input-text-disabled-text-color; |
| $mdlext-dark-bordered-field-disabled-border-color : $mdlext-dark-input-text-disabled-color !default; |
| $mdlext-dark-bordered-field-disabled-background-color : $mdlext-dark-bordered-field-background-color !default; |
| |
| $mdlext-dark-bordered-field-input-text-error-color : $mdlext-dark-bordered-field-input-text-color !default; |
| $mdlext-dark-bordered-field-error-border-color : $mdlext-dark-input-text-error-color !default; |
| $mdlext-dark-bordered-field-error-background-color : rgba($mdlext-dark-bordered-field-error-border-color, 0.1) !default; |
| $mdlext-dark-bordered-field-error-focus-border-color : darken($mdlext-dark-bordered-field-error-border-color, 10%) !default; |
| $mdlext-dark-bordered-field-error-focus-background-color : $mdlext-dark-bordered-field-error-background-color !default; |
| |
| $mdlext-dark-bordered-field-input-text-label-color : $mdlext-dark-input-text-label-color !default; |
| $mdlext-dark-bordered-field-input-text-label-focus-color : $mdlext-dark-bordered-field-focus-border-color !default; |
| $mdlext-dark-bordered-field-input-text-label-error-color : $mdlext-dark-bordered-field-error-border-color !default; |
| $mdlext-dark-bordered-field-input-text-label-disabled-color: $mdlext-dark-input-text-disabled-text-color !default; |