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 +4 -4
- data/.gitignore +0 -4
- data/.ruby-version +1 -1
- data/CHANGELOG.md +12 -0
- data/Gemfile.lock +2 -22
- data/README.md +4 -19
- data/Rakefile +0 -16
- data/dist/css/vital.css +427 -262
- data/dist/css/vital.css.map +2 -2
- data/dist/css/vital.min.css +1 -1
- data/dist/css/vital.min.css.map +2 -2
- data/lib/vital/version.rb +1 -1
- data/package.json +1 -1
- data/sass/vital/_all.sass +10 -0
- data/sass/vital/_base.sass +4 -15
- data/sass/vital/_buttons.sass +4 -3
- data/sass/vital/_forms.sass +17 -50
- data/sass/vital/_grid.sass +0 -13
- data/sass/vital/_header.sass +183 -108
- data/sass/vital/_helpers.sass +122 -46
- data/sass/vital/_icons.sass +13 -68
- data/sass/vital/_loaders.sass +0 -29
- data/sass/vital/_mixins.sass +120 -0
- data/sass/vital/_notice.sass +3 -2
- data/sass/vital/_variables.sass +100 -79
- data/sass/vital/layouts/_background_cards.sass +44 -0
- data/sass/vital/layouts/_bordered_lists.sass +13 -0
- data/sass/vital/layouts/_feed_cards.sass +13 -0
- data/sass/vital/layouts/_photo_collages.sass +31 -0
- data/vital.gemspec +0 -1
- metadata +7 -25
- data/dist/fonts/icons.eot +0 -0
- data/dist/fonts/icons.svg +0 -50
- data/dist/fonts/icons.ttf +0 -0
- data/dist/fonts/icons.woff +0 -0
- data/fontcustom.yml +0 -24
- data/fonts/icons.eot +0 -0
- data/fonts/icons.svg +0 -50
- data/fonts/icons.ttf +0 -0
- data/fonts/icons.woff +0 -0
data/sass/vital/_notice.sass
CHANGED
@@ -7,7 +7,8 @@
|
|
7
7
|
text-align: center
|
8
8
|
.section
|
9
9
|
position: relative
|
10
|
-
padding
|
10
|
+
padding: 1em
|
11
|
+
padding-right: 4em
|
11
12
|
i.icon-close-outline
|
12
13
|
cursor: pointer
|
13
14
|
font-size: 2em
|
@@ -17,4 +18,4 @@
|
|
17
18
|
top: 0
|
18
19
|
&:hover
|
19
20
|
&:before
|
20
|
-
|
21
|
+
background-image: url($icon-close)
|
data/sass/vital/_variables.sass
CHANGED
@@ -2,133 +2,154 @@
|
|
2
2
|
|
3
3
|
// Fonts
|
4
4
|
|
5
|
-
$vital-sass-asset-helper:
|
5
|
+
$vital-sass-asset-helper: false !default
|
6
6
|
|
7
|
-
$font:
|
8
|
-
$code:
|
9
|
-
$icons:
|
7
|
+
$font: "Helvetica Neue", Helvetica, Sans-Serif !default
|
8
|
+
$code: "Monaco", Menlo, Courier !default
|
9
|
+
$icons: "icons", helvetica, Sans-Serif !default
|
10
10
|
|
11
11
|
// App Colors
|
12
12
|
|
13
|
-
$
|
14
|
-
$
|
15
|
-
$
|
16
|
-
$page: #FFF !default
|
13
|
+
$notice: #FFE0A3 !default
|
14
|
+
$body: #FAFAFA !default
|
15
|
+
$page: #FFF !default
|
17
16
|
|
18
17
|
// Base Colors
|
19
18
|
|
20
|
-
$white:
|
21
|
-
$
|
22
|
-
$gray-lighter: #EEE !default
|
23
|
-
$gray-light: #BBB !default
|
24
|
-
$gray-medium: #999 !default
|
25
|
-
$gray: #666 !default
|
26
|
-
$gray-dark: #333 !default
|
27
|
-
$black: #000 !default
|
28
|
-
$red: #C9282E !default
|
29
|
-
$red-bright: #FF0008 !default
|
30
|
-
$orange: #E16E00 !default
|
31
|
-
$yellow: #D5B778 !default
|
32
|
-
$green: #6BAF56 !default
|
33
|
-
$blue: #5A9FC8 !default
|
19
|
+
$white: #FFF !default
|
20
|
+
$black: #000 !default
|
34
21
|
|
35
|
-
|
22
|
+
$gray-dark: #333 !default
|
23
|
+
$gray: #666 !default
|
24
|
+
$gray-medium: #999 !default
|
25
|
+
$gray-light: #BBB !default
|
26
|
+
$gray-lighter: #EEE !default
|
27
|
+
$gray-lightest: #F9F9F9 !default
|
36
28
|
|
37
|
-
$
|
38
|
-
$
|
39
|
-
$
|
29
|
+
$red-dark: #AA2227 !default
|
30
|
+
$red: #C9282E !default
|
31
|
+
$red-bright: #FF0008 !default
|
40
32
|
|
41
|
-
|
33
|
+
$orange: #E16E00 !default
|
34
|
+
$orange-bright: #F97908 !default
|
35
|
+
|
36
|
+
$yellow: #D5B778 !default
|
37
|
+
$yellow-bright: #F1CE86 !default
|
38
|
+
|
39
|
+
$green: #6BAF56 !default
|
40
|
+
$green-bright: #85DB6A !default
|
42
41
|
|
43
|
-
$
|
44
|
-
$
|
42
|
+
$blue: #5A9FC8 !default
|
43
|
+
$blue-bright: #66B7E7 !default
|
45
44
|
|
46
|
-
|
47
|
-
$bg-black-fallback: #252525 !default
|
45
|
+
// Background Colors
|
48
46
|
|
49
|
-
$bg-
|
50
|
-
$bg-
|
47
|
+
$bg-gray-lgihter: $gray-lighter !default
|
48
|
+
$bg-transparent: rgba(0,0,0,0.1) !default
|
49
|
+
$bg-tab: $gray-light !default
|
51
50
|
|
52
|
-
|
53
|
-
$bg-gray-fallback: #9A9A9A !default
|
51
|
+
// Gradated Background Colors
|
54
52
|
|
55
|
-
$bg-
|
56
|
-
$bg-
|
53
|
+
$bg-default: linear-gradient(to bottom right, #4B99CB, #91E1B9) !default
|
54
|
+
$bg-default-fallback: #4B99CB !default
|
55
|
+
$bg-red: linear-gradient(to bottom right, #C9282E, #A60052) !default
|
56
|
+
$bg-red-fallback: #A8002D !default
|
57
|
+
$bg-orange: linear-gradient(to bottom right, #EE495C, #F09259) !default
|
58
|
+
$bg-orange-fallback: #EE495C !default
|
59
|
+
$bg-green: linear-gradient(to bottom right, #73B558, #45D093) !default
|
60
|
+
$bg-green-fallback: #52BB5C !default
|
61
|
+
$bg-blue: linear-gradient(to bottom right, #25639A, #1F9CEA) !default
|
62
|
+
$bg-blue-fallback: #1C6AB9 !default
|
63
|
+
|
64
|
+
$bg-black: linear-gradient(to bottom right, #222, #333) !default
|
65
|
+
$bg-black-fallback: #252525 !default
|
66
|
+
$bg-gray: linear-gradient(to bottom right, #888, #CCC) !default
|
67
|
+
$bg-gray-fallback: #9A9A9A !default
|
68
|
+
$bg-gray-medium: linear-gradient(to bottom right, #666, #777) !default
|
69
|
+
$bg-gray-medium-fallback: #666 !default
|
70
|
+
$bg-gray-light: linear-gradient(to bottom right, #DDD, #EEE) !default
|
71
|
+
$bg-gray-light-fallback: #DDD !default
|
72
|
+
$bg-gray-lighter: linear-gradient(to bottom right, #EEE, #f9f9f9) !default
|
73
|
+
$bg-gray-lighter-fallback: #EEE !default
|
74
|
+
$bg-gray-lightest: linear-gradient(to bottom right, #F9F9F9, #FFF) !default
|
75
|
+
$bg-gray-lightest-fallback: #F9F9F9 !default
|
57
76
|
|
58
77
|
// Hover
|
59
78
|
|
60
|
-
$link:
|
61
|
-
$hover:
|
62
|
-
$focus:
|
79
|
+
$link: $red !default
|
80
|
+
$hover: $red-bright !default
|
81
|
+
$focus: rgba(255,0,0,0.2) !default
|
63
82
|
|
64
83
|
// Header
|
65
84
|
|
66
|
-
$header-
|
67
|
-
$header-
|
85
|
+
$header-background-color: #FFF !default
|
86
|
+
$header-dropdown-menu-padding: 1.24em 1.3em !default
|
87
|
+
$header-dropdown-submenu-padding: 0.7em 1.5em !default
|
88
|
+
$header-height: 4.25em !default
|
89
|
+
$header-link-hover: #EEE !default
|
90
|
+
$header-link: #333 !default
|
91
|
+
$header-menu-background-color-dark: #222 !default
|
92
|
+
$header-menu-background-color: #FFF !default
|
93
|
+
$header-menu-border-color-dark: #111 !default
|
94
|
+
$header-menu-border-color: #EEE !default
|
95
|
+
$header-menu-line-height: 1.82 !default
|
96
|
+
$header: #FFF !default
|
68
97
|
|
69
98
|
// Typography
|
70
99
|
|
71
|
-
$text:
|
72
|
-
$bold:
|
100
|
+
$text: #444 !default
|
101
|
+
$bold: 500 !default
|
73
102
|
|
74
103
|
// Transitions
|
75
104
|
|
76
|
-
$standard-animation-speed:
|
77
|
-
$all:
|
78
|
-
$color:
|
105
|
+
$standard-animation-speed: 200ms !default
|
106
|
+
$all: all $standard-animation-speed ease-in-out !default
|
107
|
+
$color: color $standard-animation-speed ease-in-out !default
|
79
108
|
|
80
109
|
// GPU Trickery
|
81
110
|
|
82
|
-
$translate:
|
111
|
+
$translate: translateZ(0) !default
|
83
112
|
|
84
113
|
// Radius
|
85
114
|
|
86
|
-
$radius:
|
87
|
-
$round:
|
115
|
+
$radius: 0.15em !default
|
116
|
+
$round: 99em !default
|
88
117
|
|
89
118
|
// Grid
|
90
119
|
|
91
|
-
$grid-padding:
|
120
|
+
$grid-padding: 2% !default
|
92
121
|
|
93
122
|
// Loaders
|
94
123
|
|
95
|
-
$loader-large:
|
96
|
-
$loader:
|
97
|
-
$loader-small:
|
98
|
-
$loader-smallest:
|
124
|
+
$loader-large: 48px !default
|
125
|
+
$loader: 32px !default
|
126
|
+
$loader-small: 16px !default
|
127
|
+
$loader-smallest: 9px !default
|
99
128
|
|
100
129
|
// Forms
|
101
130
|
|
102
|
-
$size:
|
103
|
-
$border-width:
|
104
|
-
$input-left-right-padding:
|
105
|
-
$input-checkbox-checked:
|
106
|
-
$input-background-color:
|
107
|
-
$input-
|
131
|
+
$size: 1em !default
|
132
|
+
$border-width: 1px !default
|
133
|
+
$input-left-right-padding: 0.5em !default
|
134
|
+
$input-checkbox-checked: $link !default
|
135
|
+
$input-background-color: #FFF !default
|
136
|
+
$input-background-color-hover: #F8F8F8 !default
|
137
|
+
$input-height: 2.7em !default
|
108
138
|
|
109
139
|
// Breakpoints
|
110
140
|
|
111
|
-
$desktop-large:
|
112
|
-
$desktop:
|
113
|
-
$laptop:
|
114
|
-
$tablet:
|
115
|
-
$phablet:
|
116
|
-
$phablet-handheld:
|
117
|
-
$handheld:
|
118
|
-
$handheld-portrait:
|
141
|
+
$desktop-large: 1680px !default
|
142
|
+
$desktop: 1440px !default
|
143
|
+
$laptop: 1280px !default
|
144
|
+
$tablet: 1080px !default
|
145
|
+
$phablet: 860px !default
|
146
|
+
$phablet-handheld: 780px !default
|
147
|
+
$handheld: 667px !default
|
148
|
+
$handheld-portrait: 334px !default
|
119
149
|
|
120
150
|
// Characters
|
121
151
|
|
122
|
-
$non-breaking-space:
|
123
|
-
|
124
|
-
// Mixins
|
125
|
-
|
126
|
-
@mixin appearance-none
|
127
|
-
-moz-appearance: none
|
128
|
-
-o-appearance: none
|
129
|
-
-ms-appearance: none
|
130
|
-
-webkit-appearance: none
|
131
|
-
appearance: none
|
152
|
+
$non-breaking-space: '\00a0' !default
|
132
153
|
|
133
154
|
// Vectors
|
134
155
|
|
@@ -0,0 +1,44 @@
|
|
1
|
+
// Background cards
|
2
|
+
|
3
|
+
.boxed-image,
|
4
|
+
.boxed-action,
|
5
|
+
.boxed-meta
|
6
|
+
position: absolute
|
7
|
+
.boxed-image,
|
8
|
+
.boxed-action
|
9
|
+
top: 0
|
10
|
+
left: 0
|
11
|
+
right: 0
|
12
|
+
bottom: 0
|
13
|
+
.boxed-image
|
14
|
+
@include background-size(cover)
|
15
|
+
.boxed-meta
|
16
|
+
bottom: 0
|
17
|
+
z-index: 1
|
18
|
+
.boxed-action
|
19
|
+
opacity: 0
|
20
|
+
padding: 20% 0 0
|
21
|
+
z-index: 2
|
22
|
+
.boxed
|
23
|
+
padding-top: 80%
|
24
|
+
position: relative
|
25
|
+
text-align: center
|
26
|
+
&:hover
|
27
|
+
.boxed-action
|
28
|
+
background: rgba(255, 255, 255, .7)
|
29
|
+
opacity: 1
|
30
|
+
transition: $all
|
31
|
+
|
32
|
+
@media screen and (max-width: $tablet)
|
33
|
+
|
34
|
+
.boxed-backgrounds
|
35
|
+
[class*='col-']
|
36
|
+
width: 50%
|
37
|
+
.clear
|
38
|
+
display: none
|
39
|
+
|
40
|
+
@media screen and (max-width: $handheld)
|
41
|
+
|
42
|
+
.boxed-backgrounds
|
43
|
+
[class*='col-']
|
44
|
+
width: 100%
|
@@ -0,0 +1,31 @@
|
|
1
|
+
// Photo collages
|
2
|
+
|
3
|
+
.boxed-text
|
4
|
+
position: relative
|
5
|
+
[class*='bg-']
|
6
|
+
@include background-size(cover)
|
7
|
+
.boxed-text-outer
|
8
|
+
position: relative
|
9
|
+
top: 0
|
10
|
+
padding-bottom: 30%
|
11
|
+
.boxed-text-content
|
12
|
+
position: absolute
|
13
|
+
top: 0
|
14
|
+
left: 0
|
15
|
+
right: 0
|
16
|
+
bottom: 0
|
17
|
+
padding: 1em
|
18
|
+
color: #FFF
|
19
|
+
*
|
20
|
+
margin: 0
|
21
|
+
&:after
|
22
|
+
content: ''
|
23
|
+
&:hover
|
24
|
+
background: rgba(0,0,0,0.3)
|
25
|
+
transition: $all
|
26
|
+
|
27
|
+
@media screen and (max-width: $handheld)
|
28
|
+
|
29
|
+
.boxed-text
|
30
|
+
.filler
|
31
|
+
padding-bottom: 80%
|
data/vital.gemspec
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: vital
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 2.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Body Taing
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2017-02-07 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sass
|
@@ -39,20 +39,6 @@ dependencies:
|
|
39
39
|
- - "~>"
|
40
40
|
- !ruby/object:Gem::Version
|
41
41
|
version: '1.11'
|
42
|
-
- !ruby/object:Gem::Dependency
|
43
|
-
name: fontcustom
|
44
|
-
requirement: !ruby/object:Gem::Requirement
|
45
|
-
requirements:
|
46
|
-
- - ">="
|
47
|
-
- !ruby/object:Gem::Version
|
48
|
-
version: '1.3'
|
49
|
-
type: :development
|
50
|
-
prerelease: false
|
51
|
-
version_requirements: !ruby/object:Gem::Requirement
|
52
|
-
requirements:
|
53
|
-
- - ">="
|
54
|
-
- !ruby/object:Gem::Version
|
55
|
-
version: '1.3'
|
56
42
|
- !ruby/object:Gem::Dependency
|
57
43
|
name: rake
|
58
44
|
requirement: !ruby/object:Gem::Requirement
|
@@ -90,15 +76,6 @@ files:
|
|
90
76
|
- dist/css/vital.css.map
|
91
77
|
- dist/css/vital.min.css
|
92
78
|
- dist/css/vital.min.css.map
|
93
|
-
- dist/fonts/icons.eot
|
94
|
-
- dist/fonts/icons.svg
|
95
|
-
- dist/fonts/icons.ttf
|
96
|
-
- dist/fonts/icons.woff
|
97
|
-
- fontcustom.yml
|
98
|
-
- fonts/icons.eot
|
99
|
-
- fonts/icons.svg
|
100
|
-
- fonts/icons.ttf
|
101
|
-
- fonts/icons.woff
|
102
79
|
- lib/vital.rb
|
103
80
|
- lib/vital/engine.rb
|
104
81
|
- lib/vital/version.rb
|
@@ -132,6 +109,7 @@ files:
|
|
132
109
|
- sass/vital/_heroes.sass
|
133
110
|
- sass/vital/_icons.sass
|
134
111
|
- sass/vital/_loaders.sass
|
112
|
+
- sass/vital/_mixins.sass
|
135
113
|
- sass/vital/_normalize.sass
|
136
114
|
- sass/vital/_notice.sass
|
137
115
|
- sass/vital/_pagination.sass
|
@@ -140,6 +118,10 @@ files:
|
|
140
118
|
- sass/vital/_tables.sass
|
141
119
|
- sass/vital/_tabs.sass
|
142
120
|
- sass/vital/_variables.sass
|
121
|
+
- sass/vital/layouts/_background_cards.sass
|
122
|
+
- sass/vital/layouts/_bordered_lists.sass
|
123
|
+
- sass/vital/layouts/_feed_cards.sass
|
124
|
+
- sass/vital/layouts/_photo_collages.sass
|
143
125
|
- vital.gemspec
|
144
126
|
homepage: https://doximity.github.io/vital/
|
145
127
|
licenses: []
|
data/dist/fonts/icons.eot
DELETED
Binary file
|
data/dist/fonts/icons.svg
DELETED
@@ -1,50 +0,0 @@
|
|
1
|
-
<?xml version="1.0" standalone="no"?>
|
2
|
-
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
3
|
-
<!--
|
4
|
-
2016-6-17: Created with FontForge (http://fontforge.org)
|
5
|
-
-->
|
6
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
|
7
|
-
<metadata>
|
8
|
-
Created by FontForge 20160407 at Fri Jun 17 12:02:19 2016
|
9
|
-
By Body Taing
|
10
|
-
Copyright (c) 2016, Body Taing
|
11
|
-
</metadata>
|
12
|
-
<defs>
|
13
|
-
<font id="icons" horiz-adv-x="512" >
|
14
|
-
<font-face
|
15
|
-
font-family="icons"
|
16
|
-
font-weight="400"
|
17
|
-
font-stretch="normal"
|
18
|
-
units-per-em="512"
|
19
|
-
panose-1="2 0 5 3 0 0 0 0 0 0"
|
20
|
-
ascent="448"
|
21
|
-
descent="-64"
|
22
|
-
bbox="0 -64 512 448"
|
23
|
-
underline-thickness="25.6"
|
24
|
-
underline-position="-51.2"
|
25
|
-
unicode-range="U+0020-F107"
|
26
|
-
/>
|
27
|
-
<missing-glyph />
|
28
|
-
<glyph glyph-name="space" unicode=" " horiz-adv-x="200"
|
29
|
-
/>
|
30
|
-
<glyph glyph-name="uniF103" unicode=""
|
31
|
-
d="M437 373c100 -100 100 -262 0 -362s-262 -100 -362 0s-100 262 0 362s262 100 362 0zM374 88l-104 104l104 104l-14 14l-104 -104l-104 104l-14 -15l103 -103l-103 -103l14 -15l104 104l104 -104z" />
|
32
|
-
<glyph glyph-name="uniF105" unicode=""
|
33
|
-
d="M437 373c100 -100 100 -262 0 -362s-262 -100 -362 0s-100 262 0 362s262 100 362 0zM422 26c92 92 92 241 0 332s-241 92 -332 0s-92 -241 0 -332s241 -91 332 0zM360 310l14 -14l-104 -104l104 -104l-14 -14l-104 104l-104 -104l-14 15l103 103l-103 103l14 15
|
34
|
-
l104 -104z" />
|
35
|
-
<glyph glyph-name="uniF101" unicode="" horiz-adv-x="257"
|
36
|
-
d="M91 100c-3 -3 -7 -5 -11 -5s-7 3 -10 6l-70 69l22 22l59 -58l155 156l21 -23z" />
|
37
|
-
<glyph glyph-name="uniF106" unicode=""
|
38
|
-
d="M0 357h512v-21h-512v21zM0 203h512v-20h-512v20zM0 50h512v-21h-512v21z" />
|
39
|
-
<glyph glyph-name="uniF104" unicode="" horiz-adv-x="236"
|
40
|
-
d="M222 311l14 -14l-104 -104l104 -104l-14 -14l-104 103l-104 -103l-14 15l103 103l-103 103l14 15l104 -104z" />
|
41
|
-
<glyph glyph-name="uniF100" unicode="" horiz-adv-x="274"
|
42
|
-
d="M0 235h274l-137 213l-137 -213zM274 150h-274l137 -213l137 213z" />
|
43
|
-
<glyph glyph-name="uniF107" unicode="" horiz-adv-x="507"
|
44
|
-
d="M463 176c24 0 44 -20 44 -44c0 -25 -20 -45 -44 -45c-19 0 -36 12 -42 29h-47c-6 0 -12 4 -14 10l-15 44l-46 -161c-2 -6 -8 -10 -14 -10h-1c-7 0 -13 4 -14 11l-47 285l-42 -168c-2 -6 -8 -11 -15 -11l-166 16s146 12 149 12c1 0 5 -1 6 2c0 2 0 1 0 1l56 225
|
45
|
-
c2 7 7 12 15 12s13 -6 14 -13l49 -291l41 144c2 6 8 10 14 10v0c6 0 12 -4 14 -10l27 -79h36c6 18 22 31 42 31z" />
|
46
|
-
<glyph glyph-name="uniF102" unicode=""
|
47
|
-
d="M256 448c141 0 256 -115 256 -256s-115 -256 -256 -256s-256 115 -256 256s115 256 256 256zM256 428c-130 0 -236 -106 -236 -236s106 -236 236 -236s236 106 236 236s-106 236 -236 236zM387 345c3 1 7 -1 9 -3c4 -4 4 -10 0 -14l-113 -122c2 -4 4 -9 4 -14
|
48
|
-
c0 -8 -3 -15 -8 -20l42 -79c3 -5 1 -11 -4 -14s-11 -1 -14 4l-42 79c-2 0 -3 -1 -5 -1c-17 0 -31 14 -31 31s14 31 31 31c4 0 8 -1 12 -3l113 122c2 2 4 3 6 3z" />
|
49
|
-
</font>
|
50
|
-
</defs></svg>
|