diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index beebd56..a07b1ff 100644 Binary files a/src/fonts/cartoIcon.eot and b/src/fonts/cartoIcon.eot differ diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index aac2414..5fbce8e 100644 Binary files a/src/fonts/cartoIcon.ttf and b/src/fonts/cartoIcon.ttf differ diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 86a0a3d..79b2a79 100644 Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss new file mode 100644 index 0000000..bad5011 --- /dev/null +++ b/src/scss/cdb-components/shapes/close.scss @@ -0,0 +1,115 @@ +/* SG +# Shapes/Close + +Description + +``` +

16px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape { + width: 16px; + height: 16px; + text-align: center; + &:hover { + cursor: pointer; + } +} + +.CDB-Shape-close { + display: block; + position: relative; + height: 100%; + + &::before { + display: block; + position: absolute; + top: -2px; + left: 7px; + width: 1px; + height: 20px; + transform: rotate(-45deg); + background: $cMainDark; + content: ''; + } + &::after { + display: block; + position: absolute; + top: -2px; + right: 8px; + width: 1px; + height: 20px; + transform: rotate(45deg); + background: $cMainDark; + content: ''; + } + &.is-small { + &::before { + top: 2px; + left: 7px; + height: 12px; + transform: rotate(-45deg); + } + &::after { + top: 2px; + right: 8px; + height: 12px; + } + } +} + +.CDB-Shape-close.is-blue { + &::before { + background: $cBlue; + } + &::after { + background: $cBlue; + } +} + +.CDB-Shape-close.is-white { + &::before { + background: $cWhite; + } + &::after { + background: $cWhite; + } +} diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/magnify.scss index f5857d3..3dc9edd 100644 --- a/src/scss/cdb-components/shapes/magnify.scss +++ b/src/scss/cdb-components/shapes/magnify.scss @@ -4,32 +4,69 @@ Description ``` +

16px

-
+
+
+
-
+
+
+
-
+
+
+
+
+
+
+
+
+
+

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` */ @import '../../cdb-variables/colors'; +.CDB-Shape { + width: 16px; + height: 16px; + text-align: center; + &:hover { + cursor: pointer; + } +} + .CDB-Shape-magnify { + display: block; position: relative; - width: 32px; - height: 32px; + height: 100%; &::before { display: block; position: absolute; - top: 10px; - left: 10px; - width: 7px; - height: 7px; + top: 0; + left: 0; + width: 11px; + height: 11px; border: 1px solid $cMainDark; border-radius: 50%; content: ''; @@ -38,17 +75,14 @@ Description &::after { display: block; position: absolute; - top: 17px; - left: 19px; + right: 2px; + bottom: -1px; width: 1px; - height: 6px; + height: 7px; transform: rotate(314deg); background: $cMainDark; content: ''; } - &:hover { - cursor: pointer; - } } .CDB-Shape-magnify.is-blue { @@ -68,3 +102,23 @@ Description background: $cWhite; } } + +.CDB-Shape-magnify.is-small { + &::before { + top: 3px; + left: 3px; + width: 6px; + height: 6px; + } + + &::after { + display: block; + position: absolute; + right: 4px; + bottom: 2px; + width: 1px; + height: 5px; + transform: rotate(314deg); + content: ''; + } +} diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index 7234a32..cf5b1d7 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -4,25 +4,64 @@ Description ``` +

16px

-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
``` @@ -30,24 +69,38 @@ Description @import '../../cdb-variables/colors'; -.CDB-Shape-threePoints { - display: inline-block; - position: relative; - width: 3px; - height: 15px; - padding: 0 12; - +.CDB-Shape { + width: 16px; + height: 16px; + text-align: center; &:hover { cursor: pointer; } } +.CDB-Shape-threePoints { + display: inline-block; + height: 100%; +} + .CDB-Shape-threePointsItem { - width: 3px; - height: 3px; - margin-bottom: 3px; - border-radius: 50%; + width: 2px; + height: 2px; + margin-bottom: 5px; background: $cMainDark; + &:last-child { + margin-bottom: 0; + } +} + +.CDB-Shape-threePoints.is-small { + padding-top: 2px; + + .CDB-Shape-threePointsItem { + width: 2px; + height: 2px; + margin-bottom: 3px; + } } .CDB-Shape-threePoints.is-blue {