70 lines
1.4 KiB
SCSS
70 lines
1.4 KiB
SCSS
.divider-line {
|
|
content: '';
|
|
display: inline-block;
|
|
flex: 1;
|
|
border-bottom: 1px solid var(--local-divider-color);
|
|
opacity: var(--local-divider-opacity);
|
|
}
|
|
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&--center::before,
|
|
&--right::before {
|
|
@extend .divider-line;
|
|
}
|
|
&--center::after,
|
|
&--left::after {
|
|
@extend .divider-line;
|
|
}
|
|
|
|
&__text {
|
|
padding: 2px var(--sp-extra-tight);
|
|
border-radius: calc(var(--bo-radius) / 2);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.divider--surface {
|
|
--local-divider-color: var(--bg-divider);
|
|
--local-divider-opacity: 1;
|
|
|
|
.divider__text {
|
|
color: var(--tc-surface-low);
|
|
border: 1px solid var(--bg-divider);
|
|
}
|
|
}
|
|
.divider--primary {
|
|
--local-divider-color: var(--bg-primary);
|
|
--local-divider-opacity: .8;
|
|
.divider__text {
|
|
color: var(--tc-primary-high);
|
|
background-color: var(--bg-primary);
|
|
}
|
|
}
|
|
.divider--positive {
|
|
--local-divider-color: var(--bg-positive);
|
|
--local-divider-opacity: .8;
|
|
.divider__text {
|
|
color: var(--bg-surface);
|
|
background-color: var(--bg-positive);
|
|
}
|
|
}
|
|
.divider--danger {
|
|
--local-divider-color: var(--bg-danger);
|
|
--local-divider-opacity: .8;
|
|
.divider__text {
|
|
color: var(--bg-surface);
|
|
background-color: var(--bg-danger);
|
|
}
|
|
}
|
|
.divider--caution {
|
|
--local-divider-color: var(--bg-caution);
|
|
--local-divider-opacity: .8;
|
|
.divider__text {
|
|
color: var(--bg-surface);
|
|
background-color: var(--bg-caution);
|
|
}
|
|
}
|