@soyfri/template 1.0.1 → 1.0.4

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

@@ -0,0 +1,54 @@
+//
+// CKEditor
+//
+
+
+// Base
+.ck-target{
+    display: none;
+}
+
+.ck-toolbar{
+    @include border-radius($border-radius !important);
+}
+
+.ck-content{
+    min-height: 200px;
+    @include border-radius($border-radius !important);
+
+    &.ck-focused{
+        border-color: var(--#{$prefix}primary) !important;
+        box-shadow: none !important;
+    }
+}
+
+// CKEditor Classic & Document
+.ck-editor{
+    .ck-toolbar{
+        @include border-top-radius($border-radius !important);
+        @include border-bottom-radius(0 !important);
+    }
+    .ck-content{
+        @include border-bottom-radius($border-radius !important);
+        @include border-top-radius(0 !important);
+    }
+}
+
+// CKEditor Inline / Balloon / Balloon Block
+.ck-body {
+    .ck-balloon-panel{
+        .ck-content{
+            min-height: 200px;
+            border-color: transparent !important;
+
+            &.ck-focused{
+                border-color: var(--#{$prefix}primary) !important;
+            }
+        }
+
+        &.ck-toolbar-container,
+        .ck-toolbar {
+            @include border-radius($border-radius !important);
+        }
+    }
+}

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

@@ -0,0 +1,292 @@
+//
+// DataTables
+//
+
+$toolbar-spacing: 1rem 0;
+
+// Base
+table.dataTable {
+    width: 100% !important;
+    margin: 0 !important;
+
+    th {
+        border-bottom-color: var(--#{$prefix}table-border-color);
+    }
+}
+
+// Toolbar
+div.dataTables_wrapper div.dataTables_length {
+    padding: $toolbar-spacing;
+}
+
+div.dataTables_wrapper div.dataTables_filter {
+    padding: $toolbar-spacing;
+}
+
+div.dataTables_wrapper div.dataTables_info {
+    display: flex;
+    flex-direction: column;    
+    font-weight: $font-weight-semibold;
+    color: var(--#{$prefix}gray-700);
+    padding: $toolbar-spacing;
+
+    .select-info, 
+    .select-item {
+        margin-left: 0;
+        font-size: 0.9rem;
+        color: var(--#{$prefix}text-muted);
+    }
+}
+
+div.dataTables_length + div.dataTables_info {
+    margin-left: 1rem;
+}
+
+// Pagination
+div.dataTables_wrapper div.dataTables_paginate  {
+    padding: $toolbar-spacing;
+    margin-left: 0.5rem;
+
+    .pagination {
+        margin: 0;
+    }
+}
+
+// Head
+table.dataTable>thead>tr> {
+    td, th {
+        &:not(.sorting_disabled) {
+            padding-right: 0;
+        }
+    }
+}
+
+// Sorting
+table.dataTable > thead {
+    .sorting {
+        &:after,
+        &:before {
+            display: none !important;
+        }
+    }
+
+    .sorting_asc,
+    .sorting_desc {
+        vertical-align: middle;
+        
+        &:before,
+        &:after {
+            position: relative !important;
+            opacity: 1 !important;
+            display: inline-block !important;
+            width: 0.75rem;
+            height: 0.75rem;
+            content: " " !important;
+            //top: 50%;
+            bottom: auto;
+            right: auto !important;
+            left: auto;
+            margin-left: 0.5rem;
+        }
+
+        &:before {
+            display: none !important;
+        }
+    }
+}
+
+table.dataTable > thead .sorting_asc:after {
+    opacity: 1;
+    @include svg-bg-icon(arrow-top, var(--#{$prefix}text-muted));
+}
+
+table.dataTable > thead .sorting_desc:after {
+    opacity: 1;
+    @include svg-bg-icon(arrow-bottom, var(--#{$prefix}text-muted));
+}
+
+// Processing
+div.dataTables_wrapper {
+    .table-responsive {
+        position: relative;
+    }
+
+    div.dataTables_processing {
+        @include border-radius($border-radius);
+        box-shadow: var(--#{$prefix}dropdown-box-shadow);
+        background-color: $tooltip-bg;
+        color: var(--#{$prefix}gray-700);
+        font-weight: $font-weight-semibold;
+        margin: 0 !important;
+        width: auto;
+        padding: 1rem 2rem !important;
+        transform: translateX(-50%) translateY(-50%);
+
+        > div {
+            display: none;    
+        }
+    }
+}
+
+// Responsive
+table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control, 
+table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control,
+table.dataTable.dtr-column.collapsed > tbody > tr > td.dtr-control, 
+table.dataTable.dtr-column.collapsed > tbody > tr > th.dtr-control {
+    $icon-size:  1.35rem;
+    
+    &:before {
+        top: 50%;
+        left: 0;
+        height: $icon-size;
+        width: $icon-size;
+        line-height: 1.5;
+        text-indent: -999px !important;
+        margin-top: -(divide($icon-size, 2));
+        margin-right: divide($icon-size, 2);
+        display: inline-block;
+        position: relative;
+        font-size: 1.05rem;
+        border: 0;
+        box-shadow: none;
+        mask-size: 85%;
+        -webkit-mask-size: 85%;
+        content: ".";
+
+        :root &,
+        [data-bs-theme="light"] & {
+            @include svg-bg-icon(expand, $gray-600);  
+        }
+
+        [data-bs-theme="dark"] & {
+            @include svg-bg-icon(expand, $gray-600-dark);  
+        }
+    }
+
+    &.dtr-control-last {
+        &:before {
+            left: 100%;
+            right: 0;
+        }
+    }
+}
+
+table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before, 
+table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,
+table.dataTable.dtr-column.collapsed > tbody > tr.parent > td.dtr-control:before, 
+table.dataTable.dtr-column.collapsed > tbody > tr.parent > th.dtr-control:before {
+    @include svg-bg-icon(collapse, $primary);
+}
+
+table.dataTable > tbody > tr.child span.dtr-title {
+    display: inline-block;
+    min-width: 100px;
+    font-weight: $font-weight-semibold;
+}
+
+table.dataTable > tbody > tr.child span.dtr-data {
+    font-weight: $font-weight-normal;
+}
+
+// Striped
+table.dataTable.table-striped > tbody > tr.odd > * {
+    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-striped-bg);
+}
+
+table.dataTable > tbody > tr.selected > * {
+    box-shadow: inset 0 0 0 9999px var(--#{$prefix}primary);
+    color: var(--#{$prefix}primary-inverse);
+
+    a:not([class="btn"]) {
+        color: var(--#{$prefix}primary-light);
+        font-weight: $font-weight-semibold;
+        text-decoration: underline;
+        text-decoration-style: dotted;
+
+        &:hover {
+            color: var(--#{$prefix}primary-inverse);
+        }
+    }
+}
+
+// Scroll
+div.dataTables_scrollBody {
+    border-left: 0 !important;
+
+    .sorting_disabled.sorting_asc,
+    .sorting_disabled.sorting_desc {
+        &:after {
+            display: none !important;
+        }
+    }
+}
+
+.dataTables_scroll > .dataTables_scrollBody > .table > thead {
+    line-height: 0;
+    
+    .sorting {
+        &:after,
+        &:before {
+            display: none !important;
+        }
+    }
+}
+
+div.dtfc-right-top-blocker,
+div.dtfc-left-top-blocker {
+    background-color: var(--#{$prefix}body-bg);
+}
+
+// Fixed column
+table.dataTable thead tr > .dtfc-fixed-left, 
+table.dataTable thead tr > .dtfc-fixed-right {
+    background-color: var(--#{$prefix}body-bg);
+}
+
+table.dataTable tbody tr > .dtfc-fixed-left, 
+table.dataTable tbody tr > .dtfc-fixed-right {
+    background-color: var(--#{$prefix}body-bg);
+}
+
+// Fixed header
+.dtfh-floatingparent {
+    box-shadow: var(--#{$prefix}box-shadow-sm);
+
+    .table {
+        background-color: var(--#{$prefix}body-bg) !important;
+    }
+    
+    &,
+    .table,
+    .table th {
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+    }
+}
+
+// Child details
+.dtr-details {
+    display: table !important;  
+
+    li {
+        display: table-row !important;  
+
+        .dtr-title {
+            padding-right: 0.75rem;    
+            color: var(--#{$prefix}gray-900);
+        }
+
+        .dtr-data {
+            color: var(--#{$prefix}gray-700);
+        }
+
+        .dtr-title,
+        .dtr-data {
+            font-size: 1rem;
+            padding-top: 0.25rem;
+            padding-bottom: 0.25rem;
+            display: table-cell !important;    
+            border-bottom: 1px solid var(--#{$prefix}border-color);
+        }    
+    }    
+}

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

@@ -0,0 +1,272 @@
+//
+// Bootstrap Daterangepicker plugin customization: https://www.daterangepicker.com
+//
+
+
+// Base
+.daterangepicker {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    width: auto;
+    background-color: var(--#{$prefix}body-bg);
+    box-shadow: var(--#{$prefix}dropdown-box-shadow);
+    font-family: $font-family-sans-serif;
+    z-index: $zindex-dropdown;
+    @include border-radius($dropdown-border-radius);
+
+    &:after,
+    &:before {
+        display: none;
+    }
+
+    td {
+        &.off,
+        &.off.in-range,
+        &.off.start-date,
+        &.off.end-date {
+            background-color: transparent;
+        }
+    }
+
+    .modal-open & {
+        z-index: $zindex-modal + 1;
+    }
+
+    .calendar-table {
+        background-color: var(--#{$prefix}body-bg);
+        border: 0;
+    }
+
+    .ranges {
+        @include border-radius($dropdown-border-radius);
+        background-color: var(--#{$prefix}body-bg);
+        position: relative;
+        overflow: hidden;
+
+        ul {
+            padding: 1rem 0;
+            width: $daterangepicker-ranges-list-width;
+            overflow: auto;
+            max-height: $daterangepicker-ranges-list-height;
+        }
+
+        li {
+            padding: 0.7rem 1.75rem;
+            font-weight: 500;
+            font-size: 1rem;
+            color: var(--#{$prefix}gray-600);
+            transition: $transition-link;
+
+            &:hover {
+                background-color: var(--#{$prefix}component-hover-bg);
+                color: var(--#{$prefix}component-hover-color);
+                transition: $transition-link;
+            }
+
+            &.active {
+                background-color: var(--#{$prefix}component-active-bg);
+                color: var(--#{$prefix}component-active-color);
+                transition: $transition-link;
+            }
+        }
+    }
+
+    &.show-calendar {
+        .ranges {            
+            @include border-radius(0);
+            @include border-top-start-radius($dropdown-border-radius);
+            margin-top: 0;
+            height: 297px;
+        }
+    }
+
+    &.show-ranges {
+        &.show-calendar {
+            .ranges  {
+                border-right: 1px solid var(--#{$prefix}gray-200);
+            }
+        }
+
+        .drp-calendar.left {
+            border-left: 0;
+        }
+    }
+
+    .drp-buttons {
+        padding: 1rem 1.75rem;
+        border-top: 1px solid var(--#{$prefix}gray-200);
+
+       .btn {
+            font-size: 1rem;
+            font-weight: $font-weight-semibold;
+            padding: 0.5rem 1rem;
+        }
+
+        .cancelBtn {
+            @include button-custom-variant(
+                $color: var(--#{$prefix}light-inverse),
+                $icon-color: var(--#{$prefix}light-inverse),
+                $border-color: var(--#{$prefix}light),
+                $bg-color: var(--#{$prefix}light),
+                $color-active: var(--#{$prefix}light-inverse),
+                $icon-color-active: var(--#{$prefix}light-inverse),
+                $border-color-active: var(--#{$prefix}light-active),
+                $bg-color-active: var(--#{$prefix}light-active)
+            );
+        }
+    }
+
+    .drp-selected {
+        font-size: 0.9rem;
+    }
+
+    .drp-calendar {
+        &.left,
+        &.right {
+            padding: 1rem 1rem;
+        }
+
+        &.left {
+            border-left: 0 !important;
+        }
+
+        th,
+        td {
+            font-size: 1rem;
+            font-weight: $font-weight-normal;
+            width: 33px;
+            height: 33px;
+
+            &.available:hover {
+                @include border-radius($border-radius);
+                background-color: var(--#{$prefix}component-hover-bg);
+                color: var(--#{$prefix}component-hover-color);
+            }
+        }
+
+        th {
+            font-weight: $font-weight-semibold;
+            color: var(--#{$prefix}gray-800);
+
+            &.month {
+                font-weight: $font-weight-semibold;
+                color: var(--#{$prefix}gray-800);
+            }
+
+            &.next,
+            &.prev {
+                span {
+                    border-width: 0 1px 1px 0;
+                    border-color: var(--#{$prefix}gray-600);
+                }
+
+                &.available:hover {
+                    span {
+                        border-color: var(--#{$prefix}component-hover-color);
+                    }
+                }
+            }
+
+            &.next {
+                span {
+                    margin-right: 1px;
+                }
+            }
+
+            &.prev {
+                span {
+                    margin-left: 1px;
+                }
+            }
+        }
+
+        td {
+            color: var(--#{$prefix}gray-700);
+
+            &.available.off {
+                color: var(--#{$prefix}gray-500);
+            }
+
+            &.active {
+                background-color: var(--#{$prefix}component-active-bg) !important;
+                color: var(--#{$prefix}component-active-color) !important;
+                @include border-radius($border-radius);
+
+                &.start-date {
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+
+                &.end-date {
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+                }
+
+                &.start-date.end-date {
+                    @include border-radius($border-radius);
+                }
+            }
+
+            &.today,
+            &.today.active {
+                background: var(--#{$prefix}gray-200) !important;
+                color: var(--#{$prefix}gray-700) !important;
+                @include border-radius($border-radius);
+            }
+
+            &.in-range.available:not(.active):not(.off):not(.today) {
+                background-color: var(--#{$prefix}component-hover-bg);
+                color: var(--#{$prefix}component-hover-color);
+            }
+
+            &:hover {
+                background-color: var(--#{$prefix}component-hover-bg);
+                color: var(--#{$prefix}component-hover-color);
+            }
+        }
+    }
+
+    select.ampmselect,
+    select.minuteselect,
+    select.hourselect,
+    select.monthselect,
+    select.yearselect {
+        padding-top: 0.35rem;
+        padding-bottom: 0.35rem;
+        @include border-radius($border-radius);
+        background-color: var(--#{$prefix}body-bg) !important;
+        border-color: transparent;
+        color: var(--#{$prefix}input-color);
+        font-weight: $font-weight-semibold;
+        outline: 0 !important;
+
+        &:focus {
+            background-color: var(--#{$prefix}gray-100);
+        }
+    }
+}
+
+// Tablet mode
+@include media-breakpoint-down(md) {
+    .daterangepicker {
+        &.show-calendar {
+            .ranges {
+                float: none !important;
+                height: auto !important;
+
+                ul {
+                    width: 100%;
+                }
+            }
+
+            .drp-calendar {
+                float: none !important;
+                max-width: unset !important;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,28 @@
+//
+// Draggable plugin customization: https://shopify.github.io/draggable
+//
+
+.draggable {
+    transition: opacity 0.3s ease;
+    outline: none !important;
+
+    &.draggable-mirror {
+        opacity: 0.8;
+        transition: opacity 0.3s ease;
+        border: 1px dashed var(--#{$prefix}gray-300) !important;
+        @include border-radius($border-radius);
+    }
+
+    &.draggable--original {
+        opacity: 0 !important;
+    }
+
+    &.draggable-source--is-dragging.draggable--over {
+        opacity: 0 !important;
+    }
+
+    // Handle
+    .draggable-handle {
+        cursor: move;
+    }
+}