git.roojs.org Git - roojs1/blob - scss/bootstrap/mixins/_caret.scss

   1 @mixin caret-down {
   2   border-top: $caret-width solid;
   3   border-right: $caret-width solid transparent;
   4   border-bottom: 0;
   5   border-left: $caret-width solid transparent;
   6 }
   7
   8 @mixin caret-up {
   9   border-top: 0;
  10   border-right: $caret-width solid transparent;
  11   border-bottom: $caret-width solid;
  12   border-left: $caret-width solid transparent;
  13 }
  14
  15 @mixin caret-right {
  16   border-top: $caret-width solid transparent;
  17   border-right: 0;
  18   border-bottom: $caret-width solid transparent;
  19   border-left: $caret-width solid;
  20 }
  21
  22 @mixin caret-left {
  23   border-top: $caret-width solid transparent;
  24   border-right: $caret-width solid;
  25   border-bottom: $caret-width solid transparent;
  26 }
  27
  28 @mixin caret($direction: down) {
  29   @if $enable-caret {
  30     &::after {
  31       display: inline-block;
  32       margin-left: $caret-width * .85;
  33       vertical-align: $caret-width * .85;
  34       content: "";
  35       @if $direction == down {
  36         @include caret-down;
  37       } @else if $direction == up {
  38         @include caret-up;
  39       } @else if $direction == right {
  40         @include caret-right;
  41       }
  42     }
  43
  44     @if $direction == left {
  45       &::after {
  46         display: none;
  47       }
  48
  49       &::before {
  50         display: inline-block;
  51         margin-right: $caret-width * .85;
  52         vertical-align: $caret-width * .85;
  53         content: "";
  54         @include caret-left;
  55       }
  56     }
  57
  58     &:empty::after {
  59       margin-left: 0;
  60     }
  61   }
  62 }