Moved common styles from CartoDB.js and Deep-insights to CartoAssets

src/scss/components/shapes.scss

@@ -1,3 +1,6 @@
+// Shapes styles
+// ----------------------------------------------
+
 /* SG
 # Shapes/dot
 
@@ -8,8 +11,8 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
 <button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>
 ```
 */
-// Shapes styles
-// ----------------------------------------------
+
+@import '../utilities/mixins';
 
 .CDB-Shape-dot {
   display: inline-block;
@@ -18,3 +21,231 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava
   height: 8px;
   border-radius: 8px;
 }
+
+/* SG
+# Shapes/threePoints
+
+Description
+
+```
+<div></div>
+```
+*/
+
+.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
+
+```
+<div></div>
+```
+*/
+
+.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
+
+```
+<div></div>
+```
+*/
+
+.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
+
+```
+<div></div>
+```
+*/
+
+.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
+
+```
+<div></div>
+```
+*/
+
+.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);
+}

src/scss/variables/_sizes.scss

@@ -0,0 +1,33 @@
+// Sizes variables
+// ----------------------------------------------
+
+// Widths
+$desktopLayout: 352px;
+$mobileLayout: 280px;
+
+// Margins
+$sMargin-section: 24px; // To separate main section
+$sMargin-element: 14px; // To separate elements inside a group
+
+// Font sizes
+$sFontSize-smaller: 10px;
+$sFontSize-small:   12px;
+$sFontSize-normal:  14px;
+$sFontSize-larger:  16px;
+$sFontSize-huge:    26px;
+
+// Font weights
+$sFontWeight-lighter:  300;
+$sFontWeight-normal:   400;
+$sFontWeight-semibold: 600;
+$sFontWeight-bold:     700;
+
+// Line heights
+$sLineHeight-smaller: 15px;
+$sLineHeight-small:   16px;
+$sLineHeight-normal:  20px;
+$sLineHeight-large:   22px;
+$sLineHeight-larger:  24px;
+$sLineHeight-largest: 27px;
+$sLineHeight-huge: 34px;
+$sLineHeight-button:  15px;