@muziehdesign/components 18.2.0-beta.1974 → 18.2.0-next.0

package/design/_modal.scss

@@ -1,287 +0,0 @@
-
-.modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1055;
-    display: none;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    outline: 0;
-  }
-  
-  .modal.show {
-      display: block;
-  }
-
-  .modal-dialog {
-    position: relative;
-    width: auto;
-    margin: 0.5rem;
-    pointer-events: none;
-  }
-  .modal.fade .modal-dialog {
-    transition: transform 0.3s ease-out;
-    transform: translate(0, -50px);
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .modal.fade .modal-dialog {
-      transition: none;
-    }
-  }
-  .modal.show .modal-dialog {
-    transform: none;
-  }
-  .modal.modal-static .modal-dialog {
-    transform: scale(1.02);
-  }
-  
-  .modal-dialog-scrollable {
-    height: calc(100% - 1rem);
-  }
-  .modal-dialog-scrollable .modal-content {
-    max-height: 100%;
-    overflow: hidden;
-  }
-  .modal-dialog-scrollable .modal-body {
-    overflow-y: auto;
-  }
-  
-  .modal-dialog-centered {
-    display: flex;
-    align-items: center;
-    min-height: calc(100% - 1rem);
-  }
-  
-  .modal-content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    pointer-events: auto;
-    background-color: #fff;
-    background-clip: padding-box;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 0.3rem;
-    outline: 0;
-  }
-  
-  .modal-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1050;
-    width: 100vw;
-    height: 100vh;
-    background-color: #000;
-  }
-  .modal-backdrop.fade {
-    opacity: 0;
-  }
-  .modal-backdrop.show {
-    opacity: 0.5;
-  }
-  
-  .modal-header {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1rem 1rem;
-    border-bottom: 1px solid #dee2e6;
-    border-top-left-radius: calc(0.3rem - 1px);
-    border-top-right-radius: calc(0.3rem - 1px);
-  }
-  .modal-header .btn-close {
-    padding: 0.5rem 0.5rem;
-    margin: -0.5rem -0.5rem -0.5rem auto;
-  }
-  
-  .modal-title {
-    margin-bottom: 0;
-    line-height: 1.5;
-  }
-  
-  .modal-body {
-    position: relative;
-    flex: 1 1 auto;
-    padding: 1rem;
-  }
-  
-  .modal-footer {
-    display: flex;
-    flex-wrap: wrap;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 0.75rem;
-    border-top: 1px solid #dee2e6;
-    border-bottom-right-radius: calc(0.3rem - 1px);
-    border-bottom-left-radius: calc(0.3rem - 1px);
-  }
-  .modal-footer > * {
-    margin: 0.25rem;
-  }
-  
-  @media (min-width: 576px) {
-    .modal-dialog {
-      max-width: 500px;
-      margin: 1.75rem auto;
-    }
-  
-    .modal-dialog-scrollable {
-      height: calc(100% - 3.5rem);
-    }
-  
-    .modal-dialog-centered {
-      min-height: calc(100% - 3.5rem);
-    }
-  
-    .modal-sm {
-      max-width: 300px;
-    }
-  }
-  @media (min-width: 992px) {
-    .modal-lg,
-  .modal-xl {
-      max-width: 800px;
-    }
-  }
-  @media (min-width: 1200px) {
-    .modal-xl {
-      max-width: 1140px;
-    }
-  }
-  .modal-fullscreen {
-    width: 100vw;
-    max-width: none;
-    height: 100%;
-    margin: 0;
-  }
-  .modal-fullscreen .modal-content {
-    height: 100%;
-    border: 0;
-    border-radius: 0;
-  }
-  .modal-fullscreen .modal-header {
-    border-radius: 0;
-  }
-  .modal-fullscreen .modal-body {
-    overflow-y: auto;
-  }
-  .modal-fullscreen .modal-footer {
-    border-radius: 0;
-  }
-  
-  @media (max-width: 575.98px) {
-    .modal-fullscreen-sm-down {
-      width: 100vw;
-      max-width: none;
-      height: 100%;
-      margin: 0;
-    }
-    .modal-fullscreen-sm-down .modal-content {
-      height: 100%;
-      border: 0;
-      border-radius: 0;
-    }
-    .modal-fullscreen-sm-down .modal-header {
-      border-radius: 0;
-    }
-    .modal-fullscreen-sm-down .modal-body {
-      overflow-y: auto;
-    }
-    .modal-fullscreen-sm-down .modal-footer {
-      border-radius: 0;
-    }
-  }
-  @media (max-width: 767.98px) {
-    .modal-fullscreen-md-down {
-      width: 100vw;
-      max-width: none;
-      height: 100%;
-      margin: 0;
-    }
-    .modal-fullscreen-md-down .modal-content {
-      height: 100%;
-      border: 0;
-      border-radius: 0;
-    }
-    .modal-fullscreen-md-down .modal-header {
-      border-radius: 0;
-    }
-    .modal-fullscreen-md-down .modal-body {
-      overflow-y: auto;
-    }
-    .modal-fullscreen-md-down .modal-footer {
-      border-radius: 0;
-    }
-  }
-  @media (max-width: 991.98px) {
-    .modal-fullscreen-lg-down {
-      width: 100vw;
-      max-width: none;
-      height: 100%;
-      margin: 0;
-    }
-    .modal-fullscreen-lg-down .modal-content {
-      height: 100%;
-      border: 0;
-      border-radius: 0;
-    }
-    .modal-fullscreen-lg-down .modal-header {
-      border-radius: 0;
-    }
-    .modal-fullscreen-lg-down .modal-body {
-      overflow-y: auto;
-    }
-    .modal-fullscreen-lg-down .modal-footer {
-      border-radius: 0;
-    }
-  }
-  @media (max-width: 1199.98px) {
-    .modal-fullscreen-xl-down {
-      width: 100vw;
-      max-width: none;
-      height: 100%;
-      margin: 0;
-    }
-    .modal-fullscreen-xl-down .modal-content {
-      height: 100%;
-      border: 0;
-      border-radius: 0;
-    }
-    .modal-fullscreen-xl-down .modal-header {
-      border-radius: 0;
-    }
-    .modal-fullscreen-xl-down .modal-body {
-      overflow-y: auto;
-    }
-    .modal-fullscreen-xl-down .modal-footer {
-      border-radius: 0;
-    }
-  }
-  @media (max-width: 1399.98px) {
-    .modal-fullscreen-xxl-down {
-      width: 100vw;
-      max-width: none;
-      height: 100%;
-      margin: 0;
-    }
-    .modal-fullscreen-xxl-down .modal-content {
-      height: 100%;
-      border: 0;
-      border-radius: 0;
-    }
-    .modal-fullscreen-xxl-down .modal-header {
-      border-radius: 0;
-    }
-    .modal-fullscreen-xxl-down .modal-body {
-      overflow-y: auto;
-    }
-    .modal-fullscreen-xxl-down .modal-footer {
-      border-radius: 0;
-    }
-  }

package/design/_muzieh.scss

@@ -1,19 +0,0 @@
-@import 'tailwindcss/base';
-@import 'design/_base';
-@import 'tailwindcss/components';
-@import 'design/_material';
-@import 'design/_button';
-@import 'design/_breadcrumb';
-@import 'design/_dl';
-@import 'design/_dropdown-menu';
-@import 'design/_form';
-@import 'design/_icon';
-@import 'design/_modal';
-@import 'design/_pagination';
-@import 'design/_table';
-@import 'design/_tabs';
-@import 'design/_progress-bar';
-@import 'design/_alert';
-@import 'design/date-picker';
-@import 'design/_infinite_scroll';
-@import 'tailwindcss/utilities';

package/design/_pagination.scss

@@ -1,27 +0,0 @@
-.pagination-wrapper {
-    @apply grid grid-cols-3 gap-20 justify-center;
-}
-
-.pagination-nav {
-    @apply px-4 flex justify-center col-start-2;
-}
-
-.page-link {
-    @apply text-gray-500 hover:text-primary p-4 inline-block text-center font-medium cursor-pointer;
-}
-
-.page-link.active {
-    @apply border-primary text-primary font-bold cursor-default hover:no-underline;
-}
-
-.page-link.disabled {
-    @apply cursor-default text-gray-400 hover:text-gray-400 hover:border-transparent hover:no-underline;
-}
-
-.pagination-size, .collection-size {
-    @apply text-gray-500 text-sm p-4 ml-auto hidden lg:inline-block;
-}
-
-.page-size-control {
-    @apply py-0 pr-7 pl-0.5 mx-1;
-}

package/design/_progress-bar.scss

@@ -1,25 +0,0 @@
-.progress-bar-container {
-    @apply w-full;
-}
-
-.progress-bar.progress-bar-indeterminate {
-    @apply w-full h-1 bg-primary bg-opacity-50 overflow-hidden;
-
-    .progress-bar-value {
-        animation: indeterminateAnimation 0.75s infinite linear;
-        transform-origin: 0% 50%;
-        @apply bg-primary w-full h-full;
-    }
-}
-
-@keyframes indeterminateAnimation {
-    0% {
-        transform: translateX(0) scaleX(0);
-    }
-    40% {
-        transform: translateX(0) scaleX(0.4);
-    }
-    100% {
-        transform: translateX(100%) scaleX(0.5);
-    }
-}

package/design/_table.scss

@@ -1,93 +0,0 @@
-.table-wrapper,
-.result-table {
-    @apply max-w-full overflow-x-auto relative;
-}
-
-.table {
-    @apply w-full text-left border-collapse;
-}
-
-.table caption {
-    @apply text-left text-sm text-secondary mb-1.5;
-}
-
-.table tbody {
-    @apply align-baseline;
-}
-
-.table tbody tr {
-    @apply border-b border-gray-200;
-}
-
-.table tbody tr:nth-child(even) {
-    @apply bg-gray-50;
-}
-
-.table td {
-    @apply py-3 px-2;
-}
-
-.table th {
-    @apply top-0 text-sm font-semibold text-gray-500 p-2;
-}
-
-.table thead tr {
-    @apply py-3 border-b border-gray-500;
-}
-
-.result-table {
-    .state-message {
-        @apply p-9 text-center;
-
-        .title {
-            @apply text-xl;
-        }
-    }
-    .has-overlay {
-        @apply opacity-10;
-    }
-    .loading-overlay-spinner {
-        @apply absolute top-20 flex flex-col items-center justify-center w-full;
-    }
-}
-
-.result-table.loading,
-.result-table.failed {
-    min-height: 14rem;
-}
-
-.result-table.loading {
-    caption {
-        visibility: hidden;
-    }
-}
-
-.sort-trigger {
-    @apply bg-gray-100 hover:bg-gray-200;
-}
-
-.sort-ascending .sort-icon {
-    width: 10px;
-    display: inline-flex;
-    margin-bottom: -7px;
-    margin-left: 10px;
-    height: 23px;
-    mask-image: url('/assets/arrow-up.svg');
-    mask-repeat: no-repeat;
-    mask-size: 1.2rem;
-    mask-position: center;
-    @apply bg-gray-500;
-}
-
-.sort-descending .sort-icon {
-    width: 10px;
-    display: inline-flex;
-    margin-bottom: -7px;
-    margin-left: 10px;
-    height: 23px;
-    mask-image: url('/assets/arrow-down.svg');
-    mask-repeat: no-repeat;
-    mask-size: 1.2rem;
-    mask-position: center;
-    @apply bg-gray-500;
-}

package/design/_tabs.scss

@@ -1,20 +0,0 @@
-.nav-tabs {
-    @apply block border-b-gray-300 border-b;
-}
-
-.nav-item {
-    @apply inline-block text-center;
-}
-
-.nav-link {
-    @apply hover:no-underline inline-block text-gray-500 py-2 px-6 border-b border-b-transparent hover:text-primary;
-    min-width: 8rem;
-}
-
-.nav-link.active {
-    @apply text-primary border-b-primary border-b-2 font-medium;
-}
-
-.tab-pane {
-    @apply py-3;
-}

package/design/_wizard.scss

@@ -1,139 +0,0 @@
-.wizard-step.previous {
-    .step-desc {
-        @apply px-5 text-secondary font-semibold;
-    }
-
-    .wizard-step-icon {
-        @apply text-primary;
-    }
-}
-
-.wizard-step:not(.previous) .wizard-step-icon {
-    @apply lg:mt-1 lg:mb-1;
-}
-
-.wizard-step.previous .step-line,
-.wizard-step.current .step-line.left {
-    @apply border-primary;
-}
-
-.spacer {
-    @apply hidden h-4 border-l-2 border-transparent;
-}
-
-.wizard-step.current {
-    .step-desc {
-        @apply px-5 font-semibold text-primary;
-    }
-
-    .wizard-step-icon {
-        @apply flex items-center justify-center h-8 w-8 mx-0 lg:mx-1 my-1 border-primary border-2 rounded-2xl;
-    }
-}
-
-.step-inner-circle {
-    @apply h-2.5 w-2.5 bg-primary rounded-2xl;
-}
-
-.step-line {
-    @apply border-solid border-gray-400 border-l-2 h-4 lg:border-l-0 lg:border-t-2 lg:flex-1 lg:mt-3.5;
-}
-
-.toggable-icon {
-    @apply lg:hidden;
-}
-
-.wizard-step.unvisited {
-    .step-desc {
-        @apply px-5;
-    }
-    
-    .wizard-step-icon {
-        @apply h-8 w-8 rounded-2xl border-2 border-gray-400 mx-0 lg:mx-1 my-1;
-    }
-}
-
-.wizard-step {
-    @apply flex flex-row items-center lg:flex-col;
-
-    &:not(.previous) {
-        @apply ml-1 lg:ml-0;
-    }
-}
-
-.wizard-progress-tracker {
-    .direction-container {
-        @apply flex flex-col;
-    }
-}
-
-.steps-count {
-    @apply text-sm text-secondary lg:ml-5;
-}
-
-.wizard-steps-container {
-    @apply flex flex-col mt-1 lg:flex-row;
-
-    &:not(.previous) {
-        @apply lg:pl-1;
-    }
-
-    &.toggled {
-        .wizard-step.current {
-            .spacer.left,
-            .spacer.right {
-                @apply flex lg:hidden;
-            }
-        }
-
-        .wizard-step:first-of-type {
-            .spacer.left {
-                @apply flex lg:flex-1;
-            }
-        }
-
-        .wizard-step:last-of-type {
-            .spacer.right {
-                @apply flex lg:flex-1;
-            }
-        }
-
-        .wizard-step:not(.current) {
-            @apply hidden lg:flex;
-
-            .toggable-icon {
-                @apply hidden;
-            }
-        }
-
-        .wizard-step.current .step-line {
-            @apply hidden lg:flex;
-        }
-    }
-
-    &:not(.toggled) {
-        .wizard-step:first-of-type {
-            .spacer.left {
-                @apply flex lg:flex-1;
-            }
-        }
-
-        .wizard-step:last-of-type {
-            .spacer.right {
-                @apply flex lg:flex-1;
-            }
-        }
-
-        .wizard-step:not(:first-of-type) .toggable-icon {
-            @apply hidden;
-        }
-    }
-}
-
-.wizard-step-icon-container {
-    @apply flex flex-col items-center lg:mb-3 lg:flex-row lg:w-full;
-}
-
-.wizard-step-icon .icon.icon-solid {
-    @apply h-10 w-10;
-}