Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(202)

Side by Side Diff: Source/devtools/front_end/elements/spectrum.css

Issue 1308563002: DevTools: allow editing custom color palette, move it out of experimental. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: rebaselined Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « Source/devtools/front_end/elements/Spectrum.js ('k') | Source/devtools/front_end/main/Main.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* https://github.com/bgrins/spectrum */ 1 /* https://github.com/bgrins/spectrum */
2 :host { 2 :host {
3 width: 232px; 3 width: 232px;
4 height: 240px; 4 height: 240px;
5 -webkit-user-select: none; 5 -webkit-user-select: none;
6 } 6 }
7 7
8 :host(.palettes-enabled) { 8 :host(.palettes-enabled) {
9 height: 271px; 9 height: 271px;
10 } 10 }
(...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after
81 top: -1px; 81 top: -1px;
82 cursor: pointer; 82 cursor: pointer;
83 width: 13px; 83 width: 13px;
84 height: 13px; 84 height: 13px;
85 border-radius: 13px; 85 border-radius: 13px;
86 background-color: rgb(248, 248, 248); 86 background-color: rgb(248, 248, 248);
87 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); 87 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
88 } 88 }
89 89
90 .swatch { 90 .swatch {
91 width: 16px; 91 width: 24px;
92 height: 16px; 92 height: 24px;
93 margin: 0; 93 margin: 0;
94 position: absolute; 94 position: absolute;
95 top: 148px; 95 top: 144px;
96 left: 48px; 96 left: 47px;
97 background-image: url(Images/checker.png); 97 background-image: url(Images/checker.png);
98 border-radius: 16px; 98 border-radius: 16px;
99 } 99 }
100 100
101 .swatch-inner { 101 .swatch-inner {
102 width: 100%; 102 width: 100%;
103 height: 100%; 103 height: 100%;
104 display: inline-block; 104 display: inline-block;
105 border-radius: 16px; 105 border-radius: 16px;
106 } 106 }
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after
183 left: 12px; 183 left: 12px;
184 top: 144px; 184 top: 144px;
185 cursor: pointer; 185 cursor: pointer;
186 } 186 }
187 187
188 .spectrum-palette { 188 .spectrum-palette {
189 border-top: 1px solid #dadada; 189 border-top: 1px solid #dadada;
190 position: absolute; 190 position: absolute;
191 top: 235px; 191 top: 235px;
192 width: 100%; 192 width: 100%;
193 padding-right: 24px; 193 padding: 6px 24px 6px 6px;
194 display: flex; 194 display: flex;
195 flex-wrap: wrap; 195 flex-wrap: wrap;
196 } 196 }
197 197
198 .spectrum-palette-color { 198 .spectrum-palette-color {
199 width: 12px;
199 height: 12px; 200 height: 12px;
200 flex: 0 0 12px; 201 flex: 0 0 12px;
201 display: inline-block; 202 display: inline-block;
202 border-radius: 2px; 203 border-radius: 2px;
203 margin-left: 12px; 204 margin: 6px;
204 margin-top: 12px;
205 cursor: pointer; 205 cursor: pointer;
206 } 206 }
207 207
208 .spectrum-palette-color.empty-color {
209 border: 1px solid #dadada;
210 }
211
212 .spectrum-palette > .spectrum-palette-color { 208 .spectrum-palette > .spectrum-palette-color {
213 transition: transform 100ms cubic-bezier(0, 0, 0.2, 1); 209 transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
210 border: 1px solid rgba(0, 0, 0, 0.1);
211 }
212
213 .spectrum-palette > .spectrum-palette-color.empty-color {
214 border-color: transparent;
214 } 215 }
215 216
216 .spectrum-palette > .spectrum-palette-color:not(.empty-color):hover { 217 .spectrum-palette > .spectrum-palette-color:not(.empty-color):hover {
217 transform: scale(1.15); 218 transform: scale(1.15);
218 } 219 }
219 220
220 .spectrum-palette > .toolbar { 221 .add-color-toolbar {
221 margin-left: 5px; 222 position: absolute;
222 margin-top: 5px; 223 right: 29px;
224 bottom: 5px;
223 } 225 }
224 226
225 .spectrum-palette-switcher { 227 .spectrum-palette-switcher {
226 right: 10px; 228 right: 10px;
227 top: 235px; 229 top: 235px;
228 margin-top: 9px; 230 margin-top: 9px;
229 position: absolute; 231 position: absolute;
230 } 232 }
231 233
232 .palette-panel { 234 .palette-panel {
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after
302 width: 100%; 304 width: 100%;
303 height: 100%; 305 height: 100%;
304 } 306 }
305 307
306 .spectrum-contrast-line { 308 .spectrum-contrast-line {
307 fill: none; 309 fill: none;
308 stroke: white; 310 stroke: white;
309 opacity: 0.7; 311 opacity: 0.7;
310 stroke-width: 1.5px; 312 stroke-width: 1.5px;
311 } 313 }
OLDNEW
« no previous file with comments | « Source/devtools/front_end/elements/Spectrum.js ('k') | Source/devtools/front_end/main/Main.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698