@evotor-dev/ui-kit 7.1.0 → 7.2.2

package/styles/variables.scss

@@ -1,140 +1,140 @@
-/* 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; /* Secondary Lighter color*/
-$color-bonus: #C72AAE; /* Bonus color*/
-$color-background-grey: #F4F6F8; /* Background Regular color*/
-$color-background-grey-light: #F9FAFB; /* Background Light color*/
-$color-background-grey-dark: #E1ECEF; /* Background Dark color*/
-$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: #C6C6C6; /* Disabled color*/
-$color-disabled-text: #B0B0B0; /* Disabled Text*/
-$color-disabled-light: #E3E3E3; /* Disabled Light*/
-$color-text: #212121; /* Text color*/
-$color-text-grey: #727272; /* Secondary text color*/
-$color-caption-text: #9B9B9B; /* Caption text color*/
-$color-link: #0986E2; /* Links color*/
-$color-error: #FF1817; /* Error color*/
-$color-danger: #FF6F6F; /* Notification color*/
-$color-white: #FFFFFF; /* White color*/
-$color-white-hover: #FDFDFE;
-$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: #3A9EE8;
-$color-link-active: #0879CB;
-
-$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; /* deprecated, use $color-text */
-$color-background-dark: $color-secondary; /* deprecated, use $color-secondary */
-$color-secondary-2: $color-icon-dark; /* deprecated, use $color-icon-dark */
-$color-text-subscription: $color-caption-text; /* deprecated, use $color-caption-text */
-$color-background-50: $color-background-grey-light; /* deprecated, use $color-background-grey-light */
-$color-grey: $color-background-grey; /* deprecated, use $color-background-grey */
-
-/* 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;
+/* 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; /* Secondary Lighter color*/
+$color-bonus: #C72AAE; /* Bonus color*/
+$color-background-grey: #F4F6F8; /* Background Regular color*/
+$color-background-grey-light: #F9FAFB; /* Background Light color*/
+$color-background-grey-dark: #E1ECEF; /* Background Dark color*/
+$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: #C6C6C6; /* Disabled color*/
+$color-disabled-text: #B0B0B0; /* Disabled Text*/
+$color-disabled-light: #E3E3E3; /* Disabled Light*/
+$color-text: #212121; /* Text color*/
+$color-text-grey: #727272; /* Secondary text color*/
+$color-caption-text: #9B9B9B; /* Caption text color*/
+$color-link: #0986E2; /* Links color*/
+$color-error: #FF1817; /* Error color*/
+$color-danger: #FF6F6F; /* Notification color*/
+$color-white: #FFFFFF; /* White color*/
+$color-white-hover: #FDFDFE;
+$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: #3A9EE8;
+$color-link-active: #0879CB;
+
+$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; /* deprecated, use $color-text */
+$color-background-dark: $color-secondary; /* deprecated, use $color-secondary */
+$color-secondary-2: $color-icon-dark; /* deprecated, use $color-icon-dark */
+$color-text-subscription: $color-caption-text; /* deprecated, use $color-caption-text */
+$color-background-50: $color-background-grey-light; /* deprecated, use $color-background-grey-light */
+$color-grey: $color-background-grey; /* deprecated, use $color-background-grey */
+
+/* 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;