1 | /*!
|
---|
2 | * AngularJS Material Design
|
---|
3 | * https://github.com/angular/material
|
---|
4 | * @license MIT
|
---|
5 | * v1.2.3
|
---|
6 | */
|
---|
7 | // Typography
|
---|
8 | // ------------------------------
|
---|
9 | $font-family: Roboto, 'Helvetica Neue', sans-serif !default;
|
---|
10 | $font-size: 10px !default;
|
---|
11 |
|
---|
12 | //-- Must be defined after $font-size and before variables that depend on the function.
|
---|
13 | @function rem($multiplier) {
|
---|
14 | @return $multiplier * $font-size;
|
---|
15 | }
|
---|
16 |
|
---|
17 | $display-4-font-size-base: rem(11.20) !default;
|
---|
18 | $display-3-font-size-base: rem(5.600) !default;
|
---|
19 | $display-2-font-size-base: rem(4.500) !default;
|
---|
20 | $display-1-font-size-base: rem(3.400) !default;
|
---|
21 | $headline-font-size-base: rem(2.400) !default;
|
---|
22 | $title-font-size-base: rem(2.000) !default;
|
---|
23 | $subhead-font-size-base: rem(1.600) !default;
|
---|
24 |
|
---|
25 | $body-font-size-base: rem(1.400) !default;
|
---|
26 | $caption-font-size-base: rem(1.200) !default;
|
---|
27 |
|
---|
28 | // Layout
|
---|
29 | // ------------------------------
|
---|
30 |
|
---|
31 | $baseline-grid: 8px !default;
|
---|
32 | $layout-gutter-width: ($baseline-grid * 2) !default;
|
---|
33 |
|
---|
34 | $layout-breakpoint-xs: 600px !default;
|
---|
35 | $layout-breakpoint-sm: 960px !default;
|
---|
36 | $layout-breakpoint-md: 1280px !default;
|
---|
37 | $layout-breakpoint-lg: 1920px !default;
|
---|
38 |
|
---|
39 | // Icon
|
---|
40 | $icon-size: rem(2.400) !default;
|
---|
41 |
|
---|
42 | // App bar variables
|
---|
43 | $app-bar-height: 64px !default;
|
---|
44 |
|
---|
45 | $toast-height: $baseline-grid * 3 !default;
|
---|
46 | $toast-margin: $baseline-grid * 1 !default;
|
---|
47 |
|
---|
48 | // Whiteframes
|
---|
49 |
|
---|
50 | $shadow-key-umbra-opacity: 0.2 !default;
|
---|
51 | $shadow-key-penumbra-opacity: 0.14 !default;
|
---|
52 | $shadow-ambient-shadow-opacity: 0.12 !default;
|
---|
53 |
|
---|
54 | // NOTE(shyndman): gulp-sass seems to be failing if I split the shadow defs across
|
---|
55 | // multiple lines. Ugly. Sorry.
|
---|
56 | $whiteframe-shadow-1dp: 0px 1px 3px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 1px 1px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
57 | $whiteframe-shadow-2dp: 0px 1px 5px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
58 | $whiteframe-shadow-3dp: 0px 1px 8px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 3px 4px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
59 | $whiteframe-shadow-4dp: 0px 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 4px 5px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 10px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
60 | $whiteframe-shadow-5dp: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 5px 8px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 14px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
61 | $whiteframe-shadow-6dp: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 6px 10px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 18px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
62 | $whiteframe-shadow-7dp: 0px 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 7px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
63 | $whiteframe-shadow-8dp: 0px 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
64 | $whiteframe-shadow-9dp: 0px 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
65 | $whiteframe-shadow-10dp: 0px 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 10px 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
66 | $whiteframe-shadow-11dp: 0px 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 11px 15px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 4px 20px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
67 | $whiteframe-shadow-12dp: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 12px 17px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 22px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
68 | $whiteframe-shadow-13dp: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 13px 19px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 24px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
69 | $whiteframe-shadow-14dp: 0px 7px 9px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 14px 21px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 26px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
70 | $whiteframe-shadow-15dp: 0px 8px 9px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 15px 22px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 28px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
71 | $whiteframe-shadow-16dp: 0px 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
72 | $whiteframe-shadow-17dp: 0px 8px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 17px 26px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 32px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
73 | $whiteframe-shadow-18dp: 0px 9px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 18px 28px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 7px 34px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
74 | $whiteframe-shadow-19dp: 0px 9px 12px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 19px 29px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 7px 36px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
75 | $whiteframe-shadow-20dp: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 20px 31px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 38px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
76 | $whiteframe-shadow-21dp: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 21px 33px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 40px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
77 | $whiteframe-shadow-22dp: 0px 10px 14px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 22px 35px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 42px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
78 | $whiteframe-shadow-23dp: 0px 11px 14px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 23px 36px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 9px 44px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
79 | $whiteframe-shadow-24dp: 0px 11px 15px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 24px 38px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 9px 46px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
|
---|
80 |
|
---|
81 | // Z-indexes
|
---|
82 | //--------------------------------------------
|
---|
83 |
|
---|
84 | $z-index-toast: 105 !default;
|
---|
85 | $z-index-tooltip: 100 !default;
|
---|
86 | $z-index-menu: 100 !default;
|
---|
87 | $z-index-calendar-pane: 100 !default;
|
---|
88 | $z-index-select: 90 !default;
|
---|
89 | $z-index-dialog: 80 !default;
|
---|
90 | $z-index-bottom-sheet: 70 !default;
|
---|
91 | $z-index-scroll-mask: 50 !default;
|
---|
92 | $z-index-scroll-mask-bar: 65 !default;
|
---|
93 | $z-index-sidenav: 60 !default;
|
---|
94 | $z-index-backdrop: 50 !default;
|
---|
95 | $z-index-fab: 20 !default;
|
---|
96 | $z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome
|
---|
97 |
|
---|
98 | // Easing Curves
|
---|
99 | //--------------------------------------------
|
---|
100 |
|
---|
101 | $swift-ease-out-duration: 0.4s !default;
|
---|
102 | $swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
|
---|
103 | $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
|
---|
104 |
|
---|
105 | $swift-ease-in-duration: 0.3s !default;
|
---|
106 | $swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
|
---|
107 | $swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
|
---|
108 |
|
---|
109 | $swift-ease-in-out-duration: 0.5s !default;
|
---|
110 | $swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
|
---|
111 | $swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
|
---|
112 |
|
---|
113 | $swift-linear-duration: 0.08s !default;
|
---|
114 | $swift-linear-timing-function: linear !default;
|
---|
115 | $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
|
---|
116 |
|
---|
117 | $material-enter-duration: 0.3s;
|
---|
118 | $material-enter-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
|
---|
119 | $material-enter: all $material-enter-duration $material-enter-timing-function;
|
---|
120 |
|
---|
121 | $material-leave-duration: 0.3s;
|
---|
122 | $material-leave-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
|
---|
123 | $material-leave: all $material-leave-duration $material-leave-timing-function;
|
---|
124 |
|
---|
125 | // Button
|
---|
126 | $button-left-right-padding: rem(0.800) !default;
|
---|
127 | $icon-button-height: rem(4.000) !default;
|
---|
128 | $icon-button-width: rem(4.000) !default;
|
---|
129 |
|
---|
130 | // Fab Buttons (shared between buttons.scss and fab*.scss)
|
---|
131 | $button-fab-width: rem(5.600) !default;
|
---|
132 | $button-fab-height: rem(5.600) !default;
|
---|
133 | $button-fab-padding: rem(1.60) !default;
|
---|
134 |
|
---|
135 |
|
---|
136 | // Shared Checkbox variables
|
---|
137 | $checkbox-width: 18px !default;
|
---|
138 | $checkbox-height: $checkbox-width !default;
|
---|
139 | $checkbox-border-radius: 2px !default;
|
---|
140 | $checkbox-border-width: 2px !default;
|
---|
141 |
|
---|
142 | // Shared Horizontal Margin Variables
|
---|
143 | $default-horizontal-margin: 16px !default;
|
---|
144 |
|
---|
145 | $input-container-padding: 2px !default;
|
---|
146 | $input-container-vertical-margin: 18px !default;
|
---|
147 | $input-container-horizontal-margin: 0px !default;
|
---|
148 |
|
---|
149 | $input-label-default-offset: 24px !default;
|
---|
150 | $input-label-default-scale: 1.0 !default;
|
---|
151 | $input-label-float-offset: 6px !default;
|
---|
152 | $input-label-float-scale: 0.75 !default;
|
---|
153 |
|
---|
154 | $input-placeholder-offset: $input-label-default-offset !default;
|
---|
155 |
|
---|
156 | $input-border-width-default: 1px !default;
|
---|
157 | $input-border-width-focused: 2px !default;
|
---|
158 | $input-line-height: 26px !default;
|
---|
159 | $input-padding-top: 2px !default;
|
---|
160 | $input-padding-bottom: $input-border-width-focused - $input-border-width-default !default;
|
---|
161 |
|
---|
162 | $input-error-font-size: 12px !default;
|
---|
163 | $input-error-height: 24px !default;
|
---|
164 | $input-error-line-height: $input-error-font-size + 2px !default;
|
---|
165 | // From Text field spec
|
---|
166 | $error-padding-top: $baseline-grid !default;
|
---|
167 |
|
---|
168 | $icon-offset: 36px !default;
|
---|
169 |
|
---|
170 | $icon-top-offset: ($icon-offset - $input-padding-top - $input-border-width-focused) / 4 !default;
|
---|
171 |
|
---|
172 | $icon-float-focused-top: -8px !default;
|
---|
173 |
|
---|
174 | $input-resize-handle-height: 10px !default;
|
---|
175 |
|
---|
176 | @mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) {
|
---|
177 | -webkit-margin-before: $before;
|
---|
178 | -webkit-margin-after: $after;
|
---|
179 | -webkit-margin-start: $start;
|
---|
180 | -webkit-margin-end: $end;
|
---|
181 | }
|
---|
182 |
|
---|
183 | @mixin not-selectable($value:none) {
|
---|
184 | -webkit-touch-callout: $value;
|
---|
185 | -webkit-user-select: $value;
|
---|
186 | -khtml-user-select: $value;
|
---|
187 | -moz-user-select: $value;
|
---|
188 | -ms-user-select: $value;
|
---|
189 | user-select: $value;
|
---|
190 | }
|
---|
191 |
|
---|
192 | @mixin input-placeholder-color($color) {
|
---|
193 | $pseudos: '::-webkit-input-placeholder', // For QQ Browser
|
---|
194 | ':-ms-input-placeholder', // For IE
|
---|
195 | '::-ms-input-placeholder', // For Edge
|
---|
196 | '::placeholder';
|
---|
197 | $firefox-pseudos: ':-moz-placeholder', '::-moz-placeholder';
|
---|
198 |
|
---|
199 | // It is important to export every pseudo within its own block, because otherwise the placeholder
|
---|
200 | // won't be set on the most browsers.
|
---|
201 | @each $pseudo in $pseudos {
|
---|
202 | &#{$pseudo} {
|
---|
203 | color: unquote($color);
|
---|
204 | }
|
---|
205 | }
|
---|
206 | // Firefox reduces the opacity of placeholders so we need to keep them opaque to avoid applying
|
---|
207 | // double the transparency and causing a11y failures due to text contrast.
|
---|
208 | @each $pseudo in $firefox-pseudos {
|
---|
209 | &#{$pseudo} {
|
---|
210 | color: unquote($color);
|
---|
211 | opacity: 1;
|
---|
212 | }
|
---|
213 | }
|
---|
214 | }
|
---|
215 |
|
---|
216 | @mixin pie-clearfix {
|
---|
217 | &:after {
|
---|
218 | content: '';
|
---|
219 | display: table;
|
---|
220 | clear: both;
|
---|
221 | }
|
---|
222 | }
|
---|
223 |
|
---|
224 | @mixin md-shadow-bottom-z-1() {
|
---|
225 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
---|
226 | }
|
---|
227 |
|
---|
228 | @mixin md-shadow-bottom-z-2() {
|
---|
229 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
|
---|
230 | }
|
---|
231 |
|
---|
232 | // Mixin for a "flat" input that can be used for components that contain an input
|
---|
233 | // (datepicker, autocomplete).
|
---|
234 | @mixin md-flat-input() {
|
---|
235 | font-size: 14px;
|
---|
236 |
|
---|
237 | box-sizing: border-box;
|
---|
238 | border: none;
|
---|
239 | box-shadow: none;
|
---|
240 | outline: none;
|
---|
241 | background: transparent;
|
---|
242 |
|
---|
243 | // The "clear X" that IE adds to input[type="search"]
|
---|
244 | &::-ms-clear {
|
---|
245 | display: none;
|
---|
246 | }
|
---|
247 | }
|
---|
248 |
|
---|
249 | // Typography mixins
|
---|
250 |
|
---|
251 | @mixin md-title() {
|
---|
252 | font-size: $title-font-size-base;
|
---|
253 | font-weight: 500;
|
---|
254 | letter-spacing: 0.005em;
|
---|
255 | }
|
---|
256 |
|
---|
257 | @mixin md-body-1() {
|
---|
258 | font-size: $body-font-size-base;
|
---|
259 | font-weight: 400;
|
---|
260 | letter-spacing: 0.010em;
|
---|
261 | line-height: rem(2);
|
---|
262 | }
|
---|
263 |
|
---|
264 | @mixin md-body-2() {
|
---|
265 | font-size: $body-font-size-base;
|
---|
266 | font-weight: 500;
|
---|
267 | letter-spacing: 0.010em;
|
---|
268 | line-height: rem(2.4);
|
---|
269 | }
|
---|
270 |
|
---|
271 | @mixin md-subhead() {
|
---|
272 | font-size: $subhead-font-size-base;
|
---|
273 | font-weight: 400;
|
---|
274 | letter-spacing: 0.010em;
|
---|
275 | line-height: rem(2.4);
|
---|
276 | }
|
---|
277 |
|
---|
278 | @function map-to-string($map) {
|
---|
279 | $map-str: '{';
|
---|
280 | $keys: map-keys($map);
|
---|
281 | $len: length($keys);
|
---|
282 | @for $i from 1 through $len {
|
---|
283 | $key: nth($keys, $i);
|
---|
284 | $value: map-get($map, $key);
|
---|
285 | $map-str: $map-str + '_' + $key + '_: _' + map-get($map, $key) + '_';
|
---|
286 | @if $i != $len {
|
---|
287 | $map-str: $map-str + ',';
|
---|
288 | }
|
---|
289 | }
|
---|
290 | @return $map-str + '}';
|
---|
291 | }
|
---|
292 |
|
---|
293 | // This is a mixin, which fixes IE11's vertical alignment issue, when using `min-height`.
|
---|
294 | // See https://connect.microsoft.com/IE/feedback/details/816293/
|
---|
295 | @mixin ie11-min-height-flexbug($min-height) {
|
---|
296 | &::before {
|
---|
297 | content: '';
|
---|
298 | min-height: $min-height;
|
---|
299 | visibility: hidden;
|
---|
300 | display: inline-block;
|
---|
301 | }
|
---|
302 | }
|
---|
303 |
|
---|
304 | // mixin definition ; sets LTR and RTL within the same style call
|
---|
305 | // @see https://css-tricks.com/almanac/properties/d/direction/
|
---|
306 |
|
---|
307 | @mixin rtl($prop, $ltr-value, $rtl-value) {
|
---|
308 | #{$prop}: $ltr-value;
|
---|
309 | [dir=rtl] & {
|
---|
310 | #{$prop}: $rtl-value;
|
---|
311 | }
|
---|
312 | }
|
---|
313 |
|
---|
314 | @mixin rtl-prop($ltr-prop, $rtl-prop, $value, $reset-value) {
|
---|
315 | #{$ltr-prop}: $value;
|
---|
316 | [dir=rtl] & {
|
---|
317 | #{$ltr-prop}: $reset-value;
|
---|
318 | #{$rtl-prop}: $value;
|
---|
319 | }
|
---|
320 | }
|
---|
321 |
|
---|
322 | // To reverse padding (top left bottom right) -> (top right bottom left)
|
---|
323 | @function rtl-value($list) {
|
---|
324 | @if length($list) == 4 {
|
---|
325 | @return nth($list, 1) nth($list, 4) nth($list, 3) nth($list, 2)
|
---|
326 | }
|
---|
327 | @if length($list) == 5 {
|
---|
328 | @return nth($list, 1) nth($list, 4) nth($list, 3) nth($list, 2) nth($list, 5)
|
---|
329 | }
|
---|
330 | @return $list;
|
---|
331 | }
|
---|
332 |
|
---|
333 | // Position a FAB button.
|
---|
334 | @mixin fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
|
---|
335 | &.md-fab-#{$spot} {
|
---|
336 | top: $top;
|
---|
337 | right: $right;
|
---|
338 | bottom: $bottom;
|
---|
339 | left: $left;
|
---|
340 | position: absolute;
|
---|
341 | }
|
---|
342 | }
|
---|
343 |
|
---|
344 | @mixin fab-all-positions() {
|
---|
345 | @include fab-position(bottom-right, auto, ($button-fab-width - $button-fab-padding)/2, ($button-fab-height - $button-fab-padding)/2, auto);
|
---|
346 | @include fab-position(bottom-left, auto, auto, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2);
|
---|
347 | @include fab-position(top-right, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2, auto, auto);
|
---|
348 | @include fab-position(top-left, ($button-fab-height - $button-fab-padding)/2, auto, auto, ($button-fab-width - $button-fab-padding)/2);
|
---|
349 | }
|
---|
350 |
|
---|
351 | // This mixin allows a user to use the md-checkbox css outside of the
|
---|
352 | // md-checkbox directive.
|
---|
353 | // See src/components/select/select.scss for an example.
|
---|
354 | @mixin checkbox-container(
|
---|
355 | $checkedSelector: '.md-checked',
|
---|
356 | $width: $checkbox-width,
|
---|
357 | $height: $checkbox-height,
|
---|
358 | $border-width: $checkbox-border-width,
|
---|
359 | $border-radius: $checkbox-border-radius) {
|
---|
360 | .md-container {
|
---|
361 | position: absolute;
|
---|
362 | top: 50%;
|
---|
363 | transform: translateY(-50%);
|
---|
364 |
|
---|
365 | box-sizing: border-box;
|
---|
366 | display: inline-block;
|
---|
367 |
|
---|
368 | width: $width;
|
---|
369 | height: $height;
|
---|
370 | @include rtl(left, 0, auto);
|
---|
371 | @include rtl(right, auto, 0);
|
---|
372 |
|
---|
373 | &:before {
|
---|
374 | box-sizing: border-box;
|
---|
375 | background-color: transparent;
|
---|
376 | border-radius: 50%;
|
---|
377 | content: '';
|
---|
378 | position: absolute;
|
---|
379 | display: block;
|
---|
380 | height: auto;
|
---|
381 | left: 0;
|
---|
382 | top: 0;
|
---|
383 | right: 0;
|
---|
384 | bottom: 0;
|
---|
385 | transition: all 0.5s;
|
---|
386 | width: auto;
|
---|
387 | }
|
---|
388 |
|
---|
389 | &:after {
|
---|
390 | box-sizing: border-box;
|
---|
391 | content: '';
|
---|
392 | position: absolute;
|
---|
393 | top: -10px;
|
---|
394 | right: -10px;
|
---|
395 | bottom: -10px;
|
---|
396 | left: -10px;
|
---|
397 | }
|
---|
398 |
|
---|
399 | .md-ripple-container {
|
---|
400 | position: absolute;
|
---|
401 | display: block;
|
---|
402 | width: auto;
|
---|
403 | height: auto;
|
---|
404 | left: -15px;
|
---|
405 | top: -15px;
|
---|
406 | right: -15px;
|
---|
407 | bottom: -15px;
|
---|
408 | }
|
---|
409 | }
|
---|
410 |
|
---|
411 | // unchecked
|
---|
412 | .md-icon {
|
---|
413 | box-sizing: border-box;
|
---|
414 | transition: 240ms;
|
---|
415 | position: absolute;
|
---|
416 | top: 0;
|
---|
417 | left: 0;
|
---|
418 | width: $width;
|
---|
419 | height: $height;
|
---|
420 | border-width: $border-width;
|
---|
421 | border-style: solid;
|
---|
422 | border-radius: $border-radius;
|
---|
423 | }
|
---|
424 |
|
---|
425 | &#{$checkedSelector} .md-icon {
|
---|
426 | border-color: transparent;
|
---|
427 |
|
---|
428 | &:after {
|
---|
429 | box-sizing: border-box;
|
---|
430 | transform: rotate(45deg);
|
---|
431 | position: absolute;
|
---|
432 | left: $width / 3 - $border-width;
|
---|
433 | top: $width / 9 - $border-width;
|
---|
434 | display: table;
|
---|
435 | width: $width / 3;
|
---|
436 | height: $width * 2 / 3;
|
---|
437 | border-width: $border-width;
|
---|
438 | border-style: solid;
|
---|
439 | border-top: 0;
|
---|
440 | border-left: 0;
|
---|
441 | content: '';
|
---|
442 | }
|
---|
443 | }
|
---|
444 |
|
---|
445 | // disabled
|
---|
446 | &[disabled] {
|
---|
447 | cursor: default;
|
---|
448 | }
|
---|
449 |
|
---|
450 | &.md-indeterminate .md-icon {
|
---|
451 | &:after {
|
---|
452 | box-sizing: border-box;
|
---|
453 | position: absolute;
|
---|
454 | top: 50%;
|
---|
455 | left: 50%;
|
---|
456 | transform: translate(-50%, -50%);
|
---|
457 | display: table;
|
---|
458 | width: $width * 0.6;
|
---|
459 | height: $border-width;
|
---|
460 | border-width: $border-width;
|
---|
461 | border-style: solid;
|
---|
462 | border-top: 0;
|
---|
463 | border-left: 0;
|
---|
464 | content: '';
|
---|
465 | }
|
---|
466 | }
|
---|
467 | }
|
---|
468 |
|
---|
469 | // Mixin to create a primary checkbox.
|
---|
470 | // Used by the checkbox and select component.
|
---|
471 | @mixin checkbox-primary($checkedSelector: '.md-checked') {
|
---|
472 | .md-ripple {
|
---|
473 | color: '{{primary-600}}';
|
---|
474 | }
|
---|
475 |
|
---|
476 | &#{$checkedSelector} .md-ripple {
|
---|
477 | color: '{{background-600}}';
|
---|
478 | }
|
---|
479 |
|
---|
480 | .md-ink-ripple {
|
---|
481 | color: '{{foreground-2}}';
|
---|
482 | }
|
---|
483 |
|
---|
484 | &#{$checkedSelector} .md-ink-ripple {
|
---|
485 | color: '{{primary-color-0.87}}';
|
---|
486 | }
|
---|
487 |
|
---|
488 | &:not(.md-checked) .md-icon {
|
---|
489 | border-color: '{{foreground-2}}';
|
---|
490 | }
|
---|
491 |
|
---|
492 | &#{$checkedSelector} .md-icon {
|
---|
493 | background-color: '{{primary-color-0.87}}';
|
---|
494 | }
|
---|
495 |
|
---|
496 | &#{$checkedSelector}.md-focused .md-container:before {
|
---|
497 | background-color: '{{primary-color-0.26}}';
|
---|
498 | }
|
---|
499 |
|
---|
500 | &#{$checkedSelector} .md-icon:after {
|
---|
501 | border-color: '{{primary-contrast-0.87}}';
|
---|
502 | }
|
---|
503 |
|
---|
504 | & .md-indeterminate[disabled] {
|
---|
505 | .md-container {
|
---|
506 | color: '{{foreground-3}}';
|
---|
507 | }
|
---|
508 | }
|
---|
509 | }
|
---|
510 |
|
---|
511 | @mixin dense($prop, $normal, $dense) {
|
---|
512 | #{$prop}: $normal;
|
---|
513 | .md-dense > &:not(.md-dense-disabled),
|
---|
514 | .md-dense :not(.md-dense-disabled) &:not(.md-dense-disabled) {
|
---|
515 | #{$prop}: $dense;
|
---|
516 | }
|
---|
517 | }
|
---|
518 |
|
---|
519 | @mixin dense-rtl($prop, $ltr-normal, $rtl-normal, $ltr-dense, $rtl-dense) {
|
---|
520 | @include rtl($prop, $ltr-normal, $rtl-normal);
|
---|
521 | .md-dense > &:not(.md-dense-disabled),
|
---|
522 | .md-dense :not(.md-dense-disabled) &:not(.md-dense-disabled) {
|
---|
523 | @include rtl($prop, $ltr-dense, $rtl-dense);
|
---|
524 | }
|
---|
525 | }
|
---|
526 |
|
---|
527 | // Only use when in row layout
|
---|
528 | @mixin when-layout-row($element) {
|
---|
529 | @media (max-width: $layout-breakpoint-xs - 1) {
|
---|
530 | .layout-row:not(.layout-xs-column),
|
---|
531 | .layout-xs-row {
|
---|
532 | & > #{$element} { @content; }
|
---|
533 | }
|
---|
534 | }
|
---|
535 | @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
|
---|
536 | .layout-row:not(.layout-gt-xs-column),
|
---|
537 | .layout-gt-xs-row,
|
---|
538 | .layout-sm-row {
|
---|
539 | &:not(.layout-sm-column) > #{$element} { @content; }
|
---|
540 | }
|
---|
541 | }
|
---|
542 | @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
|
---|
543 | .layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column),
|
---|
544 | .layout-gt-xs-row:not(.layout-gt-sm-column),
|
---|
545 | .layout-gt-sm-row,
|
---|
546 | .layout-md-row {
|
---|
547 | &:not(.layout-md-column) > #{$element} { @content; }
|
---|
548 | }
|
---|
549 | }
|
---|
550 | @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
|
---|
551 | .layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
|
---|
552 | .layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
|
---|
553 | .layout-gt-sm-row:not(.layout-gt-md-column),
|
---|
554 | .layout-gt-md-row,
|
---|
555 | .layout-lg-row {
|
---|
556 | &:not(.layout-lg-column) > #{$element} { @content; }
|
---|
557 | }
|
---|
558 | }
|
---|
559 | @media (min-width: $layout-breakpoint-lg) {
|
---|
560 | .layout-row:not(.layout-gt-xs-column):not(.layout-gt-sm-column):not(.layout-gt-md-column),
|
---|
561 | .layout-gt-xs-row:not(.layout-gt-sm-column):not(.layout-gt-md-column),
|
---|
562 | .layout-gt-sm-row:not(.layout-gt-md-column),
|
---|
563 | .layout-gt-md-row,
|
---|
564 | .layout-gt-lg-row,
|
---|
565 | .layout-xl-row {
|
---|
566 | &:not(.layout-gt-lg-column):not(.layout-xl-column) > #{$element} { @content; }
|
---|
567 | }
|
---|
568 | }
|
---|
569 | }
|
---|
570 |
|
---|
571 | // Auto insert object margin
|
---|
572 | @mixin auto-horizontal-margin($selector) {
|
---|
573 | @include when-layout-row($selector) {
|
---|
574 | &:not(:first-child) {
|
---|
575 | @include rtl-prop(margin-left, margin-right, $default-horizontal-margin, 0);
|
---|
576 | }
|
---|
577 | }
|
---|
578 | }
|
---|
579 |
|
---|
580 | html, body {
|
---|
581 | height: 100%;
|
---|
582 | position: relative;
|
---|
583 | }
|
---|
584 |
|
---|
585 | body {
|
---|
586 | margin: 0;
|
---|
587 | padding: 0;
|
---|
588 | }
|
---|
589 |
|
---|
590 | [tabindex='-1']:focus {
|
---|
591 | outline: none;
|
---|
592 | }
|
---|
593 | .inset {
|
---|
594 | padding: 10px;
|
---|
595 | }
|
---|
596 |
|
---|
597 | a.md-no-style,
|
---|
598 | button.md-no-style {
|
---|
599 | font-weight: normal;
|
---|
600 | background-color: inherit;
|
---|
601 | text-align: left;
|
---|
602 | border: none;
|
---|
603 | padding: 0;
|
---|
604 | margin: 0;
|
---|
605 | }
|
---|
606 |
|
---|
607 | select,
|
---|
608 | button,
|
---|
609 | textarea,
|
---|
610 | input {
|
---|
611 | vertical-align: baseline;
|
---|
612 | }
|
---|
613 |
|
---|
614 | // Fix Android 4.0 button bugs
|
---|
615 | input[type="reset"],
|
---|
616 | input[type="submit"],
|
---|
617 | html input[type="button"],
|
---|
618 | button {
|
---|
619 | cursor: pointer;
|
---|
620 | -webkit-appearance: button;
|
---|
621 |
|
---|
622 | &[disabled] {
|
---|
623 | cursor: default;
|
---|
624 | }
|
---|
625 | }
|
---|
626 |
|
---|
627 | textarea {
|
---|
628 | vertical-align: top;
|
---|
629 | overflow: auto;
|
---|
630 | }
|
---|
631 |
|
---|
632 | input {
|
---|
633 | &[type="search"] {
|
---|
634 | -webkit-appearance: textfield;
|
---|
635 | box-sizing: content-box;
|
---|
636 | -webkit-box-sizing: content-box;
|
---|
637 |
|
---|
638 | &::-webkit-search-decoration,
|
---|
639 | &::-webkit-search-cancel-button {
|
---|
640 | -webkit-appearance: none;
|
---|
641 | }
|
---|
642 | }
|
---|
643 | &:-webkit-autofill {
|
---|
644 | text-shadow: none;
|
---|
645 | }
|
---|
646 | }
|
---|
647 |
|
---|
648 | .md-visually-hidden {
|
---|
649 | border: 0;
|
---|
650 | clip: rect(0 0 0 0);
|
---|
651 | height: 1px;
|
---|
652 | margin: -1px;
|
---|
653 | overflow: hidden;
|
---|
654 | padding: 0;
|
---|
655 | position: absolute;
|
---|
656 | text-transform: none;
|
---|
657 | width: 1px;
|
---|
658 | }
|
---|
659 |
|
---|
660 | .md-shadow {
|
---|
661 | position: absolute;
|
---|
662 | top: 0;
|
---|
663 | left: 0;
|
---|
664 | bottom: 0;
|
---|
665 | right: 0;
|
---|
666 | border-radius: inherit;
|
---|
667 | pointer-events: none;
|
---|
668 | }
|
---|
669 |
|
---|
670 | .md-shadow-bottom-z-1 {
|
---|
671 | @include md-shadow-bottom-z-1();
|
---|
672 | }
|
---|
673 | .md-shadow-bottom-z-2 {
|
---|
674 | @include md-shadow-bottom-z-2();
|
---|
675 | }
|
---|
676 |
|
---|
677 | .md-shadow-animated.md-shadow {
|
---|
678 | transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
---|
679 | }
|
---|
680 |
|
---|
681 | /*
|
---|
682 | * A container inside of a rippling element (eg a button),
|
---|
683 | * which contains all of the individual ripples
|
---|
684 | */
|
---|
685 | .md-ripple-container {
|
---|
686 | pointer-events: none;
|
---|
687 | position: absolute;
|
---|
688 | overflow: hidden;
|
---|
689 | left: 0;
|
---|
690 | top: 0;
|
---|
691 | width: 100%;
|
---|
692 | height: 100%;
|
---|
693 | transition: all 0.55s $swift-ease-out-timing-function;
|
---|
694 | }
|
---|
695 |
|
---|
696 | .md-ripple {
|
---|
697 | $sizeDuration: 0.45s * 2;
|
---|
698 | position: absolute;
|
---|
699 | transform: translate(-50%, -50%) scale(0);
|
---|
700 | transform-origin: 50% 50%;
|
---|
701 | opacity: 0;
|
---|
702 | border-radius: 50%;
|
---|
703 | &.md-ripple-placed {
|
---|
704 | transition: margin $sizeDuration $swift-ease-out-timing-function,
|
---|
705 | border $sizeDuration $swift-ease-out-timing-function,
|
---|
706 | width $sizeDuration $swift-ease-out-timing-function,
|
---|
707 | height $sizeDuration $swift-ease-out-timing-function,
|
---|
708 | opacity $sizeDuration $swift-ease-out-timing-function,
|
---|
709 | transform $sizeDuration $swift-ease-out-timing-function;
|
---|
710 | }
|
---|
711 | &.md-ripple-scaled {
|
---|
712 | transform: translate(-50%, -50%) scale(1);
|
---|
713 | }
|
---|
714 | &.md-ripple-active, &.md-ripple-full, &.md-ripple-visible {
|
---|
715 | opacity: 0.20;
|
---|
716 | }
|
---|
717 | &.md-ripple-remove {
|
---|
718 | animation: md-remove-ripple $sizeDuration $swift-ease-out-timing-function;
|
---|
719 | }
|
---|
720 | }
|
---|
721 |
|
---|
722 | // Fix issue causing ripple disappear suddenly in Chrome version 51, opacity .15 is close to the opacity when a normal click mouseup
|
---|
723 | @keyframes md-remove-ripple {
|
---|
724 | 0% { opacity: .15; }
|
---|
725 | 100% { opacity: 0; }
|
---|
726 | }
|
---|
727 |
|
---|
728 | .md-padding {
|
---|
729 | padding: 8px;
|
---|
730 | }
|
---|
731 |
|
---|
732 | .md-margin {
|
---|
733 | margin: 8px;
|
---|
734 | }
|
---|
735 |
|
---|
736 | .md-scroll-mask {
|
---|
737 | position: absolute;
|
---|
738 | background-color: transparent;
|
---|
739 | top: 0;
|
---|
740 | right: 0;
|
---|
741 | bottom: 0;
|
---|
742 | left: 0;
|
---|
743 | z-index: $z-index-scroll-mask;
|
---|
744 |
|
---|
745 | > .md-scroll-mask-bar {
|
---|
746 | display: block;
|
---|
747 | position: absolute;
|
---|
748 | background-color: #fafafa;
|
---|
749 | right: 0;
|
---|
750 | top: 0;
|
---|
751 | bottom: 0;
|
---|
752 | z-index: $z-index-scroll-mask-bar;
|
---|
753 | box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3)
|
---|
754 | }
|
---|
755 | }
|
---|
756 |
|
---|
757 | // For iOS allow disabling of momentum scrolling
|
---|
758 | // @see issue #2640
|
---|
759 | .md-no-momentum {
|
---|
760 | -webkit-overflow-scrolling: auto;
|
---|
761 | }
|
---|
762 |
|
---|
763 | // Add a class to help reduce flicker
|
---|
764 | // @see issue #7078 and #8649
|
---|
765 | .md-no-flicker {
|
---|
766 | -webkit-filter: blur(0px);
|
---|
767 | }
|
---|
768 |
|
---|
769 | @media (min-width: $layout-breakpoint-sm) {
|
---|
770 | .md-padding {
|
---|
771 | padding: 16px;
|
---|
772 | }
|
---|
773 | }
|
---|
774 |
|
---|
775 | // Bi-directional support
|
---|
776 |
|
---|
777 | html, body {
|
---|
778 | &[dir=rtl], &[dir=ltr] {
|
---|
779 | unicode-bidi: embed
|
---|
780 | }
|
---|
781 | }
|
---|
782 |
|
---|
783 | bdo[dir=rtl] {
|
---|
784 | direction: rtl;
|
---|
785 | unicode-bidi: bidi-override;
|
---|
786 | }
|
---|
787 | bdo[dir=ltr] {
|
---|
788 | direction: ltr;
|
---|
789 | unicode-bidi: bidi-override;
|
---|
790 | }
|
---|
791 |
|
---|
792 | @include auto-horizontal-margin('.md-auto-horizontal-margin');
|
---|
793 | // Global page styles
|
---|
794 | //
|
---|
795 | // [2] Ensure the page always fills at least the entire height of the viewport.
|
---|
796 | // [3] Prevent iOS text size adjust after orientation change, without disabling user zoom
|
---|
797 | // [4] Fonts on OSX will look more consistent with other systems that do not
|
---|
798 | // render text using sub-pixel anti-aliasing.
|
---|
799 |
|
---|
800 | html, body {
|
---|
801 | -webkit-tap-highlight-color: rgba(0,0,0,0);
|
---|
802 | -webkit-touch-callout: default;
|
---|
803 |
|
---|
804 | min-height: 100%; // [2]
|
---|
805 |
|
---|
806 | -webkit-text-size-adjust: 100%; // [3]
|
---|
807 | -ms-text-size-adjust: 100%; // [3]
|
---|
808 |
|
---|
809 | -webkit-font-smoothing: antialiased; // [4]
|
---|
810 | -moz-osx-font-smoothing: grayscale; // [4]
|
---|
811 | }
|
---|
812 |
|
---|
813 | /************
|
---|
814 | * Headings
|
---|
815 | ************/
|
---|
816 | .md-display-4 {
|
---|
817 | font-size: $display-4-font-size-base;
|
---|
818 | font-weight: 300;
|
---|
819 | letter-spacing: -0.010em;
|
---|
820 | line-height: $display-4-font-size-base;
|
---|
821 | }
|
---|
822 | .md-display-3 {
|
---|
823 | font-size: $display-3-font-size-base;
|
---|
824 | font-weight: 400;
|
---|
825 | letter-spacing: -0.005em;
|
---|
826 | line-height: $display-3-font-size-base;
|
---|
827 | }
|
---|
828 | .md-display-2 {
|
---|
829 | font-size: $display-2-font-size-base;
|
---|
830 | font-weight: 400;
|
---|
831 | line-height: rem(6.4);
|
---|
832 | }
|
---|
833 | .md-display-1 {
|
---|
834 | font-size: $display-1-font-size-base;
|
---|
835 | font-weight: 400;
|
---|
836 | line-height: rem(4);
|
---|
837 | }
|
---|
838 | .md-headline {
|
---|
839 | font-size: $headline-font-size-base;
|
---|
840 | font-weight: 400;
|
---|
841 | line-height: rem(3.2);
|
---|
842 | }
|
---|
843 | .md-title {
|
---|
844 | @include md-title();
|
---|
845 | }
|
---|
846 | .md-subhead {
|
---|
847 | @include md-subhead();
|
---|
848 | }
|
---|
849 | /************
|
---|
850 | * Body Copy
|
---|
851 | ************/
|
---|
852 | .md-body-1 {
|
---|
853 | @include md-body-1();
|
---|
854 | }
|
---|
855 | .md-body-2 {
|
---|
856 | @include md-body-2();
|
---|
857 | }
|
---|
858 | .md-caption {
|
---|
859 | font-size: $caption-font-size-base;
|
---|
860 | letter-spacing: 0.020em;
|
---|
861 | }
|
---|
862 | .md-button {
|
---|
863 | letter-spacing: 0.010em;
|
---|
864 | }
|
---|
865 |
|
---|
866 | /************
|
---|
867 | * Defaults
|
---|
868 | ************/
|
---|
869 |
|
---|
870 | button,
|
---|
871 | select,
|
---|
872 | html,
|
---|
873 | textarea,
|
---|
874 | input {
|
---|
875 | font-family: $font-family;
|
---|
876 | }
|
---|
877 |
|
---|
878 | select,
|
---|
879 | button,
|
---|
880 | textarea,
|
---|
881 | input {
|
---|
882 | font-size: 100%;
|
---|
883 | }
|
---|
884 |
|
---|
885 | /*
|
---|
886 | * Responsive attributes
|
---|
887 | *
|
---|
888 | * References:
|
---|
889 | * 1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
|
---|
890 | * 2) https://css-tricks.com/almanac/properties/f/flex/
|
---|
891 | * 3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
|
---|
892 | * 4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
|
---|
893 | * 5) http://godban.com.ua/projects/flexgrid
|
---|
894 | */
|
---|
895 | @mixin flex-order-for-name($sizes:null) {
|
---|
896 | @if $sizes == null {
|
---|
897 | $sizes : '';
|
---|
898 |
|
---|
899 | .flex-order {
|
---|
900 | order : 0;
|
---|
901 | }
|
---|
902 | }
|
---|
903 |
|
---|
904 | @for $i from -20 through 20 {
|
---|
905 | $order : '';
|
---|
906 | $suffix : '';
|
---|
907 |
|
---|
908 | @each $s in $sizes {
|
---|
909 | @if $s != '' { $suffix : '#{$s}-#{$i}'; }
|
---|
910 | @else { $suffix : '#{$i}'; }
|
---|
911 |
|
---|
912 | $order : '.flex-order-#{$suffix}';
|
---|
913 | }
|
---|
914 |
|
---|
915 | #{$order} {
|
---|
916 | order: #{$i};
|
---|
917 | }
|
---|
918 | }
|
---|
919 | }
|
---|
920 |
|
---|
921 | @mixin offset-for-name($sizes:null) {
|
---|
922 | @if $sizes == null { $sizes : ''; }
|
---|
923 |
|
---|
924 | @for $i from 0 through 19 {
|
---|
925 | $offsets : '';
|
---|
926 | $suffix : '';
|
---|
927 |
|
---|
928 | @each $s in $sizes {
|
---|
929 | @if $s != '' { $suffix : '#{$s}-#{$i * 5}'; }
|
---|
930 | @else { $suffix : '#{$i * 5}'; }
|
---|
931 |
|
---|
932 | $offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}, .layout-margin .flex-offset-#{$suffix}, .layout-margin .offset-#{$suffix}';
|
---|
933 | }
|
---|
934 |
|
---|
935 | #{$offsets} {
|
---|
936 | @if $i != 0 { @include rtl-prop(margin-left, margin-right, #{$i * 5 + '%'}, auto); }
|
---|
937 | @else { @include rtl-prop(margin-left, margin-right, 0, auto); }
|
---|
938 | }
|
---|
939 | }
|
---|
940 |
|
---|
941 | @each $i in 33 {
|
---|
942 | $offsets : '';
|
---|
943 | $suffix : '';
|
---|
944 |
|
---|
945 | @each $s in $sizes {
|
---|
946 | @if $s != '' { $suffix : '#{$s}-#{$i}'; }
|
---|
947 | @else { $suffix : '#{$i}'; }
|
---|
948 |
|
---|
949 | $offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}, .layout-margin .flex-offset-#{$suffix}, .layout-margin .offset-#{$suffix}';
|
---|
950 | }
|
---|
951 |
|
---|
952 | #{$offsets} {
|
---|
953 | margin-left: calc(100% / 3);
|
---|
954 | }
|
---|
955 | }
|
---|
956 |
|
---|
957 | @each $i in 66 {
|
---|
958 | $offsets : '';
|
---|
959 | $suffix : '';
|
---|
960 |
|
---|
961 | @each $s in $sizes {
|
---|
962 | @if $s != '' { $suffix : '#{$s}-#{$i}'; }
|
---|
963 | @else { $suffix : '#{$i}'; }
|
---|
964 |
|
---|
965 | $offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}, .layout-margin .flex-offset-#{$suffix}, .layout-margin .offset-#{$suffix}';
|
---|
966 | }
|
---|
967 |
|
---|
968 | #{$offsets} {
|
---|
969 | @include rtl-prop(margin-left, margin-right, calc(200% / 3), auto);
|
---|
970 | }
|
---|
971 | }
|
---|
972 | }
|
---|
973 |
|
---|
974 | @mixin layout-for-name($name: null) {
|
---|
975 | @if $name == null { $name : ''; }
|
---|
976 | @if $name != '' { $name : '-#{$name}'; }
|
---|
977 |
|
---|
978 | .layout#{$name}, .layout#{$name}-column, .layout#{$name}-row {
|
---|
979 | box-sizing: border-box;
|
---|
980 | display: -webkit-box;
|
---|
981 | display: -webkit-flex;
|
---|
982 | display: -moz-box;
|
---|
983 | display: -ms-flexbox;
|
---|
984 | display: flex;
|
---|
985 | }
|
---|
986 | .layout#{$name}-column { flex-direction: column; }
|
---|
987 | .layout#{$name}-row { flex-direction: row; }
|
---|
988 | }
|
---|
989 |
|
---|
990 | @mixin flex-properties-for-name($name: null) {
|
---|
991 | $flexName: 'flex';
|
---|
992 | // $name would be something like xs, sm, md, lg, xl
|
---|
993 | @if $name != null {
|
---|
994 | $flexName: 'flex-#{$name}';
|
---|
995 | $name : '-#{$name}';
|
---|
996 | } @else {
|
---|
997 | $name : '';
|
---|
998 | }
|
---|
999 |
|
---|
1000 | .#{$flexName} { flex: 1; box-sizing: border-box; } // === flex: 1 1 0%;
|
---|
1001 |
|
---|
1002 | .#{$flexName}-grow { flex: 1 1 100%; box-sizing: border-box; }
|
---|
1003 | .#{$flexName}-initial { flex: 0 1 auto; box-sizing: border-box; }
|
---|
1004 | .#{$flexName}-auto { flex: 1 1 auto; box-sizing: border-box; }
|
---|
1005 | .#{$flexName}-none { flex: 0 0 auto; box-sizing: border-box; }
|
---|
1006 | .#{$flexName}-noshrink { flex: 1 0 auto; box-sizing: border-box; }
|
---|
1007 | .#{$flexName}-nogrow { flex: 0 1 auto; box-sizing: border-box; }
|
---|
1008 |
|
---|
1009 | // (1-20) * 5 = 0-100%
|
---|
1010 | @for $i from 0 through 20 {
|
---|
1011 | $value : #{$i * 5 + '%'};
|
---|
1012 |
|
---|
1013 | .#{$flexName}-#{$i * 5} {
|
---|
1014 | flex: 1 1 100%;
|
---|
1015 | max-width: #{$value};
|
---|
1016 | max-height: 100%;
|
---|
1017 | box-sizing: border-box;
|
---|
1018 | }
|
---|
1019 |
|
---|
1020 | .layout-row > .#{$flexName}-#{$i * 5} {
|
---|
1021 | flex: 1 1 100%;
|
---|
1022 | max-width: #{$value};
|
---|
1023 | max-height: 100%;
|
---|
1024 | box-sizing: border-box;
|
---|
1025 |
|
---|
1026 | // Required by Chrome M48+ due to http://crbug.com/546034
|
---|
1027 | @if $i == 0 { min-width: 0; }
|
---|
1028 | }
|
---|
1029 |
|
---|
1030 | .layout-column > .#{$flexName}-#{$i * 5} {
|
---|
1031 | flex: 1 1 100%;
|
---|
1032 | max-width: 100%;
|
---|
1033 | max-height: #{$value};
|
---|
1034 | box-sizing: border-box;
|
---|
1035 | }
|
---|
1036 |
|
---|
1037 | @if ($name != '') {
|
---|
1038 | .layout#{$name}-row > .#{$flexName}-#{$i * 5} {
|
---|
1039 | flex: 1 1 100%;
|
---|
1040 | max-width: #{$value};
|
---|
1041 | max-height: 100%;
|
---|
1042 | box-sizing: border-box;
|
---|
1043 |
|
---|
1044 | // Required by Chrome M48+ due to http://crbug.com/546034
|
---|
1045 | @if $i == 0 { min-width: 0; }
|
---|
1046 | }
|
---|
1047 |
|
---|
1048 | .layout#{$name}-column > .#{$flexName}-#{$i * 5} {
|
---|
1049 | flex: 1 1 100%;
|
---|
1050 | max-width: 100%;
|
---|
1051 | max-height: #{$value};
|
---|
1052 | box-sizing: border-box;
|
---|
1053 |
|
---|
1054 | // Required by Chrome M48+ due to http://crbug.com/546034
|
---|
1055 | @if $i == 0 { min-height: 0; }
|
---|
1056 | }
|
---|
1057 | }
|
---|
1058 | }
|
---|
1059 |
|
---|
1060 | @if ($name == '') {
|
---|
1061 | .flex-33 { flex: 1 1 100%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
|
---|
1062 | .flex-66 { flex: 1 1 100%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
|
---|
1063 | }
|
---|
1064 |
|
---|
1065 | .layout-row {
|
---|
1066 | > .#{$flexName}-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
|
---|
1067 | > .#{$flexName}-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
|
---|
1068 | }
|
---|
1069 |
|
---|
1070 | .layout-column {
|
---|
1071 | > .#{$flexName}-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
|
---|
1072 | > .#{$flexName}-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
|
---|
1073 | }
|
---|
1074 |
|
---|
1075 | .layout#{$name}-row {
|
---|
1076 | > .#{$flexName}-33 { flex: 1 1 100%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
|
---|
1077 | > .#{$flexName}-66 { flex: 1 1 100%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
|
---|
1078 |
|
---|
1079 | // Required by Chrome M48+ due to http://crbug.com/546034
|
---|
1080 | > .flex { min-width: 0; }
|
---|
1081 | }
|
---|
1082 |
|
---|
1083 | .layout#{$name}-column {
|
---|
1084 | > .#{$flexName}-33 { flex: 1 1 100%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
|
---|
1085 | > .#{$flexName}-66 { flex: 1 1 100%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
|
---|
1086 |
|
---|
1087 | // Required by Chrome M48+ due to http://crbug.com/546034
|
---|
1088 | > .flex { min-height: 0; }
|
---|
1089 | }
|
---|
1090 | }
|
---|
1091 |
|
---|
1092 | @mixin layout-align-for-name($suffix: null) {
|
---|
1093 |
|
---|
1094 | // Alignment attributes for layout containers' children
|
---|
1095 | // Arrange on the Main Axis
|
---|
1096 | // center, start, end, space-between, space-around
|
---|
1097 | // flex-start is the default for justify-content
|
---|
1098 | // ------------------------------
|
---|
1099 |
|
---|
1100 | $name: 'layout-align';
|
---|
1101 | @if $suffix != null {
|
---|
1102 | $name: 'layout-align-#{$suffix}';
|
---|
1103 | }
|
---|
1104 |
|
---|
1105 | .#{$name},
|
---|
1106 | .#{$name}-start-stretch // defaults
|
---|
1107 | {
|
---|
1108 | justify-content : flex-start;
|
---|
1109 | align-content : stretch;
|
---|
1110 | align-items: stretch;
|
---|
1111 | }
|
---|
1112 |
|
---|
1113 | // Main Axis Center
|
---|
1114 | .#{$name}-start,
|
---|
1115 | .#{$name}-start-start,
|
---|
1116 | .#{$name}-start-center,
|
---|
1117 | .#{$name}-start-end,
|
---|
1118 | .#{$name}-start-stretch
|
---|
1119 | {
|
---|
1120 | justify-content: flex-start;
|
---|
1121 | }
|
---|
1122 |
|
---|
1123 | // Main Axis Center
|
---|
1124 | .#{$name}-center, //stretch
|
---|
1125 | .#{$name}-center-start,
|
---|
1126 | .#{$name}-center-center,
|
---|
1127 | .#{$name}-center-end,
|
---|
1128 | .#{$name}-center-stretch
|
---|
1129 | {
|
---|
1130 | justify-content: center;
|
---|
1131 | }
|
---|
1132 |
|
---|
1133 | // Main Axis End
|
---|
1134 | .#{$name}-end, //stretch
|
---|
1135 | .#{$name}-end-start,
|
---|
1136 | .#{$name}-end-center,
|
---|
1137 | .#{$name}-end-end,
|
---|
1138 | .#{$name}-end-stretch
|
---|
1139 | {
|
---|
1140 | justify-content: flex-end;
|
---|
1141 | }
|
---|
1142 |
|
---|
1143 | // Main Axis Space Around
|
---|
1144 | .#{$name}-space-around, //stretch
|
---|
1145 | .#{$name}-space-around-center,
|
---|
1146 | .#{$name}-space-around-start,
|
---|
1147 | .#{$name}-space-around-end,
|
---|
1148 | .#{$name}-space-around-stretch
|
---|
1149 | {
|
---|
1150 | justify-content: space-around;
|
---|
1151 | }
|
---|
1152 |
|
---|
1153 | // Main Axis Space Between
|
---|
1154 | .#{$name}-space-between, //stretch
|
---|
1155 | .#{$name}-space-between-center,
|
---|
1156 | .#{$name}-space-between-start,
|
---|
1157 | .#{$name}-space-between-end,
|
---|
1158 | .#{$name}-space-between-stretch
|
---|
1159 | {
|
---|
1160 | justify-content: space-between;
|
---|
1161 | }
|
---|
1162 |
|
---|
1163 |
|
---|
1164 | // Arrange on the Cross Axis
|
---|
1165 | // center, start, end
|
---|
1166 | // stretch is the default for align-items
|
---|
1167 | // ------------------------------
|
---|
1168 |
|
---|
1169 | // Cross Axis Start
|
---|
1170 | .#{$name}-start-start,
|
---|
1171 | .#{$name}-center-start,
|
---|
1172 | .#{$name}-end-start,
|
---|
1173 | .#{$name}-space-between-start,
|
---|
1174 | .#{$name}-space-around-start
|
---|
1175 | {
|
---|
1176 | align-items: flex-start;
|
---|
1177 | align-content: flex-start;
|
---|
1178 | }
|
---|
1179 |
|
---|
1180 | // Cross Axis Center
|
---|
1181 | .#{$name}-start-center,
|
---|
1182 | .#{$name}-center-center,
|
---|
1183 | .#{$name}-end-center,
|
---|
1184 | .#{$name}-space-between-center,
|
---|
1185 | .#{$name}-space-around-center
|
---|
1186 | {
|
---|
1187 | align-items: center;
|
---|
1188 | align-content: center;
|
---|
1189 | max-width: 100%;
|
---|
1190 | }
|
---|
1191 |
|
---|
1192 | // Cross Axis Center IE overflow fix
|
---|
1193 | .#{$name}-start-center > *,
|
---|
1194 | .#{$name}-center-center > *,
|
---|
1195 | .#{$name}-end-center > *,
|
---|
1196 | .#{$name}-space-between-center > *,
|
---|
1197 | .#{$name}-space-around-center > *
|
---|
1198 | {
|
---|
1199 | max-width: 100%;
|
---|
1200 | box-sizing: border-box;
|
---|
1201 | }
|
---|
1202 |
|
---|
1203 | // Cross Axis End
|
---|
1204 | .#{$name}-start-end,
|
---|
1205 | .#{$name}-center-end,
|
---|
1206 | .#{$name}-end-end,
|
---|
1207 | .#{$name}-space-between-end,
|
---|
1208 | .#{$name}-space-around-end
|
---|
1209 | {
|
---|
1210 | align-items: flex-end;
|
---|
1211 | align-content: flex-end;
|
---|
1212 | }
|
---|
1213 |
|
---|
1214 | // Cross Axis Start
|
---|
1215 | .#{$name}-start-stretch,
|
---|
1216 | .#{$name}-center-stretch,
|
---|
1217 | .#{$name}-end-stretch,
|
---|
1218 | .#{$name}-space-between-stretch,
|
---|
1219 | .#{$name}-space-around-stretch
|
---|
1220 | {
|
---|
1221 | align-items: stretch;
|
---|
1222 | align-content: stretch;
|
---|
1223 | }
|
---|
1224 | }
|
---|
1225 |
|
---|
1226 | @mixin layout-padding-margin() {
|
---|
1227 |
|
---|
1228 | // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
|
---|
1229 | .layout-padding-sm > *,
|
---|
1230 | .layout-padding > .flex-sm
|
---|
1231 | {
|
---|
1232 | padding: $layout-gutter-width / 4;
|
---|
1233 | }
|
---|
1234 |
|
---|
1235 | .layout-padding,
|
---|
1236 | .layout-padding-gt-sm,
|
---|
1237 | .layout-padding-md,
|
---|
1238 |
|
---|
1239 | // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
|
---|
1240 | .layout-padding > *,
|
---|
1241 | .layout-padding-gt-sm > *,
|
---|
1242 | .layout-padding-md > *,
|
---|
1243 |
|
---|
1244 | .layout-padding > .flex,
|
---|
1245 | .layout-padding > .flex-gt-sm,
|
---|
1246 | .layout-padding > .flex-md
|
---|
1247 | {
|
---|
1248 | padding: $layout-gutter-width / 2;
|
---|
1249 | }
|
---|
1250 |
|
---|
1251 | // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
|
---|
1252 | .layout-padding-gt-md > *,
|
---|
1253 | .layout-padding-lg > *,
|
---|
1254 | .layout-padding-gt-lg > *,
|
---|
1255 |
|
---|
1256 | .layout-padding > .flex-gt-md,
|
---|
1257 | .layout-padding > .flex-lg,
|
---|
1258 | .layout-padding > .flex-lg,
|
---|
1259 | .layout-padding > .flex-gt-lg
|
---|
1260 | {
|
---|
1261 | padding: $layout-gutter-width / 1;
|
---|
1262 | }
|
---|
1263 |
|
---|
1264 | // Margin enhancements
|
---|
1265 |
|
---|
1266 | .layout-margin-sm > *,
|
---|
1267 | .layout-margin > .flex-sm
|
---|
1268 | {
|
---|
1269 | margin: $layout-gutter-width / 4;
|
---|
1270 | }
|
---|
1271 |
|
---|
1272 | .layout-margin,
|
---|
1273 | .layout-margin-gt-sm,
|
---|
1274 | .layout-margin-md,
|
---|
1275 |
|
---|
1276 | // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
|
---|
1277 | .layout-margin > *,
|
---|
1278 | .layout-margin-gt-sm > *,
|
---|
1279 | .layout-margin-md > *,
|
---|
1280 |
|
---|
1281 | .layout-margin > .flex,
|
---|
1282 | .layout-margin > .flex-gt-sm,
|
---|
1283 | .layout-margin > .flex-md
|
---|
1284 | {
|
---|
1285 | margin: $layout-gutter-width / 2;
|
---|
1286 | }
|
---|
1287 |
|
---|
1288 | // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
|
---|
1289 | .layout-margin-gt-md > *,
|
---|
1290 | .layout-margin-lg > *,
|
---|
1291 | .layout-margin-gt-lg > *,
|
---|
1292 |
|
---|
1293 | .layout-margin > .flex-gt-md,
|
---|
1294 | .layout-margin > .flex-lg,
|
---|
1295 | .layout-margin > .flex-gt-lg
|
---|
1296 | {
|
---|
1297 | margin: $layout-gutter-width / 1;
|
---|
1298 | }
|
---|
1299 |
|
---|
1300 | .layout-wrap {
|
---|
1301 | flex-wrap: wrap;
|
---|
1302 | }
|
---|
1303 |
|
---|
1304 | .layout-nowrap {
|
---|
1305 | flex-wrap: nowrap;
|
---|
1306 | }
|
---|
1307 |
|
---|
1308 | .layout-fill {
|
---|
1309 | margin: 0;
|
---|
1310 | width: 100%;
|
---|
1311 | min-height: 100%;
|
---|
1312 | height: 100%;
|
---|
1313 | }
|
---|
1314 | }
|
---|
1315 |
|
---|
1316 | @mixin layouts_for_breakpoint($name:null) {
|
---|
1317 | @include flex-order-for-name($name);
|
---|
1318 | @include offset-for-name($name);
|
---|
1319 | @include layout-align-for-name($name);
|
---|
1320 |
|
---|
1321 | @include flex-properties-for-name($name);
|
---|
1322 | @include layout-for-name($name);
|
---|
1323 | }
|
---|
1324 |
|
---|
1325 | .md-panel-outer-wrapper {
|
---|
1326 | height: 100%;
|
---|
1327 | left: 0;
|
---|
1328 | position: absolute;
|
---|
1329 | top: 0;
|
---|
1330 | width: 100%;
|
---|
1331 | }
|
---|
1332 |
|
---|
1333 | .md-panel-inner-wrapper {
|
---|
1334 | position: fixed;
|
---|
1335 | }
|
---|
1336 |
|
---|
1337 | ._md-panel-offscreen {
|
---|
1338 | left: -9999px;
|
---|
1339 | }
|
---|
1340 |
|
---|
1341 | ._md-panel-hidden {
|
---|
1342 | display: none;
|
---|
1343 | }
|
---|
1344 |
|
---|
1345 | // Only used when no animations are present.
|
---|
1346 | ._md-panel-shown .md-panel {
|
---|
1347 | opacity: 1;
|
---|
1348 | transition: none;
|
---|
1349 | }
|
---|
1350 |
|
---|
1351 | .md-panel {
|
---|
1352 | opacity: 0;
|
---|
1353 | position: relative;
|
---|
1354 |
|
---|
1355 | &._md-panel-shown {
|
---|
1356 | // Only used when custom animations are present.
|
---|
1357 | // Overridden by the default animations.
|
---|
1358 | opacity: 1;
|
---|
1359 | transition: none;
|
---|
1360 | }
|
---|
1361 |
|
---|
1362 | &._md-panel-animate-enter {
|
---|
1363 | opacity: 1;
|
---|
1364 | transition: $material-enter;
|
---|
1365 | }
|
---|
1366 |
|
---|
1367 | &._md-panel-animate-leave {
|
---|
1368 | opacity: 1;
|
---|
1369 | transition: $material-leave;
|
---|
1370 | }
|
---|
1371 |
|
---|
1372 | &._md-panel-animate-scale-out,
|
---|
1373 | &._md-panel-animate-fade-out {
|
---|
1374 | opacity: 0;
|
---|
1375 | }
|
---|
1376 |
|
---|
1377 | &._md-panel-backdrop {
|
---|
1378 | height: 100%;
|
---|
1379 | position: fixed;
|
---|
1380 | width: 100%;
|
---|
1381 | }
|
---|
1382 |
|
---|
1383 | &._md-opaque-enter {
|
---|
1384 | opacity: .48;
|
---|
1385 | transition: opacity $material-enter-duration $material-enter-timing-function;
|
---|
1386 | }
|
---|
1387 |
|
---|
1388 | &._md-opaque-leave {
|
---|
1389 | transition: opacity $material-leave-duration $material-leave-timing-function;
|
---|
1390 | }
|
---|
1391 | }
|
---|
1392 |
|
---|
1393 | ._md-panel-fullscreen {
|
---|
1394 | border-radius: 0;
|
---|
1395 | left: 0;
|
---|
1396 | min-height: 100%;
|
---|
1397 | min-width: 100%;
|
---|
1398 | position: fixed;
|
---|
1399 | top: 0;
|
---|
1400 | }
|
---|
1401 |
|
---|
1402 | // The default item height is also specified in the JavaScript.
|
---|
1403 | $md-autocomplete-item-height: 48px !default;
|
---|
1404 | $md-autocomplete-clear-size: 30px !default;
|
---|
1405 | $md-autocomplete-input-offset: 20px !default;
|
---|
1406 |
|
---|
1407 | md-autocomplete {
|
---|
1408 | border-radius: 2px;
|
---|
1409 | display: block;
|
---|
1410 | height: 40px;
|
---|
1411 | position: relative;
|
---|
1412 | overflow: visible;
|
---|
1413 | min-width: 190px;
|
---|
1414 | &[disabled] {
|
---|
1415 | input {
|
---|
1416 | cursor: default;
|
---|
1417 | }
|
---|
1418 | }
|
---|
1419 | &[md-floating-label] {
|
---|
1420 | border-radius: 0;
|
---|
1421 | background: transparent;
|
---|
1422 | height: auto;
|
---|
1423 |
|
---|
1424 | md-input-container {
|
---|
1425 | padding-bottom: 0;
|
---|
1426 | }
|
---|
1427 | md-autocomplete-wrap {
|
---|
1428 | height: auto;
|
---|
1429 | }
|
---|
1430 |
|
---|
1431 | .md-show-clear-button {
|
---|
1432 | button {
|
---|
1433 | display: block;
|
---|
1434 | position: absolute;
|
---|
1435 | right: 0;
|
---|
1436 | top: $md-autocomplete-input-offset;
|
---|
1437 | width: $md-autocomplete-clear-size;
|
---|
1438 | height: $md-autocomplete-clear-size;
|
---|
1439 | }
|
---|
1440 |
|
---|
1441 | input {
|
---|
1442 | // Add padding to the end of the input to avoid overlapping with the clear button.
|
---|
1443 | @include rtl-prop(padding-right, padding-left, $md-autocomplete-clear-size, 0);
|
---|
1444 | }
|
---|
1445 | }
|
---|
1446 | }
|
---|
1447 | md-autocomplete-wrap {
|
---|
1448 | // Layout [layout='row']
|
---|
1449 | display: flex;
|
---|
1450 | flex-direction: row;
|
---|
1451 | box-sizing: border-box;
|
---|
1452 |
|
---|
1453 | position: relative;
|
---|
1454 | overflow: visible;
|
---|
1455 | height: 40px;
|
---|
1456 | &.md-menu-showing {
|
---|
1457 | z-index: $z-index-backdrop + 1;
|
---|
1458 | }
|
---|
1459 |
|
---|
1460 | md-input-container,
|
---|
1461 | input {
|
---|
1462 | // Layout [flex]
|
---|
1463 | flex: 1 1 0;
|
---|
1464 | box-sizing: border-box;
|
---|
1465 | min-width : 0;
|
---|
1466 | }
|
---|
1467 |
|
---|
1468 | md-progress-linear {
|
---|
1469 | position: absolute;
|
---|
1470 | bottom: -2px;
|
---|
1471 | left: 0;
|
---|
1472 | // When `md-inline` is present, we adjust the offset to go over the `ng-message` space
|
---|
1473 | &.md-inline {
|
---|
1474 | bottom: 40px;
|
---|
1475 | right: 2px;
|
---|
1476 | left: 2px;
|
---|
1477 | width: auto;
|
---|
1478 | }
|
---|
1479 | .md-mode-indeterminate {
|
---|
1480 | position: absolute;
|
---|
1481 | top: 0;
|
---|
1482 | left: 0;
|
---|
1483 | width: 100%;
|
---|
1484 | height: 3px;
|
---|
1485 | transition: none;
|
---|
1486 |
|
---|
1487 | .md-container {
|
---|
1488 | transition: none;
|
---|
1489 | height: 3px;
|
---|
1490 | }
|
---|
1491 | &.ng-enter {
|
---|
1492 | transition: opacity 0.15s linear;
|
---|
1493 | &.ng-enter-active {
|
---|
1494 | opacity: 1;
|
---|
1495 | }
|
---|
1496 | }
|
---|
1497 | &.ng-leave {
|
---|
1498 | transition: opacity 0.15s linear;
|
---|
1499 | &.ng-leave-active {
|
---|
1500 | opacity: 0;
|
---|
1501 | }
|
---|
1502 | }
|
---|
1503 | }
|
---|
1504 | }
|
---|
1505 | }
|
---|
1506 | input:not(.md-input) {
|
---|
1507 | @include md-flat-input();
|
---|
1508 | width: 100%;
|
---|
1509 | padding: 0 15px;
|
---|
1510 | line-height: 40px;
|
---|
1511 | height: 40px;
|
---|
1512 | }
|
---|
1513 | .md-show-clear-button button {
|
---|
1514 | position: relative;
|
---|
1515 | line-height: 20px;
|
---|
1516 | text-align: center;
|
---|
1517 | width: $md-autocomplete-clear-size;
|
---|
1518 | height: $md-autocomplete-clear-size;
|
---|
1519 | cursor: pointer;
|
---|
1520 | border: none;
|
---|
1521 | border-radius: 50%;
|
---|
1522 | padding: 0;
|
---|
1523 | font-size: 12px;
|
---|
1524 | background: transparent;
|
---|
1525 | margin: auto 5px;
|
---|
1526 | &:after {
|
---|
1527 | content: '';
|
---|
1528 | position: absolute;
|
---|
1529 | top: -6px;
|
---|
1530 | right: -6px;
|
---|
1531 | bottom: -6px;
|
---|
1532 | left: -6px;
|
---|
1533 | border-radius: 50%;
|
---|
1534 | transform: scale(0);
|
---|
1535 | opacity: 0;
|
---|
1536 | transition: $swift-ease-out;
|
---|
1537 | }
|
---|
1538 | &:focus {
|
---|
1539 | outline: none;
|
---|
1540 |
|
---|
1541 | &:after {
|
---|
1542 | transform: scale(1);
|
---|
1543 | opacity: 1;
|
---|
1544 | }
|
---|
1545 | }
|
---|
1546 | md-icon {
|
---|
1547 | position: absolute;
|
---|
1548 | top: 50%;
|
---|
1549 | left: 50%;
|
---|
1550 | transform: translate3d(-50%, -50%, 0) scale(0.9);
|
---|
1551 | path {
|
---|
1552 | stroke-width: 0;
|
---|
1553 | }
|
---|
1554 | }
|
---|
1555 | &.ng-enter {
|
---|
1556 | transform: scale(0);
|
---|
1557 | transition: transform 0.15s ease-out;
|
---|
1558 | &.ng-enter-active {
|
---|
1559 | transform: scale(1);
|
---|
1560 | }
|
---|
1561 | }
|
---|
1562 | &.ng-leave {
|
---|
1563 | transition: transform 0.15s ease-out;
|
---|
1564 | &.ng-leave-active {
|
---|
1565 | transform: scale(0);
|
---|
1566 | }
|
---|
1567 | }
|
---|
1568 | }
|
---|
1569 | // IE Only
|
---|
1570 | @media screen and (-ms-high-contrast: active) {
|
---|
1571 | $border-color: #fff;
|
---|
1572 |
|
---|
1573 | input {
|
---|
1574 | border: 1px solid $border-color;
|
---|
1575 | }
|
---|
1576 | .md-autocomplete-suggestion:focus {
|
---|
1577 | color: #fff;
|
---|
1578 | }
|
---|
1579 | }
|
---|
1580 | }
|
---|
1581 |
|
---|
1582 | .md-virtual-repeat-container.md-autocomplete-suggestions-container,
|
---|
1583 | .md-standard-list-container.md-autocomplete-suggestions-container {
|
---|
1584 | position: absolute;
|
---|
1585 | box-shadow: 0 2px 5px rgba(black, 0.25);
|
---|
1586 | z-index: $z-index-tooltip;
|
---|
1587 |
|
---|
1588 | // Expand the virtualRepeatContainer as much as the max-height from the JavaScript allows.
|
---|
1589 | // This is necessary for the virtualRepeatContainer to be able to grow back.
|
---|
1590 | height: 100%;
|
---|
1591 |
|
---|
1592 | .highlight {
|
---|
1593 | font-weight: bold;
|
---|
1594 | }
|
---|
1595 | }
|
---|
1596 |
|
---|
1597 | .md-standard-list-container {
|
---|
1598 | box-sizing: border-box;
|
---|
1599 | display: block;
|
---|
1600 | margin: 0;
|
---|
1601 | overflow: hidden;
|
---|
1602 | overflow-y: auto;
|
---|
1603 | padding: 0;
|
---|
1604 | }
|
---|
1605 |
|
---|
1606 | .md-virtual-repeat-container.md-not-found,
|
---|
1607 | .md-standard-list-container.md-not-found {
|
---|
1608 | height: $md-autocomplete-item-height;
|
---|
1609 | }
|
---|
1610 |
|
---|
1611 | .md-autocomplete-suggestions {
|
---|
1612 | margin: 0;
|
---|
1613 | list-style: none;
|
---|
1614 | padding: 0;
|
---|
1615 |
|
---|
1616 | .md-autocomplete-suggestion {
|
---|
1617 | font-size: 14px;
|
---|
1618 | overflow: hidden;
|
---|
1619 | padding: 0 15px;
|
---|
1620 | line-height: $md-autocomplete-item-height;
|
---|
1621 | height: $md-autocomplete-item-height;
|
---|
1622 | transition: background 0.15s linear;
|
---|
1623 | margin: 0;
|
---|
1624 | white-space: nowrap;
|
---|
1625 | text-overflow: ellipsis;
|
---|
1626 |
|
---|
1627 | &:focus {
|
---|
1628 | outline: none;
|
---|
1629 | }
|
---|
1630 |
|
---|
1631 | &:not(.md-not-found-wrapper) {
|
---|
1632 | cursor: pointer;
|
---|
1633 | }
|
---|
1634 | }
|
---|
1635 | }
|
---|
1636 |
|
---|
1637 | // IE Only
|
---|
1638 | @media screen and (-ms-high-contrast: active) {
|
---|
1639 | md-autocomplete,
|
---|
1640 | .md-autocomplete-suggestions {
|
---|
1641 | border: 1px solid #fff;
|
---|
1642 | }
|
---|
1643 | }
|
---|
1644 |
|
---|
1645 | // !!Important - Theme-based Background-color can be configured in backdrop-theme.scss
|
---|
1646 | // - Animate background-color opacity only for `.md-opaque` styles
|
---|
1647 |
|
---|
1648 | md-backdrop {
|
---|
1649 | transition: opacity 450ms;
|
---|
1650 |
|
---|
1651 | position: absolute;
|
---|
1652 | top:0;
|
---|
1653 | bottom:0;
|
---|
1654 | left: 0;
|
---|
1655 | right: 0;
|
---|
1656 |
|
---|
1657 | z-index: $z-index-backdrop;
|
---|
1658 |
|
---|
1659 | &.md-menu-backdrop {
|
---|
1660 | position: fixed !important;
|
---|
1661 | z-index: $z-index-menu - 1;
|
---|
1662 | }
|
---|
1663 | &.md-select-backdrop {
|
---|
1664 | z-index: $z-index-dialog + 1;
|
---|
1665 | transition-duration: 0;
|
---|
1666 | }
|
---|
1667 | &.md-dialog-backdrop {
|
---|
1668 | z-index: $z-index-dialog - 1;
|
---|
1669 | }
|
---|
1670 | &.md-bottom-sheet-backdrop {
|
---|
1671 | z-index: $z-index-bottom-sheet - 1;
|
---|
1672 | }
|
---|
1673 | &.md-sidenav-backdrop {
|
---|
1674 | z-index: $z-index-sidenav - 1;
|
---|
1675 | }
|
---|
1676 |
|
---|
1677 |
|
---|
1678 | &.md-click-catcher {
|
---|
1679 | position: absolute;
|
---|
1680 | }
|
---|
1681 |
|
---|
1682 | &.md-opaque {
|
---|
1683 |
|
---|
1684 | opacity: .48;
|
---|
1685 |
|
---|
1686 | &.ng-enter {
|
---|
1687 | opacity: 0;
|
---|
1688 | }
|
---|
1689 | &.ng-enter.md-opaque.ng-enter-active {
|
---|
1690 | opacity: .48;
|
---|
1691 | }
|
---|
1692 | &.ng-leave {
|
---|
1693 | opacity: .48;
|
---|
1694 | transition: opacity 400ms;
|
---|
1695 | }
|
---|
1696 | &.ng-leave.md-opaque.ng-leave-active {
|
---|
1697 | opacity: 0;
|
---|
1698 | }
|
---|
1699 | }
|
---|
1700 |
|
---|
1701 | }
|
---|
1702 |
|
---|
1703 |
|
---|
1704 | $bottom-sheet-horizontal-padding: 2 * $baseline-grid !default;
|
---|
1705 | $bottom-sheet-vertical-padding: 1 * $baseline-grid !default;
|
---|
1706 | $bottom-sheet-icon-after-margin: 4 * $baseline-grid !default;
|
---|
1707 | $bottom-sheet-list-item-height: 6 * $baseline-grid !default;
|
---|
1708 | $bottom-sheet-hidden-bottom-padding: 80px !default;
|
---|
1709 | $bottom-sheet-header-height: 7 * $baseline-grid !default;
|
---|
1710 | $bottom-sheet-grid-font-weight: 400 !default;
|
---|
1711 |
|
---|
1712 | md-bottom-sheet {
|
---|
1713 | position: absolute;
|
---|
1714 | left: 0;
|
---|
1715 | right: 0;
|
---|
1716 | bottom: 0;
|
---|
1717 | padding: $bottom-sheet-vertical-padding $bottom-sheet-horizontal-padding $bottom-sheet-vertical-padding + $bottom-sheet-hidden-bottom-padding $bottom-sheet-horizontal-padding;
|
---|
1718 | z-index: $z-index-bottom-sheet;
|
---|
1719 |
|
---|
1720 | border-top-width: 1px;
|
---|
1721 | border-top-style: solid;
|
---|
1722 |
|
---|
1723 | transform: translate3d(0, $bottom-sheet-hidden-bottom-padding, 0);
|
---|
1724 | transition: $swift-ease-out;
|
---|
1725 | transition-property: transform;
|
---|
1726 |
|
---|
1727 | &.md-has-header {
|
---|
1728 | padding-top: 0;
|
---|
1729 | }
|
---|
1730 |
|
---|
1731 | &.ng-enter {
|
---|
1732 | opacity: 0;
|
---|
1733 | transform: translate3d(0, 100%, 0);
|
---|
1734 | }
|
---|
1735 |
|
---|
1736 | &.ng-enter-active {
|
---|
1737 | opacity: 1;
|
---|
1738 | display: block;
|
---|
1739 | transform: translate3d(0, $bottom-sheet-hidden-bottom-padding, 0) !important;
|
---|
1740 | }
|
---|
1741 |
|
---|
1742 |
|
---|
1743 | &.ng-leave-active {
|
---|
1744 | transform: translate3d(0, 100%, 0) !important;
|
---|
1745 | transition: $swift-ease-in;
|
---|
1746 | }
|
---|
1747 |
|
---|
1748 | .md-subheader {
|
---|
1749 | background-color: transparent;
|
---|
1750 | font-family: $font-family;
|
---|
1751 | line-height: $bottom-sheet-header-height;
|
---|
1752 | padding: 0;
|
---|
1753 | white-space: nowrap;
|
---|
1754 | }
|
---|
1755 |
|
---|
1756 | md-inline-icon {
|
---|
1757 | display: inline-block;
|
---|
1758 | height: 24px;
|
---|
1759 | width: 24px;
|
---|
1760 | fill: #444;
|
---|
1761 | }
|
---|
1762 |
|
---|
1763 | md-list-item {
|
---|
1764 | display: flex;
|
---|
1765 | outline: none;
|
---|
1766 |
|
---|
1767 | &:hover {
|
---|
1768 | cursor: pointer;
|
---|
1769 | }
|
---|
1770 | }
|
---|
1771 |
|
---|
1772 | &.md-list {
|
---|
1773 | md-list-item {
|
---|
1774 | padding: 0;
|
---|
1775 | align-items: center;
|
---|
1776 | height: $bottom-sheet-list-item-height;
|
---|
1777 |
|
---|
1778 | }
|
---|
1779 | }
|
---|
1780 |
|
---|
1781 |
|
---|
1782 |
|
---|
1783 | &.md-grid {
|
---|
1784 | padding-left: 3 * $baseline-grid;
|
---|
1785 | padding-right: 3 * $baseline-grid;
|
---|
1786 | padding-top: 0;
|
---|
1787 |
|
---|
1788 | md-list {
|
---|
1789 | display: flex;
|
---|
1790 | flex-direction: row;
|
---|
1791 | flex-wrap: wrap;
|
---|
1792 | transition: all 0.5s;
|
---|
1793 | align-items: center;
|
---|
1794 | }
|
---|
1795 |
|
---|
1796 | md-list-item {
|
---|
1797 | flex-direction: column;
|
---|
1798 | align-items: center;
|
---|
1799 | transition: all 0.5s;
|
---|
1800 |
|
---|
1801 | height: 12 * $baseline-grid;
|
---|
1802 |
|
---|
1803 | margin-top: $baseline-grid;
|
---|
1804 | margin-bottom: $baseline-grid;
|
---|
1805 |
|
---|
1806 | /* Mixin for how many grid items to show per row */
|
---|
1807 | @mixin grid-items-per-row($num, $alignEdges: false) {
|
---|
1808 | $width: 100% / $num;
|
---|
1809 | flex: 1 1 $width;
|
---|
1810 | max-width: $width;
|
---|
1811 |
|
---|
1812 | @if $alignEdges {
|
---|
1813 | &:nth-of-type(#{$num}n + 1) {
|
---|
1814 | align-items: flex-start;
|
---|
1815 | }
|
---|
1816 | &:nth-of-type(#{$num}n) {
|
---|
1817 | align-items: flex-end;
|
---|
1818 | }
|
---|
1819 | }
|
---|
1820 | }
|
---|
1821 |
|
---|
1822 | @media (max-width: $layout-breakpoint-sm) {
|
---|
1823 | @include grid-items-per-row(3, true);
|
---|
1824 | }
|
---|
1825 |
|
---|
1826 | @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
|
---|
1827 | @include grid-items-per-row(4);
|
---|
1828 | }
|
---|
1829 |
|
---|
1830 | @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
|
---|
1831 | @include grid-items-per-row(6);
|
---|
1832 | }
|
---|
1833 |
|
---|
1834 | @media (min-width: $layout-breakpoint-lg) {
|
---|
1835 | @include grid-items-per-row(7);
|
---|
1836 | }
|
---|
1837 |
|
---|
1838 | // Override of the IE11 fix from @mixin ie11-min-height-flexbug, line 109 _mixins.scss
|
---|
1839 | &::before {
|
---|
1840 | display: none;
|
---|
1841 | }
|
---|
1842 |
|
---|
1843 | .md-list-item-content {
|
---|
1844 | display: flex;
|
---|
1845 | flex-direction: column;
|
---|
1846 | align-items: center;
|
---|
1847 | width: 6 * $baseline-grid;
|
---|
1848 | padding-bottom: 2 * $baseline-grid;
|
---|
1849 | }
|
---|
1850 |
|
---|
1851 | .md-grid-item-content {
|
---|
1852 | border: 1px solid transparent;
|
---|
1853 | display: flex;
|
---|
1854 | flex-direction: column;
|
---|
1855 | align-items: center;
|
---|
1856 | width: 10 * $baseline-grid;
|
---|
1857 | }
|
---|
1858 |
|
---|
1859 | .md-grid-text {
|
---|
1860 | font-weight: $bottom-sheet-grid-font-weight;
|
---|
1861 | line-height: 2 * $baseline-grid;
|
---|
1862 | font-size: 2 * $baseline-grid - 3;
|
---|
1863 | margin: 0;
|
---|
1864 | white-space: nowrap;
|
---|
1865 | width: 8 * $baseline-grid;
|
---|
1866 | text-align: center;
|
---|
1867 | text-transform: none;
|
---|
1868 | padding-top: 1 * $baseline-grid;
|
---|
1869 | }
|
---|
1870 | }
|
---|
1871 | }
|
---|
1872 | }
|
---|
1873 |
|
---|
1874 | // IE only
|
---|
1875 | @media screen and (-ms-high-contrast: active) {
|
---|
1876 | md-bottom-sheet {
|
---|
1877 | border: 1px solid #fff;
|
---|
1878 | }
|
---|
1879 | }
|
---|
1880 |
|
---|
1881 | // Material Design Button: https://material.io/archive/guidelines/components/buttons.html
|
---|
1882 |
|
---|
1883 | $button-border-radius: 2px !default;
|
---|
1884 | $button-fab-border-radius: 50% !default;
|
---|
1885 | $button-icon-border-radius: $button-fab-border-radius !default;
|
---|
1886 |
|
---|
1887 | $button-font-size: $body-font-size-base !default;
|
---|
1888 | $button-font-size-dense: $body-font-size-base * 13/14 !default;
|
---|
1889 |
|
---|
1890 | $button-line-height: rem(3.60) !default;
|
---|
1891 | $button-line-height-dense: rem(3.20) !default;
|
---|
1892 | $button-margin: rem(0.600) rem(0.800) !default;
|
---|
1893 | $button-min-width: rem(8.800) !default;
|
---|
1894 | $button-padding: 0 $button-left-right-padding !default;
|
---|
1895 |
|
---|
1896 |
|
---|
1897 | // Fab buttons
|
---|
1898 | $button-fab-line-height: rem(5.600) !default;
|
---|
1899 | $button-fab-mini-width: rem(4.00) !default;
|
---|
1900 | $button-fab-mini-height: rem(4.00) !default;
|
---|
1901 | $button-fab-mini-line-height: rem(4.00) !default;
|
---|
1902 |
|
---|
1903 | $button-fab-toast-offset: $button-fab-height * 0.75 !default;
|
---|
1904 |
|
---|
1905 | $icon-button-margin: rem(0.600) !default;
|
---|
1906 |
|
---|
1907 | // Fix issue causing buttons in Firefox to be 2px bigger than they should
|
---|
1908 | button.md-button::-moz-focus-inner {
|
---|
1909 | border: 0;
|
---|
1910 | }
|
---|
1911 |
|
---|
1912 | .md-button {
|
---|
1913 | display: inline-block;
|
---|
1914 | position: relative; // Required for absolute canvas child elements.
|
---|
1915 | cursor: pointer;
|
---|
1916 |
|
---|
1917 | /** Alignment adjustments */
|
---|
1918 | @include dense(min-height, $button-line-height, $button-line-height-dense);
|
---|
1919 | min-width: $button-min-width;
|
---|
1920 | @include dense(line-height, $button-line-height, $button-line-height-dense);
|
---|
1921 |
|
---|
1922 | vertical-align: middle;
|
---|
1923 | align-items: center;
|
---|
1924 | text-align: center;
|
---|
1925 |
|
---|
1926 | border-radius: $button-border-radius;
|
---|
1927 | box-sizing: border-box;
|
---|
1928 |
|
---|
1929 | /* Reset default button appearance */
|
---|
1930 | user-select: none;
|
---|
1931 | outline: none;
|
---|
1932 | border: 0;
|
---|
1933 |
|
---|
1934 | /** Custom styling for button */
|
---|
1935 | padding: $button-padding;
|
---|
1936 | margin: $button-margin;
|
---|
1937 |
|
---|
1938 | background: transparent;
|
---|
1939 | color: currentColor;
|
---|
1940 | white-space: nowrap;
|
---|
1941 |
|
---|
1942 | /* Uppercase text content */
|
---|
1943 | text-transform: uppercase;
|
---|
1944 | font-weight: 500;
|
---|
1945 | @include dense(font-size, $button-font-size, $button-font-size-dense);
|
---|
1946 | font-style: inherit;
|
---|
1947 | font-variant: inherit;
|
---|
1948 | font-family: inherit;
|
---|
1949 | text-decoration: none;
|
---|
1950 |
|
---|
1951 | // Ink Ripple should not create any overflow.
|
---|
1952 | overflow: hidden;
|
---|
1953 |
|
---|
1954 | transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function,
|
---|
1955 | background-color $swift-ease-out-duration $swift-ease-out-timing-function;
|
---|
1956 |
|
---|
1957 | &:focus {
|
---|
1958 | outline: none;
|
---|
1959 | }
|
---|
1960 |
|
---|
1961 | &:hover, &:focus {
|
---|
1962 | text-decoration: none;
|
---|
1963 | }
|
---|
1964 |
|
---|
1965 | // By default $ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show.
|
---|
1966 | // The .md-button has a transition duration applied, which means, that $ngAnimate delays the hide process.
|
---|
1967 | // To avoid this, we need to reset the transition, when $ngAnimate looks for the duration.
|
---|
1968 | &.ng-hide, &.ng-leave {
|
---|
1969 | transition: none;
|
---|
1970 | }
|
---|
1971 |
|
---|
1972 | &.md-cornered {
|
---|
1973 | border-radius: 0;
|
---|
1974 | }
|
---|
1975 |
|
---|
1976 | &.md-icon {
|
---|
1977 | padding: 0;
|
---|
1978 | background: none;
|
---|
1979 | }
|
---|
1980 |
|
---|
1981 | &.md-raised {
|
---|
1982 | &:not([disabled]) {
|
---|
1983 | @include md-shadow-bottom-z-1();
|
---|
1984 | }
|
---|
1985 | }
|
---|
1986 |
|
---|
1987 | &.md-icon-button {
|
---|
1988 | margin: 0 $icon-button-margin;
|
---|
1989 | height: $icon-button-height;
|
---|
1990 | min-width: 0;
|
---|
1991 | line-height: $icon-size;
|
---|
1992 | padding: $baseline-grid;
|
---|
1993 | width: $icon-button-width;
|
---|
1994 | border-radius: $button-icon-border-radius;
|
---|
1995 | }
|
---|
1996 |
|
---|
1997 | &.md-fab {
|
---|
1998 |
|
---|
1999 | // Include the top/left/bottom/right fab positions
|
---|
2000 | @include fab-all-positions();
|
---|
2001 |
|
---|
2002 | z-index: $z-index-fab;
|
---|
2003 |
|
---|
2004 | line-height: $button-fab-line-height;
|
---|
2005 |
|
---|
2006 | min-width: 0;
|
---|
2007 | width: $button-fab-width;
|
---|
2008 | height: $button-fab-height;
|
---|
2009 | vertical-align: middle;
|
---|
2010 |
|
---|
2011 | @include md-shadow-bottom-z-1();
|
---|
2012 | border-radius: $button-fab-border-radius;
|
---|
2013 | background-clip: padding-box;
|
---|
2014 | overflow: hidden;
|
---|
2015 |
|
---|
2016 | transition: $swift-ease-in;
|
---|
2017 | transition-property: background-color, box-shadow, transform;
|
---|
2018 |
|
---|
2019 | &.md-mini {
|
---|
2020 | line-height: $button-fab-mini-line-height;
|
---|
2021 | width: $button-fab-mini-width;
|
---|
2022 | height: $button-fab-mini-height;
|
---|
2023 | }
|
---|
2024 |
|
---|
2025 | &.ng-hide, &.ng-leave {
|
---|
2026 | transition: none;
|
---|
2027 | }
|
---|
2028 |
|
---|
2029 | &[disabled] {
|
---|
2030 | box-shadow: none;
|
---|
2031 | }
|
---|
2032 | }
|
---|
2033 |
|
---|
2034 | &:not([disabled]) {
|
---|
2035 | &.md-raised,
|
---|
2036 | &.md-fab {
|
---|
2037 | &.md-focused {
|
---|
2038 | @include md-shadow-bottom-z-1();
|
---|
2039 | }
|
---|
2040 | &:active {
|
---|
2041 | @include md-shadow-bottom-z-2();
|
---|
2042 | }
|
---|
2043 | }
|
---|
2044 | }
|
---|
2045 |
|
---|
2046 | .md-ripple-container {
|
---|
2047 | border-radius: inherit;
|
---|
2048 | background-clip: padding-box;
|
---|
2049 | overflow: hidden;
|
---|
2050 |
|
---|
2051 | // Workaround for rounded corner overflow bug
|
---|
2052 | // Force Safari and Chrome to use a compositing layer
|
---|
2053 | -webkit-transform:translateZ(0);
|
---|
2054 | }
|
---|
2055 | }
|
---|
2056 |
|
---|
2057 | // Using `display:block;` is required for correct vertical alignment
|
---|
2058 | // because '.md-button' uses `display:inline-block;`.
|
---|
2059 | .md-button.md-icon-button,
|
---|
2060 | button.md-button.md-fab {
|
---|
2061 | md-icon {
|
---|
2062 | display: block;
|
---|
2063 | }
|
---|
2064 | }
|
---|
2065 |
|
---|
2066 | .md-toast-open-top {
|
---|
2067 | .md-button.md-fab-top-left,
|
---|
2068 | .md-button.md-fab-top-right {
|
---|
2069 | transition: $swift-ease-out;
|
---|
2070 | transform: translate3d(0, $button-fab-toast-offset, 0);
|
---|
2071 | &:not([disabled]) {
|
---|
2072 | &.md-focused,
|
---|
2073 | &:hover {
|
---|
2074 | transform: translate3d(0, $button-fab-toast-offset - 1, 0);
|
---|
2075 | }
|
---|
2076 | }
|
---|
2077 | }
|
---|
2078 | }
|
---|
2079 |
|
---|
2080 | .md-toast-open-bottom {
|
---|
2081 | .md-button.md-fab-bottom-left,
|
---|
2082 | .md-button.md-fab-bottom-right {
|
---|
2083 | transition: $swift-ease-out;
|
---|
2084 | transform: translate3d(0, -$button-fab-toast-offset, 0);
|
---|
2085 | &:not([disabled]) {
|
---|
2086 | &.md-focused,
|
---|
2087 | &:hover {
|
---|
2088 | transform: translate3d(0, -$button-fab-toast-offset - 1, 0);
|
---|
2089 | }
|
---|
2090 | }
|
---|
2091 | }
|
---|
2092 | }
|
---|
2093 |
|
---|
2094 | .md-button-group {
|
---|
2095 | display: flex;
|
---|
2096 | flex: 1;
|
---|
2097 | width: 100%;
|
---|
2098 |
|
---|
2099 | & > .md-button {
|
---|
2100 | flex: 1;
|
---|
2101 |
|
---|
2102 | display: block;
|
---|
2103 |
|
---|
2104 | overflow: hidden;
|
---|
2105 |
|
---|
2106 | width: 0;
|
---|
2107 |
|
---|
2108 | border-width: 1px 0px 1px 1px;
|
---|
2109 | border-radius: 0;
|
---|
2110 |
|
---|
2111 | text-align: center;
|
---|
2112 | text-overflow: ellipsis;
|
---|
2113 | white-space: nowrap;
|
---|
2114 |
|
---|
2115 | &:first-child {
|
---|
2116 | border-radius: 2px 0px 0px 2px;
|
---|
2117 | }
|
---|
2118 | &:last-child {
|
---|
2119 | border-right-width: 1px;
|
---|
2120 | border-radius: 0px 2px 2px 0px;
|
---|
2121 | }
|
---|
2122 | }
|
---|
2123 | }
|
---|
2124 | // IE only
|
---|
2125 | @media screen and (-ms-high-contrast: active) {
|
---|
2126 | .md-button.md-raised,
|
---|
2127 | .md-button.md-fab {
|
---|
2128 | border: 1px solid #fff;
|
---|
2129 | }
|
---|
2130 | }
|
---|
2131 |
|
---|
2132 | $card-padding: 16px !default;
|
---|
2133 | $card-box-shadow: $whiteframe-shadow-1dp !default;
|
---|
2134 |
|
---|
2135 | md-card {
|
---|
2136 | box-sizing: border-box;
|
---|
2137 | display: flex;
|
---|
2138 | flex-direction: column;
|
---|
2139 | margin: $baseline-grid;
|
---|
2140 |
|
---|
2141 | box-shadow: $card-box-shadow;
|
---|
2142 |
|
---|
2143 | md-card-header {
|
---|
2144 | padding: $card-padding;
|
---|
2145 | display: flex;
|
---|
2146 | flex-direction: row;
|
---|
2147 |
|
---|
2148 | &:first-child {
|
---|
2149 | md-card-avatar {
|
---|
2150 | @include rtl-prop(margin-right, margin-left, 12px, auto);
|
---|
2151 | }
|
---|
2152 | }
|
---|
2153 |
|
---|
2154 | &:last-child {
|
---|
2155 | md-card-avatar {
|
---|
2156 | @include rtl-prop(margin-left, margin-right, 12px, auto);
|
---|
2157 | }
|
---|
2158 | }
|
---|
2159 |
|
---|
2160 | md-card-avatar {
|
---|
2161 | width: 40px;
|
---|
2162 | height: 40px;
|
---|
2163 |
|
---|
2164 | .md-user-avatar,
|
---|
2165 | md-icon{
|
---|
2166 | border-radius: 50%;
|
---|
2167 | }
|
---|
2168 |
|
---|
2169 | md-icon {
|
---|
2170 | padding: 8px;
|
---|
2171 | > svg {
|
---|
2172 | // Safari workaround for any SVG with padded parent
|
---|
2173 | height: inherit;
|
---|
2174 | width: inherit;
|
---|
2175 | }
|
---|
2176 | }
|
---|
2177 |
|
---|
2178 | & + md-card-header-text {
|
---|
2179 | max-height: 40px;
|
---|
2180 |
|
---|
2181 | .md-title {
|
---|
2182 | font-size: 14px;
|
---|
2183 | }
|
---|
2184 | }
|
---|
2185 | }
|
---|
2186 |
|
---|
2187 | md-card-header-text {
|
---|
2188 | display: flex;
|
---|
2189 | flex: 1;
|
---|
2190 | flex-direction: column;
|
---|
2191 |
|
---|
2192 | .md-subhead {
|
---|
2193 | font-size: 14px;
|
---|
2194 | }
|
---|
2195 | }
|
---|
2196 | }
|
---|
2197 |
|
---|
2198 | > img,
|
---|
2199 | > md-card-header img,
|
---|
2200 | md-card-title-media img {
|
---|
2201 | box-sizing: border-box;
|
---|
2202 | display: flex;
|
---|
2203 | flex: 0 0 auto;
|
---|
2204 | width: 100%;
|
---|
2205 | height: auto;
|
---|
2206 | }
|
---|
2207 |
|
---|
2208 | md-card-title {
|
---|
2209 | padding: 3 * $card-padding / 2 $card-padding $card-padding;
|
---|
2210 | display: flex;
|
---|
2211 | flex: 1 1 auto;
|
---|
2212 | flex-direction: row;
|
---|
2213 |
|
---|
2214 | & + md-card-content {
|
---|
2215 | padding-top: 0;
|
---|
2216 | }
|
---|
2217 |
|
---|
2218 | md-card-title-text {
|
---|
2219 | flex: 1;
|
---|
2220 | flex-direction: column;
|
---|
2221 | display: flex;
|
---|
2222 |
|
---|
2223 | .md-subhead {
|
---|
2224 | padding-top: 0;
|
---|
2225 | font-size: 14px;
|
---|
2226 | }
|
---|
2227 |
|
---|
2228 | &:only-child {
|
---|
2229 | .md-subhead {
|
---|
2230 | padding-top: 3 * $card-padding / 4;
|
---|
2231 | }
|
---|
2232 | }
|
---|
2233 | }
|
---|
2234 |
|
---|
2235 | md-card-title-media {
|
---|
2236 | margin-top: - $card-padding / 2;
|
---|
2237 |
|
---|
2238 | .md-media-sm {
|
---|
2239 | height: 80px;
|
---|
2240 | width: 80px;
|
---|
2241 | }
|
---|
2242 | .md-media-md {
|
---|
2243 | height: 112px;
|
---|
2244 | width: 112px;
|
---|
2245 | }
|
---|
2246 | .md-media-lg {
|
---|
2247 | height: 152px;
|
---|
2248 | width: 152px;
|
---|
2249 | }
|
---|
2250 | }
|
---|
2251 | }
|
---|
2252 |
|
---|
2253 | md-card-content {
|
---|
2254 | display: block;
|
---|
2255 | padding: $card-padding;
|
---|
2256 |
|
---|
2257 | & > p {
|
---|
2258 | &:first-child {
|
---|
2259 | margin-top: 0;
|
---|
2260 | }
|
---|
2261 |
|
---|
2262 | &:last-child {
|
---|
2263 | margin-bottom: 0;
|
---|
2264 | }
|
---|
2265 | }
|
---|
2266 |
|
---|
2267 | .md-media-xl {
|
---|
2268 | height: 240px;
|
---|
2269 | width: 240px;
|
---|
2270 | }
|
---|
2271 | }
|
---|
2272 |
|
---|
2273 | md-card-actions {
|
---|
2274 | margin: $baseline-grid;
|
---|
2275 |
|
---|
2276 | &.layout-column {
|
---|
2277 | .md-button {
|
---|
2278 | &:not(.md-icon-button) {
|
---|
2279 | margin: $baseline-grid / 4 0;
|
---|
2280 |
|
---|
2281 | &:first-of-type {
|
---|
2282 | margin-top: 0;
|
---|
2283 | }
|
---|
2284 |
|
---|
2285 | &:last-of-type {
|
---|
2286 | margin-bottom: 0;
|
---|
2287 | }
|
---|
2288 | }
|
---|
2289 |
|
---|
2290 | &.md-icon-button {
|
---|
2291 | margin-top: 3 * $baseline-grid / 4;
|
---|
2292 | margin-bottom: 3 * $baseline-grid / 4;
|
---|
2293 | }
|
---|
2294 | }
|
---|
2295 | }
|
---|
2296 |
|
---|
2297 | md-card-icon-actions {
|
---|
2298 | flex: 1;
|
---|
2299 | justify-content: flex-start;
|
---|
2300 | display: flex;
|
---|
2301 | flex-direction: row;
|
---|
2302 | }
|
---|
2303 |
|
---|
2304 | &:not(.layout-column) .md-button {
|
---|
2305 | &:not(.md-icon-button) {
|
---|
2306 | margin: 0 $baseline-grid * .5;
|
---|
2307 |
|
---|
2308 | &:first-of-type {
|
---|
2309 | @include rtl-prop(margin-left, margin-right, 0, auto);
|
---|
2310 | }
|
---|
2311 |
|
---|
2312 | &:last-of-type {
|
---|
2313 | @include rtl-prop(margin-right, margin-left, 0, auto);
|
---|
2314 | }
|
---|
2315 | }
|
---|
2316 |
|
---|
2317 | &.md-icon-button {
|
---|
2318 | margin-left: 3 * $baseline-grid / 4;
|
---|
2319 | margin-right: 3 * $baseline-grid / 4;
|
---|
2320 |
|
---|
2321 | &:first-of-type {
|
---|
2322 | @include rtl-prop(margin-left, margin-right, 3 * $baseline-grid / 2, auto);
|
---|
2323 | }
|
---|
2324 |
|
---|
2325 | &:last-of-type {
|
---|
2326 | @include rtl-prop(margin-right, margin-left, 3 * $baseline-grid / 2, auto);
|
---|
2327 | }
|
---|
2328 | }
|
---|
2329 |
|
---|
2330 | & + md-card-icon-actions {
|
---|
2331 | flex: 1;
|
---|
2332 | justify-content: flex-end;
|
---|
2333 | display: flex;
|
---|
2334 | flex-direction: row;
|
---|
2335 | }
|
---|
2336 | }
|
---|
2337 | }
|
---|
2338 |
|
---|
2339 | md-card-footer {
|
---|
2340 | margin-top: auto;
|
---|
2341 | padding: $card-padding;
|
---|
2342 | }
|
---|
2343 | }
|
---|
2344 |
|
---|
2345 | @media screen and (-ms-high-contrast: active) {
|
---|
2346 | md-card {
|
---|
2347 | border: 1px solid #fff;
|
---|
2348 | }
|
---|
2349 | }
|
---|
2350 |
|
---|
2351 | .md-image-no-fill {
|
---|
2352 | > img {
|
---|
2353 | width: auto;
|
---|
2354 | height: auto;
|
---|
2355 | }
|
---|
2356 | }
|
---|
2357 |
|
---|
2358 |
|
---|
2359 | //$checkbox-width: 18px !default;
|
---|
2360 | //$checkbox-height: $checkbox-width !default;
|
---|
2361 | //$checkbox-border-radius: 2px !default;
|
---|
2362 | //$checkbox-border-width: 2px !default;
|
---|
2363 | //
|
---|
2364 | // ^^ defined in _variables.scss
|
---|
2365 | //
|
---|
2366 | $checkbox-text-margin-top: 10px !default;
|
---|
2367 | $container-checkbox-margin: 3px !default;
|
---|
2368 |
|
---|
2369 | $checkbox-min-height: 48px !default;
|
---|
2370 | $checkbox-min-height-dense: 36px !default;
|
---|
2371 | $checkbox-text-margin: 36px !default;
|
---|
2372 |
|
---|
2373 | $md-inline-alignment: $input-container-vertical-margin + $input-container-padding
|
---|
2374 | + $input-padding-top + $input-padding-bottom + $input-border-width-default
|
---|
2375 | - $checkbox-text-margin-top !default;
|
---|
2376 |
|
---|
2377 | .md-inline-form {
|
---|
2378 | md-checkbox {
|
---|
2379 | margin-top: $md-inline-alignment;
|
---|
2380 | margin-bottom: auto;
|
---|
2381 | }
|
---|
2382 | }
|
---|
2383 |
|
---|
2384 | md-checkbox {
|
---|
2385 | box-sizing: border-box;
|
---|
2386 | display: inline-block;
|
---|
2387 | white-space: nowrap;
|
---|
2388 | cursor: pointer;
|
---|
2389 | outline: none;
|
---|
2390 | user-select: none;
|
---|
2391 | position: relative;
|
---|
2392 | min-width: $checkbox-width;
|
---|
2393 | @include dense(min-height, $checkbox-min-height, $checkbox-min-height-dense);
|
---|
2394 |
|
---|
2395 | &.md-focused:not([disabled]) {
|
---|
2396 | .md-container:before {
|
---|
2397 | left: -8px;
|
---|
2398 | top: -8px;
|
---|
2399 | right: -8px;
|
---|
2400 | bottom: -8px;
|
---|
2401 | }
|
---|
2402 |
|
---|
2403 | &:not(.md-checked) {
|
---|
2404 | .md-container:before {
|
---|
2405 | background-color: rgba(0, 0, 0, 0.12);
|
---|
2406 | }
|
---|
2407 | }
|
---|
2408 | }
|
---|
2409 |
|
---|
2410 | @include checkbox-container;
|
---|
2411 |
|
---|
2412 | .md-container {
|
---|
2413 | // Use auto for compatibility with md-checkbox padding
|
---|
2414 | top: auto;
|
---|
2415 | left: auto;
|
---|
2416 | right: auto;
|
---|
2417 | margin: $container-checkbox-margin;
|
---|
2418 | margin-top: $checkbox-height + $container-checkbox-margin;
|
---|
2419 | }
|
---|
2420 |
|
---|
2421 | .md-label {
|
---|
2422 | box-sizing: border-box;
|
---|
2423 | position: relative;
|
---|
2424 | display: inline-block;
|
---|
2425 | vertical-align: middle;
|
---|
2426 | white-space: normal;
|
---|
2427 | user-select: text;
|
---|
2428 | margin-top: $checkbox-text-margin-top;
|
---|
2429 | margin-bottom: auto;
|
---|
2430 |
|
---|
2431 | @include rtl-prop(margin-left, margin-right, $checkbox-text-margin, 0);
|
---|
2432 |
|
---|
2433 | &:empty {
|
---|
2434 | // clamp to checkbox-container margins
|
---|
2435 | @include rtl(margin-left, $checkbox-height + ($container-checkbox-margin * 2), 0);
|
---|
2436 | @include rtl(margin-right, 0, $checkbox-height + ($container-checkbox-margin * 2));
|
---|
2437 | }
|
---|
2438 |
|
---|
2439 | }
|
---|
2440 | }
|
---|
2441 | md-input-container .md-checkbox-link-label {
|
---|
2442 | box-sizing: border-box;
|
---|
2443 | position: relative;
|
---|
2444 | display: inline-block;
|
---|
2445 | vertical-align: middle;
|
---|
2446 | white-space: normal;
|
---|
2447 | user-select: text;
|
---|
2448 | cursor: pointer;
|
---|
2449 | // The span is actually after the checkbox in the DOM, but we need it to line up, so we move it up
|
---|
2450 | // while not introducing any breaking changes to existing styles.
|
---|
2451 | top: -21px;
|
---|
2452 |
|
---|
2453 | // In this mode, the checkbox's width needs to be factored in as well.
|
---|
2454 | @include rtl(margin-left, $checkbox-text-margin - $checkbox-width, 0);
|
---|
2455 | @include rtl(margin-right, 0, $checkbox-text-margin - $checkbox-width);
|
---|
2456 | }
|
---|
2457 |
|
---|
2458 | $chip-font-size: rem(1.3) !default;
|
---|
2459 | $chip-height: rem(3.2) !default;
|
---|
2460 | $chip-padding: 0 rem(1.2) 0 rem(1.2) !default;
|
---|
2461 | $chip-input-padding: 0 !default;
|
---|
2462 | $chip-remove-padding-right: rem(2.8) !default;
|
---|
2463 | $chip-remove-line-height: rem(2.2) !default;
|
---|
2464 | $chip-margin: rem(0.8) rem(0.8) 0 0 !default;
|
---|
2465 | $chip-wrap-padding: 0 0 rem(0.8) rem(0.3) !default;
|
---|
2466 | $chip-delete-icon-size: rem(1.8) !default;
|
---|
2467 | $contact-chip-padding: 0 rem(2.5) 0 0 !default;
|
---|
2468 | $contact-chip-suggestion-image-height: rem(4.0) !default;
|
---|
2469 | $contact-chip-suggestion-margin: rem(0.8) !default;
|
---|
2470 | $contact-chip-name-width: rem(12) !default;
|
---|
2471 |
|
---|
2472 | .md-contact-chips {
|
---|
2473 | .md-chips {
|
---|
2474 | md-chip {
|
---|
2475 | @include rtl(padding, $contact-chip-padding, rtl-value($contact-chip-padding));
|
---|
2476 | .md-contact-avatar {
|
---|
2477 | @include rtl(float, left, right);
|
---|
2478 | img {
|
---|
2479 | height: $chip-height;
|
---|
2480 | border-radius: $chip-height / 2;
|
---|
2481 | }
|
---|
2482 | }
|
---|
2483 | .md-contact-name {
|
---|
2484 | display: inline-block;
|
---|
2485 | height: $chip-height;
|
---|
2486 | @include rtl-prop(margin-left, margin-right, rem(0.8), auto);
|
---|
2487 | }
|
---|
2488 | }
|
---|
2489 | }
|
---|
2490 | }
|
---|
2491 | .md-contact-suggestion {
|
---|
2492 | height: ($contact-chip-suggestion-margin * 2) + $contact-chip-suggestion-image-height;
|
---|
2493 | img {
|
---|
2494 | height: $contact-chip-suggestion-image-height;
|
---|
2495 | border-radius: $contact-chip-suggestion-image-height / 2;
|
---|
2496 | margin-top: $contact-chip-suggestion-margin;
|
---|
2497 | }
|
---|
2498 | .md-contact-name {
|
---|
2499 | @include rtl-prop(margin-left, margin-right, $contact-chip-suggestion-margin, auto);
|
---|
2500 | width: $contact-chip-name-width;
|
---|
2501 | }
|
---|
2502 | .md-contact-name, .md-contact-email {
|
---|
2503 | display: inline-block;
|
---|
2504 | overflow: hidden;
|
---|
2505 | text-overflow: ellipsis;
|
---|
2506 | }
|
---|
2507 | }
|
---|
2508 | .md-contact-chips-suggestions li {
|
---|
2509 | height: 100%;
|
---|
2510 | }
|
---|
2511 | md-chips {
|
---|
2512 | display: flex;
|
---|
2513 | }
|
---|
2514 | .md-chips {
|
---|
2515 | @include pie-clearfix();
|
---|
2516 |
|
---|
2517 | display: flex;
|
---|
2518 | flex-wrap: wrap;
|
---|
2519 | flex-grow: 1;
|
---|
2520 | font-family: $font-family;
|
---|
2521 | font-size: $chip-font-size;
|
---|
2522 | @include rtl(padding, $chip-wrap-padding, rtl-value($chip-wrap-padding));
|
---|
2523 | vertical-align: middle;
|
---|
2524 |
|
---|
2525 | &.md-readonly .md-chip-input-container {
|
---|
2526 | min-height: $chip-height;
|
---|
2527 | }
|
---|
2528 |
|
---|
2529 | &:not(.md-readonly) {
|
---|
2530 | cursor: text;
|
---|
2531 | }
|
---|
2532 |
|
---|
2533 | &.md-removable {
|
---|
2534 |
|
---|
2535 | md-chip {
|
---|
2536 | @include rtl-prop(padding-right, padding-left, $chip-remove-padding-right, 0);
|
---|
2537 |
|
---|
2538 | .md-chip-content {
|
---|
2539 | @include rtl-prop(padding-right, padding-left, rem(0.4), 0);
|
---|
2540 | }
|
---|
2541 | }
|
---|
2542 |
|
---|
2543 | }
|
---|
2544 |
|
---|
2545 | md-chip {
|
---|
2546 | cursor: default;
|
---|
2547 | border-radius: $chip-height / 2;
|
---|
2548 | display: block;
|
---|
2549 | height: $chip-height;
|
---|
2550 | line-height: $chip-height;
|
---|
2551 | @include rtl(margin, $chip-margin, rtl-value($chip-margin));
|
---|
2552 | padding: $chip-padding;
|
---|
2553 | @include rtl(float, left, right);
|
---|
2554 | box-sizing: border-box;
|
---|
2555 | max-width: 100%;
|
---|
2556 | position: relative;
|
---|
2557 |
|
---|
2558 | .md-chip-content {
|
---|
2559 | display: block;
|
---|
2560 | @include rtl(float, left, right);
|
---|
2561 | white-space: nowrap;
|
---|
2562 | max-width: 100%;
|
---|
2563 | overflow: hidden;
|
---|
2564 | text-overflow: ellipsis;
|
---|
2565 | &:focus {
|
---|
2566 | outline: none;
|
---|
2567 | }
|
---|
2568 | }
|
---|
2569 | &._md-chip-content-edit-is-enabled {
|
---|
2570 | -webkit-user-select: none; /* webkit (safari, chrome) browsers */
|
---|
2571 | -moz-user-select: none; /* mozilla browsers */
|
---|
2572 | -khtml-user-select: none; /* webkit (konqueror) browsers */
|
---|
2573 | -ms-user-select: none; /* IE10+ */
|
---|
2574 | }
|
---|
2575 | .md-chip-remove-container {
|
---|
2576 | position: absolute;
|
---|
2577 | @include rtl-prop(right, left, 0, auto);
|
---|
2578 | line-height: $chip-remove-line-height;
|
---|
2579 | }
|
---|
2580 | .md-chip-remove {
|
---|
2581 | text-align: center;
|
---|
2582 | width: $chip-height;
|
---|
2583 | height: $chip-height;
|
---|
2584 | min-width: 0;
|
---|
2585 | padding: 0;
|
---|
2586 | background: transparent;
|
---|
2587 | border: none;
|
---|
2588 | box-shadow: none;
|
---|
2589 | margin: 0;
|
---|
2590 | position: relative;
|
---|
2591 | md-icon {
|
---|
2592 | height: $chip-delete-icon-size;
|
---|
2593 | width: $chip-delete-icon-size;
|
---|
2594 | min-height: $chip-delete-icon-size;
|
---|
2595 | min-width: $chip-delete-icon-size;
|
---|
2596 | position: absolute;
|
---|
2597 | top: 50%;
|
---|
2598 | left: 50%;
|
---|
2599 | transform: translate3d(-50%, -50%, 0);
|
---|
2600 | }
|
---|
2601 | }
|
---|
2602 | }
|
---|
2603 | .md-chip-input-container {
|
---|
2604 | display: block;
|
---|
2605 | line-height: $chip-height;
|
---|
2606 | @include rtl(margin, $chip-margin, rtl-value($chip-margin));
|
---|
2607 | padding: $chip-input-padding;
|
---|
2608 | flex-grow: 1;
|
---|
2609 | @include rtl(float, left, right);
|
---|
2610 | input {
|
---|
2611 | width: 100%;
|
---|
2612 |
|
---|
2613 | &:not([type]),
|
---|
2614 | &[type="email"],
|
---|
2615 | &[type="number"],
|
---|
2616 | &[type="tel"],
|
---|
2617 | &[type="url"],
|
---|
2618 | &[type="text"] {
|
---|
2619 | border: 0;
|
---|
2620 | height: $chip-height;
|
---|
2621 | line-height: $chip-height;
|
---|
2622 | padding: 0;
|
---|
2623 | &:focus {
|
---|
2624 | outline: none;
|
---|
2625 | }
|
---|
2626 | }
|
---|
2627 | }
|
---|
2628 | md-autocomplete, md-autocomplete-wrap {
|
---|
2629 | background: transparent;
|
---|
2630 | height: $chip-height;
|
---|
2631 | }
|
---|
2632 | md-autocomplete {
|
---|
2633 | md-autocomplete-wrap {
|
---|
2634 | box-shadow: none;
|
---|
2635 | }
|
---|
2636 | input {
|
---|
2637 | position: relative;
|
---|
2638 | }
|
---|
2639 | }
|
---|
2640 | input {
|
---|
2641 | border:0;
|
---|
2642 | height: $chip-height;
|
---|
2643 | line-height: $chip-height;
|
---|
2644 | padding: 0;
|
---|
2645 | &:focus {
|
---|
2646 | outline:none;
|
---|
2647 | }
|
---|
2648 | }
|
---|
2649 | md-autocomplete, md-autocomplete-wrap {
|
---|
2650 | height: $chip-height;
|
---|
2651 | }
|
---|
2652 | md-autocomplete {
|
---|
2653 | box-shadow: none;
|
---|
2654 | input {
|
---|
2655 | position: relative;
|
---|
2656 | }
|
---|
2657 | }
|
---|
2658 | &:not(:first-child) {
|
---|
2659 | @include rtl(margin, $chip-margin, rtl-value($chip-margin));
|
---|
2660 | }
|
---|
2661 | input {
|
---|
2662 | background:transparent;
|
---|
2663 | border-width: 0;
|
---|
2664 | }
|
---|
2665 | }
|
---|
2666 | md-autocomplete {
|
---|
2667 | button {
|
---|
2668 | display: none;
|
---|
2669 | }
|
---|
2670 | }
|
---|
2671 | }
|
---|
2672 | // IE only
|
---|
2673 | @media screen and (-ms-high-contrast: active) {
|
---|
2674 | .md-chip-input-container,
|
---|
2675 | md-chip {
|
---|
2676 | border: 1px solid #fff;
|
---|
2677 | }
|
---|
2678 | .md-chip-input-container md-autocomplete {
|
---|
2679 | border: none;
|
---|
2680 | }
|
---|
2681 | }
|
---|
2682 |
|
---|
2683 |
|
---|
2684 | md-content {
|
---|
2685 |
|
---|
2686 | display: block;
|
---|
2687 | position: relative;
|
---|
2688 | overflow: auto;
|
---|
2689 | -webkit-overflow-scrolling: touch;
|
---|
2690 |
|
---|
2691 | &[md-scroll-y] {
|
---|
2692 | overflow-y: auto;
|
---|
2693 | overflow-x: hidden;
|
---|
2694 | }
|
---|
2695 | &[md-scroll-x] {
|
---|
2696 | overflow-x: auto;
|
---|
2697 | overflow-y: hidden;
|
---|
2698 | }
|
---|
2699 | &[md-scroll-xy] {
|
---|
2700 | }
|
---|
2701 |
|
---|
2702 | @media print {
|
---|
2703 | overflow: visible !important;
|
---|
2704 | }
|
---|
2705 | }
|
---|
2706 |
|
---|
2707 |
|
---|
2708 |
|
---|
2709 | /** Styles for mdCalendar. */
|
---|
2710 | $md-calendar-cell-size: 44px !default;
|
---|
2711 | $md-calendar-header-height: 40px !default;
|
---|
2712 | $md-calendar-cell-emphasis-size: 40px !default;
|
---|
2713 | $md-calendar-side-padding: 16px !default;
|
---|
2714 | $md-calendar-weeks-to-show: 7 !default;
|
---|
2715 |
|
---|
2716 | $md-calendar-month-label-padding: 8px !default;
|
---|
2717 | $md-calendar-month-label-font-size: 14px !default;
|
---|
2718 |
|
---|
2719 | $md-calendar-scroll-cue-shadow-radius: 6px !default;
|
---|
2720 |
|
---|
2721 | $md-calendar-width: (7 * $md-calendar-cell-size) + (2 * $md-calendar-side-padding) !default;
|
---|
2722 | $md-calendar-height:
|
---|
2723 | ($md-calendar-weeks-to-show * $md-calendar-cell-size) + $md-calendar-header-height !default;
|
---|
2724 |
|
---|
2725 | // Styles for date cells, including day-of-the-week header cells.
|
---|
2726 | @mixin md-calendar-cell($height: $md-calendar-cell-size) {
|
---|
2727 | height: $height;
|
---|
2728 | width: $md-calendar-cell-size;
|
---|
2729 | text-align: center;
|
---|
2730 |
|
---|
2731 | // Remove all padding and borders so we can completely
|
---|
2732 | // control the size of the table cells.
|
---|
2733 | padding: 0;
|
---|
2734 | border: none;
|
---|
2735 |
|
---|
2736 | // Prevent issues if somebody is applying box-sizing: border-box; eveywhere.
|
---|
2737 | box-sizing: content-box;
|
---|
2738 |
|
---|
2739 | // The left / right padding is applied to the cells instead of the wrapper
|
---|
2740 | // because we want the header background and the month dividing border to
|
---|
2741 | // extend the entire width of the calendar.
|
---|
2742 | &:first-child {
|
---|
2743 | @include rtl-prop(padding-left, padding-right, $md-calendar-side-padding, 0);
|
---|
2744 | }
|
---|
2745 |
|
---|
2746 | &:last-child {
|
---|
2747 | @include rtl-prop(padding-right, padding-left, $md-calendar-side-padding, 0);
|
---|
2748 | }
|
---|
2749 | }
|
---|
2750 |
|
---|
2751 | // Styles for tables used in mdCalendar (the day-of-the-week header and the table of dates itself).
|
---|
2752 | @mixin md-calendar-table() {
|
---|
2753 | // Fixed table layout makes IE faster.
|
---|
2754 | // https://msdn.microsoft.com/en-us/library/ms533020(VS.85).aspx
|
---|
2755 | table-layout: fixed;
|
---|
2756 | border-spacing: 0;
|
---|
2757 | border-collapse: collapse;
|
---|
2758 | }
|
---|
2759 |
|
---|
2760 | md-calendar {
|
---|
2761 | font-size: 13px;
|
---|
2762 | user-select: none;
|
---|
2763 | }
|
---|
2764 |
|
---|
2765 | // Wrap the scroll with overflow: hidden in order to hide the scrollbar.
|
---|
2766 | // The inner .md-calendar-scroll-container will using a padding-right to push the
|
---|
2767 | // scrollbar into the hidden area (done with javascript).
|
---|
2768 | .md-calendar-scroll-mask {
|
---|
2769 | display: inline-block;
|
---|
2770 | overflow: hidden;
|
---|
2771 | height: $md-calendar-weeks-to-show * $md-calendar-cell-size;
|
---|
2772 |
|
---|
2773 | // The actual scrolling element.
|
---|
2774 | .md-virtual-repeat-scroller {
|
---|
2775 | // These two properties are needed to get touch momentum to work.
|
---|
2776 | // See https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements
|
---|
2777 | overflow-y: scroll;
|
---|
2778 | -webkit-overflow-scrolling: touch;
|
---|
2779 |
|
---|
2780 | &::-webkit-scrollbar {
|
---|
2781 | display: none;
|
---|
2782 | }
|
---|
2783 | }
|
---|
2784 |
|
---|
2785 | // Offsetter is the element that is translateY'ed into view of the user and contains the
|
---|
2786 | // calendar content.
|
---|
2787 | .md-virtual-repeat-offsetter {
|
---|
2788 | width: 100%;
|
---|
2789 | }
|
---|
2790 | }
|
---|
2791 |
|
---|
2792 | // Contains the scrolling element (this is the md-virtual-repeat-container).
|
---|
2793 | .md-calendar-scroll-container {
|
---|
2794 | // Add an inset shadow to help cue users that the calendar is scrollable. Use a negative x
|
---|
2795 | // offset to push the vertical edge shadow off to the right so that it's cut off by the edge
|
---|
2796 | // of the calendar container.
|
---|
2797 | box-shadow: inset -3px 3px $md-calendar-scroll-cue-shadow-radius rgba(black, 0.2);
|
---|
2798 |
|
---|
2799 | display: inline-block;
|
---|
2800 | height: $md-calendar-weeks-to-show * $md-calendar-cell-size;
|
---|
2801 |
|
---|
2802 | // Add the shadow radius to the width so that the shadow os pushed off to the side and cut off.
|
---|
2803 | width: $md-calendar-width + $md-calendar-scroll-cue-shadow-radius;
|
---|
2804 | }
|
---|
2805 |
|
---|
2806 | // A single date cell in the calendar table.
|
---|
2807 | .md-calendar-date {
|
---|
2808 | @include md-calendar-cell();
|
---|
2809 |
|
---|
2810 | &.md-calendar-date-disabled {
|
---|
2811 | cursor: default;
|
---|
2812 | }
|
---|
2813 | }
|
---|
2814 |
|
---|
2815 | // Circle element inside of every date cell used to indicate selection or focus.
|
---|
2816 | .md-calendar-date-selection-indicator {
|
---|
2817 | transition: background-color, color $swift-ease-out-duration $swift-ease-out-timing-function;
|
---|
2818 |
|
---|
2819 | border-radius: 50%;
|
---|
2820 | display: inline-block;
|
---|
2821 |
|
---|
2822 | width: $md-calendar-cell-emphasis-size;
|
---|
2823 | height: $md-calendar-cell-emphasis-size;
|
---|
2824 | line-height: $md-calendar-cell-emphasis-size;
|
---|
2825 |
|
---|
2826 | .md-calendar-date:not(.md-disabled) & {
|
---|
2827 | cursor: pointer;
|
---|
2828 | }
|
---|
2829 | }
|
---|
2830 |
|
---|
2831 | // The label above each month (containing the month name and the year, e.g. "Jun 2014").
|
---|
2832 | .md-calendar-month-label {
|
---|
2833 | height: $md-calendar-cell-size;
|
---|
2834 | font-size: $md-calendar-month-label-font-size;
|
---|
2835 | font-weight: 500; // Roboto Medium
|
---|
2836 | @include rtl(padding, 0 0 0 $md-calendar-side-padding + $md-calendar-month-label-padding, rtl-value( 0 0 0 $md-calendar-side-padding + $md-calendar-month-label-padding));
|
---|
2837 |
|
---|
2838 | &.md-calendar-label-clickable {
|
---|
2839 | cursor: pointer;
|
---|
2840 | }
|
---|
2841 |
|
---|
2842 | md-icon {
|
---|
2843 | @include rtl(transform, rotate(180deg), none);
|
---|
2844 | }
|
---|
2845 |
|
---|
2846 | span {
|
---|
2847 | vertical-align: middle;
|
---|
2848 | }
|
---|
2849 | }
|
---|
2850 |
|
---|
2851 | // Table containing the day-of-the-week header.
|
---|
2852 | .md-calendar-day-header {
|
---|
2853 | @include md-calendar-table();
|
---|
2854 |
|
---|
2855 | th {
|
---|
2856 | @include md-calendar-cell($md-calendar-header-height);
|
---|
2857 | font-weight: normal;
|
---|
2858 | }
|
---|
2859 | }
|
---|
2860 |
|
---|
2861 | // Primary table containing all date cells. Each month is a tbody in this table.
|
---|
2862 | .md-calendar {
|
---|
2863 | @include md-calendar-table();
|
---|
2864 |
|
---|
2865 | // Divider between months.
|
---|
2866 | tr:last-child td {
|
---|
2867 | border-bottom-width: 1px;
|
---|
2868 | border-bottom-style: solid;
|
---|
2869 | }
|
---|
2870 |
|
---|
2871 | // The divider between months doesn't actually change the height of the tbody in which the
|
---|
2872 | // border appear; it changes the height of the following tbody. The causes the first-child to be
|
---|
2873 | // 1px shorter than the other months. We fix this by adding an invisible border-top.
|
---|
2874 | &:first-child {
|
---|
2875 | border-top: 1px solid transparent;
|
---|
2876 | }
|
---|
2877 |
|
---|
2878 | // Explicitly set vertical-align to avoid conflicting with popular CSS resets. When
|
---|
2879 | // vertical-align:baseline is set, month headers are misaligned. Also reset the box-sizing,
|
---|
2880 | // in case the user set it to border-box.
|
---|
2881 | // http://meyerweb.com/eric/tools/css/reset/
|
---|
2882 | tbody, td, tr {
|
---|
2883 | vertical-align: middle;
|
---|
2884 | box-sizing: content-box;
|
---|
2885 | }
|
---|
2886 | }
|
---|
2887 |
|
---|
2888 | /** Styles for mdDatepicker. */
|
---|
2889 | $md-datepicker-button-gap: 12px !default; // Space between the text input and the calendar-icon button.
|
---|
2890 | $md-datepicker-border-bottom-gap: 5px !default; // Space between input and the grey underline.
|
---|
2891 | $md-date-arrow-size: 5px !default; // Size of the triangle on the right side of the input.
|
---|
2892 | $md-datepicker-open-animation-duration: 0.2s !default;
|
---|
2893 | $md-datepicker-triangle-button-width: 36px !default;
|
---|
2894 | $md-datepicker-input-mask-height: 40px !default;
|
---|
2895 | $md-datepicker-button-padding: 8px !default;
|
---|
2896 |
|
---|
2897 |
|
---|
2898 | md-datepicker {
|
---|
2899 | // Don't let linebreaks happen between the open icon-button and the input.
|
---|
2900 | white-space: nowrap;
|
---|
2901 | overflow: hidden;
|
---|
2902 | vertical-align: middle;
|
---|
2903 | }
|
---|
2904 |
|
---|
2905 | .md-inline-form {
|
---|
2906 | md-datepicker {
|
---|
2907 | margin-top: $input-container-vertical-margin - 6px;
|
---|
2908 | }
|
---|
2909 | }
|
---|
2910 |
|
---|
2911 | // The calendar icon button used to open the calendar pane.
|
---|
2912 | .md-datepicker-button {
|
---|
2913 | display: inline-block;
|
---|
2914 | box-sizing: border-box;
|
---|
2915 | background: none;
|
---|
2916 | vertical-align: middle;
|
---|
2917 | position: relative;
|
---|
2918 |
|
---|
2919 | // Captures any of the click events. This is necessary, because the button has a SVG
|
---|
2920 | // icon which doesn't propagate the focus event, causing inconsistent behaviour.
|
---|
2921 | &:before {
|
---|
2922 | top: 0;
|
---|
2923 | left: 0;
|
---|
2924 | bottom: 0;
|
---|
2925 | right: 0;
|
---|
2926 | position: absolute;
|
---|
2927 | content: '';
|
---|
2928 | speak: none;
|
---|
2929 | }
|
---|
2930 | }
|
---|
2931 |
|
---|
2932 | // The input into which the user can type the date.
|
---|
2933 | .md-datepicker-input {
|
---|
2934 | @include md-flat-input();
|
---|
2935 | min-width: 120px;
|
---|
2936 | max-width: $md-calendar-width - $md-datepicker-button-gap;
|
---|
2937 | padding: 0 0 $md-datepicker-border-bottom-gap;
|
---|
2938 | }
|
---|
2939 |
|
---|
2940 | // If the datepicker is inside of a md-input-container
|
---|
2941 | ._md-datepicker-floating-label {
|
---|
2942 | > md-datepicker {
|
---|
2943 | // Prevents the ripple on the triangle from being clipped.
|
---|
2944 | overflow: visible;
|
---|
2945 |
|
---|
2946 | .md-datepicker-input-container {
|
---|
2947 | border: none;
|
---|
2948 | }
|
---|
2949 |
|
---|
2950 | .md-datepicker-button {
|
---|
2951 | // Prevents the button from wrapping around, as well as it pushing
|
---|
2952 | // down the error messages more than they should be.
|
---|
2953 | @include rtl(float, left, right);
|
---|
2954 | margin-top: $button-left-right-padding * -2;
|
---|
2955 | top: $button-left-right-padding * 2 - $md-datepicker-border-bottom-gap / 2;
|
---|
2956 | }
|
---|
2957 | }
|
---|
2958 |
|
---|
2959 | .md-input {
|
---|
2960 | float: none;
|
---|
2961 | }
|
---|
2962 |
|
---|
2963 | &._md-datepicker-has-calendar-icon {
|
---|
2964 | > label:not(.md-no-float):not(.md-container-ignore) {
|
---|
2965 | $width-offset: $md-datepicker-triangle-button-width * 2 + $md-datepicker-button-gap;
|
---|
2966 | $offset: $md-datepicker-triangle-button-width / 2;
|
---|
2967 | @include rtl(right, $offset, auto);
|
---|
2968 | @include rtl(left, auto, $offset);
|
---|
2969 | width: calc(100% - #{$width-offset});
|
---|
2970 | }
|
---|
2971 |
|
---|
2972 | .md-input-message-animation {
|
---|
2973 | $margin: $md-datepicker-triangle-button-width + $md-datepicker-button-padding * 2 + $md-datepicker-button-gap;
|
---|
2974 | @include rtl-prop(margin-left, margin-right, $margin, auto);
|
---|
2975 | }
|
---|
2976 | }
|
---|
2977 | }
|
---|
2978 |
|
---|
2979 | ._md-datepicker-has-triangle-icon {
|
---|
2980 | // Leave room for the down-triangle button to "overflow" it's parent without modifying scrollLeft.
|
---|
2981 | // This prevents the element from shifting right when opening via the triangle button.
|
---|
2982 | @include rtl-prop(padding-right, padding-left, $md-datepicker-triangle-button-width / 2, 0);
|
---|
2983 | @include rtl-prop(margin-right, margin-left, -$md-datepicker-triangle-button-width / 2, auto);
|
---|
2984 | }
|
---|
2985 |
|
---|
2986 | // Container for the datepicker input.
|
---|
2987 | .md-datepicker-input-container {
|
---|
2988 | // Position relative in order to absolutely position the down-triangle button within.
|
---|
2989 | position: relative;
|
---|
2990 |
|
---|
2991 | border-bottom-width: 1px;
|
---|
2992 | border-bottom-style: solid;
|
---|
2993 |
|
---|
2994 | display: inline-block;
|
---|
2995 | width: auto;
|
---|
2996 |
|
---|
2997 | .md-icon-button + & {
|
---|
2998 | @include rtl-prop(margin-left, margin-right, $md-datepicker-button-gap, auto);
|
---|
2999 | }
|
---|
3000 |
|
---|
3001 | &.md-datepicker-focused {
|
---|
3002 | border-bottom-width: 2px;
|
---|
3003 | }
|
---|
3004 | }
|
---|
3005 |
|
---|
3006 | .md-datepicker-is-showing .md-scroll-mask {
|
---|
3007 | z-index: $z-index-calendar-pane - 1;
|
---|
3008 | }
|
---|
3009 |
|
---|
3010 | // Floating pane that contains the calendar at the bottom of the input.
|
---|
3011 | .md-datepicker-calendar-pane {
|
---|
3012 | // On most browsers the `scale(0)` below prevents this element from
|
---|
3013 | // overflowing it's parent, however IE and Edge seem to disregard it.
|
---|
3014 | // The `left: -100%` pulls the element back in order to ensure that
|
---|
3015 | // it doesn't cause an overflow.
|
---|
3016 | position: absolute;
|
---|
3017 | top: 0;
|
---|
3018 | left: -100%;
|
---|
3019 | z-index: $z-index-calendar-pane;
|
---|
3020 | border-width: 1px;
|
---|
3021 | border-style: solid;
|
---|
3022 | background: transparent;
|
---|
3023 |
|
---|
3024 | transform: scale(0);
|
---|
3025 | transform-origin: 0 0;
|
---|
3026 | transition: transform $md-datepicker-open-animation-duration $swift-ease-out-timing-function;
|
---|
3027 |
|
---|
3028 | &.md-pane-open {
|
---|
3029 | transform: scale(1);
|
---|
3030 | }
|
---|
3031 | }
|
---|
3032 |
|
---|
3033 | // Portion of the floating panel that sits, invisibly, on top of the input.
|
---|
3034 | .md-datepicker-input-mask {
|
---|
3035 | height: $md-datepicker-input-mask-height;
|
---|
3036 | width: $md-calendar-width;
|
---|
3037 | position: relative;
|
---|
3038 | overflow: hidden;
|
---|
3039 |
|
---|
3040 | background: transparent;
|
---|
3041 | pointer-events: none;
|
---|
3042 | cursor: text;
|
---|
3043 | }
|
---|
3044 |
|
---|
3045 | // The calendar portion of the floating pane (vs. the input mask).
|
---|
3046 | .md-datepicker-calendar {
|
---|
3047 | opacity: 0;
|
---|
3048 | // Use a modified timing function (from swift-ease-out) so that the opacity part of the
|
---|
3049 | // animation doesn't come in as quickly so that the floating pane doesn't ever seem to
|
---|
3050 | // cover up the trigger input.
|
---|
3051 | transition: opacity $md-datepicker-open-animation-duration cubic-bezier(0.5, 0, 0.25, 1);
|
---|
3052 |
|
---|
3053 | .md-pane-open & {
|
---|
3054 | opacity: 1;
|
---|
3055 | }
|
---|
3056 |
|
---|
3057 | md-calendar:focus {
|
---|
3058 | outline: none;
|
---|
3059 | }
|
---|
3060 | }
|
---|
3061 |
|
---|
3062 | // Down triangle/arrow indicating that the datepicker can be opened.
|
---|
3063 | // We can do this entirely with CSS without needing to load an icon.
|
---|
3064 | // See https://css-tricks.com/snippets/css/css-triangle/
|
---|
3065 | .md-datepicker-expand-triangle {
|
---|
3066 | // Center the triangle inside of the button so that the
|
---|
3067 | // ink ripple origin looks correct.
|
---|
3068 | position: absolute;
|
---|
3069 | top: 50%;
|
---|
3070 | left: 50%;
|
---|
3071 | transform: translate(-50%, -50%);
|
---|
3072 |
|
---|
3073 | width: 0;
|
---|
3074 | height: 0;
|
---|
3075 | border-left: $md-date-arrow-size solid transparent;
|
---|
3076 | border-right: $md-date-arrow-size solid transparent;
|
---|
3077 | border-top: $md-date-arrow-size solid;
|
---|
3078 | }
|
---|
3079 |
|
---|
3080 | // Button containing the down "disclosure" triangle/arrow.
|
---|
3081 | .md-datepicker-triangle-button {
|
---|
3082 | position: absolute;
|
---|
3083 | @include rtl-prop(right, left, 0, auto);
|
---|
3084 | bottom: -$md-date-arrow-size / 2;
|
---|
3085 |
|
---|
3086 | // TODO(jelbourn): This position isn't great on all platforms.
|
---|
3087 | @include rtl(transform, translateX(45%), translateX(-45%));
|
---|
3088 | }
|
---|
3089 |
|
---|
3090 | // Need crazy specificity to override .md-button.md-icon-button.
|
---|
3091 | // Only apply this high specificity to the property we need to override.
|
---|
3092 | .md-datepicker-triangle-button.md-button.md-icon-button {
|
---|
3093 | height: $md-datepicker-triangle-button-width;
|
---|
3094 | width: $md-datepicker-triangle-button-width;
|
---|
3095 | position: absolute;
|
---|
3096 | padding: $md-datepicker-button-padding;
|
---|
3097 | }
|
---|
3098 |
|
---|
3099 | // Disabled state for all elements of the picker.
|
---|
3100 | md-datepicker[disabled] {
|
---|
3101 | .md-datepicker-input-container {
|
---|
3102 | border-bottom-color: transparent;
|
---|
3103 | }
|
---|
3104 |
|
---|
3105 | .md-datepicker-triangle-button {
|
---|
3106 | display: none;
|
---|
3107 | }
|
---|
3108 | }
|
---|
3109 |
|
---|
3110 | // Open state for all of the elements of the picker.
|
---|
3111 | .md-datepicker-open {
|
---|
3112 | overflow: hidden;
|
---|
3113 |
|
---|
3114 | .md-datepicker-input-container,
|
---|
3115 | input.md-input {
|
---|
3116 | border-bottom-color: transparent;
|
---|
3117 | }
|
---|
3118 |
|
---|
3119 | .md-datepicker-triangle-button,
|
---|
3120 | &.md-input-has-value > label,
|
---|
3121 | &.md-input-has-placeholder > label {
|
---|
3122 | display: none;
|
---|
3123 | }
|
---|
3124 | }
|
---|
3125 |
|
---|
3126 | // When the position of the floating calendar pane is adjusted to remain inside
|
---|
3127 | // of the viewport, hide the inputput mask, as the text input will no longer be
|
---|
3128 | // directly underneath it.
|
---|
3129 | .md-datepicker-pos-adjusted .md-datepicker-input-mask {
|
---|
3130 | display: none;
|
---|
3131 | }
|
---|
3132 |
|
---|
3133 | // Animate the calendar inside of the floating calendar pane such that it appears to "scroll" into
|
---|
3134 | // view while the pane is opening. This is done as a cue to users that the calendar is scrollable.
|
---|
3135 | .md-datepicker-calendar-pane {
|
---|
3136 | .md-calendar {
|
---|
3137 | transform: translateY(-85px);
|
---|
3138 | transition: transform 0.65s $swift-ease-out-timing-function;
|
---|
3139 | transition-delay: 0.125s;
|
---|
3140 | }
|
---|
3141 |
|
---|
3142 | &.md-pane-open .md-calendar {
|
---|
3143 | transform: translateY(0);
|
---|
3144 | }
|
---|
3145 | }
|
---|
3146 |
|
---|
3147 | $dialog-padding: $baseline-grid * 3 !default;
|
---|
3148 |
|
---|
3149 | .md-dialog-is-showing {
|
---|
3150 | max-height: 100%;
|
---|
3151 | }
|
---|
3152 |
|
---|
3153 | .md-dialog-container {
|
---|
3154 | display: flex;
|
---|
3155 | justify-content: center;
|
---|
3156 | align-items: center;
|
---|
3157 | position: absolute;
|
---|
3158 | top: 0;
|
---|
3159 | left: 0;
|
---|
3160 | width: 100%;
|
---|
3161 | height: 100%;
|
---|
3162 | z-index: $z-index-dialog;
|
---|
3163 | overflow: hidden;
|
---|
3164 | }
|
---|
3165 |
|
---|
3166 | md-dialog {
|
---|
3167 |
|
---|
3168 | &.md-transition-in {
|
---|
3169 | opacity: 1;
|
---|
3170 | transition: $swift-ease-out;
|
---|
3171 | transform: translate(0,0) scale(1.0);
|
---|
3172 | }
|
---|
3173 | &.md-transition-out {
|
---|
3174 | opacity: 0;
|
---|
3175 | transition: $swift-ease-out;
|
---|
3176 | transform: translate(0,100%) scale(0.2);
|
---|
3177 | }
|
---|
3178 |
|
---|
3179 | opacity: 0;
|
---|
3180 | min-width: 240px;
|
---|
3181 | max-width: 80%;
|
---|
3182 | max-height: 80%;
|
---|
3183 | position: relative;
|
---|
3184 | overflow: auto; // stop content from leaking out of dialog parent and fix IE
|
---|
3185 |
|
---|
3186 | box-shadow: $whiteframe-shadow-13dp;
|
---|
3187 |
|
---|
3188 | display: flex;
|
---|
3189 | flex-direction: column;
|
---|
3190 |
|
---|
3191 | &> form {
|
---|
3192 | display: flex;
|
---|
3193 | flex-direction: column;
|
---|
3194 | overflow: auto;
|
---|
3195 | }
|
---|
3196 |
|
---|
3197 | .md-dialog-content {
|
---|
3198 | padding: $dialog-padding;
|
---|
3199 | }
|
---|
3200 |
|
---|
3201 | md-dialog-content {
|
---|
3202 | order: 1;
|
---|
3203 | flex-direction: column;
|
---|
3204 | overflow: auto;
|
---|
3205 | -webkit-overflow-scrolling: touch;
|
---|
3206 |
|
---|
3207 | &:not([layout=row]) > *:first-child:not(.md-subheader) {
|
---|
3208 | margin-top: 0;
|
---|
3209 | }
|
---|
3210 |
|
---|
3211 | &:focus {
|
---|
3212 | outline: none;
|
---|
3213 | }
|
---|
3214 |
|
---|
3215 | .md-subheader {
|
---|
3216 | margin: 0;
|
---|
3217 | }
|
---|
3218 |
|
---|
3219 | .md-dialog-content-body {
|
---|
3220 | width:100%;
|
---|
3221 | }
|
---|
3222 |
|
---|
3223 | .md-prompt-input-container {
|
---|
3224 | width: 100%;
|
---|
3225 | box-sizing: border-box;
|
---|
3226 | }
|
---|
3227 | }
|
---|
3228 |
|
---|
3229 | md-dialog-actions {
|
---|
3230 | display: flex;
|
---|
3231 | order: 2;
|
---|
3232 | box-sizing: border-box;
|
---|
3233 | align-items: center;
|
---|
3234 | justify-content: flex-end;
|
---|
3235 | margin-bottom: 0;
|
---|
3236 | @include rtl(padding-right, $baseline-grid, $baseline-grid * 2);
|
---|
3237 | @include rtl(padding-left, $baseline-grid * 2, $baseline-grid);
|
---|
3238 | min-height: $baseline-grid * 6.5;
|
---|
3239 | overflow: hidden;
|
---|
3240 |
|
---|
3241 | .md-button {
|
---|
3242 | margin-bottom: $baseline-grid;
|
---|
3243 | @include rtl(margin-left, $baseline-grid, 0);
|
---|
3244 | @include rtl(margin-right, 0, $baseline-grid);
|
---|
3245 | margin-top: $baseline-grid;
|
---|
3246 | }
|
---|
3247 | }
|
---|
3248 | &.md-content-overflow {
|
---|
3249 | md-dialog-actions {
|
---|
3250 | border-top-width: 1px;
|
---|
3251 | border-top-style: solid;
|
---|
3252 | }
|
---|
3253 | }
|
---|
3254 | }
|
---|
3255 |
|
---|
3256 | @media screen and (-ms-high-contrast: active) {
|
---|
3257 | md-dialog {
|
---|
3258 | border: 1px solid #fff;
|
---|
3259 | }
|
---|
3260 | }
|
---|
3261 |
|
---|
3262 | @media (max-width: $layout-breakpoint-sm - 1) {
|
---|
3263 | md-dialog.md-dialog-fullscreen {
|
---|
3264 | min-height: 100%;
|
---|
3265 | min-width: 100%;
|
---|
3266 | border-radius: 0;
|
---|
3267 | }
|
---|
3268 | }
|
---|
3269 |
|
---|
3270 | md-divider {
|
---|
3271 | display: block;
|
---|
3272 | border-top-width: 1px;
|
---|
3273 | border-top-style: solid;
|
---|
3274 | margin: 0;
|
---|
3275 |
|
---|
3276 | &[md-inset] {
|
---|
3277 | @include rtl-prop(margin-left, margin-right, $baseline-grid * 10, auto);
|
---|
3278 | }
|
---|
3279 | }
|
---|
3280 |
|
---|
3281 | @include when-layout-row(md-divider) {
|
---|
3282 | border-top-width: 0;
|
---|
3283 | border-right-width: 1px;
|
---|
3284 | border-right-style: solid;
|
---|
3285 | }
|
---|
3286 |
|
---|
3287 | md-fab-speed-dial {
|
---|
3288 | position: relative;
|
---|
3289 | display: flex;
|
---|
3290 | align-items: center;
|
---|
3291 |
|
---|
3292 | // Include the top/left/bottom/right fab positions and set the z-index for absolute positioning
|
---|
3293 | @include fab-all-positions();
|
---|
3294 | z-index: $z-index-fab;
|
---|
3295 |
|
---|
3296 | // Allow users to enable/disable hovering over the entire speed dial (i.e. the empty space where
|
---|
3297 | // items will eventually appear)
|
---|
3298 | &:not(.md-hover-full) {
|
---|
3299 | // Turn off pointer events when closed
|
---|
3300 | pointer-events: none;
|
---|
3301 |
|
---|
3302 | md-fab-trigger, .md-fab-action-item {
|
---|
3303 | // Always make the trigger and action items always have pointer events (the tooltip looks
|
---|
3304 | // for the first parent with pointer-events, so we must set this for tooltips to work)
|
---|
3305 | pointer-events: auto;
|
---|
3306 | }
|
---|
3307 |
|
---|
3308 | &.md-is-open {
|
---|
3309 | // Turn on pointer events when open
|
---|
3310 | pointer-events: auto;
|
---|
3311 | }
|
---|
3312 | }
|
---|
3313 |
|
---|
3314 | ._md-css-variables {
|
---|
3315 | z-index: $z-index-fab;
|
---|
3316 | }
|
---|
3317 |
|
---|
3318 | &.md-is-open {
|
---|
3319 | .md-fab-action-item {
|
---|
3320 | align-items: center;
|
---|
3321 | }
|
---|
3322 | }
|
---|
3323 |
|
---|
3324 | md-fab-actions {
|
---|
3325 | display: flex;
|
---|
3326 |
|
---|
3327 | // Set the height so that the z-index in the JS animation works
|
---|
3328 | height: auto;
|
---|
3329 |
|
---|
3330 | .md-fab-action-item {
|
---|
3331 | transition: $swift-ease-in;
|
---|
3332 | }
|
---|
3333 | }
|
---|
3334 |
|
---|
3335 | &.md-down {
|
---|
3336 | flex-direction: column;
|
---|
3337 |
|
---|
3338 | md-fab-trigger {
|
---|
3339 | order: 1;
|
---|
3340 | }
|
---|
3341 |
|
---|
3342 | md-fab-actions {
|
---|
3343 | flex-direction: column;
|
---|
3344 | order: 2;
|
---|
3345 | }
|
---|
3346 | }
|
---|
3347 |
|
---|
3348 | &.md-up {
|
---|
3349 | flex-direction: column;
|
---|
3350 |
|
---|
3351 | md-fab-trigger {
|
---|
3352 | order: 2;
|
---|
3353 | }
|
---|
3354 |
|
---|
3355 | md-fab-actions {
|
---|
3356 | flex-direction: column-reverse;
|
---|
3357 | order: 1;
|
---|
3358 | }
|
---|
3359 | }
|
---|
3360 |
|
---|
3361 | &.md-left {
|
---|
3362 | flex-direction: row;
|
---|
3363 |
|
---|
3364 | md-fab-trigger {
|
---|
3365 | order: 2;
|
---|
3366 | }
|
---|
3367 |
|
---|
3368 | md-fab-actions {
|
---|
3369 | flex-direction: row-reverse;
|
---|
3370 | order: 1;
|
---|
3371 |
|
---|
3372 | .md-fab-action-item {
|
---|
3373 | transition: $swift-ease-in;
|
---|
3374 | }
|
---|
3375 | }
|
---|
3376 | }
|
---|
3377 |
|
---|
3378 | &.md-right {
|
---|
3379 | flex-direction: row;
|
---|
3380 |
|
---|
3381 | md-fab-trigger {
|
---|
3382 | order: 1;
|
---|
3383 | }
|
---|
3384 |
|
---|
3385 | md-fab-actions {
|
---|
3386 | flex-direction: row;
|
---|
3387 | order: 2;
|
---|
3388 |
|
---|
3389 | .md-fab-action-item {
|
---|
3390 | transition: $swift-ease-in;
|
---|
3391 | }
|
---|
3392 | }
|
---|
3393 | }
|
---|
3394 |
|
---|
3395 | /*
|
---|
3396 | * Hide some graphics glitches if switching animation types
|
---|
3397 | */
|
---|
3398 | &.md-fling-remove, &.md-scale-remove {
|
---|
3399 | .md-fab-action-item > * {
|
---|
3400 | visibility: hidden;
|
---|
3401 | }
|
---|
3402 | }
|
---|
3403 |
|
---|
3404 | /*
|
---|
3405 | * Handle the animations
|
---|
3406 | */
|
---|
3407 | &.md-fling {
|
---|
3408 | .md-fab-action-item {
|
---|
3409 | opacity: 1;
|
---|
3410 | }
|
---|
3411 | }
|
---|
3412 |
|
---|
3413 | // For the initial animation, set the duration to be instant
|
---|
3414 | &.md-fling.md-animations-waiting {
|
---|
3415 | .md-fab-action-item {
|
---|
3416 | opacity: 0;
|
---|
3417 | transition-duration: 0s;
|
---|
3418 | }
|
---|
3419 | }
|
---|
3420 |
|
---|
3421 | &.md-scale {
|
---|
3422 | .md-fab-action-item {
|
---|
3423 | transform: scale(0);
|
---|
3424 | transition: $swift-ease-in;
|
---|
3425 |
|
---|
3426 | // Make the scale animation a bit faster since we are delaying each item
|
---|
3427 | transition-duration: $swift-ease-in-duration / 2.1;
|
---|
3428 | }
|
---|
3429 | }
|
---|
3430 | }
|
---|
3431 |
|
---|
3432 | $icon-button-margin: rem(0.600) !default;
|
---|
3433 |
|
---|
3434 | md-fab-toolbar {
|
---|
3435 | $icon-delay: 200ms;
|
---|
3436 |
|
---|
3437 | // Include the top/left/bottom/right fab positions
|
---|
3438 | @include fab-all-positions();
|
---|
3439 |
|
---|
3440 | display: block;
|
---|
3441 |
|
---|
3442 | /*
|
---|
3443 | * Closed styling
|
---|
3444 | */
|
---|
3445 | .md-fab-toolbar-wrapper {
|
---|
3446 | display: block;
|
---|
3447 | position: relative;
|
---|
3448 | overflow: hidden;
|
---|
3449 |
|
---|
3450 | // Account for the size of the trigger plus its margin/shadow
|
---|
3451 | height: $button-fab-width + ($icon-button-margin * 2);
|
---|
3452 | }
|
---|
3453 |
|
---|
3454 | md-fab-trigger {
|
---|
3455 | position: absolute;
|
---|
3456 | z-index: $z-index-fab;
|
---|
3457 |
|
---|
3458 | button {
|
---|
3459 | overflow: visible !important;
|
---|
3460 | }
|
---|
3461 |
|
---|
3462 | .md-fab-toolbar-background {
|
---|
3463 | display: block;
|
---|
3464 | position: absolute;
|
---|
3465 | z-index: $z-index-fab + 1;
|
---|
3466 |
|
---|
3467 | opacity: 1;
|
---|
3468 | transition: $swift-ease-in;
|
---|
3469 | }
|
---|
3470 |
|
---|
3471 | md-icon {
|
---|
3472 | position: relative;
|
---|
3473 | z-index: $z-index-fab + 2;
|
---|
3474 |
|
---|
3475 | opacity: 1;
|
---|
3476 |
|
---|
3477 | // Hide the icon very quickly
|
---|
3478 | transition: all $icon-delay ease-in;
|
---|
3479 | }
|
---|
3480 | }
|
---|
3481 |
|
---|
3482 | &.md-left {
|
---|
3483 | md-fab-trigger {
|
---|
3484 | @include rtl-prop(right, left, 0, auto);
|
---|
3485 | }
|
---|
3486 |
|
---|
3487 | .md-toolbar-tools {
|
---|
3488 | flex-direction: row-reverse;
|
---|
3489 |
|
---|
3490 | > .md-button:first-child {
|
---|
3491 | @include rtl-prop(margin-right, margin-left, 0.6rem, auto)
|
---|
3492 | }
|
---|
3493 |
|
---|
3494 | > .md-button:first-child {
|
---|
3495 | @include rtl-prop(margin-left, margin-right, -0.8rem, auto);
|
---|
3496 | }
|
---|
3497 |
|
---|
3498 |
|
---|
3499 | > .md-button:last-child {
|
---|
3500 | @include rtl-prop(margin-right, margin-left, 8px, auto);
|
---|
3501 | }
|
---|
3502 |
|
---|
3503 | }
|
---|
3504 | }
|
---|
3505 |
|
---|
3506 | &.md-right {
|
---|
3507 | md-fab-trigger {
|
---|
3508 | @include rtl-prop(left, right, 0, auto);
|
---|
3509 | }
|
---|
3510 |
|
---|
3511 | .md-toolbar-tools {
|
---|
3512 | flex-direction: row;
|
---|
3513 | }
|
---|
3514 | }
|
---|
3515 |
|
---|
3516 | md-toolbar {
|
---|
3517 | background-color: transparent !important;
|
---|
3518 | pointer-events: none;
|
---|
3519 | z-index: $z-index-fab + 3;
|
---|
3520 |
|
---|
3521 | .md-toolbar-tools {
|
---|
3522 | // Fix some spacing issues with the icons and the trigger
|
---|
3523 | padding: 0 20px;
|
---|
3524 | margin-top: 3px;
|
---|
3525 | }
|
---|
3526 |
|
---|
3527 | .md-fab-action-item {
|
---|
3528 | opacity: 0;
|
---|
3529 | transform: scale(0);
|
---|
3530 | transition: $swift-ease-in;
|
---|
3531 |
|
---|
3532 | // Cut the action item's animation time in half since we delay it in the JS
|
---|
3533 | transition-duration: $swift-ease-in-duration / 2;
|
---|
3534 | }
|
---|
3535 | }
|
---|
3536 |
|
---|
3537 | /*
|
---|
3538 | * Open styling
|
---|
3539 | */
|
---|
3540 | &.md-is-open {
|
---|
3541 | md-fab-trigger > button {
|
---|
3542 | box-shadow: none;
|
---|
3543 |
|
---|
3544 | md-icon {
|
---|
3545 | opacity: 0;
|
---|
3546 | }
|
---|
3547 | }
|
---|
3548 |
|
---|
3549 | .md-fab-action-item {
|
---|
3550 | opacity: 1;
|
---|
3551 | transform: scale(1);
|
---|
3552 | }
|
---|
3553 | }
|
---|
3554 | }
|
---|
3555 |
|
---|
3556 | md-grid-list {
|
---|
3557 | box-sizing: border-box;
|
---|
3558 | display: block;
|
---|
3559 | position: relative;
|
---|
3560 |
|
---|
3561 | md-grid-tile,
|
---|
3562 | md-grid-tile > figure,
|
---|
3563 | md-grid-tile-header,
|
---|
3564 | md-grid-tile-footer {
|
---|
3565 | box-sizing: border-box;
|
---|
3566 | }
|
---|
3567 |
|
---|
3568 | md-grid-tile {
|
---|
3569 | display: block;
|
---|
3570 | position: absolute;
|
---|
3571 |
|
---|
3572 | figure {
|
---|
3573 | display: flex;
|
---|
3574 | align-items: center;
|
---|
3575 | justify-content: center;
|
---|
3576 | height: 100%;
|
---|
3577 | position: absolute;
|
---|
3578 | top: 0;
|
---|
3579 | right: 0;
|
---|
3580 | bottom: 0;
|
---|
3581 | left: 0;
|
---|
3582 | padding: 0;
|
---|
3583 | margin: 0;
|
---|
3584 | }
|
---|
3585 |
|
---|
3586 | // Headers & footers
|
---|
3587 | md-grid-tile-header,
|
---|
3588 | md-grid-tile-footer {
|
---|
3589 | display: flex;
|
---|
3590 | flex-direction: row;
|
---|
3591 | align-items: center;
|
---|
3592 | height: 48px;
|
---|
3593 | color: #fff;
|
---|
3594 | background: rgba(0, 0, 0, 0.18);
|
---|
3595 | overflow: hidden;
|
---|
3596 |
|
---|
3597 | // Positioning
|
---|
3598 | position: absolute;
|
---|
3599 | left: 0;
|
---|
3600 | right: 0;
|
---|
3601 |
|
---|
3602 | h3,
|
---|
3603 | h4 {
|
---|
3604 | font-weight: 400;
|
---|
3605 | margin: 0 0 0 16px;
|
---|
3606 | }
|
---|
3607 |
|
---|
3608 | h3 {
|
---|
3609 | font-size: 14px;
|
---|
3610 | }
|
---|
3611 |
|
---|
3612 | h4 {
|
---|
3613 | font-size: 12px;
|
---|
3614 | }
|
---|
3615 | }
|
---|
3616 |
|
---|
3617 | md-grid-tile-header {
|
---|
3618 | top: 0;
|
---|
3619 | }
|
---|
3620 |
|
---|
3621 | md-grid-tile-footer {
|
---|
3622 | bottom: 0;
|
---|
3623 | }
|
---|
3624 | }
|
---|
3625 |
|
---|
3626 | }
|
---|
3627 |
|
---|
3628 | @media screen and (-ms-high-contrast: active) {
|
---|
3629 | md-grid-tile {
|
---|
3630 | border: 1px solid #fff;
|
---|
3631 | }
|
---|
3632 | md-grid-tile-footer {
|
---|
3633 | border-top: 1px solid #fff;
|
---|
3634 | }
|
---|
3635 | }
|
---|
3636 |
|
---|
3637 |
|
---|
3638 | md-icon {
|
---|
3639 | margin: auto;
|
---|
3640 | background-repeat: no-repeat no-repeat;
|
---|
3641 | display: inline-block;
|
---|
3642 | vertical-align: middle;
|
---|
3643 | fill: currentColor;
|
---|
3644 | height: $icon-size;
|
---|
3645 | width: $icon-size;
|
---|
3646 |
|
---|
3647 | // The icons should not shrink on smaller viewports.
|
---|
3648 | min-height: $icon-size;
|
---|
3649 | min-width: $icon-size;
|
---|
3650 |
|
---|
3651 | svg {
|
---|
3652 | pointer-events: none;
|
---|
3653 | display: block;
|
---|
3654 | }
|
---|
3655 |
|
---|
3656 | &[md-font-icon] {
|
---|
3657 | line-height: $icon-size;
|
---|
3658 | width: auto;
|
---|
3659 | }
|
---|
3660 | }
|
---|
3661 |
|
---|
3662 | md-input-container {
|
---|
3663 | @include pie-clearfix();
|
---|
3664 | display: inline-block;
|
---|
3665 | position: relative;
|
---|
3666 | padding: $input-container-padding;
|
---|
3667 | margin: $input-container-vertical-margin $input-container-horizontal-margin;
|
---|
3668 | vertical-align: middle;
|
---|
3669 |
|
---|
3670 | &.md-block {
|
---|
3671 | display: block;
|
---|
3672 | }
|
---|
3673 |
|
---|
3674 | // Setup a spacer that is always there as a placeholder for any messages so we don't change
|
---|
3675 | // height with only 1 message
|
---|
3676 | .md-errors-spacer {
|
---|
3677 | @include rtl(float, right, left);
|
---|
3678 | min-height: $input-error-height;
|
---|
3679 |
|
---|
3680 | // Ensure the element always takes up space, even if empty
|
---|
3681 | min-width: 1px;
|
---|
3682 | }
|
---|
3683 |
|
---|
3684 | > md-icon {
|
---|
3685 | position: absolute;
|
---|
3686 | top: $icon-top-offset;
|
---|
3687 | @include rtl(left, 2px, auto);
|
---|
3688 | @include rtl(right, auto, 2px);
|
---|
3689 | }
|
---|
3690 |
|
---|
3691 | textarea,
|
---|
3692 | input[type="text"],
|
---|
3693 | input[type="password"],
|
---|
3694 | input[type="datetime"],
|
---|
3695 | input[type="datetime-local"],
|
---|
3696 | input[type="date"],
|
---|
3697 | input[type="month"],
|
---|
3698 | input[type="time"],
|
---|
3699 | input[type="week"],
|
---|
3700 | input[type="number"],
|
---|
3701 | input[type="email"],
|
---|
3702 | input[type="url"],
|
---|
3703 | input[type="search"],
|
---|
3704 | input[type="tel"],
|
---|
3705 | input[type="color"] {
|
---|
3706 | /* remove default appearance from all input/textarea */
|
---|
3707 | -moz-appearance: none;
|
---|
3708 | -webkit-appearance: none;
|
---|
3709 | }
|
---|
3710 | input[type="date"],
|
---|
3711 | input[type="datetime-local"],
|
---|
3712 | input[type="month"],
|
---|
3713 | input[type="time"],
|
---|
3714 | input[type="week"] {
|
---|
3715 | min-height: $input-line-height + $input-padding-top * 2;
|
---|
3716 | }
|
---|
3717 | textarea {
|
---|
3718 | resize: none;
|
---|
3719 | overflow: hidden;
|
---|
3720 |
|
---|
3721 | &.md-input {
|
---|
3722 | min-height: $input-line-height + $input-padding-top * 2;
|
---|
3723 | -ms-flex-preferred-size: auto; // IE fix
|
---|
3724 | }
|
---|
3725 |
|
---|
3726 | // The height usually gets set to 1 line by `.md-input`.
|
---|
3727 | &[md-no-autogrow] {
|
---|
3728 | height: auto;
|
---|
3729 | overflow: auto;
|
---|
3730 | }
|
---|
3731 | }
|
---|
3732 |
|
---|
3733 | label:not(.md-container-ignore) {
|
---|
3734 | position: absolute;
|
---|
3735 | bottom: 100%;
|
---|
3736 | @include rtl(left, 0, auto);
|
---|
3737 | @include rtl(right, auto, 0);
|
---|
3738 |
|
---|
3739 | &.md-required:after {
|
---|
3740 | content: ' *';
|
---|
3741 | font-size: 13px;
|
---|
3742 | vertical-align: top;
|
---|
3743 | }
|
---|
3744 | }
|
---|
3745 |
|
---|
3746 | label:not(.md-no-float):not(.md-container-ignore),
|
---|
3747 | .md-placeholder {
|
---|
3748 | overflow: hidden;
|
---|
3749 | text-overflow: ellipsis;
|
---|
3750 | white-space: nowrap;
|
---|
3751 | width: 100%;
|
---|
3752 | order: 1;
|
---|
3753 | pointer-events: none;
|
---|
3754 | -webkit-font-smoothing: antialiased;
|
---|
3755 | @include rtl(padding-left, $input-container-padding, 0);
|
---|
3756 | @include rtl(padding-right, 0, $input-container-padding);
|
---|
3757 | z-index: 1;
|
---|
3758 | transform: translate3d(0, $input-label-default-offset + 4, 0) scale($input-label-default-scale);
|
---|
3759 | transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
|
---|
3760 |
|
---|
3761 | // The max-width is necessary, because in some browsers, using this together with
|
---|
3762 | // a calc might cause it to overflow the parent. See #7403
|
---|
3763 | max-width: 100%;
|
---|
3764 |
|
---|
3765 | @include rtl(transform-origin, left top, right top);
|
---|
3766 | }
|
---|
3767 | &.md-input-has-value {
|
---|
3768 | label:not(.md-no-float):not(.md-container-ignore),
|
---|
3769 | .md-placeholder {
|
---|
3770 | @include rtl(padding-left, $input-container-padding + 1px, 0);
|
---|
3771 | @include rtl(padding-right, 0, $input-container-padding + 1px);
|
---|
3772 | }
|
---|
3773 | }
|
---|
3774 | .md-placeholder {
|
---|
3775 | position: absolute;
|
---|
3776 | top: 0;
|
---|
3777 | opacity: 0;
|
---|
3778 | transition-property: opacity, transform;
|
---|
3779 | transform: translate3d(0, $input-placeholder-offset + $baseline-grid * 0.75, 0);
|
---|
3780 | }
|
---|
3781 | &.md-input-focused .md-placeholder {
|
---|
3782 | opacity: 1;
|
---|
3783 | transform: translate3d(0, $input-placeholder-offset, 0);
|
---|
3784 | }
|
---|
3785 | // Placeholder should immediately disappear when the user starts typing
|
---|
3786 | &.md-input-has-value .md-placeholder {
|
---|
3787 | transition: none;
|
---|
3788 | opacity: 0;
|
---|
3789 | }
|
---|
3790 |
|
---|
3791 | &:not( .md-input-has-value ):not( .md-input-has-placeholder ) input:not( :focus ) {
|
---|
3792 | color: transparent;
|
---|
3793 | }
|
---|
3794 | &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-ampm-field,
|
---|
3795 | &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-day-field,
|
---|
3796 | &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-hour-field,
|
---|
3797 | &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-millisecond-field,
|
---|
3798 | &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-minute-field,
|
---|
3799 | &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-month-field,
|
---|
3800 | &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-second-field,
|
---|
3801 | &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-week-field,
|
---|
3802 | &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-year-field,
|
---|
3803 | &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-text {
|
---|
3804 | color: transparent;
|
---|
3805 | }
|
---|
3806 |
|
---|
3807 | /*
|
---|
3808 | * The .md-input class is added to the input/textarea
|
---|
3809 | */
|
---|
3810 | .md-input {
|
---|
3811 | order: 2;
|
---|
3812 | display: block;
|
---|
3813 | margin-top: 0;
|
---|
3814 |
|
---|
3815 | background: none;
|
---|
3816 | padding-top: $input-padding-top;
|
---|
3817 | padding-bottom: $input-padding-bottom;
|
---|
3818 | @include rtl(padding-left, 0, $input-container-padding);
|
---|
3819 | @include rtl(padding-right, $input-container-padding, 0);
|
---|
3820 | border-width: 0 0 $input-border-width-default 0;
|
---|
3821 | line-height: $input-line-height;
|
---|
3822 | height: $input-line-height + $input-padding-top * 2;
|
---|
3823 | -ms-flex-preferred-size: $input-line-height; //IE fix
|
---|
3824 | border-radius: 0;
|
---|
3825 | border-style: solid; // Firefox fix
|
---|
3826 | transition: border-color $swift-ease-out-duration $swift-ease-out-timing-function;
|
---|
3827 |
|
---|
3828 | // Fix number inputs in Firefox to be full-width
|
---|
3829 | width: 100%;
|
---|
3830 | box-sizing: border-box;
|
---|
3831 |
|
---|
3832 | // Hacky fix to force vertical alignment between `input` and `textarea`
|
---|
3833 | // Input and textarea do not align by default:
|
---|
3834 | // http://jsbin.com/buqomevage/1/edit?html,css,js,output
|
---|
3835 | @include rtl(float, left, right);
|
---|
3836 |
|
---|
3837 | &:focus {
|
---|
3838 | outline: none;
|
---|
3839 | }
|
---|
3840 | &:invalid {
|
---|
3841 | outline: none;
|
---|
3842 | box-shadow: none;
|
---|
3843 | }
|
---|
3844 |
|
---|
3845 | &.md-no-flex {
|
---|
3846 | flex: none !important;
|
---|
3847 | }
|
---|
3848 | }
|
---|
3849 |
|
---|
3850 | .md-char-counter {
|
---|
3851 | @include rtl(text-align, right, left);
|
---|
3852 | @include rtl(padding-right, $input-container-padding, 0);
|
---|
3853 | @include rtl(padding-left, 0, $input-container-padding);
|
---|
3854 | }
|
---|
3855 |
|
---|
3856 | //
|
---|
3857 | // ngMessage base styles - animations moved to input.js
|
---|
3858 | //
|
---|
3859 | .md-input-messages-animation {
|
---|
3860 | position: relative;
|
---|
3861 | order: 4;
|
---|
3862 | overflow: hidden;
|
---|
3863 | @include rtl(clear, left, right);
|
---|
3864 | }
|
---|
3865 |
|
---|
3866 | .md-input-message-animation, .md-char-counter {
|
---|
3867 | font-size: $input-error-font-size;
|
---|
3868 | line-height: $input-error-line-height;
|
---|
3869 | overflow: hidden;
|
---|
3870 |
|
---|
3871 | transition: $swift-ease-in;
|
---|
3872 |
|
---|
3873 | // Default state for messages is to be visible
|
---|
3874 | opacity: 1;
|
---|
3875 | margin-top: 0;
|
---|
3876 | padding-top: $error-padding-top;
|
---|
3877 |
|
---|
3878 | &:not(.md-char-counter) {
|
---|
3879 | // Add some padding so that the messages don't touch the character counter
|
---|
3880 | @include rtl(padding-right, rem(0.5), 0);
|
---|
3881 | @include rtl(padding-left, 0, rem(0.5));
|
---|
3882 | }
|
---|
3883 | }
|
---|
3884 |
|
---|
3885 | &:not(.md-input-invalid) {
|
---|
3886 | .md-auto-hide {
|
---|
3887 | .md-input-message-animation {
|
---|
3888 | opacity: 0;
|
---|
3889 | margin-top: -100px;
|
---|
3890 | }
|
---|
3891 | }
|
---|
3892 | }
|
---|
3893 |
|
---|
3894 | .md-input-message-animation {
|
---|
3895 | // Enter animation
|
---|
3896 | // Pre-animation state is transparent and off target
|
---|
3897 | &.ng-enter-prepare {
|
---|
3898 | opacity: 0;
|
---|
3899 | margin-top: -100px;
|
---|
3900 | }
|
---|
3901 |
|
---|
3902 | // First keyframe of entry animation
|
---|
3903 | &.ng-enter:not(.ng-enter-active) {
|
---|
3904 | opacity: 0;
|
---|
3905 | margin-top: -100px;
|
---|
3906 | }
|
---|
3907 | }
|
---|
3908 |
|
---|
3909 | &.md-input-focused,
|
---|
3910 | &.md-input-has-placeholder,
|
---|
3911 | &.md-input-has-value {
|
---|
3912 | label:not(.md-no-float) {
|
---|
3913 | transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
|
---|
3914 | transition: transform $swift-ease-out-timing-function $swift-ease-out-duration,
|
---|
3915 | width $swift-ease-out-timing-function $swift-ease-out-duration;
|
---|
3916 | }
|
---|
3917 | }
|
---|
3918 |
|
---|
3919 | // If we have an existing value; don't animate the transform as it happens on page load and
|
---|
3920 | // causes erratic/unnecessary animation
|
---|
3921 | &.md-input-has-value {
|
---|
3922 | label {
|
---|
3923 | transition: none;
|
---|
3924 | }
|
---|
3925 | }
|
---|
3926 |
|
---|
3927 | // Use wide border in error state or in focused state
|
---|
3928 | &.md-input-focused .md-input,
|
---|
3929 | .md-input.ng-invalid.ng-dirty,
|
---|
3930 | &.md-input-resized .md-input {
|
---|
3931 | padding-bottom: 0; // Increase border width by 1px, decrease padding by 1
|
---|
3932 | border-width: 0 0 $input-border-width-focused 0;
|
---|
3933 | }
|
---|
3934 |
|
---|
3935 | .md-input {
|
---|
3936 | &[disabled],
|
---|
3937 | [disabled] & {
|
---|
3938 | // The negative border width offsets the dotted "border" so
|
---|
3939 | // it's placed in the same place as the solid one before it.
|
---|
3940 | background-position: bottom $input-border-width-default * -1 left 0;
|
---|
3941 | // This background-size is coordinated with a linear-gradient set in input-theme.scss
|
---|
3942 | // to create a dotted line under the input.
|
---|
3943 | background-size: 4px 1px;
|
---|
3944 | background-repeat: repeat-x;
|
---|
3945 | }
|
---|
3946 | }
|
---|
3947 |
|
---|
3948 | &.md-icon-float {
|
---|
3949 |
|
---|
3950 | transition: margin-top $swift-ease-out-duration $swift-ease-out-timing-function;
|
---|
3951 |
|
---|
3952 | > label {
|
---|
3953 | pointer-events: none;
|
---|
3954 | position: absolute;
|
---|
3955 | }
|
---|
3956 |
|
---|
3957 | > md-icon {
|
---|
3958 | top: $icon-top-offset;
|
---|
3959 | @include rtl(left, 2px, auto);
|
---|
3960 | @include rtl(right, auto, 2px);
|
---|
3961 | }
|
---|
3962 |
|
---|
3963 | }
|
---|
3964 |
|
---|
3965 | &.md-icon-left,
|
---|
3966 | &.md-icon-right {
|
---|
3967 | > label {
|
---|
3968 | &:not(.md-no-float):not(.md-container-ignore),
|
---|
3969 | .md-placeholder {
|
---|
3970 | width: calc(100% - #{$icon-offset});
|
---|
3971 | padding: 0;
|
---|
3972 | }
|
---|
3973 | }
|
---|
3974 | }
|
---|
3975 |
|
---|
3976 | // icon offset should have higher priority as normal label
|
---|
3977 | &.md-icon-left {
|
---|
3978 | @include rtl(padding-left, $icon-offset, 0);
|
---|
3979 | @include rtl(padding-right, 0, $icon-offset);
|
---|
3980 | > label {
|
---|
3981 | @include rtl(left, $icon-offset, auto);
|
---|
3982 | @include rtl(right, auto, $icon-offset);
|
---|
3983 | }
|
---|
3984 | }
|
---|
3985 |
|
---|
3986 | &.md-icon-right {
|
---|
3987 | @include rtl(padding-left, 0, $icon-offset);
|
---|
3988 | @include rtl(padding-right, $icon-offset, 0);
|
---|
3989 |
|
---|
3990 | > md-icon:last-of-type {
|
---|
3991 | margin: 0;
|
---|
3992 |
|
---|
3993 | @include rtl(right, 2px, auto);
|
---|
3994 | @include rtl(left, auto, 2px);
|
---|
3995 | }
|
---|
3996 | }
|
---|
3997 |
|
---|
3998 | &.md-icon-left.md-icon-right {
|
---|
3999 | padding-left: $icon-offset;
|
---|
4000 | padding-right: $icon-offset;
|
---|
4001 |
|
---|
4002 | > label {
|
---|
4003 | &:not(.md-no-float):not(.md-container-ignore),
|
---|
4004 | .md-placeholder {
|
---|
4005 | width: calc(100% - (#{$icon-offset} * 2));
|
---|
4006 | }
|
---|
4007 | }
|
---|
4008 | }
|
---|
4009 | }
|
---|
4010 |
|
---|
4011 | .md-resize-wrapper {
|
---|
4012 | @include pie-clearfix();
|
---|
4013 | position: relative;
|
---|
4014 | }
|
---|
4015 |
|
---|
4016 | .md-resize-handle {
|
---|
4017 | position: absolute;
|
---|
4018 | bottom: $input-resize-handle-height / -2;
|
---|
4019 | left: 0;
|
---|
4020 | height: $input-resize-handle-height;
|
---|
4021 | background: transparent;
|
---|
4022 | width: 100%;
|
---|
4023 | cursor: ns-resize;
|
---|
4024 | }
|
---|
4025 |
|
---|
4026 | @media screen and (-ms-high-contrast: active) {
|
---|
4027 | md-input-container.md-default-theme > md-icon {
|
---|
4028 | fill: #fff;
|
---|
4029 | }
|
---|
4030 | }
|
---|
4031 |
|
---|
4032 | $dense-baseline-grid: $baseline-grid / 2 !default;
|
---|
4033 |
|
---|
4034 | $list-h3-margin: 0 0 0 0 !default;
|
---|
4035 | $list-h4-margin: 3px 0 1px 0 !default;
|
---|
4036 | $list-h4-font-weight: 400 !default;
|
---|
4037 | $list-header-line-height: 1.2em !default;
|
---|
4038 | $list-p-margin: 0 0 0 0 !default;
|
---|
4039 | $list-p-line-height: 1.6em !default;
|
---|
4040 |
|
---|
4041 | $list-padding-top: $baseline-grid !default;
|
---|
4042 | $list-padding-right: 0px !default;
|
---|
4043 | $list-padding-left: 0px !default;
|
---|
4044 | $list-padding-bottom: $baseline-grid !default;
|
---|
4045 |
|
---|
4046 | $item-padding-top: 0px !default;
|
---|
4047 | $item-padding-right: 0px !default;
|
---|
4048 | $item-padding-left: 0px !default;
|
---|
4049 | $item-padding-bottom: 0px !default;
|
---|
4050 | $list-item-padding-vertical: 0px !default;
|
---|
4051 | $list-item-padding-horizontal: $baseline-grid * 2 !default;
|
---|
4052 | $list-item-primary-width: $baseline-grid * 7 !default;
|
---|
4053 | $list-item-primary-avatar-width: $baseline-grid * 5 !default;
|
---|
4054 | $list-item-primary-icon-width: $baseline-grid * 3 !default;
|
---|
4055 | $list-item-secondary-left-margin: $baseline-grid * 2 !default;
|
---|
4056 | $list-item-secondary-button-width: $baseline-grid * 6 !default;
|
---|
4057 | $list-item-inset-divider-offset: 9 * $baseline-grid !default;
|
---|
4058 | $list-item-height: 6 * $baseline-grid !default;
|
---|
4059 | $list-item-two-line-height: 9 * $baseline-grid !default;
|
---|
4060 | $list-item-three-line-height: 11 * $baseline-grid !default;
|
---|
4061 |
|
---|
4062 | $list-item-dense-height: 10 * $dense-baseline-grid !default;
|
---|
4063 | $list-item-dense-two-line-height: 15 * $dense-baseline-grid !default;
|
---|
4064 | $list-item-dense-three-line-height: 19 * $dense-baseline-grid !default;
|
---|
4065 | $list-item-dense-primary-icon-width: $dense-baseline-grid * 5 !default;
|
---|
4066 | $list-item-dense-primary-avatar-width: $dense-baseline-grid * 9 !default;
|
---|
4067 | $list-item-dense-header-font-size: round($subhead-font-size-base * 0.8) !default;
|
---|
4068 | $list-item-dense-font-size: round($body-font-size-base * 0.85) !default;
|
---|
4069 | $list-item-dense-line-height: 1.05 !default;
|
---|
4070 |
|
---|
4071 | md-list {
|
---|
4072 | display: block;
|
---|
4073 | padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
|
---|
4074 |
|
---|
4075 | .md-subheader {
|
---|
4076 | font-size: $body-font-size-base;
|
---|
4077 | font-weight: 500;
|
---|
4078 | letter-spacing: 0.010em;
|
---|
4079 | line-height: $list-header-line-height;
|
---|
4080 | }
|
---|
4081 |
|
---|
4082 | &.md-dense:not(.md-dense-disabled) {
|
---|
4083 | md-list-item {
|
---|
4084 | &,
|
---|
4085 | .md-list-item-inner {
|
---|
4086 | min-height: $list-item-dense-height;
|
---|
4087 | @include ie11-min-height-flexbug($list-item-dense-height);
|
---|
4088 |
|
---|
4089 |
|
---|
4090 | // Layout for controls in primary or secondary divs, or auto-inferred first child
|
---|
4091 |
|
---|
4092 | md-icon:first-child {
|
---|
4093 | width: $list-item-dense-primary-icon-width;
|
---|
4094 | height: $list-item-dense-primary-icon-width;
|
---|
4095 | }
|
---|
4096 |
|
---|
4097 | > md-icon:first-child:not(.md-avatar-icon) {
|
---|
4098 | @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-icon-width, auto);
|
---|
4099 | margin-top: $dense-baseline-grid;
|
---|
4100 | margin-bottom: $dense-baseline-grid;
|
---|
4101 | }
|
---|
4102 | .md-avatar, .md-avatar-icon {
|
---|
4103 | @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-avatar-width, auto);
|
---|
4104 | margin-top: $dense-baseline-grid + 2px;
|
---|
4105 | margin-bottom: $dense-baseline-grid + 2px;
|
---|
4106 | }
|
---|
4107 | .md-avatar {
|
---|
4108 | flex: none;
|
---|
4109 | width: $list-item-dense-primary-avatar-width;
|
---|
4110 | height: $list-item-dense-primary-avatar-width;
|
---|
4111 | }
|
---|
4112 | .md-secondary-container {
|
---|
4113 | .md-secondary.md-button {
|
---|
4114 | margin-top: $dense-baseline-grid;
|
---|
4115 | margin-bottom: $dense-baseline-grid;
|
---|
4116 | }
|
---|
4117 | md-checkbox:not(.md-dense-disabled) {
|
---|
4118 | min-height: $icon-button-height;
|
---|
4119 | }
|
---|
4120 | }
|
---|
4121 | }
|
---|
4122 |
|
---|
4123 | &.md-2-line,
|
---|
4124 | &.md-3-line {
|
---|
4125 | &, & > .md-no-style {
|
---|
4126 | .md-list-item-text {
|
---|
4127 | &.md-offset {
|
---|
4128 | @include rtl-prop(margin-left, margin-right, $list-item-primary-width, auto);
|
---|
4129 | }
|
---|
4130 |
|
---|
4131 | h3,
|
---|
4132 | h4,
|
---|
4133 | p {
|
---|
4134 | line-height: $list-item-dense-line-height;
|
---|
4135 | font-size: $list-item-dense-font-size;
|
---|
4136 | padding-bottom: 4px;
|
---|
4137 | }
|
---|
4138 |
|
---|
4139 | h3 {
|
---|
4140 | font-size: $list-item-dense-header-font-size;
|
---|
4141 | }
|
---|
4142 | }
|
---|
4143 | }
|
---|
4144 | }
|
---|
4145 |
|
---|
4146 | &.md-2-line {
|
---|
4147 | &, & > .md-no-style {
|
---|
4148 | min-height: $list-item-dense-two-line-height;
|
---|
4149 | @include ie11-min-height-flexbug($list-item-dense-two-line-height);
|
---|
4150 |
|
---|
4151 | > .md-avatar, .md-avatar-icon {
|
---|
4152 | margin-top: $baseline-grid * 1.5;
|
---|
4153 | }
|
---|
4154 | }
|
---|
4155 | }
|
---|
4156 |
|
---|
4157 | &.md-3-line {
|
---|
4158 | &, & > .md-no-style {
|
---|
4159 |
|
---|
4160 | min-height: $list-item-dense-three-line-height;
|
---|
4161 | @include ie11-min-height-flexbug($list-item-dense-three-line-height);
|
---|
4162 |
|
---|
4163 | > md-icon:first-child,
|
---|
4164 | > .md-avatar {
|
---|
4165 | margin-top: $baseline-grid * 2;
|
---|
4166 | }
|
---|
4167 | }
|
---|
4168 | }
|
---|
4169 | }
|
---|
4170 | .md-subheader-inner {
|
---|
4171 | padding-top: $dense-baseline-grid * 3;
|
---|
4172 | padding-bottom: $dense-baseline-grid * 3;
|
---|
4173 | }
|
---|
4174 | }
|
---|
4175 | }
|
---|
4176 |
|
---|
4177 | md-list-item {
|
---|
4178 | // Ensure nested dividers are properly positioned
|
---|
4179 | position: relative;
|
---|
4180 |
|
---|
4181 | &.md-proxy-focus.md-focused .md-no-style {
|
---|
4182 | transition: background-color 0.15s linear;
|
---|
4183 | }
|
---|
4184 |
|
---|
4185 | &._md-button-wrap {
|
---|
4186 | position: relative;
|
---|
4187 |
|
---|
4188 | > div.md-button:first-child {
|
---|
4189 | // Layout - Vertically align the item content.
|
---|
4190 | display: flex;
|
---|
4191 | align-items: center;
|
---|
4192 | justify-content: flex-start;
|
---|
4193 |
|
---|
4194 | padding: $list-item-padding-vertical $list-item-padding-horizontal;
|
---|
4195 | margin: 0;
|
---|
4196 |
|
---|
4197 | font-weight: 400;
|
---|
4198 | @include rtl(text-align, left, right);
|
---|
4199 | border: medium none;
|
---|
4200 |
|
---|
4201 | // The button executor should fill the whole list item.
|
---|
4202 | > .md-button:first-child {
|
---|
4203 | position: absolute;
|
---|
4204 | top: 0;
|
---|
4205 | left: 0;
|
---|
4206 | height: 100%;
|
---|
4207 |
|
---|
4208 | margin: 0;
|
---|
4209 | padding: 0;
|
---|
4210 | }
|
---|
4211 |
|
---|
4212 | .md-list-item-inner {
|
---|
4213 | // The list item content should fill the complete width.
|
---|
4214 | width: 100%;
|
---|
4215 | @include ie11-min-height-flexbug(inherit);
|
---|
4216 | }
|
---|
4217 |
|
---|
4218 | }
|
---|
4219 |
|
---|
4220 | }
|
---|
4221 |
|
---|
4222 | &.md-no-proxy,
|
---|
4223 | .md-no-style {
|
---|
4224 | position: relative;
|
---|
4225 | padding: $list-item-padding-vertical $list-item-padding-horizontal;
|
---|
4226 |
|
---|
4227 | // Layout [flex='auto']
|
---|
4228 | flex: 1 1 auto;
|
---|
4229 |
|
---|
4230 | &.md-button {
|
---|
4231 | font-size: inherit;
|
---|
4232 | height: inherit;
|
---|
4233 | @include rtl(text-align, left, right);
|
---|
4234 | text-transform: none;
|
---|
4235 | width: 100%;
|
---|
4236 | white-space: normal;
|
---|
4237 | flex-direction: inherit;
|
---|
4238 | align-items: inherit;
|
---|
4239 | border-radius: 0;
|
---|
4240 | margin: 0;
|
---|
4241 |
|
---|
4242 | & > .md-ripple-container {
|
---|
4243 | border-radius: 0;
|
---|
4244 | }
|
---|
4245 | }
|
---|
4246 | &:focus {
|
---|
4247 | outline: none
|
---|
4248 | }
|
---|
4249 | }
|
---|
4250 | &.md-clickable:hover {
|
---|
4251 | cursor: pointer;
|
---|
4252 | }
|
---|
4253 |
|
---|
4254 | md-divider {
|
---|
4255 | position: absolute;
|
---|
4256 | bottom: 0;
|
---|
4257 | @include rtl-prop(left, right, 0, auto);
|
---|
4258 | width: 100%;
|
---|
4259 | &[md-inset] {
|
---|
4260 | @include rtl-prop(left, right, $list-item-inset-divider-offset, auto);
|
---|
4261 | width: calc(100% - #{$list-item-inset-divider-offset});
|
---|
4262 | margin: 0 !important;
|
---|
4263 | }
|
---|
4264 | }
|
---|
4265 |
|
---|
4266 | &,
|
---|
4267 | .md-list-item-inner {
|
---|
4268 |
|
---|
4269 | // Layout [flex layout-align='start center']
|
---|
4270 | display: flex;
|
---|
4271 | justify-content: flex-start;
|
---|
4272 | align-items: center;
|
---|
4273 |
|
---|
4274 | min-height: $list-item-height;
|
---|
4275 | @include ie11-min-height-flexbug($list-item-height);
|
---|
4276 |
|
---|
4277 | height: auto;
|
---|
4278 |
|
---|
4279 | // Layout for controls in primary or secondary divs, or auto-infered first child
|
---|
4280 | & > div.md-primary > md-icon:not(.md-avatar-icon),
|
---|
4281 | & > div.md-secondary > md-icon:not(.md-avatar-icon),
|
---|
4282 | & > md-icon:first-child:not(.md-avatar-icon),
|
---|
4283 | > md-icon.md-secondary:not(.md-avatar-icon) {
|
---|
4284 | width: $list-item-primary-icon-width;
|
---|
4285 | margin-top: 16px;
|
---|
4286 | margin-bottom: 12px;
|
---|
4287 | box-sizing: content-box;
|
---|
4288 | }
|
---|
4289 | & > div.md-primary > md-checkbox,
|
---|
4290 | & > div.md-secondary > md-checkbox,
|
---|
4291 | & > md-checkbox,
|
---|
4292 | md-checkbox.md-secondary {
|
---|
4293 | align-self: center;
|
---|
4294 | .md-label {
|
---|
4295 | display: none;
|
---|
4296 | }
|
---|
4297 | }
|
---|
4298 |
|
---|
4299 | & > md-icon:first-child:not(.md-avatar-icon) {
|
---|
4300 | @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-icon-width, auto);
|
---|
4301 | }
|
---|
4302 |
|
---|
4303 | & .md-avatar, .md-avatar-icon {
|
---|
4304 | margin-top: $baseline-grid;
|
---|
4305 | margin-bottom: $baseline-grid;
|
---|
4306 | @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-avatar-width, auto);
|
---|
4307 | border-radius: 50%;
|
---|
4308 | box-sizing: content-box;
|
---|
4309 | }
|
---|
4310 | & .md-avatar {
|
---|
4311 | flex: none;
|
---|
4312 | width: $list-item-primary-avatar-width;
|
---|
4313 | height: $list-item-primary-avatar-width;
|
---|
4314 | }
|
---|
4315 | & .md-avatar-icon {
|
---|
4316 | padding: 8px;
|
---|
4317 |
|
---|
4318 | // Set the width/height to the same as the icon to fix issue on iOS Safari where the
|
---|
4319 | // height: 100% was causing it to be larger than it's parent
|
---|
4320 | svg {
|
---|
4321 | width: $icon-size;
|
---|
4322 | height: $icon-size;
|
---|
4323 | }
|
---|
4324 | }
|
---|
4325 |
|
---|
4326 | & > md-checkbox {
|
---|
4327 | width: 3 * $baseline-grid;
|
---|
4328 | min-height: $icon-button-height;
|
---|
4329 | @include rtl(margin-left, 0px, 29px);
|
---|
4330 | @include rtl(margin-right, 29px, 0px);
|
---|
4331 | }
|
---|
4332 |
|
---|
4333 | .md-secondary-container {
|
---|
4334 | display: flex;
|
---|
4335 | align-items: center;
|
---|
4336 | // Ensure the secondary button is not behind the primary button if its template is provided by
|
---|
4337 | // a directive.
|
---|
4338 | position: relative;
|
---|
4339 |
|
---|
4340 | // Per W3C: https://www.w3.org/TR/css-flexbox/#flex-common
|
---|
4341 | // By default, flex items won’t shrink below their minimum content size.
|
---|
4342 | // Safari doesn't follow that specification due to a bug and expects the developer to
|
---|
4343 | // explicitly disable flex shrinking.
|
---|
4344 | flex-shrink: 0;
|
---|
4345 |
|
---|
4346 | // Using margin auto to move them to the end of the list item is more elegant, because it has
|
---|
4347 | // a lower priority than a flex filler and isn't introducing any overflow issues.
|
---|
4348 | // The margin on the top is important to align multiple secondary items vertically.
|
---|
4349 | margin: auto;
|
---|
4350 |
|
---|
4351 | @include rtl(margin-right, 0, auto);
|
---|
4352 | @include rtl(margin-left, auto, 0);
|
---|
4353 |
|
---|
4354 | .md-button, .md-icon-button {
|
---|
4355 | &:last-of-type {
|
---|
4356 | // Reset 6px margin for the button.
|
---|
4357 | @include rtl-prop(margin-right, margin-left, 0, auto);
|
---|
4358 | }
|
---|
4359 | }
|
---|
4360 |
|
---|
4361 | md-checkbox {
|
---|
4362 | margin: 0 6px;
|
---|
4363 | padding: 0 8px;
|
---|
4364 | min-height: $icon-button-height;
|
---|
4365 |
|
---|
4366 | &:last-child {
|
---|
4367 | width: $icon-button-width;
|
---|
4368 | @include rtl-prop(margin-right, margin-left, 0, auto);
|
---|
4369 | }
|
---|
4370 | }
|
---|
4371 |
|
---|
4372 | md-switch {
|
---|
4373 | margin-top: 0;
|
---|
4374 | margin-bottom: 0;
|
---|
4375 |
|
---|
4376 | @include rtl-prop(margin-right, margin-left, -6px, auto);
|
---|
4377 | }
|
---|
4378 | }
|
---|
4379 |
|
---|
4380 | & > p, & > .md-list-item-inner > p {
|
---|
4381 | flex: 1 1 auto;
|
---|
4382 | margin: 0;
|
---|
4383 | }
|
---|
4384 | }
|
---|
4385 |
|
---|
4386 | &.md-2-line,
|
---|
4387 | &.md-3-line {
|
---|
4388 | &, & > .md-no-style {
|
---|
4389 | align-items: flex-start;
|
---|
4390 | justify-content: center;
|
---|
4391 |
|
---|
4392 | &.md-long-text {
|
---|
4393 | margin-top: $baseline-grid;
|
---|
4394 | margin-bottom: $baseline-grid;
|
---|
4395 | }
|
---|
4396 |
|
---|
4397 | .md-list-item-text {
|
---|
4398 | flex: 1 1 auto;
|
---|
4399 | margin: auto;
|
---|
4400 | text-overflow: ellipsis;
|
---|
4401 | overflow: hidden;
|
---|
4402 |
|
---|
4403 | &.md-offset {
|
---|
4404 | @include rtl-prop(margin-left, margin-right, $list-item-primary-width, auto);
|
---|
4405 | }
|
---|
4406 |
|
---|
4407 | h3 {
|
---|
4408 | font-size: $subhead-font-size-base;
|
---|
4409 | font-weight: 400;
|
---|
4410 | letter-spacing: 0.010em;
|
---|
4411 | margin: $list-h3-margin;
|
---|
4412 | line-height: $list-header-line-height;
|
---|
4413 | overflow: hidden;
|
---|
4414 | white-space: nowrap;
|
---|
4415 | text-overflow: ellipsis;
|
---|
4416 | }
|
---|
4417 | h4 {
|
---|
4418 | font-size: $body-font-size-base;
|
---|
4419 | letter-spacing: 0.010em;
|
---|
4420 | margin: $list-h4-margin;
|
---|
4421 | font-weight: $list-h4-font-weight;
|
---|
4422 | line-height: $list-header-line-height;
|
---|
4423 | overflow: hidden;
|
---|
4424 | white-space: nowrap;
|
---|
4425 | text-overflow: ellipsis;
|
---|
4426 | }
|
---|
4427 | p {
|
---|
4428 | font-size: $body-font-size-base;
|
---|
4429 | font-weight: 500;
|
---|
4430 | letter-spacing: 0.010em;
|
---|
4431 | margin: $list-p-margin;
|
---|
4432 | line-height: $list-p-line-height;
|
---|
4433 | }
|
---|
4434 | }
|
---|
4435 | }
|
---|
4436 | }
|
---|
4437 |
|
---|
4438 | &.md-2-line {
|
---|
4439 | &, & > .md-no-style {
|
---|
4440 | height: auto;
|
---|
4441 |
|
---|
4442 | min-height: $list-item-two-line-height;
|
---|
4443 | @include ie11-min-height-flexbug($list-item-two-line-height);
|
---|
4444 |
|
---|
4445 | > .md-avatar, .md-avatar-icon {
|
---|
4446 | margin-top: $baseline-grid * 1.5;
|
---|
4447 | }
|
---|
4448 |
|
---|
4449 | > md-icon:first-child {
|
---|
4450 | align-self: flex-start;
|
---|
4451 | }
|
---|
4452 |
|
---|
4453 | .md-list-item-text {
|
---|
4454 | flex: 1 1 auto;
|
---|
4455 | }
|
---|
4456 | }
|
---|
4457 | }
|
---|
4458 |
|
---|
4459 | &.md-3-line {
|
---|
4460 | &, & > .md-no-style {
|
---|
4461 | height: auto;
|
---|
4462 |
|
---|
4463 | min-height: $list-item-three-line-height;
|
---|
4464 | @include ie11-min-height-flexbug($list-item-three-line-height);
|
---|
4465 |
|
---|
4466 | > md-icon:first-child,
|
---|
4467 | > .md-avatar {
|
---|
4468 | margin-top: $baseline-grid * 2;
|
---|
4469 | }
|
---|
4470 | }
|
---|
4471 | }
|
---|
4472 | }
|
---|
4473 |
|
---|
4474 | $menu-border-radius: 2px !default;
|
---|
4475 | $max-visible-items: 6 !default;
|
---|
4476 | $menu-item-height: 6 * $baseline-grid !default;
|
---|
4477 | $dense-menu-item-height: 4 * $baseline-grid !default;
|
---|
4478 | $max-menu-height: 2 * $baseline-grid + $max-visible-items * $menu-item-height !default;
|
---|
4479 | $max-dense-menu-height: 2 * $baseline-grid + $max-visible-items * $dense-menu-item-height !default;
|
---|
4480 |
|
---|
4481 | .md-open-menu-container {
|
---|
4482 | position: fixed;
|
---|
4483 | left: 0;
|
---|
4484 | top: 0;
|
---|
4485 | z-index: $z-index-menu;
|
---|
4486 | opacity: 0;
|
---|
4487 | border-radius: $menu-border-radius;
|
---|
4488 | max-height: calc(100vh - 10px);
|
---|
4489 | overflow: auto;
|
---|
4490 |
|
---|
4491 | md-menu-divider {
|
---|
4492 | margin-top: $baseline-grid / 2;
|
---|
4493 | margin-bottom: $baseline-grid / 2;
|
---|
4494 | height: 1px;
|
---|
4495 | min-height: 1px;
|
---|
4496 | max-height: 1px;
|
---|
4497 | width: 100%;
|
---|
4498 | }
|
---|
4499 |
|
---|
4500 | md-menu-content > * {
|
---|
4501 | opacity: 0;
|
---|
4502 | }
|
---|
4503 |
|
---|
4504 | // Don't let the user click something until it's animated
|
---|
4505 | &:not(.md-clickable) {
|
---|
4506 | pointer-events: none;
|
---|
4507 | }
|
---|
4508 |
|
---|
4509 | // enter: menu scales in, then list fade in.
|
---|
4510 | &.md-active {
|
---|
4511 | opacity: 1;
|
---|
4512 | transition: $swift-ease-out;
|
---|
4513 | transition-duration: 200ms;
|
---|
4514 | > md-menu-content > * {
|
---|
4515 | opacity: 1;
|
---|
4516 | transition: $swift-ease-in;
|
---|
4517 | transition-duration: 200ms;
|
---|
4518 | transition-delay: 100ms;
|
---|
4519 | }
|
---|
4520 | }
|
---|
4521 | // leave: the container fades out
|
---|
4522 | &.md-leave {
|
---|
4523 | opacity: 0;
|
---|
4524 | transition: $swift-ease-in;
|
---|
4525 | transition-duration: 250ms;
|
---|
4526 | }
|
---|
4527 | }
|
---|
4528 |
|
---|
4529 | md-menu-content {
|
---|
4530 | display: flex;
|
---|
4531 | flex-direction: column;
|
---|
4532 | padding: $baseline-grid 0;
|
---|
4533 | max-height: $max-menu-height;
|
---|
4534 | overflow-y: auto;
|
---|
4535 | &.md-dense {
|
---|
4536 | max-height: $max-dense-menu-height;
|
---|
4537 | md-menu-item {
|
---|
4538 | height: $dense-menu-item-height;
|
---|
4539 | min-height: $dense-menu-item-height;
|
---|
4540 | }
|
---|
4541 | }
|
---|
4542 | }
|
---|
4543 |
|
---|
4544 | md-menu-item {
|
---|
4545 | display: flex;
|
---|
4546 | flex-direction: row;
|
---|
4547 | min-height: $menu-item-height;
|
---|
4548 | height: $menu-item-height;
|
---|
4549 | align-content: center;
|
---|
4550 | justify-content: flex-start;
|
---|
4551 |
|
---|
4552 | > * {
|
---|
4553 | width: 100%;
|
---|
4554 | margin: auto 0;
|
---|
4555 | padding-left: 2*$baseline-grid;
|
---|
4556 | padding-right: 2*$baseline-grid;
|
---|
4557 | }
|
---|
4558 |
|
---|
4559 | /*
|
---|
4560 | * We cannot use flex on <button> elements due to a bug in Firefox, so we also can't use it on
|
---|
4561 | * <a> elements. Add some top padding to fix alignment since buttons automatically align their
|
---|
4562 | * text vertically.
|
---|
4563 | */
|
---|
4564 | > a.md-button {
|
---|
4565 | padding-top: 5px;
|
---|
4566 | }
|
---|
4567 |
|
---|
4568 | > .md-button {
|
---|
4569 | // Firefox-specific reset styling to fix alignment issues (see #8464)
|
---|
4570 | &::-moz-focus-inner {
|
---|
4571 | padding: 0;
|
---|
4572 | border: 0
|
---|
4573 | }
|
---|
4574 |
|
---|
4575 | @include rtl(text-align, left, right);
|
---|
4576 |
|
---|
4577 | display: inline-block;
|
---|
4578 | border-radius: 0;
|
---|
4579 | margin: auto 0;
|
---|
4580 | font-size: (2*$baseline-grid) - 1;
|
---|
4581 | text-transform: none;
|
---|
4582 | font-weight: 400;
|
---|
4583 | height: 100%;
|
---|
4584 | padding-left: 2*$baseline-grid;
|
---|
4585 | padding-right: 2*$baseline-grid;
|
---|
4586 | width:100%;
|
---|
4587 | md-icon {
|
---|
4588 | @include rtl(margin, auto 2*$baseline-grid auto 0, auto 0 auto 2*$baseline-grid);
|
---|
4589 | }
|
---|
4590 | p {
|
---|
4591 | display:inline-block;
|
---|
4592 | margin: auto;
|
---|
4593 | }
|
---|
4594 | span {
|
---|
4595 | margin-top: auto;
|
---|
4596 | margin-bottom: auto;
|
---|
4597 | }
|
---|
4598 | .md-ripple-container {
|
---|
4599 | border-radius: inherit;
|
---|
4600 | }
|
---|
4601 | }
|
---|
4602 | }
|
---|
4603 |
|
---|
4604 | md-toolbar {
|
---|
4605 | .md-menu {
|
---|
4606 | height: auto;
|
---|
4607 | margin: auto;
|
---|
4608 | padding: 0;
|
---|
4609 | }
|
---|
4610 | }
|
---|
4611 |
|
---|
4612 | @media (max-width: $layout-breakpoint-sm - 1) {
|
---|
4613 | md-menu-content {
|
---|
4614 | min-width: 112px;
|
---|
4615 | }
|
---|
4616 | @for $i from 3 through 7 {
|
---|
4617 | md-menu-content[width="#{$i}"] {
|
---|
4618 | min-width: $i * 56px;
|
---|
4619 | }
|
---|
4620 | }
|
---|
4621 | }
|
---|
4622 |
|
---|
4623 | @media (min-width: $layout-breakpoint-sm) {
|
---|
4624 | md-menu-content {
|
---|
4625 | min-width: 96px;
|
---|
4626 | }
|
---|
4627 | @for $i from 3 through 7 {
|
---|
4628 | md-menu-content[width="#{$i}"] {
|
---|
4629 | min-width: $i * 64px;
|
---|
4630 | }
|
---|
4631 | }
|
---|
4632 | }
|
---|
4633 |
|
---|
4634 |
|
---|
4635 | md-toolbar {
|
---|
4636 | &.md-menu-toolbar {
|
---|
4637 | h2.md-toolbar-tools {
|
---|
4638 | line-height: 1rem;
|
---|
4639 | height: auto;
|
---|
4640 | padding: 3.5 * $baseline-grid;
|
---|
4641 | padding-bottom: 1.5 * $baseline-grid;
|
---|
4642 | }
|
---|
4643 | }
|
---|
4644 |
|
---|
4645 | // Used to allow hovering from one menu to the
|
---|
4646 | // next when inside of a toolbar.
|
---|
4647 | &.md-has-open-menu {
|
---|
4648 | position: relative;
|
---|
4649 | z-index: $z-index-menu;
|
---|
4650 | }
|
---|
4651 | }
|
---|
4652 |
|
---|
4653 | md-menu-bar {
|
---|
4654 | padding: 0 2.5 * $baseline-grid;
|
---|
4655 | display: block;
|
---|
4656 | position: relative;
|
---|
4657 | z-index: 2;
|
---|
4658 | .md-menu {
|
---|
4659 | display: inline-block;
|
---|
4660 | padding: 0;
|
---|
4661 | position: relative;
|
---|
4662 | }
|
---|
4663 | button {
|
---|
4664 | font-size: rem(1.4);
|
---|
4665 | padding: 0 1.25 * $baseline-grid;
|
---|
4666 | margin: 0;
|
---|
4667 | border: 0;
|
---|
4668 | background-color: transparent;
|
---|
4669 | height: 5 * $baseline-grid;
|
---|
4670 | }
|
---|
4671 |
|
---|
4672 | md-backdrop.md-menu-backdrop {
|
---|
4673 | z-index: -2;
|
---|
4674 | }
|
---|
4675 | }
|
---|
4676 |
|
---|
4677 | md-menu-content.md-menu-bar-menu.md-dense {
|
---|
4678 | max-height: none;
|
---|
4679 | padding: 2 * $baseline-grid 0;
|
---|
4680 | md-menu-item.md-indent {
|
---|
4681 | position: relative;
|
---|
4682 | > md-icon {
|
---|
4683 | position: absolute;
|
---|
4684 | padding: 0;
|
---|
4685 | width: 24px;
|
---|
4686 | top: 0.75 * $baseline-grid;
|
---|
4687 | @include rtl-prop(left, right, 3 * $baseline-grid, auto);
|
---|
4688 | }
|
---|
4689 | > .md-button, .md-menu > .md-button {
|
---|
4690 | @include rtl(padding, 0 4 * $baseline-grid 0 8 * $baseline-grid, 0 8 * $baseline-grid 0 4 * $baseline-grid);
|
---|
4691 | }
|
---|
4692 | }
|
---|
4693 | .md-button {
|
---|
4694 | min-height: 0;
|
---|
4695 | height: 4 * $baseline-grid;
|
---|
4696 | span {
|
---|
4697 | @include rtl(float, left, right);
|
---|
4698 | }
|
---|
4699 | span.md-alt-text {
|
---|
4700 | @include rtl(float, right, left);
|
---|
4701 | margin: 0 $baseline-grid;
|
---|
4702 | }
|
---|
4703 | }
|
---|
4704 | md-menu-divider {
|
---|
4705 | margin: $baseline-grid 0;
|
---|
4706 | }
|
---|
4707 |
|
---|
4708 | md-menu-item > .md-button, .md-menu > .md-button {
|
---|
4709 | @include rtl(text-align, left, right);
|
---|
4710 | }
|
---|
4711 |
|
---|
4712 | .md-menu {
|
---|
4713 | padding: 0;
|
---|
4714 | > .md-button {
|
---|
4715 | position: relative;
|
---|
4716 | margin: 0;
|
---|
4717 | width: 100%;
|
---|
4718 | text-transform: none;
|
---|
4719 | font-weight: normal;
|
---|
4720 | border-radius: 0px;
|
---|
4721 | @include rtl-prop(padding-left, padding-right, 2 * $baseline-grid, 0);
|
---|
4722 | &:after {
|
---|
4723 | display: block;
|
---|
4724 | content: '\25BC';
|
---|
4725 | position: absolute;
|
---|
4726 | top: 0px;
|
---|
4727 | speak: none;
|
---|
4728 | @include rtl(transform, rotate(270deg) scaleY(0.45) scaleX(0.9), rotate(90deg) scaleY(0.45) scaleX(0.9));
|
---|
4729 | @include rtl-prop(right, left, 3.5 * $baseline-grid, auto);
|
---|
4730 | }
|
---|
4731 | }
|
---|
4732 | }
|
---|
4733 | }
|
---|
4734 |
|
---|
4735 | /** Matches "md-tabs md-tabs-wrapper" style. */
|
---|
4736 | $md-nav-bar-height: 48px;
|
---|
4737 |
|
---|
4738 | .md-nav-bar {
|
---|
4739 | border-style: solid;
|
---|
4740 | border-width: 0 0 1px;
|
---|
4741 | height: $md-nav-bar-height;
|
---|
4742 | position: relative;
|
---|
4743 | }
|
---|
4744 |
|
---|
4745 | ._md-nav-bar-list {
|
---|
4746 | outline: none;
|
---|
4747 | list-style: none;
|
---|
4748 | margin: 0;
|
---|
4749 | padding: 0;
|
---|
4750 |
|
---|
4751 | // Layout [layout='row']
|
---|
4752 | box-sizing: border-box;
|
---|
4753 | display: flex;
|
---|
4754 | flex-direction: row;
|
---|
4755 | }
|
---|
4756 |
|
---|
4757 | .md-nav-item:first-of-type {
|
---|
4758 | margin-left: 8px;
|
---|
4759 | }
|
---|
4760 |
|
---|
4761 | // override button styles to look more like tabs
|
---|
4762 | .md-button._md-nav-button {
|
---|
4763 | line-height: 24px;
|
---|
4764 | margin: 0 4px;
|
---|
4765 | padding: 12px 16px;
|
---|
4766 | transition: background-color 0.35s $swift-ease-in-out-timing-function;
|
---|
4767 |
|
---|
4768 | &:focus {
|
---|
4769 | outline: none;
|
---|
4770 | }
|
---|
4771 | }
|
---|
4772 |
|
---|
4773 | md-nav-ink-bar {
|
---|
4774 | $duration: $swift-ease-in-out-duration * 0.5;
|
---|
4775 | $multiplier: 0.5;
|
---|
4776 | background-color: black;
|
---|
4777 | position: absolute;
|
---|
4778 | bottom: 0;
|
---|
4779 | left: 0;
|
---|
4780 | width: 100%;
|
---|
4781 | height: 2px;
|
---|
4782 | transform-origin: left top;
|
---|
4783 | will-change: transform;
|
---|
4784 | transition: transform ($duration * $multiplier) $swift-ease-in-out-timing-function;
|
---|
4785 |
|
---|
4786 | // By default $ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show.
|
---|
4787 | // The ink bar has a transition duration applied, which means, that $ngAnimate delays the hide process.
|
---|
4788 | // To avoid this, we need to reset the transition, when $ngAnimate looks for the duration.
|
---|
4789 | &.ng-animate {
|
---|
4790 | transition: none;
|
---|
4791 | }
|
---|
4792 |
|
---|
4793 | }
|
---|
4794 |
|
---|
4795 | md-nav-extra-content {
|
---|
4796 | min-height: 48px;
|
---|
4797 | padding-right: 12px;
|
---|
4798 | }
|
---|
4799 |
|
---|
4800 | $progress-circular-indeterminate-duration: 1568.63ms !default;
|
---|
4801 |
|
---|
4802 | @keyframes indeterminate-rotate {
|
---|
4803 | 0% { transform: rotate(0deg); }
|
---|
4804 | 100% { transform: rotate(360deg); }
|
---|
4805 | }
|
---|
4806 |
|
---|
4807 | // Used to avoid unnecessary layout
|
---|
4808 | md-progress-circular {
|
---|
4809 | position: relative;
|
---|
4810 | display: block;
|
---|
4811 |
|
---|
4812 | @include rtl(transform, scale(1, 1), scale(-1, 1));
|
---|
4813 |
|
---|
4814 | &._md-progress-circular-disabled {
|
---|
4815 | visibility: hidden;
|
---|
4816 | }
|
---|
4817 |
|
---|
4818 | &.md-mode-indeterminate svg {
|
---|
4819 | animation: indeterminate-rotate $progress-circular-indeterminate-duration linear infinite;
|
---|
4820 | }
|
---|
4821 |
|
---|
4822 | svg {
|
---|
4823 | position: absolute;
|
---|
4824 | overflow: visible;
|
---|
4825 | top: 0;
|
---|
4826 | left: 0;
|
---|
4827 | }
|
---|
4828 | }
|
---|
4829 |
|
---|
4830 | $progress-linear-bar-height: 5px !default;
|
---|
4831 |
|
---|
4832 | md-progress-linear {
|
---|
4833 | display: block;
|
---|
4834 | position: relative;
|
---|
4835 | width: 100%;
|
---|
4836 | height: $progress-linear-bar-height;
|
---|
4837 |
|
---|
4838 | padding-top: 0 !important;
|
---|
4839 | margin-bottom: 0 !important;
|
---|
4840 |
|
---|
4841 | @include rtl(transform, scale(1, 1), scale(-1, 1));
|
---|
4842 |
|
---|
4843 | &._md-progress-linear-disabled {
|
---|
4844 | visibility: hidden;
|
---|
4845 | }
|
---|
4846 |
|
---|
4847 | .md-container {
|
---|
4848 | display:block;
|
---|
4849 | position: relative;
|
---|
4850 | overflow: hidden;
|
---|
4851 |
|
---|
4852 | width:100%;
|
---|
4853 | height: $progress-linear-bar-height;
|
---|
4854 |
|
---|
4855 | transform: translate(0, 0) scale(1, 1);
|
---|
4856 |
|
---|
4857 | .md-bar {
|
---|
4858 | position: absolute;
|
---|
4859 |
|
---|
4860 | left: 0;
|
---|
4861 | top: 0;
|
---|
4862 | bottom: 0;
|
---|
4863 |
|
---|
4864 | width: 100%;
|
---|
4865 | height: $progress-linear-bar-height;
|
---|
4866 | }
|
---|
4867 |
|
---|
4868 | .md-dashed:before {
|
---|
4869 | content: "";
|
---|
4870 | display: none;
|
---|
4871 | position: absolute;
|
---|
4872 |
|
---|
4873 | margin-top: 0;
|
---|
4874 | height: $progress-linear-bar-height;
|
---|
4875 | width: 100%;
|
---|
4876 |
|
---|
4877 | background-color: transparent;
|
---|
4878 | background-size: 10px 10px !important;
|
---|
4879 | background-position: 0px -23px;
|
---|
4880 | }
|
---|
4881 |
|
---|
4882 | .md-bar1, .md-bar2 {
|
---|
4883 |
|
---|
4884 | // Just set the transition information here.
|
---|
4885 | // Note: the actual transform values are calculated in JS
|
---|
4886 |
|
---|
4887 | transition: transform 0.2s linear;
|
---|
4888 | }
|
---|
4889 |
|
---|
4890 | // ************************************************************
|
---|
4891 | // Animations for modes: Determinate, InDeterminate, and Query
|
---|
4892 | // ************************************************************
|
---|
4893 |
|
---|
4894 | &.md-mode-query {
|
---|
4895 | .md-bar1 {
|
---|
4896 | display: none;
|
---|
4897 | }
|
---|
4898 | .md-bar2 {
|
---|
4899 | transition: all 0.2s linear;
|
---|
4900 | animation: query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
---|
4901 | }
|
---|
4902 | }
|
---|
4903 |
|
---|
4904 | &.md-mode-determinate {
|
---|
4905 | .md-bar1 {
|
---|
4906 | display: none;
|
---|
4907 | }
|
---|
4908 | }
|
---|
4909 |
|
---|
4910 | &.md-mode-indeterminate {
|
---|
4911 | .md-bar1 {
|
---|
4912 | animation: md-progress-linear-indeterminate-scale-1 4s infinite,
|
---|
4913 | md-progress-linear-indeterminate-1 4s infinite;
|
---|
4914 | }
|
---|
4915 | .md-bar2 {
|
---|
4916 | animation: md-progress-linear-indeterminate-scale-2 4s infinite,
|
---|
4917 | md-progress-linear-indeterminate-2 4s infinite;
|
---|
4918 | }
|
---|
4919 | }
|
---|
4920 |
|
---|
4921 | &.ng-hide
|
---|
4922 | ._md-progress-linear-disabled & {
|
---|
4923 | animation: none;
|
---|
4924 |
|
---|
4925 | .md-bar1 {
|
---|
4926 | animation-name: none;
|
---|
4927 | }
|
---|
4928 | .md-bar2 {
|
---|
4929 | animation-name: none;
|
---|
4930 | }
|
---|
4931 | }
|
---|
4932 | }
|
---|
4933 |
|
---|
4934 | // Special animations for the `buffer` mode
|
---|
4935 |
|
---|
4936 | .md-container.md-mode-buffer {
|
---|
4937 | background-color: transparent !important;
|
---|
4938 |
|
---|
4939 | transition: all 0.2s linear;
|
---|
4940 |
|
---|
4941 | .md-dashed:before {
|
---|
4942 | display: block;
|
---|
4943 | animation: buffer 3s infinite linear;
|
---|
4944 | }
|
---|
4945 | }
|
---|
4946 | }
|
---|
4947 |
|
---|
4948 | @keyframes query {
|
---|
4949 | 0% {
|
---|
4950 | opacity: 1;
|
---|
4951 | transform: translateX(35%) scale(.3, 1);
|
---|
4952 | }
|
---|
4953 | 100% {
|
---|
4954 | opacity: 0;
|
---|
4955 | transform: translateX(-50%) scale(0, 1);
|
---|
4956 | }
|
---|
4957 | }
|
---|
4958 | @keyframes buffer {
|
---|
4959 | 0% {
|
---|
4960 | opacity: 1;
|
---|
4961 | background-position: 0px -23px;
|
---|
4962 | }
|
---|
4963 | 50% {
|
---|
4964 | opacity: 0;
|
---|
4965 | }
|
---|
4966 | 100% {
|
---|
4967 | opacity: 1;
|
---|
4968 | background-position: -200px -23px;
|
---|
4969 | }
|
---|
4970 | }
|
---|
4971 | @keyframes md-progress-linear-indeterminate-scale-1 {
|
---|
4972 | 0% {
|
---|
4973 | transform: scaleX(0.1);
|
---|
4974 | animation-timing-function: linear;
|
---|
4975 | }
|
---|
4976 | 36.6% {
|
---|
4977 | transform: scaleX(0.1);
|
---|
4978 | animation-timing-function: cubic-bezier(0.334731432, 0.124819821, 0.785843996, 1);
|
---|
4979 | }
|
---|
4980 | 69.15% {
|
---|
4981 | transform: scaleX(0.83);
|
---|
4982 | animation-timing-function: cubic-bezier(0.225732004, 0, 0.233648906, 1.3709798);
|
---|
4983 | }
|
---|
4984 | 100% {
|
---|
4985 | transform: scaleX(0.1);
|
---|
4986 | }
|
---|
4987 | }
|
---|
4988 | @keyframes md-progress-linear-indeterminate-1 {
|
---|
4989 | 0% {
|
---|
4990 | left: -378.6 * 100% / 360;
|
---|
4991 | animation-timing-function: linear;
|
---|
4992 | }
|
---|
4993 | 20% {
|
---|
4994 | left: -378.6 * 100% / 360;
|
---|
4995 | animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495818703);
|
---|
4996 | }
|
---|
4997 | 69.15% {
|
---|
4998 | left: 77.4 * 100% / 360;
|
---|
4999 | animation-timing-function: cubic-bezier(0.302435, 0.38135197, 0.55, 0.956352125);
|
---|
5000 | }
|
---|
5001 | 100% {
|
---|
5002 | left: 343.6 * 100% / 360;
|
---|
5003 | }
|
---|
5004 | }
|
---|
5005 | @keyframes md-progress-linear-indeterminate-scale-2 {
|
---|
5006 | 0% {
|
---|
5007 | transform: scaleX(0.1);
|
---|
5008 | animation-timing-function: cubic-bezier(0.205028172, 0.057050836, 0.57660995, 0.453970841);
|
---|
5009 | }
|
---|
5010 | 19.15% {
|
---|
5011 | transform: scaleX(0.57);
|
---|
5012 | animation-timing-function: cubic-bezier(0.152312994, 0.196431957, 0.648373778, 1.00431535);
|
---|
5013 | }
|
---|
5014 | 44.15% {
|
---|
5015 | transform: scaleX(0.91);
|
---|
5016 | animation-timing-function: cubic-bezier(0.25775882, -0.003163357, 0.211761916, 1.38178961);
|
---|
5017 | }
|
---|
5018 | 100% {
|
---|
5019 | transform: scaleX(0.1);
|
---|
5020 | }
|
---|
5021 | }
|
---|
5022 | @keyframes md-progress-linear-indeterminate-2 {
|
---|
5023 | 0% {
|
---|
5024 | left: -197.6 * 100% / 360;
|
---|
5025 | animation-timing-function: cubic-bezier(0.15, 0, 0.5150584, 0.409684966);
|
---|
5026 | }
|
---|
5027 | 25% {
|
---|
5028 | left: -62.1 * 100% / 360;
|
---|
5029 | animation-timing-function: cubic-bezier(0.3103299, 0.284057684, 0.8, 0.733718979);
|
---|
5030 | }
|
---|
5031 | 48.35% {
|
---|
5032 | left: 106.2 * 100% / 360;
|
---|
5033 | animation-timing-function: cubic-bezier(0.4, 0.627034903, 0.6, 0.902025796);
|
---|
5034 | }
|
---|
5035 | 100% {
|
---|
5036 | left: 422.6 * 100% / 360;
|
---|
5037 | }
|
---|
5038 | }
|
---|
5039 |
|
---|
5040 |
|
---|
5041 |
|
---|
5042 | $radio-width: 20px !default;
|
---|
5043 | $radio-height: $radio-width !default;
|
---|
5044 | $radio-text-margin: 10px !default;
|
---|
5045 | $radio-top-left: 12px !default;
|
---|
5046 | $radio-margin: 16px !default;
|
---|
5047 |
|
---|
5048 | @mixin md-radio-button-disabled {
|
---|
5049 | cursor: default;
|
---|
5050 |
|
---|
5051 | .md-container {
|
---|
5052 | cursor: default;
|
---|
5053 | }
|
---|
5054 | }
|
---|
5055 |
|
---|
5056 | md-radio-button {
|
---|
5057 | box-sizing: border-box;
|
---|
5058 | display: block;
|
---|
5059 | margin-bottom: $radio-margin;
|
---|
5060 | white-space: nowrap;
|
---|
5061 | cursor: pointer;
|
---|
5062 | position: relative;
|
---|
5063 |
|
---|
5064 | // When the radio-button is disabled.
|
---|
5065 | &[disabled] {
|
---|
5066 | @include md-radio-button-disabled();
|
---|
5067 | }
|
---|
5068 |
|
---|
5069 | .md-container {
|
---|
5070 | position: absolute;
|
---|
5071 | top: 50%;
|
---|
5072 | transform: translateY(-50%);
|
---|
5073 | box-sizing: border-box;
|
---|
5074 | display: inline-block;
|
---|
5075 | width: $radio-width;
|
---|
5076 | height: $radio-width;
|
---|
5077 | cursor: pointer;
|
---|
5078 | @include rtl(left, 0, auto);
|
---|
5079 | @include rtl(right, auto, 0);
|
---|
5080 |
|
---|
5081 | .md-ripple-container {
|
---|
5082 | position: absolute;
|
---|
5083 | display: block;
|
---|
5084 | width: auto;
|
---|
5085 | height: auto;
|
---|
5086 | left: -15px;
|
---|
5087 | top: -15px;
|
---|
5088 | right: -15px;
|
---|
5089 | bottom: -15px;
|
---|
5090 | }
|
---|
5091 |
|
---|
5092 | &:before {
|
---|
5093 | box-sizing: border-box;
|
---|
5094 | background-color: transparent;
|
---|
5095 | border-radius: 50%;
|
---|
5096 | content: '';
|
---|
5097 | position: absolute;
|
---|
5098 | display: block;
|
---|
5099 | height: auto;
|
---|
5100 | left: 0;
|
---|
5101 | top: 0;
|
---|
5102 | right: 0;
|
---|
5103 | bottom: 0;
|
---|
5104 | transition: all 0.5s;
|
---|
5105 | width: auto;
|
---|
5106 | }
|
---|
5107 | }
|
---|
5108 |
|
---|
5109 | &.md-align-top-left > div.md-container {
|
---|
5110 | top: $radio-top-left;
|
---|
5111 | }
|
---|
5112 |
|
---|
5113 | .md-off {
|
---|
5114 | box-sizing: border-box;
|
---|
5115 | position: absolute;
|
---|
5116 | top: 0;
|
---|
5117 | left: 0;
|
---|
5118 | width: $radio-width;
|
---|
5119 | height: $radio-width;
|
---|
5120 | border-style: solid;
|
---|
5121 | border-width: 2px;
|
---|
5122 | border-radius: 50%;
|
---|
5123 | transition: border-color ease 0.28s;
|
---|
5124 | }
|
---|
5125 |
|
---|
5126 | .md-on {
|
---|
5127 | box-sizing: border-box;
|
---|
5128 | position: absolute;
|
---|
5129 | top: 0;
|
---|
5130 | left: 0;
|
---|
5131 | width: $radio-width;
|
---|
5132 | height: $radio-width;
|
---|
5133 | border-radius: 50%;
|
---|
5134 | transition: transform ease 0.28s;
|
---|
5135 | transform: scale(0);
|
---|
5136 | }
|
---|
5137 |
|
---|
5138 | &.md-checked .md-on {
|
---|
5139 | transform: scale(0.50);
|
---|
5140 | }
|
---|
5141 |
|
---|
5142 | .md-label {
|
---|
5143 | box-sizing: border-box;
|
---|
5144 | position: relative;
|
---|
5145 | display: inline-block;
|
---|
5146 |
|
---|
5147 | @include rtl(margin-left, $radio-text-margin + $radio-width, 0);
|
---|
5148 | @include rtl(margin-right, 0, $radio-text-margin + $radio-width);
|
---|
5149 |
|
---|
5150 | vertical-align: middle;
|
---|
5151 | white-space: normal;
|
---|
5152 | pointer-events: none;
|
---|
5153 | width: auto;
|
---|
5154 | }
|
---|
5155 | }
|
---|
5156 |
|
---|
5157 | md-radio-group {
|
---|
5158 | &:focus {
|
---|
5159 | outline: none;
|
---|
5160 | }
|
---|
5161 |
|
---|
5162 | &.md-focused.ng-not-empty {
|
---|
5163 | .md-checked .md-container:before {
|
---|
5164 | left: -8px;
|
---|
5165 | top: -8px;
|
---|
5166 | right: -8px;
|
---|
5167 | bottom: -8px;
|
---|
5168 | }
|
---|
5169 | }
|
---|
5170 | &.md-focused.ng-empty>md-radio-button:first-child {
|
---|
5171 | .md-container:before {
|
---|
5172 | left: -8px;
|
---|
5173 | top: -8px;
|
---|
5174 | right: -8px;
|
---|
5175 | bottom: -8px;
|
---|
5176 | }
|
---|
5177 | }
|
---|
5178 |
|
---|
5179 | &[disabled] md-radio-button {
|
---|
5180 | @include md-radio-button-disabled();
|
---|
5181 | }
|
---|
5182 | }
|
---|
5183 |
|
---|
5184 | @include when-layout-row(md-radio-button) {
|
---|
5185 | margin-bottom: 0;
|
---|
5186 | }
|
---|
5187 |
|
---|
5188 | .md-inline-form {
|
---|
5189 | md-radio-group {
|
---|
5190 | margin: $input-container-vertical-margin 0 $input-container-vertical-margin + 1px;
|
---|
5191 | md-radio-button {
|
---|
5192 | display: inline-block;
|
---|
5193 | height: 30px;
|
---|
5194 | padding: 2px 10px 2px 6px;
|
---|
5195 | box-sizing: border-box;
|
---|
5196 | margin-top: 0;
|
---|
5197 | margin-bottom: 0;
|
---|
5198 |
|
---|
5199 | .md-label {
|
---|
5200 | top: 4px;
|
---|
5201 | }
|
---|
5202 | .md-container {
|
---|
5203 | margin-top: 2px;
|
---|
5204 | }
|
---|
5205 | }
|
---|
5206 | }
|
---|
5207 | }
|
---|
5208 |
|
---|
5209 | @media screen and (-ms-high-contrast: active) {
|
---|
5210 | md-radio-button.md-default-theme .md-on {
|
---|
5211 | background-color: #fff;
|
---|
5212 | }
|
---|
5213 | }
|
---|
5214 |
|
---|
5215 | $select-checkbox-border-radius: 2px !default;
|
---|
5216 | $select-checkbox-border-width: 2px !default;
|
---|
5217 | $select-border-width-default: 1px !default;
|
---|
5218 | $select-checkbox-width: rem(1.4) !default;
|
---|
5219 | $select-option-height: 48px !default;
|
---|
5220 | $select-option-padding: 16px !default;
|
---|
5221 | $select-container-padding: 16px !default;
|
---|
5222 | $select-container-transition-duration: 350ms !default;
|
---|
5223 | $select-value-padding-top: 2px;
|
---|
5224 | $select-value-padding-bottom: 1px;
|
---|
5225 |
|
---|
5226 | $select-max-visible-options: 5 !default;
|
---|
5227 |
|
---|
5228 | $input-alignment: ($input-padding-top + $input-padding-bottom)
|
---|
5229 | - ($select-value-padding-top + $select-value-padding-bottom);
|
---|
5230 | $md-inline-alignment: ($input-container-vertical-margin + $input-container-padding)
|
---|
5231 | + ($input-padding-top + $input-padding-bottom)
|
---|
5232 | - ($select-value-padding-top + $select-value-padding-bottom);
|
---|
5233 |
|
---|
5234 | // Fixes the animations with the floating label when select is inside an input container
|
---|
5235 | md-input-container {
|
---|
5236 | &:not([md-no-float]) {
|
---|
5237 | .md-select-placeholder span:first-child {
|
---|
5238 | transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
|
---|
5239 | @include rtl(transform-origin, left top, right top);
|
---|
5240 | }
|
---|
5241 | }
|
---|
5242 | &.md-input-focused {
|
---|
5243 | &:not([md-no-float]) {
|
---|
5244 | md-select:not([placeholder]) .md-select-placeholder span:first-child {
|
---|
5245 | transform: translate(-2px, -22px) scale(0.75);
|
---|
5246 | }
|
---|
5247 | }
|
---|
5248 | }
|
---|
5249 | }
|
---|
5250 |
|
---|
5251 | .md-select-menu-container {
|
---|
5252 | position: fixed;
|
---|
5253 | left: 0;
|
---|
5254 | top: 0;
|
---|
5255 | z-index: $z-index-select;
|
---|
5256 | opacity: 0;
|
---|
5257 | display: none;
|
---|
5258 |
|
---|
5259 | // Fix 1px alignment issue to line up with text inputs (and spec)
|
---|
5260 | transform: translateY(-1px);
|
---|
5261 |
|
---|
5262 | // Don't let the user select a new choice while it's animating
|
---|
5263 | &:not(.md-clickable) {
|
---|
5264 | pointer-events: none;
|
---|
5265 | }
|
---|
5266 |
|
---|
5267 | md-progress-circular {
|
---|
5268 | display: table;
|
---|
5269 | margin: 3*$baseline-grid auto !important;
|
---|
5270 | }
|
---|
5271 |
|
---|
5272 | // enter: md-select scales in, then options fade in.
|
---|
5273 | &.md-active {
|
---|
5274 | display: block;
|
---|
5275 | opacity: 1;
|
---|
5276 | md-select-menu {
|
---|
5277 | transition: $swift-ease-out;
|
---|
5278 | transition-duration: 150ms;
|
---|
5279 | > * {
|
---|
5280 | opacity: 1;
|
---|
5281 | transition: $swift-ease-in;
|
---|
5282 | transition-duration: 150ms;
|
---|
5283 | transition-delay: 100ms;
|
---|
5284 | }
|
---|
5285 | }
|
---|
5286 | }
|
---|
5287 |
|
---|
5288 | // leave: the container fades out
|
---|
5289 | &.md-leave {
|
---|
5290 | opacity: 0;
|
---|
5291 | transition: $swift-ease-in;
|
---|
5292 | transition-duration: 250ms;
|
---|
5293 | }
|
---|
5294 | }
|
---|
5295 |
|
---|
5296 | .md-inline-form md-select {
|
---|
5297 | margin-top: $md-inline-alignment;
|
---|
5298 | }
|
---|
5299 |
|
---|
5300 | md-input-container {
|
---|
5301 | > md-select,
|
---|
5302 | .md-inline-form & > md-select {
|
---|
5303 | margin-top: $input-alignment;
|
---|
5304 | }
|
---|
5305 | > md-select {
|
---|
5306 | order: 2;
|
---|
5307 | }
|
---|
5308 | }
|
---|
5309 |
|
---|
5310 | // Show the asterisk on the placeholder if the element is required
|
---|
5311 | //
|
---|
5312 | // NOTE: When the input has a value and uses a floating label, the floating label will show the
|
---|
5313 | // asterisk denoting that it is required
|
---|
5314 | md-input-container:not(.md-input-has-value) {
|
---|
5315 | md-select[required]:not(.md-no-asterisk), md-select.ng-required:not(.md-no-asterisk) {
|
---|
5316 | .md-select-value span:first-child:after {
|
---|
5317 | content: ' *';
|
---|
5318 | font-size: 13px;
|
---|
5319 | vertical-align: top;
|
---|
5320 | }
|
---|
5321 | }
|
---|
5322 | }
|
---|
5323 |
|
---|
5324 | md-input-container.md-input-invalid {
|
---|
5325 | md-select {
|
---|
5326 | .md-select-value {
|
---|
5327 | border-bottom-style: solid;
|
---|
5328 | padding-bottom: 1px;
|
---|
5329 | }
|
---|
5330 | }
|
---|
5331 | }
|
---|
5332 |
|
---|
5333 | md-select {
|
---|
5334 | display: flex;
|
---|
5335 |
|
---|
5336 | &[required], &.ng-required {
|
---|
5337 | &.ng-empty.ng-invalid:not(.md-no-asterisk) {
|
---|
5338 | .md-select-value span:first-child:after {
|
---|
5339 | content: ' *';
|
---|
5340 | font-size: 13px;
|
---|
5341 | vertical-align: top;
|
---|
5342 | }
|
---|
5343 | }
|
---|
5344 | }
|
---|
5345 |
|
---|
5346 | &[disabled] .md-select-value {
|
---|
5347 | // This background-position was taken from the styling of disabled md-inputs.
|
---|
5348 | // The negative border width offsets the dotted "border" so it's placed in the same place as the
|
---|
5349 | // solid one before it.
|
---|
5350 | background-position: bottom $select-border-width-default * -1 left 0;
|
---|
5351 | // This background-size is coordinated with a linear-gradient set in select-theme.scss
|
---|
5352 | // to create a dotted line under the input.
|
---|
5353 | background-size: 4px 1px;
|
---|
5354 | background-repeat: repeat-x;
|
---|
5355 | // Add to padding-bottom to keep dotted line aligned with other bottom borders
|
---|
5356 | // Sub from padding-top to keep height consistent
|
---|
5357 | // Translate text 1px up to keep in alignment
|
---|
5358 | padding-bottom: $select-value-padding-bottom + 1;
|
---|
5359 | padding-top: $select-value-padding-top - 1;
|
---|
5360 | transform: translateY(1px);
|
---|
5361 | }
|
---|
5362 |
|
---|
5363 | &:focus {
|
---|
5364 | outline: none;
|
---|
5365 | }
|
---|
5366 | &[disabled]:hover {
|
---|
5367 | cursor: default;
|
---|
5368 | }
|
---|
5369 | &:not([disabled]) {
|
---|
5370 | &:hover {
|
---|
5371 | cursor: pointer
|
---|
5372 | }
|
---|
5373 | &:focus {
|
---|
5374 | .md-select-value {
|
---|
5375 | border-bottom-style: solid;
|
---|
5376 | border-bottom-width: $select-border-width-default + 1px;
|
---|
5377 | padding-bottom: $select-value-padding-bottom - 1px;
|
---|
5378 | }
|
---|
5379 | }
|
---|
5380 | }
|
---|
5381 | }
|
---|
5382 |
|
---|
5383 | md-input-container md-select {
|
---|
5384 | &:not([disabled]) {
|
---|
5385 | &:focus {
|
---|
5386 | .md-select-value {
|
---|
5387 | border-bottom-width: $input-border-width-focused;
|
---|
5388 | }
|
---|
5389 | }
|
---|
5390 | }
|
---|
5391 | &[disabled] {
|
---|
5392 | .md-select-value {
|
---|
5393 | // This background-position was taken from and matches the styling of disabled md-inputs.
|
---|
5394 | // The negative border width offsets the dotted "border" so it's placed in the same place as
|
---|
5395 | // the solid one before it.
|
---|
5396 | background-position: bottom $input-border-width-default * -1 left 0;
|
---|
5397 | }
|
---|
5398 | }
|
---|
5399 | .md-select-value {
|
---|
5400 | min-height: ($input-line-height + $input-padding-top * 2) - $input-border-width-focused - $input-border-width-default * 2;
|
---|
5401 | border-bottom-width: $input-border-width-default;
|
---|
5402 | padding-bottom: $input-border-width-focused - $input-border-width-default;
|
---|
5403 | &.md-select-placeholder {
|
---|
5404 | @include rtl(padding-left, 0, $input-container-padding);
|
---|
5405 | @include rtl(padding-right, $input-container-padding, 0);
|
---|
5406 | }
|
---|
5407 | }
|
---|
5408 | }
|
---|
5409 |
|
---|
5410 | .md-select-value {
|
---|
5411 | display: flex;
|
---|
5412 | align-items: center;
|
---|
5413 | padding-top: $select-value-padding-top;
|
---|
5414 | padding-bottom: $select-value-padding-bottom;
|
---|
5415 | @include rtl(padding-left, 0, $input-container-padding);
|
---|
5416 | @include rtl(padding-right, $input-container-padding, 0);
|
---|
5417 | border-bottom-width: $select-border-width-default;
|
---|
5418 | border-bottom-style: solid;
|
---|
5419 | background-color: rgba(0,0,0,0);
|
---|
5420 | position: relative;
|
---|
5421 | box-sizing: content-box;
|
---|
5422 | min-width: 11 * $baseline-grid;
|
---|
5423 | min-height: 26px;
|
---|
5424 | margin-bottom: auto;
|
---|
5425 | -ms-flex-item-align: start; // workaround for margin-bottom: auto
|
---|
5426 | flex-grow: 1;
|
---|
5427 |
|
---|
5428 | > span:not(.md-select-icon) {
|
---|
5429 | max-width: 100%;
|
---|
5430 | flex: 1 1 auto;
|
---|
5431 | text-overflow: ellipsis;
|
---|
5432 | white-space: nowrap;
|
---|
5433 | overflow: hidden;
|
---|
5434 |
|
---|
5435 | .md-text {
|
---|
5436 | display: inline;
|
---|
5437 | }
|
---|
5438 | }
|
---|
5439 |
|
---|
5440 | .md-select-icon {
|
---|
5441 | display: block;
|
---|
5442 | @include rtl(align-items, flex-end, flex-start);
|
---|
5443 | @include rtl(text-align, right, left);
|
---|
5444 | width: 3 * $baseline-grid;
|
---|
5445 | transform: translateY(-2px);
|
---|
5446 | font-size: 1.2rem;
|
---|
5447 | }
|
---|
5448 |
|
---|
5449 | .md-select-icon:after {
|
---|
5450 | display: block;
|
---|
5451 | content: '\25BC';
|
---|
5452 | position: relative;
|
---|
5453 | top: 2px;
|
---|
5454 | @include rtl(right, -4px, auto);
|
---|
5455 | @include rtl(left, auto, -4px);
|
---|
5456 | speak: none;
|
---|
5457 | font-size: 13px;
|
---|
5458 | transform: scaleY(0.5);
|
---|
5459 | }
|
---|
5460 |
|
---|
5461 | &.md-select-placeholder {
|
---|
5462 | display: flex;
|
---|
5463 | order: 1;
|
---|
5464 | pointer-events: none;
|
---|
5465 | -webkit-font-smoothing: antialiased;
|
---|
5466 | z-index: 1;
|
---|
5467 | }
|
---|
5468 | }
|
---|
5469 |
|
---|
5470 | md-select-menu {
|
---|
5471 | display: flex;
|
---|
5472 | flex-direction: column;
|
---|
5473 | &.md-reverse {
|
---|
5474 | flex-direction: column-reverse;
|
---|
5475 | }
|
---|
5476 |
|
---|
5477 | &:not(.md-overflow) {
|
---|
5478 | md-content {
|
---|
5479 | padding-top: $baseline-grid;
|
---|
5480 | padding-bottom: $baseline-grid;
|
---|
5481 | }
|
---|
5482 | }
|
---|
5483 |
|
---|
5484 | box-shadow: $whiteframe-shadow-1dp;
|
---|
5485 | max-height: ($select-option-height * $select-max-visible-options) + 2 * $baseline-grid;
|
---|
5486 | min-height: $select-option-height;
|
---|
5487 | overflow-y: hidden;
|
---|
5488 |
|
---|
5489 | @include rtl(transform-origin, left top, right top);
|
---|
5490 |
|
---|
5491 | transform: scale(1.0);
|
---|
5492 |
|
---|
5493 | md-content {
|
---|
5494 | min-width: 136px;
|
---|
5495 | min-height: $select-option-height;
|
---|
5496 | max-height: ($select-option-height * $select-max-visible-options) + 2 * $baseline-grid;
|
---|
5497 | overflow-y: auto;
|
---|
5498 | }
|
---|
5499 | > * {
|
---|
5500 | opacity: 0;
|
---|
5501 | }
|
---|
5502 | }
|
---|
5503 |
|
---|
5504 | md-option {
|
---|
5505 | cursor: pointer;
|
---|
5506 | position: relative;
|
---|
5507 | display: flex;
|
---|
5508 | align-items: center;
|
---|
5509 | width: auto;
|
---|
5510 | transition: background 0.15s linear;
|
---|
5511 |
|
---|
5512 | &[disabled] {
|
---|
5513 | cursor: default;
|
---|
5514 | }
|
---|
5515 |
|
---|
5516 | &:focus {
|
---|
5517 | outline: none;
|
---|
5518 | }
|
---|
5519 |
|
---|
5520 | .md-text {
|
---|
5521 | @include not-selectable();
|
---|
5522 | width: auto;
|
---|
5523 | white-space: nowrap;
|
---|
5524 | overflow: hidden;
|
---|
5525 | text-overflow: ellipsis;
|
---|
5526 | }
|
---|
5527 | padding: 0 $select-option-padding 0 $select-option-padding;
|
---|
5528 | height: $select-option-height;
|
---|
5529 | }
|
---|
5530 |
|
---|
5531 | md-optgroup {
|
---|
5532 | display: block;
|
---|
5533 | label {
|
---|
5534 | display: block;
|
---|
5535 | font-size: rem(1.4);
|
---|
5536 | text-transform: uppercase;
|
---|
5537 | padding: $baseline-grid * 2;
|
---|
5538 | font-weight: 500;
|
---|
5539 | }
|
---|
5540 | md-option {
|
---|
5541 | padding-left: $select-option-padding * 2;
|
---|
5542 | padding-right: $select-option-padding * 2;
|
---|
5543 | }
|
---|
5544 | }
|
---|
5545 |
|
---|
5546 | @media screen and (-ms-high-contrast: active) {
|
---|
5547 | .md-select-backdrop {
|
---|
5548 | background-color: transparent;
|
---|
5549 | }
|
---|
5550 | md-select-menu {
|
---|
5551 | border: 1px solid #fff;
|
---|
5552 | }
|
---|
5553 | }
|
---|
5554 |
|
---|
5555 | md-select-menu[multiple] {
|
---|
5556 | md-option.md-checkbox-enabled {
|
---|
5557 | @include rtl(padding-left, $select-option-padding * 2.5, $select-option-padding);
|
---|
5558 | @include rtl(padding-right, $select-option-padding, $select-option-padding * 2.5);
|
---|
5559 |
|
---|
5560 | @include checkbox-container('[selected]');
|
---|
5561 |
|
---|
5562 | .md-container {
|
---|
5563 | @include rtl(margin-left, $select-option-padding * (2 / 3), auto);
|
---|
5564 | @include rtl(margin-right, auto, $select-option-padding * (2 / 3));
|
---|
5565 | }
|
---|
5566 | }
|
---|
5567 | }
|
---|
5568 |
|
---|
5569 | $sidenav-mobile-width: 320px !default;
|
---|
5570 | $sidenav-desktop-width: 400px !default;
|
---|
5571 | $sidenav-min-space: 56px !default;
|
---|
5572 |
|
---|
5573 | md-sidenav {
|
---|
5574 | box-sizing: border-box;
|
---|
5575 | position: absolute;
|
---|
5576 | flex-direction: column;
|
---|
5577 | z-index: $z-index-sidenav;
|
---|
5578 |
|
---|
5579 | width: $sidenav-mobile-width;
|
---|
5580 | max-width: $sidenav-mobile-width;
|
---|
5581 | bottom: 0;
|
---|
5582 | overflow: auto;
|
---|
5583 | -webkit-overflow-scrolling: touch;
|
---|
5584 |
|
---|
5585 | ul {
|
---|
5586 | list-style: none;
|
---|
5587 | }
|
---|
5588 |
|
---|
5589 | // Animation Comment Syntax: [mdLockedOpen]|[mdClosed]
|
---|
5590 | // mdLockedOpen states: unlocked, locked, any
|
---|
5591 | // mdClosed states: open, closed, any
|
---|
5592 | // Default state: unlocked|open
|
---|
5593 |
|
---|
5594 | // unlocked|closed
|
---|
5595 | &.md-closed {
|
---|
5596 | display: none;
|
---|
5597 | }
|
---|
5598 |
|
---|
5599 | // any|open <=> any|closed
|
---|
5600 | &.md-closed-add,
|
---|
5601 | &.md-closed-remove {
|
---|
5602 | display: flex;
|
---|
5603 | transition: 0.2s ease-in all;
|
---|
5604 | }
|
---|
5605 |
|
---|
5606 | // any|open <=> any|closed (animating)
|
---|
5607 | &.md-closed-add.md-closed-add-active,
|
---|
5608 | &.md-closed-remove.md-closed-remove-active {
|
---|
5609 | transition: $swift-ease-out;
|
---|
5610 | }
|
---|
5611 |
|
---|
5612 | // unlocked|any <=> locked|any
|
---|
5613 | &.md-locked-open-add,
|
---|
5614 | &.md-locked-open-remove {
|
---|
5615 | position: static;
|
---|
5616 | display: flex;
|
---|
5617 | transform: translate3d(0, 0, 0);
|
---|
5618 | }
|
---|
5619 |
|
---|
5620 | // locked|any
|
---|
5621 | &.md-locked-open,
|
---|
5622 | &.md-locked-open.md-closed,
|
---|
5623 | &.md-locked-open.md-closed.md-sidenav-left,
|
---|
5624 | &.md-locked-open.md-closed.md-sidenav-right {
|
---|
5625 | position: static;
|
---|
5626 | display: flex;
|
---|
5627 | transform: translate3d(0, 0, 0);
|
---|
5628 | }
|
---|
5629 |
|
---|
5630 | // locked|closed => unlock|closed
|
---|
5631 | &.md-locked-open-remove.md-closed {
|
---|
5632 | position: static;
|
---|
5633 | display: flex;
|
---|
5634 | transform: translate3d(0, 0, 0);
|
---|
5635 | }
|
---|
5636 |
|
---|
5637 | // unlocked|closed => locked|closed
|
---|
5638 | &.md-closed.md-locked-open-add {
|
---|
5639 | position: static;
|
---|
5640 | display: flex;
|
---|
5641 | transform: translate3d(0%, 0, 0);
|
---|
5642 | }
|
---|
5643 |
|
---|
5644 | // unlocked|closed => locked|closed (pre-animation)
|
---|
5645 | &.md-closed.md-locked-open-add:not(.md-locked-open-add-active) {
|
---|
5646 | transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
|
---|
5647 | min-width $swift-ease-in-duration $swift-ease-in-timing-function;
|
---|
5648 | width: 0 !important;
|
---|
5649 | min-width: 0 !important;
|
---|
5650 | }
|
---|
5651 |
|
---|
5652 | // unlocked|closed => locked|closed (animating)
|
---|
5653 | &.md-closed.md-locked-open-add-active {
|
---|
5654 | transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
|
---|
5655 | min-width $swift-ease-in-duration $swift-ease-in-timing-function;
|
---|
5656 | }
|
---|
5657 |
|
---|
5658 | // locked|any => unlocked|any (animating)
|
---|
5659 | &.md-locked-open-remove-active {
|
---|
5660 | transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
|
---|
5661 | min-width $swift-ease-in-duration $swift-ease-in-timing-function;
|
---|
5662 | width: 0 !important;
|
---|
5663 | min-width: 0 !important;
|
---|
5664 | }
|
---|
5665 |
|
---|
5666 | @extend .md-sidenav-left;
|
---|
5667 | }
|
---|
5668 | .md-sidenav-backdrop.md-locked-open {
|
---|
5669 | display: none;
|
---|
5670 | }
|
---|
5671 |
|
---|
5672 | .md-sidenav-left {
|
---|
5673 | left: 0;
|
---|
5674 | top: 0;
|
---|
5675 | transform: translate3d(0%, 0, 0);
|
---|
5676 | &.md-closed {
|
---|
5677 | transform: translate3d(-100%, 0, 0);
|
---|
5678 | }
|
---|
5679 | }
|
---|
5680 |
|
---|
5681 | .md-sidenav-right {
|
---|
5682 | left: 100%;
|
---|
5683 | top: 0;
|
---|
5684 | transform: translate(-100%, 0);
|
---|
5685 | &.md-closed {
|
---|
5686 | transform: translate(0%, 0);
|
---|
5687 | }
|
---|
5688 | }
|
---|
5689 |
|
---|
5690 | @media (min-width: $layout-breakpoint-xs) {
|
---|
5691 | md-sidenav {
|
---|
5692 | max-width: $sidenav-desktop-width;
|
---|
5693 | }
|
---|
5694 | }
|
---|
5695 |
|
---|
5696 | @media (max-width: $sidenav-desktop-width + $sidenav-min-space) {
|
---|
5697 | md-sidenav {
|
---|
5698 | width: calc(100% - #{$sidenav-min-space});
|
---|
5699 | min-width: calc(100% - #{$sidenav-min-space});
|
---|
5700 | max-width: calc(100% - #{$sidenav-min-space});
|
---|
5701 | }
|
---|
5702 | }
|
---|
5703 |
|
---|
5704 | // IE Only
|
---|
5705 | @media screen and (-ms-high-contrast: active) {
|
---|
5706 | .md-sidenav-left {
|
---|
5707 | border-right: 1px solid #fff;
|
---|
5708 | }
|
---|
5709 | .md-sidenav-right {
|
---|
5710 | border-left: 1px solid #fff;
|
---|
5711 | }
|
---|
5712 | }
|
---|
5713 |
|
---|
5714 | $slider-background-color: rgb(200, 200, 200) !default;
|
---|
5715 | $slider-size: 48px !default;
|
---|
5716 | $slider-min-size: 128px !default;
|
---|
5717 |
|
---|
5718 | $slider-track-height: 2px !default;
|
---|
5719 | $slider-thumb-width: 20px !default;
|
---|
5720 | $slider-thumb-height: $slider-thumb-width !default;
|
---|
5721 |
|
---|
5722 | $slider-thumb-default-scale: 0.7 !default;
|
---|
5723 | $slider-thumb-hover-scale: 0.8 !default;
|
---|
5724 | $slider-thumb-focus-scale: 1 !default;
|
---|
5725 | $slider-thumb-disabled-scale: 0.5 !default;
|
---|
5726 | $slider-thumb-disabled-border: 4px !default;
|
---|
5727 | $slider-thumb-focus-duration: .7s !default;
|
---|
5728 |
|
---|
5729 | $slider-focus-thumb-width: 34px !default;
|
---|
5730 | $slider-focus-thumb-height: $slider-focus-thumb-width !default;
|
---|
5731 | $slider-focus-ring-border-width: 3px !default;
|
---|
5732 |
|
---|
5733 | $slider-arrow-height: 16px !default;
|
---|
5734 | $slider-arrow-width: 28px !default;
|
---|
5735 |
|
---|
5736 | $slider-sign-height: 28px !default;
|
---|
5737 | $slider-sign-width: 28px !default;
|
---|
5738 | $slider-sign-top: ($slider-size / 2) - ($slider-thumb-default-scale * $slider-thumb-height / 2) - ($slider-sign-height) - ($slider-arrow-height) + 10px !default;
|
---|
5739 |
|
---|
5740 | @keyframes sliderFocusThumb {
|
---|
5741 | 0% {
|
---|
5742 | transform: scale($slider-thumb-default-scale);
|
---|
5743 | }
|
---|
5744 | 30% {
|
---|
5745 | transform: scale($slider-thumb-focus-scale);
|
---|
5746 | }
|
---|
5747 | 100% {
|
---|
5748 | transform: scale($slider-thumb-default-scale);
|
---|
5749 | }
|
---|
5750 | }
|
---|
5751 |
|
---|
5752 | @keyframes sliderDiscreteFocusThumb {
|
---|
5753 | 0% {
|
---|
5754 | transform: scale($slider-thumb-default-scale);
|
---|
5755 | }
|
---|
5756 | 50% {
|
---|
5757 | transform: scale($slider-thumb-hover-scale);
|
---|
5758 | }
|
---|
5759 | 100% {
|
---|
5760 | transform: scale(0);
|
---|
5761 | }
|
---|
5762 | }
|
---|
5763 |
|
---|
5764 | @keyframes sliderDiscreteFocusRing {
|
---|
5765 | 0% {
|
---|
5766 | transform: scale(0.7);
|
---|
5767 | opacity: 0;
|
---|
5768 | }
|
---|
5769 | 50% {
|
---|
5770 | transform: scale(1);
|
---|
5771 | opacity: 1;
|
---|
5772 | }
|
---|
5773 | 100% {
|
---|
5774 | transform: scale(0);
|
---|
5775 | }
|
---|
5776 | }
|
---|
5777 |
|
---|
5778 | @mixin slider-thumb-position($width: $slider-thumb-width, $height: $slider-thumb-height) {
|
---|
5779 | position: absolute;
|
---|
5780 | @include rtl-prop(left, right, (-$width / 2), auto);
|
---|
5781 | top: ($slider-size / 2) - ($height / 2);
|
---|
5782 | width: $width;
|
---|
5783 | height: $height;
|
---|
5784 | border-radius: max($width, $height);
|
---|
5785 | }
|
---|
5786 |
|
---|
5787 | md-slider {
|
---|
5788 | height: $slider-size;
|
---|
5789 | min-width: $slider-min-size;
|
---|
5790 | position: relative;
|
---|
5791 | margin-left: 4px;
|
---|
5792 | margin-right: 4px;
|
---|
5793 | padding: 0;
|
---|
5794 | display: block;
|
---|
5795 | flex-direction: row;
|
---|
5796 |
|
---|
5797 | *, *:after {
|
---|
5798 | box-sizing: border-box;
|
---|
5799 | }
|
---|
5800 |
|
---|
5801 | .md-slider-wrapper {
|
---|
5802 | outline: none;
|
---|
5803 | width: 100%;
|
---|
5804 | height: 100%;
|
---|
5805 | }
|
---|
5806 |
|
---|
5807 | .md-slider-content {
|
---|
5808 | position: relative;
|
---|
5809 | }
|
---|
5810 |
|
---|
5811 | /**
|
---|
5812 | * Track
|
---|
5813 | */
|
---|
5814 | .md-track-container {
|
---|
5815 | width: 100%;
|
---|
5816 | position: absolute;
|
---|
5817 | top: ($slider-size / 2) - ($slider-track-height) / 2;
|
---|
5818 | height: $slider-track-height;
|
---|
5819 | }
|
---|
5820 | .md-track {
|
---|
5821 | position: absolute;
|
---|
5822 | left: 0;
|
---|
5823 | right: 0;
|
---|
5824 | height: 100%;
|
---|
5825 | }
|
---|
5826 | .md-track-fill {
|
---|
5827 | transition: all .4s cubic-bezier(.25,.8,.25,1);
|
---|
5828 | transition-property: width, height;
|
---|
5829 | }
|
---|
5830 | .md-track-ticks {
|
---|
5831 | position: absolute;
|
---|
5832 | left: 0;
|
---|
5833 | right: 0;
|
---|
5834 | height: 100%;
|
---|
5835 | }
|
---|
5836 | .md-track-ticks canvas {
|
---|
5837 | // Restrict the width and the height of the canvas so that ticks are rendered correctly
|
---|
5838 | // when parent elements are resized. Else, the position of the ticks might
|
---|
5839 | // be incorrect as we only update the canvas width attribute on window resize.
|
---|
5840 | width: 100%;
|
---|
5841 | height: 100%;
|
---|
5842 | }
|
---|
5843 |
|
---|
5844 | /**
|
---|
5845 | * Slider thumb
|
---|
5846 | */
|
---|
5847 | .md-thumb-container {
|
---|
5848 | position: absolute;
|
---|
5849 | @include rtl-prop(left, right, 0, auto);
|
---|
5850 | top: 50%;
|
---|
5851 | transform: translate3d(-50%,-50%,0);
|
---|
5852 | transition: all .4s cubic-bezier(.25,.8,.25,1);
|
---|
5853 | transition-property: left, right, bottom;
|
---|
5854 | }
|
---|
5855 | .md-thumb {
|
---|
5856 | z-index: 1;
|
---|
5857 |
|
---|
5858 | @include slider-thumb-position($slider-thumb-width, $slider-thumb-height);
|
---|
5859 |
|
---|
5860 | // We render thumb in an :after selector to fix an obscure problem with the
|
---|
5861 | // thumb being clipped by the focus-ring and focus-thumb while running the focus
|
---|
5862 | // animation.
|
---|
5863 | &:after {
|
---|
5864 | content: '';
|
---|
5865 | position: absolute;
|
---|
5866 | width: $slider-thumb-width;
|
---|
5867 | height: $slider-thumb-height;
|
---|
5868 | border-radius: max($slider-thumb-width, $slider-thumb-height);
|
---|
5869 | border-width: 3px;
|
---|
5870 | border-style: solid;
|
---|
5871 | transition: inherit;
|
---|
5872 | }
|
---|
5873 |
|
---|
5874 | transform: scale($slider-thumb-default-scale);
|
---|
5875 | transition: all .4s cubic-bezier(.25,.8,.25,1);
|
---|
5876 | }
|
---|
5877 |
|
---|
5878 | /* The sign that's focused in discrete mode */
|
---|
5879 | .md-sign {
|
---|
5880 |
|
---|
5881 | /* Center the children (slider-thumb-text) */
|
---|
5882 | display: flex;
|
---|
5883 | align-items: center;
|
---|
5884 | justify-content: center;
|
---|
5885 |
|
---|
5886 | position: absolute;
|
---|
5887 | left: -($slider-sign-height / 2);
|
---|
5888 | top: $slider-sign-top;
|
---|
5889 | width: $slider-sign-width;
|
---|
5890 | height: $slider-sign-height;
|
---|
5891 | border-radius: max($slider-sign-height, $slider-sign-width);
|
---|
5892 |
|
---|
5893 | transform: scale(0.4) translate3d(0,(-$slider-sign-top + 10) / 0.4,0);
|
---|
5894 | transition: all 0.3s $swift-ease-in-out-timing-function;
|
---|
5895 |
|
---|
5896 | /* The arrow pointing down under the sign */
|
---|
5897 | &:after {
|
---|
5898 | position: absolute;
|
---|
5899 | content: '';
|
---|
5900 | @include rtl-prop(left, right, -($slider-sign-width / 2 - $slider-arrow-width / 2), auto);
|
---|
5901 | border-radius: $slider-arrow-height;
|
---|
5902 | top: 19px;
|
---|
5903 | border-left: $slider-arrow-width / 2 solid transparent;
|
---|
5904 | border-right: $slider-arrow-width / 2 solid transparent;
|
---|
5905 | border-top-width: $slider-arrow-height;
|
---|
5906 | border-top-style: solid;
|
---|
5907 |
|
---|
5908 | opacity: 0;
|
---|
5909 | transform: translate3d(0,-8px,0);
|
---|
5910 | transition: all 0.2s $swift-ease-in-out-timing-function;
|
---|
5911 | }
|
---|
5912 |
|
---|
5913 | .md-thumb-text {
|
---|
5914 | z-index: 1;
|
---|
5915 | font-size: 12px;
|
---|
5916 | font-weight: bold;
|
---|
5917 | }
|
---|
5918 | }
|
---|
5919 |
|
---|
5920 | /**
|
---|
5921 | * The border/background that comes in when focused in non-discrete mode
|
---|
5922 | */
|
---|
5923 | .md-focus-ring {
|
---|
5924 | @include slider-thumb-position($slider-focus-thumb-width, $slider-focus-thumb-height);
|
---|
5925 | transform: scale(.7);
|
---|
5926 | opacity: 0;
|
---|
5927 | // using a custom duration to match the spec example video
|
---|
5928 | transition: all ($slider-thumb-focus-duration / 2) $swift-ease-in-out-timing-function;
|
---|
5929 | }
|
---|
5930 | .md-disabled-thumb {
|
---|
5931 | @include slider-thumb-position(
|
---|
5932 | $slider-thumb-width + $slider-thumb-disabled-border * 2,
|
---|
5933 | $slider-thumb-height + $slider-thumb-disabled-border * 2
|
---|
5934 | );
|
---|
5935 | transform: scale($slider-thumb-disabled-scale);
|
---|
5936 | border-width: $slider-thumb-disabled-border;
|
---|
5937 | border-style: solid;
|
---|
5938 | display: none;
|
---|
5939 | }
|
---|
5940 |
|
---|
5941 | &.md-min {
|
---|
5942 | .md-sign {
|
---|
5943 | opacity: 0;
|
---|
5944 | }
|
---|
5945 | }
|
---|
5946 |
|
---|
5947 | &:focus {
|
---|
5948 | outline: none;
|
---|
5949 | }
|
---|
5950 |
|
---|
5951 | /* Don't animate left/right while panning */
|
---|
5952 | &.md-dragging {
|
---|
5953 | .md-thumb-container,
|
---|
5954 | .md-track-fill {
|
---|
5955 | transition: none;
|
---|
5956 | }
|
---|
5957 | }
|
---|
5958 |
|
---|
5959 | &:not([md-discrete]) {
|
---|
5960 | /* Hide the sign and ticks in non-discrete mode */
|
---|
5961 | .md-track-ticks,
|
---|
5962 | .md-sign {
|
---|
5963 | display: none;
|
---|
5964 | }
|
---|
5965 |
|
---|
5966 | &:not([disabled]) {
|
---|
5967 | .md-slider-wrapper {
|
---|
5968 | .md-thumb:hover {
|
---|
5969 | transform: scale($slider-thumb-hover-scale);
|
---|
5970 | }
|
---|
5971 |
|
---|
5972 | &.md-focused {
|
---|
5973 | .md-focus-ring {
|
---|
5974 | transform: scale(1);
|
---|
5975 | opacity: 1;
|
---|
5976 | }
|
---|
5977 | .md-thumb {
|
---|
5978 | animation: sliderFocusThumb $slider-thumb-focus-duration $swift-ease-in-out-timing-function;
|
---|
5979 | }
|
---|
5980 | }
|
---|
5981 | }
|
---|
5982 |
|
---|
5983 | &.md-active {
|
---|
5984 | .md-slider-wrapper {
|
---|
5985 | .md-thumb {
|
---|
5986 | transform: scale($slider-thumb-focus-scale);
|
---|
5987 | }
|
---|
5988 | }
|
---|
5989 | }
|
---|
5990 | }
|
---|
5991 | }
|
---|
5992 |
|
---|
5993 | &[md-discrete] {
|
---|
5994 | &:not([disabled]) {
|
---|
5995 | .md-slider-wrapper {
|
---|
5996 | &.md-focused {
|
---|
5997 | .md-focus-ring {
|
---|
5998 | transform: scale(0);
|
---|
5999 | animation: sliderDiscreteFocusRing .5s $swift-ease-in-out-timing-function;
|
---|
6000 | }
|
---|
6001 | .md-thumb {
|
---|
6002 | animation: sliderDiscreteFocusThumb .5s $swift-ease-in-out-timing-function;
|
---|
6003 | }
|
---|
6004 | }
|
---|
6005 | }
|
---|
6006 | .md-slider-wrapper.md-focused,
|
---|
6007 | &.md-active {
|
---|
6008 | .md-thumb {
|
---|
6009 | transform: scale(0);
|
---|
6010 | }
|
---|
6011 | .md-sign,
|
---|
6012 | .md-sign:after {
|
---|
6013 | opacity: 1;
|
---|
6014 | transform: translate3d(0,0,0) scale(1.0);
|
---|
6015 | }
|
---|
6016 | }
|
---|
6017 | }
|
---|
6018 |
|
---|
6019 | &[disabled][readonly] {
|
---|
6020 | .md-thumb {
|
---|
6021 | transform: scale(0);
|
---|
6022 | }
|
---|
6023 | .md-sign,
|
---|
6024 | .md-sign:after {
|
---|
6025 | opacity: 1;
|
---|
6026 | transform: translate3d(0,0,0) scale(1.0);
|
---|
6027 | }
|
---|
6028 | }
|
---|
6029 | }
|
---|
6030 |
|
---|
6031 | &[disabled] {
|
---|
6032 | .md-track-fill {
|
---|
6033 | display: none;
|
---|
6034 | }
|
---|
6035 | .md-track-ticks {
|
---|
6036 | opacity: 0;
|
---|
6037 | }
|
---|
6038 | &:not([readonly]) .md-sign {
|
---|
6039 | opacity: 0;
|
---|
6040 | }
|
---|
6041 | .md-thumb {
|
---|
6042 | transform: scale($slider-thumb-disabled-scale);
|
---|
6043 | }
|
---|
6044 | .md-disabled-thumb {
|
---|
6045 | display: block;
|
---|
6046 | }
|
---|
6047 | }
|
---|
6048 |
|
---|
6049 | &[md-vertical] {
|
---|
6050 | flex-direction: column;
|
---|
6051 | min-height: $slider-min-size;
|
---|
6052 | min-width: 0;
|
---|
6053 |
|
---|
6054 | .md-slider-wrapper {
|
---|
6055 | flex: 1;
|
---|
6056 | padding-top: 12px;
|
---|
6057 | padding-bottom: 12px;
|
---|
6058 | width: $slider-size;
|
---|
6059 | align-self: center;
|
---|
6060 | display: flex;
|
---|
6061 | justify-content: center;
|
---|
6062 | }
|
---|
6063 |
|
---|
6064 | .md-track-container {
|
---|
6065 | height: 100%;
|
---|
6066 | width: $slider-track-height;
|
---|
6067 | top: 0;
|
---|
6068 | left: calc(50% - (#{$slider-track-height} / 2));
|
---|
6069 | }
|
---|
6070 |
|
---|
6071 | .md-thumb-container {
|
---|
6072 | top: auto;
|
---|
6073 | margin-bottom: ($slider-size / 2) - ($slider-track-height) / 2;
|
---|
6074 | left: calc(50% - 1px);
|
---|
6075 | bottom: 0;
|
---|
6076 |
|
---|
6077 | .md-thumb:after {
|
---|
6078 | left: 1px;
|
---|
6079 | }
|
---|
6080 |
|
---|
6081 | .md-focus-ring {
|
---|
6082 | left: -(($slider-focus-thumb-width / 2) - ($slider-track-height / 2));
|
---|
6083 | }
|
---|
6084 | }
|
---|
6085 |
|
---|
6086 | .md-track-fill {
|
---|
6087 | bottom: 0;
|
---|
6088 | }
|
---|
6089 |
|
---|
6090 | &[md-discrete] {
|
---|
6091 | .md-sign {
|
---|
6092 | $sign-top: -($slider-sign-top / 2) + 1;
|
---|
6093 |
|
---|
6094 | left: -$slider-sign-height - 12;
|
---|
6095 | top: $sign-top;
|
---|
6096 |
|
---|
6097 | transform: scale(0.4) translate3d((-$slider-sign-top + 10) / 0.4, 0 ,0);
|
---|
6098 |
|
---|
6099 | /* The arrow pointing left next the sign */
|
---|
6100 | &:after {
|
---|
6101 | top: $sign-top;
|
---|
6102 | left: 19px;
|
---|
6103 | border-top: $slider-arrow-width / 2 solid transparent;
|
---|
6104 | border-right: 0;
|
---|
6105 | border-bottom: $slider-arrow-width / 2 solid transparent;
|
---|
6106 | border-left-width: $slider-arrow-height;
|
---|
6107 | border-left-style: solid;
|
---|
6108 |
|
---|
6109 | opacity: 0;
|
---|
6110 | transform: translate3d(0,-8px,0);
|
---|
6111 | transition: all 0.2s ease-in-out;
|
---|
6112 | }
|
---|
6113 |
|
---|
6114 | .md-thumb-text {
|
---|
6115 | z-index: 1;
|
---|
6116 | font-size: 12px;
|
---|
6117 | font-weight: bold;
|
---|
6118 | }
|
---|
6119 | }
|
---|
6120 |
|
---|
6121 | &.md-active,
|
---|
6122 | .md-focused,
|
---|
6123 | &[disabled][readonly]{
|
---|
6124 | .md-sign:after {
|
---|
6125 | top: 0;
|
---|
6126 | }
|
---|
6127 | }
|
---|
6128 | }
|
---|
6129 |
|
---|
6130 | &[disabled][readonly] {
|
---|
6131 | .md-thumb {
|
---|
6132 | transform: scale(0);
|
---|
6133 | }
|
---|
6134 | .md-sign,
|
---|
6135 | .md-sign:after {
|
---|
6136 | opacity: 1;
|
---|
6137 | transform: translate3d(0,0,0) scale(1.0);
|
---|
6138 | }
|
---|
6139 | }
|
---|
6140 | }
|
---|
6141 | &[md-invert] {
|
---|
6142 | &:not([md-vertical]) .md-track-fill {
|
---|
6143 | @include rtl(left, auto, 0);
|
---|
6144 | @include rtl(right, 0, auto);
|
---|
6145 | }
|
---|
6146 | &[md-vertical] {
|
---|
6147 | .md-track-fill {
|
---|
6148 | bottom: auto;
|
---|
6149 | top: 0;
|
---|
6150 | }
|
---|
6151 | }
|
---|
6152 | }
|
---|
6153 | }
|
---|
6154 |
|
---|
6155 | md-slider-container {
|
---|
6156 | display: flex;
|
---|
6157 | align-items: center;
|
---|
6158 | flex-direction: row;
|
---|
6159 |
|
---|
6160 | $items-width: 25px;
|
---|
6161 | $items-height: $items-width;
|
---|
6162 | $items-margin: 16px;
|
---|
6163 |
|
---|
6164 | & > *:first-child,
|
---|
6165 | & > *:last-child {
|
---|
6166 | &:not(md-slider) {
|
---|
6167 | min-width: $items-width;
|
---|
6168 | max-width: ($items-width * 2) - 8;
|
---|
6169 | height: $items-height;
|
---|
6170 | transition: $swift-ease-out;
|
---|
6171 | transition-property: color, max-width;
|
---|
6172 | }
|
---|
6173 | }
|
---|
6174 |
|
---|
6175 | & > *:first-child:not(md-slider) {
|
---|
6176 | @include rtl-prop(margin-right, margin-left, $items-margin, auto);
|
---|
6177 | }
|
---|
6178 |
|
---|
6179 | & > *:last-child:not(md-slider) {
|
---|
6180 | @include rtl-prop(margin-left, margin-right, $items-margin, auto);
|
---|
6181 | }
|
---|
6182 |
|
---|
6183 | &[md-vertical] {
|
---|
6184 | flex-direction: column;
|
---|
6185 |
|
---|
6186 | & > *:first-child:not(md-slider),
|
---|
6187 | & > *:last-child:not(md-slider) {
|
---|
6188 | margin-right: 0;
|
---|
6189 | margin-left: 0;
|
---|
6190 | text-align: center;
|
---|
6191 | }
|
---|
6192 | }
|
---|
6193 |
|
---|
6194 | md-input-container {
|
---|
6195 | input[type="number"] {
|
---|
6196 | text-align: center;
|
---|
6197 | @include rtl-prop(padding-left, padding-right, 15px, 0); // size of arrows
|
---|
6198 | height: $items-height * 2;
|
---|
6199 | margin-top: -$items-height;
|
---|
6200 | }
|
---|
6201 | }
|
---|
6202 | }
|
---|
6203 |
|
---|
6204 | @media screen and (-ms-high-contrast: active) {
|
---|
6205 | md-slider.md-default-theme .md-track {
|
---|
6206 | border-bottom: 1px solid #fff;
|
---|
6207 | }
|
---|
6208 | }
|
---|
6209 |
|
---|
6210 |
|
---|
6211 | .md-sticky-clone {
|
---|
6212 | z-index: 2;
|
---|
6213 | top: 0;
|
---|
6214 | left: 0;
|
---|
6215 | right: 0;
|
---|
6216 | position: absolute !important;
|
---|
6217 |
|
---|
6218 | transform: translate3d(-9999px,-9999px,0);
|
---|
6219 |
|
---|
6220 | &[sticky-state="active"] {
|
---|
6221 | transform: translate3d(0, 0, 0);
|
---|
6222 | &:not(.md-sticky-no-effect) .md-subheader-inner {
|
---|
6223 | animation: subheaderStickyHoverIn 0.3s ease-out both;
|
---|
6224 | }
|
---|
6225 | }
|
---|
6226 | }
|
---|
6227 |
|
---|
6228 | $subheader-line-height: 1em !default;
|
---|
6229 | $subheader-font-size: rem(1.4) !default;
|
---|
6230 | $subheader-padding: ($baseline-grid * 2) !default;
|
---|
6231 | $subheader-font-weight: 500 !default;
|
---|
6232 | $subheader-margin: 0 0 0 0 !default;
|
---|
6233 | $subheader-sticky-shadow: 0px 2px 4px 0 rgba(0,0,0,0.16) !default;
|
---|
6234 |
|
---|
6235 | @keyframes subheaderStickyHoverIn {
|
---|
6236 | 0% {
|
---|
6237 | box-shadow: 0 0 0 0 transparent;
|
---|
6238 | }
|
---|
6239 | 100% {
|
---|
6240 | box-shadow: $subheader-sticky-shadow;
|
---|
6241 | }
|
---|
6242 | }
|
---|
6243 | @keyframes subheaderStickyHoverOut {
|
---|
6244 | 0% {
|
---|
6245 | box-shadow: $subheader-sticky-shadow;
|
---|
6246 | }
|
---|
6247 | 100% {
|
---|
6248 | box-shadow: 0 0 0 0 transparent;
|
---|
6249 | }
|
---|
6250 | }
|
---|
6251 |
|
---|
6252 | .md-subheader-wrapper {
|
---|
6253 |
|
---|
6254 | &:not(.md-sticky-no-effect) {
|
---|
6255 | .md-subheader {
|
---|
6256 | margin: 0;
|
---|
6257 | }
|
---|
6258 |
|
---|
6259 | transition: 0.2s ease-out margin;
|
---|
6260 |
|
---|
6261 | &.md-sticky-clone {
|
---|
6262 | z-index: 2;
|
---|
6263 | }
|
---|
6264 |
|
---|
6265 | &[sticky-state="active"] {
|
---|
6266 | margin-top: -2px;
|
---|
6267 | }
|
---|
6268 |
|
---|
6269 | &:not(.md-sticky-clone)[sticky-prev-state="active"] .md-subheader-inner:after {
|
---|
6270 | animation: subheaderStickyHoverOut 0.3s ease-out both;
|
---|
6271 | }
|
---|
6272 | }
|
---|
6273 |
|
---|
6274 | }
|
---|
6275 |
|
---|
6276 | .md-subheader {
|
---|
6277 | display: block;
|
---|
6278 | font-size: $subheader-font-size;
|
---|
6279 | font-weight: $subheader-font-weight;
|
---|
6280 | line-height: $subheader-line-height;
|
---|
6281 | margin: $subheader-margin;
|
---|
6282 | position: relative;
|
---|
6283 |
|
---|
6284 | .md-subheader-inner {
|
---|
6285 | display: block;
|
---|
6286 | padding: $subheader-padding;
|
---|
6287 | }
|
---|
6288 |
|
---|
6289 | .md-subheader-content {
|
---|
6290 | display: block;
|
---|
6291 | z-index: 1;
|
---|
6292 | position: relative;
|
---|
6293 | }
|
---|
6294 | }
|
---|
6295 |
|
---|
6296 | [md-swipe-left], [md-swipe-right] {
|
---|
6297 | touch-action : pan-y;
|
---|
6298 | }
|
---|
6299 |
|
---|
6300 | [md-swipe-up], [md-swipe-down] {
|
---|
6301 | touch-action : pan-x;
|
---|
6302 | }
|
---|
6303 |
|
---|
6304 | $switch-width: 36px !default;
|
---|
6305 | $switch-height: $baseline-grid * 3 !default;
|
---|
6306 | $switch-bar-height: 14px !default;
|
---|
6307 | $switch-thumb-size: 20px !default;
|
---|
6308 | $switch-margin: 16px !default;
|
---|
6309 |
|
---|
6310 | .md-inline-form {
|
---|
6311 | md-switch {
|
---|
6312 | margin-top: $input-container-vertical-margin;
|
---|
6313 | margin-bottom: $input-container-vertical-margin + 1px;
|
---|
6314 | }
|
---|
6315 | }
|
---|
6316 |
|
---|
6317 | md-switch {
|
---|
6318 | margin: $switch-margin 0;
|
---|
6319 | white-space: nowrap;
|
---|
6320 | cursor: pointer;
|
---|
6321 | outline: none;
|
---|
6322 | user-select: none;
|
---|
6323 | height: 30px;
|
---|
6324 | line-height: 28px;
|
---|
6325 | align-items: center;
|
---|
6326 | display: flex;
|
---|
6327 |
|
---|
6328 | @include rtl(margin-left, inherit, $switch-margin);
|
---|
6329 | @include rtl(margin-right, $switch-margin, inherit);
|
---|
6330 |
|
---|
6331 | &:last-of-type {
|
---|
6332 | @include rtl(margin-left, inherit, 0);
|
---|
6333 | @include rtl(margin-right, 0, inherit);
|
---|
6334 | }
|
---|
6335 |
|
---|
6336 | &[disabled] {
|
---|
6337 | cursor: default;
|
---|
6338 |
|
---|
6339 | .md-container {
|
---|
6340 | cursor: default;
|
---|
6341 | }
|
---|
6342 | }
|
---|
6343 |
|
---|
6344 | .md-container {
|
---|
6345 | cursor: grab;
|
---|
6346 | width: $switch-width;
|
---|
6347 | height: $switch-height;
|
---|
6348 | position: relative;
|
---|
6349 | user-select: none;
|
---|
6350 | @include rtl-prop(margin-right, margin-left, 8px, 0px);
|
---|
6351 | float: left;
|
---|
6352 | }
|
---|
6353 |
|
---|
6354 | &.md-inverted .md-container {
|
---|
6355 | @include rtl(margin-right, initial, 8px);
|
---|
6356 | @include rtl(margin-left, 8px, initial);
|
---|
6357 | }
|
---|
6358 |
|
---|
6359 | // If the user moves his mouse off the switch, stil display grabbing cursor
|
---|
6360 | &:not([disabled]) {
|
---|
6361 | .md-dragging,
|
---|
6362 | &.md-dragging .md-container {
|
---|
6363 | cursor: grabbing;
|
---|
6364 | }
|
---|
6365 | }
|
---|
6366 |
|
---|
6367 | &.md-focused {
|
---|
6368 | .md-thumb:before {
|
---|
6369 | left: -8px;
|
---|
6370 | top: -8px;
|
---|
6371 | right: -8px;
|
---|
6372 | bottom: -8px;
|
---|
6373 | }
|
---|
6374 | }
|
---|
6375 |
|
---|
6376 | .md-label {
|
---|
6377 | border-color: transparent;
|
---|
6378 | border-width: 0;
|
---|
6379 | float: left;
|
---|
6380 | }
|
---|
6381 |
|
---|
6382 | .md-bar {
|
---|
6383 | left: 1px;
|
---|
6384 | width: $switch-width - 2px;
|
---|
6385 | top: $switch-height / 2 - $switch-bar-height / 2;
|
---|
6386 | height: $switch-bar-height;
|
---|
6387 | border-radius: 8px;
|
---|
6388 | position: absolute;
|
---|
6389 | }
|
---|
6390 |
|
---|
6391 | .md-thumb-container {
|
---|
6392 | top: $switch-height / 2 - $switch-thumb-size / 2;
|
---|
6393 | left: 0;
|
---|
6394 | width: $switch-width - $switch-thumb-size;
|
---|
6395 | position: absolute;
|
---|
6396 | transform: translate3d(0,0,0);
|
---|
6397 | z-index: 1;
|
---|
6398 | }
|
---|
6399 | &.md-checked .md-thumb-container {
|
---|
6400 | transform: translate3d(100%,0,0);
|
---|
6401 | }
|
---|
6402 |
|
---|
6403 | .md-thumb {
|
---|
6404 | position: absolute;
|
---|
6405 | margin: 0;
|
---|
6406 | left: 0;
|
---|
6407 | top: 0;
|
---|
6408 | outline: none;
|
---|
6409 | height: $switch-thumb-size;
|
---|
6410 | width: $switch-thumb-size;
|
---|
6411 | border-radius: 50%;
|
---|
6412 | box-shadow: $whiteframe-shadow-1dp;
|
---|
6413 |
|
---|
6414 | &:before {
|
---|
6415 | background-color: transparent;
|
---|
6416 | border-radius: 50%;
|
---|
6417 | content: '';
|
---|
6418 | position: absolute;
|
---|
6419 | display: block;
|
---|
6420 | height: auto;
|
---|
6421 | left: 0;
|
---|
6422 | top: 0;
|
---|
6423 | right: 0;
|
---|
6424 | bottom: 0;
|
---|
6425 | transition: all 0.5s;
|
---|
6426 | width: auto;
|
---|
6427 | }
|
---|
6428 |
|
---|
6429 | .md-ripple-container {
|
---|
6430 | position: absolute;
|
---|
6431 | display: block;
|
---|
6432 | width: auto;
|
---|
6433 | height: auto;
|
---|
6434 | left: -$switch-thumb-size;
|
---|
6435 | top: -$switch-thumb-size;
|
---|
6436 | right: -$switch-thumb-size;
|
---|
6437 | bottom: -$switch-thumb-size;
|
---|
6438 | }
|
---|
6439 | }
|
---|
6440 |
|
---|
6441 | &:not(.md-dragging) {
|
---|
6442 | .md-bar,
|
---|
6443 | .md-thumb-container,
|
---|
6444 | .md-thumb {
|
---|
6445 | transition: $swift-linear;
|
---|
6446 | transition-property: transform, background-color;
|
---|
6447 | }
|
---|
6448 | .md-bar,
|
---|
6449 | .md-thumb {
|
---|
6450 | transition-delay: 0.05s;
|
---|
6451 | }
|
---|
6452 | }
|
---|
6453 |
|
---|
6454 | }
|
---|
6455 |
|
---|
6456 | @media screen and (-ms-high-contrast: active) {
|
---|
6457 | md-switch.md-default-theme .md-bar {
|
---|
6458 | background-color: #666;
|
---|
6459 | }
|
---|
6460 | md-switch.md-default-theme.md-checked .md-bar {
|
---|
6461 | background-color: #9E9E9E;
|
---|
6462 | }
|
---|
6463 | md-switch.md-default-theme .md-thumb {
|
---|
6464 | background-color: #fff;
|
---|
6465 | }
|
---|
6466 | }
|
---|
6467 |
|
---|
6468 | $tabs-paginator-width: $baseline-grid * 4 !default;
|
---|
6469 | $tabs-tab-width: $baseline-grid * 12 !default;
|
---|
6470 | $tabs-header-height: 48px !default;
|
---|
6471 |
|
---|
6472 | @keyframes md-tab-content-hide {
|
---|
6473 | 0% { opacity: 1; }
|
---|
6474 | 50% { opacity: 1; }
|
---|
6475 | 100% { opacity: 0; }
|
---|
6476 | }
|
---|
6477 |
|
---|
6478 | md-tab-data {
|
---|
6479 | position: absolute;
|
---|
6480 | top: 0;
|
---|
6481 | left: 0;
|
---|
6482 | right: 0;
|
---|
6483 | bottom: 0;
|
---|
6484 | z-index: -1;
|
---|
6485 | opacity: 0;
|
---|
6486 | }
|
---|
6487 |
|
---|
6488 | md-tabs {
|
---|
6489 | display: block;
|
---|
6490 | margin: 0;
|
---|
6491 | border-radius: 2px;
|
---|
6492 | overflow: hidden;
|
---|
6493 | position: relative;
|
---|
6494 | flex-shrink: 0;
|
---|
6495 | &:not(.md-no-tab-content):not(.md-dynamic-height) {
|
---|
6496 | min-height: 200 + $tabs-header-height;
|
---|
6497 | }
|
---|
6498 | &[md-align-tabs="bottom"] {
|
---|
6499 | padding-bottom: $tabs-header-height;
|
---|
6500 |
|
---|
6501 | > md-tabs-wrapper {
|
---|
6502 | position: absolute;
|
---|
6503 | bottom: 0;
|
---|
6504 | left: 0;
|
---|
6505 | right: 0;
|
---|
6506 | height: $tabs-header-height;
|
---|
6507 | z-index: 2;
|
---|
6508 | }
|
---|
6509 | > md-tabs-content-wrapper {
|
---|
6510 | top: 0;
|
---|
6511 | bottom: $tabs-header-height;
|
---|
6512 | }
|
---|
6513 | }
|
---|
6514 | &.md-dynamic-height {
|
---|
6515 | md-tabs-content-wrapper {
|
---|
6516 | min-height: 0;
|
---|
6517 | position: relative;
|
---|
6518 | top: auto;
|
---|
6519 | left: auto;
|
---|
6520 | right: auto;
|
---|
6521 | bottom: auto;
|
---|
6522 | overflow: visible;
|
---|
6523 | }
|
---|
6524 | md-tab-content {
|
---|
6525 | &.md-active {
|
---|
6526 | position: relative;
|
---|
6527 | }
|
---|
6528 | }
|
---|
6529 | }
|
---|
6530 | &[md-border-bottom] {
|
---|
6531 | md-tabs-wrapper {
|
---|
6532 | border-width: 0 0 1px;
|
---|
6533 | border-style: solid;
|
---|
6534 | }
|
---|
6535 | &:not(.md-dynamic-height) {
|
---|
6536 | md-tabs-content-wrapper {
|
---|
6537 | top: $tabs-header-height + 1;
|
---|
6538 | }
|
---|
6539 | }
|
---|
6540 | }
|
---|
6541 | }
|
---|
6542 |
|
---|
6543 | md-tabs-wrapper {
|
---|
6544 | display: block;
|
---|
6545 | position: relative;
|
---|
6546 | // transform is needed for iOS Safari to prevent content from disappearing on scroll
|
---|
6547 | transform: translate(0, 0);
|
---|
6548 | md-prev-button, md-next-button {
|
---|
6549 | height: 100%;
|
---|
6550 | width: $tabs-paginator-width;
|
---|
6551 | position: absolute;
|
---|
6552 | top: 50%;
|
---|
6553 | transform: translateY(-50%);
|
---|
6554 | line-height: 1em;
|
---|
6555 | z-index: 2;
|
---|
6556 | cursor: pointer;
|
---|
6557 | font-size: 16px;
|
---|
6558 | background: transparent no-repeat center center;
|
---|
6559 | transition: $swift-ease-in-out;
|
---|
6560 | &:focus {
|
---|
6561 | outline: none;
|
---|
6562 | }
|
---|
6563 | &.md-disabled {
|
---|
6564 | opacity: 0.25;
|
---|
6565 | cursor: default;
|
---|
6566 | }
|
---|
6567 | &.ng-leave {
|
---|
6568 | transition: none;
|
---|
6569 | }
|
---|
6570 | md-icon {
|
---|
6571 | position: absolute;
|
---|
6572 | top: 50%;
|
---|
6573 | left: 50%;
|
---|
6574 | transform: translate(-50%, -50%);
|
---|
6575 | }
|
---|
6576 |
|
---|
6577 | // For RTL tabs, rotate the buttons
|
---|
6578 | [dir="rtl"] & {
|
---|
6579 | transform: rotateY(180deg) translateY(-50%);
|
---|
6580 | }
|
---|
6581 | }
|
---|
6582 | md-prev-button {
|
---|
6583 | @include rtl-prop(left, right, 0, auto);
|
---|
6584 | background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMjA4IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyIAkJIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4gPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+IDwvZz4gPC9nPiA8ZyBpZD0iR3JpZCIgZGlzcGxheT0ibm9uZSI+IDxnIGRpc3BsYXk9ImlubGluZSI+IDwvZz4gPC9nPiA8L3N2Zz4NCg==');
|
---|
6585 | }
|
---|
6586 | md-next-button {
|
---|
6587 | @include rtl-prop(right, left, 0, auto);
|
---|
6588 | background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMzM2IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTAsNiA4LjYsNy40IDEzLjIsMTIgOC42LDE2LjYgMTAsMTggMTYsMTIgCQkiIHN0eWxlPSJmaWxsOndoaXRlOyIvPiA8cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4gPC9nPiA8L2c+IDxnIGlkPSJHcmlkIiBkaXNwbGF5PSJub25lIj4gPGcgZGlzcGxheT0iaW5saW5lIj4gPC9nPiA8L2c+IDwvc3ZnPg0K');
|
---|
6589 |
|
---|
6590 | // In regular mode, we need to flip the chevron icon to point the other way
|
---|
6591 | md-icon {
|
---|
6592 | transform: translate(-50%, -50%) rotate(180deg);
|
---|
6593 | }
|
---|
6594 | }
|
---|
6595 | &.md-stretch-tabs {
|
---|
6596 | md-pagination-wrapper {
|
---|
6597 | width: 100%;
|
---|
6598 | flex-direction: row;
|
---|
6599 | md-tab-item {
|
---|
6600 | flex-grow: 1;
|
---|
6601 | }
|
---|
6602 | }
|
---|
6603 | }
|
---|
6604 | }
|
---|
6605 |
|
---|
6606 | md-tabs-canvas {
|
---|
6607 | @include pie-clearfix;
|
---|
6608 | position: relative;
|
---|
6609 | overflow: hidden;
|
---|
6610 | display: block;
|
---|
6611 | height: $tabs-header-height;
|
---|
6612 | .md-dummy-wrapper {
|
---|
6613 | position: absolute;
|
---|
6614 | top: 0;
|
---|
6615 | @include rtl-prop(left, right, 0, auto);
|
---|
6616 | }
|
---|
6617 | &.md-paginated {
|
---|
6618 | margin: 0 $tabs-paginator-width;
|
---|
6619 | }
|
---|
6620 | &.md-center-tabs {
|
---|
6621 | display: flex;
|
---|
6622 | flex-direction: column;
|
---|
6623 | text-align: center;
|
---|
6624 | .md-tab {
|
---|
6625 | float: none;
|
---|
6626 | display: inline-block;
|
---|
6627 | }
|
---|
6628 | }
|
---|
6629 | }
|
---|
6630 |
|
---|
6631 | md-pagination-wrapper {
|
---|
6632 | @include pie-clearfix;
|
---|
6633 | height: $tabs-header-height;
|
---|
6634 | display: flex;
|
---|
6635 | transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
|
---|
6636 | position: absolute;
|
---|
6637 | @include rtl-prop(left, right, 0, auto);
|
---|
6638 | transform: translate(0, 0);
|
---|
6639 | &.md-center-tabs {
|
---|
6640 | position: relative;
|
---|
6641 | justify-content: center;
|
---|
6642 | }
|
---|
6643 | md-tab-item {
|
---|
6644 | min-width: 72px;
|
---|
6645 | }
|
---|
6646 | @media (min-width: $layout-breakpoint-xs) {
|
---|
6647 | md-tab-item {
|
---|
6648 | min-width: 160px;
|
---|
6649 | }
|
---|
6650 | }
|
---|
6651 | }
|
---|
6652 |
|
---|
6653 | md-tabs-content-wrapper {
|
---|
6654 | display: block;
|
---|
6655 | position: absolute;
|
---|
6656 | top: $tabs-header-height;
|
---|
6657 | left: 0;
|
---|
6658 | right: 0;
|
---|
6659 | bottom: 0;
|
---|
6660 | overflow: hidden;
|
---|
6661 | }
|
---|
6662 |
|
---|
6663 | md-tab-content {
|
---|
6664 | display: flex;
|
---|
6665 | position: absolute;
|
---|
6666 | top: 0;
|
---|
6667 | left: 0;
|
---|
6668 | right: 0;
|
---|
6669 | bottom: 0;
|
---|
6670 | transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
|
---|
6671 | overflow: auto;
|
---|
6672 | // transform is needed for iOS Safari to prevent content from disappearing on scroll
|
---|
6673 | transform: translate(0, 0);
|
---|
6674 | &.md-no-scroll {
|
---|
6675 | bottom: auto;
|
---|
6676 | overflow: hidden;
|
---|
6677 | }
|
---|
6678 | &.ng-leave, &.md-no-transition {
|
---|
6679 | transition: none;
|
---|
6680 | }
|
---|
6681 | &.md-left:not(.md-active) {
|
---|
6682 | @include rtl(transform, translateX(-100%), translateX(+100%));
|
---|
6683 | animation: 2 * $swift-ease-in-out-duration md-tab-content-hide;
|
---|
6684 | visibility: hidden;
|
---|
6685 | * {
|
---|
6686 | transition: visibility 0s linear;
|
---|
6687 | transition-delay: $swift-ease-in-out-duration;
|
---|
6688 | visibility: hidden;
|
---|
6689 | }
|
---|
6690 | }
|
---|
6691 | &.md-right:not(.md-active) {
|
---|
6692 | @include rtl(transform, translateX(100%), translateX(-100%));
|
---|
6693 | animation: 2 * $swift-ease-in-out-duration md-tab-content-hide;
|
---|
6694 | visibility: hidden;
|
---|
6695 | * {
|
---|
6696 | transition: visibility 0s linear;
|
---|
6697 | transition-delay: $swift-ease-in-out-duration;
|
---|
6698 | visibility: hidden;
|
---|
6699 | }
|
---|
6700 | }
|
---|
6701 | > div {
|
---|
6702 | flex: 1 0 100%;
|
---|
6703 | min-width: 0;
|
---|
6704 | &.ng-leave {
|
---|
6705 | animation: 2 * $swift-ease-in-out-duration md-tab-content-hide;
|
---|
6706 | }
|
---|
6707 | }
|
---|
6708 | }
|
---|
6709 |
|
---|
6710 | md-ink-bar {
|
---|
6711 | $duration: $swift-ease-in-out-duration * 0.5;
|
---|
6712 | $multiplier: 0.5;
|
---|
6713 | position: absolute;
|
---|
6714 | left: auto;
|
---|
6715 | right: auto;
|
---|
6716 | bottom: 0;
|
---|
6717 | height: 2px;
|
---|
6718 | &.md-left {
|
---|
6719 | transition: left ($duration * $multiplier) $swift-ease-in-out-timing-function,
|
---|
6720 | right $duration $swift-ease-in-out-timing-function;
|
---|
6721 | }
|
---|
6722 | &.md-right {
|
---|
6723 | transition: left $duration $swift-ease-in-out-timing-function,
|
---|
6724 | right ($duration * $multiplier) $swift-ease-in-out-timing-function;
|
---|
6725 | }
|
---|
6726 | }
|
---|
6727 |
|
---|
6728 | md-tab {
|
---|
6729 | position: absolute;
|
---|
6730 | z-index: -1;
|
---|
6731 | left: -9999px;
|
---|
6732 | }
|
---|
6733 |
|
---|
6734 | .md-tab {
|
---|
6735 | font-size: 14px;
|
---|
6736 | text-align: center;
|
---|
6737 | line-height: $tabs-header-height - 24;
|
---|
6738 | padding: 12px;
|
---|
6739 | transition: background-color 0.35s $swift-ease-in-out-timing-function;
|
---|
6740 | cursor: pointer;
|
---|
6741 | white-space: nowrap;
|
---|
6742 | position: relative;
|
---|
6743 | text-transform: uppercase;
|
---|
6744 | @include rtl(float, left, right);
|
---|
6745 | font-weight: 500;
|
---|
6746 | box-sizing: border-box;
|
---|
6747 | overflow: hidden;
|
---|
6748 | text-overflow: ellipsis;
|
---|
6749 | &.md-focused, &:focus {
|
---|
6750 | box-shadow: none;
|
---|
6751 | outline: none;
|
---|
6752 | }
|
---|
6753 | &.md-active {
|
---|
6754 | cursor: default;
|
---|
6755 | }
|
---|
6756 | &.md-disabled {
|
---|
6757 | pointer-events: none;
|
---|
6758 | touch-action: pan-y;
|
---|
6759 | user-select: none;
|
---|
6760 | -webkit-user-drag: none;
|
---|
6761 | opacity: 0.5;
|
---|
6762 | cursor: default;
|
---|
6763 | }
|
---|
6764 | &.ng-leave {
|
---|
6765 | transition: none;
|
---|
6766 | }
|
---|
6767 | }
|
---|
6768 |
|
---|
6769 | md-toolbar + md-tabs, md-toolbar + md-dialog-content md-tabs {
|
---|
6770 | border-top-left-radius: 0;
|
---|
6771 | border-top-right-radius: 0;
|
---|
6772 | }
|
---|
6773 |
|
---|
6774 | // See height set globally, depended on by buttons
|
---|
6775 |
|
---|
6776 | $md-toast-content-padding: 3 * $baseline-grid - $button-left-right-padding !default;
|
---|
6777 | $md-toast-button-left-margin: 3 * $baseline-grid - 2 * $button-left-right-padding !default;
|
---|
6778 | $md-toast-text-padding: $button-left-right-padding !default;
|
---|
6779 |
|
---|
6780 |
|
---|
6781 | .md-toast-text {
|
---|
6782 | padding: 0 $md-toast-text-padding;
|
---|
6783 | }
|
---|
6784 |
|
---|
6785 | md-toast {
|
---|
6786 | position: absolute;
|
---|
6787 | z-index: $z-index-toast;
|
---|
6788 |
|
---|
6789 | box-sizing: border-box;
|
---|
6790 | cursor: default;
|
---|
6791 | overflow: hidden;
|
---|
6792 |
|
---|
6793 | // Add some padding to the outer toast container so that the wrapper's box shadow is visible
|
---|
6794 | padding: $toast-margin;
|
---|
6795 |
|
---|
6796 | // Setup opacity transition on whole toast
|
---|
6797 | opacity: 1;
|
---|
6798 | transition: $swift-ease-out;
|
---|
6799 |
|
---|
6800 | .md-toast-content {
|
---|
6801 | display: flex;
|
---|
6802 | flex-direction: row;
|
---|
6803 | align-items: center;
|
---|
6804 |
|
---|
6805 | max-height: 7 * $toast-height;
|
---|
6806 | max-width: 100%;
|
---|
6807 |
|
---|
6808 | min-height: 48px;
|
---|
6809 | // Since we're vertically centering our text by using flexbox and having a min-height, we need to apply
|
---|
6810 | // a fix for an IE11 flexbug, otherwise the text won't be centered vertically.
|
---|
6811 | @include ie11-min-height-flexbug(48px);
|
---|
6812 |
|
---|
6813 | padding: 0 $md-toast-content-padding;
|
---|
6814 |
|
---|
6815 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
---|
6816 | border-radius: 2px;
|
---|
6817 | font-size: 14px;
|
---|
6818 |
|
---|
6819 | overflow: hidden;
|
---|
6820 |
|
---|
6821 | // Setup for transform transitions on inner content
|
---|
6822 | transform: translate3d(0, 0, 0) rotateZ(0deg);
|
---|
6823 | transition: $swift-ease-out;
|
---|
6824 |
|
---|
6825 | @include rtl(justify-content, flex-start, flex-end);
|
---|
6826 |
|
---|
6827 | span {
|
---|
6828 | // Layout [flex]
|
---|
6829 | flex:1 1 0%;
|
---|
6830 | box-sizing:border-box;
|
---|
6831 | min-width :0;
|
---|
6832 | }
|
---|
6833 | }
|
---|
6834 |
|
---|
6835 | &.md-capsule {
|
---|
6836 | border-radius: 24px;
|
---|
6837 |
|
---|
6838 | .md-toast-content {
|
---|
6839 | border-radius: 24px;
|
---|
6840 | }
|
---|
6841 | }
|
---|
6842 |
|
---|
6843 | &.ng-leave-active {
|
---|
6844 | .md-toast-content {
|
---|
6845 | transition: $swift-ease-in;
|
---|
6846 | }
|
---|
6847 | }
|
---|
6848 |
|
---|
6849 | /* Transition differently when swiping */
|
---|
6850 | &.md-swipeleft,
|
---|
6851 | &.md-swiperight,
|
---|
6852 | &.md-swipeup,
|
---|
6853 | &.md-swipedown {
|
---|
6854 | .md-toast-content {
|
---|
6855 | transition: $swift-ease-out;
|
---|
6856 | }
|
---|
6857 | }
|
---|
6858 |
|
---|
6859 | &.ng-enter {
|
---|
6860 | opacity: 0;
|
---|
6861 | .md-toast-content {
|
---|
6862 | transform: translate3d(0, 100%, 0);
|
---|
6863 | }
|
---|
6864 | &.md-top {
|
---|
6865 | .md-toast-content {
|
---|
6866 | transform: translate3d(0, -100%, 0);
|
---|
6867 | }
|
---|
6868 | }
|
---|
6869 | &.ng-enter-active {
|
---|
6870 | opacity: 1;
|
---|
6871 | .md-toast-content {
|
---|
6872 | transform: translate3d(0, 0, 0);
|
---|
6873 | }
|
---|
6874 | }
|
---|
6875 | }
|
---|
6876 | /*
|
---|
6877 | * When the toast doesn't take up the whole screen,
|
---|
6878 | * make it rotate when the user swipes it away
|
---|
6879 | */
|
---|
6880 | &.ng-leave.ng-leave-active {
|
---|
6881 | .md-toast-content {
|
---|
6882 | opacity: 0;
|
---|
6883 | transform: translate3d(0, 100%, 0);
|
---|
6884 | }
|
---|
6885 |
|
---|
6886 | &.md-swipeup {
|
---|
6887 | .md-toast-content {
|
---|
6888 | transform: translate3d(0, -50%, 0);
|
---|
6889 | }
|
---|
6890 | }
|
---|
6891 | &.md-swipedown {
|
---|
6892 | .md-toast-content {
|
---|
6893 | transform: translate3d(0, 50%, 0);
|
---|
6894 | }
|
---|
6895 | }
|
---|
6896 | &.md-top {
|
---|
6897 | .md-toast-content {
|
---|
6898 | transform: translate3d(0, -100%, 0);
|
---|
6899 | }
|
---|
6900 | }
|
---|
6901 | }
|
---|
6902 |
|
---|
6903 | .md-action {
|
---|
6904 | line-height: 19px;
|
---|
6905 | margin-left: 24px;
|
---|
6906 | margin-right: 0;
|
---|
6907 | cursor: pointer;
|
---|
6908 | text-transform: uppercase;
|
---|
6909 | float: right;
|
---|
6910 | }
|
---|
6911 |
|
---|
6912 | .md-button {
|
---|
6913 | min-width: 0;
|
---|
6914 | @include rtl(margin-right, 0, $md-toast-button-left-margin);
|
---|
6915 | @include rtl(margin-left, $md-toast-button-left-margin, 0);
|
---|
6916 | }
|
---|
6917 | }
|
---|
6918 |
|
---|
6919 | @media (max-width: $layout-breakpoint-sm - 1) {
|
---|
6920 | md-toast {
|
---|
6921 | left: 0;
|
---|
6922 | right: 0;
|
---|
6923 | width: 100%;
|
---|
6924 | max-width: 100%;
|
---|
6925 | min-width: 0;
|
---|
6926 | border-radius: 0;
|
---|
6927 | bottom: 0;
|
---|
6928 | padding: 0;
|
---|
6929 |
|
---|
6930 | &.ng-leave.ng-leave-active {
|
---|
6931 | &.md-swipeup {
|
---|
6932 | .md-toast-content {
|
---|
6933 | transform: translate3d(0, -50%, 0);
|
---|
6934 | }
|
---|
6935 | }
|
---|
6936 | &.md-swipedown {
|
---|
6937 | .md-toast-content {
|
---|
6938 | transform: translate3d(0, 50%, 0);
|
---|
6939 | }
|
---|
6940 | }
|
---|
6941 | }
|
---|
6942 | }
|
---|
6943 | }
|
---|
6944 |
|
---|
6945 | @media (min-width: $layout-breakpoint-sm) {
|
---|
6946 | md-toast {
|
---|
6947 | min-width: 288px + $toast-margin * 2;
|
---|
6948 | &.md-bottom {
|
---|
6949 | bottom: 0;
|
---|
6950 | }
|
---|
6951 | &.md-left {
|
---|
6952 | left: 0;
|
---|
6953 | }
|
---|
6954 | &.md-right {
|
---|
6955 | right: 0;
|
---|
6956 | }
|
---|
6957 | &.md-top {
|
---|
6958 | top: 0;
|
---|
6959 | }
|
---|
6960 |
|
---|
6961 | // Support for RTL alignment
|
---|
6962 | &._md-start {
|
---|
6963 | @include rtl-prop(left, right, 0, auto);
|
---|
6964 | }
|
---|
6965 |
|
---|
6966 | &._md-end {
|
---|
6967 | @include rtl-prop(right, left, 0, auto);
|
---|
6968 | }
|
---|
6969 |
|
---|
6970 | /*
|
---|
6971 | * When the toast doesn't take up the whole screen,
|
---|
6972 | * make it rotate when the user swipes it away
|
---|
6973 | */
|
---|
6974 | &.ng-leave.ng-leave-active {
|
---|
6975 | &.md-swipeleft {
|
---|
6976 | .md-toast-content {
|
---|
6977 | transform: translate3d(-50%, 0, 0);
|
---|
6978 | }
|
---|
6979 | }
|
---|
6980 | &.md-swiperight {
|
---|
6981 | .md-toast-content {
|
---|
6982 | transform: translate3d(50%, 0, 0);
|
---|
6983 | }
|
---|
6984 | }
|
---|
6985 | }
|
---|
6986 | }
|
---|
6987 | }
|
---|
6988 |
|
---|
6989 | @media (min-width: $layout-breakpoint-lg) {
|
---|
6990 | md-toast {
|
---|
6991 | .md-toast-content {
|
---|
6992 | max-width: $baseline-grid * 71;
|
---|
6993 | }
|
---|
6994 | }
|
---|
6995 | }
|
---|
6996 |
|
---|
6997 | @media screen and (-ms-high-contrast: active) {
|
---|
6998 | md-toast {
|
---|
6999 | border: 1px solid #fff;
|
---|
7000 | }
|
---|
7001 | }
|
---|
7002 |
|
---|
7003 |
|
---|
7004 | // While animating, set the toast parent's overflow to hidden so scrollbars do not appear
|
---|
7005 | .md-toast-animating {
|
---|
7006 | overflow: hidden !important;
|
---|
7007 | }
|
---|
7008 |
|
---|
7009 | // Standard/Desktop Heights
|
---|
7010 | $md-toolbar-height: $baseline-grid * 8 !default;
|
---|
7011 | $md-toolbar-medium-tall-height: 88px !default;
|
---|
7012 | $md-toolbar-tall-height: 128px !default;
|
---|
7013 |
|
---|
7014 | // Mobile device heights
|
---|
7015 | $md-toolbar-height-mobile-portrait: 56px !default;
|
---|
7016 | $md-toolbar-height-mobile-landscape: 48px !default;
|
---|
7017 |
|
---|
7018 | $md-toolbar-indent-margin: 64px !default;
|
---|
7019 | $md-toolbar-padding: 16px !default;
|
---|
7020 |
|
---|
7021 | $icon-button-margin-offset: rem(-0.800) !default;
|
---|
7022 |
|
---|
7023 | md-toolbar {
|
---|
7024 | box-sizing: border-box;
|
---|
7025 | display: flex;
|
---|
7026 | flex-direction: column;
|
---|
7027 |
|
---|
7028 | position: relative;
|
---|
7029 | z-index: 2;
|
---|
7030 |
|
---|
7031 | font-size: rem(2.0);
|
---|
7032 | min-height: $md-toolbar-height;
|
---|
7033 | width: 100%;
|
---|
7034 |
|
---|
7035 | &._md-toolbar-transitions {
|
---|
7036 | transition-duration: $swift-ease-in-out-duration;
|
---|
7037 | transition-timing-function: $swift-ease-in-out-timing-function;
|
---|
7038 | transition-property: background-color, fill, color;
|
---|
7039 | }
|
---|
7040 |
|
---|
7041 | &.md-whiteframe-z1-add, &.md-whiteframe-z1-remove {
|
---|
7042 | transition: box-shadow $swift-ease-in-out-duration linear;
|
---|
7043 | }
|
---|
7044 |
|
---|
7045 | md-toolbar-filler {
|
---|
7046 | width: 9 * $baseline-grid;
|
---|
7047 | }
|
---|
7048 |
|
---|
7049 | *,
|
---|
7050 | *:before,
|
---|
7051 | *:after {
|
---|
7052 | box-sizing: border-box;
|
---|
7053 | }
|
---|
7054 |
|
---|
7055 | // By default $ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show.
|
---|
7056 | // The toolbar has a transition duration applied, which means, that $ngAnimate delays the hide process.
|
---|
7057 | // To avoid this, we need to reset the transition, when $ngAnimate looks for the duration.
|
---|
7058 | &.ng-animate {
|
---|
7059 | transition: none;
|
---|
7060 | }
|
---|
7061 |
|
---|
7062 | &.md-tall {
|
---|
7063 | height: $md-toolbar-tall-height;
|
---|
7064 | min-height: $md-toolbar-tall-height;
|
---|
7065 | max-height: $md-toolbar-tall-height;
|
---|
7066 | }
|
---|
7067 |
|
---|
7068 | &.md-medium-tall {
|
---|
7069 | height: $md-toolbar-medium-tall-height;
|
---|
7070 | min-height: $md-toolbar-medium-tall-height;
|
---|
7071 | max-height: $md-toolbar-medium-tall-height;
|
---|
7072 |
|
---|
7073 | .md-toolbar-tools {
|
---|
7074 | height: 48px;
|
---|
7075 | min-height: 48px;
|
---|
7076 | max-height: 48px;
|
---|
7077 | }
|
---|
7078 | }
|
---|
7079 |
|
---|
7080 | > .md-indent {
|
---|
7081 | @include rtl-prop(margin-left, margin-right, $md-toolbar-indent-margin, auto);
|
---|
7082 | }
|
---|
7083 |
|
---|
7084 | ~ md-content {
|
---|
7085 | > md-list {
|
---|
7086 | padding: 0;
|
---|
7087 |
|
---|
7088 | md-list-item:last-child {
|
---|
7089 | md-divider {
|
---|
7090 | display: none;
|
---|
7091 | }
|
---|
7092 | }
|
---|
7093 | }
|
---|
7094 | }
|
---|
7095 | }
|
---|
7096 |
|
---|
7097 | .md-toolbar-tools {
|
---|
7098 | font-size: $title-font-size-base;
|
---|
7099 | letter-spacing: 0.005em;
|
---|
7100 | box-sizing: border-box;
|
---|
7101 | font-weight: 400;
|
---|
7102 | display: flex;
|
---|
7103 | align-items: center;
|
---|
7104 | flex-direction: row;
|
---|
7105 |
|
---|
7106 | width: 100%;
|
---|
7107 | height: $md-toolbar-height;
|
---|
7108 | max-height: $md-toolbar-height;
|
---|
7109 | padding: 0 $md-toolbar-padding;
|
---|
7110 | margin: 0;
|
---|
7111 |
|
---|
7112 | h1, h2, h3 {
|
---|
7113 | font-size: inherit;
|
---|
7114 | font-weight: inherit;
|
---|
7115 | margin: inherit;
|
---|
7116 | }
|
---|
7117 |
|
---|
7118 | a {
|
---|
7119 | color: inherit;
|
---|
7120 | text-decoration: none;
|
---|
7121 | }
|
---|
7122 | .fill-height {
|
---|
7123 | display: flex;
|
---|
7124 | align-items: center;
|
---|
7125 | }
|
---|
7126 | md-checkbox {
|
---|
7127 | margin: inherit;
|
---|
7128 | }
|
---|
7129 | .md-button {
|
---|
7130 | margin-top: 0;
|
---|
7131 | margin-bottom: 0;
|
---|
7132 |
|
---|
7133 | &, &.md-icon-button md-icon {
|
---|
7134 | transition-duration: $swift-ease-in-out-duration;
|
---|
7135 | transition-timing-function: $swift-ease-in-out-timing-function;
|
---|
7136 | transition-property: background-color, fill, color;
|
---|
7137 |
|
---|
7138 | // Normally .md-button is already resetting the transition, when $ngAnimate looks for the duration,
|
---|
7139 | // but in this case, the selector has a higher specificity than the `reset selector`, which means, that
|
---|
7140 | // we need to reset the transition our self.
|
---|
7141 | &.ng-animate {
|
---|
7142 | transition: none;
|
---|
7143 | }
|
---|
7144 | }
|
---|
7145 | }
|
---|
7146 | &> .md-button:first-child {
|
---|
7147 | @include rtl-prop(margin-left, margin-right, $icon-button-margin-offset, auto);
|
---|
7148 | }
|
---|
7149 | &> .md-button:last-child {
|
---|
7150 | @include rtl-prop(margin-right, margin-left, $icon-button-margin-offset, auto);
|
---|
7151 | }
|
---|
7152 |
|
---|
7153 | &> md-menu:last-child {
|
---|
7154 | @include rtl-prop(margin-right, margin-left, $icon-button-margin-offset, auto);
|
---|
7155 | & > .md-button {
|
---|
7156 | @include rtl-prop(margin-right, margin-left, 0, auto);
|
---|
7157 | }
|
---|
7158 | }
|
---|
7159 |
|
---|
7160 | @media screen and (-ms-high-contrast: active) {
|
---|
7161 | border-bottom: 1px solid #fff;
|
---|
7162 | }
|
---|
7163 | }
|
---|
7164 |
|
---|
7165 | // Handle mobile portrait
|
---|
7166 | @media (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: portrait) {
|
---|
7167 | md-toolbar {
|
---|
7168 | min-height: $md-toolbar-height-mobile-portrait;
|
---|
7169 | }
|
---|
7170 |
|
---|
7171 | .md-toolbar-tools {
|
---|
7172 | height: $md-toolbar-height-mobile-portrait;
|
---|
7173 | max-height: $md-toolbar-height-mobile-portrait;
|
---|
7174 | }
|
---|
7175 | }
|
---|
7176 |
|
---|
7177 | // Handle mobile landscape
|
---|
7178 | @media (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: landscape) {
|
---|
7179 | md-toolbar {
|
---|
7180 | min-height: $md-toolbar-height-mobile-landscape;
|
---|
7181 | }
|
---|
7182 |
|
---|
7183 | .md-toolbar-tools {
|
---|
7184 | height: $md-toolbar-height-mobile-landscape;
|
---|
7185 | max-height: $md-toolbar-height-mobile-landscape;
|
---|
7186 | }
|
---|
7187 | }
|
---|
7188 |
|
---|
7189 |
|
---|
7190 | $tooltip-fontsize-lg: 10px !default;
|
---|
7191 | $tooltip-fontsize-sm: 14px !default;
|
---|
7192 | $tooltip-height-lg: 22px !default;
|
---|
7193 | $tooltip-height-sm: 32px !default;
|
---|
7194 | $tooltip-top-margin-lg: 14px !default;
|
---|
7195 | $tooltip-top-margin-sm: 24px !default;
|
---|
7196 | $tooltip-lr-padding-lg: 8px !default;
|
---|
7197 | $tooltip-lr-padding-sm: 16px !default;
|
---|
7198 | $tooltip-max-width: 32px !default;
|
---|
7199 |
|
---|
7200 | .md-tooltip {
|
---|
7201 | display: inline-block;
|
---|
7202 | pointer-events: none;
|
---|
7203 | border-radius: 4px;
|
---|
7204 | overflow: hidden;
|
---|
7205 | opacity: 0;
|
---|
7206 | font-weight: 500;
|
---|
7207 | font-size: $tooltip-fontsize-sm;
|
---|
7208 | white-space: nowrap;
|
---|
7209 | text-overflow: ellipsis;
|
---|
7210 | height: $tooltip-height-sm;
|
---|
7211 | line-height: $tooltip-height-sm;
|
---|
7212 | padding-right: $tooltip-lr-padding-sm;
|
---|
7213 | padding-left: $tooltip-lr-padding-sm;
|
---|
7214 | &.md-origin-top {
|
---|
7215 | transform-origin: center bottom;
|
---|
7216 | margin-top: -$tooltip-top-margin-sm;
|
---|
7217 | }
|
---|
7218 | &.md-origin-right {
|
---|
7219 | transform-origin: left center;
|
---|
7220 | margin-left: $tooltip-top-margin-sm;
|
---|
7221 | }
|
---|
7222 | &.md-origin-bottom {
|
---|
7223 | transform-origin: center top;
|
---|
7224 | margin-top: $tooltip-top-margin-sm;
|
---|
7225 | }
|
---|
7226 | &.md-origin-left {
|
---|
7227 | transform-origin: right center;
|
---|
7228 | margin-left: -$tooltip-top-margin-sm;
|
---|
7229 | }
|
---|
7230 |
|
---|
7231 | @media (min-width: $layout-breakpoint-sm) {
|
---|
7232 | font-size: $tooltip-fontsize-lg;
|
---|
7233 | height: $tooltip-height-lg;
|
---|
7234 | line-height: $tooltip-height-lg;
|
---|
7235 | padding-right: $tooltip-lr-padding-lg;
|
---|
7236 | padding-left: $tooltip-lr-padding-lg;
|
---|
7237 | &.md-origin-top { margin-top: -$tooltip-top-margin-lg; }
|
---|
7238 | &.md-origin-right { margin-left: $tooltip-top-margin-lg; }
|
---|
7239 | &.md-origin-bottom { margin-top: $tooltip-top-margin-lg; }
|
---|
7240 | &.md-origin-left { margin-left: -$tooltip-top-margin-lg; }
|
---|
7241 | }
|
---|
7242 |
|
---|
7243 | &.md-show-add {
|
---|
7244 | transform: scale(0);
|
---|
7245 | }
|
---|
7246 | &.md-show {
|
---|
7247 | transition: $swift-ease-out;
|
---|
7248 | transition-duration: 150ms;
|
---|
7249 | transform: scale(1);
|
---|
7250 | opacity: 0.9;
|
---|
7251 | }
|
---|
7252 | &.md-hide {
|
---|
7253 | transition: $swift-ease-in;
|
---|
7254 | transition-duration: 150ms;
|
---|
7255 | transform: scale(0);
|
---|
7256 | opacity: 0;
|
---|
7257 | }
|
---|
7258 | }
|
---|
7259 |
|
---|
7260 | .md-truncate {
|
---|
7261 | overflow: hidden;
|
---|
7262 | white-space: nowrap;
|
---|
7263 |
|
---|
7264 | // Default overflow is ellipsis
|
---|
7265 | text-overflow: ellipsis;
|
---|
7266 |
|
---|
7267 | // Allow override to use clipping
|
---|
7268 | &.md-clip {
|
---|
7269 | text-overflow: clip;
|
---|
7270 | }
|
---|
7271 |
|
---|
7272 | // This is a flex-specific hack that forces the element to only take up available space.
|
---|
7273 | &.flex {
|
---|
7274 | width: 0;
|
---|
7275 | }
|
---|
7276 | }
|
---|
7277 | $virtual-repeat-scrollbar-width: 16px !default;
|
---|
7278 |
|
---|
7279 | .md-virtual-repeat-container {
|
---|
7280 | box-sizing: border-box;
|
---|
7281 | display: block;
|
---|
7282 | margin: 0;
|
---|
7283 | overflow: hidden;
|
---|
7284 | padding: 0;
|
---|
7285 | position: relative;
|
---|
7286 |
|
---|
7287 | .md-virtual-repeat-scroller {
|
---|
7288 | bottom: 0;
|
---|
7289 | box-sizing: border-box;
|
---|
7290 | left: 0;
|
---|
7291 | margin: 0;
|
---|
7292 | overflow-x: hidden;
|
---|
7293 | padding: 0;
|
---|
7294 | position: absolute;
|
---|
7295 | right: 0;
|
---|
7296 | top: 0;
|
---|
7297 | -webkit-overflow-scrolling: touch;
|
---|
7298 | }
|
---|
7299 |
|
---|
7300 | .md-virtual-repeat-sizer {
|
---|
7301 | box-sizing: border-box;
|
---|
7302 | height: 1px;
|
---|
7303 | display: block;
|
---|
7304 | margin: 0;
|
---|
7305 | padding: 0;
|
---|
7306 | width: 1px;
|
---|
7307 | }
|
---|
7308 |
|
---|
7309 | .md-virtual-repeat-offsetter {
|
---|
7310 | box-sizing: border-box;
|
---|
7311 | left: 0;
|
---|
7312 | margin: 0;
|
---|
7313 | padding: 0;
|
---|
7314 | position: absolute;
|
---|
7315 | right: 0;
|
---|
7316 | top: 0;
|
---|
7317 | }
|
---|
7318 | }
|
---|
7319 |
|
---|
7320 | .md-virtual-repeat-container.md-orient-horizontal {
|
---|
7321 | .md-virtual-repeat-scroller {
|
---|
7322 | overflow-x: auto;
|
---|
7323 | overflow-y: hidden;
|
---|
7324 | }
|
---|
7325 |
|
---|
7326 | .md-virtual-repeat-offsetter {
|
---|
7327 | // Leave room for the scroll bar.
|
---|
7328 | // TODO: Will probably need to perform measurements at runtime.
|
---|
7329 | bottom: $virtual-repeat-scrollbar-width;
|
---|
7330 | @include rtl-prop(right, left, auto, auto);
|
---|
7331 | white-space: nowrap;
|
---|
7332 | }
|
---|
7333 | }
|
---|
7334 |
|
---|
7335 | .md-whiteframe-1dp, .md-whiteframe-z1 {
|
---|
7336 | box-shadow: $whiteframe-shadow-1dp;
|
---|
7337 | }
|
---|
7338 | .md-whiteframe-2dp {
|
---|
7339 | box-shadow: $whiteframe-shadow-2dp;
|
---|
7340 | }
|
---|
7341 | .md-whiteframe-3dp {
|
---|
7342 | box-shadow: $whiteframe-shadow-3dp;
|
---|
7343 | }
|
---|
7344 | .md-whiteframe-4dp, .md-whiteframe-z2{
|
---|
7345 | box-shadow: $whiteframe-shadow-4dp;
|
---|
7346 | }
|
---|
7347 | .md-whiteframe-5dp {
|
---|
7348 | box-shadow: $whiteframe-shadow-5dp;
|
---|
7349 | }
|
---|
7350 | .md-whiteframe-6dp {
|
---|
7351 | box-shadow: $whiteframe-shadow-6dp;
|
---|
7352 | }
|
---|
7353 | .md-whiteframe-7dp, .md-whiteframe-z3 {
|
---|
7354 | box-shadow: $whiteframe-shadow-7dp;
|
---|
7355 | }
|
---|
7356 | .md-whiteframe-8dp {
|
---|
7357 | box-shadow: $whiteframe-shadow-8dp;
|
---|
7358 | }
|
---|
7359 | .md-whiteframe-9dp {
|
---|
7360 | box-shadow: $whiteframe-shadow-9dp;
|
---|
7361 | }
|
---|
7362 | .md-whiteframe-10dp, .md-whiteframe-z4 {
|
---|
7363 | box-shadow: $whiteframe-shadow-10dp;
|
---|
7364 | }
|
---|
7365 | .md-whiteframe-11dp {
|
---|
7366 | box-shadow: $whiteframe-shadow-11dp;
|
---|
7367 | }
|
---|
7368 | .md-whiteframe-12dp {
|
---|
7369 | box-shadow: $whiteframe-shadow-12dp;
|
---|
7370 | }
|
---|
7371 | .md-whiteframe-13dp, .md-whiteframe-z5{
|
---|
7372 | box-shadow: $whiteframe-shadow-13dp;
|
---|
7373 | }
|
---|
7374 | .md-whiteframe-14dp {
|
---|
7375 | box-shadow: $whiteframe-shadow-14dp;
|
---|
7376 | }
|
---|
7377 | .md-whiteframe-15dp {
|
---|
7378 | box-shadow: $whiteframe-shadow-15dp;
|
---|
7379 | }
|
---|
7380 | .md-whiteframe-16dp {
|
---|
7381 | box-shadow: $whiteframe-shadow-16dp;
|
---|
7382 | }
|
---|
7383 | .md-whiteframe-17dp {
|
---|
7384 | box-shadow: $whiteframe-shadow-17dp;
|
---|
7385 | }
|
---|
7386 | .md-whiteframe-18dp {
|
---|
7387 | box-shadow: $whiteframe-shadow-18dp;
|
---|
7388 | }
|
---|
7389 | .md-whiteframe-19dp {
|
---|
7390 | box-shadow: $whiteframe-shadow-19dp;
|
---|
7391 | }
|
---|
7392 | .md-whiteframe-20dp {
|
---|
7393 | box-shadow: $whiteframe-shadow-20dp;
|
---|
7394 | }
|
---|
7395 | .md-whiteframe-21dp {
|
---|
7396 | box-shadow: $whiteframe-shadow-21dp;
|
---|
7397 | }
|
---|
7398 | .md-whiteframe-22dp {
|
---|
7399 | box-shadow: $whiteframe-shadow-22dp;
|
---|
7400 | }
|
---|
7401 | .md-whiteframe-23dp {
|
---|
7402 | box-shadow: $whiteframe-shadow-23dp;
|
---|
7403 | }
|
---|
7404 | .md-whiteframe-24dp {
|
---|
7405 | box-shadow: $whiteframe-shadow-24dp;
|
---|
7406 | }
|
---|
7407 |
|
---|
7408 | @media screen and (-ms-high-contrast: active) {
|
---|
7409 | md-whiteframe {
|
---|
7410 | border: 1px solid #fff;
|
---|
7411 | }
|
---|
7412 | }
|
---|
7413 |
|
---|
7414 | @media print {
|
---|
7415 | md-whiteframe, [md-whiteframe] {
|
---|
7416 | background-color: #ffffff;
|
---|
7417 | }
|
---|
7418 | }
|
---|
7419 |
|
---|
7420 | /*
|
---|
7421 | * Since Layout API uses ng-cloak to hide the dom elements while layouts are adjusted
|
---|
7422 | */
|
---|
7423 | [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
|
---|
7424 | display: none !important;
|
---|
7425 | }
|
---|
7426 |
|
---|
7427 | /*
|
---|
7428 | * Responsive attributes
|
---|
7429 | *
|
---|
7430 | * References:
|
---|
7431 | * 1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
|
---|
7432 | * 2) https://css-tricks.com/almanac/properties/f/flex/
|
---|
7433 | * 3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
|
---|
7434 | * 4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
|
---|
7435 | * 5) http://godban.com.ua/projects/flexgrid
|
---|
7436 | */
|
---|
7437 | @-moz-document url-prefix() {
|
---|
7438 | .layout-fill {
|
---|
7439 | margin: 0;
|
---|
7440 | width: 100%;
|
---|
7441 | min-height: 100%;
|
---|
7442 | height: 100%;
|
---|
7443 | }
|
---|
7444 | }
|
---|
7445 |
|
---|
7446 | /*
|
---|
7447 | * Apply Mixins to create Layout/Flexbox styles
|
---|
7448 | */
|
---|
7449 | @include layouts_for_breakpoint();
|
---|
7450 | @include layout-padding-margin();
|
---|
7451 |
|
---|
7452 | /**
|
---|
7453 | * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
|
---|
7454 | * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
|
---|
7455 | * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
|
---|
7456 | *
|
---|
7457 | * hide means hide everywhere
|
---|
7458 | * Sizes:
|
---|
7459 | * $layout-breakpoint-xs: 600px !default;
|
---|
7460 | * $layout-breakpoint-sm: 960px !default;
|
---|
7461 | * $layout-breakpoint-md: 1280px !default;
|
---|
7462 | * $layout-breakpoint-lg: 1920px !default;
|
---|
7463 | */
|
---|
7464 | @media (max-width: $layout-breakpoint-xs - 1) {
|
---|
7465 | // Xtra-SMALL SCREEN
|
---|
7466 | .hide-xs, .hide {
|
---|
7467 | &:not(.show-xs):not(.show) {
|
---|
7468 | display: none;
|
---|
7469 | }
|
---|
7470 | }
|
---|
7471 | @include layouts_for_breakpoint(xs);
|
---|
7472 | }
|
---|
7473 |
|
---|
7474 | @media (min-width: $layout-breakpoint-xs) {
|
---|
7475 | // BIGGER THAN Xtra-SMALL SCREEN
|
---|
7476 | @include layouts_for_breakpoint(gt-xs);
|
---|
7477 |
|
---|
7478 | }
|
---|
7479 |
|
---|
7480 | @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
|
---|
7481 | .hide, .hide-gt-xs {
|
---|
7482 | &:not(.show-gt-xs):not(.show-sm):not(.show) {
|
---|
7483 | display: none;
|
---|
7484 | }
|
---|
7485 | }
|
---|
7486 | .hide-sm:not(.show-gt-xs):not(.show-sm):not(.show) {
|
---|
7487 | display: none;
|
---|
7488 | }
|
---|
7489 |
|
---|
7490 | @include layouts_for_breakpoint(sm);
|
---|
7491 | }
|
---|
7492 |
|
---|
7493 | @media (min-width: $layout-breakpoint-sm) {
|
---|
7494 | // BIGGER THAN SMALL SCREEN
|
---|
7495 | @include layouts_for_breakpoint(gt-sm);
|
---|
7496 |
|
---|
7497 | }
|
---|
7498 |
|
---|
7499 | @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
|
---|
7500 | // MEDIUM SCREEN
|
---|
7501 | .hide, .hide-gt-xs, .hide-gt-sm {
|
---|
7502 | &:not(.show-gt-xs):not(.show-gt-sm):not(.show-md):not(.show) {
|
---|
7503 | display: none;
|
---|
7504 | }
|
---|
7505 | }
|
---|
7506 | .hide-md:not(.show-md):not(.show-gt-sm):not(.show-gt-xs):not(.show) {
|
---|
7507 | display: none;
|
---|
7508 | }
|
---|
7509 | @include layouts_for_breakpoint(md);
|
---|
7510 | }
|
---|
7511 |
|
---|
7512 | @media (min-width: $layout-breakpoint-md) {
|
---|
7513 | // BIGGER THAN MEDIUM SCREEN
|
---|
7514 | @include layouts_for_breakpoint(gt-md);
|
---|
7515 | }
|
---|
7516 |
|
---|
7517 | @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
|
---|
7518 | // LARGE SCREEN
|
---|
7519 | .hide,.hide-gt-xs, .hide-gt-sm, .hide-gt-md {
|
---|
7520 | &:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
|
---|
7521 | display: none;
|
---|
7522 | }
|
---|
7523 | }
|
---|
7524 | .hide-lg:not(.show-lg):not(.show-gt-md):not(.show-gt-sm):not(.show-gt-xs):not(.show) {
|
---|
7525 | display: none;
|
---|
7526 | }
|
---|
7527 |
|
---|
7528 | @include layouts_for_breakpoint(lg);
|
---|
7529 | }
|
---|
7530 |
|
---|
7531 | @media (min-width: $layout-breakpoint-lg) {
|
---|
7532 | @include layouts_for_breakpoint(gt-lg);
|
---|
7533 | @include layouts_for_breakpoint(xl);
|
---|
7534 |
|
---|
7535 | // BIGGER THAN LARGE SCREEN
|
---|
7536 | .hide, .hide-gt-xs, .hide-gt-sm, .hide-gt-md, .hide-gt-lg {
|
---|
7537 | &:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show-xl):not(.show) {
|
---|
7538 | display: none;
|
---|
7539 | }
|
---|
7540 | }
|
---|
7541 | .hide-xl:not(.show-xl):not(.show-gt-lg):not(.show-gt-md):not(.show-gt-sm):not(.show-gt-xs):not(.show) {
|
---|
7542 | display: none;
|
---|
7543 | }
|
---|
7544 |
|
---|
7545 | }
|
---|
7546 |
|
---|
7547 | // General printing Rules
|
---|
7548 | @media print {
|
---|
7549 |
|
---|
7550 | .hide-print:not(.show-print):not(.show) {
|
---|
7551 | display: none !important;
|
---|
7552 | }
|
---|
7553 | }
|
---|