From ac500fb06eab42544b80b5507445c6c93af43140 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Thu, 28 Jan 2016 16:14:00 +0100 Subject: [PATCH] add shapes --- src/fonts/cartoIcon.eot | Bin 18856 -> 18856 bytes src/fonts/cartoIcon.ttf | Bin 18684 -> 18684 bytes src/fonts/cartoIcon.woff | Bin 11836 -> 11836 bytes src/scss/cdb-components/shapes/close.scss | 115 ++++++++++++++++++ src/scss/cdb-components/shapes/magnify.scss | 84 ++++++++++--- .../cdb-components/shapes/threePoints.scss | 101 +++++++++++---- 6 files changed, 261 insertions(+), 39 deletions(-) create mode 100644 src/scss/cdb-components/shapes/close.scss diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index beebd56d80a7a94791563089b2e17c72a71e1310..a07b1ff2e07227be842edb645583b412f26abaea 100644 GIT binary patch delta 55 zcmZ26nQ_Hr#tAmemp8Obv|q>Eo40S`hpEyn8!pH5+k9oG F005!y7fb*E delta 55 zcmZ26nQ_Hr#tAme*R?w)+OK2o-e@!N!&K=G?d$RUHeVUI8GkVV!KHIMG-34S1&kaX E0B3C!(EtDd diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index aac2414427a64899e9651b18c7289d8681eb175f..5fbce8e1e18568bfe0925802a57f70e3b9683cfd 100644 GIT binary patch delta 47 wcmew}k@3$&#tDwhy?Og4x=fXB*>E|Y-{va=H{&k`Ah>jX+AA2n@e79s0Oao!5&!@I delta 47 wcmew}k@3$&#tDwh-5YHtx=fYs(7qneZ}XLboADO|5L`O9LlZ`C{KDY@0K#Mv6aWAK diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 86a0a3d7f5a362080bf1696c33bc8d4664a8103e..79b2a79d38e099205ea6dee043e043705074bfb0 100644 GIT binary patch delta 61 zcmV-D0K)&gT)bS6c>|4ZzOj6^CMnHR^yB$$zA|t#{sM|HTslAP6^wpU{{K5y1mhnd TmxF-`Bnkkih7aGfTPNWLnvEO9 delta 61 zcmV-D0K)&gT)bS6c>{~FJh6PXCMoUw#_{|%Um3U=e*r}pE}h$<38UYX|NqVv!T1Nr T16px +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

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 {