_hr.scss 948 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. /**
  2. Horizontal rules
  3. */
  4. .hr {
  5. @extend hr;
  6. }
  7. /**
  8. Hr text
  9. */
  10. .hr-text {
  11. display: flex;
  12. align-items: center;
  13. margin: $hr-margin-y 0;
  14. @include subheader;
  15. height: 1px;
  16. &:after,
  17. &:before {
  18. flex: 1 1 auto;
  19. height: 1px;
  20. background-color: var(--#{$prefix}border-color);
  21. }
  22. &:before {
  23. content: "";
  24. margin-right: .5rem;
  25. }
  26. &:after {
  27. content: "";
  28. margin-left: .5rem;
  29. }
  30. > *:first-child {
  31. padding-right: .5rem;
  32. padding-left: 0;
  33. color: var(--#{$prefix}secondary);
  34. }
  35. &.hr-text-left {
  36. &:before {
  37. content: none;
  38. }
  39. & > *:first-child {
  40. padding-right: .5rem;
  41. padding-left: .5rem;
  42. }
  43. }
  44. &.hr-text-right {
  45. &:before {
  46. content: "";
  47. }
  48. &:after {
  49. content: none;
  50. }
  51. & > *:first-child {
  52. padding-right: 0;
  53. padding-left: .5rem;
  54. }
  55. }
  56. .card > & {
  57. margin: 0;
  58. }
  59. }
  60. .hr-text-spaceless {
  61. margin: -.5rem 0;
  62. }