xinny/src/app/atoms/divider/Divider.scss
2021-07-28 18:45:52 +05:30

68 lines
1.3 KiB
SCSS

.divider {
--local-divider-color: var(--bg-surface-border);
margin: var(--sp-extra-tight) var(--sp-normal);
margin-right: var(--sp-extra-tight);
display: flex;
align-items: center;
position: relative;
&::before {
content: "";
display: inline-block;
flex: 1;
margin-left: calc(var(--av-small) + var(--sp-tight));
border-bottom: 1px solid var(--local-divider-color);
opacity: 0.18;
[dir=rtl] & {
margin: {
left: 0;
right: calc(var(--av-small) + var(--sp-tight));
}
}
}
&__text {
margin-left: var(--sp-normal);
}
[dir=rtl] & {
margin: {
left: var(--sp-extra-tight);
right: var(--sp-normal);
}
&__text {
margin: {
left: 0;
right: var(--sp-normal);
}
}
}
}
.divider--surface {
--local-divider-color: var(--tc-surface-low);
.divider__text {
color: var(--tc-surface-low);
}
}
.divider--primary {
--local-divider-color: var(--bg-primary);
.divider__text {
color: var(--bg-primary);
}
}
.divider--danger {
--local-divider-color: var(--bg-danger);
.divider__text {
color: var(--bg-danger);
}
}
.divider--caution {
--local-divider-color: var(--bg-caution);
.divider__text {
color: var(--bg-caution);
}
}