foundation-sass-rails 5.5.3.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (58) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +11 -0
  3. data/.rspec +3 -0
  4. data/.travis.yml +5 -0
  5. data/Gemfile +6 -0
  6. data/Gemfile.lock +37 -0
  7. data/LICENSE.txt +21 -0
  8. data/README.md +62 -0
  9. data/Rakefile +6 -0
  10. data/bin/console +14 -0
  11. data/bin/setup +8 -0
  12. data/foundation-sass-rails.gemspec +29 -0
  13. data/lib/foundation-sass-rails.rb +8 -0
  14. data/lib/foundation/version.rb +5 -0
  15. data/lib/generators/foundation/overrides_generator.rb +39 -0
  16. data/vendor/assets/stylesheets/foundation.scss +42 -0
  17. data/vendor/assets/stylesheets/foundation/_functions.scss +156 -0
  18. data/vendor/assets/stylesheets/foundation/_settings.scss +1489 -0
  19. data/vendor/assets/stylesheets/foundation/components/_accordion.scss +161 -0
  20. data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +128 -0
  21. data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +133 -0
  22. data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +132 -0
  23. data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +208 -0
  24. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +261 -0
  25. data/vendor/assets/stylesheets/foundation/components/_clearing.scss +260 -0
  26. data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +130 -0
  27. data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +269 -0
  28. data/vendor/assets/stylesheets/foundation/components/_flex-video.scss +51 -0
  29. data/vendor/assets/stylesheets/foundation/components/_forms.scss +607 -0
  30. data/vendor/assets/stylesheets/foundation/components/_global.scss +566 -0
  31. data/vendor/assets/stylesheets/foundation/components/_grid.scss +292 -0
  32. data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +460 -0
  33. data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +58 -0
  34. data/vendor/assets/stylesheets/foundation/components/_joyride.scss +220 -0
  35. data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +60 -0
  36. data/vendor/assets/stylesheets/foundation/components/_labels.scss +106 -0
  37. data/vendor/assets/stylesheets/foundation/components/_magellan.scss +34 -0
  38. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +606 -0
  39. data/vendor/assets/stylesheets/foundation/components/_orbit.scss +388 -0
  40. data/vendor/assets/stylesheets/foundation/components/_pagination.scss +163 -0
  41. data/vendor/assets/stylesheets/foundation/components/_panels.scss +107 -0
  42. data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +150 -0
  43. data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +85 -0
  44. data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +177 -0
  45. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +212 -0
  46. data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +120 -0
  47. data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +203 -0
  48. data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +125 -0
  49. data/vendor/assets/stylesheets/foundation/components/_switches.scss +241 -0
  50. data/vendor/assets/stylesheets/foundation/components/_tables.scss +135 -0
  51. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +142 -0
  52. data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +66 -0
  53. data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +142 -0
  54. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +745 -0
  55. data/vendor/assets/stylesheets/foundation/components/_type.scss +525 -0
  56. data/vendor/assets/stylesheets/foundation/components/_visibility.scss +425 -0
  57. data/vendor/assets/stylesheets/normalize.scss +424 -0
  58. metadata +163 -0
@@ -0,0 +1,58 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import 'global';
6
+
7
+ //
8
+ // @variables
9
+ //
10
+ $include-html-inline-list-classes: $include-html-classes !default;
11
+
12
+ // We use this to control the margins and padding of the inline list.
13
+ $inline-list-top-margin: 0 !default;
14
+ $inline-list-opposite-margin: 0 !default;
15
+ $inline-list-bottom-margin: rem-calc(17) !default;
16
+ $inline-list-default-float-margin: rem-calc(-22) !default;
17
+ $inline-list-default-float-list-margin: rem-calc(22) !default;
18
+
19
+ $inline-list-padding: 0 !default;
20
+
21
+ // We use this to control the overflow of the inline list.
22
+ $inline-list-overflow: hidden !default;
23
+
24
+ // We use this to control the list items
25
+ $inline-list-display: block !default;
26
+
27
+ // We use this to control any elements within list items
28
+ $inline-list-children-display: block !default;
29
+
30
+ //
31
+ // @mixins
32
+ //
33
+ // We use this mixin to create inline lists
34
+ @mixin inline-list {
35
+ list-style: none;
36
+ margin-top: $inline-list-top-margin;
37
+ margin-bottom: $inline-list-bottom-margin;
38
+ margin-#{$default-float}: $inline-list-default-float-margin;
39
+ margin-#{$opposite-direction}: $inline-list-opposite-margin;
40
+ overflow: $inline-list-overflow;
41
+ padding: $inline-list-padding;
42
+
43
+ > li {
44
+ display: $inline-list-display;
45
+ float: $default-float;
46
+ list-style: none;
47
+ margin-#{$default-float}: $inline-list-default-float-list-margin;
48
+ > * { display: $inline-list-children-display; }
49
+ }
50
+ }
51
+
52
+ @include exports("inline-list") {
53
+ @if $include-html-inline-list-classes {
54
+ .inline-list {
55
+ @include inline-list();
56
+ }
57
+ }
58
+ }
@@ -0,0 +1,220 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import 'global';
6
+
7
+ //
8
+ // @variables
9
+ //
10
+ $include-html-joyride-classes: $include-html-classes !default;
11
+
12
+ // Controlling default Joyride styles
13
+ $joyride-tip-bg: $oil !default;
14
+ $joyride-tip-default-width: 300px !default;
15
+ $joyride-tip-padding: rem-calc(18 20 24) !default;
16
+ $joyride-tip-border: solid 1px $charcoal !default;
17
+ $joyride-tip-radius: 4px !default;
18
+ $joyride-tip-position-offset: 22px !default;
19
+
20
+ // Here, we're setting the tip font styles
21
+ $joyride-tip-font-color: $white !default;
22
+ $joyride-tip-font-size: rem-calc(14) !default;
23
+ $joyride-tip-header-weight: $font-weight-bold !default;
24
+
25
+ // This changes the nub size
26
+ $joyride-tip-nub-size: 10px !default;
27
+
28
+ // This adjusts the styles for the timer when its enabled
29
+ $joyride-tip-timer-width: 50px !default;
30
+ $joyride-tip-timer-height: 3px !default;
31
+ $joyride-tip-timer-color: $steel !default;
32
+
33
+ // This changes up the styles for the close button
34
+ $joyride-tip-close-color: $monsoon !default;
35
+ $joyride-tip-close-size: 24px !default;
36
+ $joyride-tip-close-weight: $font-weight-normal !default;
37
+
38
+ // When Joyride is filling the screen, we use this style for the bg
39
+ $joyride-screenfill: rgba(0,0,0,0.5) !default;
40
+
41
+
42
+ // We decided not to make a mixin for this because it relies on
43
+ // predefined classes to work properly.
44
+ @include exports("joyride") {
45
+ @if $include-html-joyride-classes {
46
+
47
+ /* Foundation Joyride */
48
+ .joyride-list { display: none; }
49
+
50
+ /* Default styles for the container */
51
+ .joyride-tip-guide {
52
+ background: $joyride-tip-bg;
53
+ color: $joyride-tip-font-color;
54
+ display: none;
55
+ font-family: inherit;
56
+ font-weight: $font-weight-normal;
57
+ position: absolute;
58
+ top: 0;
59
+ width: 95%;
60
+ z-index: 103;
61
+ #{$default-float}: 2.5%;
62
+ }
63
+
64
+ .lt-ie9 .joyride-tip-guide {
65
+ margin-#{$default-float}: -400px;
66
+ max-width: 800px;
67
+ #{$default-float}: 50%;
68
+ }
69
+
70
+ .joyride-content-wrapper {
71
+ padding: $joyride-tip-padding;
72
+ width: 100%;
73
+
74
+ .button { margin-bottom: 0 !important; }
75
+
76
+ .joyride-prev-tip { margin-right: 10px; }
77
+ }
78
+
79
+ /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
80
+ .joyride-tip-guide {
81
+ .joyride-nub {
82
+ border: $joyride-tip-nub-size solid $joyride-tip-bg;
83
+ display: block;
84
+ height: 0;
85
+ position: absolute;
86
+ width: 0;
87
+ #{$default-float}: $joyride-tip-position-offset;
88
+
89
+ &.top {
90
+ border-color: $joyride-tip-bg;
91
+ border-top-color: transparent !important;
92
+ border-top-style: solid;
93
+ border-#{$default-float}-color: transparent !important;
94
+ border-#{$opposite-direction}-color: transparent !important;
95
+ top: -($joyride-tip-nub-size*2);
96
+ }
97
+ &.bottom {
98
+ border-color: $joyride-tip-bg !important;
99
+ border-bottom-color: transparent !important;
100
+ border-bottom-style: solid;
101
+ border-#{$default-float}-color: transparent !important;
102
+ border-#{$opposite-direction}-color: transparent !important;
103
+ bottom: -($joyride-tip-nub-size*2);
104
+ }
105
+
106
+ &.right { right: -($joyride-tip-nub-size*2); }
107
+ &.left { left: -($joyride-tip-nub-size*2); }
108
+ }
109
+ }
110
+
111
+ /* Typography */
112
+ .joyride-tip-guide h1,
113
+ .joyride-tip-guide h2,
114
+ .joyride-tip-guide h3,
115
+ .joyride-tip-guide h4,
116
+ .joyride-tip-guide h5,
117
+ .joyride-tip-guide h6 {
118
+ color: $joyride-tip-font-color;
119
+ font-weight: $joyride-tip-header-weight;
120
+ line-height: 1.25;
121
+ margin: 0;
122
+ }
123
+ .joyride-tip-guide p {
124
+ font-size: $joyride-tip-font-size;
125
+ line-height: 1.3;
126
+ margin: rem-calc(0 0 18 0);
127
+ }
128
+
129
+ .joyride-timer-indicator-wrap {
130
+ border: $joyride-tip-border;
131
+ bottom: rem-calc(16);
132
+ height: $joyride-tip-timer-height;
133
+ position: absolute;
134
+ width: $joyride-tip-timer-width;
135
+ #{$opposite-direction}: rem-calc(17);
136
+ }
137
+ .joyride-timer-indicator {
138
+ background: $joyride-tip-timer-color;
139
+ display: block;
140
+ height: inherit;
141
+ width: 0;
142
+ }
143
+
144
+ .joyride-close-tip {
145
+ color: $joyride-tip-close-color !important;
146
+ font-size: $joyride-tip-close-size;
147
+ font-weight: $joyride-tip-close-weight;
148
+ line-height: .5 !important;
149
+ position: absolute;
150
+ text-decoration: none;
151
+ top: 10px;
152
+ #{$opposite-direction}: 12px;
153
+
154
+ &:hover,
155
+ &:focus { color: $smoke !important; }
156
+ }
157
+
158
+ .joyride-modal-bg {
159
+ background: $joyride-screenfill;
160
+ cursor: $cursor-pointer-value;
161
+ display: none;
162
+ height: 100%;
163
+ position: fixed;
164
+ top: 0;
165
+ width: 100%;
166
+ z-index: 100;
167
+ #{$default-float}: 0;
168
+ }
169
+
170
+ .joyride-expose-wrapper {
171
+ background-color: $white;
172
+ border-radius: 3px;
173
+ box-shadow: 0 0 15px $white;
174
+ position: absolute;
175
+ z-index: 102;
176
+ }
177
+
178
+ .joyride-expose-cover {
179
+ background: transparent;
180
+ border-radius: 3px;
181
+ left: 0;
182
+ position: absolute;
183
+ top: 0;
184
+ z-index: 9999;
185
+ }
186
+
187
+
188
+ /* Styles for screens that are at least 768px; */
189
+ @media #{$small} {
190
+ .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
191
+ .joyride-nub {
192
+ &.bottom {
193
+ border-color: $joyride-tip-bg !important;
194
+ border-bottom-color: transparent !important;
195
+ border-#{$default-float}-color: transparent !important;
196
+ border-#{$opposite-direction}-color: transparent !important;
197
+ bottom: -($joyride-tip-nub-size*2);
198
+ }
199
+ &.right {
200
+ border-color: $joyride-tip-bg !important;
201
+ border-right-color: transparent !important; border-bottom-color: transparent !important;
202
+ border-top-color: transparent !important;
203
+ left: auto;
204
+ right: -($joyride-tip-nub-size*2);
205
+ top: $joyride-tip-position-offset;
206
+ }
207
+ &.left {
208
+ border-color: $joyride-tip-bg !important;
209
+ border-bottom-color: transparent !important;
210
+ border-left-color: transparent !important;
211
+ border-top-color: transparent !important;
212
+ left: -($joyride-tip-nub-size*2);
213
+ right: auto;
214
+ top: $joyride-tip-position-offset;
215
+ }
216
+ }
217
+ }
218
+ }
219
+ }
220
+ }
@@ -0,0 +1,60 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import 'global';
6
+
7
+ //
8
+ // @variables
9
+ //
10
+ $include-html-keystroke-classes: $include-html-classes !default;
11
+
12
+ // We use these to control text styles.
13
+ $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
14
+ $keystroke-font-size: inherit !default;
15
+ $keystroke-font-color: $jet !default;
16
+ $keystroke-font-color-alt: $white !default;
17
+ $keystroke-function-factor: -7% !default;
18
+
19
+ // We use this to control keystroke padding.
20
+ $keystroke-padding: rem-calc(2 4 0) !default;
21
+
22
+ // We use these to control background and border styles.
23
+ $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor) !default;
24
+ $keystroke-border-style: solid !default;
25
+ $keystroke-border-width: 1px !default;
26
+ $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor) !default;
27
+ $keystroke-radius: $global-radius !default;
28
+
29
+ //
30
+ // @mixins
31
+ //
32
+ // We use this mixin to create keystroke styles.
33
+ // $bg - Default: $keystroke-bg || scale-color($white, $lightness: $keystroke-function-factor) !default;
34
+ @mixin keystroke($bg:$keystroke-bg) {
35
+ // This find the lightness percentage of the background color.
36
+ $bg-lightness: lightness($bg);
37
+ background-color: $bg;
38
+ border-color: scale-color($bg, $lightness: $keystroke-function-factor);
39
+
40
+ // We adjust the font color based on the brightness of the background.
41
+ @if $bg-lightness > 70% { color: $keystroke-font-color; }
42
+ @else { color: $keystroke-font-color-alt; }
43
+
44
+ border-style: $keystroke-border-style;
45
+ border-width: $keystroke-border-width;
46
+ font-family: $keystroke-font;
47
+ font-size: $keystroke-font-size;
48
+ margin: 0;
49
+ padding: $keystroke-padding;
50
+ }
51
+
52
+ @include exports("keystroke") {
53
+ @if $include-html-keystroke-classes {
54
+ .keystroke,
55
+ kbd {
56
+ @include keystroke;
57
+ @include radius($keystroke-radius);
58
+ }
59
+ }
60
+ }
@@ -0,0 +1,106 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import 'global';
6
+
7
+ //
8
+ // @variables
9
+ //
10
+ $include-html-label-classes: $include-html-classes !default;
11
+
12
+ // We use these to style the labels
13
+ $label-padding: rem-calc(4 8 4) !default;
14
+ $label-radius: $global-radius !default;
15
+
16
+ // We use these to style the label text
17
+ $label-font-sizing: rem-calc(11) !default;
18
+ $label-font-weight: $font-weight-normal !default;
19
+ $label-font-color: $oil !default;
20
+ $label-font-color-alt: $white !default;
21
+ $label-font-family: $body-font-family !default;
22
+
23
+ //
24
+ // @mixins
25
+ //
26
+ // We use this mixin to create a default label base.
27
+ @mixin label-base {
28
+ display: inline-block;
29
+ font-family: $label-font-family;
30
+ font-weight: $label-font-weight;
31
+ line-height: 1;
32
+ margin-bottom: auto;
33
+ position: relative;
34
+ text-align: center;
35
+ text-decoration: none;
36
+ white-space: nowrap;
37
+ }
38
+
39
+ // @mixins
40
+ //
41
+ // We use this mixin to add label size styles.
42
+ // $padding - Used to determine label padding. Default: $label-padding || rem-calc(4 8 4) !default
43
+ // $text-size - Used to determine label text-size. Default: $text-size found in settings
44
+ @mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) {
45
+ @if $padding { padding: $padding; }
46
+ @if $text-size { font-size: $text-size; }
47
+ }
48
+
49
+ // @mixins
50
+ //
51
+ // We use this mixin to add label styles.
52
+ // $bg - Default: $primary-color (found in settings file)
53
+ // $radius - Default: false, Options: true, sets radius to $global-radius (found in settings file)
54
+ @mixin label-style($bg:$primary-color, $radius:false) {
55
+
56
+ // We control which background color comes through
57
+ @if $bg {
58
+
59
+ // This find the lightness percentage of the background color.
60
+ $bg-lightness: lightness($bg);
61
+
62
+ background-color: $bg;
63
+
64
+ // We control the text color for you based on the background color.
65
+ @if $bg-lightness < 70% { color: $label-font-color-alt; }
66
+ @else { color: $label-font-color; }
67
+ }
68
+
69
+ // We use this to control the radius on labels.
70
+ @if $radius == true { @include radius($label-radius); }
71
+ @else if $radius { @include radius($radius); }
72
+
73
+ }
74
+
75
+ // @mixins
76
+ //
77
+ // We use this to add close buttons to alerts
78
+ // $padding - Default: $label-padding,
79
+ // $text-size - Default: $label-font-sizing,
80
+ // $bg - Default: $primary-color(found in settings file)
81
+ // $radius - Default: false, Options: true which sets radius to $global-radius (found in settings file)
82
+ @mixin label($padding:$label-padding, $text-size:$label-font-sizing, $bg:$primary-color, $radius:false) {
83
+
84
+ @include label-base;
85
+ @include label-size($padding, $text-size);
86
+ @include label-style($bg, $radius);
87
+ }
88
+
89
+ @include exports("label") {
90
+ @if $include-html-label-classes {
91
+ .label {
92
+ @include label-base;
93
+ @include label-size;
94
+ @include label-style;
95
+
96
+ &.radius { @include label-style(false, true); }
97
+ &.round { @include label-style(false, $radius:1000px); }
98
+
99
+ &.alert { @include label-style($alert-color); }
100
+ &.warning { @include label-style($warning-color); }
101
+ &.success { @include label-style($success-color); }
102
+ &.secondary { @include label-style($secondary-color); }
103
+ &.info { @include label-style($info-color); }
104
+ }
105
+ }
106
+ }
@@ -0,0 +1,34 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import 'global';
6
+
7
+ //
8
+ // @variables
9
+ //
10
+ $include-html-magellan-classes: $include-html-classes !default;
11
+
12
+ $magellan-bg: $white !default;
13
+ $magellan-padding: 10px !default;
14
+
15
+ @include exports("magellan") {
16
+ @if $include-html-magellan-classes {
17
+
18
+ #{data('magellan-expedition')}, #{data('magellan-expedition-clone')} {
19
+ background: $magellan-bg;
20
+ min-width: 100%;
21
+ padding: $magellan-padding;
22
+ z-index: 50;
23
+
24
+ .sub-nav {
25
+ margin-bottom: 0;
26
+ dd { margin-bottom: 0; }
27
+ a {
28
+ line-height: 1.8em;
29
+ }
30
+ }
31
+ }
32
+
33
+ }
34
+ }