Add +/- icon to menu button and bold label

sunday1103 · Nov 17, 2016 · 52ef6ba · 52ef6ba
1 parent db8bbfc
commit 52ef6ba
Showing 1 changed file with 38 additions and 1 deletion.
diff --git a/_sass/_navigation.scss b/_sass/_navigation.scss
@@ -326,26 +326,63 @@
     label {
       position: relative;
       display: inline-block;
-      padding: 0.5em 1em;
+      padding: 0.5em 2.5em 0.5em 1em;
       font-size: $type-size-6;
+      font-weight: bold;
       border: 1px solid $light-gray;
       border-radius: $border-radius;
       z-index: 20;
       -webkit-transition: 0.2s ease-out;
       transition: 0.2s ease-out;
       cursor: pointer;
 
+      &:before,
+      &:after {
+        content: '';
+        position: absolute;
+        right: 1em;
+        top: 1.25em;
+        width: 0.75em;
+        height: 0.125em;
+        line-height: 1;
+        background-color: #333;
+        transition: 0.2s ease-out;
+      }
+
+      &:after {
+        transform: rotate(90deg);
+      }
+
       &:hover {
         color: #fff;
         border-color: $gray;
         background-color: mix(white, #000, 20%);
+
+        &:before,
+        &:after {
+          background-color: #fff;
+        }
       }
     }
 
     /* selected*/
     input:checked + label {
       color: white;
       background-color: mix(white, #000, 20%);
+
+      &:before,
+      &:after {
+        background-color: #fff;
+      }
+    }
+
+    // on hover show expand
+    label:hover:after {
+      transform: rotate(90deg);
+    }
+
+    input:checked + label:hover:after {
+      transform: rotate(0);
     }
 
     ul {