foundation-sass-rails 5.5.3.2

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 (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
+ }