_divider.scss 921 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. // Divider
  2. .divider,
  3. .divider-vert {
  4. display: block;
  5. position: relative;
  6. &[data-content]::after {
  7. background: $bg-color-light;
  8. color: $gray-color;
  9. content: attr(data-content);
  10. display: inline-block;
  11. font-size: $font-size-sm;
  12. padding: 0 $unit-2;
  13. transform: translateY(-$font-size-sm + $border-width);
  14. }
  15. }
  16. .divider {
  17. border-top: $border-width solid $border-color;
  18. height: $border-width;
  19. margin: $unit-2 0;
  20. &[data-content] {
  21. margin: $unit-4 0;
  22. }
  23. }
  24. .divider-vert {
  25. display: block;
  26. padding: $unit-4;
  27. &::before {
  28. border-left: $border-width solid $border-color;
  29. bottom: $unit-2;
  30. content: "";
  31. display: block;
  32. left: 50%;
  33. position: absolute;
  34. top: $unit-2;
  35. transform: translateX(-50%);
  36. }
  37. &[data-content]::after {
  38. left: 50%;
  39. padding: $unit-1 0;
  40. position: absolute;
  41. top: 50%;
  42. transform: translate(-50%, -50%);
  43. }
  44. }