@soyfri/template 1.0.1 → 1.0.4

package/dist/assets/sass/_init.scss

@@ -0,0 +1,32 @@
+//
+// Main init file of global bootstrap and theme functions, mixins, variables and config
+//
+
+
+// Custom functions & mixins
+@import "./core/base/functions";
+@import "./core/base/mixins";
+@import "./core/components/mixins";
+@import "./core/vendors/plugins/mixins";
+
+// Custom variables
+@import "components/variables.custom";
+@import "./core/components/variables";
+@import "./core/components/variables-dark";
+@import "components/variables.override";
+
+// Bootstrap initializaton
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// 3rd-Party plugins variables
+@import "./core/vendors/plugins/variables";
+@import "./core/vendors/plugins/variables-dark";
+
+// Custom layout variables
+@import "./core/layout/base/variables";
+@import "layout/variables.custom";

package/dist/assets/sass/components/_btn-secondary.scss

@@ -0,0 +1,36 @@
+//
+// Secondary button
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    .btn.btn-secondary {
+        @include button-custom-variant(
+            $color: null, 
+            $icon-color: var(--#{$prefix}gray-600), 
+            $border-color: null, 
+            $bg-color: var(--#{$prefix}gray-200),
+            $color-active: null, 
+            $icon-color-active: var(--#{$prefix}primary), 
+            $border-color-active: null, 
+            $bg-color-active: var(--#{$prefix}gray-300),
+        );
+    }
+}
+
+@include color-mode(dark) {
+    // Secondary button
+    .btn.btn-secondary  {
+        @include button-custom-variant(
+            $color: null,
+            $icon-color: #878794,
+            $border-color: null, 
+            $bg-color: #1A1A1A,
+            $color-active: null,
+            $icon-color-active: null,
+            $border-color-active: null, 
+            $bg-color-active: #1A1A1A,
+        );
+    }
+}
+

package/dist/assets/sass/components/_landing.scss

@@ -0,0 +1,136 @@
+//
+// Landing elements
+//
+
+// Variables
+$landing-dark-color: #13263C;
+$landing-header-height: 100px;
+$landing-header-height-tablet-and-mobile: 70px;
+$landing-header-sticky-height: 70px;
+$landing-header-sticky-height-tablet-and-mobile: 70px;
+
+// Utility classes
+.landing-dark-bg {
+    background-color: $landing-dark-color;
+}
+
+.landing-dark-color {
+    color: $landing-dark-color;
+}
+
+.landing-dark-border {
+    border:1px dashed #2C3F5B;
+}
+
+.landing-dark-separator {
+    border-top:1px dashed #2C3F5B;
+}
+
+.landing-curve  {
+    position: relative;
+
+    svg {
+        position: relative;
+        top: 0;  
+        display: block;
+    }
+}
+
+// Landing header
+.landing-header {
+    display: flex;
+    align-items: center;    
+    height: $landing-header-height;
+
+    // Logos
+    .logo-default {
+        display: block;
+    }
+
+    .logo-sticky {
+        display: none;
+    }
+
+    // Menu
+    .menu {
+        // Menu link
+        .menu-link {
+            &.active {
+                color: $white;
+            }
+        }
+
+        // Header menu sticky mode
+        [data-kt-sticky-landing-header="on"] & {
+            // Menu link
+            .menu-link {
+                &.active {
+                    color: $primary;
+                    background-color: rgba(#EFF2F5, 0.4);
+                }
+            }
+        }
+    }
+
+    // Sticky header modes
+    [data-kt-sticky-landing-header="on"] & {        
+        padding: 0;
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 100;
+        background-color: $white;
+        box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
+        height: $landing-header-sticky-height;
+        
+        // Logos
+        .logo-sticky {
+            display: block;
+        }
+
+        .logo-default {
+            display: none;
+        }
+    }
+}
+
+// Fix body padding top when Landing sticky header is on
+body[data-kt-sticky-landing-header="on"] {
+    padding-top: $landing-header-height;
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    // Landing header
+    .landing-header {
+        height: $landing-header-height-tablet-and-mobile;
+
+        // Menu wrapper
+        .landing-menu-wrapper {
+            position: relative;
+            overflow: auto;
+        }
+
+        // Sticky header modes
+        [data-kt-sticky-landing-header="on"] & { 
+            height: $landing-header-sticky-height-tablet-and-mobile;
+        }
+
+        // Menu
+        .menu {
+            // Menu link
+            .menu-link {
+                &.active {
+                    color: $primary;
+                    background-color: rgba(#EFF2F5, 0.4);
+                }
+            }
+        }
+    }
+
+    // Fix body padding top when Landing sticky header is on
+    body[data-kt-sticky-landing-header="on"] {
+        padding-top: $landing-header-height-tablet-and-mobile;
+    }
+}

package/dist/assets/sass/components/_variables.custom.scss

@@ -0,0 +1,6 @@
+//
+// To make future updates easier consider overriding the global variables from _variables.bootstrap.scss and _variables.custom.scss for current demo in this file.
+// Note that this file is included first and variables defined in _variables.bootstrap.scss and _variables.custom.scss
+// are not accessible in this file but you can override any global variable as shown below:
+//
+

package/dist/assets/sass/components/_variables.override.scss

@@ -0,0 +1,15 @@
+//
+// To make future updates easier consider overriding the global variables from _variables.bootstrap.scss and _variables.custom.scss for current demo in this file.
+// Note that this file is included first and variables defined in _variables.bootstrap.scss and _variables.custom.scss
+// are not accessible in this file but you can override any global variable as shown below:
+//
+
+// Body bg
+$body-bg-dark:						$coal-100;
+
+// Card
+$card-box-shadow:                   0px 3px 4px 0px rgba(0, 0, 0, 0.03);
+$card-box-shadow-dark:  			none;
+$card-border-enabled: 				true;
+$card-border-color:					$gray-200;
+$card-border-color-dark:			$dark-light-dark;

package/dist/assets/sass/components/components.scss

@@ -0,0 +1,8 @@
+//
+// Components
+//
+
+// Import Dependencies
+@import "stepper/multistep";
+@import "landing";
+@import "btn-secondary";

package/dist/assets/sass/components/stepper/_multistep.scss

@@ -0,0 +1,42 @@
+//
+// Multistep stepper
+//
+
+// Custom
+.stepper.stepper-pills.stepper-multistep {
+    --#{$prefix}stepper-pills-size: 46px;
+    --#{$prefix}stepper-icon-border-radius: 9px;
+    --#{$prefix}stepper-icon-check-size: 1.25rem;
+
+    --#{$prefix}stepper-icon-bg-color: rgba(255, 255, 255, 0.03);
+    --#{$prefix}stepper-icon-bg-color-current: var(--#{$prefix}success);
+    --#{$prefix}stepper-icon-bg-color-completed: rgba(255, 255, 255, 0.03);
+
+    --#{$prefix}stepper-icon-border: 1px dashed rgba(255, 255, 255, 0.3);
+    --#{$prefix}stepper-icon-border-current: 0;
+    --#{$prefix}stepper-icon-border-completed: 1px dashed rgba(255, 255, 255, 0.3);
+
+    --#{$prefix}stepper-icon-number-color: var(--#{$prefix}white);
+    --#{$prefix}stepper-icon-number-color-current: var(--#{$prefix}white);
+    --#{$prefix}stepper-icon-number-color-completed: var(--#{$prefix}white);
+    
+    --#{$prefix}stepper-icon-check-color-completed: var(--#{$prefix}success);
+
+    --#{$prefix}stepper-label-title-opacity: 0.7;
+    --#{$prefix}stepper-label-title-opacity-current: 1;
+    --#{$prefix}stepper-label-title-opacity-completed: 1;
+
+    --#{$prefix}stepper-label-title-color: var(--#{$prefix}white);
+    --#{$prefix}stepper-label-title-color-current: var(--#{$prefix}white);
+    --#{$prefix}stepper-label-title-color-completed: var(--#{$prefix}white);
+    
+    --#{$prefix}stepper-label-desc-opacity: 0.7;
+    --#{$prefix}stepper-label-desc-opacity-current: 0.7;
+    --#{$prefix}stepper-label-desc-opacity-completed: 0.7;
+
+    --#{$prefix}stepper-label-desc-color: var(--#{$prefix}white); 
+    --#{$prefix}stepper-label-desc-color-current: var(--#{$prefix}white);
+    --#{$prefix}stepper-label-desc-color-completed: var(--#{$prefix}white);
+
+    --#{$prefix}stepper-line-border: 1px dashed rgba(255, 255, 255, 0.3);
+}

package/dist/assets/sass/core/base/_functions.scss

@@ -0,0 +1,10 @@
+//
+// Functions
+//
+
+// Import Dependencies
+@import "functions/get";
+@import "functions/set";
+@import "functions/math";
+@import "functions/valueif";
+@import "functions/theme-colors";

package/dist/assets/sass/core/base/_mixins.scss

@@ -0,0 +1,11 @@
+//
+// Mixins
+//
+
+// Import Dependencies
+@import "mixins/property";
+@import "mixins/browsers";
+@import "mixins/fixes";
+@import "mixins/reset";
+@import "mixins/placeholder";
+@import "mixins/breakpoints";

package/dist/assets/sass/core/base/functions/_get.scss

@@ -0,0 +1,82 @@
+//
+// Get
+//
+
+@function get($map, $keys...) {
+    @if length($keys) == 1 {
+        $keys: nth($keys, 1);
+    }
+
+    @if type-of($map) != 'map' or $map == null {
+        //@return false;
+    }
+
+    $warn: "#{nth($keys, 1)}";
+    $length: length($keys);
+    $get: map-get($map, nth($keys, 1));
+
+    @if $length > 1 {
+        @for $i from 2 through $length {
+            @if $get != null and type-of($get) == 'map' {
+                $warn: $warn + "->#{nth($keys, $i)}";
+                $get: map-get($get, nth($keys, $i));
+
+                @if $get == null {
+                    @return null;
+                }
+            }
+            @else {
+                @return get-warning($warn, $get, nth($keys, $i));
+            }
+        }
+    }
+
+    @return $get;
+}
+
+@function has($map, $keys...) {
+    @if length($keys) == 1 {
+        $keys: nth($keys, 1);
+    }
+
+    @if type-of($map) != 'map' or $map == null {
+        //@return false;
+    }
+
+    $warn: "#{nth($keys, 1)}";
+    $length: length($keys);
+    $get: map-get($map, nth($keys, 1));
+
+    @if $length > 1 {
+        @for $i from 2 through $length {
+            @if $get != null and type-of($get) == 'map' {
+                $warn: $warn + "->#{nth($keys, $i)}";
+                $get: map-get($get, nth($keys, $i));
+
+                @if $get == null {
+                    @return false;
+                }
+            }
+            @else {
+                 @return false;
+            }
+        }
+    }
+
+    @if $get != null {
+        @return true;
+    }
+    @else {
+        @return false;
+    }
+}
+
+@function get-warning($warn, $get, $key) {
+    @if $get == null {
+        @warn "Map has no value for key search `#{$warn}`";
+    }
+    @else if type-of($get) != 'map' {
+        @warn "Non-map value found for key search `#{$warn}`, cannot search for key `#{$key}`";
+    }
+    @return null;
+}

package/dist/assets/sass/core/base/functions/_math.scss

@@ -0,0 +1,15 @@
+//
+// Math
+//
+
+@function sqrt($r) {
+    $x0: 1;
+    $x1: $x0;
+
+    @for $i from 1 through 10 {
+        $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
+        $x0: $x1;
+    }
+
+    @return $x1;
+}

package/dist/assets/sass/core/base/functions/_set.scss

@@ -0,0 +1,43 @@
+/// Deep set function to set a value in nested maps
+
+@function set($map, $keys, $value) {
+	$maps: ($map,);
+	$result: null;
+	
+	// If the last key is a map already
+	// Warn the user we will be overriding it with $value
+	@if type-of(nth($keys, -1)) == "map" {
+		@warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
+	}
+	
+	// If $keys is a single key
+	// Just merge and return
+	@if length($keys) == 1 {
+		@return map-merge($map, ($keys: $value));
+	}
+	
+	// Loop from the first to the second to last key from $keys
+	// Store the associated map to this key in the $maps list
+	// If the key doesn't exist, throw an error
+	@for $i from 1 through length($keys) - 1 {
+		$current-key: nth($keys, $i);
+		$current-map: nth($maps, -1);
+		$current-get: map-get($current-map, $current-key);
+		@if $current-get == null {
+		@error "Key `#{$key}` doesn't exist at current level in map.";
+		}
+		$maps: append($maps, $current-get);
+	}
+	
+	// Loop from the last map to the first one
+	// Merge it with the previous one
+	@for $i from length($maps) through 1 {
+		$current-map: nth($maps, $i);
+		$current-key: nth($keys, $i);
+		$current-val: if($i == length($maps), $value, $result);
+		$result: map-merge($current-map, ($current-key: $current-val));
+	}
+	
+	// Return result
+	@return $result;
+}

package/dist/assets/sass/core/base/functions/_theme-colors.scss

@@ -0,0 +1,15 @@
+//
+// Bootstrap extended functions
+//
+
+@function theme-inverse-color($key: "primary") {
+    @return get($theme-inverse-colors, $key);
+}
+
+@function theme-active-color($key: "primary") {
+    @return get($theme-active-colors, $key);
+}
+
+@function theme-light-color($key: "primary") {
+    @return get($theme-light-colors, $key);
+}

package/dist/assets/sass/core/base/functions/_valueif.scss

@@ -0,0 +1,13 @@
+//
+// valueif
+//
+
+@function valueif($check, $trueValue, $falseValue: null) {
+    @if $check {
+        @return $trueValue;
+    } @else if $falseValue != null {
+        @return $falseValue;
+    } @else {
+        @return null;
+    }
+}

package/dist/assets/sass/core/base/mixins/_breakpoints.scss

@@ -0,0 +1,25 @@
+// Media of at most the maximum and minimum breakpoint widths. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint.
+
+@mixin media-breakpoint-direction($direction, $name, $breakpoints: $grid-breakpoints) {
+    @if $direction == up {
+        $min: breakpoint-min($name, $breakpoints);
+
+        @if $min {
+            @media (min-width: $min) {
+                @content;
+            }
+        } @else {
+            @content;
+        }
+
+    } @else if $direction == down {
+        $max: breakpoint-max($name, $breakpoints);
+
+        @if $max {
+            @media (max-width: $max) {
+                @content;
+            }
+        }
+    }
+}

package/dist/assets/sass/core/base/mixins/_browsers.scss

@@ -0,0 +1,23 @@
+//
+// Browsers
+//
+
+@mixin for-edge {
+    // Microsoft Edge
+	@supports (-ms-ime-align:auto) {
+		@content;
+	}
+}
+
+@mixin for-safari {
+	.safari {
+		@content;
+	}
+}
+
+@mixin for-firefox {
+	// Firefox
+    @-moz-document url-prefix() {
+		@content;
+	}
+}

package/dist/assets/sass/core/base/mixins/_fixes.scss

@@ -0,0 +1,15 @@
+//
+// Fixes
+//
+
+
+@mixin fix-fixed-position-lags() {
+	// webkit hack for smooth font view on fixed positioned elements
+	-webkit-backface-visibility:hidden;
+	backface-visibility:hidden;
+}
+
+@mixin fix-animation-lags() {
+    transform: translateZ(0);
+    -webkit-transform-style: preserve-3d;
+}

package/dist/assets/sass/core/base/mixins/_placeholder.scss

@@ -0,0 +1,16 @@
+//
+// Input placeholder color
+//
+
+@mixin placeholder($color) {
+    // Chrome, Firefox, Opera, Safari 10.1+
+    &::placeholder { 
+        color: $color;
+    }
+    
+    // Firefox
+    &::-moz-placeholder {
+        color: $color;
+        opacity: 1;
+    }
+}

package/dist/assets/sass/core/base/mixins/_property.scss

@@ -0,0 +1,9 @@
+//
+// CSS Property
+//
+
+@mixin property($attr, $value, $important: '') {
+    @if  $value != null and $value != false  {
+        #{$attr}: #{$value} #{$important};
+    }
+}

package/dist/assets/sass/core/base/mixins/_reset.scss

@@ -0,0 +1,23 @@
+//
+// Reset
+//
+
+@mixin button-reset() {
+    appearance: none;
+    box-shadow: none;
+    border-radius: 0;
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+    outline: none  !important;
+    margin: 0;
+    padding: 0;
+}
+
+@mixin input-reset() {
+	border: 0;
+	background-color: transparent;
+    outline: none !important;
+	box-shadow: none;
+    border-radius: 0;
+}