vital 1.2.1 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (40) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +0 -4
  3. data/.ruby-version +1 -1
  4. data/CHANGELOG.md +12 -0
  5. data/Gemfile.lock +2 -22
  6. data/README.md +4 -19
  7. data/Rakefile +0 -16
  8. data/dist/css/vital.css +427 -262
  9. data/dist/css/vital.css.map +2 -2
  10. data/dist/css/vital.min.css +1 -1
  11. data/dist/css/vital.min.css.map +2 -2
  12. data/lib/vital/version.rb +1 -1
  13. data/package.json +1 -1
  14. data/sass/vital/_all.sass +10 -0
  15. data/sass/vital/_base.sass +4 -15
  16. data/sass/vital/_buttons.sass +4 -3
  17. data/sass/vital/_forms.sass +17 -50
  18. data/sass/vital/_grid.sass +0 -13
  19. data/sass/vital/_header.sass +183 -108
  20. data/sass/vital/_helpers.sass +122 -46
  21. data/sass/vital/_icons.sass +13 -68
  22. data/sass/vital/_loaders.sass +0 -29
  23. data/sass/vital/_mixins.sass +120 -0
  24. data/sass/vital/_notice.sass +3 -2
  25. data/sass/vital/_variables.sass +100 -79
  26. data/sass/vital/layouts/_background_cards.sass +44 -0
  27. data/sass/vital/layouts/_bordered_lists.sass +13 -0
  28. data/sass/vital/layouts/_feed_cards.sass +13 -0
  29. data/sass/vital/layouts/_photo_collages.sass +31 -0
  30. data/vital.gemspec +0 -1
  31. metadata +7 -25
  32. data/dist/fonts/icons.eot +0 -0
  33. data/dist/fonts/icons.svg +0 -50
  34. data/dist/fonts/icons.ttf +0 -0
  35. data/dist/fonts/icons.woff +0 -0
  36. data/fontcustom.yml +0 -24
  37. data/fonts/icons.eot +0 -0
  38. data/fonts/icons.svg +0 -50
  39. data/fonts/icons.ttf +0 -0
  40. 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-right: 3em
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
- content: $font-icons-icon-close
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: false !default
5
+ $vital-sass-asset-helper: false !default
6
6
 
7
- $font: "Helvetica Neue", Helvetica, Sans-Serif !default
8
- $code: "Monaco", Menlo, Courier !default
9
- $icons: "icons", helvetica, Sans-Serif !default
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
- $header: #FFF !default
14
- $notice: #FFE0A3 !default
15
- $body: #FAFAFA !default
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: #FFF !default
21
- $gray-lightest: #F9F9F9 !default
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
- // Background Colors
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
- $bg-gray-lgihter: $gray-lighter !default
38
- $bg-transparent: rgba(0,0,0,0.1) !default
39
- $bg-tab: $gray-light !default
29
+ $red-dark: #AA2227 !default
30
+ $red: #C9282E !default
31
+ $red-bright: #FF0008 !default
40
32
 
41
- // Gradated Background Colors
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
- $bg-red: linear-gradient(to bottom right, #C9282E, #A60052) !default
44
- $bg-red-fallback: #A8002D !default
42
+ $blue: #5A9FC8 !default
43
+ $blue-bright: #66B7E7 !default
45
44
 
46
- $bg-black: linear-gradient(to bottom right, #222, #333) !default
47
- $bg-black-fallback: #252525 !default
45
+ // Background Colors
48
46
 
49
- $bg-green: linear-gradient(to bottom right, #73B558, #45D093) !default
50
- $bg-green-fallback: #52BB5C !default
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
- $bg-gray: linear-gradient(to bottom right, #888, #CCC) !default
53
- $bg-gray-fallback: #9A9A9A !default
51
+ // Gradated Background Colors
54
52
 
55
- $bg-blue: linear-gradient(to bottom right, #25639A, #1F9CEA) !default
56
- $bg-blue-fallback: #1C6AB9 !default
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: $red !default
61
- $hover: $red-bright !default
62
- $focus: rgba(255,0,0,0.2) !default
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-height: 4.25em !default
67
- $header-link-hover: #F5F5F5 !default
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: #444 !default
72
- $bold: 500 !default
100
+ $text: #444 !default
101
+ $bold: 500 !default
73
102
 
74
103
  // Transitions
75
104
 
76
- $standard-animation-speed: 200ms !default
77
- $all: all $standard-animation-speed ease-in-out !default
78
- $color: color $standard-animation-speed ease-in-out !default
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: translateZ(0) !default
111
+ $translate: translateZ(0) !default
83
112
 
84
113
  // Radius
85
114
 
86
- $radius: 0.15em !default
87
- $round: 99em !default
115
+ $radius: 0.15em !default
116
+ $round: 99em !default
88
117
 
89
118
  // Grid
90
119
 
91
- $grid-padding: 2% !default
120
+ $grid-padding: 2% !default
92
121
 
93
122
  // Loaders
94
123
 
95
- $loader-large: 48px !default
96
- $loader: 32px !default
97
- $loader-small: 16px !default
98
- $loader-smallest: 9px !default
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: 1em !default
103
- $border-width: 1px !default
104
- $input-left-right-padding: 0.5em !default
105
- $input-checkbox-checked: $link !default
106
- $input-background-color: #FFF !default
107
- $input-height: 2.7em !default
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: 1680px !default
112
- $desktop: 1440px !default
113
- $laptop: 1280px !default
114
- $tablet: 1080px !default
115
- $phablet: 860px !default
116
- $phablet-handheld: 780px !default
117
- $handheld: 667px !default
118
- $handheld-portrait: 334px !default
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: '\00a0' !default
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
 
data/sass/vital/layouts/_background_cards.sass ADDED
@@ -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%
data/sass/vital/layouts/_bordered_lists.sass ADDED
@@ -0,0 +1,13 @@
1
+ // Lists
2
+
3
+ .bordered-list
4
+ margin: 0
5
+ a
6
+ display: block
7
+ padding: 1em
8
+ li
9
+ border-top: 1px solid #eee
10
+ &:first-child
11
+ border-top: 0
12
+ .here
13
+ background: #fff
data/sass/vital/layouts/_feed_cards.sass ADDED
@@ -0,0 +1,13 @@
1
+ // Post cards
2
+
3
+ .feed-card
4
+ background: #FFF
5
+ box-shadow: 0 .1em .2em rgba(0, 0, 0, .05)
6
+ padding: 1em
7
+ margin: 0.3em
8
+ img
9
+ border-radius: 0
10
+ height: auto
11
+ width: 100%
12
+ *
13
+ margin: 0.2em 0
data/sass/vital/layouts/_photo_collages.sass ADDED
@@ -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
@@ -18,6 +18,5 @@ Gem::Specification.new do |spec|
18
18
  spec.add_dependency 'sass', '>= 3.4'
19
19
 
20
20
  spec.add_development_dependency 'bundler', '~> 1.11'
21
- spec.add_development_dependency 'fontcustom', '>= 1.3'
22
21
  spec.add_development_dependency 'rake', '~> 10.0'
23
22
  end
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: 1.2.1
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: 2016-11-09 00:00:00.000000000 Z
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="&#xf103;"
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="&#xf105;"
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="&#xf101;" 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="&#xf106;"
38
- d="M0 357h512v-21h-512v21zM0 203h512v-20h-512v20zM0 50h512v-21h-512v21z" />
39
- <glyph glyph-name="uniF104" unicode="&#xf104;" 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="&#xf100;" horiz-adv-x="274"
42
- d="M0 235h274l-137 213l-137 -213zM274 150h-274l137 -213l137 213z" />
43
- <glyph glyph-name="uniF107" unicode="&#xf107;" 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="&#xf102;"
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>