diff --git a/docs/content/Theming/02_using_themes.md b/docs/content/Theming/02_using_themes.md index 4019a5606d0..07e61e6f00c 100644 --- a/docs/content/Theming/02_using_themes.md +++ b/docs/content/Theming/02_using_themes.md @@ -68,9 +68,20 @@ Individual components can also override the inherited theme: progress bars themed +### Watching Themes To optimize performance, themable components do not watch a theme after it is set. This means, that if your theme is assigned dynamically, the component will not update to reflect it. If you have a dynamic attribute (ie. interpolated) for a theme, you will want to use the attribute `md-theme-watch="true"` on the relevant components so that it will watch the theme for changes. For an example of this see [this plunkr](http://plnkr.co/edit/0Ga0BSJgjGIiEMVXgWJd?p=preview). + +If you would like themable directives to *always* watch for theme changes by +default, and are willing to take a performance hit for it, you may configure +this default behavior by enabling it on `$mdThemingProvider`. + + +app.config(function($mdThemingProvider) { + $mdThemingProvider.alwaysWatchTheme(true); +}); + diff --git a/src/services/theming/theming.js b/src/services/theming/theming.js index dd6b98fe194..dc847c89b60 100644 --- a/src/services/theming/theming.js +++ b/src/services/theming/theming.js @@ -1,7 +1,7 @@ /* * @ngdoc module * @name material.services.theming - * @description InterimElement + * @description Used to provide theming to angular-material directives */ angular.module('material.services.theming', [ @@ -18,13 +18,33 @@ angular.module('material.services.theming', [ Theming ]); -/* +/** * @ngdoc provider + * @name $mdThemingProvider + * + * @description Provider to configure the `$mdTheming` service. + */ + +/** + * @ngdoc method + * @name $mdThemingProvider#setDefaultTheme + * @param {string} themeName Default theme name to be applied to elements. Default value is `default`. + */ + +/** + * @ngdoc method + * @name $mdThemingProvider#alwaysWatchTheme + * @param {boolean} watch Whether or not to always watch themes for changes and re-apply + * classes when they change. Default is `false`. Enabling can reduce performance. + */ + +/** + * @ngdoc service * @name $mdTheming * * @description * - * Provider that makes an element apply theming related classes to itself. + * Service that makes an element apply theming related classes to itself. * * ```js * app.directive('myFancyDirective', function($mdTheming) { @@ -37,17 +57,18 @@ angular.module('material.services.theming', [ * }); * ``` * @param {el=} element to apply theming to - * - * @returns {$$interimElement.$service} - * */ function Theming($injector) { var defaultTheme = 'default'; + var alwaysWatchTheme = false; return { setDefaultTheme: function(theme) { defaultTheme = theme; }, + alwaysWatchTheme: function(alwaysWatch) { + alwaysWatchTheme = alwaysWatch; + }, $get: ['$rootElement', '$rootScope', ThemingService] }; @@ -55,7 +76,8 @@ function Theming($injector) { applyTheme.inherit = function(el, parent) { var ctrl = parent.controller('mdTheme'); - if (angular.isDefined(el.attr('md-theme-watch'))) { + var attrThemeValue = el.attr('md-theme-watch'); + if ( (alwaysWatchTheme || angular.isDefined(attrThemeValue)) && attrThemeValue != 'false') { var deregisterWatch = $rootScope.$watch(function() { return ctrl && ctrl.$mdTheme || defaultTheme; }, changeTheme); diff --git a/src/services/theming/theming.spec.js b/src/services/theming/theming.spec.js index a971f74ff9b..408cd69c3df 100644 --- a/src/services/theming/theming.spec.js +++ b/src/services/theming/theming.spec.js @@ -79,6 +79,11 @@ describe('md-theme directive', function() { describe('md-themable directive', function() { beforeEach(module('material.services.theming')); + var $mdThemingProvider; + beforeEach(module('material.services.theming', function(_$mdThemingProvider_) { + $mdThemingProvider = _$mdThemingProvider_; + })); + it('should inherit parent theme', inject(function($compile, $rootScope) { var el = $compile('
')($rootScope); $rootScope.$apply(); @@ -106,4 +111,17 @@ describe('md-themable directive', function() { expect(el.children().hasClass('md-blue-theme')).toBe(false); expect(el.children().hasClass('md-red-theme')).toBe(true); })); + + it('should support watching parent theme by default', function() { + $mdThemingProvider.alwaysWatchTheme(true); + inject(function($rootScope, $compile, $mdTheming) { + $rootScope.themey = 'red'; + var el = $compile('
')($rootScope); + $rootScope.$apply(); + expect(el.children().hasClass('md-red-theme')).toBe(true); + $rootScope.$apply('themey = "blue"'); + expect(el.children().hasClass('md-blue-theme')).toBe(false); + expect(el.children().hasClass('md-red-theme')).toBe(true); + }); + }); }); diff --git a/themes/_default-theme.scss b/themes/_default-theme.scss new file mode 100644 index 00000000000..104ff34fd6f --- /dev/null +++ b/themes/_default-theme.scss @@ -0,0 +1,945 @@ +$color-red: ( + '50': #fde0dc, + '100': #f9bdbb, + '200': #f69988, + '300': #f36c60, + '400': #e84e40, + '500': #e51c23, + '600': #dd191d, + '700': #d01716, + '800': #c41411, + '900': #b0120a, + 'A100': #ff7997, + 'A200': #ff5177, + 'A400': #ff2d6f, + 'A700': #e00032 +); +$color-pink: ( + '50': #fce4ec, + '100': #f8bbd0, + '200': #f48fb1, + '300': #f06292, + '400': #ec407a, + '500': #e91e63, + '600': #d81b60, + '700': #c2185b, + '800': #ad1457, + '900': #880e4f, + 'A100': #ff80ab, + 'A200': #ff4081, + 'A400': #f50057, + 'A700': #c51162, +); +$color-purple: ( + '50': #f3e5f5, + '100': #e1bee7, + '200': #ce93d8, + '300': #ba68c8, + '400': #ab47bc, + '500': #9c27b0, + '600': #8e24aa, + '700': #7b1fa2, + '800': #6a1b9a, + '900': #4a148c, + 'A100': #ea80fc, + 'A200': #e040fb, + 'A400': #d500f9, + 'A700': #aa00ff +); +$color-deep-purple: ( + '50': #ede7f6, + '100': #d1c4e9, + '200': #b39ddb, + '300': #9575cd, + '400': #7e57c2, + '500': #673ab7, + '600': #5e35b1, + '700': #512da8, + '800': #4527a0, + '900': #311b92, + 'A100': #b388ff, + 'A200': #7c4dff, + 'A400': #651fff, + 'A700': #6200ea +); +$color-indigo: ( + '50': #e8eaf6, + '100': #c5cae9, + '200': #9fa8da, + '300': #7986cb, + '400': #5c6bc0, + '500': #3f51b5, + '600': #3949ab, + '700': #303f9f, + '800': #283593, + '900': #1a237e, + 'A100': #8c9eff, + 'A200': #536dfe, + 'A400': #3d5afe, + 'A700': #304ffe +); +$color-blue: ( + '50': #e7e9fd, + '100': #d0d9ff, + '200': #afbfff, + '300': #91a7ff, + '400': #738ffe, + '500': #5677fc, + '600': #4e6cef, + '700': #455ede, + '800': #3b50ce, + '900': #2a36b1, + 'A100': #a6baff, + 'A200': #6889ff, + 'A400': #4d73ff, + 'A700': #4d69ff +); +$color-light-blue: ( + '50': #e1f5fe, + '100': #b3e5fc, + '200': #81d4fa, + '300': #4fc3f7, + '400': #29b6f6, + '500': #03a9f4, + '600': #039be5, + '700': #0288d1, + '800': #0277bd, + '900': #01579b, + 'A100': #80d8ff, + 'A200': #40c4ff, + 'A400': #00b0ff, + 'A700': #0091ea +); +$color-cyan: ( + '50': #e0f7fa, + '100': #b2ebf2, + '200': #80deea, + '300': #4dd0e1, + '400': #26c6da, + '500': #00bcd4, + '600': #00acc1, + '700': #0097a7, + '800': #00838f, + '900': #006064, + 'A100': #84ffff, + 'A200': #18ffff, + 'A400': #00e5ff, + 'A700': #00b8d4 +); +$color-teal: ( + '50': #e0f2f1, + '100': #b2dfdb, + '200': #80cbc4, + '300': #4db6ac, + '400': #26a69a, + '500': #009688, + '600': #00897b, + '700': #00796b, + '800': #00695c, + '900': #004d40, + 'A100': #a7ffeb, + 'A200': #64ffda, + 'A400': #1de9b6, + 'A700': #00bfa5 +); +$color-green: ( + '50': #d0f8ce, + '100': #a3e9a4, + '200': #72d572, + '300': #42bd41, + '400': #2baf2b, + '500': #259b24, + '600': #0a8f08, + '700': #0a7e07, + '800': #056f00, + '900': #0d5302, + 'A100': #a2f78d, + 'A200': #5af158, + 'A400': #14e715, + 'A700': #12c700 +); +$color-light-green: ( + '50': #f1f8e9, + '100': #dcedc8, + '200': #c5e1a5, + '300': #aed581, + '400': #9ccc65, + '500': #8bc34a, + '600': #7cb342, + '700': #689f38, + '800': #558b2f, + '900': #33691e, + 'A100': #ccff90, + 'A200': #b2ff59, + 'A400': #76ff03, + 'A700': #64dd17 +); +$color-lime: ( + '50': #f9fbe7, + '100': #f0f4c3, + '200': #e6ee9c, + '300': #dce775, + '400': #d4e157, + '500': #cddc39, + '600': #c0ca33, + '700': #afb42b, + '800': #9e9d24, + '900': #827717, + 'A100': #f4ff81, + 'A200': #eeff41, + 'A400': #c6ff00, + 'A700': #aeea00 +); +$color-yellow: ( + '50': #fffde7, + '100': #fff9c4, + '200': #fff59d, + '300': #fff176, + '400': #ffee58, + '500': #ffeb3b, + '600': #fdd835, + '700': #fbc02d, + '800': #f9a825, + '900': #f57f17, + 'A100': #ffff8d, + 'A200': #ffff00, + 'A400': #ffea00, + 'A700': #ffd600 +); +$color-amber: ( + '50': #fff8e1, + '100': #ffecb3, + '200': #ffe082, + '300': #ffd54f, + '400': #ffca28, + '500': #ffc107, + '600': #ffb300, + '700': #ffa000, + '800': #ff8f00, + '900': #ff6f00, + 'A100': #ffe57f, + 'A200': #ffd740, + 'A400': #ffc400, + 'A700': #ffab00 +); +$color-orange: ( + '50': #fff3e0, + '100': #ffe0b2, + '200': #ffcc80, + '300': #ffb74d, + '400': #ffa726, + '500': #ff9800, + '600': #fb8c00, + '700': #f57c00, + '800': #ef6c00, + '900': #e65100, + 'A100': #ffd180, + 'A200': #ffab40, + 'A400': #ff9100, + 'A700': #ff6d00 +); +$color-deep-orange: ( + '50': #fbe9e7, + '100': #ffccbc, + '200': #ffab91, + '300': #ff8a65, + '400': #ff7043, + '500': #ff5722, + '600': #f4511e, + '700': #e64a19, + '800': #d84315, + '900': #bf360c, + 'A100': #ff9e80, + 'A200': #ff6e40, + 'A400': #ff3d00, + 'A700': #dd2c00 +); +$color-brown: ( + '50': #efebe9, + '100': #d7ccc8, + '200': #bcaaa4, + '300': #a1887f, + '400': #8d6e63, + '500': #795548, + '600': #6d4c41, + '700': #5d4037, + '800': #4e342e, + '900': #3e2723 +); +$color-grey: ( + '0': #ffffff, + '50': #fafafa, + '100': #f5f5f5, + '200': #eeeeee, + '300': #e0e0e0, + '400': #bdbdbd, + '500': #9e9e9e, + '600': #757575, + '700': #616161, + '800': #424242, + '900': #212121, + '1000': #000000, + 'A100': #ffffff +); +$color-blue-grey: ( + '50': #eceff1, + '100': #cfd8dc, + '200': #b0bec5, + '300': #90a4ae, + '400': #78909c, + '500': #607d8b, + '600': #546e7a, + '700': #455a64, + '800': #37474f, + '900': #263238 +); +$theme-name: 'default' !default; +$font-family: 'RobotoDraft', 'Helvetica Neue', Helvetica, Arial !default; +$dark-theme: false !default; +$foreground-color-palette: $color-grey !default; +$foreground-base-color: map-get($foreground-color-palette, '1000') !default; +$foreground-primary-color: rgba($foreground-base-color, 0.73) !default; +$foreground-secondary-color: rgba($foreground-base-color, 0.54) !default; +$foreground-tertiary-color: rgba($foreground-base-color, 0.26) !default; +$foreground-quarternary-color: rgba($foreground-base-color, 0.12) !default; +$foreground-text-shadow: none !default; +$input-border-color: $foreground-secondary-color !default; +$input-disabled-border-color: $foreground-tertiary-color !default; +$background-color-palette: $color-grey !default; +$background-color-base: map-get($background-color-palette, 'A100') !default; +$primary-color-palette: $color-light-blue !default; +$warn-color-palette: $color-red !default; +$primary-color-palette-contrast-color: white !default; +$baseline-grid: 8px !default; +$layout-breakpoint-sm: 600px !default; +$layout-breakpoint-md: 960px !default; +$layout-breakpoint-lg: 1200px !default; +$layout-gutter-width: ($baseline-grid * 2) !default; +$app-bar-height: 64px; +$toast-height: $baseline-grid * 3 !default; +$toast-margin: $baseline-grid * 1 !default; +$whiteframe-shadow-z1: 0px 2px 5px 0 rgba(0,0,0,0.26); +$whiteframe-zindex-z1: 1; +$whiteframe-shadow-z2: 0px 8px 17px rgba(0,0,0,0.2); +$whiteframe-zindex-z2: 2; +$whiteframe-shadow-z3: 0px 17px 50px rgba(0,0,0,0.19); +$whiteframe-zindex-z3: 3; +$whiteframe-shadow-z4: 0px 16px 28px 0 rgba(0,0,0,0.22); +$whiteframe-zindex-z4: 4; +$whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0,0,0,0.2); +$whiteframe-zindex-z5: 5; +$z-index-dialog: 10; +$z-index-toast: 9; +$z-index-sidenav: 8; +$z-index-backdrop: 7; +$z-index-tooltip: 6; +$z-index-fab: 2; +$z-index-bottom-sheet: $z-index-backdrop + 1; +$backdrop-color: rgba(0,0,0,0.3); +$bottom-sheet-color-palette: $background-color-palette !default; +$bottom-sheet-background-color: map-get($bottom-sheet-color-palette, '50') !default; +$bottom-sheet-border-top-color: map-get($bottom-sheet-color-palette, '400') !default; +$bottom-sheet-header-color: $foreground-secondary-color !default; +$bottom-sheet-list-color: $foreground-secondary-color !default; +$button-border-radius: 3px !default; +$button-fab-border-radius: 50% !default; +$button-primary-color-palette: $primary-color-palette !default; +$button-primary-color: map-get($button-primary-color-palette, '400') !default; +$button-primary-raised-color: $primary-color-palette-contrast-color !default; +$button-primary-raised-background-color: map-get($button-primary-color-palette, '500') !default; +$button-primary-raised-hover-background-color: map-get($button-primary-color-palette, '600') !default; +$button-warn-color-palette: $warn-color-palette !default; +$button-warn-color: map-get($button-warn-color-palette, '400') !default; +$button-warn-raised-color: $primary-color-palette-contrast-color !default; +$button-warn-raised-background-color: map-get($button-warn-color-palette, '500') !default; +$button-warn-raised-hover-background-color: map-get($button-warn-color-palette, '700') !default; +$button-flat-color-palette: $background-color-palette !default; +$button-disabled-color: map-get($button-flat-color-palette, '500') !default; +$button-disabled-background-color: rgba(map-get($button-flat-color-palette, '500'), 0.145) !default; +$button-hover-background-color: rgba(map-get($button-flat-color-palette, '500'), 0.20) !default; +$button-raised-color-palette: $button-flat-color-palette !default; +$button-raised-background-color: rgba(map-get($button-raised-color-palette, '500'), 0.185) !default; +$button-raised-hover-background-color: rgba(map-get($button-raised-color-palette, '500'), 0.30) !default; +$card-border-radius: 2px !default; +$checkbox-color-palette: $color-green !default; +$checkbox-checked-background-color: rgba(map-get($checkbox-color-palette, '400'), 0.87) !default; +$checkbox-checked-color: map-get($foreground-color-palette, '200') !default; +$checkbox-ripple-color: map-get($checkbox-color-palette, '600') !default; +$checkbox-checked-ripple-color: map-get($color-grey, '600') !default; +$checkbox-border-color: $input-border-color !default; +$checkbox-disabled-border-color: $input-disabled-border-color !default; +$content-background-color: $background-color-base !default; +$dialog-border-radius: 4px !default; +$dialog-color-palette: $background-color-palette !default; +$dialog-background-color: map-get($dialog-color-palette, 'A100') !default; +$dialog-border-color: rgba(map-get($dialog-color-palette, '1000'), 0.12) !default; +$divider-color: $foreground-quarternary-color !default; +$progress-circle-background: transparent !default; +$progress-circle-color: map-get($primary-color-palette, '500') !default; +$progress-circle-inset-color: $background-color-base !default; +$progress-linear-color-palette: $primary-color-palette !default; +$progress-linear-color: map-get($progress-linear-color-palette, '500') !default; +$progress-linear-alt-color: map-get($progress-linear-color-palette, '100') !default; +$radio-color-palette: $color-green !default; +$radio-on-background-color: rgba(map-get($radio-color-palette, '400'), 0.87) !default; +$radio-ripple-color: map-get($radio-color-palette, '600') !default; +$radio-off-border-color: $foreground-secondary-color !default; +$radio-group-focus-border-color: $foreground-primary-color !default; +$slider-color-palette: $primary-color-palette !default; +$slider-background-color: $foreground-tertiary-color !default; +$slider-track-color: map-get($slider-color-palette, '500') !default; +$slider-thumb-color: map-get($slider-color-palette, '500') !default; +$slider-sign-color: map-get($slider-color-palette, '500') !default; +$slider-sign-text-color: $primary-color-palette-contrast-color !default; +$slider-focus-thumb-color: $foreground-secondary-color !default; +$slider-focus-ring-color: $foreground-quarternary-color !default; +$slider-disabled-color: map-get($foreground-color-palette, '400') !default; +$subheader-color-palette: $primary-color-palette !default; +$subheader-text-color: $foreground-secondary-color !default; +$subheader-primary-text-color: map-get($subheader-color-palette, '500') !default; +$switch-color: $foreground-secondary-color !default; +$switch-focus-color: map-get($foreground-color-palette, '1000'); +$tabs-color-palette: $primary-color-palette !default; +$tabs-header-background-color: map-get($tabs-color-palette, '500') !default; +$tabs-inactive-color: map-get($tabs-color-palette, '100') !default; +$tabs-active-color: $primary-color-palette-contrast-color !default; +$tabs-disabled-color: $foreground-quarternary-color !default; +$tabs-focus-color: $foreground-primary-color !default; +$tabs-highlight-color: #ffff85; +$tff-focus-color: map-get($primary-color-palette, '500') !default; +$tff-text-color: $foreground-primary-color !default; +$tff-hint-small-color: mix($foreground-secondary-color, $foreground-tertiary-color, 40%) !default; +$tff-hint-color: $foreground-tertiary-color !default; +$tff-line-color: $foreground-quarternary-color !default; +$tff-disabled-line-color: mix($foreground-tertiary-color, $foreground-quarternary-color) !default; +$tff-disabled-color: $foreground-quarternary-color !default; +$toast-background-color: #323232 !default; +$toast-text-color: white !default; +$toast-action-color: map-get($primary-color-palette, 'A200') !default; +$toolbar-background-color: map-get($primary-color-palette, '500') !default; +$toolbar-text-color: $primary-color-palette-contrast-color; +$tooltip-color: map-get($foreground-color-palette, 'A100') !default; +$tooltip-background-color: rgba(black, 0.52); + +// Pink +// ---------------------------- + + +// Purple +// ---------------------------- + + + +// Deep Purple +// ---------------------------- + + +// Indigo +// ---------------------------- + + + +// Blue +// ---------------------------- + + + +// Light Blue +// ---------------------------- + + + +// Cyan +// ---------------------------- + + + +// Teal +// ---------------------------- + + + +// Green +// ---------------------------- + + + +// Light Green +// ---------------------------- + + + +// Lime +// ---------------------------- + + + +// Yellow +// ---------------------------- + + +// Amber +// ---------------------------- + + + +// Orange +// ---------------------------- + + + +// Deep Orange +// ---------------------------- + + + +// Brown +// ---------------------------- + + + +// Grey +// ---------------------------- + +// Blue Grey +// ---------------------------- + + +// Font Variables + + + + + + +// Layout +// ------------------------------ + + + +// App bar variables + + +// Whiteframes + + + + +// Z-indexes +//-------------------------------------------- + + +@mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) { + -webkit-margin-before: $before; + -webkit-margin-after: $after; + -webkit-margin-start: $start; + -webkit-margin-end: $end; +} + +@mixin not-selectable($value:none) { + user-select: $value; +} + +@mixin input-placeholder($color) { + &:-ms-input-placeholder { + color: $color; + } + &::-webkit-input-placeholder { + color: $color; + } +} + + +md-backdrop.md-opaque.md-#{$theme-name}-theme { + background-color: $backdrop-color; +} + + +md-bottom-sheet.md-#{$theme-name}-theme { + background-color: $bottom-sheet-background-color; + border-top-color: $bottom-sheet-border-top-color; + + &.md-list { + md-item { + color: $bottom-sheet-list-color; + } + } + + .md-subheader { + background-color: $bottom-sheet-background-color; + } + + .md-subheader { + color: $bottom-sheet-header-color; + } +} + + + + + + +md-button.md-#{$theme-name}-theme { + border-radius: $button-border-radius; + + &[disabled] { + background-color: $button-disabled-background-color !important; + color: $button-disabled-color !important; + fill: $button-disabled-color !important; + cursor: auto; + } + + &:not([disabled]) { + &:hover, &.focus { + background-color: $button-hover-background-color; + } + } + + &.md-fab { + border-radius: $button-fab-border-radius; + } + + &.md-primary { + color: $button-primary-color; + fill: $button-primary-color; + } + + &.md-warn { + color: $button-warn-color; + fill: $button-warn-color; + } + + &.md-raised, &.md-fab { + background-color: $button-raised-background-color; + + &:not([disabled]) { + &:hover, &.focus { + background-color: $button-raised-hover-background-color; + } + } + + &.md-primary { + color: $button-primary-raised-color; + background-color: $button-primary-raised-background-color; + &:not([disabled]) { + &:hover, &.focus { + background-color: $button-primary-raised-hover-background-color; + } + } + } + + &.md-warn { + color: $button-warn-raised-color; + background-color: $button-warn-raised-background-color; + &:not([disabled]) { + &:hover, &.focus { + background-color: $button-warn-raised-hover-background-color; + } + } + } + } +} + + +md-card.md-#{$theme-name}-theme { + border-radius: $card-border-radius; + + .md-card-image { + border-radius: $card-border-radius $card-border-radius 0 0; + } +} + + +md-checkbox.md-#{$theme-name}-theme { + + .md-ripple { + color: $checkbox-ripple-color; + } + + &.md-checked .md-ripple { + color: $checkbox-checked-ripple-color; + } + + .md-icon { + border-color: $checkbox-border-color; + } + + &.md-checked .md-icon { + background-color: $checkbox-checked-background-color; + } + + &.md-checked .md-icon:after { + border-color: $checkbox-checked-color; + } + + &[disabled] { + .md-icon { + border-color: $checkbox-disabled-border-color; + } + + &.md-checked .md-icon { + background-color: $checkbox-disabled-border-color; + } + } +} + + +md-content.md-#{$theme-name}-theme { + background-color: $content-background-color; +} + + +md-dialog.md-#{$theme-name}-theme { + border-radius: $dialog-border-radius; + background-color: $dialog-background-color; + + &.md-content-overflow .md-actions { + border-top-color: $dialog-border-color; + } +} + + + +md-divider.md-#{$theme-name}-theme { + border-top-color: $divider-color; +} + + +md-progress-circular.md-#{$theme-name}-theme { + background-color: $progress-circle-background; + .md-circle .md-mask .md-fill { + background-color: $progress-circle-color; + } + + .md-inset { + background-color: $progress-circle-inset-color; + } +} + + +md-progress-linear.md-#{$theme-name}-theme { + .md-container { + background-color: $progress-linear-alt-color; + } + + .md-bar { + background-color: $progress-linear-color; + } + + &[mode=buffer] { + .md-dashed:before { + background: radial-gradient($progress-linear-alt-color 0%, $progress-linear-alt-color 16%, transparent 42%); + } + .md-bar1 { + background-color: $progress-linear-alt-color; + } + } +} + + +md-radio-button.md-#{$theme-name}-theme, +md-switch.md-#{$theme-name}-theme .md-switch-thumb { + .md-container .md-ripple { + color: $radio-ripple-color; + } + + .md-off { + border-color: $radio-off-border-color; + } + + + .md-on { + background-color: $radio-on-background-color; + } + + &.md-checked .md-off { + border-color: $radio-on-background-color; + } + + &.md-checked .md-ink-ripple { + color: $radio-on-background-color; + } +} + +md-radio-group.md-#{$theme-name}-theme:focus { + border-color: $radio-group-focus-border-color; +} + + +md-slider.md-#{$theme-name}-theme { + .md-track { + background-color: $slider-background-color; + } + + .md-track-fill { + background-color: $slider-track-color; + } + + .md-thumb:after { + border-color: $slider-thumb-color; + background-color: $slider-thumb-color; + } + + .md-sign { + background-color: $slider-sign-color; + + &:after { + border-top-color: $slider-sign-color; + } + } + + .md-thumb-text { + color: $slider-sign-text-color; + } + + .md-focus-thumb { + background-color: $slider-focus-thumb-color; + } + + .md-focus-ring { + border-color: $slider-focus-ring-color; + } + + .md-disabled-thumb { + border-color: $background-color-base; + } + + &.md-min .md-thumb:after { + background-color: $background-color-base; + } + + &[disabled] { + .md-thumb:after { + border-color: $slider-disabled-color; + } + &:not(.md-min) .md-thumb:after { + background-color: $slider-disabled-color; + } + } +} + + +.md-subheader.md-#{$theme-name}-theme { + color: $subheader-text-color; + background-color: $background-color-base; + + &.md-primary { + color: $subheader-primary-text-color; + } +} + + +md-switch.md-#{$theme-name}-theme { + .md-switch-bar { + background-color: $switch-color; + } + .md-switch-thumb { + &:focus .md-label { + border: 1px dotted black; + } + } +} + + +md-tabs.md-#{$theme-name}-theme { + .md-header { + background-color: $tabs-header-background-color; + } + + md-tabs-ink-bar { + background: $tabs-highlight-color; + } + + md-tab { + color: $tabs-inactive-color; + &.active { + color: $tabs-active-color; + } + &[disabled] { + color: $tabs-disabled-color; + } + &:focus { + border-color: $tabs-focus-color; + } + + .md-ripple-container { + color: $tabs-highlight-color; + } + } +} + + +md-input-group.md-#{$theme-name}-theme { + input, textarea { + text-shadow: $foreground-text-shadow; + @include input-placeholder($tff-hint-color); + } + + label { + text-shadow: $foreground-text-shadow; + color: $tff-hint-color; + } + + input, textarea { + color: $tff-text-color; + border-color: $tff-line-color; + } + + &.md-input-focused { + input, textarea { + border-color: $tff-focus-color; + } + label { + color: $tff-focus-color; + } + &.md-input-has-value { + @if $dark-theme { + label { + color: lighten($tff-focus-color, 10%); + } + } + } + } + + &.md-input-has-value:not(.md-input-focused) { + label { + color: $tff-hint-small-color; + } + } + + &[disabled] { + input, textarea { + border-bottom-color: $tff-disabled-color; + color: $tff-hint-color; + background-image: linear-gradient(to right, $tff-disabled-line-color 0%, $tff-disabled-line-color 50%, rgba(0, 0, 0, 0) 0%); + } + } +} + + +md-toast.md-#{$theme-name}-theme { + background-color: $toast-background-color; + color: $toast-text-color; + + md-button { + color: $toast-text-color; + } + + .md-action { + color: $toast-action-color; + } +} + + +md-toolbar.md-#{$theme-name}-theme { + background-color: $toolbar-background-color; + color: $primary-color-palette-contrast-color; +} + + +md-tooltip.md-#{$theme-name}-theme { + color: $tooltip-color; + .md-background { + background-color: $tooltip-background-color; + } +}