ros.grant.common 2.0.1276 → 2.0.1279

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

@@ -0,0 +1,279 @@
+// Цвет кнопок
+.mrx-btn {
+  &.mrx-btn-primary {
+    &.green {
+      background-color: var(--Green);
+      border-color: var(--Green);
+      color: #fff;
+
+      &:hover {
+        background-color: var(--DarkGreen);
+        border-color: var(--DarkGreen);
+      }
+    }
+
+    &.red {
+      background-color: var(--Red);
+      border-color: var(--Red);
+      color: #fff;
+
+      &:hover {
+        background-color: var(--DarkRed);
+        border-color: var(--DarkRed);
+      }
+    }
+
+    &.blue {
+      background-color: var(--Blue);
+      border-color: var(--Blue);
+      color: #fff;
+
+      &:hover {
+        background-color: var(--DarkBlue);
+        border-color: var(--DarkBlue);
+      }
+    }
+  }
+
+  &.mrx-btn-secondary {
+    &.green {
+      background-color: transparent;
+      border-color: var(--Green);
+      color: var(--Green);
+
+      svg {
+        &.fill {
+          path {
+            fill: var(--Green);
+          }
+
+          circle {
+            fill: var(--Green);
+          }
+
+          &-rect {
+            rect {
+              fill: var(--Green);
+            }
+          }
+        }
+
+        &.stroke {
+          path {
+            stroke: var(--Green);
+          }
+
+          circle {
+            stroke: var(--Green);
+          }
+
+          &-rect {
+            rect {
+              stroke: var(--Green);
+            }
+          }
+        }
+      }
+
+      &:hover, &.active {
+        background-color: var(--Good);
+        color: var(--DarkGreen);
+        border-color: var(--DarkGreen);
+
+        svg {
+          &.fill {
+            path {
+              fill: var(--DarkGreen);
+            }
+
+            circle {
+              fill: var(--DarkGreen);
+            }
+
+            &-rect {
+              rect {
+                fill: var(--DarkGreen);
+              }
+            }
+          }
+
+          &.stroke {
+            path {
+              stroke: var(--DarkGreen);
+            }
+
+            circle {
+              stroke: var(--DarkGreen);
+            }
+
+            &-rect {
+              rect {
+                stroke: var(--DarkGreen);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.red {
+      background-color: transparent;
+      border-color: var(--Red);
+      color: var(--Red);
+
+      svg {
+        &.fill {
+          path {
+            fill: var(--Red);
+          }
+
+          circle {
+            fill: var(--Red);
+          }
+
+          &-rect {
+            rect {
+              fill: var(--Red);
+            }
+          }
+        }
+
+        &.stroke {
+          path {
+            stroke: var(--Red);
+          }
+
+          circle {
+            stroke: var(--Red);
+          }
+
+          &-rect {
+            rect {
+              stroke: var(--Red);
+            }
+          }
+        }
+      }
+
+      &:hover, &.active {
+        background-color: var(--Warning);
+        color: var(--DarkRed);
+        border-color: var(--DarkRed);
+
+        svg {
+          &.fill {
+            path {
+              fill: var(--DarkRed);
+            }
+
+            circle {
+              fill: var(--DarkRed);
+            }
+
+            &-rect {
+              rect {
+                fill: var(--DarkRed);
+              }
+            }
+          }
+
+          &.stroke {
+            path {
+              stroke: var(--DarkRed);
+            }
+
+            circle {
+              stroke: var(--DarkRed);
+            }
+
+            &-rect {
+              rect {
+                stroke: var(--DarkRed);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.blue {
+      background-color: transparent;
+      border-color: var(--Blue);
+      color: var(--Blue);
+
+      svg {
+        &.fill {
+          path {
+            fill: var(--Blue);
+          }
+
+          circle {
+            fill: var(--Blue);
+          }
+
+          &-rect {
+            rect {
+              fill: var(--Blue);
+            }
+          }
+        }
+
+        &.stroke {
+          path {
+            stroke: var(--Blue);
+          }
+
+          circle {
+            stroke: var(--Blue);
+          }
+
+          &-rect {
+            rect {
+              stroke: var(--Blue);
+            }
+          }
+        }
+      }
+
+      &:hover, &.active {
+        background-color: var(--BackgroundBlue);
+        color: var(--DarkBlue);
+        border-color: var(--DarkBlue);
+
+        svg {
+          &.fill {
+            path {
+              fill: var(--DarkBlue);
+            }
+
+            circle {
+              fill: var(--DarkBlue);
+            }
+
+            &-rect {
+              rect {
+                fill: var(--DarkBlue);
+              }
+            }
+          }
+
+          &.stroke {
+            path {
+              stroke: var(--DarkBlue);
+            }
+
+            circle {
+              stroke: var(--DarkBlue);
+            }
+
+            &-rect {
+              rect {
+                stroke: var(--DarkBlue);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+// disabled нкнопка
+.mrx-btn {
+  &.disabled,
+  &:disabled,
+  &[disabled="disabled"],
+  &[disabled] {
+    color: var(--Secondary) !important;
+    cursor: default;
+
+    svg {
+      &.fill {
+        path {
+          fill: var(--Secondary) !important;
+        }
+
+        circle {
+          fill: var(--Secondary) !important;
+        }
+
+        &-rect {
+          rect {
+            fill: var(--Secondary) !important;
+          }
+        }
+      }
+
+      &.stroke {
+        path {
+          stroke: var(--Secondary) !important;
+        }
+
+        circle {
+          stroke: var(--Secondary) !important;
+        }
+
+        &-rect {
+          rect {
+            stroke: var(--Secondary) !important;
+          }
+        }
+      }
+    }
+  }
+
+  &.mrx-btn-primary, &.mrx-btn-secondary {
+    &.disabled,
+    &:disabled,
+    &[disabled="disabled"],
+    &[disabled] {
+      background-color: var(--Disabled) !important;
+      border-color: var(--Disabled) !important;
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+.mrx-btn {
+  &.icon-loading {
+    svg {
+      transform: rotate(-40deg);
+      animation-duration: 1.2s;
+      animation-name: icon-loading;
+      animation-iteration-count: infinite;
+      transition-timing-function: ease-in-out;
+    }
+
+    @keyframes icon-loading {
+      from {
+        transform: rotate(-40deg);
+      }
+
+      to {
+        transform: rotate(320deg);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+.mrx-btn-primary {
+  border: 1px solid var(--Main2);
+  color: #fff;
+  background-color: var(--Main2);
+
+  &:hover, &.active  {
+    background-color: var(--Subsidiary);
+    border-color: var(--Subsidiary);
+  }
+
+  svg {
+    &.fill {
+      path {
+        fill: #fff;
+      }
+
+      circle {
+        fill: #fff;
+      }
+
+      &-rect {
+        rect {
+          fill: #fff;
+        }
+      }
+    }
+
+    &.stroke {
+      path {
+        stroke: #fff;
+      }
+
+      circle {
+        stroke: #fff;
+      }
+
+      &-rect {
+        rect {
+          stroke: #fff;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+.mrx-btn-secondary {
+  background-color: transparent;
+  border: 1px solid var(--Main2);
+  color: var(--Main2);
+
+  svg {
+    &.fill {
+      path {
+        fill: var(--Main2);
+      }
+
+      circle {
+        fill: var(--Main2);
+      }
+
+      &-rect {
+        rect {
+          fill: var(--Main2);
+        }
+      }
+    }
+
+    &.stroke {
+      path {
+        stroke: var(--Main2);
+      }
+
+      circle {
+        stroke: var(--Main2);
+      }
+
+      &-rect {
+        rect {
+          stroke: var(--Main2);
+        }
+      }
+    }
+  }
+
+  &:hover, &.active  {
+    background-color: var(--Subsidiary);
+    color: #fff;
+    border-color: var(--Subsidiary);
+
+    svg {
+      &.fill {
+        path {
+          fill: #fff;
+        }
+
+        circle {
+          fill: #fff;
+        }
+
+        &-rect {
+          rect {
+            fill: #fff;
+          }
+        }
+      }
+
+      &.stroke {
+        path {
+          stroke: #fff;
+        }
+
+        circle {
+          stroke: #fff;
+        }
+
+        &-rect {
+          rect {
+            stroke: #fff;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+// Размер кнопок
+.mrx-btn {
+  &.mrx-btn-lg {
+    padding: 0 24px;
+    min-height: 48px;
+    font-size: 16px;
+    line-height: 20px;
+    min-width: 100px;
+  }
+
+  &.mrx-btn-md {
+    padding: 0 16px;
+    min-height: 40px;
+    font-size: 14px;
+    line-height: 16px;
+    min-width: 80px;
+  }
+
+  &.mrx-btn-sm {
+    padding: 0 12px;
+    min-height: 32px;
+    font-size: 12px;
+    line-height: 16px;
+    min-width: 60px;
+  }
+}

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

@@ -0,0 +1,86 @@
+.mrx-btn {
+  &-tertiary {
+    background-color: transparent;
+    color: var(--Main2);
+    border: none;
+
+    svg {
+      color: red;
+      &.fill {
+        path {
+          fill: var(--Main2);
+          transition: 0.2s;
+        }
+
+        circle {
+          fill: var(--Main2);
+          transition: 0.2s;
+        }
+
+        &-rect {
+          rect {
+            fill: var(--Main2);
+            transition: 0.2s;
+          }
+        }
+      }
+
+      &.stroke {
+        path {
+          stroke: var(--Main2);
+          transition: 0.2s;
+        }
+
+        circle {
+          stroke: var(--Main2);
+          transition: 0.2s;
+        }
+
+        &-rect {
+          rect {
+            stroke: var(--Main2);
+            transition: 0.2s;
+          }
+        }
+      }
+    }
+
+    &:hover, &.active {
+      color: var(--Subsidiary);
+
+      svg {
+        &.fill {
+          path {
+            fill: var(--Subsidiary);
+          }
+
+          circle {
+            fill: var(--Subsidiary);
+          }
+
+          &-rect {
+            rect {
+              fill: var(--Subsidiary);
+            }
+          }
+        }
+
+        &.stroke {
+          path {
+            stroke: var(--Subsidiary);
+          }
+
+          circle {
+            stroke: var(--Subsidiary);
+          }
+
+          &-rect {
+            rect {
+              stroke: var(--Subsidiary);
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+.mrx-btn {
+  &.icon-left, &.icon-right {
+    .icon {
+      &-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+          width: 100%;
+        }
+      }
+    }
+
+    &.mrx-btn-lg {
+      .icon-wrapper {
+        width: 24px;
+      }
+      &.icon-left .icon-wrapper {
+        margin-right: 8px;
+      }
+      &.icon-right .icon-wrapper {
+        margin-left: 8px;
+      }
+    }
+
+    &.mrx-btn-md {
+      .icon-wrapper {
+        width: 24px;
+      }
+      &.icon-left .icon-wrapper {
+        margin-right: 4px;
+      }
+      &.icon-right .icon-wrapper {
+        margin-left: 4px;
+      }
+    }
+
+    &.mrx-btn-sm {
+      .icon-wrapper {
+        width: 16px;
+      }
+      &.icon-left .icon-wrapper {
+        margin-right: 4px;
+      }
+      &.icon-right .icon-wrapper {
+        margin-left: 4px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+.mrx-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-family: 'PT Sans', sans-serif;
+  font-weight: 700;
+  border-radius: 4px;
+  outline: none;
+  transition: 0.2s;
+  text-align: center;
+  text-decoration: none;
+  min-width: 100px;
+}

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

@@ -0,0 +1,14 @@
+.mrx-checkbox {
+  input[type="checkbox"] {
+    min-height: auto;
+    position: absolute;
+    left: 0;
+    opacity: 0 !important;
+    height: 18px;
+    width: 18px;
+    margin: 0;
+    cursor: pointer;
+    z-index: 2;
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,11 @@
+.mrx-checkbox {
+  &__label {
+    margin-left: 8px;
+    line-height: 1.4;
+    font-weight: normal;
+
+    &--bold {
+      font-weight: bold;
+    }
+  }
+}

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

@@ -0,0 +1,179 @@
+.mrx-checkbox {
+  &-default {
+    .mrx-checkbox__mark {
+      display: block;
+      height: 18px;
+      width: 18px;
+      min-width: 18px;
+      border: 2px solid var(--Stroke);
+      border-radius: 4px;
+      transition: 0.2s;
+      position: relative;
+
+      &:hover {
+        border-color: var(--Main2);
+      }
+    }
+
+    input[type="checkbox"] {
+      &:checked {
+        & + .mrx-checkbox__mark {
+          border-color: var(--Main2);
+          background: var(--Main2);
+
+          &:after {
+            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' width='14' height='14' viewBox='0 0 14 10'%3E%3Cdefs/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12.3334 1.66663L5.00008 8.99996 1.66675 5.66663'/%3E%3C/svg%3E");
+            position: absolute;
+            top: 0;
+            left: 0;
+            line-height: 0;
+          }
+        }
+      }
+
+      &:disabled {
+        & + .mrx-checkbox__mark {
+          border-color: var(--Stroke);
+          background: var(--Stroke);
+        }
+      }
+    }
+
+    &:hover {
+      .mrx-checkbox__mark {
+        border-color: var(--Main2);
+      }
+
+      input[type="checkbox"]:disabled {
+        & + .mrx-checkbox__mark {
+          border-color: var(--Stroke);
+          background: var(--Stroke);
+        }
+      }
+    }
+  }
+
+  &-mark {
+    .mrx-checkbox__mark {
+      display: block;
+      height: 18px;
+      width: 18px;
+      min-width: 18px;
+      border: 2px solid var(--Stroke);
+      border-radius: 4px;
+      transition: 0.2s;
+      position: relative;
+
+      &:hover {
+        border-color: var(--Main2);
+      }
+    }
+
+    input[type="checkbox"] {
+      &:checked {
+        & + .mrx-checkbox__mark {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &:after {
+            content: '';
+            display: block;
+            width: 10px;
+            height: 10px;
+            background-color: var(--Main2);
+            border-radius: 2px;
+          }
+        }
+      }
+
+      &:disabled {
+        & + .mrx-checkbox__mark {
+          border-color: var(--Stroke);
+
+          &:after {
+            background-color: var(--Stroke);
+          }
+        }
+      }
+    }
+
+    &:hover {
+      .mrx-checkbox__mark {
+        border-color: var(--Main2);
+      }
+
+      input[type="checkbox"]:disabled {
+        & + .mrx-checkbox__mark {
+          border-color: var(--Stroke);
+
+          &:after {
+            background-color: var(--Stroke);
+          }
+        }
+      }
+    }
+  }
+
+  &-indeterminate {
+    .mrx-checkbox__mark {
+      display: block;
+      height: 18px;
+      width: 18px;
+      min-width: 18px;
+      border: 2px solid var(--Stroke);
+      border-radius: 4px;
+      transition: 0.2s;
+      position: relative;
+
+      &:hover {
+        border-color: var(--Main2);
+      }
+    }
+
+    input[type="checkbox"] {
+      &:checked {
+        & + .mrx-checkbox__mark {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          &:after {
+            content: '';
+            display: block;
+            width: 6px;
+            height: 2px;
+            background-color: var(--Main2);
+            border-radius: 2px;
+          }
+        }
+      }
+
+      &:disabled {
+        & + .mrx-checkbox__mark {
+          border-color: var(--Stroke);
+
+          &:after {
+            background-color: var(--Stroke);
+          }
+        }
+      }
+    }
+
+    &:hover {
+      .mrx-checkbox__mark {
+        border-color: var(--Main2);
+      }
+
+      input[type="checkbox"]:disabled {
+        & + .mrx-checkbox__mark {
+          border-color: var(--Stroke);
+
+          &:after {
+            background-color: var(--Stroke);
+          }
+        }
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,15 @@
+.mrx-checkbox {
+  overflow: visible;
+  background-color: transparent;
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+
+  // legacy
+  display: flex !important;
+  min-height: auto !important;
+  font-size: 14px !important;
+  line-height: 120% !important;
+  font-weight: bold !important;
+  margin-bottom: 0 !important;
+}

package/Shared/Styles/myrtex-lib/tooltip/tooltip-trigger-right.less

@@ -0,0 +1,33 @@
+.mrx-tooltip-trigger {
+  &.trigger-right {
+    .tooltip-help {
+      font-size: 12px;
+      letter-spacing: -0.363636px;
+      line-height: 1;
+      font-weight: normal;
+      white-space: nowrap;
+      width: 0;
+      transition: .2s;
+      overflow: hidden;
+      color: var(--Main1);
+      z-index: 1;
+    }
+
+    &:hover {
+      .tooltip-help {
+        width: 120px;
+        padding: 0 5px;
+      }
+    }
+
+    @media screen and (max-width: 991px) {
+      background: var(--TooltipBG);
+
+      .tooltip-help {
+        width: 120px;
+        padding: 0 5px;
+      }
+    }
+  }
+
+}

package/Shared/Styles/myrtex-lib/tooltip/tooltip-trigger-top.less

@@ -0,0 +1,51 @@
+.mrx-tooltip-trigger {
+  &.trigger-top {
+    position: relative;
+    width: 22px;
+
+    &::after {
+      content: "";
+      width: 22px;
+      height: 22px;
+      background: transparent;
+      position: absolute;
+      top: 0;
+      left: 0;
+      transition: 0.2s;
+      border-radius: 100%;
+    }
+
+    .tooltip-help {
+      font-size: 12px;
+      letter-spacing: -0.363636px;
+      line-height: 1;
+      width: auto;
+      position: absolute;
+      left: 50%;
+      text-align: center;
+      opacity: 0;
+      visibility: hidden;
+      transform: translateX(-50%);
+      top: -25px;
+      padding: 3px 5px !important;
+      background: var(--TooltipBG);
+      box-shadow: 0px 4px 10px rgba(58, 58, 58, 0.15);
+      border-radius: 4px;
+      z-index: 1;
+    }
+
+    &:hover {
+      background: transparent;
+
+      &::after {
+        background: var(--TooltipBG);
+      }
+
+      .tooltip-help {
+        width: 140px;
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+}

package/Shared/Styles/myrtex-lib/tooltip/tooltip-trigger.less

@@ -0,0 +1,26 @@
+.mrx-tooltip-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-left: 2px;
+  cursor: pointer;
+  padding: 3px;
+  border-radius: 30px;
+
+  svg {
+    min-width: 16px;
+    width: 16px;
+    height: 16px;
+    z-index: 2;
+  }
+
+  &:hover {
+    background: var(--TooltipBG);
+    width: 140px;
+
+    .tooltip-help {
+      width: 120px;
+      padding: 0 5px;
+    }
+  }
+}

package/Shared/Styles/myrtex-lib/tooltip/tooltip.less

@@ -0,0 +1,16 @@
+.mrx-tooltip-content {
+  margin-top: 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 140%;
+  padding: 8px 16px;
+  margin-bottom: 6px;
+  background: var(--TooltipBG);
+  overflow: hidden;
+  font-weight: normal;
+  color: var(--Main1);
+
+  @media screen and (max-width: 567px) {
+    padding: 8px 10px;
+  }
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.1276",
+  "version": "2.0.1279",
   "name": "ros.grant.common",
   "private": false,
   "scripts": {