@evotor-dev/ui-kit 6.1.1 → 6.3.0

package/styles/components/evo-form.scss

@@ -1,273 +1,273 @@
-@import "../mixins";
-
-$evo-form-gap-hor: 24px;
-$evo-form-gap-ver: 32px;
-$evo-form-min-field-width: 100px;
-
-.evo-form-popover {
-    display: inline-block;
-    flex: 0 0 16px;
-    width: 16px;
-    height: 16px;
-    margin-left: 8px;
-    color: $color-text;
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 22px;
-
-    evo-icon {
-        display: block;
-        width: inherit;
-        height: inherit;
-        fill: $color-icon-dark;
-    }
-}
-
-.evo-form-col {
-    @media (max-width: $media-mobile) {
-        &:not(&_multi) {
-            flex: 0 1 auto;
-        }
-
-        &:not(&_size-1):not(&_size-2) {
-            width: 100%;
-            max-width: 100%;
-        }
-    }
-
-    &__static-value {
-        display: block;
-        font-size: 16px;
-        line-height: 24px;
-    }
-
-    /**
-     Use it in case if you need to wrap several controls into single column.
-
-     You can use single .evo-form__note for these wrapped controls.
-
-     Example:
-
-     <div class="evo-form-col evo-form-col_size-6">
-        <div class="evo-form-col evo-form-col_multi">
-            <evo-control-label class="evo-form-col evo-form-col_size-3" label="Электронная почта">
-                <evo-input></evo-input>
-            </evo-control-label>
-            <evo-control-label class="evo-form-col evo-form-col_size-3" label="Повторите электронную почту">
-                <evo-input></evo-input>
-            </evo-control-label>
-        </div>
-        <div class="evo-form__note">На указанную почту будут отправлены данные для работы c системой Goods</div>
-    </div>
-
-     */
-    &_multi {
-        display: flex;
-        flex: 1 1;
-        flex-flow: row wrap;
-        margin: (-$evo-form-gap-ver) (-$evo-form-gap-hor) 0 0;
-
-        .evo-form-col {
-            margin: ($evo-form-gap-ver) ($evo-form-gap-hor) 0 0;
-        }
-
-        @media (max-width: $media-mobile) {
-            flex-flow: column nowrap;
-        }
-    }
-
-    /* minimal control size*/
-    &_size-1 {
-        flex: 0 0 $evo-form-min-field-width;
-        min-width: $evo-form-min-field-width;
-        max-width: $evo-form-min-field-width;
-    }
-
-    /* 2-col field*/
-    &_size-2 {
-        flex: 0 0 196px;
-        max-width: 196px;
-    }
-
-    /* 3-col field*/
-    &_size-3 {
-        flex: 0 1 306px;
-        max-width: 308px;
-    }
-
-    /* 4-col field*/
-    &_size-4 {
-        flex: 0 1 416px;
-        max-width: 418px;
-    }
-
-    /* 5-col field*/
-    &_size-5 {
-        flex: 0 1 526px;
-        max-width: 526px;
-    }
-
-    /* 6-col field*/
-    &_size-6 {
-        flex: 0 1 636px;
-        max-width: 636px;
-    }
-
-    /* 7-col field*/
-    &_size-7 {
-        flex: 0 1 746px;
-        max-width: 746px;
-    }
-
-    /* 8-col field, maximal*/
-    &_size-8 {
-        flex: 0 1 856px;
-        max-width: 856px;
-    }
-
-    &_size-shrink {
-        flex: 0 1;
-    }
-
-    &_size-grow {
-        flex: 1 1;
-    }
-}
-
-.evo-form-row {
-    position: relative;
-    display: flex;
-    flex-flow: row wrap;
-
-    @media (max-width: $media-mobile) {
-        flex-flow: column nowrap;
-    }
-
-    .evo-form-col:not(.evo-form-col_multi) {
-        margin: ($evo-form-gap-ver) ($evo-form-gap-hor) 0 0;
-
-        @media (max-width: $media-mobile) {
-            margin: ($evo-form-gap-ver) 0 0 0;
-        }
-    }
-}
-
-.evo-form-section {
-    display: flex;
-    flex-direction: column;
-
-    &__title {
-        display: flex;
-        align-items: center;
-        @include h2();
-        margin-bottom: 24px;
-        font-weight: 700;
-
-        .evo-form-popover {
-            flex: 0 0 24px;
-            width: 24px;
-            height: 24px;
-            margin-left: 16px;
-        }
-    }
-
-    &__subtitle {
-        @include h4();
-        margin-bottom: 16px;
-        font-weight: 700;
-    }
-
-    .evo-form-row {
-        margin: (-$evo-form-gap-ver) (-$evo-form-gap-hor) 0 0;
-
-        @media (max-width: $media-mobile) {
-            margin: (-$evo-form-gap-ver) 0 0 0;
-        }
-    }
-
-    .evo-form-row + .evo-form-row {
-        margin-top: 0;
-    }
-
-    &_actions {
-        display: block;
-        padding-top: 0;
-        padding-bottom: $evo-form-gap-ver;
-        border-top: solid 1px $color-disabled;
-
-        .evo-form-row, .evo-form-col {
-            margin: 0;
-        }
-
-        .evo-form-row + .evo-form-row {
-            margin-top: $evo-form-gap-ver;
-        }
-
-        .evo-form__note {
-            margin: 0;
-        }
-
-        .evo-form__button {
-            margin-top: $evo-form-gap-ver;
-            margin-right: $evo-form-gap-hor;
-
-            &_end {
-                margin-right: 0;
-                margin-left: auto;
-            }
-
-            @media (max-width: $media-mobile) {
-                margin: $evo-form-gap-ver 0 0 0;
-            }
-        }
-    }
-
-    .evo-form-row + &__subtitle {
-        margin-top: $evo-form-gap-ver;
-    }
-}
-
-.evo-form {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 40px;
-
-    .evo-form-section + .evo-form-section {
-        margin-top: 64px;
-    }
-
-    &__note {
-        width: 100%;
-        margin-top: 8px;
-        color: $color-text-grey;
-        font-style: italic;
-    }
-
-    &__error-message {
-        align-items: center;
-        color: $color-error;
-        font-style: italic;
-    }
-
-    &__button {
-        margin-top: $evo-form-gap-ver;
-        margin-right: $evo-form-gap-hor;
-
-        &_end {
-            margin-right: 0;
-            margin-left: auto;
-        }
-
-        @media (max-width: $media-mobile) {
-            margin: $evo-form-gap-ver 0 0 0;
-        }
-    }
-
-    evo-control-label {
-        evo-input,
-        evo-select,
-        evo-autocomplete {
-            width: 100%;
-        }
-    }
-}
+@import "../mixins";
+
+$evo-form-gap-hor: 24px;
+$evo-form-gap-ver: 32px;
+$evo-form-min-field-width: 100px;
+
+.evo-form-popover {
+    display: inline-block;
+    flex: 0 0 16px;
+    width: 16px;
+    height: 16px;
+    margin-left: 8px;
+    color: $color-text;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 22px;
+
+    evo-icon {
+        display: block;
+        width: inherit;
+        height: inherit;
+        fill: $color-icon-dark;
+    }
+}
+
+.evo-form-col {
+    @media (max-width: $media-mobile) {
+        &:not(&_multi) {
+            flex: 0 1 auto;
+        }
+
+        &:not(&_size-1):not(&_size-2) {
+            width: 100%;
+            max-width: 100%;
+        }
+    }
+
+    &__static-value {
+        display: block;
+        font-size: 16px;
+        line-height: 24px;
+    }
+
+    /**
+     Use it in case if you need to wrap several controls into single column.
+
+     You can use single .evo-form__note for these wrapped controls.
+
+     Example:
+
+     <div class="evo-form-col evo-form-col_size-6">
+        <div class="evo-form-col evo-form-col_multi">
+            <evo-control-label class="evo-form-col evo-form-col_size-3" label="Электронная почта">
+                <evo-input></evo-input>
+            </evo-control-label>
+            <evo-control-label class="evo-form-col evo-form-col_size-3" label="Повторите электронную почту">
+                <evo-input></evo-input>
+            </evo-control-label>
+        </div>
+        <div class="evo-form__note">На указанную почту будут отправлены данные для работы c системой Goods</div>
+    </div>
+
+     */
+    &_multi {
+        display: flex;
+        flex: 1 1;
+        flex-flow: row wrap;
+        margin: (-$evo-form-gap-ver) (-$evo-form-gap-hor) 0 0;
+
+        .evo-form-col {
+            margin: ($evo-form-gap-ver) ($evo-form-gap-hor) 0 0;
+        }
+
+        @media (max-width: $media-mobile) {
+            flex-flow: column nowrap;
+        }
+    }
+
+    /* minimal control size*/
+    &_size-1 {
+        flex: 0 0 $evo-form-min-field-width;
+        min-width: $evo-form-min-field-width;
+        max-width: $evo-form-min-field-width;
+    }
+
+    /* 2-col field*/
+    &_size-2 {
+        flex: 0 0 196px;
+        max-width: 196px;
+    }
+
+    /* 3-col field*/
+    &_size-3 {
+        flex: 0 1 306px;
+        max-width: 308px;
+    }
+
+    /* 4-col field*/
+    &_size-4 {
+        flex: 0 1 416px;
+        max-width: 418px;
+    }
+
+    /* 5-col field*/
+    &_size-5 {
+        flex: 0 1 526px;
+        max-width: 526px;
+    }
+
+    /* 6-col field*/
+    &_size-6 {
+        flex: 0 1 636px;
+        max-width: 636px;
+    }
+
+    /* 7-col field*/
+    &_size-7 {
+        flex: 0 1 746px;
+        max-width: 746px;
+    }
+
+    /* 8-col field, maximal*/
+    &_size-8 {
+        flex: 0 1 856px;
+        max-width: 856px;
+    }
+
+    &_size-shrink {
+        flex: 0 1;
+    }
+
+    &_size-grow {
+        flex: 1 1;
+    }
+}
+
+.evo-form-row {
+    position: relative;
+    display: flex;
+    flex-flow: row wrap;
+
+    @media (max-width: $media-mobile) {
+        flex-flow: column nowrap;
+    }
+
+    .evo-form-col:not(.evo-form-col_multi) {
+        margin: ($evo-form-gap-ver) ($evo-form-gap-hor) 0 0;
+
+        @media (max-width: $media-mobile) {
+            margin: ($evo-form-gap-ver) 0 0 0;
+        }
+    }
+}
+
+.evo-form-section {
+    display: flex;
+    flex-direction: column;
+
+    &__title {
+        display: flex;
+        align-items: center;
+        @include h2();
+        margin-bottom: 24px;
+        font-weight: 700;
+
+        .evo-form-popover {
+            flex: 0 0 24px;
+            width: 24px;
+            height: 24px;
+            margin-left: 16px;
+        }
+    }
+
+    &__subtitle {
+        @include h4();
+        margin-bottom: 16px;
+        font-weight: 700;
+    }
+
+    .evo-form-row {
+        margin: (-$evo-form-gap-ver) (-$evo-form-gap-hor) 0 0;
+
+        @media (max-width: $media-mobile) {
+            margin: (-$evo-form-gap-ver) 0 0 0;
+        }
+    }
+
+    .evo-form-row + .evo-form-row {
+        margin-top: 0;
+    }
+
+    &_actions {
+        display: block;
+        padding-top: 0;
+        padding-bottom: $evo-form-gap-ver;
+        border-top: solid 1px $color-disabled;
+
+        .evo-form-row, .evo-form-col {
+            margin: 0;
+        }
+
+        .evo-form-row + .evo-form-row {
+            margin-top: $evo-form-gap-ver;
+        }
+
+        .evo-form__note {
+            margin: 0;
+        }
+
+        .evo-form__button {
+            margin-top: $evo-form-gap-ver;
+            margin-right: $evo-form-gap-hor;
+
+            &_end {
+                margin-right: 0;
+                margin-left: auto;
+            }
+
+            @media (max-width: $media-mobile) {
+                margin: $evo-form-gap-ver 0 0 0;
+            }
+        }
+    }
+
+    .evo-form-row + &__subtitle {
+        margin-top: $evo-form-gap-ver;
+    }
+}
+
+.evo-form {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 40px;
+
+    .evo-form-section + .evo-form-section {
+        margin-top: 64px;
+    }
+
+    &__note {
+        width: 100%;
+        margin-top: 8px;
+        color: $color-text-grey;
+        font-style: italic;
+    }
+
+    &__error-message {
+        align-items: center;
+        color: $color-error;
+        font-style: italic;
+    }
+
+    &__button {
+        margin-top: $evo-form-gap-ver;
+        margin-right: $evo-form-gap-hor;
+
+        &_end {
+            margin-right: 0;
+            margin-left: auto;
+        }
+
+        @media (max-width: $media-mobile) {
+            margin: $evo-form-gap-ver 0 0 0;
+        }
+    }
+
+    evo-control-label {
+        evo-input,
+        evo-select,
+        evo-autocomplete {
+            width: 100%;
+        }
+    }
+}

package/styles/components/evo-grid.scss

@@ -1,27 +1,27 @@
-@import "../mixins";
-
-.evo-content {
-    padding: 20px;
-
-    @include media-tablet {
-        padding: 40px;
-    }
-
-    &__header {
-        max-width: 1600px;
-        margin-bottom: 20px;
-
-        @include media-tablet {
-            margin-bottom: 40px;
-        }
-    }
-
-    &__block {
-        max-width: 1600px;
-        margin-bottom: 30px;
-
-        @include media-tablet {
-            margin-bottom: 60px;
-        }
-    }
-}
+@import "../mixins";
+
+.evo-content {
+    padding: 20px;
+
+    @include media-tablet {
+        padding: 40px;
+    }
+
+    &__header {
+        max-width: 1600px;
+        margin-bottom: 20px;
+
+        @include media-tablet {
+            margin-bottom: 40px;
+        }
+    }
+
+    &__block {
+        max-width: 1600px;
+        margin-bottom: 30px;
+
+        @include media-tablet {
+            margin-bottom: 60px;
+        }
+    }
+}

package/styles/components/evo-icon.scss

@@ -1,3 +1,3 @@
-.evo-icon {
-    display: inline-block;
-}
+.evo-icon {
+    display: inline-block;
+}

package/styles/components/evo-link.scss

@@ -1,41 +1,41 @@
-@import "../mixins";
-
-.evo-link {
-    color: $color-link;
-    font-weight: 600;
-    text-decoration: none;
-    border-bottom: 1px solid transparent;
-    transition: color .3s, border-color .3s;
-
-    &:hover {
-        color: $color-link;
-        border-bottom-color: $color-link;
-    }
-
-    &:active {
-        color: $color-link-active;
-    }
-
-    &_dashed {
-        border-bottom: 1px dashed;
-
-        &:hover {
-            text-decoration: none;
-            border-bottom-color: transparent;
-        }
-    }
-
-    &_danger {
-        color: $color-error;
-
-        &:hover {
-            color: $color-error-hover;
-            border-bottom-color: $color-error-hover;
-        }
-
-        &:active {
-            color: $color-error-active;
-            border-bottom-color: $color-error-active;
-        }
-    }
-}
+@import "../mixins";
+
+.evo-link {
+    color: $color-link;
+    font-weight: 600;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: color .3s, border-color .3s;
+
+    &:hover {
+        color: $color-link;
+        border-bottom-color: $color-link;
+    }
+
+    &:active {
+        color: $color-link-active;
+    }
+
+    &_dashed {
+        border-bottom: 1px dashed;
+
+        &:hover {
+            text-decoration: none;
+            border-bottom-color: transparent;
+        }
+    }
+
+    &_danger {
+        color: $color-error;
+
+        &:hover {
+            color: $color-error-hover;
+            border-bottom-color: $color-error-hover;
+        }
+
+        &:active {
+            color: $color-error-active;
+            border-bottom-color: $color-error-active;
+        }
+    }
+}