vital 1.2.1 → 2.0.0

data/sass/vital/_helpers.sass

@@ -5,68 +5,96 @@
 
 // Text, Typography
 
+// Lists
+
 ul, ol
   &.list
-    margin-left: 1em
     padding-left: 1em
-
-ul.list li
-  list-style: disc
-
-ol.list li
-  list-style: decimal
+    li
+      padding-bottom: 0.5em
+ul.list
+  li
+    list-style: disc
+  ul
+    margin-top: 0
+    li
+      list-style: circle
+ol.list
+  li
+    list-style: decimal
+  ul
+    margin-bottom: 0
+    li
+      list-style: circle
 
 .align-left
   text-align: left
-
 .align-right
   text-align: right
-
 .break-word
   word-break: break-all
-
-.no-wrap
-  white-space: nowrap
-
 .thin
   font-weight: 100
-
 .uppercase
   text-transform: uppercase
 
+// Removals
+
+.no-wrap
+  white-space: nowrap
+.no-text-margins *
+  margin: 0
+.no-margin-top
+  margin-top: 0
+.no-margin-bottom
+  margin-bottom: 0
+.no-first-last
+  *
+    &:first-child
+      margin-top: 0
+    &:last-child
+      margin-bottom: 0
+
 // Lighten all typography for dark backgrounds
 
 .light-text
   *, a
     color: white
-  a
+  a:hover
     text-decoration: underline
 
+// Page width
+
+.narrow
+  max-width: 34em
+  margin: 0 auto
+.narrow-large
+  max-width: 40em
+  margin: 0 auto
+.narrow-small
+  max-width: 20em
+  margin: 0 auto
+
 // Alignment
 
 .auto
   margin: 0 auto
-
 .block
   display: block
-
 .center
   text-align: center
-
 .clear
   clear: both
-
 .float-left
   float: left
-
 .float-right
   float: right
-
 .inline
   display: inline
-
 .inline-block
   display: inline-block
+.padding
+  padding: 1em
 
 // Forms
 
@@ -81,35 +109,23 @@ ol.list li
   border: $border-width solid #ddd
   margin: 1em 0
   padding: 1em
-
 .disabled
   color: $gray-light
-
 .radius
   border-radius: $radius
-
 .round
   border-radius: $round
 
-// Opacities
-
-.opacity-half
-  opacity: 0.5
-
 // Colors
 
 .gray
   color: $gray
-
 .gray-medium
   color: $gray-medium
-
 .gray-light
   color: $gray-light
-
 .gray-lighter
   color: $gray-lighter
-
 .gray-lightest
   color: $gray-lightest
 
@@ -117,29 +133,53 @@ ol.list li
 
 .bg
   background: $gray-lightest
-
-// Backgrounds (Gradients)
-
+.bg-white
+  background: #FFF
+.bg-default
+  background: $bg-default-fallback
+  background: $bg-default
 .bg-black
   background: $bg-black-fallback
   background: $bg-black
-
 .bg-gray
   background: $bg-gray-fallback
   background: $bg-gray
-
 .bg-blue
   background: $bg-blue-fallback
   background: $bg-blue
-
 .bg-red
   background: $bg-red-fallback
   background: $bg-red
-
+.bg-orange
+  background: $bg-orange-fallback
+  background: $bg-orange
 .bg-green
   background: $bg-green-fallback
   background: $bg-green
 
+// Opacities
+
+.opacity-1
+  opacity: 0.1
+.opacity-2
+  opacity: 0.2
+.opacity-3
+  opacity: 0.3
+.opacity-4
+  opacity: 0.4
+.opacity-5
+  opacity: 0.5
+.opacity-6
+  opacity: 0.6
+.opacity-7
+  opacity: 0.7
+.opacity-8
+  opacity: 0.8
+.opacity-9
+  opacity: 0.9
+.opaque
+  opacity: 1
+
 // Hide / Show
 
 .hide
@@ -159,15 +199,15 @@ ol.list li
   &:after
     content: $non-breaking-space
 
-// Font sizing
+// Sizing
 
-.i2x
+.x2
   font-size: 2em
-.i3x
+.x3
   font-size: 3em
-.i4x
+.x4
   font-size: 4em
-.i5x
+.x5
   font-size: 5em
 
 .same-width
@@ -175,6 +215,42 @@ ol.list li
   width: 2em
   display: inline-block
 
+// Image sizes
+
+img
+  height: auto
+  &.smallest
+    width: 1em
+  &.smaller
+    width: 2em
+  &.small
+    width: 3em
+  &.medium
+    width: 4em
+  &.large
+    width: 5em
+  &.larger
+    width: 6em
+  &.largest
+    width: 7em
+
+// Grid
+
+.padded
+  [class*='col-'], .col
+    padding-left: $grid-padding
+    padding-right: $grid-padding
+
+.right-padded
+  [class*='col-'], .col
+    padding-right: $grid-padding
+
+@media screen and (max-width: $phablet)
+
+  .right-padded
+    [class*='col-'], .col
+      padding: 0
+
 @media screen and (max-width: $handheld)
 
   // Hide these classes on the $handheld breakpoint

data/sass/vital/_icons.sass

@@ -1,80 +1,25 @@
-//
-// Icon Font: icons
-//
+// Framework Icons
 
-// https://github.com/sass/sass/issues/659#issuecomment-64819075
-@function char($character-code)
-  @if function-exists("selector-append")
-    @return unquote('"\\#{$character-code}"')
+$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>'
 
-  @return str-slice("x", 1, 1) + $character-code
+$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>'
 
-@font-face
-  font-family: "icons"
-  src: url(if($vital-sass-asset-helper, vital-font-path("icons.eot"), "../fonts/icons.eot"))
-  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")
-  font-weight: normal
-  font-style: normal
+$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>'
 
-@media screen and (-webkit-min-device-pixel-ratio: 0)
-  @font-face
-    font-family: "icons"
-    src: url(if($vital-sass-asset-helper, vital-font-path("icons.svg#icons"), "../fonts/icons.svg#icons")) format("svg")
+$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>'
 
-[data-icon]:before
-  content: attr(data-icon)
+$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>'
 
-[data-icon]:before,
-.icon-arrow-updown:before,
-.icon-check:before,
-.icon-clock:before,
-.icon-close:before,
-.icon-close-empty:before,
-.icon-close-outline:before,
-.icon-menu:before,
-.icon-vital:before
-  display: inline-block
-  font-family: "icons"
-  font-style: normal
-  font-weight: normal
-  font-variant: normal
-  line-height: 1
-  text-decoration: inherit
-  text-rendering: optimizeLegibility
-  text-transform: none
-  -moz-osx-font-smoothing: grayscale
-  -webkit-font-smoothing: antialiased
-  font-smoothing: antialiased
+$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>'
 
-.icon-arrow-updown:before
-  content: char("f100")
+$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>'
 
-.icon-check:before
-  content: char("f101")
+$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>'
 
-.icon-clock:before
-  content: char("f102")
+$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>'
 
-.icon-close:before
-  content: char("f103")
+$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>'
 
-.icon-close-empty:before
-  content: char("f104")
+$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>'
 
-.icon-close-outline:before
-  content: char("f105")
-
-.icon-menu:before
-  content: char("f106")
-
-.icon-vital:before
-  content: char("f107")
-
-$font-icons-icon-arrow-updown: char("f100")
-$font-icons-icon-check: char("f101")
-$font-icons-icon-clock: char("f102")
-$font-icons-icon-close: char("f103")
-$font-icons-icon-close-empty: char("f104")
-$font-icons-icon-close-outline: char("f105")
-$font-icons-icon-menu: char("f106")
-$font-icons-icon-vital: char("f107")
+$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>'

data/sass/vital/_loaders.sass

@@ -51,32 +51,3 @@
     -moz-transform: rotate(0deg)
   to
     -moz-transform: rotate(360deg)
-
-// Adjustments for IE 8/9
-
-.ie8, .ie9
-
-  .load
-    border-color: transparent
-    line-height: 1
-    font-size: $loader
-    width: $loader
-    height: $loader
-    display: inline
-    &:after
-      content: $font-icons-icon-clock
-      font-family: $icons
-    &.smallest
-      font-size: $loader-smallest
-      width: $loader-smallest
-      height: $loader-smallest
-      border-width: 0.1em
-    &.small
-      font-size: $loader-small
-      width: $loader-small
-      height: $loader-small
-      border-width: 0.1em
-    &.large
-      font-size: $loader-large
-      width: $loader-large
-      height: $loader-large

data/sass/vital/_mixins.sass

@@ -0,0 +1,120 @@
+// Mixins
+
+@mixin appearance($appearance-variable)
+  -moz-appearance: $appearance-variable
+  -ms-appearance: $appearance-variable
+  -o-appearance: $appearance-variable
+  -webkit-appearance: $appearance-variable
+  appearance: $appearance-variable
+
+@mixin box-sizing($box-sizing-variable)
+  box-sizing: $box-sizing-variable
+  -moz-box-sizing: $box-sizing-variable
+  -webkit-box-sizing: $box-sizing-variable
+
+@mixin border-radius($border-radius-variable)
+  -moz-border-radius: $border-radius-variable
+  -ms-border-radius: $border-radius-variable
+  -o-border-radius: $border-radius-variable
+  -webkit-border-radius: $border-radius-variable
+  border-radius: $border-radius-variable
+
+@mixin background($background-variable)
+  -moz-background: $background-variable
+  -ms-background: $background-variable
+  -o-background: $background-variable
+  -webkit-background: $background-variable
+
+@mixin background-size($background-size-variable)
+  -moz-background-size: $background-size-variable
+  -ms-background-size: $background-size-variable
+  -o-background-size: $background-size-variable
+  -webkit-background-size: $background-size-variable
+  background-size: $background-size-variable
+  background-repeat: no-repeat
+  background-position: center
+
+@mixin box-shadow($box-shadow-variable)
+  -moz-box-shadow: $box-shadow-variable
+  -ms-box-shadow: $box-shadow-variable
+  -o-box-shadow: $box-shadow-variable
+  -webkit-box-shadow: $box-shadow-variable
+  box-shadow: $box-shadow-variable
+
+@mixin color($color-variable)
+  color: $color-variable
+  fill: $color-variable
+
+@mixin column-count($column-count-variable)
+  -webkit-column-count: $column-count-variable
+  -moz-column-count: $column-count-variable
+  -ms-column-count: $column-count-variable
+  column-count: $column-count-variable
+  columns: $column-count-variable
+
+@mixin filter($filter-variable)
+  -moz-filter: $filter-variable
+  -ms-filter: $filter-variable
+  -o-filter: $filter-variable
+  -webkit-filter: $filter-variable
+  filter: $filter-variable
+
+@mixin user-select($user-select-variable)
+  -moz-user-select: $user-select-variable
+  -ms-user-select: $user-select-variable
+  -o-user-select: $user-select-variable
+  -webkit-user-select: $user-select-variable
+  user-select: $user-select-variable
+
+@mixin object-fit($object-fit-variable)
+  -moz-object-fit: $object-fit-variable
+  -ms-object-fit: $object-fit-variable
+  -o-object-fit: $object-fit-variable
+  -webkit-object-fit: $object-fit-variable
+  object-fit: $object-fit-variable
+
+@mixin transform($transform-variable)
+  -webkit-transform: $transform-variable
+  -moz-transform: $transform-variable
+  -ms-transform: $transform-variable
+  transform: $transform-variable
+
+@mixin transition($transition-variable)
+  -webkit-transition: $transition-variable
+  -moz-transition: $transition-variable
+  -ms-transition: $transition-variable
+  transition: $transition-variable
+
+@mixin transition-delay($transition-delay-variable)
+  -webkit-transition-delay: $transition-delay-variable
+  -moz-transition-delay: $transition-delay-variable
+  -ms-transition-delay: $transition-delay-variable
+  transition-delay: $transition-delay-variable
+
+@mixin transition-duration($transition-duration-variable)
+  -webkit-transition-duration: $transition-duration-variable
+  -moz-transition-duration: $transition-duration-variable
+  -ms-transition-duration: $transition-duration-variable
+  transition-duration: $transition-duration-variable
+
+// Pre-defined
+
+@mixin font-smoothing
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased
+  font-smoothing: antialiased
+
+@mixin svg-background
+  background-size: 1em
+  background-repeat: no-repeat
+  background-position: 99% 50%
+
+@mixin vertical-align
+  position: relative
+  top: 50%
+  -webkit-transform: translateY(-50%)
+  -ms-transform: translateY(-50%)
+  transform: translateY(-50%)
+  -webkit-transform-style: preserve-3d
+  -moz-transform-style: preserve-3d
+  transform-style: preserve-3d