md2/select/select.css.map

Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Chips(Tags), Collapse, Colorpicker, Data Table, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.

{"version":3,"sources":["select/select.scss","select/select.css","core/style/_vendor-prefixes.scss","core/style/_form-common.scss","core/style/_list-common.scss","core/style/_elevation.scss","core/style/_menu-common.scss","core/a11y/_a11y.scss"],"names":[],"mappings":"AAgBA,YACE,QAAS,aACT,QAAS,EAGX,oBACE,MAAY,gBACZ,QAAS,KACT,YAAa,OACb,OAhB0B,KAiB1B,UAhB6B,MAiB7B,OAAQ,QACR,SAAU,SACV,WAAY,WACZ,UAhB6B,KCY7B,yCCxBA,oBAAqB,KACrB,iBAAkB,KAClB,gBAAiB,KACjB,YAAa,KF6BX,OAAQ,QAGV,gEACE,MA/BM,QAkCR,gFACE,MAlCG,QAsCP,sBACE,SAAU,SACV,OAAQ,EACR,KAAM,EACN,MAAO,EACP,OAAQ,IACR,iBAAuB,gBCRvB,2CEpCA,iBAHM,8EAIN,gBAAiB,IAAA,IACjB,kBAAmB,SH8CjB,iBAAkB,YAClB,oBAAqB,EAAA,OAGvB,kEACE,iBAtDM,QAyDR,kFACE,iBAzDG,QA6DP,wBACE,SAAU,SACV,QAAS,EAAA,IACT,iBAAkB,KAAA,IAClB,UAAW,EAJb,iDAOI,IAAK,MACL,KAAM,KACN,WAAY,KACZ,UAAW,WCdb,kCDkBE,iBAAkB,MAAA,IChBlB,2DDmBE,KAAM,IACN,WAAY,MCjBhB,oDDsBE,QAAS,IACT,MAAO,QAIX,kBACE,SAAU,SACV,UAAW,kBACX,UAAW,EACX,IAAK,EACL,KAAM,EACN,OAAQ,EACR,QAAS,KACT,YAAa,OACb,MAAY,gBCtBZ,4BDyBE,KAAM,KACN,MAAO,EAGT,uCACE,MAAY,gBAIhB,uBInHE,YAAa,OACb,SAAU,OACV,cAAe,SJmHf,YA/G0B,KAkH5B,kBACE,MAAO,EACP,OAAQ,EACR,YAnHsB,IAmHc,MAAM,YAC1C,aApHsB,IAoHe,MAAM,YAC3C,WArHsB,IAqHa,MACnC,OAAQ,EArHgB,IAwH1B,kBKME,WAAY,EAAA,IAAA,IAAA,KAAA,cAA0C,CAC1C,EAAA,IAAA,KAAA,IAAA,eAA6C,CAC7C,EAAA,IAAA,KAAA,IAAA,gBC3HZ,UAV2B,MAW3B,UAV2B,MAY3B,SAAU,KACV,2BAA4B,MNiH5B,YAAa,EACb,eAAgB,EAChB,WA3H4B,MA4H5B,UAAW,KOrHX,6CPgHF,kBAQI,QAAS,MAAA,KAIb,oBAAqB,iCACnB,WAAY,KAGU,4BAAxB,uBACE,eAAgB,KAChB,IAAK,EACL,KAAM,EACN,OAAQ,KACR,MAAO,KAGT,uBACE,SAAU,MACV,QAAS,IAGX,kBACE,SAAU,SACV,eAAgB,KAChB,WAAY,WACZ,QAAS,IAGX,sBACE,SAAU,SACV,IAAK,EACL,OAAQ,EACR,KAAM,EACN,MAAO,EACP,QAAS,IACT,eAAgB,KAChB,WAAY,QAAQ,IAAM,2BAC1B,QAAS,EAGX,kCACE,WAAY,IAGd,mDACE,QAAS","file":"select.css","sourcesContent":["@import '../core/style/menu-common';\n@import '../core/style/list-common';\n@import '../core/style/form-common';\n@import '../core/style/variables';\n@import '../core/style/vendor-prefixes';\n@import '../core/a11y/a11y';\n\n$primary: #106cc8 !default;\n$warn: #f44336 !default;\n$md2-select-trigger-height: 30px !default;\n$md2-select-trigger-min-width: 112px !default;\n$md2-select-arrow-size: 5px !default;\n$md2-select-arrow-margin: 4px !default;\n$md2-select-panel-max-height: 256px !default;\n$md2-select-trigger-font-size: 16px !default;\n\n.md2-select {\n  display: inline-block;\n  outline: none;\n}\n\n.md2-select-trigger {\n  color: rgba(black, 0.38);\n  display: flex;\n  align-items: center;\n  height: $md2-select-trigger-height;\n  min-width: $md2-select-trigger-min-width;\n  cursor: pointer;\n  position: relative;\n  box-sizing: border-box;\n  font-size: $md2-select-trigger-font-size;\n\n  [aria-disabled='true'] & {\n    @include user-select(none);\n    cursor: default;\n  }\n\n  .md2-select:focus:not(.md2-select-disabled) & {\n    color: $primary;\n  }\n\n  .md2-select.ng-invalid.ng-touched:not(.md2-select-disabled) & {\n    color: $warn;\n  }\n}\n\n.md2-select-underline {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background-color: rgba(black, 0.12);\n\n  [aria-disabled='true'] & {\n    @include mat-control-disabled-underline();\n    background-color: transparent;\n    background-position: 0 bottom;\n  }\n\n  .md2-select:focus:not(.md2-select-disabled) & {\n    background-color: $primary;\n  }\n\n  .md2-select.ng-invalid.ng-touched:not(.md2-select-disabled) & {\n    background-color: $warn;\n  }\n}\n\n.md2-select-placeholder {\n  position: relative;\n  padding: 0 2px;\n  transform-origin: left top;\n  flex-grow: 1;\n\n  &.md2-floating-placeholder {\n    top: -22px;\n    left: -2px;\n    text-align: left;\n    transform: scale(0.75);\n  }\n \n  [dir='rtl'] & {\n    transform-origin: right top;\n\n    &.md2-floating-placeholder {\n      left: 2px;\n      text-align: right;\n    }\n  }\n\n  [aria-required=true] &::after {\n    content: '*';\n    color: #fd0f0f;\n  }\n}\n\n.md2-select-value {\n  position: absolute;\n  max-width: calc(100% - #{($md2-select-arrow-size + $md2-select-arrow-margin) * 2});\n  flex-grow: 1;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  color: rgba(black, 0.87);\n\n  [dir='rtl'] & {\n    left: auto;\n    right: 0;\n  }\n\n  .md2-select-disabled & {\n    color: rgba(black, 0.38);\n  }\n}\n\n.md2-select-value-text {\n  @include mat-truncate-line();\n  line-height: $md2-select-trigger-height;\n}\n\n.md2-select-arrow {\n  width: 0;\n  height: 0;\n  border-left: $md2-select-arrow-size solid transparent;\n  border-right: $md2-select-arrow-size solid transparent;\n  border-top: $md2-select-arrow-size solid;\n  margin: 0 $md2-select-arrow-margin;\n}\n\n.md2-select-panel {\n  @include mat-menu-base();\n  padding-top: 0;\n  padding-bottom: 0;\n  max-height: $md2-select-panel-max-height;\n  min-width: 100%;\n\n  @include cdk-high-contrast {\n    outline: solid 1px;\n  }\n}\n\n.md2-select-content, .md2-select-panel-done-animating {\n  background: white;\n}\n\n.cdk-overlay-container, .cdk-global-overlay-wrapper {\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n}\n\n.cdk-overlay-container {\n  position: fixed;\n  z-index: 999;\n}\n\n.cdk-overlay-pane {\n  position: absolute;\n  pointer-events: auto;\n  box-sizing: border-box;\n  z-index: 999;\n}\n\n.cdk-overlay-backdrop {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 999;\n  pointer-events: auto;\n  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n  opacity: 0;\n}\n\n.cdk-overlay-transparent-backdrop {\n  background: none;\n}\n\n.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {\n  opacity: 0.48;\n}\n",null,"/* stylelint-disable material/no-prefixes */\n@mixin user-select($value) {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n@mixin input-placeholder {\n  &::placeholder {\n    @content;\n  }\n\n  &::-moz-placeholder {\n    @content;\n  }\n\n  &::-webkit-input-placeholder {\n    @content;\n  }\n\n  &:-ms-input-placeholder {\n    @content;\n  }\n}\n\n@mixin cursor-grab {\n  cursor: -webkit-grab;\n  cursor: grab;\n}\n\n@mixin cursor-grabbing {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n/* stylelint-enable */\n","\n// Gradient for showing the dashed line when the input is disabled.\n// Unlike using a border, a gradient allows us to adjust the spacing of the dotted line\n// to match the Material Design spec.\n$mat-underline-disabled-background-image:\n        linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);\n\n@mixin mat-control-disabled-underline {\n  background-image: $mat-underline-disabled-background-image;\n  background-size: 4px 1px;\n  background-repeat: repeat-x;\n}","// This mixin will ensure that lines that overflow the container will hide the overflow and\n// truncate neatly with an ellipsis.\n@mixin mat-truncate-line() {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n// Mixin to provide all mat-line styles, changing secondary font size based on whether the list\n// is in dense mode.\n@mixin mat-line-base($secondary-font-size) {\n  .mat-line {\n    @include mat-truncate-line();\n    display: block;\n    box-sizing: border-box;\n\n    // all lines but the top line should have smaller text\n    &:nth-child(n+2) {\n      font-size: $secondary-font-size;\n    }\n  }\n}\n\n// This mixin normalizes default element styles, e.g. font weight for heading text.\n@mixin mat-normalize-text() {\n  & > * {\n    margin: 0;\n    padding: 0;\n    font-weight: normal;\n    font-size: inherit;\n  }\n}\n\n// This mixin provides base styles for the wrapper around mat-line elements in a list.\n@mixin mat-line-wrapper-base() {\n  @include mat-normalize-text();\n\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  // Must remove wrapper when lines are empty or it takes up horizontal\n  // space and pushes other elements to the right.\n  &:empty {\n    display: none;\n  }\n}\n","@import 'variables';\n\n\n// A collection of mixins and CSS classes that can be used to apply elevation to a material\n// element.\n// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html\n// Examples:\n//\n//\n// .mat-foo {\n//   @include $mat-elevation(2);\n//\n//   &:active {\n//     @include $mat-elevation(8);\n//   }\n// }\n//\n// <div id=\"external-card\" class=\"mat-elevation-z2\"><p>Some content</p></div>\n//\n// For an explanation of the design behind how elevation is implemented, see the design doc at\n// https://goo.gl/Kq0k9Z.\n\n// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation\n// level is created using a set of 3 shadow values, one for umbra (the shadow representing the\n// space completely obscured by an object relative to its light source), one for penumbra (the\n// space partially obscured by an object), and one for ambient (the space which contains the object\n// itself). For a further explanation of these terms and their meanings, see\n// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.\n\n$_umbra-color: rgba(black, 0.2);\n$_penumbra-color: rgba(black, 0.14);\n$_ambient-color: rgba(black, 0.12);\n\n// Maps for the different shadow sets and their values within each z-space. These values were\n// created by taking a few reference shadow sets created by Google's Designers and interpolating\n// all of the values between them.\n\n$_umbra-elevation-map: (\n  0: '0px 0px 0px 0px #{$_umbra-color}',\n  1: '0px 2px 1px -1px #{$_umbra-color}',\n  2: '0px 3px 1px -2px #{$_umbra-color}',\n  3: '0px 3px 3px -2px #{$_umbra-color}',\n  4: '0px 2px 4px -1px #{$_umbra-color}',\n  5: '0px 3px 5px -1px #{$_umbra-color}',\n  6: '0px 3px 5px -1px #{$_umbra-color}',\n  7: '0px 4px 5px -2px #{$_umbra-color}',\n  8: '0px 5px 5px -3px #{$_umbra-color}',\n  9: '0px 5px 6px -3px #{$_umbra-color}',\n  10: '0px 6px 6px -3px #{$_umbra-color}',\n  11: '0px 6px 7px -4px #{$_umbra-color}',\n  12: '0px 7px 8px -4px #{$_umbra-color}',\n  13: '0px 7px 8px -4px #{$_umbra-color}',\n  14: '0px 7px 9px -4px #{$_umbra-color}',\n  15: '0px 8px 9px -5px #{$_umbra-color}',\n  16: '0px 8px 10px -5px #{$_umbra-color}',\n  17: '0px 8px 11px -5px #{$_umbra-color}',\n  18: '0px 9px 11px -5px #{$_umbra-color}',\n  19: '0px 9px 12px -6px #{$_umbra-color}',\n  20: '0px 10px 13px -6px #{$_umbra-color}',\n  21: '0px 10px 13px -6px #{$_umbra-color}',\n  22: '0px 10px 14px -6px #{$_umbra-color}',\n  23: '0px 11px 14px -7px #{$_umbra-color}',\n  24: '0px 11px 15px -7px #{$_umbra-color}'\n);\n\n$_penumbra-elevation-map: (\n  0: '0px 0px 0px 0px #{$_penumbra-color}',\n  1: '0px 1px 1px 0px #{$_penumbra-color}',\n  2: '0px 2px 2px 0px #{$_penumbra-color}',\n  3: '0px 3px 4px 0px #{$_penumbra-color}',\n  4: '0px 4px 5px 0px #{$_penumbra-color}',\n  5: '0px 5px 8px 0px #{$_penumbra-color}',\n  6: '0px 6px 10px 0px #{$_penumbra-color}',\n  7: '0px 7px 10px 1px #{$_penumbra-color}',\n  8: '0px 8px 10px 1px #{$_penumbra-color}',\n  9: '0px 9px 12px 1px #{$_penumbra-color}',\n  10: '0px 10px 14px 1px #{$_penumbra-color}',\n  11: '0px 11px 15px 1px #{$_penumbra-color}',\n  12: '0px 12px 17px 2px #{$_penumbra-color}',\n  13: '0px 13px 19px 2px #{$_penumbra-color}',\n  14: '0px 14px 21px 2px #{$_penumbra-color}',\n  15: '0px 15px 22px 2px #{$_penumbra-color}',\n  16: '0px 16px 24px 2px #{$_penumbra-color}',\n  17: '0px 17px 26px 2px #{$_penumbra-color}',\n  18: '0px 18px 28px 2px #{$_penumbra-color}',\n  19: '0px 19px 29px 2px #{$_penumbra-color}',\n  20: '0px 20px 31px 3px #{$_penumbra-color}',\n  21: '0px 21px 33px 3px #{$_penumbra-color}',\n  22: '0px 22px 35px 3px #{$_penumbra-color}',\n  23: '0px 23px 36px 3px #{$_penumbra-color}',\n  24: '0px 24px 38px 3px #{$_penumbra-color}'\n);\n\n$_ambient-elevation-map: (\n  0: '0px 0px 0px 0px #{$_ambient-color}',\n  1: '0px 1px 3px 0px #{$_ambient-color}',\n  2: '0px 1px 5px 0px #{$_ambient-color}',\n  3: '0px 1px 8px 0px #{$_ambient-color}',\n  4: '0px 1px 10px 0px #{$_ambient-color}',\n  5: '0px 1px 14px 0px #{$_ambient-color}',\n  6: '0px 1px 18px 0px #{$_ambient-color}',\n  7: '0px 2px 16px 1px #{$_ambient-color}',\n  8: '0px 3px 14px 2px #{$_ambient-color}',\n  9: '0px 3px 16px 2px #{$_ambient-color}',\n  10: '0px 4px 18px 3px #{$_ambient-color}',\n  11: '0px 4px 20px 3px #{$_ambient-color}',\n  12: '0px 5px 22px 4px #{$_ambient-color}',\n  13: '0px 5px 24px 4px #{$_ambient-color}',\n  14: '0px 5px 26px 4px #{$_ambient-color}',\n  15: '0px 6px 28px 5px #{$_ambient-color}',\n  16: '0px 6px 30px 5px #{$_ambient-color}',\n  17: '0px 6px 32px 5px #{$_ambient-color}',\n  18: '0px 7px 34px 6px #{$_ambient-color}',\n  19: '0px 7px 36px 6px #{$_ambient-color}',\n  20: '0px 8px 38px 7px #{$_ambient-color}',\n  21: '0px 8px 40px 7px #{$_ambient-color}',\n  22: '0px 8px 42px 7px #{$_ambient-color}',\n  23: '0px 9px 44px 8px #{$_ambient-color}',\n  24: '0px 9px 46px 8px #{$_ambient-color}'\n);\n\n\n// The default duration value for elevation transitions.\n$mat-elevation-transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function;\n\n// Applies the correct css rules to an element to give it the elevation specified by $zValue.\n// The $zValue must be between 0 and 24.\n@mixin mat-elevation($zValue) {\n  @if type-of($zValue) != number or not unitless($zValue) {\n    @error '$zValue must be a unitless number';\n  }\n  @if $zValue < 0 or $zValue > 24 {\n    @error '$zValue must be between 0 and 24';\n  }\n\n  box-shadow: #{map-get($_umbra-elevation-map, $zValue)},\n              #{map-get($_penumbra-elevation-map, $zValue)},\n              #{map-get($_ambient-elevation-map, $zValue)};\n}\n\n// Returns a string that can be used as the value for a transition property for elevation.\n// Calling this function directly is useful in situations where a component needs to transition\n// more than one property.\n//\n// .foo {\n//   transition: mat-elevation-transition-property-value(), opacity 100ms ease;\n// }\n@function mat-elevation-transition-property-value(\n    $duration: $mat-elevation-transition-duration,\n    $easing: $mat-elevation-transition-timing-function) {\n  @return box-shadow #{$duration} #{$easing};\n}\n\n// Applies the correct css rules needed to have an element transition between elevations.\n// This mixin should be applied to elements whose elevation values will change depending on their\n// context (e.g. when active or disabled).\n//\n// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can\n// be used in the same way by clients.\n@mixin mat-elevation-transition(\n    $duration: $mat-elevation-transition-duration,\n    $easing: $mat-elevation-transition-timing-function) {\n  transition: mat-elevation-transition-property-value($duration, $easing);\n}\n","@import './variables';\n@import './elevation';\n@import './list-common';\n\n/** The mixins below are shared between md-menu and md-select */\n\n// menu width must be a multiple of 56px\n$mat-menu-overlay-min-width: 112px !default;   // 56 * 2\n$mat-menu-overlay-max-width: 280px !default;   // 56 * 5\n\n$mat-menu-item-height: 48px !default;\n$mat-menu-side-padding: 16px !default;\n$mat-menu-icon-margin: 16px !default;\n\n\n@mixin mat-menu-base() {\n  @include mat-elevation(8);\n  min-width: $mat-menu-overlay-min-width;\n  max-width: $mat-menu-overlay-max-width;\n\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile\n}\n\n@mixin mat-menu-item-base() {\n  @include mat-truncate-line();\n\n  // Needs to be a block for the ellipsis to work.\n  display: block;\n  line-height: $mat-menu-item-height;\n  height: $mat-menu-item-height;\n  padding: 0 $mat-menu-side-padding;\n\n  text-align: left;\n  text-decoration: none;   // necessary to reset anchor tags\n\n  &[disabled] {\n    cursor: default;\n  }\n\n  [dir='rtl'] & {\n    text-align: right;\n  }\n\n  .mat-icon {\n    margin-right: $mat-menu-icon-margin;\n\n    [dir='rtl'] & {\n      margin-left: $mat-menu-icon-margin;\n      margin-right: 0;\n    }\n  }\n}\n\n/**\n * This mixin adds the correct panel transform styles based\n * on the direction that the menu panel opens.\n */\n@mixin mat-menu-positions() {\n  &.mat-menu-after.mat-menu-below {\n    transform-origin: left top;\n  }\n\n  &.mat-menu-after.mat-menu-above {\n    transform-origin: left bottom;\n  }\n\n  &.mat-menu-before.mat-menu-below {\n    transform-origin: right top;\n  }\n\n  &.mat-menu-before.mat-menu-above {\n    transform-origin: right bottom;\n  }\n\n  [dir='rtl'] & {\n    &.mat-menu-after.mat-menu-below {\n      transform-origin: right top;\n    }\n\n    &.mat-menu-after.mat-menu-above {\n      transform-origin: right bottom;\n    }\n\n    &.mat-menu-before.mat-menu-below {\n      transform-origin: left top;\n    }\n\n    &.mat-menu-before.mat-menu-above {\n      transform-origin: left bottom;\n    }\n  }\n}\n","@mixin cdk-a11y {\n  .cdk-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/**\n * Applies styles for users in high contrast mode. Note that this only applies\n * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`\n * attribute, however Chrome handles high contrast differently.\n */\n@mixin cdk-high-contrast {\n  @media screen and (-ms-high-contrast: active) {\n    @content;\n  }\n}\n"]}