dta_rapid 0.2.17 → 0.2.18
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/_includes/forms/multiple-choice.html +26 -0
- data/_includes/navigation/breadcrumbs.html +9 -0
- data/_includes/typography/accordian.html +12 -0
- data/_layouts/default.html +2 -1
- data/_sass/_colors.scss +11 -0
- data/_sass/_forms.scss +3 -0
- data/_sass/_typography.scss +22 -4
- data/_sass/_variables.scss +1 -1
- data/_sass/components/_accordian.scss +68 -0
- data/_sass/components/_breadcrumbs.scss +57 -0
- data/_sass/components/_callout.scss +1 -1
- data/_sass/components/_multiple-choice.scss +45 -0
- data/_sass/components/_table.scss +25 -0
- data/assets/style.scss +4 -0
- metadata +9 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8b2c8cb3bf0b2ddd4debd3dc7c037c32b9f92401
|
|
4
|
+
data.tar.gz: de499c716147580da91ac1dcbc875df60b9732de
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b9628a4a6676c57a726b0ac2619556d9ecc39dd1478a35a0bc3d3c3975c84c416d9e886fda2d0b42088584999ee407a94fd86eaf73a0f713690533243c65b7a2
|
|
7
|
+
data.tar.gz: 2a539fd206908766d1de4829e9cad5bd55d7c7ae62c35f59051dc9092b7c221312f96e0121ecf4438e00d7d3105bb977ea2d557ccc1968b97c1aaa29a4ab6fb5
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{% assign options = include.options | split: "|" %}
|
|
2
|
+
{% assign question_slug = include.question | slugify %}
|
|
3
|
+
|
|
4
|
+
<fieldset>
|
|
5
|
+
<legend id="q-{{ question_slug }}">{{ include.question }}</legend>
|
|
6
|
+
<ul class="multiple-choice__root">
|
|
7
|
+
{% for option in options %}
|
|
8
|
+
{% assign option_slug = option | slugify %}
|
|
9
|
+
<li class="multiple-choice__option">
|
|
10
|
+
<input
|
|
11
|
+
{% if include.required %}data-parsley-required{% endif %}
|
|
12
|
+
aria-describedby="q-{{ question_slug}}"
|
|
13
|
+
class="multiple-choice__input"
|
|
14
|
+
id="{{ question_slug }}__{{ option_slug }}"
|
|
15
|
+
name="{{ question_slug }}"
|
|
16
|
+
type="{{ include.type | default: 'radio' }}"
|
|
17
|
+
data-parsley-errors-container="#parent__{{ question_slug }}"
|
|
18
|
+
data-parsley-error-message="{{ include.validation_message }}"
|
|
19
|
+
value="{{ question_slug }}__{{ option_slug }}">
|
|
20
|
+
<label
|
|
21
|
+
class="multiple-choice__label"
|
|
22
|
+
for="{{ question_slug }}__{{ option_slug }}">{{ option }}</label>
|
|
23
|
+
</li>
|
|
24
|
+
{% endfor %}
|
|
25
|
+
</ul>
|
|
26
|
+
</fieldset>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<nav class="breadcrumbs" aria-label="breadcrumb">
|
|
2
|
+
<div class="wrapper">
|
|
3
|
+
<ul class="breadcrumbs__list">
|
|
4
|
+
<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="#" title="Home">Home</a></li><!--
|
|
5
|
+
--><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="#" title="Menu1">Menu1</a></li><!--
|
|
6
|
+
--><li class="breadcrumbs__item">Menu2</li>
|
|
7
|
+
</ul>
|
|
8
|
+
</div>
|
|
9
|
+
</nav>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
{% if include.open == true %}
|
|
2
|
+
{% assign open="open" %}
|
|
3
|
+
{% else %}
|
|
4
|
+
{% assign open=null %}
|
|
5
|
+
{% endif %}
|
|
6
|
+
|
|
7
|
+
<section class="accordion">
|
|
8
|
+
<details class="accordion__details" data-label="content-accordion-{{ include.summary | slugify }}" aria-expanded="{{ include.open | false }}" {{ open }}>
|
|
9
|
+
<summary class="accordion__summary">{{ include.summary }}</summary>
|
|
10
|
+
<div class="accordion__content">{{ include.content }}</div>
|
|
11
|
+
</details>
|
|
12
|
+
</section>
|
data/_layouts/default.html
CHANGED
|
@@ -5,12 +5,13 @@
|
|
|
5
5
|
<meta charset="utf-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
7
|
<title>Title</title>
|
|
8
|
+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
|
|
8
9
|
<link rel="stylesheet" href="/assets/style.css">
|
|
9
10
|
</head>
|
|
10
11
|
|
|
11
12
|
<body>
|
|
12
13
|
<header>
|
|
13
|
-
|
|
14
|
+
<div class="wrapper"><p class="callout__root">This is a prototype. Please don't fill it in with your real information.</p></div>
|
|
14
15
|
</header>
|
|
15
16
|
<main>
|
|
16
17
|
<div class="wrapper">{{ content }}</div>
|
data/_sass/_colors.scss
CHANGED
|
@@ -35,6 +35,7 @@ $action-color: $straya-green;
|
|
|
35
35
|
$action-color--hover: darken($action-color, 5%);
|
|
36
36
|
$action-color--active: darken($action-color, 10%);
|
|
37
37
|
$action-color--disabled: $light-grey;
|
|
38
|
+
$action-color--inactive: $lighter-grey;
|
|
38
39
|
|
|
39
40
|
$focus-color: lighten($aqua, 30%);
|
|
40
41
|
$error-color: $red;
|
|
@@ -44,18 +45,28 @@ $info-color: $blue;
|
|
|
44
45
|
$default-color: $dark-grey;
|
|
45
46
|
|
|
46
47
|
$body-text-color: $dark-grey;
|
|
48
|
+
$body-text-color--inverted: white;
|
|
49
|
+
|
|
50
|
+
$base-border-color: $light-grey;
|
|
51
|
+
|
|
52
|
+
$link-color: lighten($action-color, 10%);
|
|
47
53
|
|
|
48
54
|
$button-bg-color: $action-color;
|
|
49
55
|
$button-bg-color--hover: $action-color--hover;
|
|
50
56
|
$button-bg-color--active: $action-color--active;
|
|
51
57
|
$button-bg-color--disabled: $action-color--disabled;
|
|
52
58
|
|
|
59
|
+
$breadcrumbs-bg-color: $lighter-grey;
|
|
60
|
+
|
|
53
61
|
$button-text-color: white;
|
|
54
62
|
|
|
55
63
|
$input-focus-color: $focus-color;
|
|
56
64
|
|
|
57
65
|
$border-color: $light-grey;
|
|
66
|
+
$border-highlight-color: $grey;
|
|
58
67
|
$background-color: white;
|
|
68
|
+
$background-color--inverted: $dark-grey;
|
|
69
|
+
$background-secondary-color: $lighter-grey;
|
|
59
70
|
|
|
60
71
|
// Badge colors - see _sass/components/_badge.scss
|
|
61
72
|
|
data/_sass/_forms.scss
CHANGED
data/_sass/_typography.scss
CHANGED
|
@@ -21,6 +21,12 @@ h4 {
|
|
|
21
21
|
font-weight: $base-font-weight;
|
|
22
22
|
margin-bottom: $tiny-spacing;
|
|
23
23
|
margin-top: $base-spacing;
|
|
24
|
+
|
|
25
|
+
small {
|
|
26
|
+
font-size: $smaller-font-size;
|
|
27
|
+
line-height: $small-leading;
|
|
28
|
+
display: block;
|
|
29
|
+
}
|
|
24
30
|
}
|
|
25
31
|
|
|
26
32
|
h1 {
|
|
@@ -41,10 +47,6 @@ h1 {
|
|
|
41
47
|
}
|
|
42
48
|
}
|
|
43
49
|
|
|
44
|
-
@mixin h2 {
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
|
|
48
50
|
h2 {
|
|
49
51
|
font-size: 2rem;
|
|
50
52
|
line-height: $small-leading;
|
|
@@ -98,3 +100,19 @@ kbd {
|
|
|
98
100
|
strong, b {
|
|
99
101
|
font-weight: $bold-font-weight;
|
|
100
102
|
}
|
|
103
|
+
|
|
104
|
+
a {
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
color: $body-text-color;
|
|
107
|
+
text-decoration: none;
|
|
108
|
+
border-bottom: 1px solid $link-color;
|
|
109
|
+
transition-timing-function: ease-in-out;
|
|
110
|
+
transition-duration: 0.1s;
|
|
111
|
+
transition-property: background-color, border-color, color;
|
|
112
|
+
padding: 0 0.125em;
|
|
113
|
+
|
|
114
|
+
&:focus,
|
|
115
|
+
&:hover {
|
|
116
|
+
background-color: $link-color;
|
|
117
|
+
}
|
|
118
|
+
}
|
data/_sass/_variables.scss
CHANGED
|
@@ -18,7 +18,7 @@ $base-heading-leading: 1.4;
|
|
|
18
18
|
$small-leading: 1.2;
|
|
19
19
|
$double-leading: 2;
|
|
20
20
|
|
|
21
|
-
$base-spacing: $base-leading *
|
|
21
|
+
$base-spacing: $base-leading * 1rem;
|
|
22
22
|
$large-spacing: $base-spacing * 2;
|
|
23
23
|
$medium-spacing: $base-spacing * 0.75;
|
|
24
24
|
$small-spacing: $base-spacing / 2;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
.accordion {
|
|
2
|
+
margin: $base-spacing 0 0;
|
|
3
|
+
border: 1px solid $base-border-color;
|
|
4
|
+
|
|
5
|
+
+ .accordion {
|
|
6
|
+
margin: 0 0 $base-spacing 0;
|
|
7
|
+
border-top: none;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.accordion__summary {
|
|
12
|
+
position: relative;
|
|
13
|
+
font-size: 112.5%;
|
|
14
|
+
font-weight: bold;
|
|
15
|
+
background: $background-secondary-color;
|
|
16
|
+
padding: $small-spacing $base-spacing;
|
|
17
|
+
z-index: 0;
|
|
18
|
+
|
|
19
|
+
&::-webkit-details-marker {
|
|
20
|
+
display:none;
|
|
21
|
+
}
|
|
22
|
+
&:after {
|
|
23
|
+
color: $border-highlight-color;
|
|
24
|
+
content: "\00002B";
|
|
25
|
+
position: absolute;
|
|
26
|
+
line-height: 1;
|
|
27
|
+
font-size: $large-font-size;
|
|
28
|
+
padding: $small-spacing $base-spacing;
|
|
29
|
+
right: 0;
|
|
30
|
+
top: 0;
|
|
31
|
+
}
|
|
32
|
+
&:focus {
|
|
33
|
+
z-index: 1;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.accordion__details {
|
|
38
|
+
+ .accordion__details {
|
|
39
|
+
border-top: 1px solid $base-border-color;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
table {
|
|
43
|
+
margin: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&[open] {
|
|
47
|
+
.accordion__summary {
|
|
48
|
+
border-bottom: 1px solid $base-border-color;
|
|
49
|
+
|
|
50
|
+
&:after {
|
|
51
|
+
content: "\002212";
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.accordion__content {
|
|
58
|
+
padding: $base-spacing;
|
|
59
|
+
|
|
60
|
+
p {
|
|
61
|
+
&:first-child {
|
|
62
|
+
margin-top: 0;
|
|
63
|
+
}
|
|
64
|
+
&:last-child {
|
|
65
|
+
margin-bottom: 0;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
|
|
2
|
+
.breadcrumbs {
|
|
3
|
+
display: none;
|
|
4
|
+
width: 100%;
|
|
5
|
+
margin: 0;
|
|
6
|
+
background-color: $breadcrumbs-bg-color;
|
|
7
|
+
color: $body-text-color;
|
|
8
|
+
|
|
9
|
+
@include media($tablet) {
|
|
10
|
+
display: inline-block;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.breadcrumbs__list {
|
|
15
|
+
margin: 0;
|
|
16
|
+
padding: $small-spacing 0 (0.8 * $medium-spacing) 0;
|
|
17
|
+
line-height: $medium-spacing;
|
|
18
|
+
list-style: none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.breadcrumbs__item {
|
|
22
|
+
display: inline-block;
|
|
23
|
+
margin: 0;
|
|
24
|
+
padding: 0;
|
|
25
|
+
font-size: $small-font-size;
|
|
26
|
+
color: $body-text-color;
|
|
27
|
+
|
|
28
|
+
&:not(:last-child) {
|
|
29
|
+
background-repeat: no-repeat;
|
|
30
|
+
background-position: right;
|
|
31
|
+
background-size: $tiny-spacing auto;
|
|
32
|
+
|
|
33
|
+
&:after {
|
|
34
|
+
content: "\00203A";
|
|
35
|
+
text-align: center;
|
|
36
|
+
color: $border-color;
|
|
37
|
+
padding: 0 $small-spacing;
|
|
38
|
+
font-size: $large-font-size;
|
|
39
|
+
line-height: 1;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.breadcrumbs--inverted {
|
|
45
|
+
background-color: $background-color--inverted;
|
|
46
|
+
|
|
47
|
+
.breadcrumbs__item {
|
|
48
|
+
color: $body-text-color--inverted;
|
|
49
|
+
}
|
|
50
|
+
.breadcrumbs__link {
|
|
51
|
+
color: $body-text-color--inverted;
|
|
52
|
+
&:last-child {
|
|
53
|
+
a {
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
.multiple-choice__root {
|
|
2
|
+
list-style: none;
|
|
3
|
+
padding-left: 0;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.multiple-choice__option {
|
|
7
|
+
position: relative;
|
|
8
|
+
margin: $small-spacing 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.multiple-choice__label {
|
|
12
|
+
padding: $small-spacing $base-spacing $small-spacing $large-spacing;
|
|
13
|
+
padding-left: $large-spacing;
|
|
14
|
+
display: block;
|
|
15
|
+
border-radius: 2px;
|
|
16
|
+
width: auto;
|
|
17
|
+
background: $action-color--inactive;
|
|
18
|
+
border: 1px solid $border-color;
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
margin: 0;
|
|
21
|
+
|
|
22
|
+
&:hover {
|
|
23
|
+
border-color: $border-highlight-color;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.multiple-choice__input {
|
|
28
|
+
@include transform(translateY(-50%));
|
|
29
|
+
margin-left: $small-spacing * 1.5;
|
|
30
|
+
position: absolute;
|
|
31
|
+
top: 50%;
|
|
32
|
+
|
|
33
|
+
&:focus + .multiple-choice__label {
|
|
34
|
+
border-color: $border-highlight-color;
|
|
35
|
+
}
|
|
36
|
+
&:checked + .multiple-choice__label {
|
|
37
|
+
background-color: $button-bg-color;
|
|
38
|
+
border-color: $button-bg-color--hover;
|
|
39
|
+
color: $button-text-color;
|
|
40
|
+
|
|
41
|
+
&:hover {
|
|
42
|
+
border-color: $button-bg-color--active;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
table {
|
|
2
|
+
border-collapse: collapse;
|
|
3
|
+
margin: $base-spacing 0;
|
|
4
|
+
width: 100%;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
tr:nth-child(even) {
|
|
8
|
+
background-color: $lighter-grey;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
td,
|
|
12
|
+
th {
|
|
13
|
+
border-bottom: solid 1px $light-grey;
|
|
14
|
+
padding: $tiny-spacing;
|
|
15
|
+
text-align: left;
|
|
16
|
+
|
|
17
|
+
@include media($tablet) {
|
|
18
|
+
padding: $small-spacing;
|
|
19
|
+
font-size: initial;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
thead {
|
|
24
|
+
border-bottom: solid 2px $grey;
|
|
25
|
+
}
|
data/assets/style.scss
CHANGED
|
@@ -16,9 +16,13 @@
|
|
|
16
16
|
|
|
17
17
|
@import "forms";
|
|
18
18
|
@import "components/text-field";
|
|
19
|
+
@import "components/multiple-choice";
|
|
19
20
|
@import "components/button";
|
|
20
21
|
@import "components/badge";
|
|
21
22
|
@import "components/callout";
|
|
23
|
+
@import "components/table";
|
|
24
|
+
@import "components/breadcrumbs";
|
|
25
|
+
@import "components/accordian";
|
|
22
26
|
|
|
23
27
|
@import "print";
|
|
24
28
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: dta_rapid
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.2.
|
|
4
|
+
version: 0.2.18
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Gareth Rogers
|
|
@@ -10,7 +10,7 @@ authors:
|
|
|
10
10
|
autorequire:
|
|
11
11
|
bindir: bin
|
|
12
12
|
cert_chain: []
|
|
13
|
-
date: 2017-03-
|
|
13
|
+
date: 2017-03-08 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: jekyll
|
|
@@ -68,10 +68,13 @@ files:
|
|
|
68
68
|
- _includes/buttons/link-button.html
|
|
69
69
|
- _includes/forms/date-field.html
|
|
70
70
|
- _includes/forms/error-container.html
|
|
71
|
+
- _includes/forms/multiple-choice.html
|
|
71
72
|
- _includes/forms/radio-field.html
|
|
72
73
|
- _includes/forms/submit-button.html
|
|
73
74
|
- _includes/forms/text-field.html
|
|
74
75
|
- _includes/link-button.html
|
|
76
|
+
- _includes/navigation/breadcrumbs.html
|
|
77
|
+
- _includes/typography/accordian.html
|
|
75
78
|
- _includes/typography/badge.html
|
|
76
79
|
- _includes/typography/callout.html
|
|
77
80
|
- _layouts/default.html
|
|
@@ -85,9 +88,13 @@ files:
|
|
|
85
88
|
- _sass/_typography.scss
|
|
86
89
|
- _sass/_validation.scss
|
|
87
90
|
- _sass/_variables.scss
|
|
91
|
+
- _sass/components/_accordian.scss
|
|
88
92
|
- _sass/components/_badge.scss
|
|
93
|
+
- _sass/components/_breadcrumbs.scss
|
|
89
94
|
- _sass/components/_button.scss
|
|
90
95
|
- _sass/components/_callout.scss
|
|
96
|
+
- _sass/components/_multiple-choice.scss
|
|
97
|
+
- _sass/components/_table.scss
|
|
91
98
|
- _sass/components/_text-field.scss
|
|
92
99
|
- _sass/mixins/_clearfix.scss
|
|
93
100
|
- _sass/mixins/_ellipsis.scss
|