topcoat-rails 0.1.6 → 0.8.0
Sign up to get free protection for your applications and to get access to all the features.
- data/Rakefile +5 -5
- data/app/assets/stylesheets/topcoat/desktop-dark.scss +207 -148
- data/app/assets/stylesheets/topcoat/desktop-light.scss +217 -158
- data/app/assets/stylesheets/topcoat/mobile-dark.scss +221 -162
- data/app/assets/stylesheets/topcoat/mobile-light.scss +231 -172
- data/lib/topcoat-rails/version.rb +1 -1
- data/topcoat-rails.gemspec +1 -0
- metadata +29 -14
- checksums.yaml +0 -7
@@ -174,7 +174,7 @@
|
|
174
174
|
vertical-align: top;
|
175
175
|
background-color: #e5e9e8;
|
176
176
|
box-shadow: inset 0 1px #fff;
|
177
|
-
border: 1px solid #
|
177
|
+
border: 1px solid #9daca9;
|
178
178
|
border-radius: 4px;
|
179
179
|
}
|
180
180
|
|
@@ -184,31 +184,34 @@
|
|
184
184
|
.topcoat-button--large--quiet:hover,
|
185
185
|
.topcoat-button-bar__button:hover,
|
186
186
|
.topcoat-button-bar__button--large:hover {
|
187
|
-
background-color: #
|
188
|
-
}
|
189
|
-
|
190
|
-
.topcoat-button:active,
|
191
|
-
.topcoat-button--large:active,
|
192
|
-
.topcoat-button-bar__button:active,
|
193
|
-
.topcoat-button-bar__button--large:active,
|
194
|
-
:checked + .topcoat-button-bar__button {
|
195
|
-
background-color: #d3d7d7;
|
196
|
-
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
187
|
+
background-color: #eff1f1;
|
197
188
|
}
|
198
189
|
|
199
190
|
.topcoat-button:focus,
|
200
191
|
.topcoat-button--quiet:focus,
|
192
|
+
.topcoat-button--quiet:hover:focus,
|
201
193
|
.topcoat-button--large:focus,
|
202
194
|
.topcoat-button--large--quiet:focus,
|
195
|
+
.topcoat-button--large--quiet:hover:focus,
|
203
196
|
.topcoat-button--cta:focus,
|
204
197
|
.topcoat-button--large--cta:focus,
|
205
198
|
.topcoat-button-bar__button:focus,
|
206
199
|
.topcoat-button-bar__button--large:focus {
|
207
|
-
border: 1px solid #
|
208
|
-
box-shadow: 0 0 0 2px #6fb5f1;
|
200
|
+
border: 1px solid #0036ff;
|
201
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
|
209
202
|
outline: 0;
|
210
203
|
}
|
211
204
|
|
205
|
+
.topcoat-button:active,
|
206
|
+
.topcoat-button--large:active,
|
207
|
+
.topcoat-button-bar__button:active,
|
208
|
+
.topcoat-button-bar__button--large:active,
|
209
|
+
:checked + .topcoat-button-bar__button {
|
210
|
+
border: 1px solid #9daca9;
|
211
|
+
background-color: #d2d6d6;
|
212
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.1);
|
213
|
+
}
|
214
|
+
|
212
215
|
.topcoat-button--quiet {
|
213
216
|
background: transparent;
|
214
217
|
border: 1px solid transparent;
|
@@ -218,17 +221,19 @@
|
|
218
221
|
.topcoat-button--quiet:hover,
|
219
222
|
.topcoat-button--large--quiet:hover {
|
220
223
|
text-shadow: 0 1px #fff;
|
221
|
-
border: 1px solid #
|
224
|
+
border: 1px solid #9daca9;
|
222
225
|
box-shadow: inset 0 1px #fff;
|
223
226
|
}
|
224
227
|
|
225
228
|
.topcoat-button--quiet:active,
|
226
|
-
.topcoat-button--
|
229
|
+
.topcoat-button--quiet:focus:active,
|
230
|
+
.topcoat-button--large--quiet:active,
|
231
|
+
.topcoat-button--large--quiet:focus:active {
|
227
232
|
color: #454545;
|
228
233
|
text-shadow: 0 1px #fff;
|
229
|
-
background-color: #
|
230
|
-
border: 1px solid #
|
231
|
-
box-shadow: inset 0 1px rgba(0,0,0,0.
|
234
|
+
background-color: #d2d6d6;
|
235
|
+
border: 1px solid #9daca9;
|
236
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.1);
|
232
237
|
}
|
233
238
|
|
234
239
|
.topcoat-button--large,
|
@@ -248,7 +253,7 @@
|
|
248
253
|
|
249
254
|
.topcoat-button--cta,
|
250
255
|
.topcoat-button--large--cta {
|
251
|
-
border: 1px solid #
|
256
|
+
border: 1px solid #134f7f;
|
252
257
|
background-color: #288edf;
|
253
258
|
box-shadow: inset 0 1px rgba(255,255,255,0.36);
|
254
259
|
color: #fff;
|
@@ -258,12 +263,12 @@
|
|
258
263
|
|
259
264
|
.topcoat-button--cta:hover,
|
260
265
|
.topcoat-button--large--cta:hover {
|
261
|
-
background-color: #
|
266
|
+
background-color: #4ca1e4;
|
262
267
|
}
|
263
268
|
|
264
269
|
.topcoat-button--cta:active,
|
265
270
|
.topcoat-button--large--cta:active {
|
266
|
-
background-color: #
|
271
|
+
background-color: #1e7dc8;
|
267
272
|
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
268
273
|
}
|
269
274
|
|
@@ -593,7 +598,7 @@
|
|
593
598
|
vertical-align: top;
|
594
599
|
background-color: #e5e9e8;
|
595
600
|
box-shadow: inset 0 1px #fff;
|
596
|
-
border: 1px solid #
|
601
|
+
border: 1px solid #9daca9;
|
597
602
|
border-radius: 4px;
|
598
603
|
}
|
599
604
|
|
@@ -601,26 +606,29 @@
|
|
601
606
|
.topcoat-button--quiet:hover,
|
602
607
|
.topcoat-button--large:hover,
|
603
608
|
.topcoat-button--large--quiet:hover {
|
604
|
-
background-color: #
|
605
|
-
}
|
606
|
-
|
607
|
-
.topcoat-button:active,
|
608
|
-
.topcoat-button--large:active {
|
609
|
-
background-color: #d3d7d7;
|
610
|
-
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
609
|
+
background-color: #eff1f1;
|
611
610
|
}
|
612
611
|
|
613
612
|
.topcoat-button:focus,
|
614
613
|
.topcoat-button--quiet:focus,
|
614
|
+
.topcoat-button--quiet:hover:focus,
|
615
615
|
.topcoat-button--large:focus,
|
616
616
|
.topcoat-button--large--quiet:focus,
|
617
|
+
.topcoat-button--large--quiet:hover:focus,
|
617
618
|
.topcoat-button--cta:focus,
|
618
619
|
.topcoat-button--large--cta:focus {
|
619
|
-
border: 1px solid #
|
620
|
-
box-shadow: 0 0 0 2px #6fb5f1;
|
620
|
+
border: 1px solid #0036ff;
|
621
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
|
621
622
|
outline: 0;
|
622
623
|
}
|
623
624
|
|
625
|
+
.topcoat-button:active,
|
626
|
+
.topcoat-button--large:active {
|
627
|
+
border: 1px solid #9daca9;
|
628
|
+
background-color: #d2d6d6;
|
629
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.1);
|
630
|
+
}
|
631
|
+
|
624
632
|
/* topdoc
|
625
633
|
name: Quiet Button
|
626
634
|
description: A simple, yet quiet button
|
@@ -649,17 +657,19 @@
|
|
649
657
|
.topcoat-button--quiet:hover,
|
650
658
|
.topcoat-button--large--quiet:hover {
|
651
659
|
text-shadow: 0 1px #fff;
|
652
|
-
border: 1px solid #
|
660
|
+
border: 1px solid #9daca9;
|
653
661
|
box-shadow: inset 0 1px #fff;
|
654
662
|
}
|
655
663
|
|
656
664
|
.topcoat-button--quiet:active,
|
657
|
-
.topcoat-button--
|
665
|
+
.topcoat-button--quiet:focus:active,
|
666
|
+
.topcoat-button--large--quiet:active,
|
667
|
+
.topcoat-button--large--quiet:focus:active {
|
658
668
|
color: #454545;
|
659
669
|
text-shadow: 0 1px #fff;
|
660
|
-
background-color: #
|
661
|
-
border: 1px solid #
|
662
|
-
box-shadow: inset 0 1px rgba(0,0,0,0.
|
670
|
+
background-color: #d2d6d6;
|
671
|
+
border: 1px solid #9daca9;
|
672
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.1);
|
663
673
|
}
|
664
674
|
|
665
675
|
/* topdoc
|
@@ -736,7 +746,7 @@
|
|
736
746
|
|
737
747
|
.topcoat-button--cta,
|
738
748
|
.topcoat-button--large--cta {
|
739
|
-
border: 1px solid #
|
749
|
+
border: 1px solid #134f7f;
|
740
750
|
background-color: #288edf;
|
741
751
|
box-shadow: inset 0 1px rgba(255,255,255,0.36);
|
742
752
|
color: #fff;
|
@@ -746,12 +756,12 @@
|
|
746
756
|
|
747
757
|
.topcoat-button--cta:hover,
|
748
758
|
.topcoat-button--large--cta:hover {
|
749
|
-
background-color: #
|
759
|
+
background-color: #4ca1e4;
|
750
760
|
}
|
751
761
|
|
752
762
|
.topcoat-button--cta:active,
|
753
763
|
.topcoat-button--large--cta:active {
|
754
|
-
background-color: #
|
764
|
+
background-color: #1e7dc8;
|
755
765
|
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
756
766
|
}
|
757
767
|
|
@@ -1021,7 +1031,7 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
|
|
1021
1031
|
width: 1rem;
|
1022
1032
|
height: 1rem;
|
1023
1033
|
background: #e5e9e8;
|
1024
|
-
border: 1px solid #
|
1034
|
+
border: 1px solid #9daca9;
|
1025
1035
|
border-radius: 3px;
|
1026
1036
|
box-shadow: inset 0 1px #fff;
|
1027
1037
|
}
|
@@ -1038,7 +1048,7 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
|
|
1038
1048
|
width: 14px;
|
1039
1049
|
height: 4px;
|
1040
1050
|
background: transparent;
|
1041
|
-
border: 7px solid #
|
1051
|
+
border: 7px solid #454545;
|
1042
1052
|
border-width: 3px;
|
1043
1053
|
border-top: none;
|
1044
1054
|
border-right: none;
|
@@ -1049,8 +1059,20 @@ input[type="checkbox"]:checked + .topcoat-checkbox__checkmark:after {
|
|
1049
1059
|
}
|
1050
1060
|
|
1051
1061
|
input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
|
1052
|
-
border: 1px solid #
|
1053
|
-
box-shadow: 0 0 0 2px #6fb5f1;
|
1062
|
+
border: 1px solid #0036ff;
|
1063
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
|
1064
|
+
}
|
1065
|
+
|
1066
|
+
input[type="checkbox"]:active + .topcoat-checkbox__checkmark:before {
|
1067
|
+
border: 1px solid #9daca9;
|
1068
|
+
background-color: #d2d6d6;
|
1069
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.1);
|
1070
|
+
}
|
1071
|
+
|
1072
|
+
input[type="checkbox"]:disabled:active + .topcoat-checkbox__checkmark:before {
|
1073
|
+
border: 1px solid #9daca9;
|
1074
|
+
background: #e5e9e8;
|
1075
|
+
box-shadow: inset 0 1px #fff;
|
1054
1076
|
}
|
1055
1077
|
|
1056
1078
|
/**
|
@@ -1168,7 +1190,7 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
|
|
1168
1190
|
vertical-align: baseline;
|
1169
1191
|
background-color: #e5e9e8;
|
1170
1192
|
box-shadow: inset 0 1px #fff;
|
1171
|
-
border: 1px solid #
|
1193
|
+
border: 1px solid #9daca9;
|
1172
1194
|
border-radius: 4px;
|
1173
1195
|
}
|
1174
1196
|
|
@@ -1176,12 +1198,7 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
|
|
1176
1198
|
.topcoat-icon-button--quiet:hover,
|
1177
1199
|
.topcoat-icon-button--large:hover,
|
1178
1200
|
.topcoat-icon-button--large--quiet:hover {
|
1179
|
-
background-color: #
|
1180
|
-
}
|
1181
|
-
|
1182
|
-
.topcoat-icon-button:active {
|
1183
|
-
background-color: #d3d7d7;
|
1184
|
-
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
1201
|
+
background-color: #eff1f1;
|
1185
1202
|
}
|
1186
1203
|
|
1187
1204
|
.topcoat-icon-button:focus,
|
@@ -1190,11 +1207,18 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
|
|
1190
1207
|
.topcoat-icon-button--large:focus,
|
1191
1208
|
.topcoat-icon-button--large--quiet:focus,
|
1192
1209
|
.topcoat-icon-button--large--quiet:hover:focus {
|
1193
|
-
border: 1px solid #
|
1194
|
-
box-shadow: 0 0 0 2px #6fb5f1;
|
1210
|
+
border: 1px solid #0036ff;
|
1211
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
|
1195
1212
|
outline: 0;
|
1196
1213
|
}
|
1197
1214
|
|
1215
|
+
.topcoat-icon-button:active,
|
1216
|
+
.topcoat-icon-button--large:active {
|
1217
|
+
border: 1px solid #9daca9;
|
1218
|
+
background-color: #d2d6d6;
|
1219
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.1);
|
1220
|
+
}
|
1221
|
+
|
1198
1222
|
/* topdoc
|
1199
1223
|
name: Quiet Icon Button
|
1200
1224
|
description: Like quiet button, but it has an icon.
|
@@ -1228,17 +1252,19 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
|
|
1228
1252
|
.topcoat-icon-button--quiet:hover,
|
1229
1253
|
.topcoat-icon-button--large--quiet:hover {
|
1230
1254
|
text-shadow: 0 1px #fff;
|
1231
|
-
border: 1px solid #
|
1255
|
+
border: 1px solid #9daca9;
|
1232
1256
|
box-shadow: inset 0 1px #fff;
|
1233
1257
|
}
|
1234
1258
|
|
1235
1259
|
.topcoat-icon-button--quiet:active,
|
1236
|
-
.topcoat-icon-button--
|
1260
|
+
.topcoat-icon-button--quiet:focus:active,
|
1261
|
+
.topcoat-icon-button--large--quiet:active,
|
1262
|
+
.topcoat-icon-button--large--quiet:focus:active {
|
1237
1263
|
color: #454545;
|
1238
1264
|
text-shadow: 0 1px #fff;
|
1239
|
-
background-color: #
|
1240
|
-
border: 1px solid #
|
1241
|
-
box-shadow: inset 0 1px rgba(0,0,0,0.
|
1265
|
+
background-color: #d2d6d6;
|
1266
|
+
border: 1px solid #9daca9;
|
1267
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.1);
|
1242
1268
|
}
|
1243
1269
|
|
1244
1270
|
/* topdoc
|
@@ -1272,11 +1298,6 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
|
|
1272
1298
|
line-height: 1.688rem;
|
1273
1299
|
}
|
1274
1300
|
|
1275
|
-
.topcoat-icon-button--large:active {
|
1276
|
-
background-color: #d3d7d7;
|
1277
|
-
box-shadow: inset 0 1px rgba(0,0,0,0.12);
|
1278
|
-
}
|
1279
|
-
|
1280
1301
|
/* topdoc
|
1281
1302
|
name: Large Quiet Icon Button
|
1282
1303
|
description: Like large button, but it has an icon and this one is quiet.
|
@@ -1484,24 +1505,6 @@ input[type="checkbox"]:focus + .topcoat-checkbox__checkmark:before {
|
|
1484
1505
|
*
|
1485
1506
|
*/
|
1486
1507
|
|
1487
|
-
/**
|
1488
|
-
*
|
1489
|
-
* Copyright 2012 Adobe Systems Inc.;
|
1490
|
-
*
|
1491
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
1492
|
-
* you may not use this file except in compliance with the License.
|
1493
|
-
* You may obtain a copy of the License at
|
1494
|
-
*
|
1495
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
1496
|
-
*
|
1497
|
-
* Unless required by applicable law or agreed to in writing, software
|
1498
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
1499
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
1500
|
-
* See the License for the specific language governing permissions and
|
1501
|
-
* limitations under the License.
|
1502
|
-
*
|
1503
|
-
*/
|
1504
|
-
|
1505
1508
|
.navigation-bar {
|
1506
1509
|
-moz-box-sizing: border-box;
|
1507
1510
|
box-sizing: border-box;
|
@@ -1953,7 +1956,7 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
|
|
1953
1956
|
width: 1.063rem;
|
1954
1957
|
height: 1.063rem;
|
1955
1958
|
background: #e5e9e8;
|
1956
|
-
border: 1px solid #
|
1959
|
+
border: 1px solid #9daca9;
|
1957
1960
|
box-shadow: inset 0 1px #fff;
|
1958
1961
|
}
|
1959
1962
|
|
@@ -1967,7 +1970,7 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
|
|
1967
1970
|
opacity: 0;
|
1968
1971
|
width: 0.313rem;
|
1969
1972
|
height: 0.313rem;
|
1970
|
-
background: #
|
1973
|
+
background: #454545;
|
1971
1974
|
border: 1px solid rgba(0,0,0,0.1);
|
1972
1975
|
box-shadow: 0 1px rgba(255,255,255,0.5);
|
1973
1976
|
-webkit-transform: none;
|
@@ -1978,8 +1981,20 @@ input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
|
|
1978
1981
|
}
|
1979
1982
|
|
1980
1983
|
input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {
|
1981
|
-
border: 1px solid #
|
1982
|
-
box-shadow: 0 0 0 2px #6fb5f1;
|
1984
|
+
border: 1px solid #0036ff;
|
1985
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
|
1986
|
+
}
|
1987
|
+
|
1988
|
+
input[type="radio"]:active + .topcoat-radio-button__checkmark:before {
|
1989
|
+
border: 1px solid #9daca9;
|
1990
|
+
background-color: #d2d6d6;
|
1991
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.1);
|
1992
|
+
}
|
1993
|
+
|
1994
|
+
input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before {
|
1995
|
+
border: 1px solid #9daca9;
|
1996
|
+
background: #e5e9e8;
|
1997
|
+
box-shadow: inset 0 1px #fff;
|
1983
1998
|
}
|
1984
1999
|
|
1985
2000
|
/*
|
@@ -2127,16 +2142,16 @@ limitations under the License.
|
|
2127
2142
|
|
2128
2143
|
.topcoat-range {
|
2129
2144
|
border-radius: 4px;
|
2130
|
-
border: 1px solid #
|
2131
|
-
background-color: #
|
2145
|
+
border: 1px solid #9daca9;
|
2146
|
+
background-color: #d6dcdb;
|
2132
2147
|
height: 0.5rem;
|
2133
2148
|
border-radius: 15px;
|
2134
2149
|
}
|
2135
2150
|
|
2136
2151
|
.topcoat-range::-moz-range-track {
|
2137
2152
|
border-radius: 4px;
|
2138
|
-
border: 1px solid #
|
2139
|
-
background-color: #
|
2153
|
+
border: 1px solid #9daca9;
|
2154
|
+
background-color: #d6dcdb;
|
2140
2155
|
height: 0.5rem;
|
2141
2156
|
border-radius: 15px;
|
2142
2157
|
}
|
@@ -2145,7 +2160,7 @@ limitations under the License.
|
|
2145
2160
|
height: 1.313rem;
|
2146
2161
|
width: 0.75rem;
|
2147
2162
|
background-color: #e5e9e8;
|
2148
|
-
border: 1px solid #
|
2163
|
+
border: 1px solid #9daca9;
|
2149
2164
|
border-radius: 4px;
|
2150
2165
|
box-shadow: inset 0 1px #fff;
|
2151
2166
|
}
|
@@ -2154,19 +2169,29 @@ limitations under the License.
|
|
2154
2169
|
height: 1.313rem;
|
2155
2170
|
width: 0.75rem;
|
2156
2171
|
background-color: #e5e9e8;
|
2157
|
-
border: 1px solid #
|
2172
|
+
border: 1px solid #9daca9;
|
2158
2173
|
border-radius: 4px;
|
2159
2174
|
box-shadow: inset 0 1px #fff;
|
2160
2175
|
}
|
2161
2176
|
|
2162
2177
|
.topcoat-range:focus::-webkit-slider-thumb {
|
2163
|
-
border: 1px solid #
|
2164
|
-
box-shadow: 0 0 0 2px #6fb5f1;
|
2178
|
+
border: 1px solid #0036ff;
|
2179
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
|
2165
2180
|
}
|
2166
2181
|
|
2167
2182
|
.topcoat-range:focus::-moz-range-thumb {
|
2168
|
-
border: 1px solid #
|
2169
|
-
box-shadow: 0 0 0 2px #6fb5f1;
|
2183
|
+
border: 1px solid #0036ff;
|
2184
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
|
2185
|
+
}
|
2186
|
+
|
2187
|
+
.topcoat-range:active::-webkit-slider-thumb {
|
2188
|
+
border: 1px solid #9daca9;
|
2189
|
+
box-shadow: inset 0 1px #fff;
|
2190
|
+
}
|
2191
|
+
|
2192
|
+
.topcoat-range:active::-moz-range-thumb {
|
2193
|
+
border: 1px solid #9daca9;
|
2194
|
+
box-shadow: inset 0 1px #fff;
|
2170
2195
|
}
|
2171
2196
|
|
2172
2197
|
/**
|
@@ -2316,26 +2341,26 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
2316
2341
|
.topcoat-search-input,
|
2317
2342
|
.topcoat-search-input--large {
|
2318
2343
|
line-height: 1.313rem;
|
2344
|
+
height: 1.313rem;
|
2319
2345
|
font-size: 12px;
|
2320
|
-
border: 1px solid #
|
2321
|
-
background-color: #
|
2322
|
-
box-shadow: inset 0 1px rgba(0,0,0,0.
|
2346
|
+
border: 1px solid #9daca9;
|
2347
|
+
background-color: #fff;
|
2348
|
+
box-shadow: inset 0 1px 0 rgba(0,0,0,0.23);
|
2323
2349
|
color: #454545;
|
2324
2350
|
padding: 0 0 0 1.3rem;
|
2325
2351
|
border-radius: 15px;
|
2326
2352
|
background-image: image-url("topcoat/search.svg");
|
2327
|
-
background-position:
|
2353
|
+
background-position: 1rem center;
|
2328
2354
|
background-repeat: no-repeat;
|
2329
2355
|
background-size: 12px;
|
2330
2356
|
}
|
2331
2357
|
|
2332
2358
|
.topcoat-search-input:focus,
|
2333
2359
|
.topcoat-search-input--large:focus {
|
2334
|
-
background-
|
2335
|
-
|
2336
|
-
|
2337
|
-
|
2338
|
-
box-shadow: 0 0 0 2px #6fb5f1;
|
2360
|
+
background-color: #fff;
|
2361
|
+
color: #454545;
|
2362
|
+
border: 1px solid #0036ff;
|
2363
|
+
box-shadow: inset 0 1px 0 rgba(0,0,0,0.23), 0 0 0 2px #6fb5f1;
|
2339
2364
|
}
|
2340
2365
|
|
2341
2366
|
.topcoat-search-input::-webkit-search-cancel-button,
|
@@ -2351,15 +2376,15 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
2351
2376
|
}
|
2352
2377
|
|
2353
2378
|
.topcoat-search-input:disabled::-webkit-input-placeholder {
|
2354
|
-
color: #
|
2379
|
+
color: #454545;
|
2355
2380
|
}
|
2356
2381
|
|
2357
2382
|
.topcoat-search-input:disabled::-moz-placeholder {
|
2358
|
-
color: #
|
2383
|
+
color: #454545;
|
2359
2384
|
}
|
2360
2385
|
|
2361
2386
|
.topcoat-search-input:disabled:-ms-input-placeholder {
|
2362
|
-
color: #
|
2387
|
+
color: #454545;
|
2363
2388
|
}
|
2364
2389
|
|
2365
2390
|
/* topdoc
|
@@ -2383,28 +2408,29 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
2383
2408
|
|
2384
2409
|
.topcoat-search-input--large {
|
2385
2410
|
line-height: 1.688rem;
|
2411
|
+
height: 1.688rem;
|
2386
2412
|
font-size: 0.875rem;
|
2387
2413
|
font-weight: 400;
|
2388
2414
|
padding: 0 0 0 1.8rem;
|
2389
2415
|
border-radius: 25px;
|
2390
|
-
background-position: 1.
|
2416
|
+
background-position: 1.2rem center;
|
2391
2417
|
background-size: 0.875rem;
|
2392
2418
|
}
|
2393
2419
|
|
2394
2420
|
.topcoat-search-input--large:disabled {
|
2395
|
-
color: #
|
2421
|
+
color: #454545;
|
2396
2422
|
}
|
2397
2423
|
|
2398
2424
|
.topcoat-search-input--large:disabled::-webkit-input-placeholder {
|
2399
|
-
color: #
|
2425
|
+
color: #454545;
|
2400
2426
|
}
|
2401
2427
|
|
2402
2428
|
.topcoat-search-input--large:disabled::-moz-placeholder {
|
2403
|
-
color: #
|
2429
|
+
color: #454545;
|
2404
2430
|
}
|
2405
2431
|
|
2406
2432
|
.topcoat-search-input--large:disabled:-ms-input-placeholder {
|
2407
|
-
color: #
|
2433
|
+
color: #454545;
|
2408
2434
|
}
|
2409
2435
|
|
2410
2436
|
/**
|
@@ -2633,7 +2659,7 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
2633
2659
|
font-size: 12px;
|
2634
2660
|
padding: 0 0.563rem;
|
2635
2661
|
border-radius: 4px;
|
2636
|
-
border: 1px solid #
|
2662
|
+
border: 1px solid #9daca9;
|
2637
2663
|
overflow: hidden;
|
2638
2664
|
width: 3.5rem;
|
2639
2665
|
}
|
@@ -2646,8 +2672,8 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
2646
2672
|
|
2647
2673
|
.topcoat-switch__toggle:before {
|
2648
2674
|
content: 'ON';
|
2649
|
-
color: #
|
2650
|
-
background-color: #
|
2675
|
+
color: #288edf;
|
2676
|
+
background-color: #e5f1fb;
|
2651
2677
|
right: 0.8rem;
|
2652
2678
|
padding-left: 0.75rem;
|
2653
2679
|
}
|
@@ -2660,7 +2686,7 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
2660
2686
|
color: #454545;
|
2661
2687
|
text-shadow: 0 1px #fff;
|
2662
2688
|
background-color: #e5e9e8;
|
2663
|
-
border: 1px solid #
|
2689
|
+
border: 1px solid #9daca9;
|
2664
2690
|
margin-left: -0.6rem;
|
2665
2691
|
margin-bottom: -1px;
|
2666
2692
|
margin-top: -1px;
|
@@ -2671,7 +2697,7 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
2671
2697
|
|
2672
2698
|
.topcoat-switch__toggle:after {
|
2673
2699
|
content: 'OFF';
|
2674
|
-
background-color: #
|
2700
|
+
background-color: #d2d6d6;
|
2675
2701
|
left: 0.8rem;
|
2676
2702
|
padding-left: 0.6rem;
|
2677
2703
|
}
|
@@ -2680,8 +2706,13 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
2680
2706
|
margin-left: 1.85rem;
|
2681
2707
|
}
|
2682
2708
|
|
2709
|
+
.topcoat-switch__input:active + .topcoat-switch__toggle {
|
2710
|
+
border: 1px solid #9daca9;
|
2711
|
+
box-shadow: inset 0 1px #fff;
|
2712
|
+
}
|
2713
|
+
|
2683
2714
|
.topcoat-switch__input:focus + .topcoat-switch__toggle {
|
2684
|
-
border: 1px solid #
|
2715
|
+
border: 1px solid #0036ff;
|
2685
2716
|
box-shadow: 0 0 0 2px #6fb5f1;
|
2686
2717
|
}
|
2687
2718
|
|
@@ -2844,20 +2875,22 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
2844
2875
|
vertical-align: top;
|
2845
2876
|
background-color: #e5e9e8;
|
2846
2877
|
box-shadow: inset 0 1px #fff;
|
2847
|
-
border-top: 1px solid #
|
2878
|
+
border-top: 1px solid #9daca9;
|
2848
2879
|
}
|
2849
2880
|
|
2850
2881
|
.topcoat-tab-bar__button:active,
|
2851
2882
|
.topcoat-tab-bar__button--large:active,
|
2852
2883
|
:checked + .topcoat-tab-bar__button {
|
2853
|
-
color: #
|
2854
|
-
background-color: #
|
2855
|
-
box-shadow: inset 0 0
|
2884
|
+
color: #288edf;
|
2885
|
+
background-color: #e5f1fb;
|
2886
|
+
box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
|
2856
2887
|
}
|
2857
2888
|
|
2858
2889
|
.topcoat-tab-bar__button:focus,
|
2859
2890
|
.topcoat-tab-bar__button--large:focus {
|
2860
2891
|
z-index: 1;
|
2892
|
+
box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
|
2893
|
+
outline: 0;
|
2861
2894
|
}
|
2862
2895
|
|
2863
2896
|
/**
|
@@ -2948,36 +2981,36 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
2948
2981
|
font-size: 12px;
|
2949
2982
|
letter-spacing: 0;
|
2950
2983
|
padding: 0 0.563rem;
|
2951
|
-
border: 1px solid #
|
2984
|
+
border: 1px solid #9daca9;
|
2952
2985
|
border-radius: 4px;
|
2953
|
-
background-color: #
|
2954
|
-
box-shadow: inset 0 1px rgba(0,0,0,0.
|
2986
|
+
background-color: #fff;
|
2987
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.1);
|
2955
2988
|
color: #454545;
|
2956
2989
|
vertical-align: top;
|
2957
2990
|
}
|
2958
2991
|
|
2959
2992
|
.topcoat-text-input:focus,
|
2960
2993
|
.topcoat-text-input--large:focus {
|
2961
|
-
background-color: #
|
2962
|
-
color: #
|
2963
|
-
border: 1px solid #
|
2994
|
+
background-color: #fff;
|
2995
|
+
color: #454545;
|
2996
|
+
border: 1px solid #0036ff;
|
2964
2997
|
box-shadow: 0 0 0 2px #6fb5f1;
|
2965
2998
|
}
|
2966
2999
|
|
2967
3000
|
.topcoat-text-input:disabled::-webkit-input-placeholder {
|
2968
|
-
color: #
|
3001
|
+
color: #454545;
|
2969
3002
|
}
|
2970
3003
|
|
2971
3004
|
.topcoat-text-input:disabled::-moz-placeholder {
|
2972
|
-
color: #
|
3005
|
+
color: #454545;
|
2973
3006
|
}
|
2974
3007
|
|
2975
3008
|
.topcoat-text-input:disabled:-ms-input-placeholder {
|
2976
|
-
color: #
|
3009
|
+
color: #454545;
|
2977
3010
|
}
|
2978
3011
|
|
2979
3012
|
.topcoat-text-input:invalid {
|
2980
|
-
border: 1px solid #
|
3013
|
+
border: 1px solid #ec514e;
|
2981
3014
|
}
|
2982
3015
|
|
2983
3016
|
/* topdoc
|
@@ -3010,23 +3043,23 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
3010
3043
|
}
|
3011
3044
|
|
3012
3045
|
.topcoat-text-input--large:disabled {
|
3013
|
-
color: #
|
3046
|
+
color: #454545;
|
3014
3047
|
}
|
3015
3048
|
|
3016
3049
|
.topcoat-text-input--large:disabled::-webkit-input-placeholder {
|
3017
|
-
color: #
|
3050
|
+
color: #454545;
|
3018
3051
|
}
|
3019
3052
|
|
3020
3053
|
.topcoat-text-input--large:disabled::-moz-placeholder {
|
3021
|
-
color: #
|
3054
|
+
color: #454545;
|
3022
3055
|
}
|
3023
3056
|
|
3024
3057
|
.topcoat-text-input--large:disabled:-ms-input-placeholder {
|
3025
|
-
color: #
|
3058
|
+
color: #454545;
|
3026
3059
|
}
|
3027
3060
|
|
3028
3061
|
.topcoat-text-input--large:invalid {
|
3029
|
-
border: 1px solid #
|
3062
|
+
border: 1px solid #ec514e;
|
3030
3063
|
}
|
3031
3064
|
|
3032
3065
|
/**
|
@@ -3173,31 +3206,31 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
3173
3206
|
font-weight: 400;
|
3174
3207
|
border-radius: 4px;
|
3175
3208
|
line-height: 1.313rem;
|
3176
|
-
border: 1px solid #
|
3177
|
-
background-color: #
|
3178
|
-
box-shadow: inset 0 1px rgba(0,0,0,0.
|
3209
|
+
border: 1px solid #9daca9;
|
3210
|
+
background-color: #fff;
|
3211
|
+
box-shadow: inset 0 1px rgba(0,0,0,0.1);
|
3179
3212
|
color: #454545;
|
3180
3213
|
letter-spacing: 0;
|
3181
3214
|
}
|
3182
3215
|
|
3183
3216
|
.topcoat-textarea:focus,
|
3184
3217
|
.topcoat-textarea--large:focus {
|
3185
|
-
background-color: #
|
3186
|
-
color: #
|
3187
|
-
border: 1px solid #
|
3218
|
+
background-color: #fff;
|
3219
|
+
color: #454545;
|
3220
|
+
border: 1px solid #0036ff;
|
3188
3221
|
box-shadow: 0 0 0 2px #6fb5f1;
|
3189
3222
|
}
|
3190
3223
|
|
3191
3224
|
.topcoat-textarea:disabled::-webkit-input-placeholder {
|
3192
|
-
color: #
|
3225
|
+
color: #454545;
|
3193
3226
|
}
|
3194
3227
|
|
3195
3228
|
.topcoat-textarea:disabled::-moz-placeholder {
|
3196
|
-
color: #
|
3229
|
+
color: #454545;
|
3197
3230
|
}
|
3198
3231
|
|
3199
3232
|
.topcoat-textarea:disabled:-ms-input-placeholder {
|
3200
|
-
color: #
|
3233
|
+
color: #454545;
|
3201
3234
|
}
|
3202
3235
|
|
3203
3236
|
/* topdoc
|
@@ -3225,19 +3258,19 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
3225
3258
|
}
|
3226
3259
|
|
3227
3260
|
.topcoat-textarea--large:disabled {
|
3228
|
-
color: #
|
3261
|
+
color: #454545;
|
3229
3262
|
}
|
3230
3263
|
|
3231
3264
|
.topcoat-textarea--large:disabled::-webkit-input-placeholder {
|
3232
|
-
color: #
|
3265
|
+
color: #454545;
|
3233
3266
|
}
|
3234
3267
|
|
3235
3268
|
.topcoat-textarea--large:disabled::-moz-placeholder {
|
3236
|
-
color: #
|
3269
|
+
color: #454545;
|
3237
3270
|
}
|
3238
3271
|
|
3239
3272
|
.topcoat-textarea--large:disabled:-ms-input-placeholder {
|
3240
|
-
color: #
|
3273
|
+
color: #454545;
|
3241
3274
|
}
|
3242
3275
|
|
3243
3276
|
@font-face {
|
@@ -3263,7 +3296,7 @@ body {
|
|
3263
3296
|
background: #dfe2e2;
|
3264
3297
|
color: #000;
|
3265
3298
|
font: 16px "Source Sans", helvetica, arial, sans-serif;
|
3266
|
-
font-weight:
|
3299
|
+
font-weight: 400;
|
3267
3300
|
}
|
3268
3301
|
|
3269
3302
|
:focus {
|
@@ -3337,7 +3370,17 @@ body {
|
|
3337
3370
|
|
3338
3371
|
/* This file should include color and image variables corresponding to the dark theme */
|
3339
3372
|
|
3340
|
-
/*
|
3373
|
+
/* ---------- colors ---------- */
|
3374
|
+
|
3375
|
+
/* ---------- darken ---------- */
|
3376
|
+
|
3377
|
+
/* ---------- lighten ---------- */
|
3378
|
+
|
3379
|
+
/* ---------- alphas ---------- */
|
3380
|
+
|
3381
|
+
/* ---------- thickness ---------- */
|
3382
|
+
|
3383
|
+
/* ---------- shadows ---------- */
|
3341
3384
|
|
3342
3385
|
/* Icons */
|
3343
3386
|
|
@@ -3345,18 +3388,16 @@ body {
|
|
3345
3388
|
|
3346
3389
|
/* Text Input */
|
3347
3390
|
|
3348
|
-
/* Search Input */
|
3349
|
-
|
3350
3391
|
/* List */
|
3351
3392
|
|
3352
|
-
/* Checkbox */
|
3353
|
-
|
3354
3393
|
/* Overlay */
|
3355
3394
|
|
3356
3395
|
/* Progress bar */
|
3357
3396
|
|
3358
3397
|
/* Checkbox */
|
3359
3398
|
|
3399
|
+
/* Range input */
|
3400
|
+
|
3360
3401
|
/* Radio Button */
|
3361
3402
|
|
3362
3403
|
/* Tab bar */
|
@@ -3385,7 +3426,23 @@ body {
|
|
3385
3426
|
|
3386
3427
|
/* This file should include color and image variables corresponding to the light theme */
|
3387
3428
|
|
3388
|
-
/*
|
3429
|
+
/* ---------- colors ---------- */
|
3430
|
+
|
3431
|
+
/* ---------- darken ---------- */
|
3432
|
+
|
3433
|
+
/* ---------- lighten ---------- */
|
3434
|
+
|
3435
|
+
/* ---------- alphas ---------- */
|
3436
|
+
|
3437
|
+
/* ---------- thickness ---------- */
|
3438
|
+
|
3439
|
+
/* ---------- shadows ---------- */
|
3440
|
+
|
3441
|
+
/* Secondary colors (based on colors above)
|
3442
|
+
|
3443
|
+
Everything below this line should be calculated using the variables above. This area is for people that want to totally customize everything. Have fun, bros!
|
3444
|
+
|
3445
|
+
*/
|
3389
3446
|
|
3390
3447
|
/* Icons */
|
3391
3448
|
|
@@ -3431,6 +3488,8 @@ body {
|
|
3431
3488
|
|
3432
3489
|
/* Switch */
|
3433
3490
|
|
3491
|
+
/* Call To Action */
|
3492
|
+
|
3434
3493
|
/* Text Input */
|
3435
3494
|
|
3436
3495
|
/* Radio input */
|
@@ -3443,8 +3502,8 @@ body {
|
|
3443
3502
|
|
3444
3503
|
/* Progress bar progress */
|
3445
3504
|
|
3446
|
-
/* Search input */
|
3447
|
-
|
3448
3505
|
/* Switch */
|
3449
3506
|
|
3450
3507
|
/* Notification */
|
3508
|
+
|
3509
|
+
/* Search */
|