@evotor-dev/ui-kit 6.0.1

package/styles/normalize.scss

@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+    margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+    margin: 0.67em 0;
+    font-size: 2em;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+    font-size: 1em; /* 2 */
+    font-family: monospace, monospace; /* 1 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+    background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+    border-bottom: none; /* 1 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+    font-size: 1em; /* 2 */
+    font-family: monospace, monospace; /* 1 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+    border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    margin: 0; /* 2 */
+    font-size: 100%; /* 1 */
+    font-family: inherit; /* 1 */
+    line-height: 1.15; /* 1 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+    overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+    text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+    display: table; /* 1 */
+    box-sizing: border-box; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    color: inherit; /* 2 */
+    white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+    vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+    overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+    outline-offset: -2px; /* 2 */
+    -webkit-appearance: textfield; /* 1 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+    font: inherit; /* 2 */
+    -webkit-appearance: button; /* 1 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+    display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+    display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+    display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+    display: none;
+}

package/styles/reset.scss

@@ -0,0 +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;
+}

package/styles/variables.scss

@@ -0,0 +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;