2847068e8efaed9e0f49b0ee6f3a29613d030386698dce767871c85747c25abec6182e56e790b401191c30ab3881d81c7f6070ed7865b4bfb24a03d4f11c44 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. @use 'function' as *;
  2. @use '../common/var' as *;
  3. // forward mixins
  4. @forward 'config';
  5. @forward 'function';
  6. @forward '_var';
  7. @use 'config' as *;
  8. @use 'sass:string';
  9. @use 'sass:map';
  10. $B: null;
  11. $E: null;
  12. // Break-points
  13. @mixin res($key, $map: $breakpoints) {
  14. // loop breakpoint Map, return if present
  15. @if map.has-key($map, $key) {
  16. @media only screen and #{string.unquote(map.get($map, $key))} {
  17. @content;
  18. }
  19. } @else {
  20. @warn "Undefined points: `#{$map}`";
  21. }
  22. }
  23. // Scrollbar
  24. @mixin scroll-bar {
  25. $scrollbar-thumb-background: getCssVar('text-color', 'disabled');
  26. $scrollbar-track-background: getCssVar('fill-color', 'blank');
  27. &::-webkit-scrollbar {
  28. z-index: 11;
  29. width: 6px;
  30. &:horizontal {
  31. height: 6px;
  32. }
  33. &-thumb {
  34. border-radius: 5px;
  35. width: 6px;
  36. background: $scrollbar-thumb-background;
  37. }
  38. &-corner {
  39. background: $scrollbar-track-background;
  40. }
  41. &-track {
  42. background: $scrollbar-track-background;
  43. &-piece {
  44. background: $scrollbar-track-background;
  45. width: 6px;
  46. }
  47. }
  48. }
  49. }
  50. // BEM
  51. @mixin b($block) {
  52. $B: $namespace + $common-separator + $block !global;
  53. .#{$B} {
  54. @content;
  55. }
  56. }
  57. @mixin e($element) {
  58. $E: $element !global;
  59. $selector: &;
  60. $currentSelector: '';
  61. @each $unit in $element {
  62. $currentSelector: #{$currentSelector +
  63. '.' +
  64. $B +
  65. $element-separator +
  66. $unit +
  67. ','};
  68. }
  69. @if hitAllSpecialNestRule($selector) {
  70. @at-root {
  71. #{$selector} {
  72. #{$currentSelector} {
  73. @content;
  74. }
  75. }
  76. }
  77. } @else {
  78. @at-root {
  79. #{$currentSelector} {
  80. @content;
  81. }
  82. }
  83. }
  84. }
  85. @mixin m($modifier) {
  86. $selector: &;
  87. $currentSelector: '';
  88. @each $unit in $modifier {
  89. $currentSelector: #{$currentSelector +
  90. $selector +
  91. $modifier-separator +
  92. $unit +
  93. ','};
  94. }
  95. @at-root {
  96. #{$currentSelector} {
  97. @content;
  98. }
  99. }
  100. }
  101. @mixin configurable-m($modifier, $E-flag: false) {
  102. $selector: &;
  103. $interpolation: '';
  104. @if $E-flag {
  105. $interpolation: $element-separator + $E-flag;
  106. }
  107. @at-root {
  108. #{$selector} {
  109. .#{$B + $interpolation + $modifier-separator + $modifier} {
  110. @content;
  111. }
  112. }
  113. }
  114. }
  115. @mixin spec-selector(
  116. $specSelector: '',
  117. $element: $E,
  118. $modifier: false,
  119. $block: $B
  120. ) {
  121. $modifierCombo: '';
  122. @if $modifier {
  123. $modifierCombo: $modifier-separator + $modifier;
  124. }
  125. @at-root {
  126. #{&}#{$specSelector}.#{$block
  127. + $element-separator
  128. + $element
  129. + $modifierCombo} {
  130. @content;
  131. }
  132. }
  133. }
  134. @mixin meb($modifier: false, $element: $E, $block: $B) {
  135. $selector: &;
  136. $modifierCombo: '';
  137. @if $modifier {
  138. $modifierCombo: $modifier-separator + $modifier;
  139. }
  140. @at-root {
  141. #{$selector} {
  142. .#{$block + $element-separator + $element + $modifierCombo} {
  143. @content;
  144. }
  145. }
  146. }
  147. }
  148. @mixin when($state) {
  149. @at-root {
  150. &.#{$state-prefix + $state} {
  151. @content;
  152. }
  153. }
  154. }
  155. @mixin extend-rule($name) {
  156. @extend #{'%shared-' + $name} !optional;
  157. }
  158. @mixin share-rule($name) {
  159. $rule-name: '%shared-' + $name;
  160. @at-root #{$rule-name} {
  161. @content;
  162. }
  163. }
  164. @mixin pseudo($pseudo) {
  165. @at-root #{&}#{':#{$pseudo}'} {
  166. @content;
  167. }
  168. }
  169. @mixin picker-popper($background, $border, $box-shadow) {
  170. &.#{$namespace}-popper {
  171. background: $background;
  172. border: $border;
  173. box-shadow: $box-shadow;
  174. .#{$namespace}-popper__arrow {
  175. &::before {
  176. border: $border;
  177. }
  178. }
  179. @each $placement,
  180. $adjacency
  181. in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
  182. {
  183. &[data-popper-placement^='#{$placement}'] {
  184. .#{$namespace}-popper__arrow::before {
  185. border-#{$placement}-color: transparent;
  186. border-#{$adjacency}-color: transparent;
  187. }
  188. }
  189. }
  190. }
  191. }
  192. // dark
  193. @mixin dark($block) {
  194. html.dark {
  195. @include b($block) {
  196. @content;
  197. }
  198. }
  199. }
  200. @mixin inset-input-border($color, $important: false) {
  201. @if $important == true {
  202. box-shadow: 0 0 0 1px $color inset !important;
  203. } @else {
  204. box-shadow: 0 0 0 1px $color inset;
  205. }
  206. }