@ldmjs/ui 1.0.88 → 2.0.0-beta.0

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,314 @@
+$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__scrim {
+      opacity: 1;
+      background-color: var(--shade-30);
+    }
+
+    &.Alert,
+    &.Confirm {
+      align-items: center;
+    }
+
+    &:not(.Alert):not(.Confirm) {
+      align-items: start;
+    }
+
+    &.ld-dialog--hidden {
+      visibility: hidden !important;
+      opacity: 0 !important;
+    }
 
-    .v-overlay__content {
-      contain: none;
+    .ld-dialog-content.v-overlay__content {
+      max-width: unset;
+      max-height: unset;
+      border-radius: var(--modal-border-radius);
 
       & > .v-card {
-        flex-grow: 1;
-        border: 1px solid var(--primary);
-        border-radius: var(--toolbar-border-radius);
-        box-shadow: var(--shadow-4);
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--modal-border-radius) !important;
+        box-shadow: var(--shadow-xxl) !important;
 
         & > .v-card-title {
-          height: var(--toolbar-height);
-          padding: 0 20px;
+          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 {
-          padding: 0 20px 20px 20px;
+          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);
+
+          & > button {
+            width: var(--max-child-width);
+          }
         }
       }
+
+      &.ld-dialog-content--without-content {
+        & > .v-card {
+          & > .v-card-title {
+            border-color: transparent;
+          }
+          & > .v-card-actions {
+            border-color: transparent;
+          }
+        }
+      }
+      &.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;
+      }
     }
   }
+  // .v-dialog {
+  //   display: flex;
+  //   transition: none;
 
-  .minimized-dialogs {
-    position: absolute;
-    right: 25px;
-    bottom: 17px;
-    z-index: 999;
-  }
+  //   .v-overlay__content {
+  //     contain: none;
 
-  .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);
+  //     & > .v-card {
+  //       flex-grow: 1;
+  //       border: 1px solid var(--primary);
+  //       border-radius: var(--toolbar-border-radius);
+  //       box-shadow: var(--shadow-4);
 
-    &:hover {
-      background-color: var(--primary-l-1);
-    }
-  }
+  //       & > .v-card-title {
+  //         height: var(--toolbar-height);
+  //         padding: 0 20px;
+  //       }
+
+  //       & > .v-card-text {
+  //         padding: 0 20px 20px 20px;
+  //       }
+  //     }
+  //   }
+  // }
+
+  // .minimized-dialogs {
+  //   position: absolute;
+  //   right: 25px;
+  //   bottom: 17px;
+  //   z-index: 999;
+  // }
+
+  // .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);
+
+  //   &:hover {
+  //     background-color: var(--primary-l-1);
+  //   }
+  // }
 }
 
-.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);
-      }
 
-      &.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;
-        }
-      }
-    }
 
-    & > .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-content {
+//   & > .card {
+//     display: flex;
+//     flex-direction: column;
 
-    & > .v-card-actions {
-      flex-shrink: 0;
-      padding: 8px 20px 20px 20px;
-      min-height: unset;
-    }
+//     & > .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;
 
-    &--simple {
-      padding: 0 !important;
-      .v-card-title {
-        padding-top: 5px !important;
-        height: 40px !important;
-      }
-      .v-card-text {
-        padding: 0 20px 0px !important;
-      }
+//       &--dark {
+//         background-color: var(--primary);
+//         color: var(--white);
+//         box-shadow: var(--shadow-2);
+//       }
 
-      .v-card-actions {
-        padding: 20px 20px 17px !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;
 
-    &--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;
-        }
-      }
+//         & > span {
+//           display: block;
+//           white-space: nowrap;
+//           overflow: hidden;
+//           text-overflow: ellipsis;
+//         }
+//       }
+//     }
 
-      // .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;
-      }
-    }
-  }
+//     .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;
 
-  &.Info,
-  &.Select,
-  &.CreateEdit {
-    .card {
-      .v-card-text {
-        &.content {
-          min-height: 55px;
-        }
-      }
-    }
-  }
+//       &.content {
+//         height: 100%;
+//         overflow-y: auto;
+//         overflow-x: hidden;
+//         font-size: var(--font-size) !important;
+//       }
+//     }
 
-  &--hidden {
-    visibility: hidden !important;
-    opacity: 0 !important;
-  }
-}
+//     .v-card-actions {
+//       flex-shrink: 0;
+//       padding: 8px 20px 20px 20px;
+//       min-height: unset;
+//     }
+
+//     &--simple {
+//       padding: 0 !important;
+//       .v-card-title {
+//         padding-top: 5px !important;
+//         height: 40px !important;
+//       }
+//       .v-card-text {
+//         padding: 0 20px 0px !important;
+//       }
+
+//       .v-card-actions {
+//         padding: 20px 20px 17px !important;
+//       }
+//     }
+
+//     &--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;
+//         }
+//       }
+
+//       // .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;
+//       }
+//     }
+//   }
+
+//   &.Info,
+//   &.Select,
+//   &.CreateEdit {
+//     .card {
+//       .v-card-text {
+//         &.content {
+//           min-height: 55px;
+//         }
+//       }
+//     }
+//   }
+// }