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",
diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot
index d9aff25..05b79bf 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 f61778a..059b081 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 f8f872e..6645378 100644
Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ
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/add.scss b/src/scss/cdb-components/shapes/add.scss
new file mode 100644
index 0000000..570d5b4
--- /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/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss
new file mode 100644
index 0000000..cb596d0
--- /dev/null
+++ b/src/scss/cdb-components/shapes/arrow.scss
@@ -0,0 +1,85 @@
+/* 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: '';
+ }
+ &.is-up {
+ top: 6px;
+ right: 9px;
+ transform: rotate(45deg);
+ }
+
+ &.is-down {
+ 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/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss
new file mode 100644
index 0000000..c8bb269
--- /dev/null
+++ b/src/scss/cdb-components/shapes/check-circle.scss
@@ -0,0 +1,146 @@
+/* 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;
+ transform: translateY(2px);
+ }
+ &.is-blue {
+ border: 1px solid $cBlue;
+ }
+ &.is-white {
+ border: 1px solid $cWhite;
+ }
+}
+
+.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;
+ }
+}
+
+
diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss
new file mode 100644
index 0000000..cbb8591
--- /dev/null
+++ b/src/scss/cdb-components/shapes/close.scss
@@ -0,0 +1,139 @@
+/* SG
+# Shapes/Close
+
+Description
+
+```
+16px
+
+
+
+
+
+
+
+12px
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-close {
+ 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-huge {
+ &::before {
+ top: -2px;
+ left: 7px;
+ height: 20px;
+ }
+ &::after {
+ top: -2px;
+ right: 8px;
+ height: 20px;
+ }
+ }
+
+ &.is-large {
+ &::before {
+ top: 2px;
+ left: 7px;
+ height: 12px;
+ }
+ &::after {
+ top: 2px;
+ right: 8px;
+ height: 12px;
+ }
+ }
+
+ &.is-medium {
+ &::before {
+ top: 3px;
+ left: 6px;
+ height: 7px;
+ }
+ &::after {
+ top: 3px;
+ right: 6px;
+ height: 7px;
+ }
+ }
+
+ &.is-small {
+ &::before {
+ top: 2px;
+ left: 4px;
+ height: 5px;
+ }
+ &::after {
+ top: 2px;
+ right: 4px;
+ height: 5px;
+ }
+ }
+}
+
+.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/dash.scss b/src/scss/cdb-components/shapes/dash.scss
new file mode 100644
index 0000000..409bd20
--- /dev/null
+++ b/src/scss/cdb-components/shapes/dash.scss
@@ -0,0 +1,85 @@
+/* SG
+# Shapes/Dash
+
+Description
+
+```
+16px
+
+
+
+
+
+
+
+12px
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-dash {
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ right: 2px;
+ bottom: 7px;
+ left: 2px;
+ height: 1px;
+ background: $cMainDark;
+ content: '';
+ }
+}
+
+.CDB-Shape-dash.is-small {
+
+ &::before {
+ right: 3px;
+ left: 3px;
+ }
+}
+
+.CDB-Shape-dash.is-blue {
+ &::before {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-dash.is-white {
+ &::before {
+ 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/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss
new file mode 100644
index 0000000..5a77161
--- /dev/null
+++ b/src/scss/cdb-components/shapes/error-circle.scss
@@ -0,0 +1,77 @@
+/* SG
+# Shapes/Error circle
+
+Description
+
+```
+16px
+
+
+
+
+
+
+
+12px
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-CircleItem {
+ width: 13px;
+ height: 13px;
+ border: 1px solid $cMainDark;
+ border-radius: 50%;
+
+ &.is-small {
+ width: 9px;
+ height: 9px;
+ margin: 2px auto;
+ }
+ &.is-blue {
+ border: 1px solid $cBlue;
+ }
+ &.is-white {
+ border: 1px solid $cWhite;
+ }
+}
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..7f4f2f0
--- /dev/null
+++ b/src/scss/cdb-components/shapes/magnify.scss
@@ -0,0 +1,115 @@
+/* SG
+# Shapes/Magnify
+
+Description
+
+```
+16px
+
+
+
+
+
+
+
+
+12px
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-magnify {
+ display: block;
+ position: relative;
+ height: 100%;
+
+ &::before {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 11px;
+ height: 11px;
+ border: 1px solid $cMainDark;
+ border-radius: 50%;
+ content: '';
+ }
+
+ &::after {
+ display: block;
+ position: absolute;
+ right: 2px;
+ bottom: -1px;
+ width: 1px;
+ height: 7px;
+ transform: rotate(314deg);
+ background: $cMainDark;
+ content: '';
+ }
+}
+
+.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;
+ }
+}
+
+.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/move.scss b/src/scss/cdb-components/shapes/move.scss
new file mode 100644
index 0000000..e1f423b
--- /dev/null
+++ b/src/scss/cdb-components/shapes/move.scss
@@ -0,0 +1,130 @@
+/* SG
+# Shapes/Move
+
+Description
+
+```
+16px
+
+
+
+
+
+
+
+12px
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.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/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss
new file mode 100644
index 0000000..7f73c0a
--- /dev/null
+++ b/src/scss/cdb-components/shapes/threePoints.scss
@@ -0,0 +1,108 @@
+/* SG
+# Shapes/Three Points
+
+Description
+
+```
+16px
+
+
+
+
+
+
+
+12px
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.CDB-Shape-threePoints {
+ display: inline-block;
+ height: 100%;
+}
+
+.CDB-Shape-threePointsItem {
+ 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 {
+ .CDB-Shape-threePointsItem {
+ background: $cBlue;
+ }
+}
+
+.CDB-Shape-threePoints.is-white {
+ .CDB-Shape-threePointsItem {
+ 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..86f302a
--- /dev/null
+++ b/src/scss/cdb-components/shapes/toogle-arrow.scss
@@ -0,0 +1,147 @@
+/* SG
+# Shapes/Toogle Arrows
+
+Description
+
+```
+16px
+
+
+
+
+
+
+
+12px
+
+
+
+
+
+
+
+16px
+
+
+
+
+
+
+
+12px
+
+
+
+```
+*/
+
+@import '../../cdb-variables/colors';
+
+.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;
+ }
+}