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