You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
4.5 KiB
125 lines
4.5 KiB
@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: #fff !default;
|
|
$dropdown-button-pip-color-alt: #333 !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: #fff.
|
|
// $base-style - Add in base-styles. This can be set to false. Default:true
|
|
|
|
@mixin dropdown-button($padding:medium, $pip-color:#fff, $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
|
|
&:before {
|
|
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;
|
|
&:before {
|
|
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;
|
|
&:before {
|
|
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;
|
|
&:before {
|
|
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 {
|
|
&:before { border-color: $pip-color transparent transparent transparent; }
|
|
}
|
|
}
|
|
|
|
@include exports("dropdown-button") {
|
|
@if $include-html-button-classes {
|
|
.dropdown.button { @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:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
|
|
}
|
|
}
|
|
}
|
|
|