dta_rapid 0.2.9 → 0.2.10

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: d92ad1fb11322d510efd9e9056813dc2c849c45e
4
- data.tar.gz: 64d4401580128cdfca1604ee5f48d19c81185e8c
3
+ metadata.gz: d2a888ff2678fa5e3adfa98547ec77ad754c55db
4
+ data.tar.gz: bccf7847b819872ecd44177248db7145f3d8a388
5
5
  SHA512:
6
- metadata.gz: 96e55b93cf33540b2a448a9a44d425f858d4f06fd70e894e9323320982fca0af456afddba977b45f3e1581785eeb3573a4b5433355726f813a4bbc9c32fa4031
7
- data.tar.gz: 457edb7747d91f01c180b6eb31e2e6c1c27a63bb8651e4bf4137193cbe5895740554bdd6193ca18b1871a84b29c07ca456730ce80775b6ce0bc59534eab5377a
6
+ metadata.gz: ae4fd04254e4b053c8ca7760fb167c0eada5f0fa3bf801373c5894bff0c44b3f4394f0aef9115269559974755116588fbbe389113a73388fd34e8226f7d7a6b5
7
+ data.tar.gz: 8be0d51de395912a3b477b905ac9081ccbfbf18bcf9d68a5b8f868ea88d02a6e4897d9135ffd2ea59168525ca6f6d6e5431f48bc35ca80bd1d96738e688276b2
@@ -11,8 +11,9 @@
11
11
  </label>
12
12
  <input
13
13
  class="text-field__input"
14
+ placeholder="{{ include.placeholder }}"
14
15
  type="{{ include.type | default: "text" }}"
15
- id="{{ include.id | default: id }}"
16
+ id="{{ include.id }}"
16
17
  value="{{ include.value | default: "" }}"
17
18
  name="{{ include.name | default: name }}"
18
19
  {{ required }}
@@ -0,0 +1 @@
1
+ <a href="{{ include.href }}">{{}}</a>
data/_sass/_colors.scss CHANGED
@@ -6,6 +6,8 @@ $light-grey: lighten($grey, 30%);
6
6
  $lighter-grey: #f0f3f5;
7
7
 
8
8
  $aqua: #18788d;
9
+ $navy: #043751;
10
+ $dark-navy: darken($navy, 10%);
9
11
 
10
12
  // Brand Colors
11
13
 
@@ -40,14 +42,16 @@ $success-color: $green;
40
42
  $warning-color: $yellow;
41
43
  $info-color: $blue;
42
44
 
43
- $button-bg-color: $action-color;
44
- $button-bg-color--hover: $action-color--hover;
45
- $button-bg-color--active: $action-color--active;
46
- $button-bg-color--disabled: $action-color--disabled;
45
+ $body-text-color: $dark-grey;
46
+
47
+ $button-bg-color: $action-color;
48
+ $button-bg-color--hover: $action-color--hover;
49
+ $button-bg-color--active: $action-color--active;
50
+ $button-bg-color--disabled: $action-color--disabled;
51
+
52
+ $button-text-color: white;
47
53
 
48
54
  $input-focus-color: $focus-color;
49
55
 
50
56
  $border-color: $light-grey;
51
57
  $background-color: white;
52
-
53
- $body-text-color: $dark-grey;
@@ -35,89 +35,85 @@ body {
35
35
  }
36
36
 
37
37
  main {
38
- @include wrapper-padding;
39
- @include outer-container;
38
+ }
40
39
 
41
- padding-top: $base-spacing * 2;
40
+ .form-wrapper {
41
+ @include fill-parent;
42
+
43
+ @include media($tablet) {
44
+ @include span-columns(4 of 6);
45
+ }
46
+ }
42
47
 
43
- .form-wrapper {
48
+ @include direction-context(right-to-left) {
49
+ .sidebar {
44
50
  @include fill-parent;
45
51
 
46
52
  @include media($tablet) {
47
- @include span-columns(4 of 6);
53
+ @include span-columns(4 of 12);
54
+ }
55
+
56
+ @include media($desktop) {
57
+ @include span-columns(4 of 16);
48
58
  }
49
59
  }
50
60
 
51
- @include direction-context(right-to-left) {
52
- .sidebar {
53
- @include fill-parent;
61
+ .content-main {
62
+ @include fill-parent;
54
63
 
55
- @include media($tablet) {
56
- @include span-columns(4 of 12);
57
- }
64
+ @include media($tablet) {
65
+ @include span-columns(8 of 12);
66
+ }
58
67
 
59
- @include media($desktop) {
60
- @include span-columns(4 of 16);
61
- }
68
+ @include media($desktop) {
69
+ @include span-columns(12 of 16);
62
70
  }
63
71
 
64
- .content-main {
72
+ &:first-child {
73
+ @include reset-layout-direction;
65
74
  @include fill-parent;
75
+ @include shift(0);
66
76
 
67
77
  @include media($tablet) {
68
78
  @include span-columns(8 of 12);
79
+ @include shift(0);
69
80
  }
70
81
 
71
82
  @include media($desktop) {
72
- @include span-columns(12 of 16);
73
- }
74
-
75
- &:first-child {
76
- @include reset-layout-direction;
77
- @include fill-parent;
83
+ @include span-columns(10 of 16);
78
84
  @include shift(0);
79
-
80
- @include media($tablet) {
81
- @include span-columns(8 of 12);
82
- @include shift(0);
83
- }
84
-
85
- @include media($desktop) {
86
- @include span-columns(10 of 16);
87
- @include shift(0);
88
- }
89
85
  }
90
86
  }
91
87
  }
88
+ }
92
89
 
93
- &.sidebar-has-controls {
94
- @include reset-layout-direction;
90
+ .sidebar-has-controls {
91
+ @include reset-layout-direction;
95
92
 
96
- .sidebar {
97
- @include fill-parent;
93
+ .sidebar {
94
+ @include fill-parent;
98
95
 
99
- @include media($tablet) {
100
- @include span-columns(4 of 12);
96
+ @include media($tablet) {
97
+ @include span-columns(4 of 12);
101
98
 
102
- margin-left: 0;
103
- }
99
+ margin-left: 0;
100
+ }
104
101
 
105
- @include media($desktop) {
106
- @include span-columns(4 of 16);
107
- }
102
+ @include media($desktop) {
103
+ @include span-columns(4 of 16);
108
104
  }
105
+ }
109
106
 
110
- .content-main {
111
- @include fill-parent;
107
+ .content-main {
108
+ @include fill-parent;
112
109
 
113
- @include media($tablet) {
114
- @include span-columns(8 of 12);
115
- }
110
+ @include media($tablet) {
111
+ @include span-columns(8 of 12);
112
+ }
116
113
 
117
- @include media($desktop) {
118
- @include span-columns(9 of 16);
119
- @include shift(1);
120
- }
114
+ @include media($desktop) {
115
+ @include span-columns(9 of 16);
116
+ @include shift(1);
121
117
  }
122
118
  }
123
119
  }
@@ -0,0 +1,187 @@
1
+ html {
2
+ color: $body-text-color;
3
+ line-height: $base-leading;
4
+ font-family: $base-font-family;
5
+ font-weight: $base-font-weight;
6
+ }
7
+
8
+ body {
9
+ font-size: 1rem;
10
+
11
+ @include media($tablet) {
12
+ font-size: 1.0625rem;
13
+ }
14
+ }
15
+
16
+ h1,
17
+ h2,
18
+ h3,
19
+ h4 {
20
+ line-height: $base-heading-leading;
21
+ font-weight: $base-font-weight;
22
+ margin-bottom: $tiny-spacing;
23
+ margin-top: $base-spacing;
24
+ }
25
+
26
+ h1 {
27
+ font-size: 1.5rem;
28
+ font-weight: $bold-font-weight;
29
+ margin-bottom: $small-spacing;
30
+
31
+ @include media($tablet) {
32
+ font-size: 1.75rem;
33
+ }
34
+
35
+ @include media($desktop) {
36
+ font-size: 2.5rem;
37
+ }
38
+
39
+ &:first-of-type {
40
+ margin-top: $tiny-spacing;
41
+ }
42
+ }
43
+
44
+ @mixin h2 {
45
+ font-size: 2rem;
46
+ line-height: $small-leading;
47
+ margin-top: $base-spacing;
48
+ margin-bottom: 1em;
49
+
50
+ @include media($tablet) {
51
+ font-size: 2.5rem;
52
+ }
53
+ }
54
+
55
+ h2 {
56
+ @include h2;
57
+ }
58
+
59
+ h3 {
60
+ font-size: 1.5rem;
61
+ font-weight: $heading-font-weight;
62
+ margin-top: $medium-spacing + ($small-spacing / 3); // 38.133px; was 34.4px from Alz.
63
+ margin-bottom: $small-spacing;
64
+
65
+ @include media($tablet) {
66
+ font-size: 1.625rem;
67
+ }
68
+
69
+ }
70
+
71
+ h4,
72
+ h5,
73
+ h6 {
74
+ font-size: 1.125rem;
75
+ font-weight: $heading-font-weight;
76
+ }
77
+
78
+ // Document this later.
79
+ .gov-speak {
80
+ h1,
81
+ h2,
82
+ h3,
83
+ h4,
84
+ h5,
85
+ h6 {
86
+ line-height: $base-heading-leading;
87
+ font-weight: $heading-font-weight;
88
+ margin-bottom: $tiny-spacing;
89
+ margin-top: $base-spacing;
90
+ }
91
+
92
+ h1 {
93
+ font-size: 2rem;
94
+ line-height: $small-leading;
95
+
96
+ @include media($tablet) {
97
+ font-size: 2.75rem;
98
+ }
99
+
100
+ @include media($desktop) {
101
+ font-size: 2.5rem;
102
+ }
103
+
104
+ &:first-of-type {
105
+ margin-top: $tiny-spacing;
106
+ }
107
+ }
108
+
109
+ h2 {
110
+ font-size: 1.75rem;
111
+ line-height: $small-leading;
112
+
113
+ @include media($tablet) {
114
+ font-size: 2rem;
115
+ }
116
+ }
117
+
118
+ h3 {
119
+ font-size: 1.5rem;
120
+ font-weight: $heading-font-weight;
121
+
122
+ @include media($tablet) {
123
+ font-size: 1.625rem;
124
+ }
125
+ }
126
+
127
+ h4 {
128
+ font-size: 1.1875rem;
129
+ font-weight: $heading-font-weight;
130
+
131
+ @include media($tablet) {
132
+ font-size: 1.375rem;
133
+ }
134
+ }
135
+
136
+ h5 {
137
+ font-size: 1.0625rem;
138
+ font-weight: $heading-font-weight;
139
+ }
140
+
141
+ h6 {
142
+ font-size: 1.0625rem;
143
+ font-weight: $heading-font-weight;
144
+ }
145
+ }
146
+
147
+ @include media($desktop) {
148
+ h1,
149
+ h2,
150
+ h3,
151
+ h4,
152
+ h5,
153
+ p,
154
+ li,
155
+ dl {
156
+ max-width: 38rem
157
+ }
158
+ .content-full-width {
159
+ max-width: none;
160
+ width: 100%;
161
+ }
162
+ }
163
+
164
+ code,
165
+ pre,
166
+ samp,
167
+ kbd {
168
+ font-family: $base-monospace;
169
+ font-size: $small-font-size;
170
+ }
171
+
172
+ kbd {
173
+ display: inline-block;
174
+ border: solid 1px $action-color--disabled;
175
+ border-radius: $base-border-radius;
176
+ box-shadow: 0 1px 0 0 $action-color--disabled;
177
+ background-color: $light-grey;
178
+ color: $action-color--hover;
179
+ text-align: center;
180
+ font-size: $small-font-size;
181
+ padding: 0 $small-spacing;
182
+ margin: 0 $tiny-spacing;
183
+ }
184
+
185
+ strong, b {
186
+ font-weight: $bold-font-weight;
187
+ }
@@ -0,0 +1,59 @@
1
+ .button,
2
+ button,
3
+ input[type="submit"],
4
+ input[type="button"],
5
+ input[type="reset"] {
6
+ appearance: none;
7
+ cursor: pointer;
8
+ display: inline-block;
9
+ height: $base-spacing * 2;
10
+ margin: 0 $base-spacing $small-spacing 0;
11
+ padding: $small-spacing $base-spacing;
12
+ border-radius: $tiny-border-radius;
13
+ border-width: 1px;
14
+ border-style: solid;
15
+ border-color: inherit;
16
+ outline: 0;
17
+ text-decoration: none;
18
+ font-weight: $bold-font-weight;
19
+
20
+ @include media($tablet) {
21
+ height: $base-spacing * 1.75;
22
+ padding: ($tiny-spacing * 1.25) $medium-spacing;
23
+ }
24
+
25
+ &[disabled],
26
+ &.disabled {
27
+ &,
28
+ &:hover,
29
+ &:active,
30
+ &:focus {
31
+ cursor: not-allowed;
32
+ border-color: $button-bg-color--disabled;
33
+ background-color: $button-bg-color--disabled;
34
+ color: $body-text-color;
35
+ }
36
+ }
37
+ }
38
+
39
+ .button--primary {
40
+ background: $button-bg-color;
41
+ border-color: $button-bg-color;
42
+ color: white;
43
+
44
+ &:hover {
45
+ background: $button-bg-color--hover;
46
+ border-color: $button-bg-color--hover;
47
+ }
48
+
49
+ &:active,
50
+ &:focus {
51
+ background: $button-bg-color--active;
52
+ border-color: $button-bg-color--active;
53
+ }
54
+
55
+ &:disabled {
56
+ background: $button-bg-color--disabled;
57
+ border-color: $button-bg-color--disabled;
58
+ }
59
+ }
@@ -0,0 +1,7 @@
1
+ .text-field {
2
+
3
+ }
4
+
5
+ .text-field__label {
6
+ margin-bottom: $tiny-spacing;
7
+ }
data/assets/style.scss CHANGED
@@ -10,7 +10,10 @@
10
10
 
11
11
  @import "normalize";
12
12
  @import "colors";
13
+ @import "typography";
13
14
 
14
15
  @import "forms";
16
+ @import "components/text-field";
17
+ @import "components/button";
15
18
 
16
19
  @import "print";
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.9
4
+ version: 0.2.10
5
5
  platform: ruby
6
6
  authors:
7
7
  - Gareth Rogers
@@ -66,6 +66,7 @@ files:
66
66
  - LICENSE.txt
67
67
  - README.md
68
68
  - _includes/forms/text-field.html
69
+ - _includes/link-button.html
69
70
  - _layouts/default.html
70
71
  - _sass/_colors.scss
71
72
  - _sass/_easings.scss
@@ -74,8 +75,10 @@ files:
74
75
  - _sass/_mixins.scss
75
76
  - _sass/_normalize.scss
76
77
  - _sass/_print.scss
78
+ - _sass/_typography.scss
77
79
  - _sass/_variables.scss
78
- - _sass/components/.keep
80
+ - _sass/components/_button.scss
81
+ - _sass/components/_text-field.scss
79
82
  - _sass/mixins/_clearfix.scss
80
83
  - _sass/mixins/_ellipsis.scss
81
84
  - _sass/mixins/_flex-layout.scss
File without changes