divider.scss 996 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. @use 'common/var' as *;
  2. @use 'mixins/mixins' as *;
  3. @include b(divider) {
  4. position: relative;
  5. @include m(horizontal) {
  6. display: block;
  7. height: 1px;
  8. width: 100%;
  9. margin: 24px 0;
  10. border-top: 1px getCssVar('border-color') getCssVar('border-style');
  11. }
  12. @include m(vertical) {
  13. display: inline-block;
  14. width: 1px;
  15. height: 1em;
  16. margin: 0 8px;
  17. vertical-align: middle;
  18. position: relative;
  19. border-left: 1px getCssVar('border-color') getCssVar('border-style');
  20. }
  21. @include e(text) {
  22. position: absolute;
  23. background-color: getCssVar('bg-color');
  24. padding: 0 20px;
  25. font-weight: 500;
  26. color: getCssVar('text-color', 'primary');
  27. font-size: 14px;
  28. @include when(left) {
  29. left: 20px;
  30. transform: translateY(-50%);
  31. }
  32. @include when(center) {
  33. left: 50%;
  34. transform: translateX(-50%) translateY(-50%);
  35. }
  36. @include when(right) {
  37. right: 20px;
  38. transform: translateY(-50%);
  39. }
  40. }
  41. }