shipyard-framework 0.5.87 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 946a7df5969ebc5c97c3008700b6f929567e3631c7a4cd61a6f6db97f2b6550f
-  data.tar.gz: cbf856851da8609e050ca0c3cdd0fecac37e65d58d2fc40f89bed69da049f61f
+  metadata.gz: 239056142fe631cd1acd83479e8be34083d1cd6ad9fe5f3cca51f81bb68398a5
+  data.tar.gz: ad08056923e6cc9043b015e4eea74d6f8633969a77c94536cadd528f3b036085
 SHA512:
-  metadata.gz: dd5faea8d39e4a90129bc3fb13d81a55bdc9cdd9be81a93b2239425dd4e503d6852c5454bc3f4f5d8db255eac4a0b395144995c3f2c82596ea705eefd740473e
-  data.tar.gz: 21aa24467b0afdd928bb80df53bae15d3bec9c1d4a08d633851b425f721ed2b5f36d75a38a70100177c47ea6f28193af816af06af52cefa976cade3baa2351b4
+  metadata.gz: 5bbb051000422ce7dfd20e3f654d012d76653778087f0d1f3e81c56e79570a49e814d35dee2d566e32020fcec3b21ae7480d65339d0b92fd140aa3b2ae426bfa
+  data.tar.gz: 8d8e2d2599d29752f0f066428732f93d4ecda28cc1d2867ed972b5ee28338d20399d1f20c3f2ea5fd4e4d6924f71b7c4364564da1fe0d093abe4d071924301f8

data/assets/stylesheets/shipyard/_functions.sass

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

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

@@ -1,44 +1,144 @@
-[tooltip]
-  overflow: visible
-  position: relative
-  &:before
++component('tooltip')
+  color: #fff
+  width: auto
+  z-index: 50
+  opacity: 0
+  line-height: 1.5
+  min-width: 220px
+  max-width: 400px
+  text-align: left
+  visibility: hidden
+  position: absolute
+  padding: 10px 15px
+  border-radius: 5px
+  font-size: $font-size
+  font-weight: $normal
+  background: $gray-darker
+  transition: opacity 300ms ease 300ms, transform 300ms ease 300ms, visibility 0ms ease 300ms
+  &-active
+    opacity: 1
+    visibility: visible
+  .tooltip-parent:hover &
+    +extend('active')
+
+  // Tooltip: Parent Element
+  &-parent
+    overflow: visible
+    position: relative
+
+  // Tooltip: Directions
+  &-top
+    left: 50%
+    bottom: 100%
+    transform: translate(-50%, 0)
+    &-active
+      transform: translate(-50%, -12px)
+  &-bottom
+    left: 50%
+    top: 100%
+    transform: translate(-50%, 0)
+    &-active
+      transform: translate(-50%, 12px)
+  &-left
+    top: 50%
+    right: 100%
+    transform: translate(0, -50%)
+    &-active
+      transform: translate(-12px, -50%)
+  &-right
+    top: 50%
+    left: 100%
+    transform: translate(0, -50%)
+    &-active
+      transform: translate(12px, -50%)
+
+  // Tooltip: Arrows
+  &-arrow
     content: ''
-    top: -7px
+    position: absolute
     +width-height(0px)
-    border-radius: 0 0 3px 0
-    transform: rotate(45deg) translatey(50%)
+    transform: rotate(45deg)
     transform-origin: center center
     border: 4px solid transparent
-    border-right-color: $gray-darker
-    border-bottom-color: $gray-darker
-    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-darker
-    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)
+    &-top
+      left: 50%
+      margin-left: -4px
+      border-radius: 0 0 3px 0
+      border-right-color: $gray-darker
+      border-bottom-color: $gray-darker
+      &-active
+        transform: rotate(45deg) translate(-8.7px, -8.7px)
+    &-bottom
+      left: 50%
+      margin-left: -4px
+      border-radius: 3px 0 0 0
+      border-top-color: $gray-darker
+      border-left-color: $gray-darker
+      &-active
+        transform: rotate(45deg) translate(8.7px, 8.7px)
+    &-left
+      top: 50%
+      margin-top: -4px
+      border-radius: 0 3px 0 0
+      border-top-color: $gray-darker
+      border-right-color: $gray-darker
+      &-active
+        transform: rotate(45deg) translate(-8.7px, 8.7px)
+    &-right
+      top: 50%
+      margin-top: -4px
+      border-radius: 0 0 0 3px
+      border-left-color: $gray-darker
+      border-bottom-color: $gray-darker
+      &-active
+        transform: rotate(45deg) translate(8.7px, -8.7px)
+
+  // Custom Tooltips
+  @each $direction in (top, bottom, left, right)
+    &-#{$direction}
+
+      // Custom Tooltip Arrows
+      &::before
+        +extend('arrow')
+        +extend('arrow-#{$direction}')
+        #{opposite-direction($direction)}: -4px
+
+      // Custom Tooltip Hover States
+      .tooltip-parent:hover &
+        +extend('#{$direction}-active')
+
+  // Data Tooltip
+  &-data
+    &::before
+      opacity: 0
+      visibility: hidden
+      transition: opacity 300ms ease 300ms, transform 300ms ease 300ms, visibility 0ms ease 300ms
+    &::after
+      +extend
+      width: auto
+      min-width: auto
+      max-width: auto
+      padding: 5px 10px
+      border-radius: 3px
+      text-align: center
+      font-weight: $bold
+      white-space: nowrap
+      content: attr(data-tooltip)
+      font-size: $font-size-xxs
+    &:hover::after,
+    &:hover::before
+      +extend('active')
+
+    // Data Tooltip: Directions
+    @each $direction in (top, bottom, left, right)
+      &-#{$direction}
+        &::before
+          +extend('arrow')
+          +extend('arrow-#{$direction}')
+          #{$direction}: -4px
+        &::after
+          +extend($direction)
+        &:hover::after
+          +extend("#{$direction}-active")
+        &:hover::before
+          +extend("arrow-#{$direction}-active")

data/assets/stylesheets/shipyard/core/_reset.sass

@@ -4,7 +4,11 @@
   margin: 0
   padding: 0
   box-sizing: border-box
-  .env-test &
+
+.env-test
+  *,
+  *::before,
+  *::after
     animation-delay: 0s !important
     animation-duration: 0s !important
     transition-duration: 0s !important

data/assets/stylesheets/shipyard/functions/_opposite-direction.sass

@@ -0,0 +1,9 @@
+@function opposite-direction($direction)
+  @if $direction == top
+    @return bottom
+  @else if $direction == bottom
+    @return top
+  @else if $direction == left
+    @return right
+  @else if $direction == right
+    @return left

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

@@ -15,7 +15,8 @@
   +all-media-sizes
     font-weight: $medium
 
-.strong, .bold
+.bold
+.strong,
   +all-media-sizes
     font-weight: $bold
 

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.5.87'
+  VERSION = '0.6.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.5.87
+  version: 0.6.0
 platform: ruby
 authors:
 - Codeship
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-02-16 00:00:00.000000000 Z
+date: 2018-02-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -92,20 +92,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.2'
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 1.2.9
+        version: 1.3.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.2'
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 1.2.9
+        version: 1.3.0
 - !ruby/object:Gem::Dependency
   name: html-proofer
   requirement: !ruby/object:Gem::Requirement
@@ -132,28 +126,28 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.6'
+        version: 3.7.2
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.6'
+        version: 3.7.2
 - !ruby/object:Gem::Dependency
   name: jekyll-assets
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.3'
+        version: 3.0.7
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.3'
+        version: 3.0.7
 description: 
 email:
 - design@codeship.com
@@ -161,16 +155,6 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- ".gitignore"
-- ".rspec"
-- ".ruby-version"
-- ".travis.yml"
-- Brewfile
-- CODE_OF_CONDUCT.md
-- Gemfile
-- LICENSE.txt
-- README.md
-- Rakefile
 - app/views/shipyard/_alerts.slim
 - assets/icons/arrows/arrow-down.svg
 - assets/icons/arrows/arrow-left.svg
@@ -212,16 +196,16 @@ files:
 - assets/icons/x.svg
 - assets/images/arrows/down.svg
 - assets/images/checkmark.svg
-- assets/javascripts/shipyard.es6
-- assets/javascripts/shipyard/accordion-trigger.es6
-- assets/javascripts/shipyard/accordion.es6
-- assets/javascripts/shipyard/alert-timer.es6
-- assets/javascripts/shipyard/alert.es6
-- assets/javascripts/shipyard/core.es6
-- assets/javascripts/shipyard/hamburger.es6
-- assets/javascripts/shipyard/modal-trigger.es6
-- assets/javascripts/shipyard/modal.es6
-- assets/javascripts/shipyard/scroll.es6
+- assets/javascripts/shipyard.js
+- assets/javascripts/shipyard/accordion-trigger.js
+- assets/javascripts/shipyard/accordion.js
+- assets/javascripts/shipyard/alert-timer.js
+- assets/javascripts/shipyard/alert.js
+- assets/javascripts/shipyard/core.js
+- assets/javascripts/shipyard/hamburger.js
+- assets/javascripts/shipyard/modal-trigger.js
+- assets/javascripts/shipyard/modal.js
+- assets/javascripts/shipyard/scroll.js
 - assets/stylesheets/_shipyard.sass
 - assets/stylesheets/shipyard/_components.sass
 - assets/stylesheets/shipyard/_core.sass
@@ -258,6 +242,7 @@ files:
 - assets/stylesheets/shipyard/core/_typography.sass
 - assets/stylesheets/shipyard/functions/_color.sass
 - assets/stylesheets/shipyard/functions/_map-merge-options.sass
+- assets/stylesheets/shipyard/functions/_opposite-direction.sass
 - assets/stylesheets/shipyard/functions/_text-color.sass
 - assets/stylesheets/shipyard/mixins/_box-model.sass
 - assets/stylesheets/shipyard/mixins/_buttons.sass
@@ -284,12 +269,6 @@ files:
 - assets/stylesheets/shipyard/variables/_misc.sass
 - assets/stylesheets/shipyard/variables/_opacities.scss
 - assets/stylesheets/shipyard/variables/_typography.sass
-- ci/build.rb
-- ci/deploy
-- ci/jekyll
-- ci/percy
-- ci/sass_lint
-- ci/setup
 - lib/shipyard-framework.rb
 - lib/shipyard-framework/helpers/alert_helper.rb
 - lib/shipyard-framework/helpers/box_helper.rb
@@ -311,80 +290,6 @@ files:
 - lib/shipyard-framework/rails/engine.rb
 - lib/shipyard-framework/rails/railtie.rb
 - lib/shipyard-framework/version.rb
-- shipyard.gemspec
-- spec/helpers/alert_helper_spec.rb
-- spec/helpers/box_helper_spec.rb
-- spec/helpers/button_helper_spec.rb
-- spec/helpers/form_helper_spec.rb
-- spec/helpers/icon_helper_spec.rb
-- spec/helpers/note_helper_spec.rb
-- spec/shipyard_spec.rb
-- spec/spec_helper.rb
-- styleguide/.gitignore
-- styleguide/.nojekyll
-- styleguide/.ruby-version
-- styleguide/Gemfile
-- styleguide/Gemfile.lock
-- styleguide/_assets/css/application.sass
-- styleguide/_assets/css/fonts.sass
-- styleguide/_assets/css/layout.sass
-- styleguide/_assets/css/syntax.css
-- styleguide/_assets/css/vendor.sass
-- styleguide/_assets/css/views.sass
-- styleguide/_assets/img/arrows/down.svg
-- styleguide/_assets/img/checkmark.svg
-- styleguide/_assets/js/application.es6
-- styleguide/_assets/js/views/components/alert-trigger.es6
-- styleguide/_assets/js/views/utilities/colors.es6
-- styleguide/_config.yml
-- styleguide/_data/breakpoints.yml
-- styleguide/_includes/css-stats.html
-- styleguide/_includes/page-heading.html
-- styleguide/_layouts/application.html
-- styleguide/_plugins/color_css_class.rb
-- styleguide/_plugins/component_css_class.rb
-- styleguide/_plugins/css_declarations.rb
-- styleguide/_plugins/css_selectors.rb
-- styleguide/_plugins/css_size.rb
-- styleguide/_plugins/human_size_filter.rb
-- styleguide/_plugins/icon_item.rb
-- styleguide/_plugins/opacity_css_class.rb
-- styleguide/_plugins/sass_generator.rb
-- styleguide/_plugins/sass_output.rb
-- styleguide/components/alerts.md
-- styleguide/components/boxes.md
-- styleguide/components/buttons.md
-- styleguide/components/checkboxes.md
-- styleguide/components/code.html
-- styleguide/components/empty-states.html
-- styleguide/components/forms.md
-- styleguide/components/horizontal-rules.md
-- styleguide/components/icons.md
-- styleguide/components/index.md
-- styleguide/components/modals/_modal.html
-- styleguide/components/modals/example-billing.html
-- styleguide/components/modals/example-downgrade.html
-- styleguide/components/modals/example-small.html
-- styleguide/components/modals/example-survey.html
-- styleguide/components/modals/example-tall.html
-- styleguide/components/modals/index.md
-- styleguide/components/notes.md
-- styleguide/components/radio-buttons.md
-- styleguide/components/statuses.md
-- styleguide/components/tables.md
-- styleguide/components/tooltips.md
-- styleguide/index.md
-- styleguide/stats.md
-- styleguide/utilities/accordion.md
-- styleguide/utilities/border-radius.md
-- styleguide/utilities/colors.md
-- styleguide/utilities/grid.md
-- styleguide/utilities/index.md
-- styleguide/utilities/margin-padding.md
-- styleguide/utilities/opacity.md
-- styleguide/utilities/position.md
-- styleguide/utilities/responsive.md
-- styleguide/utilities/typography.md
 homepage: https://github.com/codeship/shipyard
 licenses:
 - MIT