(refactor): Optimize and refactor Events styles

Author: bencodezen

styles/events.styl

@@ -1,3 +1,5 @@
+@import 'settings/*'
+
 /*calendar map events*/
 #calendar * { -webkit-box-sizing: border-box; }
 
@@ -6,93 +8,68 @@
   width: 100%;
   padding: 5px;
   position: relative;
-}
-.month-table-wrapper{
-  overflow: auto;
-}
-
-/*.month-table:before, .month-table:after {
-  content: "";
-  border: 10px solid transparent;
-  position: absolute;
-  display: block;
-}*/
-
-/*.month-table:before {
-  border-top-color: rgb(88,20,94);
-  border-right-color: rgb(88,20,94);
-  top: 0;
-  right: 0;
-}
-
-.month-table:after {
-  border-left-color: rgb(88,20,94);
-  border-bottom-color: rgb(88,20,94);
-  bottom: 0;
-  left: 0;
-}*/
 
-.month-table td {
-  width: 160px;
-  vertical-align: top;
+  &-menuitem {
+    font-size: 12px;
+    display: inline-block;
+    border: 0;
+    font-weight: bold;
+    text-transform: uppercase;
+    margin: 0 10px 10px;
+    background: $mineshaftGray;
+    padding: 7px 15px;
+    color: $galleryGray;
+    position: relative;
+    border-radius: 3px;
+
+    &.active {
+      background: $schoolbusYellow;
+      color: $mineshaftGray;
+    }
+
+    &:hover {
+      color: $mineshaftGray;
+      background-color: $schoolbusYellow;
+    }
+  }
+
+  &-wrapper{
+    overflow: auto;
+  }
+
+  td {
+    width: 160px;
+    vertical-align: top;
+  }
+
+  .empty {
+    background: repeating-linear-gradient(0, $nobelGray 0, $nobelGray 1px, transparent 1px, transparent 5px);
+    background-size: 1px 5px;
+  }
 }
 
 .header td {
   padding: 10px;
-  border-bottom: 1px solid #333;
+  border-bottom: 1px solid $mineshaftGray;
 }
 
 .days td {
   padding-top: 2px;
   height: 100px;
-  border-bottom: 1px solid #333;
-}
-
-.days:last-child td {
-  /*border-bottom: 0;*/
-}
-
-.month-table .empty {
-  background: repeating-linear-gradient(0, #B4B4B4 0, #B4B4B4 1px, transparent 1px, transparent 5px);
-  background-size: 1px 5px;
-}
-
-.month-menuitem {
-  font-size: 12px;
-  display: inline-block;
-  border: 0;
-  font-weight: bold;
-  text-transform: uppercase;
-  margin: 0 10px 10px;
-  background: #333;
-  padding: 7px 15px;
-  color: #eaeaea;
-  position: relative;
-  border-radius: 3px;
-
-}
-
-.month-menuitem:hover {
-  color: #333;
-  background-color: #F7DA03;
-}
-
-.month-menuitem.active {
-  background: #F7DA03  ;
-  color: #333;
+  border-bottom: 1px solid $mineshaftGray;
 }
 
 a {
-  color: #333;
-}
+  color: $mineshaftGray;
 
-a:hover {
-  color: #EDE55D;
+  &:hover {
+    color: $confettiYellow;
+  }
 }
 
 .today .day {
-  background: #F7DA03;
-  color: #333;
+  background: $schoolbusYellow;
+  color: $mineshaftGray;
   border-radius: 3px;
 }
 
@@ -104,6 +81,15 @@ a:hover {
   overflow: hidden;
   text-overflow: ellipsis;
 
+   a {
+    color: $mineshaftGray;
+    border-color: $schoolbusYellow;
+    border-bottom-width: 2px;
+
+    &:hover {
+      color: $schoolbusYellow;
+    }
+  }
 }
 
 .day {
@@ -118,21 +104,17 @@ a:hover {
   background: #000;
   margin-left: -2px;
   margin-right: -2px;
+
+  a {
+    color: $galleryGray;
+  }
 }
 
-.no-event { color: #B4B4B4; }
+.no-event { color: $nobelGray; }
 
-.event a {
-  color: #333;
-  border-color: #F7DA03;
-  border-bottom-width: 2px;
-}
-.multi-days a {
-  color: #EEE;
-}
-.event a:hover {
-  color: #F7DA03;
+.past .event a {
+  color: $nobelGray;
+  border-color: $nobelGray;
 }
-.past .event a { color: #B4B4B4; border-color: #B4B4B4; }
 
 /* Map */

styles/settings/colors.styl

@@ -4,4 +4,8 @@
 
 $black           = rgb(  0,   0,   0); // #000
 $mineshaftGray   = rgb( 51,  51,  51); // #333
+$nobelGray       = rgb(180, 180, 180); // #b4b4b4
+$galleryGray     = rgb(234, 234, 234); // #eaeaea
+$confettiYellow  = rgb(237, 229,  93); // #ede55d
+$schoolbusYellow = rgb(247, 218,   3); // #f7da03
 $broomYellow     = rgb(255, 229,  31); // #ffe51f