rolodex 2.0.0

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

@@ -0,0 +1,112 @@
+// Alerts
+// ========================================
+
+.alert-title
+  display: block
+  font-weight: 600
+  +rem(margin-bottom, $baseline-step)
+
+.alert-signal
+  font-weight: 600
+  line-height: 1
+  +rem(padding-right, 5px)
+  text-transform: uppercase
+
+.alert-action
+  float: right
+
+// Kinds
+
+@each $alert in $alerts
+
+  $kind:        nth($alert, 1)
+  $icon:        nth($alert, 2)
+  $color:       nth($alert, 3)
+  $color-light: nth($alert, 4)
+  $color-dark:  nth($alert, 5)
+
+  .alert-banner-#{$kind},
+  .alert-inline-#{$kind}
+    background-repeat: no-repeat
+
+    a
+      text-decoration: underline
+
+  // Banner alerts
+
+  .alert-banner-#{$kind}
+    background-color: $color
+    +background-svg("alerts/icon-#{$icon}-light")
+    color: $white
+    +s-echo
+    +bump(padding, baselines-small gutters-half)
+    position: relative
+
+    .i-close
+      +rem(top, 23px)
+
+    a,
+    .alert-signal
+      color: $color-light
+
+    a:active,
+    a:hover
+      color: $white
+
+    .alert-signal
+      +s-delta
+
+    .alert-action
+      text-decoration: none
+
+    &.alert-dismissible
+      +rem(padding-right, $gutter-half * 3)
+
+  // Inline alerts
+
+  .alert-inline-#{$kind}
+    background-color: $color-light
+    +background-svg("alerts/icon-#{$icon}-dark")
+    +rem(border, 1px solid $color)
+    +rem(border-radius, $border-radius-base)
+    color: $black-offset
+    display: inline-block
+    +rem(padding, (($baseline-step * 1.5) - 1) ($gutter-half - 1))
+
+    a,
+    .alert-signal
+      color: $color
+
+    a:active,
+    a:hover
+      color: $color-dark
+
+// Banner alerts
+// ========================================
+
+@each $alert in $alerts-banner
+
+  $kind:   nth($alert, 1)
+  $width:  nth($alert, 2)
+  $height: nth($alert, 3)
+  $offset: nth($alert, 4)
+
+  .alert-banner-#{$kind}
+    +rem(background-position, $gutter-half $offset)
+    +rem(background-size, $width $height)
+    +rem(padding-left, $gutter + $width)
+
+// Inline alerts
+// ========================================
+
+@each $alert in $alerts-inline
+
+  $kind:   nth($alert, 1)
+  $width:  nth($alert, 2)
+  $height: nth($alert, 3)
+  $offset: nth($alert, 4)
+
+  .alert-inline-#{$kind}
+    +rem(background-position, 14px $offset)
+    +rem(background-size, $width $height)
+    +rem(padding-left, 24px + $width)

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

@@ -0,0 +1,103 @@
+// Buttons
+// ========================================
+
+.btn
+  +rem(border, 1px solid transparent)
+  +rem(border-radius, $border-radius-base)
+  color: $white
+  cursor: pointer
+  display: inline-block
+  font-family: $font-family-open-sans
+  +s-foxtrot
+  +rem(line-height, $baseline-base)
+  margin: 0
+  outline: 0
+  +rem(padding, 8px 14px)
+  text-align: center
+  text-decoration: none
+  transition: $transition-all
+  vertical-align: middle
+  white-space: nowrap
+
+  &:hover,
+  &:active
+    color: $white
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:focus,
+  &[disabled]:active
+    background-color: $gray-light
+    border-color: transparent
+    color: #eee
+    cursor: not-allowed
+
+.btn-large
+  +s-delta
+  +rem(padding, 16px $gutter $baseline-small $gutter)
+
+.btn-small
+  +rem(border-radius, $border-radius-mini)
+  +s-golf
+  +rem(padding, ($baseline-step - 1) 10px)
+
+// Kinds
+// ========================================
+
+@each $btn in $btns
+
+  $kind:      nth($btn, 1)
+  $bg-normal: nth($btn, 2)
+  $bg-hover:  nth($btn, 3)
+  $bg-active: nth($btn, 4)
+  
+  .btn-#{$kind}
+    background-color: $bg-normal
+
+    @if $kind == "boring"
+      border-color: $gray-light
+      color: $gray-dark
+
+    &:hover
+      background-color: $bg-hover
+
+    &:active
+      background-color: $bg-active
+
+.btn-boring:hover,
+.btn-boring:active
+  color: $gray-dark
+
+// Alternate & Overlay
+// ========================================
+
+.btn-alt,
+.btn-overlay
+  +rem(padding, 7px 13px)
+
+  &.btn-large
+    +rem(padding, 15px 28px 17px 28px)
+  
+  &.btn-small
+    +rem(padding, ($baseline-step - 2) 10px)
+
+// Alternate
+
+.btn-alt
+  border-color: $white
+  +rem(border-width, 2px)
+
+// Overlay
+
+.btn-overlay
+  background-color: rgba($black, .3)
+  border-color: rgba($white, .5)
+  +rem(border-width, 2px)
+  color: $white
+
+  &:hover,
+  &:focus
+    background-color: rgba($black, .5)
+
+  &:active
+    background-color: rgba($black, .7)

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

@@ -0,0 +1,121 @@
+// Dropdowns
+// ========================================
+
+// Functionality
+// ========================================
+
+[data-dropdown]
+  position: relative
+  
+[data-dropdown-content]
+  opacity: 0
+  pointer-events: none
+  position: absolute
+  transition: $transition-all
+  z-index: 4
+
+  [data-dropdown-open] &
+    opacity: 1
+    pointer-events: auto
+
+// Dropdown arrow
+// ========================================
+
+.dropdown,
+.dropdown-alt
+  display: inline-block
+  vertical-align: middle
+
+.dropdown:after
+  +i-caret
+  content: ""
+  cursor: pointer
+  position: absolute
+  +rem(right, $gutter-half)
+  +center(y)
+  z-index: 3
+
+.dropdown:hover:after,
+.dropdown[data-dropdown-open]:after,
+[data-dropdown-open] .dropdown:after
+  +rem(background-position, 0 -8px)
+
+// Dropdown toggle
+// ========================================
+
+.dropdown-toggle
+  background-color: $white
+  +rem(border, 1px solid $gray-light)
+  +rem(border-radius, $border-radius-base)
+  color: $black-offset
+  cursor: pointer
+  +rem(padding, ($baseline-step + 2) 36px ($baseline-step + 2) ($gutter-half - 1))
+  text-align: left
+
+  &:focus
+    outline: 0
+
+  [data-dropdown-open] &
+    border-color: $blue
+
+  .form-row &
+    border-bottom-left-radius: 0
+    border-top-left-radius: 0
+
+.dropdown-toggle-solo
+  +rem(padding, 20px 26px 20px 14px)
+
+// Menu
+// ========================================
+
+.dropdown-menu
+  +box-overlay
+  +rem(margin-top, $baseline-x-small)
+  +rem(min-width, 140px)
+  right: 0
+  top: 100%
+
+  .dropdown-right &
+    left: 0
+    right: auto
+
+.dropdown-menu-item
+
+  &:not(:last-child)
+    +rem(border-bottom, 1px solid $gray-light)
+
+  a
+    color: $black-offset
+    display: block
+    +rem(padding, 10px 22px)
+
+    &:hover,
+    &:focus
+      color: $blue
+
+// Within a form row
+// ========================================
+
+.form-row
+
+  [data-dropdown]
+    width: 100%
+    
+    .form-control:first-child,
+    .form-area:first-child
+      border-bottom-left-radius: 0
+      border-top-left-radius: 0
+
+    &:not(:first-child):not(:last-child)
+      .form-control,
+      .form-area
+        border-radius: 0
+
+  .dropdown-toggle
+    +rem(min-height, $baseline-step * 7)
+
+// Error state
+// ========================================
+
+.form-error .dropdown-toggle
+  border-color: $red

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

@@ -0,0 +1,326 @@
+// Forms
+// ========================================
+
+// Resets
+// ========================================
+
+fieldset
+  border: 0
+  margin: 0
+  min-width: 0
+  padding: 0
+  width: 100%
+
+legend,
+button::-moz-focus-inner,
+input::-moz-focus-inner
+  border: 0
+  padding: 0
+
+button[disabled],
+html input[disabled]
+  cursor: not-allowed
+
+input[type="checkbox"],
+input[type="radio"]
+  box-sizing: border-box
+  padding: 0
+
+input[type="search"]
+  -webkit-appearance: textfield
+  box-sizing: border-box
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration
+  -webkit-appearance: none
+
+// Default styles
+// ========================================
+
+button,
+input,
+optgroup,
+select,
+textarea
+  color: inherit
+  font: inherit
+  margin: 0
+
+.form-group
+  +rem(margin-bottom, $baseline-base)
+  position: relative
+
+.form-label
+  display: inline-block
+  font-weight: 600
+  +rem(margin-bottom, $baseline-step)
+
+.form-subtle,
+.form-claim
+  +s-golf
+
+.form-subtle
+  color: $gray
+  font-weight: 400
+
+.form-claim
+  float: right
+  +rem(line-height, $baseline-base)
+  transition: $transition-all
+
+// Text inputs and textareas
+
+.form-control,
+.form-area,
+.form-placeholder
+  background-color: $white
+  background-image: none
+  +rem(border, 1px solid $gray-light)
+  +rem(border-radius, $border-radius-base)
+  color: $black-offset
+  display: block
+  +rem(padding, ($baseline-step + 2) ($gutter-half - 1))
+  position: relative
+  transition: border .15s ease, background-image .15s ease
+  width: 100%
+
+  &:focus
+    border-color: $blue
+    outline: 0
+    z-index: 2
+
+  &[disabled],
+  &[readonly],
+  [disabled] &
+    background-color: $white-offset
+    color: $gray-light
+    cursor: not-allowed
+
+  &:-ms-input-placeholder,
+  &:-moz-placeholder,
+  &::-webkit-input-placeholder
+    color: $gray
+
+  &::-moz-placeholder
+    opacity: 1
+
+  &[type='search']
+    +background-svg("forms/icon-search", 15px)
+    background-position: 14px 50%
+    background-repeat: no-repeat
+    +rem(padding-left, 38px)
+
+.form-area
+  +rem(min-height, $baseline-large)
+
+.form-date
+  +background-svg("forms/icon-calendar", 20px 21px)
+  background-position: right 14px top 50% // +rem doesn't work with 50%
+  background-repeat: no-repeat
+  +rem(padding-right, 48px)
+
+.form-placeholder
+  background-color: $white-offset
+
+.form-placeholder-link
+  float: right
+  +s-golf
+  +rem(line-height, $baseline-base)
+
+// Checkboxes and radio buttons
+
+.form-choice
+  +rem(padding-left, 20px)
+
+  input[type="radio"],
+  input[type="checkbox"]
+    float: left
+    +rem(margin-top, $baseline-step)
+    +rem(margin-left, -20px)
+
+  label[disabled]
+    color: $gray
+    cursor: not-allowed
+
+// Custom radio buttons
+
+.form-radio
+  &:not(:last-of-type)
+    +rem(margin-bottom, $baseline-step / 2)
+
+  label
+    cursor: pointer
+    +rem(padding-left, 6px)
+    position: relative
+
+    &:before
+      +background-svg("forms/radio-button", 20px 40px)
+      content: ""
+      +rem(height, 20px)
+      +rem(left, -20px)
+      position: absolute
+      top: 0
+      +rem(width, 20px)
+
+.form-radio-active:before
+  +rem(background-position, 0 -20px)
+
+// Horizontal styles
+// ========================================
+
+.form-row
+  border-collapse: separate
+  display: table
+  width: 100%
+
+  .form-label,
+  .form-btn
+    width: 1%
+
+  .form-label,
+  .form-control,
+  .form-area,
+  .form-btn
+    display: table-cell
+    vertical-align: top
+
+  .form-label,
+  .form-btn
+    position: relative
+
+  .form-label
+    background-color: $white-offset
+    +rem(border, 1px solid $gray-light)
+    border-right: 0
+    +rem(border-radius, $border-radius-base 0 0 $border-radius-base)
+    color: $gray-dark
+    +rem(padding, ($baseline-step + 2) ($gutter-half - 1))
+    white-space: nowrap
+
+    &[disabled]
+      color: $gray
+      cursor: not-allowed
+
+  > .form-control,
+  > .form-area,
+
+    &:first-child
+      border-bottom-right-radius: 0
+      border-top-right-radius: 0
+
+    &:last-child
+      border-bottom-left-radius: 0
+      border-top-left-radius: 0
+
+    &:not(:first-child):not(:last-child)
+      border-radius: 0
+
+  .form-btn:last-child
+    &:hover,
+    &:focus,
+    &:active
+      z-index: 2
+
+    .btn
+      border-bottom-left-radius: 0
+      border-top-left-radius: 0
+      +rem(margin-left, -1px)
+
+// Help blocks
+// ========================================
+
+.form-help
+  color: $gray
+  +s-golf
+  font-weight: 400
+  +rem(margin, $baseline-step $gutter-half 0 $gutter-half)
+
+  .form-choice &
+    margin-left: 0
+
+.form-help-title
+  color: $gray-dark
+  display: inline-block
+  +bump(margin, baselines-step)
+
+.form-help-suggestions
+
+  li
+    +rem(line-height, $baseline-base)
+    +rem(padding-left, 18px)
+    position: relative
+
+  .i-suggest-tick,
+  .form-help-bullet
+    position: absolute
+    left: 0
+    transition: $transition-all
+
+  .i-suggest-tick
+    opacity: 0
+    +rem(top, 7px)
+
+.form-help-bullet
+  display: inline-block
+  +s-delta
+  text-align: center
+  +rem(width, 12px)
+
+.form-help-success
+
+  .i-suggest-tick
+    opacity: 1
+
+  .form-help-bullet
+    opacity: 0
+
+// Validation
+// ========================================
+
+// Errors
+
+.form-error
+
+  &.form-control,
+  &.form-area
+    border-color: $red
+    z-index: 1
+
+  &.form-choice
+    color: $red
+
+// Icons
+
+.form-validating,
+.form-valid,
+.form-invalid
+  +rem(background-position, right ($gutter-half - 1) top $baseline-x-small)
+  background-repeat: no-repeat
+  +rem(background-size, 16px)
+  +rem(padding-right, 44px)
+
+.form-validating
+  background-image: image-url("forms/icon-validating.gif")
+
+.form-valid
+  +background-svg("icons/icon-valid")
+
+.form-invalid,
+.form-invalid:focus
+  +background-svg("icons/icon-invalid")
+  border-color: $red
+
+// Shake
+
+.form-submit-invalid
+  animation: shake 1s ease both
+
+@keyframes shake
+  0%, 100%
+    transform: translateX(0)
+
+  10%, 30%, 50%, 70%, 90%
+    +rem(transform, translateX(-5px))
+
+  20%, 40%, 60%, 80%
+    +rem(transform, translateX(5px))