UNPKG

@angular2-material/core

Version:
1 lines 2.77 kB
{"version":3,"file":"core/a11y/live-announcer.css","sources":["core/a11y/live-announcer.scss","core/style/_mixins.scss"],"sourcesContent":["@import 'mixins';\n\n.md-live-announcer {\n @include md-visually-hidden();\n}\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":"ACCA;;;GAGG;AAQH;;;GAGG;AAaH;;;GAGG;AASH;;;;;;GAMG;AD5CH,AAAA,kBAAkB,CAAC;ECejB,MAAM,EAAE,CAAE;EACV,IAAI,EAAE,aAAI;EACV,MAAM,EAAE,GAAI;EACZ,MAAM,EAAE,IAAK;EACb,QAAQ,EAAE,MAAO;EACjB,OAAO,EAAE,CAAE;EACX,QAAQ,EAAE,QAAS;EACnB,cAAc,EAAE,IAAK;EACrB,KAAK,EAAE,GAAI,GDrBZ","names":[],"sourceRoot":"/source/"}