1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
//
// @variables
//
$include-html-button-classes: $include-html-classes !default;
// We use these to set the color of the pip in dropdown buttons
$dropdown-button-pip-color: $white !default;
$dropdown-button-pip-color-alt: $oil !default;
$button-pip-tny: rem-calc(6) !default;
$button-pip-sml: rem-calc(7) !default;
$button-pip-med: rem-calc(9) !default;
$button-pip-lrg: rem-calc(11) !default;
// We use these to style tiny dropdown buttons
$dropdown-button-padding-tny: $button-pip-tny * 7 !default;
$dropdown-button-pip-size-tny: $button-pip-tny !default;
$dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default;
$dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1) !default;
// We use these to style small dropdown buttons
$dropdown-button-padding-sml: $button-pip-sml * 7 !default;
$dropdown-button-pip-size-sml: $button-pip-sml !default;
$dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default;
$dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1) !default;
// We use these to style medium dropdown buttons
$dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default;
$dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default;
$dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default;
$dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2) !default;
// We use these to style large dropdown buttons
$dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default;
$dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default;
$dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default;
$dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
// @mixins
//
// Dropdown Button Mixin
//
// We use this mixin to build off of the button mixin and add dropdown button styles
//
// $padding - Determines the size of button you're working with. Default: medium. Options [tiny, small, medium, large]
// $pip-color - Color of the little triangle that points to the dropdown. Default: $white.
// $base-style - Add in base-styles. This can be set to false. Default:true
@mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) {
// We add in base styles, but they can be negated by setting to 'false'.
@if $base-style {
position: relative;
// This creates the base styles for the triangle pip
&:after {
position: absolute;
content: "";
width: 0;
height: 0;
display: block;
border-style: solid;
border-color: $dropdown-button-pip-color transparent transparent transparent;
top: 50%;
}
}
// If we're dealing with tiny buttons, use these styles
@if $padding == tiny {
padding-#{$opposite-direction}: $dropdown-button-padding-tny;
&:before {
border-width: $dropdown-button-pip-size-tny;
#{$opposite-direction}: $dropdown-button-pip-opposite-tny;
margin-top: $dropdown-button-pip-top-tny;
}
}
// If we're dealing with small buttons, use these styles
@if $padding == small {
padding-#{$opposite-direction}: $dropdown-button-padding-sml;
&:after {
border-width: $dropdown-button-pip-size-sml;
#{$opposite-direction}: $dropdown-button-pip-opposite-sml;
margin-top: $dropdown-button-pip-top-sml;
}
}
// If we're dealing with default (medium) buttons, use these styles
@if $padding == medium {
padding-#{$opposite-direction}: $dropdown-button-padding-med;
&:after {
border-width: $dropdown-button-pip-size-med;
#{$opposite-direction}: $dropdown-button-pip-opposite-med;
margin-top: $dropdown-button-pip-top-med;
}
}
// If we're dealing with large buttons, use these styles
@if $padding == large {
padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
&:after {
border-width: $dropdown-button-pip-size-lrg;
#{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
margin-top: $dropdown-button-pip-top-lrg;
}
}
// We can control the pip color. We didn't use logic in this case, just set it and forget it.
@if $pip-color {
&:after { border-color: $pip-color transparent transparent transparent; }
}
}
@include exports("dropdown-button") {
@if $include-html-button-classes {
.dropdown.button, button.dropdown { @include dropdown-button;
&.tiny { @include dropdown-button(tiny,$base-style:false); }
&.small { @include dropdown-button(small,$base-style:false); }
&.large { @include dropdown-button(large,$base-style:false); }
&.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
}
}
}
|
