dta_rapid 0.2.6 → 0.2.7

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.
Files changed (13) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/forms/text-field.html +20 -0
  3. data/_sass/_colors.scss +23 -11
  4. data/_sass/{components/text-input.scss → _forms.scss} +14 -13
  5. data/_sass/_grid-settings.scss +120 -9
  6. data/_sass/_mixins.scss +3 -0
  7. data/_sass/components/.keep +0 -0
  8. data/_sass/mixins/_flex-layout.scss +14 -0
  9. data/_sass/mixins/_omega-reset.scss +11 -0
  10. data/_sass/mixins/_wrapper-padding.scss +11 -0
  11. data/assets/style.scss +5 -5
  12. metadata +12 -4
  13. data/_includes/forms/text-input.html +0 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 26c3c6114c015910dea29bb142bbed77887721cf
4
- data.tar.gz: 91c7e41a619d7fb00e957fa87d4c8bc6469c67a5
3
+ metadata.gz: 7c50f904c3c537cb1859b5f1cb29a6b33dd1614d
4
+ data.tar.gz: 7f50a454040a0dfd80184b77b990add09db345dc
5
5
  SHA512:
6
- metadata.gz: 780496c34d46f3c314e6d40e69ca488473352357f1442c57865f0386b1da6ff8b3a185d1c92f178fadaed087fcac13c51498adb018480f0c9493975fc1d8ddc8
7
- data.tar.gz: 22f56dbaba0ba258f1954c265f6313045bb93124e58e6837cd3ccdd2059f9de487270d0eed262bef6d929b023f3356121930aa6653a7d5a4afe64c2aff542b4a
6
+ metadata.gz: 97bae16c5ab27a9c0536677905167b0030732c5c23d1ccb4b6c6ed6a5ce8ed046af5b04da0990900e3baea7919d596f4a9852843ae9122ecde6b82bc081ff07f
7
+ data.tar.gz: 45688bd34e50455d023a0c756f5eeb9ad66c08829caa488e9c2d216e351f360e310caf47385e96e7b683fc76643950d30d785c5de38698faa84316ffcce24651
data/_includes/forms/text-field.html ADDED
@@ -0,0 +1,20 @@
1
+ {% assign id=include.id %}
2
+ {% assign name=include.id %}
3
+
4
+ {% if include.required %}
5
+ {% assign required="required" %}
6
+ {% endif %}
7
+
8
+ <div class="text-field">
9
+ <label class="text-field__label" for="{{ include.id | default: id }}">
10
+ {{ include.label }}
11
+ </label>
12
+ <input
13
+ type="text"
14
+ id="{{ include.id | default: id }}"
15
+ class="text-field__input"
16
+ value="{{ include.value | default: "" }}"
17
+ name="{{ include.name | default: name }}"
18
+ {{ required }}
19
+ />
20
+ </div>
data/_sass/_colors.scss CHANGED
@@ -9,8 +9,8 @@ $aqua: #18788d;
9
9
 
10
10
  // Brand Colors
11
11
 
12
- $medical-green: #008752;
13
- $medical-yellow: #FFC423;
12
+ $straya-green: #008752;
13
+ $straya-yellow: #FFC423;
14
14
 
15
15
  // Status Colors
16
16
 
@@ -26,16 +26,28 @@ $light-yellow: #fdf7dc;
26
26
  $blue: #00bfe9;
27
27
  $light-blue: #e8f5fa;
28
28
 
29
- $action-color: $aqua;
30
29
 
31
- $input-focus-color: lighten($aqua, 30%);
30
+ // Seperation of Pretty colors from contextual colors
32
31
 
33
- $border-color: $light-grey;
34
- $background-color: white;
32
+ $action-color: $aqua;
33
+ $action-color--hover: darken($action-color, 5%);
34
+ $action-color--active: darken($action-color, 10%);
35
+ $action-color--disabled: lighten($action-color, 30%);
35
36
 
36
- $error-color: $red;
37
- $success-color: $green;
38
- $warning-color: $yellow;
39
- $info-color: $blue;
37
+ $focus-color: lighten($action-color, 30%);
38
+ $error-color: $red;
39
+ $success-color: $green;
40
+ $warning-color: $yellow;
41
+ $info-color: $blue;
40
42
 
41
- $body-text-color: $dark-grey;
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;
47
+
48
+ $input-focus-color: $focus-color;
49
+
50
+ $border-color: $light-grey;
51
+ $background-color: white;
52
+
53
+ $body-text-color: $dark-grey;
data/_sass/{components/text-input.scss → _forms.scss} RENAMED
@@ -7,11 +7,6 @@
7
7
  background-color: $background-color;
8
8
  padding: $tiny-spacing;
9
9
 
10
- &:invalid,
11
- &.invalid {
12
- outline: 2px solid $error-color;
13
- }
14
-
15
10
  &.valid {
16
11
  outline: 2px solid $success-color;
17
12
  }
@@ -20,6 +15,13 @@
20
15
  outline: 2px solid $input-focus-color;
21
16
  }
22
17
 
18
+ &:not([value=""]) {
19
+ &:invalid,
20
+ &.invalid {
21
+ outline: 2px solid $error-color;
22
+ }
23
+ }
24
+
23
25
  &:disabled,
24
26
  &[disabled] {
25
27
  cursor: not-allowed;
@@ -28,8 +30,7 @@
28
30
  }
29
31
  }
30
32
 
31
- fieldset,
32
- p {
33
+ fieldset {
33
34
  margin: 0 0 $medium-spacing 0;
34
35
  padding: 0;
35
36
  border: none;
@@ -53,15 +54,15 @@ label {
53
54
  .hint {
54
55
  display: block;
55
56
  margin-bottom: $tiny-spacing;
56
- font-size: rem(14);
57
+ font-size: 0.875rem;
57
58
  color: $body-text-color;
58
59
  }
59
60
 
60
- [type='text'],
61
- [type='number'],
62
- [type='tel'],
63
- [type='email'],
64
- [type='password'] {
61
+ input[type='text'],
62
+ input[type='number'],
63
+ input[type='tel'],
64
+ input[type='email'],
65
+ input[type='password'] {
65
66
  @extend %base-input;
66
67
  }
67
68
 
data/_sass/_grid-settings.scss CHANGED
@@ -17,20 +17,131 @@ $tablet: new-breakpoint(min-width $tablet-minwidth, $tablet-grid-columns);
17
17
  $tablet-only: new-breakpoint(min-width $tablet-minwidth max-width $desktop-minwidth - 1, $tablet-grid-columns);
18
18
  $desktop: new-breakpoint(min-width $max-width, $desktop-grid-columns);
19
19
 
20
+ $visual-grid: false;
21
+
22
+ $border-box-sizing: true;
23
+ $disable-warnings: true;
24
+
25
+ .wrapper {
26
+ @include wrapper-padding;
27
+ @include outer-container;
28
+ }
29
+
30
+ html {
31
+ }
32
+
33
+ body {
34
+ @include flex-layout;
35
+ }
36
+
37
+ main {
38
+ @include wrapper-padding;
39
+ @include outer-container;
40
+
41
+ padding-top: $base-spacing * 2;
42
+
43
+ .form-wrapper {
44
+ @include fill-parent;
45
+
46
+ @include media($tablet) {
47
+ @include span-columns(4 of 6);
48
+ }
49
+ }
50
+
51
+ @include direction-context(right-to-left) {
52
+ .sidebar {
53
+ @include fill-parent;
54
+
55
+ @include media($tablet) {
56
+ @include span-columns(4 of 12);
57
+ }
58
+
59
+ @include media($desktop) {
60
+ @include span-columns(4 of 16);
61
+ }
62
+ }
63
+
64
+ .content-main {
65
+ @include fill-parent;
66
+
67
+ @include media($tablet) {
68
+ @include span-columns(8 of 12);
69
+ }
20
70
 
21
- @mixin omega-reset($nth) {
22
- $nth-plus-one: '#{$nth}+1';
71
+ @include media($desktop) {
72
+ @include span-columns(12 of 16);
73
+ }
23
74
 
24
- &:nth-child(#{$nth}) {
25
- margin-right: flex-gutter($content-grid-columns);
75
+ &:first-child {
76
+ @include reset-layout-direction;
77
+ @include fill-parent;
78
+ @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
+ }
90
+ }
26
91
  }
27
92
 
28
- &:nth-child(#{$nth-plus-one}) {
29
- clear: none;
93
+ &.sidebar-has-controls {
94
+ @include reset-layout-direction;
95
+
96
+ .sidebar {
97
+ @include fill-parent;
98
+
99
+ @include media($tablet) {
100
+ @include span-columns(4 of 12);
101
+
102
+ margin-left: 0;
103
+ }
104
+
105
+ @include media($desktop) {
106
+ @include span-columns(4 of 16);
107
+ }
108
+ }
109
+
110
+ .content-main {
111
+ @include fill-parent;
112
+
113
+ @include media($tablet) {
114
+ @include span-columns(8 of 12);
115
+ }
116
+
117
+ @include media($desktop) {
118
+ @include span-columns(9 of 16);
119
+ @include shift(1);
120
+ }
121
+ }
30
122
  }
31
123
  }
32
124
 
33
- $visual-grid: false;
34
125
 
35
- $border-box-sizing: true;
36
- $disable-warnings: true;
126
+ /*
127
+ Header & footer
128
+
129
+ Style guide: Grid.7 Header & footer
130
+ */
131
+
132
+ header {
133
+ &[role='banner'] {
134
+ @include outer-container(100%);
135
+ min-width: 100%;
136
+ }
137
+ }
138
+
139
+ footer {
140
+ &[role='contentinfo'] {
141
+ @include outer-container(100%);
142
+ @include pad(0 default);
143
+
144
+ margin-top: ($base-spacing * 2);
145
+ min-width: 100%;
146
+ }
147
+ }
data/_sass/_mixins.scss CHANGED
@@ -1,3 +1,6 @@
1
1
  @import "mixins/prefixer";
2
2
  @import "mixins/clearfix";
3
3
  @import "mixins/ellipsis";
4
+ @import "mixins/flex-layout";
5
+ @import "mixins/omega-reset";
6
+ @import "mixins/wrapper-padding";
data/_sass/components/.keep ADDED
File without changes
data/_sass/mixins/_flex-layout.scss ADDED
@@ -0,0 +1,14 @@
1
+ @mixin flex-layout {
2
+ display: flex;
3
+ flex-direction: column;
4
+ min-height: 100vh;
5
+
6
+ header[role='banner'],
7
+ footer[role='contentinfo'] {
8
+ flex: none;
9
+ }
10
+
11
+ main {
12
+ flex: 1 0 auto;
13
+ }
14
+ }
data/_sass/mixins/_omega-reset.scss ADDED
@@ -0,0 +1,11 @@
1
+ @mixin omega-reset($nth) {
2
+ $nth-plus-one: '#{$nth}+1';
3
+
4
+ &:nth-child(#{$nth}) {
5
+ margin-right: flex-gutter($content-grid-columns);
6
+ }
7
+
8
+ &:nth-child(#{$nth-plus-one}) {
9
+ clear: none;
10
+ }
11
+ }
data/_sass/mixins/_wrapper-padding.scss ADDED
@@ -0,0 +1,11 @@
1
+ @mixin wrapper-padding {
2
+ @include pad(0 $gutter);
3
+
4
+ width: 100%;
5
+ box-sizing: border-box;
6
+
7
+ @include media($desktop) {
8
+ width: 100%;
9
+ min-width: $max-width;
10
+ }
11
+ }
data/assets/style.scss CHANGED
@@ -1,16 +1,16 @@
1
1
  ---
2
2
  ---
3
3
 
4
- @import "mixins";
5
4
  @import "vendor/bourbon/bourbon"; // v4.2.7
6
- @import "grid-settings";
7
5
  @import "vendor/neat/neat"; // v1.7
8
-
9
- @import "normalize";
10
6
  @import "variables";
11
7
  @import "easings";
8
+ @import "mixins";
9
+ @import "grid-settings";
10
+
11
+ @import "normalize";
12
12
  @import "colors";
13
13
 
14
- @import "components/text-input";
14
+ @import "forms";
15
15
 
16
16
  @import "print";
metadata CHANGED
@@ -1,14 +1,16 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: dta_rapid
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.6
4
+ version: 0.2.7
5
5
  platform: ruby
6
6
  authors:
7
7
  - Gareth Rogers
8
+ - Andrew Carr
9
+ - Matt Chamberlain
8
10
  autorequire:
9
11
  bindir: bin
10
12
  cert_chain: []
11
- date: 2017-02-22 00:00:00.000000000 Z
13
+ date: 2017-02-23 00:00:00.000000000 Z
12
14
  dependencies:
13
15
  - !ruby/object:Gem::Dependency
14
16
  name: jekyll
@@ -55,25 +57,31 @@ dependencies:
55
57
  description:
56
58
  email:
57
59
  - grogers@thoughtworks.com
60
+ - andrew@2metres.com
61
+ - mchamber@thoughtworks.com
58
62
  executables: []
59
63
  extensions: []
60
64
  extra_rdoc_files: []
61
65
  files:
62
66
  - LICENSE.txt
63
67
  - README.md
64
- - _includes/forms/text-input.html
68
+ - _includes/forms/text-field.html
65
69
  - _layouts/default.html
66
70
  - _sass/_colors.scss
67
71
  - _sass/_easings.scss
72
+ - _sass/_forms.scss
68
73
  - _sass/_grid-settings.scss
69
74
  - _sass/_mixins.scss
70
75
  - _sass/_normalize.scss
71
76
  - _sass/_print.scss
72
77
  - _sass/_variables.scss
73
- - _sass/components/text-input.scss
78
+ - _sass/components/.keep
74
79
  - _sass/mixins/_clearfix.scss
75
80
  - _sass/mixins/_ellipsis.scss
81
+ - _sass/mixins/_flex-layout.scss
82
+ - _sass/mixins/_omega-reset.scss
76
83
  - _sass/mixins/_prefixer.scss
84
+ - _sass/mixins/_wrapper-padding.scss
77
85
  - _sass/vendor/bourbon/_bourbon-deprecate.scss
78
86
  - _sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss
79
87
  - _sass/vendor/bourbon/_bourbon.scss
data/_includes/forms/text-input.html DELETED
@@ -1,2 +0,0 @@
1
- <label for="{{ }}"
2
- <input id="{{ }} type="text" required>