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

package/styles/modules/_functions.scss

@@ -1,37 +1,37 @@
-/*#############################################################################
-# FUNCTIONS
-#############################################################################*/
-
-
-// ===========================================================================
-
-// This is the default html and body font-size for the base rem value.
-$rem-base: 16px !default;
-
-// STRIP UNIT
-// It strips the unit of measure and returns it
-@function strip-unit($num) {
-  @return calc($num / ($num * 0 + 1px));
-}
-
-// CONVERT TO REM
-@function convert-to-rem($value, $base-value: $rem-base) {
-  $value: calc((strip-unit($value) / strip-unit($base-value)) * 1rem);
-  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
-  @return $value;
-}
-
-// REM CALC
-@function rem-calc($values, $base-value: $rem-base) {
-  $max: length($values);
-
-  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
-
-  $remValues: ();
-  @for $i from 1 through $max {
-    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
-  }
-  @return $remValues;
-}
-
-// ===========================================================================
+/*#############################################################################
+# FUNCTIONS
+#############################################################################*/
+
+
+// ===========================================================================
+
+// This is the default html and body font-size for the base rem value.
+$rem-base: 16px !default;
+
+// STRIP UNIT
+// It strips the unit of measure and returns it
+@function strip-unit($num) {
+  @return calc($num / ($num * 0 + 1px));
+}
+
+// CONVERT TO REM
+@function convert-to-rem($value, $base-value: $rem-base) {
+  $value: calc((strip-unit($value) / strip-unit($base-value)) * 1rem);
+  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
+  @return $value;
+}
+
+// REM CALC
+@function rem-calc($values, $base-value: $rem-base) {
+  $max: length($values);
+
+  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
+
+  $remValues: ();
+  @for $i from 1 through $max {
+    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
+  }
+  @return $remValues;
+}
+
+// ===========================================================================

package/styles/modules/_mixins.scss

@@ -1,68 +1,68 @@
-/*#############################################################################
-# MIXINS
-#############################################################################*/
-
-// Media Queries
-/* stylelint-disable media-query-no-invalid */
-@mixin responsive($break-point) {
-
-  @media only screen and (min-width: rem-calc($break-point)) { @content; }
-
-}
-
-@mixin responsive-min-max($min-break-point, $max-break-point) {
-
-  @media only screen and (min-width: rem-calc($min-break-point)) and (max-width: rem-calc($max-break-point)) { @content; }
-
-}
-
-@mixin responsive-max($break-point) {
-
-  @media only screen and (max-width: rem-calc($break-point)) { @content; }
-
-}
-
-@mixin responsive-height($break-point) {
-
-  @media only screen and (min-height: rem-calc($break-point)) { @content; }
-
-}
-
-@mixin responsive-max-height($break-point) {
-
-  @media only screen and (max-height: rem-calc($break-point)) { @content; }
-
-}
-/* stylelint-enable media-query-no-invalid */
-
-// ------------------------------------------------
-// Retina display support
-/* Example:
-div.logo {
-  background: url("logo.png") no-repeat;
-  @include background-retina("logo2x.png", 100px, 25px);
-}
-*/
-/* stylelint-disable media-feature-name-no-unknown */
-@mixin background-retina($image, $width, $height) {
-  @media
-  only screen and (-webkit-min-device-pixel-ratio: 1.3),
-  only screen and (-o-min-device-pixel-ratio: 2.6 / 2),
-  only screen and (min--moz-device-pixel-ratio: 1.3),
-  only screen and (min-device-pixel-ratio: 1.3),
-  only screen and (min-resolution: 1.3dppx) {
-    background-image: url($image);
-    background-size: $width $height;
-  }
-}
-/* stylelint-enable media-feature-name-no-unknown */
-
-
-/*#############################################################################
-# PLACEHOLDERS
-#############################################################################*/
-
-
-%transition-all {
-  @include transition(all 0.2s cubic-bezier(.7, 0, .175, 1) 0s);
-}
+/*#############################################################################
+# MIXINS
+#############################################################################*/
+
+// Media Queries
+/* stylelint-disable media-query-no-invalid */
+@mixin responsive($break-point) {
+
+  @media only screen and (min-width: rem-calc($break-point)) { @content; }
+
+}
+
+@mixin responsive-min-max($min-break-point, $max-break-point) {
+
+  @media only screen and (min-width: rem-calc($min-break-point)) and (max-width: rem-calc($max-break-point)) { @content; }
+
+}
+
+@mixin responsive-max($break-point) {
+
+  @media only screen and (max-width: rem-calc($break-point)) { @content; }
+
+}
+
+@mixin responsive-height($break-point) {
+
+  @media only screen and (min-height: rem-calc($break-point)) { @content; }
+
+}
+
+@mixin responsive-max-height($break-point) {
+
+  @media only screen and (max-height: rem-calc($break-point)) { @content; }
+
+}
+/* stylelint-enable media-query-no-invalid */
+
+// ------------------------------------------------
+// Retina display support
+/* Example:
+div.logo {
+  background: url("logo.png") no-repeat;
+  @include background-retina("logo2x.png", 100px, 25px);
+}
+*/
+/* stylelint-disable media-feature-name-no-unknown */
+@mixin background-retina($image, $width, $height) {
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 1.3),
+  only screen and (-o-min-device-pixel-ratio: 2.6 / 2),
+  only screen and (min--moz-device-pixel-ratio: 1.3),
+  only screen and (min-device-pixel-ratio: 1.3),
+  only screen and (min-resolution: 1.3dppx) {
+    background-image: url($image);
+    background-size: $width $height;
+  }
+}
+/* stylelint-enable media-feature-name-no-unknown */
+
+
+/*#############################################################################
+# PLACEHOLDERS
+#############################################################################*/
+
+
+%transition-all {
+  @include transition(all 0.2s cubic-bezier(.7, 0, .175, 1) 0s);
+}

package/styles/modules/_variables.scss

@@ -1,54 +1,54 @@
-// Layout Change Breakpoints
-
-$breakpoint-small: 481px;
-$breakpoint-medium: 641px;
-$breakpoint-xmedium: 860px;
-$breakpoint-large: 1025px;
-$breakpoint-xlarge: 1200px;
-$breakpoint-xxlarge: 1441px;
-$breakpoint-xxxlarge: 1921px;
-
-// Font size variables
-$font-size-extra-large:	  32px;
-$font-size-large:				  18px;
-$font-size-md-large:		  16px;
-$font-size-md:            14px;
-$font-size-small:				  12px;
-$font-size-mini:				  10px;
-
-$font-weight-thin: 		    100;
-$font-weight-light: 	    300;
-$font-weight-normal: 	    400;
-$font-weight-medium: 	    500;
-$font-weight-bold: 		    700;
-
-// Colors
-$color-primary: #4D4CFC;
-$color-primary-light: lighten($color-primary, 15%);
-$color-primary-dark: darken($color-primary, 20%);
-$color-primary-darker: desaturate(darken($color-primary, 40%), 60%);
-
-$color-secondary: #AFB3C0;
-$color-secondary-light: lighten($color-secondary, 15%);
-$color-secondary-dark: darken($color-secondary, 15%);
-
-$color-success: #45DFB0;
-$color-success-light: lighten($color-success, 15%);
-$color-success-dark: darken($color-success, 15%);
-
-$color-alert: #FF425E;
-$color-alert-light: lighten($color-alert, 15%);
-$color-alert-dark: darken($color-alert, 15%);
-
-$color-warning: #FFFF00;
-$color-warning-light: lighten($color-warning, 15%);
-$color-warning-dark: darken($color-warning, 15%);
-
-$color-dark-gray: #666666;
-
-$color-text: #434448;
-$color-text: #434448;
-$default-color-hover: #EFF0F3;
-
-$default-background-color-app: #F4F4F5;
-$list-divider-color: #dadce2;
+// Layout Change Breakpoints
+
+$breakpoint-small: 481px;
+$breakpoint-medium: 641px;
+$breakpoint-xmedium: 860px;
+$breakpoint-large: 1025px;
+$breakpoint-xlarge: 1200px;
+$breakpoint-xxlarge: 1441px;
+$breakpoint-xxxlarge: 1921px;
+
+// Font size variables
+$font-size-extra-large:	  32px;
+$font-size-large:				  18px;
+$font-size-md-large:		  16px;
+$font-size-md:            14px;
+$font-size-small:				  12px;
+$font-size-mini:				  10px;
+
+$font-weight-thin: 		    100;
+$font-weight-light: 	    300;
+$font-weight-normal: 	    400;
+$font-weight-medium: 	    500;
+$font-weight-bold: 		    700;
+
+// Colors
+$color-primary: #4D4CFC;
+$color-primary-light: lighten($color-primary, 15%);
+$color-primary-dark: darken($color-primary, 20%);
+$color-primary-darker: desaturate(darken($color-primary, 40%), 60%);
+
+$color-secondary: #AFB3C0;
+$color-secondary-light: lighten($color-secondary, 15%);
+$color-secondary-dark: darken($color-secondary, 15%);
+
+$color-success: #45DFB0;
+$color-success-light: lighten($color-success, 15%);
+$color-success-dark: darken($color-success, 15%);
+
+$color-alert: #FF425E;
+$color-alert-light: lighten($color-alert, 15%);
+$color-alert-dark: darken($color-alert, 15%);
+
+$color-warning: #FFFF00;
+$color-warning-light: lighten($color-warning, 15%);
+$color-warning-dark: darken($color-warning, 15%);
+
+$color-dark-gray: #666666;
+
+$color-text: #434448;
+$color-text: #434448;
+$default-color-hover: #EFF0F3;
+
+$default-background-color-app: #F4F4F5;
+$list-divider-color: #dadce2;