@epam/assets 4.2.2 → 4.2.3

package/build/scss/promo/typography.scss

@@ -0,0 +1,194 @@
+@use 'colors' as *;
+@use 'fonts' as *;
+
+@mixin overflow-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@mixin typography-header() {
+    :global(.hero-header), h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
+
+    :global(.hero-header) {
+        font-family: $font-museo-slab;
+        margin: 30px 0;
+        font-size: 66px;
+        line-height: 72px;
+    }
+
+    :global(.hero-header), :global(.promo-header) {
+        color: $gray90;
+        text-align: center;
+    }
+
+    :global(.promo-header), h1, h2, h3 {
+        font-family: $font-museo-sans;
+    }
+
+    :global(.promo-header) {
+        text-transform: uppercase;
+    }
+
+    h4, h5, h6 {
+        font-family: $font-sans-semibold;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        margin-bottom: 0.5em;
+        margin-top: 1.2em;
+        line-height: 1.35em;
+    }
+
+    h1 {
+        font-size: 36px;
+    }
+
+    h2 {
+        font-size: 30px;
+        letter-spacing: 0.1px;
+
+        &:global(.promo-header) {
+            letter-spacing: 2px;
+        }
+    }
+
+    h3 {
+        font-size: 24px;
+    }
+
+    h4 {
+        font-size: 18px;
+        letter-spacing: 0.1px;
+    }
+
+    h5 {
+        font-size: 16px;
+    }
+
+    h6 {
+        font-size: 14px;
+    }
+}
+
+@mixin typography-inline() {
+    b, strong {
+        font-family: $font-sans-semibold;
+    }
+
+    i, em {
+        font-family: $font-sans-italic;
+    }
+
+    a {
+        display: inline-flex;
+        align-items: center;
+        color: $blue;
+
+        &:visited {
+            color: #5214CC;
+
+            &:hover {
+                color: #3F0F9E;
+            }
+        }
+
+        &:hover {
+            text-decoration: underline;
+            color: $blue-dark;
+        }
+    }
+
+    code {
+        padding: 0.125em 0.25em;
+        color: $gray80;
+        background-color: $gray30;
+        font-family: $font-roboto-mono;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+}
+
+@mixin typography-block() {
+    ol, ul {
+        padding: 0;
+    }
+
+    li {
+        margin-left: 1.25em;
+        line-height: 1.5;
+    }
+
+    pre {
+        padding: 1.25em;
+        color: $gray10;
+        background-color: $gray70;
+        font-family: monospace;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    figure {
+        margin: 0;
+
+        figcaption {
+            font-size: 0.9em;
+            opacity: 0.9;
+            text-align: center;
+        }
+    }
+
+    p {
+        margin: 0.5em 0;
+        line-height: 1.5;
+    }
+}
+
+@mixin typography-12() {
+    font-size: 12px;
+}
+
+@mixin typography-14() {
+    font-size: 14px;
+}
+
+@mixin typography-16() {
+    font-size: 16px;
+}
+
+:local(.typography-header) {
+    @include typography-header();
+}
+
+:local(.typography-block) {
+    @include typography-block();
+}
+
+:local(.typography-inline) {
+    @include typography-inline();
+}
+
+:local(.typography-16) {
+    @include typography-16();
+}
+
+:local(.typography-14) {
+    @include typography-14();
+}
+
+:local(.typography-12) {
+    @include typography-12();
+}
+
+:local(.typography-promo) {
+    font-family: $font-sans;
+    color: $gray80;
+    composes: typography-header;
+    composes: typography-block;
+    composes: typography-inline;
+}

package/build/scss/text-size.scss

@@ -0,0 +1,37 @@
+@function vpadding($size, $border-width) {
+    @if ($size == 18px or $size == 24px) {
+        @return (3px - $border-width);
+    } @else if ($size == 30px) {
+        @return (6px - $border-width);
+    } @else if ($size == 36px or $size == 42px) {
+        @return (9px - $border-width);
+    } @else if ($size == 48px) {
+        @return (12px - $border-width);
+    }
+
+    @return (null);
+}
+
+@mixin text-size($size, $border-width: 0) {
+    @if ($size == 18px) {
+        line-height: 12px;
+        font-size: 10px;
+    } @else if ($size == 24px) {
+        line-height: 18px;
+        font-size: 12px;
+    } @else if ($size == 30px) {
+        line-height: 18px;
+        font-size: 14px;
+    } @else if ($size == 36px) {
+        line-height: 18px;
+        font-size: 14px;
+    } @else if ($size == 42px) {
+        line-height: 24px;
+        font-size: 16px;
+    } @else if ($size == 48px) {
+        line-height: 24px;
+        font-size: 16px;
+    }
+    padding-top: vpadding($size, $border-width);
+    padding-bottom: vpadding($size, $border-width);
+}

package/build/scss/typography.scss

@@ -0,0 +1,172 @@
+@use 'loveship-colors' as *;
+@use 'fonts' as *;
+
+@mixin overflow-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@mixin typography-header() {
+    :global(.hero-header), h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
+
+    :global(.hero-header), h2 {
+        font-family: $font-sans-bold;
+    }
+
+    :global(.hero-header) {
+        margin: 30px 0;
+        font-size: 72px;
+        line-height: 72px;
+    }
+
+    h3, h4, h5, h6 {
+        font-family: $font-sans-semibold;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        margin-bottom: 0.5em;
+        margin-top: 1.2em;
+        line-height: 1.35em;
+    }
+
+    h1 {
+        font-size: 42px;
+    }
+
+    h2 {
+        font-size: 30px;
+    }
+
+    h3 {
+        font-size: 24px;
+    }
+
+    h4 {
+        font-size: 18px;
+    }
+
+    h5 {
+        font-size: 16px;
+    }
+
+    h6 {
+        font-size: 14px;
+    }
+}
+
+@mixin typography-inline() {
+    b, strong {
+        font-family: $font-sans-semibold;
+    }
+
+    i, em {
+        font-family: $font-sans-italic;
+    }
+
+    a {
+        display: inline-flex;
+        align-items: center;
+        color: $sky;
+
+        &:hover {
+            text-decoration: none;
+            color: darken($sky, 10%);
+        }
+    }
+
+    code {
+        padding: 0.125em 0.25em;
+        color: $night50;
+        background-color: $night700;
+        border-radius: 3px;
+        font-family: monospace;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+}
+
+@mixin typography-block() {
+    ol, ul {
+        padding: 0;
+    }
+
+    li {
+        margin-left: 1.25em;
+        line-height: 1.5;
+    }
+
+    pre {
+        padding: 1.25em;
+        color: $night50;
+        background-color: $night700;
+        border-radius: 3px;
+        font-family: monospace;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    figure {
+        margin: 0;
+
+        figcaption {
+            font-size: 0.9em;
+            opacity: 0.9;
+            text-align: center;
+        }
+    }
+
+    p {
+        margin: 0.5em 0;
+        line-height: 1.5;
+    }
+}
+
+@mixin typography-12() {
+    font-size: 12px;
+}
+
+@mixin typography-14() {
+    font-size: 14px;
+}
+
+@mixin typography-16() {
+    font-size: 16px;
+}
+
+:local(.typography-header) {
+    @include typography-header();
+}
+
+:local(.typography-block) {
+    @include typography-block();
+}
+
+:local(.typography-inline) {
+    @include typography-inline();
+}
+
+:local(.typography-16) {
+    @include typography-16();
+}
+
+:local(.typography-14) {
+    @include typography-14();
+}
+
+:local(.typography-12) {
+    @include typography-12();
+}
+
+:local(.typography-loveship) {
+    font-family: $font-sans;
+    color: $night700;
+    composes: typography-header;
+    composes: typography-block;
+    composes: typography-inline;
+}

package/build/styles/error-pages.less

@@ -0,0 +1,68 @@
+@import (reference) '~@epam/assets/less/index.less';
+
+.epam-error {
+    background-color: @gray4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+
+}
+
+.epam-error-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 36px;
+
+    &__message-main {
+        font-family: @font-oswald;
+        font-size: 32px;
+        line-height: 32px;
+        text-transform: uppercase;
+        color: @graphite;
+        padding-top: 24px;
+        text-align: center;
+
+    }
+
+    &__message-secondary {
+        font-family: @font-sans;
+        font-size: 15px;
+        line-height: 18px;
+        color: @graphite;
+        padding-top: 12px;
+        text-align: center;
+
+    }
+
+    &__contact-us {
+        font-family: @font-sans;
+        font-size: 15px;
+        line-height: 18px;
+        color: @gray40;
+        padding-top: 36px;
+
+        a {
+            color: @blue;
+            text-decoration: none;
+
+            &:hover {
+                color: #25a4b8;
+            }
+        }
+    }
+
+    &__image {
+        max-height: 430px;
+        max-width: 100%;
+        width: 430px;
+
+        &--big {
+            max-height: 430px;
+            max-width: 100%;
+            width: 760px;
+        }
+    }
+}

package/build/styles/index.less

@@ -0,0 +1,2 @@
+@import './menu.less';
+@import './error-pages.less';