-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathv1-light.scss
149 lines (130 loc) · 5.62 KB
/
v1-light.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
@charset "UTF-8";
$color-scheme: light;
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$inverted-text-color: #ffffff;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
$primary-text-on-shadow-color: #ffffff;
$text-field-color: $ui-text-color;
// Background-color
$bg-color: #fafafa;
$menu-bg-color: #ffffff;
$menu-bg-hover-color: darken($menu-bg-color, 6%);
$menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$succeeded-card-bg-color: lighten($verified-color, 36%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-active-hover-color: darken($list-bg-color, 16%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$dropdown-field-bg-color: darken($bg-color, 6%);
$dropdown-field-bg-hover-color: darken($dropdown-field-bg-color, 6%);
$dropdown-field-bg-active-color: darken($dropdown-field-bg-color, 10%);
$verified-bg-color: lighten($verified-color, 20%);
$unread-bg-color: transparentize($primary-color, 0.8);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
$icon-bg-hover-color: transparentize(#000000, 0.9);
$icon-bg-active-color: transparentize(#000000, 0.8);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$top-bar-unread-icon-color: darken($primary-color, 30%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 6%);
$contained-button-active-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: transparentize($outlined-button-color, 0.8);
$outlined-button-active-color: transparentize($outlined-button-color, 0.7);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$disabled-button-color: #cccccc;
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-hover-color: darken($border-color, 30%);
$border-active-color: $primary-color;
// Scroll bar color
$scroll-bar-thumb-color: darken($bg-color, 20%);
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #2196f3;
$search-bar-color: darken($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-item-color: transparentize(#ffffff, 0.5);
$tab-item-active-color: #ffffff;
$tab-bg-color: $top-bar-color;
$tab-bg-hover-color: transparentize($tab-item-active-color, 0.9);
$tab-bg-focus-color: transparentize($tab-item-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-color, 30%);
$loading-indicator-color: $primary-color;
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);