foundation_apps_styles 1.1.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 (70) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +9 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +21 -0
  5. data/README.md +41 -0
  6. data/Rakefile +13 -0
  7. data/bin/console +14 -0
  8. data/bin/setup +7 -0
  9. data/foundation_apps_styles.gemspec +24 -0
  10. data/lib/foundation_apps_styles.rb +6 -0
  11. data/lib/foundation_apps_styles/version.rb +3 -0
  12. data/vendor/assets/iconic/account.svg +44 -0
  13. data/vendor/assets/iconic/action.svg +38 -0
  14. data/vendor/assets/iconic/ban.svg +17 -0
  15. data/vendor/assets/iconic/bell.svg +22 -0
  16. data/vendor/assets/iconic/bookmark.svg +14 -0
  17. data/vendor/assets/iconic/cart.svg +35 -0
  18. data/vendor/assets/iconic/chevron.svg +28 -0
  19. data/vendor/assets/iconic/circle-check.svg +25 -0
  20. data/vendor/assets/iconic/circle-x.svg +25 -0
  21. data/vendor/assets/iconic/cog.svg +17 -0
  22. data/vendor/assets/iconic/comment-square.svg +14 -0
  23. data/vendor/assets/iconic/dashboard.svg +38 -0
  24. data/vendor/assets/iconic/document.svg +28 -0
  25. data/vendor/assets/iconic/envelope.svg +44 -0
  26. data/vendor/assets/iconic/flag.svg +24 -0
  27. data/vendor/assets/iconic/home.svg +28 -0
  28. data/vendor/assets/iconic/lock.svg +55 -0
  29. data/vendor/assets/iconic/magnifying-glass.svg +26 -0
  30. data/vendor/assets/iconic/person.svg +62 -0
  31. data/vendor/assets/iconic/reload.svg +19 -0
  32. data/vendor/assets/iconic/share-boxed.svg +17 -0
  33. data/vendor/assets/iconic/star.svg +14 -0
  34. data/vendor/assets/iconic/thumb.svg +38 -0
  35. data/vendor/assets/iconic/zoom.svg +56 -0
  36. data/vendor/assets/stylesheets/_global.scss +131 -0
  37. data/vendor/assets/stylesheets/_includes.scss +33 -0
  38. data/vendor/assets/stylesheets/_settings.scss +614 -0
  39. data/vendor/assets/stylesheets/components/_accordion.scss +72 -0
  40. data/vendor/assets/stylesheets/components/_action-sheet.scss +265 -0
  41. data/vendor/assets/stylesheets/components/_block-list.scss +360 -0
  42. data/vendor/assets/stylesheets/components/_button-group.scss +197 -0
  43. data/vendor/assets/stylesheets/components/_button.scss +205 -0
  44. data/vendor/assets/stylesheets/components/_card.scss +93 -0
  45. data/vendor/assets/stylesheets/components/_extras.scss +54 -0
  46. data/vendor/assets/stylesheets/components/_forms.scss +460 -0
  47. data/vendor/assets/stylesheets/components/_grid.scss +422 -0
  48. data/vendor/assets/stylesheets/components/_iconic.scss +95 -0
  49. data/vendor/assets/stylesheets/components/_label.scss +134 -0
  50. data/vendor/assets/stylesheets/components/_list.scss +19 -0
  51. data/vendor/assets/stylesheets/components/_menu-bar.scss +382 -0
  52. data/vendor/assets/stylesheets/components/_modal.scss +129 -0
  53. data/vendor/assets/stylesheets/components/_motion.scss +525 -0
  54. data/vendor/assets/stylesheets/components/_notification.scss +207 -0
  55. data/vendor/assets/stylesheets/components/_off-canvas.scss +169 -0
  56. data/vendor/assets/stylesheets/components/_panel.scss +134 -0
  57. data/vendor/assets/stylesheets/components/_popup.scss +68 -0
  58. data/vendor/assets/stylesheets/components/_switch.scss +134 -0
  59. data/vendor/assets/stylesheets/components/_tabs.scss +100 -0
  60. data/vendor/assets/stylesheets/components/_title-bar.scss +135 -0
  61. data/vendor/assets/stylesheets/components/_typography.scss +345 -0
  62. data/vendor/assets/stylesheets/components/_utilities.scss +160 -0
  63. data/vendor/assets/stylesheets/foundation-apps.css +6146 -0
  64. data/vendor/assets/stylesheets/foundation.scss +50 -0
  65. data/vendor/assets/stylesheets/helpers/_breakpoints.scss +154 -0
  66. data/vendor/assets/stylesheets/helpers/_functions.scss +343 -0
  67. data/vendor/assets/stylesheets/helpers/_images.scss +19 -0
  68. data/vendor/assets/stylesheets/helpers/_mixins.scss +123 -0
  69. data/vendor/assets/stylesheets/vendor/_normalize.scss +424 -0
  70. metadata +140 -0
@@ -0,0 +1,134 @@
1
+ /*
2
+ Label
3
+ */
4
+
5
+ /// @Foundation.settings
6
+ // Label
7
+ $label-fontsize: 0.8rem !default;
8
+ $label-padding: ($global-padding / 3) ($global-padding / 2) !default;
9
+ $label-radius: 0 !default;
10
+ $label-background: $primary-color !default;
11
+ $label-color: isitlight($primary-color) !default;
12
+
13
+ $badge-fontsize: 0.8em !default;
14
+ $badge-diameter: 1.5rem !default;
15
+ $badge-background: $primary-color !default;
16
+ $badge-color: #fff !default;
17
+ ///
18
+
19
+ %label {
20
+ line-height: 1;
21
+ white-space: nowrap;
22
+ display: inline-block;
23
+ cursor: default;
24
+ }
25
+
26
+ @mixin label-layout(
27
+ $fontsize: $label-fontsize,
28
+ $padding: $label-padding
29
+ ) {
30
+ font-size: $fontsize;
31
+ padding: $padding;
32
+ }
33
+
34
+ @mixin label-style(
35
+ $background: $label-background,
36
+ $color: $label-color,
37
+ $radius: $label-radius
38
+ ) {
39
+ background: $background;
40
+ border-radius: $radius;
41
+
42
+ @if $color == auto {
43
+ color: isitlight($background);
44
+ }
45
+ @else {
46
+ color: $color;
47
+ }
48
+ }
49
+
50
+ @mixin label(
51
+ $background: $label-background,
52
+ $color: $label-color,
53
+ $radius: $label-radius,
54
+ $fontsize: $label-fontsize,
55
+ $padding: $label-padding
56
+ ) {
57
+ @extend %label;
58
+ @include label-layout($fontsize, $padding);
59
+ @include label-style($background, $color, $radius);
60
+ }
61
+
62
+ @include exports(label) {
63
+ .label {
64
+ @include label;
65
+
66
+ @each $color in map-keys($foundation-colors) {
67
+ &.#{$color} {
68
+ $color-value: map-get($foundation-colors, $color);
69
+ @include label-style($color-value, auto);
70
+ }
71
+ }
72
+ }
73
+ }
74
+
75
+ /*
76
+ Badge
77
+ */
78
+
79
+ %badge {
80
+ align-items: center;
81
+ justify-content: center;
82
+ display: inline-flex;
83
+ border-radius: 1000px;
84
+ }
85
+
86
+ @mixin badge-layout(
87
+ $fontsize: $badge-fontsize,
88
+ $diameter: $badge-diameter
89
+ ) {
90
+ font-size: $fontsize;
91
+ width: $diameter;
92
+ height: $diameter;
93
+ }
94
+
95
+ @mixin badge-style(
96
+ $background: $badge-background,
97
+ $color: $badge-font-color
98
+ ) {
99
+ background: $background;
100
+
101
+ @if $color == auto {
102
+ color: isitlight($background);
103
+ }
104
+ @else {
105
+ color: $color;
106
+ }
107
+ }
108
+
109
+ @mixin badge(
110
+ $background: $badge-background,
111
+ $color: $badge-color,
112
+ $diameter: $badge-diameter,
113
+ $fontsize: $badge-fontsize
114
+ ) {
115
+ @extend %badge;
116
+ @include badge-layout($fontsize, $diameter);
117
+ @include badge-style($background, $color);
118
+ }
119
+
120
+ @include exports(badge) {
121
+ .badge {
122
+ @include badge;
123
+
124
+ &.secondary {
125
+ @include badge-style($secondary-color, auto);
126
+ }
127
+ @each $color in map-keys($foundation-colors) {
128
+ &.#{$color} {
129
+ $color-value: map-get($foundation-colors, $color);
130
+ @include badge-style($color-value, auto);
131
+ }
132
+ }
133
+ }
134
+ }
@@ -0,0 +1,19 @@
1
+ @mixin inline-list($alignment){
2
+ list-style-type: none;
3
+ text-align: $alignment;
4
+ li, dt, dd {
5
+ display: inline-block;
6
+ margin-left: -2px;
7
+ margin-right: -2px;
8
+ }
9
+ }
10
+
11
+ @include exports(list) {
12
+ .inline-list {
13
+ @include inline-list(left);
14
+ li {
15
+ margin-right: 1rem;
16
+ margin-left: 0;
17
+ }
18
+ }
19
+ }
@@ -0,0 +1,382 @@
1
+ /*
2
+ MENU BAR
3
+ --------
4
+
5
+ A generic, flexible menu component.
6
+
7
+ Features:
8
+ - Orient horizontally and vertically
9
+ - Change orientation at certain breakpoints
10
+ - Items with icons above, below, or to the left or right
11
+ - Text labels for vertical menus and badges for horizontal menus
12
+ */
13
+
14
+ /// @Foundation.settings
15
+ // Menu Bar
16
+ $menubar-fontsize: 1rem !default;
17
+ $menubar-background: #fff !default;
18
+ $menubar-background-hover: smartscale($menubar-background, 7%) !default;
19
+ $menubar-background-active: $menubar-background-hover;
20
+ $menubar-color: isitlight($menubar-background) !default;
21
+ $menubar-color-hover: $menubar-color !default;
22
+ $menubar-color-active: $menubar-color-hover;
23
+
24
+ $menubar-item-padding: $global-padding !default;
25
+ $menubar-icon-size: 25px !default;
26
+ $menubar-icon-spacing: $menubar-item-padding !default;
27
+ ///
28
+
29
+ // Menu bar container
30
+ %menu-bar {
31
+ display: flex;
32
+ align-items: stretch;
33
+ margin: 0;
34
+ list-style-type: none;
35
+ overflow-y: visible;
36
+
37
+ // Menu item
38
+ > li {
39
+ // This flex setting makes each item an equal width
40
+ flex: 1 0 0;
41
+ align-items: center;
42
+
43
+ // The list item itself is also a flex container, to center links in case they have different height
44
+ display: flex;
45
+ align-items: stretch;
46
+
47
+ // Link inside menu item
48
+ > a {
49
+ display: flex;
50
+ flex-flow: column nowrap;
51
+ align-items: center;
52
+ padding: $menubar-item-padding;
53
+ font-size: $menubar-fontsize;
54
+ line-height: 1;
55
+ }
56
+ }
57
+ }
58
+
59
+ @mixin menu-bar-layout (
60
+ $orientation: horizontal,
61
+ $stretch: true
62
+ ) {
63
+ /*
64
+ Orientation
65
+ */
66
+ @if $orientation == horizontal {
67
+ overflow-x: hidden;
68
+ flex-flow: row nowrap;
69
+
70
+ > li > a {
71
+ flex: 1 0 0;
72
+ }
73
+ > li > a {
74
+ flex-flow: column nowrap;
75
+ }
76
+ }
77
+ @else {
78
+ flex-flow: column nowrap;
79
+
80
+ > li {
81
+ flex: 1 0 auto;
82
+ }
83
+ > li > a {
84
+ flex-flow: row nowrap;
85
+ }
86
+ }
87
+
88
+ /*
89
+ Stretch
90
+ */
91
+ > li {
92
+ @if $stretch == false {
93
+ flex: 0 0 auto;
94
+ }
95
+ }
96
+ }
97
+
98
+ @mixin menu-bar-style(
99
+ $background: $menubar-background,
100
+ $background-hover: $menubar-background-hover,
101
+ $background-active: $menubar-background-active,
102
+ $color: $menubar-color,
103
+ $color-hover: $menubar-color-hover,
104
+ $color-active: $menubar-color-active,
105
+ $autocolor: false
106
+ ) {
107
+ // Autocoloring
108
+ @if ($autocolor) {
109
+ $background-hover: smartscale($background, 7%);
110
+ $background-active: $background-hover;
111
+
112
+ $color: isitlight($background);
113
+ $color-hover: $color;
114
+ $color-active: $color;
115
+ }
116
+
117
+ // Container
118
+ background: $background;
119
+
120
+ // Items
121
+ > li > a {
122
+ color: $color;
123
+
124
+ &:hover {
125
+ background: $background-hover;
126
+ color: $color-hover;
127
+ }
128
+ }
129
+ .is-active > a {
130
+ background: $background-active;
131
+ color: $color-active
132
+ }
133
+
134
+ // Iconic
135
+ @if using(iconic) {
136
+ .iconic { @include color-icon($color); }
137
+ }
138
+ }
139
+
140
+ @mixin menu-bar-icons(
141
+ $position: left,
142
+ $size: $menubar-icon-size
143
+ ) {
144
+ > li {
145
+ // Sizing
146
+ > img, > .iconic {
147
+ margin: 0;
148
+
149
+ @if $menubar-icon-size != false {
150
+ width: $menubar-icon-size;
151
+ height: $menubar-icon-size;
152
+ }
153
+
154
+ // Remove any margins from standalone icons
155
+ &:first-child:last-child {
156
+ margin: 0;
157
+ }
158
+ }
159
+
160
+ // Position
161
+ @if $position == left {
162
+ > a {
163
+ flex-flow: row nowrap;
164
+ align-items: center;
165
+ > img, > .iconic { margin: 0 $menubar-icon-spacing 0 0; }
166
+ }
167
+ }
168
+ @if $position == top {
169
+ > a {
170
+ flex-flow: column nowrap;
171
+ > img, > .iconic { margin: 0 0 $menubar-icon-spacing 0; }
172
+ }
173
+ }
174
+ @if $position == right {
175
+ > a {
176
+ flex-flow: row-reverse nowrap;
177
+ > img, > .iconic { margin: 0 0 0 $menubar-icon-spacing; }
178
+ }
179
+ }
180
+ @if $position == bottom {
181
+ > a {
182
+ flex-flow: column-reverse nowrap;
183
+ > img, > .iconic { margin: $menubar-icon-spacing 0 0 0; }
184
+ }
185
+ }
186
+ }
187
+ }
188
+
189
+ @mixin menu-bar-labels(
190
+ $x: right,
191
+ $y: center,
192
+ $offset: $menubar-item-padding,
193
+ $size: 1.2rem,
194
+ $background: red,
195
+ $color: auto,
196
+ $selector: '.menu-bar-label'
197
+ ) {
198
+ > li {
199
+ position: relative;
200
+
201
+ > a {
202
+ @if $x == left or $x == right {
203
+ padding-#{$x}: $size + $offset * 2;
204
+ }
205
+ }
206
+ }
207
+
208
+ #{$selector} {
209
+ display: block;
210
+ font-size: $size * 0.75;
211
+ width: $size;
212
+ height: $size;
213
+ line-height: $size;
214
+ text-align: center;
215
+ border-radius: 1000px;
216
+ background: $background;
217
+ color: if($color == auto, isitlight($background), $color);
218
+ position: absolute;
219
+ pointer-events: none;
220
+
221
+ @if $x == left or $x == right {
222
+ #{$x}: $offset;
223
+ }
224
+
225
+ @if $y == top or $y == bottom {
226
+ #{$y}: $offset;
227
+ }
228
+ @else {
229
+ top: 50%;
230
+ transform: translateY(-50%);
231
+ }
232
+ }
233
+ }
234
+
235
+ /*
236
+ Set the alignment of menu items (li) within a menu-bar
237
+
238
+ left: Items align to the left.
239
+ right: Items align to the right.
240
+ center: Items align to the center.
241
+ justify: Items are spaced equally apart so they occupy the space of the entire grid.
242
+ spaced: Items are given equal space to their left and right.
243
+
244
+ @group menu-bar
245
+
246
+ @param {string} $align - Alignment to use.
247
+
248
+ @output An appropriate justify-content value.
249
+ */
250
+ @mixin menu-bar-align($align: left) {
251
+ $options: (
252
+ left: flex-start,
253
+ right: flex-end,
254
+ center: center,
255
+ justify: space-between,
256
+ spaced: space-around,
257
+ );
258
+ justify-content: map-get($options, $align);
259
+ }
260
+
261
+ /*
262
+ CSS output
263
+ */
264
+ @include exports(menu-bar) {
265
+ .menu-bar {
266
+ @extend %menu-bar;
267
+ @include menu-bar-style;
268
+
269
+ // Positioning
270
+ &, &.horizontal { @include menu-bar-layout(horizontal); }
271
+ &.vertical { @include menu-bar-layout(vertical); }
272
+
273
+ // Condensed bar
274
+ &.condense {
275
+ > li { flex: 0 0 auto; }
276
+ }
277
+
278
+ // Align Menu Items
279
+ &.align-right { @include menu-bar-align(right); }
280
+ &.align-center { @include menu-bar-align(center); }
281
+ &.align-justify { @include menu-bar-align(justify); }
282
+ &.align-spaced { @include menu-bar-align(spaced); }
283
+
284
+ @each $size in $breakpoint-classes {
285
+ @include breakpoint($size) {
286
+ &.#{$size}-condense { li { flex: 0 0 auto; } }
287
+ &.#{$size}-expand { li { flex: 1 0 auto; } }
288
+
289
+ // Responsive Alignment
290
+ &.#{$size}-align-left { @include menu-bar-align(left); }
291
+ &.#{$size}-align-right { @include menu-bar-align(right); }
292
+ &.#{$size}-align-center { @include menu-bar-align(center); }
293
+ &.#{$size}-align-justify { @include menu-bar-align(justify); }
294
+ &.#{$size}-align-spaced { @include menu-bar-align(spaced); }
295
+ }
296
+ }
297
+
298
+ // Responsive positioning
299
+ @each $size in $breakpoint-classes {
300
+ @include breakpoint($size) {
301
+ &.#{$size}-horizontal {
302
+ @include menu-bar-layout(horizontal);
303
+ }
304
+ &.#{$size}-vertical {
305
+ @include menu-bar-layout(vertical);
306
+ }
307
+ }
308
+ }
309
+
310
+ // Icon positioning
311
+ &, &.icon-top { @include menu-bar-icons(top); }
312
+ &.icon-right { @include menu-bar-icons(right); }
313
+ &.icon-bottom { @include menu-bar-icons(bottom); }
314
+ &.icon-left { @include menu-bar-icons(left); }
315
+ @each $size in $breakpoint-classes {
316
+ @each $pos in (top, right, bottom, left) {
317
+ @include breakpoint($size) {
318
+ &.#{$size}-icon-#{$pos} { @include menu-bar-icons($pos); }
319
+ }
320
+ }
321
+ }
322
+
323
+ // Labels
324
+ &.label-side { @include menu-bar-labels(right, center); }
325
+ &.label-corner { @include menu-bar-labels(right, top); }
326
+
327
+ // Coloring
328
+ &.primary {
329
+ @include menu-bar-style($primary-color, $autocolor: true);
330
+ }
331
+ &.dark {
332
+ @include menu-bar-style($dark-color, $autocolor: true);
333
+ }
334
+
335
+ // Title
336
+ > li.title {
337
+ padding: $menubar-item-padding;
338
+ cursor: default;
339
+ font-weight: bold;
340
+ }
341
+ }
342
+
343
+ // Menu groups
344
+ .menu-group {
345
+ display: flex;
346
+ align-items: center;
347
+ justify-content: space-between;
348
+ flex-wrap: wrap;
349
+
350
+ @include breakpoint(medium) {
351
+ flex-wrap: nowrap;
352
+ }
353
+
354
+ > .menu-group-left, > .menu-group-right {
355
+ flex: 1 1 100%;
356
+
357
+ @include breakpoint(medium) {
358
+ flex: 0 0 auto;
359
+ }
360
+ }
361
+
362
+ // Menu bar is condensed
363
+ .menu-bar {
364
+ > li { flex: 0 0 auto; }
365
+ margin: 0;
366
+ }
367
+
368
+ // Coloring class cascades down to the menu bar
369
+ &.primary {
370
+ background-color: $primary-color;
371
+ .menu-bar {
372
+ @include menu-bar-style($primary-color, $autocolor: true);
373
+ }
374
+ }
375
+ &.dark {
376
+ background-color: $dark-color;
377
+ .menu-bar {
378
+ @include menu-bar-style($dark-color, $autocolor: true);
379
+ }
380
+ }
381
+ }
382
+ }