@ldmjs/ui 1.0.90 → 2.0.0-beta.1

package/dist/scss/_colors.scss

@@ -1,52 +1,58 @@
-$colors: ('primary', 'secondary', 'success', 'warning', 'error', 'grey', 'dark', 'white');
+$colors: ('primary', 'secondary', 'success', 'warning', 'error', 'grey', 'white');
 
 body,
 .v-application {
   @each $color in $colors {
     & .#{$color} {
-      background-color: var(--#{$color}) !important;
-      border-color: var(--#{$color}) !important;
+      background-color: var(--#{$color});
+      border-color: var(--#{$color});
     }
     & .#{$color}--text, & .text-#{$color} {
       @if $color == 'primary' {
-        color: var(--#{$color}-l-2) !important;
+        color: var(--#{$color}-d-1);
+      }
+      @else if $color == 'success' {
+        color: var(--#{$color}-d-1);
+      }
+      @else if $color == 'grey' {
+        color: var(--#{$color}-d-3);
       } @else {
-        color: var(--#{$color}) !important;
+        color: var(--#{$color});
       }
     }
     & .#{$color}--bg, & .bg-#{$color} {
       @if $color == 'primary' {
-        background-color: var(--#{$color}-l-8) !important;
+        background-color: var(--#{$color}-l-5);
       } @else if $color == 'grey' {
-        background-color: var(--#{$color}-l-6) !important;
+        background-color: var(--#{$color}-l-6);
       } @else if $color == 'secondary' {
-        background-color: var(--#{$color}-l-5) !important;
+        background-color: var(--#{$color}-l-5);
       } @else {
-        background-color: var(--#{$color}) !important;
+        background-color: var(--#{$color});
       }
     }
     & .#{$color}--border, & .border-#{$color} {
       @if $color == 'primary' {
-        border-color: var(--#{$color}-l-2) !important;
+        border-color: var(--#{$color}-l-2);
       } @else if $color == 'grey' {
-        border-color: var(--#{$color}-l-5) !important;
+        border-color: var(--#{$color}-l-5);
       } @else {
-        border-color: var(--#{$color}) !important;
+        border-color: var(--#{$color});
       }
     }
     & .#{$color}--hover {
       transition: background 0.1s;
       @if $color == 'grey' {
         &:hover {
-          background-color: var(--#{$color}-l-6) !important;
+          background-color: var(--#{$color}-l-6);
         }
       } @else if $color == 'secondary' {
           &:hover {
-            background-color: var(--#{$color}-l-5) !important;
+            background-color: var(--#{$color}-l-5);
           }
       } @else {
         &:hover {
-          background-color: var(--#{$color}) !important;
+          background-color: var(--#{$color});
         }
       }
     }
@@ -55,9 +61,5 @@ body,
   & .text-color {
     color: var(--text);
   }
-
-  & .label-color {
-    color: var(--label);
-  }
 }
 

package/dist/scss/_dialogs.scss

@@ -1,207 +1,136 @@
+$modal-border-radius: 20px !default; // радиус скругления модальных окон
+$modal-window-gap: 24px !default;
+
+:root {
+  --modal-border-radius: #{$modal-border-radius};
+  --modal-window-gap: #{$modal-window-gap};
+}
+
 body {
   .v-dialog {
     display: flex;
-    transition: none;
+    justify-content: center;
+    overflow-x: hidden;
+    overflow-y: auto;
 
-    .v-overlay__content {
-      contain: none;
-
-      & > .v-card {
-        flex-grow: 1;
-        border: 1px solid var(--primary);
-        border-radius: var(--toolbar-border-radius);
-        box-shadow: var(--shadow-4);
+    .v-overlay__scrim {
+      opacity: 1;
+      background-color: var(--shade-30);
+    }
 
-        & > .v-card-title {
-          height: var(--toolbar-height);
-          padding: 0 20px;
-        }
+    &.Alert,
+    &.Confirm {
+      align-items: center;
+    }
 
-        & > .v-card-text {
-          padding: 0 20px 20px 20px;
-        }
-      }
+    &:not(.Alert):not(.Confirm) {
+      align-items: start;
     }
-  }
 
-  .minimized-dialogs {
-    position: absolute;
-    right: 25px;
-    bottom: 17px;
-    z-index: 999;
-  }
+    &--align-left {
+      justify-content: flex-start !important;
 
-  .minimize-btn {
-    width: 300px;
-    height: var(--input-height);
-    font-size: var(--font-size);
-    transition: background 0.2s;
-    background-color: var(--primary-l-2);
-    border-radius: var(--border-radius);
+      .ld-dialog-content.v-overlay__content {
+        border-radius: 0 !important;
 
-    &:hover {
-      background-color: var(--primary-l-1);
+        & > .v-card {
+          border-radius: 0 !important;
+        }
+      }
     }
-  }
-}
 
-.ld-dialog-content {
-  & > .card {
-    display: flex;
-    flex-direction: column;
-
-    & > .v-card-title {
-      display: flex;
-      flex-wrap: nowrap;
-      position: relative;
-      flex-shrink: 0;
-      padding: 0 20px !important;
-      z-index: 1;
-      box-shadow: none;
-      font-weight: 700;
-
-      &--dark {
-        background-color: var(--primary);
-        color: var(--white);
-        box-shadow: var(--shadow-2);
-      }
+    &--align-right {
+      justify-content: flex-end !important;
 
-      &.modal-title {
-        display: flex;
-        align-items: center;
-        flex-wrap: nowrap !important;
-        font-size: var(--font-size-2);
-        padding-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-
-        & > span {
-          display: block;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
+      .ld-dialog-content.v-overlay__content {
+        border-radius: 0 !important;
+
+        & > .v-card {
+          border-radius: 0 !important;
         }
       }
     }
 
-    & > .v-card-text {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      height: auto;
-      flex-basis: 100%;
-      overflow-x: hidden;
-      overflow-y: auto;
-      padding: 0 20px 20px 20px !important;
-
-      &.content {
-        height: 100%;
-        overflow-y: auto;
-        overflow-x: hidden;
-        font-size: var(--font-size) !important;
-      }
+    &.ld-dialog--hidden {
+      visibility: hidden !important;
+      opacity: 0 !important;
     }
 
-    & > .v-card-actions {
-      flex-shrink: 0;
-      padding: 8px 20px 20px 20px;
-      min-height: unset;
-    }
+    .ld-dialog-content.v-overlay__content {
+      max-width: unset;
+      max-height: unset;
+      border-radius: var(--modal-border-radius);
 
-    &--simple {
-      padding: 0 !important;
-      .v-card-title {
-        padding-top: 5px !important;
-        height: 40px !important;
-      }
-      .v-card-text {
-        padding: 0 20px 0px !important;
-      }
+      & > .v-card {
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--modal-border-radius);
+        box-shadow: var(--shadow-xxl);
 
-      .v-card-actions {
-        padding: 20px 20px 17px !important;
-      }
-    }
+        & > .v-card-title {
+          display: flex;
+          align-items: center;
+          flex-wrap: nowrap;
+          position: relative;
+          flex-shrink: 0;
+          padding: 24px 24px 20px 24px;
+          border-bottom: 1px solid var(--grey-l-5);
+
+          & > span:first-child {
+            color: var(--text);
+            font-family: var(--semibold);
+            font-size: var(--text-body-x);
+            font-weight: 600;
+            line-height: calc(var(--text-body-x) + 8px);
+          }
+        }
+
+        & > .v-card-text {
+          color: var(--text);
+          font-family: var(--regular);
+          font-size: var(--text-body-m);
+          line-height: 20px;
+          padding: 20px 24px;
+          overflow-x: hidden;
+          overflow-y: auto;
+        }
+
+        & > .v-card-actions {
+          position: relative;
+          flex-shrink: 0;
+          padding: 24px 24px 20px 24px;
+          border-top: 1px solid var(--grey-l-5);
 
-    &--mobile {
-      display: grid !important;
-      grid-template-rows: 44px 1fr;
-      height: 100%;
-      &.not-select-dialog {
-        min-height: 115px;
-        max-height: 100%;
-        // .mobile-container {
-        //   .v-card-text {
-        //     font-size: var(--font-size);
-        //     padding: 10px !important;
-        //   }
-        // }
-        .v-card-actions {
-          padding: 10px 0;
+          & > button {
+            width: var(--max-child-width);
+          }
         }
       }
 
-      // .mobile-container {
-      //   position: relative;
-      //   min-height: 100%;
-      //   max-height: 100%;
-      //   overflow-y: auto;
-
-      //   .v-card-text {
-      //     height: 100%;
-      //   }
-      // }
-
-      // .modal-header {
-      //   z-index: 1;
-      //   height: $modal-header-height !important;
-      //   border-radius: 0 !important;
-      //   background-color: var(--white);
-
-      //   & .v-toolbar__content {
-      //     height: 100% !important;
-      //     display: flex;
-      //     justify-content: space-between;
-      //     & .v-toolbar-title {
-      //       margin-inline-start: 12px !important;
-      //     }
-      //   }
-      // }
-      // .v-toolbar__title {
-      //   font-size: var(--font-size) !important;
-      //   margin-inline-start: 12px !important;
-      // }
-      // .v-card-actions {
-      //   background: var(--white);
-      //   padding: 10px 0;
-      // }
-
-      // .v-toolbar__content {
-      //   // margin: 0 10px;
-      //   padding: 0;
-      // }
-
-      .v-card-text {
-        height: 100%;
-        padding: 0 12px 20px 12px;
+      &.ld-dialog-content--without-content {
+        & > .v-card {
+          & > .v-card-title {
+            border-color: transparent;
+          }
+          & > .v-card-actions {
+            border-color: transparent;
+          }
+        }
       }
-    }
-  }
-
-  &.Info,
-  &.Select,
-  &.CreateEdit {
-    .card {
-      .v-card-text {
-        &.content {
-          min-height: 55px;
+      &.ld-dialog-content--mobile {
+        & > .v-card {
+          & > .v-card-actions {
+            display: grid;
+            grid-auto-flow: column dense;
+            grid-auto-columns: 1fr;
+            gap: 8px;
+          }
         }
       }
+      &.ld-dialog-content--hidden {
+        visibility: hidden !important;
+        opacity: 0 !important;
+      }
     }
   }
-
-  &--hidden {
-    visibility: hidden !important;
-    opacity: 0 !important;
-  }
-}
+}

package/dist/scss/_editor.scss

@@ -0,0 +1,146 @@
+body {
+  .ld-editor {
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    #toolbar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      border: none !important;
+      background-color: rgba(255, 255, 255, 1);
+      padding: 12px 0 8px 0;
+      z-index: 1;
+
+      button[type="button"] {
+        width: 32px;
+        height: 32px;
+
+        svg {
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      & + div {
+        border: none !important;
+        padding: 52px 0 0 0;
+      }
+    }
+
+    .ql-toolbar {
+      .ql-fill {
+        fill: var(--grey-d-3);
+      }
+      .ql-stroke {
+        stroke: var(--grey-d-3);
+      }
+      .ql-picker-options {
+        max-height: 250px;
+        overflow-y: auto;
+      }
+
+      button.sep {
+        width: 14px;
+        height: var(--button-xs);
+        color: var(--grey-l-4);
+        font-size: var(--text-body-s);
+        &:hover {
+          background-color: transparent !important;
+          cursor: default;
+        }
+      }
+
+      button[type="button"] {
+        width: var(--button-xs);
+        height: var(--button-xs);
+        border: 2px solid transparent;
+        border-radius: var(--border-radius);
+
+        svg {
+          width: 20px;
+          height: 20px;
+        }
+
+        &.ql-active {
+          border-color: var(--focus);
+          background: none !important;
+          color: var(--text) !important;
+
+          .ql-fill {
+            fill: var(--text);
+          }
+          .ql-stroke {
+            stroke: var(--text);
+          }
+        }
+      }
+
+      .ql-color-picker {
+        width: var(--button-xs);
+        height: var(--button-xs);
+
+        .ql-picker-label {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 8px;
+          padding: 0;
+
+          svg {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
+
+      .ql-font,
+      .ql-size {
+        display: flex;
+        align-items: center;
+        height: var(--button-xs);
+        border: 2px solid transparent;
+        border-radius: var(--border-radius);
+
+        .ql-picker-label {
+          height: 20px;
+          border: none !important;
+          background: none;
+
+          &:hover {
+            background: none;
+          }
+
+          &.ql-active {
+            color: var(--text);
+
+            .ql-stroke {
+              stroke: var(--text);
+            }
+          }
+        }
+
+        &.ql-expanded {
+          border-color: var(--focus);
+        }
+      }
+
+      .ql-font {
+        width: 240px !important;
+      }
+      .ql-size {
+        width: 135px !important;
+      }
+    }
+
+    .ql-editor {
+      border: 1px solid var(--grey-l-4);
+      border-radius: var(--border-radius);
+      background-color: rgba(255, 255, 255, 1);
+      padding: 12px 16px !important;
+    }
+  }
+}
+

package/dist/scss/_expansions.scss

@@ -0,0 +1,57 @@
+body {
+  .v-expansion-panels {
+    &.v-expansion-panels--variant-accordion {
+      & > .v-expansion-panel:first-child:not(:last-child) {
+        border-bottom-left-radius: var(--border-radius) !important;
+        border-bottom-right-radius: var(--border-radius) !important;
+      }
+
+      & > .v-expansion-panel:not(:first-child):not(:last-child) {
+        border-radius: var(--border-radius) !important;
+      }
+
+      & > .v-expansion-panel:not(:first-child) {
+        margin-top: 4px;
+      }
+    }
+  }
+  .v-expansion-panel {
+    padding: 0 32px;
+    border-radius: var(--border-radius);
+    &:not(:first-child) {
+      &:after {
+        content: unset !important;
+      }
+    }
+    .v-expansion-panel__shadow {
+      box-shadow: var(--shadow-sm) !important;
+    }
+    .v-expansion-panel-title {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: flex-end !important;
+      padding-left: 0;
+      padding-right: 0;
+      font-family: var(--semibold);
+      font-size: var(--text-body-m);
+      .v-expansion-panel-title__icon {
+        margin-inline-start: unset;
+        transition: transform 0.2s;
+      }
+      .v-expansion-panel-title__overlay {
+        opacity: 0;
+      }
+    }
+
+    &--active {
+
+      &:not(:first-child) {
+        margin-top: 0;
+      }
+
+      .v-expansion-panel-title__icon {
+        transform: rotate(90deg);
+      }
+    }
+  }
+}