myheats-website

Website for myheats
git clone https://git.in0rdr.ch/myheats-website.git
Log | Files | Refs | Pull requests |Archive | README | LICENSE

_border-radius.scss (1071B)

      1 @charset "UTF-8";
      2 
      3 /// Provides a quick method for targeting `border-radius` on both corners on the side of a box.
      4 ///
      5 /// @param {Number} $radii
      6 ///   List of arguments
      7 ///
      8 /// @example scss - Usage
      9 ///   .element-one {
     10 ///     @include border-top-radius(5px);
     11 ///   }
     12 ///
     13 ///   .element-two {
     14 ///     @include border-left-radius(3px);
     15 ///   }
     16 ///
     17 /// @example css - CSS Output
     18 ///   .element-one {
     19 ///     border-top-left-radius: 5px;
     20 ///     border-top-right-radius: 5px;
     21 ///   }
     22 ///
     23 ///   .element-two {
     24 ///     border-bottom-left-radius: 3px;
     25 ///     border-top-left-radius: 3px;
     26 ///   }
     27 ///
     28 /// @output `border-radius`
     29 
     30 @mixin border-top-radius($radii) {
     31   border-top-left-radius: $radii;
     32   border-top-right-radius: $radii;
     33 }
     34 
     35 @mixin border-right-radius($radii) {
     36   border-bottom-right-radius: $radii;
     37   border-top-right-radius: $radii;
     38 }
     39 
     40 @mixin border-bottom-radius($radii) {
     41   border-bottom-left-radius: $radii;
     42   border-bottom-right-radius: $radii;
     43 }
     44 
     45 @mixin border-left-radius($radii) {
     46   border-bottom-left-radius: $radii;
     47   border-top-left-radius: $radii;
     48 }