From dc4819fe38d9a9102ed6ebeb63d9498d8fd5c9c2 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Wed, 27 Jan 2016 19:17:16 +0100 Subject: [PATCH 1/8] add first shapes - #12 --- 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.scss | 252 ------------------ src/scss/cdb-components/shapes/arrow.scss | 86 ++++++ src/scss/cdb-components/shapes/dots.scss | 28 ++ .../cdb-components/shapes/hamburguer.scss | 63 +++++ src/scss/cdb-components/shapes/magnify.scss | 70 +++++ .../cdb-components/shapes/threePoints.scss | 64 +++++ 9 files changed, 311 insertions(+), 252 deletions(-) delete mode 100644 src/scss/cdb-components/shapes.scss create mode 100644 src/scss/cdb-components/shapes/arrow.scss create mode 100644 src/scss/cdb-components/shapes/dots.scss create mode 100644 src/scss/cdb-components/shapes/hamburguer.scss create mode 100644 src/scss/cdb-components/shapes/magnify.scss create mode 100644 src/scss/cdb-components/shapes/threePoints.scss diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 2c7eb83aa37161bf0e107e884cf4430e3bfce937..beebd56d80a7a94791563089b2e17c72a71e1310 100644 GIT binary patch delta 52 zcmZ26nQ_Hr#tAk|*R?0wZD87HGx5VTDedd={5D@1xEX&j0KuhmJ2YYR<^_x#9sm}% B6Ey$; delta 52 zcmZ26nQ_Hr#tAk|+@B}fZD8_UH1WeUsn6W;{5D@1xEX&j0KuhmZ80!<^8!W=4*(S> B6EOe) diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 323c7e1e2413a1d96777bd9cc3449e7df461e546..aac2414427a64899e9651b18c7289d8681eb175f 100644 GIT binary patch delta 45 ucmew}k@3$&#tBYL8*L`KOq0^S9?x&{m4Tb_7XuJnI=4d;MsNJW;Q;`W_z?jB delta 45 ucmew}k@3$&#tBYLzKbThOq2S|9nWv`m4Tb_7XuJnI@cBhqc?ux@Bjdk+z|l) diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 05a4401d08f5b55324963f3d61dceff9641efe81..86a0a3d7f5a362080bf1696c33bc8d4664a8103e 100644 GIT binary patch delta 59 zcmV-B0L1^iT)bS6dIGULv3$2CDE!9p{5D@1xEX%|MHnuf+o1`g-<1FV&K1G<2gv1M RU;>E(0CtKFBC}g3;Ra~|8?*ob delta 59 zcmV-B0L1^iT)bS6dIC+Nv3$2CDA&^C`E9;3a5Me_iZEO{*A@e#-<1FV&K1G<2gv1M RU;>E(0HH(=AG2F0;RbxK90LFV diff --git a/src/scss/cdb-components/shapes.scss b/src/scss/cdb-components/shapes.scss deleted file mode 100644 index 6b29308..0000000 --- a/src/scss/cdb-components/shapes.scss +++ /dev/null @@ -1,252 +0,0 @@ -// Shape styles -// ---------------------------------------------- - -/* SG -# Shapes/Dot - -You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed: - -``` - - -``` -*/ - -@import '../cdb-utilities/mixins'; - - -.CDB-Shape-dot { - display: inline-block; - width: 8px; - min-width: 8px; - height: 8px; - border-radius: 8px; -} - -/* SG -# Shapes/threePoints - -Description - -``` -
-``` -*/ - -.CDB-Shape-threePoints { - display: inline-block; - position: relative; - width: 3px; - height: 16px; - margin-right: -7px; - margin-left: 6px; - padding: 0 7px 0 10px; - text-align: center; - vertical-align: middle; - - &:after, - &:before { - display: inline-block; - position: absolute; - width: 3px; - height: 3px; - border-radius: 50%; - content: ''; - z-index: 1; - } - - &:before { - top: 0; - right: 7px; - } - - &:after { - right: 7px; - bottom: 1px; - } - - &:hover { - cursor: pointer; - } -} - -.CDB-Shape-threePointsItem { - display: block; - position: absolute; - top: 6px; - left: 7px; - width: 3px; - height: 3px; - border-radius: 50%; -} - -/* SG -# Shapes/lens - -Description - -``` -
-``` -*/ - -.CDB-Shape-lens { - display: inline-block; - position: relative; - width: 16px; - height: 16px; - - &:after, - &:before { - position: absolute; - content: ''; - } - &:after { - top: 0; - left: 0; - width: 8px; - height: 8px; - border: 1px solid transparent; - border-radius: 10px; - } - &:before { - @include css3-prefix(transform, rotate(45deg)); - right: 3px; - bottom: 5px; - width: 6px; - height: 1px; - } - - &:hover { - cursor: pointer; - } -} - -/* SG -# Shapes/hamburguer - -Description - -``` -
-``` -*/ - -.CDB-Shape-hamburguer { - display: inline-block; - position: relative; - width: 16px; - height: 2px; - border: 0; - background: #FFF; - vertical-align: middle; - - &:before, - &:after { - display: block; - position: absolute; - width: 16px; - height: 2px; - background: #FFF; - content: ''; - } - &:before { - top: -6px; - } - &:after { - bottom: -6px; - } -} - -/* SG -# Shapes/magnify - -Description - -``` -
-``` -*/ - -.CDB-Shape-magnify { - display: block; - position: relative; - width: 32px; - height: 32px; - &:before { - display: block; - position: absolute; - top: 10px; - left: 10px; - width: 7px; - height: 7px; - border: 1px solid #636D72; - border-radius: 50%; - content: ''; - } - &:after { - display: block; - position: absolute; - top: 17px; - left: 19px; - width: 1px; - height: 6px; - transform: rotate(314deg); - background: #636D72; - content: ''; - } -} - -/* SG -# Shapes/arrow - -Description - -``` -
-``` -*/ - -.CDB-Shape-Arrow { - display: block; - position: absolute; - width: 1px; - height: 8px; - background: #32A8E6; - - &:before { - display: block; - position: absolute; - top: 2px; - left: 0; - width: 5px; - height: 1px; - transform: rotate(45deg); - background: #32A8E6; - content: ''; - } - - &:after { - display: block; - position: absolute; - top: 2px; - left: -4px; - width: 5px; - height: 1px; - transform: rotate(-45deg); - background: #32A8E6; - content: ''; - } -} - -.CDB-Shape-Arrow--top { - top: 6px; - right: 9px; - transform: rotate(45deg); -} - -.CDB-Shape-Arrow--bottom { - top: 13px; - left: 46px; - transform: rotate(-135deg); -} diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss new file mode 100644 index 0000000..6565e39 --- /dev/null +++ b/src/scss/cdb-components/shapes/arrow.scss @@ -0,0 +1,86 @@ +/* SG +# Shapes/Arrow + +Description + +``` +
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape-Arrow { + position: relative; + width: 1px; + height: 8px; + background: $cMainDark; + + &::before { + display: block; + position: absolute; + top: 2px; + left: 0; + width: 5px; + height: 1px; + transform: rotate(45deg); + background: $cMainDark; + content: ''; + } + + &::after { + display: block; + position: absolute; + top: 2px; + left: -4px; + width: 5px; + height: 1px; + transform: rotate(-45deg); + background: $cMainDark; + content: ''; + } +} + +.CDB-Shape-Arrow--top { + top: 6px; + right: 9px; + transform: rotate(45deg); +} + +.CDB-Shape-Arrow--bottom { + top: 13px; + left: 46px; + transform: rotate(-135deg); +} + +.CDB-Shape-Arrow.is-blue { + background: $cBlue; + + &::before { + background: $cBlue; + } + + &::after { + background: $cBlue; + } +} + +.CDB-Shape-Arrow.is-white { + background: $cWhite; + + &::before { + background: $cWhite; + } + + &::after { + background: $cWhite; + } +} diff --git a/src/scss/cdb-components/shapes/dots.scss b/src/scss/cdb-components/shapes/dots.scss new file mode 100644 index 0000000..3b55072 --- /dev/null +++ b/src/scss/cdb-components/shapes/dots.scss @@ -0,0 +1,28 @@ +// Shape styles +// ---------------------------------------------- + +/* SG +# Shapes/Dots + +You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed: + +``` + + +``` +*/ + +@import '../../cdb-variables/colors'; +@import '../../cdb-variables/sizes'; + +.CDB-Shape-dot { + display: inline-block; + width: $baseSize; + height: $baseSize; + border-radius: 50%; + background: $cSecondaryLine; + + &.is-selected { + background: $cTypo2; + } +} diff --git a/src/scss/cdb-components/shapes/hamburguer.scss b/src/scss/cdb-components/shapes/hamburguer.scss new file mode 100644 index 0000000..7b8ceff --- /dev/null +++ b/src/scss/cdb-components/shapes/hamburguer.scss @@ -0,0 +1,63 @@ +/* SG +# Shapes/Hamburguer + +Description + +``` +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; +@import '../../cdb-variables/sizes'; + +.CDB-Shape-hamburguer { + width: $baseSize * 2; + &:hover { + cursor: pointer; + } +} + +.CDB-Shape-hamburguerItem { + height: $baseSize / 4; + margin-bottom: $baseSize / 4; + background: $cMainDark; + + &:last-child { + margin-bottom: 0; + } +} + +.CDB-Shape-hamburguer.is-blue { + .CDB-Shape-hamburguerItem { + background: $cBlue; + } +} + +.CDB-Shape-hamburguer.is-white { + .CDB-Shape-hamburguerItem { + background: $cWhite; + } +} diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/magnify.scss new file mode 100644 index 0000000..f5857d3 --- /dev/null +++ b/src/scss/cdb-components/shapes/magnify.scss @@ -0,0 +1,70 @@ +/* SG +# Shapes/Magnify + +Description + +``` +
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape-magnify { + position: relative; + width: 32px; + height: 32px; + + &::before { + display: block; + position: absolute; + top: 10px; + left: 10px; + width: 7px; + height: 7px; + border: 1px solid $cMainDark; + border-radius: 50%; + content: ''; + } + + &::after { + display: block; + position: absolute; + top: 17px; + left: 19px; + width: 1px; + height: 6px; + transform: rotate(314deg); + background: $cMainDark; + content: ''; + } + &:hover { + cursor: pointer; + } +} + +.CDB-Shape-magnify.is-blue { + &:before { + border: 1px solid $cBlue; + } + &:after { + background: $cBlue; + } +} + +.CDB-Shape-magnify.is-white { + &:before { + border: 1px solid $cWhite; + } + &:after { + background: $cWhite; + } +} diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss new file mode 100644 index 0000000..7234a32 --- /dev/null +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -0,0 +1,64 @@ +/* SG +# Shapes/Three Points + +Description + +``` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape-threePoints { + display: inline-block; + position: relative; + width: 3px; + height: 15px; + padding: 0 12; + + &:hover { + cursor: pointer; + } +} + +.CDB-Shape-threePointsItem { + width: 3px; + height: 3px; + margin-bottom: 3px; + border-radius: 50%; + background: $cMainDark; +} + +.CDB-Shape-threePoints.is-blue { + .CDB-Shape-threePointsItem { + background: $cBlue; + } +} + +.CDB-Shape-threePoints.is-white { + .CDB-Shape-threePointsItem { + background: $cWhite; + } +} + From ac500fb06eab42544b80b5507445c6c93af43140 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Thu, 28 Jan 2016 16:14:00 +0100 Subject: [PATCH 2/8] 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 { From ea8da9d88a0d3f96ce4fa32943bab39e1093481e Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Fri, 29 Jan 2016 13:30:23 +0100 Subject: [PATCH 3/8] add assets --- 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/add.scss | 126 ++++++++++++++ src/scss/cdb-components/shapes/move.scss | 140 ++++++++++++++++ src/scss/cdb-components/shapes/subtract.scss | 94 +++++++++++ .../cdb-components/shapes/toogle-arrow.scss | 157 ++++++++++++++++++ 7 files changed, 517 insertions(+) create mode 100644 src/scss/cdb-components/shapes/add.scss create mode 100644 src/scss/cdb-components/shapes/move.scss create mode 100644 src/scss/cdb-components/shapes/subtract.scss create mode 100644 src/scss/cdb-components/shapes/toogle-arrow.scss diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index a07b1ff2e07227be842edb645583b412f26abaea..fee0da095cc0502fdae87dfc93a92eaa23222857 100644 GIT binary patch delta 55 zcmZ26nQ_Hr#tAmet8?oo+OK1tAP_Y1!&K?|+|}{?HeVUI8GkVV!KDk&x4`Jl3m7>( E0A^|x-2eap delta 55 zcmZ26nQ_Hr#tAmemp8Obv|q>Eo40S`hpEyn8!pH5+k9oG F005!y7fb*E diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 5fbce8e1e18568bfe0925802a57f70e3b9683cfd..9437c86a3871af192822af61ce1fae9b0ef30105 100644 GIT binary patch delta 47 wcmew}k@3$&#tDwh69j@Lx=fX>&s`nQZ}XLboADO|5L~+Od<%@;_=Up*0KPmE6951J delta 47 wcmew}k@3$&#tDwhy?Og4x=fXB*>E|Y-{va=H{&k`Ah>jX+AA2n@e79s0Oao!5&!@I diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 79b2a79d38e099205ea6dee043e043705074bfb0..60e4edac2986799b255f4c283ae81cab72b528bc 100644 GIT binary patch delta 61 zcmV-D0K)&gT)bS6c>|CTQn7rtCMk7+?D70IUm3U=e*r}pE?s!O1xCLq|NosUg7FWK T%fY||5(NO87Z0biTPNWLOVt`f delta 61 zcmV-D0K)&gT)bS6c>|4ZzOj6^CMnHR^yB$$zA|t#{sM|HTslAP6^wpU{{K5y1mhnd TmxF-`Bnkkih7aGfTPNWLnvEO9 diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss new file mode 100644 index 0000000..e0a4ecc --- /dev/null +++ b/src/scss/cdb-components/shapes/add.scss @@ -0,0 +1,126 @@ +/* SG +# Shapes/Add + +Description + +``` +

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape { + width: 16px; + height: 16px; + text-align: center; + &:hover { + cursor: pointer; + } +} + +.CDB-Shape-add { + position: relative; + height: 100%; + + &::before { + display: block; + position: absolute; + right: 1px; + bottom: 7px; + left: 0; + height: 1px; + background: $cMainDark; + content: ''; + } + + &::after { + display: block; + position: absolute; + top: 1; + bottom: 0; + left: 7px; + width: 1px; + background: $cMainDark; + content: ''; + } +} + +.CDB-Shape-add.is-small { + + &::before { + display: block; + position: absolute; + right: 3px; + bottom: 7px; + left: 4px; + height: 1px; + background: $cMainDark; + content: ''; + } + + &::after { + display: block; + position: absolute; + top: 4px; + bottom: 3px; + left: 8px; + width: 1px; + background: $cMainDark; + content: ''; + } +} + + + +.CDB-Shape-add.is-blue { + &::before, + &::after { + background: $cBlue; + } +} + +.CDB-Shape-add.is-white { + &::before, + &::after { + background: $cWhite; + } +} + + + diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/move.scss new file mode 100644 index 0000000..cdb8d40 --- /dev/null +++ b/src/scss/cdb-components/shapes/move.scss @@ -0,0 +1,140 @@ +/* SG +# Shapes/Move + +Description + +``` +

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape { + width: 16px; + height: 16px; + text-align: center; + + &:hover { + cursor: pointer; + } +} + +.CDB-Shape-Move { + padding: 1px 0 0; +} + +.CDB-Shape-Move.is-small { + padding: 3px 0 0 1px; + + .CDB-Shape-MoveItem { + margin-bottom: 2px; + + &::before { + width: 2px; + height: 2px; + } + &::after { + width: 2px; + height: 2px; + margin-left: 1px; + } + } +} + +.CDB-Shape-MoveItem { + margin-bottom: 3px; + + &:last-child { + margin-bottom: 0; + } + &::before { + display: inline-block; + width: 3px; + height: 3px; + background: $cMainDark; + content: ''; + } + + &::after { + display: inline-block; + width: 3px; + height: 3px; + margin-left: 2px; + background: $cMainDark; + content: ''; + } +} + +.CDB-Shape-MoveItem.is-blue { + &::before, + &::after { + background: $cBlue; + } +} + +.CDB-Shape-MoveItem.is-white { + &::before, + &::after { + background: $cWhite; + } +} diff --git a/src/scss/cdb-components/shapes/subtract.scss b/src/scss/cdb-components/shapes/subtract.scss new file mode 100644 index 0000000..c80d079 --- /dev/null +++ b/src/scss/cdb-components/shapes/subtract.scss @@ -0,0 +1,94 @@ +/* SG +# Shapes/Subtract + +Description + +``` +

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape { + width: 16px; + height: 16px; + text-align: center; + &:hover { + cursor: pointer; + } +} + +.CDB-Shape-subtract { + position: relative; + height: 100%; + + &::before { + display: block; + position: absolute; + right: 2px; + bottom: 7px; + left: 2px; + height: 1px; + background: $cMainDark; + content: ''; + } +} + +.CDB-Shape-subtract.is-small { + + &::before { + right: 3px; + left: 3px; + } +} + +.CDB-Shape-subtract.is-blue { + &::before { + background: $cBlue; + } +} + +.CDB-Shape-subtract.is-white { + &::before { + background: $cWhite; + } +} + + + diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss new file mode 100644 index 0000000..da35dfb --- /dev/null +++ b/src/scss/cdb-components/shapes/toogle-arrow.scss @@ -0,0 +1,157 @@ +/* SG +# Shapes/Toogle Arrows + +Description + +``` +

16px

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

12px

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

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape { + width: 16px; + height: 16px; + text-align: center; + + &:hover { + cursor: pointer; + } +} + +.CDB-ArrowToogle { + position: relative; + height: 100%; + + &::before { + display: block; + position: absolute; + top: 8px; + left: 0; + width: 10px; + height: 1px; + transform: rotate(-45deg); + background: $cMainDark; + content: ''; + } + &::after { + display: block; + position: absolute; + top: 8px; + right: -1px; + width: 10px; + height: 1px; + transform: rotate(45deg); + background: $cMainDark; + 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: $cBlue; + } + &::after { + background: $cBlue; + } +} + +.CDB-ArrowToogle.is-white { + &::before { + background: $cWhite; + } + &::after { + background: $cWhite; + } +} From d8a5d45cc33716ae1f4a5583c007eafb6a8938c2 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Fri, 29 Jan 2016 15:42:25 +0100 Subject: [PATCH 4/8] 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%; From 5024e786bedd28c9f7da3cd45d94a9fc7bb72672 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Fri, 29 Jan 2016 16:36:32 +0100 Subject: [PATCH 5/8] add checks --- .../cdb-components/shapes/check-circle.scss | 84 +++++++++++++++++-- 1 file changed, 76 insertions(+), 8 deletions(-) diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss index cb2022f..3b109e4 100644 --- a/src/scss/cdb-components/shapes/check-circle.scss +++ b/src/scss/cdb-components/shapes/check-circle.scss @@ -8,21 +8,21 @@ Description
-
+
-
+
-
+
-
+
@@ -34,21 +34,21 @@ Description
-
+
-
+
-
+
@@ -66,7 +66,7 @@ Description &.is-small { width: 12px; height: 12px; - margin: 2px auto; + transform: translateY(2px); } &.is-blue { border: 1px solid $cBlue; @@ -76,3 +76,71 @@ Description } } +.CDB-Shape-tick { + display: block; + position: relative; + height: 100%; + + &::before { + display: block; + position: absolute; + width: 1px; + transform: rotate(-45deg); + background: $cMainDark; + content: ''; + } + &::after { + display: block; + position: absolute; + width: 1px; + transform: rotate(45deg); + background: $cMainDark; + content: ''; + } + + &.is-medium { + &::before { + top: 6px; + left: 4px; + height: 4px; + } + &::after { + top: 4px; + right: 5px; + height: 7px; + } + } + + &.is-small { + &::before { + top: 5px; + left: 3px; + height: 3px; + } + &::after { + top: 3px; + right: 3px; + height: 5px; + } + } +} + +.CDB-Shape-tick.is-blue { + &::before { + background: $cBlue; + } + &::after { + background: $cBlue; + } +} + +.CDB-Shape-tick.is-white { + &::before { + background: $cWhite; + } + &::after { + background: $cWhite; + } +} + + From 6257d6032ed64b2d6a134462fc62204ea0c1098f Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Mon, 1 Feb 2016 11:14:08 +0100 Subject: [PATCH 6/8] update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 026b87e..370c27a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "cartoassets", "description": "Share frontend assets between different CartoDB repositories", - "version": "0.1.23", + "version": "0.1.24", "homepage": "https://github.com/cartodb/CartoAssets", "author": { "name": "CartoDB", From f6dfad3b79e83fd47ccdb4bb17e28bcc7bc8cdb0 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Mon, 1 Feb 2016 11:19:41 +0100 Subject: [PATCH 7/8] fix hound --- src/scss/cdb-components/shapes/add.scss | 2 +- src/scss/cdb-components/shapes/check-circle.scss | 2 +- src/scss/cdb-components/shapes/error-circle.scss | 3 +-- src/scss/cdb-components/shapes/magnify.scss | 8 ++++---- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss index e0a4ecc..570d5b4 100644 --- a/src/scss/cdb-components/shapes/add.scss +++ b/src/scss/cdb-components/shapes/add.scss @@ -46,7 +46,7 @@ Description @import '../../cdb-variables/colors'; .CDB-Shape { - width: 16px; + width: 16px; height: 16px; text-align: center; &:hover { diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss index 3b109e4..c8bb269 100644 --- a/src/scss/cdb-components/shapes/check-circle.scss +++ b/src/scss/cdb-components/shapes/check-circle.scss @@ -74,7 +74,7 @@ Description &.is-white { border: 1px solid $cWhite; } -} +} .CDB-Shape-tick { display: block; diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss index 73c00d4..94eea5d 100644 --- a/src/scss/cdb-components/shapes/error-circle.scss +++ b/src/scss/cdb-components/shapes/error-circle.scss @@ -74,5 +74,4 @@ Description &.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 cf3edc4..7f4f2f0 100644 --- a/src/scss/cdb-components/shapes/magnify.scss +++ b/src/scss/cdb-components/shapes/magnify.scss @@ -77,19 +77,19 @@ Description } .CDB-Shape-magnify.is-blue { - &:before { + &::before { border: 1px solid $cBlue; } - &:after { + &::after { background: $cBlue; } } .CDB-Shape-magnify.is-white { - &:before { + &::before { border: 1px solid $cWhite; } - &:after { + &::after { background: $cWhite; } } From bff9be2be6914d34f8c4608de50db914d93a4727 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Mon, 1 Feb 2016 17:56:03 +0100 Subject: [PATCH 8/8] fix CR --- 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/arrow.scss | 21 ++++++++--------- src/scss/cdb-components/shapes/close.scss | 12 +++++----- .../shapes/{subtract.scss => dash.scss} | 22 +++++++++--------- .../cdb-components/shapes/error-circle.scss | 8 +++---- 7 files changed, 31 insertions(+), 32 deletions(-) rename src/scss/cdb-components/shapes/{subtract.scss => dash.scss} (72%) diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 230e56795e2952b800812dc7bff3dde5266a5d9a..05b79bf6e2c98a5763f873ff48197b13e7dd8d9a 100644 GIT binary patch delta 54 zcmZ26nQ_Hr#tAme*MH?sv|rD3a?ivMQ>Al%U61Ft`O3h}_=^DuE?srWgwdN9FmiYR E0Fr7I>;M1& delta 54 zcmZ26nQ_Hr#tAme=^^B>7+7`=G`BZmh7 DHmnob diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 48676226efff55c29589383c1d494e99602e5247..059b0812c5a4bb81bea1fa55ad1c14d4d218886e 100644 GIT binary patch delta 46 vcmew}k@3$&#tBYLC-+QrnJS(8>v}xD%~u9)#$OCTaOtW`CXC+rg~I~?&`}b5 delta 46 vcmew}k@3$&#tBYLGG8XTOqI?LNss5Z`O3h}_=^DuE?s%Y3ZplE;qU+erF0Q| diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index 305080e362d45172519d05fc7547e9ad1d27592a..66453781d5b4ce6ec43c35c41fca8e183d6b2ee6 100644 GIT binary patch delta 60 zcmV-C0K@;hT)bS6dIHJ3v3#~BDLMCy@eh#8 S!N3F(1pt-_4)L>FC*cO0VjRr? diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss index 6565e39..cb596d0 100644 --- a/src/scss/cdb-components/shapes/arrow.scss +++ b/src/scss/cdb-components/shapes/arrow.scss @@ -47,18 +47,17 @@ Description background: $cMainDark; content: ''; } -} + &.is-up { + top: 6px; + right: 9px; + transform: rotate(45deg); + } -.CDB-Shape-Arrow--top { - top: 6px; - right: 9px; - transform: rotate(45deg); -} - -.CDB-Shape-Arrow--bottom { - top: 13px; - left: 46px; - transform: rotate(-135deg); + &.is-down { + top: 13px; + left: 46px; + transform: rotate(-135deg); + } } .CDB-Shape-Arrow.is-blue { diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss index 381dd8d..cbb8591 100644 --- a/src/scss/cdb-components/shapes/close.scss +++ b/src/scss/cdb-components/shapes/close.scss @@ -97,12 +97,12 @@ Description &::before { top: 3px; left: 6px; - height: 8px; + height: 7px; } &::after { top: 3px; - right: 7px; - height: 8px; + right: 6px; + height: 7px; } } @@ -110,12 +110,12 @@ Description &::before { top: 2px; left: 4px; - height: 6px; + height: 5px; } &::after { top: 2px; - right: 5px; - height: 6px; + right: 4px; + height: 5px; } } } diff --git a/src/scss/cdb-components/shapes/subtract.scss b/src/scss/cdb-components/shapes/dash.scss similarity index 72% rename from src/scss/cdb-components/shapes/subtract.scss rename to src/scss/cdb-components/shapes/dash.scss index 5664987..409bd20 100644 --- a/src/scss/cdb-components/shapes/subtract.scss +++ b/src/scss/cdb-components/shapes/dash.scss @@ -1,5 +1,5 @@ /* SG -# Shapes/Subtract +# Shapes/Dash Description @@ -7,17 +7,17 @@ Description

16px

-
+
-
+
-
+

@@ -27,17 +27,17 @@ Description

12px

-
+
-
+
-
+
``` @@ -45,7 +45,7 @@ Description @import '../../cdb-variables/colors'; -.CDB-Shape-subtract { +.CDB-Shape-dash { position: relative; height: 100%; @@ -61,7 +61,7 @@ Description } } -.CDB-Shape-subtract.is-small { +.CDB-Shape-dash.is-small { &::before { right: 3px; @@ -69,13 +69,13 @@ Description } } -.CDB-Shape-subtract.is-blue { +.CDB-Shape-dash.is-blue { &::before { background: $cBlue; } } -.CDB-Shape-subtract.is-white { +.CDB-Shape-dash.is-white { &::before { background: $cWhite; } diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss index 94eea5d..5a77161 100644 --- a/src/scss/cdb-components/shapes/error-circle.scss +++ b/src/scss/cdb-components/shapes/error-circle.scss @@ -58,14 +58,14 @@ Description @import '../../cdb-variables/colors'; .CDB-Shape-CircleItem { - width: 14px; - height: 14px; + width: 13px; + height: 13px; border: 1px solid $cMainDark; border-radius: 50%; &.is-small { - width: 10px; - height: 10px; + width: 9px; + height: 9px; margin: 2px auto; } &.is-blue {