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.
@@ -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)
@@ -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
 
@@ -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,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
@@ -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
@@ -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>