17949fe881f790638fa5fe19eff1e6dbcd6f65f4d2a6fa8a4e9cb475fa53df5a21e5b0543db896feee427cf8fdccc9f0c8aeb585e751628d72ba47d0d0394b 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. @import "function";
  2. @import "../common/var";
  3. /* Break-points
  4. -------------------------- */
  5. @mixin res($key, $map: $--breakpoints) {
  6. // 循环断点Map,如果存在则返回
  7. @if map-has-key($map, $key) {
  8. @media only screen and #{inspect(map-get($map, $key))} {
  9. @content;
  10. }
  11. } @else {
  12. @warn "Undefeined points: `#{$map}`";
  13. }
  14. }
  15. /* Scrollbar
  16. -------------------------- */
  17. @mixin scroll-bar {
  18. $--scrollbar-thumb-background: #b4bccc;
  19. $--scrollbar-track-background: #fff;
  20. &::-webkit-scrollbar {
  21. z-index: 11;
  22. width: 6px;
  23. &:horizontal {
  24. height: 6px;
  25. }
  26. &-thumb {
  27. border-radius: 5px;
  28. width: 6px;
  29. background: $--scrollbar-thumb-background;
  30. }
  31. &-corner {
  32. background: $--scrollbar-track-background;
  33. }
  34. &-track {
  35. background: $--scrollbar-track-background;
  36. &-piece {
  37. background: $--scrollbar-track-background;
  38. width: 6px;
  39. }
  40. }
  41. }
  42. }
  43. /* Placeholder
  44. -------------------------- */
  45. @mixin placeholder {
  46. &::-webkit-input-placeholder {
  47. @content
  48. }
  49. &::-moz-placeholder {
  50. @content
  51. }
  52. &:-ms-input-placeholder {
  53. @content
  54. }
  55. }
  56. /* BEM
  57. -------------------------- */
  58. @mixin b($block) {
  59. $B: $namespace+'-'+$block !global;
  60. .#{$B} {
  61. @content;
  62. }
  63. }
  64. @mixin e($element) {
  65. $E: $element !global;
  66. $selector: &;
  67. $currentSelector: "";
  68. @each $unit in $element {
  69. $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  70. }
  71. @if hitAllSpecialNestRule($selector) {
  72. @at-root {
  73. #{$selector} {
  74. #{$currentSelector} {
  75. @content;
  76. }
  77. }
  78. }
  79. } @else {
  80. @at-root {
  81. #{$currentSelector} {
  82. @content;
  83. }
  84. }
  85. }
  86. }
  87. @mixin m($modifier) {
  88. $selector: &;
  89. $currentSelector: "";
  90. @each $unit in $modifier {
  91. $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  92. }
  93. @at-root {
  94. #{$currentSelector} {
  95. @content;
  96. }
  97. }
  98. }
  99. @mixin configurable-m($modifier, $E-flag: false) {
  100. $selector: &;
  101. $interpolation: '';
  102. @if $E-flag {
  103. $interpolation: $element-separator + $E-flag;
  104. }
  105. @at-root {
  106. #{$selector} {
  107. .#{$B+$interpolation+$modifier-separator+$modifier} {
  108. @content;
  109. }
  110. }
  111. }
  112. }
  113. @mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
  114. $modifierCombo: '';
  115. @if $modifier {
  116. $modifierCombo: $modifier-separator + $modifier;
  117. }
  118. @at-root {
  119. #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
  120. @content
  121. }
  122. }
  123. }
  124. @mixin meb($modifier: false, $element: $E, $block: $B) {
  125. $selector: &;
  126. $modifierCombo: '';
  127. @if $modifier {
  128. $modifierCombo: $modifier-separator + $modifier;
  129. }
  130. @at-root {
  131. #{$selector} {
  132. .#{$block+$element-separator+$element+$modifierCombo} {
  133. @content
  134. }
  135. }
  136. }
  137. }
  138. @mixin when($state) {
  139. @at-root {
  140. &.#{$state-prefix + $state} {
  141. @content;
  142. }
  143. }
  144. }
  145. @mixin extend-rule($name) {
  146. @extend #{'%shared-'+$name};
  147. }
  148. @mixin share-rule($name) {
  149. $rule-name: '%shared-'+$name;
  150. @at-root #{$rule-name} {
  151. @content
  152. }
  153. }
  154. @mixin pseudo($pseudo) {
  155. @at-root #{&}#{':#{$pseudo}'} {
  156. @content
  157. }
  158. }