40 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
Created by Joe Hannon. Based on Skeleton.
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/dist/custom.css:
--------------------------------------------------------------------------------
1 | .container {
2 | max-width: 800px; }
3 | .header {
4 | margin-top: 6rem;
5 | text-align: center; }
6 | .value-prop {
7 | margin-top: 1rem; }
8 | .value-props {
9 | margin-top: 4rem;
10 | margin-bottom: 4rem; }
11 | .docs-header {
12 | text-transform: uppercase;
13 | font-size: 1.4rem;
14 | letter-spacing: .2rem;
15 | font-weight: 600; }
16 | .docs-section {
17 | border-top: 1px solid #eee;
18 | padding: 4rem 0;
19 | margin-bottom: 0;}
20 | .value-img {
21 | display: block;
22 | text-align: center;
23 | margin: 2.5rem auto 0;
24 | width: 150px;}
25 | .example-grid .column,
26 | .example-grid .columns {
27 | background: #EEE;
28 | text-align: center;
29 | border-radius: 4px;
30 | font-size: 1rem;
31 | text-transform: uppercase;
32 | height: 30px;
33 | line-height: 30px;
34 | margin-bottom: .75rem;
35 | font-weight: 600;
36 | letter-spacing: .1rem; }
37 | .docs-example .row,
38 | .docs-example.row,
39 | .docs-example form {
40 | margin-bottom: 0; }
41 | .docs-example h1,
42 | .docs-example h2,
43 | .docs-example h3,
44 | .docs-example h4,
45 | .docs-example h5,
46 | .docs-example h6 {
47 | margin-bottom: 1rem; }
48 | .heading-font-size {
49 | font-size: 1.2rem;
50 | color: #999;
51 | letter-spacing: normal; }
52 | .code-example {
53 | margin-top: 1.5rem;
54 | margin-bottom: 0; }
55 | .code-example-body {
56 | white-space: pre;
57 | word-wrap: break-word }
58 | .example {
59 | position: relative;
60 | margin-top: 4rem; }
61 | .example-header {
62 | font-weight: 600;
63 | margin-top: 1.5rem;
64 | margin-bottom: .5rem; }
65 | .example-description {
66 | margin-bottom: 1.5rem; }
67 | .example-screenshot-wrapper {
68 | display: block;
69 | position: relative;
70 | overflow: hidden;
71 | border-radius: 6px;
72 | border: 1px solid #eee;
73 | height: 250px; }
74 | .example-screenshot {
75 | width: 100%;
76 | height: auto; }
77 | .example-screenshot.coming-soon {
78 | width: auto;
79 | position: absolute;
80 | background: #eee;
81 | top: 5px;
82 | right: 5px;
83 | bottom: 5px;
84 | left: 5px; }
85 |
86 | /* Larger than phone */
87 | @media (min-width: 550px) {
88 | .header {
89 | margin-top: 18rem; }
90 | .value-props {
91 | margin-top: 9rem;
92 | margin-bottom: 7rem; }
93 | .value-img {
94 | margin-bottom: 1rem; }
95 | .example-grid .column,
96 | .example-grid .columns {
97 | margin-bottom: 1.5rem; }
98 | .docs-section {
99 | padding: 6rem 0; }
100 | .example-send-yourself-copy {
101 | float: right;
102 | margin-top: 12px; }
103 | .example-screenshot-wrapper {
104 | position: absolute;
105 | width: 48%;
106 | height: 100%;
107 | left: 0;
108 | max-height: none; }
109 | }
110 |
--------------------------------------------------------------------------------
/dist/legacy.min.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css?family=Roboto:300,400");html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-family:"Roboto",sans-serif;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*{font-family:"Roboto",sans-serif}html{font-size:62.5%}body{font-size:15px;line-height:1.5;font-weight:300;font-family:"Roboto",sans-serif;color:#2C3E50;margin:0;position:relative}.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box}.column,.columns{width:100%;float:left;box-sizing:border-box}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66667%}.two.columns{width:13.33333%}.three.columns{width:22%}.four.columns{width:30.66667%}.five.columns{width:39.33333%}.six.columns{width:48%}.seven.columns{width:56.66667%}.eight.columns{width:65.33333%}.nine.columns{width:74%}.ten.columns{width:82.66667%}.eleven.columns{width:91.33333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.66667%}.two-thirds.column{width:65.33333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.33333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.66667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.33333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.66667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.33333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.66667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.33333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.66667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.33333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}@media (max-width: 550px){.column,.columns{margin-left:0}.container{width:80%}article{padding:3rem 0}.one.column,.one.columns{width:100%}.two.columns{width:100%}.three.columns{width:100%}.four.columns{width:100%}.five.columns{width:100%}.six.columns{width:100%}.seven.columns{width:100%}.eight.columns{width:100%}.nine.columns{width:100%}.ten.columns{width:100%}.eleven.columns{width:100%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:100%}.two-thirds.column{width:100%}.one-half.column{width:100%}}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:4.0rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3.0rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media (min-width: 550px){h1{font-size:5.0rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3.0rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}@media (max-width: 550px){h1{font-size:4rem;font-weight:300}h2{font-size:3.2rem}h3{font-size:2.6rem}h4{font-size:2rem}h5{font-size:1.4rem}h6{font-size:1rem}}.text .primary{color:#2574A9}.text .warning{color:#F9690E}.text .success{color:#26C281}.text .alert{color:#EF4836}.text .secondary{color:#ECECEC}a{transition:.5s;color:#2574A9;text-decoration:none}a:hover{transition:.5s;color:#1a5277}.btn,button{background-color:#FFF;color:#FFF;padding:15px 25px;border-radius:3px;letter-spacing:0.06em;transition:all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);cursor:pointer;font-size:12px;font-family:"Roboto",sans-serif;background-color:#2C3E50;outline:0;border:0;margin:5px;font-weight:600}.btn:hover,button:hover{color:#FFF;box-shadow:0 7px 14px rgba(0,0,0,0.18),0 5px 5px rgba(0,0,0,0.12)}.btn.primary,button.primary{background-color:#2574A9}.btn.warning,button.warning{background-color:#F9690E}.btn.alert,button.alert{background-color:#EF4836}.btn.success,button.success{background-color:#26C281}input[type="submit"],input[type="button"]{background-color:#FFF;color:#FFF;padding:15px 25px;border-radius:3px;letter-spacing:0.06em;transition:all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);cursor:pointer;font-size:12px;font-family:"Roboto",sans-serif;background-color:#2C3E50;outline:0;border:0;margin:5px;font-weight:600}input[type="submit"]:hover,input[type="button"]:hover{color:#FFF;box-shadow:0 7px 14px rgba(0,0,0,0.18),0 5px 5px rgba(0,0,0,0.12)}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"]{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #D1D1D1;border-radius:4px;box-shadow:none;box-sizing:border-box;width:100%}textarea,select{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #D1D1D1;border-radius:4px;box-shadow:none;box-sizing:border-box;width:100%}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"]{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:65px;padding-top:6px;padding-bottom:6px}input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus{border:1px solid #33C3F0;outline:0}textarea:focus,select:focus{border:1px solid #33C3F0;outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type="checkbox"],input[type="radio"]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:normal}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid #E1E1E1}th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}ul{list-style:circle inside}ol{list-style:decimal inside;padding-left:0;margin-top:0}ul{padding-left:0;margin-top:0}ul ul,ul ol{margin:1.5rem 0 1.5rem 3rem;font-size:90%}ol ol,ol ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:1rem}code{padding:.2rem .5rem;margin-top:0 2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px}code.pretty{background:#fff;font-family:Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;font-size:1.2rem;padding:2.5rem 3rem;-webkit-font-smoothing:antialiased}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}table{margin:1rem 0;font-family:"Roboto",sans-serif;min-width:100%;background-color:#FFF;color:#2C3E50}.table-outter{overflow-x:scroll;border:3px solid #f2f2f2}.table-outter th,.table-outter td{min-width:200px;border-bottom:0;padding:12px 15px;text-align:left}.table-outter th:first-child,.table-outter td:first-child{padding-left:1rem}.table-outter th:last-child,.table-outter td:last-child{padding-right:0}.table-outter table{font-family:"Roboto",sans-serif}.table-outter td{min-width:100%}@media (min-width: 550px){.table td:before{display:none}.table th,.table td{display:table-cell;padding:.25em .5em;padding-left:10rem}.table th:first-child,.table td:first-child{padding-left:1rem}.table th:last-child,.table td:last-child{padding-right:1rem}.table th,.table td{padding:1em !important}}.hero{position:relative;background-color:#FFF;text-align:center;color:#2C3E50;font-family:"Roboto",sans-serif;padding:10rem 0;margin-bottom:5rem}.hero h1,.hero h2,.hero h3,.hero h4,.hero h5,.hero h6,.hero p{line-height:1.3;color:#2C3E50;font-weight:300}.hero.primary{color:#FFF;background-color:#2574A9}.hero.success{color:#FFF;background-color:#26C281}.hero.warning{color:#FFF;background-color:#F9690E}.hero.alert{color:#FFF;background-color:#EF4836}.hero.primary h1,.hero.primary h2,.hero.primary h3,.hero.primary h4,.hero.primary h5,.hero.primary h6,.hero.primary p,.hero.success h1,.hero.success h2,.hero.success h3,.hero.success h4,.hero.success h5,.hero.success h6,.hero.success p,.hero.warning h1,.hero.warning h2,.hero.warning h3,.hero.warning h4,.hero.warning h5,.hero.warning h6,.hero.warning p,.hero.alert h1,.hero.alert h2,.hero.alert h3,.hero.alert h4,.hero.alert h5,.hero.alert h6,.hero.alert p,.hero.default h1,.hero.default h2,.hero.default h3,.hero.default h4,.hero.default h5,.hero.default h6,.hero.default p{color:#FFF}.message{padding:20px;margin:1rem 0;background-color:#2C3E50;color:white;font-weight:400;-webkit-transition:opacity 400ms ease-in;-moz-transition:opacity 400ms ease-in;transition:opacity 400ms ease-in}.message.primary{background-color:#2574A9}.message.success{background-color:#26C281}.message.warning{background-color:#F9690E}.message.alert{background-color:#EF4836}.label{display:inline-block;line-height:1;white-space:nowrap;cursor:default;border-radius:0;background:#2C3E50;color:#FFF;-o-transition:.5s;-ms-transition:.5s;-moz-transition:.5s;-webkit-transition:.5s;transition:.5s;padding:.5rem 1.3rem}.label .primary{background:#2574A9}.label .warning{background:#F9690E}.label .success{background:#26C281}.label .alert{background:#EF4836}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #E9E9E9}.utility.full-width{width:100%;box-sizing:border-box}.utility.float-right{float:right}.utility.float-left{float:left}.utility.space-2{padding-top:2rem;padding-bottom:2rem}.utility.space-5{padding-top:5rem;padding-bottom:5rem}.utility.space-10{padding-top:10rem;padding-bottom:10rem}.utility.center{text-align:center}.utility.hide{display:none}.utility.show-on-print{display:none}.utility.hide-on-print{display:block}.utility.page-break{display:none}.utility.large-space{padding-top:25vh}@media (max-width: 550px){.utility.space-2{padding-top:1rem;text-align:center}.utility.space-5{padding-top:2.5rem;text-align:center}.utility.space-10{padding-top:5rem;text-align:center}.utility.hide-on-phones{display:none}}@media (min-width: 550px) and (max-width: 1185px){.utility.hide-on-tablets{display:none}}@media (min-width: 1185px){.utility.hide-on-desktop{display:none}}
2 |
--------------------------------------------------------------------------------
/dist/legacy.sass:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | LegacyCSS 5.0
4 | by Joe Hannon
5 |
6 | https://legacycss.com
7 | https://github.com/joexn/LegacyCSS
8 | https://twitter.com/joexn
9 |
10 | Copyright Joe Hannon 2017
11 | Licensed under the MIT License
12 |
13 | @import url('https://fonts.googleapis.com/css?family=Roboto:300,400')
14 |
15 | $primary: #2574A9 /* Jelly Bean */
16 | $success: #26C281 /* Jungle Green */
17 | $warning: #F9690E /* Ecstasy */
18 | $alert: #EF4836 /* Flamingo */
19 | $primary_2: darken($primary,12%)
20 | $success_2: darken($success,12%)
21 | $warning_2: darken($warning,12%)
22 | $alert_2: darken($alert,12%)
23 |
24 | $max-width-container: 960px
25 | $font: "Roboto", sans-serif
26 | $font-size: 15px
27 | $font-weight: 300
28 | $fade-transition: .5s
29 | $mobile-breakpoint: 550px
30 | $tablet-breakpoint: 1185px
31 |
32 | html, body, div, span, applet, object, iframe,
33 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
34 | a, abbr, acronym, address, big, cite, code,
35 | del, dfn, em, img, ins, kbd, q, s, samp,
36 | small, strike, strong, tt, var,
37 | b, u, i, center,
38 | dl, dt, dd, ol, ul, li,
39 | fieldset, form, label, legend,
40 | table, caption, tbody, tfoot, thead, tr, th, td,
41 | article, aside, canvas, details, embed,
42 | figure, figcaption, footer, header, hgroup,
43 | menu, nav, output, ruby, section, summary,
44 | time, mark, audio, video
45 | margin: 0
46 | padding: 0
47 | border: 0
48 | font-size: 100%
49 | font-family: $font
50 | vertical-align: baseline
51 | article, aside, details, figcaption, figure,
52 | footer, header, hgroup, menu, nav, section
53 | display: block
54 | body
55 | line-height: 1
56 | ol, ul
57 | list-style: none
58 | blockquote, q
59 | quotes: none
60 | blockquote:before, blockquote:after,
61 | q:before, q:after
62 | content: ""
63 | content: none
64 | table
65 | border-collapse: collapse
66 | border-spacing: 0
67 |
68 | *
69 | font-family: $font
70 |
71 | html
72 | font-size: 62.5%
73 |
74 | body
75 | font-size: $font-size
76 | line-height: 1.5
77 | font-weight: $font-weight
78 | font-family: $font
79 | color: #2C3E50
80 | margin: 0
81 | position: relative
82 |
83 | .container
84 | position: relative
85 | width: 100%
86 | max-width: $max-width-container
87 | margin: 0 auto
88 | padding: 0 20px
89 | box-sizing: border-box
90 | .column, .columns
91 | width: 100%
92 | float: left
93 | box-sizing: border-box
94 | .column, .columns
95 | margin-left: 4%
96 | .column:first-child, .columns:first-child
97 | margin-left: 0
98 | .one
99 | &.column, &.columns
100 | width: ((1 * 26% - 12) / 3)
101 | .two.columns
102 | width: ((2 * 26% - 12) / 3)
103 | .three.columns
104 | width: ((3 * 26% - 12) / 3)
105 | .four.columns
106 | width: ((4 * 26% - 12) / 3)
107 | .five.columns
108 | width: ((5 * 26% - 12) / 3)
109 | .six.columns
110 | width: ((6 * 26% - 12) / 3)
111 | .seven.columns
112 | width: ((7 * 26% - 12) / 3)
113 | .eight.columns
114 | width: ((8 * 26% - 12) / 3)
115 | .nine.columns
116 | width: ((9 * 26% - 12) / 3)
117 | .ten.columns
118 | width: ((10 * 26% - 12) / 3)
119 | .eleven.columns
120 | width: ((11 * 26% - 12) / 3)
121 | .twelve.columns
122 | width: ((12 * 26% - 12) / 3)
123 | margin-left: 0
124 | .one-third.column
125 | width: ((1 * 104% - 12) / 3)
126 | .two-thirds.column
127 | width: ((2 * 104% - 12) / 3)
128 | .one-half.column
129 | width: ((1 * 156% - 12) / 3)
130 | .offset-by-one
131 | &.column, &.columns
132 | margin-left: (1 * 26% / 3)
133 | .offset-by-two
134 | &.column, &.columns
135 | margin-left: (2 * 26% / 3)
136 | .offset-by-three
137 | &.column, &.columns
138 | margin-left: (3 * 26% / 3)
139 | .offset-by-four
140 | &.column, &.columns
141 | margin-left: (4 * 26% / 3)
142 | .offset-by-five
143 | &.column, &.columns
144 | margin-left: (5 * 26% / 3)
145 | .offset-by-six
146 | &.column, &.columns
147 | margin-left: (6 * 26% / 3)
148 | .offset-by-seven
149 | &.column, &.columns
150 | margin-left: (7 * 26% / 3)
151 | .offset-by-eight
152 | &.column, &.columns
153 | margin-left: (8 * 26% / 3)
154 | .offset-by-nine
155 | &.column, &.columns
156 | margin-left: (9 * 26% / 3)
157 | .offset-by-ten
158 | &.column, &.columns
159 | margin-left: (10 * 26% / 3)
160 | .offset-by-eleven
161 | &.column, &.columns
162 | margin-left: (11 * 26% / 3)
163 | .offset-by-one-third
164 | &.column, &.columns
165 | margin-left: (1 * 104% / 3)
166 | .offset-by-two-thirds
167 | &.column, &.columns
168 | margin-left: (2 * 104% / 3)
169 | .offset-by-one-half
170 | &.column, &.columns
171 | margin-left: (1 * 156% / 3)
172 | .container:after, .row:after, .u-cf
173 | content: ""
174 | display: table
175 | clear: both
176 | @media (max-width: $mobile-breakpoint)
177 | .column, .columns
178 | margin-left: 0
179 | .container
180 | width: 80%
181 | article
182 | padding: 3rem 0
183 | .one
184 | &.column, &.columns
185 | width: 100%
186 | .two.columns
187 | width: 100%
188 | .three.columns
189 | width: 100%
190 | .four.columns
191 | width: 100%
192 | .five.columns
193 | width: 100%
194 | .six.columns
195 | width: 100%
196 | .seven.columns
197 | width: 100%
198 | .eight.columns
199 | width: 100%
200 | .nine.columns
201 | width: 100%
202 | .ten.columns
203 | width: 100%
204 | .eleven.columns
205 | width: 100%
206 | .twelve.columns
207 | width: 100%
208 | margin-left: 0
209 | .one-third.column
210 | width: 100%
211 | .two-thirds.column
212 | width: 100%
213 | .one-half.column
214 | width: 100%
215 |
216 |
217 |
218 | /* Typography
219 | *––––––––––––––––––––––––––––––––––––––––––––––––––
220 |
221 | h1, h2, h3, h4, h5, h6
222 | margin-top: 0
223 | margin-bottom: 2rem
224 | font-weight: 300
225 |
226 | h1
227 | font-size: 4.0rem
228 | line-height: 1.2
229 | letter-spacing: -.1rem
230 |
231 | h2
232 | font-size: 3.6rem
233 | line-height: 1.25
234 | letter-spacing: -.1rem
235 |
236 | h3
237 | font-size: 3.0rem
238 | line-height: 1.3
239 | letter-spacing: -.1rem
240 |
241 | h4
242 | font-size: 2.4rem
243 | line-height: 1.35
244 | letter-spacing: -.08rem
245 |
246 | h5
247 | font-size: 1.8rem
248 | line-height: 1.5
249 | letter-spacing: -.05rem
250 |
251 | h6
252 | font-size: 1.5rem
253 | line-height: 1.6
254 | letter-spacing: 0
255 |
256 | /* Larger than phablet
257 | @media (min-width: 550px)
258 | h1
259 | font-size: 5.0rem
260 | h2
261 | font-size: 4.2rem
262 | h3
263 | font-size: 3.6rem
264 | h4
265 | font-size: 3.0rem
266 | h5
267 | font-size: 2.4rem
268 | h6
269 | font-size: 1.5rem
270 |
271 | @media (max-width: 550px)
272 | h1
273 | font-size: 4rem
274 | font-weight: 300
275 | h2
276 | font-size: 3.2rem
277 | h3
278 | font-size: 2.6rem
279 | h4
280 | font-size: 2rem
281 | h5
282 | font-size: 1.4rem
283 | h6
284 | font-size: 1rem
285 |
286 |
287 |
288 |
289 |
290 |
291 | .text
292 | .primary
293 | color: $primary
294 | .warning
295 | color: $warning
296 | .success
297 | color: $success
298 | .alert
299 | color: $alert
300 | .secondary
301 | color: #ECECEC
302 |
303 |
304 | a
305 | transition: $fade-transition
306 | color: $primary
307 | text-decoration: none
308 | &:hover
309 | transition: $fade-transition
310 | color: $primary_2
311 |
312 |
313 | .btn, button
314 | background-color: #FFF
315 | color: #FFF
316 | padding: 15px 25px
317 | border-radius: 3px
318 | letter-spacing: 0.06em
319 | transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)
320 | cursor: pointer
321 | font-size: 12px
322 | font-family: $font
323 | background-color: #2C3E50
324 | outline: 0
325 | border: 0
326 | margin: 5px
327 | font-weight: 600
328 | &:hover
329 | color: #FFF
330 | box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12)
331 | &.primary
332 | background-color: $primary
333 | &.warning
334 | background-color: $warning
335 | &.alert
336 | background-color: $alert
337 | &.success
338 | background-color: $success
339 |
340 | input
341 | &[type="submit"], &[type="button"]
342 | background-color: #FFF
343 | color: #FFF
344 | padding: 15px 25px
345 | border-radius: 3px
346 | letter-spacing: 0.06em
347 | transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)
348 | cursor: pointer
349 | font-size: 12px
350 | font-family: $font
351 | background-color: #2C3E50
352 | outline: 0
353 | border: 0
354 | margin: 5px
355 | font-weight: 600
356 | &[type="submit"]:hover, &[type="button"]:hover
357 | color: #FFF
358 | box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12)
359 |
360 |
361 |
362 |
363 |
364 |
365 |
366 |
367 | /* Forms
368 | *––––––––––––––––––––––––––––––––––––––––––––––––––
369 |
370 | input
371 | &[type="email"], &[type="number"], &[type="search"], &[type="text"], &[type="tel"], &[type="url"], &[type="password"]
372 | height: 38px
373 | padding: 6px 10px
374 | /* The 6px vertically centers text on FF, ignored by Webkit
375 | background-color: #fff
376 | border: 1px solid #D1D1D1
377 | border-radius: 4px
378 | box-shadow: none
379 | box-sizing: border-box
380 | width: 100%
381 |
382 | textarea, select
383 | height: 38px
384 | padding: 6px 10px
385 | /* The 6px vertically centers text on FF, ignored by Webkit
386 | background-color: #fff
387 | border: 1px solid #D1D1D1
388 | border-radius: 4px
389 | box-shadow: none
390 | box-sizing: border-box
391 | width: 100%
392 |
393 | /* Removes awkward default styles on some inputs for iOS
394 |
395 | input
396 | &[type="email"], &[type="number"], &[type="search"], &[type="text"], &[type="tel"], &[type="url"], &[type="password"]
397 | -webkit-appearance: none
398 | -moz-appearance: none
399 | appearance: none
400 |
401 | textarea
402 | -webkit-appearance: none
403 | -moz-appearance: none
404 | appearance: none
405 | min-height: 65px
406 | padding-top: 6px
407 | padding-bottom: 6px
408 |
409 | input
410 | &[type="email"]:focus, &[type="number"]:focus, &[type="search"]:focus, &[type="text"]:focus, &[type="tel"]:focus, &[type="url"]:focus, &[type="password"]:focus
411 | border: 1px solid #33C3F0
412 | outline: 0
413 |
414 | textarea:focus, select:focus
415 | border: 1px solid #33C3F0
416 | outline: 0
417 |
418 | label, legend
419 | display: block
420 | margin-bottom: .5rem
421 | font-weight: 600
422 |
423 | fieldset
424 | padding: 0
425 | border-width: 0
426 |
427 | input
428 | &[type="checkbox"], &[type="radio"]
429 | display: inline
430 |
431 | label > .label-body
432 | display: inline-block
433 | margin-left: .5rem
434 | font-weight: normal
435 |
436 |
437 |
438 |
439 |
440 |
441 |
442 | /* Tables
443 | *––––––––––––––––––––––––––––––––––––––––––––––––––
444 |
445 | th, td
446 | padding: 12px 15px
447 | text-align: left
448 | border-bottom: 1px solid #E1E1E1
449 |
450 | th:first-child, td:first-child
451 | padding-left: 0
452 |
453 | th:last-child, td:last-child
454 | padding-right: 0
455 |
456 |
457 |
458 |
459 | /* Lists
460 | *––––––––––––––––––––––––––––––––––––––––––––––––––
461 |
462 | ul
463 | list-style: circle inside
464 |
465 | ol
466 | list-style: decimal inside
467 | padding-left: 0
468 | margin-top: 0
469 |
470 | ul
471 | padding-left: 0
472 | margin-top: 0
473 | ul, ol
474 | margin: 1.5rem 0 1.5rem 3rem
475 | font-size: 90%
476 |
477 | ol
478 | ol, ul
479 | margin: 1.5rem 0 1.5rem 3rem
480 | font-size: 90%
481 |
482 | li
483 | margin-bottom: 1rem
484 |
485 |
486 |
487 |
488 |
489 |
490 | /* Code
491 | *––––––––––––––––––––––––––––––––––––––––––––––––––
492 |
493 | code
494 | padding: .2rem .5rem
495 | margin-top: 0 2rem
496 | font-size: 90%
497 | white-space: nowrap
498 | background: #F1F1F1
499 | border: 1px solid #E1E1E1
500 | border-radius: 4px
501 | &.pretty
502 | background: #fff
503 | font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace
504 | font-size: 1.2rem
505 | padding: 2.5rem 3rem
506 | -webkit-font-smoothing: antialiased
507 |
508 | pre > code
509 | display: block
510 | padding: 1rem 1.5rem
511 | white-space: pre
512 |
513 |
514 |
515 |
516 |
517 |
518 | /* Table
519 | *––––––––––––––––––––––––––––––––––––––––––––––––––
520 |
521 | table
522 | margin: 1rem 0
523 | font-family: $font
524 | min-width: 100%
525 | background-color: #FFF
526 | color: #2C3E50
527 |
528 | .table-outter
529 | overflow-x: scroll
530 | border: 3px solid #f2f2f2
531 |
532 | th, td
533 | min-width: 200px
534 | border-bottom: 0
535 | padding: 12px 15px
536 | text-align: left
537 | th:first-child, td:first-child
538 | padding-left: 1rem
539 | th:last-child, td:last-child
540 | padding-right: 0
541 | table
542 | font-family: $font
543 | td
544 | min-width: 100%
545 |
546 | @media (min-width: $mobile-breakpoint)
547 | .table td:before
548 | display: none
549 | .table
550 | th, td
551 | display: table-cell
552 | padding: .25em .5em
553 | padding-left: 10rem
554 | th:first-child, td:first-child
555 | padding-left: 1rem
556 | th:last-child, td:last-child
557 | padding-right: 1rem
558 | .table
559 | th, td
560 | padding: 1em !important
561 |
562 |
563 |
564 |
565 |
566 |
567 |
568 |
569 | /* Hero
570 |
571 | *––––––––––––––––––––––––––––––––––––––––––––––––––
572 | .hero
573 | position: relative
574 | background-color: #FFF
575 | text-align: center
576 | color: #2C3E50
577 | font-family: $font
578 | padding: 10rem 0
579 | margin-bottom: 5rem
580 | h1,h2,h3,h4,h5,h6,p
581 | line-height: 1.3
582 | color: #2C3E50
583 | font-weight: $font-weight
584 | &.primary
585 | color: #FFF
586 | background-color: $primary
587 | &.success
588 | color: #FFF
589 | background-color: $success
590 | &.warning
591 | color: #FFF
592 | background-color: $warning
593 | &.alert
594 | color: #FFF
595 | background-color: $alert
596 | .hero
597 | &.primary,&.success,&.warning,&.alert,&.default
598 | h1,h2,h3,h4,h5,h6,p
599 | color: #FFF
600 |
601 |
602 |
603 |
604 |
605 |
606 | /* Messages
607 | *––––––––––––––––––––––––––––––––––––––––––––––––––
608 |
609 | .message
610 | padding: 20px
611 | margin: 1rem 0
612 | background-color: #2C3E50
613 | color: white
614 | font-weight: 400
615 | -webkit-transition: opacity 400ms ease-in
616 | -moz-transition: opacity 400ms ease-in
617 | transition: opacity 400ms ease-in
618 | &.primary
619 | background-color: $primary
620 | &.success
621 | background-color: $success
622 | &.warning
623 | background-color: $warning
624 | &.alert
625 | background-color: $alert
626 |
627 | .label
628 | display: inline-block
629 | line-height: 1
630 | white-space: nowrap
631 | cursor: default
632 | border-radius: 0
633 | background: #2C3E50
634 | color: #FFF
635 | -o-transition: .5s
636 | -ms-transition: .5s
637 | -moz-transition: .5s
638 | -webkit-transition: .5s
639 | transition: .5s
640 | padding: .5rem 1.3rem
641 | .primary
642 | background: $primary
643 | .warning
644 | background: $warning
645 | .success
646 | background: $success
647 | .alert
648 | background: $alert
649 |
650 | hr
651 | margin-top: 3rem
652 | margin-bottom: 3.5rem
653 | border-width: 0
654 | border-top: 1px solid #E9E9E9
655 |
656 | .utility
657 | &.full-width
658 | width: 100%
659 | box-sizing: border-box
660 | &.float-right
661 | float: right
662 | &.float-left
663 | float: left
664 | &.space-2
665 | padding-top: 2rem
666 | padding-bottom: 2rem
667 | &.space-5
668 | padding-top: 5rem
669 | padding-bottom: 5rem
670 | &.space-10
671 | padding-top: 10rem
672 | padding-bottom: 10rem
673 | &.center
674 | text-align: center
675 | &.hide
676 | display: none
677 | &.show-on-print
678 | display: none
679 | &.hide-on-print
680 | display: block
681 | &.page-break
682 | display: none
683 | &.large-space
684 | padding-top: 25vh
685 |
686 | // Mobiles
687 | @media (max-width: $mobile-breakpoint)
688 | .utility
689 | &.space-2
690 | padding-top: 1rem
691 | text-align: center
692 | &.space-5
693 | padding-top: 2.5rem
694 | text-align: center
695 | &.space-10
696 | padding-top: 5rem
697 | text-align: center
698 | &.hide-on-phones
699 | display: none
700 |
701 | // Tablets
702 | @media (min-width: $mobile-breakpoint) and (max-width: $tablet-breakpoint)
703 | .utility
704 | &.hide-on-tablets
705 | display: none
706 |
707 | // Desktop
708 | @media (min-width: $tablet-breakpoint)
709 | .utility
710 | &.hide-on-desktop
711 | display: none
712 |
--------------------------------------------------------------------------------
/dist/legacy.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | /*
3 |
4 | LegacyCSS 5.0
5 | by Joe Hannon
6 |
7 | https://legacycss.com
8 | https://github.com/joexn/LegacyCSS
9 | https://twitter.com/joexn
10 |
11 | Copyright Joe Hannon 2017
12 | Licensed under the MIT License */
13 | @import url("https://fonts.googleapis.com/css?family=Roboto:300,400");
14 | /* Jelly Bean */
15 | /* Jungle Green */
16 | /* Ecstasy */
17 | /* Flamingo */
18 | html, body, div, span, applet, object, iframe,
19 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
20 | a, abbr, acronym, address, big, cite, code,
21 | del, dfn, em, img, ins, kbd, q, s, samp,
22 | small, strike, strong, tt, var,
23 | b, u, i, center,
24 | dl, dt, dd, ol, ul, li,
25 | fieldset, form, label, legend,
26 | table, caption, tbody, tfoot, thead, tr, th, td,
27 | article, aside, canvas, details, embed,
28 | figure, figcaption, footer, header, hgroup,
29 | menu, nav, output, ruby, section, summary,
30 | time, mark, audio, video {
31 | margin: 0;
32 | padding: 0;
33 | border: 0;
34 | font-size: 100%;
35 | font-family: "Roboto", sans-serif;
36 | vertical-align: baseline;
37 | }
38 |
39 | article, aside, details, figcaption, figure,
40 | footer, header, hgroup, menu, nav, section {
41 | display: block;
42 | }
43 |
44 | body {
45 | line-height: 1;
46 | }
47 |
48 | ol, ul {
49 | list-style: none;
50 | }
51 |
52 | blockquote, q {
53 | quotes: none;
54 | }
55 |
56 | blockquote:before, blockquote:after,
57 | q:before, q:after {
58 | content: "";
59 | content: none;
60 | }
61 |
62 | table {
63 | border-collapse: collapse;
64 | border-spacing: 0;
65 | }
66 |
67 | * {
68 | font-family: "Roboto", sans-serif;
69 | }
70 |
71 | html {
72 | font-size: 62.5%;
73 | }
74 |
75 | body {
76 | font-size: 15px;
77 | line-height: 1.5;
78 | font-weight: 300;
79 | font-family: "Roboto", sans-serif;
80 | color: #2C3E50;
81 | margin: 0;
82 | position: relative;
83 | }
84 |
85 | .container {
86 | position: relative;
87 | width: 100%;
88 | max-width: 960px;
89 | margin: 0 auto;
90 | padding: 0 20px;
91 | box-sizing: border-box;
92 | }
93 |
94 | .column, .columns {
95 | width: 100%;
96 | float: left;
97 | box-sizing: border-box;
98 | }
99 |
100 | .column, .columns {
101 | margin-left: 4%;
102 | }
103 |
104 | .column:first-child, .columns:first-child {
105 | margin-left: 0;
106 | }
107 |
108 | .one.column, .one.columns {
109 | width: 4.66667%;
110 | }
111 |
112 | .two.columns {
113 | width: 13.33333%;
114 | }
115 |
116 | .three.columns {
117 | width: 22%;
118 | }
119 |
120 | .four.columns {
121 | width: 30.66667%;
122 | }
123 |
124 | .five.columns {
125 | width: 39.33333%;
126 | }
127 |
128 | .six.columns {
129 | width: 48%;
130 | }
131 |
132 | .seven.columns {
133 | width: 56.66667%;
134 | }
135 |
136 | .eight.columns {
137 | width: 65.33333%;
138 | }
139 |
140 | .nine.columns {
141 | width: 74%;
142 | }
143 |
144 | .ten.columns {
145 | width: 82.66667%;
146 | }
147 |
148 | .eleven.columns {
149 | width: 91.33333%;
150 | }
151 |
152 | .twelve.columns {
153 | width: 100%;
154 | margin-left: 0;
155 | }
156 |
157 | .one-third.column {
158 | width: 30.66667%;
159 | }
160 |
161 | .two-thirds.column {
162 | width: 65.33333%;
163 | }
164 |
165 | .one-half.column {
166 | width: 48%;
167 | }
168 |
169 | .offset-by-one.column, .offset-by-one.columns {
170 | margin-left: 8.66667%;
171 | }
172 |
173 | .offset-by-two.column, .offset-by-two.columns {
174 | margin-left: 17.33333%;
175 | }
176 |
177 | .offset-by-three.column, .offset-by-three.columns {
178 | margin-left: 26%;
179 | }
180 |
181 | .offset-by-four.column, .offset-by-four.columns {
182 | margin-left: 34.66667%;
183 | }
184 |
185 | .offset-by-five.column, .offset-by-five.columns {
186 | margin-left: 43.33333%;
187 | }
188 |
189 | .offset-by-six.column, .offset-by-six.columns {
190 | margin-left: 52%;
191 | }
192 |
193 | .offset-by-seven.column, .offset-by-seven.columns {
194 | margin-left: 60.66667%;
195 | }
196 |
197 | .offset-by-eight.column, .offset-by-eight.columns {
198 | margin-left: 69.33333%;
199 | }
200 |
201 | .offset-by-nine.column, .offset-by-nine.columns {
202 | margin-left: 78%;
203 | }
204 |
205 | .offset-by-ten.column, .offset-by-ten.columns {
206 | margin-left: 86.66667%;
207 | }
208 |
209 | .offset-by-eleven.column, .offset-by-eleven.columns {
210 | margin-left: 95.33333%;
211 | }
212 |
213 | .offset-by-one-third.column, .offset-by-one-third.columns {
214 | margin-left: 34.66667%;
215 | }
216 |
217 | .offset-by-two-thirds.column, .offset-by-two-thirds.columns {
218 | margin-left: 69.33333%;
219 | }
220 |
221 | .offset-by-one-half.column, .offset-by-one-half.columns {
222 | margin-left: 52%;
223 | }
224 |
225 | .container:after, .row:after, .u-cf {
226 | content: "";
227 | display: table;
228 | clear: both;
229 | }
230 |
231 | @media (max-width: 550px) {
232 | .column, .columns {
233 | margin-left: 0;
234 | }
235 | .container {
236 | width: 80%;
237 | }
238 | article {
239 | padding: 3rem 0;
240 | }
241 | .one.column, .one.columns {
242 | width: 100%;
243 | }
244 | .two.columns {
245 | width: 100%;
246 | }
247 | .three.columns {
248 | width: 100%;
249 | }
250 | .four.columns {
251 | width: 100%;
252 | }
253 | .five.columns {
254 | width: 100%;
255 | }
256 | .six.columns {
257 | width: 100%;
258 | }
259 | .seven.columns {
260 | width: 100%;
261 | }
262 | .eight.columns {
263 | width: 100%;
264 | }
265 | .nine.columns {
266 | width: 100%;
267 | }
268 | .ten.columns {
269 | width: 100%;
270 | }
271 | .eleven.columns {
272 | width: 100%;
273 | }
274 | .twelve.columns {
275 | width: 100%;
276 | margin-left: 0;
277 | }
278 | .one-third.column {
279 | width: 100%;
280 | }
281 | .two-thirds.column {
282 | width: 100%;
283 | }
284 | .one-half.column {
285 | width: 100%;
286 | }
287 | }
288 |
289 | /* Typography
290 | *–––––––––––––––––––––––––––––––––––––––––––––––––– */
291 | h1, h2, h3, h4, h5, h6 {
292 | margin-top: 0;
293 | margin-bottom: 2rem;
294 | font-weight: 300;
295 | }
296 |
297 | h1 {
298 | font-size: 4.0rem;
299 | line-height: 1.2;
300 | letter-spacing: -.1rem;
301 | }
302 |
303 | h2 {
304 | font-size: 3.6rem;
305 | line-height: 1.25;
306 | letter-spacing: -.1rem;
307 | }
308 |
309 | h3 {
310 | font-size: 3.0rem;
311 | line-height: 1.3;
312 | letter-spacing: -.1rem;
313 | }
314 |
315 | h4 {
316 | font-size: 2.4rem;
317 | line-height: 1.35;
318 | letter-spacing: -.08rem;
319 | }
320 |
321 | h5 {
322 | font-size: 1.8rem;
323 | line-height: 1.5;
324 | letter-spacing: -.05rem;
325 | }
326 |
327 | h6 {
328 | font-size: 1.5rem;
329 | line-height: 1.6;
330 | letter-spacing: 0;
331 | }
332 |
333 | /* Larger than phablet */
334 | @media (min-width: 550px) {
335 | h1 {
336 | font-size: 5.0rem;
337 | }
338 | h2 {
339 | font-size: 4.2rem;
340 | }
341 | h3 {
342 | font-size: 3.6rem;
343 | }
344 | h4 {
345 | font-size: 3.0rem;
346 | }
347 | h5 {
348 | font-size: 2.4rem;
349 | }
350 | h6 {
351 | font-size: 1.5rem;
352 | }
353 | }
354 |
355 | @media (max-width: 550px) {
356 | h1 {
357 | font-size: 4rem;
358 | font-weight: 300;
359 | }
360 | h2 {
361 | font-size: 3.2rem;
362 | }
363 | h3 {
364 | font-size: 2.6rem;
365 | }
366 | h4 {
367 | font-size: 2rem;
368 | }
369 | h5 {
370 | font-size: 1.4rem;
371 | }
372 | h6 {
373 | font-size: 1rem;
374 | }
375 | }
376 |
377 | .text .primary {
378 | color: #2574A9;
379 | }
380 |
381 | .text .warning {
382 | color: #F9690E;
383 | }
384 |
385 | .text .success {
386 | color: #26C281;
387 | }
388 |
389 | .text .alert {
390 | color: #EF4836;
391 | }
392 |
393 | .text .secondary {
394 | color: #ECECEC;
395 | }
396 |
397 | a {
398 | transition: 0.5s;
399 | color: #2574A9;
400 | text-decoration: none;
401 | }
402 |
403 | a:hover {
404 | transition: 0.5s;
405 | color: #1a5277;
406 | }
407 |
408 | .btn, button {
409 | background-color: #FFF;
410 | color: #FFF;
411 | padding: 15px 25px;
412 | border-radius: 3px;
413 | letter-spacing: 0.06em;
414 | transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
415 | cursor: pointer;
416 | font-size: 12px;
417 | font-family: "Roboto", sans-serif;
418 | background-color: #2C3E50;
419 | outline: 0;
420 | border: 0;
421 | margin: 5px;
422 | font-weight: 600;
423 | }
424 |
425 | .btn:hover, button:hover {
426 | color: #FFF;
427 | box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
428 | }
429 |
430 | .btn.primary, button.primary {
431 | background-color: #2574A9;
432 | }
433 |
434 | .btn.warning, button.warning {
435 | background-color: #F9690E;
436 | }
437 |
438 | .btn.alert, button.alert {
439 | background-color: #EF4836;
440 | }
441 |
442 | .btn.success, button.success {
443 | background-color: #26C281;
444 | }
445 |
446 | input[type="submit"], input[type="button"] {
447 | background-color: #FFF;
448 | color: #FFF;
449 | padding: 15px 25px;
450 | border-radius: 3px;
451 | letter-spacing: 0.06em;
452 | transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
453 | cursor: pointer;
454 | font-size: 12px;
455 | font-family: "Roboto", sans-serif;
456 | background-color: #2C3E50;
457 | outline: 0;
458 | border: 0;
459 | margin: 5px;
460 | font-weight: 600;
461 | }
462 |
463 | input[type="submit"]:hover, input[type="button"]:hover {
464 | color: #FFF;
465 | box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
466 | }
467 |
468 | /* Forms
469 | *–––––––––––––––––––––––––––––––––––––––––––––––––– */
470 | input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"] {
471 | height: 38px;
472 | padding: 6px 10px;
473 | /* The 6px vertically centers text on FF, ignored by Webkit */
474 | background-color: #fff;
475 | border: 1px solid #D1D1D1;
476 | border-radius: 4px;
477 | box-shadow: none;
478 | box-sizing: border-box;
479 | width: 100%;
480 | }
481 |
482 | textarea, select {
483 | height: 38px;
484 | padding: 6px 10px;
485 | /* The 6px vertically centers text on FF, ignored by Webkit */
486 | background-color: #fff;
487 | border: 1px solid #D1D1D1;
488 | border-radius: 4px;
489 | box-shadow: none;
490 | box-sizing: border-box;
491 | width: 100%;
492 | }
493 |
494 | /* Removes awkward default styles on some inputs for iOS */
495 | input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"] {
496 | -webkit-appearance: none;
497 | -moz-appearance: none;
498 | appearance: none;
499 | }
500 |
501 | textarea {
502 | -webkit-appearance: none;
503 | -moz-appearance: none;
504 | appearance: none;
505 | min-height: 65px;
506 | padding-top: 6px;
507 | padding-bottom: 6px;
508 | }
509 |
510 | input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus {
511 | border: 1px solid #33C3F0;
512 | outline: 0;
513 | }
514 |
515 | textarea:focus, select:focus {
516 | border: 1px solid #33C3F0;
517 | outline: 0;
518 | }
519 |
520 | label, legend {
521 | display: block;
522 | margin-bottom: .5rem;
523 | font-weight: 600;
524 | }
525 |
526 | fieldset {
527 | padding: 0;
528 | border-width: 0;
529 | }
530 |
531 | input[type="checkbox"], input[type="radio"] {
532 | display: inline;
533 | }
534 |
535 | label > .label-body {
536 | display: inline-block;
537 | margin-left: .5rem;
538 | font-weight: normal;
539 | }
540 |
541 | /* Tables
542 | *–––––––––––––––––––––––––––––––––––––––––––––––––– */
543 | th, td {
544 | padding: 12px 15px;
545 | text-align: left;
546 | border-bottom: 1px solid #E1E1E1;
547 | }
548 |
549 | th:first-child, td:first-child {
550 | padding-left: 0;
551 | }
552 |
553 | th:last-child, td:last-child {
554 | padding-right: 0;
555 | }
556 |
557 | /* Lists
558 | *–––––––––––––––––––––––––––––––––––––––––––––––––– */
559 | ul {
560 | list-style: circle inside;
561 | }
562 |
563 | ol {
564 | list-style: decimal inside;
565 | padding-left: 0;
566 | margin-top: 0;
567 | }
568 |
569 | ul {
570 | padding-left: 0;
571 | margin-top: 0;
572 | }
573 |
574 | ul ul, ul ol {
575 | margin: 1.5rem 0 1.5rem 3rem;
576 | font-size: 90%;
577 | }
578 |
579 | ol ol, ol ul {
580 | margin: 1.5rem 0 1.5rem 3rem;
581 | font-size: 90%;
582 | }
583 |
584 | li {
585 | margin-bottom: 1rem;
586 | }
587 |
588 | /* Code
589 | *–––––––––––––––––––––––––––––––––––––––––––––––––– */
590 | code {
591 | padding: .2rem .5rem;
592 | margin-top: 0 2rem;
593 | font-size: 90%;
594 | white-space: nowrap;
595 | background: #F1F1F1;
596 | border: 1px solid #E1E1E1;
597 | border-radius: 4px;
598 | }
599 |
600 | code.pretty {
601 | background: #fff;
602 | font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
603 | font-size: 1.2rem;
604 | padding: 2.5rem 3rem;
605 | -webkit-font-smoothing: antialiased;
606 | }
607 |
608 | pre > code {
609 | display: block;
610 | padding: 1rem 1.5rem;
611 | white-space: pre;
612 | }
613 |
614 | /* Table
615 | *–––––––––––––––––––––––––––––––––––––––––––––––––– */
616 | table {
617 | margin: 1rem 0;
618 | font-family: "Roboto", sans-serif;
619 | min-width: 100%;
620 | background-color: #FFF;
621 | color: #2C3E50;
622 | }
623 |
624 | .table-outter {
625 | overflow-x: scroll;
626 | border: 3px solid #f2f2f2;
627 | }
628 |
629 | .table-outter th, .table-outter td {
630 | min-width: 200px;
631 | border-bottom: 0;
632 | padding: 12px 15px;
633 | text-align: left;
634 | }
635 |
636 | .table-outter th:first-child, .table-outter td:first-child {
637 | padding-left: 1rem;
638 | }
639 |
640 | .table-outter th:last-child, .table-outter td:last-child {
641 | padding-right: 0;
642 | }
643 |
644 | .table-outter table {
645 | font-family: "Roboto", sans-serif;
646 | }
647 |
648 | .table-outter td {
649 | min-width: 100%;
650 | }
651 |
652 | @media (min-width: 550px) {
653 | .table td:before {
654 | display: none;
655 | }
656 | .table th, .table td {
657 | display: table-cell;
658 | padding: .25em .5em;
659 | padding-left: 10rem;
660 | }
661 | .table th:first-child, .table td:first-child {
662 | padding-left: 1rem;
663 | }
664 | .table th:last-child, .table td:last-child {
665 | padding-right: 1rem;
666 | }
667 | .table th, .table td {
668 | padding: 1em !important;
669 | }
670 | }
671 |
672 | /* Hero */
673 | .hero {
674 | position: relative;
675 | background-color: #FFF;
676 | text-align: center;
677 | color: #2C3E50;
678 | font-family: "Roboto", sans-serif;
679 | padding: 10rem 0;
680 | margin-bottom: 5rem;
681 | }
682 |
683 | .hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6, .hero p {
684 | line-height: 1.3;
685 | color: #2C3E50;
686 | font-weight: 300;
687 | }
688 |
689 | .hero.primary {
690 | color: #FFF;
691 | background-color: #2574A9;
692 | }
693 |
694 | .hero.success {
695 | color: #FFF;
696 | background-color: #26C281;
697 | }
698 |
699 | .hero.warning {
700 | color: #FFF;
701 | background-color: #F9690E;
702 | }
703 |
704 | .hero.alert {
705 | color: #FFF;
706 | background-color: #EF4836;
707 | }
708 |
709 | .hero.primary h1, .hero.primary h2, .hero.primary h3, .hero.primary h4, .hero.primary h5, .hero.primary h6, .hero.primary p, .hero.success h1, .hero.success h2, .hero.success h3, .hero.success h4, .hero.success h5, .hero.success h6, .hero.success p, .hero.warning h1, .hero.warning h2, .hero.warning h3, .hero.warning h4, .hero.warning h5, .hero.warning h6, .hero.warning p, .hero.alert h1, .hero.alert h2, .hero.alert h3, .hero.alert h4, .hero.alert h5, .hero.alert h6, .hero.alert p, .hero.default h1, .hero.default h2, .hero.default h3, .hero.default h4, .hero.default h5, .hero.default h6, .hero.default p {
710 | color: #FFF;
711 | }
712 |
713 | /* Messages
714 | *–––––––––––––––––––––––––––––––––––––––––––––––––– */
715 | .message {
716 | padding: 20px;
717 | margin: 1rem 0;
718 | background-color: #2C3E50;
719 | color: white;
720 | font-weight: 400;
721 | -webkit-transition: opacity 400ms ease-in;
722 | -moz-transition: opacity 400ms ease-in;
723 | transition: opacity 400ms ease-in;
724 | }
725 |
726 | .message.primary {
727 | background-color: #2574A9;
728 | }
729 |
730 | .message.success {
731 | background-color: #26C281;
732 | }
733 |
734 | .message.warning {
735 | background-color: #F9690E;
736 | }
737 |
738 | .message.alert {
739 | background-color: #EF4836;
740 | }
741 |
742 | .label {
743 | display: inline-block;
744 | line-height: 1;
745 | white-space: nowrap;
746 | cursor: default;
747 | border-radius: 0;
748 | background: #2C3E50;
749 | color: #FFF;
750 | -o-transition: .5s;
751 | -ms-transition: .5s;
752 | -moz-transition: .5s;
753 | -webkit-transition: .5s;
754 | transition: .5s;
755 | padding: .5rem 1.3rem;
756 | }
757 |
758 | .label .primary {
759 | background: #2574A9;
760 | }
761 |
762 | .label .warning {
763 | background: #F9690E;
764 | }
765 |
766 | .label .success {
767 | background: #26C281;
768 | }
769 |
770 | .label .alert {
771 | background: #EF4836;
772 | }
773 |
774 | hr {
775 | margin-top: 3rem;
776 | margin-bottom: 3.5rem;
777 | border-width: 0;
778 | border-top: 1px solid #E9E9E9;
779 | }
780 |
781 | .utility.full-width {
782 | width: 100%;
783 | box-sizing: border-box;
784 | }
785 |
786 | .utility.float-right {
787 | float: right;
788 | }
789 |
790 | .utility.float-left {
791 | float: left;
792 | }
793 |
794 | .utility.space-2 {
795 | padding-top: 2rem;
796 | padding-bottom: 2rem;
797 | }
798 |
799 | .utility.space-5 {
800 | padding-top: 5rem;
801 | padding-bottom: 5rem;
802 | }
803 |
804 | .utility.space-10 {
805 | padding-top: 10rem;
806 | padding-bottom: 10rem;
807 | }
808 |
809 | .utility.center {
810 | text-align: center;
811 | }
812 |
813 | .utility.hide {
814 | display: none;
815 | }
816 |
817 | .utility.show-on-print {
818 | display: none;
819 | }
820 |
821 | .utility.hide-on-print {
822 | display: block;
823 | }
824 |
825 | .utility.page-break {
826 | display: none;
827 | }
828 |
829 | .utility.large-space {
830 | padding-top: 25vh;
831 | }
832 |
833 | @media (max-width: 550px) {
834 | .utility.space-2 {
835 | padding-top: 1rem;
836 | text-align: center;
837 | }
838 | .utility.space-5 {
839 | padding-top: 2.5rem;
840 | text-align: center;
841 | }
842 | .utility.space-10 {
843 | padding-top: 5rem;
844 | text-align: center;
845 | }
846 | .utility.hide-on-phones {
847 | display: none;
848 | }
849 | }
850 |
851 | @media (min-width: 550px) and (max-width: 1185px) {
852 | .utility.hide-on-tablets {
853 | display: none;
854 | }
855 | }
856 |
857 | @media (min-width: 1185px) {
858 | .utility.hide-on-desktop {
859 | display: none;
860 | }
861 | }
862 |
--------------------------------------------------------------------------------