shipyard-framework 0.6.0 → 0.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 239056142fe631cd1acd83479e8be34083d1cd6ad9fe5f3cca51f81bb68398a5
-  data.tar.gz: ad08056923e6cc9043b015e4eea74d6f8633969a77c94536cadd528f3b036085
+  metadata.gz: bc87e3db7742c825fe1c4b811f94e28ede7ad52e9fdb81466af935da395fd568
+  data.tar.gz: 0c4cfaa39dc369b15b0e8d96c550a108e4e4ed09b8f9f809db0f173172a8c9ff
 SHA512:
-  metadata.gz: 5bbb051000422ce7dfd20e3f654d012d76653778087f0d1f3e81c56e79570a49e814d35dee2d566e32020fcec3b21ae7480d65339d0b92fd140aa3b2ae426bfa
-  data.tar.gz: 8d8e2d2599d29752f0f066428732f93d4ecda28cc1d2867ed972b5ee28338d20399d1f20c3f2ea5fd4e4d6924f71b7c4364564da1fe0d093abe4d071924301f8
+  metadata.gz: 91d8b90eb0ee22e149d78be4fe7d91776eda9325063233c96f679fd4f7311d548b8ac15036de9c37eb7500d1031027373126cb007b37d0780ac2d14fb9516229
+  data.tar.gz: 881b21fd3dcfd8e864b298fd8f84e00b44b816496f01a12790c9f9f6913df02baf50c7233ed63393c9c72cad484b3e795a8a02cef2e0e3c293c04a3b7038fd9a

data/assets/stylesheets/shipyard/_utilities.sass

@@ -8,3 +8,4 @@
 @import "shipyard/utilities/margin-padding"
 @import "shipyard/utilities/border-radius"
 @import "shipyard/utilities/accordion"
+@import "shipyard/utilities/overflow"

data/assets/stylesheets/shipyard/_variables.sass

@@ -5,3 +5,4 @@
 @import "shipyard/variables/misc"
 @import "shipyard/variables/components"
 @import "shipyard/variables/opacities"
+@import "shipyard/variables/z-index"

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

@@ -1,7 +1,7 @@
 +component('tooltip')
-  color: #fff
+  +z-index
+  +border-radius
   width: auto
-  z-index: 50
   opacity: 0
   line-height: 1.5
   min-width: 220px
@@ -9,11 +9,6 @@
   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
@@ -32,25 +27,25 @@
     bottom: 100%
     transform: translate(-50%, 0)
     &-active
-      transform: translate(-50%, -12px)
+      transform: translate(-50%, -6px)
   &-bottom
     left: 50%
     top: 100%
     transform: translate(-50%, 0)
     &-active
-      transform: translate(-50%, 12px)
+      transform: translate(-50%, 6px)
   &-left
     top: 50%
     right: 100%
     transform: translate(0, -50%)
     &-active
-      transform: translate(-12px, -50%)
+      transform: translate(-6px, -50%)
   &-right
     top: 50%
     left: 100%
     transform: translate(0, -50%)
     &-active
-      transform: translate(12px, -50%)
+      transform: translate(6px, -50%)
 
   // Tooltip: Arrows
   &-arrow
@@ -60,6 +55,7 @@
     transform: rotate(45deg)
     transform-origin: center center
     border: 4px solid transparent
+    z-index: map-get($z-index, 'tooltip-arrow')
     &-top
       left: 50%
       margin-left: -4px
@@ -67,7 +63,11 @@
       border-right-color: $gray-darker
       border-bottom-color: $gray-darker
       &-active
-        transform: rotate(45deg) translate(-8.7px, -8.7px)
+        transform: rotate(45deg) translate(-4.5px, -4.5px)
+      +prepend-to-root('.tooltip-light')
+        border-right-color: #fff
+        border-bottom-color: #fff
+        box-shadow: 1px 1px 1px rgba($gray-darkest,.05)
     &-bottom
       left: 50%
       margin-left: -4px
@@ -75,7 +75,11 @@
       border-top-color: $gray-darker
       border-left-color: $gray-darker
       &-active
-        transform: rotate(45deg) translate(8.7px, 8.7px)
+        transform: rotate(45deg) translate(4.5px, 4.5px)
+      +prepend-to-root('.tooltip-light')
+        border-top-color: #fff
+        border-left-color: #fff
+        box-shadow: -1px -1px 0 rgba($gray-darkest,.03)
     &-left
       top: 50%
       margin-top: -4px
@@ -83,7 +87,11 @@
       border-top-color: $gray-darker
       border-right-color: $gray-darker
       &-active
-        transform: rotate(45deg) translate(-8.7px, 8.7px)
+        transform: rotate(45deg) translate(-4.5px, 4.5px)
+      +prepend-to-root('.tooltip-light')
+        border-top-color: #fff
+        border-right-color: #fff
+        box-shadow: 1px -1px 1px rgba($gray-darkest,.05)
     &-right
       top: 50%
       margin-top: -4px
@@ -91,7 +99,11 @@
       border-left-color: $gray-darker
       border-bottom-color: $gray-darker
       &-active
-        transform: rotate(45deg) translate(8.7px, -8.7px)
+        transform: rotate(45deg) translate(4.5px, -4.5px)
+      +prepend-to-root('.tooltip-light')
+        border-left-color: #fff
+        border-bottom-color: #fff
+        box-shadow: -1px 1px 1px rgba($gray-darkest,.05)
 
   // Custom Tooltips
   @each $direction in (top, bottom, left, right)
@@ -107,8 +119,16 @@
       .tooltip-parent:hover &
         +extend('#{$direction}-active')
 
+  // Light Tooltips
+  &-light
+    color: $text-color-dark
+    border-color: #fff
+    background-color: #fff
+    +box-shadow
+
   // Data Tooltip
   &-data
+    +extend('parent')
     &::before
       opacity: 0
       visibility: hidden
@@ -116,8 +136,8 @@
     &::after
       +extend
       width: auto
-      min-width: auto
-      max-width: auto
+      min-width: 0
+      max-width: none
       padding: 5px 10px
       border-radius: 3px
       text-align: center
@@ -128,6 +148,10 @@
     &:hover::after,
     &:hover::before
       +extend('active')
+    &-light
+      &::after,
+      &::before
+        +extend('light')
 
     // Data Tooltip: Directions
     @each $direction in (top, bottom, left, right)

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

@@ -0,0 +1,11 @@
+.overflow
+  &-auto
+    overflow: auto
+  &-hidden
+    overflow: hidden
+  &-visible
+    overflow: visible
+  &-x-scroll
+    overflow-x: auto
+  &-y-scroll
+    overflow-y: auto

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

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

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

@@ -71,6 +71,13 @@ $component-defaults: (
     font-family: $font-monospace,
     background: darken($gray-lightest, 3%),
     border: 1px solid darken($gray-lighter, 5%)
+  ),
+  tooltip: (
+    color: #fff,
+    padding: 10px 15px,
+    font-weight: $normal,
+    font-size: $font-size,
+    background: $gray-darker
   )
 ) !default;
 

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

@@ -1,6 +1,3 @@
-// Component Layering
-$z-index: (modal: 200) !default
-
 $bg-color: $gray-lightest !default
 
 $box-shadow: 0 1px 2px rgba($gray-darkest,.08) !default

data/assets/stylesheets/shipyard/variables/_z-index.scss

@@ -0,0 +1,9 @@
+$z-index-defaults: (
+  modal: 200,
+  header: 100,
+  tooltip-arrow: 51,
+  tooltip: 50
+) !default;
+
+$z-index-options: () !default;
+$z-index: map-merge-options($z-index-defaults, $z-index-options);

data/lib/shipyard-framework/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.6.1
 platform: ruby
 authors:
 - Codeship
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-02-26 00:00:00.000000000 Z
+date: 2018-02-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -260,6 +260,7 @@ files:
 - assets/stylesheets/shipyard/utilities/_grid.sass
 - assets/stylesheets/shipyard/utilities/_margin-padding.sass
 - assets/stylesheets/shipyard/utilities/_opacity.sass
+- assets/stylesheets/shipyard/utilities/_overflow.sass
 - assets/stylesheets/shipyard/utilities/_position.sass
 - assets/stylesheets/shipyard/utilities/_typography.sass
 - assets/stylesheets/shipyard/variables/_color_utilities.sass
@@ -269,6 +270,7 @@ files:
 - assets/stylesheets/shipyard/variables/_misc.sass
 - assets/stylesheets/shipyard/variables/_opacities.scss
 - assets/stylesheets/shipyard/variables/_typography.sass
+- assets/stylesheets/shipyard/variables/_z-index.scss
 - lib/shipyard-framework.rb
 - lib/shipyard-framework/helpers/alert_helper.rb
 - lib/shipyard-framework/helpers/box_helper.rb