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.
@@ -5,68 +5,96 @@
5
5
 
6
6
  // Text, Typography
7
7
 
8
+ // Lists
9
+
8
10
  ul, ol
9
11
  &.list
10
- margin-left: 1em
11
12
  padding-left: 1em
12
-
13
- ul.list li
14
- list-style: disc
15
-
16
- ol.list li
17
- list-style: decimal
13
+ li
14
+ padding-bottom: 0.5em
15
+ ul.list
16
+ li
17
+ list-style: disc
18
+ ul
19
+ margin-top: 0
20
+ li
21
+ list-style: circle
22
+ ol.list
23
+ li
24
+ list-style: decimal
25
+ ul
26
+ margin-bottom: 0
27
+ li
28
+ list-style: circle
18
29
 
19
30
  .align-left
20
31
  text-align: left
21
-
22
32
  .align-right
23
33
  text-align: right
24
-
25
34
  .break-word
26
35
  word-break: break-all
27
-
28
- .no-wrap
29
- white-space: nowrap
30
-
31
36
  .thin
32
37
  font-weight: 100
33
-
34
38
  .uppercase
35
39
  text-transform: uppercase
36
40
 
41
+ // Removals
42
+
43
+ .no-wrap
44
+ white-space: nowrap
45
+ .no-text-margins *
46
+ margin: 0
47
+ .no-margin-top
48
+ margin-top: 0
49
+ .no-margin-bottom
50
+ margin-bottom: 0
51
+ .no-first-last
52
+ *
53
+ &:first-child
54
+ margin-top: 0
55
+ &:last-child
56
+ margin-bottom: 0
57
+
37
58
  // Lighten all typography for dark backgrounds
38
59
 
39
60
  .light-text
40
61
  *, a
41
62
  color: white
42
- a
63
+ a:hover
43
64
  text-decoration: underline
44
65
 
66
+ // Page width
67
+
68
+ .narrow
69
+ max-width: 34em
70
+ margin: 0 auto
71
+ .narrow-large
72
+ max-width: 40em
73
+ margin: 0 auto
74
+ .narrow-small
75
+ max-width: 20em
76
+ margin: 0 auto
77
+
45
78
  // Alignment
46
79
 
47
80
  .auto
48
81
  margin: 0 auto
49
-
50
82
  .block
51
83
  display: block
52
-
53
84
  .center
54
85
  text-align: center
55
-
56
86
  .clear
57
87
  clear: both
58
-
59
88
  .float-left
60
89
  float: left
61
-
62
90
  .float-right
63
91
  float: right
64
-
65
92
  .inline
66
93
  display: inline
67
-
68
94
  .inline-block
69
95
  display: inline-block
96
+ .padding
97
+ padding: 1em
70
98
 
71
99
  // Forms
72
100
 
@@ -81,35 +109,23 @@ ol.list li
81
109
  border: $border-width solid #ddd
82
110
  margin: 1em 0
83
111
  padding: 1em
84
-
85
112
  .disabled
86
113
  color: $gray-light
87
-
88
114
  .radius
89
115
  border-radius: $radius
90
-
91
116
  .round
92
117
  border-radius: $round
93
118
 
94
- // Opacities
95
-
96
- .opacity-half
97
- opacity: 0.5
98
-
99
119
  // Colors
100
120
 
101
121
  .gray
102
122
  color: $gray
103
-
104
123
  .gray-medium
105
124
  color: $gray-medium
106
-
107
125
  .gray-light
108
126
  color: $gray-light
109
-
110
127
  .gray-lighter
111
128
  color: $gray-lighter
112
-
113
129
  .gray-lightest
114
130
  color: $gray-lightest
115
131
 
@@ -117,29 +133,53 @@ ol.list li
117
133
 
118
134
  .bg
119
135
  background: $gray-lightest
120
-
121
- // Backgrounds (Gradients)
122
-
136
+ .bg-white
137
+ background: #FFF
138
+ .bg-default
139
+ background: $bg-default-fallback
140
+ background: $bg-default
123
141
  .bg-black
124
142
  background: $bg-black-fallback
125
143
  background: $bg-black
126
-
127
144
  .bg-gray
128
145
  background: $bg-gray-fallback
129
146
  background: $bg-gray
130
-
131
147
  .bg-blue
132
148
  background: $bg-blue-fallback
133
149
  background: $bg-blue
134
-
135
150
  .bg-red
136
151
  background: $bg-red-fallback
137
152
  background: $bg-red
138
-
153
+ .bg-orange
154
+ background: $bg-orange-fallback
155
+ background: $bg-orange
139
156
  .bg-green
140
157
  background: $bg-green-fallback
141
158
  background: $bg-green
142
159
 
160
+ // Opacities
161
+
162
+ .opacity-1
163
+ opacity: 0.1
164
+ .opacity-2
165
+ opacity: 0.2
166
+ .opacity-3
167
+ opacity: 0.3
168
+ .opacity-4
169
+ opacity: 0.4
170
+ .opacity-5
171
+ opacity: 0.5
172
+ .opacity-6
173
+ opacity: 0.6
174
+ .opacity-7
175
+ opacity: 0.7
176
+ .opacity-8
177
+ opacity: 0.8
178
+ .opacity-9
179
+ opacity: 0.9
180
+ .opaque
181
+ opacity: 1
182
+
143
183
  // Hide / Show
144
184
 
145
185
  .hide
@@ -159,15 +199,15 @@ ol.list li
159
199
  &:after
160
200
  content: $non-breaking-space
161
201
 
162
- // Font sizing
202
+ // Sizing
163
203
 
164
- .i2x
204
+ .x2
165
205
  font-size: 2em
166
- .i3x
206
+ .x3
167
207
  font-size: 3em
168
- .i4x
208
+ .x4
169
209
  font-size: 4em
170
- .i5x
210
+ .x5
171
211
  font-size: 5em
172
212
 
173
213
  .same-width
@@ -175,6 +215,42 @@ ol.list li
175
215
  width: 2em
176
216
  display: inline-block
177
217
 
218
+ // Image sizes
219
+
220
+ img
221
+ height: auto
222
+ &.smallest
223
+ width: 1em
224
+ &.smaller
225
+ width: 2em
226
+ &.small
227
+ width: 3em
228
+ &.medium
229
+ width: 4em
230
+ &.large
231
+ width: 5em
232
+ &.larger
233
+ width: 6em
234
+ &.largest
235
+ width: 7em
236
+
237
+ // Grid
238
+
239
+ .padded
240
+ [class*='col-'], .col
241
+ padding-left: $grid-padding
242
+ padding-right: $grid-padding
243
+
244
+ .right-padded
245
+ [class*='col-'], .col
246
+ padding-right: $grid-padding
247
+
248
+ @media screen and (max-width: $phablet)
249
+
250
+ .right-padded
251
+ [class*='col-'], .col
252
+ padding: 0
253
+
178
254
  @media screen and (max-width: $handheld)
179
255
 
180
256
  // Hide these classes on the $handheld breakpoint
@@ -1,80 +1,25 @@
1
- //
2
- // Icon Font: icons
3
- //
1
+ // Framework Icons
4
2
 
5
- // https://github.com/sass/sass/issues/659#issuecomment-64819075
6
- @function char($character-code)
7
- @if function-exists("selector-append")
8
- @return unquote('"\\#{$character-code}"')
3
+ $icon-arrow-updown: '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>'
9
4
 
10
- @return str-slice("x", 1, 1) + $character-code
5
+ $icon-check: '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="M219.8,347.5c-3,3-7.2,5.5-10.9,5.5c-3.7,0-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>'
11
6
 
12
- @font-face
13
- font-family: "icons"
14
- src: url(if($vital-sass-asset-helper, vital-font-path("icons.eot"), "../fonts/icons.eot"))
15
- src: url(if($vital-sass-asset-helper, vital-font-path("icons.eot?#iefix"), "../fonts/icons.eot?#iefix")) format("embedded-opentype"), url(if($vital-sass-asset-helper, vital-font-path("icons.woff"), "../fonts/icons.woff")) format("woff"), url(if($vital-sass-asset-helper, vital-font-path("icons.ttf"), "../fonts/icons.ttf")) format("truetype"), url(if($vital-sass-asset-helper, vital-font-path("icons.svg#icons"), "../fonts/icons.svg#icons")) format("svg")
16
- font-weight: normal
17
- font-style: normal
7
+ $icon-check-inverse: '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>'
18
8
 
19
- @media screen and (-webkit-min-device-pixel-ratio: 0)
20
- @font-face
21
- font-family: "icons"
22
- src: url(if($vital-sass-asset-helper, vital-font-path("icons.svg#icons"), "../fonts/icons.svg#icons")) format("svg")
9
+ $icon-clock: '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="500px" height="500px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve"><path d="M250,0C112,0,0,112,0,250s112,250,250,250s250-112,250-250S388,0,250,0z M250,20c127.1,0,230,102.9,230,230S377.1,480,250,480S20,377.1,20,250S122.9,20,250,20z M377.8,100.6c-2.3,0.3-4.4,1.4-5.9,3.1l-110,118.8c-3.7-1.6-7.6-2.5-11.9-2.5c-16.6,0-30,13.4-30,30s13.4,30,30,30c1.6,0,3.1-0.4,4.7-0.6l41.2,76.6c2.7,4.9,8.8,6.7,13.8,4.1s6.7-8.8,4.1-13.8L272.2,270c4.8-5.3,7.8-12.3,7.8-20c0-5-1.3-9.6-3.4-13.8l110-118.8c3.9-3.9,3.8-10.3-0.1-14.1C384.2,101.1,381,100.1,377.8,100.6z"/></svg>'
23
10
 
24
- [data-icon]:before
25
- content: attr(data-icon)
11
+ $icon-close: '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>'
26
12
 
27
- [data-icon]:before,
28
- .icon-arrow-updown:before,
29
- .icon-check:before,
30
- .icon-clock:before,
31
- .icon-close:before,
32
- .icon-close-empty:before,
33
- .icon-close-outline:before,
34
- .icon-menu:before,
35
- .icon-vital:before
36
- display: inline-block
37
- font-family: "icons"
38
- font-style: normal
39
- font-weight: normal
40
- font-variant: normal
41
- line-height: 1
42
- text-decoration: inherit
43
- text-rendering: optimizeLegibility
44
- text-transform: none
45
- -moz-osx-font-smoothing: grayscale
46
- -webkit-font-smoothing: antialiased
47
- font-smoothing: antialiased
13
+ $icon-close-empty: '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>'
48
14
 
49
- .icon-arrow-updown:before
50
- content: char("f100")
15
+ $icon-close-empty-white: '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"><style>.white{fill: white}</style><polygon class="white" 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>'
51
16
 
52
- .icon-check:before
53
- content: char("f101")
17
+ $icon-close-outline: '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><g><path class="st0" d="M437,74.9C337.1-25,175-25,75,74.9S-24.9,337,75,437c99.9,99.9,262,99.9,362,0S536.9,174.9,437,74.9zM421.9,421.9c-91.4,91.4-240.3,91.4-331.8,0s-91.4-240.3,0-331.8s240.3-91.4,331.8,0C513.4,181.5,513.4,330.4,421.9,421.9z"/></g><polygon class="st0" points="359.6,137.8 255.8,241.5 152.4,138.3 137.9,152.8 241.2,256 137.9,359.1 152.4,373.6 255.8,270.5 359.6,374.1 374.1,359.6 270.3,256 374.1,152.4" /></g></svg>'
54
18
 
55
- .icon-clock:before
56
- content: char("f102")
19
+ $icon-logo: '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"><rect width="512" height="512"/></svg>'
57
20
 
58
- .icon-close:before
59
- content: char("f103")
21
+ $icon-logo-type: '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 210" style="enable-background:new 0 0 512 210;" xml:space="preserve"><rect width="512" height="210"/></svg>'
60
22
 
61
- .icon-close-empty:before
62
- content: char("f104")
23
+ $icon-menu: '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>'
63
24
 
64
- .icon-close-outline:before
65
- content: char("f105")
66
-
67
- .icon-menu:before
68
- content: char("f106")
69
-
70
- .icon-vital:before
71
- content: char("f107")
72
-
73
- $font-icons-icon-arrow-updown: char("f100")
74
- $font-icons-icon-check: char("f101")
75
- $font-icons-icon-clock: char("f102")
76
- $font-icons-icon-close: char("f103")
77
- $font-icons-icon-close-empty: char("f104")
78
- $font-icons-icon-close-outline: char("f105")
79
- $font-icons-icon-menu: char("f106")
80
- $font-icons-icon-vital: char("f107")
25
+ $icon-menu-white: '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"><style>.white{fill: white}</style><path class="white" d="M0,91.2v20.5h512V91.2H0z M0,244.8v20.5h512v-20.5H0z M0,398.4v20.5h512v-20.5H0z"/></svg>'
@@ -51,32 +51,3 @@
51
51
  -moz-transform: rotate(0deg)
52
52
  to
53
53
  -moz-transform: rotate(360deg)
54
-
55
- // Adjustments for IE 8/9
56
-
57
- .ie8, .ie9
58
-
59
- .load
60
- border-color: transparent
61
- line-height: 1
62
- font-size: $loader
63
- width: $loader
64
- height: $loader
65
- display: inline
66
- &:after
67
- content: $font-icons-icon-clock
68
- font-family: $icons
69
- &.smallest
70
- font-size: $loader-smallest
71
- width: $loader-smallest
72
- height: $loader-smallest
73
- border-width: 0.1em
74
- &.small
75
- font-size: $loader-small
76
- width: $loader-small
77
- height: $loader-small
78
- border-width: 0.1em
79
- &.large
80
- font-size: $loader-large
81
- width: $loader-large
82
- height: $loader-large
@@ -0,0 +1,120 @@
1
+ // Mixins
2
+
3
+ @mixin appearance($appearance-variable)
4
+ -moz-appearance: $appearance-variable
5
+ -ms-appearance: $appearance-variable
6
+ -o-appearance: $appearance-variable
7
+ -webkit-appearance: $appearance-variable
8
+ appearance: $appearance-variable
9
+
10
+ @mixin box-sizing($box-sizing-variable)
11
+ box-sizing: $box-sizing-variable
12
+ -moz-box-sizing: $box-sizing-variable
13
+ -webkit-box-sizing: $box-sizing-variable
14
+
15
+ @mixin border-radius($border-radius-variable)
16
+ -moz-border-radius: $border-radius-variable
17
+ -ms-border-radius: $border-radius-variable
18
+ -o-border-radius: $border-radius-variable
19
+ -webkit-border-radius: $border-radius-variable
20
+ border-radius: $border-radius-variable
21
+
22
+ @mixin background($background-variable)
23
+ -moz-background: $background-variable
24
+ -ms-background: $background-variable
25
+ -o-background: $background-variable
26
+ -webkit-background: $background-variable
27
+
28
+ @mixin background-size($background-size-variable)
29
+ -moz-background-size: $background-size-variable
30
+ -ms-background-size: $background-size-variable
31
+ -o-background-size: $background-size-variable
32
+ -webkit-background-size: $background-size-variable
33
+ background-size: $background-size-variable
34
+ background-repeat: no-repeat
35
+ background-position: center
36
+
37
+ @mixin box-shadow($box-shadow-variable)
38
+ -moz-box-shadow: $box-shadow-variable
39
+ -ms-box-shadow: $box-shadow-variable
40
+ -o-box-shadow: $box-shadow-variable
41
+ -webkit-box-shadow: $box-shadow-variable
42
+ box-shadow: $box-shadow-variable
43
+
44
+ @mixin color($color-variable)
45
+ color: $color-variable
46
+ fill: $color-variable
47
+
48
+ @mixin column-count($column-count-variable)
49
+ -webkit-column-count: $column-count-variable
50
+ -moz-column-count: $column-count-variable
51
+ -ms-column-count: $column-count-variable
52
+ column-count: $column-count-variable
53
+ columns: $column-count-variable
54
+
55
+ @mixin filter($filter-variable)
56
+ -moz-filter: $filter-variable
57
+ -ms-filter: $filter-variable
58
+ -o-filter: $filter-variable
59
+ -webkit-filter: $filter-variable
60
+ filter: $filter-variable
61
+
62
+ @mixin user-select($user-select-variable)
63
+ -moz-user-select: $user-select-variable
64
+ -ms-user-select: $user-select-variable
65
+ -o-user-select: $user-select-variable
66
+ -webkit-user-select: $user-select-variable
67
+ user-select: $user-select-variable
68
+
69
+ @mixin object-fit($object-fit-variable)
70
+ -moz-object-fit: $object-fit-variable
71
+ -ms-object-fit: $object-fit-variable
72
+ -o-object-fit: $object-fit-variable
73
+ -webkit-object-fit: $object-fit-variable
74
+ object-fit: $object-fit-variable
75
+
76
+ @mixin transform($transform-variable)
77
+ -webkit-transform: $transform-variable
78
+ -moz-transform: $transform-variable
79
+ -ms-transform: $transform-variable
80
+ transform: $transform-variable
81
+
82
+ @mixin transition($transition-variable)
83
+ -webkit-transition: $transition-variable
84
+ -moz-transition: $transition-variable
85
+ -ms-transition: $transition-variable
86
+ transition: $transition-variable
87
+
88
+ @mixin transition-delay($transition-delay-variable)
89
+ -webkit-transition-delay: $transition-delay-variable
90
+ -moz-transition-delay: $transition-delay-variable
91
+ -ms-transition-delay: $transition-delay-variable
92
+ transition-delay: $transition-delay-variable
93
+
94
+ @mixin transition-duration($transition-duration-variable)
95
+ -webkit-transition-duration: $transition-duration-variable
96
+ -moz-transition-duration: $transition-duration-variable
97
+ -ms-transition-duration: $transition-duration-variable
98
+ transition-duration: $transition-duration-variable
99
+
100
+ // Pre-defined
101
+
102
+ @mixin font-smoothing
103
+ -moz-osx-font-smoothing: grayscale
104
+ -webkit-font-smoothing: antialiased
105
+ font-smoothing: antialiased
106
+
107
+ @mixin svg-background
108
+ background-size: 1em
109
+ background-repeat: no-repeat
110
+ background-position: 99% 50%
111
+
112
+ @mixin vertical-align
113
+ position: relative
114
+ top: 50%
115
+ -webkit-transform: translateY(-50%)
116
+ -ms-transform: translateY(-50%)
117
+ transform: translateY(-50%)
118
+ -webkit-transform-style: preserve-3d
119
+ -moz-transform-style: preserve-3d
120
+ transform-style: preserve-3d