first commit

themes/at_movic/_dev/css/components/stores.scss

@@ -0,0 +1,104 @@
+#stores {
+  .page-stores {
+    .store-item {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+    width: 85%;
+    margin: 0 auto;
+    .store-picture {
+      img {
+        max-width: 100%;
+      }
+    }
+    .store-item-container {
+      @include display(flex);
+      @include justify-content(space-around);
+      @include align-items(center);
+      padding: $large-space 0;
+      ul {
+        margin-bottom: 0;
+        font-size: $font-size-lg;
+      }
+      .divide-left {
+        @include rtl-border-left($gray-light 1px solid);
+        tr {
+          height: 25px;
+        }
+        td {
+          padding-left: 6px;
+        }
+        th {
+          text-align: right;
+        }
+      }
+      .store-description{
+        font-size: $base-font-size;
+      }
+    }
+    .store-item-footer {
+      margin-top: 8px;
+      padding-top: 8px;
+      @include display(flex);
+      @include justify-content(space-around);
+      &.divide-top {
+        border-top: $gray-light 1px solid;
+      }
+      div:first-child {
+        @include flex(0 0 65%);
+      }
+      i.material-icons{
+        margin-right: $small-space;
+        color: $gray;
+        font-size: $base-font-size;
+      }
+      li{
+        margin-bottom: $small-space;
+      }
+    }
+  }
+}
+
+/*** Responsive part ***/
+@include media-breakpoint-down(sm) {
+  #stores {
+    .page-stores {
+      width: 100%;
+      .store-item-container {
+        padding: 16px 0;
+      }
+    }
+  }
+}
+@include media-breakpoint-down(xs) {
+  #stores {
+    .page-stores {
+      .store-item-container {
+        display: block;
+        .divide-left {
+          @include rtl-border-left(none);
+        }
+        .store-description {
+          a {
+            margin-bottom: 8px;
+          }
+          address {
+            margin-bottom: 8px;
+          }
+        }
+      }
+      .store-item-footer {
+        display: block;
+        &.divide-top {
+          border-top: $gray-light 1px solid;
+        }
+        li{
+          margin-bottom: $small-space;
+        }
+        .card-block {
+          padding: 12px 12px 0;
+        }
+      }
+    }
+  }
+}