sempli-website-lib 4.1.4 → 5.0.2

package/styles/partials/_base.scss

@@ -1,281 +1,281 @@
-/*#############################################################################
-# BASE
-#############################################################################*/
-
-
-html {
-  box-sizing: border-box;
-}
-
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-
-html,
-body {
-  min-height: 100%;
-  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 1.5;
-  overflow-x: hidden;
-}
-
-body {
-  background-color: #fff;
-  color: $color-text;
-}
-
-// =======================
-// TYPOGRAPHY
-// Headings
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 900;
-  margin: 0.5em 0;
-  line-height: 1.4em;
-}
-
-h1 {
-  font-size: rem-calc(30px);
-
-  @include responsive($breakpoint-medium) {
-    font-size: rem-calc(38px);
-  }
-}
-
-h2 {
-  font-size: rem-calc(26px);
-
-  @include responsive($breakpoint-medium) {
-    font-size: rem-calc(32px);
-  }
-}
-
-h3 {
-  font-size: rem-calc(22px);
-
-  @include responsive($breakpoint-medium) {
-    font-size: rem-calc(28px);
-  }
-}
-
-h4 {
-  font-size: rem-calc(18px);
-
-  @include responsive($breakpoint-medium) {
-    font-size: rem-calc(22px);
-  }
-}
-
-h5 {
-  font-size: rem-calc(16px);
-  // text-transform: uppercase;
-
-  @include responsive($breakpoint-medium) {
-    font-size: rem-calc(16px);
-  }
-}
-
-h6 {
-  font-size: rem-calc(16px);
-
-  @include responsive($breakpoint-medium) {
-    font-size: rem-calc(16px);
-  }
-}
-
-// Paragraphs
-p {
-  margin: 0 0 20px;
-}
-
-p, span {
-  &.small {
-    font-size: rem-calc(14px);
-  }
-
-  &.opacity {
-    opacity: 0.5;
-  }
-
-  &.alert {
-    color: $color-alert;
-  }
-
-  &.success {
-    color: $color-success;
-  }
-
-  &.secondary {
-    color: $color-secondary;
-  }
-
-  &.centered {
-    text-align: center;
-  }
-}
-
-//  Links
-
-a {
-  color: $color-primary;
-  text-decoration: none;
-
-  @include transition(
-    color 0.3s cubic-bezier(.7, 0, .175, 1) 0s,
-    background-color 0.3s cubic-bezier(.7, 0, .175, 1) 0s
-  );
-
-
-  &:hover {
-    color: darken($color-primary,7%);
-  }
-
-  &.secondary {
-    color: $color-secondary;
-
-    &:hover {
-      color: $color-secondary-dark;
-      text-decoration: underline;
-    }
-  }
-
-  &.alert {
-    color: $color-alert;
-
-    &:hover {
-      color: $color-alert-dark;
-      text-decoration: underline;
-    }
-  }
-
-  &.underlined {
-    text-decoration: underline;
-  }
-}
-
-// Text Modifiers
-
-.text-secondary {
-  color: $color-secondary;
-}
-
-.text-success {
-  color: $color-success;
-}
-
-.text-centered {
-  text-align: center;
-}
-
-.text-underline {
-  text-decoration: underline
-}
-
-// Horizontal Rule
-
-hr {
-  border: none;
-  border-bottom: 1px solid $color-secondary-light;
-  margin: 30px 0;
-
-  &.translucent {
-    opacity: 0.5;
-  }
-
-  &.big-push {
-    margin: 60px 0;
-  }
-}
-
-// text sizes
-
-.text-base-size {
-  font-size: $rem-base!important;
-}
-
-.text-xs {
-  font-size: rem-calc($font-size-mini) !important;
-}
-
-.text-sm {
-  font-size: rem-calc($font-size-small) !important;
-}
-
-.text-md {
-  font-size: rem-calc($font-size-md) !important;
-}
-
-.text-md-large {
-  font-size: $font-size-md-large!important;
-}
-
-.text-lg {
-  font-size: rem-calc($font-size-large) !important;
-}
-
-.text-elg {
-  font-size: rem-calc($font-size-extra-large) !important;
-  line-height: 34px;
-}
-
-.text-thin {
-  font-weight: $font-weight-thin !important;
-}
-
-.text-light {
-  font-weight: $font-weight-normal !important;
-}
-
-.text-w-normal {
-  font-weight: $font-weight-normal!important;
-}
-
-.text-w-normal {
-  font-weight: $font-weight-medium!important;
-}
-
-.text-w-600 {
-  font-weight: 600!important;
-}
-
-.text-bold {
-  font-weight: $font-weight-bold!important;
-}
-
-// Magin Modifiers
-.pb-0 {
-  padding-bottom: 0 !important;
-}
-
-.pb-20 {
-  padding-bottom: 20px !important;
-}
-
-.pt-20 {
-  padding-top: 20px !important;
-}
-
-.mt-0 {
-  margin-top: 0 !important;
-}
-
-.mt-3r {
-  margin-top: 3rem !important;
-}
-
-.mt-80 {
-  margin-top: 80px !important;
-}
-
-.mb-0 {
-  margin-bottom: 0 !important;
-}
-
-// =======================
+/*#############################################################################
+# BASE
+#############################################################################*/
+
+
+html {
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+html,
+body {
+  min-height: 100%;
+  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.5;
+  overflow-x: hidden;
+}
+
+body {
+  background-color: #fff;
+  color: $color-text;
+}
+
+// =======================
+// TYPOGRAPHY
+// Headings
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 900;
+  margin: 0.5em 0;
+  line-height: 1.4em;
+}
+
+h1 {
+  font-size: rem-calc(30px);
+
+  @include responsive($breakpoint-medium) {
+    font-size: rem-calc(38px);
+  }
+}
+
+h2 {
+  font-size: rem-calc(26px);
+
+  @include responsive($breakpoint-medium) {
+    font-size: rem-calc(32px);
+  }
+}
+
+h3 {
+  font-size: rem-calc(22px);
+
+  @include responsive($breakpoint-medium) {
+    font-size: rem-calc(28px);
+  }
+}
+
+h4 {
+  font-size: rem-calc(18px);
+
+  @include responsive($breakpoint-medium) {
+    font-size: rem-calc(22px);
+  }
+}
+
+h5 {
+  font-size: rem-calc(16px);
+  // text-transform: uppercase;
+
+  @include responsive($breakpoint-medium) {
+    font-size: rem-calc(16px);
+  }
+}
+
+h6 {
+  font-size: rem-calc(16px);
+
+  @include responsive($breakpoint-medium) {
+    font-size: rem-calc(16px);
+  }
+}
+
+// Paragraphs
+p {
+  margin: 0 0 20px;
+}
+
+p, span {
+  &.small {
+    font-size: rem-calc(14px);
+  }
+
+  &.opacity {
+    opacity: 0.5;
+  }
+
+  &.alert {
+    color: $color-alert;
+  }
+
+  &.success {
+    color: $color-success;
+  }
+
+  &.secondary {
+    color: $color-secondary;
+  }
+
+  &.centered {
+    text-align: center;
+  }
+}
+
+//  Links
+
+a {
+  color: $color-primary;
+  text-decoration: none;
+
+  @include transition(
+    color 0.3s cubic-bezier(.7, 0, .175, 1) 0s,
+    background-color 0.3s cubic-bezier(.7, 0, .175, 1) 0s
+  );
+
+
+  &:hover {
+    color: darken($color-primary,7%);
+  }
+
+  &.secondary {
+    color: $color-secondary;
+
+    &:hover {
+      color: $color-secondary-dark;
+      text-decoration: underline;
+    }
+  }
+
+  &.alert {
+    color: $color-alert;
+
+    &:hover {
+      color: $color-alert-dark;
+      text-decoration: underline;
+    }
+  }
+
+  &.underlined {
+    text-decoration: underline;
+  }
+}
+
+// Text Modifiers
+
+.text-secondary {
+  color: $color-secondary;
+}
+
+.text-success {
+  color: $color-success;
+}
+
+.text-centered {
+  text-align: center;
+}
+
+.text-underline {
+  text-decoration: underline
+}
+
+// Horizontal Rule
+
+hr {
+  border: none;
+  border-bottom: 1px solid $color-secondary-light;
+  margin: 30px 0;
+
+  &.translucent {
+    opacity: 0.5;
+  }
+
+  &.big-push {
+    margin: 60px 0;
+  }
+}
+
+// text sizes
+
+.text-base-size {
+  font-size: $rem-base!important;
+}
+
+.text-xs {
+  font-size: rem-calc($font-size-mini) !important;
+}
+
+.text-sm {
+  font-size: rem-calc($font-size-small) !important;
+}
+
+.text-md {
+  font-size: rem-calc($font-size-md) !important;
+}
+
+.text-md-large {
+  font-size: $font-size-md-large!important;
+}
+
+.text-lg {
+  font-size: rem-calc($font-size-large) !important;
+}
+
+.text-elg {
+  font-size: rem-calc($font-size-extra-large) !important;
+  line-height: 34px;
+}
+
+.text-thin {
+  font-weight: $font-weight-thin !important;
+}
+
+.text-light {
+  font-weight: $font-weight-normal !important;
+}
+
+.text-w-normal {
+  font-weight: $font-weight-normal!important;
+}
+
+.text-w-normal {
+  font-weight: $font-weight-medium!important;
+}
+
+.text-w-600 {
+  font-weight: 600!important;
+}
+
+.text-bold {
+  font-weight: $font-weight-bold!important;
+}
+
+// Magin Modifiers
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+
+.pb-20 {
+  padding-bottom: 20px !important;
+}
+
+.pt-20 {
+  padding-top: 20px !important;
+}
+
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mt-3r {
+  margin-top: 3rem !important;
+}
+
+.mt-80 {
+  margin-top: 80px !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+// =======================