From dc4819fe38d9a9102ed6ebeb63d9498d8fd5c9c2 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Wed, 27 Jan 2016 19:17:16 +0100 Subject: [PATCH] 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; + } +} +