dta_rapid 0.2.5 → 0.2.6

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 (126) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/forms/text-input.html +2 -0
  3. data/_sass/_colors.scss +18 -3
  4. data/_sass/components/text-input.scss +71 -0
  5. data/_sass/vendor/bourbon/_bourbon-deprecate.scss +19 -0
  6. data/_sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss +425 -0
  7. data/_sass/vendor/bourbon/_bourbon.scss +90 -0
  8. data/_sass/vendor/bourbon/addons/_border-color.scss +29 -0
  9. data/_sass/vendor/bourbon/addons/_border-radius.scss +48 -0
  10. data/_sass/vendor/bourbon/addons/_border-style.scss +28 -0
  11. data/_sass/vendor/bourbon/addons/_border-width.scss +28 -0
  12. data/_sass/vendor/bourbon/addons/_buttons.scss +69 -0
  13. data/_sass/vendor/bourbon/addons/_clearfix.scss +25 -0
  14. data/_sass/vendor/bourbon/addons/_ellipsis.scss +30 -0
  15. data/_sass/vendor/bourbon/addons/_font-stacks.scss +31 -0
  16. data/_sass/vendor/bourbon/addons/_hide-text.scss +27 -0
  17. data/_sass/vendor/bourbon/addons/_margin.scss +29 -0
  18. data/_sass/vendor/bourbon/addons/_padding.scss +29 -0
  19. data/_sass/vendor/bourbon/addons/_position.scss +51 -0
  20. data/_sass/vendor/bourbon/addons/_prefixer.scss +66 -0
  21. data/_sass/vendor/bourbon/addons/_retina-image.scss +27 -0
  22. data/_sass/vendor/bourbon/addons/_size.scss +51 -0
  23. data/_sass/vendor/bourbon/addons/_text-inputs.scss +118 -0
  24. data/_sass/vendor/bourbon/addons/_timing-functions.scss +34 -0
  25. data/_sass/vendor/bourbon/addons/_triangle.scss +63 -0
  26. data/_sass/vendor/bourbon/addons/_word-wrap.scss +29 -0
  27. data/_sass/vendor/bourbon/css3/_animation.scss +61 -0
  28. data/_sass/vendor/bourbon/css3/_appearance.scss +5 -0
  29. data/_sass/vendor/bourbon/css3/_backface-visibility.scss +5 -0
  30. data/_sass/vendor/bourbon/css3/_background-image.scss +44 -0
  31. data/_sass/vendor/bourbon/css3/_background.scss +57 -0
  32. data/_sass/vendor/bourbon/css3/_border-image.scss +61 -0
  33. data/_sass/vendor/bourbon/css3/_calc.scss +6 -0
  34. data/_sass/vendor/bourbon/css3/_columns.scss +67 -0
  35. data/_sass/vendor/bourbon/css3/_filter.scss +6 -0
  36. data/_sass/vendor/bourbon/css3/_flex-box.scss +327 -0
  37. data/_sass/vendor/bourbon/css3/_font-face.scss +29 -0
  38. data/_sass/vendor/bourbon/css3/_font-feature-settings.scss +6 -0
  39. data/_sass/vendor/bourbon/css3/_hidpi-media-query.scss +12 -0
  40. data/_sass/vendor/bourbon/css3/_hyphens.scss +6 -0
  41. data/_sass/vendor/bourbon/css3/_image-rendering.scss +15 -0
  42. data/_sass/vendor/bourbon/css3/_keyframes.scss +38 -0
  43. data/_sass/vendor/bourbon/css3/_linear-gradient.scss +40 -0
  44. data/_sass/vendor/bourbon/css3/_perspective.scss +12 -0
  45. data/_sass/vendor/bourbon/css3/_placeholder.scss +10 -0
  46. data/_sass/vendor/bourbon/css3/_radial-gradient.scss +40 -0
  47. data/_sass/vendor/bourbon/css3/_selection.scss +44 -0
  48. data/_sass/vendor/bourbon/css3/_text-decoration.scss +27 -0
  49. data/_sass/vendor/bourbon/css3/_transform.scss +21 -0
  50. data/_sass/vendor/bourbon/css3/_transition.scss +81 -0
  51. data/_sass/vendor/bourbon/css3/_user-select.scss +5 -0
  52. data/_sass/vendor/bourbon/functions/_assign-inputs.scss +16 -0
  53. data/_sass/vendor/bourbon/functions/_contains-falsy.scss +25 -0
  54. data/_sass/vendor/bourbon/functions/_contains.scss +31 -0
  55. data/_sass/vendor/bourbon/functions/_is-length.scss +16 -0
  56. data/_sass/vendor/bourbon/functions/_is-light.scss +26 -0
  57. data/_sass/vendor/bourbon/functions/_is-number.scss +16 -0
  58. data/_sass/vendor/bourbon/functions/_is-size.scss +18 -0
  59. data/_sass/vendor/bourbon/functions/_modular-scale.scss +74 -0
  60. data/_sass/vendor/bourbon/functions/_px-to-em.scss +24 -0
  61. data/_sass/vendor/bourbon/functions/_px-to-rem.scss +26 -0
  62. data/_sass/vendor/bourbon/functions/_shade.scss +24 -0
  63. data/_sass/vendor/bourbon/functions/_strip-units.scss +22 -0
  64. data/_sass/vendor/bourbon/functions/_tint.scss +24 -0
  65. data/_sass/vendor/bourbon/functions/_transition-property-name.scss +37 -0
  66. data/_sass/vendor/bourbon/functions/_unpack.scss +32 -0
  67. data/_sass/vendor/bourbon/helpers/_convert-units.scss +26 -0
  68. data/_sass/vendor/bourbon/helpers/_directional-values.scss +108 -0
  69. data/_sass/vendor/bourbon/helpers/_font-source-declaration.scss +53 -0
  70. data/_sass/vendor/bourbon/helpers/_gradient-positions-parser.scss +24 -0
  71. data/_sass/vendor/bourbon/helpers/_linear-angle-parser.scss +35 -0
  72. data/_sass/vendor/bourbon/helpers/_linear-gradient-parser.scss +51 -0
  73. data/_sass/vendor/bourbon/helpers/_linear-positions-parser.scss +77 -0
  74. data/_sass/vendor/bourbon/helpers/_linear-side-corner-parser.scss +41 -0
  75. data/_sass/vendor/bourbon/helpers/_radial-arg-parser.scss +74 -0
  76. data/_sass/vendor/bourbon/helpers/_radial-gradient-parser.scss +55 -0
  77. data/_sass/vendor/bourbon/helpers/_radial-positions-parser.scss +28 -0
  78. data/_sass/vendor/bourbon/helpers/_render-gradients.scss +31 -0
  79. data/_sass/vendor/bourbon/helpers/_shape-size-stripper.scss +15 -0
  80. data/_sass/vendor/bourbon/helpers/_str-to-num.scss +55 -0
  81. data/_sass/vendor/bourbon/settings/_asset-pipeline.scss +7 -0
  82. data/_sass/vendor/bourbon/settings/_deprecation-warnings.scss +8 -0
  83. data/_sass/vendor/bourbon/settings/_prefixer.scss +9 -0
  84. data/_sass/vendor/bourbon/settings/_px-to-em.scss +1 -0
  85. data/_sass/vendor/neat/_neat-helpers.scss +8 -0
  86. data/_sass/vendor/neat/_neat.scss +19 -22
  87. data/_sass/vendor/neat/functions/_new-breakpoint.scss +49 -0
  88. data/_sass/vendor/neat/functions/_private.scss +114 -0
  89. data/_sass/vendor/neat/grid/_box-sizing.scss +15 -0
  90. data/_sass/vendor/neat/grid/_direction-context.scss +33 -0
  91. data/_sass/vendor/neat/grid/_display-context.scss +28 -0
  92. data/_sass/vendor/neat/grid/_fill-parent.scss +22 -0
  93. data/_sass/vendor/neat/grid/_media.scss +92 -0
  94. data/_sass/vendor/neat/grid/_omega.scss +87 -0
  95. data/_sass/vendor/neat/grid/_outer-container.scss +38 -0
  96. data/_sass/vendor/neat/grid/_pad.scss +25 -0
  97. data/_sass/vendor/neat/grid/_private.scss +35 -0
  98. data/_sass/vendor/neat/grid/_row.scss +52 -0
  99. data/_sass/vendor/neat/grid/_shift.scss +50 -0
  100. data/_sass/vendor/neat/grid/_span-columns.scss +94 -0
  101. data/_sass/vendor/neat/grid/_to-deprecate.scss +97 -0
  102. data/_sass/vendor/neat/grid/_visual-grid.scss +42 -0
  103. data/_sass/vendor/neat/settings/_disable-warnings.scss +13 -0
  104. data/_sass/vendor/neat/settings/_grid.scss +51 -0
  105. data/_sass/vendor/neat/settings/_visual-grid.scss +27 -0
  106. data/assets/style.scss +7 -4
  107. metadata +103 -20
  108. data/_sass/components/.keep +0 -0
  109. data/_sass/vendor/neat/neat/functions/_neat-append-grid-visual.scss +0 -21
  110. data/_sass/vendor/neat/neat/functions/_neat-column-default.scss +0 -23
  111. data/_sass/vendor/neat/neat/functions/_neat-column-ratio.scss +0 -24
  112. data/_sass/vendor/neat/neat/functions/_neat-column-width.scss +0 -25
  113. data/_sass/vendor/neat/neat/functions/_neat-float-direction.scss +0 -22
  114. data/_sass/vendor/neat/neat/functions/_neat-merge-defaults.scss +0 -23
  115. data/_sass/vendor/neat/neat/functions/_neat-opposite-direction.scss +0 -22
  116. data/_sass/vendor/neat/neat/functions/_neat-parse-columns.scss +0 -22
  117. data/_sass/vendor/neat/neat/functions/_neat-parse-media.scss +0 -20
  118. data/_sass/vendor/neat/neat/functions/_retrieve-neat-settings.scss +0 -19
  119. data/_sass/vendor/neat/neat/mixins/_grid-collapse.scss +0 -36
  120. data/_sass/vendor/neat/neat/mixins/_grid-column.scss +0 -39
  121. data/_sass/vendor/neat/neat/mixins/_grid-container.scss +0 -30
  122. data/_sass/vendor/neat/neat/mixins/_grid-media.scss +0 -67
  123. data/_sass/vendor/neat/neat/mixins/_grid-push.scss +0 -37
  124. data/_sass/vendor/neat/neat/mixins/_grid-shift.scss +0 -36
  125. data/_sass/vendor/neat/neat/mixins/_grid-visual.scss +0 -67
  126. data/_sass/vendor/neat/neat/settings/_settings.scss +0 -74
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: b18a67b29e534e8a02d6d28beb8f1d7800b7193c
4
- data.tar.gz: e5c22ad6a62df30c8101a24115feea855d7a247b
3
+ metadata.gz: 26c3c6114c015910dea29bb142bbed77887721cf
4
+ data.tar.gz: 91c7e41a619d7fb00e957fa87d4c8bc6469c67a5
5
5
  SHA512:
6
- metadata.gz: 2b66b17d45b9e384539f218d712ff6cae33c01b8f6ece5f8750d7828e62286139ebaa52a38a850dea50867dc6abaead07eb701050106320ed2d5eaae6f823060
7
- data.tar.gz: d5941e2cb6c83cd54db2485173e4df4c3bf7c793d4105a122542f5e42ab5c70f1020686684bde1ee2c53b7959438ecf5dbe7ce74c2e9174f980b96bfd171d37c
6
+ metadata.gz: 780496c34d46f3c314e6d40e69ca488473352357f1442c57865f0386b1da6ff8b3a185d1c92f178fadaed087fcac13c51498adb018480f0c9493975fc1d8ddc8
7
+ data.tar.gz: 22f56dbaba0ba258f1954c265f6313045bb93124e58e6837cd3ccdd2059f9de487270d0eed262bef6d929b023f3356121930aa6653a7d5a4afe64c2aff542b4a
@@ -0,0 +1,2 @@
1
+ <label for="{{ }}"
2
+ <input id="{{ }} type="text" required>
@@ -5,11 +5,12 @@ $grey: #6e6e6e;
5
5
  $light-grey: lighten($grey, 30%);
6
6
  $lighter-grey: #f0f3f5;
7
7
 
8
- // Medicare Brand Colors
8
+ $aqua: #18788d;
9
9
 
10
- $medicare-green: #008752;
11
- $medicare-yellow: #FFC423;
10
+ // Brand Colors
12
11
 
12
+ $medical-green: #008752;
13
+ $medical-yellow: #FFC423;
13
14
 
14
15
  // Status Colors
15
16
 
@@ -24,3 +25,17 @@ $light-yellow: #fdf7dc;
24
25
 
25
26
  $blue: #00bfe9;
26
27
  $light-blue: #e8f5fa;
28
+
29
+ $action-color: $aqua;
30
+
31
+ $input-focus-color: lighten($aqua, 30%);
32
+
33
+ $border-color: $light-grey;
34
+ $background-color: white;
35
+
36
+ $error-color: $red;
37
+ $success-color: $green;
38
+ $warning-color: $yellow;
39
+ $info-color: $blue;
40
+
41
+ $body-text-color: $dark-grey;
@@ -0,0 +1,71 @@
1
+
2
+ %base-input {
3
+ width: 100%;
4
+ outline-offset: 0;
5
+ border: 2px solid $border-color;
6
+ border-radius: 0;
7
+ background-color: $background-color;
8
+ padding: $tiny-spacing;
9
+
10
+ &:invalid,
11
+ &.invalid {
12
+ outline: 2px solid $error-color;
13
+ }
14
+
15
+ &.valid {
16
+ outline: 2px solid $success-color;
17
+ }
18
+
19
+ &:focus {
20
+ outline: 2px solid $input-focus-color;
21
+ }
22
+
23
+ &:disabled,
24
+ &[disabled] {
25
+ cursor: not-allowed;
26
+ background: $lighter-grey;
27
+ border: 2px solid $light-grey;
28
+ }
29
+ }
30
+
31
+ fieldset,
32
+ p {
33
+ margin: 0 0 $medium-spacing 0;
34
+ padding: 0;
35
+ border: none;
36
+ }
37
+
38
+ legend {
39
+ margin-bottom: $small-spacing;
40
+ }
41
+
42
+ label {
43
+ display: block;
44
+ margin-top: ($small-spacing + $tiny-spacing);
45
+ margin-bottom: ($small-spacing + $tiny-spacing);
46
+
47
+ @include media($tablet) {
48
+ margin-top: $small-spacing;
49
+ margin-bottom: $small-spacing;
50
+ }
51
+ }
52
+
53
+ .hint {
54
+ display: block;
55
+ margin-bottom: $tiny-spacing;
56
+ font-size: rem(14);
57
+ color: $body-text-color;
58
+ }
59
+
60
+ [type='text'],
61
+ [type='number'],
62
+ [type='tel'],
63
+ [type='email'],
64
+ [type='password'] {
65
+ @extend %base-input;
66
+ }
67
+
68
+ textarea {
69
+ @extend %base-input;
70
+ resize: vertical;
71
+ }
@@ -0,0 +1,19 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Throws Sass warnings to announce library deprecations. You can disable them
4
+ /// by setting the `$output-bourbon-deprecation-warnings` variable to `false`.
5
+ ///
6
+ /// @access private
7
+
8
+ @mixin _bourbon-deprecate($feature, $message: null) {
9
+ @if $output-bourbon-deprecation-warnings == true {
10
+ @warn "[Bourbon] [Deprecation] `#{$feature}` is deprecated and will be " +
11
+ "removed in 5.0.0. #{$message}";
12
+ @content;
13
+ }
14
+ }
15
+
16
+ @mixin _bourbon-deprecate-for-prefixing($feature) {
17
+ @include _bourbon-deprecate($feature, "We suggest using an automated " +
18
+ "prefixing tool, like Autoprefixer.");
19
+ }
@@ -0,0 +1,425 @@
1
+ // The following features have been deprecated and will be removed in the next MAJOR version release
2
+
3
+ @mixin inline-block {
4
+ @include _bourbon-deprecate("inline-block");
5
+
6
+ display: inline-block;
7
+ }
8
+
9
+ @mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
10
+ @include _bourbon-deprecate("button");
11
+
12
+ @if type-of($style) == string and type-of($base-color) == color {
13
+ @include buttonstyle($style, $base-color, $text-size, $padding);
14
+ }
15
+
16
+ @if type-of($style) == string and type-of($base-color) == number {
17
+ $padding: $text-size;
18
+ $text-size: $base-color;
19
+ $base-color: #4294f0;
20
+
21
+ @if $padding == inherit {
22
+ $padding: 7px 18px;
23
+ }
24
+
25
+ @include buttonstyle($style, $base-color, $text-size, $padding);
26
+ }
27
+
28
+ @if type-of($style) == color and type-of($base-color) == color {
29
+ $base-color: $style;
30
+ $style: simple;
31
+ @include buttonstyle($style, $base-color, $text-size, $padding);
32
+ }
33
+
34
+ @if type-of($style) == color and type-of($base-color) == number {
35
+ $padding: $text-size;
36
+ $text-size: $base-color;
37
+ $base-color: $style;
38
+ $style: simple;
39
+
40
+ @if $padding == inherit {
41
+ $padding: 7px 18px;
42
+ }
43
+
44
+ @include buttonstyle($style, $base-color, $text-size, $padding);
45
+ }
46
+
47
+ @if type-of($style) == number {
48
+ $padding: $base-color;
49
+ $text-size: $style;
50
+ $base-color: #4294f0;
51
+ $style: simple;
52
+
53
+ @if $padding == #4294f0 {
54
+ $padding: 7px 18px;
55
+ }
56
+
57
+ @include buttonstyle($style, $base-color, $text-size, $padding);
58
+ }
59
+
60
+ &:disabled {
61
+ cursor: not-allowed;
62
+ opacity: 0.5;
63
+ }
64
+ }
65
+
66
+ // Selector Style Button
67
+ @mixin buttonstyle($type, $b-color, $t-size, $pad) {
68
+ // Grayscale button
69
+ @if $type == simple and $b-color == grayscale($b-color) {
70
+ @include simple($b-color, true, $t-size, $pad);
71
+ }
72
+
73
+ @if $type == shiny and $b-color == grayscale($b-color) {
74
+ @include shiny($b-color, true, $t-size, $pad);
75
+ }
76
+
77
+ @if $type == pill and $b-color == grayscale($b-color) {
78
+ @include pill($b-color, true, $t-size, $pad);
79
+ }
80
+
81
+ @if $type == flat and $b-color == grayscale($b-color) {
82
+ @include flat($b-color, true, $t-size, $pad);
83
+ }
84
+
85
+ // Colored button
86
+ @if $type == simple {
87
+ @include simple($b-color, false, $t-size, $pad);
88
+ }
89
+
90
+ @else if $type == shiny {
91
+ @include shiny($b-color, false, $t-size, $pad);
92
+ }
93
+
94
+ @else if $type == pill {
95
+ @include pill($b-color, false, $t-size, $pad);
96
+ }
97
+
98
+ @else if $type == flat {
99
+ @include flat($b-color, false, $t-size, $pad);
100
+ }
101
+ }
102
+
103
+ // Simple Button
104
+ @mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
105
+ $color: hsl(0, 0, 100%);
106
+ $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
107
+ $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
108
+ $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
109
+ $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
110
+
111
+ @if is-light($base-color) {
112
+ $color: hsl(0, 0, 20%);
113
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
114
+ }
115
+
116
+ @if $grayscale == true {
117
+ $border: grayscale($border);
118
+ $inset-shadow: grayscale($inset-shadow);
119
+ $stop-gradient: grayscale($stop-gradient);
120
+ $text-shadow: grayscale($text-shadow);
121
+ }
122
+
123
+ border: 1px solid $border;
124
+ border-radius: 3px;
125
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
126
+ color: $color;
127
+ display: inline-block;
128
+ font-size: $textsize;
129
+ font-weight: bold;
130
+ @include linear-gradient ($base-color, $stop-gradient);
131
+ padding: $padding;
132
+ text-decoration: none;
133
+ text-shadow: 0 1px 0 $text-shadow;
134
+ background-clip: padding-box;
135
+
136
+ &:hover:not(:disabled) {
137
+ $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
138
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
139
+ $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
140
+
141
+ @if $grayscale == true {
142
+ $base-color-hover: grayscale($base-color-hover);
143
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
144
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
145
+ }
146
+
147
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
148
+
149
+ box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
150
+ cursor: pointer;
151
+ }
152
+
153
+ &:active:not(:disabled),
154
+ &:focus:not(:disabled) {
155
+ $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
156
+ $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
157
+
158
+ @if $grayscale == true {
159
+ $border-active: grayscale($border-active);
160
+ $inset-shadow-active: grayscale($inset-shadow-active);
161
+ }
162
+
163
+ border: 1px solid $border-active;
164
+ box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
165
+ }
166
+ }
167
+
168
+ // Shiny Button
169
+ @mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
170
+ $color: hsl(0, 0, 100%);
171
+ $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
172
+ $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
173
+ $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
174
+ $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
175
+ $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
176
+ $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
177
+ $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
178
+
179
+ @if is-light($base-color) {
180
+ $color: hsl(0, 0, 20%);
181
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
182
+ }
183
+
184
+ @if $grayscale == true {
185
+ $border: grayscale($border);
186
+ $border-bottom: grayscale($border-bottom);
187
+ $fourth-stop: grayscale($fourth-stop);
188
+ $inset-shadow: grayscale($inset-shadow);
189
+ $second-stop: grayscale($second-stop);
190
+ $text-shadow: grayscale($text-shadow);
191
+ $third-stop: grayscale($third-stop);
192
+ }
193
+
194
+ @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
195
+
196
+ border: 1px solid $border;
197
+ border-bottom: 1px solid $border-bottom;
198
+ border-radius: 5px;
199
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
200
+ color: $color;
201
+ display: inline-block;
202
+ font-size: $textsize;
203
+ font-weight: bold;
204
+ padding: $padding;
205
+ text-align: center;
206
+ text-decoration: none;
207
+ text-shadow: 0 -1px 1px $text-shadow;
208
+
209
+ &:hover:not(:disabled) {
210
+ $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
211
+ $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
212
+ $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
213
+ $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
214
+
215
+ @if $grayscale == true {
216
+ $first-stop-hover: grayscale($first-stop-hover);
217
+ $second-stop-hover: grayscale($second-stop-hover);
218
+ $third-stop-hover: grayscale($third-stop-hover);
219
+ $fourth-stop-hover: grayscale($fourth-stop-hover);
220
+ }
221
+
222
+ @include linear-gradient(top, $first-stop-hover 0%,
223
+ $second-stop-hover 50%,
224
+ $third-stop-hover 50%,
225
+ $fourth-stop-hover 100%);
226
+ cursor: pointer;
227
+ }
228
+
229
+ &:active:not(:disabled),
230
+ &:focus:not(:disabled) {
231
+ $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
232
+
233
+ @if $grayscale == true {
234
+ $inset-shadow-active: grayscale($inset-shadow-active);
235
+ }
236
+
237
+ box-shadow: inset 0 0 20px 0 $inset-shadow-active;
238
+ }
239
+ }
240
+
241
+ // Pill Button
242
+ @mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
243
+ $color: hsl(0, 0, 100%);
244
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
245
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
246
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
247
+ $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
248
+ $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
249
+ $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
250
+
251
+ @if is-light($base-color) {
252
+ $color: hsl(0, 0, 20%);
253
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
254
+ }
255
+
256
+ @if $grayscale == true {
257
+ $border-bottom: grayscale($border-bottom);
258
+ $border-sides: grayscale($border-sides);
259
+ $border-top: grayscale($border-top);
260
+ $inset-shadow: grayscale($inset-shadow);
261
+ $stop-gradient: grayscale($stop-gradient);
262
+ $text-shadow: grayscale($text-shadow);
263
+ }
264
+
265
+ border: 1px solid $border-top;
266
+ border-color: $border-top $border-sides $border-bottom;
267
+ border-radius: 16px;
268
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
269
+ color: $color;
270
+ display: inline-block;
271
+ font-size: $textsize;
272
+ font-weight: normal;
273
+ line-height: 1;
274
+ @include linear-gradient ($base-color, $stop-gradient);
275
+ padding: $padding;
276
+ text-align: center;
277
+ text-decoration: none;
278
+ text-shadow: 0 -1px 1px $text-shadow;
279
+ background-clip: padding-box;
280
+
281
+ &:hover:not(:disabled) {
282
+ $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
283
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
284
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
285
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
286
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
287
+ $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
288
+ $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
289
+
290
+ @if $grayscale == true {
291
+ $base-color-hover: grayscale($base-color-hover);
292
+ $border-bottom: grayscale($border-bottom);
293
+ $border-sides: grayscale($border-sides);
294
+ $border-top: grayscale($border-top);
295
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
296
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
297
+ $text-shadow-hover: grayscale($text-shadow-hover);
298
+ }
299
+
300
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
301
+
302
+ background-clip: padding-box;
303
+ border: 1px solid $border-top;
304
+ border-color: $border-top $border-sides $border-bottom;
305
+ box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
306
+ cursor: pointer;
307
+ text-shadow: 0 -1px 1px $text-shadow-hover;
308
+ }
309
+
310
+ &:active:not(:disabled),
311
+ &:focus:not(:disabled) {
312
+ $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
313
+ $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
314
+ $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
315
+ $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
316
+ $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
317
+
318
+ @if $grayscale == true {
319
+ $active-color: grayscale($active-color);
320
+ $border-active: grayscale($border-active);
321
+ $border-bottom-active: grayscale($border-bottom-active);
322
+ $inset-shadow-active: grayscale($inset-shadow-active);
323
+ $text-shadow-active: grayscale($text-shadow-active);
324
+ }
325
+
326
+ background: $active-color;
327
+ border: 1px solid $border-active;
328
+ border-bottom: 1px solid $border-bottom-active;
329
+ box-shadow: inset 0 0 6px 3px $inset-shadow-active;
330
+ text-shadow: 0 -1px 1px $text-shadow-active;
331
+ }
332
+ }
333
+
334
+ // Flat Button
335
+ @mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
336
+ $color: hsl(0, 0, 100%);
337
+
338
+ @if is-light($base-color) {
339
+ $color: hsl(0, 0, 20%);
340
+ }
341
+
342
+ background-color: $base-color;
343
+ border-radius: 3px;
344
+ border: 0;
345
+ color: $color;
346
+ display: inline-block;
347
+ font-size: $textsize;
348
+ font-weight: bold;
349
+ padding: $padding;
350
+ text-decoration: none;
351
+ background-clip: padding-box;
352
+
353
+ &:hover:not(:disabled){
354
+ $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
355
+
356
+ @if $grayscale == true {
357
+ $base-color-hover: grayscale($base-color-hover);
358
+ }
359
+
360
+ background-color: $base-color-hover;
361
+ cursor: pointer;
362
+ }
363
+
364
+ &:active:not(:disabled),
365
+ &:focus:not(:disabled) {
366
+ $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
367
+
368
+ @if $grayscale == true {
369
+ $base-color-active: grayscale($base-color-active);
370
+ }
371
+
372
+ background-color: $base-color-active;
373
+ cursor: pointer;
374
+ }
375
+ }
376
+
377
+ // Flexible grid
378
+ @function flex-grid($columns, $container-columns: $fg-max-columns) {
379
+ @if $output-bourbon-deprecation-warnings == true {
380
+ @warn "[Bourbon] [Deprecation] `flex-grid` is deprecated and will be " +
381
+ "removed in 5.0.0. For grid functions, check out Bourbon's sister library" +
382
+ "Neat.";
383
+ }
384
+
385
+ $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
386
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
387
+ @return percentage($width / $container-width);
388
+ }
389
+
390
+ // Flexible gutter
391
+ @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
392
+ @if $output-bourbon-deprecation-warnings == true {
393
+ @warn "[Bourbon] [Deprecation] `flex-gutter` is deprecated and will be " +
394
+ "removed in 5.0.0. For grid functions, check out Bourbon's sister library" +
395
+ "Neat.";
396
+ }
397
+
398
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
399
+ @return percentage($gutter / $container-width);
400
+ }
401
+
402
+ @function grid-width($n) {
403
+ @if $output-bourbon-deprecation-warnings == true {
404
+ @warn "[Bourbon] [Deprecation] `grid-width` is deprecated and will be " +
405
+ "removed in 5.0.0. For grid functions, check out Bourbon's sister library" +
406
+ "Neat.";
407
+ }
408
+
409
+ @return $n * $gw-column + ($n - 1) * $gw-gutter;
410
+ }
411
+
412
+ @function golden-ratio($value, $increment) {
413
+ @if $output-bourbon-deprecation-warnings == true {
414
+ @warn "[Bourbon] [Deprecation] `golden-ratio` is deprecated and will be " +
415
+ "removed in 5.0.0. You can use the `modular-scale` function instead.";
416
+ }
417
+
418
+ @return modular-scale($increment, $value, $ratio: $golden);
419
+ }
420
+
421
+ @mixin box-sizing($box) {
422
+ @include _bourbon-deprecate-for-prefixing("box-sizing");
423
+
424
+ @include prefixer(box-sizing, $box, webkit moz spec);
425
+ }