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 +4 -4
- data/assets/stylesheets/shipyard/_utilities.sass +1 -0
- data/assets/stylesheets/shipyard/_variables.sass +1 -0
- data/assets/stylesheets/shipyard/components/_tooltips.sass +41 -17
- data/assets/stylesheets/shipyard/utilities/_overflow.sass +11 -0
- data/assets/stylesheets/shipyard/utilities/_typography.sass +2 -2
- data/assets/stylesheets/shipyard/variables/_components.scss +7 -0
- data/assets/stylesheets/shipyard/variables/_misc.sass +0 -3
- data/assets/stylesheets/shipyard/variables/_z-index.scss +9 -0
- data/lib/shipyard-framework/version.rb +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: bc87e3db7742c825fe1c4b811f94e28ede7ad52e9fdb81466af935da395fd568
|
4
|
+
data.tar.gz: 0c4cfaa39dc369b15b0e8d96c550a108e4e4ed09b8f9f809db0f173172a8c9ff
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 91d8b90eb0ee22e149d78be4fe7d91776eda9325063233c96f679fd4f7311d548b8ac15036de9c37eb7500d1031027373126cb007b37d0780ac2d14fb9516229
|
7
|
+
data.tar.gz: 881b21fd3dcfd8e864b298fd8f84e00b44b816496f01a12790c9f9f6913df02baf50c7233ed63393c9c72cad484b3e795a8a02cef2e0e3c293c04a3b7038fd9a
|
@@ -1,7 +1,7 @@
|
|
1
1
|
+component('tooltip')
|
2
|
-
|
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%, -
|
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%,
|
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(-
|
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(
|
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(-
|
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(
|
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(-
|
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(
|
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:
|
120
|
-
max-width:
|
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)
|
@@ -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
|
|
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.
|
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-
|
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
|