v2 first commit

resources/assets/sass/core/mixins/_alert.scss

@@ -0,0 +1,22 @@
+@mixin alert-variant($background, $border, $color) {
+    color: color-yiq($background);
+    border-color: $border;
+    @include gradient-bg($background);
+
+    a {
+        color: darken($background, 30%);
+        font-weight: 600;
+
+        &:hover {
+            color: color-yiq($background);
+        }
+    }
+
+    hr {
+        border-top-color: darken($border, 5%);
+    }
+
+    .alert-link {
+        color: darken($color, 10%);
+    }
+}

resources/assets/sass/core/mixins/_background-variant.scss

@@ -0,0 +1,30 @@
+// Contextual backgrounds
+@mixin bg-variant($parent, $color) {
+    #{$parent} {
+        background-color: $color !important;
+    }
+    a#{$parent},
+    button#{$parent} {
+        @include hover-focus {
+            background-color: darken($color, 10%) !important;
+        }
+    }
+}
+
+@mixin bg-gradient-variant($parent, $color) {
+    #{$parent} {
+        background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
+    }
+}
+
+@mixin bg-translucent-variant($parent, $color) {
+    #{$parent} {
+        background-color: darken(rgba($color, $translucent-color-opacity), 7%) !important;
+    }
+    a#{$parent},
+    button#{$parent} {
+        @include hover-focus {
+            background-color: darken(rgba($color, $translucent-color-opacity), 12%) !important;
+        }
+    }
+}

resources/assets/sass/core/mixins/_badge.scss

@@ -0,0 +1,12 @@
+@mixin badge-variant($bg) {
+	color: saturate(darken($bg, 10%), 10);
+    background-color: lighten($bg, 32%);
+
+  	&[href] {
+	    @include hover-focus {
+	        color: color-yiq($bg);
+	        text-decoration: none;
+	        background-color: darken($bg, 12%);
+	    }
+	}
+}

resources/assets/sass/core/mixins/_buttons.scss

@@ -0,0 +1,105 @@
+@mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
+    color: color-yiq($background);
+    @include gradient-bg($background);
+    border-color: $border;
+    @include box-shadow($btn-box-shadow);
+
+    @include hover {
+        color: color-yiq($hover-background);
+        @include gradient-bg($hover-background);
+        border-color: $hover-border;
+    }
+
+    &:focus,
+    &.focus {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        @if $enable-shadows {
+            box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+        }
+        @else {
+            box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+        }
+    } // Disabled comes first so active can properly restyle
+    &.disabled,
+    &:disabled {
+        color: color-yiq($background);
+        background-color: $background;
+        border-color: $border;
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active,
+    .show>&.dropdown-toggle {
+        color: color-yiq($active-background);
+        background-color: $active-background;
+        @if $enable-gradients {
+            background-image: none; // Remove the gradient for the pressed/active state
+        }
+        border-color: $active-border;
+
+        &:focus {
+            // Avoid using mixin so we can pass custom focus shadow properly
+            @if $enable-shadows {
+                box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+            }
+            @else {
+                box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+            }
+        }
+    }
+}
+
+@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+    color: $color;
+    background-color: transparent;
+    background-image: none;
+    border-color: $color;
+
+    &:hover {
+        color: $color-hover;
+        background-color: $active-background;
+        border-color: $active-border;
+    }
+
+    &:focus,
+    &.focus {
+        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+    }
+
+    &.disabled,
+    &:disabled {
+        color: $color;
+        background-color: transparent;
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active,
+    .show>&.dropdown-toggle {
+        color: color-yiq($active-background);
+        background-color: $active-background;
+        border-color: $active-border;
+
+        &:focus {
+            // Avoid using mixin so we can pass custom focus shadow properly
+            @if $enable-shadows and $btn-active-box-shadow !=none {
+                box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
+            }
+            @else {
+                box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+            }
+        }
+    }
+}
+
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+    padding: $padding-y $padding-x;
+    font-size: $font-size;
+    line-height: $line-height; // Manually declare to provide an override to the browser default
+    @if $enable-rounded {
+        border-radius: $border-radius;
+    }
+    @else {
+        border-radius: 0;
+    }
+}

resources/assets/sass/core/mixins/_custom-forms.scss

@@ -0,0 +1,47 @@
+@mixin custom-checkbox-variant($color) {
+    .custom-control-input {
+        &:checked {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $color;
+                    @include gradient-bg($color);
+                }
+                &::after {
+                    background-image: $color;
+                }
+            }
+        }
+    }
+
+}
+
+@mixin custom-toggle-variant($color) {
+    input {
+        &:checked {
+             + .custom-toggle-slider {
+                border-color: $color;
+
+                &:before {
+                    background: $color;
+                }
+
+
+				&:after {
+					color: $color;
+				}
+            }
+        }
+
+        &:disabled {
+            &:checked {
+                + .custom-toggle-slider {
+                    border-color: $color;
+
+                    &:before {
+                        background-color: lighten($color, 10%);
+                    }
+                }
+            }
+        }
+    }
+}

resources/assets/sass/core/mixins/_forms.scss

@@ -0,0 +1,127 @@
+@mixin form-control-focus() {
+  &:focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: $input-focus-box-shadow;
+    } @else {
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+}
+
+
+@mixin form-validation-state($state, $color, $icon) {
+  .#{$state}-feedback {
+    display: none;
+    width: 100%;
+    margin-top: $form-feedback-margin-top;
+    font-size: $form-feedback-font-size;
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding: .5rem;
+    margin-top: .1rem;
+    font-size: .875rem;
+    line-height: 1;
+    color: #fff;
+    background-color: rgba($color, .8);
+    border-radius: .2rem;
+  }
+
+  .form-control,
+  .custom-select {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      border-color: $color;
+
+      &:focus {
+        border-color: $color;
+        //box-shadow: 0 1px $input-focus-width 0 rgba($color, .75);
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .form-check-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .form-check-label {
+        color: $color;
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .custom-control-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-control-label {
+        color: $color;
+
+        &::before {
+          background-color: lighten($color, 25%);
+          border-color: lighten($color, 25%);
+        }
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+
+      &:checked {
+        ~ .custom-control-label::before {
+          @include gradient-bg(lighten($color, 10%));
+          border-color: lighten($color, 25%);
+        }
+      }
+
+      &:focus {
+        ~ .custom-control-label::before {
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
+        }
+      }
+    }
+  }
+
+  // custom file
+  .custom-file-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-file-label {
+        border-color: $color;
+
+        &::before { border-color: inherit; }
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+
+      &:focus {
+        ~ .custom-file-label {
+          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        }
+      }
+    }
+  }
+}

resources/assets/sass/core/mixins/_icon.scss

@@ -0,0 +1,10 @@
+@mixin icon-shape-variant($color) {
+    color: saturate(darken($color, 10%), 10);
+    background-color: transparentize(lighten($color, 10%), .5);
+}
+
+@mixin icon-font($content, $font-size) {
+    content: $content;
+    font-family: $icon-font-family;
+    font-size: $font-size;
+}

resources/assets/sass/core/mixins/_modals.scss

@@ -0,0 +1,25 @@
+@mixin modal-variant($background) {
+	.modal-title {
+		color: color-yiq($background);
+	}
+
+	.modal-header,
+	.modal-footer {
+		border-color: rgba(color-yiq($background), .075);
+	}
+
+	.modal-content {
+		background-color: $background;
+		color: color-yiq($background);
+
+		.heading {
+			color: color-yiq($background);
+		}
+	}
+
+	.close {
+    	& > span:not(.sr-only) {
+    		color: $white;
+    	}
+    }
+}

resources/assets/sass/core/mixins/_popover.scss

@@ -0,0 +1,36 @@
+@mixin popover-variant($background) {
+
+	background-color: $background;
+
+	.popover-header {
+		background-color: $background;
+		color: color-yiq($background);
+	}
+
+	.popover-body {
+		color: color-yiq($background);
+	}
+	.popover-header{
+		border-color: rgba(color-yiq($background), .2);
+	}
+	&.bs-popover-top {
+		.arrow::after {
+			border-top-color: $background;
+		}
+	}
+	&.bs-popover-right {
+		.arrow::after {
+			border-right-color: $background;
+		}
+	}
+	&.bs-popover-bottom {
+		.arrow::after {
+			border-bottom-color: $background;
+		}
+	}
+	&.bs-popover-left {
+		.arrow::after {
+			border-left-color: $background;
+		}
+	}
+}