shipyard-framework 0.5.76 → 0.5.77

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e7da438533f9f14d70f2fefa00906c943205a5bb4712ff3d024a72665731870b
-  data.tar.gz: 79abd43236a383aab655126c6f12b10bb4d43af1b13c2acb8e5df88420ab8773
+  metadata.gz: 80cffda5e33bbe3d6c80ca6a5acb939d8568d4d546d00f020b26db2cc6137140
+  data.tar.gz: afcde834ee452ebbfc25eae7599acbb8c9ba8fee9b0ccbb7f2e1105d5fc460db
 SHA512:
-  metadata.gz: 20f19d29f59e51d42d30ceb5a53cc60c55d657e5abd13e702114698bf5d93c0e115b9458ba4d164cb16dd64782dea8ef916e36208241206165e59b3061293142
-  data.tar.gz: 2f23bcb9b6d3b711142c9476d5f5e3ddecd8c06fcc5400c384b85b4bf8a3afa753dc5d50b750d5aea3bc623ed8335210279b861dd84490a5f5fecff817c4745f
+  metadata.gz: 3159caf0e2c90d4cd91b17006d097a1463de658873e4278957a1d9ad6c8263890cc9739926c089d3ee6343ef0ed0964ffd8ed342d38e77fbbacc1852a1e4c0d2
+  data.tar.gz: be3499ea8fc2df5db6b73d52c9082cb050dffcbb015552e31e843902ecff6ce13eda92c300eb3bf38f5c96a70549a74657c20a3e5d5826fbfd74c2d8c8effda5

data/.gitignore

@@ -8,4 +8,5 @@
 /spec/reports/
 /tmp/
 shipyard-*.gem
+.sass-cache
 .asset-cache

data/.travis.yml

@@ -8,9 +8,11 @@ install:
 - "./ci/setup"
 before_script:
 - chmod +x ci/jekyll
+- chmod +x ci/sass_lint
 jobs:
   include:
   # - script: "./ci/jekyll"
+  - script: "./ci/sass_lint"
   - script: bundle exec rspec
   - stage: Deploy
     script: skip

data/assets/icons/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
+  <polyline vector-effect="non-scaling-stroke" points="0 4 3 7 8 0" />
+</svg>

data/assets/stylesheets/_shipyard.sass

@@ -1,3 +1,3 @@
-@import shipyard/core
-@import shipyard/components
-@import shipyard/utilities
+@import "shipyard/core"
+@import "shipyard/components"
+@import "shipyard/utilities"

data/assets/stylesheets/shipyard/_components.sass

@@ -1,16 +1,22 @@
-@import shipyard/components/code
-@import shipyard/components/buttons
-@import shipyard/components/icons
-@import shipyard/components/alerts
-@import shipyard/components/notes
-@import shipyard/components/boxes
-@import shipyard/components/forms
-@import shipyard/components/form-errors
-@import shipyard/components/input-radio-checkbox
-@import shipyard/components/input-switch
-@import shipyard/components/empty
-@import shipyard/components/modals
-@import shipyard/components/tooltips
-@import shipyard/components/hamburger
-@import shipyard/components/tables
-@import shipyard/components/horizontal-rules
+@import "components/code"
+@import "components/buttons"
+@import "components/icons"
+@import "components/alerts"
+@import "components/notes"
+@import "components/boxes"
+@import "components/forms"
+@import "components/form-errors"
+@import "components/input"
+@import "components/input-text"
+@import "components/input-select"
+@import "components/input-radio-checkbox"
+@import "components/input-switch"
+@import "components/input-sizes"
+@import "components/input-required"
+@import "components/input-readonly"
+@import "components/empty"
+@import "components/modals"
+@import "components/tooltips"
+@import "components/hamburger"
+@import "components/tables"
+@import "components/horizontal-rules"

data/assets/stylesheets/shipyard/_core.sass

@@ -1,6 +1,6 @@
-@import shipyard/functions
-@import shipyard/mixins
-@import shipyard/variables
-@import shipyard/core/animations
-@import shipyard/core/reset
-@import shipyard/core/typography
+@import "functions"
+@import "mixins"
+@import "variables"
+@import "core/animations"
+@import "core/reset"
+@import "core/typography"

data/assets/stylesheets/shipyard/_functions.sass

@@ -1,2 +1,3 @@
-@import shipyard/functions/map-merge-options
-@import shipyard/functions/color
+@import "functions/map-merge-options"
+@import "functions/color"
+@import "functions/text-color"

data/assets/stylesheets/shipyard/_mixins.sass

@@ -1,7 +1,7 @@
-@import shipyard/mixins/prefixed
-@import shipyard/mixins/box-model
-@import shipyard/mixins/selectors
-@import shipyard/mixins/responsive
-@import shipyard/mixins/components
-@import shipyard/mixins/positioning
-@import shipyard/mixins/icons
+@import "mixins/prefixed"
+@import "mixins/box-model"
+@import "mixins/selectors"
+@import "mixins/responsive"
+@import "mixins/components"
+@import "mixins/positioning"
+@import "mixins/icons"

data/assets/stylesheets/shipyard/_utilities.sass

@@ -1,8 +1,8 @@
-@import shipyard/utilities/grid
-@import shipyard/utilities/colors
-@import shipyard/utilities/opacity
-@import shipyard/utilities/display
-@import shipyard/utilities/positioning
-@import shipyard/utilities/typography
-@import shipyard/utilities/margin-padding
-@import shipyard/utilities/border-radius
+@import "utilities/grid"
+@import "utilities/colors"
+@import "utilities/opacity"
+@import "utilities/display"
+@import "utilities/positioning"
+@import "utilities/typography"
+@import "utilities/margin-padding"
+@import "utilities/border-radius"

data/assets/stylesheets/shipyard/_variables.sass

@@ -1,6 +1,6 @@
-@import shipyard/variables/colors
-@import shipyard/variables/color_utilities
-@import shipyard/variables/typography
-@import shipyard/variables/grid
-@import shipyard/variables/misc
-@import shipyard/variables/components
+@import "variables/colors"
+@import "variables/color_utilities"
+@import "variables/typography"
+@import "variables/grid"
+@import "variables/misc"
+@import "variables/components"

data/assets/stylesheets/shipyard/components/_buttons.sass

@@ -119,7 +119,7 @@
 
   &-secondary
     +btn-color(transparent, $text-color-light, darken($gray-lightest, 7%))
-    +btn-hover(transparent, darken($text-color-light, 15%), darken($gray-lightest, 17%))
+    +btn-hover(transparent, $text-color-dark, darken($gray-lightest, 17%))
     &.btn-loading
       &, &:hover, &:active
         &::after
@@ -159,7 +159,7 @@
       +btn-color($green-dark, #fff)
 
   &-disabled
-    cursor: not-allowed
+    user-select: none
     pointer-events: none
     &, &:hover, &:focus
       +btn-color(lighten($gray-lighter, 1%), $text-color-lightest)
@@ -175,7 +175,8 @@
 
   &-loading
     &, &:active, &:hover
-      cursor: default
+      user-select: none
+      pointer-events: none
       color: transparent !important
       &::after
         content: ''

data/assets/stylesheets/shipyard/components/_forms.sass

@@ -9,142 +9,15 @@
     font-weight: $medium
 
 +component('input')
-  outline: none
-  border: 2px solid $border-color
-  transition: background-color 300ms ease, border-color 300ms ease, opacity 300ms ease
-  background-clip: padding-box
-  +appearance(none)
-  &:disabled
-    opacity: .5
-    color: $text-color-light
-  &:hover, &:focus, .btn:hover &
-    &:not(:disabled):not(:read-only)
-      border-color: $border-color-dark
-
   &-group
     +clearfix
     padding: 15px 0
+    position: relative
     &-border
       padding-bottom: 30px
       margin-bottom: 15px
       border-bottom: 2px solid $border-color-light
 
-  &-select
-    display: block
-    width: 100%
-    background-color: #fff
-    height: 50px
-    font: $font
-    font-weight: $medium
-    font-size: 16px
-    color: $text-color-lighter
-    outline: none
-    +border-radius
-    +appearance(none)
-    +respond-to(padding, (x0: 0 15px, x1: 0 20px))
-    +when('error')
-      border-color: $red
-    &:hover, &:focus
-      +when('error')
-        border-color: darken($red, 15%)
-    &-container
-      position: relative
-      &::after
-        display: block
-        position: absolute
-        top: 50%
-        right: 18px
-        content: " "
-        text-align: center
-        font-weight: $bold
-        margin-top: -3px
-        pointer-events: none
-        transition: background-color 300ms ease
-        +width-height(10px, 6px)
-        +icon('arrows/down', $border-color)
-        +when('error')
-          +icon-color($red)
-      &:hover
-        &::after
-          +icon-color($border-color-dark)
-          +when('error')
-            +icon-color(darken($red, 15%))
-    &-chosen
-      color: $text-color
-      font-weight: $medium
-  &-option
-    &-placeholder
-      color: $text-color-lighter
-
-  &-text
-    font: $font
-    color: $text-color
-    background-color: #fff
-    position: relative
-    height: 50px
-    font-size: 16px
-    outline: none
-    +border-radius
-    +respond-to(padding, (x0: 10px 15px, x1: 10px 20px))
-    +placeholder
-      color: $text-color-lightest
-      font-weight: $normal
-    +when('error')
-      border-color: $red
-    &:hover, &:focus
-      +when('error')
-        border-color: darken($red, 15%)
-    &-connect
-      &-top,
-      &-middle,
-      &-bottom
-        background-clip: initial
-        border-color: rgba($bg-to-border, .37)
-        &:hover, &:focus
-          z-index: 1
-          border-color: rgba($bg-to-border, .50)
-      &-top
-        border-radius: 5px 5px 0 0
-      &-middle
-        margin: -2px 0 0
-        border-radius: 0
-      &-bottom
-        margin: -2px 0 0
-        border-radius: 0 0 5px 5px
-
-  &-required
-    position: relative
-    &::before,
-    &::after
-      position: absolute
-    &::before
-      z-index: 1
-      content: "*"
-      +sub-component-styles(required-asterisk)
-      +when('error')
-        +sub-component-styles(required-asterisk-error)
-    &::after
-      content: ""
-      display: block
-      border-style: solid
-      border-radius: 0 3px 0 0
-      border-color: transparent
-      +sub-component-styles(required-corner)
-      +when('error')
-        +sub-component-styles(required-corner-error)
-
-  // Input: Read-Only State
-  &-readonly
-    background-color: $gray-lighter
-
-  &-full
-    width: 100%
-
-  // Input Sizes
-  @each $size, $value in (sm: 40px, md: 50px, lg: 100px, xl: 200px)
-    &-#{$size}
-      height: $value
-
   &-description
     font-size: 14px
     margin: 5px 0 0

data/assets/stylesheets/shipyard/components/_horizontal-rules.sass

@@ -1,6 +1,8 @@
 +component('hr')
   height: 0
   border: 0 solid $border-color-lighter
+  overflow: visible
+  position: relative
   border-width: 2px 0 0
   +respond-to(margin, (x0: 20px 0, x1: 30px 0))
   &-dark

data/assets/stylesheets/shipyard/components/_icons.sass

@@ -50,6 +50,10 @@ svg, path, circle, polyline
     @extend .icon-outline
     +width-height(10px, 6px)
 
+  &-check
+    @extend .icon-outline
+    +width-height(8px)
+
   &-plus
     @extend .icon-outline
     +width-height(6px)

data/assets/stylesheets/shipyard/components/_input-radio-checkbox.sass

@@ -7,9 +7,9 @@
       margin-right: 25px
 
   &-label
-    display: inline-block
     cursor: pointer
     font-weight: $medium
+    display: inline-block
     transition: color 300ms ease, opacity 300ms ease
     +when('item')
       padding-left: 28px
@@ -19,13 +19,15 @@
       color: $blue-dark
     +when('radio:checked ~, checkbox:checked ~')
       color: $green-dark
+    +when('radio-caution:checked ~, checkbox-caution:checked ~')
+      color: $red-dark
 
     &-inverse
       +extend('label')
-      opacity: 0.65
-      &, &:hover
+      color: #fff
+      opacity: .65
+      &:hover, .input:hover ~ &
         color: #fff
-      &:hover
         opacity: 1
       +when('radio:checked ~, checkbox:checked ~')
         opacity: 1
@@ -33,9 +35,10 @@
 
   &-checkbox, &-radio
     top: -1px
+    cursor: pointer
     position: relative
     vertical-align: middle
-    cursor: pointer
+    background-clip: initial
     +width-height(16px)
     +when('item')
       left: 0
@@ -61,20 +64,20 @@
         background-color: #fff
         transition: opacity 300ms ease, background-color 300ms ease
 
-    // Radio: Inverse
+    &-caution
+      &:checked
+        +btn-color($red)
+
+    // Input: Inverse Type
     &-inverse
-      opacity: .25
-      &, &:hover, &:checked
-        &, .btn:hover &
-          border-color: #fff
-      &:hover, &:checked, .btn:hover &
-        opacity: 1
+      &, .btn:hover &
+        +extend('inverse')
       &:checked
         &, .btn:hover &
-          background: #fff
-          border-color: #fff
+          opacity: 1
+          +btn-color(#fff)
           &::after
-            background: $green-dark
+            +icon-color($green-dark)
 
   // Radio Button
   &-radio

data/assets/stylesheets/shipyard/components/_input-readonly.sass

@@ -0,0 +1,4 @@
++component('input-readonly')
+  background-color: $gray-lighter
+  &, &:focus, &:hover
+    border-color: $border-color

data/assets/stylesheets/shipyard/components/_input-required.sass

@@ -0,0 +1,21 @@
++component('input')
+  &-required
+    position: relative
+    &::before,
+    &::after
+      position: absolute
+    &::before
+      z-index: 1
+      content: "*"
+      +sub-component-styles(required-asterisk)
+      +when('error')
+        +sub-component-styles(required-asterisk-error)
+    &::after
+      content: ""
+      display: block
+      border-style: solid
+      border-radius: 0 3px 0 0
+      border-color: transparent
+      +sub-component-styles(required-corner)
+      +when('error')
+        +sub-component-styles(required-corner-error)

data/assets/stylesheets/shipyard/components/_input-select.sass

@@ -0,0 +1,54 @@
++component('input')
+  &-select
+    display: block
+    width: 100%
+    background-color: #fff
+    height: 50px
+    font: $font
+    font-weight: $medium
+    font-size: 16px
+    color: $text-color-lighter
+    outline: none
+    cursor: pointer
+    +border-radius
+    +appearance(none)
+    +respond-to(padding, (x0: 0 15px, x1: 0 20px))
+    +when('error')
+      border-color: $red
+    &:hover, &:focus
+      +when('error')
+        border-color: darken($red, 15%)
+
+    &-container
+      position: relative
+      &::after
+        display: block
+        position: absolute
+        top: 50%
+        right: 18px
+        content: " "
+        text-align: center
+        font-weight: $bold
+        margin-top: -3px
+        pointer-events: none
+        transition: background-color 300ms ease
+        +width-height(10px, 6px)
+        +icon('arrows/down', $border-color)
+        +when('error')
+          +icon-color($red)
+      &:hover
+        &::after
+          +icon-color($border-color-dark)
+          +when('error')
+            +icon-color(darken($red, 15%))
+      &-disabled
+        &, &:hover
+          &::after
+            +icon-color($border-color)
+
+    &-chosen
+      color: $text-color-normal
+      font-weight: $medium
+
+  &-option-placeholder
+    color: $text-color-lighter

data/assets/stylesheets/shipyard/components/_input-sizes.sass

@@ -0,0 +1,4 @@
++component('input')
+  @each $size, $value in (sm: 40px, md: 50px, lg: 100px, xl: 200px)
+    &-#{$size}
+      height: $value

data/assets/stylesheets/shipyard/components/_input-text.sass

@@ -0,0 +1,39 @@
++component('input')
+  &-text
+    font: $font
+    color: $text-color-normal
+    background-color: #fff
+    position: relative
+    font-size: 16px
+    font-weight: $medium
+    outline: none
+    width: 100%
+    +width-height(100%, 50px)
+    +border-radius
+    +respond-to(padding, (x0: 10px 15px, x1: 10px 20px))
+    +placeholder
+      color: $text-color-lightest
+      font-weight: $normal
+    +when('error')
+      border-color: $red
+    &:hover, &:focus
+      +when('error')
+        border-color: darken($red, 15%)
+
+    &-connect
+      &-top,
+      &-middle,
+      &-bottom
+        background-clip: initial
+        border-color: rgba($bg-to-border, .37)
+        &:hover, &:focus
+          z-index: 1
+          border-color: rgba($bg-to-border, .50)
+      &-top
+        border-radius: 5px 5px 0 0
+      &-middle
+        margin: -2px 0 0
+        border-radius: 0
+      &-bottom
+        margin: -2px 0 0
+        border-radius: 0 0 5px 5px

data/assets/stylesheets/shipyard/components/_input.sass

@@ -0,0 +1,23 @@
++component('input')
+  outline: none
+  border: 2px solid $border-color
+  transition: background-color 300ms ease, border-color 300ms ease, opacity 300ms ease, color 300ms ease
+  background-clip: padding-box
+  +appearance(none)
+  &:hover, &:focus, .btn:hover &
+    border-color: $border-color-dark
+  &:disabled
+    &, &:hover
+      opacity: .5
+      user-select: none
+      pointer-events: none
+      color: $text-color-light
+      border-color: $border-color
+
+  &-inverse
+    &, &:focus
+      opacity: .25
+    &, &:focus, &:hover
+      border-color: #fff
+    &:hover
+      opacity: .5

data/assets/stylesheets/shipyard/functions/_text-color.sass

@@ -0,0 +1,3 @@
+@function text-color($percentage)
+  $text-color-base: $text-color-base !global
+  @return rgba($text-color-base, $percentage)

data/assets/stylesheets/shipyard/utilities/_border-radius.sass

@@ -3,19 +3,35 @@
     +border-radius
     &-0
       border-radius: 0
+    &-xs
+      border-radius: 2px
+    &-sm
+      border-radius: 3px
     &-top
-      border-radius: $border-radius $border-radius 0 0
+      border-bottom-left-radius: 0
+      border-bottom-right-radius: 0
     &-bottom
-      border-radius: 0 0 $border-radius $border-radius
+      border-top-left-radius: 0
+      border-top-right-radius: 0
     &-left
-      border-radius: $border-radius 0 0 $border-radius
+      border-top-right-radius: 0
+      border-bottom-right-radius: 0
     &-right
-      border-radius: 0 $border-radius $border-radius 0
+      border-top-left-radius: 0
+      border-bottom-left-radius: 0
     &-top-left
-      border-radius: $border-radius 0 0 0
+      border-top-right-radius: 0
+      border-bottom-left-radius: 0
+      border-bottom-right-radius: 0
     &-top-right
-      border-radius: 0 $border-radius 0 0
+      border-top-left-radius: 0
+      border-bottom-left-radius: 0
+      border-bottom-right-radius: 0
     &-bottom-left
-      border-radius: 0 0 0 $border-radius
+      border-top-left-radius: 0
+      border-top-right-radius: 0
+      border-bottom-right-radius: 0
     &-bottom-right
-      border-radius: 0 0 $border-radius 0
+      border-top-left-radius: 0
+      border-top-right-radius: 0
+      border-bottom-left-radius: 0

data/assets/stylesheets/shipyard/utilities/_positioning.sass

@@ -14,3 +14,8 @@
   top: -1px
   position: relative
   vertical-align: middle
+
+@each $value in (static, relative, absolute, fixed)
+  .#{$value}
+    +all-media-sizes
+      position: $value