shipyard-framework 0.5.68 → 0.5.69
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/.travis.yml +1 -1
- data/assets/stylesheets/shipyard/_components.sass +1 -1
- data/assets/stylesheets/shipyard/components/_code.sass +2 -1
- data/assets/stylesheets/shipyard/components/_forms.sass +13 -11
- data/assets/stylesheets/shipyard/components/_input-radio-checkbox.sass +106 -0
- data/assets/stylesheets/shipyard/components/_modals.sass +5 -3
- data/assets/stylesheets/shipyard/core/_reset.sass +3 -0
- data/assets/stylesheets/shipyard/core/_typography.sass +2 -5
- data/lib/shipyard-framework/version.rb +1 -1
- data/styleguide/Gemfile.lock +2 -2
- data/styleguide/_assets/css/layout.sass +4 -0
- data/styleguide/_assets/css/views.sass +13 -0
- data/styleguide/components/checkboxes.md +117 -0
- data/styleguide/components/forms.html +0 -74
- data/styleguide/components/index.md +1 -1
- data/styleguide/components/modals/_modal.html +1 -1
- data/styleguide/components/modals/example-billing.html +4 -4
- data/styleguide/components/modals/example-downgrade.html +52 -0
- data/styleguide/components/radio-buttons.md +148 -0
- metadata +6 -3
- data/assets/stylesheets/shipyard/components/_input-radios.sass +0 -55
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0c683a0fb4c6119e84121a865a862637812e24beb773c3decd8dded350f2293c
|
|
4
|
+
data.tar.gz: 589dc97db40a3d04eb72e06ad72486d70f724668f3a4da8c096042df621df42c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 12bafc1e15ce24ceb9b3655d90c5fae198cc7a9c7842cbbf836e2a5f50162a131134c8394b89a0a9ac7bb06a0d692b4cf72f01e33a7f530013ad1f2c74fca5c7
|
|
7
|
+
data.tar.gz: 6d0c18b96f87f1300b5843297f2a498bac6c08f55c74191ae22b65e95044a633197db61fa678c55cd675cd6e32fbbeae8758bed8ce43dd051c2e81f8d6a885ff
|
data/.travis.yml
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
@import shipyard/components/boxes
|
|
7
7
|
@import shipyard/components/forms
|
|
8
8
|
@import shipyard/components/form-errors
|
|
9
|
-
@import shipyard/components/input-
|
|
9
|
+
@import shipyard/components/input-radio-checkbox
|
|
10
10
|
@import shipyard/components/input-switch
|
|
11
11
|
@import shipyard/components/empty
|
|
12
12
|
@import shipyard/components/modals
|
|
@@ -9,14 +9,12 @@
|
|
|
9
9
|
font-weight: $medium
|
|
10
10
|
|
|
11
11
|
+component('input')
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
background: #fff
|
|
12
|
+
outline: none
|
|
13
|
+
border: 2px solid $border-color
|
|
14
|
+
transition: background-color 300ms ease, border-color 300ms ease, opacity 300ms ease
|
|
16
15
|
+appearance(none)
|
|
17
|
-
|
|
18
|
-
color: $
|
|
19
|
-
font-weight: $normal
|
|
16
|
+
&:hover, .btn:hover &
|
|
17
|
+
border-color: darken($border-color, 10%)
|
|
20
18
|
|
|
21
19
|
&-group
|
|
22
20
|
+clearfix
|
|
@@ -29,13 +27,13 @@
|
|
|
29
27
|
&-select
|
|
30
28
|
display: block
|
|
31
29
|
width: 100%
|
|
32
|
-
border: 2px solid $border-color
|
|
33
30
|
background: #fff
|
|
34
31
|
height: 50px
|
|
32
|
+
font: $font
|
|
33
|
+
font-weight: $medium
|
|
35
34
|
font-size: 16px
|
|
36
35
|
color: $text-color-lighter
|
|
37
36
|
outline: none
|
|
38
|
-
transition: border-color 300ms ease
|
|
39
37
|
+border-radius
|
|
40
38
|
+appearance(none)
|
|
41
39
|
+respond-to(padding, (x0: 0 15px, x1: 0 20px))
|
|
@@ -75,14 +73,18 @@
|
|
|
75
73
|
color: $text-color-lighter
|
|
76
74
|
|
|
77
75
|
&-text
|
|
76
|
+
font: $font
|
|
77
|
+
color: $text-color
|
|
78
|
+
background: #fff
|
|
78
79
|
position: relative
|
|
79
80
|
height: 50px
|
|
80
|
-
border: 2px solid $border-color
|
|
81
81
|
font-size: 16px
|
|
82
|
-
transition: border-color 300ms ease
|
|
83
82
|
outline: none
|
|
84
83
|
+border-radius
|
|
85
84
|
+respond-to(padding, (x0: 10px 15px, x1: 10px 20px))
|
|
85
|
+
+placeholder
|
|
86
|
+
color: $text-color-lightest
|
|
87
|
+
font-weight: $normal
|
|
86
88
|
+when('error')
|
|
87
89
|
border-color: $red
|
|
88
90
|
&:hover, &:focus
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
+component('input')
|
|
2
|
+
&-item
|
|
3
|
+
position: relative
|
|
4
|
+
+respond-to(margin, (x0: 10px 0, x1: 15px 0))
|
|
5
|
+
&-inline
|
|
6
|
+
display: inline-block
|
|
7
|
+
margin-right: 25px
|
|
8
|
+
|
|
9
|
+
&-label
|
|
10
|
+
display: inline-block
|
|
11
|
+
cursor: pointer
|
|
12
|
+
font-weight: $medium
|
|
13
|
+
transition: color 300ms ease, opacity 300ms ease
|
|
14
|
+
+when('item')
|
|
15
|
+
padding-left: 28px
|
|
16
|
+
+when('item-inline')
|
|
17
|
+
padding-left: 5px
|
|
18
|
+
&:hover
|
|
19
|
+
color: $blue-dark
|
|
20
|
+
+when('radio:checked ~, checkbox:checked ~')
|
|
21
|
+
color: $green-dark
|
|
22
|
+
|
|
23
|
+
&-inverse
|
|
24
|
+
+extend('label')
|
|
25
|
+
opacity: 0.65
|
|
26
|
+
&, &:hover
|
|
27
|
+
color: #fff
|
|
28
|
+
&:hover
|
|
29
|
+
opacity: 1
|
|
30
|
+
+when('radio:checked ~, checkbox:checked ~')
|
|
31
|
+
opacity: 1
|
|
32
|
+
color: lighten($green, 10%)
|
|
33
|
+
|
|
34
|
+
&-checkbox, &-radio
|
|
35
|
+
top: -1px
|
|
36
|
+
position: relative
|
|
37
|
+
vertical-align: middle
|
|
38
|
+
cursor: pointer
|
|
39
|
+
+width-height(16px)
|
|
40
|
+
+when('item')
|
|
41
|
+
left: 0
|
|
42
|
+
top: 4px
|
|
43
|
+
position: absolute
|
|
44
|
+
|
|
45
|
+
&::after
|
|
46
|
+
content: ''
|
|
47
|
+
opacity: 0
|
|
48
|
+
position: absolute
|
|
49
|
+
|
|
50
|
+
// Input: Checked State
|
|
51
|
+
&:checked
|
|
52
|
+
&, .btn:hover &
|
|
53
|
+
+btn-color($green)
|
|
54
|
+
|
|
55
|
+
// Input: Checked State Icon
|
|
56
|
+
&::after
|
|
57
|
+
top: 50%
|
|
58
|
+
left: 50%
|
|
59
|
+
opacity: 1
|
|
60
|
+
position: absolute
|
|
61
|
+
background-color: #fff
|
|
62
|
+
transition: opacity 300ms ease, background-color 300ms ease
|
|
63
|
+
|
|
64
|
+
// Radio: Inverse
|
|
65
|
+
&-inverse
|
|
66
|
+
opacity: .25
|
|
67
|
+
&, &:hover, &:checked
|
|
68
|
+
&, .btn:hover &
|
|
69
|
+
border-color: #fff
|
|
70
|
+
&:hover, &:checked, .btn:hover &
|
|
71
|
+
opacity: 1
|
|
72
|
+
&:checked
|
|
73
|
+
&, .btn:hover &
|
|
74
|
+
background: #fff
|
|
75
|
+
border-color: #fff
|
|
76
|
+
&::after
|
|
77
|
+
background: $green-dark
|
|
78
|
+
|
|
79
|
+
// Radio Button
|
|
80
|
+
&-radio
|
|
81
|
+
border-radius: 50%
|
|
82
|
+
|
|
83
|
+
// Radio: Dot
|
|
84
|
+
&::after
|
|
85
|
+
border-radius: 50%
|
|
86
|
+
background: #fff
|
|
87
|
+
+width-height(6px)
|
|
88
|
+
margin: -3px 0 0 -3px
|
|
89
|
+
|
|
90
|
+
// Radio Checkbox
|
|
91
|
+
&-checkbox
|
|
92
|
+
+extend('radio')
|
|
93
|
+
&::after
|
|
94
|
+
@extend .input-checkbox-icon
|
|
95
|
+
|
|
96
|
+
// Checkbox
|
|
97
|
+
&-checkbox
|
|
98
|
+
border-radius: 4px
|
|
99
|
+
|
|
100
|
+
// Checkbox: Checkmark Icon
|
|
101
|
+
&-icon,
|
|
102
|
+
&::after
|
|
103
|
+
border-radius: 0
|
|
104
|
+
+width-height(8px)
|
|
105
|
+
margin: -4px 0 0 -4px
|
|
106
|
+
+icon(checkmark)
|
|
@@ -31,9 +31,11 @@
|
|
|
31
31
|
|
|
32
32
|
&-title
|
|
33
33
|
line-height: 1
|
|
34
|
-
margin: 0 0
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
margin: 0 0 15px
|
|
35
|
+
&-border
|
|
36
|
+
+extend(title)
|
|
37
|
+
padding: 0 0 10px
|
|
38
|
+
border-bottom: 2px solid $border-color-lightest
|
|
37
39
|
|
|
38
40
|
&-ctas
|
|
39
41
|
background: $gray-lightest
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
body
|
|
1
|
+
.body
|
|
2
2
|
background: $gray-lightest
|
|
3
3
|
color: $gray-darker
|
|
4
4
|
font-family: $font-family
|
|
@@ -6,7 +6,7 @@ body
|
|
|
6
6
|
-webkit-font-smoothing: antialiased
|
|
7
7
|
-moz-osx-font-smoothing: grayscale
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
.link
|
|
10
10
|
cursor: pointer
|
|
11
11
|
text-decoration: none
|
|
12
12
|
color: $blue
|
|
@@ -30,9 +30,6 @@ a, .link
|
|
|
30
30
|
strong
|
|
31
31
|
font-weight: $bold
|
|
32
32
|
|
|
33
|
-
ul, ol
|
|
34
|
-
list-style: none
|
|
35
|
-
|
|
36
33
|
.list
|
|
37
34
|
list-style: circle
|
|
38
35
|
&, &-disc
|
data/styleguide/Gemfile.lock
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
PATH
|
|
2
2
|
remote: ..
|
|
3
3
|
specs:
|
|
4
|
-
shipyard-framework (0.5.
|
|
4
|
+
shipyard-framework (0.5.69)
|
|
5
5
|
actionview (~> 5.0)
|
|
6
6
|
sprockets-es6 (~> 0.9.2)
|
|
7
7
|
|
|
@@ -28,7 +28,7 @@ GEM
|
|
|
28
28
|
builder (3.2.3)
|
|
29
29
|
colorator (1.1.0)
|
|
30
30
|
concurrent-ruby (1.0.5)
|
|
31
|
-
crass (1.0.
|
|
31
|
+
crass (1.0.3)
|
|
32
32
|
erubi (1.7.0)
|
|
33
33
|
execjs (2.7.0)
|
|
34
34
|
extras (0.3.0)
|
|
@@ -81,3 +81,16 @@ hr
|
|
|
81
81
|
+component('modal-billing')
|
|
82
82
|
&-yearly-promo
|
|
83
83
|
text-transform: uppercase
|
|
84
|
+
|
|
85
|
+
+component('modal-downgrade')
|
|
86
|
+
&-coupon
|
|
87
|
+
padding: 0
|
|
88
|
+
margin: 0 4px !important
|
|
89
|
+
white-space: normal
|
|
90
|
+
&-txt
|
|
91
|
+
padding: 0 8px
|
|
92
|
+
font-family: $font-family
|
|
93
|
+
&-tag
|
|
94
|
+
padding: 5px
|
|
95
|
+
display: inline-block
|
|
96
|
+
border-radius: 3px 0 0 3px
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Checkboxes
|
|
3
|
+
labels:
|
|
4
|
+
- Nulla vitae elit libero, a pharetra augue.
|
|
5
|
+
- Cras mattis consectetur purus sit amet fermentum.
|
|
6
|
+
- Cum sociis natoque penatibus et magnis dis parturient montes.
|
|
7
|
+
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.
|
|
8
|
+
- Donec id elit non mi porta gravida at eget metus.
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
{% include page-heading.html page=page %}
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Default Checkbox Lists
|
|
16
|
+
<p class="text-light margin-bottom-md">Useful when you want to group a series of checkboxes together in a list (stacked by default).</p>
|
|
17
|
+
|
|
18
|
+
<ul class="input-list">
|
|
19
|
+
{% for label in page.labels %}
|
|
20
|
+
<li class="input-item">
|
|
21
|
+
<input id="checkbox-default-{{ forloop.index }}" name="checkbox-list" type="checkbox" class="input input-checkbox" {% if forloop.index == 1 %}checked{% endif %} />
|
|
22
|
+
<label for="checkbox-default-{{ forloop.index }}" class="input-label">{{ label }}</label>
|
|
23
|
+
</li>
|
|
24
|
+
{% endfor %}
|
|
25
|
+
</ul>
|
|
26
|
+
```html
|
|
27
|
+
<ul class="input-list">
|
|
28
|
+
<li class="input-item">
|
|
29
|
+
<input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox" checked />
|
|
30
|
+
<label for="checkbox-id" class="input-label">Checkbox Label</label>
|
|
31
|
+
</li>
|
|
32
|
+
</ul>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## Inline Checkbox Lists
|
|
38
|
+
<p class="text-light margin-bottom-md">Useful when you want to group a series of checkboxes together on a single line.</p>
|
|
39
|
+
|
|
40
|
+
<ul class="input-list">
|
|
41
|
+
{% for label in page.labels %}
|
|
42
|
+
<li class="input-item-inline">
|
|
43
|
+
<input id="checkbox-inline-{{ forloop.index }}" name="checkbox-list" type="checkbox" class="input input-checkbox" {% if forloop.index == 1 %}checked{% endif %} />
|
|
44
|
+
<label for="checkbox-inline-{{ forloop.index }}" class="input-label">Inline Label</label>
|
|
45
|
+
</li>
|
|
46
|
+
{% endfor %}
|
|
47
|
+
</ul>
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<ul class="input-list">
|
|
51
|
+
<li class="input-item-inline">
|
|
52
|
+
<input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox" checked />
|
|
53
|
+
<label for="checkbox-id" class="input-label">Checkbox Label</label>
|
|
54
|
+
</li>
|
|
55
|
+
</ul>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## Inverse Checkbox Lists
|
|
61
|
+
<p class="text-light margin-bottom-md">Useful when the checkboxes are displayed on a dark background.</p>
|
|
62
|
+
|
|
63
|
+
<div class="box-secondary box-padding bg-gray-darker">
|
|
64
|
+
<ul class="input-list">
|
|
65
|
+
{% for label in page.labels %}
|
|
66
|
+
<li class="input-item">
|
|
67
|
+
<input id="checkbox-inverse-{{ forloop.index }}" name="checkbox-inverse-list" type="checkbox" class="input input-checkbox input-checkbox-inverse" {% if forloop.index == 1 %}checked{% endif %} />
|
|
68
|
+
<label for="checkbox-inverse-{{ forloop.index }}" class="input-label-inverse">{{ label }}</label>
|
|
69
|
+
</li>
|
|
70
|
+
{% endfor %}
|
|
71
|
+
</ul>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<ul class="input-list">
|
|
76
|
+
<li class="input-item">
|
|
77
|
+
<input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox input-checkbox-inverse" checked />
|
|
78
|
+
<label for="checkbox-id" class="input-label-inverse">Checkbox Inverse Label</label>
|
|
79
|
+
</li>
|
|
80
|
+
</ul>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## Checkboxes Nested in Buttons
|
|
86
|
+
{: .margin-bottom-md }
|
|
87
|
+
|
|
88
|
+
<button class="btn btn-secondary margin-right-xs margin-bottom-xs">
|
|
89
|
+
<input type="checkbox" class="input input-checkbox margin-right-xxs" />
|
|
90
|
+
Unchecked
|
|
91
|
+
</button>
|
|
92
|
+
<button class="btn btn-secondary margin-right-xs margin-bottom-xs">
|
|
93
|
+
<input type="checkbox" class="input input-checkbox margin-right-xxs" checked />
|
|
94
|
+
Checked
|
|
95
|
+
</button>
|
|
96
|
+
<button class="btn btn-cta margin-right-xs margin-bottom-xs">
|
|
97
|
+
<input type="checkbox" class="input input-checkbox input-checkbox-inverse margin-right-xxs" />
|
|
98
|
+
Inverse Unchecked
|
|
99
|
+
</button>
|
|
100
|
+
<button class="btn btn-cta margin-right-xs margin-bottom-xs">
|
|
101
|
+
<input type="checkbox" class="input input-checkbox input-checkbox-inverse margin-right-xxs" checked />
|
|
102
|
+
Inverse Checked
|
|
103
|
+
</button>
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<!-- Secondary button with a checkbox in the unchecked state. -->
|
|
107
|
+
<button class="btn btn-secondary">
|
|
108
|
+
<input type="checkbox" class="input input-checkbox margin-right-xxs" />
|
|
109
|
+
Button Text
|
|
110
|
+
</button>
|
|
111
|
+
|
|
112
|
+
<!-- CTA button with a checkbox in the checked state. -->
|
|
113
|
+
<button class="btn btn-cta">
|
|
114
|
+
<input type="checkbox" class="input input-checkbox input-checkbox-inverse margin-right-xxs" checked />
|
|
115
|
+
Button Text
|
|
116
|
+
</button>
|
|
117
|
+
```
|
|
@@ -48,80 +48,6 @@ title: Shipyard Forms
|
|
|
48
48
|
</div>
|
|
49
49
|
</div>
|
|
50
50
|
</div>
|
|
51
|
-
<div class="input-group">
|
|
52
|
-
<div class="col-container margin-top-xs">
|
|
53
|
-
<div class="col">
|
|
54
|
-
<h2>Radio Buttons</h2>
|
|
55
|
-
<ul>
|
|
56
|
-
<li>
|
|
57
|
-
<input type="radio" class="input-radio" />
|
|
58
|
-
<label>Unchecked</label>
|
|
59
|
-
</li>
|
|
60
|
-
<li>
|
|
61
|
-
<input type="radio" class="input-radio" checked />
|
|
62
|
-
<label>Checked</label>
|
|
63
|
-
</li>
|
|
64
|
-
<li>
|
|
65
|
-
<input type="radio" class="input-radio input-radio-checked" checked />
|
|
66
|
-
<label>Checked w/ Icon</label>
|
|
67
|
-
</li>
|
|
68
|
-
<li>
|
|
69
|
-
<input type="radio" class="input-radio input-radio-inverse" />
|
|
70
|
-
<label>Inverse Unchecked</label>
|
|
71
|
-
</li>
|
|
72
|
-
<li>
|
|
73
|
-
<input type="radio" class="input-radio input-radio-inverse" checked />
|
|
74
|
-
<label>Inverse Checked</label>
|
|
75
|
-
</li>
|
|
76
|
-
<li>
|
|
77
|
-
<input type="radio" class="input-radio input-radio-inverse input-radio-checked" checked />
|
|
78
|
-
<label>Inverse Checked w/ Icon</label>
|
|
79
|
-
</li>
|
|
80
|
-
</ul>
|
|
81
|
-
</div>
|
|
82
|
-
<div class="col">
|
|
83
|
-
<h2>Radio Buttons Nested in Buttons</h2>
|
|
84
|
-
<ul>
|
|
85
|
-
<li>
|
|
86
|
-
<button class="btn btn-secondary">
|
|
87
|
-
<input type="radio" class="input-radio margin-right-xxs" />
|
|
88
|
-
Unchecked
|
|
89
|
-
</button>
|
|
90
|
-
</li>
|
|
91
|
-
<li>
|
|
92
|
-
<button class="btn btn-secondary">
|
|
93
|
-
<input type="radio" class="input-radio margin-right-xxs" checked />
|
|
94
|
-
Checked
|
|
95
|
-
</button>
|
|
96
|
-
</li>
|
|
97
|
-
<li>
|
|
98
|
-
<button class="btn btn-secondary">
|
|
99
|
-
<input type="radio" class="input-radio input-radio-checked margin-right-xxs" checked />
|
|
100
|
-
Checked w/ Icon
|
|
101
|
-
</button>
|
|
102
|
-
</li>
|
|
103
|
-
<li>
|
|
104
|
-
<button class="btn btn-cta">
|
|
105
|
-
<input type="radio" class="input-radio input-radio-inverse margin-right-xxs" />
|
|
106
|
-
Inverse Unchecked
|
|
107
|
-
</button>
|
|
108
|
-
</li>
|
|
109
|
-
<li>
|
|
110
|
-
<button class="btn btn-cta">
|
|
111
|
-
<input type="radio" class="input-radio input-radio-inverse margin-right-xxs" checked />
|
|
112
|
-
Inverse Checked
|
|
113
|
-
</button>
|
|
114
|
-
</li>
|
|
115
|
-
<li>
|
|
116
|
-
<button class="btn btn-cta">
|
|
117
|
-
<input type="radio" class="input-radio input-radio-inverse input-radio-checked margin-right-xxs" checked />
|
|
118
|
-
Inverse Checked w/ Icon
|
|
119
|
-
</button>
|
|
120
|
-
</li>
|
|
121
|
-
</ul>
|
|
122
|
-
</div>
|
|
123
|
-
</div>
|
|
124
|
-
</div>
|
|
125
51
|
|
|
126
52
|
<hr />
|
|
127
53
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Shipyard Components
|
|
3
|
-
components: [Boxes, Buttons, Empty States, Alerts, Notes, Forms, Icons, Modals, Tooltips, Code, Tables]
|
|
3
|
+
components: [Boxes, Buttons, Empty States, Alerts, Notes, Forms, Radio Buttons, Checkboxes, Icons, Modals, Tooltips, Code, Tables]
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
{% include page-heading.html page=page %}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<div class="modal-container {{ include.css_class }}" modal="example">
|
|
2
2
|
<div class="modal" role="dialog">
|
|
3
3
|
<div class="modal-content">
|
|
4
|
-
<div class="modal-title">
|
|
4
|
+
<div class="modal-title-border margin-bottom-x1-md">
|
|
5
5
|
<h1 class="text-lg text-x1-xl">Billing Info</h1>
|
|
6
6
|
</div>
|
|
7
7
|
<form>
|
|
@@ -7,7 +7,7 @@ title: Shipyard Modal Example
|
|
|
7
7
|
<div class="modal-container" modal="example-small">
|
|
8
8
|
<div class="modal modal-sm modal-billing" role="dialog">
|
|
9
9
|
<div class="modal-content">
|
|
10
|
-
<div class="modal-title margin-bottom-md margin-bottom-x1-lg">
|
|
10
|
+
<div class="modal-title-border margin-bottom-md margin-bottom-x1-lg">
|
|
11
11
|
<div class="col-container">
|
|
12
12
|
<h1 class="text-lg text-x1-xl col">Payment Period</h1>
|
|
13
13
|
<p class="col text-light medium align-right display-none display-x1-block">
|
|
@@ -18,11 +18,11 @@ title: Shipyard Modal Example
|
|
|
18
18
|
</div>
|
|
19
19
|
</div>
|
|
20
20
|
<button class="btn btn-cta btn-sm btn-x1-md margin-right-xs margin-right-x1-sm margin-bottom-xs margin-bottom-x1-none">
|
|
21
|
-
<input type="radio" class="input
|
|
21
|
+
<input type="radio" class="input input-radio-checkbox input-radio-inverse margin-right-xs" checked />
|
|
22
22
|
Monthly — $39
|
|
23
23
|
</button>
|
|
24
24
|
<button class="btn btn-secondary-link btn-sm btn-x1-md">
|
|
25
|
-
<input type="radio" class="input-radio margin-right-xs" />
|
|
25
|
+
<input type="radio" class="input input-radio-checkbox margin-right-xs" />
|
|
26
26
|
Yearly — $390
|
|
27
27
|
<span class="btn btn-cta btn-rounded btn-xxs margin-left-xs modal-billing-yearly-promo">2 Months Free</span>
|
|
28
28
|
{% icon :tag, class: 'icon-inverse' %}
|
|
@@ -30,7 +30,7 @@ title: Shipyard Modal Example
|
|
|
30
30
|
<p class="text-light margin-top-xs margin-top-x1-sm" markdown="1">
|
|
31
31
|
Your new subscription will be prorated on your next invoice. If you have any questions, don't hesitate to <a href="#" class="medium">contact our support team</a>.
|
|
32
32
|
</p>
|
|
33
|
-
<div class="modal-title margin-top-lg margin-bottom-md margin-bottom-x1-lg">
|
|
33
|
+
<div class="modal-title-border margin-top-lg margin-bottom-md margin-bottom-x1-lg">
|
|
34
34
|
<h1 class="text-lg text-x1-xl">Payment Info</h1>
|
|
35
35
|
</div>
|
|
36
36
|
<form>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard Modal Example
|
|
3
|
+
answers:
|
|
4
|
+
- We're happy with Codeship, but we don't need it anymore.
|
|
5
|
+
- We've chosen another CI/CD provider.
|
|
6
|
+
- Codeship is too expensive for our needs.
|
|
7
|
+
- Codeship is missing a feature that we needed.
|
|
8
|
+
- We're unsatisfied with our experience.
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
{% include page-heading.html page=page %}
|
|
12
|
+
|
|
13
|
+
<div class="modal-container" modal="example-small">
|
|
14
|
+
<div class="modal modal-sm modal-billing" role="dialog">
|
|
15
|
+
<div class="alert alert-success margin-bottom-none rounded-top medium text-sm">
|
|
16
|
+
We'd like to offer you
|
|
17
|
+
<span class="modal-downgrade-coupon code-inline strong"><span class="modal-downgrade-tag bg-green-dark margin-right-none rounded-left">{% icon :tag, class: 'icon-center modal-downgrade-tag-icon' %}</span><span class="modal-downgrade-coupon-txt">50% OFF</span></span>
|
|
18
|
+
one month if you decide to stay.
|
|
19
|
+
<button class="alert-cta btn btn-cta btn-sm" modal-close>Apply Discount</button>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="modal-content rounded-0">
|
|
22
|
+
<div class="modal-title">
|
|
23
|
+
<h1 class="text-lg text-x1-xl">Codeship Basic Downgrade</h1>
|
|
24
|
+
</div>
|
|
25
|
+
<p class="text-light margin-bottom-md">
|
|
26
|
+
We'd appreciate it if you would take a moment to share your thoughts
|
|
27
|
+
and experience on why Codeship wasn't a good fit for your team.
|
|
28
|
+
</p>
|
|
29
|
+
<form>
|
|
30
|
+
<ul class="input-list">
|
|
31
|
+
{% for answer in page.answers %}
|
|
32
|
+
<li class="input-item">
|
|
33
|
+
<input id="checkbox-{{ forloop.index }}" name="checkbox-name" type="checkbox" class="input input-checkbox" />
|
|
34
|
+
<label for="checkbox-{{ forloop.index }}" class="input-label">{{ answer }}</label>
|
|
35
|
+
</li>
|
|
36
|
+
{% endfor %}
|
|
37
|
+
</ul>
|
|
38
|
+
<div class="input-group">
|
|
39
|
+
<label class="label">Please provide additional details:</label>
|
|
40
|
+
<textarea class="input input-text input-full input-lg" placeholder="How could we have made your experience better?"></textarea>
|
|
41
|
+
</div>
|
|
42
|
+
</form>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="modal-ctas">
|
|
45
|
+
<button class="btn btn-caution btn-sm btn-x1-md margin-right-xxs margin-right-x1-xs" modal-close>
|
|
46
|
+
<span class="display-none display-x1-inline">Confirm</span> Downgrade
|
|
47
|
+
</button>
|
|
48
|
+
<button class="btn btn-cta btn-sm btn-x1-md margin-right-xxs margin-right-x1-xs" modal-close>Apply Discount</button>
|
|
49
|
+
<button class="btn btn-secondary btn-sm btn-x1-md" modal-close>Cancel</button>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Radio Buttons
|
|
3
|
+
labels:
|
|
4
|
+
- Nulla vitae elit libero, a pharetra augue.
|
|
5
|
+
- Cras mattis consectetur purus sit amet fermentum.
|
|
6
|
+
- Cum sociis natoque penatibus et magnis dis parturient montes.
|
|
7
|
+
- Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.
|
|
8
|
+
- Donec id elit non mi porta gravida at eget metus.
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
{% include page-heading.html page=page %}
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Default Radio-Button Lists
|
|
16
|
+
<p class="text-light margin-bottom-md">Useful when you want to group a series of radio buttons together in a list (stacked by default).</p>
|
|
17
|
+
|
|
18
|
+
<ul class="input-list">
|
|
19
|
+
{% for label in page.labels %}
|
|
20
|
+
<li class="input-item">
|
|
21
|
+
<input id="radio-default-{{ forloop.index }}" name="radio-list" type="radio" class="input input-radio" {% if forloop.index == 1 %}checked{% endif %} />
|
|
22
|
+
<label for="radio-default-{{ forloop.index }}" class="input-label">{{ label }}</label>
|
|
23
|
+
</li>
|
|
24
|
+
{% endfor %}
|
|
25
|
+
</ul>
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<ul class="input-list">
|
|
29
|
+
<li class="input-item">
|
|
30
|
+
<input id="radio-id" name="radio-name" type="radio" class="input input-radio" checked />
|
|
31
|
+
<label for="radio-id" class="input-label">Radio Button Label</label>
|
|
32
|
+
</li>
|
|
33
|
+
</ul>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Inline Radio-Button Lists
|
|
39
|
+
<p class="text-light margin-bottom-md">Useful when you want to group a series of radio buttons together on a single line.</p>
|
|
40
|
+
|
|
41
|
+
<ul class="input-list">
|
|
42
|
+
{% for label in page.labels %}
|
|
43
|
+
<li class="input-item-inline">
|
|
44
|
+
<input id="radio-inline-{{ forloop.index }}" name="radio-list" type="radio" class="input input-radio" {% if forloop.index == 1 %}checked{% endif %} />
|
|
45
|
+
<label for="radio-inline-{{ forloop.index }}" class="input-label">Inline Label</label>
|
|
46
|
+
</li>
|
|
47
|
+
{% endfor %}
|
|
48
|
+
</ul>
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<ul class="input-list">
|
|
52
|
+
<li class="input-item-inline">
|
|
53
|
+
<input id="radio-id" name="radio-name" type="radio" class="input input-radio" checked />
|
|
54
|
+
<label for="radio-id" class="input-label">Radio Button Label</label>
|
|
55
|
+
</li>
|
|
56
|
+
</ul>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Inverse Radio-Button Lists
|
|
62
|
+
<p class="text-light margin-bottom-md">Useful when the radio buttons are displayed on a dark background.</p>
|
|
63
|
+
<div class="box-secondary box-padding bg-gray-darker">
|
|
64
|
+
<ul class="input-list">
|
|
65
|
+
{% for label in page.labels %}
|
|
66
|
+
<li class="input-item">
|
|
67
|
+
<input id="radio-inverse-{{ forloop.index }}" name="radio-inverse-list" type="radio" class="input input-radio input-radio-inverse" {% if forloop.index == 1 %}checked{% endif %} />
|
|
68
|
+
<label for="radio-inverse-{{ forloop.index }}" class="input-label-inverse">{{ label }}</label>
|
|
69
|
+
</li>
|
|
70
|
+
{% endfor %}
|
|
71
|
+
</ul>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<ul class="input-list">
|
|
76
|
+
<li class="input-item">
|
|
77
|
+
<input id="radio-id" name="radio-name" type="radio" class="input input-radio input-radio-inverse" checked />
|
|
78
|
+
<label for="radio-id" class="input-label-inverse">Radio Button Inverse Label</label>
|
|
79
|
+
</li>
|
|
80
|
+
</ul>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## Radio-Checkbox Button Lists
|
|
86
|
+
<p class="text-light margin-bottom-md">Yep, that's exactly what it sounds like. It behaves like a radio button but looks a bit like a checkbox. Fancy!</p>
|
|
87
|
+
|
|
88
|
+
<ul class="input-list">
|
|
89
|
+
{% for label in page.labels %}
|
|
90
|
+
<li class="input-item">
|
|
91
|
+
<input id="radio-checkbox-{{ forloop.index }}" name="radio-list" type="radio" class="input input-radio-checkbox" {% if forloop.index == 1 %}checked{% endif %} />
|
|
92
|
+
<label for="radio-checkbox-{{ forloop.index }}" class="input-label">{{ label }}</label>
|
|
93
|
+
</li>
|
|
94
|
+
{% endfor %}
|
|
95
|
+
</ul>
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<ul class="input-list">
|
|
99
|
+
<li class="input-item">
|
|
100
|
+
<input id="radio-id" name="radio-name" type="radio" class="input input-radio-checkbox" checked />
|
|
101
|
+
<label for="radio-id" class="input-label">Radio Button Label</label>
|
|
102
|
+
</li>
|
|
103
|
+
</ul>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
## Radio Buttons Nested in Buttons
|
|
109
|
+
{: .margin-bottom-md }
|
|
110
|
+
|
|
111
|
+
<button class="btn btn-secondary margin-right-xs margin-bottom-xs">
|
|
112
|
+
<input type="radio" class="input input-radio margin-right-xxs" />
|
|
113
|
+
Unchecked
|
|
114
|
+
</button>
|
|
115
|
+
<button class="btn btn-secondary margin-right-xs margin-bottom-xs">
|
|
116
|
+
<input type="radio" class="input input-radio margin-right-xxs" checked />
|
|
117
|
+
Checked
|
|
118
|
+
</button>
|
|
119
|
+
<button class="btn btn-secondary margin-right-xs margin-bottom-xs">
|
|
120
|
+
<input type="radio" class="input input-radio-checkbox margin-right-xxs" checked />
|
|
121
|
+
Checked w/ Icon
|
|
122
|
+
</button>
|
|
123
|
+
<button class="btn btn-cta margin-right-xs margin-bottom-xs">
|
|
124
|
+
<input type="radio" class="input input-radio input-radio-inverse margin-right-xxs" />
|
|
125
|
+
Inverse Unchecked
|
|
126
|
+
</button>
|
|
127
|
+
<button class="btn btn-cta margin-right-xs margin-bottom-xs">
|
|
128
|
+
<input type="radio" class="input input-radio input-radio-inverse margin-right-xxs" checked />
|
|
129
|
+
Inverse Checked
|
|
130
|
+
</button>
|
|
131
|
+
<button class="btn btn-cta margin-right-xs margin-bottom-xs">
|
|
132
|
+
<input type="radio" class="input input-radio-checkbox input-radio-inverse margin-right-xs" checked />
|
|
133
|
+
Inverse Checked w/ Icon
|
|
134
|
+
</button>
|
|
135
|
+
|
|
136
|
+
```html
|
|
137
|
+
<!-- Secondary button with a radio button in the unchecked state. -->
|
|
138
|
+
<button class="btn btn-secondary">
|
|
139
|
+
<input type="radio" class="input input-radio margin-right-xxs" />
|
|
140
|
+
Button Text
|
|
141
|
+
</button>
|
|
142
|
+
|
|
143
|
+
<!-- CTA button with a radio-checkbox in the checked state. -->
|
|
144
|
+
<button class="btn btn-cta">
|
|
145
|
+
<input type="radio" class="input input-radio-checkbox input-radio-inverse margin-right-xxs" checked />
|
|
146
|
+
Button Text
|
|
147
|
+
</button>
|
|
148
|
+
```
|
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.5.
|
|
4
|
+
version: 0.5.69
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Codeship
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-11-
|
|
11
|
+
date: 2017-11-14 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionview
|
|
@@ -221,7 +221,7 @@ files:
|
|
|
221
221
|
- assets/stylesheets/shipyard/components/_header.sass
|
|
222
222
|
- assets/stylesheets/shipyard/components/_hero.sass
|
|
223
223
|
- assets/stylesheets/shipyard/components/_icons.sass
|
|
224
|
-
- assets/stylesheets/shipyard/components/_input-
|
|
224
|
+
- assets/stylesheets/shipyard/components/_input-radio-checkbox.sass
|
|
225
225
|
- assets/stylesheets/shipyard/components/_input-switch.sass
|
|
226
226
|
- assets/stylesheets/shipyard/components/_modals.sass
|
|
227
227
|
- assets/stylesheets/shipyard/components/_notes.sass
|
|
@@ -312,6 +312,7 @@ files:
|
|
|
312
312
|
- styleguide/components/alerts.md
|
|
313
313
|
- styleguide/components/boxes.md
|
|
314
314
|
- styleguide/components/buttons.md
|
|
315
|
+
- styleguide/components/checkboxes.md
|
|
315
316
|
- styleguide/components/code.html
|
|
316
317
|
- styleguide/components/empty-states.html
|
|
317
318
|
- styleguide/components/forms.html
|
|
@@ -319,10 +320,12 @@ files:
|
|
|
319
320
|
- styleguide/components/index.md
|
|
320
321
|
- styleguide/components/modals/_modal.html
|
|
321
322
|
- styleguide/components/modals/example-billing.html
|
|
323
|
+
- styleguide/components/modals/example-downgrade.html
|
|
322
324
|
- styleguide/components/modals/example-small.html
|
|
323
325
|
- styleguide/components/modals/example-tall.html
|
|
324
326
|
- styleguide/components/modals/index.md
|
|
325
327
|
- styleguide/components/notes.md
|
|
328
|
+
- styleguide/components/radio-buttons.md
|
|
326
329
|
- styleguide/components/tables.md
|
|
327
330
|
- styleguide/components/tooltips.md
|
|
328
331
|
- styleguide/index.md
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
+component('input-radio')
|
|
2
|
-
outline: none
|
|
3
|
-
position: relative
|
|
4
|
-
cursor: pointer
|
|
5
|
-
border-radius: 50%
|
|
6
|
-
vertical-align: middle
|
|
7
|
-
top: -1px
|
|
8
|
-
border: 2px solid $border-color
|
|
9
|
-
transition: background-color 300ms ease, border-color 300ms ease, opacity 300ms ease
|
|
10
|
-
+appearance(none)
|
|
11
|
-
+width-height(16px)
|
|
12
|
-
&:hover, .btn:hover &
|
|
13
|
-
border-color: darken($gray-lightest, 17%)
|
|
14
|
-
&:checked
|
|
15
|
-
&, .btn:hover &
|
|
16
|
-
background: $green
|
|
17
|
-
border-color: $green
|
|
18
|
-
|
|
19
|
-
// Radio: Dot
|
|
20
|
-
&::after
|
|
21
|
-
content: ''
|
|
22
|
-
opacity: 0
|
|
23
|
-
border-radius: 50%
|
|
24
|
-
background: #fff
|
|
25
|
-
+width-height(6px)
|
|
26
|
-
position: absolute
|
|
27
|
-
top: 50%
|
|
28
|
-
left: 50%
|
|
29
|
-
margin: -3px 0 0 -3px
|
|
30
|
-
transition: opacity 300ms ease
|
|
31
|
-
&:checked::after
|
|
32
|
-
opacity: 1
|
|
33
|
-
|
|
34
|
-
// Radio: Inverse
|
|
35
|
-
&-inverse
|
|
36
|
-
opacity: .6
|
|
37
|
-
&, &:hover, &:checked
|
|
38
|
-
&, .btn:hover &
|
|
39
|
-
border-color: #fff
|
|
40
|
-
&:hover, &:checked, .btn:hover &
|
|
41
|
-
opacity: 1
|
|
42
|
-
&:checked
|
|
43
|
-
&, .btn:hover &
|
|
44
|
-
background: #fff
|
|
45
|
-
border-color: #fff
|
|
46
|
-
&::after
|
|
47
|
-
background: $green-dark
|
|
48
|
-
|
|
49
|
-
// Radio: Checkmark Icon
|
|
50
|
-
&-checked:checked
|
|
51
|
-
&::after
|
|
52
|
-
border-radius: 0
|
|
53
|
-
+width-height(8px)
|
|
54
|
-
margin: -4px 0 0 -4px
|
|
55
|
-
+icon(checkmark)
|