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,72 @@
1
+ /*
2
+ ACCORDION
3
+ ---------
4
+
5
+ The trusy accordion allows you to create a series of vertical tabs.
6
+ */
7
+
8
+ /// @Foundation.settings
9
+ // Accordion
10
+ $accordion-border: 1px solid $gray-dark !default;
11
+
12
+ $accordion-title-background: $gray-light !default;
13
+ $accordion-title-background-hover: smartscale($accordion-title-background, 5%) !default;
14
+ $accordion-title-background-active: smartscale($accordion-title-background, 3%) !default;
15
+ $accordion-title-color: isitlight($accordion-title-background) !default;
16
+ $accordion-title-color-active: isitlight($accordion-title-background) !default;
17
+
18
+ $accordion-title-padding: $global-padding !default;
19
+ $accordion-content-padding: $global-padding !default;
20
+ ///
21
+
22
+ @mixin accordion-title(
23
+ $background: $accordion-title-background,
24
+ $background-hover: $accordion-title-background-hover,
25
+ $background-active: $accordion-title-background-active,
26
+ $color: $accordion-title-color,
27
+ $color-active: $accordion-title-color-active,
28
+ $padding: $accordion-title-padding
29
+ ) {
30
+ padding: $padding;
31
+ background: $background;
32
+ color: $color;
33
+ line-height: 1;
34
+ cursor: pointer;
35
+
36
+ &:hover {
37
+ background: $background-hover;
38
+ }
39
+
40
+ .is-active > & {
41
+ background: $background-active;
42
+ color: $color-active;
43
+ }
44
+ }
45
+
46
+ @mixin accordion-content(
47
+ $padding: $accordion-content-padding
48
+ ) {
49
+ padding: $padding;
50
+
51
+ display: none;
52
+ .is-active > & {
53
+ display: block;
54
+ }
55
+ }
56
+
57
+ @include exports(accordion) {
58
+ .accordion {
59
+ @if hasvalue($accordion-border) {
60
+ border: $accordion-border;
61
+ }
62
+ }
63
+ .accordion-item {
64
+
65
+ }
66
+ .accordion-title {
67
+ @include accordion-title;
68
+ }
69
+ .accordion-content {
70
+ @include accordion-content;
71
+ }
72
+ }
@@ -0,0 +1,265 @@
1
+ /*
2
+ ACTION SHEET
3
+ ------------
4
+
5
+ A dropdown menu that sticks to the bottom of the screen on small devices, and becomes a dropdown menu on larger devices.
6
+ */
7
+
8
+ /// @Foundation.settings
9
+ // Action Sheet
10
+ $actionsheet-background: white !default;
11
+ $actionsheet-border-color: #ccc !default;
12
+ $actionsheet-animate: transform opacity !default;
13
+ $actionsheet-animation-speed: 0.25s !default;
14
+ $actionsheet-width: 300px !default;
15
+ $actionsheet-radius: 4px !default;
16
+ $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25) !default;
17
+ $actionsheet-padding: $global-padding !default;
18
+ $actionsheet-tail-size: 10px !default;
19
+
20
+ $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25) !default;
21
+
22
+ $actionsheet-link-color: #000 !default;
23
+ $actionsheet-link-background-hover: smartscale($actionsheet-background) !default;
24
+ ///
25
+
26
+ /*
27
+ Styles for the list inside an action sheet.
28
+ Don't include this mixin if you want to build custom controls inside the sheet.
29
+ */
30
+ @mixin action-sheet-menu(
31
+ $padding: $actionsheet-padding,
32
+ $color: $actionsheet-link-color,
33
+ $border-color: $actionsheet-border-color,
34
+ $background-hover: $actionsheet-link-background-hover
35
+ ) {
36
+ // Menu container
37
+ ul {
38
+ margin: -($padding);
39
+ margin-top: 0;
40
+ list-style-type: none;
41
+ user-select: none;
42
+
43
+ // If the menu has no content above it
44
+ &:first-child {
45
+ margin-top: -$padding;
46
+
47
+ li:first-child {
48
+ border-top: 0;
49
+ }
50
+ }
51
+
52
+ // Menu links
53
+ a {
54
+ display: block;
55
+ padding: $padding * 0.8;
56
+ line-height: 1;
57
+ color: $color;
58
+ border-top: 1px solid $border-color;
59
+
60
+ &:hover {
61
+ color: $color;
62
+ background: $background-hover;
63
+ }
64
+ }
65
+
66
+ .alert > a {
67
+ color: $alert-color;
68
+ }
69
+ .disabled > a {
70
+ pointer-events: none;
71
+ color: #999;
72
+ }
73
+ }
74
+ }
75
+
76
+ /*
77
+ Styles for the action sheet container. Action sheets pin to the top or bottom of the screen.
78
+ */
79
+ @mixin action-sheet(
80
+ $position: bottom,
81
+ $shadow: $actionsheet-shadow,
82
+ $animate: $actionsheet-animate,
83
+ $animation-speed: $actionsheet-animation-speed,
84
+ $padding: $actionsheet-padding,
85
+ $background: $actionsheet-background
86
+ ) {
87
+ position: fixed;
88
+ left: 0;
89
+ z-index: 1000;
90
+ width: 100%;
91
+ padding: $padding;
92
+ background: $background;
93
+ text-align: center;
94
+ transition-property: $animate;
95
+ transition-duration: $animation-speed;
96
+ transition-timing-function: ease-out;
97
+
98
+ @if hasvalue($shadow) {
99
+ box-shadow: $shadow;
100
+ }
101
+
102
+ // Positions
103
+ @if $position == bottom {
104
+ bottom: 0;
105
+ transform: translateY(100%);
106
+
107
+ &.is-active {
108
+ transform: translateY(0%);
109
+ }
110
+ }
111
+ // These two don't quite work as planned yet
112
+ @else if $position == top {
113
+ top: 0;
114
+ transform: translateY(-100%);
115
+
116
+ &.is-active {
117
+ transform: translateY(0%);
118
+ }
119
+ }
120
+ }
121
+
122
+ @mixin popup-menu(
123
+ $position: bottom,
124
+ $background: $actionsheet-background,
125
+ $width: $actionsheet-width,
126
+ $radius: $actionsheet-radius,
127
+ $shadow: $actionsheet-popup-shadow,
128
+ $tail-size: $actionsheet-tail-size
129
+ ) {
130
+ /*
131
+ Core styles
132
+ */
133
+ position: absolute;
134
+ left: 50%;
135
+ width: $width;
136
+ border-radius: $radius;
137
+ opacity: 0;
138
+ pointer-events: none;
139
+
140
+ /*
141
+ Menu shadow
142
+ */
143
+ @if hasvalue($shadow) {
144
+ box-shadow: $shadow;
145
+ }
146
+
147
+ /*
148
+ Active state
149
+ */
150
+ &.is-active {
151
+ opacity: 1;
152
+ pointer-events: auto;
153
+ }
154
+
155
+ /*
156
+ Menu tail
157
+ */
158
+ &::before, &::after {
159
+ content: '';
160
+ position: absolute;
161
+ left: 50%;
162
+ display: block;
163
+ width: 0px;
164
+ height: 0px;
165
+ border-left: $tail-size solid transparent;
166
+ border-right: $tail-size solid transparent;
167
+ margin-left: -($tail-size);
168
+ }
169
+
170
+ /*
171
+ Positioning
172
+ */
173
+ @if $position == bottom {
174
+ top: auto;
175
+ bottom: 0;
176
+ transform: translateX(-50%) translateY(110%);
177
+ &.is-active {
178
+ transform: translateX(-50%) translateY(100%);
179
+ }
180
+
181
+ &::before, &::after {
182
+ top: -($tail-size);
183
+ bottom: auto;
184
+ border-top: 0;
185
+ border-bottom: $tail-size solid $background;
186
+ }
187
+ &::before {
188
+ top: -($tail-size + 2);
189
+ border-bottom-color: rgba(black, 0.15);
190
+ }
191
+
192
+ }
193
+ @else if $position == top {
194
+ top: 0;
195
+ bottom: auto;
196
+ transform: translateX(-50%) translateY(-120%);
197
+ &.is-active {
198
+ transform: translateX(-50%) translateY(-110%);
199
+ }
200
+
201
+ &::before, &::after {
202
+ top: auto;
203
+ bottom: -($tail-size);
204
+ border-top: $tail-size solid $background;
205
+ border-bottom: 0;
206
+ }
207
+ &::before {
208
+ bottom: -($tail-size + 2);
209
+ border-top-color: rgba(black, 0.15);
210
+ }
211
+ }
212
+ }
213
+
214
+ @include exports(action-sheet) {
215
+ .action-sheet-container {
216
+ position: relative;
217
+ display: inline-block;
218
+
219
+ .button {
220
+ margin-left: 0;
221
+ margin-right: 0;
222
+ }
223
+ }
224
+ .action-sheet {
225
+ @include action-sheet;
226
+ @include action-sheet-menu;
227
+
228
+ @include breakpoint(medium) {
229
+ @include popup-menu;
230
+
231
+ &.top {
232
+ @include popup-menu(top);
233
+ }
234
+ }
235
+
236
+ &.primary {
237
+ background: $primary-color;
238
+ color: isitlight($primary-color);
239
+ border: 0;
240
+ &::before { display: none; }
241
+ &::before, &::after { border-top-color: $primary-color; }
242
+ &.top::before, &.top::after { border-bottom-color: $primary-color; }
243
+
244
+ @include action-sheet-menu(
245
+ $color: isitlight($primary-color),
246
+ $border-color: smartscale($primary-color, 10%),
247
+ $background-hover: smartscale($primary-color)
248
+ );
249
+ }
250
+ &.dark {
251
+ background: $dark-color;
252
+ color: isitlight($dark-color);
253
+ border: 0;
254
+ &::before { display: none; }
255
+ &::before, &::after { border-top-color: $dark-color; }
256
+ &.top::before, &.top::after { border-bottom-color: $dark-color; }
257
+
258
+ @include action-sheet-menu(
259
+ $color: isitlight($dark-color),
260
+ $border-color: smartscale($dark-color, 10%),
261
+ $background-hover: smartscale($dark-color)
262
+ );
263
+ }
264
+ }
265
+ }
@@ -0,0 +1,360 @@
1
+ /*
2
+ BLOCK LIST
3
+ ----------
4
+
5
+ A generic list component that can accomodate a variety of styles and controls.
6
+
7
+ Features:
8
+ - Icons
9
+ - Labels
10
+ - Chevrons
11
+ - Text fields
12
+ - Dropdown menus
13
+ - Checkbox/radio inputs
14
+ */
15
+
16
+ /// @Foundation.settings
17
+ // Block List
18
+ $blocklist-background: #fff !default;
19
+ $blocklist-fullbleed: true !default;
20
+ $blocklist-fontsize: 1rem !default;
21
+
22
+ $blocklist-item-padding: 0.8rem 1rem !default;
23
+ $blocklist-item-color: isitlight($blocklist-background, #000, #fff) !default;
24
+ $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%) !default;
25
+ $blocklist-item-color-disabled: #999 !default;
26
+ $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%) !default;
27
+
28
+ $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%) !default;
29
+ $blocklist-item-icon-size: 0.8 !default;
30
+
31
+ $blocklist-header-fontsize: 0.8em !default;
32
+ $blocklist-header-color: smartscale($blocklist-item-color, 40%) !default;
33
+ $blocklist-header-uppercase: true;
34
+
35
+ $blocklist-check-icons: true !default;
36
+ ///
37
+
38
+ /*
39
+ Adds styles for a block list container.
40
+
41
+ $font-size: global font size for the list.
42
+ $full-bleed: when "true", the margins of the list invert to line it up with the edge of a padded element.
43
+ */
44
+ %block-list-container {
45
+ margin-bottom: 1rem;
46
+ line-height: 1;
47
+ user-select: none;
48
+
49
+ &, ul {
50
+ list-style-type: none;
51
+ }
52
+ ul {
53
+ margin-left: 0;
54
+ }
55
+ }
56
+ @mixin block-list-container(
57
+ $font-size: $blocklist-fontsize,
58
+ $full-bleed: $blocklist-fullbleed
59
+ ) {
60
+ @extend %block-list-container;
61
+ font-size: $font-size;
62
+
63
+ @if $full-bleed {
64
+ margin-left: -$global-padding;
65
+ margin-right: -$global-padding;
66
+ }
67
+ }
68
+
69
+ /*
70
+ Styles block list headers on the selector you include this mixin in (normally a <header>).
71
+
72
+ $color - color of the header.
73
+ $font-size - font size of the header.
74
+ $offset - left margin to add to the header, to line it up with the list items.
75
+ */
76
+ @mixin block-list-header(
77
+ $color: $blocklist-header-color,
78
+ $font-size: $blocklist-header-fontsize,
79
+ $uppercase: $blocklist-header-uppercase,
80
+ $offset: get-side($blocklist-item-padding, left)
81
+ ) {
82
+ margin-top: 1em;
83
+ color: $color;
84
+ font-weight: bold;
85
+ margin-bottom: 0.5em;
86
+ margin-left: $offset;
87
+ font-size: $font-size;
88
+ cursor: default;
89
+ @if $uppercase { text-transform: uppercase; }
90
+ }
91
+
92
+ /*
93
+ Styles block list items on the selector you include this mixin in (normally an <li>).
94
+
95
+ $color - color of items.
96
+ $color-hover - color of items on hover.
97
+ $background - background of items.
98
+ $background-hover - background of items on hover.
99
+ $border - border between items.
100
+ $padding - padding on items.
101
+ */
102
+ @mixin block-list-item(
103
+ $color: $blocklist-item-color,
104
+ $color-hover: $blocklist-item-color,
105
+ $color-disabled: $blocklist-item-color-disabled,
106
+ $background: transparent,
107
+ $background-hover: $blocklist-item-background-hover,
108
+ $border: $blocklist-item-border,
109
+ $padding: $blocklist-item-padding
110
+ ) {
111
+ position: relative;
112
+
113
+ @if hasvalue($border) {
114
+ border-bottom: $border;
115
+ &:first-child {
116
+ border-top: $border;
117
+ }
118
+ }
119
+
120
+ // Inner elements share the same basic styles
121
+ > a, > span, > label {
122
+ display: block;
123
+ padding: $padding;
124
+ padding-left: get-side($padding, left);
125
+ color: $color;
126
+ line-height: 1;
127
+ }
128
+ > span {
129
+ cursor: default;
130
+ }
131
+ > a, > label {
132
+ cursor: pointer;
133
+
134
+ &:hover {
135
+ color: $color-hover;
136
+ }
137
+ }
138
+ > a, > label, select {
139
+ &:hover {
140
+ background: $background-hover;
141
+ }
142
+ }
143
+
144
+ // Coloring classes
145
+ &.caution > a {
146
+ &, &:hover { color: $alert-color; }
147
+ }
148
+ &.disabled > a {
149
+ cursor: default;
150
+ &, &:hover { color: $color-disabled; }
151
+ &:hover { background: transparent; }
152
+ }
153
+ }
154
+
155
+ /*
156
+ Adds label styles to the class you include this mixin in.
157
+
158
+ $color - color of the label.
159
+ $left-class - extra class to flip the orientation of the label.
160
+ $left-padding - left padding to use for left-hand labels.
161
+ */
162
+ @mixin block-list-label(
163
+ $color: $blocklist-item-label-color,
164
+ $left-class: 'left',
165
+ $left-padding: get-side($blocklist-item-padding, top)
166
+ ) {
167
+ display: inline-block;
168
+ float: right;
169
+ padding: 0;
170
+ color: $color;
171
+ pointer-events: none;
172
+
173
+ &.#{$left-class} {
174
+ margin-left: $left-padding;
175
+ float: none;
176
+ }
177
+ }
178
+
179
+ /*
180
+ Adds support for chevrons, which appear on the right-hand side of the item.
181
+
182
+ $color - color of the chevron.
183
+ $padding - include the global padding of block list items here.
184
+ */
185
+ @mixin block-list-chevron(
186
+ $color: $blocklist-header-color,
187
+ $padding: $blocklist-item-padding,
188
+ $label-class: 'block-list-label'
189
+ ) {
190
+ // Chevrons are a pseudo-element
191
+ &::after {
192
+ content: '\203A';
193
+ display: block;
194
+ position: absolute;
195
+ right: get-side($padding, right);
196
+ top: 50%;
197
+ transform: translateY(-50%);
198
+ font-weight: bold;
199
+ color: $color;
200
+ font-size: 2em;
201
+ }
202
+
203
+ // Labels next to links move over to make room for the chevron
204
+ // TODO: this selector needs to be customiable, but adding a setting just for it might be weird
205
+ .#{$label-class} {
206
+ padding-right: get-side($padding, right) * 1.5;
207
+ }
208
+ }
209
+
210
+ /*
211
+ Adds icon styles. Call this mixin on a block list container.
212
+
213
+ $size - size of the icon as a percentage (decimal) of the list item's height.
214
+ $item-selector - overrides the 'li' selector used for list items.
215
+ */
216
+ @mixin block-list-icons(
217
+ $size: $blocklist-item-icon-size,
218
+ $item-selector: 'li'
219
+ ) {
220
+ // PH - need a better solution
221
+ $item-height:
222
+ $blocklist-fontsize
223
+ + get-side($blocklist-item-padding, top)
224
+ + get-side($blocklist-item-padding, top);
225
+
226
+ $icon-height: $item-height * $blocklist-item-icon-size;
227
+ $icon-offset: ($item-height - $icon-height) / 2;
228
+
229
+ #{$item-selector} {
230
+ > a, > span, > label {
231
+ padding-left: (get-side($blocklist-item-padding, left) * 2) + $blocklist-item-icon-size;
232
+ }
233
+ img, .iconic {
234
+ position: absolute;
235
+ top: $icon-offset;
236
+ left: $icon-offset;
237
+ width: $icon-height;
238
+ height: $icon-height;
239
+ border-radius: 8px;
240
+ pointer-events: none;
241
+ }
242
+ }
243
+ }
244
+
245
+ /*
246
+ Adds support for text fields, select menus, and checkbox/radio groups in block lists.
247
+
248
+ $color - color of select menu arrow.
249
+ $background-hover - color of select menu when hovered over.
250
+ $padding - include the global padding of block list items here.
251
+ $dropdown-class - class to use for list items that contain a dropdown.
252
+ $switch-class - class to use for switches inside list items.
253
+ */
254
+ @mixin block-list-inputs(
255
+ $color: $blocklist-item-color,
256
+ $background: $blocklist-background,
257
+ $background-hover: $blocklist-item-background-hover,
258
+ $padding: $blocklist-item-padding,
259
+ $icons: $blocklist-check-icons,
260
+ $dropdown-class: 'with-dropdown',
261
+ $switch-class: 'switch'
262
+ ) {
263
+ // Text fields
264
+ #{$text-input-selectors} {
265
+ $top-padding: get-side($padding, top) - ($blocklist-fontsize * 0.2);
266
+ $bottom-padding: get-side($padding, bottom) - ($blocklist-fontsize * 0.2);
267
+ $left-padding: get-side($padding, left);
268
+ $right-padding: get-side($padding, right);
269
+ $height: ($blocklist-fontsize * 1.4 + $top-padding + $bottom-padding);
270
+
271
+ overflow: visible;
272
+ box-sizing: border-box;
273
+ margin: 0;
274
+ border: 0;
275
+ height: $height;
276
+ padding: $top-padding $right-padding $bottom-padding $left-padding;
277
+ color: inherit;
278
+ font-size: $blocklist-fontsize;
279
+ -webkit-font-smoothing: antialiased;
280
+ vertical-align: middle;
281
+
282
+ &:hover, &:focus {
283
+ border: 0;
284
+ }
285
+ }
286
+
287
+ // Multiple select
288
+ li > input[type="checkbox"], li > input[type="radio"] {
289
+ position: absolute;
290
+ left: -9999px;
291
+
292
+ & + label {
293
+ display: block;
294
+ font-size: $blocklist-fontsize;
295
+ margin: 0;
296
+ }
297
+
298
+ @if $icons == true {
299
+ &:checked + label {
300
+ &::before {
301
+ @include image-checkmark($color);
302
+ content: '';
303
+ background-size: 100% 100%;
304
+ width: 1.5em;
305
+ height: 1.5em;
306
+ color: $primary-color;
307
+ float: right;
308
+ pointer-events: none;
309
+ margin-top: -0.25em;
310
+ }
311
+ }
312
+ }
313
+ }
314
+
315
+ // Dropdowns
316
+ .#{$dropdown-class} {
317
+ color: inherit;
318
+
319
+ select {
320
+ // Reset pesky <select> styles
321
+ -webkit-appearance: none;
322
+ -moz-appearance: none;
323
+ outline: 0;
324
+ background: 0;
325
+ border: 0;
326
+ height: auto;
327
+ padding: $padding;
328
+ margin: 0;
329
+ font-size: 1em; // Same size as its parent
330
+ line-height: 1;
331
+ color: inherit;
332
+ background-color: transparent;
333
+ }
334
+ }
335
+
336
+ // Switches
337
+ .#{$switch-class} {
338
+ position: absolute;
339
+ top: 50%;
340
+ right: get-side($padding, right);
341
+ transform: translateY(-50%);
342
+ }
343
+ }
344
+
345
+ @include exports(block-list) {
346
+ .block-list {
347
+ @include block-list-container;
348
+ @include block-list-inputs;
349
+
350
+ &.with-icons { @include block-list-icons; }
351
+ header { @include block-list-header; }
352
+
353
+ li {
354
+ @include block-list-item;
355
+
356
+ &.with-chevron { @include block-list-chevron; }
357
+ .block-list-label { @include block-list-label; }
358
+ }
359
+ }
360
+ }