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

Side by Side Diff: stylesheets/partials/_variables.scss

Issue 85333007: Begin the redesign process, starting with the navbar. (Closed) Base URL: git@github.com:dart-lang/pub-dartlang.git@master
Patch Set: Code review updates. Created 7 years 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
« no previous file with comments | « stylesheets/partials/_syntax.scss ('k') | stylesheets/style.scss » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 // Override Bootstrap variables here (defaults copied from bootstrap-sass versio n 3.0.2.1):
2 //
3 // Variables
4 // --------------------------------------------------
5
6 // Global values
7 // --------------------------------------------------
8
9 // Grays
10 // -------------------------
11
12 //$gray-darker: lighten(#000, 13.5%); // #222
13 $gray-dark: #484848; // lighten(#000, 28.25%)
14 //$gray: lighten(#000, 33.5%); // #555
15 //$gray-light: lighten(#000, 60%); // #999
16 //$gray-lighter: lighten(#000, 93.5%); // #eee
17
18 // Brand colors
19 // -------------------------
20
21 //$brand-primary: #428bca;
22 //$brand-success: #5cb85c;
23 //$brand-warning: #f0ad4e;
24 //$brand-danger: #d9534f;
25 //$brand-info: #5bc0de;
26
27 // Scaffolding
28 // -------------------------
29
30 //$body-bg: #fff;
31 //$text-color: $gray-dark;
32
33 // Links
34 // -------------------------
35
36 //$link-color: $brand-primary;
37 //$link-hover-color: darken($link-color, 15%);
38
39 // Typography
40 // -------------------------
41
42 $font-family-sans-serif: "Roboto", sans-serif;
43 //$font-family-serif: Georgia, "Times New Roman", Times, serif;
44 //$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
45 //$font-family-base: $font-family-sans-serif;
46
47 $font-size-base: 15px;
48 $font-size-large: 18px;
49 $font-size-small: 12px;
50
51 //$font-size-h1: floor($font-size-base * 2.6); // ~36px
52 //$font-size-h2: floor($font-size-base * 2.15); // ~30px
53 //$font-size-h3: ceil($font-size-base * 1.7); // ~24px
54 //$font-size-h4: ceil($font-size-base * 1.25); // ~18px
55 //$font-size-h5: $font-size-base;
56 //$font-size-h6: ceil($font-size-base * 0.85); // ~12px
57
58 $line-height-base: 1.2; // 18/15
59 $line-height-computed: floor($font-size-base * $line-height-base); // 18px
60
61 $headings-font-family: "Montserrat", sans-serif;
62 //$headings-font-weight: 500;
63 //$headings-line-height: 1.1;
64 //$headings-color: inherit;
65
66 // Iconography
67 // -------------------------
68
69 //$icon-font-path: "bootstrap/";
70 //$icon-font-name: "glyphicons-halflings-regular";
71
72 // Components
73 // -------------------------
74 // Based on 14px font-size and 1.428 line-height (~20px to start)
75
76 //$padding-base-vertical: 6px;
77 //$padding-base-horizontal: 12px;
78
79 //$padding-large-vertical: 10px;
80 //$padding-large-horizontal: 16px;
81
82 //$padding-small-vertical: 5px;
83 //$padding-small-horizontal: 10px;
84
85 //$line-height-large: 1.33;
86 //$line-height-small: 1.5;
87
88 //$border-radius-base: 4px;
89 //$border-radius-large: 6px;
90 //$border-radius-small: 3px;
91
92 //$component-active-color: #fff;
93 //$component-active-bg: $brand-primary;
94
95 //$caret-width-base: 4px;
96 //$caret-width-large: 5px;
97
98 // Tables
99 // -------------------------
100
101 //$table-cell-padding: 8px;
102 //$table-condensed-cell-padding: 5px;
103
104 //$table-bg: transparent; // overall background-color
105 //$table-bg-accent: #f9f9f9; // for striping
106 //$table-bg-hover: #f5f5f5;
107 //$table-bg-active: $table-bg-hover;
108
109 //$table-border-color: #ddd; // table and cell border
110
111 // Buttons
112 // -------------------------
113
114 //$btn-font-weight: normal;
115
116 //$btn-default-color: #333;
117 //$btn-default-bg: #fff;
118 //$btn-default-border: #ccc;
119
120 //$btn-primary-color: #fff;
121 //$btn-primary-bg: $brand-primary;
122 //$btn-primary-border: darken($btn-primary-bg, 5%);
123
124 //$btn-success-color: #fff;
125 //$btn-success-bg: $brand-success;
126 //$btn-success-border: darken($btn-success-bg, 5%);
127
128 //$btn-warning-color: #fff;
129 //$btn-warning-bg: $brand-warning;
130 //$btn-warning-border: darken($btn-warning-bg, 5%);
131
132 //$btn-danger-color: #fff;
133 //$btn-danger-bg: $brand-danger;
134 //$btn-danger-border: darken($btn-danger-bg, 5%);
135
136 //$btn-info-color: #fff;
137 //$btn-info-bg: $brand-info;
138 //$btn-info-border: darken($btn-info-bg, 5%);
139
140 //$btn-link-disabled-color: $gray-light;
141
142 // Forms
143 // -------------------------
144
145 //$input-bg: #fff;
146 //$input-bg-disabled: $gray-lighter;
147
148 //$input-color: $gray;
149 //$input-border: #ccc;
150 //$input-border-radius: $border-radius-base;
151 //$input-border-focus: #66afe9;
152
153 //$input-color-placeholder: $gray-light;
154
155 //$input-height-base: ($line-height-computed + ($padding-base-verti cal * 2) + 2);
156 //$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2);
157 //$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2);
158
159 //$legend-color: $gray-dark;
160 //$legend-border-color: #e5e5e5;
161
162 //$input-group-addon-bg: $gray-lighter;
163 //$input-group-addon-border-color: $input-border;
164
165 // Dropdowns
166 // -------------------------
167
168 //$dropdown-bg: #fff;
169 //$dropdown-border: rgba(0,0,0,.15);
170 //$dropdown-fallback-border: #ccc;
171 //$dropdown-divider-bg: #e5e5e5;
172
173 //$dropdown-link-color: $gray-dark;
174 //$dropdown-link-hover-color: darken($gray-dark, 5%);
175 //$dropdown-link-hover-bg: #f5f5f5;
176
177 //$dropdown-link-active-color: $component-active-color;
178 //$dropdown-link-active-bg: $component-active-bg;
179
180 //$dropdown-link-disabled-color: $gray-light;
181
182 //$dropdown-header-color: $gray-light;
183
184 //$dropdown-caret-color: #000;
185
186 // COMPONENT VARIABLES
187 // --------------------------------------------------
188
189 // Z-index master list
190 // -------------------------
191 // Used for a bird's eye view of components dependent on the z-axis
192 // Try to avoid customizing these :)
193
194 //$zindex-navbar: 1000;
195 //$zindex-dropdown: 1000;
196 //$zindex-popover: 1010;
197 //$zindex-tooltip: 1030;
198 //$zindex-navbar-fixed: 1030;
199 //$zindex-modal-background: 1040;
200 //$zindex-modal: 1050;
201
202 // Grid system
203 // --------------------------------------------------
204
205 // Number of columns in the grid system
206 //$grid-columns: 12;
207 // Padding, to be divided by two and applied to the left and right of all column s
208 $grid-gutter-width: 30px;
209 // Point at which the navbar stops collapsing
210 //$grid-float-breakpoint: $screen-sm-min;
211
212 // Navbar
213 // -------------------------
214
215 // Basics of a navbar
216 $navbar-height: 62px;
217 $navbar-margin-bottom: 20px;
218 //$navbar-border-radius: $border-radius-base;
219 $navbar-padding-horizontal: floor(($grid-gutter-width - 10) / 2);
220 $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2 );
221
222 //$navbar-default-color: #777;
223 $navbar-default-bg: #fff;
224 //$navbar-default-border: darken($navbar-default-bg, 6.5%);
225
226 // Navbar links
227 $navbar-default-link-color: #464646;
228 $navbar-default-link-hover-color: #000;
229 //$navbar-default-link-hover-bg: transparent;
230 //$navbar-default-link-active-color: #555;
231 //$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%);
232 //$navbar-default-link-disabled-color: #ccc;
233 //$navbar-default-link-disabled-bg: transparent;
234
235 // Navbar brand label
236 //$navbar-default-brand-color: $navbar-default-link-color;
237 //$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%);
238 //$navbar-default-brand-hover-bg: transparent;
239
240 // Navbar toggle
241 //$navbar-default-toggle-hover-bg: #ddd;
242 //$navbar-default-toggle-icon-bar-bg: #ccc;
243 //$navbar-default-toggle-border-color: #ddd;
244
245 // Inverted navbar
246 //
247 // Reset inverted navbar basics
248 //$navbar-inverse-color: $gray-light;
249 //$navbar-inverse-bg: #222;
250 //$navbar-inverse-border: darken($navbar-inverse-bg, 10%);
251
252 // Inverted navbar links
253 //$navbar-inverse-link-color: $gray-light;
254 //$navbar-inverse-link-hover-color: #fff;
255 //$navbar-inverse-link-hover-bg: transparent;
256 //$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;
257 //$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%);
258 //$navbar-inverse-link-disabled-color: #444;
259 //$navbar-inverse-link-disabled-bg: transparent;
260
261 // Inverted navbar brand label
262 //$navbar-inverse-brand-color: $navbar-inverse-link-color;
263 //$navbar-inverse-brand-hover-color: #fff;
264 //$navbar-inverse-brand-hover-bg: transparent;
265
266 // Inverted navbar toggle
267 //$navbar-inverse-toggle-hover-bg: #333;
268 //$navbar-inverse-toggle-icon-bar-bg: #fff;
269 //$navbar-inverse-toggle-border-color: #333;
270
271 // Navs
272 // -------------------------
273
274 $nav-link-padding: 200px 15px;
275 //$nav-link-hover-bg: $gray-lighter;
276
277 //$nav-disabled-link-color: $gray-light;
278 //$nav-disabled-link-hover-color: $gray-light;
279
280 //$nav-open-link-hover-color: #fff;
281 //$nav-open-caret-border-color: #fff;
282
283 // Tabs
284 //$nav-tabs-border-color: #ddd;
285
286 //$nav-tabs-link-hover-border-color: $gray-lighter;
287
288 //$nav-tabs-active-link-hover-bg: $body-bg;
289 //$nav-tabs-active-link-hover-color: $gray;
290 //$nav-tabs-active-link-hover-border-color: #ddd;
291
292 //$nav-tabs-justified-link-border-color: #ddd;
293 //$nav-tabs-justified-active-link-border-color: $body-bg;
294
295 // Pills
296 //$nav-pills-border-radius: $border-radius-base;
297 //$nav-pills-active-link-hover-bg: $component-active-bg;
298 //$nav-pills-active-link-hover-color: $component-active-color;
299
300 // Pagination
301 // -------------------------
302
303 //$pagination-bg: #fff;
304 //$pagination-border: #ddd;
305
306 //$pagination-hover-bg: $gray-lighter;
307
308 //$pagination-active-bg: $brand-primary;
309 //$pagination-active-color: #fff;
310
311 //$pagination-disabled-color: $gray-light;
312
313 // Pager
314 // -------------------------
315
316 //$pager-border-radius: 15px;
317 //$pager-disabled-color: $gray-light;
318
319 // Jumbotron
320 // -------------------------
321
322 //$jumbotron-padding: 30px;
323 //$jumbotron-color: inherit;
324 //$jumbotron-bg: $gray-lighter;
325 //$jumbotron-heading-color: inherit;
326 //$jumbotron-font-size: ceil($font-size-base * 1.5);
327
328 // Form states and alerts
329 // -------------------------
330
331 //$state-success-text: #468847;
332 //$state-success-bg: #dff0d8;
333 //$state-success-border: darken(adjust-hue($state-success-bg, -10), 5% );
334
335 //$state-info-text: #3a87ad;
336 //$state-info-bg: #d9edf7;
337 //$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%);
338
339 //$state-warning-text: #c09853;
340 //$state-warning-bg: #fcf8e3;
341 //$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5% );
342
343 //$state-danger-text: #b94a48;
344 //$state-danger-bg: #f2dede;
345 //$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) ;
346
347 // Tooltips
348 // -------------------------
349 //$tooltip-max-width: 200px;
350 //$tooltip-color: #fff;
351 //$tooltip-bg: #000;
352
353 //$tooltip-arrow-width: 5px;
354 //$tooltip-arrow-color: $tooltip-bg;
355
356 // Popovers
357 // -------------------------
358 //$popover-bg: #fff;
359 //$popover-max-width: 276px;
360 //$popover-border-color: rgba(0,0,0,.2);
361 //$popover-fallback-border-color: #ccc;
362
363 //$popover-title-bg: darken($popover-bg, 3%);
364
365 //$popover-arrow-width: 10px;
366 //$popover-arrow-color: #fff;
367
368 //$popover-arrow-outer-width: ($popover-arrow-width + 1);
369 //$popover-arrow-outer-color: rgba(0,0,0,.25);
370 //$popover-arrow-outer-fallback-color: #999;
371
372 // Labels
373 // -------------------------
374
375 //$label-default-bg: $gray-light;
376 //$label-primary-bg: $brand-primary;
377 //$label-success-bg: $brand-success;
378 //$label-info-bg: $brand-info;
379 //$label-warning-bg: $brand-warning;
380 //$label-danger-bg: $brand-danger;
381
382 //$label-color: #fff;
383 //$label-link-hover-color: #fff;
384
385 // Modals
386 // -------------------------
387 //$modal-inner-padding: 20px;
388
389 //$modal-title-padding: 15px;
390 //$modal-title-line-height: $line-height-base;
391
392 //$modal-content-bg: #fff;
393 //$modal-content-border-color: rgba(0,0,0,.2);
394 //$modal-content-fallback-border-color: #999;
395
396 //$modal-backdrop-bg: #000;
397 //$modal-header-border-color: #e5e5e5;
398 //$modal-footer-border-color: $modal-header-border-color;
399
400 // Alerts
401 // -------------------------
402 //$alert-padding: 15px;
403 //$alert-border-radius: $border-radius-base;
404 //$alert-link-font-weight: bold;
405
406 //$alert-success-bg: $state-success-bg;
407 //$alert-success-text: $state-success-text;
408 //$alert-success-border: $state-success-border;
409
410 //$alert-info-bg: $state-info-bg;
411 //$alert-info-text: $state-info-text;
412 //$alert-info-border: $state-info-border;
413
414 //$alert-warning-bg: $state-warning-bg;
415 //$alert-warning-text: $state-warning-text;
416 //$alert-warning-border: $state-warning-border;
417
418 //$alert-danger-bg: $state-danger-bg;
419 //$alert-danger-text: $state-danger-text;
420 //$alert-danger-border: $state-danger-border;
421
422 // Progress bars
423 // -------------------------
424 //$progress-bg: #f5f5f5;
425 //$progress-bar-color: #fff;
426
427 //$progress-bar-bg: $brand-primary;
428 //$progress-bar-success-bg: $brand-success;
429 //$progress-bar-warning-bg: $brand-warning;
430 //$progress-bar-danger-bg: $brand-danger;
431 //$progress-bar-info-bg: $brand-info;
432
433 // List group
434 // -------------------------
435 //$list-group-bg: #fff;
436 //$list-group-border: #ddd;
437 //$list-group-border-radius: $border-radius-base;
438
439 //$list-group-hover-bg: #f5f5f5;
440 //$list-group-active-color: $component-active-color;
441 //$list-group-active-bg: $component-active-bg;
442 //$list-group-active-border: $list-group-active-bg;
443
444 //$list-group-link-color: #555;
445 //$list-group-link-heading-color: #333;
446
447 // Panels
448 // -------------------------
449 //$panel-bg: #fff;
450 //$panel-inner-border: #ddd;
451 //$panel-border-radius: $border-radius-base;
452 //$panel-footer-bg: #f5f5f5;
453
454 //$panel-default-text: $gray-dark;
455 //$panel-default-border: #ddd;
456 //$panel-default-heading-bg: #f5f5f5;
457
458 //$panel-primary-text: #fff;
459 //$panel-primary-border: $brand-primary;
460 //$panel-primary-heading-bg: $brand-primary;
461
462 //$panel-success-text: $state-success-text;
463 //$panel-success-border: $state-success-border;
464 //$panel-success-heading-bg: $state-success-bg;
465
466 //$panel-warning-text: $state-warning-text;
467 //$panel-warning-border: $state-warning-border;
468 //$panel-warning-heading-bg: $state-warning-bg;
469
470 //$panel-danger-text: $state-danger-text;
471 //$panel-danger-border: $state-danger-border;
472 //$panel-danger-heading-bg: $state-danger-bg;
473
474 //$panel-info-text: $state-info-text;
475 //$panel-info-border: $state-info-border;
476 //$panel-info-heading-bg: $state-info-bg;
477
478 // Thumbnails
479 // -------------------------
480 //$thumbnail-padding: 4px;
481 //$thumbnail-bg: $body-bg;
482 //$thumbnail-border: #ddd;
483 //$thumbnail-border-radius: $border-radius-base;
484
485 //$thumbnail-caption-color: $text-color;
486 //$thumbnail-caption-padding: 9px;
487
488 // Wells
489 // -------------------------
490 //$well-bg: #f5f5f5;
491
492 // Badges
493 // -------------------------
494 //$badge-color: #fff;
495 //$badge-link-hover-color: #fff;
496 //$badge-bg: $gray-light;
497
498 //$badge-active-color: $link-color;
499 //$badge-active-bg: #fff;
500
501 //$badge-font-weight: bold;
502 //$badge-line-height: 1;
503 //$badge-border-radius: 10px;
504
505 // Breadcrumbs
506 // -------------------------
507 //$breadcrumb-bg: #f5f5f5;
508 //$breadcrumb-color: #ccc;
509 //$breadcrumb-active-color: $gray-light;
510 //$breadcrumb-separator: "/";
511
512 // Carousel
513 // ------------------------
514
515 //$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
516
517 //$carousel-control-color: #fff;
518 //$carousel-control-width: 15%;
519 //$carousel-control-opacity: .5;
520 //$carousel-control-font-size: 20px;
521
522 //$carousel-indicator-active-bg: #fff;
523 //$carousel-indicator-border-color: #fff;
524
525 //$carousel-caption-color: #fff;
526
527 // Close
528 // ------------------------
529 //$close-font-weight: bold;
530 //$close-color: #000;
531 //$close-text-shadow: 0 1px 0 #fff;
532
533 // Code
534 // ------------------------
535 //$code-color: #c7254e;
536 //$code-bg: #f9f2f4;
537
538 //$pre-bg: #f5f5f5;
539 //$pre-color: $gray-dark;
540 //$pre-border-color: #ccc;
541 //$pre-scrollable-max-height: 340px;
542
543 // Type
544 // ------------------------
545 //$text-muted: $gray-light;
546 //$abbr-border-color: $gray-light;
547 //$headings-small-color: $gray-light;
548 //$blockquote-small-color: $gray-light;
549 //$blockquote-border-color: $gray-lighter;
550 //$page-header-border-color: $gray-lighter;
551
552 // Miscellaneous
553 // -------------------------
554
555 // Hr border color
556 //$hr-border: $gray-lighter;
557
558 // Horizontal forms & lists
559 //$component-offset-horizontal: 180px;
560
561 // Container sizes
562 // --------------------------------------------------
563
564 // Small screen / tablet
565 //$container-tablet: ((720px + $grid-gutter-width));
566 //$container-sm: $container-tablet;
567
568 // Medium screen / desktop
569 //$container-desktop: ((940px + $grid-gutter-width));
570 //$container-md: $container-desktop;
571
572 // Large screen / wide desktop
573 //$container-large-desktop: ((1140px + $grid-gutter-width));
574 //$container-lg: $container-large-desktop;
OLDNEW
« no previous file with comments | « stylesheets/partials/_syntax.scss ('k') | stylesheets/style.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698