diff --git a/src/app/atoms/divider/Divider.jsx b/src/app/atoms/divider/Divider.jsx
index b524ec2..76a9731 100644
--- a/src/app/atoms/divider/Divider.jsx
+++ b/src/app/atoms/divider/Divider.jsx
@@ -4,8 +4,8 @@ import './Divider.scss';
import Text from '../text/Text';
-function Divider({ text, variant }) {
- const dividerClass = ` divider--${variant}`;
+function Divider({ text, variant, align }) {
+ const dividerClass = ` divider--${variant} divider--${align}`;
return (
{text !== null && {text}}
@@ -16,11 +16,13 @@ function Divider({ text, variant }) {
Divider.defaultProps = {
text: null,
variant: 'surface',
+ align: 'center',
};
Divider.propTypes = {
text: PropTypes.string,
- variant: PropTypes.oneOf(['surface', 'primary', 'caution', 'danger']),
+ variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+ align: PropTypes.oneOf(['left', 'center', 'right']),
};
export default Divider;
diff --git a/src/app/atoms/divider/Divider.scss b/src/app/atoms/divider/Divider.scss
index ded59af..a7dbbb2 100644
--- a/src/app/atoms/divider/Divider.scss
+++ b/src/app/atoms/divider/Divider.scss
@@ -1,68 +1,69 @@
-.divider {
- --local-divider-color: var(--bg-surface-border);
+.divider-line {
+ content: '';
+ display: inline-block;
+ flex: 1;
+ border-bottom: 1px solid var(--local-divider-color);
+ opacity: var(--local-divider-opacity);
+}
- margin: var(--sp-extra-tight) var(--sp-normal);
- margin-right: var(--sp-extra-tight);
+.divider {
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));
- }
- }
+ &--center::before,
+ &--right::before {
+ @extend .divider-line;
+ }
+ &--center::after,
+ &--left::after {
+ @extend .divider-line;
}
&__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);
- }
- }
+ padding: 2px var(--sp-extra-tight);
+ border-radius: calc(var(--bo-radius) / 2);
+ font-weight: 500;
}
}
.divider--surface {
- --local-divider-color: var(--tc-surface-low);
+ --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(--bg-primary);
+ 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-danger);
+ 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-caution);
+ color: var(--bg-surface);
+ background-color: var(--bg-caution);
}
-}
\ No newline at end of file
+}