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

Delta Between Two Patch Sets: static/scss/components/_select.scss

Issue 29559620: Issue 5692 - Create Browser Selector with Browser Detection Component for help.eyeo.com (Closed) Base URL: https://hg.adblockplus.org/help.eyeo.com
Left Patch Set: Minor cleanup Created Oct. 3, 2017, 8:22 a.m.
Right Patch Set: Re-add browser-select include, add scripts block Created Nov. 2, 2017, 2:29 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « static/scss/components/_browser-select.scss ('k') | static/scss/main.scss » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 // This file is part of help.eyeo.com. 1 // This file is part of help.eyeo.com.
2 // Copyright (C) 2017 Eyeo GmbH 2 // Copyright (C) 2017 Eyeo GmbH
3 // 3 //
4 // help.eyeo.com is free software: you can redistribute it and/or modify 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 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 6 // the Free Software Foundation, either version 3 of the License, or
7 // (at your option) any later version. 7 // (at your option) any later version.
8 // 8 //
9 // help.eyeo.com is distributed in the hope that it will be useful, 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 10 // but WITHOUT ANY WARRANTY; without even the implied warranty of
(...skipping 27 matching lines...) Expand all
38 { 38 {
39 display: inline-block; 39 display: inline-block;
40 } 40 }
41 41
42 .custom-select-options 42 .custom-select-options
43 { 43 {
44 position: absolute; 44 position: absolute;
45 bottom: 100%; 45 bottom: 100%;
46 left: 0px; 46 left: 0px;
47 margin-bottom: 0.5em; 47 margin-bottom: 0.5em;
48 padding: 0.7em;
49 border: 1px solid $gray-medium; 48 border: 1px solid $gray-medium;
50 border-radius: 4px; 49 border-radius: 4px;
51 box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); 50 box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
52 color: $black; 51 color: $black;
53 background: $white; 52 background: $white;
54 list-style: none; 53 list-style: none;
55 z-index: 2; 54 z-index: 2;
56 55
57 a 56 a
58 { 57 {
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
97 { 96 {
98 content: none; 97 content: none;
99 } 98 }
100 99
101 a 100 a
102 { 101 {
103 color: inherit; 102 color: inherit;
104 } 103 }
105 } 104 }
106 105
106 .custom-select-option
juliandoucette 2017/11/02 15:22:19 suggest: change background-color on hove/active/fo
ire 2017/11/03 08:45:36 I'll probably handle this in the other issue handl
107 {
108 padding: 0.7em;
109 }
110
107 // Custom Dropdown (extends the custom select element) 111 // Custom Dropdown (extends the custom select element)
juliandoucette 2017/11/02 15:22:18 suggest: category comment (underline it)
ire 2017/11/03 08:45:36 Will change all comments in a separate issue
108
109 .custom-select-dropdown img
110 {
111 @extend .heading-icon;
112 }
113 112
114 .custom-select-dropdown .custom-select-selected, 113 .custom-select-dropdown .custom-select-selected,
115 .custom-select-dropdown .custom-select-options 114 .custom-select-dropdown .custom-select-options
116 { 115 {
117 width: 100%; 116 width: 100%;
118 } 117 }
119 118
120 .custom-select-dropdown .custom-select-selected 119 .custom-select-dropdown .custom-select-selected
121 { 120 {
122 position: relative; 121 position: relative;
123 height: 40px; 122 height: 2.5em;
124 padding-right: 2.5em; 123 padding-right: 3.5em;
124 padding-left: 0.7em;
125 color: $primary; 125 color: $primary;
126 text-align: left; 126 text-align: left;
127 } 127 }
128 128
129 [dir="rtl"] .custom-select-dropdown .custom-select-selected 129 [dir="rtl"] .custom-select-dropdown .custom-select-selected
130 { 130 {
131 padding-right: 0.7em; 131 padding-right: 0.7em;
132 padding-left: 2.5em; 132 padding-left: 3.5em;
133 text-align: right; 133 text-align: right;
134 } 134 }
135 135
136 .custom-select-dropdown .custom-select-selected:after 136 .custom-select-dropdown .custom-select-selected:after
137 { 137 {
138 position: absolute; 138 position: absolute;
139 top: 0; 139 top: 0;
140 right: 0; 140 right: 0;
141 width: 2em; 141 width: 3em;
142 height: 100%; 142 height: 100%;
143 border-left: 2px solid $gray-medium; 143 border-left: 2px solid $gray-medium;
juliandoucette 2017/11/02 15:22:18 suggest: 1px lighter gray throughout
144 background-image: url(/img/png/arrow-down-icon-secondary.png); 144 background-image: url(/img/png/arrow-icon-down-secondary.png);
145 background-image: linear-gradient(transparent, transparent),
146 url(/img/svg/arrow-icon-down-secondary.svg);
145 background-repeat: no-repeat; 147 background-repeat: no-repeat;
146 background-position: center; 148 background-position: center;
147 background-size: 0.7em; 149 background-size: 0.7em;
148 content: ""; 150 content: "";
149 } 151 }
150 152
151 [dir="rtl"] .custom-select-dropdown .custom-select-selected:after 153 [dir="rtl"] .custom-select-dropdown .custom-select-selected:after
152 { 154 {
153 right: auto; 155 right: auto;
154 left: 0; 156 left: 0;
155 border-right: 2px solid $gray-medium; 157 border-right: 2px solid $gray-medium;
156 border-left: 0; 158 border-left: 0;
157 } 159 }
158 160
159 .custom-select-dropdown .custom-select-options 161 .custom-select-dropdown .custom-select-options
160 { 162 {
161 top: 100%; 163 top: 100%;
162 bottom: auto; 164 bottom: auto;
163 } 165 }
164
165 .custom-select-dropdown .custom-select-options li
166 {
167 line-height: 40px;
168 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld