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

package/styles/partials/_icons.scss

@@ -1,12 +1,12 @@
-/*#############################################################################
-# ICONS
-#############################################################################*/
-
-
-// Icons
-[class^="icon-"], [class*=" icon-"] {
-  // height: 32px;
-  // width: 32px;
-  // display: inline-block;
-  // fill: currentColor;
-}
+/*#############################################################################
+# ICONS
+#############################################################################*/
+
+
+// Icons
+[class^="icon-"], [class*=" icon-"] {
+  // height: 32px;
+  // width: 32px;
+  // display: inline-block;
+  // fill: currentColor;
+}

package/styles/partials/_layout.scss

@@ -1,149 +1,149 @@
-/*#############################################################################
-# LAYOUT
-#############################################################################*/
-
-
-// Grid Structure
-$gridColumns: 12;
-$breakPoints: (
-  medium: (
-    short-hand: "md",
-    resolution: $breakpoint-medium
-  ),
-  xmedium: (
-    short-hand: "xm",
-    resolution: $breakpoint-xmedium
-  ),
-  large: (
-    short-hand: "lg",
-    resolution: $breakpoint-large
-  ),
-  xlarge: (
-    short-hand: "xl",
-    resolution: $breakpoint-xlarge
-  )
-);
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-
-  @include responsive($breakpoint-medium) {
-    grid-column-gap: 40px;
-  }
-
-  .col {
-    @for $i from 1 through $gridColumns {
-      &.sm#{$i}{
-        grid-column: span $i;
-      }
-    }
-
-    @each $breakPointName, $breakPointProp in $breakPoints {
-      @include responsive(map-get($breakPointProp, "resolution")){
-        @for $i from 1 through $gridColumns {
-          &.#{map-get($breakPointProp, "short-hand")}#{$i}{
-            grid-column: span $i;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Structure
-.section-wrapper {
-  padding: 80px 0;
-
-  &:last-child {
-    padding: 80px 0 120px;
-  }
-
-  // Sides Push
-  &.sides-push {
-    background-color: #f7f8fb;
-    margin: 40px 20px;
-    @include border-radius(10px);
-
-    @include responsive($breakpoint-large) {
-      margin: 40px;
-    }
-  }
-
-  // Negative State
-  &.negative {
-    background-color: $color-primary-darker;
-    color: white;
-  }
-}
-
-// Sides Push
-.sides-push {
-  background-color: #f7f8fb;
-  margin: 40px 20px;
-  @include border-radius(10px);
-
-  @include responsive($breakpoint-large) {
-    margin: 40px;
-  }
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px 10px;
-
-  @include responsive($breakpoint-medium) {
-    padding: 0 20px;
-  }
-
-  // Centered content
-  &.centered {
-    text-align: center;
-  }
-
-  .container {
-    padding: 0;
-  }
-}
-
-.content-box {
-  margin-bottom: 100px;
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-
-  @include responsive($breakpoint-medium) {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-column-gap: 10%;
-    justify-items: center;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-
-    &.reverse {
-      .content-box-col {
-        &:nth-child(1) {
-          grid-column: 2;
-          grid-row: 1;
-        }
-
-        &:nth-child(2) {
-          grid-column: 1;
-          grid-row: 1;
-        }
-      }
-    }
-  }
-
-  @include responsive($breakpoint-xmedium) {
-    grid-column-gap: 20%;
-  }
-
-  @include responsive($breakpoint-xxlarge) {
-    margin-bottom: 200px;
-  }
-
-}
+/*#############################################################################
+# LAYOUT
+#############################################################################*/
+
+
+// Grid Structure
+$gridColumns: 12;
+$breakPoints: (
+  medium: (
+    short-hand: "md",
+    resolution: $breakpoint-medium
+  ),
+  xmedium: (
+    short-hand: "xm",
+    resolution: $breakpoint-xmedium
+  ),
+  large: (
+    short-hand: "lg",
+    resolution: $breakpoint-large
+  ),
+  xlarge: (
+    short-hand: "xl",
+    resolution: $breakpoint-xlarge
+  )
+);
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+
+  @include responsive($breakpoint-medium) {
+    grid-column-gap: 40px;
+  }
+
+  .col {
+    @for $i from 1 through $gridColumns {
+      &.sm#{$i}{
+        grid-column: span $i;
+      }
+    }
+
+    @each $breakPointName, $breakPointProp in $breakPoints {
+      @include responsive(map-get($breakPointProp, "resolution")){
+        @for $i from 1 through $gridColumns {
+          &.#{map-get($breakPointProp, "short-hand")}#{$i}{
+            grid-column: span $i;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Structure
+.section-wrapper {
+  padding: 80px 0;
+
+  &:last-child {
+    padding: 80px 0 120px;
+  }
+
+  // Sides Push
+  &.sides-push {
+    background-color: #f7f8fb;
+    margin: 40px 20px;
+    @include border-radius(10px);
+
+    @include responsive($breakpoint-large) {
+      margin: 40px;
+    }
+  }
+
+  // Negative State
+  &.negative {
+    background-color: $color-primary-darker;
+    color: white;
+  }
+}
+
+// Sides Push
+.sides-push {
+  background-color: #f7f8fb;
+  margin: 40px 20px;
+  @include border-radius(10px);
+
+  @include responsive($breakpoint-large) {
+    margin: 40px;
+  }
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px 10px;
+
+  @include responsive($breakpoint-medium) {
+    padding: 0 20px;
+  }
+
+  // Centered content
+  &.centered {
+    text-align: center;
+  }
+
+  .container {
+    padding: 0;
+  }
+}
+
+.content-box {
+  margin-bottom: 100px;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+
+  @include responsive($breakpoint-medium) {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 10%;
+    justify-items: center;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+
+    &.reverse {
+      .content-box-col {
+        &:nth-child(1) {
+          grid-column: 2;
+          grid-row: 1;
+        }
+
+        &:nth-child(2) {
+          grid-column: 1;
+          grid-row: 1;
+        }
+      }
+    }
+  }
+
+  @include responsive($breakpoint-xmedium) {
+    grid-column-gap: 20%;
+  }
+
+  @include responsive($breakpoint-xxlarge) {
+    margin-bottom: 200px;
+  }
+
+}