index.less 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. @import "../styles/mixins/index.less";
  2. @import "../styles/themes/index.less";
  3. .@{wux-prefix}-divider {
  4. &--horizontal {
  5. display: block;
  6. height: 1px;
  7. width: 100%;
  8. margin: @spacing-lg 0;
  9. clear: both;
  10. border-top: 1px solid @border-color-base;
  11. }
  12. &--horizontal&--text {
  13. display: table;
  14. white-space: nowrap;
  15. text-align: center;
  16. background: transparent;
  17. font-weight: normal;
  18. color: @text-color-secondary;
  19. font-size: @font-size-lg;
  20. border-top: none !important;
  21. &::before,
  22. &::after {
  23. content: '';
  24. display: table-cell;
  25. position: relative;
  26. top: 50%;
  27. width: 50%;
  28. border-top-width: 1px;
  29. border-top-style: solid;
  30. border-top-color: @border-color-base;
  31. transform: translateY(50%);
  32. }
  33. }
  34. &--horizontal&--dashed {
  35. border-top: 1px dashed @border-color-base;
  36. }
  37. &--horizontal&--dashed&--text {
  38. &::before,
  39. &::after {
  40. border-top-style: dashed;
  41. }
  42. }
  43. &--horizontal&--text-left {
  44. &::before {
  45. width: 5%;
  46. }
  47. &::after {
  48. width: 95%;
  49. }
  50. }
  51. &--horizontal&--text-right {
  52. &::before {
  53. width: 95%;
  54. }
  55. &::after {
  56. width: 5%;
  57. }
  58. }
  59. &--horizontal &__text {
  60. display: inline-block;
  61. padding: 0 @spacing-lg;
  62. }
  63. &--vertical {
  64. position: relative;
  65. top: -0.06em;
  66. display: inline-block;
  67. height: 0.9em;
  68. margin: 0 @spacing-lg;
  69. vertical-align: middle;
  70. border-top: 0;
  71. border-left: 1px solid @border-color-base;
  72. }
  73. }