Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/mdl-ext/src/color-themes/_light-color-theme.scss b/node_modules/mdl-ext/src/color-themes/_light-color-theme.scss
new file mode 100644
index 0000000..5393738
--- /dev/null
+++ b/node_modules/mdl-ext/src/color-themes/_light-color-theme.scss
@@ -0,0 +1,1130 @@
+@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%);
+ }
+ }
+}