dta_rapid 0.3.5 → 0.4.0

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 (150) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -2
  3. data/_includes/buttons/link-button.html +1 -7
  4. data/_includes/buttons/upload-button.html +26 -4
  5. data/_includes/callouts/calendar-callout.html +5 -0
  6. data/_includes/callouts/container-callout.html +5 -0
  7. data/_includes/callouts/paragraph-callout.html +1 -0
  8. data/_includes/forms/control-input.html +26 -0
  9. data/_includes/forms/date-field.html +2 -1
  10. data/_includes/forms/text-field.html +5 -5
  11. data/_includes/navigation/breadcrumbs.html +10 -12
  12. data/_includes/navigation/inpage.html +8 -0
  13. data/_layouts/default.html +10 -7
  14. data/assets/style.scss +9 -30
  15. metadata +9 -139
  16. data/_includes/forms/radio-field.html +0 -20
  17. data/_includes/typography/callout.html +0 -1
  18. data/_layouts/conversational.html +0 -19
  19. data/_sass/_colors.scss +0 -76
  20. data/_sass/_easings.scss +0 -26
  21. data/_sass/_forms.scss +0 -79
  22. data/_sass/_grid-settings.scss +0 -143
  23. data/_sass/_mixins.scss +0 -6
  24. data/_sass/_normalize.scss +0 -424
  25. data/_sass/_print.scss +0 -77
  26. data/_sass/_typography.scss +0 -118
  27. data/_sass/_validation.scss +0 -8
  28. data/_sass/_variables.scss +0 -35
  29. data/_sass/components/_accordian.scss +0 -68
  30. data/_sass/components/_badge.scss +0 -11
  31. data/_sass/components/_breadcrumbs.scss +0 -57
  32. data/_sass/components/_button.scss +0 -72
  33. data/_sass/components/_callout.scss +0 -25
  34. data/_sass/components/_multiple-choice.scss +0 -60
  35. data/_sass/components/_scroll-form.scss +0 -49
  36. data/_sass/components/_table.scss +0 -25
  37. data/_sass/components/_text-field.scss +0 -7
  38. data/_sass/components/_upload-button.scss +0 -7
  39. data/_sass/mixins/_clearfix.scss +0 -7
  40. data/_sass/mixins/_ellipsis.scss +0 -8
  41. data/_sass/mixins/_flex-layout.scss +0 -14
  42. data/_sass/mixins/_omega-reset.scss +0 -11
  43. data/_sass/mixins/_prefixer.scss +0 -35
  44. data/_sass/mixins/_wrapper-padding.scss +0 -11
  45. data/_sass/vendor/bourbon/_bourbon-deprecate.scss +0 -19
  46. data/_sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss +0 -425
  47. data/_sass/vendor/bourbon/_bourbon.scss +0 -90
  48. data/_sass/vendor/bourbon/addons/_border-color.scss +0 -29
  49. data/_sass/vendor/bourbon/addons/_border-radius.scss +0 -48
  50. data/_sass/vendor/bourbon/addons/_border-style.scss +0 -28
  51. data/_sass/vendor/bourbon/addons/_border-width.scss +0 -28
  52. data/_sass/vendor/bourbon/addons/_buttons.scss +0 -69
  53. data/_sass/vendor/bourbon/addons/_clearfix.scss +0 -25
  54. data/_sass/vendor/bourbon/addons/_ellipsis.scss +0 -30
  55. data/_sass/vendor/bourbon/addons/_font-stacks.scss +0 -31
  56. data/_sass/vendor/bourbon/addons/_hide-text.scss +0 -27
  57. data/_sass/vendor/bourbon/addons/_margin.scss +0 -29
  58. data/_sass/vendor/bourbon/addons/_padding.scss +0 -29
  59. data/_sass/vendor/bourbon/addons/_position.scss +0 -51
  60. data/_sass/vendor/bourbon/addons/_prefixer.scss +0 -66
  61. data/_sass/vendor/bourbon/addons/_retina-image.scss +0 -27
  62. data/_sass/vendor/bourbon/addons/_size.scss +0 -51
  63. data/_sass/vendor/bourbon/addons/_text-inputs.scss +0 -118
  64. data/_sass/vendor/bourbon/addons/_timing-functions.scss +0 -34
  65. data/_sass/vendor/bourbon/addons/_triangle.scss +0 -63
  66. data/_sass/vendor/bourbon/addons/_word-wrap.scss +0 -29
  67. data/_sass/vendor/bourbon/css3/_animation.scss +0 -61
  68. data/_sass/vendor/bourbon/css3/_appearance.scss +0 -5
  69. data/_sass/vendor/bourbon/css3/_backface-visibility.scss +0 -5
  70. data/_sass/vendor/bourbon/css3/_background-image.scss +0 -44
  71. data/_sass/vendor/bourbon/css3/_background.scss +0 -57
  72. data/_sass/vendor/bourbon/css3/_border-image.scss +0 -61
  73. data/_sass/vendor/bourbon/css3/_calc.scss +0 -6
  74. data/_sass/vendor/bourbon/css3/_columns.scss +0 -67
  75. data/_sass/vendor/bourbon/css3/_filter.scss +0 -6
  76. data/_sass/vendor/bourbon/css3/_flex-box.scss +0 -327
  77. data/_sass/vendor/bourbon/css3/_font-face.scss +0 -29
  78. data/_sass/vendor/bourbon/css3/_font-feature-settings.scss +0 -6
  79. data/_sass/vendor/bourbon/css3/_hidpi-media-query.scss +0 -12
  80. data/_sass/vendor/bourbon/css3/_hyphens.scss +0 -6
  81. data/_sass/vendor/bourbon/css3/_image-rendering.scss +0 -15
  82. data/_sass/vendor/bourbon/css3/_keyframes.scss +0 -38
  83. data/_sass/vendor/bourbon/css3/_linear-gradient.scss +0 -40
  84. data/_sass/vendor/bourbon/css3/_perspective.scss +0 -12
  85. data/_sass/vendor/bourbon/css3/_placeholder.scss +0 -10
  86. data/_sass/vendor/bourbon/css3/_radial-gradient.scss +0 -40
  87. data/_sass/vendor/bourbon/css3/_selection.scss +0 -44
  88. data/_sass/vendor/bourbon/css3/_text-decoration.scss +0 -27
  89. data/_sass/vendor/bourbon/css3/_transform.scss +0 -21
  90. data/_sass/vendor/bourbon/css3/_transition.scss +0 -81
  91. data/_sass/vendor/bourbon/css3/_user-select.scss +0 -5
  92. data/_sass/vendor/bourbon/functions/_assign-inputs.scss +0 -16
  93. data/_sass/vendor/bourbon/functions/_contains-falsy.scss +0 -25
  94. data/_sass/vendor/bourbon/functions/_contains.scss +0 -31
  95. data/_sass/vendor/bourbon/functions/_is-length.scss +0 -16
  96. data/_sass/vendor/bourbon/functions/_is-light.scss +0 -26
  97. data/_sass/vendor/bourbon/functions/_is-number.scss +0 -16
  98. data/_sass/vendor/bourbon/functions/_is-size.scss +0 -18
  99. data/_sass/vendor/bourbon/functions/_modular-scale.scss +0 -74
  100. data/_sass/vendor/bourbon/functions/_px-to-em.scss +0 -24
  101. data/_sass/vendor/bourbon/functions/_px-to-rem.scss +0 -26
  102. data/_sass/vendor/bourbon/functions/_shade.scss +0 -24
  103. data/_sass/vendor/bourbon/functions/_strip-units.scss +0 -22
  104. data/_sass/vendor/bourbon/functions/_tint.scss +0 -24
  105. data/_sass/vendor/bourbon/functions/_transition-property-name.scss +0 -37
  106. data/_sass/vendor/bourbon/functions/_unpack.scss +0 -32
  107. data/_sass/vendor/bourbon/helpers/_convert-units.scss +0 -26
  108. data/_sass/vendor/bourbon/helpers/_directional-values.scss +0 -108
  109. data/_sass/vendor/bourbon/helpers/_font-source-declaration.scss +0 -53
  110. data/_sass/vendor/bourbon/helpers/_gradient-positions-parser.scss +0 -24
  111. data/_sass/vendor/bourbon/helpers/_linear-angle-parser.scss +0 -35
  112. data/_sass/vendor/bourbon/helpers/_linear-gradient-parser.scss +0 -51
  113. data/_sass/vendor/bourbon/helpers/_linear-positions-parser.scss +0 -77
  114. data/_sass/vendor/bourbon/helpers/_linear-side-corner-parser.scss +0 -41
  115. data/_sass/vendor/bourbon/helpers/_radial-arg-parser.scss +0 -74
  116. data/_sass/vendor/bourbon/helpers/_radial-gradient-parser.scss +0 -55
  117. data/_sass/vendor/bourbon/helpers/_radial-positions-parser.scss +0 -28
  118. data/_sass/vendor/bourbon/helpers/_render-gradients.scss +0 -31
  119. data/_sass/vendor/bourbon/helpers/_shape-size-stripper.scss +0 -15
  120. data/_sass/vendor/bourbon/helpers/_str-to-num.scss +0 -55
  121. data/_sass/vendor/bourbon/settings/_asset-pipeline.scss +0 -7
  122. data/_sass/vendor/bourbon/settings/_deprecation-warnings.scss +0 -8
  123. data/_sass/vendor/bourbon/settings/_prefixer.scss +0 -9
  124. data/_sass/vendor/bourbon/settings/_px-to-em.scss +0 -1
  125. data/_sass/vendor/neat/_neat-helpers.scss +0 -8
  126. data/_sass/vendor/neat/_neat.scss +0 -23
  127. data/_sass/vendor/neat/functions/_new-breakpoint.scss +0 -49
  128. data/_sass/vendor/neat/functions/_private.scss +0 -114
  129. data/_sass/vendor/neat/grid/_box-sizing.scss +0 -15
  130. data/_sass/vendor/neat/grid/_direction-context.scss +0 -33
  131. data/_sass/vendor/neat/grid/_display-context.scss +0 -28
  132. data/_sass/vendor/neat/grid/_fill-parent.scss +0 -22
  133. data/_sass/vendor/neat/grid/_media.scss +0 -92
  134. data/_sass/vendor/neat/grid/_omega.scss +0 -87
  135. data/_sass/vendor/neat/grid/_outer-container.scss +0 -38
  136. data/_sass/vendor/neat/grid/_pad.scss +0 -25
  137. data/_sass/vendor/neat/grid/_private.scss +0 -35
  138. data/_sass/vendor/neat/grid/_row.scss +0 -52
  139. data/_sass/vendor/neat/grid/_shift.scss +0 -50
  140. data/_sass/vendor/neat/grid/_span-columns.scss +0 -94
  141. data/_sass/vendor/neat/grid/_to-deprecate.scss +0 -97
  142. data/_sass/vendor/neat/grid/_visual-grid.scss +0 -42
  143. data/_sass/vendor/neat/settings/_disable-warnings.scss +0 -13
  144. data/_sass/vendor/neat/settings/_grid.scss +0 -51
  145. data/_sass/vendor/neat/settings/_visual-grid.scss +0 -27
  146. data/assets/js/bundle.js +0 -424
  147. data/assets/js/main.js +0 -5
  148. data/assets/js/questions.js +0 -22
  149. data/assets/js/scroll-form.js +0 -52
  150. data/assets/js/scrolling.js +0 -22
@@ -1,25 +0,0 @@
1
- .callout__root {
2
- margin: $base-spacing 0;
3
- padding: $medium-spacing $medium-spacing $medium-spacing $base-spacing;
4
- border-radius: $tiny-border-radius;
5
- box-shadow: 0 0 8px $light-grey;
6
- padding-left: $base-spacing - $tiny-spacing;
7
- }
8
-
9
- .callout__root--default {
10
- border-left-color: $default-color;
11
- border-left-width: $tiny-spacing;
12
- border-left-style: solid;
13
- }
14
-
15
- .callout__root--info {
16
- border-left-color: $info-color;
17
- border-left-width: $tiny-spacing;
18
- border-left-style: solid;
19
- }
20
-
21
- .callout__root--error {
22
- border-left-color: $error-color;
23
- border-left-width: $tiny-spacing;
24
- border-left-style: solid;
25
- }
@@ -1,60 +0,0 @@
1
- .multiple-choice {
2
-
3
- }
4
-
5
- .multiple-choice__label {
6
- font-size: $large-font-size;
7
- font-weight: 600;
8
- line-height: $base-heading-leading;
9
- }
10
-
11
- .multiple-choice__hint,
12
- .multiple-choice__description {
13
- color: $body-text-color--secondary;
14
- }
15
-
16
- .multiple-choice__list {
17
- list-style: none;
18
- padding-left: 0;
19
- }
20
-
21
- .multiple-choice__option {
22
- position: relative;
23
- margin: $small-spacing 0;
24
- }
25
-
26
- .multiple-choice__option-label {
27
- padding: $small-spacing $base-spacing $small-spacing $large-spacing;
28
- padding-left: $large-spacing;
29
- display: block;
30
- border-radius: 2px;
31
- width: auto;
32
- background: $action-color--inactive;
33
- border: 1px solid $border-color;
34
- cursor: pointer;
35
- margin: 0;
36
-
37
- &:hover {
38
- border-color: $border-highlight-color;
39
- }
40
- }
41
-
42
- .multiple-choice__input {
43
- @include transform(translateY(-50%));
44
- margin-left: $small-spacing * 1.5;
45
- position: absolute;
46
- top: 50%;
47
-
48
- &:focus + .multiple-choice__option-label {
49
- border-color: $border-highlight-color;
50
- }
51
- &:checked + .multiple-choice__option-label {
52
- background-color: $button-bg-color;
53
- border-color: $button-bg-color--hover;
54
- color: $button-text-color;
55
-
56
- &:hover {
57
- border-color: $button-bg-color--active;
58
- }
59
- }
60
- }
@@ -1,49 +0,0 @@
1
- .scroll-form__container {
2
- height: 100vh;
3
- overflow: scroll;
4
- }
5
-
6
- .scroll-form__questionset {
7
- transition: opacity 300ms 100ms $ease-in-out-quad;
8
- height: 100vh;
9
- display: flex;
10
- align-items: center;
11
- opacity: 0.1;
12
- }
13
-
14
- .scroll-form__questionset--active {
15
- transition: opacity 300ms 100ms $ease-in-out-quad;
16
- opacity: 1;
17
- }
18
-
19
- .scroll-form__question {
20
- width: 100%;
21
- padding-bottom: $large-spacing;
22
-
23
- @include media($tablet-minwidth) {
24
- max-width: $mobile-minwidth;
25
- }
26
- }
27
-
28
- .scroll-form__footer {
29
- position: fixed;
30
- bottom: 0;
31
- left: 0;
32
- right: 0;
33
- background: $background-color--secondary;
34
-
35
- .button {
36
- margin-bottom: 0;
37
- }
38
- }
39
-
40
- .scroll-form__text-field,
41
- .scroll-form__multiple-choice {
42
- .text-field__label,
43
- .multiple-choice__label {
44
- font-size: $large-font-size;
45
- }
46
- .text-field__hint {
47
-
48
- }
49
- }
@@ -1,25 +0,0 @@
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
- }
@@ -1,7 +0,0 @@
1
- .text-field {
2
-
3
- }
4
-
5
- .text-field__label {
6
- margin-bottom: $tiny-spacing;
7
- }
@@ -1,7 +0,0 @@
1
- .upload-button {
2
-
3
- }
4
-
5
- .upload-button__input {
6
- display: none;
7
- }
@@ -1,7 +0,0 @@
1
- @mixin clearfix {
2
- &::after {
3
- clear: both;
4
- content: "";
5
- display: table;
6
- }
7
- }
@@ -1,8 +0,0 @@
1
- @mixin ellipsis($width: 100%) {
2
- display: inline-block;
3
- max-width: $width;
4
- overflow: hidden;
5
- text-overflow: ellipsis;
6
- white-space: nowrap;
7
- word-wrap: normal;
8
- }
@@ -1,14 +0,0 @@
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
- }
@@ -1,11 +0,0 @@
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
- }
@@ -1,35 +0,0 @@
1
- @mixin prefixer($property, $value, $prefixes) {
2
- @each $prefix in $prefixes {
3
- @if $prefix == webkit {
4
- @if $prefix-for-webkit {
5
- -webkit-#{$property}: $value;
6
- }
7
- } @else if $prefix == moz {
8
- @if $prefix-for-mozilla {
9
- -moz-#{$property}: $value;
10
- }
11
- } @else if $prefix == ms {
12
- @if $prefix-for-microsoft {
13
- -ms-#{$property}: $value;
14
- }
15
- } @else if $prefix == o {
16
- @if $prefix-for-opera {
17
- -o-#{$property}: $value;
18
- }
19
- } @else if $prefix == spec {
20
- @if $prefix-for-spec {
21
- #{$property}: $value;
22
- }
23
- } @else {
24
- @warn "Unrecognized prefix: #{$prefix}";
25
- }
26
- }
27
- }
28
-
29
- @mixin disable-prefix-for-all() {
30
- $prefix-for-webkit: false !global;
31
- $prefix-for-mozilla: false !global;
32
- $prefix-for-microsoft: false !global;
33
- $prefix-for-opera: false !global;
34
- $prefix-for-spec: false !global;
35
- }
@@ -1,11 +0,0 @@
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
- max-width: $max-width;
10
- }
11
- }
@@ -1,19 +0,0 @@
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
- }
@@ -1,425 +0,0 @@
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
- }