inner-border.scss 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. @function inner-border-spread($width) {
  2. $top: top($width);
  3. $right: right($width);
  4. $bottom: bottom($width);
  5. $left: left($width);
  6. @return min(($top + $bottom) / 2, ($left + $right) / 2);
  7. }
  8. @function inner-border-hoff($width, $spread) {
  9. $left: left($width);
  10. $right: right($width);
  11. @if $right <= 0 {
  12. @return $left - $spread;
  13. }
  14. @else {
  15. @return $spread - $right;
  16. }
  17. }
  18. @function inner-border-voff($width, $spread) {
  19. $top: top($width);
  20. $bottom: bottom($width);
  21. @if $bottom <= 0 {
  22. @return $top - $spread;
  23. }
  24. @else {
  25. @return $spread - $bottom;
  26. }
  27. }
  28. @function even($number) {
  29. @return ceil($number / 2) == ($number / 2);
  30. }
  31. @function odd($number) {
  32. @return ceil($number / 2) != ($number / 2);
  33. }
  34. @function inner-border-usesingle-width($width) {
  35. $top: top($width);
  36. $right: right($width);
  37. $bottom: bottom($width);
  38. $left: left($width);
  39. @if $top == 0 {
  40. @if $left + $right == 0 {
  41. @return true;
  42. }
  43. @if $bottom >= $left + $right {
  44. @return true;
  45. }
  46. }
  47. @if $bottom == 0 {
  48. @if $left + $right == 0 {
  49. @return true;
  50. }
  51. @if $top >= $left + $right {
  52. @return true;
  53. }
  54. }
  55. @if $left == 0 {
  56. @if $top + $bottom == 0 {
  57. @return true;
  58. }
  59. @if $right >= $top + $bottom {
  60. @return true;
  61. }
  62. }
  63. @if $right == 0 {
  64. @if $top + $bottom == 0 {
  65. @return true;
  66. }
  67. @if $left >= $top + $bottom {
  68. @return true;
  69. }
  70. }
  71. @if $top + $bottom == $left + $right and even($top) == even($bottom) and even($left) == even($right) {
  72. @return true;
  73. }
  74. @return false;
  75. }
  76. @function inner-border-usesingle-color($color) {
  77. $top: top($color);
  78. $right: right($color);
  79. $bottom: bottom($color);
  80. $left: left($color);
  81. @if $top == $right == $bottom == $left {
  82. @return true;
  83. }
  84. @return false;
  85. }
  86. @function inner-border-usesingle($width, $color) {
  87. @if inner-border-usesingle-color($color) and inner-border-usesingle-width($width) {
  88. @return true;
  89. }
  90. @return false;
  91. }
  92. @mixin inner-border($width: 1px, $color: #fff, $blur: 0px) {
  93. @if max($width) == 0 {
  94. -webkit-box-shadow: none;
  95. -moz-box-shadow: none;
  96. box-shadow: none;
  97. } @else if inner-border-usesingle($width, $color) {
  98. $spread: inner-border-spread($width);
  99. $hoff: inner-border-hoff($width, $spread);
  100. $voff: inner-border-voff($width, $spread);
  101. @include single-box-shadow(top($color), $hoff, $voff, $blur, $spread, true);
  102. }
  103. @else {
  104. $width-top: top($width);
  105. $width-right: right($width);
  106. $width-bottom: bottom($width);
  107. $width-left: left($width);
  108. $color-top: top($color);
  109. $color-right: right($color);
  110. $color-bottom: bottom($color);
  111. $color-left: left($color);
  112. $shadow-top: false;
  113. $shadow-right: false;
  114. $shadow-bottom: false;
  115. $shadow-left: false;
  116. @if $width-top > 0 {
  117. $shadow-top: $color-top 0 $width-top $blur 0 inset;
  118. }
  119. @if $width-right > 0 {
  120. $shadow-right: $color-right (-1 * $width-right) 0 $blur 0 inset;
  121. }
  122. @if $width-bottom > 0 {
  123. $shadow-bottom: $color-bottom 0 (-1 * $width-bottom) $blur 0 inset;
  124. }
  125. @if $width-left > 0 {
  126. $shadow-left: $color-left $width-left 0 $blur 0 inset;
  127. }
  128. @include box-shadow($shadow-top, $shadow-bottom, $shadow-right, $shadow-left);
  129. }
  130. }