Step 19.13: Updated the styles of the parties list

client/imports/app/parties/parties-list.component.scss

@@ -1,127 +1,71 @@
-@import "../colors";
+.parties-list-container {
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+  margin: 0 auto;
+  width: 100%;
+  display: table;
 
-.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;
-}
+  .parties-list {
+    display: table-cell;
+    width: 50%;
+    vertical-align: top;
 
-.ma-party-item {
-  .ma-party-name {
-    margin-bottom: 20px;
-    a {
-      color: $color6;
-      text-decoration: none !important;
-      font-weight: 400;
+    .pagination {
+      display: inline;
+      text-align: center;
     }
-  }
-  .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;
+    .filter-card {
+      margin: 20px;
     }
-  }
 
-  .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;
-        }
-      }
-    }
+    .party-card {
+      margin: 20px;
+      position: relative;
 
-    .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;
-        }
+      .party-name > a {
+        color: black;
+        text-decoration: none;
       }
-    }
 
-    .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;
+      .remove-party {
+        position: absolute;
+        top: 10px;
+        right: 10px;
       }
-      .ma-rsvp-title {
-        font-size: 11px;
-        color: #aaa;
-        text-transform: uppercase;
+
+      .rsvp-container {
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+
+        .rsvps-sum {
+          display: inline-block;
+          width: 50px;
+          text-align: center;
+
+          .rsvps-amount {
+            font-size: 24px;
+          }
+
+          .rsvps-title {
+            font-size: 13px;
+            color: #aaa;
+          }
+        }
       }
     }
   }
-}
 
-.ma-angular-map-col {
-  .angular-google-map-container, .angular-google-map {
-    height: 100%;
-    width: 100%;
-  }
-}
+  .parties-map {
+    display: table-cell;
+    width: 50%;
+    vertical-align: top;
 
-.search-form {
-  margin-bottom: 1em;
+    .google-map {
+      width: 100%;
+      min-height: 600px;
+    }
+  }
 }