diff --git a/src/components/shapes/_add.css b/src/components/shapes/_add.css
deleted file mode 100644
index e148c21..0000000
--- a/src/components/shapes/_add.css
+++ /dev/null
@@ -1,126 +0,0 @@
-/* SG
-# Shapes/Add
-
-Description
-
-```
-16px
-
-
-
-
-
-
-
-12px
-
-
-
-```
-*/
-
-.CDB-Shape {
- width: 16px;
- height: 16px;
- text-align: center;
-}
-.CDB-Shape--medium {
- width: 24px;
- height: 24px;
-}
-.CDB-Shape:hover {
- cursor: pointer;
-}
-
-
-.CDB-Shape-add {
- position: relative;
- height: 100%;
-
- &::before {
- display: block;
- position: absolute;
- right: 1px;
- bottom: 7px;
- left: 0;
- height: 1px;
- background: $cMainBg;
- content: '';
- }
-
- &::after {
- display: block;
- position: absolute;
- top: 1;
- bottom: 0;
- left: 7px;
- width: 1px;
- background: $cMainBg;
- content: '';
- }
-}
-
-.CDB-Shape-add.is-small {
-
- &::before {
- display: block;
- position: absolute;
- right: 3px;
- bottom: 7px;
- left: 4px;
- height: 1px;
- background: $cMainBg;
- content: '';
- }
-
- &::after {
- display: block;
- position: absolute;
- top: 4px;
- bottom: 3px;
- left: 8px;
- width: 1px;
- background: $cMainBg;
- content: '';
- }
-}
-
-
-
-.CDB-Shape-add.is-blue {
- &::before,
- &::after {
- background: var(--color-blue);
- }
-}
-
-.CDB-Shape-add.is-white {
- &::before,
- &::after {
- background: white;
- }
-}
diff --git a/src/components/shapes/_check-circle.css b/src/components/shapes/_check-circle.css
deleted file mode 100644
index 46fb570..0000000
--- a/src/components/shapes/_check-circle.css
+++ /dev/null
@@ -1,151 +0,0 @@
-/* SG
-# Shapes/Check circle
-
-Description
-
-```
-16px
-
-
-
-
-
-
-
-12px
-
-
-
-```
-*/
-
-.CDB-Shape-CircleItem {
- width: 14px;
- height: 14px;
- border: 1px solid $cMainBg;
- border-radius: 50%;
-
- &.is-small {
- width: 12px;
- height: 12px;
- transform: translateY(2px);
- }
- &.is-blue {
- border: 1px solid var(--color-blue);
- }
- &.is-white {
- border: 1px solid white;
- }
-}
-
-.CDB-Shape-tick {
- display: block;
- position: relative;
- height: 100%;
-
- &::before {
- display: block;
- position: absolute;
- width: 1px;
- transform: rotate(-45deg);
- background: $cMainBg;
- content: '';
- }
- &::after {
- display: block;
- position: absolute;
- width: 1px;
- transform: rotate(45deg);
- background: $cMainBg;
- content: '';
- }
-
- &.is-medium {
- &::before {
- top: 5px;
- left: 4px;
- height: 4px;
- }
- &::after {
- top: 3px;
- right: 5px;
- height: 6px;
- }
- }
-
- &.is-small {
- &::before {
- top: 4px;
- left: 2px;
- height: 3px;
- }
- &::after {
- top: 2px;
- right: 3px;
- height: 5px;
- }
- }
-}
-
-.CDB-Shape-tick.is-blue {
- &::before {
- background: var(--color-blue);
- }
- &::after {
- background: var(--color-blue);
- }
-}
-
-.CDB-Shape-tick.is-white {
- &::before {
- background: white;
- }
- &::after {
- background: white;
- }
-}
-
-.CDB-Shape-tick.is-green {
- &::before {
- background: $cHighlight;
- }
- &::after {
- background: $cHighlight;
- }
-}
diff --git a/src/components/shapes/_dash.css b/src/components/shapes/_dash.css
deleted file mode 100644
index ce3c5b2..0000000
--- a/src/components/shapes/_dash.css
+++ /dev/null
@@ -1,80 +0,0 @@
-/* SG
-# Shapes/Dash
-
-Description
-
-```
-16px
-
-
-
-
-
-
-
-12px
-
-
-
-```
-*/
-
-.CDB-Shape-dash {
- position: relative;
- height: 100%;
-
- &::before {
- display: block;
- position: absolute;
- right: 2px;
- bottom: 7px;
- left: 2px;
- height: 1px;
- background: $cMainBg;
- content: '';
- }
-}
-
-.CDB-Shape-dash.is-small {
-
- &::before {
- right: 3px;
- left: 3px;
- }
-}
-
-.CDB-Shape-dash.is-blue {
- &::before {
- background: var(--color-blue);
- }
-}
-
-.CDB-Shape-dash.is-white {
- &::before {
- background: white;
- }
-}
diff --git a/src/components/shapes/_dataset.css b/src/components/shapes/_dataset.css
deleted file mode 100644
index 584790d..0000000
--- a/src/components/shapes/_dataset.css
+++ /dev/null
@@ -1,143 +0,0 @@
-/* SG
-# Shapes/Dataset
-
-Description
-
-```
-16px
-
-
-
-
-
-
-
-
-
-12px
-
-
-
-
-```
-*/
-
-.CDB-Shape-Dataset {
- padding-top: 1px;
- &.is-small {
- padding-top: 0;
- }
-}
-
-.CDB-Shape-DatasetItem {
- display: inline-block;
- width: 9px;
- height: 9px;
- margin-left: -10px;
- border: 1px solid $cMainBg;
- border-radius: 50%;
- background: white;
-
- &:first-child {
- position: relative;
- margin-left: 0;
- box-shadow: 3px 0 0 white;
- z-index: 1;
- }
-}
-
-.CDB-Shape-Dataset.is-small {
- .CDB-Shape-DatasetItem {
- width: 6px;
- height: 6px;
- margin-left: -7px;
- &:first-child {
- margin-left: 0;
- box-shadow: 2px 0 0 white;
- }
- }
-}
-
-.CDB-Shape-Dataset.is-blue {
- .CDB-Shape-DatasetItem {
- border: 1px solid var(--color-blue);
- }
-}
-
-.CDB-Shape-Dataset.is-grey {
- .CDB-Shape-DatasetItem {
- border: 1px solid var(--color-line-hover);
- }
-}
-
-.CDB-Shape-Dataset.is-white {
- .CDB-Shape-DatasetItem {
- border: 1px solid var(--color-line-hover);
- background: $cMainBg;
- &:first-child {
- box-shadow: 3px 0 $cMainBg;
- }
- }
-}
-
-.CDB-Shape-Dataset.is-white.is-small {
- .CDB-Shape-DatasetItem:first-child {
- box-shadow: 2px 0 $cMainBg;
- }
-}
diff --git a/src/components/shapes/_dots.css b/src/components/shapes/_dots.css
deleted file mode 100644
index 5a8bd7e..0000000
--- a/src/components/shapes/_dots.css
+++ /dev/null
@@ -1,25 +0,0 @@
-// Shape styles
-// ----------------------------------------------
-
-/* SG
-# Shapes/Dots
-
-You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed:
-
-```
-
-
-```
-*/
-
-.CDB-Shape-dot {
- display: inline-block;
- width: $baseSize;
- height: $baseSize;
- border-radius: 50%;
- background: var(--color-line-secondary);
-
- &.is-selected {
- background: var(--color-text-secondary);
- }
-}
diff --git a/src/components/shapes/_error-circle.css b/src/components/shapes/_error-circle.css
deleted file mode 100644
index 86bb401..0000000
--- a/src/components/shapes/_error-circle.css
+++ /dev/null
@@ -1,101 +0,0 @@
-/* SG
-# Shapes/Error circle
-
-Description
-
-```
-16px
-
-
-
-
-
-
-
-12px
-
-
-
-```
-*/
-
-.CDB-Shape-CircleItem {
- width: 13px;
- height: 13px;
- border: 1px solid $cMainBg;
- border-radius: 50%;
-
- &.is-small {
- width: 9px;
- height: 9px;
- margin: 0 auto;
- }
- &.is-blue {
- border: 1px solid var(--color-blue);
- }
- &.is-white {
- border: 1px solid white;
- }
- &.is-green {
- border: 1px solid $cHighlight;
- }
- &.is-red {
- border: 1px solid var(--color-error);
- }
-}
-
-
-.CDB-Shape-CircleItem--fill {
- &.is-blue {
- border: 1px solid var(--color-blue);
- background: var(--color-blue);
- }
- &.is-white {
- border: 1px solid white;
- background: white;
- }
- &.is-green {
- border: 1px solid $cHighlight;
- background: $cHighlight;
- }
- &.is-red {
- border: 1px solid var(--color-error);
- background: var(--color-error);
- }
-}
diff --git a/src/components/shapes/_hamburguer.css b/src/components/shapes/_hamburguer.css
deleted file mode 100644
index 3aca767..0000000
--- a/src/components/shapes/_hamburguer.css
+++ /dev/null
@@ -1,60 +0,0 @@
-/* SG
-# Shapes/Hamburguer
-
-Description
-
-```
-
-
-
-
-
-```
-*/
-
-.CDB-Shape-hamburguer {
- width: $baseSize * 2;
- &:hover {
- cursor: pointer;
- }
-}
-
-.CDB-Shape-hamburguerItem {
- height: $baseSize / 4;
- margin-bottom: $baseSize / 4;
- background: $cMainBg;
-
- &:last-child {
- margin-bottom: 0;
- }
-}
-
-.CDB-Shape-hamburguer.is-blue {
- .CDB-Shape-hamburguerItem {
- background: var(--color-blue);
- }
-}
-
-.CDB-Shape-hamburguer.is-white {
- .CDB-Shape-hamburguerItem {
- background: white;
- }
-}
diff --git a/src/components/shapes/_magnify.css b/src/components/shapes/_magnify.css
deleted file mode 100644
index b96d3e9..0000000
--- a/src/components/shapes/_magnify.css
+++ /dev/null
@@ -1,113 +0,0 @@
-/* SG
-# Shapes/Magnify
-
-Description
-
-```
-16px
-
-
-
-
-
-
-
-
-12px
-
-
-
-```
-*/
-
-.CDB-Shape-magnify {
- display: block;
- position: relative;
- height: 100%;
-
- &::before {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- width: 11px;
- height: 11px;
- border: 1px solid $cMainBg;
- border-radius: 50%;
- content: '';
- }
-
- &::after {
- display: block;
- position: absolute;
- right: 2px;
- bottom: -1px;
- width: 1px;
- height: 7px;
- transform: rotate(314deg);
- background: $cMainBg;
- content: '';
- }
-}
-
-.CDB-Shape-magnify.is-blue {
- &::before {
- border: 1px solid var(--color-blue);
- }
- &::after {
- background: var(--color-blue);
- }
-}
-
-.CDB-Shape-magnify.is-white {
- &::before {
- border: 1px solid white;
- }
- &::after {
- background: white;
- }
-}
-
-.CDB-Shape-magnify.is-small {
- &::before {
- top: 3px;
- left: 4px;
- width: 5px;
- height: 5px;
- }
-
- &::after {
- display: block;
- position: absolute;
- right: 4px;
- bottom: 3px;
- width: 1px;
- height: 5px;
- transform: rotate(314deg);
- content: '';
- }
-}
diff --git a/src/components/shapes/_move.css b/src/components/shapes/_move.css
deleted file mode 100644
index 5db655f..0000000
--- a/src/components/shapes/_move.css
+++ /dev/null
@@ -1,159 +0,0 @@
-/* SG
-# Shapes/Move
-
-Description
-
-```
-16px
-
-
-
-
-
-
-
-
-12px
-
-
-
-
-```
-*/
-
-.CDB-Shape-rectsHandle {
- position: relative;
- padding: 1px 0 0;
-}
-
-.CDB-Shape-rectsHandle.is-small {
- padding: 3px 0 0 1px;
-
- .CDB-Shape-rectsHandleItem {
- height: 2px;
- margin-bottom: 2px;
-
- &::before {
- left: 5px;
- width: 2px;
- height: 2px;
- }
- &::after {
- width: 2px;
- height: 2px;
- }
- }
-}
-
-.CDB-Shape-rectsHandleItem {
- height: 3px;
- margin-bottom: 3px;
-
- &:last-child {
- margin-bottom: 0;
- }
- &::before {
- display: block;
- position: absolute;
- left: 4px;
- width: 3px;
- height: 3px;
- background: $cMainBg;
- content: '';
- }
-
- &::after {
- display: block;
- position: absolute;
- left: 9px;
- width: 3px;
- height: 3px;
- background: $cMainBg;
- content: '';
- }
-}
-
-.CDB-Shape-rectsHandleItem--blue {
- &::before,
- &::after {
- background: var(--color-blue);
- }
-}
-
-.CDB-Shape-rectsHandleItem--white {
- &::before,
- &::after {
- background: white;
- }
-}
-
-.CDB-Shape-rectsHandleItem--grey {
- &::before,
- &::after {
- background: var(--color-line-hover);
- }
-}
diff --git a/src/components/shapes/_paragraph.css b/src/components/shapes/_paragraph.css
deleted file mode 100644
index 8a0b6a3..0000000
--- a/src/components/shapes/_paragraph.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/* SG
-# Shapes/Paragrapgh
-
-Description
-
-```
-16px
-
-
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
-
-
-
-
-
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
-
-
-
-
-
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
-
-
24px
-
-
-
-
-
-
-
-
-
-
-16px
-
-
-
-
-
-
-
-12px
-
-
-
-```
-*/
-
-.CDB-Shape-threePoints {
- display: inline-block;
- padding: 0 4px;
-}
-.CDB-Shape-threePoints.is-horizontal {
- transform: rotate(90deg);
- padding: 4px 0;
-}
-
-.CDB-Shape-threePointsItem {
- width: 2px;
- height: 2px;
- margin-bottom: 5px;
- background: $cMainBg;
-}
-.CDB-Shape-threePointsItem.is-round {
- border-radius: 50%;
-}
-.CDB-Shape-threePointsItem:last-child {
- margin-bottom: 0;
-}
-
-.CDB-Shape-threePoints.is-small {
- padding-top: 2px;
-}
-.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
- width: 2px;
- height: 2px;
- margin-bottom: 3px;
-}
-
-.CDB-Shape-threePoints.is-medium {
- padding-top: 2px;
-}
-.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
- width: 4px;
- height: 4px;
- margin-bottom: 3px;
-}
-
-.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
- background: var(--color-blue);
-}
-
-.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
- background: white;
-}
diff --git a/src/components/shapes/_toogle-arrow.css b/src/components/shapes/_toogle-arrow.css
deleted file mode 100644
index 3780856..0000000
--- a/src/components/shapes/_toogle-arrow.css
+++ /dev/null
@@ -1,145 +0,0 @@
-/* SG
-# Shapes/Toogle Arrows
-
-Description
-
-```
-16px
-
-
-
-
-
-
-
-12px
-
-
-
-
-
-
-
-16px
-
-
-
-
-
-
-
-12px
-
-
-
-```
-*/
-
-.CDB-ArrowToogle {
- position: relative;
- height: 100%;
-
- &::before {
- display: block;
- position: absolute;
- top: 8px;
- left: 0;
- width: 10px;
- height: 1px;
- transform: rotate(-45deg);
- background: $cMainBg;
- content: '';
- }
- &::after {
- display: block;
- position: absolute;
- top: 8px;
- right: -1px;
- width: 10px;
- height: 1px;
- transform: rotate(45deg);
- background: $cMainBg;
- content: '';
- }
-}
-
-.CDB-ArrowToogle.is-down {
- transform: rotate(180deg);
-}
-
-.CDB-ArrowToogle.is-small {
- &::before {
- left: 2px;
- width: 8px;
- }
- &::after {
- right: 1px;
- width: 8px;
- }
-}
-
-.CDB-ArrowToogle.is-blue {
- &::before {
- background: var(--color-blue);
- }
- &::after {
- background: var(--color-blue);
- }
-}
-
-.CDB-ArrowToogle.is-white {
- &::before {
- background: white;
- }
- &::after {
- background: white;
- }
-}
diff --git a/src/components/shapes/_type.css b/src/components/shapes/_type.css
deleted file mode 100644
index 436f5e9..0000000
--- a/src/components/shapes/_type.css
+++ /dev/null
@@ -1,109 +0,0 @@
-/* SG
-# Shapes/Type
-
-Description
-
-```
-8px
-
-
-
-
-
-```
-*/
-
-.CDB-Shape {
- width: 16px;
- height: 16px;
- text-align: center;
-}
-.CDB-Shape--small {
- width: 8px;
- height: 8px;
-}
-.CDB-Shape--medium {
- width: 24px;
- height: 24px;
-}
-.CDB-Shape:hover {
- cursor: pointer;
-}
-
-.CDB-Type {
- position: relative;
- width: 100%;
- height: 100%;
-}
-
-.CDB-Type-circle {
- position: absolute;
- width: 3px;
- height: 3px;
- border-radius: 50%;
- background: var(--color-line-hover);
-}
-.CDB-Type-circle--01 {
- top: 0;
- left: 0;
-}
-.CDB-Type-circle--02 {
- top: 0;
- right: 0;
-}
-.CDB-Type-circle--03 {
- bottom: 0;
- left: 0;
-}
-.CDB-Type-circle--04 {
- right: 0;
- bottom: 0;
-}
-
-.CDB-Type--polygon::before {
- display: block;
- position: absolute;
- top: 1px;
- right: 1px;
- bottom: 1px;
- left: 1px;
- border: 1px solid var(--color-line-hover);
- content: '';
-}
-
-.CDB-Type--line::before {
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 3px;
- width: 1px;
- transform: rotate(45deg);
- background: var(--color-line-hover);
- content: '';
-}
diff --git a/src/components/shapes/add.css b/src/components/shapes/add.css
new file mode 100644
index 0000000..0c5d8aa
--- /dev/null
+++ b/src/components/shapes/add.css
@@ -0,0 +1,79 @@
+.CDB-Shape {
+ width: 16px;
+ height: 16px;
+ text-align: center;
+
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.CDB-Shape--medium {
+ width: 24px;
+ height: 24px;
+}
+
+.CDB-Shape-add {
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ right: 1px;
+ bottom: 7px;
+ left: 0;
+ height: 1px;
+ background: var(--color-black);
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ top: 1;
+ bottom: 0;
+ left: 7px;
+ width: 1px;
+ background: var(--color-black);
+ content: '';
+ }
+}
+
+.CDB-Shape-add.is-small {
+ &::before {
+ display: block;
+ position: absolute;
+ right: 3px;
+ bottom: 7px;
+ left: 4px;
+ height: 1px;
+ background: var(--color-black);
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ top: 4px;
+ bottom: 3px;
+ left: 8px;
+ width: 1px;
+ background: var(--color-black);
+ content: '';
+ }
+}
+
+.CDB-Shape-add.is-blue {
+ &::before,
+ &::after {
+ background: var(--color-blue);
+ }
+}
+
+.CDB-Shape-add.is-white {
+ &::before,
+ &::after {
+ background: white;
+ }
+}
diff --git a/src/components/shapes/_arrow.css b/src/components/shapes/arrow.css
similarity index 69%
rename from src/components/shapes/_arrow.css
rename to src/components/shapes/arrow.css
index 44ac86f..e4e7fe0 100644
--- a/src/components/shapes/_arrow.css
+++ b/src/components/shapes/arrow.css
@@ -1,26 +1,8 @@
-/* SG
-# Shapes/Arrow
-
-Description
-
-```
-
-
-
-```
-*/
-
.CDB-Shape-Arrow {
position: relative;
width: 1px;
height: 8px;
- background: $cMainBg;
+ background: var(--color-black);
&::before {
display: block;
@@ -30,7 +12,7 @@ Description
width: 5px;
height: 1px;
transform: rotate(45deg);
- background: $cMainBg;
+ background: var(--color-black);
content: '';
}
@@ -42,9 +24,10 @@ Description
width: 5px;
height: 1px;
transform: rotate(-45deg);
- background: $cMainBg;
+ background: var(--color-black);
content: '';
}
+
&.is-up {
top: 6px;
right: 9px;
diff --git a/src/components/shapes/check-circle.css b/src/components/shapes/check-circle.css
new file mode 100644
index 0000000..86e0f1b
--- /dev/null
+++ b/src/components/shapes/check-circle.css
@@ -0,0 +1,101 @@
+.CDB-Shape-CircleItem {
+ width: 14px;
+ height: 14px;
+ border: 1px solid var(--color-black);
+ border-radius: 50%;
+
+ &.is-small {
+ width: 12px;
+ height: 12px;
+ transform: translateY(2px);
+ }
+
+ &.is-blue {
+ border: 1px solid var(--color-blue);
+ }
+
+ &.is-white {
+ border: 1px solid white;
+ }
+}
+
+.CDB-Shape-tick {
+ display: block;
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ width: 1px;
+ transform: rotate(-45deg);
+ background: var(--color-black);
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ width: 1px;
+ transform: rotate(45deg);
+ background: var(--color-black);
+ content: '';
+ }
+
+ &.is-medium {
+ &::before {
+ top: 5px;
+ left: 4px;
+ height: 4px;
+ }
+
+ &::after {
+ top: 3px;
+ right: 5px;
+ height: 6px;
+ }
+ }
+
+ &.is-small {
+ &::before {
+ top: 4px;
+ left: 2px;
+ height: 3px;
+ }
+
+ &::after {
+ top: 2px;
+ right: 3px;
+ height: 5px;
+ }
+ }
+}
+
+.CDB-Shape-tick.is-blue {
+ &::before {
+ background: var(--color-blue);
+ }
+
+ &::after {
+ background: var(--color-blue);
+ }
+}
+
+.CDB-Shape-tick.is-white {
+ &::before {
+ background: white;
+ }
+
+ &::after {
+ background: white;
+ }
+}
+
+.CDB-Shape-tick.is-green {
+ &::before {
+ background: var(--color-highlight);
+ }
+ &::after {
+ background: var(--color-highlight);
+ }
+}
diff --git a/src/components/shapes/_close.css b/src/components/shapes/close.css
similarity index 54%
rename from src/components/shapes/_close.css
rename to src/components/shapes/close.css
index f2da5e1..e968382 100644
--- a/src/components/shapes/_close.css
+++ b/src/components/shapes/close.css
@@ -1,48 +1,3 @@
-/* SG
-# Shapes/Close
-
-Description
-
-```
-16px
-
-
-
-
-
-
-
-12px
-
-
-
-```
-*/
-
.CDB-Shape-close {
display: block;
position: relative;
@@ -53,15 +8,16 @@ Description
position: absolute;
width: 1px;
transform: rotate(-45deg);
- background: $cMainBg;
+ background: var(--color-black);
content: '';
}
+
&::after {
display: block;
position: absolute;
width: 1px;
transform: rotate(45deg);
- background: $cMainBg;
+ background: var(--color-black);
content: '';
}
@@ -71,6 +27,7 @@ Description
left: 7px;
height: 20px;
}
+
&::after {
top: -2px;
right: 8px;
@@ -84,6 +41,7 @@ Description
left: 7px;
height: 12px;
}
+
&::after {
top: 2px;
right: 8px;
@@ -97,6 +55,7 @@ Description
left: 6px;
height: 7px;
}
+
&::after {
top: 3px;
right: 6px;
@@ -110,6 +69,7 @@ Description
left: 4px;
height: 5px;
}
+
&::after {
top: 2px;
right: 4px;
@@ -122,6 +82,7 @@ Description
&::before {
background: var(--color-blue);
}
+
&::after {
background: var(--color-blue);
}
@@ -131,6 +92,7 @@ Description
&::before {
background: white;
}
+
&::after {
background: white;
}
@@ -140,6 +102,7 @@ Description
&::before {
background: var(--color-error);
}
+
&::after {
background: var(--color-error);
}
diff --git a/src/components/shapes/dash.css b/src/components/shapes/dash.css
new file mode 100644
index 0000000..a3335f3
--- /dev/null
+++ b/src/components/shapes/dash.css
@@ -0,0 +1,34 @@
+.CDB-Shape-dash {
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ right: 2px;
+ bottom: 7px;
+ left: 2px;
+ height: 1px;
+ background: var(--color-black);
+ content: '';
+ }
+}
+
+.CDB-Shape-dash.is-small {
+ &::before {
+ right: 3px;
+ left: 3px;
+ }
+}
+
+.CDB-Shape-dash.is-blue {
+ &::before {
+ background: var(--color-blue);
+ }
+}
+
+.CDB-Shape-dash.is-white {
+ &::before {
+ background: white;
+ }
+}
diff --git a/src/components/shapes/dataset.css b/src/components/shapes/dataset.css
new file mode 100644
index 0000000..a4b4470
--- /dev/null
+++ b/src/components/shapes/dataset.css
@@ -0,0 +1,65 @@
+.CDB-Shape-Dataset {
+ padding-top: 1px;
+
+ &.is-small {
+ padding-top: 0;
+ }
+}
+
+.CDB-Shape-DatasetItem {
+ display: inline-block;
+ width: 9px;
+ height: 9px;
+ margin-left: -10px;
+ border: 1px solid var(--color-black);
+ border-radius: 50%;
+ background: white;
+
+ &:first-child {
+ position: relative;
+ margin-left: 0;
+ box-shadow: 3px 0 0 white;
+ z-index: 1;
+ }
+}
+
+.CDB-Shape-Dataset.is-small {
+ .CDB-Shape-DatasetItem {
+ width: 6px;
+ height: 6px;
+ margin-left: -7px;
+
+ &:first-child {
+ margin-left: 0;
+ box-shadow: 2px 0 0 white;
+ }
+ }
+}
+
+.CDB-Shape-Dataset.is-blue {
+ .CDB-Shape-DatasetItem {
+ border: 1px solid var(--color-blue);
+ }
+}
+
+.CDB-Shape-Dataset.is-grey {
+ .CDB-Shape-DatasetItem {
+ border: 1px solid var(--color-line-hover);
+ }
+}
+
+.CDB-Shape-Dataset.is-white {
+ .CDB-Shape-DatasetItem {
+ border: 1px solid var(--color-line-hover);
+ background: var(--color-black);
+ &:first-child {
+ box-shadow: 3px 0 var(--color-black);
+ }
+ }
+}
+
+.CDB-Shape-Dataset.is-white.is-small {
+ .CDB-Shape-DatasetItem:first-child {
+ box-shadow: 2px 0 var(--color-black);
+ }
+}
diff --git a/src/components/shapes/dots.css b/src/components/shapes/dots.css
new file mode 100644
index 0000000..be288f6
--- /dev/null
+++ b/src/components/shapes/dots.css
@@ -0,0 +1,11 @@
+.CDB-Shape-dot {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--color-line-secondary);
+
+ &.is-selected {
+ background: var(--color-text-secondary);
+ }
+}
diff --git a/src/components/shapes/error-circle.css b/src/components/shapes/error-circle.css
new file mode 100644
index 0000000..d27b0d1
--- /dev/null
+++ b/src/components/shapes/error-circle.css
@@ -0,0 +1,51 @@
+.CDB-Shape-CircleItem {
+ width: 13px;
+ height: 13px;
+ border: 1px solid var(--color-black);
+ border-radius: 50%;
+
+ &.is-small {
+ width: 9px;
+ height: 9px;
+ margin: 0 auto;
+ }
+
+ &.is-blue {
+ border: 1px solid var(--color-blue);
+ }
+
+ &.is-white {
+ border: 1px solid white;
+ }
+
+ &.is-green {
+ border: 1px solid var(--color-highlight);
+ }
+
+ &.is-red {
+ border: 1px solid var(--color-error);
+ }
+}
+
+
+.CDB-Shape-CircleItem--fill {
+ &.is-blue {
+ border: 1px solid var(--color-blue);
+ background: var(--color-blue);
+ }
+
+ &.is-white {
+ border: 1px solid white;
+ background: white;
+ }
+
+ &.is-green {
+ border: 1px solid var(--color-highlight);
+ background: var(--color-highlight);
+ }
+
+ &.is-red {
+ border: 1px solid var(--color-error);
+ background: var(--color-error);
+ }
+}
diff --git a/src/components/shapes/hamburguer.css b/src/components/shapes/hamburguer.css
new file mode 100644
index 0000000..cdb93e5
--- /dev/null
+++ b/src/components/shapes/hamburguer.css
@@ -0,0 +1,28 @@
+.CDB-Shape-hamburguer {
+ width: 16px;
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.CDB-Shape-hamburguerItem {
+ height: 2px;
+ margin-bottom: 2px;
+ background: var(--color-black);
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
+
+.CDB-Shape-hamburguer.is-blue {
+ .CDB-Shape-hamburguerItem {
+ background: var(--color-blue);
+ }
+}
+
+.CDB-Shape-hamburguer.is-white {
+ .CDB-Shape-hamburguerItem {
+ background: white;
+ }
+}
diff --git a/src/components/shapes/magnify.css b/src/components/shapes/magnify.css
new file mode 100644
index 0000000..3408950
--- /dev/null
+++ b/src/components/shapes/magnify.css
@@ -0,0 +1,68 @@
+.CDB-Shape-magnify {
+ display: block;
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 11px;
+ height: 11px;
+ border: 1px solid var(--color-black);
+ border-radius: 50%;
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ right: 2px;
+ bottom: -1px;
+ width: 1px;
+ height: 7px;
+ transform: rotate(314deg);
+ background: var(--color-black);
+ content: '';
+ }
+}
+
+.CDB-Shape-magnify.is-blue {
+ &::before {
+ border: 1px solid var(--color-blue);
+ }
+
+ &::after {
+ background: var(--color-blue);
+ }
+}
+
+.CDB-Shape-magnify.is-white {
+ &::before {
+ border: 1px solid white;
+ }
+ &::after {
+ background: white;
+ }
+}
+
+.CDB-Shape-magnify.is-small {
+ &::before {
+ top: 3px;
+ left: 4px;
+ width: 5px;
+ height: 5px;
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ right: 4px;
+ bottom: 3px;
+ width: 1px;
+ height: 5px;
+ transform: rotate(314deg);
+ content: '';
+ }
+}
diff --git a/src/components/shapes/move.css b/src/components/shapes/move.css
new file mode 100644
index 0000000..d310177
--- /dev/null
+++ b/src/components/shapes/move.css
@@ -0,0 +1,72 @@
+.CDB-Shape-rectsHandle {
+ position: relative;
+ padding: 1px 0 0;
+}
+
+.CDB-Shape-rectsHandle.is-small {
+ padding: 3px 0 0 1px;
+
+ .CDB-Shape-rectsHandleItem {
+ height: 2px;
+ margin-bottom: 2px;
+
+ &::before {
+ left: 5px;
+ width: 2px;
+ height: 2px;
+ }
+ &::after {
+ width: 2px;
+ height: 2px;
+ }
+ }
+}
+
+.CDB-Shape-rectsHandleItem {
+ height: 3px;
+ margin-bottom: 3px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ &::before {
+ display: block;
+ position: absolute;
+ left: 4px;
+ width: 3px;
+ height: 3px;
+ background: var(--color-black);
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ left: 9px;
+ width: 3px;
+ height: 3px;
+ background: var(--color-black);
+ content: '';
+ }
+}
+
+.CDB-Shape-rectsHandleItem--blue {
+ &::before,
+ &::after {
+ background: var(--color-blue);
+ }
+}
+
+.CDB-Shape-rectsHandleItem--white {
+ &::before,
+ &::after {
+ background: white;
+ }
+}
+
+.CDB-Shape-rectsHandleItem--grey {
+ &::before,
+ &::after {
+ background: var(--color-line-hover);
+ }
+}
diff --git a/src/components/shapes/paragraph.css b/src/components/shapes/paragraph.css
new file mode 100644
index 0000000..ceafaf4
--- /dev/null
+++ b/src/components/shapes/paragraph.css
@@ -0,0 +1,49 @@
+.CDB-Shape-paragraph {
+ padding-top: 3px;
+ text-align: left;
+}
+
+.CDB-Shape-paragraph.is-center {
+ text-align: center;
+}
+
+.CDB-Shape-paragraph.is-right {
+ text-align: right;
+}
+
+.CDB-Shape-paragraphItem {
+ height: 1px;
+ margin-bottom: 2px;
+}
+
+.CDB-Shape-paragraphItem:last-child {
+ margin-bottom: 0;
+}
+
+.CDB-Shape-paragraphBar {
+ display: inline-block;
+ height: 1px;
+ margin-bottom: 2px;
+ background: var(--color-line-secondary);
+ vertical-align: top;
+}
+
+.CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
+ background: var(--color-blue);
+}
+
+.CDB-Shape-paragraphBar--01 {
+ width: 12px;
+}
+
+.CDB-Shape-paragraphBar--02 {
+ width: 6px;
+}
+
+.CDB-Shape-paragraphBar--03 {
+ width: 8px;
+}
+
+.CDB-Shape-paragraphBar--04 {
+ width: 4px;
+}
diff --git a/src/components/shapes/threePoints.css b/src/components/shapes/threePoints.css
new file mode 100644
index 0000000..cbf2bbd
--- /dev/null
+++ b/src/components/shapes/threePoints.css
@@ -0,0 +1,52 @@
+.CDB-Shape-threePoints {
+ display: inline-block;
+ padding: 0 4px;
+}
+
+.CDB-Shape-threePoints.is-horizontal {
+ transform: rotate(90deg);
+ padding: 4px 0;
+}
+
+.CDB-Shape-threePointsItem {
+ width: 2px;
+ height: 2px;
+ margin-bottom: 5px;
+ background: var(--color-black);
+}
+
+.CDB-Shape-threePointsItem.is-round {
+ border-radius: 50%;
+}
+
+.CDB-Shape-threePointsItem:last-child {
+ margin-bottom: 0;
+}
+
+.CDB-Shape-threePoints.is-small {
+ padding-top: 2px;
+}
+
+.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
+ width: 2px;
+ height: 2px;
+ margin-bottom: 3px;
+}
+
+.CDB-Shape-threePoints.is-medium {
+ padding-top: 2px;
+}
+
+.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
+ width: 4px;
+ height: 4px;
+ margin-bottom: 3px;
+}
+
+.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
+ background: var(--color-blue);
+}
+
+.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
+ background: white;
+}
diff --git a/src/components/shapes/toogle-arrow.css b/src/components/shapes/toogle-arrow.css
new file mode 100644
index 0000000..262a3fc
--- /dev/null
+++ b/src/components/shapes/toogle-arrow.css
@@ -0,0 +1,61 @@
+.CDB-ArrowToogle {
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ top: 8px;
+ left: 0;
+ width: 10px;
+ height: 1px;
+ transform: rotate(-45deg);
+ background: var(--color-black);
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ top: 8px;
+ right: -1px;
+ width: 10px;
+ height: 1px;
+ transform: rotate(45deg);
+ background: var(--color-black);
+ content: '';
+ }
+}
+
+.CDB-ArrowToogle.is-down {
+ transform: rotate(180deg);
+}
+
+.CDB-ArrowToogle.is-small {
+ &::before {
+ left: 2px;
+ width: 8px;
+ }
+ &::after {
+ right: 1px;
+ width: 8px;
+ }
+}
+
+.CDB-ArrowToogle.is-blue {
+ &::before {
+ background: var(--color-blue);
+ }
+ &::after {
+ background: var(--color-blue);
+ }
+}
+
+.CDB-ArrowToogle.is-white {
+ &::before {
+ background: white;
+ }
+ &::after {
+ background: white;
+ }
+}
diff --git a/src/components/shapes/type.css b/src/components/shapes/type.css
new file mode 100644
index 0000000..25988fc
--- /dev/null
+++ b/src/components/shapes/type.css
@@ -0,0 +1,77 @@
+.CDB-Shape {
+ width: 16px;
+ height: 16px;
+ text-align: center;
+}
+
+.CDB-Shape--small {
+ width: 8px;
+ height: 8px;
+}
+
+.CDB-Shape--medium {
+ width: 24px;
+ height: 24px;
+}
+
+.CDB-Shape:hover {
+ cursor: pointer;
+}
+
+.CDB-Type {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.CDB-Type-circle {
+ position: absolute;
+ width: 3px;
+ height: 3px;
+ border-radius: 50%;
+ background: var(--color-line-hover);
+}
+
+.CDB-Type-circle--01 {
+ top: 0;
+ left: 0;
+}
+
+.CDB-Type-circle--02 {
+ top: 0;
+ right: 0;
+}
+
+.CDB-Type-circle--03 {
+ bottom: 0;
+ left: 0;
+}
+
+.CDB-Type-circle--04 {
+ right: 0;
+ bottom: 0;
+}
+
+.CDB-Type--polygon::before {
+ display: block;
+ position: absolute;
+ top: 1px;
+ right: 1px;
+ bottom: 1px;
+ left: 1px;
+ border: 1px solid var(--color-line-hover);
+ content: '';
+}
+
+.CDB-Type--line::before {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 3px;
+ width: 1px;
+ transform: rotate(45deg);
+ background: var(--color-line-hover);
+ content: '';
+}