@mythpe/quasar-ui-qui 0.5.31 → 0.5.33

package/dist/css/_variables.scss

@@ -0,0 +1,32 @@
+$myth-primary: #004E7B !default;
+$myth-secondary: #C59C78 !default;
+$myth-accent: #E26D5C !default;
+
+$body-dark: #111111 !default;
+$body-light: #ffffff !default;
+
+$m-font-family: $typography-font-family !default;
+$m-font-family-rtl: $typography-font-family !default;
+$m-font-family-ltr: $typography-font-family !default;
+
+$scrollbar-dark: $myth-primary !default;
+$scrollbar-light: $myth-primary !default;
+$scrollbar-border-radius: 8px !default;
+$scrollbar-width: 8px !default;
+$scrollbar-height: 8px !default;
+
+$m-container-max-width: 1440px !default;
+
+$m-row-margin-top: 5px !default;
+
+$m-datatable-fixed-height: 80vh !default;
+$m-datatable-control-cell-max-width: 200px !default;
+$m-datatable-desc-cell-width: 150px !default;
+
+$m-help-row-margin-top: 4px !default;
+
+$m-input-caption-margin-bottom: 5px !default;
+
+$m-input-color-preview-border-radius: $generic-border-radius !default;
+$m-select-popup-content: 300px !default;
+$m-toggle-padding-inline-start: 10px !default;

package/dist/css/ckeditor5.scss

@@ -0,0 +1,16 @@
+:root {
+  --ck-z-dialog: 9999 !important;
+  --ck-z-panel: calc(var(--ck-z-default) + var(--ck-z-dialog)) !important;
+}
+
+.ck-body-wrapper {
+  [class*='ck-powered-by'] {
+    display: none !important;
+  }
+}
+
+.ck {
+  &.ck-block-toolbar-button {
+    transform: translateX(10px);
+  }
+}

package/dist/css/colors.scss

@@ -0,0 +1,15 @@
+.text-myth-primary {
+  color: var(--q-myth-primary);
+}
+
+.bg-myth-primary {
+  background: var(--q-myth-primary);
+}
+
+.text-myth-secondary {
+  color: var(--q-myth-secondary);
+}
+
+.bg-myth-secondary {
+  background: var(--q-myth-secondary);
+}

package/dist/css/components/index.scss

@@ -0,0 +1,7 @@
+@import './m-container';
+@import './m-datatable';
+@import './m-help-row';
+@import './m-input';
+@import './m-picker';
+@import './m-select';
+@import './m-toggle';

package/dist/css/components/m-container.scss

@@ -0,0 +1,11 @@
+.m-container {
+  &__dense {
+    //padding: 0;
+  }
+
+  &__fluid {
+    //max-width: $m-container-fluid-width;
+    //margin-left: auto;
+    //margin-right: auto;
+  }
+}

package/dist/css/components/m-datatable.scss

@@ -0,0 +1,142 @@
+.touch {
+  .m-datatable-fab-tooltip {
+    display: none;
+  }
+}
+
+.body {
+  &--light {
+    .m-datatable {
+      .q-table__top,
+      .q-table__bottom,
+      thead tr:first-child th {
+        background: #fff;
+      }
+
+      .m-inactive__tr {
+        background-color: #9e9e9e;
+        color: #ffffff;
+
+        .q-checkbox,
+        .q-checkbox__bg {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  &--dark {
+    .m-datatable {
+      .q-table__top,
+      .q-table__bottom,
+      thead tr:first-child th {
+        background: var(--q-dark);
+      }
+
+      .m-inactive__tr {
+        background-color: rgba(255, 255, 255, 0.28);
+        color: #ffffff;
+
+        .q-checkbox,
+        .q-checkbox__bg {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.m-datatable-component {
+  .m-datatable.m-datatable-grid {
+    .q-table__top {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  &__fab {
+    margin-bottom: 12rem;
+  }
+
+  &__fixed:not(.m-datatable-component__too_small) {
+    thead tr th {
+      position: sticky;
+      z-index: 1;
+    }
+
+    thead tr:first-child th {
+      top: 0;
+    }
+
+    .m-datatable:not(.m-datatable-grid) {
+      max-height: $m-datatable-fixed-height;
+
+      &.q-table--dense {
+        &.q-table--loading thead tr:last-child th {
+          top: 26px;
+        }
+      }
+    }
+
+    .m-datatable:not(.m-datatable-grid):not(.q-table--dense) {
+      &.q-table--loading thead tr:last-child th {
+        top: 55px;
+      }
+    }
+  }
+
+  .q-table__bottom,
+  .q-table__top {
+    .q-table__separator.col {
+      display: none !important;
+    }
+  }
+
+  .q-table__bottom {
+    justify-content: start !important;
+  }
+
+  .q-table__top {
+    align-items: center;
+
+    .q-table__control:last-child {
+      padding-left: 8px;
+      display: block;
+      flex: 10000 1 0;
+      width: auto;
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
+
+  .m-control-cell,
+  .m-control-header {
+    width: $m-datatable-control-cell-max-width;
+  }
+
+  .m-dt__max_desc {
+    max-width: $m-datatable-desc-cell-width;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+.m-dialog-card {
+  .q-card__actions {
+    .q-btn {
+      padding: 4px 16px !important;
+    }
+  }
+}
+
+.grid-style-transition {
+  transition: transform .28s, background-color .28s;
+}
+
+.screen--xs,
+.screen--sm {
+  .m-dt-btn-tooltip {
+    display: none;
+  }
+}

package/dist/css/components/m-help-row.scss

@@ -0,0 +1,3 @@
+.m-help-row {
+  margin-top: $m-help-row-margin-top;
+}

package/dist/css/components/m-input.scss

@@ -0,0 +1,84 @@
+[data-input-name] {
+  &.m-input__error {
+    > .q-field {
+      &:not(.q-field--disabled) {
+        .q-field__label::after {
+          color: var(--q-negative);
+        }
+      }
+    }
+
+    .q-field--standout.q-field--highlighted.q-field--error {
+      .q-field__control {
+        background: rgba(var(--q-negative), 0.8) !important;
+        color: #ffffff !important;
+      }
+
+      .q-field__control,
+      .q-field__native,
+      .q-field__prefix,
+      .q-field__suffix,
+      .q-field__prepend,
+      .q-field__append,
+      .q-field__label:after,
+      .q-field__input,
+      .q-btn.text-negative,
+      &.q-field--dark .q-field__bottom .q-field__messages {
+        color: #ffffff !important;
+      }
+    }
+
+    .m-input__top-label__content {
+      color: var(--q-negative);
+    }
+  }
+
+  &.m-input__required {
+    &:not(.m-input__is-top-label) {
+      > .q-field {
+        &:not(.q-field--disabled) {
+          .q-field__label::after {
+            content: ' *';
+            color: var(--q-negative);
+          }
+        }
+      }
+    }
+
+    .m-input__top-label__content::after {
+      content: ' *';
+      color: var(--q-negative);
+    }
+  }
+
+  .q-field--standout.q-field--highlighted.q-field--dark {
+    .q-field__control,
+    .q-field__native,
+    .q-field__prefix,
+    .q-field__suffix,
+    .q-field__prepend,
+    .q-field__append,
+    .q-field__input {
+      color: #ffffff !important;
+    }
+  }
+}
+
+.m-input {
+  &__color-preview {
+    border: 1px solid var(--q-primary);
+    border-radius: $m-input-color-preview-border-radius;
+  }
+
+  &__top-label,
+  &__hint,
+  &__caption {
+    margin-bottom: $m-input-caption-margin-bottom;
+  }
+
+  &__top-label {
+    .m-help-row {
+      margin-top: 0 !important;
+    }
+  }
+}

package/dist/css/components/m-picker.scss

@@ -0,0 +1,10 @@
+.m-date__picker,
+.m-time__picker {
+  .q-date__calendar-item {
+    > div {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+}

package/dist/css/components/m-select.scss

@@ -0,0 +1,5 @@
+.m-select {
+  &__popup-content {
+    max-height: $m-select-popup-content;
+  }
+}

package/dist/css/components/m-toggle.scss

@@ -0,0 +1,5 @@
+.m-toggle__col {
+  & + & {
+    padding-inline-start: $m-toggle-padding-inline-start;
+  }
+}

package/dist/css/effect.scss

@@ -0,0 +1,175 @@
+.effect {
+  &-dissolve {
+    opacity: 0;
+    animation: dissolveEffect 2s ease-in-out infinite;
+  }
+
+  &-wave {
+    animation: waveRevealEffect 3s ease-in-out infinite;
+  }
+
+  &-pixel {
+    animation: pixelRevealEffect 2.5s ease-in-out infinite;
+  }
+
+  &-glitch {
+    animation: glitchEffect 2s ease-in-out infinite;
+  }
+
+  &-morph {
+    animation: morphEffect 3s cubic-bezier(0.23, 1, 0.32, 1) infinite;
+  }
+
+  &-pulse {
+    animation: pulseEffect 2s ease-in-out infinite;
+  }
+
+  &-slide {
+    animation: slideEffect 4s ease-in-out infinite;
+  }
+
+  &-breathe {
+    animation: breatheEffect 3s ease-in-out infinite;
+  }
+}
+
+@keyframes dissolveEffect {
+  0% {
+    opacity: 0;
+    filter: brightness(1.5) contrast(0.5);
+  }
+  50% {
+    opacity: 1;
+    filter: brightness(1) contrast(1);
+  }
+  100% {
+    opacity: 0;
+    filter: brightness(1.5) contrast(0.5);
+  }
+}
+
+@keyframes waveRevealEffect {
+  0% {
+    opacity: 0;
+    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
+  }
+  50% {
+    opacity: 1;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+  }
+  100% {
+    opacity: 0;
+    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
+  }
+}
+
+@keyframes pixelRevealEffect {
+  0% {
+    opacity: 0;
+    filter: contrast(0) brightness(2) blur(20px);
+    transform: scale(1.2);
+  }
+  50% {
+    opacity: 1;
+    filter: contrast(1) brightness(1) blur(0);
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    filter: contrast(0) brightness(2) blur(20px);
+    transform: scale(1.2);
+  }
+}
+
+@keyframes glitchEffect {
+  0% {
+    opacity: 1;
+    filter: hue-rotate(0deg) contrast(1);
+    transform: translateX(0);
+  }
+  25% {
+    opacity: 0.8;
+    filter: hue-rotate(90deg) contrast(1.5);
+    transform: translateX(-5px);
+  }
+  50% {
+    opacity: 1;
+    filter: hue-rotate(180deg) contrast(1);
+    transform: translateX(5px);
+  }
+  75% {
+    opacity: 0.8;
+    filter: hue-rotate(270deg) contrast(1.5);
+    transform: translateX(-3px);
+  }
+  100% {
+    opacity: 1;
+    filter: hue-rotate(360deg) contrast(1);
+    transform: translateX(0);
+  }
+}
+
+@keyframes morphEffect {
+  0% {
+    opacity: 0;
+    filter: grayscale(100%) brightness(1.5) blur(20px);
+    transform: scale(0.8) rotate(-5deg);
+  }
+  50% {
+    opacity: 1;
+    filter: grayscale(0%) brightness(1) blur(0);
+    transform: scale(1) rotate(0deg);
+  }
+  100% {
+    opacity: 0;
+    filter: grayscale(100%) brightness(1.5) blur(20px);
+    transform: scale(0.8) rotate(5deg);
+  }
+}
+
+@keyframes pulseEffect {
+  0% {
+    opacity: 0.3;
+    transform: scale(0.95);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0.3;
+    transform: scale(0.95);
+  }
+}
+
+@keyframes slideEffect {
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  45% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  55% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes breatheEffect {
+  0%, 100% {
+    opacity: 0.5;
+    filter: brightness(0.8) saturate(0.8);
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    filter: brightness(1.2) saturate(1.2);
+    transform: scale(1.02);
+  }
+}

package/dist/css/grid.scss

@@ -0,0 +1,37 @@
+.ltr {
+  direction: ltr; /* rtl:ignore */
+}
+
+.rtl {
+  direction: rtl; /* rtl:ignore */
+}
+
+[dir='rtl'] {
+  .d-rtl-none {
+    display: none;
+  }
+}
+
+[dir='ltr'] {
+  .d-ltr-none {
+    display: none;
+  }
+}
+
+[lang='ar'] {
+  .d-ar-none {
+    display: none;
+  }
+}
+
+[lang='en'] {
+  .d-en-none {
+    display: none;
+  }
+}
+
+.m-row {
+  & + & {
+    margin-top: $m-row-margin-top;
+  }
+}

package/dist/css/index.scss

@@ -0,0 +1,12 @@
+@import './variables';
+@import './main';
+@import './ckeditor5';
+@import './colors';
+@import './effect';
+@import './grid';
+@import './print';
+@import './sar';
+@import './scrollbar';
+@import './transition';
+@import './typography';
+@import './components';

package/dist/css/main.scss

@@ -0,0 +1,37 @@
+:root {
+  --m-primary: #{$myth-primary};
+  --m-secondary: #{$myth-secondary};
+  --m-accent: #{$myth-accent};
+  --m-primary-rgb: from var(--m-primary) r g b;
+  --m-secondary-rgb: from var(--m-secondary) r g b;
+  --m-accent-rgb: from var(--m-accent) r g b;
+  --m-font-family: #{$m-font-family};
+  --m-font-family-rtl: #{$m-font-family-rtl};
+  --m-font-family-ltr: #{$m-font-family-ltr};
+}
+
+[dir="rtl"] {
+  body {
+    font-family: var(--m-font-family-rtl), sans-serif;
+  }
+
+  .driver-popover {
+    &, * {
+      font-family: var(--m-font-family-rtl), sans-serif !important;
+      font-feature-settings: "lnum" 0, "tnum" 0, "onum" 1 !important;
+    }
+  }
+}
+
+[dir="ltr"] {
+  body {
+    font-family: var(--m-font-family-ltr), sans-serif;
+  }
+
+  .driver-popover {
+    &, * {
+      font-family: var(--m-font-family-ltr), sans-serif !important;
+      font-feature-settings: "lnum" 0, "tnum" 0, "onum" 1 !important;
+    }
+  }
+}

package/dist/css/print.scss

@@ -0,0 +1,18 @@
+@media print {
+  .q-notifications {
+    display: none !important;
+  }
+
+  .print-shadow-none {
+    box-shadow: none !important;
+    border: 0 !important;
+  }
+
+  .print-no-padding {
+    padding: 0 !important;
+  }
+
+  .print-no-margin {
+    margin: 0 !important;
+  }
+}

package/dist/css/sar.scss

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: SarFont;
+  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
+  font-display: swap;
+  unicode-range: U+FDFC;
+}
+
+.sar-font {
+  &::after,
+  &::before {
+    font-family: SarFont, sans-serif;
+  }
+
+  [dir='rtl'] & {
+    &::after {
+      content: '﷼';
+      display: inline-block;
+      padding-inline-start: 4px;
+    }
+  }
+
+  [dir='ltr'] & {
+    &::before {
+      content: '﷼';
+      display: inline-block;
+      padding-inline-end: 4px;
+    }
+
+    //font-family: SarFont, var(--m-font-family-ltr, 'inherit'), sans-serif;
+  }
+}

package/dist/css/scrollbar.scss

@@ -0,0 +1,40 @@
+:root {
+  --m-scrollbar-dark: #{$scrollbar-dark};
+  --m-scrollbar-light: #{$scrollbar-light};
+  --m-scrollbar-border-radius: #{$scrollbar-border-radius};
+  --m-scrollbar-width: #{$scrollbar-width};
+  --m-scrollbar-height: #{$scrollbar-height};
+}
+
+.body {
+  &--dark {
+    --m-scrollbar-thumb: var(--m-scrollbar-dark);
+    --m-scrollbar-hover: color-mix(in srgb, var(--m-scrollbar-thumb) 85%, black);
+    --m-scrollbar-track: color-mix(in srgb, black 90%, white);
+  }
+
+  &--light {
+    --m-scrollbar-thumb: var(--m-scrollbar-light);
+    --m-scrollbar-hover: color-mix(in srgb, var(--m-scrollbar-thumb) 85%, white);
+    --m-scrollbar-track: color-mix(in srgb, var(--m-scrollbar-thumb) 10%, white);
+  }
+}
+
+::-webkit-scrollbar {
+  width: var(--m-scrollbar-width);
+  height: var(--m-scrollbar-height);
+
+  &-thumb {
+    background-color: var(--m-scrollbar-thumb);
+    border-radius: var(--m-scrollbar-border-radius);
+
+    &:hover {
+      background-color: var(--m-scrollbar-hover);
+    }
+  }
+
+  &-track {
+    background-color: var(--m-scrollbar-track);
+    border-radius: var(--m-scrollbar-border-radius);
+  }
+}