Step 18.9: Add styles for PartiesList

Urigo · Dec 14, 2016 · 0106693 · 0106693
1 parent 1d6f478
commit 0106693
Showing 1 changed file with 127 additions and 0 deletions.
diff --git a/client/imports/app/parties/parties-list.component.scss b/client/imports/app/parties/parties-list.component.scss
@@ -0,0 +1,127 @@
+@import "../colors";
+
+.ma-add-button-container {
+  button.btn {
+    background: $color3;
+    float: right;
+    margin-right: 5px;
+    outline: none;
+    i {
+      color: $color5;
+    }
+  }
+}
+
+.ma-parties-col {
+  padding-top: 20px;
+}
+
+.ma-filters {
+  margin-bottom: 10px;
+}
+
+.ma-party-item {
+  .ma-party-name {
+    margin-bottom: 20px;
+    a {
+      color: $color6;
+      text-decoration: none !important;
+      font-weight: 400;
+    }
+  }
+  .ma-party-description {
+    color: $color6;
+    font-weight: 300;
+    padding-left: 18px;
+    font-size: 14px;
+  }
+
+  .ma-remove {
+    color: lighten($color7, 20%);
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    &:hover {
+      color: $color7;
+    }
+  }
+
+  .ma-party-item-bottom {
+    padding-top: 10px;
+    .ma-posted-by-col {
+      .ma-posted-by {
+        color: darken($color4, 30%);
+        font-size: 12px;
+      }
+      .ma-everyone-invited {
+        @media (max-width: 400px) {
+          display: block;
+          i {
+            margin-left: 0px !important;
+          }
+        }
+        font-size: 12px;
+        color: darken($color4, 10%);
+        i {
+          color: darken($color4, 10%);
+          margin-left: 5px;
+        }
+      }
+    }
+
+    .ma-rsvp-buttons {
+      input.btn {
+        color: darken($color3, 20%);
+        background: transparent !important;
+        outline: none;
+        padding-left: 0;
+        &:active {
+          box-shadow: none;
+        }
+        &:hover {
+          color: darken($color3, 30%);
+        }
+        &.btn-primary {
+          color: lighten($color3, 10%);
+          border: 0;
+          background: transparent !important;
+        }
+      }
+    }
+
+    .ma-rsvp-sum {
+      width: 160px;
+      @media (min-width: 400px) {
+        float: right;
+      }
+      @media (max-width: 400px) {
+        margin: 0 auto;
+      }
+    }
+    .ma-rsvp-amount {
+      display: inline-block;
+      text-align: center;
+      width: 50px;
+      .ma-amount {
+        font-weight: bold;
+        font-size: 20px;
+      }
+      .ma-rsvp-title {
+        font-size: 11px;
+        color: #aaa;
+        text-transform: uppercase;
+      }
+    }
+  }
+}
+
+.ma-angular-map-col {
+  .angular-google-map-container, .angular-google-map {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.search-form {
+  margin-bottom: 1em;
+}