UNPKG

@material-git/all

Version:
1 lines 10.8 kB
{"version":3,"file":"slider/slider.css","sources":["slider/slider.scss","core/style/_variables.scss","core/typography/_typography.scss"],"sourcesContent":["@import '../core/style/variables';\r\n\r\n\r\n// This refers to the thickness of the slider. On a horizontal slider this is the height, on a\r\n// vertical slider this is the width.\r\n$md-slider-thickness: 48px !default;\r\n$md-slider-min-size: 128px !default;\r\n$md-slider-padding: 8px !default;\r\n\r\n$md-slider-track-height: 2px !default;\r\n$md-slider-thumb-size: 20px !default;\r\n\r\n$md-slider-thumb-default-scale: 0.7 !default;\r\n$md-slider-thumb-focus-scale: 1 !default;\r\n\r\n$md-slider-thumb-arrow-height: 16px !default;\r\n$md-slider-thumb-arrow-width: 28px !default;\r\n\r\n$md-slider-thumb-label-size: 28px !default;\r\n// The thumb has to be moved down so that it appears right over the slider track when visible and\r\n// on the slider track when not.\r\n$md-slider-thumb-label-top: ($md-slider-thickness / 2) -\r\n ($md-slider-thumb-default-scale * $md-slider-thumb-size / 2) - $md-slider-thumb-label-size -\r\n $md-slider-thumb-arrow-height + 10px !default;\r\n\r\n// Uses a container height and an item height to center an item vertically within the container.\r\n@function center-vertically($containerHeight, $itemHeight) {\r\n @return ($containerHeight / 2) - ($itemHeight / 2);\r\n}\r\n\r\n// Positions the thumb based on its width and height.\r\n@mixin slider-thumb-position($width: $md-slider-thumb-size, $height: $md-slider-thumb-size) {\r\n position: absolute;\r\n top: center-vertically($md-slider-thickness, $height);\r\n // This makes it so that the center of the thumb aligns with where the click was.\r\n // This is not affected by the movement of the thumb.\r\n left: (-$width / 2);\r\n width: $width;\r\n height: $height;\r\n border-radius: max($width, $height);\r\n}\r\n\r\nmd-slider {\r\n height: $md-slider-thickness;\r\n min-width: $md-slider-min-size;\r\n position: relative;\r\n padding: 0;\r\n display: inline-block;\r\n outline: none;\r\n vertical-align: middle;\r\n}\r\n\r\nmd-slider *,\r\nmd-slider *::after {\r\n box-sizing: border-box;\r\n}\r\n\r\n// Exists in order to pad the slider and keep everything positioned correctly.\r\n// Cannot be merged with the .md-slider-container.\r\n.md-slider-wrapper {\r\n width: 100%;\r\n height: 100%;\r\n padding-left: $md-slider-padding;\r\n padding-right: $md-slider-padding;\r\n}\r\n\r\n\r\n// Holds the isActive and isSliding classes as well as helps with positioning the children.\r\n// Cannot be merged with .md-slider-wrapper.\r\n.md-slider-container {\r\n position: relative;\r\n}\r\n\r\n.md-slider-track-container {\r\n width: 100%;\r\n position: absolute;\r\n top: center-vertically($md-slider-thickness, $md-slider-track-height);\r\n height: $md-slider-track-height;\r\n}\r\n\r\n.md-slider-track {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n height: 100%;\r\n}\r\n\r\n.md-slider-track-fill {\r\n transition-duration: $swift-ease-out-duration;\r\n transition-timing-function: $swift-ease-out-timing-function;\r\n transition-property: width, height;\r\n}\r\n\r\n.md-slider-tick-container, .md-slider-last-tick-container {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n height: 100%;\r\n}\r\n\r\n.md-slider-thumb-container {\r\n position: absolute;\r\n left: 0;\r\n top: 50%;\r\n transform: translate3d(-50%, -50%, 0);\r\n transition-duration: $swift-ease-out-duration;\r\n transition-timing-function: $swift-ease-out-timing-function;\r\n transition-property: left, bottom;\r\n}\r\n\r\n.md-slider-thumb-position {\r\n transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;\r\n}\r\n\r\n.md-slider-thumb {\r\n z-index: 1;\r\n\r\n @include slider-thumb-position($md-slider-thumb-size, $md-slider-thumb-size);\r\n transform: scale($md-slider-thumb-default-scale);\r\n transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;\r\n}\r\n\r\n.md-slider-thumb::after {\r\n content: '';\r\n position: absolute;\r\n width: $md-slider-thumb-size;\r\n height: $md-slider-thumb-size;\r\n border-radius: max($md-slider-thumb-size, $md-slider-thumb-size);\r\n // Separate border properties because, if you combine them into \"border\", it defaults to 'black'.\r\n border-width: 3px;\r\n border-style: solid;\r\n transition: inherit;\r\n}\r\n\r\n.md-slider-thumb-label {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n position: absolute;\r\n left: -($md-slider-thumb-label-size / 2);\r\n top: $md-slider-thumb-label-top;\r\n width: $md-slider-thumb-label-size;\r\n height: $md-slider-thumb-label-size;\r\n border-radius: 50%;\r\n\r\n transform: scale(0.4) translate3d(0, (-$md-slider-thumb-label-top + 10) / 0.4, 0) rotate(45deg);\r\n transition: 300ms $swift-ease-in-out-timing-function;\r\n transition-property: transform, border-radius;\r\n}\r\n\r\n.md-slider-thumb-label-text {\r\n z-index: 1;\r\n font-size: 12px;\r\n font-weight: bold;\r\n opacity: 0;\r\n transform: rotate(-45deg);\r\n transition: opacity 300ms $swift-ease-in-out-timing-function;\r\n}\r\n\r\n.md-slider-container:not(.md-slider-thumb-label-showing) .md-slider-thumb-label {\r\n display: none;\r\n}\r\n\r\n.md-slider-active.md-slider-thumb-label-showing .md-slider-thumb {\r\n transform: scale(0);\r\n}\r\n\r\n.md-slider-sliding .md-slider-thumb-position,\r\n.md-slider-sliding .md-slider-track-fill {\r\n transition: none;\r\n cursor: default;\r\n}\r\n\r\n.md-slider-active .md-slider-thumb {\r\n transform: scale($md-slider-thumb-focus-scale);\r\n}\r\n\r\n.md-slider-active .md-slider-thumb-label {\r\n border-radius: 50% 50% 0;\r\n transform: rotate(45deg);\r\n}\r\n\r\n.md-slider-active .md-slider-thumb-label-text {\r\n opacity: 1;\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"],"mappings":"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","names":[],"sourceRoot":"/source/"}