shipyard-framework 0.6.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 239056142fe631cd1acd83479e8be34083d1cd6ad9fe5f3cca51f81bb68398a5
4
- data.tar.gz: ad08056923e6cc9043b015e4eea74d6f8633969a77c94536cadd528f3b036085
3
+ metadata.gz: bc87e3db7742c825fe1c4b811f94e28ede7ad52e9fdb81466af935da395fd568
4
+ data.tar.gz: 0c4cfaa39dc369b15b0e8d96c550a108e4e4ed09b8f9f809db0f173172a8c9ff
5
5
  SHA512:
6
- metadata.gz: 5bbb051000422ce7dfd20e3f654d012d76653778087f0d1f3e81c56e79570a49e814d35dee2d566e32020fcec3b21ae7480d65339d0b92fd140aa3b2ae426bfa
7
- data.tar.gz: 8d8e2d2599d29752f0f066428732f93d4ecda28cc1d2867ed972b5ee28338d20399d1f20c3f2ea5fd4e4d6924f71b7c4364564da1fe0d093abe4d071924301f8
6
+ metadata.gz: 91d8b90eb0ee22e149d78be4fe7d91776eda9325063233c96f679fd4f7311d548b8ac15036de9c37eb7500d1031027373126cb007b37d0780ac2d14fb9516229
7
+ data.tar.gz: 881b21fd3dcfd8e864b298fd8f84e00b44b816496f01a12790c9f9f6913df02baf50c7233ed63393c9c72cad484b3e795a8a02cef2e0e3c293c04a3b7038fd9a
@@ -8,3 +8,4 @@
8
8
  @import "shipyard/utilities/margin-padding"
9
9
  @import "shipyard/utilities/border-radius"
10
10
  @import "shipyard/utilities/accordion"
11
+ @import "shipyard/utilities/overflow"
@@ -5,3 +5,4 @@
5
5
  @import "shipyard/variables/misc"
6
6
  @import "shipyard/variables/components"
7
7
  @import "shipyard/variables/opacities"
8
+ @import "shipyard/variables/z-index"
@@ -1,7 +1,7 @@
1
1
  +component('tooltip')
2
- color: #fff
2
+ +z-index
3
+ +border-radius
3
4
  width: auto
4
- z-index: 50
5
5
  opacity: 0
6
6
  line-height: 1.5
7
7
  min-width: 220px
@@ -9,11 +9,6 @@
9
9
  text-align: left
10
10
  visibility: hidden
11
11
  position: absolute
12
- padding: 10px 15px
13
- border-radius: 5px
14
- font-size: $font-size
15
- font-weight: $normal
16
- background: $gray-darker
17
12
  transition: opacity 300ms ease 300ms, transform 300ms ease 300ms, visibility 0ms ease 300ms
18
13
  &-active
19
14
  opacity: 1
@@ -32,25 +27,25 @@
32
27
  bottom: 100%
33
28
  transform: translate(-50%, 0)
34
29
  &-active
35
- transform: translate(-50%, -12px)
30
+ transform: translate(-50%, -6px)
36
31
  &-bottom
37
32
  left: 50%
38
33
  top: 100%
39
34
  transform: translate(-50%, 0)
40
35
  &-active
41
- transform: translate(-50%, 12px)
36
+ transform: translate(-50%, 6px)
42
37
  &-left
43
38
  top: 50%
44
39
  right: 100%
45
40
  transform: translate(0, -50%)
46
41
  &-active
47
- transform: translate(-12px, -50%)
42
+ transform: translate(-6px, -50%)
48
43
  &-right
49
44
  top: 50%
50
45
  left: 100%
51
46
  transform: translate(0, -50%)
52
47
  &-active
53
- transform: translate(12px, -50%)
48
+ transform: translate(6px, -50%)
54
49
 
55
50
  // Tooltip: Arrows
56
51
  &-arrow
@@ -60,6 +55,7 @@
60
55
  transform: rotate(45deg)
61
56
  transform-origin: center center
62
57
  border: 4px solid transparent
58
+ z-index: map-get($z-index, 'tooltip-arrow')
63
59
  &-top
64
60
  left: 50%
65
61
  margin-left: -4px
@@ -67,7 +63,11 @@
67
63
  border-right-color: $gray-darker
68
64
  border-bottom-color: $gray-darker
69
65
  &-active
70
- transform: rotate(45deg) translate(-8.7px, -8.7px)
66
+ transform: rotate(45deg) translate(-4.5px, -4.5px)
67
+ +prepend-to-root('.tooltip-light')
68
+ border-right-color: #fff
69
+ border-bottom-color: #fff
70
+ box-shadow: 1px 1px 1px rgba($gray-darkest,.05)
71
71
  &-bottom
72
72
  left: 50%
73
73
  margin-left: -4px
@@ -75,7 +75,11 @@
75
75
  border-top-color: $gray-darker
76
76
  border-left-color: $gray-darker
77
77
  &-active
78
- transform: rotate(45deg) translate(8.7px, 8.7px)
78
+ transform: rotate(45deg) translate(4.5px, 4.5px)
79
+ +prepend-to-root('.tooltip-light')
80
+ border-top-color: #fff
81
+ border-left-color: #fff
82
+ box-shadow: -1px -1px 0 rgba($gray-darkest,.03)
79
83
  &-left
80
84
  top: 50%
81
85
  margin-top: -4px
@@ -83,7 +87,11 @@
83
87
  border-top-color: $gray-darker
84
88
  border-right-color: $gray-darker
85
89
  &-active
86
- transform: rotate(45deg) translate(-8.7px, 8.7px)
90
+ transform: rotate(45deg) translate(-4.5px, 4.5px)
91
+ +prepend-to-root('.tooltip-light')
92
+ border-top-color: #fff
93
+ border-right-color: #fff
94
+ box-shadow: 1px -1px 1px rgba($gray-darkest,.05)
87
95
  &-right
88
96
  top: 50%
89
97
  margin-top: -4px
@@ -91,7 +99,11 @@
91
99
  border-left-color: $gray-darker
92
100
  border-bottom-color: $gray-darker
93
101
  &-active
94
- transform: rotate(45deg) translate(8.7px, -8.7px)
102
+ transform: rotate(45deg) translate(4.5px, -4.5px)
103
+ +prepend-to-root('.tooltip-light')
104
+ border-left-color: #fff
105
+ border-bottom-color: #fff
106
+ box-shadow: -1px 1px 1px rgba($gray-darkest,.05)
95
107
 
96
108
  // Custom Tooltips
97
109
  @each $direction in (top, bottom, left, right)
@@ -107,8 +119,16 @@
107
119
  .tooltip-parent:hover &
108
120
  +extend('#{$direction}-active')
109
121
 
122
+ // Light Tooltips
123
+ &-light
124
+ color: $text-color-dark
125
+ border-color: #fff
126
+ background-color: #fff
127
+ +box-shadow
128
+
110
129
  // Data Tooltip
111
130
  &-data
131
+ +extend('parent')
112
132
  &::before
113
133
  opacity: 0
114
134
  visibility: hidden
@@ -116,8 +136,8 @@
116
136
  &::after
117
137
  +extend
118
138
  width: auto
119
- min-width: auto
120
- max-width: auto
139
+ min-width: 0
140
+ max-width: none
121
141
  padding: 5px 10px
122
142
  border-radius: 3px
123
143
  text-align: center
@@ -128,6 +148,10 @@
128
148
  &:hover::after,
129
149
  &:hover::before
130
150
  +extend('active')
151
+ &-light
152
+ &::after,
153
+ &::before
154
+ +extend('light')
131
155
 
132
156
  // Data Tooltip: Directions
133
157
  @each $direction in (top, bottom, left, right)
@@ -0,0 +1,11 @@
1
+ .overflow
2
+ &-auto
3
+ overflow: auto
4
+ &-hidden
5
+ overflow: hidden
6
+ &-visible
7
+ overflow: visible
8
+ &-x-scroll
9
+ overflow-x: auto
10
+ &-y-scroll
11
+ overflow-y: auto
@@ -15,8 +15,8 @@
15
15
  +all-media-sizes
16
16
  font-weight: $medium
17
17
 
18
- .bold
19
- .strong,
18
+ .bold,
19
+ .strong
20
20
  +all-media-sizes
21
21
  font-weight: $bold
22
22
 
@@ -71,6 +71,13 @@ $component-defaults: (
71
71
  font-family: $font-monospace,
72
72
  background: darken($gray-lightest, 3%),
73
73
  border: 1px solid darken($gray-lighter, 5%)
74
+ ),
75
+ tooltip: (
76
+ color: #fff,
77
+ padding: 10px 15px,
78
+ font-weight: $normal,
79
+ font-size: $font-size,
80
+ background: $gray-darker
74
81
  )
75
82
  ) !default;
76
83
 
@@ -1,6 +1,3 @@
1
- // Component Layering
2
- $z-index: (modal: 200) !default
3
-
4
1
  $bg-color: $gray-lightest !default
5
2
 
6
3
  $box-shadow: 0 1px 2px rgba($gray-darkest,.08) !default
@@ -0,0 +1,9 @@
1
+ $z-index-defaults: (
2
+ modal: 200,
3
+ header: 100,
4
+ tooltip-arrow: 51,
5
+ tooltip: 50
6
+ ) !default;
7
+
8
+ $z-index-options: () !default;
9
+ $z-index: map-merge-options($z-index-defaults, $z-index-options);
@@ -1,3 +1,3 @@
1
1
  module Shipyard
2
- VERSION = '0.6.0'
2
+ VERSION = '0.6.1'
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: shipyard-framework
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.6.0
4
+ version: 0.6.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Codeship
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-02-26 00:00:00.000000000 Z
11
+ date: 2018-02-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: actionview
@@ -260,6 +260,7 @@ files:
260
260
  - assets/stylesheets/shipyard/utilities/_grid.sass
261
261
  - assets/stylesheets/shipyard/utilities/_margin-padding.sass
262
262
  - assets/stylesheets/shipyard/utilities/_opacity.sass
263
+ - assets/stylesheets/shipyard/utilities/_overflow.sass
263
264
  - assets/stylesheets/shipyard/utilities/_position.sass
264
265
  - assets/stylesheets/shipyard/utilities/_typography.sass
265
266
  - assets/stylesheets/shipyard/variables/_color_utilities.sass
@@ -269,6 +270,7 @@ files:
269
270
  - assets/stylesheets/shipyard/variables/_misc.sass
270
271
  - assets/stylesheets/shipyard/variables/_opacities.scss
271
272
  - assets/stylesheets/shipyard/variables/_typography.sass
273
+ - assets/stylesheets/shipyard/variables/_z-index.scss
272
274
  - lib/shipyard-framework.rb
273
275
  - lib/shipyard-framework/helpers/alert_helper.rb
274
276
  - lib/shipyard-framework/helpers/box_helper.rb