Add titan shortcut selections

2020-05-25 19:40:07 +03:00
parent d7eca8ca3f
commit 13c15f9c41
5 changed files with 81 additions and 11 deletions
--- a/_assets/sass/modules/_toe.scss
+++ b/_assets/sass/modules/_toe.scss
@@ -44,7 +44,61 @@
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 200px;
-    margin: 20px auto 60px;
+
+    &__container {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin: 20px 0 60px;
+    }
+
+    &__shortcut {
+      display: flex;
+      flex-direction: column;
+      margin-left: 37px;
+
+      button {
+        width: 46px;
+        height: 46px;
+        line-height: 46px;
+        border-radius: 50%;
+        margin: 2px;
+        font-size: 16px;
+        font-weight: 300;
+        text-align: center;
+        color: $white;
+        border: 1px solid rgba($black, .2);
+      }
+    }
+
+    &__waterteam {
+      background: #359AE8;
+    }
+
+    &__fireteam {
+      background: #F54A48;
+    }
+
+    &__earthteam {
+      background: #4EBF41;
+    }
+
+    &__row {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      flex-wrap: wrap;
+      width: 100%;
+      margin-top: 20px;
+    }
+
+    &__clear {
+      padding: 8px 32px;
+      border-radius: 16px;
+      background: rgba($black, .2);
+      border: 1px solid rgba($black, .2);
+    }

    li {
      flex: 0 0 25%;