shipyard-framework 0.5.73 → 0.5.74
Sign up to get free protection for your applications and to get access to all the features.
- 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>
|