From e6042e6f44aeac4f160660adae2b0d0a8f512c71 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Wed, 28 Jun 2017 12:34:07 -0700 Subject: [PATCH] Add option to disable carets on dropdowns through `$enable-caret` --- scss/_dropdown.scss | 21 ++------------------- scss/_mixins.scss | 1 + scss/_variables.scss | 1 + scss/mixins/_caret.scss | 35 +++++++++++++++++++++++++++++++++++ 4 files changed, 39 insertions(+), 19 deletions(-) create mode 100644 scss/mixins/_caret.scss diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 05e8b16523..9d276f875d 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -6,21 +6,7 @@ .dropdown-toggle { // Generate the caret automatically - &::after { - display: inline-block; - width: 0; - height: 0; - margin-left: $caret-width * .85; - vertical-align: $caret-width * .85; - content: ""; - border-top: $caret-width solid; - border-right: $caret-width solid transparent; - border-left: $caret-width solid transparent; - } - - &:empty::after { - margin-left: 0; - } + @include caret; } // Allow for dropdowns to go bottom up (aka, dropup-menu) @@ -32,10 +18,7 @@ } .dropdown-toggle { - &::after { - border-top: 0; - border-bottom: $caret-width solid; - } + @include caret(up); } } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 09035bf107..d9a1774b7d 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -19,6 +19,7 @@ // // Components @import "mixins/alert"; @import "mixins/buttons"; +@import "mixins/caret"; @import "mixins/pagination"; @import "mixins/lists"; @import "mixins/list-group"; diff --git a/scss/_variables.scss b/scss/_variables.scss index e68fb23c83..71fb384aa5 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -122,6 +122,7 @@ $theme-color-interval: 8% !default; // // Quickly modify global styling by enabling or disabling optional features. +$enable-caret: true !default; $enable-rounded: true !default; $enable-shadows: false !default; $enable-gradients: false !default; diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss new file mode 100644 index 0000000000..daab9d03c0 --- /dev/null +++ b/scss/mixins/_caret.scss @@ -0,0 +1,35 @@ +@mixin caret-down { + border-top: $caret-width solid; + border-right: $caret-width solid transparent; + border-bottom: 0; + border-left: $caret-width solid transparent; +} + +@mixin caret-up { + border-top: 0; + border-right: $caret-width solid transparent; + border-bottom: $caret-width solid; + border-left: $caret-width solid transparent; +} + +@mixin caret($direction: down) { + @if $enable-caret { + &::after { + display: inline-block; + width: 0; + height: 0; + margin-left: $caret-width * .85; + vertical-align: $caret-width * .85; + content: ""; + @if $direction == down { + @include caret-down; + } @else if $direction == up { + @include caret-up; + } + } + + &:empty::after { + margin-left: 0; + } + } +}