_border-radius.scss 1.0 KB

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