foundation-scss 6.3.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 (90) hide show
  1. checksums.yaml +7 -0
  2. data/_vendor/normalize-scss/sass/_normalize.scss +3 -0
  3. data/_vendor/normalize-scss/sass/normalize/_import-now.scss +11 -0
  4. data/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss +676 -0
  5. data/_vendor/normalize-scss/sass/normalize/_variables.scss +36 -0
  6. data/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss +61 -0
  7. data/_vendor/sassy-lists/stylesheets/functions/_purge.scss +38 -0
  8. data/_vendor/sassy-lists/stylesheets/functions/_remove.scss +31 -0
  9. data/_vendor/sassy-lists/stylesheets/functions/_replace.scss +46 -0
  10. data/_vendor/sassy-lists/stylesheets/functions/_to-list.scss +27 -0
  11. data/_vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss +25 -0
  12. data/_vendor/sassy-lists/stylesheets/helpers/_true.scss +13 -0
  13. data/foundation-scss.gemspec +9 -0
  14. data/lib/foundation/scss/in/sass_path.rb +6 -0
  15. data/scss/_global.scss +219 -0
  16. data/scss/components/_accordion-menu.scss +36 -0
  17. data/scss/components/_accordion.scss +150 -0
  18. data/scss/components/_badge.scss +63 -0
  19. data/scss/components/_breadcrumbs.scss +100 -0
  20. data/scss/components/_button-group.scss +253 -0
  21. data/scss/components/_button.scss +332 -0
  22. data/scss/components/_callout.scss +106 -0
  23. data/scss/components/_card.scss +121 -0
  24. data/scss/components/_close-button.scss +102 -0
  25. data/scss/components/_drilldown.scss +93 -0
  26. data/scss/components/_dropdown-menu.scss +226 -0
  27. data/scss/components/_dropdown.scss +72 -0
  28. data/scss/components/_flex-video.scss +1 -0
  29. data/scss/components/_flex.scss +34 -0
  30. data/scss/components/_float.scss +27 -0
  31. data/scss/components/_label.scss +64 -0
  32. data/scss/components/_media-object.scss +114 -0
  33. data/scss/components/_menu-icon.scss +9 -0
  34. data/scss/components/_menu.scss +376 -0
  35. data/scss/components/_off-canvas.scss +329 -0
  36. data/scss/components/_orbit.scss +196 -0
  37. data/scss/components/_pagination.scss +193 -0
  38. data/scss/components/_progress-bar.scss +64 -0
  39. data/scss/components/_responsive-embed.scss +70 -0
  40. data/scss/components/_reveal.scss +178 -0
  41. data/scss/components/_slider.scss +138 -0
  42. data/scss/components/_sticky.scss +38 -0
  43. data/scss/components/_switch.scss +247 -0
  44. data/scss/components/_table.scss +329 -0
  45. data/scss/components/_tabs.scss +196 -0
  46. data/scss/components/_thumbnail.scss +67 -0
  47. data/scss/components/_title-bar.scss +84 -0
  48. data/scss/components/_tooltip.scss +107 -0
  49. data/scss/components/_top-bar.scss +173 -0
  50. data/scss/components/_visibility.scss +132 -0
  51. data/scss/forms/_checkbox.scss +41 -0
  52. data/scss/forms/_error.scss +88 -0
  53. data/scss/forms/_fieldset.scss +54 -0
  54. data/scss/forms/_forms.scss +34 -0
  55. data/scss/forms/_help-text.scss +30 -0
  56. data/scss/forms/_input-group.scss +135 -0
  57. data/scss/forms/_label.scss +50 -0
  58. data/scss/forms/_meter.scss +110 -0
  59. data/scss/forms/_progress.scss +94 -0
  60. data/scss/forms/_range.scss +149 -0
  61. data/scss/forms/_select.scss +85 -0
  62. data/scss/forms/_text.scss +170 -0
  63. data/scss/foundation.scss +118 -0
  64. data/scss/grid/_classes.scss +176 -0
  65. data/scss/grid/_column.scss +112 -0
  66. data/scss/grid/_flex-grid.scss +312 -0
  67. data/scss/grid/_grid.scss +48 -0
  68. data/scss/grid/_gutter.scss +82 -0
  69. data/scss/grid/_layout.scss +76 -0
  70. data/scss/grid/_position.scss +76 -0
  71. data/scss/grid/_row.scss +99 -0
  72. data/scss/grid/_size.scss +24 -0
  73. data/scss/settings/_settings.scss +620 -0
  74. data/scss/typography/_alignment.scss +22 -0
  75. data/scss/typography/_base.scss +509 -0
  76. data/scss/typography/_helpers.scss +78 -0
  77. data/scss/typography/_print.scss +86 -0
  78. data/scss/typography/_typography.scss +26 -0
  79. data/scss/util/_breakpoint.scss +281 -0
  80. data/scss/util/_color.scss +126 -0
  81. data/scss/util/_direction.scss +31 -0
  82. data/scss/util/_flex.scss +85 -0
  83. data/scss/util/_math.scss +72 -0
  84. data/scss/util/_mixins.scss +276 -0
  85. data/scss/util/_selector.scss +41 -0
  86. data/scss/util/_typography.scss +26 -0
  87. data/scss/util/_unit.scss +152 -0
  88. data/scss/util/_util.scss +14 -0
  89. data/scss/util/_value.scss +160 -0
  90. metadata +144 -0
@@ -0,0 +1,36 @@
1
+ ////
2
+ /// @group accordion-menu
3
+ ////
4
+
5
+ /// Sets if accordion menus have the default arrow styles.
6
+ /// @type Boolean
7
+ $accordionmenu-arrows: true !default;
8
+
9
+ /// Sets accordion menu arrow color if arrow is used.
10
+ /// @type Color
11
+ $accordionmenu-arrow-color: $primary-color !default;
12
+
13
+ /// Sets accordion menu arrow size if arrow is used.
14
+ /// @type Length
15
+ $accordionmenu-arrow-size: 6px !default;
16
+
17
+ @mixin foundation-accordion-menu {
18
+ @if $accordionmenu-arrows {
19
+ .is-accordion-submenu-parent > a {
20
+ position: relative;
21
+
22
+ &::after {
23
+ @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
24
+ position: absolute;
25
+ top: 50%;
26
+ margin-top: -1 * ($accordionmenu-arrow-size / 2);
27
+ #{$global-right}: 1rem;
28
+ }
29
+ }
30
+
31
+ .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
32
+ transform: rotate(180deg);
33
+ transform-origin: 50% 50%;
34
+ }
35
+ }
36
+ }
@@ -0,0 +1,150 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group accordion
7
+ ////
8
+
9
+ /// Default background color of an accordion group.
10
+ /// @type Color
11
+ $accordion-background: $white !default;
12
+
13
+ /// If `true`, adds plus and minus icons to the side of each accordion title.
14
+ /// @type Boolean
15
+ $accordion-plusminus: true !default;
16
+
17
+ /// Font size of accordion titles.
18
+ /// @type Number
19
+ $accordion-title-font-size: rem-calc(12) !default;
20
+
21
+ /// Default text color for items in a Menu.
22
+ /// @type Color
23
+ $accordion-item-color: $primary-color !default;
24
+
25
+ /// Default background color on hover for items in a Menu.
26
+ /// @type Color
27
+ $accordion-item-background-hover: $light-gray !default;
28
+
29
+ /// Default padding of an accordion item.
30
+ /// @type Number | List
31
+ $accordion-item-padding: 1.25rem 1rem !default;
32
+
33
+ /// Default background color of tab content.
34
+ /// @type Color
35
+ $accordion-content-background: $white !default;
36
+
37
+ /// Default border color of tab content.
38
+ /// @type Color
39
+ $accordion-content-border: 1px solid $light-gray !default;
40
+
41
+ /// Default text color of tab content.
42
+ /// @type Color
43
+ $accordion-content-color: $body-font-color !default;
44
+
45
+ /// Default padding for tab content.
46
+ /// @type Number | List
47
+ $accordion-content-padding: 1rem !default;
48
+
49
+ /// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
50
+ @mixin accordion-container (
51
+ $background: $accordion-background
52
+ ) {
53
+ margin-#{$global-left}: 0;
54
+ background: $background;
55
+ list-style-type: none;
56
+ }
57
+
58
+ /// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
59
+ @mixin accordion-item {
60
+ &:first-child > :first-child {
61
+ border-radius: $global-radius $global-radius 0 0;
62
+ }
63
+
64
+ &:last-child > :last-child {
65
+ border-radius: 0 0 $global-radius $global-radius;
66
+ }
67
+ }
68
+
69
+ /// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
70
+ @mixin accordion-title (
71
+ $padding: $accordion-item-padding,
72
+ $font-size: $accordion-title-font-size,
73
+ $color: $accordion-item-color,
74
+ $border: $accordion-content-border,
75
+ $background-hover: $accordion-item-background-hover
76
+ ) {
77
+ position: relative;
78
+ display: block;
79
+ padding: $padding;
80
+
81
+ border: $border;
82
+ border-bottom: 0;
83
+
84
+ font-size: $font-size;
85
+ line-height: 1;
86
+ color: $color;
87
+
88
+ :last-child:not(.is-active) > & {
89
+ border-bottom: $border;
90
+ border-radius: 0 0 $global-radius $global-radius;
91
+ }
92
+
93
+ &:hover,
94
+ &:focus {
95
+ background-color: $background-hover;
96
+ }
97
+
98
+ @if $accordion-plusminus {
99
+ &::before {
100
+ position: absolute;
101
+ top: 50%;
102
+ #{$global-right}: 1rem;
103
+ margin-top: -0.5rem;
104
+ content: '+';
105
+ }
106
+
107
+ .is-active > &::before {
108
+ content: '\2013';
109
+ }
110
+ }
111
+ }
112
+
113
+ /// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
114
+ @mixin accordion-content (
115
+ $padding: $accordion-content-padding,
116
+ $border: $accordion-content-border,
117
+ $background: $accordion-content-background,
118
+ $color: $accordion-content-color
119
+ ) {
120
+ display: none;
121
+ padding: $padding;
122
+
123
+ border: $border;
124
+ border-bottom: 0;
125
+ background-color: $background;
126
+
127
+ color: $color;
128
+
129
+ :last-child > &:last-child {
130
+ border-bottom: $border;
131
+ }
132
+ }
133
+
134
+ @mixin foundation-accordion {
135
+ .accordion {
136
+ @include accordion-container;
137
+ }
138
+
139
+ .accordion-item {
140
+ @include accordion-item;
141
+ }
142
+
143
+ .accordion-title {
144
+ @include accordion-title;
145
+ }
146
+
147
+ .accordion-content {
148
+ @include accordion-content;
149
+ }
150
+ }
@@ -0,0 +1,63 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group badge
7
+ ////
8
+
9
+ /// Default background color for badges.
10
+ /// @type Color
11
+ $badge-background: $primary-color !default;
12
+
13
+ /// Default text color for badges.
14
+ /// @type Color
15
+ $badge-color: $white !default;
16
+
17
+ /// Alternate text color for badges.
18
+ /// @type Color
19
+ $badge-color-alt: $black !default;
20
+
21
+ /// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
22
+ /// @type Map
23
+ $badge-palette: $foundation-palette !default;
24
+
25
+ /// Default padding inside badges.
26
+ /// @type Number
27
+ $badge-padding: 0.3em !default;
28
+
29
+ /// Minimum width of a badge.
30
+ /// @type Number
31
+ $badge-minwidth: 2.1em !default;
32
+
33
+ /// Default font size for badges.
34
+ /// @type Number
35
+ $badge-font-size: 0.6rem !default;
36
+
37
+ /// Generates the base styles for a badge.
38
+ @mixin badge {
39
+ display: inline-block;
40
+ min-width: $badge-minwidth;
41
+ padding: $badge-padding;
42
+
43
+ border-radius: 50%;
44
+
45
+ font-size: $badge-font-size;
46
+ text-align: center;
47
+ }
48
+
49
+ @mixin foundation-badge {
50
+ .badge {
51
+ @include badge;
52
+
53
+ background: $badge-background;
54
+ color: $badge-color;
55
+
56
+ @each $name, $color in $badge-palette {
57
+ &.#{$name} {
58
+ background: $color;
59
+ color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
60
+ }
61
+ }
62
+ }
63
+ }
@@ -0,0 +1,100 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group breadcrumbs
7
+ ////
8
+
9
+ /// Margin around a breadcrumbs container.
10
+ /// @type Number
11
+ $breadcrumbs-margin: 0 0 $global-margin 0 !default;
12
+
13
+ /// Font size of breadcrumb links.
14
+ /// @type Number
15
+ $breadcrumbs-item-font-size: rem-calc(11) !default;
16
+
17
+ /// Color of breadcrumb links.
18
+ /// @type Color
19
+ $breadcrumbs-item-color: $primary-color !default;
20
+
21
+ /// Color of the active breadcrumb link.
22
+ /// @type Color
23
+ $breadcrumbs-item-color-current: $black !default;
24
+
25
+ /// Opacity of disabled breadcrumb links.
26
+ /// @type Number
27
+ $breadcrumbs-item-color-disabled: $medium-gray !default;
28
+
29
+ /// Margin between breadcrumb items.
30
+ /// @type Number
31
+ $breadcrumbs-item-margin: 0.75rem !default;
32
+
33
+ /// If `true`, makes breadcrumb links uppercase.
34
+ /// @type Boolean
35
+ $breadcrumbs-item-uppercase: true !default;
36
+
37
+ /// If `true`, adds a slash between breadcrumb links.
38
+ /// @type Boolean
39
+ $breadcrumbs-item-slash: true !default;
40
+
41
+ /// Color of breadcrumb slash.
42
+ /// @type Color
43
+ $breadcrumbs-item-slash-color: $medium-gray !default;
44
+
45
+ /// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
46
+ @mixin breadcrumbs-container {
47
+ @include clearfix;
48
+ margin: $breadcrumbs-margin;
49
+ list-style: none;
50
+
51
+ // Item wrapper
52
+ li {
53
+ float: #{$global-left};
54
+
55
+ font-size: $breadcrumbs-item-font-size;
56
+ color: $breadcrumbs-item-color-current;
57
+ cursor: default;
58
+
59
+ @if $breadcrumbs-item-uppercase {
60
+ text-transform: uppercase;
61
+ }
62
+
63
+ @if $breadcrumbs-item-slash {
64
+ // Need to escape the backslash
65
+ $slash: if($global-text-direction == 'ltr', '/', '\\');
66
+
67
+ &:not(:last-child)::after {
68
+ position: relative;
69
+ top: 1px;
70
+ margin: 0 $breadcrumbs-item-margin;
71
+ opacity: 1;
72
+ content: $slash;
73
+ color: $breadcrumbs-item-slash-color;
74
+ }
75
+ }
76
+ @else {
77
+ margin-#{$global-right}: $breadcrumbs-item-margin;
78
+ }
79
+ }
80
+
81
+ // Page links
82
+ a {
83
+ color: $breadcrumbs-item-color;
84
+
85
+ &:hover {
86
+ text-decoration: underline;
87
+ }
88
+ }
89
+ }
90
+
91
+ @mixin foundation-breadcrumbs {
92
+ .breadcrumbs {
93
+ @include breadcrumbs-container;
94
+
95
+ .disabled {
96
+ color: $breadcrumbs-item-color-disabled;
97
+ cursor: not-allowed;
98
+ }
99
+ }
100
+ }
@@ -0,0 +1,253 @@
1
+ // Foundation for Sites by ZURB
2
+ // foundation.zurb.com
3
+ // Licensed under MIT Open Source
4
+
5
+ ////
6
+ /// @group button-group
7
+ ////
8
+
9
+ /// Margin for button groups.
10
+ /// @type Number
11
+ $buttongroup-margin: 1rem !default;
12
+
13
+ /// Margin between buttons in a button group.
14
+ /// @type Number
15
+ $buttongroup-spacing: 1px !default;
16
+
17
+ /// Selector for the buttons inside a button group.
18
+ /// @type String
19
+ $buttongroup-child-selector: '.button' !default;
20
+
21
+ /// Maximum number of buttons that can be in an even-width button group.
22
+ /// @type Number
23
+ $buttongroup-expand-max: 6 !default;
24
+
25
+ /// Determines if $button-radius is applied to each button or the button group as a whole. Use $global-radius in _settings.scss to change radius.
26
+ /// @type Boolean
27
+ $buttongroup-radius-on-each: true !default;
28
+
29
+ /// Add styles for a button group container.
30
+ /// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
31
+ /// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
32
+ @mixin button-group(
33
+ $child-selector: $buttongroup-child-selector,
34
+ $spacing: $buttongroup-spacing
35
+ ) {
36
+ @include clearfix;
37
+ margin-bottom: $buttongroup-margin;
38
+
39
+ @if $global-flexbox {
40
+ display: flex;
41
+ flex-wrap: nowrap;
42
+ align-items: stretch;
43
+ }
44
+ @else {
45
+ font-size: 0;
46
+ }
47
+
48
+ #{$child-selector} {
49
+ margin: 0;
50
+ margin-#{$global-right}: $spacing;
51
+ margin-bottom: $spacing;
52
+ font-size: map-get($button-sizes, default);
53
+
54
+ @if $global-flexbox {
55
+ flex: 0 0 auto;
56
+ }
57
+
58
+ &:last-child {
59
+ margin-#{$global-right}: 0;
60
+ }
61
+
62
+ @if not $buttongroup-radius-on-each {
63
+ border-radius: 0;
64
+
65
+ &:first-child {
66
+ border-top-#{$global-left}-radius: $global-radius;
67
+ border-bottom-#{$global-left}-radius: $global-radius;
68
+ }
69
+
70
+ &:last-child {
71
+ border-top-#{$global-right}-radius: $global-radius;
72
+ border-bottom-#{$global-right}-radius: $global-radius;
73
+ }
74
+ }
75
+
76
+ }
77
+ }
78
+
79
+ /// Creates a full-width button group, making each button equal width.
80
+ /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
81
+ /// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
82
+ @mixin button-group-expand(
83
+ $selector: $buttongroup-child-selector,
84
+ $spacing: $buttongroup-spacing,
85
+ $count: null
86
+ ) {
87
+ @if not $global-flexbox {
88
+ margin-#{$global-right}: -$spacing;
89
+
90
+ &::before,
91
+ &::after {
92
+ display: none;
93
+ }
94
+ }
95
+
96
+ #{$selector} {
97
+ @if $global-flexbox {
98
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
99
+ }
100
+ @else {
101
+ // One child
102
+ &:first-child:last-child {
103
+ width: 100%
104
+ }
105
+
106
+ // Two or more childreen
107
+ @for $i from 2 through $buttongroup-expand-max {
108
+ &:first-child:nth-last-child(#{$i}) {
109
+ &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
110
+ display: inline-block;
111
+ width: calc(#{percentage(1 / $i)} - #{$spacing});
112
+ margin-#{$global-right}: $spacing;
113
+
114
+ &:last-child {
115
+ margin-#{$global-right}: $spacing * -$buttongroup-expand-max;
116
+ }
117
+ }
118
+ }
119
+ }
120
+ }
121
+ }
122
+ }
123
+
124
+ /// Stacks the buttons in a button group.
125
+ /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
126
+ @mixin button-group-stack(
127
+ $selector: $buttongroup-child-selector
128
+ ) {
129
+ @if $global-flexbox {
130
+ flex-wrap: wrap;
131
+ }
132
+
133
+ #{$selector} {
134
+ @if $global-flexbox {
135
+ flex: 0 0 100%;
136
+ }
137
+ @else {
138
+ width: 100%;
139
+ }
140
+
141
+ &:last-child {
142
+ margin-bottom: 0;
143
+ }
144
+
145
+
146
+ @if not $buttongroup-radius-on-each {
147
+ border-radius: 0;
148
+
149
+ &:first-child{
150
+ border-top-#{$global-left}-radius: $global-radius;
151
+ border-top-#{$global-right}-radius: $global-radius;
152
+ }
153
+
154
+ &:last-child {
155
+ margin-bottom: 0;
156
+ border-bottom-#{$global-left}-radius: $global-radius;
157
+ border-bottom-#{$global-right}-radius: $global-radius;
158
+ }
159
+ }
160
+
161
+ }
162
+ }
163
+
164
+ /// Un-stacks the buttons in a button group.
165
+ /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
166
+ @mixin button-group-unstack(
167
+ $selector: $buttongroup-child-selector
168
+ ) {
169
+ #{$selector} {
170
+ @if $global-flexbox {
171
+ flex: 1 1 0px; // sass-lint:disable-line zero-unit
172
+ }
173
+ @else {
174
+ width: auto;
175
+ }
176
+ margin-bottom: 0;
177
+
178
+ @if not $buttongroup-radius-on-each {
179
+ &:first-child {
180
+ border-top-#{$global-left}-radius: $global-radius;
181
+ border-top-#{$global-right}-radius: 0;
182
+ border-bottom-#{$global-left}-radius: $global-radius;
183
+ }
184
+
185
+ &:last-child {
186
+ border-top-#{$global-right}-radius: $global-radius;
187
+ border-bottom-#{$global-right}-radius: $global-radius;
188
+ border-bottom-#{$global-left}-radius: 0;
189
+ }
190
+ }
191
+
192
+ }
193
+ }
194
+
195
+ @mixin foundation-button-group {
196
+ .button-group {
197
+ @include button-group;
198
+
199
+ // Sizes
200
+ @each $size, $value in map-remove($button-sizes, default) {
201
+ &.#{$size} #{$buttongroup-child-selector} {
202
+ font-size: $value;
203
+ }
204
+ }
205
+
206
+ // Even-width Group
207
+ &.expanded { @include button-group-expand; }
208
+
209
+ // Colors
210
+ @each $name, $color in $foundation-palette {
211
+ @if $button-fill != hollow {
212
+ &.#{$name} #{$buttongroup-child-selector} {
213
+ @include button-style($color, auto, auto);
214
+ }
215
+ }
216
+ @else {
217
+ &.#{$name} #{$buttongroup-child-selector} {
218
+ @include button-hollow;
219
+ @include button-hollow-style($color);
220
+ }
221
+ }
222
+ }
223
+
224
+ &.stacked,
225
+ &.stacked-for-small,
226
+ &.stacked-for-medium {
227
+ @include button-group-stack;
228
+ }
229
+
230
+ &.stacked-for-small {
231
+ @include breakpoint(medium) {
232
+ @include button-group-unstack;
233
+ }
234
+ }
235
+
236
+ &.stacked-for-medium {
237
+ @include breakpoint(large) {
238
+ @include button-group-unstack;
239
+ }
240
+ }
241
+
242
+ &.stacked-for-small.expanded { // sass-lint:disable-line force-element-nesting
243
+ @include breakpoint(small only) {
244
+ display: block;
245
+
246
+ #{$buttongroup-child-selector} {
247
+ display: block;
248
+ margin-#{$global-right}: 0;
249
+ }
250
+ }
251
+ }
252
+ }
253
+ }