rolodex 2.0.0

data/vendor/assets/stylesheets/rolodex/components/_icons.sass

@@ -0,0 +1,76 @@
+// Icons
+// ========================================
+
+.i-expand-gray,
+.i-expand-white,
+.i-image,
+.i-suggest-tick,
+.i-suggest-x,
+.i-plane,
+.i-star-banner
+  +i-icon
+
+// Close
+
+.i-close
+  +ir
+  background-color: transparent
+  +background-svg("icons/icon-close-x", 10px)
+  background-position: 50%
+  background-repeat: no-repeat
+  border: 0
+  cursor: pointer
+  +rem(height, 15px)
+  opacity: .4
+  outline: 0
+  position: absolute
+  +rem(right, 15px)
+  +rem(top, 13px)
+  transition: $transition-all
+  +rem(width, 15px)
+
+  &:hover,
+  &:focus
+    opacity: $i-transparent
+
+// Expand & image
+
+.i-expand-gray,
+.i-expand-white,
+.i-image
+  +rem(height, 20px)
+  +rem(width, 25px)
+
+.i-expand-gray
+  +background-svg("icons/icon-expand-gray", 25px 20px)
+
+.i-expand-white
+  +background-svg("icons/icon-expand-white", 25px 20px)
+
+.i-image
+  +background-svg("icons/icon-image", 25px 20px)
+
+// Suggest
+
+.i-suggest-tick,
+.i-suggest-x
+  +background-svg("icons/icon-suggest", 12px 18px)
+  +rem(height, 9px)
+  +rem(width, 12px)
+
+.i-suggest-x
+  +rem(background-position, 0 -9px)
+
+// Plane
+
+.i-plane
+  +background-svg("icons/icon-plane", 32px 24px)
+  +rem(height, 24px)
+  +rem(width, 32px)
+
+// Star banner
+
+.i-star-banner
+  +background-svg("icons/icon-star-banner", 21px 30px)
+  +rem(height, 30px)
+  +rem(width, 21px)

data/vendor/assets/stylesheets/rolodex/components/_labels.sass

@@ -0,0 +1,29 @@
+// Labels
+// ========================================
+
+.label
+  background-color: $white
+  +rem(border-radius, $border-radius-mini)
+  border-style: solid
+  +rem(border-width, 1px)
+  +s-hotel
+  font-weight: 500
+  +rem(padding, 3px 7px 4px 7px)
+  position: relative
+  text-transform: uppercase
+  vertical-align: middle
+  white-space: nowrap
+
+.label-push-left
+  +rem(margin-left, 5px)
+
+// Backgrounds
+
+@each $label in $labels
+  
+  $kind:  nth($label, 1)
+  $color: nth($label, 2)
+  
+  .label-#{$kind}
+    border-color: $color
+    color: $color

data/vendor/assets/stylesheets/rolodex/components/_lists.sass

@@ -0,0 +1,15 @@
+// Lists
+// ========================================
+
+ul,
+ol,
+dl,
+dt,
+dd
+  list-style: none
+  margin: 0
+  padding: 0
+
+.list-base
+  list-style: disc
+  +rem(margin-left, 20px)

data/vendor/assets/stylesheets/rolodex/components/_loading.sass

@@ -0,0 +1,32 @@
+// Loading
+// ========================================
+
+.loading,
+.loading:after
+  +background-svg("loading/loading", 34px)
+  +rem(height, 34px)
+  +rem(width, 34px)
+
+.loading
+  +rem(background-position, 0 -34px)
+  margin-left: auto
+  margin-right: auto
+  position: relative
+
+  &:after
+    animation: loading 1s linear infinite
+    content: ""
+    position: absolute
+    right: 0
+    top: 0
+
+  .modal-footer &
+    +rem(margin-top, 4px)
+
+// Keyframes
+
+@keyframes loading
+  0%
+    transform: rotate(0deg)
+  100%
+    transform: rotate(360deg)

data/vendor/assets/stylesheets/rolodex/components/_media.sass

@@ -0,0 +1,14 @@
+// Media
+// ========================================
+
+img
+  border: 0
+  display: inline-block
+
+figure
+  margin: 0
+
+iframe
+  border: 0
+  display: block
+  width: 100%

data/vendor/assets/stylesheets/rolodex/components/_modals.sass

@@ -0,0 +1,83 @@
+// Modals
+// ========================================
+
+.modal
+  background-color: rgba($slate-dark, .8)
+  bottom: 0
+  left: 0
+  opacity: 0
+  overflow-x: hidden
+  overflow-y: auto
+  +rem(padding, $baseline-step * 10)
+  position: fixed
+  right: 0
+  top: 0
+  transition: $transition-all
+  z-index: 99
+
+.modal-fade
+  opacity: 1
+
+.modal-content
+  background-color: $white
+  +rem(border-radius, $border-radius-base)
+  +rem(box-shadow, 0 0 0 4px rgba($black, .15))
+  margin: 0 auto
+  +rem(max-width, 660px)
+
+.modal-header,
+.modal-footer
+  +bump(padding, box)
+
+.modal-header
+  position: relative
+  text-align: center
+
+  p:last-child
+    margin: 0
+
+.modal-title
+  +s-bravo
+  font-weight: 400
+  margin: 0
+
+.modal-body,
+.modal-body-alt
+  background-color: $white-offset
+  +rem(border, 1px solid $gray-light)
+  +rem(border-width, 1px 0)
+
+.modal-body
+  +rem(padding, ($baseline-base - 1) $gutter)
+
+  p:last-child
+    margin-bottom: 0
+
+// Nav
+
+.modal-nav
+  +bump(padding, gutters)
+
+  li
+    +rem(margin-bottom, -1px)
+    +bump(padding, gutters)
+    position: relative
+    z-index: 1
+
+  a
+    +rem(border-bottom, 5px solid transparent)
+    color: $gray
+    display: block
+    +s-delta
+    +rem(padding-bottom, $baseline-x-small)
+    text-align: center
+
+    &:hover,
+    &:focus,
+    &:active
+      color: $blue
+
+    &.modal-nav-active
+      border-color: $blue
+      color: $black
+      cursor: default

data/vendor/assets/stylesheets/rolodex/components/_tables.sass

@@ -0,0 +1,9 @@
+// Tables
+// ========================================
+
+table
+  border-spacing: 0
+
+th,
+td
+  padding: 0

data/vendor/assets/stylesheets/rolodex/components/_tooltips.sass

@@ -0,0 +1,123 @@
+// Tooltips
+// ========================================
+
+.tooltip
+  +rem(border, 2px solid $gray-light)
+  border-radius: 50%
+  cursor: pointer
+  display: inline-block
+  +rem(height, 22px)
+  position: relative
+  vertical-align: middle
+  +rem(width, 22px)
+
+  &:after
+    +background-svg("tooltips/tooltip-star", 10px)
+    content: ""
+    +rem(height, 10px)
+    position: absolute
+    +center(xy)
+    +rem(width, 10px)
+  
+  &:hover,
+  &:focus
+    border-color: $blue
+
+    &:after
+      +rem(background-position, 0 -10px)
+
+  .form-group &
+    +rem(margin-left, $gutter-half)
+
+.tooltip-push-down
+  +rem(margin-top, 1px)
+  
+.tooltip-pull-up
+  +rem(margin-top, -2px)
+
+// Tip
+
+.tooltip-tip,
+.tooltip-header,
+.tooltip-body
+  display: inline-block
+
+.tooltip-header,
+.tooltip-body
+  width: 100%
+
+.tooltip-tip
+  +box-overlay($gray-light)
+  cursor: default
+  opacity: 0
+  pointer-events: none
+  position: absolute
+  transition: $transition-all
+  +rem(width, 300px)
+  z-index: 9
+
+  .tooltip:hover &
+    opacity: 1
+    pointer-events: auto
+
+  &:before
+    content: ""
+    +rem(height, $baseline-x-small)
+    position: absolute
+    +rem(width, 40px)
+
+.tooltip-header
+  +rem(border-bottom, 1px solid $gray-light)
+  +h-foxtrot
+  +rem(padding, ($baseline-step + 3) 20px)
+  text-align: center
+
+.tooltip-body
+  color: $gray-dark
+  +s-golf
+  +rem(padding, $baseline-small 20px)
+
+  p:not(:last-child),
+  .list-base li:not(:last-child)
+    +rem(margin-bottom, $baseline-step)
+
+// Positioning
+
+.tooltip-top-right,
+.tooltip-top,
+.tooltip-top-left
+  .tooltip-tip
+    bottom: 100%
+    +rem(margin-bottom, $baseline-x-small)
+
+    &:before
+      +rem(bottom, ($baseline-x-small * -1) - 1)
+
+.tooltip-bottom-right,
+.tooltip-bottom,
+.tooltip-bottom-left
+  .tooltip-tip
+    top: 100%
+    +rem(margin-top, $baseline-x-small)
+    
+    &:before
+      +rem(top, ($baseline-x-small * -1) - 1)
+
+.tooltip-top-right,
+.tooltip-bottom-right
+  .tooltip-tip:before
+    +rem(left, -1px)
+
+.tooltip-top .tooltip-tip,
+.tooltip-top .tooltip-tip:before,
+.tooltip-bottom .tooltip-tip,
+.tooltip-bottom .tooltip-tip:before
+  +center(x)
+
+.tooltip-top-left,
+.tooltip-bottom-left
+  .tooltip-tip
+    right: 0
+
+    &:before
+      +rem(right, -1px)

data/vendor/assets/stylesheets/rolodex/settings/_settings.sass

@@ -0,0 +1,33 @@
+// Settings
+// ========================================
+
+// Variables
+// ========================================
+
+@import variables/colors
+@import variables/layout
+@import variables/misc
+@import variables/typography
+
+// Component based
+
+@import variables/alerts
+@import variables/buttons
+@import variables/labels
+
+// Mixins
+// ========================================
+
+@import mixins/bump
+@import mixins/icons
+@import mixins/layout
+@import mixins/rems
+@import mixins/svg
+@import mixins/typography
+
+// Utilities
+// ========================================
+
+@import utilities/layout
+@import utilities/misc
+@import utilities/typography

data/vendor/assets/stylesheets/rolodex/settings/mixins/_bump.sass

@@ -0,0 +1,51 @@
+// Bump
+// ========================================
+
+// Bumper function
+
+@function bumper($value)
+
+  @if $value == "baselines-step"
+    @return $baseline-step
+
+  @if $value == "baselines-x-small"
+    @return $baseline-x-small
+
+  @if $value == "baselines-small"
+    @return $baseline-small
+
+  @if $value == "baselines"
+    @return $baseline-base
+
+  @if $value == "baselines-large"
+    @return $baseline-large
+
+  @if $value == "baselines-x-large"
+    @return $baseline-x-large
+  
+  @if $value == "baselines-xx-large"
+    @return $baseline-xx-large
+  
+  @if $value == "gutters"
+    @return $gutter
+  
+  @if $value == "gutters-half"
+    @return $gutter-half
+
+// Bump mixin
+
+=bump($property, $sides)
+  
+  @if length($sides) == 2
+    +rem(#{$property}, bumper(nth($sides, 1)) bumper(nth($sides, 2)))
+  
+  @else if str-slice($sides, 1, 9) == "baselines"
+    +rem(#{$property}-bottom, bumper($sides))
+    +rem(#{$property}-top,    bumper($sides))
+
+  @else if str-slice($sides, 1, 7) == "gutters"
+    +rem(#{$property}-left,  bumper($sides))
+    +rem(#{$property}-right, bumper($sides))
+
+  @else if $sides == "box"
+    +rem(#{$property}, $baseline-base $gutter)