sempli-website-lib 4.1.4 → 5.0.2

package/styles/partials/app/_my-loan-applications.scss

@@ -1,165 +1,165 @@
-/*#############################################################################
-# MY LOAN APPLICATIONS
-#############################################################################*/
-
-
-// Products Box Base Styles
-// To be extended
-.my-loan-applications-base-box {
-  background-color: #fff;
-  padding: 20px 30px;
-  @include border-radius(4px);
-  @include box-shadow(-2px 2px 6px 0 rgba(black, 0.05));
-}
-
-.my-loan-application-list-wrapper {
-  max-width: 1000px;
-  margin: 0 auto;
-
-  .loan-application-box {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr) 200px;
-    justify-items: center;
-    margin: 0 0 20px;
-    overflow: hidden;
-    position: relative;
-    border-radius: 4px;
-    @extend .my-loan-applications-base-box;
-
-    @include responsive-max($breakpoint-small) {
-      grid-template-columns: none;
-      grid-gap: 1rem;
-
-      .box-title {
-        margin: 0;
-      }
-
-      .loan-application-box-column {
-        padding: 0;
-        text-align: center;
-      }
-
-      .code {
-        justify-self: center !important;
-      }
-    }
-
-    &:last-child {
-      margin: 0;
-    }
-
-    ::before {
-      content: "";
-      display: block;
-      height: 100%;
-      width: 7px;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-    }
-
-    &.primary {
-      ::before {
-        background-color: $color-primary;
-      }
-    }
-
-    &.secondary {
-      ::before {
-        background-color: $color-secondary;
-      }
-    }
-
-    &.alert {
-      ::before {
-        background-color: $color-alert;
-      }
-    }
-
-    &.success {
-      ::before {
-        background-color: $color-success;
-      }
-    }
-
-    &.warning {
-      ::before {
-        background-color: $color-warning;
-      }
-    }
-
-    // General Box Columns
-    .loan-application-box-column {
-      padding: 0 20px;
-
-      &:first-child {
-        padding-left: 0;
-      }
-
-      &:last-child {
-        padding-right: 0;
-      }
-    }
-
-    // Specific Box Columns
-    .code {
-      justify-self: start;
-    }
-
-    // Content Elements
-
-    .box-title {
-      color: $color-secondary;
-      font-size: rem-calc(10px);
-      text-transform: uppercase;
-      margin: 0 0 10px;
-    }
-
-    .box-content {
-      font-size: rem-calc(14px);
-      margin: 0;
-    }
-
-    .box-content-big {
-      font-size: rem-calc(20px);
-      margin: 0;
-    }
-
-    // HOVER STATE
-
-    &:hover {
-      @include box-shadow(-6px 6px 10px 0 rgba(black, 0.075));
-      cursor: pointer;
-      &.primary {
-        ::before {
-          background-color: $color-primary-dark;
-        }
-      }
-
-      &.secondary {
-        ::before {
-          background-color: $color-secondary-dark;
-        }
-      }
-
-      &.alert {
-        ::before {
-          background-color: $color-alert-dark;
-        }
-      }
-
-      &.success {
-        ::before {
-          background-color: $color-success-dark;
-        }
-      }
-
-      &.warning {
-        ::before {
-          background-color: $color-warning-dark;
-        }
-      }
-    }
-  }
-}
+/*#############################################################################
+# MY LOAN APPLICATIONS
+#############################################################################*/
+
+
+// Products Box Base Styles
+// To be extended
+.my-loan-applications-base-box {
+  background-color: #fff;
+  padding: 20px 30px;
+  @include border-radius(4px);
+  @include box-shadow(-2px 2px 6px 0 rgba(black, 0.05));
+}
+
+.my-loan-application-list-wrapper {
+  max-width: 1000px;
+  margin: 0 auto;
+
+  .loan-application-box {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr) 200px;
+    justify-items: center;
+    margin: 0 0 20px;
+    overflow: hidden;
+    position: relative;
+    border-radius: 4px;
+    @extend .my-loan-applications-base-box;
+
+    @include responsive-max($breakpoint-small) {
+      grid-template-columns: none;
+      grid-gap: 1rem;
+
+      .box-title {
+        margin: 0;
+      }
+
+      .loan-application-box-column {
+        padding: 0;
+        text-align: center;
+      }
+
+      .code {
+        justify-self: center !important;
+      }
+    }
+
+    &:last-child {
+      margin: 0;
+    }
+
+    ::before {
+      content: "";
+      display: block;
+      height: 100%;
+      width: 7px;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    &.primary {
+      ::before {
+        background-color: $color-primary;
+      }
+    }
+
+    &.secondary {
+      ::before {
+        background-color: $color-secondary;
+      }
+    }
+
+    &.alert {
+      ::before {
+        background-color: $color-alert;
+      }
+    }
+
+    &.success {
+      ::before {
+        background-color: $color-success;
+      }
+    }
+
+    &.warning {
+      ::before {
+        background-color: $color-warning;
+      }
+    }
+
+    // General Box Columns
+    .loan-application-box-column {
+      padding: 0 20px;
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    // Specific Box Columns
+    .code {
+      justify-self: start;
+    }
+
+    // Content Elements
+
+    .box-title {
+      color: $color-secondary;
+      font-size: rem-calc(10px);
+      text-transform: uppercase;
+      margin: 0 0 10px;
+    }
+
+    .box-content {
+      font-size: rem-calc(14px);
+      margin: 0;
+    }
+
+    .box-content-big {
+      font-size: rem-calc(20px);
+      margin: 0;
+    }
+
+    // HOVER STATE
+
+    &:hover {
+      @include box-shadow(-6px 6px 10px 0 rgba(black, 0.075));
+      cursor: pointer;
+      &.primary {
+        ::before {
+          background-color: $color-primary-dark;
+        }
+      }
+
+      &.secondary {
+        ::before {
+          background-color: $color-secondary-dark;
+        }
+      }
+
+      &.alert {
+        ::before {
+          background-color: $color-alert-dark;
+        }
+      }
+
+      &.success {
+        ::before {
+          background-color: $color-success-dark;
+        }
+      }
+
+      &.warning {
+        ::before {
+          background-color: $color-warning-dark;
+        }
+      }
+    }
+  }
+}