shipyard-framework 0.5.57 → 0.5.58
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.sass +1 -0
- data/assets/stylesheets/shipyard/_mixins.sass +2 -1
- data/assets/stylesheets/shipyard/components/_buttons.sass +3 -0
- data/assets/stylesheets/shipyard/components/_forms.sass +9 -5
- data/assets/stylesheets/shipyard/components/_input-radios.sass +55 -0
- data/assets/stylesheets/shipyard/components/_modals.sass +7 -2
- data/assets/stylesheets/shipyard/mixins/_icon.sass +4 -0
- data/assets/stylesheets/shipyard/mixins/_prefixed.sass +4 -0
- data/assets/stylesheets/shipyard/utilities/_padding.sass +10 -1
- data/assets/stylesheets/shipyard/variables/_components.scss +3 -3
- data/lib/shipyard-framework/version.rb +1 -1
- data/styleguide/Gemfile.lock +2 -2
- data/styleguide/_assets/css/views.sass +4 -0
- data/styleguide/_assets/img/arrows/down.svg +3 -0
- data/styleguide/_assets/img/checkmark.svg +3 -0
- data/styleguide/_config.yml +3 -0
- data/styleguide/components/buttons.md +1 -0
- data/styleguide/components/forms.html +74 -0
- data/styleguide/components/modals/_modal.html +90 -9
- data/styleguide/components/modals/example-billing.html +80 -0
- data/styleguide/components/modals/example-small.html +19 -0
- data/styleguide/components/modals/{example-1.html → example-tall.html} +0 -0
- metadata +9 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 69c240299eaba59316431e482a3edee0429d4289
|
|
4
|
+
data.tar.gz: d6418b3a17303b81661fd0430efc1805f3bba44f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 6a439c2a4be1f177da24374feb7603c834a4fffdbd6b981a96c383ffb870e9059ec87c4eb6799cf9ac44e1c93452db987ef455936fd03ac360cdf6267bc2469b
|
|
7
|
+
data.tar.gz: d4bb10e53f4d703292d01360e58a40721a3b10e135ea0c5dd9e451e15afe0ffcdd17ca9ccddc10cf65648c101e9d24b34fe2d4b083cc24e12a3b7b3736b7354b
|
|
@@ -6,6 +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-radios
|
|
9
10
|
@import shipyard/components/input-switch
|
|
10
11
|
@import shipyard/components/empty
|
|
11
12
|
@import shipyard/components/modals
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
@import shipyard/mixins/prefixed
|
|
1
2
|
@import shipyard/mixins/box-model
|
|
2
3
|
@import shipyard/mixins/selectors
|
|
3
4
|
@import shipyard/mixins/responsive
|
|
4
5
|
@import shipyard/mixins/components
|
|
5
6
|
@import shipyard/mixins/positioning
|
|
6
|
-
@import shipyard/mixins/
|
|
7
|
+
@import shipyard/mixins/icon
|
|
@@ -120,6 +120,9 @@
|
|
|
120
120
|
&-secondary
|
|
121
121
|
+btn-color(none, $text-color-light, darken($gray-lightest, 7%))
|
|
122
122
|
+btn-hover(none, darken($text-color-light, 15%), darken($gray-lightest, 17%))
|
|
123
|
+
&-link
|
|
124
|
+
+btn-color(none, $blue, darken($gray-lightest, 7%))
|
|
125
|
+
+btn-hover(none, $blue-dark, darken($gray-lightest, 17%))
|
|
123
126
|
&-dark
|
|
124
127
|
+btn-color(none, darken($text-color-light, 5%), lighten($gray-light, 5%))
|
|
125
128
|
+btn-hover(none, darken($text-color-light, 20%), darken($gray-light, 5%))
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
font-size: 16px
|
|
36
36
|
color: $text-color-lighter
|
|
37
37
|
outline: none
|
|
38
|
+
transition: border-color 300ms ease
|
|
38
39
|
+border-radius
|
|
39
40
|
+appearance(none)
|
|
40
41
|
+respond-to(padding, (x0: 0 15px, x1: 0 20px))
|
|
@@ -47,18 +48,21 @@
|
|
|
47
48
|
&-container
|
|
48
49
|
position: relative
|
|
49
50
|
&::after
|
|
50
|
-
+width-height(30px)
|
|
51
51
|
display: block
|
|
52
52
|
position: absolute
|
|
53
53
|
top: 50%
|
|
54
|
-
right:
|
|
54
|
+
right: 18px
|
|
55
55
|
content: " "
|
|
56
|
-
background: asset-url('arrows/down.svg') no-repeat center center
|
|
57
|
-
background-size: 10px 6px
|
|
58
56
|
text-align: center
|
|
59
57
|
font-weight: $bold
|
|
60
|
-
margin-top: -
|
|
58
|
+
margin-top: -3px
|
|
61
59
|
pointer-events: none
|
|
60
|
+
transition: background-color 300ms ease
|
|
61
|
+
+width-height(10px, 6px)
|
|
62
|
+
+icon('arrows/down', $border-color)
|
|
63
|
+
&:hover
|
|
64
|
+
&::after
|
|
65
|
+
background-color: $border-color-dark
|
|
62
66
|
&-chosen
|
|
63
67
|
color: $text-color
|
|
64
68
|
font-weight: $medium
|
|
@@ -0,0 +1,55 @@
|
|
|
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)
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
width: 100%
|
|
3
3
|
max-width: 800px
|
|
4
4
|
margin: auto
|
|
5
|
+
&-sm
|
|
6
|
+
max-width: 660px
|
|
5
7
|
|
|
6
8
|
&-open
|
|
7
9
|
overflow: hidden
|
|
@@ -12,6 +14,7 @@
|
|
|
12
14
|
left: 0
|
|
13
15
|
right: 0
|
|
14
16
|
bottom: 0
|
|
17
|
+
padding: 10px
|
|
15
18
|
display: flex
|
|
16
19
|
overflow: auto
|
|
17
20
|
position: fixed
|
|
@@ -20,7 +23,6 @@
|
|
|
20
23
|
background: rgba($gray-darkest,.9)
|
|
21
24
|
transition: 300ms padding ease
|
|
22
25
|
-webkit-overflow-scrolling: touch
|
|
23
|
-
+respond-to(padding, (x0: 5px, x1: 10px))
|
|
24
26
|
|
|
25
27
|
&-content
|
|
26
28
|
background: #fff
|
|
@@ -28,7 +30,10 @@
|
|
|
28
30
|
+respond-to(padding, (x0: 15px, x1: 20px, x2: 30px))
|
|
29
31
|
|
|
30
32
|
&-title
|
|
31
|
-
|
|
33
|
+
line-height: 1
|
|
34
|
+
margin: 0 0 20px
|
|
35
|
+
padding: 0 0 10px
|
|
36
|
+
border-bottom: 2px solid $border-color-lightest
|
|
32
37
|
|
|
33
38
|
&-ctas
|
|
34
39
|
background: $gray-lightest
|
|
@@ -1,7 +1,16 @@
|
|
|
1
1
|
.padding
|
|
2
|
+
$sizes: (none: 0, xxs: 5px, xs: 10px, sm: 15px, md: 20px, lg: 30px, xl: 40px, xxl: 50px)
|
|
3
|
+
|
|
4
|
+
// Outputs: .padding-none, .padding-x1-none, .padding-sm, .padding-x1-sm, etc...
|
|
5
|
+
+all-media-sizes
|
|
6
|
+
@each $size, $value in $sizes
|
|
7
|
+
&-#{$size}
|
|
8
|
+
padding: $value
|
|
9
|
+
|
|
10
|
+
// Outputs: .padding-top-sm, .padding-x1-none, .padding-sm, .padding-x1-sm, etc...
|
|
2
11
|
@each $direction in (top, right, bottom, left)
|
|
3
12
|
&-#{$direction}
|
|
4
13
|
+all-media-sizes
|
|
5
|
-
@each $size, $value in
|
|
14
|
+
@each $size, $value in $sizes
|
|
6
15
|
&-#{$size}
|
|
7
16
|
padding-#{$direction}: $value
|
data/styleguide/Gemfile.lock
CHANGED
data/styleguide/_config.yml
CHANGED
|
@@ -12,6 +12,7 @@ title: Shipyard Buttons
|
|
|
12
12
|
{% btn Primary, :primary %}
|
|
13
13
|
{% btn Primary Dark, :primary_dark %}
|
|
14
14
|
{% btn Secondary, :secondary %}
|
|
15
|
+
{% btn Secondary Link, :secondary_link %}
|
|
15
16
|
{% btn Secondary Dark, :secondary_dark %}
|
|
16
17
|
{% btn Disabled, :disabled %}
|
|
17
18
|
{% btn CTA, :cta %}
|
|
@@ -48,6 +48,80 @@ 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>
|
|
51
125
|
|
|
52
126
|
<hr />
|
|
53
127
|
|
|
@@ -2,18 +2,99 @@
|
|
|
2
2
|
<div class="modal" role="dialog">
|
|
3
3
|
<div class="modal-content">
|
|
4
4
|
<div class="modal-title">
|
|
5
|
-
<h1>
|
|
5
|
+
<h1 class="text-lg text-x1-xl">Billing Info</h1>
|
|
6
6
|
</div>
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
<form>
|
|
8
|
+
<div class="col-container margin-bottom-md">
|
|
9
|
+
<div class="col">
|
|
10
|
+
<label class="label">First Name</label>
|
|
11
|
+
<div class="input-required">
|
|
12
|
+
<input type="text" class="input input-text input-full" />
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="col">
|
|
16
|
+
<label class="label">Last Name</label>
|
|
17
|
+
<div class="input-required">
|
|
18
|
+
<input type="text" class="input input-text input-full" />
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="col-container margin-bottom-md">
|
|
23
|
+
<div class="col col-100 col-x1-50 margin-bottom-sm margin-bottom-x1-none">
|
|
24
|
+
<label class="label">Email Address</label>
|
|
25
|
+
<input type="text" class="input input-text input-full" />
|
|
26
|
+
</div>
|
|
27
|
+
<div class="col col-100 col-x1-50">
|
|
28
|
+
<label class="label">Phone Number</label>
|
|
29
|
+
<div class="input-required">
|
|
30
|
+
<input type="text" class="input input-text input-full" />
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="col-container margin-bottom-md">
|
|
35
|
+
<div class="col col-100 margin-bottom-sm">
|
|
36
|
+
<label class="label">Billing Address</label>
|
|
37
|
+
<input type="text" class="input input-text input-full" placeholder="Company Name" />
|
|
38
|
+
</div>
|
|
39
|
+
<div class="col col-100 margin-bottom-sm">
|
|
40
|
+
<input type="text" class="input input-text input-full" placeholder="Street Address" />
|
|
41
|
+
</div>
|
|
42
|
+
<div class="col col-100 col-x1-33 margin-bottom-sm">
|
|
43
|
+
<div class="input-required">
|
|
44
|
+
<input type="text" class="input input-text input-full" placeholder="Postal Code" />
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="col col-50 col-x1-33 margin-bottom-sm">
|
|
48
|
+
<input type="text" class="input input-text input-full" placeholder="City" />
|
|
49
|
+
</div>
|
|
50
|
+
<div class="col col-50 col-x1-33 margin-bottom-sm">
|
|
51
|
+
<input type="text" class="input input-text input-full" placeholder="State" />
|
|
52
|
+
</div>
|
|
53
|
+
<div class="col col-100">
|
|
54
|
+
<div class="input-required">
|
|
55
|
+
<div class="input-select-container">
|
|
56
|
+
<select class="input input-select">
|
|
57
|
+
<option class="input-option-placeholder">Country</option>
|
|
58
|
+
<option>United States of America</option>
|
|
59
|
+
<option>France</option>
|
|
60
|
+
<option>Germany</option>
|
|
61
|
+
<option>Austria</option>
|
|
62
|
+
</select>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="col-container margin-bottom-md">
|
|
68
|
+
<div class="col">
|
|
69
|
+
<label class="label">Tax Information</label>
|
|
70
|
+
<input type="text" class="input input-text input-full" placeholder="VAT Number" />
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="col-container margin-bottom-sm margin-bottom-x1-none">
|
|
74
|
+
<div class="col">
|
|
75
|
+
<label class="label">Additional Invoice Information</label>
|
|
76
|
+
<p class="label-note">This information will appear on each invoice. Don't include any confidential financial information.</p>
|
|
77
|
+
<input type="text" class="input input-text input-full" placeholder="e.g. Invoice notes, accounts payable info, additional address info, etc..." />
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</form>
|
|
13
81
|
</div>
|
|
14
82
|
<div class="modal-ctas">
|
|
15
|
-
<
|
|
16
|
-
|
|
83
|
+
<div class="col-container-nowrap">
|
|
84
|
+
<div class="col col-100">
|
|
85
|
+
<button class="btn btn-primary btn-sm btn-x1-md" modal-close>
|
|
86
|
+
Save
|
|
87
|
+
<span class="display-none display-x1-inline">& Close</span>
|
|
88
|
+
</button>
|
|
89
|
+
<button class="btn btn-secondary btn-sm btn-x1-md margin-left-xxs margin-left-x1-xs" modal-close>Cancel</button>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="col align-right">
|
|
92
|
+
<span class="btn-sm btn-x1-md white-space-nowrap padding-none">
|
|
93
|
+
{% icon :lock, class: 'green-dark icon-center margin-right-xxs' %}
|
|
94
|
+
<span class="text-sm text-lighter medium">Secure Server</span>
|
|
95
|
+
</span>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
17
98
|
</div>
|
|
18
99
|
</div>
|
|
19
100
|
</div>
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard Modal Example
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
{% include page-heading.html page=page %}
|
|
6
|
+
|
|
7
|
+
<div class="modal-container" modal="example-small">
|
|
8
|
+
<div class="modal modal-sm modal-billing" role="dialog">
|
|
9
|
+
<div class="modal-content">
|
|
10
|
+
<div class="modal-title margin-bottom-md margin-bottom-x1-lg">
|
|
11
|
+
<div class="col-container">
|
|
12
|
+
<h1 class="text-lg text-x1-xl col">Payment Period</h1>
|
|
13
|
+
<p class="col text-light medium align-right display-none display-x1-block">
|
|
14
|
+
<span class="strong green-dark">1</span> Concurrent Build
|
|
15
|
+
<span class="bullet">&</span>
|
|
16
|
+
<span class="strong green-dark">1</span> Test Pipeline
|
|
17
|
+
</p>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
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-radio input-radio-inverse input-radio-checked margin-right-xs" checked />
|
|
22
|
+
Monthly — $39
|
|
23
|
+
</button>
|
|
24
|
+
<button class="btn btn-secondary-link btn-sm btn-x1-md">
|
|
25
|
+
<input type="radio" class="input-radio margin-right-xs" />
|
|
26
|
+
Yearly — $390
|
|
27
|
+
<span class="btn btn-cta btn-rounded btn-xxs margin-left-xs modal-billing-yearly-promo">2 Months Free</span>
|
|
28
|
+
{% icon :tag, class: 'icon-inverse' %}
|
|
29
|
+
</button>
|
|
30
|
+
<p class="text-light margin-top-xs margin-top-x1-sm" markdown="1">
|
|
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
|
+
</p>
|
|
33
|
+
<div class="modal-title margin-top-lg margin-bottom-md margin-bottom-x1-lg">
|
|
34
|
+
<h1 class="text-lg text-x1-xl">Payment Info</h1>
|
|
35
|
+
</div>
|
|
36
|
+
<form>
|
|
37
|
+
<div class="input-required">
|
|
38
|
+
<input type="text" class="input input-text input-full" placeholder="Card Number" />
|
|
39
|
+
</div>
|
|
40
|
+
<div class="col-container margin-top-md">
|
|
41
|
+
<div class="col col-50 col-x1-33">
|
|
42
|
+
<label class="label">Expiry Date</label>
|
|
43
|
+
<div class="input-required">
|
|
44
|
+
<input type="text" class="input input-text input-full" placeholder="MM/YYYY" />
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="col col-50 col-x1-33">
|
|
48
|
+
<label class="label">CCV</label>
|
|
49
|
+
<div class="input-required">
|
|
50
|
+
<input type="text" class="input input-text input-full" placeholder="3 or 4 digits" />
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="col col-100 col-x1-33 margin-top-md margin-top-x1-none margin-bottom-sm margin-bottom-x1-none">
|
|
54
|
+
<label class="label">Zip Code</label>
|
|
55
|
+
<div class="input-required">
|
|
56
|
+
<input type="text" class="input input-text input-full" />
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</form>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="modal-ctas">
|
|
63
|
+
<div class="col-container-nowrap">
|
|
64
|
+
<div class="col col-100">
|
|
65
|
+
<button class="btn btn-primary btn-sm btn-x1-md" modal-close>
|
|
66
|
+
Save
|
|
67
|
+
<span class="display-none display-x1-inline">& Continue</span>
|
|
68
|
+
</button>
|
|
69
|
+
<button class="btn btn-secondary btn-sm btn-x1-md margin-left-xxs margin-left-x1-xs" modal-close>Cancel</button>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="col align-right">
|
|
72
|
+
<span class="btn-sm btn-x1-md white-space-nowrap padding-none">
|
|
73
|
+
{% icon :lock, class: 'green-dark icon-center margin-right-xxs' %}
|
|
74
|
+
<span class="text-sm text-lighter medium">Secure Server</span>
|
|
75
|
+
</span>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard Modal Example
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
{% include page-heading.html page=page %}
|
|
6
|
+
|
|
7
|
+
<div class="modal-container" modal="example-small">
|
|
8
|
+
<div class="modal modal-sm" role="dialog">
|
|
9
|
+
<div class="modal-content">
|
|
10
|
+
<div class="modal-title">
|
|
11
|
+
<h1 class="text-lg text-x1-xl">Trial Requested</h1>
|
|
12
|
+
</div>
|
|
13
|
+
<p class="text-light">Your request has been sent to our support team who will be in touch with you shortly to confirm the trial. In the meantime, you’ll stay on the configuration that your team was previously subscribed to.</p>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="modal-ctas">
|
|
16
|
+
<button class="btn btn-primary btn-sm btn-x1-md" modal-close>Okay, thanks!</button>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
File without changes
|
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.58
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Codeship
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-10-
|
|
11
|
+
date: 2017-10-31 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionview
|
|
@@ -225,6 +225,7 @@ files:
|
|
|
225
225
|
- assets/stylesheets/shipyard/components/_header.sass
|
|
226
226
|
- assets/stylesheets/shipyard/components/_hero.sass
|
|
227
227
|
- assets/stylesheets/shipyard/components/_icons.sass
|
|
228
|
+
- assets/stylesheets/shipyard/components/_input-radios.sass
|
|
228
229
|
- assets/stylesheets/shipyard/components/_input-switch.sass
|
|
229
230
|
- assets/stylesheets/shipyard/components/_modals.sass
|
|
230
231
|
- assets/stylesheets/shipyard/components/_notes.sass
|
|
@@ -237,6 +238,7 @@ files:
|
|
|
237
238
|
- assets/stylesheets/shipyard/functions/_map-merge-options.sass
|
|
238
239
|
- assets/stylesheets/shipyard/mixins/_box-model.sass
|
|
239
240
|
- assets/stylesheets/shipyard/mixins/_components.sass
|
|
241
|
+
- assets/stylesheets/shipyard/mixins/_icon.sass
|
|
240
242
|
- assets/stylesheets/shipyard/mixins/_positioning.sass
|
|
241
243
|
- assets/stylesheets/shipyard/mixins/_prefixed.sass
|
|
242
244
|
- assets/stylesheets/shipyard/mixins/_responsive.sass
|
|
@@ -292,6 +294,8 @@ files:
|
|
|
292
294
|
- styleguide/_assets/css/layout.sass
|
|
293
295
|
- styleguide/_assets/css/vendor.sass
|
|
294
296
|
- styleguide/_assets/css/views.sass
|
|
297
|
+
- styleguide/_assets/img/arrows/down.svg
|
|
298
|
+
- styleguide/_assets/img/checkmark.svg
|
|
295
299
|
- styleguide/_assets/js/application.es6
|
|
296
300
|
- styleguide/_assets/js/views/utilities/colors.es6
|
|
297
301
|
- styleguide/_config.yml
|
|
@@ -307,7 +311,9 @@ files:
|
|
|
307
311
|
- styleguide/components/icons.md
|
|
308
312
|
- styleguide/components/index.md
|
|
309
313
|
- styleguide/components/modals/_modal.html
|
|
310
|
-
- styleguide/components/modals/example-
|
|
314
|
+
- styleguide/components/modals/example-billing.html
|
|
315
|
+
- styleguide/components/modals/example-small.html
|
|
316
|
+
- styleguide/components/modals/example-tall.html
|
|
311
317
|
- styleguide/components/modals/index.md
|
|
312
318
|
- styleguide/components/notes.md
|
|
313
319
|
- styleguide/components/tables.md
|