divider.scss 868 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. @import "common/var";
  2. @import "mixins/mixins";
  3. @include b(divider) {
  4. background-color: $--border-color-base;
  5. position: relative;
  6. @include m(horizontal) {
  7. display: block;
  8. height: 1px;
  9. width: 100%;
  10. margin: 24px 0;
  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. }
  20. @include e(text) {
  21. position: absolute;
  22. background-color: $--color-white;
  23. padding: 0 20px;
  24. font-weight: 500;
  25. color: $--color-text-primary;
  26. font-size: 14px;
  27. @include when(left) {
  28. left: 20px;
  29. transform: translateY(-50%);
  30. }
  31. @include when(center) {
  32. left: 50%;
  33. transform: translateX(-50%) translateY(-50%);
  34. }
  35. @include when(right) {
  36. right: 20px;
  37. transform: translateY(-50%);
  38. }
  39. }
  40. }