vital 1.2.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: f0ee5530037e1a65d259a03abe22a1ac3bdd9798
4
- data.tar.gz: 04e6f6ec5185b25e2be35f0efb5e24ef808dc62f
3
+ metadata.gz: 8f3c4178d8ad49761dfcbb068ba7a5331eaab788
4
+ data.tar.gz: d213850a6af908f3aeb96b17c6c16fb675759971
5
5
  SHA512:
6
- metadata.gz: 3b161f59513242d51add2df6629ebf01bed0566055e30f3440c4ac1c15a6f9e1f05dc3550433380ea2405fa6519cdeb039dd70514eadaeb0d3e1ede86a48f39e
7
- data.tar.gz: f00a9a68c7806e4182851785ae5b0869af480dbbfd946332a5953cb1e1ad1a06a4aa51aa3c75984b538795425e4e1a0955a8d4aad60b0fdc053f6ae7e7f2cdf9
6
+ metadata.gz: daa71a859babec14cbf4b214c4cf5a0c4e808f95d28c23ba6814d3a164c20c36c9293abaf619dc89a41e1fd596014775a218348875d36ac63acf61e37734a77a
7
+ data.tar.gz: 0d63348f8d9c2926c2b1c4a18a7975b5021982d5595cef0974961d4a8756db7a6c300aec8236f24253a6794380eabef257b0e132f4432914ef439f4ee3cf92d3
data/.gitignore CHANGED
@@ -22,7 +22,3 @@ vital-*.tar.gz
22
22
 
23
23
  # Ignore .DS_store file
24
24
  .DS_Store
25
-
26
- # FontCustom stuff
27
- .fontcustom-manifest.json
28
- previews/
data/.ruby-version CHANGED
@@ -1 +1 @@
1
- 2.2.5
1
+ 2.2.4
data/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  _Post v1.1.0 releases changelog can be found on https://github.com/doximity/vital/releases_
2
2
 
3
+ v2.0.0
4
+ - Remove fontcustom and font icon dependencies in favor of SVG.
5
+ - Remove support for IE8/IE9.
6
+ - Remove default font weight for some tags.
7
+ - Multiplier classes`.i2x`, `.i3x`, `.i4x`, `.i5x` renamed to: `.x2`, `.x3`, `.x4`, `.x5`.
8
+ - Added default opacity classes.
9
+ - Added background variables.
10
+ - Added `_mixins`.
11
+ - Added text anti-aliasing is enabled by default.
12
+ - Added `/layouts` to documentation website
13
+ - Revamped documentation
14
+
3
15
  v1.1.0
4
16
  - Add command: `rake vital:compile_fonts`
5
17
  - `icons` partial is now a `.sass` file
data/Gemfile.lock CHANGED
@@ -1,42 +1,22 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- vital (1.2.1)
4
+ vital (2.0.0)
5
5
  sass (>= 3.4)
6
6
 
7
7
  GEM
8
8
  remote: https://rubygems.org/
9
9
  specs:
10
- celluloid (0.16.0)
11
- timers (~> 4.0.0)
12
- ffi (1.9.10)
13
- fontcustom (1.3.8)
14
- json (~> 1.4)
15
- listen (>= 1.0, < 3.0)
16
- thor (~> 0.14)
17
- hitimes (1.2.3)
18
- json (1.8.3)
19
- listen (2.10.1)
20
- celluloid (~> 0.16.0)
21
- rb-fsevent (>= 0.9.3)
22
- rb-inotify (>= 0.9)
23
10
  rake (10.5.0)
24
- rb-fsevent (0.9.7)
25
- rb-inotify (0.9.7)
26
- ffi (>= 0.5.0)
27
11
  sass (3.4.22)
28
- thor (0.19.1)
29
- timers (4.0.4)
30
- hitimes
31
12
 
32
13
  PLATFORMS
33
14
  ruby
34
15
 
35
16
  DEPENDENCIES
36
17
  bundler (~> 1.11)
37
- fontcustom (>= 1.3)
38
18
  rake (~> 10.0)
39
19
  vital!
40
20
 
41
21
  BUNDLED WITH
42
- 1.12.5
22
+ 1.13.1
data/README.md CHANGED
@@ -1,3 +1,4 @@
1
+ **Note:** Vital v2.x is not backwards compatible with v1.x. Some things may break. You may need to do some refactoring.
1
2
  # Vital
2
3
 
3
4
  A minimally invasive CSS framework for modern web applications.
@@ -8,15 +9,12 @@ A minimally invasive CSS framework for modern web applications.
8
9
  - Written almost entirely in em values, allowing for easy and consistent scaling.
9
10
  - Small:
10
11
 
12
+ With:
13
+
11
14
  | | Size | Gzipped |
12
15
  |:---------------|:------|:--------|
13
- | CSS Framework | 22 KB | 6 KB |
14
- | Icons (.svg) | 3 KB | 1 KB |
15
- | Icons (.eot) | 2 KB | |
16
- | Icons (.ttf) | 2 KB | |
17
- | Icons (.woff) | 2 KB | |
18
16
  | Javascripts | 0 | |
19
- | Total | 31 KB | |
17
+ | Vital CSS | 31 KB | 7 KB |
20
18
 
21
19
 
22
20
  ## Usage
@@ -52,19 +50,6 @@ cd vital
52
50
  bundle exec rake vital:build
53
51
  ```
54
52
 
55
- ### Compiling Font Icons
56
-
57
- To compile font icons, you must first install FontForge.
58
-
59
- ```bash
60
- # On Mac
61
- # Requires Ruby 1.9.2+, FontForge with Python scripting
62
- brew install fontforge --with-python
63
- brew install eot-utils
64
- ```
65
-
66
- After installation is complete, run `rake vital:compile_font`.
67
-
68
53
  ### Build the documentation
69
54
 
70
55
  Vital is built using a simple static generator: https://middlemanapp.com/
data/Rakefile CHANGED
@@ -10,7 +10,6 @@ namespace :vital do
10
10
  "mkdir -p #{release_dir}/{css,scss}",
11
11
  "cp {CHANGELOG,LICENSE,README}.md #{release_dir}/",
12
12
  "cp -R sass #{release_dir}/",
13
- "cp -R fonts #{release_dir}/",
14
13
  "rm -f #{release_dir}/{,**/}.DS_Store"
15
14
  ].each { |cmd| sh cmd }
16
15
 
@@ -23,19 +22,4 @@ namespace :vital do
23
22
  sh "tar cvzfs vital-v#{Vital::VERSION}.tar.gz '/dist/vital-v#{Vital::VERSION}/' dist/"
24
23
  end
25
24
 
26
- desc 'Compile font icon using the FontCustom gem'
27
- task :compile_font do
28
- sh 'rm -rf sass/_icons.*'
29
- sh 'rm -rf fonts'
30
- sh 'fontcustom compile'
31
- # Works around Sass issue: https://github.com/sass/sass/issues/1395
32
- # based on https://github.com/sass/sass/issues/659#issuecomment-193023924
33
- sh 'sed -i.bkp \'s|"\(\\\\f[0-9a-z]*\)"|\1|g\' sass/vital/_icons.scss'
34
- sh 'sass-convert sass/vital/_icons.scss sass/vital/_icons.sass'
35
- # Add back the quote
36
- sh 'sed -i.bkp \'s|\\\\\(f[0-9a-z]*\)|char("\1")|g\' sass/vital/_icons.sass'
37
- sh 'sed -i.bkp \'s|url("../fonts/\([^"]*\)")|url(if($vital-sass-asset-helper, vital-font-path("\1"), "../fonts/\1"))|g\' sass/vital/_icons.sass'
38
- sh 'rm -f sass/{,**/}*.bkp'
39
- sh 'rm -f sass/{,**/}*.scss'
40
- end
41
25
  end
data/dist/css/vital.css CHANGED
@@ -142,65 +142,6 @@ textarea {
142
142
  [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
143
143
  -webkit-appearance: none; }
144
144
 
145
- @font-face {
146
- font-family: "icons";
147
- src: url("../fonts/icons.eot");
148
- src: url("../fonts/icons.eot?#iefix") format("embedded-opentype"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.svg#icons") format("svg");
149
- font-weight: normal;
150
- font-style: normal; }
151
- @media screen and (-webkit-min-device-pixel-ratio: 0) {
152
- @font-face {
153
- font-family: "icons";
154
- src: url("../fonts/icons.svg#icons") format("svg"); } }
155
- [data-icon]:before {
156
- content: attr(data-icon); }
157
-
158
- [data-icon]:before,
159
- .icon-arrow-updown:before,
160
- .icon-check:before,
161
- .icon-clock:before,
162
- .icon-close:before,
163
- .icon-close-empty:before,
164
- .icon-close-outline:before,
165
- .icon-menu:before,
166
- .icon-vital:before {
167
- display: inline-block;
168
- font-family: "icons";
169
- font-style: normal;
170
- font-weight: normal;
171
- font-variant: normal;
172
- line-height: 1;
173
- text-decoration: inherit;
174
- text-rendering: optimizeLegibility;
175
- text-transform: none;
176
- -moz-osx-font-smoothing: grayscale;
177
- -webkit-font-smoothing: antialiased;
178
- font-smoothing: antialiased; }
179
-
180
- .icon-arrow-updown:before {
181
- content: "\f100"; }
182
-
183
- .icon-check:before {
184
- content: "\f101"; }
185
-
186
- .icon-clock:before {
187
- content: "\f102"; }
188
-
189
- .icon-close:before {
190
- content: "\f103"; }
191
-
192
- .icon-close-empty:before {
193
- content: "\f104"; }
194
-
195
- .icon-close-outline:before {
196
- content: "\f105"; }
197
-
198
- .icon-menu:before {
199
- content: "\f106"; }
200
-
201
- .icon-vital:before {
202
- content: "\f107"; }
203
-
204
145
  [class*='col-'] {
205
146
  float: left; }
206
147
 
@@ -235,22 +176,12 @@ textarea {
235
176
  display: table-cell;
236
177
  vertical-align: top; }
237
178
 
238
- .padded [class*='col-'], .padded .col {
239
- padding-left: 2%;
240
- padding-right: 2%; }
241
-
242
- .right-padded [class*='col-'], .right-padded .col {
243
- padding-right: 2%; }
244
-
245
179
  @media screen and (max-width: 860px) {
246
180
  [class*='col-'], .col {
247
181
  width: 100%; }
248
182
 
249
183
  .col {
250
- display: block; }
251
-
252
- .right-padded [class*='col-'], .right-padded .col {
253
- padding: 0; } }
184
+ display: block; } }
254
185
  * {
255
186
  box-sizing: border-box;
256
187
  -moz-box-sizing: border-box;
@@ -261,6 +192,9 @@ html, body {
261
192
  width: 100%; }
262
193
 
263
194
  body {
195
+ -moz-osx-font-smoothing: grayscale;
196
+ -webkit-font-smoothing: antialiased;
197
+ font-smoothing: antialiased;
264
198
  background: #FAFAFA;
265
199
  color: #444;
266
200
  font: 17px/1.7 "Helvetica Neue", Helvetica, Sans-Serif; }
@@ -273,8 +207,8 @@ img {
273
207
  height: auto;
274
208
  border-radius: 0.15em; }
275
209
 
276
- h1, h2, h3, h4, h5, h6, p, ul, ol, div {
277
- font-weight: 300; }
210
+ h1, h2, h3, h4, h5, h6 {
211
+ font-weight: 400; }
278
212
 
279
213
  h1, h2, h3, h4, h5, h6, p, ul, ol {
280
214
  margin: 1em 0;
@@ -382,16 +316,10 @@ dd {
382
316
  @media screen and (max-width: 860px) {
383
317
  .section {
384
318
  width: 100%; } }
385
- @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
386
- strong, b, .bold {
387
- font-weight: 500; } }
388
- .ie8 strong, .ie8 b, .ie8 .bold, .ie9 strong, .ie9 b, .ie9 .bold {
389
- font-weight: 500; }
390
-
391
319
  .btn {
392
320
  -moz-appearance: none;
393
- -o-appearance: none;
394
321
  -ms-appearance: none;
322
+ -o-appearance: none;
395
323
  -webkit-appearance: none;
396
324
  appearance: none;
397
325
  background: transparent;
@@ -491,8 +419,9 @@ dd {
491
419
  opacity: 0.8; }
492
420
  .btn:disabled, .btn.disabled, .btn:disabled:hover, .btn.disabled:hover {
493
421
  cursor: default;
494
- background: transparent;
495
- color: #666;
422
+ background-color: #BBB !important;
423
+ border-color: #BBB !important;
424
+ color: #666 !important;
496
425
  opacity: 0.2; }
497
426
 
498
427
  @-moz-document url-prefix() {
@@ -526,6 +455,9 @@ dd {
526
455
  line-height: 2; }
527
456
  .footer .line {
528
457
  display: none; } }
458
+ .full-width-forms .btn {
459
+ padding-left: 0.5em;
460
+ padding-right: 0.5em; }
529
461
  .full-width-forms .btn:not([type='checkbox']):not([type='radio']),
530
462
  .full-width-forms a:not([type='checkbox']):not([type='radio']),
531
463
  .full-width-forms button:not([type='checkbox']):not([type='radio']),
@@ -543,36 +475,39 @@ fieldset {
543
475
  font-weight: 400;
544
476
  padding: 0 0.25em; }
545
477
 
478
+ input, select, textarea, button, .btn {
479
+ margin-bottom: 1px; }
480
+
546
481
  input, select, textarea {
547
482
  -moz-appearance: none;
548
- -o-appearance: none;
549
483
  -ms-appearance: none;
484
+ -o-appearance: none;
550
485
  -webkit-appearance: none;
551
486
  appearance: none;
552
487
  border-radius: 0.15em;
553
- border: 1px solid #ddd;
488
+ border: 1px solid #EEE;
489
+ background-color: #FFF;
554
490
  box-shadow: none;
555
491
  color: #444;
556
492
  display: block;
557
- font-family: "Helvetica Neue", Helvetica, Sans-Serif;
558
493
  font-size: inherit;
559
494
  outline: none;
560
495
  padding: 0.49em 0.5em; }
561
496
  input:hover, input:focus, select:hover, select:focus, textarea:hover, textarea:focus {
562
- border-color: #FF0008;
563
- transition: all 200ms ease-in-out; }
497
+ border-color: #666;
498
+ transition: all 200ms ease-in-out;
499
+ background-color: #F8F8F8; }
564
500
  input:focus, select:focus, textarea:focus {
565
- box-shadow: 0 0 10px rgba(255, 0, 0, 0.2); }
501
+ border-color: #666; }
566
502
 
567
503
  textarea {
568
504
  padding: 0.5em; }
569
505
 
570
506
  select {
571
- background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><polyline points="114.3,212.8 388,212.8 251.1,0 114.3,212.8 "/><polyline points="388,297.9 114.3,297.9 251.1,510.7 388,297.9 "/></svg>');
572
- background-color: #FFF;
573
507
  background-size: 1em;
574
508
  background-repeat: no-repeat;
575
509
  background-position: 99% 50%;
510
+ background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><polyline points="114.3,212.8 388,212.8 251.1,0 114.3,212.8"/><polyline points="388,297.9 114.3,297.9 251.1,510.7 388,297.9"/></svg>');
576
511
  line-height: 1.1;
577
512
  padding: 0.78em 0.5em;
578
513
  padding-right: 1.4em; }
@@ -591,8 +526,8 @@ input[type='range'] {
591
526
  input[type='search'] {
592
527
  box-sizing: border-box !important;
593
528
  -moz-appearance: none;
594
- -o-appearance: none;
595
529
  -ms-appearance: none;
530
+ -o-appearance: none;
596
531
  -webkit-appearance: none;
597
532
  appearance: none; }
598
533
  input[type='checkbox'], input[type='radio'] {
@@ -614,19 +549,11 @@ input[type='checkbox'], input[type='radio'] {
614
549
  input[type='checkbox'] {
615
550
  border-radius: 0.15em; }
616
551
  input[type='checkbox']:checked {
552
+ background-size: 1em;
553
+ background-repeat: no-repeat;
554
+ background-position: 99% 50%;
555
+ background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><style type="text/css">.st0{fill:#FFFFFF;}</style><g><path class="st0" d="M219.8,347.5c-3,3-7.2,5.5-10.9,5.5s-7.9-2.6-11-5.6l-69.5-69.5l22.1-22.1l58.6,58.6l154.8-156l21.7,22.5L219.8,347.5z"/></g></svg>');
617
556
  border: none; }
618
- input[type='checkbox']:checked:before {
619
- bottom: 0;
620
- color: white;
621
- content: "\f101";
622
- font-family: "icons", helvetica, Sans-Serif;
623
- font-size: 1em;
624
- left: 0;
625
- line-height: 1;
626
- position: absolute;
627
- right: 0;
628
- text-align: center;
629
- top: 0; }
630
557
  input[type='radio'] {
631
558
  border-radius: 99em; }
632
559
  input[type='radio']:checked:before {
@@ -667,144 +594,200 @@ input[type='radio'] {
667
594
  border: 0; }
668
595
  input[type='range'] {
669
596
  border-color: transparent; } }
670
- .ie8 select, .ie9 select {
671
- padding: 0.65em 0.5em;
672
- padding-right: 0.5em; }
673
- .ie8 input[type='checkbox'], .ie8 input[type='radio'], .ie9 input[type='checkbox'], .ie9 input[type='radio'] {
674
- background: transparent;
675
- border: 0; }
676
- .ie8 input[type='checkbox']:checked, .ie8 input[type='radio']:checked, .ie9 input[type='checkbox']:checked, .ie9 input[type='radio']:checked {
677
- background-color: transparent;
678
- border-color: transparent; }
679
- .ie8 input[type='checkbox']:focus, .ie8 input[type='radio']:focus, .ie9 input[type='checkbox']:focus, .ie9 input[type='radio']:focus {
680
- border: 0; }
681
- .ie8 input[type='file'], .ie9 input[type='file'] {
682
- height: 3.8em; }
683
- .ie8 input[type='range'], .ie9 input[type='range'] {
684
- height: 2em;
685
- line-height: 0; }
686
-
687
597
  .header {
688
598
  background: #FFF;
689
599
  height: 4.25em;
690
- transform: translateZ(0); }
600
+ z-index: 9;
601
+ position: relative; }
602
+ .header a {
603
+ cursor: pointer; }
691
604
  .header .section {
692
- padding: 0;
693
- position: relative; }
605
+ padding: 0; }
694
606
  .header .logo {
695
- border: 0;
696
- color: #C9282E;
607
+ width: 4em;
697
608
  float: left;
698
- line-height: 1;
699
- padding: 0.6em 1em;
700
- max-height: 4.25em;
701
- overflow: hidden; }
609
+ padding: 0;
610
+ min-height: 4.22em; }
611
+ .header .logo img {
612
+ margin: 0.95em 0 0 1em;
613
+ max-height: 2.5em; }
702
614
  .header .logo:hover {
703
615
  background: none; }
704
- .header .logo:hover i {
705
- color: #FF0008;
706
- transition: all 200ms ease-in-out; }
707
- .header nav a {
708
- display: block;
709
- padding: 1.3em; }
710
- .header nav a:hover {
711
- background: #F5F5F5; }
712
- .header nav ul {
713
- padding: 0;
714
- margin: 0; }
715
- .header nav ul li {
716
- background: #FFF;
717
- display: inline;
718
- float: left;
719
- position: relative; }
720
- .header nav ul li ul {
721
- left: 0;
722
- top: 100%; }
723
- .header nav ul ul {
724
- display: none; }
725
- .header nav li:hover > ul {
726
- display: block;
727
- position: absolute;
728
- width: 12.5em;
729
- z-index: 9000; }
730
- .header nav li:hover > ul li {
731
- width: 100%; }
732
- .header nav ul ul li:hover > ul {
733
- left: auto;
734
- right: -12.5em;
735
- top: 0; }
736
616
 
737
- #menu-toggle, #menu-toggle-label {
738
- cursor: pointer;
739
- display: none;
740
- height: 4.25em;
741
- position: absolute;
742
- right: 0;
743
- user-select: none;
744
- width: 4.25em; }
617
+ .menu li {
618
+ float: right; }
619
+ .menu a {
620
+ color: #333;
621
+ display: block;
622
+ font-size: 1em;
623
+ font-weight: 400;
624
+ line-height: 1.82;
625
+ padding: 1.24em 1.3em; }
626
+ .menu a:hover, .menu a.here {
627
+ opacity: 0.75; }
628
+ .menu ul {
629
+ padding: 0; }
630
+ .menu ul li {
631
+ float: right; }
632
+ .menu ul li:first-child a {
633
+ padding-top: 1em; }
634
+ .menu ul li:last-child a {
635
+ padding-bottom: 1em; }
636
+ .menu ul a {
637
+ line-height: 1;
638
+ padding: 0.7em 1.5em; }
639
+
640
+ .dropdown-with-avatar {
641
+ margin-right: 1em;
642
+ padding: 0.35em; }
643
+ .dropdown-with-avatar:hover .dropdown-icon {
644
+ opacity: 1; }
645
+ .dropdown-with-avatar ul {
646
+ margin-top: 1px;
647
+ left: -7em;
648
+ text-align: right; }
649
+ .dropdown-with-avatar .avatar {
650
+ display: inline-block;
651
+ max-height: 3em;
652
+ position: relative;
653
+ top: 0.25em; }
654
+ .dropdown-with-avatar .dropdown-icon {
655
+ -webkit-filter: invert(1);
656
+ margin: 0 0.2em;
657
+ opacity: 0.75;
658
+ position: absolute;
659
+ top: 1.7em;
660
+ width: 1em; }
745
661
 
746
- #menu-toggle {
747
- border-radius: 0;
748
- border: 0;
749
- box-shadow: none;
750
- margin: 0;
751
- outline: none;
662
+ nav ul {
752
663
  padding: 0;
753
- z-index: -1; }
754
- #menu-toggle:hover {
755
- background: #F5F5F5; }
756
- #menu-toggle:before {
757
- content: "\f106";
758
- font-family: "icons", helvetica, Sans-Serif;
759
- font-size: 2em;
760
- padding: 0.24em 0.5em;
761
- position: absolute;
762
- right: 0; }
763
- #menu-toggle:checked {
764
- background: #F5F5F5; }
765
- #menu-toggle:checked:before {
766
- bottom: 0;
767
- color: #444;
768
- content: "\f104";
769
- font-size: 3em;
664
+ margin: 0; }
665
+ nav ul li {
666
+ display: inline;
667
+ float: left;
668
+ position: relative; }
669
+ nav ul li ul {
770
670
  left: 0;
771
- line-height: 0;
772
- padding: 0.7em 0;
773
- position: absolute;
774
- right: 0;
775
- top: 0; }
671
+ top: 100%; }
672
+ nav ul ul {
673
+ display: none;
674
+ background: #FFF; }
675
+ nav li:hover > ul {
676
+ display: block;
677
+ position: absolute;
678
+ width: 12.5em;
679
+ z-index: 9000; }
680
+ nav li:hover > ul li {
681
+ width: 100%; }
682
+ nav ul ul li:hover > ul {
683
+ left: auto;
684
+ right: -12.5em;
685
+ top: 0; }
686
+
687
+ #menu-toggle-label, #menu-toggle {
688
+ display: none; }
689
+
690
+ .header-center nav {
691
+ display: inline-block; }
692
+ .header-center .menu {
693
+ position: absolute;
694
+ right: 0; }
695
+ .header-center .section {
696
+ text-align: center;
697
+ padding: 0; }
698
+ .header-center .logo img {
699
+ margin-left: 0; }
776
700
 
777
701
  @media screen and (max-width: 860px) {
778
- .header .logo {
779
- padding: 0.6em; }
780
- .header nav a {
781
- border-top: 1px solid #eee;
782
- padding: 1em; }
783
- .header nav ul li ul {
784
- display: block; }
785
- .header nav ul li {
786
- border-right: none;
702
+ .header .section {
703
+ width: 100%; }
704
+ .header [type='checkbox'] {
705
+ transition: none !important; }
706
+
707
+ .icon-menu {
787
708
  display: block;
788
- float: left;
789
- width: 100%;
790
- text-align: center; }
791
- .header nav ul li a {
792
- background: #F5F5F5; }
793
- .header nav > ul {
794
- clear: both;
709
+ position: absolute;
710
+ top: 0;
711
+ right: 0;
712
+ height: 4.25em;
713
+ width: 4.25em;
714
+ z-index: -1;
715
+ background-position: 50%;
716
+ background-repeat: no-repeat;
717
+ background-size: 2em;
718
+ background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><path d="M0,91.2v20.5h512V91.2H0z M0,244.8v20.5h512v-20.5H0z M0,398.4v20.5h512v-20.5H0z"/></svg>'); }
719
+
720
+ #menu-toggle-label {
721
+ background: transparent;
722
+ border-radius: 0;
723
+ border: 0;
724
+ box-shadow: none;
725
+ cursor: pointer;
726
+ display: block;
727
+ height: 4.2em;
728
+ margin: 0;
729
+ outline: none;
730
+ position: absolute;
731
+ right: 0;
732
+ user-select: none;
733
+ width: 4.6em; }
734
+
735
+ #menu-toggle:checked + .icon-menu {
736
+ background-size: 3em;
737
+ background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><polygon points="358.7,136.8 254.8,240.6 151.4,137.3 136.9,151.9 240.3,255 136.9,358.3 151.4,372.7 254.8,269.5 358.7,373.2 373.2,358.8 269.3,255 373.2,151.4 "/></svg>');
738
+ background-color: rgba(0, 0, 0, 0.02); }
739
+
740
+ .menu {
741
+ position: relative; }
742
+ .menu * {
743
+ float: none;
744
+ margin: 0; }
745
+ .menu i {
746
+ display: none; }
747
+ .menu li {
748
+ background: #FFF;
749
+ padding: 0; }
750
+ .menu ul {
751
+ padding: 0; }
752
+ .menu ul a {
753
+ line-height: 1.82;
754
+ padding: 1.24em 1.3em; }
755
+
756
+ .dropdown-with-avatar ul {
757
+ left: 0;
758
+ right: 0; }
759
+ .dropdown-with-avatar .avatar, .dropdown-with-avatar .dropdown-icon {
795
760
  display: none; }
796
- .header nav > input:checked + ul {
797
- display: block; }
798
- .header nav li:hover ul {
799
- position: relative;
800
- width: auto; }
801
- .header nav ul ul li:hover > ul {
802
- left: auto;
803
- right: auto;
804
- top: auto; }
805
761
 
806
- #menu-toggle, #menu-toggle-label {
807
- display: block; } }
762
+ nav {
763
+ height: 4.25em;
764
+ border-bottom: 1px solid #EEE; }
765
+ nav a {
766
+ border-bottom: 1px solid #EEE;
767
+ padding: 1em; }
768
+ nav a.logo {
769
+ border-bottom: 0; }
770
+ nav ul li ul {
771
+ display: block; }
772
+ nav ul li {
773
+ border-right: none;
774
+ display: block;
775
+ float: left;
776
+ width: 100%;
777
+ text-align: center; }
778
+ nav > ul {
779
+ clear: both;
780
+ display: none; }
781
+ nav > input:checked ~ ul {
782
+ display: block;
783
+ opacity: 1; }
784
+ nav li:hover ul {
785
+ position: relative;
786
+ width: auto; }
787
+ nav ul ul li:hover > ul {
788
+ left: auto;
789
+ right: auto;
790
+ top: auto; } }
808
791
  .hero {
809
792
  color: #FFF;
810
793
  background: #A8002D;
@@ -879,37 +862,13 @@ input[type='radio'] {
879
862
  -moz-transform: rotate(0deg); }
880
863
  to {
881
864
  -moz-transform: rotate(360deg); } }
882
- .ie8 .load, .ie9 .load {
883
- border-color: transparent;
884
- line-height: 1;
885
- font-size: 32px;
886
- width: 32px;
887
- height: 32px;
888
- display: inline; }
889
- .ie8 .load:after, .ie9 .load:after {
890
- content: "\f102";
891
- font-family: "icons", helvetica, Sans-Serif; }
892
- .ie8 .load.smallest, .ie9 .load.smallest {
893
- font-size: 9px;
894
- width: 9px;
895
- height: 9px;
896
- border-width: 0.1em; }
897
- .ie8 .load.small, .ie9 .load.small {
898
- font-size: 16px;
899
- width: 16px;
900
- height: 16px;
901
- border-width: 0.1em; }
902
- .ie8 .load.large, .ie9 .load.large {
903
- font-size: 48px;
904
- width: 48px;
905
- height: 48px; }
906
-
907
865
  .notice {
908
866
  background: #FFE0A3;
909
867
  text-align: center; }
910
868
  .notice .section {
911
869
  position: relative;
912
- padding-right: 3em; }
870
+ padding: 1em;
871
+ padding-right: 4em; }
913
872
  .notice i.icon-close-outline {
914
873
  cursor: pointer;
915
874
  font-size: 2em;
@@ -918,7 +877,7 @@ input[type='radio'] {
918
877
  right: 0.5em;
919
878
  top: 0; }
920
879
  .notice i.icon-close-outline:hover:before {
921
- content: "\f103"; }
880
+ background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><path d="M437,75C337.1-25,175-25,75,75S-24.9,337,75,437C174.9,537,337,537,437,437S537,174.9,437,75z M374.2,359.6l-14.5,14.5L255.8,270.5L152.4,373.7l-14.5-14.5L241.3,256L137.9,152.9l14.5-14.5l103.4,103.1l103.9-103.6l14.5,14.5L270.3,256L374.2,359.6z"/></g></svg>'); }
922
881
 
923
882
  .pagination {
924
883
  margin: 1em 0;
@@ -1197,14 +1156,23 @@ tfoot tr {
1197
1156
  background-color: #EAF2F5; }
1198
1157
 
1199
1158
  ul.list, ol.list {
1200
- margin-left: 1em;
1201
1159
  padding-left: 1em; }
1160
+ ul.list li, ol.list li {
1161
+ padding-bottom: 0.5em; }
1202
1162
 
1203
1163
  ul.list li {
1204
1164
  list-style: disc; }
1165
+ ul.list ul {
1166
+ margin-top: 0; }
1167
+ ul.list ul li {
1168
+ list-style: circle; }
1205
1169
 
1206
1170
  ol.list li {
1207
1171
  list-style: decimal; }
1172
+ ol.list ul {
1173
+ margin-bottom: 0; }
1174
+ ol.list ul li {
1175
+ list-style: circle; }
1208
1176
 
1209
1177
  .align-left {
1210
1178
  text-align: left; }
@@ -1215,20 +1183,46 @@ ol.list li {
1215
1183
  .break-word {
1216
1184
  word-break: break-all; }
1217
1185
 
1218
- .no-wrap {
1219
- white-space: nowrap; }
1220
-
1221
1186
  .thin {
1222
1187
  font-weight: 100; }
1223
1188
 
1224
1189
  .uppercase {
1225
1190
  text-transform: uppercase; }
1226
1191
 
1192
+ .no-wrap {
1193
+ white-space: nowrap; }
1194
+
1195
+ .no-text-margins * {
1196
+ margin: 0; }
1197
+
1198
+ .no-margin-top {
1199
+ margin-top: 0; }
1200
+
1201
+ .no-margin-bottom {
1202
+ margin-bottom: 0; }
1203
+
1204
+ .no-first-last *:first-child {
1205
+ margin-top: 0; }
1206
+ .no-first-last *:last-child {
1207
+ margin-bottom: 0; }
1208
+
1227
1209
  .light-text *, .light-text a {
1228
1210
  color: white; }
1229
- .light-text a {
1211
+ .light-text a:hover {
1230
1212
  text-decoration: underline; }
1231
1213
 
1214
+ .narrow {
1215
+ max-width: 34em;
1216
+ margin: 0 auto; }
1217
+
1218
+ .narrow-large {
1219
+ max-width: 40em;
1220
+ margin: 0 auto; }
1221
+
1222
+ .narrow-small {
1223
+ max-width: 20em;
1224
+ margin: 0 auto; }
1225
+
1232
1226
  .auto {
1233
1227
  margin: 0 auto; }
1234
1228
 
@@ -1253,6 +1247,9 @@ ol.list li {
1253
1247
  .inline-block {
1254
1248
  display: inline-block; }
1255
1249
 
1250
+ .padding {
1251
+ padding: 1em; }
1252
+
1256
1253
  .checkbox, .radio {
1257
1254
  display: block;
1258
1255
  line-height: 2.2; }
@@ -1272,9 +1269,6 @@ ol.list li {
1272
1269
  .round {
1273
1270
  border-radius: 99em; }
1274
1271
 
1275
- .opacity-half {
1276
- opacity: 0.5; }
1277
-
1278
1272
  .gray {
1279
1273
  color: #666; }
1280
1274
 
@@ -1293,6 +1287,13 @@ ol.list li {
1293
1287
  .bg {
1294
1288
  background: #F9F9F9; }
1295
1289
 
1290
+ .bg-white {
1291
+ background: #FFF; }
1292
+
1293
+ .bg-default {
1294
+ background: #4B99CB;
1295
+ background: linear-gradient(to bottom right, #4B99CB, #91E1B9); }
1296
+
1296
1297
  .bg-black {
1297
1298
  background: #252525;
1298
1299
  background: linear-gradient(to bottom right, #222, #333); }
@@ -1309,10 +1310,44 @@ ol.list li {
1309
1310
  background: #A8002D;
1310
1311
  background: linear-gradient(to bottom right, #C9282E, #A60052); }
1311
1312
 
1313
+ .bg-orange {
1314
+ background: #EE495C;
1315
+ background: linear-gradient(to bottom right, #EE495C, #F09259); }
1316
+
1312
1317
  .bg-green {
1313
1318
  background: #52BB5C;
1314
1319
  background: linear-gradient(to bottom right, #73B558, #45D093); }
1315
1320
 
1321
+ .opacity-1 {
1322
+ opacity: 0.1; }
1323
+
1324
+ .opacity-2 {
1325
+ opacity: 0.2; }
1326
+
1327
+ .opacity-3 {
1328
+ opacity: 0.3; }
1329
+
1330
+ .opacity-4 {
1331
+ opacity: 0.4; }
1332
+
1333
+ .opacity-5 {
1334
+ opacity: 0.5; }
1335
+
1336
+ .opacity-6 {
1337
+ opacity: 0.6; }
1338
+
1339
+ .opacity-7 {
1340
+ opacity: 0.7; }
1341
+
1342
+ .opacity-8 {
1343
+ opacity: 0.8; }
1344
+
1345
+ .opacity-9 {
1346
+ opacity: 0.9; }
1347
+
1348
+ .opaque {
1349
+ opacity: 1; }
1350
+
1316
1351
  .hide {
1317
1352
  display: none; }
1318
1353
 
@@ -1325,16 +1360,16 @@ ol.list li {
1325
1360
  .space:after {
1326
1361
  content: " "; }
1327
1362
 
1328
- .i2x {
1363
+ .x2 {
1329
1364
  font-size: 2em; }
1330
1365
 
1331
- .i3x {
1366
+ .x3 {
1332
1367
  font-size: 3em; }
1333
1368
 
1334
- .i4x {
1369
+ .x4 {
1335
1370
  font-size: 4em; }
1336
1371
 
1337
- .i5x {
1372
+ .x5 {
1338
1373
  font-size: 5em; }
1339
1374
 
1340
1375
  .same-width {
@@ -1342,6 +1377,33 @@ ol.list li {
1342
1377
  width: 2em;
1343
1378
  display: inline-block; }
1344
1379
 
1380
+ img {
1381
+ height: auto; }
1382
+ img.smallest {
1383
+ width: 1em; }
1384
+ img.smaller {
1385
+ width: 2em; }
1386
+ img.small {
1387
+ width: 3em; }
1388
+ img.medium {
1389
+ width: 4em; }
1390
+ img.large {
1391
+ width: 5em; }
1392
+ img.larger {
1393
+ width: 6em; }
1394
+ img.largest {
1395
+ width: 7em; }
1396
+
1397
+ .padded [class*='col-'], .padded .col {
1398
+ padding-left: 2%;
1399
+ padding-right: 2%; }
1400
+
1401
+ .right-padded [class*='col-'], .right-padded .col {
1402
+ padding-right: 2%; }
1403
+
1404
+ @media screen and (max-width: 860px) {
1405
+ .right-padded [class*='col-'], .right-padded .col {
1406
+ padding: 0; } }
1345
1407
  @media screen and (max-width: 667px) {
1346
1408
  .space, .hide-on-mobile {
1347
1409
  display: none; }
@@ -1351,5 +1413,108 @@ ol.list li {
1351
1413
  @media screen and (max-width: 334px) {
1352
1414
  .responsive-portrait {
1353
1415
  width: 100%; } }
1416
+ .boxed-image,
1417
+ .boxed-action,
1418
+ .boxed-meta {
1419
+ position: absolute; }
1420
+
1421
+ .boxed-image,
1422
+ .boxed-action {
1423
+ top: 0;
1424
+ left: 0;
1425
+ right: 0;
1426
+ bottom: 0; }
1427
+
1428
+ .boxed-image {
1429
+ -moz-background-size: cover;
1430
+ -ms-background-size: cover;
1431
+ -o-background-size: cover;
1432
+ -webkit-background-size: cover;
1433
+ background-size: cover;
1434
+ background-repeat: no-repeat;
1435
+ background-position: center; }
1436
+
1437
+ .boxed-meta {
1438
+ bottom: 0;
1439
+ z-index: 1; }
1440
+
1441
+ .boxed-action {
1442
+ opacity: 0;
1443
+ padding: 20% 0 0;
1444
+ z-index: 2; }
1445
+
1446
+ .boxed {
1447
+ padding-top: 80%;
1448
+ position: relative;
1449
+ text-align: center; }
1450
+ .boxed:hover .boxed-action {
1451
+ background: rgba(255, 255, 255, 0.7);
1452
+ opacity: 1;
1453
+ transition: all 200ms ease-in-out; }
1454
+
1455
+ @media screen and (max-width: 1080px) {
1456
+ .boxed-backgrounds [class*='col-'] {
1457
+ width: 50%; }
1458
+ .boxed-backgrounds .clear {
1459
+ display: none; } }
1460
+ @media screen and (max-width: 667px) {
1461
+ .boxed-backgrounds [class*='col-'] {
1462
+ width: 100%; } }
1463
+ .boxed-text {
1464
+ position: relative; }
1465
+ .boxed-text [class*='bg-'] {
1466
+ -moz-background-size: cover;
1467
+ -ms-background-size: cover;
1468
+ -o-background-size: cover;
1469
+ -webkit-background-size: cover;
1470
+ background-size: cover;
1471
+ background-repeat: no-repeat;
1472
+ background-position: center; }
1473
+ .boxed-text .boxed-text-outer {
1474
+ position: relative;
1475
+ top: 0;
1476
+ padding-bottom: 30%; }
1477
+ .boxed-text .boxed-text-content {
1478
+ position: absolute;
1479
+ top: 0;
1480
+ left: 0;
1481
+ right: 0;
1482
+ bottom: 0;
1483
+ padding: 1em;
1484
+ color: #FFF; }
1485
+ .boxed-text .boxed-text-content * {
1486
+ margin: 0; }
1487
+ .boxed-text .boxed-text-content:after {
1488
+ content: ""; }
1489
+ .boxed-text .boxed-text-content:hover {
1490
+ background: rgba(0, 0, 0, 0.3);
1491
+ transition: all 200ms ease-in-out; }
1492
+
1493
+ @media screen and (max-width: 667px) {
1494
+ .boxed-text .filler {
1495
+ padding-bottom: 80%; } }
1496
+ .feed-card {
1497
+ background: #FFF;
1498
+ box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.05);
1499
+ padding: 1em;
1500
+ margin: 0.3em; }
1501
+ .feed-card img {
1502
+ border-radius: 0;
1503
+ height: auto;
1504
+ width: 100%; }
1505
+ .feed-card * {
1506
+ margin: 0.2em 0; }
1507
+
1508
+ .bordered-list {
1509
+ margin: 0; }
1510
+ .bordered-list a {
1511
+ display: block;
1512
+ padding: 1em; }
1513
+ .bordered-list li {
1514
+ border-top: 1px solid #eee; }
1515
+ .bordered-list li:first-child {
1516
+ border-top: 0; }
1517
+ .bordered-list .here {
1518
+ background: #fff; }
1354
1519
 
1355
1520
  /*# sourceMappingURL=vital.css.map */