@material-git/all/menu/menu.css.map

Angular 2 Material

{"version":3,"file":"menu/menu.css","sources":["menu/menu.scss","core/style/_variables.scss","core/typography/_typography.scss","core/style/_elevation.scss","core/style/_button-common.scss","core/style/_sidenav-common.scss","core/style/_list-common.scss"],"sourcesContent":["// TODO(kara): update vars for desktop when MD team responds\r\n// TODO(kara): animation for menu opening\r\n@import '../core/style/variables';\r\n@import '../core/style/elevation';\r\n@import '../core/style/button-common';\r\n@import '../core/style/sidenav-common';\r\n@import '../core/style/list-common';\r\n\r\n\r\n// menu width must be a multiple of 56px\r\n$md-menu-overlay-min-width: 112px !default;   // 56 * 2\r\n$md-menu-overlay-max-width: 280px !default;   // 56 * 5\r\n\r\n$md-menu-item-height: 48px !default;\r\n$md-menu-font-size: 16px !default;\r\n$md-menu-side-padding: 16px !default;\r\n$md-menu-vertical-padding: 8px !default;\r\n\r\n.md-menu {\r\n  @include md-elevation(2);\r\n  min-width: $md-menu-overlay-min-width;\r\n  max-width: $md-menu-overlay-max-width;\r\n\r\n  // max height must be 100% of the viewport height + one row height\r\n  max-height: calc(100vh + 48px);\r\n  overflow: auto;\r\n  -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile\r\n\r\n  padding-top: $md-menu-vertical-padding;\r\n  padding-bottom: $md-menu-vertical-padding;\r\n}\r\n\r\n[md-menu-item] {\r\n  @include md-button-reset();\r\n  @include md-truncate-line();\r\n\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: $md-menu-item-height;\r\n  padding: 0 $md-menu-side-padding;\r\n\r\n  font-size: $md-menu-font-size;\r\n  font-family: $md-font-family;\r\n  text-align: start;\r\n  text-decoration: none;   // necessary to reset anchor tags\r\n\r\n  &[disabled] {\r\n    cursor: default;\r\n  }\r\n}\r\n\r\nbutton[md-menu-item] {\r\n  width: 100%;\r\n}\r\n\r\n.md-menu-click-catcher {\r\n  @include md-fullscreen();\r\n}\r\n","@import '../typography/typography';\r\n\r\n\r\n// Typography\r\n$md-body-font-size-base: rem(1.4) !default;\r\n$md-font-family: Roboto, 'Helvetica Neue', sans-serif !default;\r\n\r\n// Media queries\r\n$md-xsmall: 'max-width: 600px';\r\n\r\n// TODO: Revisit all z-indices before beta\r\n// z-index master list\r\n\r\n$z-index-fab: 20 !default;\r\n$z-index-drawer: 100 !default;\r\n\r\n// Overlay z indices.\r\n$md-z-index-overlay: 1000;\r\n$md-z-index-overlay-container: 1;\r\n$md-z-index-overlay-backdrop: 1;\r\n\r\n\r\n// Global constants\r\n$pi: 3.14159265;\r\n\r\n// Padding between input toggles and their labels\r\n$md-toggle-padding: 8px !default;\r\n// Width and height of input toggles\r\n$md-toggle-size: 20px !default;\r\n\r\n// Easing Curves\r\n// TODO(jelbourn): all of these need to be revisited\r\n\r\n// The default animation curves used by material design.\r\n$md-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\r\n$md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\r\n$md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\r\n\r\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\r\n\r\n$swift-ease-out-duration: 400ms !default;\r\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\r\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\r\n\r\n$swift-ease-in-duration: 300ms !default;\r\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\r\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\r\n\r\n$swift-ease-in-out-duration: 500ms !default;\r\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\r\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\r\n\r\n$swift-linear-duration: 80ms !default;\r\n$swift-linear-timing-function: linear !default;\r\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\r\n","// Implement the rem unit with SCSS so we don't have to actually set a font-size on\r\n// the user's body element.\r\n@function rem($multiplier) {\r\n  $font-size: 10px;\r\n  @return $multiplier * $font-size;\r\n}\r\n","@import 'variables';\r\n\r\n\r\n// A collection of mixins and CSS classes that can be used to apply elevation to a material\r\n// element.\r\n// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html\r\n// Examples:\r\n//\r\n//\r\n// .md-foo {\r\n//   @include $md-elevation(2);\r\n//\r\n//   &:active {\r\n//     @include $md-elevation(8);\r\n//   }\r\n// }\r\n//\r\n// <div id=\"external-card\" class=\"md-elevation-z2\"><p>Some content</p></div>\r\n//\r\n// For an explanation of the design behind how elevation is implemented, see the design doc at\r\n// https://goo.gl/Kq0k9Z.\r\n\r\n// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation\r\n// level is created using a set of 3 shadow values, one for umbra (the shadow representing the\r\n// space completely obscured by an object relative to its light source), one for penumbra (the\r\n// space partially obscured by an object), and one for ambient (the space which contains the object\r\n// itself). For a further explanation of these terms and their meanings, see\r\n// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.\r\n\r\n$_umbra-color: rgba(black, 0.2);\r\n$_penumbra-color: rgba(black, 0.14);\r\n$_ambient-color: rgba(black, 0.12);\r\n\r\n// Maps for the different shadow sets and their values within each z-space. These values were\r\n// created by taking a few reference shadow sets created by Google's Designers and interpolating\r\n// all of the values between them.\r\n\r\n$_umbra-elevation-map: (\r\n  0: '0px 0px 0px 0px #{$_umbra-color}',\r\n  1: '0px 2px 1px -1px #{$_umbra-color}',\r\n  2: '0px 3px 1px -2px #{$_umbra-color}',\r\n  3: '0px 3px 3px -2px #{$_umbra-color}',\r\n  4: '0px 2px 4px -1px #{$_umbra-color}',\r\n  5: '0px 3px 5px -1px #{$_umbra-color}',\r\n  6: '0px 3px 5px -1px #{$_umbra-color}',\r\n  7: '0px 4px 5px -2px #{$_umbra-color}',\r\n  8: '0px 5px 5px -3px #{$_umbra-color}',\r\n  9: '0px 5px 6px -3px #{$_umbra-color}',\r\n  10: '0px 6px 6px -3px #{$_umbra-color}',\r\n  11: '0px 6px 7px -4px #{$_umbra-color}',\r\n  12: '0px 7px 8px -4px #{$_umbra-color}',\r\n  13: '0px 7px 8px -4px #{$_umbra-color}',\r\n  14: '0px 7px 9px -4px #{$_umbra-color}',\r\n  15: '0px 8px 9px -5px #{$_umbra-color}',\r\n  16: '0px 8px 10px -5px #{$_umbra-color}',\r\n  17: '0px 8px 11px -5px #{$_umbra-color}',\r\n  18: '0px 9px 11px -5px #{$_umbra-color}',\r\n  19: '0px 9px 12px -6px #{$_umbra-color}',\r\n  20: '0px 10px 13px -6px #{$_umbra-color}',\r\n  21: '0px 10px 13px -6px #{$_umbra-color}',\r\n  22: '0px 10px 14px -6px #{$_umbra-color}',\r\n  23: '0px 11px 14px -7px #{$_umbra-color}',\r\n  24: '0px 11px 15px -7px #{$_umbra-color}'\r\n);\r\n\r\n$_penumbra-elevation-map: (\r\n  0: '0px 0px 0px 0px #{$_penumbra-color}',\r\n  1: '0px 1px 1px 0px #{$_penumbra-color}',\r\n  2: '0px 2px 2px 0px #{$_penumbra-color}',\r\n  3: '0px 3px 4px 0px #{$_penumbra-color}',\r\n  4: '0px 4px 5px 0px #{$_penumbra-color}',\r\n  5: '0px 5px 8px 0px #{$_penumbra-color}',\r\n  6: '0px 6px 10px 0px #{$_penumbra-color}',\r\n  7: '0px 7px 10px 1px #{$_penumbra-color}',\r\n  8: '0px 8px 10px 1px #{$_penumbra-color}',\r\n  9: '0px 9px 12px 1px #{$_penumbra-color}',\r\n  10: '0px 10px 14px 1px #{$_penumbra-color}',\r\n  11: '0px 11px 15px 1px #{$_penumbra-color}',\r\n  12: '0px 12px 17px 2px #{$_penumbra-color}',\r\n  13: '0px 13px 19px 2px #{$_penumbra-color}',\r\n  14: '0px 14px 21px 2px #{$_penumbra-color}',\r\n  15: '0px 15px 22px 2px #{$_penumbra-color}',\r\n  16: '0px 16px 24px 2px #{$_penumbra-color}',\r\n  17: '0px 17px 26px 2px #{$_penumbra-color}',\r\n  18: '0px 18px 28px 2px #{$_penumbra-color}',\r\n  19: '0px 19px 29px 2px #{$_penumbra-color}',\r\n  20: '0px 20px 31px 3px #{$_penumbra-color}',\r\n  21: '0px 21px 33px 3px #{$_penumbra-color}',\r\n  22: '0px 22px 35px 3px #{$_penumbra-color}',\r\n  23: '0px 23px 36px 3px #{$_penumbra-color}',\r\n  24: '0px 24px 38px 3px #{$_penumbra-color}'\r\n);\r\n\r\n$_ambient-elevation-map: (\r\n  0: '0px 0px 0px 0px #{$_ambient-color}',\r\n  1: '0px 1px 3px 0px #{$_ambient-color}',\r\n  2: '0px 1px 5px 0px #{$_ambient-color}',\r\n  3: '0px 1px 8px 0px #{$_ambient-color}',\r\n  4: '0px 1px 10px 0px #{$_ambient-color}',\r\n  5: '0px 1px 14px 0px #{$_ambient-color}',\r\n  6: '0px 1px 18px 0px #{$_ambient-color}',\r\n  7: '0px 2px 16px 1px #{$_ambient-color}',\r\n  8: '0px 3px 14px 2px #{$_ambient-color}',\r\n  9: '0px 3px 16px 2px #{$_ambient-color}',\r\n  10: '0px 4px 18px 3px #{$_ambient-color}',\r\n  11: '0px 4px 20px 3px #{$_ambient-color}',\r\n  12: '0px 5px 22px 4px #{$_ambient-color}',\r\n  13: '0px 5px 24px 4px #{$_ambient-color}',\r\n  14: '0px 5px 26px 4px #{$_ambient-color}',\r\n  15: '0px 6px 28px 5px #{$_ambient-color}',\r\n  16: '0px 6px 30px 5px #{$_ambient-color}',\r\n  17: '0px 6px 32px 5px #{$_ambient-color}',\r\n  18: '0px 7px 34px 6px #{$_ambient-color}',\r\n  19: '0px 7px 36px 6px #{$_ambient-color}',\r\n  20: '0px 8px 38px 7px #{$_ambient-color}',\r\n  21: '0px 8px 40px 7px #{$_ambient-color}',\r\n  22: '0px 8px 42px 7px #{$_ambient-color}',\r\n  23: '0px 9px 44px 8px #{$_ambient-color}',\r\n  24: '0px 9px 46px 8px #{$_ambient-color}'\r\n);\r\n\r\n\r\n// The css property used for elevation. In most cases this should not be changed. It is exposed\r\n// as a variable for abstraction / easy use when needing to reference the property directly, for\r\n// example in a will-change rule.\r\n$md-elevation-property: box-shadow !default;\r\n\r\n// The default duration value for elevation transitions.\r\n$md-elevation-transition-duration: 280ms !default;\r\n\r\n// The default easing value for elevation transitions.\r\n$md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function;\r\n\r\n// Applies the correct css rules to an element to give it the elevation specified by $zValue.\r\n// The $zValue must be between 0 and 24.\r\n@mixin md-elevation($zValue) {\r\n  @if type-of($zValue) != number or not unitless($zValue) {\r\n    @error '$zValue must be a unitless number';\r\n  }\r\n  @if $zValue < 0 or $zValue > 24 {\r\n    @error '$zValue must be between 0 and 24';\r\n  }\r\n\r\n  #{$md-elevation-property}: #{map-get($_umbra-elevation-map, $zValue)},\r\n                             #{map-get($_penumbra-elevation-map, $zValue)},\r\n                             #{map-get($_ambient-elevation-map, $zValue)};\r\n}\r\n\r\n// Returns a string that can be used as the value for a transition property for elevation.\r\n// Calling this function directly is useful in situations where a component needs to transition\r\n// more than one property.\r\n//\r\n// .foo {\r\n//   transition: md-elevation-transition-property-value(), opacity 100ms ease;\r\n//   will-change: $md-elevation-property, opacity;\r\n// }\r\n@function md-elevation-transition-property-value(\r\n    $duration: $md-elevation-transition-duration,\r\n    $easing: $md-elevation-transition-timing-function) {\r\n  @return #{$md-elevation-property} #{$duration} #{$easing};\r\n}\r\n\r\n// Applies the correct css rules needed to have an element transition between elevations.\r\n// This mixin should be applied to elements whose elevation values will change depending on their\r\n// context (e.g. when active or disabled).\r\n//\r\n// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can\r\n// be used in the same way by clients.\r\n@mixin md-elevation-transition(\r\n    $duration: $md-elevation-transition-duration,\r\n    $easing: $md-elevation-transition-timing-function) {\r\n  transition: md-elevation-transition-property-value($duration, $easing);\r\n  will-change: $md-elevation-property;\r\n}\r\n","// Mixin overriding default button styles like the gray background, the border, and the outline.\r\n@mixin md-button-reset {\r\n  cursor: pointer;\r\n  user-select: none;\r\n  outline: none;\r\n  border: none;\r\n}\r\n","// This mixin ensures an element spans the whole viewport.\r\n@mixin md-fullscreen {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n}\r\n","// This mixin will ensure that lines that overflow the container will hide the overflow and\r\n// truncate neatly with an ellipsis.\r\n@mixin md-truncate-line() {\r\n  white-space: nowrap;\r\n  overflow-x: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n// Mixin to provide all md-line styles, changing secondary font size based on whether the list\r\n// is in dense mode.\r\n@mixin md-line-base($secondary-font-size) {\r\n  [md-line] {\r\n    @include md-truncate-line();\r\n    display: block;\r\n    box-sizing: border-box;\r\n\r\n    // all lines but the top line should have smaller text\r\n    &:nth-child(n+2) {\r\n      font-size: $secondary-font-size;\r\n    }\r\n  }\r\n}\r\n\r\n// This mixin normalizes default element styles, e.g. font weight for heading text.\r\n@mixin md-normalize-text() {\r\n  & > * {\r\n    margin: 0;\r\n    padding: 0;\r\n    font-weight: normal;\r\n    font-size: inherit;\r\n  }\r\n}\r\n\r\n// This mixin provides base styles for the wrapper around md-line elements in a list.\r\n@mixin md-line-wrapper-base() {\r\n  @include md-normalize-text();\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n\r\n  // Must remove wrapper when lines are empty or it takes up horizontal\r\n  // space and pushes other elements to the right.\r\n  &:empty {\r\n    display: none;\r\n  }\r\n}\r\n"],"mappings":"AAkBA,AAAA,QAAQ,CAAC;EG6HP,UAAyB,EAAE,mCAA0C,EAC1C,mCAA6C,EAC7C,mCAA4C;EH7HvE,SAAS,EAViB,KAAK;EAW/B,SAAS,EAViB,KAAK;EAa/B,UAAU,EAAE,kBAAI;EAChB,QAAQ,EAAE,IAAK;EACf,0BAA0B,EAAE,KAAM;EAElC,WAAW,EAZc,GAAG;EAa5B,cAAc,EAbW,GAAG,GAc7B;;CAED,AAAA,AAAa,YAAZ,AAAA,EAAc;EI9Bb,MAAM,EAAE,OAAQ;EAChB,WAAW,EAAE,IAAK;EAClB,OAAO,EAAE,IAAK;EACd,MAAM,EAAE,IAAK;EEFb,WAAW,EAAE,MAAO;EACpB,UAAU,EAAE,MAAO;EACnB,aAAa,EAAE,QAAS;EN+BxB,OAAO,EAAE,IAAK;EACd,cAAc,EAAE,GAAI;EACpB,WAAW,EAAE,MAAO;EACpB,MAAM,EA1Bc,IAAI;EA2BxB,OAAO,EAAE,CAAC,CAzBW,IAAI;EA2BzB,SAAS,EA5BS,IAAI;EA6BtB,WAAW,ECtCI,MAAM,EAAE,gBAAgB,EAAE,UAAU;EDuCnD,UAAU,EAAE,KAAM;EAClB,eAAe,EAAE,IAAK,GAKvB;GAlBD,AAAA,AAAa,YAAZ,AAAA,EAeE,AAAA,QAAC,AAAA,EAAU;IACV,MAAM,EAAE,OAAQ,GACjB;;AAGH,AAAmB,MAAb,CAAA,AAAA,YAAC,AAAA,EAAc;EACnB,KAAK,EAAE,IAAK,GACb;;AAED,AAAA,sBAAsB,CAAC;EKtDrB,QAAQ,EAAE,KAAM;EAChB,GAAG,EAAE,CAAE;EACP,IAAI,EAAE,CAAE;EACR,KAAK,EAAE,CAAE;EACT,MAAM,EAAE,CAAE,GLoDX","names":[],"sourceRoot":"/source/"}