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,208 @@
1
+ // Foundation by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ @import 'global';
6
+ @import 'buttons';
7
+
8
+ //
9
+ // Button Group Variables
10
+ //
11
+ $include-html-button-classes: $include-html-classes !default;
12
+
13
+ // Sets the margin for the right side by default, and the left margin if right-to-left direction is used
14
+ $button-bar-margin-opposite: rem-calc(10) !default;
15
+ $button-group-border-width: 1px !default;
16
+
17
+ //
18
+ // Button Group Mixins
19
+ //
20
+
21
+ // We use this to add styles for a button group container
22
+ @mixin button-group-container($styles:true, $float:false) {
23
+ @if $styles {
24
+ list-style: none;
25
+ margin: 0;
26
+ #{$default-float}: 0;
27
+ @include clearfix();
28
+ }
29
+ @if $float {
30
+ float: #{$default-float};
31
+ margin-#{$opposite-direction}: $button-bar-margin-opposite;
32
+ & div { overflow: hidden; }
33
+ }
34
+ }
35
+
36
+ // We use this to control styles for button groups
37
+ @mixin button-group-style($radius:false, $even:false, $float:false, $orientation:horizontal) {
38
+
39
+ > button, .button {
40
+ border-#{$default-float}: $button-group-border-width solid;
41
+ border-color: rgba(255, 255, 255, .5);
42
+ }
43
+
44
+ &:first-child {
45
+ button, .button {
46
+ border-#{$default-float}: 0;
47
+ }
48
+ }
49
+
50
+ $button-group-display: list-item;
51
+ $button-group-margin: 0;
52
+
53
+ // We use this to control the flow, or remove those styles completely.
54
+ @if $float {
55
+ $button-group-display: list-item;
56
+ $button-group-margin: 0;
57
+ float: $float;
58
+ // Make sure the first child doesn't get the negative margin.
59
+ &:first-child { margin-#{$default-float}: 0; }
60
+ }
61
+ @else {
62
+ $button-group-display: inline-block;
63
+ $button-group-margin: 0 -2px;
64
+ }
65
+
66
+ @if $orientation == vertical {
67
+ $button-group-display: block;
68
+ $button-group-margin: 0;
69
+ > button, .button {
70
+ border-color: rgba(255, 255, 255, .5);
71
+ border-left-width: 0;
72
+ border-top: $button-group-border-width solid;
73
+ display: block;
74
+ margin:0;
75
+ }
76
+ > button {
77
+ width: 100%;
78
+ }
79
+
80
+ &:first-child {
81
+ button, .button {
82
+ border-top: 0;
83
+ }
84
+ }
85
+ }
86
+
87
+ display: $button-group-display;
88
+ margin: $button-group-margin;
89
+
90
+
91
+ // We use these to control left and right radius on first/last buttons in the group.
92
+ @if $radius == true {
93
+ &,
94
+ > a,
95
+ > button,
96
+ > .button { @include radius(0); }
97
+ &:first-child,
98
+ &:first-child > a,
99
+ &:first-child > button,
100
+ &:first-child > .button {
101
+ @if $orientation == vertical {
102
+ @include side-radius(top, $button-radius);
103
+ }
104
+ @else {
105
+ @include side-radius($default-float, $button-radius);
106
+ }
107
+ }
108
+ &:last-child,
109
+ &:last-child > a,
110
+ &:last-child > button,
111
+ &:last-child > .button {
112
+ @if $orientation == vertical {
113
+ @include side-radius(bottom, $button-radius);
114
+ }
115
+ @else {
116
+ @include side-radius($opposite-direction, $button-radius);
117
+ }
118
+ }
119
+ }
120
+ @else if $radius {
121
+ &,
122
+ > a,
123
+ > button,
124
+ > .button { @include radius(0); }
125
+ &:first-child,
126
+ &:first-child > a,
127
+ &:first-child > button,
128
+ &:first-child > .button {
129
+ @if $orientation == vertical {
130
+ @include side-radius(top, $radius);
131
+ }
132
+ @else {
133
+ @include side-radius($default-float, $radius);
134
+ }
135
+ }
136
+ &:last-child,
137
+ &:last-child > a,
138
+ &:last-child > button,
139
+ &:last-child > .button {
140
+ @if $orientation == vertical {
141
+ @include side-radius(bottom, $radius);
142
+ }
143
+ @else {
144
+ @include side-radius($opposite-direction, $radius);
145
+ }
146
+ }
147
+ }
148
+
149
+ // We use this to make the buttons even width across their container
150
+ @if $even {
151
+ width: percentage((100/$even) / 100);
152
+ button, .button { width: 100%; }
153
+ }
154
+ }
155
+
156
+ @include exports("button-group") {
157
+ @if $include-html-button-classes {
158
+ .button-group { @include button-group-container;
159
+
160
+ @for $i from 2 through 8 {
161
+ &.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
162
+ }
163
+
164
+ > li { @include button-group-style(); }
165
+
166
+ &.stack {
167
+ > li { @include button-group-style($orientation:vertical); float: none; }
168
+ }
169
+
170
+ &.stack-for-small {
171
+ > li {
172
+ @include button-group-style($orientation:horizontal);
173
+ @media #{$small-only} {
174
+ @include button-group-style($orientation:vertical);
175
+ width: 100%;
176
+ }
177
+ }
178
+ }
179
+
180
+ &.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
181
+ &.radius.stack > * { @include button-group-style($radius:$button-radius, $float:null, $orientation:vertical); }
182
+ &.radius.stack-for-small > * {
183
+ @media #{$medium-up} {
184
+ @include button-group-style($radius:$button-radius, $orientation:horizontal);
185
+ }
186
+ @media #{$small-only} {
187
+ @include button-group-style($radius:$button-radius, $orientation:vertical);
188
+ }
189
+ }
190
+
191
+ &.round > * { @include button-group-style($radius:$button-round, $float:null); }
192
+ &.round.stack > * { @include button-group-style($radius:$button-med, $float:null, $orientation:vertical); }
193
+ &.round.stack-for-small > * {
194
+ @media #{$medium-up} {
195
+ @include button-group-style($radius:$button-round, $orientation:horizontal);
196
+ }
197
+ @media #{$small-only} {
198
+ @include button-group-style($radius:$button-med, $orientation:vertical);
199
+ }
200
+ }
201
+ }
202
+
203
+ .button-bar {
204
+ @include clearfix;
205
+ .button-group { @include button-group-container($styles:false, $float:true); }
206
+ }
207
+ }
208
+ }
@@ -0,0 +1,261 @@
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-button-classes: $include-html-classes !default;
11
+
12
+ // We use these to build padding for buttons.
13
+ $button-tny: rem-calc(10) !default;
14
+ $button-sml: rem-calc(14) !default;
15
+ $button-med: rem-calc(16) !default;
16
+ $button-lrg: rem-calc(18) !default;
17
+
18
+ // We use this to control the display property.
19
+ $button-display: inline-block !default;
20
+ $button-margin-bottom: rem-calc(20) !default;
21
+
22
+ // We use these to control button text styles.
23
+ $button-font-family: $body-font-family !default;
24
+ $button-font-color: $white !default;
25
+ $button-font-color-alt: $oil !default;
26
+ $button-font-tny: rem-calc(11) !default;
27
+ $button-font-sml: rem-calc(13) !default;
28
+ $button-font-med: rem-calc(16) !default;
29
+ $button-font-lrg: rem-calc(20) !default;
30
+ $button-font-weight: $font-weight-normal !default;
31
+ $button-font-align: center !default;
32
+
33
+ // We use these to control various hover effects.
34
+ $button-function-factor: -20% !default;
35
+
36
+ // We use these to control button border styles.
37
+ $button-border-width: 0 !default;
38
+ $button-border-style: solid !default;
39
+ $button-bg-color: $primary-color !default;
40
+ $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default;
41
+ $button-border-color: $button-bg-hover !default;
42
+ $secondary-button-bg-color: $secondary-color !default;
43
+ $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor) !default;
44
+ $secondary-button-border-color: $secondary-button-bg-hover !default;
45
+ $success-button-bg-color: $success-color !default;
46
+ $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor) !default;
47
+ $success-button-border-color: $success-button-bg-hover !default;
48
+ $alert-button-bg-color: $alert-color !default;
49
+ $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor) !default;
50
+ $alert-button-border-color: $alert-button-bg-hover !default;
51
+ $warning-button-bg-color: $warning-color !default;
52
+ $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor) !default;
53
+ $warning-button-border-color: $warning-button-bg-hover !default;
54
+ $info-button-bg-color: $info-color !default;
55
+ $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor) !default;
56
+ $info-button-border-color: $info-button-bg-hover !default;
57
+
58
+ // We use this to set the default radius used throughout the core.
59
+ $button-radius: $global-radius !default;
60
+ $button-round: $global-rounded !default;
61
+
62
+ // We use this to set default opacity and cursor for disabled buttons.
63
+ $button-disabled-opacity: .7 !default;
64
+ $button-disabled-cursor: $cursor-default-value !default;
65
+
66
+
67
+ //
68
+ // @MIXIN
69
+ //
70
+ // We use this mixin to create a default button base.
71
+ //
72
+ // $style - Sets base styles. Can be set to false. Default: true.
73
+ // $display - Used to control display property. Default: $button-display || inline-block
74
+
75
+ @mixin button-base($style:true, $display:$button-display) {
76
+ @if $style {
77
+ -webkit-appearance: none;
78
+ -moz-appearance: none;
79
+ border-radius:0;
80
+ border-style: $button-border-style;
81
+ border-width: $button-border-width;
82
+ cursor: $cursor-pointer-value;
83
+ font-family: $button-font-family;
84
+ font-weight: $button-font-weight;
85
+ line-height: normal;
86
+ margin: 0 0 $button-margin-bottom;
87
+ position: relative;
88
+ text-align: $button-font-align;
89
+ text-decoration: none;
90
+ }
91
+ @if $display { display: $display; }
92
+ }
93
+
94
+ // @MIXIN
95
+ //
96
+ // We use this mixin to add button size styles
97
+ //
98
+ // $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12)
99
+ // $full-width - We can set $full-width:true to remove side padding extend width - Default: false
100
+
101
+ @mixin button-size($padding:$button-med, $full-width:false) {
102
+
103
+ // We control which padding styles come through,
104
+ // these can be turned off by setting $padding:false
105
+ @if $padding {
106
+ padding: $padding ($padding * 2) ($padding + rem-calc(1)) ($padding * 2);
107
+ // We control the font-size based on mixin input.
108
+ @if $padding == $button-med { font-size: $button-font-med; }
109
+ @else if $padding == $button-tny { font-size: $button-font-tny; }
110
+ @else if $padding == $button-sml { font-size: $button-font-sml; }
111
+ @else if $padding == $button-lrg { font-size: $button-font-lrg; }
112
+ }
113
+
114
+ // We can set $full-width:true to remove side padding extend width.
115
+ @if $full-width {
116
+ // We still need to check if $padding is set.
117
+ @if $padding {
118
+ padding-bottom: $padding + rem-calc(1);
119
+ padding-top: $padding;
120
+ } @else if $padding == false {
121
+ padding-bottom:0;
122
+ padding-top:0;
123
+ }
124
+ padding-left: $button-med;
125
+ padding-right: $button-med;
126
+ width: 100%;
127
+ }
128
+ }
129
+
130
+ // @MIXIN
131
+ //
132
+ // we use this mixin to create the button hover and border colors
133
+
134
+ // @MIXIN
135
+ //
136
+ // We use this mixin to add button color styles
137
+ //
138
+ // $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color.
139
+ // $radius - If true, set to button radius which is $button-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
140
+ // $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
141
+ // $bg-hover - Button Hover Background Color. Default: $button-bg-hover
142
+ // $border-color - Button Border Color. Default: $button-border-color
143
+ @mixin button-style($bg:$button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null) {
144
+
145
+ // We control which background styles are used,
146
+ // these can be removed by setting $bg:false
147
+ @if $bg {
148
+
149
+ @if $bg-hover == null {
150
+ $bg-hover: if($bg == $button-bg-color, $button-bg-hover, scale-color($bg, $lightness: $button-function-factor));
151
+ }
152
+
153
+ @if $border-color == null {
154
+ $border-color: if($bg == $button-bg-color, $button-border-color, scale-color($bg, $lightness: $button-function-factor));
155
+ }
156
+
157
+ // This find the lightness percentage of the background color.
158
+ $bg-lightness: lightness($bg);
159
+ $bg-hover-lightness: lightness($bg-hover);
160
+
161
+ background-color: $bg;
162
+ border-color: $border-color;
163
+ &:hover,
164
+ &:focus { background-color: $bg-hover; }
165
+
166
+ // We control the text color for you based on the background color.
167
+ color: if($bg-lightness > 70%, $button-font-color-alt, $button-font-color);
168
+
169
+ &:hover,
170
+ &:focus {
171
+ color: if($bg-hover-lightness > 70%, $button-font-color-alt, $button-font-color);
172
+ }
173
+ }
174
+
175
+ // We can set $disabled:true to create a disabled transparent button.
176
+ @if $disabled {
177
+ box-shadow: none;
178
+ cursor: $button-disabled-cursor;
179
+ opacity: $button-disabled-opacity;
180
+ &:hover,
181
+ &:focus { background-color: $bg; }
182
+ }
183
+
184
+ // We can control how much button radius is used.
185
+ @if $radius == true { @include radius($button-radius); }
186
+ @else if $radius { @include radius($radius); }
187
+
188
+ }
189
+
190
+ // @MIXIN
191
+ //
192
+ // We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
193
+ //
194
+ // $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12)
195
+ // $bg - Primary color set in settings file. Default: $button-bg.
196
+ // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default:false.
197
+ // $full-width - We can set $full-width:true to remove side padding extend width. Default:false.
198
+ // $disabled - We can set $disabled:true to create a disabled transparent button. Default:false.
199
+ // $is-prefix - Not used? Default:false.
200
+ // $bg-hover - Button Hover Color - Default null - see button-style mixin
201
+ // $border-color - Button Border Color - Default null - see button-style mixin
202
+ // $transition - We can control whether or not to include the background-color transition property - Default:true.
203
+ @mixin button($padding:$button-med, $bg:$button-bg-color, $radius:false, $full-width:false, $disabled:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition: true) {
204
+ @include button-base;
205
+ @include button-size($padding, $full-width);
206
+ @include button-style($bg, $radius, $disabled, $bg-hover, $border-color);
207
+
208
+ @if $transition {
209
+ @include single-transition(background-color);
210
+ }
211
+ }
212
+
213
+
214
+ @include exports("button") {
215
+ @if $include-html-button-classes {
216
+
217
+ // Default styles applied outside of media query
218
+ button, .button {
219
+ @include button-base;
220
+ @include button-size;
221
+ @include button-style;
222
+
223
+ @include single-transition(background-color);
224
+
225
+ &.secondary { @include button-style($bg:$secondary-button-bg-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
226
+ &.success { @include button-style($bg:$success-button-bg-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
227
+ &.alert { @include button-style($bg:$alert-button-bg-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
228
+ &.warning { @include button-style($bg:$warning-button-bg-color, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
229
+ &.info { @include button-style($bg:$info-button-bg-color, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
230
+
231
+ &.large { @include button-size($padding:$button-lrg); }
232
+ &.small { @include button-size($padding:$button-sml); }
233
+ &.tiny { @include button-size($padding:$button-tny); }
234
+ &.expand { @include button-size($full-width:true); }
235
+
236
+ &.left-align { text-align: left; text-indent: rem-calc(12); }
237
+ &.right-align { text-align: right; padding-right: rem-calc(12); }
238
+
239
+ &.radius { @include button-style($bg:false, $radius:true); }
240
+ &.round { @include button-style($bg:false, $radius:$button-round); }
241
+
242
+ &.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color);
243
+ &.secondary { @include button-style($bg:$secondary-button-bg-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
244
+ &.success { @include button-style($bg:$success-button-bg-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
245
+ &.alert { @include button-style($bg:$alert-button-bg-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
246
+ &.warning { @include button-style($bg:$warning-button-bg-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
247
+ &.info { @include button-style($bg:$info-button-bg-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
248
+ }
249
+ }
250
+
251
+ //firefox 2px fix
252
+ button::-moz-focus-inner {border:0; padding:0;}
253
+
254
+ @media #{$medium-up} {
255
+ button, .button {
256
+ @include button-base($style:false, $display:inline-block);
257
+ @include button-size($padding:false, $full-width:false);
258
+ }
259
+ }
260
+ }
261
+ }