-
{checked,indeterminate}.
- */
+// Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.
@keyframes md-checkbox-fade-in-background {
0% {
opacity: 0;
@@ -37,9 +29,7 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
}
}
-/**
- * Fades out the background of the checkbox when it goes from {checked,indeterminate} -> unchecked.
- */
+// Fades out the background of the checkbox when it goes from {checked,indeterminate} -> unchecked.
@keyframes md-checkbox-fade-out-background {
0%, 50% {
opacity: 1;
@@ -50,9 +40,7 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
}
}
-/**
- * "Draws" in the checkmark when the checkbox goes from unchecked -> checked.
- */
+// "Draws" in the checkmark when the checkbox goes from unchecked -> checked.
@keyframes md-checkbox-unchecked-checked-checkmark-path {
0%, 50% {
stroke-dashoffset: $_md-checkbox-mark-path-length;
@@ -67,9 +55,7 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
}
}
-/**
- * Horizontally expands the mixedmark when the checkbox goes from unchecked -> indeterminate.
- */
+// Horizontally expands the mixedmark when the checkbox goes from unchecked -> indeterminate.
@keyframes md-checkbox-unchecked-indeterminate-mixedmark {
0%, 68.2% {
transform: scaleX(0);
@@ -84,9 +70,7 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
}
}
-/**
- * "Erases" the checkmark when the checkbox goes from checked -> unchecked.
- */
+// "Erases" the checkmark when the checkbox goes from checked -> unchecked.
@keyframes md-checkbox-checked-unchecked-checkmark-path {
from {
animation-timing-function: $md-fast-out-linear-in-timing-function;
@@ -98,10 +82,9 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
}
}
-/**
- * Rotates and fades out the checkmark when the checkbox goes from checked -> indeterminate. This
- * animation helps provide the illusion of the checkmark "morphing" into the mixedmark.
- */
+
+// Rotates and fades out the checkmark when the checkbox goes from checked -> indeterminate. This
+// animation helps provide the illusion of the checkmark "morphing" into the mixedmark.
@keyframes md-checkbox-checked-indeterminate-checkmark {
from {
animation-timing-function: $md-linear-out-slow-in-timing-function;
@@ -115,11 +98,9 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
}
}
-/**
- * Rotates and fades the checkmark back into position when the checkbox goes from indeterminate ->
- * checked. This animation helps provide the illusion that the mixedmark is "morphing" into the
- * checkmark.
- */
+// Rotates and fades the checkmark back into position when the checkbox goes from indeterminate ->
+// checked. This animation helps provide the illusion that the mixedmark is "morphing" into the
+// checkmark.
@keyframes md-checkbox-indeterminate-checked-checkmark {
from {
animation-timing-function: $_md-checkbox-indeterminate-checked-easing-function;
@@ -133,11 +114,9 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
}
}
-/**
- * Rotates and fades in the mixedmark when the checkbox goes from checked -> indeterminate. This
- * animation, similar to md-checkbox-checked-indeterminate-checkmark, helps provide an illusion
- * of "morphing" from checkmark -> mixedmark.
- */
+// Rotates and fades in the mixedmark when the checkbox goes from checked -> indeterminate. This
+// animation, similar to md-checkbox-checked-indeterminate-checkmark, helps provide an illusion
+// of "morphing" from checkmark -> mixedmark.
@keyframes md-checkbox-checked-indeterminate-mixedmark {
from {
animation-timing-function: $md-linear-out-slow-in-timing-function;
@@ -151,11 +130,9 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
}
}
-/**
- * Rotates and fades out the mixedmark when the checkbox goes from indeterminate -> checked. This
- * animation, similar to md-checkbox-indeterminate-checked-checkmark, helps provide an illusion
- * of "morphing" from mixedmark -> checkmark.
- */
+// Rotates and fades out the mixedmark when the checkbox goes from indeterminate -> checked. This
+// animation, similar to md-checkbox-indeterminate-checked-checkmark, helps provide an illusion
+// of "morphing" from mixedmark -> checkmark.
@keyframes md-checkbox-indeterminate-checked-mixedmark {
from {
animation-timing-function: $_md-checkbox-indeterminate-checked-easing-function;
@@ -169,10 +146,9 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
}
}
-/**
- * Horizontally collapses and fades out the mixedmark when the checkbox goes from indeterminate ->
- * unchecked.
- */
+
+// Horizontally collapses and fades out the mixedmark when the checkbox goes from indeterminate ->
+// unchecked.
@keyframes md-checkbox-indeterminate-unchecked-mixedmark {
0% {
animation-timing-function: linear;
@@ -186,9 +162,7 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
}
}
-/**
- * Applied to elements that cover the checkbox's entire inner container.
- */
+// Applied to elements that cover the checkbox's entire inner container.
%md-checkbox-cover-element {
bottom: 0;
left: 0;
@@ -197,19 +171,15 @@ $_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1)
top: 0;
}
-/**
- * Applied to elements that are considered "marks" within the checkbox, e.g. the checkmark and
- * the mixedmark.
- */
+// Applied to elements that are considered "marks" within the checkbox, e.g. the checkmark and
+// the mixedmark.
%md-checkbox-mark {
$width-padding-inset: 2 * $md-checkbox-border-width;
width: calc(100% - #{$width-padding-inset});
}
-/**
- * Applied to elements that appear to make up the outer box of the checkmark, such as the frame
- * that contains the border and the actual background element that contains the marks.
- */
+// Applied to elements that appear to make up the outer box of the checkmark, such as the frame
+// that contains the border and the actual background element that contains the marks.
%md-checkbox-outer-box {
@extend %md-checkbox-cover-element;
border-radius: 2px;
@@ -258,7 +228,7 @@ md-checkbox {
@extend %md-checkbox-outer-box;
background-color: transparent;
- border: $md-checkbox-border-width solid $md-checkbox-border-color;
+ border: $md-checkbox-border-width solid;
transition: border-color $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function;
will-change: border-color;
}
@@ -279,14 +249,10 @@ md-checkbox {
@extend %md-checkbox-cover-element;
@extend %md-checkbox-mark;
- fill: $md-checkbox-mark-color;
width: 100%;
}
.md-checkbox-checkmark-path {
- // !important is needed here because a stroke must be set as an attribute on the SVG in order
- // for line animation to work properly.
- stroke: $md-checkbox-mark-color !important;
stroke: {
dashoffset: $_md-checkbox-mark-path-length;
dasharray: $_md-checkbox-mark-path-length;
@@ -297,7 +263,6 @@ md-checkbox {
.md-checkbox-mixedmark {
@extend %md-checkbox-mark;
- background-color: $md-checkbox-mark-color;
height: floor($md-checkbox-mark-stroke-size);
opacity: 0;
transform: scaleX(0) rotate(0deg);
@@ -332,17 +297,9 @@ md-checkbox {
.md-checkbox-mixedmark {
transform: scaleX(1) rotate(-45deg);
}
-
- .md-checkbox-background {
- background-color: $md-checkbox-background-color;
- }
}
.md-checkbox-indeterminate {
- .md-checkbox-background {
- background-color: $md-checkbox-background-color;
- }
-
.md-checkbox-checkmark {
opacity: 0;
transform: rotate(45deg);
@@ -366,28 +323,7 @@ md-checkbox {
}
.md-checkbox-disabled {
- // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
- // this does not work well with elements layered on top of one another. To get around this we
- // blend the colors together based on the base color and the theme background.
- $white-30pct-opacity-on-dark-theme: #686868;
- $black-26pct-opacity-on-light-theme: #b0b0b0;
- $disabled-color: if(
- $md-is-dark-theme, $white-30pct-opacity-on-dark-theme, $black-26pct-opacity-on-light-theme);
-
cursor: default;
-
- &.md-checkbox-checked,
- &.md-checkbox-indeterminate {
- .md-checkbox-background {
- background-color: $disabled-color;
- }
- }
-
- &:not(.md-checkbox-checked) {
- .md-checkbox-frame {
- border-color: $disabled-color;
- }
- }
}
.md-checkbox-anim {
@@ -466,10 +402,4 @@ md-checkbox {
}
}
-// Underlying native input element.
-// Visually hidden but still able to respond to focus.
-.md-checkbox-input {
- @include md-visually-hidden;
-}
-
@include md-temporary-ink-ripple(checkbox);
diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss
new file mode 100644
index 000000000000..085bd883aed8
--- /dev/null
+++ b/src/lib/core/_core.scss
@@ -0,0 +1,27 @@
+// Core styles that can be used to apply material design treatments to any element.
+@import 'a11y/a11y';
+@import 'style/elevation';
+@import 'overlay/overlay';
+@import 'ripple/ripple';
+
+
+// Mixin that renders all of the core styles that are not theme-dependent.
+@mixin md-core() {
+ // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+ // `md-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
+ // elevated.
+ @for $zValue from 0 through 24 {
+ .md-elevation-z#{$zValue} {
+ @include md-elevation($zValue);
+ }
+ }
+
+ @include md-ripple();
+ @include md-a11y();
+ @include md-overlay();
+}
+
+// Mixin that renders all of the core styles that depend on the theme.
+@mixin md-core-theme($theme) {
+ @include md-ripple-theme($theme);
+}
diff --git a/src/lib/core/a11y/_a11y.scss b/src/lib/core/a11y/_a11y.scss
new file mode 100644
index 000000000000..f40820ec9aa9
--- /dev/null
+++ b/src/lib/core/a11y/_a11y.scss
@@ -0,0 +1,13 @@
+@mixin md-a11y {
+ .md-visually-hidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ text-transform: none;
+ width: 1px;
+ }
+}
diff --git a/src/lib/core/a11y/live-announcer.scss b/src/lib/core/a11y/live-announcer.scss
deleted file mode 100644
index 6ea7cfb6fa52..000000000000
--- a/src/lib/core/a11y/live-announcer.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import 'mixins';
-
-.md-live-announcer {
- @include md-visually-hidden();
-}
diff --git a/src/lib/core/a11y/live-announcer.spec.ts b/src/lib/core/a11y/live-announcer.spec.ts
index 12ff20474370..46b789d2ad25 100644
--- a/src/lib/core/a11y/live-announcer.spec.ts
+++ b/src/lib/core/a11y/live-announcer.spec.ts
@@ -92,7 +92,7 @@ describe('MdLiveAnnouncer', () => {
function getLiveElement(): Element {
- return document.body.querySelector('.md-live-announcer');
+ return document.body.querySelector('[aria-live]');
}
@Component({template: `
`})
diff --git a/src/lib/core/a11y/live-announcer.ts b/src/lib/core/a11y/live-announcer.ts
index fae1adb6b9b3..b327378d4bfc 100644
--- a/src/lib/core/a11y/live-announcer.ts
+++ b/src/lib/core/a11y/live-announcer.ts
@@ -43,7 +43,7 @@ export class MdLiveAnnouncer {
private _createLiveElement(): Element {
let liveEl = document.createElement('div');
- liveEl.classList.add('md-live-announcer');
+ liveEl.classList.add('md-visually-hidden');
liveEl.setAttribute('aria-atomic', 'true');
liveEl.setAttribute('aria-live', 'polite');
diff --git a/src/lib/core/overlay/overlay.scss b/src/lib/core/overlay/overlay.scss
index 473b7111539d..62be604429c3 100644
--- a/src/lib/core/overlay/overlay.scss
+++ b/src/lib/core/overlay/overlay.scss
@@ -1,53 +1,55 @@
-@import 'variables';
-@import 'palette';
-
-$md-backdrop-color: md-color($md-grey, 900);
-
-// TODO(jelbourn): change from the `md` prefix to something else for everything in the toolkit.
-
-@import 'variables';
-
-/** The overlay-container is an invisible element which contains all individual overlays. */
-.md-overlay-container {
- position: absolute;
-
- // Disable events from being captured on the overlay container.
- pointer-events: none;
-
- // The container should be the size of the viewport.
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- z-index: $md-z-index-overlay-container;
-}
-
-/** A single overlay pane. */
-.md-overlay-pane {
- position: absolute;
- pointer-events: auto;
- box-sizing: border-box;
- z-index: $md-z-index-overlay;
-}
-
-.md-overlay-backdrop {
- // TODO(jelbourn): reuse sidenav fullscreen mixin.
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-
- z-index: $md-z-index-overlay-backdrop;
- pointer-events: auto;
-
- // TODO(jelbourn): figure out if there are actually spec'ed colors for both light and dark
- // themes here. Currently using the values from Angular Material 1.
- transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
- background: $md-backdrop-color;
- opacity: 0;
-}
-
-.md-overlay-backdrop.md-overlay-backdrop-showing {
- opacity: 0.48;
+@import '../style/variables';
+@import '../theming/palette';
+@import '../theming/theming';
+
+
+@mixin md-overlay() {
+ $md-backdrop-color: md-color($md-grey, 900);
+
+ // TODO(jelbourn): change from the `md` prefix to something else for everything in the toolkit.
+
+ // The overlay-container is an invisible element which contains all individual overlays.
+ .md-overlay-container {
+ position: absolute;
+
+ // Disable events from being captured on the overlay container.
+ pointer-events: none;
+
+ // The container should be the size of the viewport.
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ z-index: $md-z-index-overlay-container;
+ }
+
+ // A single overlay pane.
+ .md-overlay-pane {
+ position: absolute;
+ pointer-events: auto;
+ box-sizing: border-box;
+ z-index: $md-z-index-overlay;
+ }
+
+ .md-overlay-backdrop {
+ // TODO(jelbourn): reuse sidenav fullscreen mixin.
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ z-index: $md-z-index-overlay-backdrop;
+ pointer-events: auto;
+
+ // TODO(jelbourn): figure out if there are actually spec'ed colors for both light and dark
+ // themes here. Currently using the values from Angular Material 1.
+ transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
+ background: $md-backdrop-color;
+ opacity: 0;
+ }
+
+ .md-overlay-backdrop.md-overlay-backdrop-showing {
+ opacity: 0.48;
+ }
}
diff --git a/src/lib/core/ripple/_ripple.scss b/src/lib/core/ripple/_ripple.scss
new file mode 100644
index 000000000000..d5f520d222b9
--- /dev/null
+++ b/src/lib/core/ripple/_ripple.scss
@@ -0,0 +1,106 @@
+@import '../theming/theming';
+
+
+$md-ripple-focused-opacity: 0.1;
+$md-ripple-background-fade-duration: 300ms;
+$md-ripple-background-default-color: rgba(0, 0, 0, 0.0588);
+$md-ripple-foreground-initial-opacity: 0.25;
+$md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);
+
+
+@mixin md-ripple() {
+ // The host element of an md-ripple directive should always have a position of "absolute" or
+ // "relative" so that the ripple divs it creates inside itself are correctly positioned.
+ [md-ripple] {
+ overflow: hidden;
+ }
+
+ [md-ripple].md-ripple-unbounded {
+ overflow: visible;
+ }
+
+ .md-ripple-background {
+ background-color: $md-ripple-background-default-color;
+ opacity: 0;
+ transition: opacity $md-ripple-background-fade-duration linear;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ .md-ripple-unbounded .md-ripple-background {
+ display: none;
+ }
+
+ .md-ripple-background.md-ripple-active {
+ opacity: 1;
+ }
+
+ .md-ripple-focused .md-ripple-background {
+ opacity: 1;
+ }
+
+ .md-ripple-foreground {
+ background-color: $md-ripple-foreground-default-color;
+ border-radius: 50%;
+ pointer-events: none;
+ opacity: $md-ripple-foreground-initial-opacity;
+ position: absolute;
+ // The transition duration is manually set based on the ripple size.
+ transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
+ }
+
+ .md-ripple-foreground.md-ripple-fade-in {
+ opacity: 1;
+ }
+
+ .md-ripple-foreground.md-ripple-fade-out {
+ opacity: 0;
+ }
+}
+
+@mixin md-ripple-theme($theme) {
+ $accent: map-get($theme, accent);
+
+ .md-ripple-focused .md-ripple-background {
+ background-color: md-color($accent, $md-ripple-focused-opacity);
+ }
+}
+
+
+// A mixin, which generates temporary ink ripple on a given component.
+// To be removed once the real ripple is applied to all elements.
+// When $bindToParent is set to true, it will check for the focused class on the same selector as you included
+// that mixin.
+// It is also possible to specify the color palette of the temporary ripple. By default it uses the
+// accent palette for its background.
+@mixin md-temporary-ink-ripple($component, $bindToParent: false) {
+ // TODO(mtlin): Replace when ink ripple component is implemented.
+ // A placeholder ink ripple, shown when keyboard focused.
+ .md-ink-ripple {
+ border-radius: 50%;
+ opacity: 0;
+ height: 48px;
+ left: 50%;
+ overflow: hidden;
+ pointer-events: none;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ transition: opacity ease 280ms, background-color ease 280ms;
+ width: 48px;
+ }
+
+ // Fade in when radio focused.
+ #{if($bindToParent, '&', '')}.md-#{$component}-focused .md-ink-ripple {
+ opacity: 1;
+ }
+
+ // TODO(mtlin): This corresponds to disabled focus state, but it's unclear how to enter into
+ // this state.
+ #{if($bindToParent, '&', '')}.md-#{$component}-disabled .md-ink-ripple {
+ background-color: #000;
+ }
+}
diff --git a/src/lib/core/style/_button-common.scss b/src/lib/core/style/_button-common.scss
new file mode 100644
index 000000000000..c4cf2dd968df
--- /dev/null
+++ b/src/lib/core/style/_button-common.scss
@@ -0,0 +1,7 @@
+// Mixin overriding default button styles like the gray background, the border, and the outline.
+@mixin md-button-reset {
+ cursor: pointer;
+ user-select: none;
+ outline: none;
+ border: none;
+}
diff --git a/src/lib/core/style/_button-mixins.scss b/src/lib/core/style/_button-mixins.scss
deleted file mode 100644
index 9c8b5b1d1794..000000000000
--- a/src/lib/core/style/_button-mixins.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * This mixin overrides default button styles like the gray background,
- * the border, and the outline.
- */
-@mixin md-button-reset {
- background: transparent;
- cursor: pointer;
- user-select: none;
- outline: none;
- border: none;
-}
diff --git a/src/lib/core/style/_default-theme.scss b/src/lib/core/style/_default-theme.scss
deleted file mode 100644
index 34149400a25b..000000000000
--- a/src/lib/core/style/_default-theme.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import 'theme-functions';
-@import 'palette';
-
-
-// Person creating a theme writes variables like this:
-$md-is-dark-theme: false;
-
-
-$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);
-$md-accent: md-palette($md-purple, 500, 300, 800, $md-contrast-palettes);
-$md-warn: md-palette($md-red, 500, 300, 900, $md-contrast-palettes);
-$md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground);
-$md-background: if($md-is-dark-theme, $md-dark-theme-background, $md-light-theme-background);
diff --git a/src/lib/core/style/_elevation.scss b/src/lib/core/style/_elevation.scss
index c929bb0f1847..7b37fb6d85e4 100644
--- a/src/lib/core/style/_elevation.scss
+++ b/src/lib/core/style/_elevation.scss
@@ -1,25 +1,24 @@
@import 'variables';
-/**
- * A collection of mixins and CSS classes that can be used to apply elevation to a material
- * element.
- * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html
- * Examples:
- *
- *
- * .md-foo {
- * @include $md-elevation(2);
- *
- * &:active {
- * @include $md-elevation(8);
- * }
- * }
- *
- *
- *
- * For an explanation of the design behind how elevation is implemented, see the design doc at
- * https://goo.gl/Kq0k9Z.
- */
+
+// A collection of mixins and CSS classes that can be used to apply elevation to a material
+// element.
+// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html
+// Examples:
+//
+//
+// .md-foo {
+// @include $md-elevation(2);
+//
+// &:active {
+// @include $md-elevation(8);
+// }
+// }
+//
+//
+//
+// For an explanation of the design behind how elevation is implemented, see the design doc at
+// https://goo.gl/Kq0k9Z.
// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation
// level is created using a set of 3 shadow values, one for umbra (the shadow representing the
@@ -120,23 +119,20 @@ $_ambient-elevation-map: (
24: '0px 9px 46px 8px #{$_ambient-color}'
);
-/**
- * The css property used for elevation. In most cases this should not be changed. It is exposed
- * as a variable for abstraction / easy use when needing to reference the property directly, for
- * example in a will-change rule.
- */
+
+// The css property used for elevation. In most cases this should not be changed. It is exposed
+// as a variable for abstraction / easy use when needing to reference the property directly, for
+// example in a will-change rule.
$md-elevation-property: box-shadow !default;
-/** The default duration value for elevation transitions. */
+// The default duration value for elevation transitions.
$md-elevation-transition-duration: 280ms !default;
-/** The default easing value for elevation transitions. */
+// The default easing value for elevation transitions.
$md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function;
-/**
- * Applies the correct css rules to an element to give it the elevation specified by $zValue.
- * The $zValue must be between 0 and 24.
- */
+// Applies the correct css rules to an element to give it the elevation specified by $zValue.
+// The $zValue must be between 0 and 24.
@mixin md-elevation($zValue) {
@if type-of($zValue) != number or not unitless($zValue) {
@error '$zValue must be a unitless number';
@@ -150,27 +146,24 @@ $md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function;
#{map-get($_ambient-elevation-map, $zValue)};
}
-/**
- * Returns a string that can be used as the value for a transition property for elevation.
- * Calling this function directly is useful in situations where a component needs to transition
- * more than one property.
- *
- * .foo {
- * transition: md-elevation-transition-property-value(), opacity 100ms ease;
- * will-change: $md-elevation-property, opacity;
- * }
- */
+// Returns a string that can be used as the value for a transition property for elevation.
+// Calling this function directly is useful in situations where a component needs to transition
+// more than one property.
+//
+// .foo {
+// transition: md-elevation-transition-property-value(), opacity 100ms ease;
+// will-change: $md-elevation-property, opacity;
+// }
@function md-elevation-transition-property-value(
$duration: $md-elevation-transition-duration,
$easing: $md-elevation-transition-timing-function) {
@return #{$md-elevation-property} #{$duration} #{$easing};
}
-/**
- * Applies the correct css rules needed to have an element transition between elevations.
- * This mixin should be applied to elements whose elevation values will change depending on their
- * context (e.g. when active or disabled).
- */
+// Applies the correct css rules needed to have an element transition between elevations.
+// This mixin should be applied to elements whose elevation values will change depending on their
+// context (e.g. when active or disabled).
+//
// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
// be used in the same way by clients.
@mixin md-elevation-transition(
diff --git a/src/lib/core/style/_list-shared.scss b/src/lib/core/style/_list-common.scss
similarity index 66%
rename from src/lib/core/style/_list-shared.scss
rename to src/lib/core/style/_list-common.scss
index aeb7f441deec..2291dd917861 100644
--- a/src/lib/core/style/_list-shared.scss
+++ b/src/lib/core/style/_list-common.scss
@@ -1,17 +1,13 @@
-/**
- * This mixin will ensure that lines that overflow the container will
- * hide the overflow and truncate neatly with an ellipsis.
- */
+// This mixin will ensure that lines that overflow the container will hide the overflow and
+// truncate neatly with an ellipsis.
@mixin md-truncate-line() {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
-/**
- * This mixin provides all md-line styles, changing secondary font size
- * based on whether the list is in dense mode.
- */
+// Mixin to provide all md-line styles, changing secondary font size based on whether the list
+// is in dense mode.
@mixin md-line-base($secondary-font-size) {
[md-line] {
@include md-truncate-line();
@@ -25,10 +21,17 @@
}
}
-/**
- * This mixin provides base styles for the wrapper around md-line
- * elements in a list.
- */
+// This mixin normalizes default element styles, e.g. font weight for heading text.
+@mixin md-normalize-text() {
+ & > * {
+ margin: 0;
+ padding: 0;
+ font-weight: normal;
+ font-size: inherit;
+ }
+}
+
+// This mixin provides base styles for the wrapper around md-line elements in a list.
@mixin md-line-wrapper-base() {
@include md-normalize-text();
@@ -44,15 +47,3 @@
display: none;
}
}
-
-/**
- * This mixin normalizes default element styles, e.g. font weight for heading text.
- */
-@mixin md-normalize-text() {
- & > * {
- margin: 0;
- padding: 0;
- font-weight: normal;
- font-size: inherit;
- }
-}
\ No newline at end of file
diff --git a/src/lib/core/style/_mixins.scss b/src/lib/core/style/_mixins.scss
deleted file mode 100644
index 8839a765f9c9..000000000000
--- a/src/lib/core/style/_mixins.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-
-/**
- * Mixin that creates a new stacking context.
- * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- */
-@mixin md-stacking-context() {
- position: relative;
-
- // Use a transform to create a new stacking context.
- transform: translate3d(0, 0, 0);
-}
-
-/**
- * This mixin hides an element visually.
- * That means it's still accessible for screen-readers but not visible in view.
- */
-@mixin md-visually-hidden {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- text-transform: none;
- width: 1px;
-}
-
-/**
- * Forces an element to grow to fit floated contents; used as as an alternative to
- * `overflow: hidden;` because it doesn't cut off contents.
- */
-@mixin md-clearfix {
- &::before, &::after {
- content: '';
- clear: both;
- display: table;
- }
-}
-
-/**
- * A mixin, which generates temporary ink ripple on a given component.
- * When $bindToParent is set to true, it will check for the focused class on the same selector as you included
- * that mixin.
- * It is also possible to specify the color palette of the temporary ripple. By default it uses the
- * accent palette for its background.
- */
-@mixin md-temporary-ink-ripple($component, $bindToParent: false, $palette: $md-accent) {
- // TODO(mtlin): Replace when ink ripple component is implemented.
- // A placeholder ink ripple, shown when keyboard focused.
- .md-ink-ripple {
- border-radius: 50%;
- opacity: 0;
- height: 48px;
- left: 50%;
- overflow: hidden;
- pointer-events: none;
- position: absolute;
- top: 50%;
- transform: translate(-50%, -50%);
- transition: opacity ease 280ms, background-color ease 280ms;
- width: 48px;
- }
-
- // Fade in when radio focused.
- #{if($bindToParent, '&', '')}.md-#{$component}-focused .md-ink-ripple {
- opacity: 1;
- background-color: md-color($palette, 0.26);
- }
-
- // TODO(mtlin): This corresponds to disabled focus state, but it's unclear how to enter into
- // this state.
- #{if($bindToParent, '&', '')}.md-#{$component}-disabled .md-ink-ripple {
- background-color: #000;
- }
-}
diff --git a/src/lib/core/style/_ripple.scss b/src/lib/core/style/_ripple.scss
deleted file mode 100644
index 61355366f2e7..000000000000
--- a/src/lib/core/style/_ripple.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@import 'default-theme';
-@import 'theme-functions';
-
-$md-ripple-focused-opacity: 0.1;
-$md-ripple-background-fade-duration: 300ms;
-$md-ripple-background-default-color: rgba(0, 0, 0, 0.0588);
-$md-ripple-foreground-initial-opacity: 0.25;
-$md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);
-
-/**
- * The host element of an md-ripple directive should always have a position of "absolute" or
- * "relative" so that the ripple divs it creates inside itself are correctly positioned.
- */
-[md-ripple] {
- overflow: hidden;
-}
-
-[md-ripple].md-ripple-unbounded {
- overflow: visible;
-}
-
-.md-ripple-background {
- background-color: $md-ripple-background-default-color;
- opacity: 0;
- transition: opacity $md-ripple-background-fade-duration linear;
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
-}
-
-.md-ripple-unbounded .md-ripple-background {
- display: none;
-}
-
-.md-ripple-background.md-ripple-active {
- opacity: 1;
-}
-
-.md-ripple-focused .md-ripple-background {
- background-color: md-color($md-accent, $md-ripple-focused-opacity);
- opacity: 1;
-}
-
-.md-ripple-foreground {
- background-color: $md-ripple-foreground-default-color;
- border-radius: 50%;
- pointer-events: none;
- opacity: $md-ripple-foreground-initial-opacity;
- position: absolute;
- // The transition duration is manually set based on the ripple size.
- transition: 'opacity, transform' 0ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.md-ripple-foreground.md-ripple-fade-in {
- opacity: 1;
-}
-
-.md-ripple-foreground.md-ripple-fade-out {
- opacity: 0;
-}
diff --git a/src/lib/core/style/_sidenav-mixins.scss b/src/lib/core/style/_sidenav-common.scss
similarity index 58%
rename from src/lib/core/style/_sidenav-mixins.scss
rename to src/lib/core/style/_sidenav-common.scss
index 3c72c20580a1..1499cfc6bdde 100644
--- a/src/lib/core/style/_sidenav-mixins.scss
+++ b/src/lib/core/style/_sidenav-common.scss
@@ -1,8 +1,8 @@
-/* This mixin ensures an element spans the whole viewport.*/
+// This mixin ensures an element spans the whole viewport.
@mixin md-fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
-}
\ No newline at end of file
+}
diff --git a/src/lib/core/style/_theme-functions.scss b/src/lib/core/style/_theme-functions.scss
deleted file mode 100644
index 30c4002b7391..000000000000
--- a/src/lib/core/style/_theme-functions.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-// ** Two main functions for users **
-// md-palette: used for defining your theme in terms of Material hues.
-// md-color: apply colors to components from the palette. Consumes the output of md-palette
-
-// Implement the rem unit with SCSS so we don't have to actually set a font-size on
-// the user's body element.
-@function rem($multiplier) {
- $font-size: 10px;
- @return $multiplier * $font-size;
-}
-
-// For a given hue in a palette, return the contrast color from the map of contrast palettes.
-@function md-contrast($color-map, $hue, $contrast-color-map) {
- @return map-get(map-get($contrast-color-map, $color-map), $hue);
-}
-
-
-// Creates a map of hues to colors for a theme.
-// $color-map
-// $primary
-// $lighter
-// $darker
-@function md-palette($color-map, $primary, $lighter, $darker, $contrast-color-map) {
- $result: map_merge($color-map, (
- default: map-get($color-map, $primary),
- lighter: map-get($color-map, $lighter),
- darker: map-get($color-map, $darker),
-
- default-contrast: md-contrast($color-map, $primary, $contrast-color-map),
- lighter-contrast: md-contrast($color-map, $lighter, $contrast-color-map),
- darker-contrast: md-contrast($color-map, $darker, $contrast-color-map)
- ));
-
- // For each hue in the palette, add a "-contrast" color to the map.
- @each $hue, $color in $color-map {
- $result: map_merge($result, (
- '#{$hue}-contrast': md-contrast($color-map, $hue, $contrast-color-map)
- ));
- }
-
- @return $result;
-}
-
-// Gets a color for a material design component.
-// $color-map: a map of {key: color}.
-// $hue-key: key used to lookup the color in $colorMap. Defaults to 'default'
-// If $hue-key is a number between 0 and 1, it will be treated as $opacity.
-// $opacity: the opacity to apply to the color.
-@function md-color($color-map, $hue-key: default, $opacity: 1) {
- // If hueKey is a number between zero and one, then it actually contains an
- // opacity value, so recall this function with the default hue and that given opacity.
- @if type-of($hue-key) == number and $hue-key >= 0 and $hue-key <= 1 {
- @return md-color($color-map, default, $hue-key);
- }
-
- $color: map-get($color-map, $hue-key);
- $opacity: if(opacity($color) < 1, opacity($color), $opacity);
-
- @return rgba($color, $opacity);
-}
-
-
diff --git a/src/lib/core/style/_variables.scss b/src/lib/core/style/_variables.scss
index 818d33755804..b66d335e7abd 100644
--- a/src/lib/core/style/_variables.scss
+++ b/src/lib/core/style/_variables.scss
@@ -1,4 +1,4 @@
-@import 'theme-functions';
+@import '../typography/typography';
// Typography
diff --git a/src/lib/core/style/core.scss b/src/lib/core/style/core.scss
deleted file mode 100644
index 856d9eddf53d..000000000000
--- a/src/lib/core/style/core.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Core styles that can be used to apply material design treatments to any element.
-@import '../a11y/live-announcer';
-@import 'elevation';
-@import '../overlay/overlay';
-@import 'ripple';
-
-// Provides external CSS classes for each elevation value. Each CSS class is formatted as
-// `md-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
-// elevated.
-@for $zValue from 0 through 24 {
- .md-elevation-z#{$zValue} {
- @include md-elevation($zValue);
- }
-}
diff --git a/src/lib/core/style/_palette.scss b/src/lib/core/theming/_palette.scss
similarity index 93%
rename from src/lib/core/style/_palette.scss
rename to src/lib/core/theming/_palette.scss
index e64a111a3bae..2df04a13e02a 100644
--- a/src/lib/core/style/_palette.scss
+++ b/src/lib/core/theming/_palette.scss
@@ -1,5 +1,13 @@
// Color palettes from the Material Design spec.
// See https://www.google.com/design/spec/style/color.html
+//
+// Contrast colors are hard-coded because it is too difficult (probably impossible) to
+// calculate them. These contrast colors are pulled from the public Material Design spec swatches.
+// While the contrast colors in the spec are not prescriptive, we use them for convenience.
+
+
+$black-87-opacity: rgba(black, 0.87);
+$white-87-opacity: rgba(white, 0.87);
$md-red: (
50: #ffebee,
@@ -16,6 +24,22 @@ $md-red: (
A200: #ff5252,
A400: #ff1744,
A700: #d50000,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: $white-87-opacity,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: white,
+ A400: white,
+ A700: white,
+ )
);
$md-pink: (
@@ -33,6 +57,22 @@ $md-pink: (
A200: #ff4081,
A400: #f50057,
A700: #c51162,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: white,
+ 600: white,
+ 700: $white-87-opacity,
+ 800: $white-87-opacity,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: white,
+ A400: white,
+ A700: white,
+ )
);
$md-purple: (
@@ -50,6 +90,22 @@ $md-purple: (
A200: #e040fb,
A400: #d500f9,
A700: #aa00ff,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: white,
+ 400: white,
+ 500: $white-87-opacity,
+ 600: $white-87-opacity,
+ 700: $white-87-opacity,
+ 800: $white-87-opacity,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: white,
+ A400: white,
+ A700: white,
+ )
);
$md-deep-purple: (
@@ -67,6 +123,22 @@ $md-deep-purple: (
A200: #7c4dff,
A400: #651fff,
A700: #6200ea,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: white,
+ 400: white,
+ 500: $white-87-opacity,
+ 600: $white-87-opacity,
+ 700: $white-87-opacity,
+ 800: $white-87-opacity,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: white,
+ A400: $white-87-opacity,
+ A700: $white-87-opacity,
+ )
);
$md-indigo: (
@@ -84,6 +156,22 @@ $md-indigo: (
A200: #536dfe,
A400: #3d5afe,
A700: #304ffe,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: white,
+ 400: white,
+ 500: $white-87-opacity,
+ 600: $white-87-opacity,
+ 700: $white-87-opacity,
+ 800: $white-87-opacity,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: white,
+ A400: white,
+ A700: $white-87-opacity,
+ )
);
$md-blue: (
@@ -101,6 +189,22 @@ $md-blue: (
A200: #448aff,
A400: #2979ff,
A700: #2962ff,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: $white-87-opacity,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: white,
+ A400: white,
+ A700: white,
+ )
);
$md-light-blue: (
@@ -118,6 +222,22 @@ $md-light-blue: (
A200: #40c4ff,
A400: #00b0ff,
A700: #0091ea,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: white,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: $black-87-opacity,
+ A700: white,
+ )
);
$md-cyan: (
@@ -135,6 +255,22 @@ $md-cyan: (
A200: #18ffff,
A400: #00e5ff,
A700: #00b8d4,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: white,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: $black-87-opacity,
+ A700: $black-87-opacity,
+ )
);
$md-teal: (
@@ -152,6 +288,22 @@ $md-teal: (
A200: #64ffda,
A400: #1de9b6,
A700: #00bfa5,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: $white-87-opacity,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: $black-87-opacity,
+ A700: $black-87-opacity,
+ )
);
$md-green: (
@@ -169,6 +321,22 @@ $md-green: (
A200: #69f0ae,
A400: #00e676,
A700: #00c853,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: $white-87-opacity,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: $black-87-opacity,
+ A700: $black-87-opacity,
+ )
);
$md-light-green: (
@@ -186,6 +354,22 @@ $md-light-green: (
A200: #b2ff59,
A400: #76ff03,
A700: #64dd17,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: $black-87-opacity,
+ 600: $black-87-opacity,
+ 700: $black-87-opacity,
+ 800: white,
+ 900: white,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: $black-87-opacity,
+ A700: $black-87-opacity,
+ )
);
$md-lime: (
@@ -203,6 +387,22 @@ $md-lime: (
A200: #eeff41,
A400: #c6ff00,
A700: #aeea00,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: $black-87-opacity,
+ 600: $black-87-opacity,
+ 700: $black-87-opacity,
+ 800: $black-87-opacity,
+ 900: white,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: $black-87-opacity,
+ A700: $black-87-opacity,
+ )
);
$md-yellow: (
@@ -220,6 +420,22 @@ $md-yellow: (
A200: #ffff00,
A400: #ffea00,
A700: #ffd600,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: $black-87-opacity,
+ 600: $black-87-opacity,
+ 700: $black-87-opacity,
+ 800: $black-87-opacity,
+ 900: $black-87-opacity,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: $black-87-opacity,
+ A700: $black-87-opacity,
+ )
);
$md-amber: (
@@ -237,6 +453,22 @@ $md-amber: (
A200: #ffd740,
A400: #ffc400,
A700: #ffab00,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: $black-87-opacity,
+ 600: $black-87-opacity,
+ 700: $black-87-opacity,
+ 800: $black-87-opacity,
+ 900: $black-87-opacity,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: $black-87-opacity,
+ A700: $black-87-opacity,
+ )
);
$md-orange: (
@@ -254,6 +486,22 @@ $md-orange: (
A200: #ffab40,
A400: #ff9100,
A700: #ff6d00,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: $black-87-opacity,
+ 600: $black-87-opacity,
+ 700: $black-87-opacity,
+ 800: white,
+ 900: white,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: $black-87-opacity,
+ A700: black,
+ )
);
$md-deep-orange: (
@@ -271,6 +519,22 @@ $md-deep-orange: (
A200: #ff6e40,
A400: #ff3d00,
A700: #dd2c00,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: white,
+ 900: white,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: white,
+ A700: white,
+ )
);
$md-brown: (
@@ -288,6 +552,22 @@ $md-brown: (
A200: #bcaaa4,
A400: #8d6e63,
A700: #5d4037,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: white,
+ 400: white,
+ 500: $white-87-opacity,
+ 600: $white-87-opacity,
+ 700: $white-87-opacity,
+ 800: $white-87-opacity,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: white,
+ A700: $white-87-opacity,
+ )
);
$md-grey: (
@@ -307,23 +587,57 @@ $md-grey: (
A200: #eeeeee,
A400: #bdbdbd,
A700: #616161,
-);
-
-$md-blue-grey: (
- 50: #eceff1,
- 100: #cfd8dc,
- 200: #b0bec5,
- 300: #90a4ae,
- 400: #78909c,
- 500: #607d8b,
- 600: #546e7a,
- 700: #455a64,
- 800: #37474f,
- 900: #263238,
- A100: #cfd8dc,
- A200: #b0bec5,
+ contrast: (
+ 0: $black-87-opacity,
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: $black-87-opacity,
+ 500: $black-87-opacity,
+ 600: $white-87-opacity,
+ 700: $white-87-opacity,
+ 800: $white-87-opacity,
+ 900: $white-87-opacity,
+ 1000: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: $black-87-opacity,
+ A700: $white-87-opacity,
+ )
+);
+
+$md-blue-grey: (
+ 50: #eceff1,
+ 100: #cfd8dc,
+ 200: #b0bec5,
+ 300: #90a4ae,
+ 400: #78909c,
+ 500: #607d8b,
+ 600: #546e7a,
+ 700: #455a64,
+ 800: #37474f,
+ 900: #263238,
+ A100: #cfd8dc,
+ A200: #b0bec5,
A400: #78909c,
A700: #455a64,
+ contrast: (
+ 50: $black-87-opacity,
+ 100: $black-87-opacity,
+ 200: $black-87-opacity,
+ 300: $black-87-opacity,
+ 400: white,
+ 500: white,
+ 600: $white-87-opacity,
+ 700: $white-87-opacity,
+ 800: $white-87-opacity,
+ 900: $white-87-opacity,
+ A100: $black-87-opacity,
+ A200: $black-87-opacity,
+ A400: white,
+ A700: $white-87-opacity,
+ )
);
@@ -378,323 +692,3 @@ $md-dark-theme-foreground: (
icons: white,
text: white
);
-
-
-
-// TODO(jelbourn): Do we actually need these any more? Updates to the spec about how foreground
-// colors are used may have made this obsolete.
-
-// Contrast colors. These are hard-coded because it is too difficult (probably impossible) to
-// calculate them. These contrast colors are pulled from the public Material Design spec swatches.
-// While the contrast colors in the spec are not perscriptive, we will use them for convenience.
-$black-87-opacity: rgba(black, 0.870588);
-$white-87-opacity: rgba(white, 0.870588);
-
-$md-contrast-palettes: (
- $md-red: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: white,
- 600: white,
- 700: white,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: white,
- A400: white,
- A700: white,
- ),
- $md-pink: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: white,
- 600: white,
- 700: $white-87-opacity,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: white,
- A400: white,
- A700: white,
- ),
- $md-purple: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: white,
- 400: white,
- 500: $white-87-opacity,
- 600: $white-87-opacity,
- 700: $white-87-opacity,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: white,
- A400: white,
- A700: white,
- ),
- $md-deep-purple: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: white,
- 400: white,
- 500: $white-87-opacity,
- 600: $white-87-opacity,
- 700: $white-87-opacity,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: white,
- A400: $white-87-opacity,
- A700: $white-87-opacity,
- ),
- $md-indigo: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: white,
- 400: white,
- 500: $white-87-opacity,
- 600: $white-87-opacity,
- 700: $white-87-opacity,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: white,
- A400: white,
- A700: $white-87-opacity,
- ),
- $md-blue: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: white,
- 600: white,
- 700: white,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: white,
- A400: white,
- A700: white,
- ),
- $md-light-blue: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: white,
- 600: white,
- 700: white,
- 800: white,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: $black-87-opacity,
- A700: white,
- ),
- $md-cyan: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: white,
- 600: white,
- 700: white,
- 800: white,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: $black-87-opacity,
- A700: $black-87-opacity,
- ),
- $md-teal: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: white,
- 600: white,
- 700: white,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: $black-87-opacity,
- A700: $black-87-opacity,
- ),
- $md-green: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: white,
- 600: white,
- 700: white,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: $black-87-opacity,
- A700: $black-87-opacity,
- ),
- $md-light-green: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: $black-87-opacity,
- 600: $black-87-opacity,
- 700: $black-87-opacity,
- 800: white,
- 900: white,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: $black-87-opacity,
- A700: $black-87-opacity,
- ),
- $md-lime: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: $black-87-opacity,
- 600: $black-87-opacity,
- 700: $black-87-opacity,
- 800: $black-87-opacity,
- 900: white,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: $black-87-opacity,
- A700: $black-87-opacity,
- ),
- $md-yellow: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: $black-87-opacity,
- 600: $black-87-opacity,
- 700: $black-87-opacity,
- 800: $black-87-opacity,
- 900: $black-87-opacity,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: $black-87-opacity,
- A700: $black-87-opacity,
- ),
- $md-amber: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: $black-87-opacity,
- 600: $black-87-opacity,
- 700: $black-87-opacity,
- 800: $black-87-opacity,
- 900: $black-87-opacity,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: $black-87-opacity,
- A700: $black-87-opacity,
- ),
- $md-orange: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: $black-87-opacity,
- 600: $black-87-opacity,
- 700: $black-87-opacity,
- 800: white,
- 900: white,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: $black-87-opacity,
- A700: black,
- ),
- $md-deep-orange: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: white,
- 600: white,
- 700: white,
- 800: white,
- 900: white,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: white,
- A700: white,
- ),
- $md-brown: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: white,
- 400: white,
- 500: $white-87-opacity,
- 600: $white-87-opacity,
- 700: $white-87-opacity,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: white,
- A700: $white-87-opacity,
- ),
- $md-grey: (
- 0: $black-87-opacity,
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: $black-87-opacity,
- 500: $black-87-opacity,
- 600: $white-87-opacity,
- 700: $white-87-opacity,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- 1000: $white-87-opacity,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: $black-87-opacity,
- A700: $white-87-opacity,
- ),
- $md-blue-grey: (
- 50: $black-87-opacity,
- 100: $black-87-opacity,
- 200: $black-87-opacity,
- 300: $black-87-opacity,
- 400: white,
- 500: white,
- 600: $white-87-opacity,
- 700: $white-87-opacity,
- 800: $white-87-opacity,
- 900: $white-87-opacity,
- A100: $black-87-opacity,
- A200: $black-87-opacity,
- A400: white,
- A700: $white-87-opacity,
- ),
-);
diff --git a/src/lib/core/theming/_theming.scss b/src/lib/core/theming/_theming.scss
new file mode 100644
index 000000000000..a7a0ca1718c4
--- /dev/null
+++ b/src/lib/core/theming/_theming.scss
@@ -0,0 +1,84 @@
+@import 'palette';
+
+
+// For a given hue in a palette, return the contrast color from the map of contrast palettes.
+// @param $color-map
+// @param $hue
+@function md-contrast($palette, $hue) {
+ @return map-get(map-get($palette, contrast), $hue);
+}
+
+
+// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
+// of the Material Design hues.
+// @param $color-map
+// @param $primary
+// @param $lighter
+@function md-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {
+ $result: map_merge($base-palette, (
+ default: map-get($base-palette, $default),
+ lighter: map-get($base-palette, $lighter),
+ darker: map-get($base-palette, $darker),
+
+ default-contrast: md-contrast($base-palette, $default),
+ lighter-contrast: md-contrast($base-palette, $lighter),
+ darker-contrast: md-contrast($base-palette, $darker)
+ ));
+
+ // For each hue in the palette, add a "-contrast" color to the map.
+ @each $hue, $color in $base-palette {
+ $result: map_merge($result, (
+ '#{$hue}-contrast': md-contrast($base-palette, $hue)
+ ));
+ }
+
+ @return $result;
+}
+
+
+// Gets a color from a theme palette (the output of md-palette).
+// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
+// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+//
+// @param $color-map The theme palette (output of md-palette).
+// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
+// be treated as opacity.
+// @param $opacity The alpha channel value for the color.
+@function md-color($palette, $hue: default, $opacity: 1) {
+ // If hueKey is a number between zero and one, then it actually contains an
+ // opacity value, so recall this function with the default hue and that given opacity.
+ @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
+ @return md-color($palette, default, $hue);
+ }
+
+ $color: map-get($palette, $hue);
+ $opacity: if(opacity($color) < 1, opacity($color), $opacity);
+
+ @return rgba($color, $opacity);
+}
+
+
+// Creates a container object for a light theme to be given to individual component theme mixins.
+@function md-light-theme($primary, $accent, $warn) {
+ @return (
+ primary: $primary,
+ accent: $accent,
+ warn: $warn,
+ is-dark: false,
+ foreground: $md-light-theme-foreground,
+ background: $md-light-theme-background,
+ );
+}
+
+
+// Creates a container object for a dark theme to be given to individual component theme mixins.
+@function md-dark-theme($primary, $accent, $warn) {
+ @return (
+ primary: $primary,
+ accent: $accent,
+ warn: $warn,
+ is-dark: true,
+ foreground: $md-dark-theme-foreground,
+ background: $md-dark-theme-background,
+ );
+}
diff --git a/src/lib/core/theming/prebuilt/deeppurple-amber.scss b/src/lib/core/theming/prebuilt/deeppurple-amber.scss
new file mode 100644
index 000000000000..dac3949f1c19
--- /dev/null
+++ b/src/lib/core/theming/prebuilt/deeppurple-amber.scss
@@ -0,0 +1,17 @@
+@import '../theming';
+@import '../palette';
+@import '../../core';
+@import '../../../all/all-theme';
+
+
+$primary: md-palette($md-deep-purple);
+$accent: md-palette($md-amber, A200, A100, A400);
+$warn: md-palette($md-red);
+
+$theme: md-light-theme($primary, $accent, $warn);
+
+// Include non-theme styles for core.
+@include md-core();
+
+// Include all theme-styles for the components based on the current theme.
+@include angular-material-theme($theme);
diff --git a/src/lib/core/theming/prebuilt/indigo-pink.scss b/src/lib/core/theming/prebuilt/indigo-pink.scss
new file mode 100644
index 000000000000..6ef380548323
--- /dev/null
+++ b/src/lib/core/theming/prebuilt/indigo-pink.scss
@@ -0,0 +1,30 @@
+
+@import '../theming';
+@import '../palette';
+@import '../../core';
+@import '../../../all/all-theme';
+
+
+$primary: md-palette($md-indigo);
+$accent: md-palette($md-pink, A200, A100, A400);
+$warn: md-palette($md-red);
+
+$theme: md-light-theme($primary, $accent, $warn);
+
+// Include non-theme styles for core.
+@include md-core();
+
+// Include all theme-styles for the components based on the current theme.
+@include angular-material-theme($theme);
+
+.my-app-dark-theme {
+ $dark-primary: md-palette($md-blue-grey);
+ $dark-accent: md-palette($md-amber, A200, A100, A400);
+ $dark-warn: md-palette($md-deep-orange);
+
+ $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
+ // Include all theme-styles for the components based on the current theme.
+ @include angular-material-theme($dark-theme);
+}
+
diff --git a/src/lib/core/theming/prebuilt/purple-green.scss b/src/lib/core/theming/prebuilt/purple-green.scss
new file mode 100644
index 000000000000..39d0c764ec07
--- /dev/null
+++ b/src/lib/core/theming/prebuilt/purple-green.scss
@@ -0,0 +1,17 @@
+@import '../theming';
+@import '../palette';
+@import '../../core';
+@import '../../../all/all-theme';
+
+
+$primary: md-palette($md-purple, 700, 500, 800);
+$accent: md-palette($md-green, A200, A100, A400);
+$warn: md-palette($md-red);
+
+$theme: md-dark-theme($primary, $accent, $warn);
+
+// Include non-theme styles for core.
+@include md-core();
+
+// Include all theme-styles for the components based on the current theme.
+@include angular-material-theme($theme);
diff --git a/src/lib/core/typography/_typography.scss b/src/lib/core/typography/_typography.scss
new file mode 100644
index 000000000000..e8ff4eb9d248
--- /dev/null
+++ b/src/lib/core/typography/_typography.scss
@@ -0,0 +1,6 @@
+// Implement the rem unit with SCSS so we don't have to actually set a font-size on
+// the user's body element.
+@function rem($multiplier) {
+ $font-size: 10px;
+ @return $multiplier * $font-size;
+}
diff --git a/src/lib/dialog/_dialog-theme.scss b/src/lib/dialog/_dialog-theme.scss
new file mode 100644
index 000000000000..77b2a9d37e40
--- /dev/null
+++ b/src/lib/dialog/_dialog-theme.scss
@@ -0,0 +1,11 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-dialog-theme($theme) {
+ $background: map-get($theme, background);
+
+ md-dialog-container {
+ background: md-color($background, dialog);
+ }
+}
diff --git a/src/lib/dialog/dialog-container.scss b/src/lib/dialog/dialog-container.scss
index 16d44466db02..aa5b9909200c 100644
--- a/src/lib/dialog/dialog-container.scss
+++ b/src/lib/dialog/dialog-container.scss
@@ -1,14 +1,12 @@
-@import 'elevation';
-@import 'default-theme';
+@import '../core/style/elevation';
+
$md-dialog-padding: 24px !default;
-:host {
+md-dialog-container {
+ @include md-elevation(24);
+
display: block;
overflow: hidden;
-
padding: $md-dialog-padding;
-
- background: md-color($md-background, dialog);
- @include md-elevation(24);
}
diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts
index 6fe610c702e2..43ec0f390ba5 100644
--- a/src/lib/dialog/dialog-container.ts
+++ b/src/lib/dialog/dialog-container.ts
@@ -1,4 +1,4 @@
-import {Component, ComponentRef, ViewChild} from '@angular/core';
+import {Component, ComponentRef, ViewChild, ViewEncapsulation} from '@angular/core';
import {
BasePortalHost,
ComponentPortal,
@@ -20,7 +20,8 @@ import {MdDialogContentAlreadyAttachedError} from './dialog-errors';
host: {
'class': 'md-dialog-container',
'[attr.role]': 'dialogConfig?.role'
- }
+ },
+ encapsulation: ViewEncapsulation.None,
})
export class MdDialogContainer extends BasePortalHost {
/** The portal host inside of this container into which the dialog content will be loaded. */
diff --git a/src/lib/grid-list/_grid-list-theme.scss b/src/lib/grid-list/_grid-list-theme.scss
new file mode 100644
index 000000000000..0d55720d590c
--- /dev/null
+++ b/src/lib/grid-list/_grid-list-theme.scss
@@ -0,0 +1,6 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+// Include this empty mixin for consistency with the other components.
+@mixin md-grid-list-theme($theme) { }
diff --git a/src/lib/grid-list/grid-list.scss b/src/lib/grid-list/grid-list.scss
index 37dd9b9432b5..13c69dc8bf93 100644
--- a/src/lib/grid-list/grid-list.scss
+++ b/src/lib/grid-list/grid-list.scss
@@ -1,13 +1,14 @@
-@import 'list-shared';
+@import '../core/style/list-common';
-/* height of tile header or footer if it has one line */
+
+// height of tile header or footer if it has one line
$md-grid-list-one-line-height: 48px;
-/* height of tile header or footer if it has two lines */
+// height of tile header or footer if it has two lines
$md-grid-list-two-line-height: 68px;
-/* side padding for text in tile headers and footers */
+// side padding for text in tile headers and footers
$md-grid-list-text-padding: 16px;
-/* font styles for text in tile headers and footers */
+// font styles for text in tile headers and footers
$md-grid-list-font-size: 16px;
$md-grid-list-secondary-font: 12px;
diff --git a/src/lib/icon/_icon-theme.scss b/src/lib/icon/_icon-theme.scss
new file mode 100644
index 000000000000..860538e4a6e4
--- /dev/null
+++ b/src/lib/icon/_icon-theme.scss
@@ -0,0 +1,6 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+// Include this empty mixin for consistency with the other components.
+@mixin md-icon-theme($theme) { }
diff --git a/src/lib/icon/icon.scss b/src/lib/icon/icon.scss
index acfe82459986..5dc3e4fe59c7 100644
--- a/src/lib/icon/icon.scss
+++ b/src/lib/icon/icon.scss
@@ -1,13 +1,9 @@
-@import 'variables';
-@import 'default-theme';
+@import '../core/style/variables';
-/** The width/height of the icon element. */
+
+// The width/height of the icon element.
$md-icon-size: 24px !default;
-/**
-This works because we're using ViewEncapsulation.None. If we used the default
-encapsulation, the selector would need to be ":host".
-*/
md-icon {
background-repeat: no-repeat;
display: inline-block;
diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss
new file mode 100644
index 000000000000..4003d089cc2e
--- /dev/null
+++ b/src/lib/input/_input-theme.scss
@@ -0,0 +1,64 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-input-theme($theme) {
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ // Placeholder colors. Required is used for the `*` star shown in the placeholder.
+ $input-placeholder-color: md-color($foreground, hint-text);
+ $input-floating-placeholder-color: md-color($primary);
+ $input-required-placeholder-color: md-color($accent);
+
+ // Underline colors.
+ $input-underline-color: md-color($foreground, hint-text);
+ $input-underline-color-accent: md-color($accent);
+ $input-underline-color-warn: md-color($warn);
+ $input-underline-disabled-color: md-color($foreground, hint-text);
+ $input-underline-focused-color: md-color($primary);
+
+ .md-input-placeholder {
+ color: $input-placeholder-color;
+
+ // :focus is applied to the input, but we apply md-focused to the other elements
+ // that need to listen to it.
+ &.md-focused {
+ color: $input-floating-placeholder-color;
+
+ &.md-accent {
+ color: $input-underline-color-accent;
+ }
+ &.md-warn {
+ color: $input-underline-color-warn;
+ }
+ }
+ }
+
+ // See md-input-placeholder-floating mixin in input.scss
+ md-input input:-webkit-autofill + .md-input-placeholder,
+ .md-input-placeholder.md-float:not(.md-empty), &.md-float.md-focused {
+
+ .md-placeholder-required {
+ color: $input-required-placeholder-color;
+ }
+ }
+
+ .md-input-underline {
+ border-color: $input-underline-color;
+
+ .md-input-ripple {
+ background-color: $input-underline-focused-color;
+
+ &.md-accent {
+ background-color: $input-underline-color-accent;
+ }
+ &.md-warn {
+ background-color: $input-underline-color-warn;
+ }
+ }
+ }
+}
diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss
index ac9c6ed996a4..799cacc73828 100644
--- a/src/lib/input/input.scss
+++ b/src/lib/input/input.scss
@@ -1,48 +1,21 @@
-@import 'default-theme';
-@import 'mixins';
-@import 'variables';
+@import '../core/style/variables';
-$md-input-floating-placeholder-scale-factor: 0.75 !default;
-
-// Placeholder colors. Required is used for the `*` star shown in the placeholder.
-$md-input-placeholder-color: md-color($md-foreground, hint-text);
-$md-input-floating-placeholder-color: md-color($md-primary);
-$md-input-required-placeholder-color: md-color($md-accent);
-// Underline colors.
-$md-input-underline-color: md-color($md-foreground, hint-text);
-$md-input-underline-color-accent: md-color($md-accent);
-$md-input-underline-color-warn: md-color($md-warn);
-$md-input-underline-disabled-color: md-color($md-foreground, hint-text);
-$md-input-underline-focused-color: md-color($md-primary);
+$md-input-floating-placeholder-scale-factor: 0.75 !default;
// Gradient for showing the dashed line when the input is disabled.
-$md-input-underline-disabled-background-image: linear-gradient(to right,
- rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);
-
-/**
- * Undo the red box-shadow glow added by Firefox on invalid inputs.
- * See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
- */
-:-moz-ui-invalid {
- box-shadow: none;
-}
+$md-input-underline-disabled-background-image:
+ linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);
-/**
- * Applies a floating placeholder above the input itself.
- */
+// Applies a floating placeholder above the input itself.
@mixin md-input-placeholder-floating {
display: block;
padding-bottom: 5px;
transform: translateY(-100%) scale($md-input-floating-placeholder-scale-factor);
width: 100% / $md-input-floating-placeholder-scale-factor;
-
- .md-placeholder-required {
- color: $md-input-required-placeholder-color;
- }
}
-:host {
+md-input {
display: inline-block;
position: relative;
font-family: $md-font-family;
@@ -50,102 +23,63 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
// To avoid problems with text-align.
text-align: left;
- // Global wrapper. We need to apply margin to the element for spacing, but
- // cannot apply it to the host element directly.
- .md-input-wrapper {
- margin: 16px 0;
- }
-
- // We use a table layout to baseline align the prefix and suffix classes.
- // The underline is outside of it so it can cover all of the elements under
- // this table.
- // Flex does not respect the baseline. What we really want is akin to a table
- // as want an inline-block where elements don't wrap.
- .md-input-table {
- display: inline-table;
- flex-flow: column;
- vertical-align: bottom;
- width: 100%;
-
- & > * {
- display: table-cell;
- }
+ [dir='rtl'] & {
+ text-align: right;
}
+}
- // The Input element proper.
- .md-input-element {
- // Font needs to be inherited, because by default
has a system font.
- font: inherit;
-
- // The Material input should match whatever background it is above.
- background: transparent;
-
- // By default,
has a padding, border, outline and a default width.
- border: none;
- outline: none;
- padding: 0;
- width: 100%;
-
- &.md-end {
- text-align: right;
- }
- }
+// Global wrapper. We need to apply margin to the element for spacing, but
+// cannot apply it to the host element directly.
+.md-input-wrapper {
+ margin: 16px 0;
+}
- .md-input-infix {
- position: relative;
+// We use a table layout to baseline align the prefix and suffix classes.
+// The underline is outside of it so it can cover all of the elements under
+// this table.
+// Flex does not respect the baseline. What we really want is akin to a table
+// as want an inline-block where elements don't wrap.
+.md-input-table {
+ display: inline-table;
+ flex-flow: column;
+ vertical-align: bottom;
+ width: 100%;
+
+ & > * {
+ display: table-cell;
}
+}
- // The placeholder label. This is invisible unless it is. The logic to show it is
- // basically `empty || (float && (!empty || focused))`. Float is dependent on the
- // `floatingPlaceholder` input.
- .md-input-placeholder {
- // The placeholder is after the
, but needs to be aligned top-left of the
- // infix
.
- position: absolute;
- left: 0;
- top: 0;
+.md-input-infix {
+ position: relative;
+}
- font-size: 100%;
- pointer-events: none; // We shouldn't catch mouse events (let them through).
- color: $md-input-placeholder-color;
- z-index: 1;
+// The Input element proper.
+.md-input-element {
+ // Font needs to be inherited, because by default
has a system font.
+ font: inherit;
- // Put ellipsis text overflow.
- width: 100%;
- display: none;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow-x: hidden;
+ // The Material input should match whatever background it is above.
+ background: transparent;
- transform: translateY(0);
- transform-origin: bottom left;
- transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
- scale $swift-ease-out-duration $swift-ease-out-timing-function,
- color $swift-ease-out-duration $swift-ease-out-timing-function,
- width $swift-ease-out-duration $swift-ease-out-timing-function;
+ // By default,
has a padding, border, outline and a default width.
+ border: none;
+ outline: none;
+ padding: 0;
+ width: 100%;
- &.md-empty {
- display: block;
- cursor: text;
- }
+ &.md-end {
+ text-align: right;
- // Show the placeholder above the input when it's not empty, or focused.
- &.md-float:not(.md-empty), &.md-float.md-focused {
- @include md-input-placeholder-floating;
+ [dir='rtl'] & {
+ text-align: left;
}
+ }
- // :focus is applied to the input, but we apply md-focused to the other elements
- // that need to listen to it.
- &.md-focused {
- color: $md-input-floating-placeholder-color;
-
- &.md-accent {
- color: $md-input-underline-color-accent;
- }
- &.md-warn {
- color: $md-input-underline-color-warn;
- }
- }
+ // Undo the red box-shadow glow added by Firefox on invalid inputs.
+ // See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
+ &:-moz-ui-invalid {
+ box-shadow: none;
}
// Pseudo-class for Chrome and Safari auto-fill to move the placeholder to
@@ -153,81 +87,103 @@ $md-input-underline-disabled-background-image: linear-gradient(to right,
// fire any events when a form auto-fill is occurring.
// Once the autofill is committed, a change event happen and the regular md-input
// classes take over to fulfill this behaviour.
- input:-webkit-autofill + .md-input-placeholder {
+ &:-webkit-autofill + .md-input-placeholder {
@include md-input-placeholder-floating;
}
+}
- // The underline is what's shown under the input, its prefix and its suffix.
- // The ripple is the blue animation coming on top of it.
- .md-input-underline {
- position: absolute;
- height: 1px;
- width: 100%;
- margin-top: 4px;
- border-top: 1px solid $md-input-underline-color;
-
- &.md-disabled {
- border-top: 0;
- background-image: $md-input-underline-disabled-background-image;
- background-position: 0;
- background-size: 4px 1px;
- background-repeat: repeat-x;
- }
-
- .md-input-ripple {
- position: absolute;
- height: 2px;
- z-index: 1;
- background-color: $md-input-underline-focused-color;
- top: -1px;
- width: 100%;
- transform-origin: top;
- opacity: 0;
- transform: scaleY(0);
- transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
- opacity $swift-ease-out-duration $swift-ease-out-timing-function;
-
- &.md-accent {
- background-color: $md-input-underline-color-accent;
- }
- &.md-warn {
- background-color: $md-input-underline-color-warn;
- }
-
- &.md-focused {
- opacity: 1;
- transform: scaleY(1);
- }
- }
+// The placeholder label. This is invisible unless it is. The logic to show it is
+// basically `empty || (float && (!empty || focused))`. Float is dependent on the
+// `floatingPlaceholder` input.
+.md-input-placeholder {
+ // The placeholder is after the
, but needs to be aligned top-left of the
+ // infix
.
+ position: absolute;
+ left: 0;
+ top: 0;
+
+ font-size: 100%;
+ pointer-events: none; // We shouldn't catch mouse events (let them through).
+ z-index: 1;
+
+ // Put ellipsis text overflow.
+ width: 100%;
+ display: none;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+
+ transform: translateY(0);
+ transform-origin: bottom left;
+ transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+ scale $swift-ease-out-duration $swift-ease-out-timing-function,
+ color $swift-ease-out-duration $swift-ease-out-timing-function,
+ width $swift-ease-out-duration $swift-ease-out-timing-function;
+
+ &.md-empty {
+ display: block;
+ cursor: text;
}
- // The hint is shown below the underline. There can be more than one; one at the start
- // and one at the end.
- .md-hint {
- position: absolute;
- font-size: 75%;
- bottom: -0.5em;
+ // Show the placeholder above the input when it's not empty, or focused.
+ &.md-float:not(.md-empty), &.md-float.md-focused {
+ @include md-input-placeholder-floating;
+ }
- &.md-right {
- right: 0;
- }
+ [dir='rtl'] & {
+ transform-origin: bottom right;
}
}
+// The underline is what's shown under the input, its prefix and its suffix.
+// The ripple is the blue animation coming on top of it.
+.md-input-underline {
+ position: absolute;
+ height: 1px;
+ width: 100%;
+ margin-top: 4px;
+ border-top-width: 1px;
+ border-top-style: solid;
+
+ &.md-disabled {
+ border-top: 0;
+ background-image: $md-input-underline-disabled-background-image;
+ background-position: 0;
+ background-size: 4px 1px;
+ background-repeat: repeat-x;
+ }
-// RTL support.
-:host-context([dir='rtl']) {
- text-align: right;
+ .md-input-ripple {
+ position: absolute;
+ height: 2px;
+ z-index: 1;
+ top: -1px;
+ width: 100%;
+ transform-origin: top;
+ opacity: 0;
+ transform: scaleY(0);
+ transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
+ opacity $swift-ease-out-duration $swift-ease-out-timing-function;
- .md-input-placeholder {
- transform-origin: bottom right;
+ &.md-focused {
+ opacity: 1;
+ transform: scaleY(1);
+ }
}
+}
+
+// The hint is shown below the underline. There can be more than one; one at the start
+// and one at the end.
+.md-hint {
+ position: absolute;
+ font-size: 75%;
+ bottom: -0.5em;
- .md-input-element.md-end {
- text-align: left;
+ &.md-right {
+ right: 0;
}
- .md-hint {
+ [dir='rtl'] & {
right: 0;
left: auto;
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index 5ca3e1665ca2..e90a76d64d00 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -16,6 +16,7 @@ import {
Output,
NgModule,
ModuleWithProviders,
+ ViewEncapsulation,
} from '@angular/core';
import {
NG_VALUE_ACCESSOR,
@@ -100,7 +101,8 @@ export class MdHint {
templateUrl: 'input.html',
styleUrls: ['input.css'],
providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
- host: {'(click)' : 'focus()'}
+ host: {'(click)' : 'focus()'},
+ encapsulation: ViewEncapsulation.None,
})
export class MdInput implements ControlValueAccessor, AfterContentInit, OnChanges {
private _focused: boolean = false;
diff --git a/src/lib/list/_list-theme.scss b/src/lib/list/_list-theme.scss
new file mode 100644
index 000000000000..0aee643510cb
--- /dev/null
+++ b/src/lib/list/_list-theme.scss
@@ -0,0 +1,28 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-list-theme($theme) {
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ md-list, md-nav-list {
+ md-list-item, a[md-list-item] {
+ color: md-color($foreground, base);
+ }
+
+ [md-subheader] {
+ color: md-color($foreground, secondary-text);
+ }
+ }
+
+ md-divider {
+ border-top-color: md-color($foreground, divider);
+ }
+
+ md-nav-list .md-list-item {
+ &:hover, &.md-list-item-focus {
+ background: md-color($background, 'hover');
+ }
+ }
+}
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index 3c001d6f5136..ac7190559c98 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -1,12 +1,12 @@
-@import 'variables';
-@import 'default-theme';
-@import 'list-shared';
+@import '../core/style/variables';
+@import '../core/style/list-common';
+
$md-list-side-padding: 16px;
$md-list-avatar-size: 40px;
$md-list-icon-size: 24px;
-/* Normal list variables */
+// Normal list variables
$md-list-top-padding: 8px;
$md-list-font-size: 16px;
$md-list-secondary-font: 14px;
@@ -18,7 +18,7 @@ $md-list-avatar-height: 56px;
$md-list-two-line-height: 72px;
$md-list-three-line-height: 88px;
-/* Dense list variables */
+// Dense list variables
$md-dense-top-padding: 4px;
$md-dense-font-size: 13px;
$md-dense-base-height: 40px;
@@ -26,10 +26,8 @@ $md-dense-avatar-height: 48px;
$md-dense-two-line-height: 60px;
$md-dense-three-line-height: 76px;
-/*
-This mixin provides all list-item styles, changing font size and height
-based on whether the list is in dense mode.
-*/
+// This mixin provides all list-item styles, changing font size and height
+// based on whether the list is in dense mode.
@mixin md-list-item-base($font-size, $base-height, $avatar-height,
$two-line-height, $three-line-height) {
@@ -42,7 +40,6 @@ based on whether the list is in dense mode.
font-size: $font-size;
height: $base-height;
padding: 0 $md-list-side-padding;
- color: md-color($md-foreground, base);
}
&.md-list-avatar .md-list-item {
@@ -80,10 +77,8 @@ based on whether the list is in dense mode.
}
}
-/*
-This mixin provides all subheader styles, adjusting heights and padding
-based on whether the list is in dense mode.
-*/
+// This mixin provides all subheader styles, adjusting heights and padding
+// based on whether the list is in dense mode.
@mixin md-subheader-base($top-padding, $secondary-size, $base-height) {
display: block;
box-sizing: border-box;
@@ -93,7 +88,6 @@ based on whether the list is in dense mode.
font-size: $secondary-size;
font-weight: 500;
- color: md-color($md-foreground, secondary-text);
&:first-child {
margin-top: -$top-padding;
@@ -150,12 +144,11 @@ md-list[dense], md-nav-list[dense] {
@include md-line-base($md-dense-font-size);
}
-
}
md-divider {
display: block;
- border-top: 1px solid md-color($md-foreground, divider);
+ border-top: 1px solid;
margin: 0;
}
@@ -170,7 +163,6 @@ md-nav-list {
&:hover, &.md-list-item-focus {
outline: none;
- background: md-color($md-background, 'hover');
}
}
}
diff --git a/src/lib/menu/_menu-theme.scss b/src/lib/menu/_menu-theme.scss
new file mode 100644
index 000000000000..feb32dc56fe0
--- /dev/null
+++ b/src/lib/menu/_menu-theme.scss
@@ -0,0 +1,25 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-menu-theme($theme) {
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .md-menu {
+ background: md-color($background, 'card');
+ }
+
+ [md-menu-item] {
+ background: transparent;
+ color: md-color($foreground, 'text');
+
+ &[disabled] {
+ color: md-color($foreground, 'disabled');
+ }
+
+ &:hover:not([disabled]), &:focus:not([disabled]) {
+ background: md-color($background, 'hover');
+ }
+ }
+}
diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss
index c5c35b8221e5..a1eaca0fdaa1 100644
--- a/src/lib/menu/menu.scss
+++ b/src/lib/menu/menu.scss
@@ -1,11 +1,11 @@
// TODO(kara): update vars for desktop when MD team responds
// TODO(kara): animation for menu opening
-@import 'variables';
-@import 'elevation';
-@import 'default-theme';
-@import 'button-mixins';
-@import 'sidenav-mixins';
-@import 'list-shared';
+@import '../core/style/variables';
+@import '../core/style/elevation';
+@import '../core/style/button-common';
+@import '../core/style/sidenav-common';
+@import '../core/style/list-common';
+
// menu width must be a multiple of 56px
$md-menu-overlay-min-width: 112px !default; // 56 * 2
@@ -26,7 +26,6 @@ $md-menu-vertical-padding: 8px !default;
overflow: auto;
-webkit-overflow-scrolling: touch; // for momentum scroll on mobile
- background: md-color($md-background, 'card');
padding-top: $md-menu-vertical-padding;
padding-bottom: $md-menu-vertical-padding;
}
@@ -45,16 +44,10 @@ $md-menu-vertical-padding: 8px !default;
font-family: $md-font-family;
text-align: start;
text-decoration: none; // necessary to reset anchor tags
- color: md-color($md-foreground, 'text');
&[disabled] {
- color: md-color($md-foreground, 'disabled');
cursor: default;
}
-
- &:hover:not([disabled]), &:focus:not([disabled]) {
- background: md-color($md-background, 'hover');
- }
}
button[md-menu-item] {
@@ -63,4 +56,4 @@ button[md-menu-item] {
.md-menu-click-catcher {
@include md-fullscreen();
-}
\ No newline at end of file
+}
diff --git a/src/lib/progress-bar/_progress-bar-theme.scss b/src/lib/progress-bar/_progress-bar-theme.scss
new file mode 100644
index 000000000000..5e6e01c74e70
--- /dev/null
+++ b/src/lib/progress-bar/_progress-bar-theme.scss
@@ -0,0 +1,78 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-progress-bar-theme($theme) {
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+
+ // TODO(josephperrott): Find better way to inline svgs.
+ // In buffer mode a repeated SVG object is used as a background.
+ // Each of the following defines the SVG object for each of the class defined colors.
+ //
+ // Each string is a URL encoded version of:
+ //
+ //
+ //
+ $buffer-bubbles-primary-url: url(
+ 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
+ '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
+ 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
+ '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
+ md-color($primary, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
+ $buffer-bubbles-accent-url: url(
+ 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
+ '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
+ 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
+ '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
+ md-color($accent, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
+ $buffer-bubbles-warn-url: url(
+ 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
+ '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
+ 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
+ '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
+ md-color($warn, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
+
+ .md-progress-bar-background {
+ background: $buffer-bubbles-primary-url;
+ }
+
+ .md-progress-bar-buffer {
+ background-color: md-color($primary, 100);
+ }
+
+ md-progress-bar[color='accent'] {
+ .md-progress-bar-background {
+ background: $buffer-bubbles-accent-url;
+ }
+
+ .md-progress-bar-buffer {
+ background-color: md-color($accent, 100);
+ }
+ .md-progress-bar-fill::after {
+ background-color: md-color($accent, 600);
+ }
+ }
+
+ md-progress-bar[color='warn'] {
+ .md-progress-bar-background {
+ background: $buffer-bubbles-warn-url;
+ }
+
+ .md-progress-bar-buffer {
+ background-color: md-color($warn, 100);
+ }
+ .md-progress-bar-fill::after {
+ background-color: md-color($warn, 600);
+ }
+ }
+
+ .md-progress-bar-fill::after {
+ background-color: md-color($primary, 600);
+ }
+}
diff --git a/src/lib/progress-bar/progress-bar.scss b/src/lib/progress-bar/progress-bar.scss
index bfc052fa2745..81bdaa48ff57 100644
--- a/src/lib/progress-bar/progress-bar.scss
+++ b/src/lib/progress-bar/progress-bar.scss
@@ -1,41 +1,10 @@
-@import 'variables';
-@import 'default-theme';
+@import '../core/style/variables';
+
$md-progress-bar-height: 5px !default;
$md-progress-bar-full-animation-duration: 2000ms !default;
$md-progress-bar-piece-animation-duration: 250ms !default;
-// TODO(josephperrott): Find better way to inline svgs.
-/** In buffer mode a repeated SVG object is used as a background. Each of the following defines the SVG object for each
- of the class defined colors.
-
- Each string is a URL encoded version of:
-
-
-
- */
-$md-buffer-bubbles-primary-url: url(
- 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
- '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
- 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
- '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
- md-color($md-primary, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
-$md-buffer-bubbles-accent-url: url(
- 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
- '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
- 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
- '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
- md-color($md-accent, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
-$md-buffer-bubbles-warn-url: url(
- 'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27' +
- '%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20enable-backgroun' +
- 'd%3D%27new%200%200%205%202%27%20xml%3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio' +
- '%3D%27none%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
- md-color($md-warn, 100) + '%27%2F%3E%3C%2Fsvg%3E') !default;
:host {
display: block;
@@ -48,9 +17,9 @@ $md-buffer-bubbles-warn-url: url(
transition: opacity $md-progress-bar-piece-animation-duration linear;
width: 100%;
- // The progress bar background is used to show the bubble animation scrolling behind a buffering progress bar.
+ // The progress bar background is used to show the bubble animation scrolling behind a
+ // buffering progress bar.
.md-progress-bar-background {
- background: $md-buffer-bubbles-primary-url;
background-repeat: repeat-x;
background-size: 10px 4px;
height: 100%;
@@ -59,12 +28,9 @@ $md-buffer-bubbles-warn-url: url(
width: 100%;
}
- /**
- * The progress bar buffer is the bar indicator showing the buffer value and is only visible beyond the current value
- * of the primary progress bar.
- */
+ // The progress bar buffer is the bar indicator showing the buffer value and is only visible
+ // beyond the current value of the primary progress bar.
.md-progress-bar-buffer {
- background-color: md-color($md-primary, 100);
height: 100%;
position: absolute;
transform-origin: top left;
@@ -72,16 +38,13 @@ $md-buffer-bubbles-warn-url: url(
width: 100%;
}
- /**
- * The secondary progress bar is only used in the indeterminate animation, because of this it is hidden in other uses.
- */
+ // The secondary progress bar is only used in the indeterminate animation, because of this it
+ // is hidden in other uses.
.md-progress-bar-secondary {
visibility: hidden;
}
- /**
- * The progress bar fill fills the progress bar with the indicator color.
- */
+ // The progress bar fill fills the progress bar with the indicator color.
.md-progress-bar-fill {
animation: none;
height: 100%;
@@ -91,12 +54,9 @@ $md-buffer-bubbles-warn-url: url(
width: 100%;
}
- /**
- * A pseudo element is created for each progress bar bar that fills with the indicator color.
- */
+ // A pseudo element is created for each progress bar bar that fills with the indicator color.
.md-progress-bar-fill::after {
animation: none;
- background-color: md-color($md-primary, 600);
content: '';
display: inline-block;
height: 100%;
@@ -104,34 +64,6 @@ $md-buffer-bubbles-warn-url: url(
width: 100%;
}
- &[color='accent'] {
- .md-progress-bar-background {
- background: $md-buffer-bubbles-accent-url;
- background-repeat: repeat-x;
- background-size: 10px 4px;
- }
- .md-progress-bar-buffer {
- background-color: md-color($md-accent, 100);
- }
- .md-progress-bar-fill::after {
- background-color: md-color($md-accent, 600);
- }
- }
-
- &[color='warn'] {
- .md-progress-bar-background {
- background: $md-buffer-bubbles-warn-url;
- background-repeat: repeat-x;
- background-size: 10px 4px;
- }
- .md-progress-bar-buffer {
- background-color: md-color($md-warn, 100);
- }
- .md-progress-bar-fill::after {
- background-color: md-color($md-warn, 600);
- }
- }
-
&[mode='query'] {
transform: rotateZ(180deg);
}
@@ -172,27 +104,25 @@ $md-buffer-bubbles-warn-url: url(
transform: rotateY(180deg);
}
+// The values used for animations in md-progress-bar, both timing and transformation, can be
+// considered magic values. They are sourced from the Material Design example spec and duplicate
+// the values of the original designers definitions.
+//
+// The indeterminate state is essentially made up of two progress bars, one primary (the one that
+// is shown in both the determinate and indeterminate states) and one secondary, which essentially
+// mirrors the primary progress bar in appearance but is only shown to assist with the
+// indeterminate animations.
+
+// KEYFRAME BLOCK DESCRIPTION
+// primary-indeterminate-translate Translation of the primary progressbar across the screen
+// primary-indeterminate-scale Scaling of the primary bar as it's being translated across the screen
+// secondary-indeterminate-translate Translation of the secondary bar across the screen
+// secondary-indeterminate-scale Scaling of the secondary bar as it's being translated across the screen
+//
+// Because two different transform animations need to be applied at once, the translation is
+// applied to the outer element and the scaling is applied to the inner element, which provides the
+// illusion necessary to make the animation work.
-/** The values used for animations in md-progress-bar, both timing and transformation, can be considered magic values.
- They are sourced from the Material Design example spec and duplicate the values of the original designers
- definitions.
-
-
- The indeterminate state is essentially made up of two progress bars, one primary (the one that is shown in both the
- determinate and indeterminate states) and one secondary, which essentially mirrors the primary progress bar in
- appearance but is only shown to assist with the indeterminate animations.
-
-
- KEYFRAME BLOCK DESCRIPTION
- primary-indeterminate-translate Translation of the primary progressbar across the screen
- primary-indeterminate-scale Scaling of the primary progressbar as it's being translated across the screen
- secondary-indeterminate-translate Translation of the secondary progressbar across the screen
- secondary-indeterminate-scale Scaling of the secondary progressbar as it's being translated across the screen
-
- Because two different transform animations need to be applied at once, the translation is applied to the outer
- element and the scaling is applied to the inner element, which provides the illusion necessary to make the animation
- work.
-*/
// Progress Bar Timing functions:
// $md-progress-bar-primary-indeterminate-translate-step-1 has no timing function.
@@ -215,7 +145,9 @@ $md-progress-bar-secondary-indeterminate-scale-step-2: cubic-bezier(0.31033, 0.2
$md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(0.4, 0.627035, 0.6, 0.902026) !default;
// $md-progress-bar-secondary-indeterminate-scale-step-4 has no timing function
-/** Animations for indeterminate and query mode. */
+
+// Animations for indeterminate and query mode.
+
// Primary indicator.
@keyframes md-progress-bar-primary-indeterminate-translate {
0% {
@@ -289,7 +221,7 @@ $md-progress-bar-secondary-indeterminate-scale-step-3: cubic-bezier(0.4, 0.62703
}
}
-/** Animation for buffer mode. */
+// Animation for buffer mode.
@keyframes md-progress-bar-background-scroll {
to {
transform: translateX(-10px);
diff --git a/src/lib/progress-circle/_progress-circle-theme.scss b/src/lib/progress-circle/_progress-circle-theme.scss
new file mode 100644
index 000000000000..c29e59f74ba8
--- /dev/null
+++ b/src/lib/progress-circle/_progress-circle-theme.scss
@@ -0,0 +1,23 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-progress-circle-theme($theme) {
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+
+ md-progress-circle {
+ path {
+ stroke: md-color($primary, 600);
+ }
+
+ &[color='accent'] path {
+ stroke: md-color($accent, 600);
+ }
+
+ &[color='warn'] path {
+ stroke: md-color($warn, 600);
+ }
+ }
+}
diff --git a/src/lib/progress-circle/progress-circle.scss b/src/lib/progress-circle/progress-circle.scss
index 2fa7a4f588d8..a96798678f3f 100644
--- a/src/lib/progress-circle/progress-circle.scss
+++ b/src/lib/progress-circle/progress-circle.scss
@@ -1,13 +1,12 @@
-@import 'variables';
+@import '../core/style/variables';
-@import 'default-theme';
-/* Animation Durations */
+// Animation Durations
$md-progress-circle-duration: 5250ms !default;
$md-progress-circle-constant-rotate-duration: $md-progress-circle-duration * 0.55 !default;
$md-progress-circle-sporadic-rotate-duration: $md-progress-circle-duration !default;
-/** Component sizing */
+// Component sizing
$md-progress-circle-stroke-width: 10px !default;
// Height and weight of the viewport for md-progress-circle.
$md-progress-circle-viewport-size: 100px !default;
@@ -15,15 +14,14 @@ $md-progress-circle-viewport-size: 100px !default;
:host {
display: block;
- /** Height and width are provided for md-progress-circle to act as a default.
- The height and width are expected to be overwritten by application css. */
+ // Height and width are provided for md-progress-circle to act as a default.
+ // The height and width are expected to be overwritten by application css.
height: $md-progress-circle-viewport-size;
width: $md-progress-circle-viewport-size;
- /** SVG's viewBox is defined as 0 0 100 100, this means that all SVG children will placed
- based on a 100px by 100px box. Additionally all SVG sizes and locations are in reference to
- this viewBox.
- */
+ // SVG's viewBox is defined as 0 0 100 100, this means that all SVG children will placed
+ // based on a 100px by 100px box. Additionally all SVG sizes and locations are in reference to
+ // this viewBox.
svg {
height: 100%;
width: 100%;
@@ -33,18 +31,9 @@ $md-progress-circle-viewport-size: 100px !default;
path {
fill: transparent;
- stroke: md-color($md-primary, 600);
- /** Stroke width of 10px defines stroke as 10% of the viewBox */
- stroke-width: $md-progress-circle-stroke-width;
- }
-
- &[color='accent'] path {
- stroke: md-color($md-accent, 600);
- }
-
- &[color='warn'] path {
- stroke: md-color($md-warn, 600);
+ // Stroke width of 10px defines stroke as 10% of the viewBox.
+ stroke-width: $md-progress-circle-stroke-width;
}
@@ -61,7 +50,7 @@ $md-progress-circle-viewport-size: 100px !default;
}
-/** Animations for indeterminate mode */
+// Animations for indeterminate mode
@keyframes md-progress-circle-linear-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
diff --git a/src/lib/radio/_radio-theme.scss b/src/lib/radio/_radio-theme.scss
new file mode 100644
index 000000000000..a6e2229a7a29
--- /dev/null
+++ b/src/lib/radio/_radio-theme.scss
@@ -0,0 +1,36 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+
+@mixin md-radio-theme($theme) {
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+ $warn: map-get($theme, warn);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
+
+ .md-radio-outer-circle {
+ border-color: md-color($foreground, secondary-text);
+
+ .md-radio-checked & {
+ border-color: md-color($accent);
+ }
+
+ .md-radio-disabled & {
+ border-color: md-color($foreground, disabled);
+ }
+ }
+
+ .md-radio-inner-circle {
+ background-color: md-color($accent);
+
+ .md-radio-disabled & {
+ background-color: md-color($foreground, disabled);
+ }
+ }
+
+ // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied.
+ .md-radio-focused .md-ink-ripple {
+ background-color: md-color($accent, 0.26);
+ }
+}
diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html
index fd1aa756c2b7..aa0c80a4657f 100644
--- a/src/lib/radio/radio.html
+++ b/src/lib/radio/radio.html
@@ -8,7 +8,7 @@
-
-