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.
- checksums.yaml +7 -0
- data/_vendor/normalize-scss/sass/_normalize.scss +3 -0
- data/_vendor/normalize-scss/sass/normalize/_import-now.scss +11 -0
- data/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss +676 -0
- data/_vendor/normalize-scss/sass/normalize/_variables.scss +36 -0
- data/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss +61 -0
- data/_vendor/sassy-lists/stylesheets/functions/_purge.scss +38 -0
- data/_vendor/sassy-lists/stylesheets/functions/_remove.scss +31 -0
- data/_vendor/sassy-lists/stylesheets/functions/_replace.scss +46 -0
- data/_vendor/sassy-lists/stylesheets/functions/_to-list.scss +27 -0
- data/_vendor/sassy-lists/stylesheets/helpers/_missing-dependencies.scss +25 -0
- data/_vendor/sassy-lists/stylesheets/helpers/_true.scss +13 -0
- data/foundation-scss.gemspec +9 -0
- data/lib/foundation/scss/in/sass_path.rb +6 -0
- data/scss/_global.scss +219 -0
- data/scss/components/_accordion-menu.scss +36 -0
- data/scss/components/_accordion.scss +150 -0
- data/scss/components/_badge.scss +63 -0
- data/scss/components/_breadcrumbs.scss +100 -0
- data/scss/components/_button-group.scss +253 -0
- data/scss/components/_button.scss +332 -0
- data/scss/components/_callout.scss +106 -0
- data/scss/components/_card.scss +121 -0
- data/scss/components/_close-button.scss +102 -0
- data/scss/components/_drilldown.scss +93 -0
- data/scss/components/_dropdown-menu.scss +226 -0
- data/scss/components/_dropdown.scss +72 -0
- data/scss/components/_flex-video.scss +1 -0
- data/scss/components/_flex.scss +34 -0
- data/scss/components/_float.scss +27 -0
- data/scss/components/_label.scss +64 -0
- data/scss/components/_media-object.scss +114 -0
- data/scss/components/_menu-icon.scss +9 -0
- data/scss/components/_menu.scss +376 -0
- data/scss/components/_off-canvas.scss +329 -0
- data/scss/components/_orbit.scss +196 -0
- data/scss/components/_pagination.scss +193 -0
- data/scss/components/_progress-bar.scss +64 -0
- data/scss/components/_responsive-embed.scss +70 -0
- data/scss/components/_reveal.scss +178 -0
- data/scss/components/_slider.scss +138 -0
- data/scss/components/_sticky.scss +38 -0
- data/scss/components/_switch.scss +247 -0
- data/scss/components/_table.scss +329 -0
- data/scss/components/_tabs.scss +196 -0
- data/scss/components/_thumbnail.scss +67 -0
- data/scss/components/_title-bar.scss +84 -0
- data/scss/components/_tooltip.scss +107 -0
- data/scss/components/_top-bar.scss +173 -0
- data/scss/components/_visibility.scss +132 -0
- data/scss/forms/_checkbox.scss +41 -0
- data/scss/forms/_error.scss +88 -0
- data/scss/forms/_fieldset.scss +54 -0
- data/scss/forms/_forms.scss +34 -0
- data/scss/forms/_help-text.scss +30 -0
- data/scss/forms/_input-group.scss +135 -0
- data/scss/forms/_label.scss +50 -0
- data/scss/forms/_meter.scss +110 -0
- data/scss/forms/_progress.scss +94 -0
- data/scss/forms/_range.scss +149 -0
- data/scss/forms/_select.scss +85 -0
- data/scss/forms/_text.scss +170 -0
- data/scss/foundation.scss +118 -0
- data/scss/grid/_classes.scss +176 -0
- data/scss/grid/_column.scss +112 -0
- data/scss/grid/_flex-grid.scss +312 -0
- data/scss/grid/_grid.scss +48 -0
- data/scss/grid/_gutter.scss +82 -0
- data/scss/grid/_layout.scss +76 -0
- data/scss/grid/_position.scss +76 -0
- data/scss/grid/_row.scss +99 -0
- data/scss/grid/_size.scss +24 -0
- data/scss/settings/_settings.scss +620 -0
- data/scss/typography/_alignment.scss +22 -0
- data/scss/typography/_base.scss +509 -0
- data/scss/typography/_helpers.scss +78 -0
- data/scss/typography/_print.scss +86 -0
- data/scss/typography/_typography.scss +26 -0
- data/scss/util/_breakpoint.scss +281 -0
- data/scss/util/_color.scss +126 -0
- data/scss/util/_direction.scss +31 -0
- data/scss/util/_flex.scss +85 -0
- data/scss/util/_math.scss +72 -0
- data/scss/util/_mixins.scss +276 -0
- data/scss/util/_selector.scss +41 -0
- data/scss/util/_typography.scss +26 -0
- data/scss/util/_unit.scss +152 -0
- data/scss/util/_util.scss +14 -0
- data/scss/util/_value.scss +160 -0
- 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
|
+
}
|