@evotor-dev/ui-kit 6.2.0 → 6.3.0

package/styles/reset.scss

@@ -1,155 +1,155 @@
-@charset "UTF-8";
-@import 'variables.scss';
-
-/* reset
-------------------------------------------------------------------- */
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    outline: none;
-}
-
-html {
-    text-size-adjust: none;
-    overflow-x: hidden; /* for ios*/
-}
-
-html, body {
-    height:auto;
-    min-height:100%;
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-    -webkit-tap-highlight-color: transparent;
-
-    &:hover {
-        text-decoration: none;
-    }
-
-    @media (min-width: 1025px) {
-        &[href^="tel"] {
-            pointer-events: none;
-        }
-    }
-}
-
-li {
-    list-style: none;
-}
-
-p + p {
-    margin-top: 16px;
-}
-
-img {
-    max-width: 100%;
-    max-height: 100%;
-    vertical-align: bottom;
-}
-
-svg:not(:root) {
-    display: inline-flex;
-    max-width: 100%;
-    max-height: 100%;
-    overflow: hidden;
-    pointer-events: none;
-}
-
-[class*="icon--"] {
-    width: 1em;
-    height: 1em;
-    user-select: none;
-    fill: currentColor;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    color: inherit;
-    font-weight: normal;
-}
-
-iframe {
-    vertical-align: bottom;
-    border: 0;
-}
-
-table {
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-textarea {
-    display: inline-block;
-    overflow: auto;
-    vertical-align: bottom;
-    resize: vertical;
-}
-
-textarea,
-[type="url"],
-[type="text"],
-[type="email"],
-[type="search"],
-[type="password"] {
-    vertical-align: bottom;
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-    -webkit-appearance: none;
-}
-
-label,
-[type="radio"],
-[type="submit"],
-[type="checkbox"],
-button:not(:disabled) {
-    cursor: pointer;
-}
-
-button,
-[type="submit"] {
-    color: inherit;
-    font-size: inherit;
-    background: none;
-    border: 0;
-    -webkit-tap-highlight-color: transparent;
-}
-
-::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-}
-
-.readonly,
-[readonly] {
-    pointer-events: none;
-}
-
-.disabled,
-[disabled] {
-    /* opacity: .3;*/
-    pointer-events: none;
-}
-
-::-webkit-search-decoration,
-::-webkit-search-cancel-button,
-::-webkit-search-results-button,
-::-webkit-search-results-decoration {
-    display: none;
-}
-
-label {
-    margin: 0;
-}
-
-textarea, input {
-    background-color: $color-white;
-}
+@charset "UTF-8";
+@import 'variables.scss';
+
+/* reset
+------------------------------------------------------------------- */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    outline: none;
+}
+
+html {
+    text-size-adjust: none;
+    overflow-x: hidden; /* for ios*/
+}
+
+html, body {
+    height:auto;
+    min-height:100%;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover {
+        text-decoration: none;
+    }
+
+    @media (min-width: 1025px) {
+        &[href^="tel"] {
+            pointer-events: none;
+        }
+    }
+}
+
+li {
+    list-style: none;
+}
+
+p + p {
+    margin-top: 16px;
+}
+
+img {
+    max-width: 100%;
+    max-height: 100%;
+    vertical-align: bottom;
+}
+
+svg:not(:root) {
+    display: inline-flex;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+[class*="icon--"] {
+    width: 1em;
+    height: 1em;
+    user-select: none;
+    fill: currentColor;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: inherit;
+    font-weight: normal;
+}
+
+iframe {
+    vertical-align: bottom;
+    border: 0;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+textarea {
+    display: inline-block;
+    overflow: auto;
+    vertical-align: bottom;
+    resize: vertical;
+}
+
+textarea,
+[type="url"],
+[type="text"],
+[type="email"],
+[type="search"],
+[type="password"] {
+    vertical-align: bottom;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    -webkit-appearance: none;
+}
+
+label,
+[type="radio"],
+[type="submit"],
+[type="checkbox"],
+button:not(:disabled) {
+    cursor: pointer;
+}
+
+button,
+[type="submit"] {
+    color: inherit;
+    font-size: inherit;
+    background: none;
+    border: 0;
+    -webkit-tap-highlight-color: transparent;
+}
+
+::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+.readonly,
+[readonly] {
+    pointer-events: none;
+}
+
+.disabled,
+[disabled] {
+    /* opacity: .3;*/
+    pointer-events: none;
+}
+
+::-webkit-search-decoration,
+::-webkit-search-cancel-button,
+::-webkit-search-results-button,
+::-webkit-search-results-decoration {
+    display: none;
+}
+
+label {
+    margin: 0;
+}
+
+textarea, input {
+    background-color: $color-white;
+}

package/styles/variables.scss

@@ -1,137 +1,137 @@
-/* colors*/
-$color-primary: #F05023; /* Primary color*/
-$color-secondary: #231F20; /* Secondary color*/
-$color-success: #21C68B; /* Accent color*/
-$color-secondary-light: #403C3D; /* Secondary color light*/
-$color-secondary-lighter: #74706F;
-$color-bonus: #C72AAE; /* Bonus color*/
-$color-background-grey: #F4F6F8; /* Background color*/
-$color-background-50: #F9FAFB;
-$color-highlight: #FFF8E6; /* Highlight color*/
-$color-rating: #F2C94C; /* Rating color*/
-$color-primary-light: #FF6433; /* Primary color light*/
-$color-icon-light: #BEDCE3; /* Icon color light*/
-$color-icon-dark: #91B1B8; /* Icon color dark*/
-$color-disabled: #D6D6D6; /* Disabled color*/
-$color-text: #212121; /* Text color*/
-$color-text-grey: #727272; /* Secondary text color*/
-$color-caption-text: #9B9B9B; /* Caption text color*/
-$color-link: #2099F1; /* Links color*/
-$color-error: #FF1817; /* Error color*/
-$color-danger: #FF6F6F; /* Notification color*/
-$color-white: #FFFFFF; /* White color*/
-$color-white-hover: #FDFDFE;
-$color-grey: #F4F6F8;
-$color-dark-grey: #494D59;
-$color-black: #000000; /**/
-$color-info: #E6F9FF; /* Note blue*/
-$color-note-success: #E4F8F1; /* Note green*/
-$color-note-error: #FFE8E8; /* Note error*/
-
-$color-primary-hover: #f3734f;
-$color-primary-active: #d8481f;
-
-$color-success-hover: #4dd1a2;
-$color-success-active: #1eb27d;
-
-$color-bonus-hover: #d255bd;
-$color-bonus-active: #b3269d;
-
-$color-link-hover: #4DADF4;
-$color-link-active: #1D8AD9;
-
-$color-error-hover: #ff4645;
-$color-error-active: #E51715;
-
-$color-grey-hover: #F6F8F9;
-$color-grey-active: #DCDDDF;
-
-$color-icon-dark-hover: #a7c1c6;
-$color-icon-dark-active: #829fa6;
-
-$color-graph-1: #EB5365;
-$color-graph-2: #9474C9;
-$color-graph-3: #41B2E5;
-$color-graph-4: #3CCFCF;
-$color-graph-5: #B7CE2C;
-$color-graph-6: #F4D221;
-$color-graph-7: #F0A042;
-$color-graph-8: #F87550;
-$color-graph-9: #847474;
-$color-graph-10: #7A96A5;
-
-/* deprecated*/
-$color-dark: $color-text;
-$color-background-dark: $color-secondary;
-$color-background-dark: $color-secondary;
-$color-secondary-2: $color-icon-dark;
-$color-text-subscription: $color-caption-text;
-
-/* shadows*/
-/* ------------------------------------------------------------*/
-$shadow-1dp: 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.12), 0px 0px 2px rgba(0, 0, 0, 0.14);
-$shadow-2dp: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
-$shadow-4dp: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
-$shadow-8dp: 0px 8px 10px rgba(0, 0, 0, 0.14), 0px 3px 14px rgba(0, 0, 0, 0.12);
-$shadow-16dp: 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14);
-$shadow-soft: 0px 16px 48px rgba(0, 0, 0, 0.02), 0px 12px 32px rgba(0, 0, 0, 0.04), 0px 8px 24px rgba(0, 0, 0, 0.08);
-$shadow-soft-small: 0px 16px 24px rgba(0, 0, 0, 0.02), 0px 6px 16px rgba(0, 0, 0, 0.04), 0px 4px 12px rgba(0, 0, 0, 0.08);
-
-/* fonts*/
-/* ------------------------------------------------------------*/
-$font-fallback: "Helvetica Neue", Arial, sans-serif;
-$font: "Open Sans", $font-fallback;
-$font-secondary: "Ubuntu", $font-fallback;
-
-$font-size: 14px;
-$line-height: 22px;
-
-/* media variables*/
-/* ------------------------------------------------------------*/
-$media-mobile: 500px;
-$media-tablet: 768px;
-$media-desktop-s: 992px;
-$media-desktop-m: 1200px;
-$media-desktop-l: 1680px;
-$media-desktop-xl: 2500px;
-
-/* layout sizes*/
-/* ------------------------------------------------------------*/
-$header-height: 80px;
-$smartappbanner-height: 80px;
-
-/* offsets*/
-/* ------------------------------------------------------------*/
-$distance-large: 40px;
-$distance-medium: 30px;
-$distance-small: 20px;
-$distance-micro: 10px;
-
-/* grid settings*/
-/* ------------------------------------------------------------*/
-$grid-container-max-width-mobile: 100%;
-$grid-container-max-width-tablet: 750px;
-$grid-container-max-width-desktop-s: 970px;
-$grid-container-max-width-desktop-m: 1170px;
-$grid-container-max-width-desktop-l: 1220px;
-$grid-container-max-width-desktop-xl: 1600px;
-
-$grid-container-hor-gap-mobile: 15px;
-$grid-container-hor-gap-tablet: 15px;
-$grid-container-hor-gap-desktop-s: 15px;
-$grid-container-hor-gap-desktop-m: 15px;
-$grid-container-hor-gap-desktop-l: 40px;
-$grid-container-hor-gap-desktop-xl: 40px;
-
-/* applications*/
-/* ------------------------------------------------------------*/
-$app-card-width: 190px;
-$app-card-height: 358px;
-$app-card-hor-gap: 30px;
-$app-card-ver-gap: 20px;
-$app-card-border-radius: 6px;
-
-$app-card-bundle-width: 300px;
-
-$app-card-portrait-width: 290px;
-$app-card-portrait-height: 140px;
+/* colors*/
+$color-primary: #F05023; /* Primary color*/
+$color-secondary: #231F20; /* Secondary color*/
+$color-success: #21C68B; /* Accent color*/
+$color-secondary-light: #403C3D; /* Secondary color light*/
+$color-secondary-lighter: #74706F;
+$color-bonus: #C72AAE; /* Bonus color*/
+$color-background-grey: #F4F6F8; /* Background color*/
+$color-background-50: #F9FAFB;
+$color-highlight: #FFF8E6; /* Highlight color*/
+$color-rating: #F2C94C; /* Rating color*/
+$color-primary-light: #FF6433; /* Primary color light*/
+$color-icon-light: #BEDCE3; /* Icon color light*/
+$color-icon-dark: #91B1B8; /* Icon color dark*/
+$color-disabled: #D6D6D6; /* Disabled color*/
+$color-text: #212121; /* Text color*/
+$color-text-grey: #727272; /* Secondary text color*/
+$color-caption-text: #9B9B9B; /* Caption text color*/
+$color-link: #2099F1; /* Links color*/
+$color-error: #FF1817; /* Error color*/
+$color-danger: #FF6F6F; /* Notification color*/
+$color-white: #FFFFFF; /* White color*/
+$color-white-hover: #FDFDFE;
+$color-grey: #F4F6F8;
+$color-dark-grey: #494D59;
+$color-black: #000000; /**/
+$color-info: #E6F9FF; /* Note blue*/
+$color-note-success: #E4F8F1; /* Note green*/
+$color-note-error: #FFE8E8; /* Note error*/
+
+$color-primary-hover: #f3734f;
+$color-primary-active: #d8481f;
+
+$color-success-hover: #4dd1a2;
+$color-success-active: #1eb27d;
+
+$color-bonus-hover: #d255bd;
+$color-bonus-active: #b3269d;
+
+$color-link-hover: #4DADF4;
+$color-link-active: #1D8AD9;
+
+$color-error-hover: #ff4645;
+$color-error-active: #E51715;
+
+$color-grey-hover: #F6F8F9;
+$color-grey-active: #DCDDDF;
+
+$color-icon-dark-hover: #a7c1c6;
+$color-icon-dark-active: #829fa6;
+
+$color-graph-1: #EB5365;
+$color-graph-2: #9474C9;
+$color-graph-3: #41B2E5;
+$color-graph-4: #3CCFCF;
+$color-graph-5: #B7CE2C;
+$color-graph-6: #F4D221;
+$color-graph-7: #F0A042;
+$color-graph-8: #F87550;
+$color-graph-9: #847474;
+$color-graph-10: #7A96A5;
+
+/* deprecated*/
+$color-dark: $color-text;
+$color-background-dark: $color-secondary;
+$color-background-dark: $color-secondary;
+$color-secondary-2: $color-icon-dark;
+$color-text-subscription: $color-caption-text;
+
+/* shadows*/
+/* ------------------------------------------------------------*/
+$shadow-1dp: 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.12), 0px 0px 2px rgba(0, 0, 0, 0.14);
+$shadow-2dp: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+$shadow-4dp: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+$shadow-8dp: 0px 8px 10px rgba(0, 0, 0, 0.14), 0px 3px 14px rgba(0, 0, 0, 0.12);
+$shadow-16dp: 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14);
+$shadow-soft: 0px 16px 48px rgba(0, 0, 0, 0.02), 0px 12px 32px rgba(0, 0, 0, 0.04), 0px 8px 24px rgba(0, 0, 0, 0.08);
+$shadow-soft-small: 0px 16px 24px rgba(0, 0, 0, 0.02), 0px 6px 16px rgba(0, 0, 0, 0.04), 0px 4px 12px rgba(0, 0, 0, 0.08);
+
+/* fonts*/
+/* ------------------------------------------------------------*/
+$font-fallback: "Helvetica Neue", Arial, sans-serif;
+$font: "Noto Sans", "Open Sans", $font-fallback;
+$font-secondary: "Ubuntu", $font-fallback;
+
+$font-size: 14px;
+$line-height: 22px;
+
+/* media variables*/
+/* ------------------------------------------------------------*/
+$media-mobile: 500px;
+$media-tablet: 768px;
+$media-desktop-s: 992px;
+$media-desktop-m: 1200px;
+$media-desktop-l: 1680px;
+$media-desktop-xl: 2500px;
+
+/* layout sizes*/
+/* ------------------------------------------------------------*/
+$header-height: 80px;
+$smartappbanner-height: 80px;
+
+/* offsets*/
+/* ------------------------------------------------------------*/
+$distance-large: 40px;
+$distance-medium: 30px;
+$distance-small: 20px;
+$distance-micro: 10px;
+
+/* grid settings*/
+/* ------------------------------------------------------------*/
+$grid-container-max-width-mobile: 100%;
+$grid-container-max-width-tablet: 750px;
+$grid-container-max-width-desktop-s: 970px;
+$grid-container-max-width-desktop-m: 1170px;
+$grid-container-max-width-desktop-l: 1220px;
+$grid-container-max-width-desktop-xl: 1600px;
+
+$grid-container-hor-gap-mobile: 15px;
+$grid-container-hor-gap-tablet: 15px;
+$grid-container-hor-gap-desktop-s: 15px;
+$grid-container-hor-gap-desktop-m: 15px;
+$grid-container-hor-gap-desktop-l: 40px;
+$grid-container-hor-gap-desktop-xl: 40px;
+
+/* applications*/
+/* ------------------------------------------------------------*/
+$app-card-width: 190px;
+$app-card-height: 358px;
+$app-card-hor-gap: 30px;
+$app-card-ver-gap: 20px;
+$app-card-border-radius: 6px;
+
+$app-card-bundle-width: 300px;
+
+$app-card-portrait-width: 290px;
+$app-card-portrait-height: 140px;