sempli-website-lib 7.1.0-beta.2 → 7.1.0-beta.4

package/styles/partials/_modals.scss

@@ -1,254 +1,254 @@
-/*#############################################################################
-# MODALS
-#############################################################################*/
-
-
-.modal-wrapper {
-  background: rgba(#434448, 0.9);
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 50;
-}
-
-.modal-box {
-  background: #fff;
-  width: calc(100vw - 20px);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  @include border-radius(4px);
-  @include box-shadow(-10px 10px 20px 0 rgba(black, 0.05));
-  @include transform(translate(-50%, -50%));
-
-  // Modal Box Sizes
-  &.large {
-    @include responsive($breakpoint-medium) {
-      width: 640px;
-    }
-  }
-
-  &.extra-large {
-    @include responsive($breakpoint-medium) {
-      width: 860px;
-    }
-  }
-
-  &.small {
-    @include responsive($breakpoint-medium) {
-      width: 440px;
-    }
-  }
-
-  // Centered text
-  &.centered {
-    text-align: center;
-  }
-
-  // Modal Box Elements
-
-  header {
-    border-bottom: 2px solid #F5F5F7;
-    padding: 10px 60px 10px 10px;
-    position: relative;
-
-    &.centered-header {
-      padding: 20px 40px 20px 40px;
-      text-align: center;
-
-      .modal-title {
-        padding-right: 0px;
-      }
-    }
-
-    .modal-title {
-      margin: 0;
-      padding-right: 50px;
-    }
-
-    .close-modal {
-      color: $color-secondary;
-      font-size: rem-calc(30px);
-      font-weight: 900;
-      position: absolute;
-      top: 50%;
-      right: 20px;
-      @include transform(translateY(-50%));
-
-      @include responsive($breakpoint-medium) {
-        right: 40px;
-      }
-    }
-
-    .modal-header-action {
-      position: absolute;
-      top: 50%;
-      right: 20px;
-      @include transform(translateY(-50%));
-
-      @include responsive($breakpoint-medium) {
-        right: 30px;
-      }
-    }
-
-    &.has-icon {
-      padding: 20px 90px;
-
-      img.icon {
-        position: absolute;
-        top: 50%;
-        left: 30px;
-        @include transform(translateY(-50%));
-      }
-    }
-  }
-
-  .body-container {
-    overflow-y: auto;
-    max-height: 350px;
-  }
-
-  .modal-body {
-    padding: 20px 10px;
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-
-    &.secondary {
-      background-color: #fafafb;
-    }
-
-    &.fixed-height {
-      overflow-y: auto;
-      max-height: 350px;
-    }
-
-    .modal-body-title {
-      margin: 0 0 20px 0;
-    }
-  }
-
-  .modal-email {
-    padding: 0 10px 10px;
-
-    .email-to,
-    .email-subject {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      grid-column-gap: 8px;
-      align-items: center;
-      border-bottom: 2px solid #E9EAEA;
-      padding: 12px 0;
-
-      .label {
-        grid-column: 1;
-        grid-row: 1;
-        color: $color-secondary;
-        font-weight: 900;
-      }
-
-      .emails,
-      .subject {
-        grid-column: 2;
-        grid-row: 1;
-        color: $color-text;
-      }
-
-      .email {
-        display: inline-block;
-        background-color: #E4E4FF;
-        padding: 3px 5px;
-        @include border-radius(4px);
-      }
-
-      .subject {
-        border: none;
-
-        &:focus {
-          outline: 0;
-        }
-      }
-    }
-
-    textarea.email-body {
-      border: none;
-      width: 100%;
-      height: 250px;
-      padding: 15px 0 0;
-      resize: none;
-
-      &:focus {
-        outline: 0;
-      }
-    }
-  }
-
-  .modal-warning {
-    background-color: #FFFFAB;
-    border-bottom: 2px solid #F5F5F7;
-    padding: 4px 0;
-
-    p {
-      font-size: rem-calc(14px);
-      margin: 0;
-    }
-  }
-
-  footer {
-    border-top: 2px solid #F5F5F7;
-    padding: 10px;
-    @include pie-clearfix;
-
-    &.centered-actions {
-      display: flex;
-      justify-content: center;
-    }
-
-    .button {
-      margin: 0;
-
-      &.left {
-        @include float(left);
-      }
-
-      &.right {
-        @include float(right);
-      }
-    }
-
-    @include responsive-max($breakpoint-small) {
-      text-align: center;
-
-      .button {
-        &.left {
-          display: flex;
-          align-items: center;
-          margin-right: 15px;
-        }
-      }
-    }
-  }
-
-  @include responsive($breakpoint-medium) {
-    width: 580px;
-
-    header {
-      padding: 20px 90px 20px 40px;
-    }
-
-    .modal-body {
-      padding: 30px 40px;
-    }
-
-    .modal-email {
-      padding: 0 20px 20px;
-    }
-
-    footer {
-      padding: 20px 40px;
-    }
-  }
-}
+/*#############################################################################
+# MODALS
+#############################################################################*/
+
+
+.modal-wrapper {
+  background: rgba(#434448, 0.9);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 3;
+}
+
+.modal-box {
+  background: #fff;
+  width: calc(100vw - 20px);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  @include border-radius(4px);
+  @include box-shadow(-10px 10px 20px 0 rgba(black, 0.05));
+  @include transform(translate(-50%, -50%));
+
+  // Modal Box Sizes
+  &.large {
+    @include responsive($breakpoint-medium) {
+      width: 640px;
+    }
+  }
+
+  &.extra-large {
+    @include responsive($breakpoint-medium) {
+      width: 860px;
+    }
+  }
+
+  &.small {
+    @include responsive($breakpoint-medium) {
+      width: 440px;
+    }
+  }
+
+  // Centered text
+  &.centered {
+    text-align: center;
+  }
+
+  // Modal Box Elements
+
+  header {
+    border-bottom: 2px solid #F5F5F7;
+    padding: 10px 60px 10px 10px;
+    position: relative;
+
+    &.centered-header {
+      padding: 20px 40px 20px 40px;
+      text-align: center;
+
+      .modal-title {
+        padding-right: 0px;
+      }
+    }
+
+    .modal-title {
+      margin: 0;
+      padding-right: 50px;
+    }
+
+    .close-modal {
+      color: $color-secondary;
+      font-size: rem-calc(30px);
+      font-weight: 900;
+      position: absolute;
+      top: 50%;
+      right: 20px;
+      @include transform(translateY(-50%));
+
+      @include responsive($breakpoint-medium) {
+        right: 40px;
+      }
+    }
+
+    .modal-header-action {
+      position: absolute;
+      top: 50%;
+      right: 20px;
+      @include transform(translateY(-50%));
+
+      @include responsive($breakpoint-medium) {
+        right: 30px;
+      }
+    }
+
+    &.has-icon {
+      padding: 20px 90px;
+
+      img.icon {
+        position: absolute;
+        top: 50%;
+        left: 30px;
+        @include transform(translateY(-50%));
+      }
+    }
+  }
+
+  .body-container {
+    overflow-y: auto;
+    max-height: 350px;
+  }
+
+  .modal-body {
+    padding: 20px 10px;
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    &.secondary {
+      background-color: #fafafb;
+    }
+
+    &.fixed-height {
+      overflow-y: auto;
+      max-height: 350px;
+    }
+
+    .modal-body-title {
+      margin: 0 0 20px 0;
+    }
+  }
+
+  .modal-email {
+    padding: 0 10px 10px;
+
+    .email-to,
+    .email-subject {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-column-gap: 8px;
+      align-items: center;
+      border-bottom: 2px solid #E9EAEA;
+      padding: 12px 0;
+
+      .label {
+        grid-column: 1;
+        grid-row: 1;
+        color: $color-secondary;
+        font-weight: 900;
+      }
+
+      .emails,
+      .subject {
+        grid-column: 2;
+        grid-row: 1;
+        color: $color-text;
+      }
+
+      .email {
+        display: inline-block;
+        background-color: #E4E4FF;
+        padding: 3px 5px;
+        @include border-radius(4px);
+      }
+
+      .subject {
+        border: none;
+
+        &:focus {
+          outline: 0;
+        }
+      }
+    }
+
+    textarea.email-body {
+      border: none;
+      width: 100%;
+      height: 250px;
+      padding: 15px 0 0;
+      resize: none;
+
+      &:focus {
+        outline: 0;
+      }
+    }
+  }
+
+  .modal-warning {
+    background-color: #FFFFAB;
+    border-bottom: 2px solid #F5F5F7;
+    padding: 4px 0;
+
+    p {
+      font-size: rem-calc(14px);
+      margin: 0;
+    }
+  }
+
+  footer {
+    border-top: 2px solid #F5F5F7;
+    padding: 10px;
+    @include pie-clearfix;
+
+    &.centered-actions {
+      display: flex;
+      justify-content: center;
+    }
+
+    .button {
+      margin: 0;
+
+      &.left {
+        @include float(left);
+      }
+
+      &.right {
+        @include float(right);
+      }
+    }
+
+    @include responsive-max($breakpoint-small) {
+      text-align: center;
+
+      .button {
+        &.left {
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+        }
+      }
+    }
+  }
+
+  @include responsive($breakpoint-medium) {
+    width: 580px;
+
+    header {
+      padding: 20px 90px 20px 40px;
+    }
+
+    .modal-body {
+      padding: 30px 40px;
+    }
+
+    .modal-email {
+      padding: 0 20px 20px;
+    }
+
+    footer {
+      padding: 20px 40px;
+    }
+  }
+}

package/styles/partials/_panels.scss

@@ -1,51 +1,51 @@
-/*#############################################################################
-# STEPS
-#############################################################################*/
-
-
-.panel {
-  font-size: rem-calc(13px);
-  margin: 30px 0;
-  padding: 10px 20px;
-  position: relative;
-  @include border-radius(6px);
-
-  &.has-icon {
-    padding-left: 60px;
-
-    img.icon {
-      position: absolute;
-      left: 20px;
-      top: 50%;
-      @include transform(translateY(-50%));
-    }
-  }
-
-  & :last-child {
-    margin: 0;
-  }
-
-  // States
-
-  &.success {
-    background-color: $color-success-light;
-  }
-
-  &.info {
-    background-color: #E4E4FF;
-  }
-
-  &.alert {
-    background-color: #ff90ab;
-    color: #721c24;
-  }
-
-  &.warning {
-    background-color: #ffffab;
-  }
-
-  &.primary-dark {
-    background-color: desaturate(darken($color-primary, 40%), 60%);
-    color: white;
-  }
-}
+/*#############################################################################
+# STEPS
+#############################################################################*/
+
+
+.panel {
+  font-size: rem-calc(13px);
+  margin: 30px 0;
+  padding: 10px 20px;
+  position: relative;
+  @include border-radius(6px);
+
+  &.has-icon {
+    padding-left: 60px;
+
+    img.icon {
+      position: absolute;
+      left: 20px;
+      top: 50%;
+      @include transform(translateY(-50%));
+    }
+  }
+
+  & :last-child {
+    margin: 0;
+  }
+
+  // States
+
+  &.success {
+    background-color: $color-success-light;
+  }
+
+  &.info {
+    background-color: #E4E4FF;
+  }
+
+  &.alert {
+    background-color: #ff90ab;
+    color: #721c24;
+  }
+
+  &.warning {
+    background-color: #ffffab;
+  }
+
+  &.primary-dark {
+    background-color: desaturate(darken($color-primary, 40%), 60%);
+    color: white;
+  }
+}