Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/mdl-ext/src/color-themes/_color-themes.scss b/node_modules/mdl-ext/src/color-themes/_color-themes.scss
new file mode 100644
index 0000000..6944941
--- /dev/null
+++ b/node_modules/mdl-ext/src/color-themes/_color-themes.scss
@@ -0,0 +1,57 @@
+/* -------------------------------------------------------------
+ Palette samples. Not part of build
+----------------------------------------------------------------
+
+$mdlext-light-color-primary: #9E9E9E !default;
+$mdlext-light-color-primary-dark: #616161 !default;
+$mdlext-light-color-primary-light: #9E9E9E !default; // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-primary-contrast: #212121 !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-color-primary: #F5F5F5 !default;
+$mdlext-light-color-primary-dark: #E0E0E0 !default;
+$mdlext-light-color-primary-light: #8BC34A !default; // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-primary-contrast: #000000 !default; // text color on primary/primary dark background
+$mdlext-light-color-accent: #FFC107 !default;
+$mdlext-light-color-accent-light: #FFC107 !default; // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-light-color-accent-contrast: #FFFFFF !default;
+
+
+$mdlext-light-color-primary: #673AB7 !default;
+$mdlext-light-color-primary-dark: #512DA8 !default;
+$mdlext-light-color-primary-light: #673AB7 !default; // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-primary-contrast: #D1C4E9 !default; // text color on primary/primary dark background
+$mdlext-light-color-accent: #4CAF50 !default;
+$mdlext-light-color-accent-light: #4CAF50 !default; // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-light-color-accent-contrast: #FFFFFF !default;
+
+
+$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: #FF5252 !default;
+$mdlext-light-color-accent-light: #FF5252 !default; // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-light-color-accent-contrast: #FFFFFF !default;
+
+
+$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: #03A9F4 !default;
+$mdlext-light-color-accent-light: #03A9F4 !default; // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-light-color-accent-contrast: #FFFFFF !default;
+
+
+$mdlext-dark-color-primary: #212121 !default;
+$mdlext-dark-color-primary-dark: #000000 !default;
+$mdlext-dark-color-primary-light: #607D8B !default; // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-dark-color-primary-contrast: #FFFFFF !default; // text color on primary/primary dark background
+$mdlext-dark-color-accent: #FF5722 !default;
+$mdlext-dark-color-accent-light: #FF5722 !default; // Fallback color. Set to color-accent if fallback is not needed
+$mdlext-dark-color-accent-contrast: #FFFFFF !default;
+
+*/
diff --git a/node_modules/mdl-ext/src/color-themes/_dark-color-theme.scss b/node_modules/mdl-ext/src/color-themes/_dark-color-theme.scss
new file mode 100644
index 0000000..954e19c
--- /dev/null
+++ b/node_modules/mdl-ext/src/color-themes/_dark-color-theme.scss
@@ -0,0 +1,1132 @@
+@import "color-themes";
+
+.mdlext-dark-color-theme {
+ background-color: $mdlext-dark-content-background-color;
+ color: $mdlext-dark-text-color-primary;
+ a {
+ outline-color: inherit;
+ }
+}
+
+// mdl/src/palette/_palette.scss
+.mdlext-dark-color-theme {
+
+ .mdl-color--primary {
+ background-color: $mdlext-dark-color-primary !important;
+ }
+
+ .mdl-color--primary-contrast {
+ background-color: $mdlext-dark-color-primary-contrast !important;
+ }
+
+ .mdl-color--primary-dark {
+ background-color: $mdlext-dark-color-primary-dark !important;
+ }
+
+ .mdl-color--accent {
+ background-color: $mdlext-dark-color-accent !important;
+ }
+
+ .mdl-color--accent-contrast {
+ background-color: $mdlext-dark-color-accent-contrast !important;
+ }
+
+ .mdl-color-text--primary {
+ color: $mdlext-dark-color-primary !important;
+ }
+
+ .mdl-color-text--primary-contrast {
+ color: $mdlext-dark-color-primary-contrast !important;
+ }
+
+ .mdl-color-text--primary-dark {
+ color: $mdlext-dark-color-primary-dark !important;
+ }
+
+ .mdl-color-text--accent {
+ color: $mdlext-dark-color-accent !important;
+ }
+
+ .mdl-color-text--accent-contrast {
+ color: $mdlext-dark-color-accent-contrast !important;
+ }
+
+}
+
+// mdl/src/typography/_typography.scss
+.mdlext-dark-color-theme {
+ a {
+ color: $mdlext-dark-text-link-color;
+ }
+}
+
+
+// mdl/src/badge/_badge.scss
+// ---------------------------
+.mdlext-dark-color-theme {
+ .mdl-badge {
+
+ &[data-badge]::after {
+ background: $mdlext-dark-badge-background;
+ color: $mdlext-dark-badge-color;
+ }
+
+ &.mdl-badge--no-background {
+ &[data-badge]::after {
+ color: $mdlext-dark-badge-color-inverse;
+ background: $mdlext-dark-badge-background-inverse;
+ }
+ }
+ }
+}
+
+
+// mdl/src/button/_button.scss
+// ---------------------------
+.mdlext-dark-color-theme {
+
+ .mdl-button {
+ background: transparent;
+ color: $mdlext-dark-button-secondary-color;
+
+ &:hover {
+ background-color: $mdlext-dark-button-hover-color;
+ }
+
+ &:focus:not(:active) {
+ background-color: $mdlext-dark-button-focus-color;
+ }
+
+ &:active {
+ background-color: $mdlext-dark-button-active-color;
+ }
+
+ &.mdl-button--colored {
+ color: $mdlext-dark-button-primary-color-alt;
+
+ &:focus:not(:active) {
+ background-color: $mdlext-dark-button-focus-color-alt;
+ }
+ }
+ }
+
+ // Raised buttons
+ .mdl-button--raised {
+ background: $mdlext-dark-button-primary-color;
+
+ &:active {
+ background-color: $mdlext-dark-button-active-color;
+ }
+
+ &:focus:not(:active) {
+ background-color: $mdlext-dark-button-active-color;
+ }
+
+ &.mdl-button--colored {
+ background: $mdlext-dark-button-primary-color-alt;
+ color: $mdlext-dark-button-secondary-color-alt;
+
+ &:hover {
+ background-color: $mdlext-dark-button-hover-color-alt;
+ }
+
+ &:active {
+ background-color: $mdlext-dark-button-active-color-alt;
+ }
+
+ &:focus:not(:active) {
+ background-color: $mdlext-dark-button-active-color-alt;
+ }
+
+ & .mdl-ripple {
+ background: $mdlext-dark-button-ripple-color-alt;
+ }
+ }
+ }
+
+
+ // FABs
+ .mdl-button--fab {
+ background: $mdlext-dark-button-primary-color;
+
+ &:active {
+ background-color: $mdlext-dark-button-active-color;
+ }
+
+ &:focus:not(:active) {
+ background-color: $mdlext-dark-button-active-color;
+ }
+
+ &.mdl-button--colored {
+ background: $mdlext-dark-button-fab-color-alt;
+ color: $mdlext-dark-button-fab-text-color-alt;
+
+ &:hover {
+ background-color: $mdlext-dark-button-fab-hover-color-alt;
+ }
+
+ &:focus:not(:active) {
+ background-color: $mdlext-dark-button-fab-active-color-alt;
+ }
+
+ &:active {
+ background-color: $mdlext-dark-button-fab-active-color-alt;
+ }
+
+ & .mdl-ripple {
+ background: $mdlext-dark-button-fab-ripple-color-alt;
+ }
+ }
+ }
+
+
+ // Icon buttons
+ .mdl-button--icon {
+ color: inherit;
+ }
+
+ // Colorized buttons
+
+ .mdl-button--primary.mdl-button--primary {
+ color: $mdlext-dark-button-primary-color-alt;
+
+ & .mdl-ripple {
+ background: $mdlext-dark-button-secondary-color-alt;
+ }
+ &.mdl-button--raised,
+ &.mdl-button--fab {
+ color: $mdlext-dark-button-secondary-color-alt;
+ background-color: $mdlext-dark-button-primary-color-alt;
+ }
+ }
+
+ .mdl-button--accent.mdl-button--accent {
+ color: $mdlext-dark-button-fab-color-alt;
+
+ & .mdl-ripple {
+ background: $mdlext-dark-button-fab-text-color-alt;
+ }
+ &.mdl-button--raised,
+ &.mdl-button--fab {
+ color: $mdlext-dark-button-fab-text-color-alt;
+ background-color: $mdlext-dark-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-dark-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-dark-button-primary-color-disabled;
+ color: $mdlext-dark-button-secondary-color-disabled;
+ }
+ }
+
+ &--raised {
+ // Bump up specificity by using [disabled] twice.
+ &[disabled][disabled],
+ &.mdl-button--disabled.mdl-button--disabled {
+ background-color: $mdlext-dark-button-primary-color-disabled;
+ color: $mdlext-dark-button-secondary-color-disabled;
+ }
+ }
+ &--colored {
+ // Bump up specificity by using [disabled] twice.
+ &[disabled][disabled],
+ &.mdl-button--disabled.mdl-button--disabled {
+ color: $mdlext-dark-button-secondary-color-disabled;
+ }
+ }
+ }
+}
+
+
+// mdl/src/slider/_slider.scss
+// ---------------------------
+.mdlext-dark-color-theme {
+
+ .mdl-slider {
+
+ &.is-upgraded {
+ background: transparent;
+ color: $mdlext-dark-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-dark-range-color 16px,
+ $mdlext-dark-range-color 0
+ );
+ }
+
+ &::-ms-fill-upper {
+ background: linear-gradient(
+ to left,
+ transparent,
+ transparent 16px,
+ $mdlext-dark-range-bg-color 16px,
+ $mdlext-dark-range-bg-color 0);
+ }
+ /* stylelint-enable */
+
+ &::-webkit-slider-thumb {
+ background: $mdlext-dark-range-color;
+ }
+
+ &::-moz-range-thumb {
+ background: $mdlext-dark-range-color;
+ }
+
+ &:focus:not(:active)::-webkit-slider-thumb {
+ box-shadow: 0 0 0 10px $mdlext-dark-range-faded-color;
+ }
+
+ &:focus:not(:active)::-moz-range-thumb {
+ box-shadow: 0 0 0 10px $mdlext-dark-range-faded-color;
+ }
+
+ &:active::-webkit-slider-thumb {
+ background: $mdlext-dark-range-color;
+ }
+
+ &:active::-moz-range-thumb {
+ background: $mdlext-dark-range-color;
+ }
+
+ &::-ms-thumb {
+ background: $mdlext-dark-range-color;
+ }
+
+ /* stylelint-disable */
+ &:focus:not(:active)::-ms-thumb {
+ background: radial-gradient(circle closest-side,
+ $mdlext-dark-range-color 0%,
+ $mdlext-dark-range-color 37.5%,
+ $mdlext-dark-range-faded-color 37.5%,
+ $mdlext-dark-range-faded-color 100%);
+ }
+ /* stylelint-enable */
+
+ &:active::-ms-thumb {
+ background: $mdlext-dark-range-color;
+ }
+
+
+ /**************************** 0-value ****************************/
+
+ &.is-lowest-value::-webkit-slider-thumb {
+ border-color: $mdlext-dark-range-color;
+ background: transparent;
+ }
+
+ &.is-lowest-value::-moz-range-thumb {
+ border-color: $mdlext-dark-range-bg-color;
+ background: transparent;
+ }
+
+ &.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
+ box-shadow: 0 0 0 10px $mdlext-dark-range-bg-focus-color;
+ background: $mdlext-dark-range-bg-focus-color;
+ }
+
+ &.is-lowest-value:focus:not(:active)::-moz-range-thumb {
+ box-shadow: 0 0 0 10px $mdlext-dark-range-bg-focus-color;
+ background: $mdlext-dark-range-bg-focus-color;
+ }
+
+ &.is-lowest-value:active::-webkit-slider-thumb {
+ border-color: $mdlext-dark-range-bg-color;
+ }
+
+ &.is-lowest-value:active::-moz-range-thumb {
+ border-color: $mdlext-dark-range-bg-color;
+ }
+
+ /* stylelint-disable */
+ &.is-lowest-value::-ms-thumb {
+ background: radial-gradient(circle closest-side,
+ transparent 0%,
+ transparent 66.67%,
+ $mdlext-dark-range-bg-color 66.67%,
+ $mdlext-dark-range-bg-color 100%);
+ }
+
+ &.is-lowest-value:focus:not(:active)::-ms-thumb {
+ background: radial-gradient(circle closest-side,
+ $mdlext-dark-range-bg-focus-color 0%,
+ $mdlext-dark-range-bg-focus-color 25%,
+ $mdlext-dark-range-bg-color 25%,
+ $mdlext-dark-range-bg-color 37.5%,
+ $mdlext-dark-range-bg-focus-color 37.5%,
+ $mdlext-dark-range-bg-focus-color 100%);
+ }
+
+ &.is-lowest-value:active::-ms-thumb {
+ background: radial-gradient(circle closest-side,
+ transparent 0%,
+ transparent 77.78%,
+ $mdlext-dark-range-bg-color 77.78%,
+ $mdlext-dark-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-dark-range-bg-color;
+ }
+
+ &:disabled:focus::-moz-range-thumb,
+ &:disabled:active::-moz-range-thumb,
+ &:disabled::-moz-range-thumb {
+ background: $mdlext-dark-range-bg-color;
+ }
+
+ &:disabled + .mdl-slider__background-flex > .mdl-slider__background-lower {
+ background-color: $mdlext-dark-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-dark-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-dark-range-bg-color;
+ background: transparent;
+ }
+
+ &:disabled:focus::-ms-thumb,
+ &:disabled:active::-ms-thumb,
+ &:disabled::-ms-thumb {
+ background: $mdlext-dark-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-dark-range-bg-color 50%,
+ $mdlext-dark-range-bg-color 100%);
+ }
+
+ &:disabled::-ms-fill-lower {
+ background: linear-gradient(to right,
+ transparent,
+ transparent 25px,
+ $mdlext-dark-range-bg-color 25px,
+ $mdlext-dark-range-bg-color 0);
+ }
+ /* stylelint-enable */
+
+ }
+ }
+
+ .mdl-slider__background-flex {
+ background: transparent;
+ }
+
+ .mdl-slider__background-lower {
+ background: $mdlext-dark-range-color;
+ }
+
+ // This one styles the upper part of the slider track.
+ .mdl-slider__background-upper {
+ background: $mdlext-dark-range-bg-color;
+ }
+}
+
+
+// mdl/src/textfield/_textfield.scss
+// -----------------------------------
+.mdlext-dark-color-theme {
+
+ .mdl-textfield__input {
+ border-bottom-color: $mdlext-dark-input-text-bottom-border-color;
+ }
+ .mdl-textfield.is-invalid .mdl-textfield__input {
+ border-color: $mdlext-dark-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-dark-input-text-disabled-color;
+ color: $mdlext-dark-input-text-disabled-text-color;
+ }
+ .mdl-textfield__label {
+ color: $mdlext-dark-input-text-label-color;
+ }
+ .mdl-textfield__label::after {
+ background-color: $mdlext-dark-input-text-highlight-color;
+ }
+ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
+ .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {
+ color: $mdlext-dark-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-dark-input-text-highlight-color;
+ }
+ .mdl-textfield--floating-label.is-invalid .mdl-textfield__label {
+ color: $mdlext-dark-input-text-error-color;
+ }
+ .mdl-textfield.is-invalid .mdl-textfield__label::after {
+ background-color: $mdlext-dark-input-text-error-color;
+ }
+ .mdl-textfield__error {
+ color: $mdlext-dark-input-text-error-color;
+ }
+}
+
+
+// mdl/src/checkbox/_checkbox.scss
+// -----------------------------------
+.mdlext-dark-color-theme {
+
+ .mdl-checkbox__box-outline {
+ border-color: $mdlext-dark-checkbox-off-color;
+ }
+ .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
+ border-color: $mdlext-dark-checkbox-color;
+ }
+ fieldset[disabled] .mdl-checkbox .mdl-checkbox__box-outline,
+ .mdl-checkbox.is-disabled .mdl-checkbox__box-outline {
+ border-color: $mdlext-dark-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-dark-checkbox-focus-color;
+ background-color: $mdlext-dark-checkbox-focus-color;
+ }
+
+ .mdl-checkbox__tick-outline {
+ background: transparent;
+ }
+ .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
+ background-color: $mdlext-dark-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-dark-checkbox-disabled-color;
+ }
+
+ fieldset[disabled] .mdl-checkbox .mdl-checkbox__label,
+ .mdl-checkbox.is-disabled .mdl-checkbox__label {
+ color: $mdlext-dark-checkbox-disabled-color;
+ }
+
+ .mdl-checkbox__ripple-container .mdl-ripple {
+ background: $mdlext-dark-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-dark-color-theme {
+ .mdl-radio__outer-circle {
+ border-color: $mdlext-dark-radio-off-color;
+ }
+ .mdl-radio.is-checked .mdl-radio__outer-circle {
+ border-color: $mdlext-dark-radio-color;
+ }
+ .mdl-radio__outer-circle fieldset[disabled] .mdl-radio,
+ .mdl-radio.is-disabled .mdl-radio__outer-circle {
+ border-color: $mdlext-dark-radio-disabled-color;
+ }
+
+ .mdl-radio__inner-circle {
+ background: $mdlext-dark-radio-color;
+ }
+ fieldset[disabled] .mdl-radio .mdl-radio__inner-circle,
+ .mdl-radio.is-disabled .mdl-radio__inner-circle {
+ background: $mdlext-dark-radio-disabled-color;
+ }
+
+ fieldset[disabled] .mdl-radio .mdl-radio__label,
+ .mdl-radio.is-disabled .mdl-radio__label {
+ color: $mdlext-dark-radio-disabled-color;
+ }
+
+ .mdl-radio__ripple-container .mdl-ripple {
+ background: $mdlext-dark-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-dark-color-theme {
+ .mdl-icon-toggle__label {
+ color: $mdlext-dark-icon-toggle-color;
+ }
+ .mdl-icon-toggle.is-checked .mdl-icon-toggle__label {
+ color: $mdlext-dark-icon-toggle-checked-color;
+ }
+ .mdl-icon-toggle.is-disabled .mdl-icon-toggle__label {
+ color: $mdlext-dark-icon-toggle-disabled-color;
+ }
+ .mdl-icon-toggle.is-focused .mdl-icon-toggle__label {
+ background-color: $mdlext-dark-icon-toggle-focus-color;
+ }
+ .mdl-icon-toggle.is-focused.is-checked .mdl-icon-toggle__label {
+ background-color: $mdlext-dark-icon-toggle-checked-focus-color;
+ }
+ .mdl-icon-toggle__ripple-container .mdl-ripple {
+ background: $mdlext-dark-icon-toggle-color;
+ }
+ .mdl-icon-toggle.is-disabled .mdl-icon-toggle__ripple-container .mdl-ripple {
+ background: transparent;
+ }
+}
+
+
+// mdl/src/switch/_switch.scss
+// -----------------------------------
+.mdlext-dark-color-theme {
+
+ .mdl-switch__track {
+ background: $mdlext-dark-switch-off-track-color;
+ }
+ .mdl-switch.is-checked .mdl-switch__track {
+ background: $mdlext-dark-switch-track-color;
+ }
+ .mdl-switch__track fieldset[disabled] .mdl-switch,
+ .mdl-switch.is-disabled .mdl-switch__track {
+ background: $mdlext-dark-switch-disabled-track-color;
+ }
+
+ .mdl-switch__thumb {
+ background: $mdlext-dark-switch-off-thumb-color;
+ }
+ .mdl-switch.is-checked .mdl-switch__thumb {
+ background: $mdlext-dark-switch-thumb-color;
+ }
+ .mdl-switch__thumb fieldset[disabled] .mdl-switch,
+ .mdl-switch.is-disabled .mdl-switch__thumb {
+ background: $mdlext-dark-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-dark-switch-faded-color;
+ background-color: $mdlext-dark-switch-faded-color;
+ }
+
+ .mdl-switch__label fieldset[disabled] .mdl-switch,
+ .mdl-switch.is-disabled .mdl-switch__label {
+ color: $mdlext-dark-switch-disabled-thumb-color;
+ }
+
+ .mdl-switch__ripple-container .mdl-ripple {
+ background: $mdlext-dark-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-dark-color-theme {
+
+ .mdl-data-table {
+ border-color: $mdlext-dark-data-table-divider-color;
+ background-color: $mdlext-dark-data-table-background-color;
+
+ tbody {
+ tr {
+ &.is-selected {
+ background-color: $mdlext-dark-data-table-selection-color;
+ }
+
+ &:hover {
+ background-color: $mdlext-dark-data-table-hover-color;
+ }
+ }
+ }
+
+ th {
+ color: $mdlext-dark-data-table-header-color;
+
+ &.mdl-data-table__header--sorted-ascending,
+ &.mdl-data-table__header--sorted-descending {
+ color: $mdlext-dark-data-table-header-sorted-color;
+
+ &:hover {
+ &::before {
+ color: $mdlext-dark-data-table-header-sorted-icon-hover-color;
+ }
+ }
+ }
+ }
+ }
+}
+
+// mdl/src/menu/_menu.scss
+// -----------------------------------
+.mdlext-dark-color-theme {
+
+ .mdl-menu__outline {
+ background: $mdlext-dark-default-dropdown-bg-color;
+ }
+
+ .mdl-menu__item {
+ color: $mdlext-dark-default-item-text-color;
+ background-color: transparent;
+ outline-color: $mdlext-dark-default-item-outline-color;
+
+ &--full-bleed-divider {
+ border-bottom-color: $mdlext-dark-default-item-divider-color;
+ }
+
+ &[disabled],
+ &[data-mdl-disabled] {
+ color: $mdlext-dark-disabled-item-text-color;
+ background-color: transparent;
+
+ &:hover {
+ background-color: transparent;
+ }
+
+ &:focus {
+ background-color: transparent;
+ }
+
+ & .mdl-ripple {
+ background: transparent;
+ }
+ }
+
+ &:hover {
+ background-color: $mdlext-dark-default-item-hover-bg-color;
+ }
+
+ &:focus {
+ background-color: $mdlext-dark-default-item-focus-bg-color;
+ }
+
+ &:active {
+ background-color: $mdlext-dark-default-item-active-bg-color;
+ }
+ }
+}
+
+// mdl/src/card/_card.scss
+// ----------------------------------------
+.mdlext-dark-color-theme {
+ .mdl-card {
+ background: $mdlext-dark-card-background-color;
+ }
+
+ .mdl-card__media {
+ background-color: $mdlext-dark-card-image-placeholder-color;
+ }
+
+ .mdl-card__title {
+ color: $mdlext-dark-card-text-color;
+
+ &.mdl-card--border {
+ border-bottom-color: $mdlext-dark-card-border-color;
+ }
+ }
+
+ .mdl-card__title-text {
+ color: inherit;
+ }
+
+ .mdl-card__subtitle-text {
+ color: $mdlext-dark-card-subtitle-color;
+ }
+
+ .mdl-card__supporting-text {
+ color: $mdlext-dark-card-supporting-text-text-color;
+ }
+
+ .mdl-card__actions {
+ background-color: rgba(255, 255, 255, 0);
+
+ &.mdl-card--border {
+ border-top-color: $mdlext-dark-card-border-color;
+ }
+ }
+}
+
+
+// mdlext/src/selectfield/_selectfield.scss
+// ----------------------------------------
+.mdlext-dark-color-theme {
+
+ .mdlext-selectfield.is-disabled::after {
+ color: $mdlext-dark-input-text-disabled-color;
+ @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-dark-input-text-disabled-color);
+ }
+
+ .mdlext-selectfield__select {
+ border-bottom-color: $mdlext-dark-input-text-bottom-border-color;
+ color: inherit;
+
+ option {
+ background-color: $mdlext-dark-content-background-color;
+ color: $mdlext-dark-text-color-primary;
+ }
+ }
+ .mdlext-selectfield.is-invalid .mdlext-selectfield__select {
+ border-color: $mdlext-dark-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-dark-input-text-disabled-color;
+ color: $mdlext-dark-input-text-disabled-text-color;
+ }
+
+ .mdlext-selectfield__label {
+ color: $mdlext-dark-input-text-label-color;
+ }
+ fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__label,
+ .mdlext-selectfield.is-disabled.is-disabled .mdlext-selectfield__label {
+ color: $mdlext-dark-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-dark-input-text-highlight-color;
+ }
+ .mdlext-selectfield--floating-label.is-invalid .mdlext-selectfield__label {
+ color: $mdlext-dark-input-text-error-color;
+ }
+ .mdlext-selectfield__label::after {
+ background-color: $mdlext-dark-input-text-highlight-color;
+ }
+ .mdlext-selectfield.is-invalid .mdlext-selectfield__label::after {
+ background-color: $mdlext-dark-input-text-error-color;
+ }
+
+ .mdlext-selectfield__error {
+ color: $mdlext-dark-input-text-error-color;
+ }
+}
+
+
+// mdlext/src/menu-button/_menu-button.scss
+// ----------------------------------------
+.mdlext-menu.mdlext-dark-color-theme {
+ background: $mdlext-dark-default-dropdown-bg-color;
+}
+
+.mdlext-dark-color-theme {
+
+ .mdlext-menu {
+ background: $mdlext-dark-default-dropdown-bg-color;
+
+ &__item {
+ color: $mdlext-dark-default-item-text-color;
+ background-color: $mdlext-dark-default-dropdown-bg-color;
+
+ &:active,
+ &[aria-selected='true'] {
+ background-color: $mdlext-dark-default-item-active-bg-color;
+ }
+ &:hover:not([disabled]) {
+ background-color: $mdlext-dark-default-item-hover-bg-color;
+ }
+ &:focus {
+ outline-color: $mdlext-dark-default-item-outline-color;
+ background-color: $mdlext-dark-default-item-focus-bg-color;
+ }
+ &[disabled] {
+ color: $mdlext-dark-disabled-item-text-color;
+
+ > * {
+ color: $mdlext-dark-disabled-item-text-color;
+ }
+ }
+ }
+ &__item-separator {
+ border-bottom: 1px solid $mdlext-dark-default-item-divider-color;
+ }
+ }
+}
+
+
+// mdlext/src/bordered-fields/_bordered-fields.scss
+// -------------------------------------------------
+.mdlext-dark-color-theme {
+
+ .mdlext-bordered-fields {
+
+ .mdl-textfield,
+ .mdlext-selectfield {
+
+ .mdl-textfield__input,
+ .mdlext-selectfield__select {
+ background-color: $mdlext-dark-bordered-field-background-color;
+ border-color: $mdlext-dark-bordered-field-border-color;
+ color: $mdlext-dark-bordered-field-input-text-color;
+
+ &:disabled {
+ color: $mdlext-dark-bordered-field-input-text-disabled-text-color;
+ background-color: $mdlext-dark-bordered-field-disabled-background-color;
+ border-color: $mdlext-dark-bordered-field-disabled-border-color;
+ }
+ &:focus {
+ background-color: $mdlext-dark-bordered-field-focus-background-color;
+ border-color: $mdlext-dark-bordered-field-focus-border-color;
+ }
+ }
+ &.is-invalid {
+ .mdl-textfield__input,
+ .mdlext-selectfield__select {
+ color: $mdlext-dark-bordered-field-input-text-error-color;
+ border-color: $mdlext-dark-bordered-field-error-border-color;
+ background-color: $mdlext-dark-bordered-field-error-background-color;
+
+ &:focus {
+ border-color: $mdlext-dark-bordered-field-error-focus-border-color;
+ background-color: $mdlext-dark-bordered-field-error-focus-background-color;
+ }
+ }
+ }
+ }
+
+ fieldset[disabled] .mdlext-selectfield::after,
+ .mdlext-selectfield.is-disabled::after {
+ color: $mdlext-dark-bordered-field-input-text-disabled-text-color;
+ @include mdlext-arrow(bottom, $mdlext-selectfield-arrow-width, $mdlext-selectfield-arrow-length, $mdlext-dark-bordered-field-input-text-disabled-text-color);
+ }
+
+ fieldset[disabled] .mdl-textfield .mdl-textfield__input,
+ fieldset[disabled] .mdlext-selectfield .mdlext-selectfield__select {
+ color: $mdlext-dark-bordered-field-input-text-disabled-text-color;
+ background-color: $mdlext-dark-bordered-field-disabled-background-color;
+ border-color: $mdlext-dark-bordered-field-disabled-border-color;
+ }
+
+ .mdl-textfield,
+ .mdlext-selectfield {
+
+ .mdl-textfield__label,
+ .mdlext-selectfield__label {
+ color: $mdlext-dark-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-dark-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-dark-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-dark-bordered-field-input-text-label-error-color;
+ }
+ }
+ }
+
+ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
+ fieldset[disabled] .mdl-selectfield .mdl-selectfield__label {
+ color: $mdlext-dark-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-dark-bordered-field-disabled-border-color;
+ }
+ }
+ fieldset[disabled] .mdl-textfield,
+ fieldset[disabled] .mdlext-selectfield {
+ i,
+ .mdl-button {
+ color: $mdlext-dark-bordered-field-disabled-border-color;
+ }
+ }
+ }
+
+}
+
+
+// mdlext/src/accordion/_accordion.scss
+// ----------------------------------------
+.mdlext-dark-color-theme {
+
+ .mdlext-accordion {
+
+ &__tab {
+ color: $mdlext-dark-accordion-header-secondary-color;
+ background-color: $mdlext-dark-accordion-header-background-color;
+
+ &:focus {
+ outline-color: $mdlext-dark-accordion-header-focus-outline-color;
+ }
+ &[aria-expanded='true'] {
+ background-color: $mdlext-dark-accordion-header-background-open-color;
+ }
+ &[aria-selected='true'] {
+ background-color: $mdlext-dark-accordion-header-background-active-color;
+ }
+ &[disabled] {
+ background-color: $mdlext-dark-accordion-header-disabled-color;
+ color: $mdlext-dark-accordion-header-secondary-color-disabled;
+ pointer-events: none;
+
+ > * {
+ color: $mdlext-dark-accordion-header-secondary-color-disabled;
+ }
+ }
+ &:hover:not([disabled]) {
+ background-color: $mdlext-dark-accordion-header-background-hover-color;
+ }
+ &--ripple {
+ &[aria-selected='true']::before {
+ background: $mdlext-dark-accordion-ripple-color;
+ }
+ }
+ }
+
+ &__tabpanel {
+ color: $mdlext-dark-accordion-content-color;
+ background-color: $mdlext-dark-accordion-content-background-color;
+ }
+ }
+
+ // Vertical layout
+ .mdlext-accordion {
+
+ &--vertical {
+
+ .mdlext-accordion__tab {
+ border-top: 1px solid $mdlext-dark-accordion-header-border-color;
+
+ &[aria-selected='true']::after {
+ background-color: $mdlext-dark-accordion-header-highlight-color;
+ }
+ }
+ .mdlext-accordion__tabpanel {
+ border-top: 1px solid $mdlext-dark-accordion-header-border-color;
+ }
+ }
+ }
+
+ // Horizontal layout
+ .mdlext-accordion {
+
+ &--horizontal {
+
+ .mdlext-accordion__tab {
+ border-left: 1px solid $mdlext-dark-accordion-header-border-color;
+
+ &[aria-selected='true']::after {
+ background-color: $mdlext-dark-accordion-header-highlight-color;
+ }
+ }
+ .mdlext-accordion__tabpanel {
+ border-left: 1px solid $mdlext-dark-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-dark-accordion-header-disabled-color;
+ color: $mdlext-dark-accordion-header-secondary-color-disabled;
+
+ > * {
+ color: $mdlext-dark-accordion-header-secondary-color-disabled;
+ }
+ }
+ .mdlext-accordion__tabpanel {
+ opacity: 0.8;
+ filter: blur(1px) grayscale(80%);
+ }
+ }
+}
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%);
+ }
+ }
+}
diff --git a/node_modules/mdl-ext/src/color-themes/readme.md b/node_modules/mdl-ext/src/color-themes/readme.md
new file mode 100644
index 0000000..6266567
--- /dev/null
+++ b/node_modules/mdl-ext/src/color-themes/readme.md
@@ -0,0 +1,104 @@
+# Color Themes
+
+
+The **color-themes** component demonstrates how you can create your own themes of
+[material design colors](https://www.google.com/design/spec/style/color.html).
+
+## Introduction
+Material Design Lite provides only one color theme, but in many web designs more than one theme is required, e.g. a
+dark theme and a light theme. This component provides the necessary SASS files to use two additional color themes in MDL.
+
+### To include a MDLEXT color theme component:
+ 1. Code a block element, as the "outer" container, intended to hold all of the color theme.
+```html
+<section>
+</section>
+```
+
+ 2. Add one of the `mdlext-light-color-theme` or `mdlext-dark-color-theme` classes to the block element using the `class` attribute.
+```html
+<section class="mdlext-light-color-theme">
+</section>
+```
+
+ 3. Add the MDL components that shuld be rendered with the spesified color theme.
+```html
+<section class="mdlext-light-color-theme">
+ <div class="mdl-card mdl-shadow--2dp">
+ <header class="mdl-card__title mdl-color--primary mdl-color-text--primary-contrast">
+ <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+ <i class="material-icons">view_headline</i>
+ </button>
+ <h2 class="mdl-card__title-text">A card with a Color Theme</h2>
+ <div class="mdl-layout-spacer"></div>
+ <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+ <i class="material-icons">share</i>
+ </button>
+ </header>
+ <div class="mdl-card__supporting-text">
+ Some supporting text ...
+ </div>
+ <footer class="mdl-card__actions mdl-card--border">
+ <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+ Read more
+ </a>
+ <div class="mdl-layout-spacer"></div>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+ </footer>
+ </div>
+ <p>More content ...</p>
+</section>
+```
+
+### Create your own color theme
+Creating your own color theme is simple. For each of the themes, light or dark, you must modify six SASS variables.
+The variables defines the primary and accent colors for the theme, and their corresponding contrast colors.
+
+Start by picking some sensible primary and accent colors from the
+[material color plaette](https://www.google.com/design/spec/style/color.html#color-color-palette) - or use one of the
+web based platte generators as an aid. The [material palette](http://www.materialpalette.com/) is used for this example.
+
+Pick a primary and an accent color from the [material palette](http://www.materialpalette.com/), e.g. grey/yellow.
+Download the SASS version of the palette and translate the variables to the MDLEXT color theme.
+
+The downloaded material palette SASS variables:
+```sass
+$primary-color-dark: #616161
+$primary-color: #9E9E9E
+$primary-color-light: #F5F5F5
+$primary-color-text: #212121
+$accent-color: #FFEB3B
+$primary-text-color: #212121
+$secondary-text-color: #727272
+$divider-color: #B6B6B6
+```
+
+Open the MDLEXT [color-themes](./_color-themes.scss) SASS file and translate material palette variables to MDLEXT color theme:
+```sass
+$mdlext-light-color-primary: #9E9E9E;
+$mdlext-light-color-primary-dark: #616161;
+$mdlext-light-color-primary-light: #9E9E9E; // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-primary-contrast: #F5F5F5;
+$mdlext-light-color-accent: #FFEB3B;
+$mdlext-light-color-accent-light: #FFEB3B; // Fallback color. Set to color-primary if fallback is not needed
+$mdlext-light-color-accent-contrast: #FFFFFF;
+```
+
+Save the modified variables to your own SASS project, recompile and try out your new theme.
+
+There are a few more SASS variables you can modify - and they should be relativeley self explanatory. By default these
+values are set in accordance with the guidance given in the
+[material design colors](https://www.google.com/design/spec/style/color.html) guide.
+
+#### Examples
+See the [example code](./snippets/color-themes.html).
+
+## Configuration options
+
+The MDLEXT CSS classes apply various predefined visual and behavioral enhancements to MDL components.
+The table below lists the available classes and their effects.
+
+| MDLEXT class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdlext-light-color-theme` | Defines container as an MDLEXT light color theme component | Required on an "outer" block element|
+| `mdlext-dark-color-theme` | Defines container as an MDLEXT dark coolor theme component | Required on an "outer" block element|
diff --git a/node_modules/mdl-ext/src/color-themes/snippets/color-themes.html b/node_modules/mdl-ext/src/color-themes/snippets/color-themes.html
new file mode 100644
index 0000000..1dc8ae5
--- /dev/null
+++ b/node_modules/mdl-ext/src/color-themes/snippets/color-themes.html
@@ -0,0 +1,2769 @@
+<style>
+ .demo-theme-container {
+ margin: 0 auto 32px;
+ /*max-width: 800px;*/
+ }
+
+ .demo-theme-container table.info,
+ .demo-card-grid table.info {
+ width: 100%
+ }
+ .demo-theme-container table.info th,
+ .demo-card-grid table.info th {
+ padding-right: 40px;
+ vertical-align: middle;
+ text-align: left;
+ width: 30%;
+ }
+ .demo-theme-container section,
+ .demo-card-grid section {
+ margin: 0 16px;
+ }
+
+ .demo-badge-grid {
+ }
+ .demo-badge-grid .mdl-cell {
+ text-align: center;
+ }
+ .demo-badge-grid .mdl-cell p {
+ margin-top: 32px;
+ }
+
+ .demo-button-grid {
+ }
+ .demo-button-grid .mdl-cell {
+ text-align: center;
+ padding: 12px 4px;
+ }
+
+ .demo-toggle-grid {
+ }
+ .demo-toggle-grid .mdl-cell p {
+ margin-top: 16px;
+ }
+
+ .demo-slider-grid {
+ }
+ .demo-slider-grid p {
+ margin-top: 16px;
+ }
+
+ .textfield-demo-container {
+ }
+
+ .textfield-demo-container .mdl-cell {
+ padding: 0 4px 8px 0;
+ }
+
+ .textfield-demo-container .mdl-cell p {
+ margin-bottom: 0;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+
+ .demo-menu {
+ padding-top: 16px;
+ max-width: 300px;
+ }
+ .demo-menu-container {
+ position: relative;
+ width: 100%;
+ }
+ .demo-menu-bar {
+ box-sizing: border-box;
+ height: 64px;
+ width: 100%;
+ padding: 16px;
+ }
+ .demo-menu-background-light {
+ background: white;
+ height: 148px;
+ width: 100%;
+ }
+ .demo-menu-background-dark {
+ background: #212121;
+ height: 148px;
+ width: 100%;
+ }
+
+
+ .mdl-card {
+ width: auto;
+ }
+ .mdl-card__media {
+ margin: 0;
+ text-align: center;
+ }
+ .mdl-card__media > img {
+ max-width: 100%;
+ height: auto;
+ }
+ .mdl-card__supporting-text {
+ width: auto;
+ }
+ .mdl-card__actions {
+ display: flex;
+ }
+
+
+ .borderedfield-demo-container .mdl-cell {
+ padding: 0 4px 8px 0;
+ }
+
+ .borderedfield-demo-container .mdl-cell p {
+ margin-bottom: 0;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ /* File input example */
+ .mdl-button--file input {
+ cursor: pointer;
+ opacity: 0;
+ width: 1px;
+ height: 1px;
+ }
+
+</style>
+
+
+<datalist id="languages">
+ <option value="HTML">
+ <option value="CSS">
+ <option value="JavaScript">
+ <option value="Java">
+ <option value="Ruby">
+ <option value="PHP">
+ <option value="Go">
+ <option value="Erlang">
+ <option value="Python">
+ <option value="C">
+ <option value="C#">
+ <option value="C++">
+</datalist>
+
+
+<div class="mdl-grid demo-card-grid" style="margin-bottom: 32px;">
+
+ <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdlext-light-color-theme">
+ <div class="mdl-card mdl-shadow--2dp">
+ <header class="mdl-card__title mdl-color--primary mdl-color-text--primary-contrast">
+ <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+ <i class="material-icons">view_headline</i>
+ </button>
+ <h2 class="mdl-card__title-text">Light Theme</h2>
+ <div class="mdl-layout-spacer"></div>
+ <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+ <i class="material-icons">share</i>
+ </button>
+ </header>
+ <figure class="mdl-card__media">
+ <img src="./images/_DSC7535-2.jpg" alt="">
+ </figure>
+ <section style="margin-top:16px">
+ <table class="info">
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+ <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">primary dark</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary</th>
+ <td class="mdl-color--primary mdl-color-text--primary-contrast">primary</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">accent</th>
+ <td class="mdl-color--accent mdl-color-text--accent-contrast">accent</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+ <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">primary dark, inverted</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary</th>
+ <td class="mdl-color--primary-contrast mdl-color-text--primary">primary, inverted</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">accent</th>
+ <td class="mdl-color--accent-contrast mdl-color-text--accent">accent, inverted</td>
+ </tr>
+ </table>
+ </section>
+
+ <div class="mdl-card__supporting-text">
+ Card Supporting Text
+ </div>
+
+ <footer class="mdl-card__actions mdl-card--border">
+ <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+ Read more
+ </a>
+ <div class="mdl-layout-spacer"></div>
+ <button class="mdl-button mdl-button--icon"><i class="material-icons">radio</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+ </footer>
+ </div>
+
+ </div>
+
+
+ <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdlext-dark-color-theme">
+
+ <div class="mdl-card mdl-shadow--2dp">
+ <header class="mdl-card__title mdl-color--primary mdl-color-text--primary-contrast">
+ <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+ <i class="material-icons">view_headline</i>
+ </button>
+ <h2 class="mdl-card__title-text">Dark Theme</h2>
+ <div class="mdl-layout-spacer"></div>
+ <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+ <i class="material-icons">share</i>
+ </button>
+ </header>
+ <figure class="mdl-card__media">
+ <img src="./images/_DSC7535-2.jpg" alt="">
+ </figure>
+ <section style="margin-top:16px">
+ <table class="info">
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+ <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">primary dark</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary</th>
+ <td class="mdl-color--primary mdl-color-text--primary-contrast">primary</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">accent</th>
+ <td class="mdl-color--accent mdl-color-text--accent-contrast">accent</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+ <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">primary dark, inverted</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary</th>
+ <td class="mdl-color--primary-contrast mdl-color-text--primary">primary, inverted</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">accent</th>
+ <td class="mdl-color--accent-contrast mdl-color-text--accent">accent, inverted</td>
+ </tr>
+ </table>
+ </section>
+
+ <div class="mdl-card__supporting-text">
+ Card Supporting Text
+ </div>
+
+ <footer class="mdl-card__actions mdl-card--border">
+ <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+ Read more
+ </a>
+ <div class="mdl-layout-spacer"></div>
+ <button class="mdl-button mdl-button--icon"><i class="material-icons">radio</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+ <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+ </footer>
+ </div>
+
+ </div>
+
+</div>
+
+
+
+
+<h2>Light Color Theme</h2>
+
+<div class="demo-theme-container mdlext-light-color-theme">
+
+ <section>
+ <table class="info">
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">.mdl-typography--</th>
+ <td class="mdl-typography--title">Scale & Basic Styles</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">display-4</th>
+ <td class="mdl-typography--display-4">Light 112px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">display-3</th>
+ <td class="mdl-typography--display-3">Regular 56px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">display-2</th>
+ <td class="mdl-typography--display-2">Regular 45px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">display-1</th>
+ <td class="mdl-typography--display-1">Regular 34px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">headline</th>
+ <td class="mdl-typography--headline">Regular 24px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">title</th>
+ <td class="mdl-typography--title">Medium 20px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">subhead</th>
+ <td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">body-2</th>
+ <td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">body-1</th>
+ <td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">body-2-force-preferred-font</th>
+ <td class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">body-1-force-preferred-font</th>
+ <td class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">caption</th>
+ <td class="mdl-typography--caption">Regular 12px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">menu</th>
+ <td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">button</th>
+ <td class="mdl-typography--button">Medium (All Caps) 14px</td>
+ </tr>
+
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+ <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">mdl-color--primary-dark mdl-color-text--primary-contrast</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary</th>
+ <td class="mdl-color--primary mdl-color-text--primary-contrast">mdl-color--primary mdl-color-text--primary-contrast</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">accent</th>
+ <td class="mdl-color--accent mdl-color-text--accent-contrast">mdl-color--accent mdl-color-text--accent-contrast</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+ <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">mdl-color--primary-contrast mdl-color-text--primary-dark</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary</th>
+ <td class="mdl-color--primary-contrast mdl-color-text--primary">mdl-color-text--primary</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">accent</th>
+ <td class="mdl-color--accent-contrast mdl-color-text--accent">mdl-color--accent-contrast mdl-color-text--accent</td>
+ </tr>
+ </table>
+ </section>
+
+ <section>
+ <h1>Base font</h1>
+
+ <p>Material Design Lite start’s with a base font of</p>
+ <ul>
+ <li>A size of 14px</li>
+ <li>A weight of 400</li>
+ <li>A line height of 20px</li>
+ </ul>
+
+ <p class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</p>
+ <p class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</p>
+ <p class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</p>
+ <p class="mdl-typography--body-2-color-contrast">Body with color contrast</p>
+ <p class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</p>
+ <p><a href="#" onclick="return false">An anchor</a></p>
+
+ <h1>Headings</h1>
+ <h1>h1 (56px) <small>Subtitle</small></h1>
+ <h2>h2 (45px) <small>Subtitle</small></h2>
+ <h3>h3 (34px) <small>Subtitle</small></h3>
+ <h4>h4 (24px) <small>Subtitle</small></h4>
+ <h5>h5 (20px) <small>Subtitle</small></h5>
+ <h6>h6 (16px) <small>Subtitle</small></h6>
+ </section>
+
+
+ <!-- textfields -->
+ <section class = "textfield-demo-container">
+
+ <div class="mdl-grid mdl-grid--no-spacing">
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield">
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a programming language" required>
+ <label class="mdl-textfield__label">Programming Language</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label">
+ <label class="mdl-button mdl-js-button mdl-button--icon" for="mdl-expandable-demo3">
+ <i class="material-icons">search</i>
+ </label>
+ <div class="mdl-textfield__expandable-holder">
+ <input class="mdl-textfield__input" type="text" name="q" value="" id="mdl-expandable-demo3" pattern=".{3,}" />
+ <label class="mdl-textfield__label" for="mdl-expandable-demo1">Expandable Input</label>
+ </div>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--8-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--full-width mdl-textfield--floating-label">
+ <textarea class="mdl-textfield__input" rows= "3"></textarea>
+ <label class="mdl-textfield__label">Text lines...</label>
+ </div>
+ </div>
+
+ </div>
+
+ </section>
+
+
+ <!-- Selectfield -->
+ <section style="margin-bottom: 16px;">
+ <div class="mdl-grid mdl-grid--no-spacing">
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield">
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select" disabled>
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+ </div>
+ </section>
+
+
+ <!-- bordered fields -->
+ <section class="mdlext-bordered-fields" style="margin-top:16px;">
+
+ <div class="mdl-grid mdl-grid--no-spacing">
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a language" required>
+ <label class="mdl-textfield__label">Programming language</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+ <label class="mdl-textfield__label">Numeric with floating label</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+ <label class="mdl-textfield__label" >Disabled floating label</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right ">
+ <input class="mdl-textfield__input" type="text" id="uploadfile12" readonly>
+ <label class="mdl-textfield__label">File (work in progress)</label>
+
+ <label class="mdl-button mdl-js-button mdl-button--primary mdl-button--icon mdl-button--file" for="uploadfile12">
+ <i class="material-icons">attach_file</i>
+ <input type="file" id="uploadBtn12">
+ </label>
+ </div>
+ <!--
+ // Need a script to work properly - something like this
+ -->
+ <script>
+ (function() {
+ 'use strict';
+ document.querySelector('#uploadBtn12').addEventListener('change', function() {
+ var n = document.querySelector("#uploadfile12");
+ n.value = this.files[0].name;
+ n.parentNode.classList.add('is-dirty');
+ });
+ }());
+ </script>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text" disabled>
+ <label class="mdl-textfield__label">Text, disabled</label>
+ <i class="material-icons">fingerprint</i>
+ </div>
+ </div>
+
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </div>
+
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select" disabled>
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+ <select class="mdlext-selectfield__select" disabled>
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ <i class="material-icons">fingerprint</i>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ <i class="material-icons">fingerprint</i>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+
+ <input class="mdl-textfield__input" type="text" disabled>
+ <label class="mdl-textfield__label">Text...</label>
+
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </div>
+
+ </div>
+
+ <fieldset disabled>
+ <legend>Disabled fieldset</legend>
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </fieldset>
+
+ </section>
+
+
+ <!-- Badges -->
+ <section style="margin-top:16px">
+ <div class="mdl-grid demo-badge-grid">
+ <div class="mdl-cell mdl-cell--2-col">
+ <span class="mdl-badge" data-badge="4">Inbox</span>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <span class="material-icons mdl-badge" data-badge="1">account_box</span>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <span class="mdl-badge" data-badge="♥">Mood</span>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <span class="material-icons mdl-badge" data-badge="♥">account_box</span>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <a href="#" onclick="return false" class="mdl-badge" data-badge="5">Inbox</a>
+ </div>
+ </div>
+ </section>
+
+ <!-- Buttons -->
+ <section>
+ <div class="mdl-grid demo-button-grid">
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab">
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab" disabled>
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab" disabled>
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised">
+ Raised
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+ Disabled
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+ Colored
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
+ Accent
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
+ <i class="material-icons">settings</i> Settings
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect animated bounce">
+ <i class="material-icons">favorite</i> Fav
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button">
+ Flat
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button" disabled>
+ Disabled
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--primary">
+ Colored
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--accent">
+ Accent
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button">
+ <i class="material-icons">snooze</i> Ring, ring...
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">mood</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
+ <i class="material-icons">mood</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-color--lime mdl-button--accent">
+ <i class="material-icons">cloud</i>
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-color--deep-orange-100 mdl-js-ripple-effect">
+ <i class="material-icons">settings</i> Settings
+ </button>
+ </div>
+ </div>
+ </section>
+
+
+ <!-- Toggles -->
+ <section>
+ <div class="mdl-grid demo-toggle-grid">
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-checkbox__input" checked>
+ <span class="mdl-checkbox__label">Checkbox</span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-checkbox__input">
+ <span class="mdl-checkbox__label">Checkbox</span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-checkbox__input" checked disabled>
+ <span class="mdl-checkbox__label">Checkbox</span>
+ </label>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+ <input type="radio" class="mdl-radio__button" name="options30" value="1" checked>
+ <span class="mdl-radio__label">First</span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+ <input type="radio" class="mdl-radio__button" name="options30" value="2">
+ <span class="mdl-radio__label">Second</span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+ <input type="radio" class="mdl-radio__button" name="options30" value="3" disabled>
+ <span class="mdl-radio__label">Third</span>
+ </label>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-icon-toggle__input" checked>
+ <i class="mdl-icon-toggle__label material-icons">format_bold</i>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-icon-toggle__input">
+ <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-icon-toggle__input" disabled>
+ <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+ </label>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-switch__input" checked>
+ <span class="mdl-switch__label"></span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-switch__input">
+ <span class="mdl-switch__label"></span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-switch__input" disabled>
+ <span class="mdl-switch__label"></span>
+ </label>
+ </div>
+ </div>
+ </section>
+
+
+ <!-- Sliders -->
+ <section>
+ <div class="mdl-grid demo-slider-grid">
+ <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
+ <!-- Default Slider -->
+ <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0">
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
+ <!-- Slider with Starting Value -->
+ <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25">
+ </div>
+ </div>
+ </section>
+
+
+ <!-- Data table -->
+ <section>
+ <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
+ <thead>
+ <tr>
+ <th class="mdl-data-table__cell--non-numeric">Materials</th>
+ <th>Quantity</th>
+ <th>Unit price</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
+ <td>25</td>
+ <td>$2.90</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
+ <td>50</td>
+ <td>$1.25</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
+ <td>10</td>
+ <td>$2.35</td>
+ </tr>
+ </tbody>
+ </table>
+ </section>
+
+
+ <!-- Menu -->
+ <!--
+ <section>
+ <div class="demo-menu demo-menu__lower-left">
+ <div class="demo-menu-container mdl-shadow--2dp mdl-color--primary-dark mdl-color-text--primary-contrast">
+ <div class="demo-menu-bar">
+ <button id="demo-menu-lower-left-30" class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+ </button>
+ <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left-30">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+ </ul>
+
+ <span>Menu lower left</span>
+
+ </div>
+ <div class="demo-menu-background-light"></div>
+ </div>
+ </div>
+ </section>
+ -->
+
+ <!-- Menu button -->
+ <section style="padding-bottom:16px">
+ <h4>Menu button</h4>
+
+ <button class="mdl-button mdl-button--raised mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button">
+ <i class="material-icons">gesture</i>
+ <span class="mdlext-menu-button__caption">Select</span>
+ <i class="material-icons mdlext-aria-expanded-more-less"></i>
+ </button>
+ <ul class="mdlext-menu mdlext-light-color-theme" hidden >
+ <li class="mdlext-menu__item">
+ <i class="material-icons md-18">info</i>
+ <span class="mdlext-menu__item__caption">Menu item #1</span>
+ </li>
+ <li class="mdlext-menu__item">
+ <i class="material-icons md-18">help_outline</i>
+ <span class="mdlext-menu__item__caption">Menu item #2. A long text to check ellipsis overflow 0123456789</span>
+ <i class="material-icons md-18">radio</i>
+ </li>
+ <li class="mdlext-menu__item-separator"></li>
+ <li class="mdlext-menu__item" disabled>
+ <span class="mdlext-menu__item__caption">Menu item #3, disabled</span>
+ <i class="material-icons md-18">accessibility</i>
+ </li>
+ <li class="mdlext-menu__item-separator"></li>
+ <li class="mdlext-menu__item">
+ <span class="mdlext-menu__item__caption">Menu item #IV</span>
+ <i class="material-icons md-18">build</i>
+ </li>
+ <li class="mdlext-menu__item">
+ <span class="mdlext-menu__item__caption">Menu item #V</span>
+ <i class="material-icons md-18">build</i>
+ </li>
+ <li class="mdlext-menu__item-separator"></li>
+ <li class="mdlext-menu__item">
+ <span class="mdlext-menu__item__caption">Menu item #VI</span>
+ <i class="material-icons md-18">build</i>
+ </li>
+ <li class="mdlext-menu__item">
+ <span class="mdlext-menu__item__caption">Menu item #VII</span>
+ <i class="material-icons md-18">build</i>
+ </li>
+ <li class="mdlext-menu__item">
+ Menu item #n
+ </li>
+ </ul>
+ </section>
+
+</div>
+
+
+
+<!-- Dark theme -->
+<h2>Dark Color Theme</h2>
+
+
+<div class="demo-theme-container mdlext-dark-color-theme">
+
+ <section>
+ <table class="info">
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">.mdl-typography--</th>
+ <td class="mdl-typography--title">Scale & Basic Styles</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">display-4</th>
+ <td class="mdl-typography--display-4">Light 112px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">display-3</th>
+ <td class="mdl-typography--display-3">Regular 56px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">display-2</th>
+ <td class="mdl-typography--display-2">Regular 45px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">display-1</th>
+ <td class="mdl-typography--display-1">Regular 34px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">headline</th>
+ <td class="mdl-typography--headline">Regular 24px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">title</th>
+ <td class="mdl-typography--title">Medium 20px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">subhead</th>
+ <td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">body-2</th>
+ <td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">body-1</th>
+ <td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">body-2-force-preferred-font</th>
+ <td class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">body-1-force-preferred-font</th>
+ <td class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">caption</th>
+ <td class="mdl-typography--caption">Regular 12px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">menu</th>
+ <td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">button</th>
+ <td class="mdl-typography--button">Medium (All Caps) 14px</td>
+ </tr>
+
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+ <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">mdl-color--primary-dark mdl-color-text--primary-contrast</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary</th>
+ <td class="mdl-color--primary mdl-color-text--primary-contrast">mdl-color--primary mdl-color-text--primary-contrast</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">accent</th>
+ <td class="mdl-color--accent mdl-color-text--accent-contrast">mdl-color--accent mdl-color-text--accent-contrast</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+ <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">mdl-color--primary-contrast mdl-color-text--primary-dark</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary</th>
+ <td class="mdl-color--primary-contrast mdl-color-text--primary">mdl-color-text--primary</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">accent</th>
+ <td class="mdl-color--accent-contrast mdl-color-text--accent">mdl-color--accent-contrast mdl-color-text--accent</td>
+ </tr>
+ </table>
+ </section>
+
+ <section>
+ <h1>Base font</h1>
+
+ <p>Material Design Lite start’s with a base font of</p>
+ <ul>
+ <li>A size of 14px</li>
+ <li>A weight of 400</li>
+ <li>A line height of 20px</li>
+ </ul>
+
+ <p class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</p>
+ <p class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</p>
+ <p class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</p>
+ <p class="mdl-typography--body-2-color-contrast">Body with color contrast</p>
+ <p class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</p>
+ <p><a href="#" onclick="return false">An anchor</a></p>
+
+ <h1>Headings</h1>
+ <h1>h1 (56px) <small>Subtitle</small></h1>
+ <h2>h2 (45px) <small>Subtitle</small></h2>
+ <h3>h3 (34px) <small>Subtitle</small></h3>
+ <h4>h4 (24px) <small>Subtitle</small></h4>
+ <h5>h5 (20px) <small>Subtitle</small></h5>
+ <h6>h6 (16px) <small>Subtitle</small></h6>
+ </section>
+
+
+ <!-- textfields -->
+ <section class = "textfield-demo-container">
+
+ <div class="mdl-grid mdl-grid--no-spacing">
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield">
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a programming language" required>
+ <label class="mdl-textfield__label">Programming Language</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label">
+ <label class="mdl-button mdl-js-button mdl-button--icon" for="mdl-expandable-demo2">
+ <i class="material-icons">search</i>
+ </label>
+ <div class="mdl-textfield__expandable-holder">
+ <input class="mdl-textfield__input" type="text" name="q" value="" id="mdl-expandable-demo2" pattern=".{3,}" />
+ <label class="mdl-textfield__label" for="mdl-expandable-demo2">Expandable Input</label>
+ </div>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--8-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--full-width mdl-textfield--floating-label">
+ <textarea class="mdl-textfield__input" rows= "3" ></textarea>
+ <label class="mdl-textfield__label">Text lines...</label>
+ </div>
+ </div>
+
+ </div>
+
+ </section>
+
+
+
+ <!-- Selectfield -->
+ <section style="margin-bottom: 16px;">
+ <div class="mdl-grid mdl-grid--no-spacing">
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield">
+ <select class="mdlext-selectfield__select" name="mdl-professsion3">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select" name="mdl-professsion20">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select" name="mdl-professsion22" disabled>
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+ </div>
+ </section>
+
+
+
+ <!-- bordered fields -->
+ <section class="mdlext-bordered-fields" style="margin-top:16px;">
+
+ <div class="mdl-grid mdl-grid--no-spacing">
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a language" required>
+ <label class="mdl-textfield__label">Programming language</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+ <label class="mdl-textfield__label">Numeric with floating label</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+ <label class="mdl-textfield__label" >Disabled floating label</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right ">
+ <input class="mdl-textfield__input" type="text" id="uploadfile22" readonly>
+ <label class="mdl-textfield__label">File (work in progress)</label>
+
+ <label class="mdl-button mdl-js-button mdl-button--primary mdl-button--icon mdl-button--file" for="uploadfile22">
+ <i class="material-icons">attach_file</i>
+ <input type="file" id="uploadBtn22">
+ </label>
+ </div>
+ <!--
+ // Need a script to work properly - something like this
+ -->
+ <script>
+ (function() {
+ 'use strict';
+ document.querySelector('#uploadBtn22').addEventListener('change', function() {
+ var n = document.querySelector("#uploadfile22");
+ n.value = this.files[0].name;
+ n.parentNode.classList.add('is-dirty');
+ });
+ }());
+ </script>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text" disabled>
+ <label class="mdl-textfield__label">Text, disabled</label>
+ <i class="material-icons">fingerprint</i>
+ </div>
+ </div>
+
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </div>
+
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select" disabled>
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+ <select class="mdlext-selectfield__select" disabled>
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ <i class="material-icons">fingerprint</i>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ <i class="material-icons">fingerprint</i>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+
+ <input class="mdl-textfield__input" type="text" disabled>
+ <label class="mdl-textfield__label">Text...</label>
+
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </div>
+
+ </div>
+
+ <fieldset disabled>
+ <legend>Disabled fieldset</legend>
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ <option value="option6">option 5 abcdefghijklmnopqrstuvw0123456789</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </fieldset>
+
+ </section>
+
+
+ <!-- Badges -->
+ <section style="margin-top:16px">
+ <div class="mdl-grid demo-badge-grid">
+ <div class="mdl-cell mdl-cell--2-col">
+ <span class="mdl-badge" data-badge="4">Inbox</span>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <span class="material-icons mdl-badge" data-badge="1">account_box</span>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <span class="mdl-badge" data-badge="♥">Mood</span>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <span class="material-icons mdl-badge" data-badge="♥">account_box</span>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <a href="#" onclick="return false" class="mdl-badge" data-badge="5">Inbox</a>
+ </div>
+ </div>
+
+ </section>
+
+
+ <!-- Buttons -->
+ <section>
+ <div class="mdl-grid demo-button-grid">
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab">
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab" disabled>
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab" disabled>
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised">
+ Raised
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+ Disabled
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+ Colored
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
+ Accent
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
+ <i class="material-icons">settings</i> Settings
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect animated bounce">
+ <i class="material-icons">favorite</i> Fav
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button">
+ Flat
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button" disabled>
+ Disabled
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--primary">
+ Colored
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--accent">
+ Accent
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button">
+ <i class="material-icons">snooze</i> Ring, ring...
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">mood</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
+ <i class="material-icons">mood</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-color--lime mdl-button--accent">
+ <i class="material-icons">cloud</i>
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-color--deep-orange-100 mdl-js-ripple-effect">
+ <i class="material-icons">settings</i> Settings
+ </button>
+ </div>
+ </div>
+ </section>
+
+ <!-- Toggles -->
+ <section>
+ <div class="mdl-grid demo-toggle-grid">
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-checkbox__input" checked>
+ <span class="mdl-checkbox__label">Checkbox</span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-checkbox__input">
+ <span class="mdl-checkbox__label">Checkbox</span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-checkbox__input" checked disabled>
+ <span class="mdl-checkbox__label">Checkbox</span>
+ </label>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+ <input type="radio" class="mdl-radio__button" name="options2" value="1" checked>
+ <span class="mdl-radio__label">First</span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+ <input type="radio" class="mdl-radio__button" name="options2" value="2">
+ <span class="mdl-radio__label">Second</span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+ <input type="radio" class="mdl-radio__button" name="options2" value="3" disabled>
+ <span class="mdl-radio__label">Third</span>
+ </label>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-icon-toggle__input" checked>
+ <i class="mdl-icon-toggle__label material-icons">format_bold</i>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-icon-toggle__input">
+ <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-icon-toggle__input" disabled>
+ <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+ </label>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-switch__input" checked>
+ <span class="mdl-switch__label"></span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-switch__input">
+ <span class="mdl-switch__label"></span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-switch__input" disabled>
+ <span class="mdl-switch__label"></span>
+ </label>
+ </div>
+ </div>
+ </section>
+
+
+
+ <!-- Sliders -->
+ <section>
+ <div class="mdl-grid demo-slider-grid">
+ <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
+ <!-- Default Slider -->
+ <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0">
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
+ <!-- Slider with Starting Value -->
+ <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25">
+ </div>
+ </div>
+ </section>
+
+
+ <!-- Data table -->
+ <section>
+ <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
+ <thead>
+ <tr>
+ <th class="mdl-data-table__cell--non-numeric">Materials</th>
+ <th>Quantity</th>
+ <th>Unit price</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
+ <td>25</td>
+ <td>$2.90</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
+ <td>50</td>
+ <td>$1.25</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
+ <td>10</td>
+ <td>$2.35</td>
+ </tr>
+ </tbody>
+ </table>
+ </section>
+
+
+ <!-- Menu -->
+ <!--
+ <section>
+ <div class="demo-menu">
+ <div class="demo-menu-container mdl-shadow--2dp mdl-color--primary-dark mdl-color-text--primary-contrast">
+ <div class="demo-menu-background-dark"></div>
+ <div class="demo-menu-bar">
+ <button id="demo-menu-top-left" class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+ </button>
+
+ <ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
+ for="demo-menu-top-left">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+ </ul>
+
+ <span>Menu top left</span>
+ </div>
+ </div>
+ </div>
+ </section>
+ -->
+
+ <!-- Menu button -->
+ <section style="padding-bottom:16px">
+ <h4>Menu button</h4>
+ <button class="mdl-button mdl-button--raised mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button">
+ <i class="material-icons">gesture</i>
+ <span class="mdlext-menu-button__caption">Select</span>
+ <i class="material-icons mdlext-aria-expanded-more-less"></i>
+ </button>
+ <ul class="mdlext-menu mdlext-dark-color-theme" hidden >
+ <li class="mdlext-menu__item">
+ <i class="material-icons md-18">info</i>
+ <span class="mdlext-menu__item__caption">Menu item #1</span>
+ </li>
+ <li class="mdlext-menu__item">
+ <i class="material-icons md-18">help_outline</i>
+ <span class="mdlext-menu__item__caption">Menu item #2. A long text to check ellipsis overflow 0123456789</span>
+ <i class="material-icons md-18">radio</i>
+ </li>
+ <li class="mdlext-menu__item-separator"></li>
+ <li class="mdlext-menu__item" disabled>
+ <span class="mdlext-menu__item__caption">Menu item #3, disabled</span>
+ <i class="material-icons md-18">accessibility</i>
+ </li>
+ <li class="mdlext-menu__item-separator"></li>
+ <li class="mdlext-menu__item">
+ <span class="mdlext-menu__item__caption">Menu item #IV</span>
+ <i class="material-icons md-18">build</i>
+ </li>
+ <li class="mdlext-menu__item">
+ <span class="mdlext-menu__item__caption">Menu item #V</span>
+ <i class="material-icons md-18">build</i>
+ </li>
+ <li class="mdlext-menu__item-separator"></li>
+ <li class="mdlext-menu__item">
+ <span class="mdlext-menu__item__caption">Menu item #VI</span>
+ <i class="material-icons md-18">build</i>
+ </li>
+ <li class="mdlext-menu__item">
+ <span class="mdlext-menu__item__caption">Menu item #VII</span>
+ <i class="material-icons md-18">build</i>
+ </li>
+ <li class="mdlext-menu__item">
+ Menu item #n
+ </li>
+ </ul>
+ </section>
+
+
+</div>
+
+
+
+<h2>Default Color Theme</h2>
+
+<!-- Default theme -->
+<div class="demo-theme-container">
+
+ <section>
+ <table class="info">
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">.mdl-typography--</th>
+ <td class="mdl-typography--title">Scale & Basic Styles</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">display-4</th>
+ <td class="mdl-typography--display-4">Light 112px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">display-3</th>
+ <td class="mdl-typography--display-3">Regular 56px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">display-2</th>
+ <td class="mdl-typography--display-2">Regular 45px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">display-1</th>
+ <td class="mdl-typography--display-1">Regular 34px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">headline</th>
+ <td class="mdl-typography--headline">Regular 24px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">title</th>
+ <td class="mdl-typography--title">Medium 20px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">subhead</th>
+ <td class="mdl-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">body-2</th>
+ <td class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">body-1</th>
+ <td class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">body-2-force-preferred-font</th>
+ <td class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">body-1-force-preferred-font</th>
+ <td class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">caption</th>
+ <td class="mdl-typography--caption">Regular 12px</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">menu</th>
+ <td class="mdl-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">button</th>
+ <td class="mdl-typography--button">Medium (All Caps) 14px</td>
+ </tr>
+
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+ <td class="mdl-color--primary-dark mdl-color-text--primary-contrast">mdl-color--primary-dark mdl-color-text--primary-contrast</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary</th>
+ <td class="mdl-color--primary mdl-color-text--primary-contrast">mdl-color--primary mdl-color-text--primary-contrast</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">accent</th>
+ <td class="mdl-color--accent mdl-color-text--accent-contrast">mdl-color--accent mdl-color-text--accent-contrast</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary-dark</th>
+ <td class="mdl-color--primary-contrast mdl-color-text--primary-dark">mdl-color--primary-contrast mdl-color-text--primary-dark</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">primary</th>
+ <td class="mdl-color--primary-contrast mdl-color-text--primary">mdl-color-text--primary</td>
+ </tr>
+ <tr>
+ <th class="mdl-typography--caption-color-contrast">accent</th>
+ <td class="mdl-color--accent-contrast mdl-color-text--accent">mdl-color--accent-contrast mdl-color-text--accent</td>
+ </tr>
+ </table>
+ </section>
+
+ <section>
+ <h1>Base font</h1>
+
+ <p>Material Design Lite start’s with a base font of</p>
+ <ul>
+ <li>A size of 14px</li>
+ <li>A weight of 400</li>
+ <li>A line height of 20px</li>
+ </ul>
+
+ <p class="mdl-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</p>
+ <p class="mdl-typography--body-1-force-preferred-font">Regular 14px (Device), Regular 13px (Desktop)</p>
+ <p class="mdl-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</p>
+ <p class="mdl-typography--body-2-color-contrast">Body with color contrast</p>
+ <p class="mdl-typography--body-2-force-preferred-font">Medium 14px (Device), Medium 13px (Desktop)</p>
+ <p><a href="#" onclick="return false">An anchor</a></p>
+
+ <h1>Headings</h1>
+ <h1>h1 (56px) <small>Subtitle</small></h1>
+ <h2>h2 (45px) <small>Subtitle</small></h2>
+ <h3>h3 (34px) <small>Subtitle</small></h3>
+ <h4>h4 (24px) <small>Subtitle</small></h4>
+ <h5>h5 (20px) <small>Subtitle</small></h5>
+ <h6>h6 (16px) <small>Subtitle</small></h6>
+ </section>
+
+
+ <!-- textfields -->
+ <section class = "textfield-demo-container">
+
+ <div class="mdl-grid mdl-grid--no-spacing">
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield">
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a programming language" required>
+ <label class="mdl-textfield__label">Programming Language</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+ <label class="mdl-textfield__label">Number...</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label">
+ <label class="mdl-button mdl-js-button mdl-button--icon" for="mdl-expandable-demo1">
+ <i class="material-icons">search</i>
+ </label>
+ <div class="mdl-textfield__expandable-holder">
+ <input class="mdl-textfield__input" type="text" name="q" value="" id="mdl-expandable-demo1" pattern=".{3,}" />
+ <label class="mdl-textfield__label" for="mdl-expandable-demo1">Expandable Input</label>
+ </div>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--8-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--full-width mdl-textfield--floating-label">
+ <textarea class="mdl-textfield__input" rows= "3"></textarea>
+ <label class="mdl-textfield__label">Text lines...</label>
+ </div>
+ </div>
+
+ </div>
+
+ </section>
+
+
+ <!-- Selectfield -->
+ <section style="margin-bottom: 16px;">
+ <div class="mdl-grid mdl-grid--no-spacing">
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield">
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select" disabled>
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+ </div>
+ </section>
+
+
+
+ <!-- bordered fields -->
+ <section class="mdlext-bordered-fields" style="margin-top:16px;">
+
+ <div class="mdl-grid mdl-grid--no-spacing">
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" list="languages" placeholder="Select a language" required>
+ <label class="mdl-textfield__label">Programming language</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?">
+ <label class="mdl-textfield__label">Numeric with floating label</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+ <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" disabled value="123">
+ <label class="mdl-textfield__label" >Disabled floating label</label>
+ <span class="mdl-textfield__error">Input is not a number!</span>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right ">
+ <input class="mdl-textfield__input" type="text" id="uploadfile33" readonly>
+ <label class="mdl-textfield__label">File (work in progress)</label>
+
+ <label class="mdl-button mdl-js-button mdl-button--primary mdl-button--icon mdl-button--file" for="uploadfile33">
+ <i class="material-icons">attach_file</i>
+ <input type="file" id="uploadBtn33">
+ </label>
+ </div>
+ <!--
+ // Need a script to work properly - something like this
+ -->
+ <script>
+ (function() {
+ 'use strict';
+ document.querySelector('#uploadBtn33').addEventListener('change', function() {
+ var n = document.querySelector("#uploadfile33");
+ n.value = this.files[0].name;
+ n.parentNode.classList.add('is-dirty');
+ });
+ }());
+ </script>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text" disabled>
+ <label class="mdl-textfield__label">Text, disabled</label>
+ <i class="material-icons">fingerprint</i>
+ </div>
+ </div>
+
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </div>
+
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
+ <select class="mdlext-selectfield__select" disabled>
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+ <select class="mdlext-selectfield__select">
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label mdlext-bordered-fields__icon-left">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+ <select class="mdlext-selectfield__select" disabled>
+ <option value=""></option>
+ <option value="option1">option 1</option>
+ <option value="option2">option 2</option>
+ <option value="option3">option 3</option>
+ <option value="option4">option 4</option>
+ <option value="option5">option 5</option>
+ </select>
+ <label class="mdlext-selectfield__label">Profession</label>
+ </div>
+ </div>
+
+
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-right">
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ <i class="material-icons">fingerprint</i>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ <i class="material-icons">fingerprint</i>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">phone</i>
+ </label>
+
+ <input class="mdl-textfield__input" type="text" disabled>
+ <label class="mdl-textfield__label">Text...</label>
+
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col">
+ <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdlext-bordered-fields__icon-left mdlext-bordered-fields__icon-right">
+ <i class="material-icons">radio</i>
+ <input class="mdl-textfield__input" type="text">
+ <label class="mdl-textfield__label">Text...</label>
+ <label class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">settings_voice</i>
+ </label>
+ </div>
+ </div>
+
+ </div>
+
+ </section>
+
+
+ <!-- Badges -->
+ <section style="margin-top:16px">
+ <div class="mdl-grid demo-badge-grid">
+ <div class="mdl-cell mdl-cell--2-col">
+ <span class="mdl-badge" data-badge="4">Inbox</span>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <span class="material-icons mdl-badge" data-badge="1">account_box</span>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <span class="mdl-badge" data-badge="♥">Mood</span>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <span class="material-icons mdl-badge" data-badge="♥">account_box</span>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <a href="#" onclick="return false" class="mdl-badge" data-badge="5">Inbox</a>
+ </div>
+ </div>
+ </section>
+
+ <!-- Buttons -->
+ <section>
+ <div class="mdl-grid demo-button-grid">
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab">
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab" disabled>
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab" disabled>
+ <i class="material-icons">add</i>
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised">
+ Raised
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+ Disabled
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+ Colored
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
+ Accent
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
+ <i class="material-icons">settings</i> Settings
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect animated bounce">
+ <i class="material-icons">favorite</i> Fav
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button">
+ Flat
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button" disabled>
+ Disabled
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--primary">
+ Colored
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--accent">
+ Accent
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button">
+ <i class="material-icons">snooze</i> Ring, ring...
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">mood</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
+ <i class="material-icons">mood</i>
+ </button>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--fab mdl-color--lime mdl-button--accent">
+ <i class="material-icons">cloud</i>
+ </button>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col mdl-cell--middle">
+ <button class="mdl-button mdl-js-button mdl-button--raised mdl-color--deep-orange-100 mdl-js-ripple-effect">
+ <i class="material-icons">settings</i> Settings
+ </button>
+ </div>
+ </div>
+ </section>
+
+
+ <!-- Toggles -->
+ <section>
+ <div class="mdl-grid demo-toggle-grid">
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-checkbox__input" checked>
+ <span class="mdl-checkbox__label">Checkbox</span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-checkbox__input">
+ <span class="mdl-checkbox__label">Checkbox</span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-checkbox__input" checked disabled>
+ <span class="mdl-checkbox__label">Checkbox</span>
+ </label>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+ <input type="radio" class="mdl-radio__button" name="options" value="1" checked>
+ <span class="mdl-radio__label">First</span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+ <input type="radio" class="mdl-radio__button" name="options" value="2">
+ <span class="mdl-radio__label">Second</span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
+ <input type="radio" class="mdl-radio__button" name="options" value="3" disabled>
+ <span class="mdl-radio__label">Third</span>
+ </label>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-icon-toggle__input" checked>
+ <i class="mdl-icon-toggle__label material-icons">format_bold</i>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-icon-toggle__input">
+ <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-icon-toggle__input" disabled>
+ <i class="mdl-icon-toggle__label material-icons">format_italic</i>
+ </label>
+ </div>
+
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-switch__input" checked>
+ <span class="mdl-switch__label"></span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-switch__input">
+ <span class="mdl-switch__label"></span>
+ </label>
+ </div>
+ <div class="mdl-cell mdl-cell--2-col">
+ <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+ <input type="checkbox" class="mdl-switch__input" disabled>
+ <span class="mdl-switch__label"></span>
+ </label>
+ </div>
+ </div>
+ </section>
+
+
+ <!-- Sliders -->
+ <section>
+ <div class="mdl-grid demo-slider-grid">
+ <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
+ <!-- Default Slider -->
+ <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0">
+ </div>
+
+ <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-phone">
+ <!-- Slider with Starting Value -->
+ <input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25">
+ </div>
+ </div>
+ </section>
+
+
+ <!-- Data table -->
+ <section>
+ <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
+ <thead>
+ <tr>
+ <th class="mdl-data-table__cell--non-numeric">Materials</th>
+ <th>Quantity</th>
+ <th>Unit price</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
+ <td>25</td>
+ <td>$2.90</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
+ <td>50</td>
+ <td>$1.25</td>
+ </tr>
+ <tr>
+ <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
+ <td>10</td>
+ <td>$2.35</td>
+ </tr>
+ </tbody>
+ </table>
+ </section>
+
+
+ <!-- Menu -->
+ <!--
+ <section>
+ <div class="demo-menu demo-menu__lower-left">
+ <div class="demo-menu-container mdl-shadow--2dp mdl-color--primary-dark mdl-color-text--primary-contrast">
+ <div class="demo-menu-bar">
+ <button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+ </button>
+ <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+ </ul>
+
+ <span>Menu lower left</span>
+
+ </div>
+ <div class="demo-menu-background-light"></div>
+ </div>
+ </div>
+ </section>
+ -->
+
+ <!-- Menu button -->
+ <section style="padding-bottom:16px">
+ <h4>Menu button</h4>
+ <button class="mdl-button mdl-button--raised mdl-js-ripple-effect mdl-js-button mdlext-js-menu-button">
+ <i class="material-icons">gesture</i>
+ <span class="mdlext-menu-button__caption">Select</span>
+ <i class="material-icons mdlext-aria-expanded-more-less"></i>
+ </button>
+ <ul class="mdlext-menu" hidden >
+ <li class="mdlext-menu__item">
+ <i class="material-icons md-18">info</i>
+ <span class="mdlext-menu__item__caption">Menu item #1</span>
+ </li>
+ <li class="mdlext-menu__item">
+ <i class="material-icons md-18">help_outline</i>
+ <span class="mdlext-menu__item__caption">Menu item #2. A long text to check ellipsis overflow 0123456789</span>
+ <i class="material-icons md-18">radio</i>
+ </li>
+ <li class="mdlext-menu__item-separator"></li>
+ <li class="mdlext-menu__item" disabled>
+ <span class="mdlext-menu__item__caption">Menu item #3, disabled</span>
+ <i class="material-icons md-18">accessibility</i>
+ </li>
+ <li class="mdlext-menu__item-separator"></li>
+ <li class="mdlext-menu__item">
+ <span class="mdlext-menu__item__caption">Menu item #IV</span>
+ <i class="material-icons md-18">build</i>
+ </li>
+ <li class="mdlext-menu__item">
+ <span class="mdlext-menu__item__caption">Menu item #V</span>
+ <i class="material-icons md-18">build</i>
+ </li>
+ <li class="mdlext-menu__item-separator"></li>
+ <li class="mdlext-menu__item">
+ <span class="mdlext-menu__item__caption">Menu item #VI</span>
+ <i class="material-icons md-18">build</i>
+ </li>
+ <li class="mdlext-menu__item">
+ <span class="mdlext-menu__item__caption">Menu item #VII</span>
+ <i class="material-icons md-18">build</i>
+ </li>
+ <li class="mdlext-menu__item">
+ Menu item #n
+ </li>
+ </ul>
+ </section>
+
+</div>
+
+