ros.grant.common 2.0.1467 → 2.0.1469

package/Shared/Styles/myrtex-lib/components/alert/alert-colors.less

@@ -1,4 +1,4 @@
-.mrx-alert {
+.mrx-alert.mrx-alert {
   &.color-info{
     background-color: var(--brand-bg-secondary-default);
   }

package/Shared/Styles/myrtex-lib/components/alert/alert.less

@@ -1,4 +1,4 @@
-.mrx-alert {
+.mrx-alert.mrx-alert {
   border-radius: var(--border-radius-1);
   padding: var(--spacing-3) var(--spacing-4);
   position: relative;
@@ -8,7 +8,7 @@
   font-weight: var(--body-md-font-weight);
   line-height: var(--body-md-line-height);
 
-  &-title{
+  .mrx-alert-title {
     display: flex;
     align-items: center;
     font-family: var(--body-lg-bold-font-family);
@@ -17,7 +17,7 @@
     line-height: var(--body-lg-bold-line-height);
   }
 
-  .icon-close{
+  .icon-close {
     position: absolute;
     top: calc(var(--spacing-module) * 2);
     right: calc(var(--spacing-module) * 2);

package/Shared/Styles/myrtex-lib/components/badge/badge-colors.less

@@ -1,4 +1,4 @@
-.mrx-badge {
+.mrx-badge.mrx-badge {
   &.color-success {
     background-color: #ADE8C0;
   }

package/Shared/Styles/myrtex-lib/components/badge/badge-group.less

@@ -1,4 +1,4 @@
-.mrx-badge-group {
+.mrx-badge-group.mrx-badge-group {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;

package/Shared/Styles/myrtex-lib/components/badge/badge-types.less

@@ -1,13 +1,11 @@
-.mrx-badge {
-  &-default {
-
-  }
-  &-button {
+.mrx-badge.mrx-badge {
+  &.mrx-badge-button {
     border: none;
     outline: none;
     cursor: pointer;
   }
-  &-link {
+
+  &.mrx-badge-link {
     text-decoration: none;
     cursor: pointer;
   }

package/Shared/Styles/myrtex-lib/components/badge/badge.less

@@ -1,4 +1,4 @@
-.mrx-badge {
+.mrx-badge.mrx-badge {
   display: block;
   padding: 4px 8px;
   border-radius: 4px;

package/Shared/Styles/myrtex-lib/components/breadcrumbs/breadcrumbs.less

@@ -1,5 +1,5 @@
-.mrx-breadcrumbs {
-  &__link {
+.mrx-breadcrumbs.mrx-breadcrumbs {
+  .mrx-breadcrumbs__link {
     display: flex;
     align-items: center;
     color: var(--Main2);
@@ -9,7 +9,7 @@
     }
   }
 
-  &__list {
+  .mrx-breadcrumbs__list {
     display: flex;
     align-items: center;
     justify-content: flex-start;

package/Shared/Styles/myrtex-lib/components/button/button-colors.less

@@ -1,5 +1,5 @@
 // Цвет кнопок
-.mrx-btn {
+.mrx-btn.mrx-btn {
   &.mrx-btn-primary {
     &.green {
       background-color: var(--system-bg-controls-positive-default);

package/Shared/Styles/myrtex-lib/components/button/button-disabled.less

@@ -1,5 +1,5 @@
 // disabled нкнопка
-.mrx-btn {
+.mrx-btn.mrx-btn {
   &.disabled,
   &:disabled,
   &[disabled="disabled"],

package/Shared/Styles/myrtex-lib/components/button/button-icon-loading.less

@@ -1,4 +1,4 @@
-.mrx-btn {
+.mrx-btn.mrx-btn {
   &.icon-loading {
     svg {
       transform: rotate(-40deg);

package/Shared/Styles/myrtex-lib/components/button/button-primary.less

@@ -1,48 +1,50 @@
-.mrx-btn-primary {
-  border: 1px solid var(--brand-bg-primary-default);
-  background-color: var(--brand-bg-primary-default);
-  color: var(--neutral-text-inverse);
-
-  &:hover, &.active  {
-    background-color: var(--brand-bg-primary-hover);
-    border-color: var(--brand-bg-primary-hover);
-  }
-
-  .mrx-icon {
+.mrx-btn.mrx-btn {
+  &.mrx-btn-primary {
+    border: 1px solid var(--brand-bg-primary-default);
+    background-color: var(--brand-bg-primary-default);
     color: var(--neutral-text-inverse);
-  }
-
-  svg:not(.icon-loading) {
-    &.fill {
-      path {
-        fill: var(--neutral-text-inverse);
-      }
-
-      circle {
-        fill: var(--neutral-text-inverse);
-      }
-
-      &-rect {
-        rect {
+  
+    &:hover, &.active  {
+      background-color: var(--brand-bg-primary-hover);
+      border-color: var(--brand-bg-primary-hover);
+    }
+  
+    .mrx-icon {
+      color: var(--neutral-text-inverse);
+    }
+  
+    svg:not(.icon-loading) {
+      &.fill {
+        path {
           fill: var(--neutral-text-inverse);
         }
+  
+        circle {
+          fill: var(--neutral-text-inverse);
+        }
+  
+        &-rect {
+          rect {
+            fill: var(--neutral-text-inverse);
+          }
+        }
       }
-    }
-
-    &.stroke {
-      path {
-        stroke: transparent;
-        fill: var(--neutral-text-inverse);
-      }
-
-      circle {
-        stroke: var(--neutral-text-inverse);
-      }
-
-      &-rect {
-        rect {
+  
+      &.stroke {
+        path {
+          stroke: transparent;
+          fill: var(--neutral-text-inverse);
+        }
+  
+        circle {
           stroke: var(--neutral-text-inverse);
         }
+  
+        &-rect {
+          rect {
+            stroke: var(--neutral-text-inverse);
+          }
+        }
       }
     }
   }

package/Shared/Styles/myrtex-lib/components/button/button-secondary.less

@@ -1,159 +1,161 @@
-.mrx-btn-secondary {
-  background-color: transparent;
-  border: 1px solid var(--brand-bg-primary-default);
-  color: var(--brand-text-controls-default);
-
-  &:not(.red, .green, .yellow) {
-    .icon-loading {
-      path {
-        stroke: var(--brand-text-controls-default);
-      }
-
-      circle {
-        stroke: var(--brand-text-controls-default);
-      }
-    }
-
-    .mrx-icon {
-      color: var(--brand-text-controls-default);
-    }
-
-    svg:not(.icon-loading) {
-      &.fill {
+.mrx-btn.mrx-btn {
+  &.mrx-btn-secondary {
+    background-color: transparent;
+    border: 1px solid var(--brand-bg-primary-default);
+    color: var(--brand-text-controls-default);
+  
+    &:not(.red, .green, .yellow) {
+      .icon-loading {
         path {
-          fill: var(--brand-text-controls-default);
+          stroke: var(--brand-text-controls-default);
         }
-
+  
         circle {
-          fill: var(--brand-text-controls-default);
+          stroke: var(--brand-text-controls-default);
         }
-
-        &-rect {
-          rect {
+      }
+  
+      .mrx-icon {
+        color: var(--brand-text-controls-default);
+      }
+  
+      svg:not(.icon-loading) {
+        &.fill {
+          path {
             fill: var(--brand-text-controls-default);
           }
+  
+          circle {
+            fill: var(--brand-text-controls-default);
+          }
+  
+          &-rect {
+            rect {
+              fill: var(--brand-text-controls-default);
+            }
+          }
         }
-      }
-
-      &.stroke {
-        path {
-          stroke: var(--brand-text-controls-default);
-        }
-
-        circle {
-          stroke: var(--brand-text-controls-default);
-        }
-
-        &-rect {
-          rect {
+  
+        &.stroke {
+          path {
+            stroke: var(--brand-text-controls-default);
+          }
+  
+          circle {
             stroke: var(--brand-text-controls-default);
           }
+  
+          &-rect {
+            rect {
+              stroke: var(--brand-text-controls-default);
+            }
+          }
         }
       }
     }
-  }
-
-  &.red {
-    .icon-loading {
-      path {
-        stroke: var(--system-bg-controls-negative-default);
-      }
-
-      circle {
-        stroke: var(--system-bg-controls-negative-default);
-      }
-    }
-
-    .mrx-icon {
-      color: var(--system-bg-controls-negative-default);
-    }
-  }
-
-  &.green {
-    .icon-loading {
-      path {
-        stroke: var(--system-bg-controls-positive-default);
+  
+    &.red {
+      .icon-loading {
+        path {
+          stroke: var(--system-bg-controls-negative-default);
+        }
+  
+        circle {
+          stroke: var(--system-bg-controls-negative-default);
+        }
       }
-
-      circle {
-        stroke: var(--system-bg-controls-positive-default);
+  
+      .mrx-icon {
+        color: var(--system-bg-controls-negative-default);
       }
     }
-
-    .mrx-icon {
-      color: var(--system-bg-controls-positive-default);
-    }
-  }
-
-  &.yellow {
-    .icon-loading {
-      path {
-        stroke: var(--Orange);
+  
+    &.green {
+      .icon-loading {
+        path {
+          stroke: var(--system-bg-controls-positive-default);
+        }
+  
+        circle {
+          stroke: var(--system-bg-controls-positive-default);
+        }
       }
-
-      circle {
-        stroke: var(--Orange);
+  
+      .mrx-icon {
+        color: var(--system-bg-controls-positive-default);
       }
     }
-
-    .mrx-icon {
-      color: var(--Orange);
-    }
-  }
-
-  &:hover, &.active  {
-    background-color: var(--brand-bg-tertiary-hover);
-    border-color: var(--brand-bg-primary-default);
-    color: var(--brand-text-controls-hover);
-
-    &:not(.red, .green, .yellow) {
+  
+    &.yellow {
       .icon-loading {
         path {
-          stroke: var(--brand-text-controls-hover);
+          stroke: var(--Orange);
         }
-
+  
         circle {
-          stroke: var(--brand-text-controls-hover);
+          stroke: var(--Orange);
         }
       }
-
+  
       .mrx-icon {
-        color: var(--brand-text-controls-hover);
+        color: var(--Orange);
       }
-
-      svg:not(.icon-loading) {
-        &.fill {
+    }
+  
+    &:hover, &.active  {
+      background-color: var(--brand-bg-tertiary-hover);
+      border-color: var(--brand-bg-primary-default);
+      color: var(--brand-text-controls-hover);
+  
+      &:not(.red, .green, .yellow) {
+        .icon-loading {
           path {
-            fill: var(--brand-text-controls-hover);
+            stroke: var(--brand-text-controls-hover);
           }
-
+  
           circle {
-            fill: var(--brand-text-controls-hover);
+            stroke: var(--brand-text-controls-hover);
           }
-
-          &-rect {
-            rect {
+        }
+  
+        .mrx-icon {
+          color: var(--brand-text-controls-hover);
+        }
+  
+        svg:not(.icon-loading) {
+          &.fill {
+            path {
               fill: var(--brand-text-controls-hover);
             }
+  
+            circle {
+              fill: var(--brand-text-controls-hover);
+            }
+  
+            &-rect {
+              rect {
+                fill: var(--brand-text-controls-hover);
+              }
+            }
           }
-        }
-
-        &.stroke {
-          path {
-            stroke: var(--brand-text-controls-hover);
-          }
-
-          circle {
-            stroke: var(--brand-text-controls-hover);
-          }
-
-          &-rect {
-            rect {
+  
+          &.stroke {
+            path {
               stroke: var(--brand-text-controls-hover);
             }
+  
+            circle {
+              stroke: var(--brand-text-controls-hover);
+            }
+  
+            &-rect {
+              rect {
+                stroke: var(--brand-text-controls-hover);
+              }
+            }
           }
         }
       }
     }
-  }
-}
+  }  
+}

package/Shared/Styles/myrtex-lib/components/button/button-sizes.less

@@ -1,5 +1,5 @@
 // Размер кнопок
-.mrx-btn {
+.mrx-btn.mrx-btn {
   &.mrx-btn-lg {
     padding: 0 var(--spacing-6);
     min-height: var(--spacing-12);

package/Shared/Styles/myrtex-lib/components/button/button-tertiary.less

@@ -1,5 +1,5 @@
-.mrx-btn {
-  &-tertiary {
+.mrx-btn.mrx-btn {
+  &.mrx-btn-tertiary {
     background-color: transparent;
     color: var(--brand-text-controls-default);
     border: 1px solid transparent;

package/Shared/Styles/myrtex-lib/components/button/button-with-icon.less

@@ -1,4 +1,4 @@
-.mrx-btn {
+.mrx-btn.mrx-btn {
   &.icon-left, &.icon-right {
     .icon {
       &-wrapper {

package/Shared/Styles/myrtex-lib/components/button/button.less

@@ -1,4 +1,4 @@
-.mrx-btn {
+.mrx-btn.mrx-btn {
   display: inline-flex;
   box-sizing: border-box;
   align-items: center;

package/Shared/Styles/myrtex-lib/components/chars/chars.less

@@ -1,4 +1,4 @@
-.mrx-chars {
+.mrx-chars.mrx-chars {
   position: absolute;
   bottom: 1px;
   right: 7px;

package/Shared/Styles/myrtex-lib/components/checkbox/checkbox-indeterminate.less

@@ -1,33 +1,35 @@
-.mrx-checkbox-indeterminate {
-  .mrx-checkbox__mark {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--sizing-4);
-    width: var(--sizing-4);
-    min-width: var(--sizing-4);
-    border: var(--border-width-checkbox) solid var(--neutral-bg-stroke-default);
-    border-radius: var(--border-radius-1);
-    transition: 0.2s;
-    position: relative;
-
-    &:after {
-      content: '';
-      display: block;
-      width: 6px;
-      height: 2px;
-      background-color: var(--brand-bg-primary-default);
+.mrx-checkbox.mrx-checkbox {
+  &.mrx-checkbox-indeterminate {
+    .mrx-checkbox__mark {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--sizing-4);
+      width: var(--sizing-4);
+      min-width: var(--sizing-4);
+      border: var(--border-width-checkbox) solid var(--neutral-bg-stroke-default);
       border-radius: var(--border-radius-1);
+      transition: 0.2s;
+      position: relative;
+  
+      &:after {
+        content: '';
+        display: block;
+        width: 6px;
+        height: 2px;
+        background-color: var(--brand-bg-primary-default);
+        border-radius: var(--border-radius-1);
+      }
+  
+      &:hover {
+        border-color: var(--brand-bg-primary-default);
+      }
     }
-
+  
     &:hover {
-      border-color: var(--brand-bg-primary-default);
-    }
-  }
-
-  &:hover {
-    .mrx-checkbox__mark {
-      border-color: var(--Main2);
+      .mrx-checkbox__mark {
+        border-color: var(--Main2);
+      }
     }
   }
 }

package/Shared/Styles/myrtex-lib/components/checkbox/checkbox-input.less

@@ -1,4 +1,4 @@
-.mrx-checkbox {
+.mrx-checkbox.mrx-checkbox {
   input[type="checkbox"] {
     min-height: auto;
     position: absolute;

package/Shared/Styles/myrtex-lib/components/checkbox/checkbox-label.less

@@ -1,12 +1,12 @@
-.mrx-checkbox {
-  &__label {
+.mrx-checkbox.mrx-checkbox {
+  .mrx-checkbox__label {
     font-family: var(--body-md-font-family);
     font-size: var(--body-md-font-size);
     font-weight: normal;
     line-height: var(--body-md-line-height);
   }
 
-  &__label--bold {
+  .mrx-checkbox__label--bold {
     font-family: var(--body-md-font-family);
     font-size: var(--body-md-font-size);
     font-weight: 700;

package/Shared/Styles/myrtex-lib/components/checkbox/checkbox-mark.less

@@ -1,5 +1,5 @@
-.mrx-checkbox {
-  &-default:not(.mrx-checkbox-indeterminate) {
+.mrx-checkbox.mrx-checkbox {
+  &.mrx-checkbox-default:not(.mrx-checkbox-indeterminate) {
     .mrx-checkbox__mark {
       display: block;
       height: var(--sizing-4);

package/Shared/Styles/myrtex-lib/components/checkbox/checkbox-wrapper.less

@@ -1,7 +1,5 @@
-.mrx-checkbox {
-  &__wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-  }
+.mrx-checkbox__wrapper.mrx-checkbox__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
 }

package/Shared/Styles/myrtex-lib/components/checkbox/checkbox.less

@@ -1,4 +1,4 @@
-.mrx-checkbox {
+.mrx-checkbox.mrx-checkbox {
   display: flex !important;
   align-items: center;
   min-height: auto !important;

package/Shared/Styles/myrtex-lib/components/datepicker/input-datepicker-error.less

@@ -1,4 +1,4 @@
-.mrx-input-datepicker {
+.mrx-input-datepicker.mrx-input-datepicker {
   &.mrx-input-error {
     .mrx-input-datepicker__input {
       border-color: var(--system-bg-controls-negative-default);

package/Shared/Styles/myrtex-lib/components/datepicker/input-datepicker-icons.less

@@ -1,5 +1,5 @@
-.mrx-input-datepicker {
-  &__icons {
+.mrx-input-datepicker.mrx-input-datepicker {
+  .mrx-input-datepicker__icons {
     position: absolute;
     top: 0;
     right: 0;

package/Shared/Styles/myrtex-lib/components/datepicker/input-datepicker-sizes.less

@@ -1,4 +1,4 @@
-.mrx-input-datepicker {
+.mrx-input-datepicker.mrx-input-datepicker {
   &.mrx-input-datepicker-lg {
     .mrx-input-datepicker__input {
       // 15px = 12px(3 шага отступа) + 2px(половина шага) - 1px(ширина бордера)
@@ -7,10 +7,6 @@
       font-size: var(--body-md-font-size);
       font-weight: var(--body-md-font-weight);
       line-height: var(--body-md-line-height);
-
-      .with-cancel {
-
-      }
     }
   }