@soyfri/template 1.0.0 → 1.0.3

package/dist/assets/sass/core/components/forms/_form-check.scss

@@ -0,0 +1,193 @@
+//
+// Form Check
+//
+
+// Customization
+.form-check {
+    // Input 
+    &:not(.form-switch) {
+        .form-check-input {
+            &[type="checkbox"] {
+                background-size: $form-check-input-bg-size;
+            }
+        }
+    }
+    
+    // Sizing
+    &.form-check-sm {
+        .form-check-input {
+            height: $form-check-input-width-sm;
+            width: $form-check-input-width-sm;
+        }
+    }
+
+    &.form-check-lg {
+        .form-check-input {
+            height: $form-check-input-width-lg;
+            width: $form-check-input-width-lg;
+        }
+    }
+
+    // Inline
+    &.form-check-inline {
+        display: inline-block;
+        margin-right: $form-check-inline-margin-end;
+    }
+
+    // Solid
+    &.form-check-solid {
+        .form-check-input {
+            border: 0;
+
+            &:not(:checked) {
+                background-color: $form-check-input-bg-solid;
+            }            
+
+            &[type=checkbox]:indeterminate {
+                background-color: $form-check-input-checked-bg-color;
+            }
+        }
+    }
+
+    // States
+    // Success state
+    &.form-check-success {
+        .form-check-input {
+            &:checked {
+                background-color: var(--#{$prefix}success);
+            }
+        }
+    }
+
+    // Danger state
+    &.form-check-danger {
+        .form-check-input {
+            &:checked {
+                background-color: var(--#{$prefix}danger);
+            }
+        }
+    }
+
+    // Warning state
+    &.form-check-warning {
+        .form-check-input {
+            &:checked {
+                background-color: var(--#{$prefix}warning);
+            }
+        }
+    }
+}
+
+// Custom checkbox and radio
+.form-check-custom {
+    display: flex;
+    align-items: center;
+    padding-left: 0;
+    margin: 0;
+
+    // Input
+    .form-check-input {
+        margin: 0;
+        float: none;
+        flex-shrink: 0;
+    }
+
+    // Label
+    .form-check-label {
+        margin-left: 0.55rem;
+    }
+}
+
+// Switch
+.form-switch {   
+    &.form-check-custom {
+        .form-check-input {
+            height: $form-switch-height;
+        }
+
+        &.form-switch-sm {
+            .form-check-input {
+                height: $form-switch-height-sm;
+                width: $form-switch-width-sm;
+            }
+        }
+
+        &.form-switch-lg {
+            .form-check-input {
+                height: $form-switch-height-lg;
+                width: $form-switch-width-lg;
+            }
+        }
+    }
+
+    // Solid
+    &.form-check-solid {
+        .form-check-input {
+            --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-solid)};
+
+            &:not(:checked) {
+                background-color: $form-check-input-bg-solid;
+            } 
+        }
+    }    
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .form-switch .form-check-input {
+            &:focus:not(:checked) {
+                --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+            }
+        }
+    }
+}
+
+// Image 
+.form-check-image {
+    position: relative;
+    overflow: hidden;
+
+    img {
+        max-width: 100%;    
+    }
+
+    .form-check-wrapper {        
+        @include border-radius($border-radius-lg);        
+        border: 2px solid transparent;    
+        transition: $transition-base;
+        cursor: pointer;
+        overflow: hidden;
+        margin-bottom: 0.75rem;
+    }
+
+    .form-check-rounded {
+        @include border-radius($border-radius-lg);        
+    }        
+
+    .form-check-label {
+        font-weight: $font-weight-bold;    
+        margin-left: 0.5rem;
+    }
+
+    &.active:not(.form-check-success):not(.form-check-danger) {
+        .form-check-wrapper {
+            border-color: var(--#{$prefix}primary) !important;
+        }    
+    }
+
+    &.form-check-success.active {
+        .form-check-wrapper {
+            border-color: var(--#{$prefix}success) !important;
+        } 
+    }
+
+    &.form-check-danger.active {
+        .form-check-wrapper {
+            border-color: var(--#{$prefix}danger) !important;
+        } 
+    }
+
+    &.disabled {
+        opacity: $form-check-btn-check-disabled-opacity;
+    }
+}

package/dist/assets/sass/core/components/forms/_form-control.scss

@@ -0,0 +1,70 @@
+//
+// Form controls
+//
+
+// Customization
+.form-control {
+	// Transparent style
+	&.form-control-transparent {
+		background-color: transparent;
+		border-color: transparent;
+
+		.dropdown.show > &,
+		&:active,
+		&.active,
+		&:focus,
+		&.focus {
+			background-color: transparent;
+			border-color: transparent;
+		}
+	}
+
+	// Flush
+	&.form-control-flush {
+		@include input-reset();
+	}
+}
+
+// Solid style
+.form-control.form-control-solid {
+	background-color: $input-solid-bg;
+	border-color: $input-solid-bg;
+	color: $input-solid-color;
+	@include placeholder($input-solid-placeholder-color);
+	transition: $transition-input;
+
+	.dropdown.show > &,
+	&:active,
+	&.active,
+	&:focus,
+	&.focus {
+		background-color: $input-solid-bg-focus;
+		border-color: $input-solid-bg-focus;
+		color: $input-solid-color;
+		transition: $transition-input;
+	}
+}
+
+// Form control solid bg
+.form-control-solid-bg {
+	background-color: $input-solid-bg;
+}
+
+// Readonly controls as plain text
+.form-control-plaintext {
+  	color: $input-plaintext-color
+}
+
+// Placeholder colors
+.placeholder-gray-500 {
+	@include placeholder(var(--#{$prefix}gray-500));
+}
+
+.placeholder-white {
+	@include placeholder($white);
+}
+
+// Textarea reset resize
+.resize-none {
+	resize: none;
+}

package/dist/assets/sass/core/components/forms/_form-select.scss

@@ -0,0 +1,68 @@
+// Select
+//
+// Replaces the browser default select with a custom one, mostly pulled from
+// https://primer.github.io/.
+
+.form-select {
+	appearance: none;
+	//box-shadow: none !important;
+
+	&:focus {
+		border-color: $form-select-focus-border-color;
+		@if $enable-shadows {
+			@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+		} @else {
+			// Avoid using mixin so we can pass custom focus shadow properly
+			box-shadow: $form-select-focus-box-shadow;
+		}
+	}
+
+	&:disabled {
+		color: $form-select-disabled-color;
+		background-color: $form-select-disabled-bg;
+		border-color: $form-select-disabled-border-color;
+	}
+
+	// Remove outline from select box in FF
+	&:-moz-focusring {
+		text-shadow: 0 0 0 $form-select-color;
+	}
+
+	// Solid style
+	&.form-select-solid {
+		@include placeholder($input-solid-placeholder-color);
+		background-color: $input-solid-bg;
+		border-color: $input-solid-bg;
+		color: $input-solid-color;
+		transition: $transition-input;
+		
+		.dropdown.show > &,
+		&:active,
+		&.active,
+		&:focus,
+		&.focus {
+			background-color: $input-solid-bg-focus;
+			border-color: $input-solid-bg-focus !important;
+			color: $input-solid-color;
+			transition: $transition-input;
+		}
+	}
+
+	// Transparent style
+	&.form-select-transparent {
+		@include placeholder($input-placeholder-color);
+		background-color: transparent;
+		border-color: transparent;
+		color: $input-color;
+
+		.dropdown.show > &,
+		&:active,
+		&.active,
+		&:focus,
+		&.focus {
+			background-color: transparent;
+			border-color: transparent !important;
+			color: $input-color;
+		}
+	}
+}

package/dist/assets/sass/core/components/forms/_input-group.scss

@@ -0,0 +1,36 @@
+//
+// Input Group
+//
+
+// Form control
+.input-group {
+    &.input-group-solid {
+        @include border-radius($input-border-radius);
+
+        &.input-group-sm {
+            @include border-radius($input-border-radius-sm);
+        }
+
+        &.input-group-lg {
+            @include border-radius($input-border-radius-lg);
+        }
+
+        .input-group-text {
+            background-color: $input-solid-bg;
+		    border-color: $input-solid-bg;
+
+            & + .form-control {
+                border-left-color: $input-border-color;
+            }
+        }
+
+        .form-control {
+            background-color: $input-solid-bg;
+    		border-color: $input-solid-bg;
+
+            & + .input-group-text {
+                border-left-color: $input-border-color;
+            }
+        }
+    }
+}

package/dist/assets/sass/core/components/forms/_labels.scss

@@ -0,0 +1,8 @@
+
+//
+// Col form label
+//
+
+.col-form-label {
+	@include font-size($form-label-font-size);
+}

package/dist/assets/sass/core/components/forms/_required.scss

@@ -0,0 +1,14 @@
+//
+// Required Label
+//
+
+.required {
+    &:after {
+        content: "*";
+        position: relative;
+        font-size: inherit;
+        color: var(--#{$prefix}danger);
+        padding-left: 0.25rem;
+        font-weight: $font-weight-bold;
+    }
+}

package/dist/assets/sass/core/components/helpers/_background.scss

@@ -0,0 +1,269 @@
+//
+// Custom background helpers
+//
+
+// Background white color
+.bg-white {
+	--#{$prefix}bg-rgb-color: var(--#{$prefix}white-bg-rgb);
+	background-color: $white !important;
+}
+
+// Background black color
+.bg-black {
+	--#{$prefix}bg-rgb-color: var(--#{$prefix}black-bg-rgb);
+	background-color: $black !important;
+}
+
+// Background body color
+.bg-body {
+	--#{$prefix}bg-rgb-color: var(--#{$prefix}body-bg-rgb);
+	background-color: var(--#{$prefix}body-bg) !important;
+}
+
+.bg-hover-body {
+	cursor: pointer;
+
+	&:hover {
+		background-color: var(--#{$prefix}body-bg) !important;
+	}
+}
+
+.bg-active-body {
+	&.active {
+		background-color: var(--#{$prefix}body-bg) !important;
+	}
+}
+
+.bg-state-body {
+	cursor: pointer;
+
+	&.active,
+	&:hover {				
+		background-color: var(--#{$prefix}body-bg) !important;
+	}
+}
+
+.bg-hover-white {
+	cursor: pointer;
+
+	&:hover {
+		--#{$prefix}bg-rgb-color: var(--#{$prefix}white-bg-rgb);
+		background-color: $white !important;
+	}
+}
+
+.bg-active-white {
+	&.active {
+		--#{$prefix}bg-rgb-color: var(--#{$prefix}white-bg-rgb);
+		background-color: $white !important;
+	}
+}
+
+.bg-state-white {
+	cursor: pointer;
+
+	&.active,
+	&:hover {				
+		--#{$prefix}bg-rgb-color: var(--#{$prefix}white-bg-rgb);
+		background-color: $white !important;
+	}
+}
+
+// Background theme light colors
+@each $name, $value in $theme-colors {
+	@if (theme-light-color($name)) {
+		.bg-light-#{$name} {
+			background-color: var(--#{$prefix}#{$name}-light) !important;
+		}
+	}
+
+	.bg-#{$name} {
+		--#{$prefix}bg-rgb-color: var(--#{$prefix}#{$name}-rgb);
+		background-color: var(--#{$prefix}#{$name}) !important;
+	}
+
+	.bg-#{$name}-active {
+		--#{$prefix}bg-rgb-color: var(--#{$prefix}#{$name}-active-rgb);
+		background-color: var(--#{$prefix}#{$name}-active) !important;
+	}
+
+	@if (theme-light-color($name)) {
+		.bg-hover-light-#{$name} {
+			cursor: pointer;
+
+			&:hover {
+				background-color: var(--#{$prefix}#{$name}-light) !important;
+			}
+		}
+
+		.bg-state-light-#{$name} {
+			cursor: pointer;
+
+			&.active,
+			&:hover {				
+				background-color: var(--#{$prefix}#{$name}-light) !important;
+			}
+		}
+	}
+
+	.bg-hover-#{$name} {
+		cursor: pointer;
+
+		&:hover {
+			background-color: var(--#{$prefix}#{$name}) !important;
+		}
+	}
+
+	.bg-active-#{$name} {
+		&.active {
+			background-color: var(--#{$prefix}#{$name}) !important;
+		}
+	}
+
+	.bg-state-#{$name} {
+		cursor: pointer;
+
+		&.active,
+		&:hover {				
+			background-color: var(--#{$prefix}#{$name}) !important;
+		}
+	}
+}
+
+// Background gray colors
+@each $name, $value in $grays {
+    .bg-gray-#{$name} {
+		--#{$prefix}bg-rgb-color: var(--#{$prefix}gray-#{$name}-rgb);
+		background-color: var(--#{$prefix}gray-#{$name});
+	}
+
+	.bg-hover-gray-#{$name} {
+		&:hover {
+			--#{$prefix}bg-rgb-color: var(--#{$prefix}gray-#{$name}-rgb);
+			background-color: var(--#{$prefix}gray-#{$name});	
+		}		
+	}
+
+	.bg-gray-#{$name}i {
+		--#{$prefix}bg-rgb-color: var(--#{$prefix}gray-#{$name}-rgb);
+		background-color: var(--#{$prefix}gray-#{$name}) !important;
+	}
+}
+
+// Opacity
+@each $name, $value in $opacity-values {
+	.bg-opacity-#{$name} {
+		background-color: rgba(var(--#{$prefix}bg-rgb-color), #{$value}) !important;
+	}
+
+	.bg-hover-opacity-#{$name}:hover {
+		background-color: rgba(var(--#{$prefix}bg-rgb-color), #{$value}) !important;
+	}
+
+	.bg-active-opacity-#{$name}.active {
+		background-color: rgba(var(--#{$prefix}bg-rgb-color), #{$value}) !important;
+	}
+
+	.bg-state-opacity-#{$name} {
+		.active,
+		&:hover {
+			background-color: rgba(var(--#{$prefix}bg-rgb-color), #{$value}) !important;
+		}		
+	}
+}
+
+// Background image helpers
+// Background repeat
+.bgi-no-repeat {
+	background-repeat: no-repeat;
+}
+
+// Background positions
+.bgi-position-y-top {
+	background-position-y: top;
+}
+
+.bgi-position-y-bottom {
+	background-position-y: bottom;
+}
+
+.bgi-position-y-center {
+	background-position-y: center;
+}
+
+.bgi-position-x-start {
+	background-position-x: left;
+}
+
+.bgi-position-x-end {
+	background-position-x: right;
+}
+
+.bgi-position-x-center {
+	background-position-x: center;
+}
+
+.bgi-position-top {
+	background-position: 0 top;
+}
+
+.bgi-position-bottom {
+	background-position: 0 bottom;
+}
+
+.bgi-position-center {
+	background-position: center;
+}
+
+// Responsive helpers
+@each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+		
+		// Background sizes
+		.bgi-size#{$infix}-auto {
+			background-size: auto;
+		}
+
+		.bgi-size#{$infix}-cover {
+			background-size: cover;
+		}
+
+		.bgi-size#{$infix}-contain {
+			background-size: contain;
+		}	
+
+		// Background attachment
+		.bgi-attachment#{$infix}-fixed {
+			background-attachment: fixed;
+		}
+
+		.bgi-attachment#{$infix}-scroll {
+			background-attachment: scroll;
+		}
+	}
+}
+
+.bg-auth {
+	background-size: cover;
+	background-repeat: no-repeat;
+	overflow: auto;
+	background-position: center;
+	min-height: 60rem;
+	background-image: url('../media/soyfri-media/bg-auth.webp');
+}
+
+.bg-auth::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  min-height: 60rem;
+}
+
+.bg-auth > div {
+  z-index: 1;
+}