OLD | NEW |
1 /* | 1 /* |
2 * Copyright 2014 The Chromium Authors. All rights reserved. | 2 * Copyright 2014 The Chromium Authors. All rights reserved. |
3 * Use of this source code is governed by a BSD-style license that can be | 3 * Use of this source code is governed by a BSD-style license that can be |
4 * found in the LICENSE file. | 4 * found in the LICENSE file. |
5 */ | 5 */ |
6 | 6 |
7 .responsive-design { | 7 .responsive-design { |
8 overflow: hidden; | 8 overflow: hidden; |
9 position: relative; | 9 position: relative; |
10 } | 10 } |
(...skipping 14 matching lines...) Expand all Loading... |
25 overflow: visible; | 25 overflow: visible; |
26 } | 26 } |
27 | 27 |
28 .responsive-design-slider-width, | 28 .responsive-design-slider-width, |
29 .responsive-design-slider-height { | 29 .responsive-design-slider-height { |
30 flex: none; | 30 flex: none; |
31 justify-content: center; | 31 justify-content: center; |
32 } | 32 } |
33 | 33 |
34 .responsive-design-slider-thumb { | 34 .responsive-design-slider-thumb { |
35 flex: 0 1 100px; | |
36 border: 1px solid rgb(231, 231, 231); | 35 border: 1px solid rgb(231, 231, 231); |
37 background-color: lightgray; | 36 background-color: lightgray; |
38 box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); | 37 box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); |
39 display: flex; | 38 background-repeat: no-repeat; |
40 justify-content: center; | |
41 align-items: center; | |
42 } | 39 } |
43 | 40 |
44 .responsive-design-slider-width .responsive-design-slider-thumb { | 41 .responsive-design-slider-width .responsive-design-slider-thumb { |
| 42 padding: 44px 5px; |
45 border-radius: 0 3px 3px 0; | 43 border-radius: 0 3px 3px 0; |
46 border-left: none; | 44 border-left: none; |
47 } | 45 } |
48 | 46 |
49 .responsive-design-slider-width .responsive-design-slider-thumb.reversed { | |
50 border-radius: 0; | |
51 border-left: none; | |
52 border-right: none; | |
53 } | |
54 | |
55 .responsive-design-slider-height .responsive-design-slider-thumb { | 47 .responsive-design-slider-height .responsive-design-slider-thumb { |
| 48 padding: 4px 44px; |
56 border-radius: 0 0 3px 3px; | 49 border-radius: 0 0 3px 3px; |
57 border-top: none; | 50 border-top: none; |
58 } | 51 } |
59 | 52 |
60 .responsive-design-slider-height .responsive-design-slider-thumb.reversed { | 53 .responsive-design-thumb-handle { |
61 border-radius: 0; | 54 content: url(Images/statusbarResizerHorizontal.png); |
62 border-top: none; | 55 pointer-events: none; |
63 border-bottom: 0; | |
64 } | 56 } |
65 | 57 |
66 .responsive-design-zero-button { | 58 .responsive-design-slider-height .responsive-design-thumb-handle { |
67 width: 14px; | 59 transform: rotate(90deg); |
68 height: 14px; | |
69 background-repeat: no-repeat; | |
70 background-position: 2px 5px; | |
71 background-image: url(Images/searchNext.png); | |
72 opacity: 0.3; | |
73 cursor: pointer; | |
74 } | 60 } |
75 | 61 |
76 .responsive-design-zero-button:hover { | 62 .responsive-design-resolution-label { |
77 opacity: 0.7; | 63 position: absolute; |
| 64 color: white; |
| 65 background-color: hsl(41, 100%, 47%); |
| 66 padding: 3px; |
| 67 font-size: 12px; |
| 68 text-align: center; |
| 69 text-shadow: hsl(41, 100%, 39%) 1px 1px; |
78 } | 70 } |
79 | 71 |
80 .responsive-design-slider-height .reversed .responsive-design-zero-button { | 72 .responsive-design-resolution-width { |
81 -webkit-transform: rotate(180deg); | 73 top: 0; |
82 } | 74 } |
83 | 75 |
84 .responsive-design-slider-width .responsive-design-zero-button { | 76 .responsive-design-resolution-height { |
85 -webkit-transform: rotate(270deg); | 77 left: 0; |
86 } | 78 } |
87 | |
88 .responsive-design-slider-width .reversed .responsive-design-zero-button { | |
89 -webkit-transform: rotate(90deg); | |
90 } | |
OLD | NEW |