🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
@angular2-material/checkbox
Advanced tools
@angular2-material/checkbox - npm Package Compare versions
| @import '../core/theming/theming'; | ||
| @mixin md-checkbox-theme($theme) { | ||
| $is-dark-theme: map-get($theme, is-dark); | ||
| $primary: map-get($theme, primary); | ||
| $accent: map-get($theme, accent); | ||
| $background: map-get($theme, background); | ||
| // The color of the checkbox border. | ||
| $checkbox-border-color: if($is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)) !default; | ||
| // The color of the checkbox's checkmark / mixedmark. | ||
| $checkbox-mark-color: md-color($background, background); | ||
| // The color that is used as the checkbox background when it is checked. | ||
| $checkbox-background-color: md-color($accent, 500); | ||
| // 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: #686868; | ||
| $black-26pct-opacity-on-light: #b0b0b0; | ||
| $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light); | ||
| .md-checkbox-frame { | ||
| border-color: $checkbox-border-color; | ||
| } | ||
| .md-checkbox-checkmark { | ||
| fill: $checkbox-mark-color; | ||
| } | ||
| .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: $checkbox-mark-color !important; | ||
| } | ||
| .md-checkbox-mixedmark { | ||
| background-color: $checkbox-mark-color; | ||
| } | ||
| .md-checkbox-indeterminate, .md-checkbox-checked { | ||
| .md-checkbox-background { | ||
| background-color: $checkbox-background-color; | ||
| } | ||
| } | ||
| .md-checkbox-disabled { | ||
| &.md-checkbox-checked, &.md-checkbox-indeterminate { | ||
| .md-checkbox-background { | ||
| background-color: $disabled-color; | ||
| } | ||
| } | ||
| &:not(.md-checkbox-checked) { | ||
| .md-checkbox-frame { | ||
| border-color: $disabled-color; | ||
| } | ||
| } | ||
| } | ||
| // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied. | ||
| .md-checkbox-focused .md-ink-ripple { | ||
| background-color: md-color($accent, 0.26); | ||
| } | ||
| } |
+2
-103
@@ -1,31 +0,1 @@ | ||
| /** | ||
| * 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 | ||
| */ | ||
| /** | ||
| * This mixin hides an element visually. | ||
| * That means it's still accessible for screen-readers but not visible in view. | ||
| */ | ||
| /** | ||
| * Forces an element to grow to fit floated contents; used as as an alternative to | ||
| * `overflow: hidden;` because it doesn't cut off contents. | ||
| */ | ||
| /** | ||
| * 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. | ||
| */ | ||
| /** The width/height of the checkbox element. */ | ||
| /** The width of the line used to draw the checkmark / mixedmark. */ | ||
| /** The width of the checkbox border shown when the checkbox is unchecked. */ | ||
| /** The color of the checkbox border. */ | ||
| /** The color of the checkbox's checkmark / mixedmark. */ | ||
| /** The color that is used as the checkbox background when it is checked. */ | ||
| /** The base duration used for the majority of transitions for the checkbox. */ | ||
| /** The amount of spacing between the checkbox and its label. */ | ||
| /** | ||
| * Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}. | ||
| */ | ||
| @keyframes md-checkbox-fade-in-background { | ||
@@ -37,5 +7,2 @@ 0% { | ||
| /** | ||
| * Fades out the background of the checkbox when it goes from {checked,indeterminate} -> unchecked. | ||
| */ | ||
| @keyframes md-checkbox-fade-out-background { | ||
@@ -47,5 +14,2 @@ 0%, 50% { | ||
| /** | ||
| * "Draws" in the checkmark when the checkbox goes from unchecked -> checked. | ||
| */ | ||
| @keyframes md-checkbox-unchecked-checked-checkmark-path { | ||
@@ -59,5 +23,2 @@ 0%, 50% { | ||
| /** | ||
| * Horizontally expands the mixedmark when the checkbox goes from unchecked -> indeterminate. | ||
| */ | ||
| @keyframes md-checkbox-unchecked-indeterminate-mixedmark { | ||
@@ -71,5 +32,2 @@ 0%, 68.2% { | ||
| /** | ||
| * "Erases" the checkmark when the checkbox goes from checked -> unchecked. | ||
| */ | ||
| @keyframes md-checkbox-checked-unchecked-checkmark-path { | ||
@@ -82,6 +40,2 @@ from { | ||
| /** | ||
| * 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 { | ||
@@ -96,7 +50,2 @@ from { | ||
| /** | ||
| * 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 { | ||
@@ -111,7 +60,2 @@ from { | ||
| /** | ||
| * 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 { | ||
@@ -126,7 +70,2 @@ from { | ||
| /** | ||
| * 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 { | ||
@@ -141,6 +80,2 @@ from { | ||
| /** | ||
| * Horizontally collapses and fades out the mixedmark when the checkbox goes from indeterminate -> | ||
| * unchecked. | ||
| */ | ||
| @keyframes md-checkbox-indeterminate-unchecked-mixedmark { | ||
@@ -155,5 +90,2 @@ 0% { | ||
| /** | ||
| * Applied to elements that cover the checkbox's entire inner container. | ||
| */ | ||
| .md-checkbox-frame, .md-checkbox-background, .md-checkbox-checkmark { | ||
@@ -166,13 +98,5 @@ bottom: 0; | ||
| /** | ||
| * Applied to elements that are considered "marks" within the checkbox, e.g. the checkmark and | ||
| * the mixedmark. | ||
| */ | ||
| .md-checkbox-checkmark, .md-checkbox-mixedmark { | ||
| width: calc(100% - 4px); } | ||
| /** | ||
| * 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-frame, .md-checkbox-background { | ||
@@ -211,3 +135,3 @@ border-radius: 2px; | ||
| background-color: transparent; | ||
| border: 2px solid rgba(0, 0, 0, 0.54); | ||
| border: 2px solid; | ||
| transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1); | ||
@@ -224,7 +148,5 @@ will-change: border-color; } | ||
| .md-checkbox-checkmark { | ||
| fill: #fafafa; | ||
| width: 100%; } | ||
| .md-checkbox-checkmark-path { | ||
| stroke: #fafafa !important; | ||
| stroke-dashoffset: 22.91026; | ||
@@ -235,3 +157,2 @@ stroke-dasharray: 22.91026; | ||
| .md-checkbox-mixedmark { | ||
| background-color: #fafafa; | ||
| height: 2px; | ||
@@ -258,8 +179,2 @@ opacity: 0; | ||
| .md-checkbox-checked .md-checkbox-background { | ||
| background-color: #9c27b0; } | ||
| .md-checkbox-indeterminate .md-checkbox-background { | ||
| background-color: #9c27b0; } | ||
| .md-checkbox-indeterminate .md-checkbox-checkmark { | ||
@@ -281,6 +196,2 @@ opacity: 0; | ||
| cursor: default; } | ||
| .md-checkbox-disabled.md-checkbox-checked .md-checkbox-background, .md-checkbox-disabled.md-checkbox-indeterminate .md-checkbox-background { | ||
| background-color: #b0b0b0; } | ||
| .md-checkbox-disabled:not(.md-checkbox-checked) .md-checkbox-frame { | ||
| border-color: #b0b0b0; } | ||
@@ -323,13 +234,2 @@ .md-checkbox-anim-unchecked-checked .md-checkbox-background { | ||
| .md-checkbox-input { | ||
| border: 0; | ||
| clip: rect(0 0 0 0); | ||
| height: 1px; | ||
| margin: -1px; | ||
| overflow: hidden; | ||
| padding: 0; | ||
| position: absolute; | ||
| text-transform: none; | ||
| width: 1px; } | ||
| .md-ink-ripple { | ||
@@ -349,4 +249,3 @@ border-radius: 50%; | ||
| .md-checkbox-focused .md-ink-ripple { | ||
| opacity: 1; | ||
| background-color: rgba(156, 39, 176, 0.26); } | ||
| opacity: 1; } | ||
@@ -353,0 +252,0 @@ .md-checkbox-disabled .md-ink-ripple { |
+1
-1
@@ -1,1 +0,1 @@ | ||
| {"version":3,"file":"checkbox/checkbox.css","sources":["checkbox/checkbox.scss","core/style/_default-theme.scss","core/style/_theme-functions.scss","core/style/_palette.scss","core/style/_variables.scss","core/style/_mixins.scss"],"sourcesContent":["@import 'default-theme';\n@import 'theme-functions';\n@import 'variables';\n@import 'mixins';\n\n/** The width/height of the checkbox element. */\n$md-checkbox-size: $md-toggle-size !default;\n/** The width of the line used to draw the checkmark / mixedmark. */\n$md-checkbox-mark-stroke-size: 2/15 * $md-checkbox-size !default;\n/** The width of the checkbox border shown when the checkbox is unchecked. */\n$md-checkbox-border-width: 2px;\n/** The color of the checkbox border. */\n$md-checkbox-border-color: if($md-is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)) !default;\n/** The color of the checkbox's checkmark / mixedmark. */\n$md-checkbox-mark-color: md-color($md-background, background);\n/** The color that is used as the checkbox background when it is checked. */\n$md-checkbox-background-color: md-color($md-accent, 500);\n/** The base duration used for the majority of transitions for the checkbox. */\n$md-checkbox-transition-duration: 90ms;\n/** The amount of spacing between the checkbox and its label. */\n$md-checkbox-item-spacing: $md-toggle-padding;\n\n// Manual calculation done on SVG\n$_md-checkbox-mark-path-length: 22.910259;\n$_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1);\n\n/**\n * Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.\n */\n@keyframes md-checkbox-fade-in-background {\n 0% {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n}\n\n/**\n * Fades out the background of the checkbox when it goes from {checked,indeterminate} -> unchecked.\n */\n@keyframes md-checkbox-fade-out-background {\n 0%, 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n/**\n * \"Draws\" in the checkmark when the checkbox goes from unchecked -> checked.\n */\n@keyframes md-checkbox-unchecked-checked-checkmark-path {\n 0%, 50% {\n stroke-dashoffset: $_md-checkbox-mark-path-length;\n }\n\n 50% {\n animation-timing-function: $md-linear-out-slow-in-timing-function;\n }\n\n 100% {\n stroke-dashoffset: 0;\n }\n}\n\n/**\n * Horizontally expands the mixedmark when the checkbox goes from unchecked -> indeterminate.\n */\n@keyframes md-checkbox-unchecked-indeterminate-mixedmark {\n 0%, 68.2% {\n transform: scaleX(0);\n }\n\n 68.2% {\n animation-timing-function: cubic-bezier(0, 0, 0, 1);\n }\n\n 100% {\n transform: scaleX(1);\n }\n}\n\n/**\n * \"Erases\" the checkmark when the checkbox goes from checked -> unchecked.\n */\n@keyframes md-checkbox-checked-unchecked-checkmark-path {\n from {\n animation-timing-function: $md-fast-out-linear-in-timing-function;\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: $_md-checkbox-mark-path-length * -1;\n }\n}\n\n/**\n * Rotates and fades out the checkmark when the checkbox goes from checked -> indeterminate. This\n * animation helps provide the illusion of the checkmark \"morphing\" into the mixedmark.\n */\n@keyframes md-checkbox-checked-indeterminate-checkmark {\n from {\n animation-timing-function: $md-linear-out-slow-in-timing-function;\n opacity: 1;\n transform: rotate(0deg);\n }\n\n to {\n opacity: 0;\n transform: rotate(45deg);\n }\n}\n\n/**\n * Rotates and fades the checkmark back into position when the checkbox goes from indeterminate ->\n * checked. This animation helps provide the illusion that the mixedmark is \"morphing\" into the\n * checkmark.\n */\n@keyframes md-checkbox-indeterminate-checked-checkmark {\n from {\n animation-timing-function: $_md-checkbox-indeterminate-checked-easing-function;\n opacity: 0;\n transform: rotate(45deg);\n }\n\n to {\n opacity: 1;\n transform: rotate(360deg);\n }\n}\n\n/**\n * Rotates and fades in the mixedmark when the checkbox goes from checked -> indeterminate. This\n * animation, similar to md-checkbox-checked-indeterminate-checkmark, helps provide an illusion\n * of \"morphing\" from checkmark -> mixedmark.\n */\n@keyframes md-checkbox-checked-indeterminate-mixedmark {\n from {\n animation-timing-function: $md-linear-out-slow-in-timing-function;\n opacity: 0;\n transform: rotate(-45deg);\n }\n\n to {\n opacity: 1;\n transform: rotate(0deg);\n }\n}\n\n/**\n * Rotates and fades out the mixedmark when the checkbox goes from indeterminate -> checked. This\n * animation, similar to md-checkbox-indeterminate-checked-checkmark, helps provide an illusion\n * of \"morphing\" from mixedmark -> checkmark.\n */\n@keyframes md-checkbox-indeterminate-checked-mixedmark {\n from {\n animation-timing-function: $_md-checkbox-indeterminate-checked-easing-function;\n opacity: 1;\n transform: rotate(0deg);\n }\n\n to {\n opacity: 0;\n transform: rotate(315deg);\n }\n}\n\n/**\n * Horizontally collapses and fades out the mixedmark when the checkbox goes from indeterminate ->\n * unchecked.\n */\n@keyframes md-checkbox-indeterminate-unchecked-mixedmark {\n 0% {\n animation-timing-function: linear;\n opacity: 1;\n transform: scaleX(1);\n }\n\n 32.8%, 100% {\n opacity: 0;\n transform: scaleX(0);\n }\n}\n\n/**\n * Applied to elements that cover the checkbox's entire inner container.\n */\n%md-checkbox-cover-element {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n/**\n * Applied to elements that are considered \"marks\" within the checkbox, e.g. the checkmark and\n * the mixedmark.\n */\n%md-checkbox-mark {\n $width-padding-inset: 2 * $md-checkbox-border-width;\n width: calc(100% - #{$width-padding-inset});\n}\n\n/**\n * Applied to elements that appear to make up the outer box of the checkmark, such as the frame\n * that contains the border and the actual background element that contains the marks.\n */\n%md-checkbox-outer-box {\n @extend %md-checkbox-cover-element;\n border-radius: 2px;\n box-sizing: border-box;\n pointer-events: none;\n}\n\nmd-checkbox {\n cursor: pointer;\n}\n\n.md-checkbox-layout {\n // `cursor: inherit` ensures that the wrapper element gets the same cursor as the md-checkbox\n // (e.g. pointer by default, regular when disabled), instead of the browser default.\n cursor: inherit;\n align-items: baseline;\n display: inline-flex;\n}\n\n.md-checkbox-inner-container {\n display: inline-block;\n height: $md-checkbox-size;\n line-height: 0;\n margin: auto;\n margin-right: $md-checkbox-item-spacing;\n order: 0;\n position: relative;\n vertical-align: middle;\n white-space: nowrap;\n width: $md-checkbox-size;\n\n [dir='rtl'] & {\n margin: {\n left: $md-checkbox-item-spacing;\n right: auto;\n }\n }\n}\n\n// TODO(kara): Remove this style when fixing vertical baseline\n.md-checkbox-layout .md-checkbox-label {\n line-height: 24px;\n}\n\n.md-checkbox-frame {\n @extend %md-checkbox-outer-box;\n\n background-color: transparent;\n border: $md-checkbox-border-width solid $md-checkbox-border-color;\n transition: border-color $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function;\n will-change: border-color;\n}\n\n.md-checkbox-background {\n @extend %md-checkbox-outer-box;\n\n align-items: center;\n display: inline-flex;\n justify-content: center;\n transition: background-color $md-checkbox-transition-duration\n $md-linear-out-slow-in-timing-function,\n opacity $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function;\n will-change: background-color, opacity;\n}\n\n.md-checkbox-checkmark {\n @extend %md-checkbox-cover-element;\n @extend %md-checkbox-mark;\n\n fill: $md-checkbox-mark-color;\n width: 100%;\n}\n\n.md-checkbox-checkmark-path {\n // !important is needed here because a stroke must be set as an attribute on the SVG in order\n // for line animation to work properly.\n stroke: $md-checkbox-mark-color !important;\n stroke: {\n dashoffset: $_md-checkbox-mark-path-length;\n dasharray: $_md-checkbox-mark-path-length;\n width: $md-checkbox-mark-stroke-size;\n }\n}\n\n.md-checkbox-mixedmark {\n @extend %md-checkbox-mark;\n\n background-color: $md-checkbox-mark-color;\n height: floor($md-checkbox-mark-stroke-size);\n opacity: 0;\n transform: scaleX(0) rotate(0deg);\n}\n\n.md-checkbox-align-end {\n .md-checkbox-inner-container {\n order: 1;\n margin: {\n left: $md-checkbox-item-spacing;\n right: auto;\n }\n\n [dir='rtl'] & {\n margin: {\n left: auto;\n right: $md-checkbox-item-spacing;\n }\n }\n }\n}\n\n.md-checkbox-checked {\n .md-checkbox-checkmark {\n opacity: 1;\n }\n\n .md-checkbox-checkmark-path {\n stroke-dashoffset: 0;\n }\n\n .md-checkbox-mixedmark {\n transform: scaleX(1) rotate(-45deg);\n }\n\n .md-checkbox-background {\n background-color: $md-checkbox-background-color;\n }\n}\n\n.md-checkbox-indeterminate {\n .md-checkbox-background {\n background-color: $md-checkbox-background-color;\n }\n\n .md-checkbox-checkmark {\n opacity: 0;\n transform: rotate(45deg);\n }\n\n .md-checkbox-checkmark-path {\n stroke-dashoffset: 0;\n }\n\n .md-checkbox-mixedmark {\n opacity: 1;\n transform: scaleX(1) rotate(0deg);\n }\n}\n\n\n.md-checkbox-unchecked {\n .md-checkbox-background {\n background-color: transparent;\n }\n}\n\n.md-checkbox-disabled {\n // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,\n // this does not work well with elements layered on top of one another. To get around this we\n // blend the colors together based on the base color and the theme background.\n $white-30pct-opacity-on-dark-theme: #686868;\n $black-26pct-opacity-on-light-theme: #b0b0b0;\n $disabled-color: if(\n $md-is-dark-theme, $white-30pct-opacity-on-dark-theme, $black-26pct-opacity-on-light-theme);\n\n cursor: default;\n\n &.md-checkbox-checked,\n &.md-checkbox-indeterminate {\n .md-checkbox-background {\n background-color: $disabled-color;\n }\n }\n\n &:not(.md-checkbox-checked) {\n .md-checkbox-frame {\n border-color: $disabled-color;\n }\n }\n}\n\n.md-checkbox-anim {\n $indeterminate-change-duration: 500ms;\n\n &-unchecked-checked {\n .md-checkbox-background {\n animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-in-background;\n }\n\n .md-checkbox-checkmark-path {\n // Instead of delaying the animation, we simply multiply its length by 2 and begin the\n // animation at 50% in order to prevent a flash of styles applied to a checked checkmark\n // as the background is fading in before the animation begins.\n animation:\n $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-unchecked-checked-checkmark-path;\n }\n }\n\n &-unchecked-indeterminate {\n .md-checkbox-background {\n animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-in-background;\n }\n\n .md-checkbox-mixedmark {\n animation:\n $md-checkbox-transition-duration linear 0ms md-checkbox-unchecked-indeterminate-mixedmark;\n }\n }\n\n &-checked-unchecked {\n .md-checkbox-background {\n animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-out-background;\n }\n\n .md-checkbox-checkmark-path {\n animation:\n $md-checkbox-transition-duration linear 0ms md-checkbox-checked-unchecked-checkmark-path;\n }\n }\n\n &-checked-indeterminate {\n .md-checkbox-checkmark {\n animation:\n $md-checkbox-transition-duration linear 0ms md-checkbox-checked-indeterminate-checkmark;\n }\n\n .md-checkbox-mixedmark {\n animation:\n $md-checkbox-transition-duration linear 0ms md-checkbox-checked-indeterminate-mixedmark;\n }\n }\n\n &-indeterminate-checked {\n .md-checkbox-checkmark {\n animation:\n $indeterminate-change-duration linear 0ms md-checkbox-indeterminate-checked-checkmark;\n }\n\n .md-checkbox-mixedmark {\n animation:\n $indeterminate-change-duration linear 0ms md-checkbox-indeterminate-checked-mixedmark;\n }\n }\n\n &-indeterminate-unchecked {\n .md-checkbox-background {\n animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-out-background;\n }\n\n .md-checkbox-mixedmark {\n animation:\n $indeterminate-change-duration * 0.6 linear 0ms\n md-checkbox-indeterminate-unchecked-mixedmark;\n }\n }\n}\n\n// Underlying native input element.\n// Visually hidden but still able to respond to focus.\n.md-checkbox-input {\n @include md-visually-hidden;\n}\n\n@include md-temporary-ink-ripple(checkbox);\n","@import 'theme-functions';\n@import 'palette';\n\n\n// Person creating a theme writes variables like this:\n$md-is-dark-theme: false;\n\n\n$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);\n$md-accent: md-palette($md-purple, 500, 300, 800, $md-contrast-palettes);\n$md-warn: md-palette($md-red, 500, 300, 900, $md-contrast-palettes);\n$md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground);\n$md-background: if($md-is-dark-theme, $md-dark-theme-background, $md-light-theme-background);\n","// ** Two main functions for users **\n// md-palette: used for defining your theme in terms of Material hues.\n// md-color: apply colors to components from the palette. Consumes the output of md-palette\n\n// Implement the rem unit with SCSS so we don't have to actually set a font-size on\n// the user's body element.\n@function rem($multiplier) {\n $font-size: 10px;\n @return $multiplier * $font-size;\n}\n\n// For a given hue in a palette, return the contrast color from the map of contrast palettes.\n@function md-contrast($color-map, $hue, $contrast-color-map) {\n @return map-get(map-get($contrast-color-map, $color-map), $hue);\n}\n\n\n// Creates a map of hues to colors for a theme.\n// $color-map\n// $primary\n// $lighter\n// $darker\n@function md-palette($color-map, $primary, $lighter, $darker, $contrast-color-map) {\n $result: map_merge($color-map, (\n default: map-get($color-map, $primary),\n lighter: map-get($color-map, $lighter),\n darker: map-get($color-map, $darker),\n\n default-contrast: md-contrast($color-map, $primary, $contrast-color-map),\n lighter-contrast: md-contrast($color-map, $lighter, $contrast-color-map),\n darker-contrast: md-contrast($color-map, $darker, $contrast-color-map)\n ));\n\n // For each hue in the palette, add a \"-contrast\" color to the map.\n @each $hue, $color in $color-map {\n $result: map_merge($result, (\n '#{$hue}-contrast': md-contrast($color-map, $hue, $contrast-color-map)\n ));\n }\n\n @return $result;\n}\n\n// Gets a color for a material design component.\n// $color-map: a map of {key: color}.\n// $hue-key: key used to lookup the color in $colorMap. Defaults to 'default'\n// If $hue-key is a number between 0 and 1, it will be treated as $opacity.\n// $opacity: the opacity to apply to the color.\n@function md-color($color-map, $hue-key: default, $opacity: 1) {\n // If hueKey is a number between zero and one, then it actually contains an\n // opacity value, so recall this function with the default hue and that given opacity.\n @if type-of($hue-key) == number and $hue-key >= 0 and $hue-key <= 1 {\n @return md-color($color-map, default, $hue-key);\n }\n\n $color: map-get($color-map, $hue-key);\n $opacity: if(opacity($color) < 1, opacity($color), $opacity);\n\n @return rgba($color, $opacity);\n}\n\n\n","// Color palettes from the Material Design spec.\n// See https://www.google.com/design/spec/style/color.html\n\n$md-red: (\n 50: #ffebee,\n 100: #ffcdd2,\n 200: #ef9a9a,\n 300: #e57373,\n 400: #ef5350,\n 500: #f44336,\n 600: #e53935,\n 700: #d32f2f,\n 800: #c62828,\n 900: #b71c1c,\n A100: #ff8a80,\n A200: #ff5252,\n A400: #ff1744,\n A700: #d50000,\n);\n\n$md-pink: (\n 50: #fce4ec,\n 100: #f8bbd0,\n 200: #f48fb1,\n 300: #f06292,\n 400: #ec407a,\n 500: #e91e63,\n 600: #d81b60,\n 700: #c2185b,\n 800: #ad1457,\n 900: #880e4f,\n A100: #ff80ab,\n A200: #ff4081,\n A400: #f50057,\n A700: #c51162,\n);\n\n$md-purple: (\n 50: #f3e5f5,\n 100: #e1bee7,\n 200: #ce93d8,\n 300: #ba68c8,\n 400: #ab47bc,\n 500: #9c27b0,\n 600: #8e24aa,\n 700: #7b1fa2,\n 800: #6a1b9a,\n 900: #4a148c,\n A100: #ea80fc,\n A200: #e040fb,\n A400: #d500f9,\n A700: #aa00ff,\n);\n\n$md-deep-purple: (\n 50: #ede7f6,\n 100: #d1c4e9,\n 200: #b39ddb,\n 300: #9575cd,\n 400: #7e57c2,\n 500: #673ab7,\n 600: #5e35b1,\n 700: #512da8,\n 800: #4527a0,\n 900: #311b92,\n A100: #b388ff,\n A200: #7c4dff,\n A400: #651fff,\n A700: #6200ea,\n);\n\n$md-indigo: (\n 50: #e8eaf6,\n 100: #c5cae9,\n 200: #9fa8da,\n 300: #7986cb,\n 400: #5c6bc0,\n 500: #3f51b5,\n 600: #3949ab,\n 700: #303f9f,\n 800: #283593,\n 900: #1a237e,\n A100: #8c9eff,\n A200: #536dfe,\n A400: #3d5afe,\n A700: #304ffe,\n);\n\n$md-blue: (\n 50: #e3f2fd,\n 100: #bbdefb,\n 200: #90caf9,\n 300: #64b5f6,\n 400: #42a5f5,\n 500: #2196f3,\n 600: #1e88e5,\n 700: #1976d2,\n 800: #1565c0,\n 900: #0d47a1,\n A100: #82b1ff,\n A200: #448aff,\n A400: #2979ff,\n A700: #2962ff,\n);\n\n$md-light-blue: (\n 50: #e1f5fe,\n 100: #b3e5fc,\n 200: #81d4fa,\n 300: #4fc3f7,\n 400: #29b6f6,\n 500: #03a9f4,\n 600: #039be5,\n 700: #0288d1,\n 800: #0277bd,\n 900: #01579b,\n A100: #80d8ff,\n A200: #40c4ff,\n A400: #00b0ff,\n A700: #0091ea,\n);\n\n$md-cyan: (\n 50: #e0f7fa,\n 100: #b2ebf2,\n 200: #80deea,\n 300: #4dd0e1,\n 400: #26c6da,\n 500: #00bcd4,\n 600: #00acc1,\n 700: #0097a7,\n 800: #00838f,\n 900: #006064,\n A100: #84ffff,\n A200: #18ffff,\n A400: #00e5ff,\n A700: #00b8d4,\n);\n\n$md-teal: (\n 50: #e0f2f1,\n 100: #b2dfdb,\n 200: #80cbc4,\n 300: #4db6ac,\n 400: #26a69a,\n 500: #009688,\n 600: #00897b,\n 700: #00796b,\n 800: #00695c,\n 900: #004d40,\n A100: #a7ffeb,\n A200: #64ffda,\n A400: #1de9b6,\n A700: #00bfa5,\n);\n\n$md-green: (\n 50: #e8f5e9,\n 100: #c8e6c9,\n 200: #a5d6a7,\n 300: #81c784,\n 400: #66bb6a,\n 500: #4caf50,\n 600: #43a047,\n 700: #388e3c,\n 800: #2e7d32,\n 900: #1b5e20,\n A100: #b9f6ca,\n A200: #69f0ae,\n A400: #00e676,\n A700: #00c853,\n);\n\n$md-light-green: (\n 50: #f1f8e9,\n 100: #dcedc8,\n 200: #c5e1a5,\n 300: #aed581,\n 400: #9ccc65,\n 500: #8bc34a,\n 600: #7cb342,\n 700: #689f38,\n 800: #558b2f,\n 900: #33691e,\n A100: #ccff90,\n A200: #b2ff59,\n A400: #76ff03,\n A700: #64dd17,\n);\n\n$md-lime: (\n 50: #f9fbe7,\n 100: #f0f4c3,\n 200: #e6ee9c,\n 300: #dce775,\n 400: #d4e157,\n 500: #cddc39,\n 600: #c0ca33,\n 700: #afb42b,\n 800: #9e9d24,\n 900: #827717,\n A100: #f4ff81,\n A200: #eeff41,\n A400: #c6ff00,\n A700: #aeea00,\n);\n\n$md-yellow: (\n 50: #fffde7,\n 100: #fff9c4,\n 200: #fff59d,\n 300: #fff176,\n 400: #ffee58,\n 500: #ffeb3b,\n 600: #fdd835,\n 700: #fbc02d,\n 800: #f9a825,\n 900: #f57f17,\n A100: #ffff8d,\n A200: #ffff00,\n A400: #ffea00,\n A700: #ffd600,\n);\n\n$md-amber: (\n 50: #fff8e1,\n 100: #ffecb3,\n 200: #ffe082,\n 300: #ffd54f,\n 400: #ffca28,\n 500: #ffc107,\n 600: #ffb300,\n 700: #ffa000,\n 800: #ff8f00,\n 900: #ff6f00,\n A100: #ffe57f,\n A200: #ffd740,\n A400: #ffc400,\n A700: #ffab00,\n);\n\n$md-orange: (\n 50: #fff3e0,\n 100: #ffe0b2,\n 200: #ffcc80,\n 300: #ffb74d,\n 400: #ffa726,\n 500: #ff9800,\n 600: #fb8c00,\n 700: #f57c00,\n 800: #ef6c00,\n 900: #e65100,\n A100: #ffd180,\n A200: #ffab40,\n A400: #ff9100,\n A700: #ff6d00,\n);\n\n$md-deep-orange: (\n 50: #fbe9e7,\n 100: #ffccbc,\n 200: #ffab91,\n 300: #ff8a65,\n 400: #ff7043,\n 500: #ff5722,\n 600: #f4511e,\n 700: #e64a19,\n 800: #d84315,\n 900: #bf360c,\n A100: #ff9e80,\n A200: #ff6e40,\n A400: #ff3d00,\n A700: #dd2c00,\n);\n\n$md-brown: (\n 50: #efebe9,\n 100: #d7ccc8,\n 200: #bcaaa4,\n 300: #a1887f,\n 400: #8d6e63,\n 500: #795548,\n 600: #6d4c41,\n 700: #5d4037,\n 800: #4e342e,\n 900: #3e2723,\n A100: #d7ccc8,\n A200: #bcaaa4,\n A400: #8d6e63,\n A700: #5d4037,\n);\n\n$md-grey: (\n 0: #ffffff,\n 50: #fafafa,\n 100: #f5f5f5,\n 200: #eeeeee,\n 300: #e0e0e0,\n 400: #bdbdbd,\n 500: #9e9e9e,\n 600: #757575,\n 700: #616161,\n 800: #424242,\n 900: #212121,\n 1000: #000000,\n A100: #ffffff,\n A200: #eeeeee,\n A400: #bdbdbd,\n A700: #616161,\n);\n\n$md-blue-grey: (\n 50: #eceff1,\n 100: #cfd8dc,\n 200: #b0bec5,\n 300: #90a4ae,\n 400: #78909c,\n 500: #607d8b,\n 600: #546e7a,\n 700: #455a64,\n 800: #37474f,\n 900: #263238,\n A100: #cfd8dc,\n A200: #b0bec5,\n A400: #78909c,\n A700: #455a64,\n);\n\n\n// Background palette for light themes.\n$md-light-theme-background: (\n status-bar: map_get($md-grey, 300),\n app-bar: map_get($md-grey, 100),\n background: map_get($md-grey, 50),\n hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX\n card: white,\n dialog: white,\n disabled-button: rgba(black, 0.12)\n);\n\n// Background palette for dark themes.\n$md-dark-theme-background: (\n status-bar: black,\n app-bar: map_get($md-grey, 900),\n background: #303030,\n hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX\n card: map_get($md-grey, 800),\n dialog: map_get($md-grey, 800),\n disabled-button: rgba(white, 0.12)\n);\n\n// Foreground palette for light themes.\n$md-light-theme-foreground: (\n base: black,\n divider: rgba(black, 0.12),\n dividers: rgba(black, 0.12),\n disabled: rgba(black, 0.38),\n disabled-button: rgba(black, 0.38),\n disabled-text: rgba(black, 0.38),\n hint-text: rgba(black, 0.38),\n secondary-text: rgba(black, 0.54),\n icon: rgba(black, 0.54),\n icons: rgba(black, 0.54),\n text: rgba(black, 0.87)\n);\n\n// Foreground palette for dark themes.\n$md-dark-theme-foreground: (\n base: white,\n divider: rgba(white, 0.12),\n dividers: rgba(white, 0.12),\n disabled: rgba(white, 0.3),\n disabled-button: rgba(white, 0.3),\n disabled-text: rgba(white, 0.3),\n hint-text: rgba(white, 0.3),\n secondary-text: rgba(white, 0.7),\n icon: white,\n icons: white,\n text: white\n);\n\n\n\n// TODO(jelbourn): Do we actually need these any more? Updates to the spec about how foreground\n// colors are used may have made this obsolete.\n\n// Contrast colors. These are hard-coded because it is too difficult (probably impossible) to\n// calculate them. These contrast colors are pulled from the public Material Design spec swatches.\n// While the contrast colors in the spec are not perscriptive, we will use them for convenience.\n$black-87-opacity: rgba(black, 0.870588);\n$white-87-opacity: rgba(white, 0.870588);\n\n$md-contrast-palettes: (\n $md-red: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n ),\n $md-pink: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n ),\n $md-purple: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n ),\n $md-deep-purple: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: $white-87-opacity,\n A700: $white-87-opacity,\n ),\n $md-indigo: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: $white-87-opacity,\n ),\n $md-blue: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n ),\n $md-light-blue: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: white,\n ),\n $md-cyan: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-teal: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-green: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-light-green: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-lime: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-yellow: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: $black-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-amber: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: $black-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n ),\n $md-orange: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: black,\n ),\n $md-deep-orange: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: white,\n ),\n $md-brown: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: $white-87-opacity,\n ),\n $md-grey: (\n 0: $black-87-opacity,\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n 1000: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $white-87-opacity,\n ),\n $md-blue-grey: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: white,\n 500: white,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: $white-87-opacity,\n ),\n);\n","@import 'theme-functions';\n\n\n// Typography\n$md-body-font-size-base: rem(1.4) !default;\n$md-font-family: Roboto, 'Helvetica Neue', sans-serif !default;\n\n// Media queries\n$md-xsmall: 'max-width: 600px';\n\n// TODO: Revisit all z-indices before beta\n// z-index master list\n$z-index-fab: 20 !default;\n$z-index-drawer: 100 !default;\n$z-index-overlay: 1000 !default;\n\n// Global constants\n$pi: 3.14159265;\n\n// Padding between input toggles and their labels\n$md-toggle-padding: 8px !default;\n// Width and height of input toggles\n$md-toggle-size: 20px !default;\n\n// Easing Curves\n// TODO(jelbourn): all of these need to be revisited\n\n// The default animation curves used by material design.\n$md-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\n$md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n\n$swift-ease-out-duration: 400ms !default;\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\n\n$swift-ease-in-duration: 300ms !default;\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\n\n$swift-ease-in-out-duration: 500ms !default;\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\n\n$swift-linear-duration: 80ms !default;\n$swift-linear-timing-function: linear !default;\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\n","\n/**\n * Mixin that creates a new stacking context.\n * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n */\n@mixin md-stacking-context() {\n position: relative;\n\n // Use a transform to create a new stacking context.\n transform: translate3d(0, 0, 0);\n}\n\n/**\n * This mixin hides an element visually.\n * That means it's still accessible for screen-readers but not visible in view.\n */\n@mixin md-visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n text-transform: none;\n width: 1px;\n}\n\n/**\n * Forces an element to grow to fit floated contents; used as as an alternative to\n * `overflow: hidden;` because it doesn't cut off contents.\n */\n@mixin md-clearfix {\n &::before, &::after {\n content: '';\n clear: both;\n display: table;\n }\n}\n\n/**\n * A mixin, which generates temporary ink ripple on a given component.\n * When $bindToParent is set to true, it will check for the focused class on the same selector as you included\n * that mixin.\n * It is also possible to specify the color palette of the temporary ripple. By default it uses the\n * accent palette for its background.\n */\n@mixin md-temporary-ink-ripple($component, $bindToParent: false, $palette: $md-accent) {\n // TODO(mtlin): Replace when ink ripple component is implemented.\n // A placeholder ink ripple, shown when keyboard focused.\n .md-ink-ripple {\n border-radius: 50%;\n opacity: 0;\n height: 48px;\n left: 50%;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n transition: opacity ease 280ms, background-color ease 280ms;\n width: 48px;\n }\n\n // Fade in when radio focused.\n #{if($bindToParent, '&', '')}.md-#{$component}-focused .md-ink-ripple {\n opacity: 1;\n background-color: md-color($palette, 0.26);\n }\n\n // TODO(mtlin): This corresponds to disabled focus state, but it's unclear how to enter into\n // this state.\n #{if($bindToParent, '&', '')}.md-#{$component}-disabled .md-ink-ripple {\n background-color: #000;\n }\n}\n"],"mappings":"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","names":[],"sourceRoot":"/source/"} | ||
| {"version":3,"file":"checkbox/checkbox.css","sources":["checkbox/checkbox.scss","core/theming/_theming.scss","core/theming/_palette.scss","core/style/_variables.scss","core/typography/_typography.scss","core/ripple/_ripple.scss"],"sourcesContent":["@import '../core/theming/theming';\n@import '../core/style/variables';\n@import '../core/ripple/ripple';\n\n\n// The width/height of the checkbox element.\n$md-checkbox-size: $md-toggle-size !default;\n// The width of the line used to draw the checkmark / mixedmark.\n$md-checkbox-mark-stroke-size: 2/15 * $md-checkbox-size !default;\n// The width of the checkbox border shown when the checkbox is unchecked.\n$md-checkbox-border-width: 2px;\n// The base duration used for the majority of transitions for the checkbox.\n$md-checkbox-transition-duration: 90ms;\n// The amount of spacing between the checkbox and its label.\n$md-checkbox-item-spacing: $md-toggle-padding;\n\n// Manual calculation done on SVG\n$_md-checkbox-mark-path-length: 22.910259;\n$_md-checkbox-indeterminate-checked-easing-function: cubic-bezier(0.14, 0, 0, 1);\n\n// Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.\n@keyframes md-checkbox-fade-in-background {\n 0% {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n}\n\n// Fades out the background of the checkbox when it goes from {checked,indeterminate} -> unchecked.\n@keyframes md-checkbox-fade-out-background {\n 0%, 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}\n\n// \"Draws\" in the checkmark when the checkbox goes from unchecked -> checked.\n@keyframes md-checkbox-unchecked-checked-checkmark-path {\n 0%, 50% {\n stroke-dashoffset: $_md-checkbox-mark-path-length;\n }\n\n 50% {\n animation-timing-function: $md-linear-out-slow-in-timing-function;\n }\n\n 100% {\n stroke-dashoffset: 0;\n }\n}\n\n// Horizontally expands the mixedmark when the checkbox goes from unchecked -> indeterminate.\n@keyframes md-checkbox-unchecked-indeterminate-mixedmark {\n 0%, 68.2% {\n transform: scaleX(0);\n }\n\n 68.2% {\n animation-timing-function: cubic-bezier(0, 0, 0, 1);\n }\n\n 100% {\n transform: scaleX(1);\n }\n}\n\n// \"Erases\" the checkmark when the checkbox goes from checked -> unchecked.\n@keyframes md-checkbox-checked-unchecked-checkmark-path {\n from {\n animation-timing-function: $md-fast-out-linear-in-timing-function;\n stroke-dashoffset: 0;\n }\n\n to {\n stroke-dashoffset: $_md-checkbox-mark-path-length * -1;\n }\n}\n\n\n// Rotates and fades out the checkmark when the checkbox goes from checked -> indeterminate. This\n// animation helps provide the illusion of the checkmark \"morphing\" into the mixedmark.\n@keyframes md-checkbox-checked-indeterminate-checkmark {\n from {\n animation-timing-function: $md-linear-out-slow-in-timing-function;\n opacity: 1;\n transform: rotate(0deg);\n }\n\n to {\n opacity: 0;\n transform: rotate(45deg);\n }\n}\n\n// Rotates and fades the checkmark back into position when the checkbox goes from indeterminate ->\n// checked. This animation helps provide the illusion that the mixedmark is \"morphing\" into the\n// checkmark.\n@keyframes md-checkbox-indeterminate-checked-checkmark {\n from {\n animation-timing-function: $_md-checkbox-indeterminate-checked-easing-function;\n opacity: 0;\n transform: rotate(45deg);\n }\n\n to {\n opacity: 1;\n transform: rotate(360deg);\n }\n}\n\n// Rotates and fades in the mixedmark when the checkbox goes from checked -> indeterminate. This\n// animation, similar to md-checkbox-checked-indeterminate-checkmark, helps provide an illusion\n// of \"morphing\" from checkmark -> mixedmark.\n@keyframes md-checkbox-checked-indeterminate-mixedmark {\n from {\n animation-timing-function: $md-linear-out-slow-in-timing-function;\n opacity: 0;\n transform: rotate(-45deg);\n }\n\n to {\n opacity: 1;\n transform: rotate(0deg);\n }\n}\n\n// Rotates and fades out the mixedmark when the checkbox goes from indeterminate -> checked. This\n// animation, similar to md-checkbox-indeterminate-checked-checkmark, helps provide an illusion\n// of \"morphing\" from mixedmark -> checkmark.\n@keyframes md-checkbox-indeterminate-checked-mixedmark {\n from {\n animation-timing-function: $_md-checkbox-indeterminate-checked-easing-function;\n opacity: 1;\n transform: rotate(0deg);\n }\n\n to {\n opacity: 0;\n transform: rotate(315deg);\n }\n}\n\n\n// Horizontally collapses and fades out the mixedmark when the checkbox goes from indeterminate ->\n// unchecked.\n@keyframes md-checkbox-indeterminate-unchecked-mixedmark {\n 0% {\n animation-timing-function: linear;\n opacity: 1;\n transform: scaleX(1);\n }\n\n 32.8%, 100% {\n opacity: 0;\n transform: scaleX(0);\n }\n}\n\n// Applied to elements that cover the checkbox's entire inner container.\n%md-checkbox-cover-element {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n// Applied to elements that are considered \"marks\" within the checkbox, e.g. the checkmark and\n// the mixedmark.\n%md-checkbox-mark {\n $width-padding-inset: 2 * $md-checkbox-border-width;\n width: calc(100% - #{$width-padding-inset});\n}\n\n// Applied to elements that appear to make up the outer box of the checkmark, such as the frame\n// that contains the border and the actual background element that contains the marks.\n%md-checkbox-outer-box {\n @extend %md-checkbox-cover-element;\n border-radius: 2px;\n box-sizing: border-box;\n pointer-events: none;\n}\n\nmd-checkbox {\n cursor: pointer;\n}\n\n.md-checkbox-layout {\n // `cursor: inherit` ensures that the wrapper element gets the same cursor as the md-checkbox\n // (e.g. pointer by default, regular when disabled), instead of the browser default.\n cursor: inherit;\n align-items: baseline;\n display: inline-flex;\n}\n\n.md-checkbox-inner-container {\n display: inline-block;\n height: $md-checkbox-size;\n line-height: 0;\n margin: auto;\n margin-right: $md-checkbox-item-spacing;\n order: 0;\n position: relative;\n vertical-align: middle;\n white-space: nowrap;\n width: $md-checkbox-size;\n\n [dir='rtl'] & {\n margin: {\n left: $md-checkbox-item-spacing;\n right: auto;\n }\n }\n}\n\n// TODO(kara): Remove this style when fixing vertical baseline\n.md-checkbox-layout .md-checkbox-label {\n line-height: 24px;\n}\n\n.md-checkbox-frame {\n @extend %md-checkbox-outer-box;\n\n background-color: transparent;\n border: $md-checkbox-border-width solid;\n transition: border-color $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function;\n will-change: border-color;\n}\n\n.md-checkbox-background {\n @extend %md-checkbox-outer-box;\n\n align-items: center;\n display: inline-flex;\n justify-content: center;\n transition: background-color $md-checkbox-transition-duration\n $md-linear-out-slow-in-timing-function,\n opacity $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function;\n will-change: background-color, opacity;\n}\n\n.md-checkbox-checkmark {\n @extend %md-checkbox-cover-element;\n @extend %md-checkbox-mark;\n\n width: 100%;\n}\n\n.md-checkbox-checkmark-path {\n stroke: {\n dashoffset: $_md-checkbox-mark-path-length;\n dasharray: $_md-checkbox-mark-path-length;\n width: $md-checkbox-mark-stroke-size;\n }\n}\n\n.md-checkbox-mixedmark {\n @extend %md-checkbox-mark;\n\n height: floor($md-checkbox-mark-stroke-size);\n opacity: 0;\n transform: scaleX(0) rotate(0deg);\n}\n\n.md-checkbox-align-end {\n .md-checkbox-inner-container {\n order: 1;\n margin: {\n left: $md-checkbox-item-spacing;\n right: auto;\n }\n\n [dir='rtl'] & {\n margin: {\n left: auto;\n right: $md-checkbox-item-spacing;\n }\n }\n }\n}\n\n.md-checkbox-checked {\n .md-checkbox-checkmark {\n opacity: 1;\n }\n\n .md-checkbox-checkmark-path {\n stroke-dashoffset: 0;\n }\n\n .md-checkbox-mixedmark {\n transform: scaleX(1) rotate(-45deg);\n }\n}\n\n.md-checkbox-indeterminate {\n .md-checkbox-checkmark {\n opacity: 0;\n transform: rotate(45deg);\n }\n\n .md-checkbox-checkmark-path {\n stroke-dashoffset: 0;\n }\n\n .md-checkbox-mixedmark {\n opacity: 1;\n transform: scaleX(1) rotate(0deg);\n }\n}\n\n\n.md-checkbox-unchecked {\n .md-checkbox-background {\n background-color: transparent;\n }\n}\n\n.md-checkbox-disabled {\n cursor: default;\n}\n\n.md-checkbox-anim {\n $indeterminate-change-duration: 500ms;\n\n &-unchecked-checked {\n .md-checkbox-background {\n animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-in-background;\n }\n\n .md-checkbox-checkmark-path {\n // Instead of delaying the animation, we simply multiply its length by 2 and begin the\n // animation at 50% in order to prevent a flash of styles applied to a checked checkmark\n // as the background is fading in before the animation begins.\n animation:\n $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-unchecked-checked-checkmark-path;\n }\n }\n\n &-unchecked-indeterminate {\n .md-checkbox-background {\n animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-in-background;\n }\n\n .md-checkbox-mixedmark {\n animation:\n $md-checkbox-transition-duration linear 0ms md-checkbox-unchecked-indeterminate-mixedmark;\n }\n }\n\n &-checked-unchecked {\n .md-checkbox-background {\n animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-out-background;\n }\n\n .md-checkbox-checkmark-path {\n animation:\n $md-checkbox-transition-duration linear 0ms md-checkbox-checked-unchecked-checkmark-path;\n }\n }\n\n &-checked-indeterminate {\n .md-checkbox-checkmark {\n animation:\n $md-checkbox-transition-duration linear 0ms md-checkbox-checked-indeterminate-checkmark;\n }\n\n .md-checkbox-mixedmark {\n animation:\n $md-checkbox-transition-duration linear 0ms md-checkbox-checked-indeterminate-mixedmark;\n }\n }\n\n &-indeterminate-checked {\n .md-checkbox-checkmark {\n animation:\n $indeterminate-change-duration linear 0ms md-checkbox-indeterminate-checked-checkmark;\n }\n\n .md-checkbox-mixedmark {\n animation:\n $indeterminate-change-duration linear 0ms md-checkbox-indeterminate-checked-mixedmark;\n }\n }\n\n &-indeterminate-unchecked {\n .md-checkbox-background {\n animation: $md-checkbox-transition-duration * 2 linear 0ms md-checkbox-fade-out-background;\n }\n\n .md-checkbox-mixedmark {\n animation:\n $indeterminate-change-duration * 0.6 linear 0ms\n md-checkbox-indeterminate-unchecked-mixedmark;\n }\n }\n}\n\n@include md-temporary-ink-ripple(checkbox);\n","@import 'palette';\n\n\n// For a given hue in a palette, return the contrast color from the map of contrast palettes.\n// @param $color-map\n// @param $hue\n@function md-contrast($palette, $hue) {\n @return map-get(map-get($palette, contrast), $hue)\n}\n\n\n// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms\n// of the Material Design hues.\n// @param $color-map\n// @param $primary\n// @param $lighter\n@function md-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {\n $result: map_merge($base-palette, (\n default: map-get($base-palette, $default),\n lighter: map-get($base-palette, $lighter),\n darker: map-get($base-palette, $darker),\n\n default-contrast: md-contrast($base-palette, $default),\n lighter-contrast: md-contrast($base-palette, $lighter),\n darker-contrast: md-contrast($base-palette, $darker)\n ));\n\n // For each hue in the palette, add a \"-contrast\" color to the map.\n @each $hue, $color in $base-palette {\n $result: map_merge($result, (\n '#{$hue}-contrast': md-contrast($base-palette, $hue)\n ));\n }\n\n @return $result;\n}\n\n\n// Gets a color from a theme palette (the output of md-palette).\n// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured\n// hues (default, lighter, darker), or any of the aforementioned prefixed with \"-contrast\".\n//\n// @param $color-map The theme palette (output of md-palette).\n// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will\n// be treated as opacity.\n// @param $opacity The alpha channel value for the color.\n@function md-color($palette, $hue: default, $opacity: 1) {\n // If hueKey is a number between zero and one, then it actually contains an\n // opacity value, so recall this function with the default hue and that given opacity.\n @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {\n @return md-color($palette, default, $hue);\n }\n\n $color: map-get($palette, $hue);\n $opacity: if(opacity($color) < 1, opacity($color), $opacity);\n\n @return rgba($color, $opacity);\n}\n\n\n// Creates a container object for a light theme to be given to individual component theme mixins.\n@function md-light-theme($primary, $accent, $warn) {\n @return (\n primary: $primary,\n accent: $accent,\n warn: $warn,\n is-dark: false,\n foreground: $md-light-theme-foreground,\n background: $md-light-theme-background,\n )\n}\n\n\n// Creates a container object for a dark theme to be given to individual component theme mixins.\n@function md-dark-theme($primary, $accent, $warn) {\n @return (\n primary: $primary,\n accent: $accent,\n warn: $warn,\n is-dark: true,\n foreground: $md-dark-theme-foreground,\n background: $md-dark-theme-background,\n )\n}\n","// Color palettes from the Material Design spec.\n// See https://www.google.com/design/spec/style/color.html\n//\n// Contrast colors are hard-coded because it is too difficult (probably impossible) to\n// calculate them. These contrast colors are pulled from the public Material Design spec swatches.\n// While the contrast colors in the spec are not perscriptive, we use them for convenience.\n\n\n$black-87-opacity: rgba(black, 0.87);\n$white-87-opacity: rgba(white, 0.87);\n\n$md-red: (\n 50: #ffebee,\n 100: #ffcdd2,\n 200: #ef9a9a,\n 300: #e57373,\n 400: #ef5350,\n 500: #f44336,\n 600: #e53935,\n 700: #d32f2f,\n 800: #c62828,\n 900: #b71c1c,\n A100: #ff8a80,\n A200: #ff5252,\n A400: #ff1744,\n A700: #d50000,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n )\n);\n\n$md-pink: (\n 50: #fce4ec,\n 100: #f8bbd0,\n 200: #f48fb1,\n 300: #f06292,\n 400: #ec407a,\n 500: #e91e63,\n 600: #d81b60,\n 700: #c2185b,\n 800: #ad1457,\n 900: #880e4f,\n A100: #ff80ab,\n A200: #ff4081,\n A400: #f50057,\n A700: #c51162,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n )\n);\n\n$md-purple: (\n 50: #f3e5f5,\n 100: #e1bee7,\n 200: #ce93d8,\n 300: #ba68c8,\n 400: #ab47bc,\n 500: #9c27b0,\n 600: #8e24aa,\n 700: #7b1fa2,\n 800: #6a1b9a,\n 900: #4a148c,\n A100: #ea80fc,\n A200: #e040fb,\n A400: #d500f9,\n A700: #aa00ff,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n )\n);\n\n$md-deep-purple: (\n 50: #ede7f6,\n 100: #d1c4e9,\n 200: #b39ddb,\n 300: #9575cd,\n 400: #7e57c2,\n 500: #673ab7,\n 600: #5e35b1,\n 700: #512da8,\n 800: #4527a0,\n 900: #311b92,\n A100: #b388ff,\n A200: #7c4dff,\n A400: #651fff,\n A700: #6200ea,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: $white-87-opacity,\n A700: $white-87-opacity,\n )\n);\n\n$md-indigo: (\n 50: #e8eaf6,\n 100: #c5cae9,\n 200: #9fa8da,\n 300: #7986cb,\n 400: #5c6bc0,\n 500: #3f51b5,\n 600: #3949ab,\n 700: #303f9f,\n 800: #283593,\n 900: #1a237e,\n A100: #8c9eff,\n A200: #536dfe,\n A400: #3d5afe,\n A700: #304ffe,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: $white-87-opacity,\n )\n);\n\n$md-blue: (\n 50: #e3f2fd,\n 100: #bbdefb,\n 200: #90caf9,\n 300: #64b5f6,\n 400: #42a5f5,\n 500: #2196f3,\n 600: #1e88e5,\n 700: #1976d2,\n 800: #1565c0,\n 900: #0d47a1,\n A100: #82b1ff,\n A200: #448aff,\n A400: #2979ff,\n A700: #2962ff,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: white,\n A400: white,\n A700: white,\n )\n);\n\n$md-light-blue: (\n 50: #e1f5fe,\n 100: #b3e5fc,\n 200: #81d4fa,\n 300: #4fc3f7,\n 400: #29b6f6,\n 500: #03a9f4,\n 600: #039be5,\n 700: #0288d1,\n 800: #0277bd,\n 900: #01579b,\n A100: #80d8ff,\n A200: #40c4ff,\n A400: #00b0ff,\n A700: #0091ea,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: white,\n )\n);\n\n$md-cyan: (\n 50: #e0f7fa,\n 100: #b2ebf2,\n 200: #80deea,\n 300: #4dd0e1,\n 400: #26c6da,\n 500: #00bcd4,\n 600: #00acc1,\n 700: #0097a7,\n 800: #00838f,\n 900: #006064,\n A100: #84ffff,\n A200: #18ffff,\n A400: #00e5ff,\n A700: #00b8d4,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$md-teal: (\n 50: #e0f2f1,\n 100: #b2dfdb,\n 200: #80cbc4,\n 300: #4db6ac,\n 400: #26a69a,\n 500: #009688,\n 600: #00897b,\n 700: #00796b,\n 800: #00695c,\n 900: #004d40,\n A100: #a7ffeb,\n A200: #64ffda,\n A400: #1de9b6,\n A700: #00bfa5,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$md-green: (\n 50: #e8f5e9,\n 100: #c8e6c9,\n 200: #a5d6a7,\n 300: #81c784,\n 400: #66bb6a,\n 500: #4caf50,\n 600: #43a047,\n 700: #388e3c,\n 800: #2e7d32,\n 900: #1b5e20,\n A100: #b9f6ca,\n A200: #69f0ae,\n A400: #00e676,\n A700: #00c853,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$md-light-green: (\n 50: #f1f8e9,\n 100: #dcedc8,\n 200: #c5e1a5,\n 300: #aed581,\n 400: #9ccc65,\n 500: #8bc34a,\n 600: #7cb342,\n 700: #689f38,\n 800: #558b2f,\n 900: #33691e,\n A100: #ccff90,\n A200: #b2ff59,\n A400: #76ff03,\n A700: #64dd17,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$md-lime: (\n 50: #f9fbe7,\n 100: #f0f4c3,\n 200: #e6ee9c,\n 300: #dce775,\n 400: #d4e157,\n 500: #cddc39,\n 600: #c0ca33,\n 700: #afb42b,\n 800: #9e9d24,\n 900: #827717,\n A100: #f4ff81,\n A200: #eeff41,\n A400: #c6ff00,\n A700: #aeea00,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$md-yellow: (\n 50: #fffde7,\n 100: #fff9c4,\n 200: #fff59d,\n 300: #fff176,\n 400: #ffee58,\n 500: #ffeb3b,\n 600: #fdd835,\n 700: #fbc02d,\n 800: #f9a825,\n 900: #f57f17,\n A100: #ffff8d,\n A200: #ffff00,\n A400: #ffea00,\n A700: #ffd600,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: $black-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$md-amber: (\n 50: #fff8e1,\n 100: #ffecb3,\n 200: #ffe082,\n 300: #ffd54f,\n 400: #ffca28,\n 500: #ffc107,\n 600: #ffb300,\n 700: #ffa000,\n 800: #ff8f00,\n 900: #ff6f00,\n A100: #ffe57f,\n A200: #ffd740,\n A400: #ffc400,\n A700: #ffab00,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: $black-87-opacity,\n 900: $black-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $black-87-opacity,\n )\n);\n\n$md-orange: (\n 50: #fff3e0,\n 100: #ffe0b2,\n 200: #ffcc80,\n 300: #ffb74d,\n 400: #ffa726,\n 500: #ff9800,\n 600: #fb8c00,\n 700: #f57c00,\n 800: #ef6c00,\n 900: #e65100,\n A100: #ffd180,\n A200: #ffab40,\n A400: #ff9100,\n A700: #ff6d00,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $black-87-opacity,\n 700: $black-87-opacity,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: black,\n )\n);\n\n$md-deep-orange: (\n 50: #fbe9e7,\n 100: #ffccbc,\n 200: #ffab91,\n 300: #ff8a65,\n 400: #ff7043,\n 500: #ff5722,\n 600: #f4511e,\n 700: #e64a19,\n 800: #d84315,\n 900: #bf360c,\n A100: #ff9e80,\n A200: #ff6e40,\n A400: #ff3d00,\n A700: #dd2c00,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: white,\n 600: white,\n 700: white,\n 800: white,\n 900: white,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: white,\n )\n);\n\n$md-brown: (\n 50: #efebe9,\n 100: #d7ccc8,\n 200: #bcaaa4,\n 300: #a1887f,\n 400: #8d6e63,\n 500: #795548,\n 600: #6d4c41,\n 700: #5d4037,\n 800: #4e342e,\n 900: #3e2723,\n A100: #d7ccc8,\n A200: #bcaaa4,\n A400: #8d6e63,\n A700: #5d4037,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: white,\n 400: white,\n 500: $white-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: $white-87-opacity,\n )\n);\n\n$md-grey: (\n 0: #ffffff,\n 50: #fafafa,\n 100: #f5f5f5,\n 200: #eeeeee,\n 300: #e0e0e0,\n 400: #bdbdbd,\n 500: #9e9e9e,\n 600: #757575,\n 700: #616161,\n 800: #424242,\n 900: #212121,\n 1000: #000000,\n A100: #ffffff,\n A200: #eeeeee,\n A400: #bdbdbd,\n A700: #616161,\n contrast: (\n 0: $black-87-opacity,\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: $black-87-opacity,\n 500: $black-87-opacity,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n 1000: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: $black-87-opacity,\n A700: $white-87-opacity,\n )\n);\n\n$md-blue-grey: (\n 50: #eceff1,\n 100: #cfd8dc,\n 200: #b0bec5,\n 300: #90a4ae,\n 400: #78909c,\n 500: #607d8b,\n 600: #546e7a,\n 700: #455a64,\n 800: #37474f,\n 900: #263238,\n A100: #cfd8dc,\n A200: #b0bec5,\n A400: #78909c,\n A700: #455a64,\n contrast: (\n 50: $black-87-opacity,\n 100: $black-87-opacity,\n 200: $black-87-opacity,\n 300: $black-87-opacity,\n 400: white,\n 500: white,\n 600: $white-87-opacity,\n 700: $white-87-opacity,\n 800: $white-87-opacity,\n 900: $white-87-opacity,\n A100: $black-87-opacity,\n A200: $black-87-opacity,\n A400: white,\n A700: $white-87-opacity,\n )\n);\n\n\n// Background palette for light themes.\n$md-light-theme-background: (\n status-bar: map_get($md-grey, 300),\n app-bar: map_get($md-grey, 100),\n background: map_get($md-grey, 50),\n hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX\n card: white,\n dialog: white,\n disabled-button: rgba(black, 0.12)\n);\n\n// Background palette for dark themes.\n$md-dark-theme-background: (\n status-bar: black,\n app-bar: map_get($md-grey, 900),\n background: #303030,\n hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX\n card: map_get($md-grey, 800),\n dialog: map_get($md-grey, 800),\n disabled-button: rgba(white, 0.12)\n);\n\n// Foreground palette for light themes.\n$md-light-theme-foreground: (\n base: black,\n divider: rgba(black, 0.12),\n dividers: rgba(black, 0.12),\n disabled: rgba(black, 0.38),\n disabled-button: rgba(black, 0.38),\n disabled-text: rgba(black, 0.38),\n hint-text: rgba(black, 0.38),\n secondary-text: rgba(black, 0.54),\n icon: rgba(black, 0.54),\n icons: rgba(black, 0.54),\n text: rgba(black, 0.87)\n);\n\n// Foreground palette for dark themes.\n$md-dark-theme-foreground: (\n base: white,\n divider: rgba(white, 0.12),\n dividers: rgba(white, 0.12),\n disabled: rgba(white, 0.3),\n disabled-button: rgba(white, 0.3),\n disabled-text: rgba(white, 0.3),\n hint-text: rgba(white, 0.3),\n secondary-text: rgba(white, 0.7),\n icon: white,\n icons: white,\n text: white\n);\n","@import '../typography/typography';\n\n\n// Typography\n$md-body-font-size-base: rem(1.4) !default;\n$md-font-family: Roboto, 'Helvetica Neue', sans-serif !default;\n\n// Media queries\n$md-xsmall: 'max-width: 600px';\n\n// TODO: Revisit all z-indices before beta\n// z-index master list\n\n$z-index-fab: 20 !default;\n$z-index-drawer: 100 !default;\n\n// Overlay z indices.\n$md-z-index-overlay: 1000;\n$md-z-index-overlay-container: 1;\n$md-z-index-overlay-backdrop: 1;\n\n\n// Global constants\n$pi: 3.14159265;\n\n// Padding between input toggles and their labels\n$md-toggle-padding: 8px !default;\n// Width and height of input toggles\n$md-toggle-size: 20px !default;\n\n// Easing Curves\n// TODO(jelbourn): all of these need to be revisited\n\n// The default animation curves used by material design.\n$md-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\n$md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n\n$swift-ease-out-duration: 400ms !default;\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\n\n$swift-ease-in-duration: 300ms !default;\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\n\n$swift-ease-in-out-duration: 500ms !default;\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\n\n$swift-linear-duration: 80ms !default;\n$swift-linear-timing-function: linear !default;\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\n","// Implement the rem unit with SCSS so we don't have to actually set a font-size on\n// the user's body element.\n@function rem($multiplier) {\n $font-size: 10px;\n @return $multiplier * $font-size;\n}\n","@import '../theming/theming';\n\n\n$md-ripple-focused-opacity: 0.1;\n$md-ripple-background-fade-duration: 300ms;\n$md-ripple-background-default-color: rgba(0, 0, 0, 0.0588);\n$md-ripple-foreground-initial-opacity: 0.25;\n$md-ripple-foreground-default-color: rgba(0, 0, 0, 0.0588);\n\n\n@mixin md-ripple() {\n // The host element of an md-ripple directive should always have a position of \"absolute\" or\n // \"relative\" so that the ripple divs it creates inside itself are correctly positioned.\n [md-ripple] {\n overflow: hidden;\n }\n\n [md-ripple].md-ripple-unbounded {\n overflow: visible;\n }\n\n .md-ripple-background {\n background-color: $md-ripple-background-default-color;\n opacity: 0;\n transition: opacity $md-ripple-background-fade-duration linear;\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n\n .md-ripple-unbounded .md-ripple-background {\n display: none;\n }\n\n .md-ripple-background.md-ripple-active {\n opacity: 1;\n }\n\n .md-ripple-focused .md-ripple-background {\n opacity: 1;\n }\n\n .md-ripple-foreground {\n background-color: $md-ripple-foreground-default-color;\n border-radius: 50%;\n pointer-events: none;\n opacity: $md-ripple-foreground-initial-opacity;\n position: absolute;\n // The transition duration is manually set based on the ripple size.\n transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);\n }\n\n .md-ripple-foreground.md-ripple-fade-in {\n opacity: 1;\n }\n\n .md-ripple-foreground.md-ripple-fade-out {\n opacity: 0;\n }\n}\n\n@mixin md-ripple-theme($theme) {\n $accent: map-get($theme, accent);\n\n .md-ripple-focused .md-ripple-background {\n background-color: md-color($accent, $md-ripple-focused-opacity);\n }\n}\n\n\n// A mixin, which generates temporary ink ripple on a given component.\n// To be removed once the real ripple is applied to all elements.\n// When $bindToParent is set to true, it will check for the focused class on the same selector as you included\n// that mixin.\n// It is also possible to specify the color palette of the temporary ripple. By default it uses the\n// accent palette for its background.\n@mixin md-temporary-ink-ripple($component, $bindToParent: false) {\n // TODO(mtlin): Replace when ink ripple component is implemented.\n // A placeholder ink ripple, shown when keyboard focused.\n .md-ink-ripple {\n border-radius: 50%;\n opacity: 0;\n height: 48px;\n left: 50%;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n transition: opacity ease 280ms, background-color ease 280ms;\n width: 48px;\n }\n\n // Fade in when radio focused.\n #{if($bindToParent, '&', '')}.md-#{$component}-focused .md-ink-ripple {\n opacity: 1;\n }\n\n // TODO(mtlin): This corresponds to disabled focus state, but it's unclear how to enter into\n // this state.\n #{if($bindToParent, '&', '')}.md-#{$component}-disabled .md-ink-ripple {\n background-color: #000;\n }\n}\n"],"mappings":"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","names":[],"sourceRoot":"/source/"} |
+1
-1
| <label class="md-checkbox-layout"> | ||
| <div class="md-checkbox-inner-container"> | ||
| <input class="md-checkbox-input" type="checkbox" | ||
| <input class="md-checkbox-input md-visually-hidden" type="checkbox" | ||
| [id]="inputId" | ||
@@ -5,0 +5,0 @@ [checked]="checked" |
+2
-2
@@ -300,4 +300,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { | ||
| Component({selector: 'md-checkbox', | ||
| template: "<label class=\"md-checkbox-layout\"> <div class=\"md-checkbox-inner-container\"> <input class=\"md-checkbox-input\" type=\"checkbox\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [tabIndex]=\"tabindex\" [indeterminate]=\"indeterminate\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (focus)=\"_onInputFocus()\" (blur)=\"_onInputBlur()\" (change)=\"_onInteractionEvent($event)\" (click)=\"_onInputClick($event)\"> <div class=\"md-ink-ripple\"></div> <div class=\"md-checkbox-frame\"></div> <div class=\"md-checkbox-background\"> <svg version=\"1.1\" class=\"md-checkbox-checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" xml:space=\"preserve\"> <path class=\"md-checkbox-checkmark-path\" fill=\"none\" stroke=\"white\" d=\"M4.1,12.7 9,17.6 20.3,6.3\"/> </svg> <!-- Element for rendering the indeterminate state checkbox. --> <div class=\"md-checkbox-mixedmark\"></div> </div> </div> <span class=\"md-checkbox-label\"> <ng-content></ng-content> </span> </label> ", | ||
| styles: ["/** * 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 */ /** * This mixin hides an element visually. * That means it's still accessible for screen-readers but not visible in view. */ /** * Forces an element to grow to fit floated contents; used as as an alternative to * `overflow: hidden;` because it doesn't cut off contents. */ /** * 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. */ /** The width/height of the checkbox element. */ /** The width of the line used to draw the checkmark / mixedmark. */ /** The width of the checkbox border shown when the checkbox is unchecked. */ /** The color of the checkbox border. */ /** The color of the checkbox's checkmark / mixedmark. */ /** The color that is used as the checkbox background when it is checked. */ /** The base duration used for the majority of transitions for the checkbox. */ /** The amount of spacing between the checkbox and its label. */ /** * Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}. */ @keyframes md-checkbox-fade-in-background { 0% { opacity: 0; } 50% { opacity: 1; } } /** * Fades out the background of the checkbox when it goes from {checked,indeterminate} -> unchecked. */ @keyframes md-checkbox-fade-out-background { 0%, 50% { opacity: 1; } 100% { opacity: 0; } } /** * \"Draws\" in the checkmark when the checkbox goes from unchecked -> checked. */ @keyframes md-checkbox-unchecked-checked-checkmark-path { 0%, 50% { stroke-dashoffset: 22.91026; } 50% { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); } 100% { stroke-dashoffset: 0; } } /** * Horizontally expands the mixedmark when the checkbox goes from unchecked -> indeterminate. */ @keyframes md-checkbox-unchecked-indeterminate-mixedmark { 0%, 68.2% { transform: scaleX(0); } 68.2% { animation-timing-function: cubic-bezier(0, 0, 0, 1); } 100% { transform: scaleX(1); } } /** * \"Erases\" the checkmark when the checkbox goes from checked -> unchecked. */ @keyframes md-checkbox-checked-unchecked-checkmark-path { from { animation-timing-function: cubic-bezier(0.4, 0, 1, 1); stroke-dashoffset: 0; } to { stroke-dashoffset: -22.91026; } } /** * 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: cubic-bezier(0, 0, 0.2, 0.1); opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: rotate(45deg); } } /** * 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: cubic-bezier(0.14, 0, 0, 1); opacity: 0; transform: rotate(45deg); } to { opacity: 1; transform: rotate(360deg); } } /** * 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: cubic-bezier(0, 0, 0.2, 0.1); opacity: 0; transform: rotate(-45deg); } to { opacity: 1; transform: rotate(0deg); } } /** * 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: cubic-bezier(0.14, 0, 0, 1); opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: rotate(315deg); } } /** * 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; opacity: 1; transform: scaleX(1); } 32.8%, 100% { opacity: 0; transform: scaleX(0); } } /** * Applied to elements that cover the checkbox's entire inner container. */ .md-checkbox-frame, .md-checkbox-background, .md-checkbox-checkmark { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } /** * Applied to elements that are considered \"marks\" within the checkbox, e.g. the checkmark and * the mixedmark. */ .md-checkbox-checkmark, .md-checkbox-mixedmark { width: calc(100% - 4px); } /** * 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-frame, .md-checkbox-background { border-radius: 2px; box-sizing: border-box; pointer-events: none; } md-checkbox { cursor: pointer; } .md-checkbox-layout { cursor: inherit; align-items: baseline; display: inline-flex; } .md-checkbox-inner-container { display: inline-block; height: 20px; line-height: 0; margin: auto; margin-right: 8px; order: 0; position: relative; vertical-align: middle; white-space: nowrap; width: 20px; } [dir='rtl'] .md-checkbox-inner-container { margin-left: 8px; margin-right: auto; } .md-checkbox-layout .md-checkbox-label { line-height: 24px; } .md-checkbox-frame { background-color: transparent; border: 2px solid rgba(0, 0, 0, 0.54); transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1); will-change: border-color; } .md-checkbox-background { align-items: center; display: inline-flex; justify-content: center; transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 90ms cubic-bezier(0, 0, 0.2, 0.1); will-change: background-color, opacity; } .md-checkbox-checkmark { fill: #fafafa; width: 100%; } .md-checkbox-checkmark-path { stroke: #fafafa !important; stroke-dashoffset: 22.91026; stroke-dasharray: 22.91026; stroke-width: 2.66667px; } .md-checkbox-mixedmark { background-color: #fafafa; height: 2px; opacity: 0; transform: scaleX(0) rotate(0deg); } .md-checkbox-align-end .md-checkbox-inner-container { order: 1; margin-left: 8px; margin-right: auto; } [dir='rtl'] .md-checkbox-align-end .md-checkbox-inner-container { margin-left: auto; margin-right: 8px; } .md-checkbox-checked .md-checkbox-checkmark { opacity: 1; } .md-checkbox-checked .md-checkbox-checkmark-path { stroke-dashoffset: 0; } .md-checkbox-checked .md-checkbox-mixedmark { transform: scaleX(1) rotate(-45deg); } .md-checkbox-checked .md-checkbox-background { background-color: #9c27b0; } .md-checkbox-indeterminate .md-checkbox-background { background-color: #9c27b0; } .md-checkbox-indeterminate .md-checkbox-checkmark { opacity: 0; transform: rotate(45deg); } .md-checkbox-indeterminate .md-checkbox-checkmark-path { stroke-dashoffset: 0; } .md-checkbox-indeterminate .md-checkbox-mixedmark { opacity: 1; transform: scaleX(1) rotate(0deg); } .md-checkbox-unchecked .md-checkbox-background { background-color: transparent; } .md-checkbox-disabled { cursor: default; } .md-checkbox-disabled.md-checkbox-checked .md-checkbox-background, .md-checkbox-disabled.md-checkbox-indeterminate .md-checkbox-background { background-color: #b0b0b0; } .md-checkbox-disabled:not(.md-checkbox-checked) .md-checkbox-frame { border-color: #b0b0b0; } .md-checkbox-anim-unchecked-checked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-checked .md-checkbox-checkmark-path { animation: 180ms linear 0ms md-checkbox-unchecked-checked-checkmark-path; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-unchecked-indeterminate-mixedmark; } .md-checkbox-anim-checked-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-checked-unchecked .md-checkbox-checkmark-path { animation: 90ms linear 0ms md-checkbox-checked-unchecked-checkmark-path; } .md-checkbox-anim-checked-indeterminate .md-checkbox-checkmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-checkmark; } .md-checkbox-anim-checked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-mixedmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-checkmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-checkmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-mixedmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-mixedmark; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-mixedmark { animation: 300ms linear 0ms md-checkbox-indeterminate-unchecked-mixedmark; } .md-checkbox-input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; text-transform: none; width: 1px; } .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; } .md-checkbox-focused .md-ink-ripple { opacity: 1; background-color: rgba(156, 39, 176, 0.26); } .md-checkbox-disabled .md-ink-ripple { background-color: #000; } /*# sourceMappingURL=checkbox.css.map */ "], | ||
| template: "<label class=\"md-checkbox-layout\"> <div class=\"md-checkbox-inner-container\"> <input class=\"md-checkbox-input md-visually-hidden\" type=\"checkbox\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [tabIndex]=\"tabindex\" [indeterminate]=\"indeterminate\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (focus)=\"_onInputFocus()\" (blur)=\"_onInputBlur()\" (change)=\"_onInteractionEvent($event)\" (click)=\"_onInputClick($event)\"> <div class=\"md-ink-ripple\"></div> <div class=\"md-checkbox-frame\"></div> <div class=\"md-checkbox-background\"> <svg version=\"1.1\" class=\"md-checkbox-checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" xml:space=\"preserve\"> <path class=\"md-checkbox-checkmark-path\" fill=\"none\" stroke=\"white\" d=\"M4.1,12.7 9,17.6 20.3,6.3\"/> </svg> <!-- Element for rendering the indeterminate state checkbox. --> <div class=\"md-checkbox-mixedmark\"></div> </div> </div> <span class=\"md-checkbox-label\"> <ng-content></ng-content> </span> </label> ", | ||
| styles: ["@keyframes md-checkbox-fade-in-background { 0% { opacity: 0; } 50% { opacity: 1; } } @keyframes md-checkbox-fade-out-background { 0%, 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes md-checkbox-unchecked-checked-checkmark-path { 0%, 50% { stroke-dashoffset: 22.91026; } 50% { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); } 100% { stroke-dashoffset: 0; } } @keyframes md-checkbox-unchecked-indeterminate-mixedmark { 0%, 68.2% { transform: scaleX(0); } 68.2% { animation-timing-function: cubic-bezier(0, 0, 0, 1); } 100% { transform: scaleX(1); } } @keyframes md-checkbox-checked-unchecked-checkmark-path { from { animation-timing-function: cubic-bezier(0.4, 0, 1, 1); stroke-dashoffset: 0; } to { stroke-dashoffset: -22.91026; } } @keyframes md-checkbox-checked-indeterminate-checkmark { from { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: rotate(45deg); } } @keyframes md-checkbox-indeterminate-checked-checkmark { from { animation-timing-function: cubic-bezier(0.14, 0, 0, 1); opacity: 0; transform: rotate(45deg); } to { opacity: 1; transform: rotate(360deg); } } @keyframes md-checkbox-checked-indeterminate-mixedmark { from { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); opacity: 0; transform: rotate(-45deg); } to { opacity: 1; transform: rotate(0deg); } } @keyframes md-checkbox-indeterminate-checked-mixedmark { from { animation-timing-function: cubic-bezier(0.14, 0, 0, 1); opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: rotate(315deg); } } @keyframes md-checkbox-indeterminate-unchecked-mixedmark { 0% { animation-timing-function: linear; opacity: 1; transform: scaleX(1); } 32.8%, 100% { opacity: 0; transform: scaleX(0); } } .md-checkbox-frame, .md-checkbox-background, .md-checkbox-checkmark { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .md-checkbox-checkmark, .md-checkbox-mixedmark { width: calc(100% - 4px); } .md-checkbox-frame, .md-checkbox-background { border-radius: 2px; box-sizing: border-box; pointer-events: none; } md-checkbox { cursor: pointer; } .md-checkbox-layout { cursor: inherit; align-items: baseline; display: inline-flex; } .md-checkbox-inner-container { display: inline-block; height: 20px; line-height: 0; margin: auto; margin-right: 8px; order: 0; position: relative; vertical-align: middle; white-space: nowrap; width: 20px; } [dir='rtl'] .md-checkbox-inner-container { margin-left: 8px; margin-right: auto; } .md-checkbox-layout .md-checkbox-label { line-height: 24px; } .md-checkbox-frame { background-color: transparent; border: 2px solid; transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1); will-change: border-color; } .md-checkbox-background { align-items: center; display: inline-flex; justify-content: center; transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 90ms cubic-bezier(0, 0, 0.2, 0.1); will-change: background-color, opacity; } .md-checkbox-checkmark { width: 100%; } .md-checkbox-checkmark-path { stroke-dashoffset: 22.91026; stroke-dasharray: 22.91026; stroke-width: 2.66667px; } .md-checkbox-mixedmark { height: 2px; opacity: 0; transform: scaleX(0) rotate(0deg); } .md-checkbox-align-end .md-checkbox-inner-container { order: 1; margin-left: 8px; margin-right: auto; } [dir='rtl'] .md-checkbox-align-end .md-checkbox-inner-container { margin-left: auto; margin-right: 8px; } .md-checkbox-checked .md-checkbox-checkmark { opacity: 1; } .md-checkbox-checked .md-checkbox-checkmark-path { stroke-dashoffset: 0; } .md-checkbox-checked .md-checkbox-mixedmark { transform: scaleX(1) rotate(-45deg); } .md-checkbox-indeterminate .md-checkbox-checkmark { opacity: 0; transform: rotate(45deg); } .md-checkbox-indeterminate .md-checkbox-checkmark-path { stroke-dashoffset: 0; } .md-checkbox-indeterminate .md-checkbox-mixedmark { opacity: 1; transform: scaleX(1) rotate(0deg); } .md-checkbox-unchecked .md-checkbox-background { background-color: transparent; } .md-checkbox-disabled { cursor: default; } .md-checkbox-anim-unchecked-checked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-checked .md-checkbox-checkmark-path { animation: 180ms linear 0ms md-checkbox-unchecked-checked-checkmark-path; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-unchecked-indeterminate-mixedmark; } .md-checkbox-anim-checked-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-checked-unchecked .md-checkbox-checkmark-path { animation: 90ms linear 0ms md-checkbox-checked-unchecked-checkmark-path; } .md-checkbox-anim-checked-indeterminate .md-checkbox-checkmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-checkmark; } .md-checkbox-anim-checked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-mixedmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-checkmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-checkmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-mixedmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-mixedmark; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-mixedmark { animation: 300ms linear 0ms md-checkbox-indeterminate-unchecked-mixedmark; } .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; } .md-checkbox-focused .md-ink-ripple { opacity: 1; } .md-checkbox-disabled .md-ink-ripple { background-color: #000; } /*# sourceMappingURL=checkbox.css.map */ "], | ||
| host: { | ||
@@ -304,0 +304,0 @@ '[class.md-checkbox-indeterminate]': 'indeterminate', |
+35
-105
@@ -1,21 +0,15 @@ | ||
| @import 'default-theme'; | ||
| @import 'theme-functions'; | ||
| @import 'variables'; | ||
| @import 'mixins'; | ||
| @import '../core/theming/theming'; | ||
| @import '../core/style/variables'; | ||
| @import '../core/ripple/ripple'; | ||
| /** The width/height of the checkbox element. */ | ||
| // The width/height of the checkbox element. | ||
| $md-checkbox-size: $md-toggle-size !default; | ||
| /** The width of the line used to draw the checkmark / mixedmark. */ | ||
| // The width of the line used to draw the checkmark / mixedmark. | ||
| $md-checkbox-mark-stroke-size: 2/15 * $md-checkbox-size !default; | ||
| /** The width of the checkbox border shown when the checkbox is unchecked. */ | ||
| // The width of the checkbox border shown when the checkbox is unchecked. | ||
| $md-checkbox-border-width: 2px; | ||
| /** The color of the checkbox border. */ | ||
| $md-checkbox-border-color: if($md-is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)) !default; | ||
| /** The color of the checkbox's checkmark / mixedmark. */ | ||
| $md-checkbox-mark-color: md-color($md-background, background); | ||
| /** The color that is used as the checkbox background when it is checked. */ | ||
| $md-checkbox-background-color: md-color($md-accent, 500); | ||
| /** The base duration used for the majority of transitions for the checkbox. */ | ||
| // The base duration used for the majority of transitions for the checkbox. | ||
| $md-checkbox-transition-duration: 90ms; | ||
| /** The amount of spacing between the checkbox and its label. */ | ||
| // The amount of spacing between the checkbox and its label. | ||
| $md-checkbox-item-spacing: $md-toggle-padding; | ||
@@ -27,5 +21,3 @@ | ||
| /** | ||
| * Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}. | ||
| */ | ||
| // Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}. | ||
| @keyframes md-checkbox-fade-in-background { | ||
@@ -41,5 +33,3 @@ 0% { | ||
| /** | ||
| * 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 { | ||
@@ -55,5 +45,3 @@ 0%, 50% { | ||
| /** | ||
| * "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 { | ||
@@ -73,5 +61,3 @@ 0%, 50% { | ||
| /** | ||
| * 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 { | ||
@@ -91,5 +77,3 @@ 0%, 68.2% { | ||
| /** | ||
| * "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 { | ||
@@ -106,6 +90,5 @@ from { | ||
| /** | ||
| * 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 { | ||
@@ -124,7 +107,5 @@ from { | ||
| /** | ||
| * 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 { | ||
@@ -143,7 +124,5 @@ from { | ||
| /** | ||
| * 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 { | ||
@@ -162,7 +141,5 @@ from { | ||
| /** | ||
| * 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 { | ||
@@ -181,6 +158,5 @@ from { | ||
| /** | ||
| * 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 { | ||
@@ -199,5 +175,3 @@ 0% { | ||
| /** | ||
| * 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 { | ||
@@ -211,6 +185,4 @@ bottom: 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 { | ||
@@ -221,6 +193,4 @@ $width-padding-inset: 2 * $md-checkbox-border-width; | ||
| /** | ||
| * 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 { | ||
@@ -274,3 +244,3 @@ @extend %md-checkbox-cover-element; | ||
| 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; | ||
@@ -296,3 +266,2 @@ will-change: border-color; | ||
| fill: $md-checkbox-mark-color; | ||
| width: 100%; | ||
@@ -302,5 +271,2 @@ } | ||
| .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: { | ||
@@ -316,3 +282,2 @@ dashoffset: $_md-checkbox-mark-path-length; | ||
| background-color: $md-checkbox-mark-color; | ||
| height: floor($md-checkbox-mark-stroke-size); | ||
@@ -352,13 +317,5 @@ opacity: 0; | ||
| } | ||
| .md-checkbox-background { | ||
| background-color: $md-checkbox-background-color; | ||
| } | ||
| } | ||
| .md-checkbox-indeterminate { | ||
| .md-checkbox-background { | ||
| background-color: $md-checkbox-background-color; | ||
| } | ||
| .md-checkbox-checkmark { | ||
@@ -387,24 +344,3 @@ opacity: 0; | ||
| .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; | ||
| } | ||
| } | ||
| } | ||
@@ -488,8 +424,2 @@ | ||
| // 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); |
+2
-2
@@ -303,4 +303,4 @@ (function (global, factory) { | ||
| _angular_core.Component({selector: 'md-checkbox', | ||
| template: "<label class=\"md-checkbox-layout\"> <div class=\"md-checkbox-inner-container\"> <input class=\"md-checkbox-input\" type=\"checkbox\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [tabIndex]=\"tabindex\" [indeterminate]=\"indeterminate\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (focus)=\"_onInputFocus()\" (blur)=\"_onInputBlur()\" (change)=\"_onInteractionEvent($event)\" (click)=\"_onInputClick($event)\"> <div class=\"md-ink-ripple\"></div> <div class=\"md-checkbox-frame\"></div> <div class=\"md-checkbox-background\"> <svg version=\"1.1\" class=\"md-checkbox-checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" xml:space=\"preserve\"> <path class=\"md-checkbox-checkmark-path\" fill=\"none\" stroke=\"white\" d=\"M4.1,12.7 9,17.6 20.3,6.3\"/> </svg> <!-- Element for rendering the indeterminate state checkbox. --> <div class=\"md-checkbox-mixedmark\"></div> </div> </div> <span class=\"md-checkbox-label\"> <ng-content></ng-content> </span> </label> ", | ||
| styles: ["/** * 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 */ /** * This mixin hides an element visually. * That means it's still accessible for screen-readers but not visible in view. */ /** * Forces an element to grow to fit floated contents; used as as an alternative to * `overflow: hidden;` because it doesn't cut off contents. */ /** * 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. */ /** The width/height of the checkbox element. */ /** The width of the line used to draw the checkmark / mixedmark. */ /** The width of the checkbox border shown when the checkbox is unchecked. */ /** The color of the checkbox border. */ /** The color of the checkbox's checkmark / mixedmark. */ /** The color that is used as the checkbox background when it is checked. */ /** The base duration used for the majority of transitions for the checkbox. */ /** The amount of spacing between the checkbox and its label. */ /** * Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}. */ @keyframes md-checkbox-fade-in-background { 0% { opacity: 0; } 50% { opacity: 1; } } /** * Fades out the background of the checkbox when it goes from {checked,indeterminate} -> unchecked. */ @keyframes md-checkbox-fade-out-background { 0%, 50% { opacity: 1; } 100% { opacity: 0; } } /** * \"Draws\" in the checkmark when the checkbox goes from unchecked -> checked. */ @keyframes md-checkbox-unchecked-checked-checkmark-path { 0%, 50% { stroke-dashoffset: 22.91026; } 50% { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); } 100% { stroke-dashoffset: 0; } } /** * Horizontally expands the mixedmark when the checkbox goes from unchecked -> indeterminate. */ @keyframes md-checkbox-unchecked-indeterminate-mixedmark { 0%, 68.2% { transform: scaleX(0); } 68.2% { animation-timing-function: cubic-bezier(0, 0, 0, 1); } 100% { transform: scaleX(1); } } /** * \"Erases\" the checkmark when the checkbox goes from checked -> unchecked. */ @keyframes md-checkbox-checked-unchecked-checkmark-path { from { animation-timing-function: cubic-bezier(0.4, 0, 1, 1); stroke-dashoffset: 0; } to { stroke-dashoffset: -22.91026; } } /** * 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: cubic-bezier(0, 0, 0.2, 0.1); opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: rotate(45deg); } } /** * 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: cubic-bezier(0.14, 0, 0, 1); opacity: 0; transform: rotate(45deg); } to { opacity: 1; transform: rotate(360deg); } } /** * 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: cubic-bezier(0, 0, 0.2, 0.1); opacity: 0; transform: rotate(-45deg); } to { opacity: 1; transform: rotate(0deg); } } /** * 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: cubic-bezier(0.14, 0, 0, 1); opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: rotate(315deg); } } /** * 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; opacity: 1; transform: scaleX(1); } 32.8%, 100% { opacity: 0; transform: scaleX(0); } } /** * Applied to elements that cover the checkbox's entire inner container. */ .md-checkbox-frame, .md-checkbox-background, .md-checkbox-checkmark { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } /** * Applied to elements that are considered \"marks\" within the checkbox, e.g. the checkmark and * the mixedmark. */ .md-checkbox-checkmark, .md-checkbox-mixedmark { width: calc(100% - 4px); } /** * 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-frame, .md-checkbox-background { border-radius: 2px; box-sizing: border-box; pointer-events: none; } md-checkbox { cursor: pointer; } .md-checkbox-layout { cursor: inherit; align-items: baseline; display: inline-flex; } .md-checkbox-inner-container { display: inline-block; height: 20px; line-height: 0; margin: auto; margin-right: 8px; order: 0; position: relative; vertical-align: middle; white-space: nowrap; width: 20px; } [dir='rtl'] .md-checkbox-inner-container { margin-left: 8px; margin-right: auto; } .md-checkbox-layout .md-checkbox-label { line-height: 24px; } .md-checkbox-frame { background-color: transparent; border: 2px solid rgba(0, 0, 0, 0.54); transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1); will-change: border-color; } .md-checkbox-background { align-items: center; display: inline-flex; justify-content: center; transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 90ms cubic-bezier(0, 0, 0.2, 0.1); will-change: background-color, opacity; } .md-checkbox-checkmark { fill: #fafafa; width: 100%; } .md-checkbox-checkmark-path { stroke: #fafafa !important; stroke-dashoffset: 22.91026; stroke-dasharray: 22.91026; stroke-width: 2.66667px; } .md-checkbox-mixedmark { background-color: #fafafa; height: 2px; opacity: 0; transform: scaleX(0) rotate(0deg); } .md-checkbox-align-end .md-checkbox-inner-container { order: 1; margin-left: 8px; margin-right: auto; } [dir='rtl'] .md-checkbox-align-end .md-checkbox-inner-container { margin-left: auto; margin-right: 8px; } .md-checkbox-checked .md-checkbox-checkmark { opacity: 1; } .md-checkbox-checked .md-checkbox-checkmark-path { stroke-dashoffset: 0; } .md-checkbox-checked .md-checkbox-mixedmark { transform: scaleX(1) rotate(-45deg); } .md-checkbox-checked .md-checkbox-background { background-color: #9c27b0; } .md-checkbox-indeterminate .md-checkbox-background { background-color: #9c27b0; } .md-checkbox-indeterminate .md-checkbox-checkmark { opacity: 0; transform: rotate(45deg); } .md-checkbox-indeterminate .md-checkbox-checkmark-path { stroke-dashoffset: 0; } .md-checkbox-indeterminate .md-checkbox-mixedmark { opacity: 1; transform: scaleX(1) rotate(0deg); } .md-checkbox-unchecked .md-checkbox-background { background-color: transparent; } .md-checkbox-disabled { cursor: default; } .md-checkbox-disabled.md-checkbox-checked .md-checkbox-background, .md-checkbox-disabled.md-checkbox-indeterminate .md-checkbox-background { background-color: #b0b0b0; } .md-checkbox-disabled:not(.md-checkbox-checked) .md-checkbox-frame { border-color: #b0b0b0; } .md-checkbox-anim-unchecked-checked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-checked .md-checkbox-checkmark-path { animation: 180ms linear 0ms md-checkbox-unchecked-checked-checkmark-path; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-unchecked-indeterminate-mixedmark; } .md-checkbox-anim-checked-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-checked-unchecked .md-checkbox-checkmark-path { animation: 90ms linear 0ms md-checkbox-checked-unchecked-checkmark-path; } .md-checkbox-anim-checked-indeterminate .md-checkbox-checkmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-checkmark; } .md-checkbox-anim-checked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-mixedmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-checkmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-checkmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-mixedmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-mixedmark; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-mixedmark { animation: 300ms linear 0ms md-checkbox-indeterminate-unchecked-mixedmark; } .md-checkbox-input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; text-transform: none; width: 1px; } .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; } .md-checkbox-focused .md-ink-ripple { opacity: 1; background-color: rgba(156, 39, 176, 0.26); } .md-checkbox-disabled .md-ink-ripple { background-color: #000; } /*# sourceMappingURL=checkbox.css.map */ "], | ||
| template: "<label class=\"md-checkbox-layout\"> <div class=\"md-checkbox-inner-container\"> <input class=\"md-checkbox-input md-visually-hidden\" type=\"checkbox\" [id]=\"inputId\" [checked]=\"checked\" [disabled]=\"disabled\" [name]=\"name\" [tabIndex]=\"tabindex\" [indeterminate]=\"indeterminate\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledby\" (focus)=\"_onInputFocus()\" (blur)=\"_onInputBlur()\" (change)=\"_onInteractionEvent($event)\" (click)=\"_onInputClick($event)\"> <div class=\"md-ink-ripple\"></div> <div class=\"md-checkbox-frame\"></div> <div class=\"md-checkbox-background\"> <svg version=\"1.1\" class=\"md-checkbox-checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" xml:space=\"preserve\"> <path class=\"md-checkbox-checkmark-path\" fill=\"none\" stroke=\"white\" d=\"M4.1,12.7 9,17.6 20.3,6.3\"/> </svg> <!-- Element for rendering the indeterminate state checkbox. --> <div class=\"md-checkbox-mixedmark\"></div> </div> </div> <span class=\"md-checkbox-label\"> <ng-content></ng-content> </span> </label> ", | ||
| styles: ["@keyframes md-checkbox-fade-in-background { 0% { opacity: 0; } 50% { opacity: 1; } } @keyframes md-checkbox-fade-out-background { 0%, 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes md-checkbox-unchecked-checked-checkmark-path { 0%, 50% { stroke-dashoffset: 22.91026; } 50% { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); } 100% { stroke-dashoffset: 0; } } @keyframes md-checkbox-unchecked-indeterminate-mixedmark { 0%, 68.2% { transform: scaleX(0); } 68.2% { animation-timing-function: cubic-bezier(0, 0, 0, 1); } 100% { transform: scaleX(1); } } @keyframes md-checkbox-checked-unchecked-checkmark-path { from { animation-timing-function: cubic-bezier(0.4, 0, 1, 1); stroke-dashoffset: 0; } to { stroke-dashoffset: -22.91026; } } @keyframes md-checkbox-checked-indeterminate-checkmark { from { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: rotate(45deg); } } @keyframes md-checkbox-indeterminate-checked-checkmark { from { animation-timing-function: cubic-bezier(0.14, 0, 0, 1); opacity: 0; transform: rotate(45deg); } to { opacity: 1; transform: rotate(360deg); } } @keyframes md-checkbox-checked-indeterminate-mixedmark { from { animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); opacity: 0; transform: rotate(-45deg); } to { opacity: 1; transform: rotate(0deg); } } @keyframes md-checkbox-indeterminate-checked-mixedmark { from { animation-timing-function: cubic-bezier(0.14, 0, 0, 1); opacity: 1; transform: rotate(0deg); } to { opacity: 0; transform: rotate(315deg); } } @keyframes md-checkbox-indeterminate-unchecked-mixedmark { 0% { animation-timing-function: linear; opacity: 1; transform: scaleX(1); } 32.8%, 100% { opacity: 0; transform: scaleX(0); } } .md-checkbox-frame, .md-checkbox-background, .md-checkbox-checkmark { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .md-checkbox-checkmark, .md-checkbox-mixedmark { width: calc(100% - 4px); } .md-checkbox-frame, .md-checkbox-background { border-radius: 2px; box-sizing: border-box; pointer-events: none; } md-checkbox { cursor: pointer; } .md-checkbox-layout { cursor: inherit; align-items: baseline; display: inline-flex; } .md-checkbox-inner-container { display: inline-block; height: 20px; line-height: 0; margin: auto; margin-right: 8px; order: 0; position: relative; vertical-align: middle; white-space: nowrap; width: 20px; } [dir='rtl'] .md-checkbox-inner-container { margin-left: 8px; margin-right: auto; } .md-checkbox-layout .md-checkbox-label { line-height: 24px; } .md-checkbox-frame { background-color: transparent; border: 2px solid; transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1); will-change: border-color; } .md-checkbox-background { align-items: center; display: inline-flex; justify-content: center; transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 90ms cubic-bezier(0, 0, 0.2, 0.1); will-change: background-color, opacity; } .md-checkbox-checkmark { width: 100%; } .md-checkbox-checkmark-path { stroke-dashoffset: 22.91026; stroke-dasharray: 22.91026; stroke-width: 2.66667px; } .md-checkbox-mixedmark { height: 2px; opacity: 0; transform: scaleX(0) rotate(0deg); } .md-checkbox-align-end .md-checkbox-inner-container { order: 1; margin-left: 8px; margin-right: auto; } [dir='rtl'] .md-checkbox-align-end .md-checkbox-inner-container { margin-left: auto; margin-right: 8px; } .md-checkbox-checked .md-checkbox-checkmark { opacity: 1; } .md-checkbox-checked .md-checkbox-checkmark-path { stroke-dashoffset: 0; } .md-checkbox-checked .md-checkbox-mixedmark { transform: scaleX(1) rotate(-45deg); } .md-checkbox-indeterminate .md-checkbox-checkmark { opacity: 0; transform: rotate(45deg); } .md-checkbox-indeterminate .md-checkbox-checkmark-path { stroke-dashoffset: 0; } .md-checkbox-indeterminate .md-checkbox-mixedmark { opacity: 1; transform: scaleX(1) rotate(0deg); } .md-checkbox-unchecked .md-checkbox-background { background-color: transparent; } .md-checkbox-disabled { cursor: default; } .md-checkbox-anim-unchecked-checked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-checked .md-checkbox-checkmark-path { animation: 180ms linear 0ms md-checkbox-unchecked-checked-checkmark-path; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-in-background; } .md-checkbox-anim-unchecked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-unchecked-indeterminate-mixedmark; } .md-checkbox-anim-checked-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-checked-unchecked .md-checkbox-checkmark-path { animation: 90ms linear 0ms md-checkbox-checked-unchecked-checkmark-path; } .md-checkbox-anim-checked-indeterminate .md-checkbox-checkmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-checkmark; } .md-checkbox-anim-checked-indeterminate .md-checkbox-mixedmark { animation: 90ms linear 0ms md-checkbox-checked-indeterminate-mixedmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-checkmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-checkmark; } .md-checkbox-anim-indeterminate-checked .md-checkbox-mixedmark { animation: 500ms linear 0ms md-checkbox-indeterminate-checked-mixedmark; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-background { animation: 180ms linear 0ms md-checkbox-fade-out-background; } .md-checkbox-anim-indeterminate-unchecked .md-checkbox-mixedmark { animation: 300ms linear 0ms md-checkbox-indeterminate-unchecked-mixedmark; } .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; } .md-checkbox-focused .md-ink-ripple { opacity: 1; } .md-checkbox-disabled .md-ink-ripple { background-color: #000; } /*# sourceMappingURL=checkbox.css.map */ "], | ||
| host: { | ||
@@ -307,0 +307,0 @@ '[class.md-checkbox-indeterminate]': 'indeterminate', |
+2
-2
| { | ||
| "name": "@angular2-material/checkbox", | ||
| "version": "2.0.0-alpha.8-1", | ||
| "version": "2.0.0-alpha.8-experimental1", | ||
| "description": "Angular 2 Material checkbox", | ||
@@ -25,5 +25,5 @@ "main": "./checkbox.umd.js", | ||
| "peerDependencies": { | ||
| "@angular2-material/core": "2.0.0-alpha.8-1", | ||
| "@angular2-material/core": "2.0.0-alpha.8-experimental1", | ||
| "@angular/forms": "2.0.0-rc.6" | ||
| } | ||
| } |
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Improved metrics
- Number of package files
16
6.67%Worsened metrics
- Total package byte prevSize
133177
-9.17%- Lines of code
1043
-10.63%No dependency changes