border.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. /**
  2. * @class Global_CSS
  3. */
  4. /**
  5. * Creates a border on an element.
  6. * If any of the parameters is specified as a list, or if any parameter is null,
  7. * border-style, border-width, and border-color will be specified as separate properties,
  8. * otherwise all will be collapsed into a single "border" property.
  9. *
  10. * @param {number/list} $width
  11. * The border-width
  12. *
  13. * @param {string/list} $style
  14. * The border-style
  15. *
  16. * @param {color/list} $color
  17. * The border-color
  18. *
  19. * @private
  20. */
  21. @mixin border(
  22. $width: null,
  23. $style: null,
  24. $color: null
  25. ) {
  26. @if $width != null and $style != null and $color != null and
  27. length($width) == 1 and length($style) == 1 and length($color) == 1 {
  28. border: $width $style $color;
  29. } @else {
  30. @if length($width) > 1 and boxContainsNull($width) {
  31. border-top-width: top($width);
  32. border-right-width: right($width);
  33. border-bottom-width: bottom($width);
  34. border-left-width: left($width);
  35. } @else {
  36. border-width: $width;
  37. }
  38. @if length($style) > 1 and boxContainsNull($style) {
  39. border-top-style: top($style);
  40. border-right-style: right($style);
  41. border-bottom-style: bottom($style);
  42. border-left-style: left($style);
  43. } @else {
  44. border-style: $style;
  45. }
  46. @if length($color) > 1 and boxContainsNull($color) {
  47. border-top-color: top($color);
  48. border-right-color: right($color);
  49. border-bottom-color: bottom($color);
  50. border-left-color: left($color);
  51. } @else {
  52. border-color: $color;
  53. }
  54. }
  55. }
  56. /**
  57. * Creates a top border. If all arguments are non-null they will be collapsed into a single
  58. * border property.
  59. *
  60. * @param {number/list} $width
  61. * The border-width
  62. *
  63. * @param {string/list} $style
  64. * The border-style
  65. *
  66. * @param {color/list} $color
  67. * The border-color
  68. *
  69. * @private
  70. */
  71. @mixin border-top(
  72. $width: null,
  73. $style: null,
  74. $color: null
  75. ) {
  76. @include border-side(top, $width, $style, $color);
  77. }
  78. /**
  79. * Creates a right border. If all arguments are non-null they will be collapsed into a single
  80. * border property.
  81. *
  82. * @param {number/list} $width
  83. * The border-width
  84. *
  85. * @param {string/list} $style
  86. * The border-style
  87. *
  88. * @param {color/list} $color
  89. * The border-color
  90. *
  91. * @private
  92. */
  93. @mixin border-right(
  94. $width: null,
  95. $style: null,
  96. $color: null
  97. ) {
  98. @include border-side(right, $width, $style, $color);
  99. }
  100. /**
  101. * Creates a bottom border. If all arguments are non-null they will be collapsed into a single
  102. * border property.
  103. *
  104. * @param {number/list} $width
  105. * The border-width
  106. *
  107. * @param {string/list} $style
  108. * The border-style
  109. *
  110. * @param {color/list} $color
  111. * The border-color
  112. *
  113. * @private
  114. */
  115. @mixin border-bottom(
  116. $width: null,
  117. $style: null,
  118. $color: null
  119. ) {
  120. @include border-side(bottom, $width, $style, $color);
  121. }
  122. /**
  123. * Creates a left border. If all arguments are non-null they will be collapsed into a single
  124. * border property.
  125. *
  126. * @param {number/list} $width
  127. * The border-width
  128. *
  129. * @param {string/list} $style
  130. * The border-style
  131. *
  132. * @param {color/list} $color
  133. * The border-color
  134. *
  135. * @private
  136. */
  137. @mixin border-left(
  138. $width: null,
  139. $style: null,
  140. $color: null
  141. ) {
  142. @include border-side(left, $width, $style, $color);
  143. }
  144. /**
  145. * Convenience mixin for border-top, border-right, border-bottom, and border-left
  146. * @private
  147. */
  148. @mixin border-side(
  149. $side,
  150. $width: null,
  151. $style: null,
  152. $color: null
  153. ) {
  154. @if $width != null and $style != null and $color != null {
  155. border-#{$side}: $width $style $color;
  156. } @else {
  157. border-#{$side}-width: $width;
  158. border-#{$side}-style: $style;
  159. border-#{$side}-color: $color;
  160. }
  161. }