sempli-website-lib 5.0.1 → 5.0.2

package/styles/partials/app/_blocks.scss

@@ -1,101 +1,101 @@
-/*#############################################################################
-# BLOCKS
-#############################################################################*/
-
-
-.block-title {
-  margin-top: 0;
-
-  br {
-    display: none;
-  }
-
-  &.margin {
-    margin: 0 0 50px;
-  }
-
-  @include responsive($breakpoint-xmedium) {
-    br {
-      display: block;
-    }
-  }
-}
-
-.blocks-wrapper {
-  .block-step {
-    border-bottom: 1px solid $color-secondary-light;
-    margin-bottom: 20px;
-    padding-bottom: 20px;
-    max-width: 300px;
-
-    &:last-child {
-      border: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    .block-step-number {
-      margin: 0;
-    }
-
-    .block-step-title {
-      margin: 0;
-    }
-
-    .block-step-description {
-      margin: 0 0 10px;
-    }
-
-    .progress-bar {
-      margin: 0 0 10px;
-    }
-
-    a.button {
-      margin: 0;
-    }
-
-    // Disabled State
-    &.disabled > * {
-      opacity: 0.3;
-    }
-
-    // Completed state
-    &.completed {
-      position: relative;
-
-      &::after {
-        display: block;
-        content: "";
-        background: url("/assets/swl/interface/icons/check-green-circle-large.svg") no-repeat 0 0;
-        width: 32px;
-        height: 32px;
-        position: absolute;
-        top: 50%;
-        right: 0;
-        @include transform(translate(60px, -50%));
-
-        @include responsive-max($breakpoint-small) {
-          top: 10%;
-          right: 18%;
-        }
-      }
-    }
-  }
-}
-
-.block-main {
-  .card {
-    max-width: 340px;
-    @include float(right);
-    clear: both;
-  }
-}
-
-.response-handler {
-  &.centered {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
+/*#############################################################################
+# BLOCKS
+#############################################################################*/
+
+
+.block-title {
+  margin-top: 0;
+
+  br {
+    display: none;
+  }
+
+  &.margin {
+    margin: 0 0 50px;
+  }
+
+  @include responsive($breakpoint-xmedium) {
+    br {
+      display: block;
+    }
+  }
+}
+
+.blocks-wrapper {
+  .block-step {
+    border-bottom: 1px solid $color-secondary-light;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    max-width: 300px;
+
+    &:last-child {
+      border: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .block-step-number {
+      margin: 0;
+    }
+
+    .block-step-title {
+      margin: 0;
+    }
+
+    .block-step-description {
+      margin: 0 0 10px;
+    }
+
+    .progress-bar {
+      margin: 0 0 10px;
+    }
+
+    a.button {
+      margin: 0;
+    }
+
+    // Disabled State
+    &.disabled > * {
+      opacity: 0.3;
+    }
+
+    // Completed state
+    &.completed {
+      position: relative;
+
+      &::after {
+        display: block;
+        content: "";
+        background: url("/assets/swl/interface/icons/check-green-circle-large.svg") no-repeat 0 0;
+        width: 32px;
+        height: 32px;
+        position: absolute;
+        top: 50%;
+        right: 0;
+        @include transform(translate(60px, -50%));
+
+        @include responsive-max($breakpoint-small) {
+          top: 10%;
+          right: 18%;
+        }
+      }
+    }
+  }
+}
+
+.block-main {
+  .card {
+    max-width: 340px;
+    @include float(right);
+    clear: both;
+  }
+}
+
+.response-handler {
+  &.centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+

package/styles/partials/app/_cards.scss

@@ -1,155 +1,155 @@
-/*#############################################################################
-# CARDS
-#############################################################################*/
-
-$card-padding: 30px;
-
-.card {
-  background-color: #fff;
-  border: 1px solid #E9EAEA;
-  margin: 0 0 30px 0;
-  @include box-shadow(-10px 10px 20px 0 rgba(black, 0.05));
-  // @extend %transition-all;
-
-  .card-header {
-    padding: $card-padding $card-padding 0;
-    // @extend %transition-all;
-    @include pie-clearfix;
-
-    .card-title {
-      margin: 0;
-      @include float(left);
-
-      &.small {
-        font-size: 1.1rem
-      }
-    }
-
-    .card-icon {
-      @include float(right);
-    }
-
-    .header-baseline {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-end;
-    }
-  }
-
-  .card-body {
-    padding: $card-padding;
-    // @extend %transition-all;
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-
-    &.small {
-      font-size: 12.8px;
-    }
-  }
-
-  // CREDIT OPTION CARD
-  &.credit-option {
-    cursor: pointer;
-    border: none;
-    overflow: hidden;
-    position: relative;
-    @include border-radius(4px);
-
-    .card-body {
-      padding: 20px 30px;
-
-      h5 {
-        font-size: rem-calc(14px);
-        margin: 0;
-      }
-
-      h6.credit-option-amount {
-        font-size: rem-calc(26px);
-        margin: 0;
-      }
-
-      p.option-info-line {
-        color: $color-secondary;
-        font-size: rem-calc(14px);
-        margin: 0;
-
-        span {
-          display: inline-block;
-          padding-right: 12px;
-          margin-right: 3px;
-          position: relative;
-
-          &::after {
-            content: "";
-            display: block;
-            background-color: $color-secondary-light;
-            width: 5px;
-            height: 5px;
-            position: absolute;
-            top: 50%;
-            right: 0;
-            @include border-radius(100%);
-            @include transform(translateY(-50%));
-          }
-
-          &:last-child {
-            padding: 0;
-            margin: 0;
-
-            &::after {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-
-    &::before {
-      content: "";
-      display: block;
-      background-color: $color-secondary-light;
-      height: 100%;
-      width: 7px;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      // @extend %transition-all;
-    }
-
-    // HOVER STATE
-    &:hover {
-      @include box-shadow(-10px 10px 20px 0 rgba(black, 0.1));
-
-      &::before {
-        background-color: $color-secondary;
-      }
-    }
-
-    // SELECTED STATE
-    &.selected {
-      width: 370px;
-      @include border-right-radius(0);
-      @include box-shadow(-20px 10px 20px 0 rgba(black, 0.15));
-
-      .card-body {
-        padding-right: $card-padding*2;
-      }
-
-      &::before {
-        background-color: $color-primary;
-      }
-
-      // HOVER STATE
-      &:hover {
-        @include box-shadow(-20px 10px 20px 0 rgba(black, 0.2));
-
-        &::before {
-          background-color: $color-primary-dark;
-        }
-      }
-    }
-  }
-}
+/*#############################################################################
+# CARDS
+#############################################################################*/
+
+$card-padding: 30px;
+
+.card {
+  background-color: #fff;
+  border: 1px solid #E9EAEA;
+  margin: 0 0 30px 0;
+  @include box-shadow(-10px 10px 20px 0 rgba(black, 0.05));
+  // @extend %transition-all;
+
+  .card-header {
+    padding: $card-padding $card-padding 0;
+    // @extend %transition-all;
+    @include pie-clearfix;
+
+    .card-title {
+      margin: 0;
+      @include float(left);
+
+      &.small {
+        font-size: 1.1rem
+      }
+    }
+
+    .card-icon {
+      @include float(right);
+    }
+
+    .header-baseline {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+    }
+  }
+
+  .card-body {
+    padding: $card-padding;
+    // @extend %transition-all;
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    &.small {
+      font-size: 12.8px;
+    }
+  }
+
+  // CREDIT OPTION CARD
+  &.credit-option {
+    cursor: pointer;
+    border: none;
+    overflow: hidden;
+    position: relative;
+    @include border-radius(4px);
+
+    .card-body {
+      padding: 20px 30px;
+
+      h5 {
+        font-size: rem-calc(14px);
+        margin: 0;
+      }
+
+      h6.credit-option-amount {
+        font-size: rem-calc(26px);
+        margin: 0;
+      }
+
+      p.option-info-line {
+        color: $color-secondary;
+        font-size: rem-calc(14px);
+        margin: 0;
+
+        span {
+          display: inline-block;
+          padding-right: 12px;
+          margin-right: 3px;
+          position: relative;
+
+          &::after {
+            content: "";
+            display: block;
+            background-color: $color-secondary-light;
+            width: 5px;
+            height: 5px;
+            position: absolute;
+            top: 50%;
+            right: 0;
+            @include border-radius(100%);
+            @include transform(translateY(-50%));
+          }
+
+          &:last-child {
+            padding: 0;
+            margin: 0;
+
+            &::after {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    &::before {
+      content: "";
+      display: block;
+      background-color: $color-secondary-light;
+      height: 100%;
+      width: 7px;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      // @extend %transition-all;
+    }
+
+    // HOVER STATE
+    &:hover {
+      @include box-shadow(-10px 10px 20px 0 rgba(black, 0.1));
+
+      &::before {
+        background-color: $color-secondary;
+      }
+    }
+
+    // SELECTED STATE
+    &.selected {
+      width: 370px;
+      @include border-right-radius(0);
+      @include box-shadow(-20px 10px 20px 0 rgba(black, 0.15));
+
+      .card-body {
+        padding-right: $card-padding*2;
+      }
+
+      &::before {
+        background-color: $color-primary;
+      }
+
+      // HOVER STATE
+      &:hover {
+        @include box-shadow(-20px 10px 20px 0 rgba(black, 0.2));
+
+        &::before {
+          background-color: $color-primary-dark;
+        }
+      }
+    }
+  }
+}