frozen 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (146) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +24 -0
  3. data/Gemfile +9 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +29 -0
  6. data/Rakefile +11 -0
  7. data/bin/frozen +56 -0
  8. data/dummy/assets/javascripts/coffee/test.js.coffee +8 -0
  9. data/dummy/assets/javascripts/main.js +11 -0
  10. data/dummy/assets/javascripts/sub/sub_script.js +11 -0
  11. data/dummy/assets/stylesheets/base/_base.scss +24 -0
  12. data/dummy/assets/stylesheets/base/_buttons.scss +10 -0
  13. data/dummy/assets/stylesheets/base/_forms.scss +78 -0
  14. data/dummy/assets/stylesheets/base/_grid-settings.scss +14 -0
  15. data/dummy/assets/stylesheets/base/_lists.scss +31 -0
  16. data/dummy/assets/stylesheets/base/_tables.scss +24 -0
  17. data/dummy/assets/stylesheets/base/_typography.scss +93 -0
  18. data/dummy/assets/stylesheets/base/_variables.scss +65 -0
  19. data/dummy/assets/stylesheets/base/extends/_button.scss +22 -0
  20. data/dummy/assets/stylesheets/base/extends/_clearfix.scss +3 -0
  21. data/dummy/assets/stylesheets/base/extends/_errors.scss +11 -0
  22. data/dummy/assets/stylesheets/base/extends/_flashes.scss +38 -0
  23. data/dummy/assets/stylesheets/base/extends/_hide-text.scss +3 -0
  24. data/dummy/assets/stylesheets/bourbon/_bourbon-deprecated-upcoming.scss +402 -0
  25. data/dummy/assets/stylesheets/bourbon/_bourbon.scss +86 -0
  26. data/dummy/assets/stylesheets/bourbon/addons/_clearfix.scss +18 -0
  27. data/dummy/assets/stylesheets/bourbon/addons/_directional-values.scss +111 -0
  28. data/dummy/assets/stylesheets/bourbon/addons/_ellipsis.scss +8 -0
  29. data/dummy/assets/stylesheets/bourbon/addons/_font-family.scss +5 -0
  30. data/dummy/assets/stylesheets/bourbon/addons/_hide-text.scss +12 -0
  31. data/dummy/assets/stylesheets/bourbon/addons/_html5-input-types.scss +90 -0
  32. data/dummy/assets/stylesheets/bourbon/addons/_position.scss +26 -0
  33. data/dummy/assets/stylesheets/bourbon/addons/_prefixer.scss +45 -0
  34. data/dummy/assets/stylesheets/bourbon/addons/_retina-image.scss +31 -0
  35. data/dummy/assets/stylesheets/bourbon/addons/_size.scss +26 -0
  36. data/dummy/assets/stylesheets/bourbon/addons/_timing-functions.scss +32 -0
  37. data/dummy/assets/stylesheets/bourbon/addons/_triangle.scss +83 -0
  38. data/dummy/assets/stylesheets/bourbon/addons/_word-wrap.scss +10 -0
  39. data/dummy/assets/stylesheets/bourbon/css3/_animation.scss +52 -0
  40. data/dummy/assets/stylesheets/bourbon/css3/_appearance.scss +3 -0
  41. data/dummy/assets/stylesheets/bourbon/css3/_backface-visibility.scss +6 -0
  42. data/dummy/assets/stylesheets/bourbon/css3/_background-image.scss +42 -0
  43. data/dummy/assets/stylesheets/bourbon/css3/_background.scss +55 -0
  44. data/dummy/assets/stylesheets/bourbon/css3/_border-image.scss +59 -0
  45. data/dummy/assets/stylesheets/bourbon/css3/_border-radius.scss +22 -0
  46. data/dummy/assets/stylesheets/bourbon/css3/_box-sizing.scss +4 -0
  47. data/dummy/assets/stylesheets/bourbon/css3/_calc.scss +4 -0
  48. data/dummy/assets/stylesheets/bourbon/css3/_columns.scss +47 -0
  49. data/dummy/assets/stylesheets/bourbon/css3/_filter.scss +5 -0
  50. data/dummy/assets/stylesheets/bourbon/css3/_flex-box.scss +320 -0
  51. data/dummy/assets/stylesheets/bourbon/css3/_font-face.scss +24 -0
  52. data/dummy/assets/stylesheets/bourbon/css3/_font-feature-settings.scss +10 -0
  53. data/dummy/assets/stylesheets/bourbon/css3/_hidpi-media-query.scss +10 -0
  54. data/dummy/assets/stylesheets/bourbon/css3/_hyphens.scss +4 -0
  55. data/dummy/assets/stylesheets/bourbon/css3/_image-rendering.scss +14 -0
  56. data/dummy/assets/stylesheets/bourbon/css3/_keyframes.scss +35 -0
  57. data/dummy/assets/stylesheets/bourbon/css3/_linear-gradient.scss +38 -0
  58. data/dummy/assets/stylesheets/bourbon/css3/_perspective.scss +8 -0
  59. data/dummy/assets/stylesheets/bourbon/css3/_placeholder.scss +8 -0
  60. data/dummy/assets/stylesheets/bourbon/css3/_radial-gradient.scss +39 -0
  61. data/dummy/assets/stylesheets/bourbon/css3/_selection.scss +14 -0
  62. data/dummy/assets/stylesheets/bourbon/css3/_text-decoration.scss +19 -0
  63. data/dummy/assets/stylesheets/bourbon/css3/_transform.scss +15 -0
  64. data/dummy/assets/stylesheets/bourbon/css3/_transition.scss +77 -0
  65. data/dummy/assets/stylesheets/bourbon/css3/_user-select.scss +3 -0
  66. data/dummy/assets/stylesheets/bourbon/functions/_assign.scss +11 -0
  67. data/dummy/assets/stylesheets/bourbon/functions/_color-lightness.scss +13 -0
  68. data/dummy/assets/stylesheets/bourbon/functions/_contains.scss +12 -0
  69. data/dummy/assets/stylesheets/bourbon/functions/_is-length.scss +7 -0
  70. data/dummy/assets/stylesheets/bourbon/functions/_is-size.scss +6 -0
  71. data/dummy/assets/stylesheets/bourbon/functions/_modular-scale.scss +69 -0
  72. data/dummy/assets/stylesheets/bourbon/functions/_px-to-em.scss +13 -0
  73. data/dummy/assets/stylesheets/bourbon/functions/_px-to-rem.scss +15 -0
  74. data/dummy/assets/stylesheets/bourbon/functions/_strip-units.scss +5 -0
  75. data/dummy/assets/stylesheets/bourbon/functions/_tint-shade.scss +9 -0
  76. data/dummy/assets/stylesheets/bourbon/functions/_transition-property-name.scss +22 -0
  77. data/dummy/assets/stylesheets/bourbon/functions/_unpack.scss +17 -0
  78. data/dummy/assets/stylesheets/bourbon/helpers/_convert-units.scss +15 -0
  79. data/dummy/assets/stylesheets/bourbon/helpers/_font-source-declaration.scss +36 -0
  80. data/dummy/assets/stylesheets/bourbon/helpers/_gradient-positions-parser.scss +13 -0
  81. data/dummy/assets/stylesheets/bourbon/helpers/_is-num.scss +5 -0
  82. data/dummy/assets/stylesheets/bourbon/helpers/_linear-angle-parser.scss +25 -0
  83. data/dummy/assets/stylesheets/bourbon/helpers/_linear-gradient-parser.scss +41 -0
  84. data/dummy/assets/stylesheets/bourbon/helpers/_linear-positions-parser.scss +61 -0
  85. data/dummy/assets/stylesheets/bourbon/helpers/_linear-side-corner-parser.scss +31 -0
  86. data/dummy/assets/stylesheets/bourbon/helpers/_radial-arg-parser.scss +69 -0
  87. data/dummy/assets/stylesheets/bourbon/helpers/_radial-gradient-parser.scss +50 -0
  88. data/dummy/assets/stylesheets/bourbon/helpers/_radial-positions-parser.scss +18 -0
  89. data/dummy/assets/stylesheets/bourbon/helpers/_render-gradients.scss +26 -0
  90. data/dummy/assets/stylesheets/bourbon/helpers/_shape-size-stripper.scss +10 -0
  91. data/dummy/assets/stylesheets/bourbon/helpers/_str-to-num.scss +50 -0
  92. data/dummy/assets/stylesheets/bourbon/settings/_asset-pipeline.scss +1 -0
  93. data/dummy/assets/stylesheets/bourbon/settings/_prefixer.scss +6 -0
  94. data/dummy/assets/stylesheets/bourbon/settings/_px-to-em.scss +1 -0
  95. data/dummy/assets/stylesheets/main.scss +6 -0
  96. data/dummy/assets/stylesheets/neat/_neat-helpers.scss +8 -0
  97. data/dummy/assets/stylesheets/neat/_neat.scss +23 -0
  98. data/dummy/assets/stylesheets/neat/functions/_new-breakpoint.scss +49 -0
  99. data/dummy/assets/stylesheets/neat/functions/_private.scss +114 -0
  100. data/dummy/assets/stylesheets/neat/grid/_box-sizing.scss +15 -0
  101. data/dummy/assets/stylesheets/neat/grid/_direction-context.scss +33 -0
  102. data/dummy/assets/stylesheets/neat/grid/_display-context.scss +28 -0
  103. data/dummy/assets/stylesheets/neat/grid/_fill-parent.scss +24 -0
  104. data/dummy/assets/stylesheets/neat/grid/_media.scss +92 -0
  105. data/dummy/assets/stylesheets/neat/grid/_omega.scss +87 -0
  106. data/dummy/assets/stylesheets/neat/grid/_outer-container.scss +38 -0
  107. data/dummy/assets/stylesheets/neat/grid/_pad.scss +25 -0
  108. data/dummy/assets/stylesheets/neat/grid/_private.scss +35 -0
  109. data/dummy/assets/stylesheets/neat/grid/_row.scss +52 -0
  110. data/dummy/assets/stylesheets/neat/grid/_shift.scss +50 -0
  111. data/dummy/assets/stylesheets/neat/grid/_span-columns.scss +92 -0
  112. data/dummy/assets/stylesheets/neat/grid/_to-deprecate.scss +97 -0
  113. data/dummy/assets/stylesheets/neat/grid/_visual-grid.scss +42 -0
  114. data/dummy/assets/stylesheets/neat/settings/_disable-warnings.scss +13 -0
  115. data/dummy/assets/stylesheets/neat/settings/_grid.scss +55 -0
  116. data/dummy/assets/stylesheets/neat/settings/_visual-grid.scss +27 -0
  117. data/dummy/assets/stylesheets/sub/sub.scss +8 -0
  118. data/dummy/build/about/index.html +1 -0
  119. data/dummy/build/css/main.css +1 -0
  120. data/dummy/build/css/sub/sub.css +1 -0
  121. data/dummy/build/index.html +1 -0
  122. data/dummy/build/js/coffee/test.js +1 -0
  123. data/dummy/build/js/main.js +1 -0
  124. data/dummy/build/js/sub/sub_script.js +1 -0
  125. data/dummy/config.yaml +3 -0
  126. data/dummy/layouts/default.html.slim +7 -0
  127. data/dummy/views/about/index.html.slim +1 -0
  128. data/dummy/views/index.html.slim +2 -0
  129. data/frozen.gemspec +37 -0
  130. data/lib/frozen.rb +13 -0
  131. data/lib/frozen/environment/base.rb +36 -0
  132. data/lib/frozen/rack/request_controller.rb +37 -0
  133. data/lib/frozen/site/base.rb +83 -0
  134. data/lib/frozen/site/local_site.rb +131 -0
  135. data/lib/frozen/template/base.rb +77 -0
  136. data/lib/frozen/template/javascript.rb +44 -0
  137. data/lib/frozen/template/stylesheet.rb +48 -0
  138. data/lib/frozen/template/view.rb +40 -0
  139. data/lib/frozen/version.rb +3 -0
  140. data/spec/lib/frozen/rack/request_controller_spec.rb +22 -0
  141. data/spec/lib/frozen/site/base_spec.rb +17 -0
  142. data/spec/lib/frozen/site/local_site_spec.rb +13 -0
  143. data/spec/lib/frozen/template/base_spec.rb +101 -0
  144. data/spec/lib/frozen/template/stylesheet_spec.rb +42 -0
  145. data/spec/spec_helper.rb +9 -0
  146. metadata +393 -0
@@ -0,0 +1,65 @@
1
+ // Typography
2
+ $sans-serif: $helvetica;
3
+ $serif: $georgia;
4
+ $base-font-family: $sans-serif;
5
+ $header-font-family: $base-font-family;
6
+
7
+ // Font Sizes
8
+ $base-font-size: 1em;
9
+ $h1-font-size: $base-font-size * 2.25;
10
+ $h2-font-size: $base-font-size * 2;
11
+ $h3-font-size: $base-font-size * 1.75;
12
+ $h4-font-size: $base-font-size * 1.5;
13
+ $h5-font-size: $base-font-size * 1.25;
14
+ $h6-font-size: $base-font-size;
15
+
16
+ // Line height
17
+ $base-line-height: 1.5;
18
+ $header-line-height: 1.25;
19
+
20
+ // Other Sizes
21
+ $base-border-radius: 3px;
22
+ $base-spacing: $base-line-height * 1em;
23
+ $base-z-index: 0;
24
+
25
+ // Colors
26
+ $blue: #477DCA;
27
+ $dark-gray: #333;
28
+ $medium-gray: #999;
29
+ $light-gray: #DDD;
30
+ $light-red: #FBE3E4;
31
+ $light-yellow: #FFF6BF;
32
+ $light-green: #E6EFC2;
33
+
34
+ // Background Color
35
+ $base-background-color: white;
36
+
37
+ // Font Colors
38
+ $base-font-color: $dark-gray;
39
+ $base-accent-color: $blue;
40
+
41
+ // Link Colors
42
+ $base-link-color: $base-accent-color;
43
+ $hover-link-color: darken($base-accent-color, 15);
44
+ $base-button-color: $base-link-color;
45
+ $hover-button-color: $hover-link-color;
46
+
47
+ // Flash Colors
48
+ $alert-color: $light-yellow;
49
+ $error-color: $light-red;
50
+ $notice-color: lighten($base-accent-color, 40);
51
+ $success-color: $light-green;
52
+
53
+ // Border color
54
+ $base-border-color: $light-gray;
55
+ $base-border: 1px solid $base-border-color;
56
+
57
+ // Forms
58
+ $form-border-color: $base-border-color;
59
+ $form-border-color-hover: darken($base-border-color, 10);
60
+ $form-border-color-focus: $base-accent-color;
61
+ $form-border-radius: $base-border-radius;
62
+ $form-box-shadow: inset 0 1px 3px rgba(black,0.06);
63
+ $form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7);
64
+ $form-font-size: $base-font-size;
65
+ $form-font-family: $base-font-family;
@@ -0,0 +1,22 @@
1
+ %button {
2
+ -webkit-font-smoothing: antialiased;
3
+ background-color: $base-button-color;
4
+ border-radius: $base-border-radius;
5
+ color: white;
6
+ display: inline-block;
7
+ font-size: $base-font-size;
8
+ font-weight: bold;
9
+ line-height: 1;
10
+ padding: 0.75em 1em;
11
+ text-decoration: none;
12
+
13
+ &:hover {
14
+ background-color: $hover-button-color;
15
+ color: white;
16
+ }
17
+
18
+ &:disabled {
19
+ cursor: not-allowed;
20
+ opacity: 0.5;
21
+ }
22
+ }
@@ -0,0 +1,3 @@
1
+ %clearfix {
2
+ @include clearfix;
3
+ }
@@ -0,0 +1,11 @@
1
+ %error {
2
+ color: darken($error-color, 60);
3
+ }
4
+
5
+ %warning {
6
+ color: darken($alert-color, 60);
7
+ }
8
+
9
+ %notice {
10
+ color: darken($notice-color, 60);
11
+ }
@@ -0,0 +1,38 @@
1
+ @mixin flash($color) {
2
+ background: $color;
3
+ color: darken($color, 60);
4
+
5
+ a {
6
+ color: darken($color, 70);
7
+
8
+ &:hover {
9
+ color: darken($color, 90);
10
+ }
11
+ }
12
+ }
13
+
14
+ %flash-base {
15
+ font-weight: bold;
16
+ margin-bottom: $base-spacing / 2;
17
+ padding: $base-spacing / 2;
18
+ }
19
+
20
+ %flash-alert {
21
+ @extend %flash-base;
22
+ @include flash($alert-color);
23
+ }
24
+
25
+ %flash-error {
26
+ @extend %flash-base;
27
+ @include flash($error-color);
28
+ }
29
+
30
+ %flash-notice {
31
+ @extend %flash-base;
32
+ @include flash($notice-color);
33
+ }
34
+
35
+ %flash-success {
36
+ @extend %flash-base;
37
+ @include flash($success-color);
38
+ }
@@ -0,0 +1,3 @@
1
+ %hide-text {
2
+ @include hide-text;
3
+ }
@@ -0,0 +1,402 @@
1
+ // The following features have been deprecated and will be removed in the next MAJOR version release
2
+
3
+ @mixin inline-block {
4
+ display: inline-block;
5
+
6
+ @warn "The inline-block mixin is deprecated and will be removed in the next major version release";
7
+ }
8
+
9
+ @mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
10
+
11
+ @if type-of($style) == string and type-of($base-color) == color {
12
+ @include buttonstyle($style, $base-color, $text-size, $padding);
13
+ }
14
+
15
+ @if type-of($style) == string and type-of($base-color) == number {
16
+ $padding: $text-size;
17
+ $text-size: $base-color;
18
+ $base-color: #4294f0;
19
+
20
+ @if $padding == inherit {
21
+ $padding: 7px 18px;
22
+ }
23
+
24
+ @include buttonstyle($style, $base-color, $text-size, $padding);
25
+ }
26
+
27
+ @if type-of($style) == color and type-of($base-color) == color {
28
+ $base-color: $style;
29
+ $style: simple;
30
+ @include buttonstyle($style, $base-color, $text-size, $padding);
31
+ }
32
+
33
+ @if type-of($style) == color and type-of($base-color) == number {
34
+ $padding: $text-size;
35
+ $text-size: $base-color;
36
+ $base-color: $style;
37
+ $style: simple;
38
+
39
+ @if $padding == inherit {
40
+ $padding: 7px 18px;
41
+ }
42
+
43
+ @include buttonstyle($style, $base-color, $text-size, $padding);
44
+ }
45
+
46
+ @if type-of($style) == number {
47
+ $padding: $base-color;
48
+ $text-size: $style;
49
+ $base-color: #4294f0;
50
+ $style: simple;
51
+
52
+ @if $padding == #4294f0 {
53
+ $padding: 7px 18px;
54
+ }
55
+
56
+ @include buttonstyle($style, $base-color, $text-size, $padding);
57
+ }
58
+
59
+ &:disabled {
60
+ opacity: 0.5;
61
+ cursor: not-allowed;
62
+ }
63
+
64
+ @warn "The button mixin is deprecated and will be removed in the next major version release";
65
+ }
66
+
67
+ // Selector Style Button
68
+ @mixin buttonstyle($type, $b-color, $t-size, $pad) {
69
+ // Grayscale button
70
+ @if $type == simple and $b-color == grayscale($b-color) {
71
+ @include simple($b-color, true, $t-size, $pad);
72
+ }
73
+
74
+ @if $type == shiny and $b-color == grayscale($b-color) {
75
+ @include shiny($b-color, true, $t-size, $pad);
76
+ }
77
+
78
+ @if $type == pill and $b-color == grayscale($b-color) {
79
+ @include pill($b-color, true, $t-size, $pad);
80
+ }
81
+
82
+ @if $type == flat and $b-color == grayscale($b-color) {
83
+ @include flat($b-color, true, $t-size, $pad);
84
+ }
85
+
86
+ // Colored button
87
+ @if $type == simple {
88
+ @include simple($b-color, false, $t-size, $pad);
89
+ }
90
+
91
+ @else if $type == shiny {
92
+ @include shiny($b-color, false, $t-size, $pad);
93
+ }
94
+
95
+ @else if $type == pill {
96
+ @include pill($b-color, false, $t-size, $pad);
97
+ }
98
+
99
+ @else if $type == flat {
100
+ @include flat($b-color, false, $t-size, $pad);
101
+ }
102
+ }
103
+
104
+ // Simple Button
105
+ @mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
106
+ $color: hsl(0, 0, 100%);
107
+ $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
108
+ $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
109
+ $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
110
+ $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
111
+
112
+ @if is-light($base-color) {
113
+ $color: hsl(0, 0, 20%);
114
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
115
+ }
116
+
117
+ @if $grayscale == true {
118
+ $border: grayscale($border);
119
+ $inset-shadow: grayscale($inset-shadow);
120
+ $stop-gradient: grayscale($stop-gradient);
121
+ $text-shadow: grayscale($text-shadow);
122
+ }
123
+
124
+ border: 1px solid $border;
125
+ border-radius: 3px;
126
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
127
+ color: $color;
128
+ display: inline-block;
129
+ font-size: $textsize;
130
+ font-weight: bold;
131
+ @include linear-gradient ($base-color, $stop-gradient);
132
+ padding: $padding;
133
+ text-decoration: none;
134
+ text-shadow: 0 1px 0 $text-shadow;
135
+ background-clip: padding-box;
136
+
137
+ &:hover:not(:disabled) {
138
+ $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
139
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
140
+ $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
141
+
142
+ @if $grayscale == true {
143
+ $base-color-hover: grayscale($base-color-hover);
144
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
145
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
146
+ }
147
+
148
+ box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
149
+ cursor: pointer;
150
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
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
+ border: 1px solid $border;
195
+ border-bottom: 1px solid $border-bottom;
196
+ border-radius: 5px;
197
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
198
+ color: $color;
199
+ display: inline-block;
200
+ font-size: $textsize;
201
+ font-weight: bold;
202
+ @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
203
+ padding: $padding;
204
+ text-align: center;
205
+ text-decoration: none;
206
+ text-shadow: 0 -1px 1px $text-shadow;
207
+
208
+ &:hover:not(:disabled) {
209
+ $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
210
+ $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
211
+ $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
212
+ $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
213
+
214
+ @if $grayscale == true {
215
+ $first-stop-hover: grayscale($first-stop-hover);
216
+ $second-stop-hover: grayscale($second-stop-hover);
217
+ $third-stop-hover: grayscale($third-stop-hover);
218
+ $fourth-stop-hover: grayscale($fourth-stop-hover);
219
+ }
220
+
221
+ cursor: pointer;
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
+ }
227
+
228
+ &:active:not(:disabled),
229
+ &:focus:not(:disabled) {
230
+ $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
231
+
232
+ @if $grayscale == true {
233
+ $inset-shadow-active: grayscale($inset-shadow-active);
234
+ }
235
+
236
+ box-shadow: inset 0 0 20px 0 $inset-shadow-active;
237
+ }
238
+ }
239
+
240
+ // Pill Button
241
+ @mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
242
+ $color: hsl(0, 0, 100%);
243
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
244
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
245
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
246
+ $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
247
+ $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
248
+ $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
249
+
250
+ @if is-light($base-color) {
251
+ $color: hsl(0, 0, 20%);
252
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
253
+ }
254
+
255
+ @if $grayscale == true {
256
+ $border-bottom: grayscale($border-bottom);
257
+ $border-sides: grayscale($border-sides);
258
+ $border-top: grayscale($border-top);
259
+ $inset-shadow: grayscale($inset-shadow);
260
+ $stop-gradient: grayscale($stop-gradient);
261
+ $text-shadow: grayscale($text-shadow);
262
+ }
263
+
264
+ border: 1px solid $border-top;
265
+ border-color: $border-top $border-sides $border-bottom;
266
+ border-radius: 16px;
267
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
268
+ color: $color;
269
+ display: inline-block;
270
+ font-size: $textsize;
271
+ font-weight: normal;
272
+ line-height: 1;
273
+ @include linear-gradient ($base-color, $stop-gradient);
274
+ padding: $padding;
275
+ text-align: center;
276
+ text-decoration: none;
277
+ text-shadow: 0 -1px 1px $text-shadow;
278
+ background-clip: padding-box;
279
+
280
+ &:hover:not(:disabled) {
281
+ $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
282
+ $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
283
+ $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
284
+ $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
285
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
286
+ $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
287
+ $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
288
+
289
+ @if $grayscale == true {
290
+ $base-color-hover: grayscale($base-color-hover);
291
+ $border-bottom: grayscale($border-bottom);
292
+ $border-sides: grayscale($border-sides);
293
+ $border-top: grayscale($border-top);
294
+ $inset-shadow-hover: grayscale($inset-shadow-hover);
295
+ $stop-gradient-hover: grayscale($stop-gradient-hover);
296
+ $text-shadow-hover: grayscale($text-shadow-hover);
297
+ }
298
+
299
+ border: 1px solid $border-top;
300
+ border-color: $border-top $border-sides $border-bottom;
301
+ box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
302
+ cursor: pointer;
303
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
304
+ text-shadow: 0 -1px 1px $text-shadow-hover;
305
+ background-clip: padding-box;
306
+ }
307
+
308
+ &:active:not(:disabled),
309
+ &:focus:not(:disabled) {
310
+ $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
311
+ $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
312
+ $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
313
+ $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
314
+ $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
315
+
316
+ @if $grayscale == true {
317
+ $active-color: grayscale($active-color);
318
+ $border-active: grayscale($border-active);
319
+ $border-bottom-active: grayscale($border-bottom-active);
320
+ $inset-shadow-active: grayscale($inset-shadow-active);
321
+ $text-shadow-active: grayscale($text-shadow-active);
322
+ }
323
+
324
+ background: $active-color;
325
+ border: 1px solid $border-active;
326
+ border-bottom: 1px solid $border-bottom-active;
327
+ box-shadow: inset 0 0 6px 3px $inset-shadow-active;
328
+ text-shadow: 0 -1px 1px $text-shadow-active;
329
+ }
330
+ }
331
+
332
+ // Flat Button
333
+ @mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
334
+ $color: hsl(0, 0, 100%);
335
+
336
+ @if is-light($base-color) {
337
+ $color: hsl(0, 0, 20%);
338
+ }
339
+
340
+ background-color: $base-color;
341
+ border-radius: 3px;
342
+ border: none;
343
+ color: $color;
344
+ display: inline-block;
345
+ font-size: $textsize;
346
+ font-weight: bold;
347
+ padding: $padding;
348
+ text-decoration: none;
349
+ background-clip: padding-box;
350
+
351
+ &:hover:not(:disabled){
352
+ $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
353
+
354
+ @if $grayscale == true {
355
+ $base-color-hover: grayscale($base-color-hover);
356
+ }
357
+
358
+ background-color: $base-color-hover;
359
+ cursor: pointer;
360
+ }
361
+
362
+ &:active:not(:disabled),
363
+ &:focus:not(:disabled) {
364
+ $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
365
+
366
+ @if $grayscale == true {
367
+ $base-color-active: grayscale($base-color-active);
368
+ }
369
+
370
+ background-color: $base-color-active;
371
+ cursor: pointer;
372
+ }
373
+ }
374
+
375
+ // Flexible grid
376
+ @function flex-grid($columns, $container-columns: $fg-max-columns) {
377
+ $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
378
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
379
+ @return percentage($width / $container-width);
380
+
381
+ @warn "The flex-grid function is deprecated and will be removed in the next major version release";
382
+ }
383
+
384
+ // Flexible gutter
385
+ @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
386
+ $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
387
+ @return percentage($gutter / $container-width);
388
+
389
+ @warn "The flex-gutter function is deprecated and will be removed in the next major version release";
390
+ }
391
+
392
+ @function grid-width($n) {
393
+ @return $n * $gw-column + ($n - 1) * $gw-gutter;
394
+
395
+ @warn "The grid-width function is deprecated and will be removed in the next major version release";
396
+ }
397
+
398
+ @function golden-ratio($value, $increment) {
399
+ @return modular-scale($increment, $value, $ratio: $golden);
400
+
401
+ @warn "The golden-ratio function is deprecated and will be removed in the next major version release. Please use the modular-scale function, instead.";
402
+ }