From d8a5d45cc33716ae1f4a5583c007eafb6a8938c2 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Fri, 29 Jan 2016 15:42:25 +0100 Subject: [PATCH] add shape circle --- .../cdb-components/shapes/check-circle.scss | 78 +++++++++++++++++++ src/scss/cdb-components/shapes/close.scss | 70 +++++++++++------ .../cdb-components/shapes/error-circle.scss | 78 +++++++++++++++++++ src/scss/cdb-components/shapes/magnify.scss | 9 --- src/scss/cdb-components/shapes/move.scss | 10 --- src/scss/cdb-components/shapes/subtract.scss | 9 --- .../cdb-components/shapes/threePoints.scss | 9 --- .../cdb-components/shapes/toogle-arrow.scss | 10 --- 8 files changed, 203 insertions(+), 70 deletions(-) create mode 100644 src/scss/cdb-components/shapes/check-circle.scss create mode 100644 src/scss/cdb-components/shapes/error-circle.scss 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%;