diff options
author | maks <pine3ree@gmail.com> | 2022-06-06 07:47:51 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2022-10-03 21:19:56 +0300 |
commit | fffe0553c278663f272d646c45b4074fbea1ca54 (patch) | |
tree | 133888c1856444b0629180e4e4112803ae7259f5 | |
parent | ca067371c49e215278bb8e24a00a634a39658cbe (diff) |
Add parameters to the caret mixin
-rw-r--r-- | scss/mixins/_caret.scss | 55 |
1 files changed, 30 insertions, 25 deletions
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss index 4b0f0360ba..be731165bd 100644 --- a/scss/mixins/_caret.scss +++ b/scss/mixins/_caret.scss @@ -1,44 +1,49 @@ // scss-docs-start caret-mixins -@mixin caret-down { - border-top: $caret-width solid; - border-right: $caret-width solid transparent; +@mixin caret-down($width: $caret-width) { + border-top: $width solid; + border-right: $width solid transparent; border-bottom: 0; - border-left: $caret-width solid transparent; + border-left: $width solid transparent; } -@mixin caret-up { +@mixin caret-up($width: $caret-width) { border-top: 0; - border-right: $caret-width solid transparent; - border-bottom: $caret-width solid; - border-left: $caret-width solid transparent; + border-right: $width solid transparent; + border-bottom: $width solid; + border-left: $width solid transparent; } -@mixin caret-end { - border-top: $caret-width solid transparent; +@mixin caret-end($width: $caret-width) { + border-top: $width solid transparent; border-right: 0; - border-bottom: $caret-width solid transparent; - border-left: $caret-width solid; + border-bottom: $width solid transparent; + border-left: $width solid; } -@mixin caret-start { - border-top: $caret-width solid transparent; - border-right: $caret-width solid; - border-bottom: $caret-width solid transparent; +@mixin caret-start($width: $caret-width) { + border-top: $width solid transparent; + border-right: $width solid; + border-bottom: $width solid transparent; } -@mixin caret($direction: down) { +@mixin caret( + $direction: down, + $width: $caret-width, + $spacing: $caret-spacing, + $vertical-align: $caret-vertical-align +) { @if $enable-caret { &::after { display: inline-block; - margin-left: $caret-spacing; - vertical-align: $caret-vertical-align; + margin-left: $spacing; + vertical-align: $vertical-align; content: ""; @if $direction == down { - @include caret-down(); + @include caret-down($width); } @else if $direction == up { - @include caret-up(); + @include caret-up($width); } @else if $direction == end { - @include caret-end(); + @include caret-end($width); } } @@ -49,10 +54,10 @@ &::before { display: inline-block; - margin-right: $caret-spacing; - vertical-align: $caret-vertical-align; + margin-right: $spacing; + vertical-align: $vertical-align; content: ""; - @include caret-start(); + @include caret-start($width); } } |