Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: static/src/scss/components/_select.scss

Issue 29624561: Issue 6104 - Minified code in help center repository (Closed) Base URL: https://hg.adblockplus.org/help.eyeo.com
Patch Set: Consolidated gulp tasks Created Dec. 7, 2017, 2:48 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 // This file is part of help.eyeo.com.
2 // Copyright (C) 2017 Eyeo GmbH
3 //
4 // help.eyeo.com is free software: you can redistribute it and/or modify
5 // it under the terms of the GNU General Public License as published by
6 // the Free Software Foundation, either version 3 of the License, or
7 // (at your option) any later version.
8 //
9 // help.eyeo.com is distributed in the hope that it will be useful,
10 // but WITHOUT ANY WARRANTY; without even the implied warranty of
11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 // GNU General Public License for more details.
13 //
14 // You should have received a copy of the GNU General Public License
15 // along with help.eyeo.com. If not, see <http://www.gnu.org/licenses/>.
16
17 /*******************************************************************************
18 * Select
19 ******************************************************************************/
20
21 /* Custom Select
22 ******************************************************************************/
23
24 .custom-select
25 {
26 position: relative;
27 }
28
29 .custom-select-selected
30 {
31 display: none;
32 padding: 0.2em 0.7em;
33 border: 2px solid $gray-medium;
34 border-radius: 4px;
35 color: $white;
36 background: transparent;
37 font-family: inherit;
38 font-size: inherit;
39 cursor: pointer;
40 }
41
42 .js .custom-select-selected
43 {
44 display: inline-block;
45 }
46
47 .custom-select-options
48 {
49 position: absolute;
50 bottom: 100%;
51 left: 0px;
52 margin-bottom: 0.5em;
53 border: 1px solid $gray-medium;
54 border-radius: 4px;
55 box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
56 color: $black;
57 background: $white;
58 list-style: none;
59 z-index: 2;
60
61 a
62 {
63 color: $black;
64 }
65 }
66
67 .custom-select-options[aria-hidden="true"]
68 {
69 display: none;
70 }
71
72 [dir="rtl"] .custom-select-options
73 {
74 right: 0px;
75 left: auto;
76 padding: 0.7em;
77 }
78
79 .no-js .custom-select-options
80 {
81 position: relative;
82 display: inline-block;
83 top: 0px;
84 padding: 0px;
85 border: 0px;
86 color: inherit;
87 opacity: 1;
88 background: none;
89
90 li
91 {
92 display: inline;
93 }
94
95 li:after
96 {
97 content: ",";
98 }
99
100 li:last-child:after
101 {
102 content: none;
103 }
104
105 a
106 {
107 color: inherit;
108 }
109 }
110
111 .custom-select-option
112 {
113 padding: 0.7em;
114 }
115
116 /* Custom Dropdown (extends the custom select element)
117 ******************************************************************************/
118
119 .custom-select-dropdown .custom-select-selected,
120 .custom-select-dropdown .custom-select-options
121 {
122 width: 100%;
123 }
124
125 .custom-select-dropdown .custom-select-selected
126 {
127 position: relative;
128 height: 2.5em;
129 padding-right: 3.5em;
130 padding-left: 0.7em;
131 color: $primary;
132 text-align: left;
133 }
134
135 [dir="rtl"] .custom-select-dropdown .custom-select-selected
136 {
137 padding-right: 0.7em;
138 padding-left: 3.5em;
139 text-align: right;
140 }
141
142 .custom-select-dropdown .custom-select-selected:after
143 {
144 position: absolute;
145 top: 0;
146 right: 0;
147 width: 3em;
148 height: 100%;
149 border-left: 2px solid $gray-medium;
150 background-image: url(/dist/img/png/arrow-icon-down-secondary.png);
151 background-image: linear-gradient(transparent, transparent),
152 url(/dist/img/svg/arrow-icon-down-secondary.svg);
153 background-repeat: no-repeat;
154 background-position: center;
155 background-size: 0.7em;
156 content: "";
157 }
158
159 [dir="rtl"] .custom-select-dropdown .custom-select-selected:after
160 {
161 right: auto;
162 left: 0;
163 border-right: 2px solid $gray-medium;
164 border-left: 0;
165 }
166
167 .custom-select-dropdown .custom-select-options
168 {
169 top: 100%;
170 bottom: auto;
171 }
OLDNEW

Powered by Google App Engine
This is Rietveld