@import './mixins/mixins.scss'; @include themes-mixin { @include b(divider) { @include once { position: relative; display: flex; width: 100%; font-size: 16px; transition: background-color .3s $default-cubic-bezier; @include e(content) { transition: color .3s $default-cubic-bezier; display: flex; align-items: center; margin-left: 12px; margin-right: 12px; white-space: nowrap; font-weight: 700; } @include m(content-position-left) { @include e(line) { @include m(line-left) { width: 28px; } } } @include m(content-position-right) { @include e(line) { @include m(line-right) { width: 28px; } } } @include m(dashed) { @include e(line) { background-color: transparent; height: 0px; width: 100%; border-style: dashed; border-width: 1px 0 0; } } @include m(vertical) { display: inline-block; height: 1em; margin: 0 8px; vertical-align: middle; width: 1px; } } color: $--divider-text-color; @include once { @include e(line) { transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier; height: 1px; width: 100%; margin-top: 24px; margin-bottom: 24px; } } @include not-m(dashed) { @include e(line) { background-color: $--divider-border-color; } } @include m(dashed) { @include e(line) { border-color: $--divider-border-color; } } @include m(vertical) { background-color: $--divider-border-color; } } }