@evotor-dev/ui-kit 6.0.1 → 6.1.1

package/styles/mixins.scss

@@ -1,208 +1,208 @@
-@import 'variables.scss';
-
-/* @include clearfix();*/
-@mixin clearfix() {
-    &:after {
-        content: '';
-        display: block;
-        clear: both;
-    }
-}
-
-/* @include clear-ul();*/
-@mixin clear-ul() {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-/* @include clear-btn();*/
-@mixin clear-btn() {
-    padding: 0;
-    overflow: visible;
-    color: inherit;
-    font: inherit;
-    line-height: inherit;
-    background: none;
-    border: 0;
-    -webkit-appearance: none;
-    user-select: none;
-
-    &::-moz-focus-inner {
-        padding: 0;
-        border: 0;
-    }
-}
-
-@mixin media-mobile {
-    @media (max-width: #{$media-tablet - 1}) {
-        @content;
-    }
-}
-
-/* media mixins - mobile first*/
-@mixin media-tablet {
-    @media (min-width: #{$media-tablet}) {
-        @content;
-    }
-}
-
-@mixin media-desktop-s {
-    @media (min-width: #{$media-desktop-s}) {
-        @content;
-    }
-}
-
-@mixin media-desktop-m {
-    @media (min-width: #{$media-desktop-m}) {
-        @content;
-    }
-}
-
-@mixin media-desktop-l {
-    @media (min-width: #{$media-desktop-l}) {
-        @content;
-    }
-}
-
-@mixin media-desktop-xl {
-    @media (min-width: #{$media-desktop-xl}) {
-        @content;
-    }
-}
-
-/*title mixins*/
-@mixin title {
-    color: #333F48;
-    font-weight: 700;
-    font-family: $font-secondary;
-}
-
-@mixin h1 {
-    font-size: 30px;
-    line-height: 38px;
-
-    @include media-desktop-s {
-        font-size: 36px;
-        line-height: 44px;
-    }
-}
-
-@mixin h2 {
-    font-size: 24px;
-    line-height: 32px;
-
-    @include media-desktop-s {
-        font-size: 30px;
-        line-height: 38px;
-    }
-}
-
-@mixin h3 {
-    font-size: 18px;
-    line-height: 26px;
-
-    @include media-desktop-s {
-        font-size: 24px;
-        line-height: 32px;
-    }
-}
-
-@mixin h4 {
-    font-size: 14px;
-    line-height: 22px;
-
-    @include media-desktop-s {
-        font-size: 18px;
-        line-height: 26px;
-    }
-}
-
-
-/**
- * @deprecated
- */
-@mixin input {
-    @include evo-input(normal, default);
-}
-
-/**
- * size: normal | small
- * theme: default | rounded
- */
-@mixin evo-input($size: normal, $theme: default) {
-    --evo-input-height: 48px;
-    --evo-input-border-radius: 4px;
-
-    @if ($size == small) {
-        @if ($theme == default) {
-            --evo-input-height: 32px;
-        } @else if ($theme == rounded) {
-            --evo-input-height: 40px;
-        }
-    }
-
-    @if ($theme == rounded) {
-        --evo-input-border-radius: 256px;
-    }
-
-    display: flex;
-    align-items: center;
-    height: var(--evo-input-height);
-    color: $color-text;
-    font-weight: normal;
-    font-size: 16px;
-    font-family: $font;
-    white-space: nowrap;
-    background-color: $color-white;
-    border: 1px solid $color-disabled;
-    border-radius: var(--evo-input-border-radius);
-    outline: none;
-    transition: color .3s, box-shadow .3s, background .3s, border .3s;
-}
-
-@mixin evo-input-focused {
-    border: solid 1px $color-secondary-lighter;
-}
-
-@mixin evo-input-disabled {
-    color: $color-text-subscription;
-    background-color: $color-background-grey !important;
-    cursor: default;
-    pointer-events: none;
-}
-
-/**
- * @deprecated
- */
-@mixin evo-input-valid {
-}
-
-@mixin evo-input-invalid {
-    border-color: $color-error !important;
-}
-
-@mixin evo-control-states {
-    $self: &;
-
-    &_focused {
-        @include evo-input-focused;
-    }
-
-    &_disabled {
-        @include evo-input-disabled;
-    }
-
-    &_invalid {
-        @include evo-input-invalid;
-    }
-}
-
-@mixin hide-scroll {
-    -ms-overflow-style: none;  /* Internet Explorer 10+ */
-    scrollbar-width: none;  /* Firefox */
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
+@import 'variables.scss';
+
+/* @include clearfix();*/
+@mixin clearfix() {
+    &:after {
+        content: '';
+        display: block;
+        clear: both;
+    }
+}
+
+/* @include clear-ul();*/
+@mixin clear-ul() {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* @include clear-btn();*/
+@mixin clear-btn() {
+    padding: 0;
+    overflow: visible;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
+    background: none;
+    border: 0;
+    -webkit-appearance: none;
+    user-select: none;
+
+    &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
+    }
+}
+
+@mixin media-mobile {
+    @media (max-width: #{$media-tablet - 1}) {
+        @content;
+    }
+}
+
+/* media mixins - mobile first*/
+@mixin media-tablet {
+    @media (min-width: #{$media-tablet}) {
+        @content;
+    }
+}
+
+@mixin media-desktop-s {
+    @media (min-width: #{$media-desktop-s}) {
+        @content;
+    }
+}
+
+@mixin media-desktop-m {
+    @media (min-width: #{$media-desktop-m}) {
+        @content;
+    }
+}
+
+@mixin media-desktop-l {
+    @media (min-width: #{$media-desktop-l}) {
+        @content;
+    }
+}
+
+@mixin media-desktop-xl {
+    @media (min-width: #{$media-desktop-xl}) {
+        @content;
+    }
+}
+
+/*title mixins*/
+@mixin title {
+    color: #333F48;
+    font-weight: 700;
+    font-family: $font-secondary;
+}
+
+@mixin h1 {
+    font-size: 30px;
+    line-height: 38px;
+
+    @include media-desktop-s {
+        font-size: 36px;
+        line-height: 44px;
+    }
+}
+
+@mixin h2 {
+    font-size: 24px;
+    line-height: 32px;
+
+    @include media-desktop-s {
+        font-size: 30px;
+        line-height: 38px;
+    }
+}
+
+@mixin h3 {
+    font-size: 18px;
+    line-height: 26px;
+
+    @include media-desktop-s {
+        font-size: 24px;
+        line-height: 32px;
+    }
+}
+
+@mixin h4 {
+    font-size: 14px;
+    line-height: 22px;
+
+    @include media-desktop-s {
+        font-size: 18px;
+        line-height: 26px;
+    }
+}
+
+
+/**
+ * @deprecated
+ */
+@mixin input {
+    @include evo-input(normal, default);
+}
+
+/**
+ * size: normal | small
+ * theme: default | rounded
+ */
+@mixin evo-input($size: normal, $theme: default) {
+    --evo-input-height: 48px;
+    --evo-input-border-radius: 4px;
+
+    @if ($size == small) {
+        @if ($theme == default) {
+            --evo-input-height: 32px;
+        } @else if ($theme == rounded) {
+            --evo-input-height: 40px;
+        }
+    }
+
+    @if ($theme == rounded) {
+        --evo-input-border-radius: 256px;
+    }
+
+    display: flex;
+    align-items: center;
+    height: var(--evo-input-height);
+    color: $color-text;
+    font-weight: normal;
+    font-size: 16px;
+    font-family: $font;
+    white-space: nowrap;
+    background-color: $color-white;
+    border: 1px solid $color-disabled;
+    border-radius: var(--evo-input-border-radius);
+    outline: none;
+    transition: color .3s, box-shadow .3s, background .3s, border .3s;
+}
+
+@mixin evo-input-focused {
+    border: solid 1px $color-secondary-lighter;
+}
+
+@mixin evo-input-disabled {
+    color: $color-text-subscription;
+    background-color: $color-background-grey !important;
+    cursor: default;
+    pointer-events: none;
+}
+
+/**
+ * @deprecated
+ */
+@mixin evo-input-valid {
+}
+
+@mixin evo-input-invalid {
+    border-color: $color-error !important;
+}
+
+@mixin evo-control-states {
+    $self: &;
+
+    &_focused {
+        @include evo-input-focused;
+    }
+
+    &_disabled {
+        @include evo-input-disabled;
+    }
+
+    &_invalid {
+        @include evo-input-invalid;
+    }
+}
+
+@mixin hide-scroll {
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+    scrollbar-width: none;  /* Firefox */
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}