diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss
new file mode 100644
index 0000000..cb2022f
--- /dev/null
+++ b/src/scss/cdb-components/shapes/check-circle.scss
@@ -0,0 +1,78 @@
+/* SG
+# Shapes/Check circle
+
+Description
+
+```
+16px
+
+
+
+
+
+
+
+12px
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-CircleItem {
+ width: 14px;
+ height: 14px;
+ border: 1px solid $cMainDark;
+ border-radius: 50%;
+
+ &.is-small {
+ width: 12px;
+ height: 12px;
+ margin: 2px auto;
+ }
+ &.is-blue {
+ border: 1px solid $cBlue;
+ }
+ &.is-white {
+ border: 1px solid $cWhite;
+ }
+}
+
diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss
index bad5011..381dd8d 100644
--- a/src/scss/cdb-components/shapes/close.scss
+++ b/src/scss/cdb-components/shapes/close.scss
@@ -7,17 +7,17 @@ Description
16px
@@ -27,17 +27,17 @@ Description
12px
```
@@ -45,15 +45,6 @@ Description
@import '../../cdb-variables/colors';
-.CDB-Shape {
- width: 16px;
- height: 16px;
- text-align: center;
- &:hover {
- cursor: pointer;
- }
-}
-
.CDB-Shape-close {
display: block;
position: relative;
@@ -62,10 +53,7 @@ Description
&::before {
display: block;
position: absolute;
- top: -2px;
- left: 7px;
width: 1px;
- height: 20px;
transform: rotate(-45deg);
background: $cMainDark;
content: '';
@@ -73,20 +61,30 @@ Description
&::after {
display: block;
position: absolute;
- top: -2px;
- right: 8px;
width: 1px;
- height: 20px;
transform: rotate(45deg);
background: $cMainDark;
content: '';
}
- &.is-small {
+
+ &.is-huge {
+ &::before {
+ top: -2px;
+ left: 7px;
+ height: 20px;
+ }
+ &::after {
+ top: -2px;
+ right: 8px;
+ height: 20px;
+ }
+ }
+
+ &.is-large {
&::before {
top: 2px;
left: 7px;
height: 12px;
- transform: rotate(-45deg);
}
&::after {
top: 2px;
@@ -94,6 +92,32 @@ Description
height: 12px;
}
}
+
+ &.is-medium {
+ &::before {
+ top: 3px;
+ left: 6px;
+ height: 8px;
+ }
+ &::after {
+ top: 3px;
+ right: 7px;
+ height: 8px;
+ }
+ }
+
+ &.is-small {
+ &::before {
+ top: 2px;
+ left: 4px;
+ height: 6px;
+ }
+ &::after {
+ top: 2px;
+ right: 5px;
+ height: 6px;
+ }
+ }
}
.CDB-Shape-close.is-blue {
diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss
new file mode 100644
index 0000000..73c00d4
--- /dev/null
+++ b/src/scss/cdb-components/shapes/error-circle.scss
@@ -0,0 +1,78 @@
+/* SG
+# Shapes/Error circle
+
+Description
+
+```
+16px
+
+
+
+
+
+
+
+12px
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-CircleItem {
+ width: 14px;
+ height: 14px;
+ border: 1px solid $cMainDark;
+ border-radius: 50%;
+
+ &.is-small {
+ width: 10px;
+ height: 10px;
+ margin: 2px auto;
+ }
+ &.is-blue {
+ border: 1px solid $cBlue;
+ }
+ &.is-white {
+ border: 1px solid $cWhite;
+ }
+}
+
diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/magnify.scss
index 3dc9edd..cf3edc4 100644
--- a/src/scss/cdb-components/shapes/magnify.scss
+++ b/src/scss/cdb-components/shapes/magnify.scss
@@ -46,15 +46,6 @@ Description
@import '../../cdb-variables/colors';
-.CDB-Shape {
- width: 16px;
- height: 16px;
- text-align: center;
- &:hover {
- cursor: pointer;
- }
-}
-
.CDB-Shape-magnify {
display: block;
position: relative;
diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/move.scss
index cdb8d40..e1f423b 100644
--- a/src/scss/cdb-components/shapes/move.scss
+++ b/src/scss/cdb-components/shapes/move.scss
@@ -69,16 +69,6 @@ Description
@import '../../cdb-variables/colors';
-.CDB-Shape {
- width: 16px;
- height: 16px;
- text-align: center;
-
- &:hover {
- cursor: pointer;
- }
-}
-
.CDB-Shape-Move {
padding: 1px 0 0;
}
diff --git a/src/scss/cdb-components/shapes/subtract.scss b/src/scss/cdb-components/shapes/subtract.scss
index c80d079..5664987 100644
--- a/src/scss/cdb-components/shapes/subtract.scss
+++ b/src/scss/cdb-components/shapes/subtract.scss
@@ -45,15 +45,6 @@ Description
@import '../../cdb-variables/colors';
-.CDB-Shape {
- width: 16px;
- height: 16px;
- text-align: center;
- &:hover {
- cursor: pointer;
- }
-}
-
.CDB-Shape-subtract {
position: relative;
height: 100%;
diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss
index cf5b1d7..7f73c0a 100644
--- a/src/scss/cdb-components/shapes/threePoints.scss
+++ b/src/scss/cdb-components/shapes/threePoints.scss
@@ -69,15 +69,6 @@ Description
@import '../../cdb-variables/colors';
-.CDB-Shape {
- width: 16px;
- height: 16px;
- text-align: center;
- &:hover {
- cursor: pointer;
- }
-}
-
.CDB-Shape-threePoints {
display: inline-block;
height: 100%;
diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss
index da35dfb..86f302a 100644
--- a/src/scss/cdb-components/shapes/toogle-arrow.scss
+++ b/src/scss/cdb-components/shapes/toogle-arrow.scss
@@ -85,16 +85,6 @@ Description
@import '../../cdb-variables/colors';
-.CDB-Shape {
- width: 16px;
- height: 16px;
- text-align: center;
-
- &:hover {
- cursor: pointer;
- }
-}
-
.CDB-ArrowToogle {
position: relative;
height: 100%;