| @import "color-themes"; |
| |
| .mdlext-light-color-theme { |
| background-color: $mdlext-light-content-background-color; |
| color: $mdlext-light-text-color-primary; |
| |
| a { |
| outline-color: inherit; |
| } |
| } |
| |
| // mdl/src/palette/_palette.scss |
| // ----------------------------- |
| .mdlext-light-color-theme { |
| |
| .mdl-color--primary { |
| background-color: $mdlext-light-color-primary !important; |
| } |
| |
| .mdl-color--primary-contrast { |
| background-color: $mdlext-light-color-primary-contrast !important; |
| } |
| |
| .mdl-color--primary-dark { |
| background-color: $mdlext-light-color-primary-dark !important; |
| } |
| |
| .mdl-color--accent { |
| background-color: $mdlext-light-color-accent !important; |
| } |
| |
| .mdl-color--accent-contrast { |
| background-color: $mdlext-light-color-accent-contrast !important; |
| } |
| |
| .mdl-color-text--primary { |
| color: $mdlext-light-color-primary !important; |
| } |
| |
| .mdl-color-text--primary-contrast { |
| color: $mdlext-light-color-primary-contrast !important; |
| } |
| |
| .mdl-color-text--primary-dark { |
| color: $mdlext-light-color-primary-dark !important; |
| } |
| |
| .mdl-color-text--accent { |
| color: $mdlext-light-color-accent !important; |
| } |
| |
| .mdl-color-text--accent-contrast { |
| color: $mdlext-light-color-accent-contrast !important; |
| } |
| |
| } |
| |
| // mdl/src/typography/_typography.scss |
| // ----------------------------------- |
| .mdlext-light-color-theme { |
| a { |
| color: $mdlext-light-text-link-color; |
| } |
| } |
| |
| |
| // mdl/src/badge/_badge.scss |
| // --------------------------- |
| .mdlext-light-color-theme { |
| .mdl-badge { |
| |
| &[data-badge]::after { |
| background: $mdlext-light-badge-background; |
| color: $mdlext-light-badge-color; |
| } |
| |
| &.mdl-badge--no-background { |
| &[data-badge]::after { |
| color: $mdlext-light-badge-color-inverse; |
| background: $mdlext-light-badge-background-inverse; |
| } |
| } |
| } |
| } |
| |
| |
| // mdl/src/button/_button.scss |
| // --------------------------- |
| .mdlext-light-color-theme { |
| |
| .mdl-button { |
| background: transparent; |
| color: $mdlext-light-button-secondary-color; |
| |
| &:hover { |
| background-color: $mdlext-light-button-hover-color; |
| } |
| |
| &:focus:not(:active) { |
| background-color: $mdlext-light-button-focus-color; |
| } |
| |
| &:active { |
| background-color: $mdlext-light-button-active-color; |
| } |
| |
| &.mdl-button--colored { |
| color: $mdlext-light-button-primary-color-alt; |
| |
| &:focus:not(:active) { |
| background-color: $mdlext-light-button-focus-color-alt; |
| } |
| } |
| } |
| |
| // Raised buttons |
| .mdl-button--raised { |
| background: $mdlext-light-button-primary-color; |
| |
| &:active { |
| background-color: $mdlext-light-button-active-color; |
| } |
| |
| &:focus:not(:active) { |
| background-color: $mdlext-light-button-active-color; |
| } |
| |
| &.mdl-button--colored { |
| background: $mdlext-light-button-primary-color-alt; |
| color: $mdlext-light-button-secondary-color-alt; |
| |
| &:hover { |
| background-color: $mdlext-light-button-hover-color-alt; |
| } |
| |
| &:active { |
| background-color: $mdlext-light-button-active-color-alt; |
| } |
| |
| &:focus:not(:active) { |
| background-color: $mdlext-light-button-active-color-alt; |
| } |
| |
| & .mdl-ripple { |
| background: $mdlext-light-button-ripple-color-alt; |
| } |
| } |
| } |
| |
| |
| // FABs |
| .mdl-button--fab { |
| background: $mdlext-light-button-primary-color; |
| |
| &:active { |
| background-color: $mdlext-light-button-active-color; |
| } |
| |
| &:focus:not(:active) { |
| background-color: $mdlext-light-button-active-color; |
| } |
| |
| &.mdl-button--colored { |
| background: $mdlext-light-button-fab-color-alt; |
| color: $mdlext-light-button-fab-text-color-alt; |
| |
| &:hover { |
| background-color: $mdlext-light-button-fab-hover-color-alt; |
| } |
| |
| &:focus:not(:active) { |
| background-color: $mdlext-light-button-fab-active-color-alt; |
| } |
| |
| &:active { |
| background-color: $mdlext-light-button-fab-active-color-alt; |
| } |
| |
| & .mdl-ripple { |
| background: $mdlext-light-button-fab-ripple-color-alt; |
| } |
| } |
| } |
| |
| |
| // Icon buttons |
| .mdl-button--icon { |
| color: inherit; |
| } |
| |
| // Colorized buttons |
| |
| .mdl-button--primary.mdl-button--primary { |
| color: $mdlext-light-button-primary-color-alt; |
| |
| & .mdl-ripple { |
| background: $mdlext-light-button-secondary-color-alt; |
| } |
| &.mdl-button--raised, |
| &.mdl-button--fab { |
| color: $mdlext-light-button-secondary-color-alt; |
| background-color: $mdlext-light-button-primary-color-alt; |
| } |
| } |
| |
| .mdl-button--accent.mdl-button--accent { |
| color: $mdlext-light-button-fab-color-alt; |
| |
| & .mdl-ripple { |
| background: $mdlext-light-button-fab-text-color-alt; |
| } |
| &.mdl-button--raised, |
| &.mdl-button--fab { |
| color: $mdlext-light-button-fab-text-color-alt; |
| background-color: $mdlext-light-button-fab-color-alt; |
| } |
| } |
| |
| // Disabled buttons |
| |
| .mdl-button { |
| // Bump up specificity by using [disabled] twice. |
| &[disabled][disabled], |
| &.mdl-button--disabled.mdl-button--disabled { |
| color: $mdlext-light-button-secondary-color-disabled; |
| background-color: transparent; |
| } |
| |
| &--fab { |
| // Bump up specificity by using [disabled] twice. |
| &[disabled][disabled], |
| &.mdl-button--disabled.mdl-button--disabled { |
| background-color: $mdlext-light-button-primary-color-disabled; |
| color: $mdlext-light-button-secondary-color-disabled; |
| } |
| } |
| |
| &--raised { |
| // Bump up specificity by using [disabled] twice. |
| &[disabled][disabled], |
| &.mdl-button--disabled.mdl-button--disabled { |
| background-color: $mdlext-light-button-primary-color-disabled; |
| color: $mdlext-light-button-secondary-color-disabled; |
| } |
| } |
| &--colored { |
| // Bump up specificity by using [disabled] twice. |
| &[disabled][disabled], |
| &.mdl-button--disabled.mdl-button--disabled { |
| color: $mdlext-light-button-secondary-color-disabled; |
| } |
| } |
| } |
| } |
| |
| // mdl/src/slider/_slider.scss |
| // --------------------------- |
| .mdlext-light-color-theme { |
| .mdl-slider { |
| |
| &.is-upgraded { |
| background: transparent; |
| color: $mdlext-light-range-color; |
| |
| &::-webkit-slider-runnable-track { |
| background: transparent; |
| } |
| |
| &::-moz-range-track { |
| background: transparent; |
| } |
| |
| &::-ms-track { |
| background: none; |
| color: transparent; |
| } |
| |
| /* stylelint-disable */ |
| &::-ms-fill-lower { |
| background: linear-gradient(to right, |
| transparent, |
| transparent 16px, |
| $mdlext-light-range-color 16px, |
| $mdlext-light-range-color 0); |
| } |
| |
| &::-ms-fill-upper { |
| background: linear-gradient(to left, |
| transparent, |
| transparent 16px, |
| $mdlext-light-range-bg-color 16px, |
| $mdlext-light-range-bg-color 0); |
| } |
| /* stylelint-enable */ |
| |
| |
| /**************************** Thumbs ****************************/ |
| &::-webkit-slider-thumb { |
| background: $mdlext-light-range-color; |
| } |
| |
| &::-moz-range-thumb { |
| background: $mdlext-light-range-color; |
| } |
| |
| &:focus:not(:active)::-webkit-slider-thumb { |
| box-shadow: 0 0 0 10px $mdlext-light-range-faded-color; |
| } |
| |
| &:focus:not(:active)::-moz-range-thumb { |
| box-shadow: 0 0 0 10px $mdlext-light-range-faded-color; |
| } |
| |
| &:active::-webkit-slider-thumb { |
| background: $mdlext-light-range-color; |
| } |
| |
| &:active::-moz-range-thumb { |
| background: $mdlext-light-range-color; |
| } |
| |
| &::-ms-thumb { |
| background: $mdlext-light-range-color; |
| } |
| |
| /* stylelint-disable */ |
| &:focus:not(:active)::-ms-thumb { |
| background: radial-gradient(circle closest-side, |
| $mdlext-light-range-color 0%, |
| $mdlext-light-range-color 37.5%, |
| $mdlext-light-range-faded-color 37.5%, |
| $mdlext-light-range-faded-color 100%); |
| } |
| /* stylelint-enable */ |
| |
| &:active::-ms-thumb { |
| background: $mdlext-light-range-color; |
| } |
| |
| |
| /**************************** 0-value ****************************/ |
| |
| &.is-lowest-value::-webkit-slider-thumb { |
| border-color: $mdlext-light-range-color; |
| background: transparent; |
| } |
| |
| &.is-lowest-value::-moz-range-thumb { |
| border-color: $mdlext-light-range-bg-color; |
| background: transparent; |
| } |
| |
| &.is-lowest-value:focus:not(:active)::-webkit-slider-thumb { |
| box-shadow: 0 0 0 10px $mdlext-light-range-bg-focus-color; |
| background: $mdlext-light-range-bg-focus-color; |
| } |
| |
| &.is-lowest-value:focus:not(:active)::-moz-range-thumb { |
| box-shadow: 0 0 0 10px $mdlext-light-range-bg-focus-color; |
| background: $mdlext-light-range-bg-focus-color; |
| } |
| |
| &.is-lowest-value:active::-webkit-slider-thumb { |
| border-color: $mdlext-light-range-bg-color; |
| } |
| |
| &.is-lowest-value:active::-moz-range-thumb { |
| border-color: $mdlext-light-range-bg-color; |
| } |
| |
| /* stylelint-disable */ |
| &.is-lowest-value::-ms-thumb { |
| background: radial-gradient(circle closest-side, |
| transparent 0%, |
| transparent 66.67%, |
| $mdlext-light-range-bg-color 66.67%, |
| $mdlext-light-range-bg-color 100%); |
| } |
| |
| &.is-lowest-value:focus:not(:active)::-ms-thumb { |
| background: radial-gradient(circle closest-side, |
| $mdlext-light-range-bg-focus-color 0%, |
| $mdlext-light-range-bg-focus-color 25%, |
| $mdlext-light-range-bg-color 25%, |
| $mdlext-light-range-bg-color 37.5%, |
| $mdlext-light-range-bg-focus-color 37.5%, |
| $mdlext-light-range-bg-focus-color 100%); |
| } |
| |
| &.is-lowest-value:active::-ms-thumb { |
| background: radial-gradient(circle closest-side, |
| transparent 0%, |
| transparent 77.78%, |
| $mdlext-light-range-bg-color 77.78%, |
| $mdlext-light-range-bg-color 100%); |
| } |
| /* stylelint-enable */ |
| |
| &.is-lowest-value::-ms-fill-lower { |
| background: transparent; |
| } |
| |
| /**************************** Disabled ****************************/ |
| |
| &:disabled:focus::-webkit-slider-thumb, |
| &:disabled:active::-webkit-slider-thumb, |
| &:disabled::-webkit-slider-thumb { |
| background: $mdlext-light-range-bg-color; |
| } |
| |
| &:disabled:focus::-moz-range-thumb, |
| &:disabled:active::-moz-range-thumb, |
| &:disabled::-moz-range-thumb { |
| background: $mdlext-light-range-bg-color; |
| } |
| |
| &:disabled + .mdl-slider__background-flex > .mdl-slider__background-lower { |
| background-color: $mdlext-light-range-bg-color; |
| } |
| |
| &.is-lowest-value:disabled:focus::-webkit-slider-thumb, |
| &.is-lowest-value:disabled:active::-webkit-slider-thumb, |
| &.is-lowest-value:disabled::-webkit-slider-thumb { |
| border-color: $mdlext-light-range-bg-color; |
| background: transparent; |
| } |
| |
| &.is-lowest-value:disabled:focus::-moz-range-thumb, |
| &.is-lowest-value:disabled:active::-moz-range-thumb, |
| &.is-lowest-value:disabled::-moz-range-thumb { |
| border-color: $mdlext-light-range-bg-color; |
| background: transparent; |
| } |
| |
| &:disabled:focus::-ms-thumb, |
| &:disabled:active::-ms-thumb, |
| &:disabled::-ms-thumb { |
| background: $mdlext-light-range-bg-color; |
| } |
| |
| /* stylelint-disable */ |
| &.is-lowest-value:disabled:focus::-ms-thumb, |
| &.is-lowest-value:disabled:active::-ms-thumb, |
| &.is-lowest-value:disabled::-ms-thumb { |
| background: radial-gradient(circle closest-side, |
| transparent 0%, |
| transparent 50%, |
| $mdlext-light-range-bg-color 50%, |
| $mdlext-light-range-bg-color 100%); |
| } |
| |
| &:disabled::-ms-fill-lower { |
| background: linear-gradient(to right, |
| transparent, |
| transparent 25px, |
| $mdlext-light-range-bg-color 25px, |
| $mdlext-light-range-bg-color 0); |
| } |
| /* stylelint-enable */ |
| |
| } |
| } |
| |
| .mdl-slider__background-flex { |
| background: transparent; |
| } |
| |
| .mdl-slider__background-lower { |
| background: $mdlext-light-range-color; |
| } |
| |
| // This one styles the upper part of the slider track. |
| .mdl-slider__background-upper { |
| background: $mdlext-light-range-bg-color; |
| } |
| } |
| |
| |
| // mdl/src/textfield/_textfield.scss |
| // ----------------------------------- |
| .mdlext-light-color-theme { |
| |
| .mdl-textfield__input { |
| border-bottom-color: $mdlext-light-input-text-bottom-border-color; |
| } |
| .mdl-textfield.is-invalid .mdl-textfield__input { |
| border-color: $mdlext-light-input-text-error-color; |
| } |
| fieldset[disabled] .mdl-textfield .mdl-textfield__input, |
| .mdl-textfield.is-disabled .mdl-textfield__input { |
| background-color: transparent; |
| border-bottom-color: $mdlext-light-input-text-disabled-color; |
| color: $mdlext-light-input-text-disabled-text-color; |
| } |
| .mdl-textfield__label { |
| color: $mdlext-light-input-text-label-color; |
| } |
| .mdl-textfield__label::after { |
| background-color: $mdlext-light-input-text-highlight-color; |
| } |
| fieldset[disabled] .mdl-textfield .mdl-textfield__label, |
| .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label { |
| color: $mdlext-light-input-text-disabled-text-color; |
| } |
| .mdl-textfield--floating-label.is-focused .mdl-textfield__label, |
| .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, |
| .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label { |
| color: $mdlext-light-input-text-highlight-color; |
| } |
| .mdl-textfield--floating-label.is-invalid .mdl-textfield__label { |
| color: $mdlext-light-input-text-error-color; |
| } |
| .mdl-textfield.is-invalid .mdl-textfield__label::after { |
| background-color: $mdlext-light-input-text-error-color; |
| } |
| .mdl-textfield__error { |
| color: $mdlext-light-input-text-error-color; |
| } |
| } |
| |
| |
| // mdl/src/checkbox/_checkbox.scss |
| // ----------------------------------- |
| .mdlext-light-color-theme { |
| |
| .mdl-checkbox__box-outline { |
| border-color: $mdlext-light-checkbox-off-color; |
| } |
| .mdl-checkbox.is-checked .mdl-checkbox__box-outline { |
| border-color: $mdlext-light-checkbox-color; |
| } |
| fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline, |
| .mdl-checkbox.is-disabled .mdl-checkbox__box-outline { |
| border-color: $mdlext-light-checkbox-disabled-color; |
| } |
| |
| .mdl-checkbox__focus-helper { |
| background-color: transparent; |
| } |
| .mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper { |
| box-shadow: 0 0 0 ($checkbox-button-size / 2) $mdlext-light-checkbox-focus-color; |
| background-color: $mdlext-light-checkbox-focus-color; |
| } |
| |
| .mdl-checkbox__tick-outline { |
| background: transparent; |
| } |
| .mdl-checkbox.is-checked .mdl-checkbox__tick-outline { |
| background-color: $mdlext-light-checkbox-color; |
| } |
| fieldset[disabled] .mdl-checkbox.is-checked .mdl-checkbox__tick-outline, |
| .mdl-checkbox.is-checked.is-disabled .mdl-checkbox__tick-outline { |
| background-color: $mdlext-light-checkbox-disabled-color; |
| } |
| |
| fieldset[disabled] .mdl-checkbox .mdl-checkbox__label, |
| .mdl-checkbox.is-disabled .mdl-checkbox__label { |
| color: $mdlext-light-checkbox-disabled-color; |
| } |
| |
| .mdl-checkbox__ripple-container .mdl-ripple { |
| background: $mdlext-light-checkbox-color; |
| } |
| fieldset[disabled] .mdl-checkbox .mdl-checkbox__ripple-container .mdl-ripple, |
| .mdl-checkbox.is-disabled .mdl-checkbox__ripple-container .mdl-ripple { |
| background: transparent; |
| } |
| |
| } |
| |
| // mdl/src/radio/_radio.scss |
| // ----------------------------------- |
| .mdlext-light-color-theme { |
| .mdl-radio__outer-circle { |
| border-color: $mdlext-light-radio-off-color; |
| } |
| .mdl-radio.is-checked .mdl-radio__outer-circle { |
| border-color: $mdlext-light-radio-color; |
| } |
| .mdl-radio__outer-circle fieldset[disabled] .mdl-radio, |
| .mdl-radio.is-disabled .mdl-radio__outer-circle { |
| border-color: $mdlext-light-radio-disabled-color; |
| } |
| |
| .mdl-radio__inner-circle { |
| background: $mdlext-light-radio-color; |
| } |
| fieldset[disabled] .mdl-radio .mdl-radio__inner-circle, |
| .mdl-radio.is-disabled .mdl-radio__inner-circle { |
| background: $mdlext-light-radio-disabled-color; |
| } |
| |
| fieldset[disabled] .mdl-radio .mdl-radio__label, |
| .mdl-radio.is-disabled .mdl-radio__label { |
| color: $mdlext-light-radio-disabled-color; |
| } |
| |
| .mdl-radio__ripple-container .mdl-ripple { |
| background: $mdlext-light-radio-color; |
| } |
| fieldset[disabled] .mdl-radio .mdl-radio__ripple-container .mdl-ripple, |
| .mdl-radio.is-disabled .mdl-radio__ripple-container .mdl-ripple { |
| background: transparent; |
| } |
| } |
| |
| // mdl/src/icon-togglr/_icon-toggle.scss |
| // --------------------------------------- |
| .mdlext-light-color-theme { |
| .mdl-icon-toggle__label { |
| color: $mdlext-light-icon-toggle-color; |
| } |
| .mdl-icon-toggle.is-checked .mdl-icon-toggle__label { |
| color: $mdlext-light-icon-toggle-checked-color; |
| } |
| .mdl-icon-toggle.is-disabled .mdl-icon-toggle__label { |
| color: $mdlext-light-icon-toggle-disabled-color; |
| } |
| .mdl-icon-toggle.is-focused .mdl-icon-toggle__label { |
| background-color: $mdlext-light-icon-toggle-focus-color; |
| } |
| .mdl-icon-toggle.is-focused.is-checked .mdl-icon-toggle__label { |
| background-color: $mdlext-light-icon-toggle-checked-focus-color; |
| } |
| .mdl-icon-toggle__ripple-container .mdl-ripple { |
| background: $mdlext-light-icon-toggle-color; |
| } |
| .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container .mdl-ripple { |
| background: transparent; |
| } |
| } |
| |
| |
| // mdl/src/switch/_switch.scss |
| // ----------------------------------- |
| .mdlext-light-color-theme { |
| |
| .mdl-switch__track { |
| background: $mdlext-light-switch-off-track-color; |
| } |
| .mdl-switch.is-checked .mdl-switch__track { |
| background: $mdlext-light-switch-track-color; |
| } |
| .mdl-switch__track fieldset[disabled] .mdl-switch, |
| .mdl-switch.is-disabled .mdl-switch__track { |
| background: $mdlext-light-switch-disabled-track-color; |
| } |
| |
| .mdl-switch__thumb { |
| background: $mdlext-light-switch-off-thumb-color; |
| } |
| .mdl-switch.is-checked .mdl-switch__thumb { |
| background: $mdlext-light-switch-thumb-color; |
| } |
| .mdl-switch__thumb fieldset[disabled] .mdl-switch, |
| .mdl-switch.is-disabled .mdl-switch__thumb { |
| background: $mdlext-light-switch-disabled-thumb-color; |
| } |
| |
| .mdl-switch__focus-helper { |
| background-color: transparent; |
| } |
| .mdl-switch.is-focused .mdl-switch__focus-helper { |
| background-color: rgba(0, 0, 0, 0.1); |
| } |
| .mdl-switch.is-focused.is-checked .mdl-switch__focus-helper { |
| box-shadow: 0 0 0 (($switch-ripple-size - $switch-helper-size) / 2) $mdlext-light-switch-faded-color; |
| background-color: $mdlext-light-switch-faded-color; |
| } |
| |
| .mdl-switch__label fieldset[disabled] .mdl-switch, |
| .mdl-switch.is-disabled .mdl-switch__label { |
| color: $mdlext-light-switch-disabled-thumb-color; |
| } |
| |
| .mdl-switch__ripple-container .mdl-ripple { |
| background: $mdlext-light-switch-color; |
| } |
| fieldset[disabled] .mdl-switch .mdl-switch__ripple-container .mdl-ripple, |
| .mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple { |
| background: transparent; |
| } |
| } |
| |
| |
| // mdl/src/data-table/_data-table.scss |
| // ----------------------------------- |
| .mdlext-light-color-theme { |
| |
| .mdl-data-table { |
| border-color: $mdlext-light-data-table-divider-color; |
| background-color: $mdlext-light-data-table-background-color; |
| |
| tbody { |
| tr { |
| &.is-selected { |
| background-color: $mdlext-light-data-table-selection-color; |
| } |
| &:hover { |
| background-color: $mdlext-light-data-table-hover-color; |
| } |
| } |
| } |
| th { |
| color: $data-table-header-color; |
| |
| &.mdl-data-table__header--sorted-ascending, |
| &.mdl-data-table__header--sorted-descending { |
| color: $mdlext-light-data-table-header-sorted-color; |
| |
| &:hover { |
| &::before { |
| color: $mdlext-light-data-table-header-sorted-icon-hover-color; |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| |
| // mdl/src/menu/_menu.scss |
| // ----------------------------------- |
| .mdlext-light-color-theme { |
| |
| .mdl-menu__outline { |
| background: $mdlext-light-default-dropdown-bg-color; |
| } |
| |
| .mdl-menu__item { |
| color: $mdlext-light-default-item-text-color; |
| background-color: transparent; |
| outline-color: $mdlext-light-default-item-outline-color; |
| |
| &--full-bleed-divider { |
| border-bottom-color: $mdlext-light-default-item-divider-color; |
| } |
| |
| &[disabled], |
| &[data-mdl-disabled] { |
| color: $mdlext-light-disabled-item-text-color; |
| background-color: transparent; |
| |
| &:hover { |
| background-color: transparent; |
| } |
| |
| &:focus { |
| background-color: transparent; |
| } |
| |
| & .mdl-ripple { |
| background: transparent; |
| } |
| } |
| |
| &:hover { |
| background-color: $mdlext-light-default-item-hover-bg-color; |
| } |
| |
| &:focus { |
| background-color: $mdlext-light-default-item-focus-bg-color; |
| } |
| |
| &:active { |
| background-color: $mdlext-light-default-item-active-bg-color; |
| } |
| } |
| } |
| |
| |
| // mdl/src/card/_card.scss |
| // ---------------------------------------- |
| .mdlext-light-color-theme { |
| |
| .mdl-card { |
| background: $mdlext-light-card-background-color; |
| } |
| |
| .mdl-card__media { |
| background-color: $mdlext-light-card-image-placeholder-color; |
| } |
| |
| .mdl-card__title { |
| color: $mdlext-light-card-text-color; |
| |
| &.mdl-card--border { |
| border-bottom-color: $mdlext-light-card-border-color; |
| } |
| } |
| |
| .mdl-card__title-text { |
| color: inherit; |
| } |
| |
| .mdl-card__subtitle-text { |
| color: $mdlext-light-card-subtitle-color; |
| } |
| |
| .mdl-card__supporting-text { |
| color: $mdlext-light-card-supporting-text-text-color; |
| } |
| |
| .mdl-card__actions { |
| background-color: rgba(0, 0, 0, 0); |
| |
| &.mdl-card--border { |
| border-top-color: $mdlext-light-card-border-color; |
| } |
| } |
| } |
| |
| |
| // mdlext/src/selectfield/_selectfield.scss |
| // ---------------------------------------- |
| .mdlext-light-color-theme { |
| |
| .mdlext-selectfield.is-disabled::after { |
| color: $mdlext-light-input-text-disabled-color; |
| @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-light-input-text-disabled-color); |
| } |
| |
| .mdlext-selectfield__select { |
| border-bottom-color: $mdlext-light-input-text-bottom-border-color; |
| color: inherit; |
| |
| option { |
| background-color: $mdlext-light-content-background-color; |
| color: $mdlext-light-text-color-primary; |
| } |
| } |
| .mdlext-selectfield.is-invalid .mdlext-selectfield__select { |
| border-color: $mdlext-light-input-text-error-color; |
| } |
| fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select, |
| .mdlext-selectfield.is-disabled .mdlext-selectfield__select { |
| background-color: transparent; |
| border-bottom-color: $mdlext-light-input-text-disabled-color; |
| color: $mdlext-light-input-text-disabled-text-color; |
| } |
| |
| .mdlext-selectfield__label { |
| color: $mdlext-light-input-text-label-color; |
| } |
| fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__label, |
| .mdlext-selectfield.is-disabled.is-disabled .mdlext-selectfield__label { |
| color: $mdlext-light-input-text-disabled-text-color; |
| } |
| .mdlext-selectfield--floating-label.is-focused .mdlext-selectfield__label, |
| .mdlext-selectfield--floating-label.is-dirty .mdlext-selectfield__label, |
| .mdlext-selectfield--floating-label.is-dirty.is-dirty .mdlext-selectfield__label, |
| .mdlext-selectfield--floating-label.has-placeholder .mdlext-selectfield__label { |
| color: $mdlext-light-input-text-highlight-color; |
| } |
| .mdlext-selectfield--floating-label.is-invalid .mdlext-selectfield__label { |
| color: $mdlext-light-input-text-error-color; |
| } |
| .mdlext-selectfield__label::after { |
| background-color: $mdlext-light-input-text-highlight-color; |
| } |
| .mdlext-selectfield.is-invalid .mdlext-selectfield__label::after { |
| background-color: $mdlext-light-input-text-error-color; |
| } |
| |
| .mdlext-selectfield__error { |
| color: $mdlext-light-input-text-error-color; |
| } |
| } |
| |
| // mdlext/src/menu-button/_menu-button.scss |
| // ---------------------------------------- |
| .mdlext-menu.mdlext-light-color-theme { |
| background: $mdlext-light-default-dropdown-bg-color; |
| } |
| |
| .mdlext-light-color-theme { |
| |
| .mdlext-menu { |
| background: $mdlext-light-default-dropdown-bg-color; |
| |
| &__item { |
| color: $mdlext-light-default-item-text-color; |
| background-color: $mdlext-light-default-dropdown-bg-color; |
| |
| &:active, |
| &[aria-selected='true'] { |
| background-color: $mdlext-light-default-item-active-bg-color; |
| } |
| &:hover:not([disabled]) { |
| background-color: $mdlext-light-default-item-hover-bg-color; |
| } |
| &:focus { |
| outline-color: $mdlext-light-default-item-outline-color; |
| background-color: $mdlext-light-default-item-focus-bg-color; |
| } |
| &[disabled] { |
| color: $mdlext-light-disabled-item-text-color; |
| |
| > * { |
| color: $mdlext-light-disabled-item-text-color; |
| } |
| } |
| } |
| &__item-separator { |
| border-bottom: 1px solid $mdlext-light-default-item-divider-color; |
| } |
| } |
| } |
| |
| |
| // mdlext/src/bordered-fields/_bordered-fields.scss |
| // ------------------------------------------------- |
| .mdlext-light-color-theme { |
| |
| .mdlext-bordered-fields { |
| |
| .mdl-textfield, |
| .mdlext-selectfield { |
| |
| .mdl-textfield__input, |
| .mdlext-selectfield__select { |
| background-color: $mdlext-light-bordered-field-background-color; |
| border-color: $mdlext-light-bordered-field-border-color; |
| color: $mdlext-light-bordered-field-input-text-color; |
| |
| &:disabled { |
| color: $mdlext-light-bordered-field-input-text-disabled-text-color; |
| background-color: $mdlext-light-bordered-field-disabled-background-color; |
| border-color: $mdlext-light-bordered-field-disabled-border-color; |
| } |
| &:focus { |
| background-color: $mdlext-light-bordered-field-focus-background-color; |
| border-color: $mdlext-light-bordered-field-focus-border-color; |
| } |
| } |
| &.is-invalid { |
| .mdl-textfield__input, |
| .mdlext-selectfield__select { |
| color: $mdlext-light-bordered-field-input-text-error-color; |
| border-color: $mdlext-light-bordered-field-error-border-color; |
| background-color: $mdlext-light-bordered-field-error-background-color; |
| |
| &:focus { |
| border-color: $mdlext-light-bordered-field-error-focus-border-color; |
| background-color: $mdlext-light-bordered-field-error-focus-background-color; |
| } |
| } |
| } |
| } |
| |
| fieldset[disabled] .mdlext-selectfield::after, |
| .mdlext-selectfield.is-disabled::after { |
| color: $mdlext-light-bordered-field-input-text-disabled-text-color; |
| @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-light-bordered-field-input-text-disabled-text-color); |
| } |
| |
| fieldset[disabled] .mdl-textfield .mdl-textfield__input, |
| fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select { |
| color: $mdlext-light-bordered-field-input-text-disabled-text-color; |
| background-color: $mdlext-light-bordered-field-disabled-background-color; |
| border-color: $mdlext-light-bordered-field-disabled-border-color; |
| } |
| |
| .mdl-textfield, |
| .mdlext-selectfield { |
| |
| .mdl-textfield__label, |
| .mdlext-selectfield__label { |
| color: $mdlext-light-bordered-field-input-text-label-color; |
| } |
| &.mdl-textfield--floating-label.is-focused.is-focused, |
| &.mdl-textfield--floating-label.is-dirty.is-dirty, |
| &.mdl-textfield--floating-label.has-placeholder, |
| &.mdlext-selectfield--floating-label.is-focused.is-focused, |
| &.mdlext-selectfield--floating-label.is-dirty.is-dirty, |
| &.mdlext-selectfield--floating-label.has-placeholder { |
| |
| .mdl-textfield__label, |
| .mdlext-selectfield__label { |
| color: $mdlext-light-bordered-field-input-text-label-focus-color; |
| } |
| } |
| &.mdl-textfield--floating-label.is-disabled.is-disabled, |
| &.mdlext-selectfield--floating-label.is-disabled.is-disabled { |
| |
| .mdl-textfield__label, |
| .mdlext-selectfield__label { |
| color: $mdlext-light-bordered-field-input-text-label-disabled-color; |
| } |
| } |
| &.mdl-textfield--floating-label.is-invalid.is-invalid, |
| &.mdlext-selectfield--floating-label.is-invalid.is-invalid { |
| |
| .mdl-textfield__label, |
| .mdlext-selectfield__label { |
| color: $mdlext-light-bordered-field-input-text-label-error-color; |
| } |
| } |
| } |
| |
| fieldset[disabled] .mdl-textfield .mdl-textfield__label, |
| fieldset[disabled] .mdl-selectfield .mdl-selectfield__label { |
| color: $mdlext-light-bordered-field-input-text-label-disabled-color; |
| } |
| |
| // Icon(s) and/or button(s) inside textfield |
| .mdl-textfield, |
| .mdlext-selectfield { |
| &.is-disabled i, |
| &.is-disabled .mdl-button { |
| color: $mdlext-light-bordered-field-disabled-border-color; |
| } |
| } |
| fieldset[disabled] .mdl-textfield, |
| fieldset[disabled] .mdlext-selectfield { |
| i, |
| .mdl-button { |
| color: $mdlext-light-bordered-field-disabled-border-color; |
| } |
| } |
| } |
| } |
| |
| |
| // mdlext/src/accordion/_accordion.scss |
| // ---------------------------------------- |
| .mdlext-light-color-theme { |
| |
| .mdlext-accordion { |
| |
| &__tab { |
| color: $mdlext-light-accordion-header-secondary-color; |
| background-color: $mdlext-light-accordion-header-background-color; |
| |
| &:focus { |
| outline-color: $mdlext-light-accordion-header-focus-outline-color; |
| } |
| &[aria-expanded='true'] { |
| background-color: $mdlext-light-accordion-header-background-open-color; |
| } |
| &[aria-selected='true'] { |
| background-color: $mdlext-light-accordion-header-background-active-color; |
| } |
| &[disabled] { |
| background-color: $mdlext-light-accordion-header-disabled-color; |
| color: $mdlext-light-accordion-header-secondary-color-disabled; |
| pointer-events: none; |
| |
| > * { |
| color: $mdlext-light-accordion-header-secondary-color-disabled; |
| } |
| } |
| &:hover:not([disabled]) { |
| background-color: $mdlext-light-accordion-header-background-hover-color; |
| } |
| &--ripple { |
| &[aria-selected='true']::before { |
| background: $mdlext-light-accordion-ripple-color; |
| } |
| } |
| } |
| |
| &__tabpanel { |
| color: $mdlext-light-accordion-content-color; |
| background-color: $mdlext-light-accordion-content-background-color; |
| } |
| } |
| |
| // Vertical layout |
| .mdlext-accordion { |
| |
| &--vertical { |
| |
| .mdlext-accordion__tab { |
| border-top: 1px solid $mdlext-light-accordion-header-border-color; |
| |
| &[aria-selected='true']::after { |
| background-color: $mdlext-light-accordion-header-highlight-color; |
| } |
| } |
| .mdlext-accordion__tabpanel { |
| border-top: 1px solid $mdlext-light-accordion-header-border-color; |
| } |
| } |
| } |
| |
| // Horizontal layout |
| .mdlext-accordion { |
| |
| &--horizontal { |
| |
| .mdlext-accordion__tab { |
| border-left: 1px solid $mdlext-light-accordion-header-border-color; |
| |
| &[aria-selected='true']::after { |
| background-color: $mdlext-light-accordion-header-highlight-color; |
| } |
| } |
| .mdlext-accordion__tabpanel { |
| border-left: 1px solid $mdlext-light-accordion-header-border-color; |
| } |
| } |
| } |
| |
| .mdlext-accordion { |
| |
| &__panel:first-child > &__tab { |
| // Use container to set outer borders |
| border-top-color: transparent; |
| border-left-color: transparent; |
| } |
| } |
| |
| // Making accordion appear disabled. |
| // Note: does not prevent tabbing into a disabled accordion |
| .mdlext-accordion[disabled] { |
| .mdlext-accordion__tab { |
| background-color: $mdlext-light-accordion-header-disabled-color; |
| color: $mdlext-light-accordion-header-secondary-color-disabled; |
| |
| > * { |
| color: $mdlext-light-accordion-header-secondary-color-disabled; |
| } |
| } |
| .mdlext-accordion__tabpanel { |
| opacity: 0.8; |
| filter: blur(1px) grayscale(80%); |
| } |
| } |
| } |