add assets

2016-01-29 13:30:23 +01:00
parent 340dad9dfe
commit ea8da9d88a
7 changed files with 517 additions and 0 deletions
@@ -0,0 +1,140 @@
+/* SG
+# Shapes/Move
+
+Description
+
+```
+<h2>16px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-Move">
+      <div class="CDB-Shape-MoveItem is-first"></div>
+      <div class="CDB-Shape-MoveItem is-second"></div>
+      <div class="CDB-Shape-MoveItem is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-Move">
+      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
+      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
+      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-Move">
+      <div class="CDB-Shape-MoveItem is-white is-first"></div>
+      <div class="CDB-Shape-MoveItem is-white is-second"></div>
+      <div class="CDB-Shape-MoveItem is-white is-third"></div>
+    </div>
+  </div>
+</div>
+<br>
+<br>
+<br>
+<br>
+<h2>12px</h2>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-Move is-small">
+      <div class="CDB-Shape-MoveItem is-first"></div>
+      <div class="CDB-Shape-MoveItem is-second"></div>
+      <div class="CDB-Shape-MoveItem is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
+    <div class="CDB-Shape-Move is-small">
+      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
+      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
+      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
+    </div>
+  </div>
+</div>
+<div style="padding: 20px; background: #2E3C43;">
+  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
+    <div class="CDB-Shape-Move is-small">
+      <div class="CDB-Shape-MoveItem is-white is-first"></div>
+      <div class="CDB-Shape-MoveItem is-white is-second"></div>
+      <div class="CDB-Shape-MoveItem is-white is-third"></div>
+    </div>
+  </div>
+</div>
+```
+*/
+
+@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;
+  }
+}