shipyard-framework 0.2.3 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 45f6d633b4e9001ec75ee08e96b1bca97511658c
-  data.tar.gz: 2f983d2161dd39bedeec16d6ce9bde5a9501ebac
+  metadata.gz: 95b094ed0401e383a07cd1d3b9d08c6f34edf4d2
+  data.tar.gz: 233a524121b09f817291eaac8e80afef63259178
 SHA512:
-  metadata.gz: d37c0b970ac8d04ade4f96b8f8152b27191f08593b771216b267df468be23468e11a24052d592e51d7d522adfd03ad853e1292d284c49bd21c0d81c7e9b35b01
-  data.tar.gz: b4af5e046fa932dcdc648e23a7340ad918a13723dbf801bdc43be05f54c1e88dc08777725df6a0192cebef76562a607c90f13cc8cf29057219b1785a726f7db0
+  metadata.gz: cfb000ccfbf676cc85d7aa70f134c011684c64975cc5ff95013f5b598cd9e8778efea398e5fb97fce8bfbf84d6e2283a050d7a18c778f9bf2add42e54ab1c33b
+  data.tar.gz: 939c141cc589e666e9079c2b43580ac0aa7f727d1742b4196466b07cadf998c1460c2a42d9f47a5c426a95fa86fa7335b1924e4478145f1654fe986506aafe6d

data/README.md

@@ -29,7 +29,7 @@ The add this line to your application's CSS file(s):
 If you're using Jekyll, make sure you add the following the code in your `_config.yml` file:
 ```yml
 plugins:
-  - shipyard
+  - shipyard-framework
 ```
 
 ## Usage

data/assets/stylesheets/_shipyard.sass

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

data/assets/stylesheets/shipyard/_components.sass

@@ -3,5 +3,8 @@
 @import shipyard/components/alerts
 @import shipyard/components/boxes
 @import shipyard/components/forms
+@import shipyard/components/input-switch
 @import shipyard/components/empty
 @import shipyard/components/modals
+@import shipyard/components/tooltips
+@import shipyard/components/hamburger

data/assets/stylesheets/shipyard/_core.sass

@@ -10,3 +10,8 @@
 @import shipyard/mixins/components
 @import shipyard/mixins/positioning
 @import shipyard/mixins/prefixed
+
+// Shipyard: Core Utilities
+@import shipyard/utilities/animations
+@import shipyard/utilities/reset
+@import shipyard/utilities/colors

data/assets/stylesheets/shipyard/_utilities.sass

@@ -1,5 +1,3 @@
-@import shipyard/utilities/animations
-@import shipyard/utilities/reset
 @import shipyard/utilities/type
 @import shipyard/utilities/grid
 @import shipyard/utilities/positioning

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

@@ -0,0 +1,51 @@
+// --------------------------------------------------
+// Hamburger "Icon"
+// --------------------------------------------------
++component('hamburger')
+  top: 25px
+  left: 5px
+  outline: none
+  .hamburger-button-clicked &
+    background: transparent
+
+  &, &:after, &:before
+    border-radius: 4px
+    background: $gray-light
+    +width-height(30px, 2px)
+    position: absolute
+    margin-top: -1px
+    transition: background-color 300ms ease, transform 300ms ease, top 300ms 200ms ease, bottom 300ms 200ms ease
+    .hamburger-button-clicked &
+      transition: background-color 300ms ease, transform 300ms 200ms ease, top 300ms ease, bottom 300ms ease
+  &:before, &:after
+    left: 0
+    content: " "
+  &:before
+    +respond-to(top, (x0: -7px, x1: -8px))
+    .hamburger-button-clicked &
+      top: 0
+      +rotate(45deg)
+  &:after
+    +respond-to(bottom, (x0: -8px, x1: -9px))
+    .hamburger-button-clicked &
+      bottom: 0
+      +rotate(-45deg)
+
+  // --------------------------------------------------
+  // Hamburger: Button
+  // --------------------------------------------------
+  &-button
+    cursor: pointer
+    position: absolute
+    +width-height(36px)
+    padding: 0
+    text-indent: -1000px
+    overflow: hidden
+    left: -3px
+    top: -17px
+
+  // --------------------------------------------------
+  // Page: Prevent Scrolling When Clicked
+  // --------------------------------------------------
+  &-button-clicked
+    +respond-to(overflow, (x0: hidden, x1: auto))

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

@@ -0,0 +1,87 @@
++component('hero')
+  $hero-height: (x0: 120px, x1: 180px, x2: 190px)
+  overflow: hidden
+  text-align: center
+  position: relative
+  background: $gray-darkest
+  transition: height 500ms ease, padding 500ms ease
+  +respond-to(height, merge-and-add($hero-height, $header-height))
+  +respond-to(padding-top, $header-height)
+  +with-heroku-nav(margin-top, (x1: $heroku-nav-height))
+
+  &-container
+    height: 100%
+    position: relative
+    z-index: 1
+
+  &-title
+    margin: 0
+    color: #fff
+    width: 100%
+    overflow: hidden
+    line-height: 1.275
+    white-space: nowrap
+    text-overflow: ellipsis
+    +responsive-padding(left right, $divisor: 1)
+    +respond-to(font-size, (x0: 20px, x1: 24px, x2: 26px))
+    &-margin
+      margin: 0 0 10px
+    &-x0-absolute
+      +breakpoint-x0
+        top: 50%
+        left: 50%
+        position: absolute
+        transform: translate(-50%, -50%)
+    &-link
+      color: inherit
+      &:hover
+        color: lighten($blue-light, 5%)
+
+  &-chart
+    position: absolute
+    right: 0
+    bottom: 0
+    height: auto !important
+    &-container
+      position: absolute
+      height: 100%
+      +responsive-right
+    &-bar
+      stroke: lighten($gray-darkest, 7%)
+      stroke-width: 6px
+      stroke-linecap: round
+      stroke-linejoin: round
+      stroke-dasharray: 0, 10px
+
+  &-content
+    position: relative
+    +width-height(100%)
+    +responsive-padding(left right, $divisor: 1)
+    &-auto
+      @extend .hero-content
+      +breakpoint-x1
+        height: auto
+
+  &-cta
+    +breakpoint-x0
+      position: fixed
+      top: 10px
+      right: 10px
+      z-index: 1000
+      border: none
+      &, &:hover
+        background: none
+    +respond-to(margin, (x1: 10px 5px))
+
+    &-icon
+      stroke: $gray-light
+      +when('cta:hover')
+        stroke: #fff
+      +breakpoint-x0
+        +width-height(20px)
+        +center
+      +breakpoint-x1
+        +width-height(12px)
+        margin-right: 5px
+        position: relative
+        top: 2px

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

@@ -29,7 +29,7 @@ svg, path, circle, polyline
       stroke-linecap: round
       stroke-linejoin: round
     &-inverse
-      stroke: #fff !important
+      stroke: #fff
 
   &-slack,
   &-github,
@@ -69,7 +69,8 @@ svg, path, circle, polyline
       border-color: darken($gray, 12%)
 
     &-inverse
-      border-color: #fff !important
+      &, a:hover &
+        border-color: #fff
 
   &-inverse
     fill: #fff

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

@@ -0,0 +1,33 @@
+$sizes: (sm: 18px, md: 20px)
+
++component('input-switch')
+  position: relative
+  background: $gray-light
+  display: block
+  border-radius: 50px
+  outline: none
+  transition: background-color 300ms ease
+  &::before
+    content: ''
+    display: block
+    position: absolute
+    top: 2px
+    left: 2px
+    background: #fff
+    border-radius: 50%
+    transition: transform 300ms ease
+
+  @each $name, $size in $sizes
+    &-#{$name}
+      +extend
+      +width-height($size * 2 - 4px, $size)
+      &::before
+        +width-height($size - 4px)
+
+  &-false
+    background: $red
+
+  &-true
+    background: $green
+    &::before
+      transform: translatex(100%)

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

@@ -0,0 +1,44 @@
++component('tooltip')
+  overflow: visible
+  position: relative
+  &:before
+    content: ''
+    top: -7px
+    +width-height(0px)
+    border-radius: 0 0 3px 0
+    transform: rotate(45deg) translatey(50%)
+    transform-origin: center center
+    border: 4px solid transparent
+    border-right-color: $gray-dark
+    border-bottom-color: $gray-dark
+    margin-top: 0
+  &:after
+    top: -34px
+    color: #fff
+    width: auto
+    line-height: 28px
+    padding: 0 10px
+    text-align: center
+    border-radius: 3px
+    content: attr(tooltip)
+    background: $gray-dark
+    font-size: $font-size-xxs
+    font-weight: $bold
+    transform: translate(-50%, 6px)
+    white-space: nowrap
+  &::after,
+  &::before
+    left: 50%
+    opacity: 0
+    position: absolute
+    visibility: hidden
+    transition: opacity 300ms ease 300ms, transform 300ms ease 300ms, visibility 0ms ease 500ms
+  &:hover::after,
+  &:hover::before
+    opacity: 1
+    transition-delay: 500ms
+    +respond-to(visibility, (x1: visible))
+  &:hover::after
+    transform: translate(-50%, 0)
+  &:hover::before
+    transform: rotate(45deg) translate(-5px, 0)

data/assets/stylesheets/shipyard/functions/_color.sass

@@ -1,4 +1,5 @@
 @function color($name, $shade: null)
+  $colors: $colors !global
   $color: map-get($colors, $name)
   @if $color
     @if $shade

data/assets/stylesheets/shipyard/mixins/_box-model.sass

@@ -4,3 +4,9 @@
 
 @mixin border-radius($radius: $border-radius)
   border-radius: $radius
+
+@mixin clearfix
+  &::after
+    clear: both
+    content: ""
+    display: table

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

@@ -1,3 +1,9 @@
+@keyframes rotate
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(360deg)
+
 @keyframes shake
   0%, 100%
     transform: translateX(0) translateY(0)

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

@@ -0,0 +1,8 @@
+@each $color, $shades in $colors
+  @each $shade, $value in $shades
+    @if $shade == base
+      .#{$color}
+        color: $value
+    @else
+      .#{$color}-#{$shade}
+        color: $value

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

@@ -1,11 +1,5 @@
 $widths: (auto, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100)
 
-@mixin clearfix
-  &::after
-    clear: both
-    content: ""
-    display: table
-
 @mixin column-style($property, $width)
   @if $width == auto
     #{$property}: auto

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

@@ -1,9 +1,3 @@
-.align
-  +all-media-sizes
-    @each $value in (center, left, right)
-      &-#{$value}
-        text-align: $value
-
 .center
   +all-media-sizes
     +center
@@ -15,3 +9,6 @@
 .h-center
   +all-media-sizes
     +center($horizontal: true)
+
+.align-middle
+  vertical-align: middle

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

@@ -12,8 +12,6 @@ a, .link
   &:hover
     color: darken($blue, 10%)
     text-decoration: underline
-    .legacy-content &
-      text-decoration: none
 
 hr
   height: 0
@@ -43,12 +41,8 @@ ul, ol
     margin: 20px 0 0 18px
   &-disc
     list-style: disc
-  .legacy-content &
-    list-style: none
   li
     margin: 10px 0
-    .legacy-content &
-      color: $text-color
 
 img
   display: block

data/assets/stylesheets/shipyard/variables/_color_utilities.sass

@@ -1,68 +1,68 @@
 // Gray
-$gray: color(gray)
-$gray-light: color(gray, light)
-$gray-lighter: color(gray, lighter)
-$gray-lightest: color(gray, lightest)
-$gray-dark: color(gray, dark)
-$gray-darkest: color(gray, darkest)
+$gray: color(gray) !default
+$gray-light: color(gray, light) !default
+$gray-lighter: color(gray, lighter) !default
+$gray-lightest: color(gray, lightest) !default
+$gray-dark: color(gray, dark) !default
+$gray-darkest: color(gray, darkest) !default
 
 // Green
-$green: color(green)
-$green-light: color(green, light)
-$green-lightest: color(green, lightest)
-$green-dark: color(green, dark)
-$green-darkest: color(green, darkest)
+$green: color(green) !default
+$green-light: color(green, light) !default
+$green-lightest: color(green, lightest) !default
+$green-dark: color(green, dark) !default
+$green-darkest: color(green, darkest) !default
 
 // Blue
-$blue: color(blue)
-$blue-light: color(blue, light)
-$blue-lightest: color(blue, lightest)
-$blue-dark: color(blue, dark)
-$blue-darkest: color(blue, darkest)
+$blue: color(blue) !default
+$blue-light: color(blue, light) !default
+$blue-lightest: color(blue, lightest) !default
+$blue-dark: color(blue, dark) !default
+$blue-darkest: color(blue, darkest) !default
 
 // Teal
-$teal: color(teal)
-$teal-light: color(teal, light)
-$teal-lightest: color(teal, lightest)
-$teal-dark: color(teal, dark)
-$teal-darkest: color(teal, darkest)
+$teal: color(teal) !default
+$teal-light: color(teal, light) !default
+$teal-lightest: color(teal, lightest) !default
+$teal-dark: color(teal, dark) !default
+$teal-darkest: color(teal, darkest) !default
 
 // Red
-$red: color(red)
-$red-light: color(red, light)
-$red-lightest: color(red, lightest)
-$red-dark: color(red, dark)
-$red-darkest: color(red, darkest)
+$red: color(red) !default
+$red-light: color(red, light) !default
+$red-lightest: color(red, lightest) !default
+$red-dark: color(red, dark) !default
+$red-darkest: color(red, darkest) !default
 
 // Yellow
-$yellow: color(yellow)
-$yellow-light: color(yellow, light)
-$yellow-lightest: color(yellow, lightest)
-$yellow-dark: color(yellow, dark)
-$yellow-darker: color(yellow, darker)
-$yellow-darkest: color(yellow, darkest)
+$yellow: color(yellow) !default
+$yellow-light: color(yellow, light) !default
+$yellow-lightest: color(yellow, lightest) !default
+$yellow-dark: color(yellow, dark) !default
+$yellow-darker: color(yellow, darker) !default
+$yellow-darkest: color(yellow, darkest) !default
 
 // Orange
-$orange: color(orange)
-$orange-light: color(orange, light)
-$orange-lightest: color(orange, lightest)
-$orange-dark: color(orange, dark)
-$orange-darkest: color(orange, darkest)
+$orange: color(orange) !default
+$orange-light: color(orange, light) !default
+$orange-lightest: color(orange, lightest) !default
+$orange-dark: color(orange, dark) !default
+$orange-darkest: color(orange, darkest) !default
 
 // Coral
-$coral: color(coral)
-$coral-light: color(coral, light)
-$coral-lighter: color(coral, lighter)
-$coral-lightest: color(coral, lightest)
-$coral-dark: color(coral, dark)
-$coral-darker: color(coral, darker)
-$coral-darkest: color(coral, darkest)
+$coral: color(coral) !default
+$coral-light: color(coral, light) !default
+$coral-lighter: color(coral, lighter) !default
+$coral-lightest: color(coral, lightest) !default
+$coral-dark: color(coral, dark) !default
+$coral-darker: color(coral, darker) !default
+$coral-darkest: color(coral, darkest) !default
 
 // Purple
-$purple: color(purple)
-$purple-light: color(purple, light)
-$purple-lighter: color(purple, lighter)
-$purple-lightest: color(purple, lightest)
-$purple-dark: color(purple, dark)
-$purple-darker: color(purple, darker)
-$purple-darkest: color(purple, darkest)
+$purple: color(purple) !default
+$purple-light: color(purple, light) !default
+$purple-lighter: color(purple, lighter) !default
+$purple-lightest: color(purple, lightest) !default
+$purple-dark: color(purple, dark) !default
+$purple-darker: color(purple, darker) !default
+$purple-darkest: color(purple, darkest) !default

data/assets/stylesheets/shipyard/variables/_colors.scss

@@ -8,4 +8,4 @@ $colors: (
   orange: (base: #ff9f49, light: #ffba7d, lightest: #ffd6b1, dark: #cc7f3a, darkest: #995f2c),
   purple: (base: #bf84ff, light: lighten(#bf84ff, 10%), lighter: lighten(#bf84ff, 15%), lightest: lighten(#bf84ff, 20%), dark: darken(#bf84ff, 10%), darker: darken(#bf84ff, 15%), darkest: darken(#bf84ff, 20%)),
   coral: (base: #f9657a, light: lighten(#f9657a, 10%), lighter: lighten(#f9657a, 15%), lightest: lighten(#f9657a, 20%), dark: darken(#f9657a, 10%), darker: darken(#f9657a, 15%), darkest: darken(#f9657a, 20%))
-);
+) !default;

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.2.3'
+  VERSION = '0.2.4'
 end

data/shipyard.gemspec

@@ -16,7 +16,7 @@ Gem::Specification.new do |spec|
   # spec.add_runtime_dependency 'slim-rails', '~> 3.1', '>= 3.1.0'
   # spec.add_runtime_dependency 'sassc', '~> 1.11.4'
 
-  spec.add_development_dependency 'bundler', '~> 1.15.3'
+  spec.add_development_dependency 'bundler', '~> 1.15', '>= 1.15.3'
 
   spec.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
   spec.files = `git ls-files`.split("\n")

metadata

@@ -1,27 +1,33 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.2.4
 platform: ruby
 authors:
 - Shipyard
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-07-28 00:00:00.000000000 Z
+date: 2017-07-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.15'
+    - - ">="
       - !ruby/object:Gem::Version
         version: 1.15.3
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.15'
+    - - ">="
       - !ruby/object:Gem::Version
         version: 1.15.3
 description: 
@@ -31,8 +37,8 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- .gitignore
-- .rspec
+- ".gitignore"
+- ".rspec"
 - CODE_OF_CONDUCT.md
 - Gemfile
 - LICENSE.txt
@@ -72,8 +78,12 @@ files:
 - assets/stylesheets/shipyard/components/_buttons.sass
 - assets/stylesheets/shipyard/components/_empty.sass
 - assets/stylesheets/shipyard/components/_forms.sass
+- assets/stylesheets/shipyard/components/_hamburger.sass
+- assets/stylesheets/shipyard/components/_hero.sass
 - assets/stylesheets/shipyard/components/_icons.sass
+- assets/stylesheets/shipyard/components/_input-switch.sass
 - assets/stylesheets/shipyard/components/_modals.sass
+- assets/stylesheets/shipyard/components/_tooltips.sass
 - assets/stylesheets/shipyard/functions/_color.sass
 - assets/stylesheets/shipyard/mixins/_box-model.sass
 - assets/stylesheets/shipyard/mixins/_components.sass
@@ -82,6 +92,7 @@ files:
 - assets/stylesheets/shipyard/mixins/_responsive.sass
 - assets/stylesheets/shipyard/mixins/_selectors.sass
 - assets/stylesheets/shipyard/utilities/_animations.sass
+- assets/stylesheets/shipyard/utilities/_colors.sass
 - assets/stylesheets/shipyard/utilities/_grid.sass
 - assets/stylesheets/shipyard/utilities/_positioning.sass
 - assets/stylesheets/shipyard/utilities/_reset.sass
@@ -113,17 +124,17 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.14.1
+rubygems_version: 2.5.1
 signing_key: 
 specification_version: 4
 summary: A lightweight CSS framework for developing mobile-first projects in Ruby