shipyard-framework 0.5.73 → 0.5.74
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/components/_input-switch.sass +7 -6
- data/assets/stylesheets/shipyard/components/_modals.sass +1 -3
- data/assets/stylesheets/shipyard/utilities/_grid.sass +7 -4
- data/assets/stylesheets/shipyard/utilities/_margin-padding.sass +5 -0
- data/lib/shipyard-framework/version.rb +1 -1
- data/styleguide/Gemfile.lock +1 -1
- data/styleguide/_assets/css/views.sass +0 -6
- data/styleguide/components/checkboxes.md +2 -2
- data/styleguide/utilities/colors.md +1 -1
- data/styleguide/utilities/grid.md +2 -2
- data/styleguide/utilities/margin-padding.md +2 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 29e4642dfdfa77a61e40583e3f3735de72fe94104c4ddbcb789568516faa60ef
|
|
4
|
+
data.tar.gz: d9a277f730d7601e58bf23d85c2f61bf3bbc19d4be66a654596a7569cc4a0eb9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2793abf72c60e3bfbfd4a8b7f4ef17e5d2336db3217976e595c1578ead80c9f3a19973afa3c4b9c3e02c6ec61fd226e6ec96780529d52a168404a7ce5af7ad28
|
|
7
|
+
data.tar.gz: b59185e1966c9a3a7f2f074e342e09f4a08258925272794c499f169ffbbc456033d3756641893182ffa644c552c8916b5b9f2531bbb9390182d1650075d0d0cd
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
$sizes: (sm: 18px, lg: 22px, xl: 24px)
|
|
1
|
+
$sizes: (sm: 18px, md: 20px, lg: 22px, xl: 24px)
|
|
2
2
|
|
|
3
3
|
+component('input-switch')
|
|
4
4
|
outline: none
|
|
@@ -37,8 +37,9 @@ $sizes: (sm: 18px, lg: 22px, xl: 24px)
|
|
|
37
37
|
transform: translatex(100%)
|
|
38
38
|
|
|
39
39
|
// Checkbox Switch: Sizes
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
+all-media-sizes
|
|
41
|
+
@each $name, $size in $sizes
|
|
42
|
+
&-#{$name}
|
|
43
|
+
+width-height($size * 2 - 4px, $size)
|
|
44
|
+
&::after
|
|
45
|
+
+width-height($size - 4px)
|
|
@@ -9,17 +9,15 @@
|
|
|
9
9
|
overflow: hidden
|
|
10
10
|
|
|
11
11
|
&-container
|
|
12
|
+
@extend .col-center
|
|
12
13
|
+z-index
|
|
13
14
|
top: 0
|
|
14
15
|
left: 0
|
|
15
16
|
right: 0
|
|
16
17
|
bottom: 0
|
|
17
18
|
padding: 10px
|
|
18
|
-
display: flex
|
|
19
19
|
overflow: auto
|
|
20
20
|
position: fixed
|
|
21
|
-
align-items: center
|
|
22
|
-
justify-content: center
|
|
23
21
|
background: rgba($gray-darkest,.9)
|
|
24
22
|
transition: 300ms padding ease
|
|
25
23
|
-webkit-overflow-scrolling: touch
|
|
@@ -48,11 +48,14 @@ $widths: (0, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75,
|
|
|
48
48
|
flex-wrap: nowrap
|
|
49
49
|
+responsive-margin(left right, $divisor: -2)
|
|
50
50
|
|
|
51
|
-
&-center
|
|
52
|
-
float: none
|
|
53
|
-
margin: 0 auto
|
|
54
|
-
|
|
55
51
|
+all-media-sizes
|
|
52
|
+
&-center,
|
|
53
|
+
&-v-center
|
|
54
|
+
display: flex
|
|
55
|
+
justify-content: center
|
|
56
|
+
&-center
|
|
57
|
+
align-items: center
|
|
58
|
+
|
|
56
59
|
+column-sizes
|
|
57
60
|
|
|
58
61
|
.flex
|
data/styleguide/Gemfile.lock
CHANGED
|
@@ -36,9 +36,6 @@ hr
|
|
|
36
36
|
&-color
|
|
37
37
|
height: 120px
|
|
38
38
|
border-radius: 2px 2px 0 0
|
|
39
|
-
display: flex
|
|
40
|
-
align-items: center
|
|
41
|
-
justify-content: center
|
|
42
39
|
color: transparent
|
|
43
40
|
transition: 300ms color ease
|
|
44
41
|
+when('box:hover')
|
|
@@ -60,11 +57,8 @@ hr
|
|
|
60
57
|
+component('utilities-grid')
|
|
61
58
|
&-box
|
|
62
59
|
width: 100%
|
|
63
|
-
display: flex
|
|
64
60
|
flex-grow: 1
|
|
65
61
|
min-height: 30px
|
|
66
|
-
flex-direction: column
|
|
67
|
-
justify-content: center
|
|
68
62
|
|
|
69
63
|
+component('utilities-typography')
|
|
70
64
|
&-hr
|
|
@@ -186,8 +186,8 @@ labels:
|
|
|
186
186
|
|
|
187
187
|
---
|
|
188
188
|
|
|
189
|
-
## Checkbox-Switch Sizes
|
|
190
|
-
<p class="text-light margin-bottom-md">
|
|
189
|
+
## Checkbox-Switch Sizes `input-switch-{ x1..x4 }-{ sm..xl }`
|
|
190
|
+
<p class="text-light margin-bottom-md">Each size can be used or altered at any breakpoint.</p>
|
|
191
191
|
<ul class="input-list">
|
|
192
192
|
<li class="input-item">
|
|
193
193
|
<input id="small-switch-on" type="checkbox" class="input input-switch input-switch-sm align-middle" checked />
|
|
@@ -15,7 +15,7 @@ base_colors: [Black, White]
|
|
|
15
15
|
{% for shade in page.shades %}
|
|
16
16
|
<li class="col col-50 col-x1-25 col-x2-0 padding-left-xxs padding-right-xxs padding-left-x1-xs padding-right-x1-xs margin-bottom-xs margin-bottom-x1-md shade-item shade-{{ shade | downcase }} shade-{{ color | color_css_class: shade }}">
|
|
17
17
|
<div class="shade-box box bg-{{ color | color_css_class: shade }} shade-{{ shade | downcase | replace: 'er', '' | replace: 'est', '' }}">
|
|
18
|
-
<div class="shade-color text-xxl bold bg-{{ color | color_css_class: shade }}" shade-color></div>
|
|
18
|
+
<div class="shade-color col-center text-xxl bold bg-{{ color | color_css_class: shade }}" shade-color></div>
|
|
19
19
|
<p class="shade-text text-sm medium {{ color | color_css_class: shade }}">
|
|
20
20
|
${{ color | color_css_class: shade }}
|
|
21
21
|
</p>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
title: Shipyard Grid
|
|
3
3
|
description: The Shipyard grid is a percentage-based, flexbox grid and is entirely responsive. Each class needs the foundational `.col` class in order to function properly, and also should be contained inside the `.col-container` as well.
|
|
4
4
|
container_classes: col-container margin-top-xs margin-top-x1-sm margin-top-x2-md margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-md
|
|
5
|
-
box_classes: utilities-grid-box box-secondary text-light text-sm strong align-center
|
|
5
|
+
box_classes: utilities-grid-box col-center box-secondary text-light text-sm strong align-center
|
|
6
6
|
example_flex_columns: [10,20,25,33,50]
|
|
7
7
|
example_sizes: [5,10,15,20,25,30,33,35,40,45,50,55,60,65,66,70,75,80,85,90,95,100]
|
|
8
8
|
example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
|
|
@@ -100,7 +100,7 @@ example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
|
|
|
100
100
|
|
|
101
101
|
---
|
|
102
102
|
|
|
103
|
-
### Responsive Columns `.col-
|
|
103
|
+
### Responsive Columns `.col-{ x1..x4 }-{ n }`
|
|
104
104
|
<p class="text-light margin-bottom-md" markdown="1">Useful when you want to build a grid that works for any size of screen.</p>
|
|
105
105
|
|
|
106
106
|
<div class="{{ page.container_classes }}">
|
|
@@ -17,8 +17,9 @@ directions: [left,right]
|
|
|
17
17
|
<div class="col">
|
|
18
18
|
<div class="align-center">
|
|
19
19
|
{% for option in page.options %}
|
|
20
|
-
<div class="{{ page.box_classes }} margin-{{ option }}
|
|
20
|
+
<div class="{{ page.box_classes }} margin-{{ option }}">.margin-{{ option }}</div>
|
|
21
21
|
{% endfor %}
|
|
22
|
+
<div class="{{ page.box_classes }} col-55 col-x1-75 col-x2-85 margin-auto">.margin-auto</div>
|
|
22
23
|
</div>
|
|
23
24
|
</div>
|
|
24
25
|
</div>
|