@soyfri/template 1.0.0 → 1.0.3

package/dist/assets/sass/core/vendors/plugins/_dropzone.scss

@@ -0,0 +1,188 @@
+//
+// Dropzone plugin customization:  https://www.dropzonejs.com
+//
+
+// Basic
+.dropzone {
+    min-height: auto;
+    padding: 1.5rem 1.75rem;
+	text-align: center;
+	cursor: pointer;
+    border: 1px dashed var(--#{$prefix}primary);
+    background-color: var(--#{$prefix}primary-light);
+    border-radius: $border-radius !important;
+
+    .dz-message{
+        margin: 0;
+        display: flex;
+        text-align: left;
+    }
+
+    .dz-preview {
+        border-radius: $border-radius !important;
+        margin: 0.75rem;
+
+		.dz-image {
+			border-radius: $border-radius !important;
+            z-index: 1;
+		}
+
+        &.dz-file-preview {
+            .dz-image {
+                background: var(--#{$prefix}gray-200);
+            }
+        }
+    }
+
+    .dz-success-mark,
+    .dz-error-mark {
+        $size: 40px;
+
+        margin-left: -(divide($size, 2)) !important;
+        margin-top: -(divide($size, 2)) !important;
+        
+        svg {
+            height: $size !important;
+            width: $size !important;
+        }
+    }
+
+    .dz-remove {
+        $size: 1.65rem;
+        display:flex;
+		justify-content: center;
+		align-items: center;
+		height: $size;
+		width: $size;
+		font-size: 1rem;
+        text-indent: -9999px;
+        white-space: nowrap;  
+        position: absolute;
+        z-index: 2;
+        background-color: var(--#{$prefix}body-bg) !important;        
+        box-shadow: var(--#{$prefix}box-shadow);        
+		border-radius: 100%;
+        top: -(divide($size,2));
+        right: -(divide($size,2));
+
+        &:after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            display: block;
+            content: "";
+            mask-size: 40%;
+            -webkit-mask-size: 40%;
+            @include svg-bg-icon(close, var(--#{$prefix}gray-600));
+        }       
+
+        &:hover {
+            &:after {
+                @include svg-bg-icon(close, var(--#{$prefix}primary));
+            } 
+        }
+    }
+
+    .dz-error-message {
+        color: var(--#{$prefix}danger-inverse);
+        background: var(--#{$prefix}danger);
+    }
+}
+
+// Queue upload
+.dropzone.dropzone-queue {
+    border: 0;
+    padding: 0;
+    background-color: transparent;
+    text-align: left;
+
+    .dz-message{
+        display: none;
+    }
+
+    .dropzone-panel {
+        .dropzone-upload,
+        .dropzone-remove-all{
+            display: none;
+        }
+    }
+
+    .dropzone-item {
+        display: flex;
+        align-items: center;
+        margin-top: 0.75rem;
+        @include border-radius($border-radius);
+        padding: 0.5rem 1rem;
+        background-color: var(--#{$prefix}gray-100);
+
+        .dropzone-file {
+            flex-grow: 1;
+
+            .dropzone-filename {
+                font-size: 0.9rem;
+                font-weight: 500;
+                color: var(--#{$prefix}gray-600);
+                text-overflow: ellipsis;
+                margin-right: 0.5rem;
+
+                &:hover {
+                    color: var(--#{$prefix}primary);
+                }
+            }
+
+            .dropzone-error {
+                margin-top: 0.25rem;
+                font-size: 0.9rem;
+                font-weight: 400;
+                color: var(--#{$prefix}danger);
+                text-overflow: ellipsis;
+            }
+        }
+
+        .dropzone-progress {
+            width: 15%;
+
+            .progress {
+                height: 5px;
+                @include transition;
+            }
+        }
+
+        .dropzone-toolbar {
+            margin-left: 1rem;
+            display: flex;
+            flex-wrap: nowrap;
+
+            .dropzone-start,
+            .dropzone-cancel,
+            .dropzone-delete {
+                height: 25px;
+                width: 25px;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                transition: $transition-link;
+
+                > i {
+                    transition: $transition-link;
+                    font-size: 0.8rem;
+                    color: var(--#{$prefix}gray-600);
+                }
+
+                &:hover {
+                    transition: $transition-link;
+                    > i {
+                        color: var(--#{$prefix}primary);
+                    }
+                }
+            }
+
+            .dropzone-start{
+                transition: $transition-link;
+            }
+        }
+    }
+}

package/dist/assets/sass/core/vendors/plugins/_flatpickr.scss

@@ -0,0 +1,407 @@
+//
+//  Flatpickr
+//
+
+$flatpickr-padding-y: 0.5rem;
+$flatpickr-padding-x: 1rem;
+$flatpickr-width: 280px;
+$flatpickr-width-week-numbers: 325px;
+$flatpickr-day-height: 36px;
+$flatpickr-day-width: 100%;
+$flatpickr-time-height: 46px;
+
+// Container
+.flatpickr-calendar {    
+    width: $flatpickr-width !important;
+    font-family: inherit;
+    border: 0;
+    border-radius: 0;
+	box-shadow: var(--#{$prefix}dropdown-box-shadow);
+    background-color: var(--#{$prefix}body-bg);
+    @include border-radius($dropdown-border-radius);
+
+    // Remow arrows
+    &:before,
+    &:after {
+        display: none;
+    }
+
+    // Week numbers
+    &.hasWeeks {
+        width: $flatpickr-width-week-numbers !important;
+    }
+}   
+
+// Months container
+.flatpickr-months {
+    padding: 0 $flatpickr-padding-x;
+    padding-top: $flatpickr-padding-y;
+}
+
+// Inner container
+.flatpickr-innerContainer {
+    padding: $flatpickr-padding-y $flatpickr-padding-x;
+}
+
+// Day containers
+.flatpickr-days,
+.dayContainer {
+    width: 100% !important;
+    min-width: 100% !important;
+    max-width: 100% !important;   
+}
+
+// Months
+.flatpickr-months {
+    .flatpickr-month {
+        background: transparent;
+        color: var(--#{$prefix}gray-600);
+        fill: var(--#{$prefix}gray-600);
+        height: 46px;
+    }
+
+    .flatpickr-prev-month,
+    .flatpickr-next-month {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        @include border-radius($border-radius);
+        top: 1rem;        
+
+        svg {
+            fill: var(--#{$prefix}gray-500);
+            height: 13px;
+            width: 13px;
+        }
+
+        &:hover {
+            background: var(--#{$prefix}gray-100);
+
+            svg {
+                fill: var(--#{$prefix}gray-700);
+            }
+        }
+    }
+
+    .flatpickr-prev-month.flatpickr-prev-month,
+    .flatpickr-next-month.flatpickr-prev-month {
+        /*rtl:begin:ignore*/
+        left: $flatpickr-padding-x;
+        /*rtl:end:ignore*/
+    }
+
+    .flatpickr-prev-month.flatpickr-next-month,
+    .flatpickr-next-month.flatpickr-next-month {
+        /*rtl:begin:ignore*/
+        right: $flatpickr-padding-x;
+        /*rtl:end:ignore*/
+    }
+}
+
+// Month selector
+.flatpickr-current-month {
+    font-weight: $font-weight-semibold;
+    color: inherit;   
+
+    .numInputWrapper {
+        @include border-radius($border-radius);
+        width: 65px;
+    
+        span {
+            &.arrowUp {
+                @include border-top-end-radius($border-radius);
+            }
+        
+            &.arrowDown {
+                @include border-bottom-end-radius($border-radius);
+            }
+        }
+    }
+
+    .flatpickr-monthDropdown-months {
+        border: 0 !important;
+        background-color: var(--#{$prefix}body-bg);
+        font-size: 1rem;
+        color: var(--#{$prefix}gray-700);
+        font-weight: $font-weight-semibold;
+        padding: 0.5rem 0.75rem;
+        margin-right: 0.5rem;
+        outline: none !important;
+        @include border-radius($border-radius);
+        appearance: none;
+        -moz-appearance: none;
+        -webkit-appearance: none;
+
+        &:hover {
+            background: var(--#{$prefix}gray-100);
+        }
+    
+        .flatpickr-monthDropdown-month {
+            font-size: 1rem;
+            color: var(--#{$prefix}gray-700);
+            font-weight: $font-weight-semibold;
+            background-color: transparent;
+            outline: none;
+            padding: 0;
+        }
+    }
+
+    span.cur-month {
+        color: var(--#{$prefix}gray-700);
+        font-size: 1rem;
+        font-weight: $font-weight-semibold;    
+
+        &:hover {
+            background: var(--#{$prefix}gray-100);
+        }
+    }
+
+    input.cur-year {
+        color: var(--#{$prefix}gray-700);
+        font-size: 1.1rem !important;
+        padding: 0.5rem 0.75rem;
+        font-weight: $font-weight-semibold;
+        outline: 0 !important;
+    }
+}
+
+// Week days
+span.flatpickr-weekday {
+    color: var(--#{$prefix}gray-800);
+    font-size: 1rem;
+    font-weight: $font-weight-bold;
+}
+
+// Time
+.flatpickr-time {
+    @include border-bottom-radius($border-radius);
+
+    .flatpickr-calendar.hasTime & {
+        height: height;
+        line-height: height;
+        max-height: height;
+        border-top: 1px solid var(--#{$prefix}gray-100);
+    }
+
+    .numInputWrapper {
+        height: height;
+    }
+
+    .flatpickr-am-pm {
+        color: var(--#{$prefix}gray-700);
+        font-size: 1rem;
+        font-weight: $font-weight-semibold;
+    }
+
+    input {
+        &.flatpickr-hour,
+        &.flatpickr-minute {
+            color: var(--#{$prefix}gray-700);
+            font-size: 1rem;
+            font-weight: $font-weight-semibold;
+        }
+    }
+    
+    input:hover,
+    .flatpickr-am-pm:hover,
+    input:focus,
+    .flatpickr-am-pm:focus {
+        background: transparent;
+    }
+}
+
+// Number input
+.numInputWrapper {
+    span {
+        border-left: 0 !important;
+        border-top: 0 !important;
+        border-bottom: 0 !important;
+        border-right: 0 !important;
+
+        &:hover {
+            background: transparent !important;
+        }
+
+        &:after {
+            top: 50% !important;
+            transform: translateY(-50%);
+        }
+
+        &.arrowUp {    
+            &:after {
+                border-bottom-color: var(--#{$prefix}gray-500) !important;
+            }
+    
+            &:hover {
+                &:after {
+                    border-bottom-color: var(--#{$prefix}gray-700) !important;
+                }
+            }
+        }
+    
+        &.arrowDown {    
+            &:after {
+                border-top-color: var(--#{$prefix}gray-500) !important;
+            }
+    
+            &:hover {
+                &:after {
+                    border-top-color: var(--#{$prefix}gray-700) !important;
+                }
+            }
+        }
+    }
+
+    &:hover {
+        background: transparent;
+    }
+}
+
+// Day
+.flatpickr-day {
+    font-size: 1rem;
+    @include border-radius($border-radius);
+    box-shadow: none !important;
+    height: $flatpickr-day-height;    
+    width: $flatpickr-day-width;
+    max-width: 100% !important;
+    margin: 0;
+    line-height: $flatpickr-day-height;
+    color: var(--#{$prefix}gray-600);
+    margin-top: 0 !important;
+
+    &.inRange,
+    &.prevMonthDay.inRange,
+    &.nextMonthDay.inRange,
+    &.today.inRange,
+    &.prevMonthDay.today.inRange,
+    &.nextMonthDay.today.inRange,
+    &:hover,
+    &.prevMonthDay:hover,
+    &.nextMonthDay:hover,
+    &:focus,
+    &.prevMonthDay:focus,
+    &.nextMonthDay:focus {
+        cursor: pointer;
+        outline: 0;
+        background: var(--#{$prefix}component-hover-bg);
+        color: var(--#{$prefix}component-hover-color);
+        border-color: transparent;
+    }
+
+    // Today
+    &.today {
+        background: var(--#{$prefix}gray-100);
+        color: var(--#{$prefix}gray-600);
+        border-color: transparent;
+
+        &:hover,
+        &:focus {
+            border-color: transparent;
+            background: var(--#{$prefix}gray-200);
+            color: var(--#{$prefix}gray-700);
+        }
+    }
+
+    // Selected
+    &.selected,
+    &.startRange,
+    &.endRange,
+    &.selected.inRange,
+    &.startRange.inRange,
+    &.endRange.inRange,
+    &.selected:focus,
+    &.startRange:focus,
+    &.endRange:focus,
+    &.selected:hover,
+    &.startRange:hover,
+    &.endRange:hover,
+    &.selected.prevMonthDay,
+    &.startRange.prevMonthDay,
+    &.endRange.prevMonthDay,
+    &.selected.nextMonthDay,
+    &.startRange.nextMonthDay,
+    &.endRange.nextMonthDay {
+        background: var(--#{$prefix}component-active-bg);
+        color: var(--#{$prefix}component-active-color);;
+        border-color: transparent;
+    }
+
+    &.inRange,
+    &.prevMonthDay.inRange,
+    &.nextMonthDay.inRange,
+    &.today.inRange,
+    &.prevMonthDay.today.inRange,
+    &.nextMonthDay.today.inRange,
+    &:hover,
+    &.prevMonthDay:hover,
+    &.nextMonthDay:hover,
+    &:focus,
+    &.prevMonthDay:focus,
+    &.nextMonthDay:focus {
+        cursor: pointer;
+        outline: 0;
+        background: var(--#{$prefix}component-hover-bg);
+        color: var(--#{$prefix}component-hover-color);
+        border-color: transparent;
+    }
+
+    // Today
+    &.today {
+        border-color: transparent;
+    }
+
+    &.today:hover,
+    &.today:focus {
+        border-color: transparent;
+        background: var(--#{$prefix}gray-100);
+        color: var(--#{$prefix}gray-600);
+    }
+
+    // Selected
+    &.selected,
+    &.startRange,
+    &.endRange,
+    &.selected.inRange,
+    &.startRange.inRange,
+    &.endRange.inRange,
+    &.selected:focus,
+    &.startRange:focus,
+    &.endRange:focus,
+    &.selected:hover,
+    &.startRange:hover,
+    &.endRange:hover,
+    &.selected.prevMonthDay,
+    &.startRange.prevMonthDay,
+    &.endRange.prevMonthDay,
+    &.selected.nextMonthDay,
+    &.startRange.nextMonthDay,
+    &.endRange.nextMonthDay {
+        background: var(--#{$prefix}component-active-bg);
+        color: var(--#{$prefix}component-active-color);;
+        border-color: transparent;
+    }
+
+    // Disabled
+    &.flatpickr-disabled,
+    &.flatpickr-disabled:hover,
+    &.prevMonthDay,
+    &.nextMonthDay,
+    &.notAllowed,
+    &.notAllowed.prevMonthDay,
+    &.notAllowed.nextMonthDay {
+        color: var(--#{$prefix}gray-500);
+        background: transparent;
+        border-color: transparent;
+    }
+    &.flatpickr-disabled,
+    &.flatpickr-disabled:hover {
+        cursor: not-allowed;
+        color: var(--#{$prefix}gray-500);
+    }
+}
+
+// Week numbers
+.flatpickr-weekwrapper {
+    margin-right: 5px;
+}

package/dist/assets/sass/core/vendors/plugins/_formvalidation.scss

@@ -0,0 +1,20 @@
+//
+// FormValidation Customization.  More info: https://formvalidation.io/
+//
+
+.fv-plugins-message-container {
+    --input-invalid-color: var(--#{$prefix}danger);
+    margin-top: 0.3rem;
+
+    .fv-help-block {
+        color: var(--#{$prefix}danger);
+        font-size: 1rem;
+        font-weight: $font-weight-normal;
+    }
+
+    &.valid-feedback,
+    &.invalid-feedback {
+        display: block;
+        font-weight: $font-weight-normal;
+    }
+}

package/dist/assets/sass/core/vendors/plugins/_fslightbox.scss

@@ -0,0 +1,11 @@
+//
+// fslightbox
+//
+
+.fslightbox-slide-btn {
+    border-radius: $border-radius;
+}
+
+.fslightbox-toolbar {
+    border-bottom-left-radius: $border-radius;
+}