Customize Bootstrap caret

If you are using the bootstrap nav bar with dropdowns and <span class="caret"></span> and want to customize the style to act like the arrows on JHMG, you can do so with the following CSS (mixins can be found in comments):


.caret {
     /* this overwrites BS styles */
     border: medium none; 
     
     width: 9px;
     height: 20px;

     // @include relative;
     position: relative; 
     &::before,
     &::after {
           content: '',
           margin-top: -1px;
           height: 2px;
           width: 6px;
           display: inline-block;
           background: white;

           // @include absolute($t:50%); 
           position: absolute;  

           top: 50%;

           /* this mixin was explained here */
           @include transition-transform(.3s, width .3s);
     }
     &::before {
           left: 0;

           // @include rotate(45deg); 
           transform: rotate(45deg); 

           /* Bootstrap adds class "open" when you click a dropdown */
           open & {
                   width: 9px;
                   transform: rotate(-45deg);
           }
     }
     &::after {
           right: 0;
           transform: rotate(-45deg); 
           open & {
                   width: 9px;
                   transform: rotate(45deg);
           }
     }
}