@epam/assets 5.0.0-alpha.3 → 5.0.0

package/less/text-size.less

@@ -1,49 +0,0 @@
-.text-size(@size, @border-width: 0px) {
-    & when (@size = 18) {
-        @vpadding: 3px - @border-width;
-        padding-top: @vpadding;
-        padding-bottom: @vpadding;
-        line-height: 12px;
-        font-size: 10px;
-    }
-
-    & when (@size = 24) {
-        @vpadding: 3px - @border-width;
-        padding-top: @vpadding;
-        padding-bottom: @vpadding;
-        line-height: 18px;
-        font-size: 12px;
-    }
-
-    & when (@size = 30) {
-        @vpadding: 6px - @border-width;
-        padding-top: @vpadding;
-        padding-bottom: @vpadding;
-        line-height: 18px;
-        font-size: 14px;
-    }
-
-    & when (@size = 36) {
-        @vpadding: 9px - @border-width;
-        padding-top: @vpadding;
-        padding-bottom: @vpadding;
-        line-height: 18px;
-        font-size: 14px;
-    }
-
-    & when (@size = 42) {
-        @vpadding: 9px - @border-width;
-        padding-top: @vpadding;
-        padding-bottom: @vpadding;
-        line-height: 24px;
-        font-size: 16px;
-    }
-
-    & when (@size = 48) {
-        @vpadding: 12px - @border-width;
-        padding-top: @vpadding;
-        padding-bottom: @vpadding;
-        line-height: 24px;
-        font-size: 16px;
-    }
-}

package/less/typography.less

@@ -1,196 +0,0 @@
-@import './loveship-colors.less';
-@import './fonts.less';
-
-.overflow-ellipsis() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.typography-header() {
-    :global(.hero-header), h1, h2, h3, h4, h5, h6 {
-        margin: 0;
-    }
-
-    :global(.hero-header), h2 {
-        font-family: @font-sans-bold;
-    }
-
-    h3, h4, h5, h6 {
-        font-family: @font-sans-semibold;
-    }
-
-    h4, h5, h6 {
-        margin: 12px 0;
-        line-height: 24px;
-    }
-
-    :global(.hero-header) {
-        margin: 30px 0;
-        font-size: 72px;
-        line-height: 72px;
-    }
-
-    h1 {
-        margin: 24px 0;
-        font-size: 42px;
-        line-height: 48px;
-    }
-
-    h2 {
-        margin: 18px 0;
-        font-size: 30px;
-        line-height: 36px;
-    }
-
-    h3 {
-        margin: 12px 0;
-        font-size: 24px;
-        line-height: 30px;
-    }
-
-    h4 {
-        font-size: 18px;
-    }
-
-    h5 {
-        font-size: 16px;
-    }
-
-    h6 {
-        font-size: 14px;
-    }
-}
-
-.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 {
-        margin: 0 4px;
-        padding: 2px 4px;
-        color: @night50;
-        background-color: @night700;
-        border-radius: 3px;
-        font-family: @font-roboto-mono;
-        white-space: pre-wrap;
-        word-wrap: normal;
-    }
-}
-
-.typography-block() {
-    p {
-        margin: 12px 0;
-    }
-
-    ol, ul {
-        padding: 0;
-        margin-block-start: 0;
-        margin-block-end: 0;
-
-        ol, ul {
-            margin-left: 18px;
-        }
-    }
-
-    li {
-        // padding-top: 3px;
-        // padding-bottom: 3px;
-    }
-
-    ul li {
-        margin-left: 18px;
-    }
-
-    ol li {
-        margin-left: 14px;
-    }
-
-    pre {
-        margin: 12px 0;
-        padding: 12px 18px;
-        color: @night50;
-        background-color: @night700;
-        border-radius: 3px;
-        font-family: monospace;
-        white-space: pre-wrap;
-        word-wrap: normal;
-    }
-
-    figure {
-        margin: 12px 0;
-    }
-}
-
-.typography-12() {
-    font-size: 12px;
-    line-height: 18px;
-
-    b, strong {
-        color: @night900;
-    }
-
-    p {
-        margin: 6px 0;
-    }
-}
-
-.typography-14() {
-    font-size: 14px;
-    line-height: 24px;
-}
-
-.typography-16() {
-    font-size: 16px;
-    line-height: 24px;
-}
-
-:local(.typography-header) {
-    .typography-header();
-}
-
-:local(.typography-block) {
-    .typography-block();
-}
-
-:local(.typography-inline) {
-    .typography-inline();
-}
-
-:local(.typography-16) {
-    .typography-16();
-}
-
-:local(.typography-14) {
-    .typography-14();
-}
-
-:local(.typography-12) {
-    .typography-12();
-}
-
-:local(.typography-loveship) {
-    font-family: @font-sans;
-    color: @night700;
-    composes: typography-header;
-    composes: typography-block;
-    composes: typography-inline;
-}
-
-
-

package/scss/contrast.scss

@@ -1,39 +0,0 @@
-@use 'sass:math';
-
-@function pow($base, $exponent) {
-    $result: 1;
-    @for $_ from 1 through $exponent {
-        $result: $result * $base;
-    }
-
-    @return $result;
-}
-
-@function de-gamma($n) {
-    @if $n <= 0.03928 {
-        @return math.div($n, 12.92);
-    } @else {
-        @return pow(math.div(($n + 0.055), 1.055), 2);
-    }
-}
-
-@function brightness($c) {
-    $rlin: de-gamma(math.div(red($c), 255));
-    $glin: de-gamma(math.div(green($c), 255));
-    $blin: de-gamma(math.div(blue($c), 255));
-    @return (0.2126 * $rlin + 0.7152 * $glin + 0.0722 * $blin) * 100;
-}
-
-@function contrast($color, $dark: #000000, $light: #FFFFFF) {
-    @if $color == null {
-        @return null;
-    }
-
-    @else {
-        $color-brightness: brightness($color);
-        $light-text-brightness: brightness($light);
-        $dark-text-brightness: brightness($dark);
-
-        @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
-    }
-}

package/scss/control-layout.scss

@@ -1,2 +0,0 @@
-$panel-border-radius: 6px;
-$control-border-radius: 3px;

package/scss/control-mods.scss

@@ -1,42 +0,0 @@
-@use './effects' as *;
-@use './loveship-color-vars' as *;
-@use './control-layout' as *;
-
-@mixin control-form-mode() {
-    background-color: $white;
-    border-color: $night200;
-    border-style: solid;
-    border-radius: $control-border-radius;
-
-    &:hover {
-        border-color: $night200;
-    }
-
-    &:global(.uui-focus) {
-        @include control-focus-effect($sky);
-        border-color: darken($sky, 10%);
-    }
-}
-
-@mixin control-inline-mode() {
-    background-color: transparent;
-    border-color: transparent;
-    border-style: solid;
-    border-radius: $control-border-radius;
-
-    &:hover {
-        border-color: $night200;
-    }
-
-    &:global(.uui-focus) {
-        @include control-focus-effect($sky);
-        border-color: darken($sky, 10%);
-    }
-}
-
-@mixin control-cell-mode() {
-    background-color: transparent;
-    border-color: transparent;
-    border-style: solid;
-    border-radius: 0;
-}

package/scss/control-size.scss

@@ -1,7 +0,0 @@
-@use 'sass:math';
-@mixin control-size($size, $borderWidth) {
-    $padding: math.div($size, 6) - $borderWidth;
-    min-width: $size;
-    padding-left: $padding;
-    padding-right: $padding;
-}

package/scss/dnd.scss

@@ -1,9 +0,0 @@
-@mixin dnd-cursor-style {
-    &:hover {
-        cursor: grab;
-    }
-
-    &:active {
-        cursor: grabbing;
-    }
-}

package/scss/effects.scss

@@ -1,25 +0,0 @@
-@mixin panel-shadow() { box-shadow: 0 1px 3px 0 rgba(51, 51, 51, 0.2); }
-
-@mixin panel-top-shadow() { box-shadow: inset 0 10px 5px -10px rgba(51, 51, 51, 0.2); }
-
-@mixin button-focus-shadow() { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); }
-
-@mixin dnd-ghost-shadow() { box-shadow: 0 1px 3px 0 rgba(51, 51, 51, 0.2); }
-
-@mixin control-focus-effect($name) { box-shadow: 0 0 0 2px fade-out($name, 0.6); }
-
-$scroll-shadow-size: 10px;
-$scroll-shadow-opacity: 0.2;
-
-@mixin scroll-shadow-base() {
-    position: absolute;
-}
-
-@mixin scroll-shadow-top() {
-    @include scroll-shadow-base();
-    top: 0;
-    left: 0;
-    right: 0;
-    height: $scroll-shadow-size;
-    background: 'linear-gradient(to bottom, rgba(0, 0, 0, #{$scroll-shadow-opacity}) 0%, rgba(0, 0, 0, 0) 100%)';
-}

package/scss/globals.scss

@@ -1,9 +0,0 @@
-@import './font-faces';
-@import '~normalize.css/normalize.css';
-@import './loveship-colors';
-
-@each $name, $value in $loveship-epam-colors {
-    :global(.ls-color-#{"" + $name}) {
-        color: $value;
-    }
-}

package/scss/loveship-color-vars.scss

@@ -1,183 +0,0 @@
-@use './loveship-colors' as colors;
-@use './contrast' as *;
-
-// Colors
-.color-sky {
-    --uui-color-500: #E1F4FA;
-    --uui-color-600: #C4EAF5;
-    --uui-color-700: #009ECC;
-    --uui-color-800: #008ABD;
-    --uui-color-900: #0079AD;
-    --uui-contrast-color-700: #{contrast(#009ECC, colors.$night700, white)};
-}
-
-.color-grass {
-    --uui-color-500: #EBF3D8;
-    --uui-color-600: #D6E6B2;
-    --uui-color-700: #67A300;
-    --uui-color-800: #558A00;
-    --uui-color-900: #428024;
-    --uui-contrast-color-700: #{contrast(#67A300, colors.$night700, white)};
-}
-
-.color-sun {
-    --uui-color-500: #FFEDC9;
-    --uui-color-600: #FFDD96;
-    --uui-color-700: #FCAA00;
-    --uui-color-800: #F67E00;
-    --uui-color-900: #E64C00;
-    --uui-contrast-color-700: #{contrast(#FCAA00, colors.$night700, white)};
-}
-
-.color-fire {
-    --uui-color-500: #FDE1E1;
-    --uui-color-600: #FCC8C8;
-    --uui-color-700: #FA4B4B;
-    --uui-color-800: #CC2929;
-    --uui-color-900: #B32424;
-    --uui-contrast-color-700: #{contrast(#FA4B4B, colors.$night700, white)};
-}
-
-.color-carbon {
-    --uui-color-500: #6C6E7A;
-    --uui-color-600: #4F515C;
-    --uui-color-700: #3D404D;
-    --uui-color-800: #272933;
-    --uui-color-900: #17181F;
-    --uui-contrast-color-700: #{contrast(#3D404D, colors.$night700, white)};
-}
-
-.color-night {
-    --uui-color-500: #ACAFBF;
-    --uui-color-600: #6C6F80;
-    --uui-color-700: #474A59;
-    --uui-color-800: #303240;
-    --uui-color-900: #1D1E26;
-    --uui-contrast-color-700: #{contrast(#474A59, colors.$night700, white)};
-}
-
-.color-cobalt {
-    --uui-color-500: #32B2FB;
-    --uui-color-600: #2196F3;
-    --uui-color-700: #0E74E2;
-    --uui-color-800: #0453C7;
-    --uui-color-900: #003399;
-    --uui-contrast-color-700: #{contrast(#0E74E2, colors.$night700, white)};
-}
-
-.color-lavanda {
-    --uui-color-500: #6362C9;
-    --uui-color-600: #3F51B5;
-    --uui-color-700: #2E3A9D;
-    --uui-color-800: #21288D;
-    --uui-color-900: #191980;
-    --uui-contrast-color-700: #{contrast(#2E3A9D, colors.$night700, white)};
-}
-
-.color-fuchsia {
-    --uui-color-500: #F5527B;
-    --uui-color-600: #E91E63;
-    --uui-color-700: #CD0053;
-    --uui-color-800: #B00052;
-    --uui-color-900: #94004C;
-    --uui-contrast-color-700: #{contrast(#CD0053, colors.$night700, white)};
-}
-
-.color-white {
-    --uui-color-500: #{lighten(colors.$white, 20%)};
-    --uui-color-600: #{lighten(colors.$white, 10%)};
-    --uui-color-700: #{colors.$white};
-    --uui-color-800: #{darken(colors.$white, 10%)};
-    --uui-color-900: #{darken(colors.$white, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$white, colors.$night700, white)};
-}
-
-.color-night50 {
-    --uui-color-500: #{lighten(colors.$night50, 20%)};
-    --uui-color-600: #{lighten(colors.$night50, 10%)};
-    --uui-color-700: #{colors.$night50};
-    --uui-color-800: #{darken(colors.$night50, 10%)};
-    --uui-color-900: #{darken(colors.$night50, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night50, colors.$night700, white)};
-}
-
-.color-night100 {
-    --uui-color-500: #{lighten(colors.$night100, 20%)};
-    --uui-color-600: #{lighten(colors.$night100, 10%)};
-    --uui-color-700: #{colors.$night100};
-    --uui-color-800: #{darken(colors.$night100, 10%)};
-    --uui-color-900: #{darken(colors.$night100, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night100, colors.$night700, white)};
-}
-
-.color-night200 {
-    --uui-color-500: #{lighten(colors.$night200, 20%)};
-    --uui-color-600: #{lighten(colors.$night200, 10%)};
-    --uui-color-700: #{colors.$night200};
-    --uui-color-800: #{darken(colors.$night200, 10%)};
-    --uui-color-900: #{darken(colors.$night200, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night200, colors.$night700, white)};
-}
-
-.color-night300 {
-    --uui-color-500: #{lighten(colors.$night300, 20%)};
-    --uui-color-600: #{lighten(colors.$night300, 10%)};
-    --uui-color-700: #{colors.$night300};
-    --uui-color-800: #{darken(colors.$night300, 10%)};
-    --uui-color-900: #{darken(colors.$night300, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night300, colors.$night700, white)};
-}
-
-.color-night400 {
-    --uui-color-500: #{lighten(colors.$night400, 20%)};
-    --uui-color-600: #{lighten(colors.$night400, 10%)};
-    --uui-color-700: #{colors.$night400};
-    --uui-color-800: #{darken(colors.$night400, 10%)};
-    --uui-color-900: #{darken(colors.$night400, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night400, colors.$night700, white)};
-}
-
-.color-night500 {
-    --uui-color-500: #{lighten(colors.$night500, 20%)};
-    --uui-color-600: #{lighten(colors.$night500, 10%)};
-    --uui-color-700: #{colors.$night500};
-    --uui-color-800: #{darken(colors.$night500, 10%)};
-    --uui-color-900: #{darken(colors.$night500, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night500, colors.$night700, white)};
-}
-
-.color-night600 {
-    --uui-color-500: #{lighten(colors.$night600, 20%)};
-    --uui-color-600: #{lighten(colors.$night600, 10%)};
-    --uui-color-700: #{colors.$night600};
-    --uui-color-800: #{darken(colors.$night600, 10%)};
-    --uui-color-900: #{darken(colors.$night600, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night600, colors.$night700, white)};
-}
-
-.color-night700 {
-    --uui-color-500: #{lighten(colors.$night700, 20%)};
-    --uui-color-600: #{lighten(colors.$night700, 10%)};
-    --uui-color-700: #{colors.$night700};
-    --uui-color-800: #{darken(colors.$night700, 10%)};
-    --uui-color-900: #{darken(colors.$night700, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night700, colors.$night700, white)};
-}
-
-.color-night800 {
-    --uui-color-500: #{lighten(colors.$night800, 20%)};
-    --uui-color-600: #{lighten(colors.$night800, 10%)};
-    --uui-color-700: #{colors.$night800};
-    --uui-color-800: #{darken(colors.$night800, 10%)};
-    --uui-color-900: #{darken(colors.$night800, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night700, colors.$night800, white)};
-}
-
-.color-night900 {
-    --uui-color-500: #{lighten(colors.$night900, 20%)};
-    --uui-color-600: #{lighten(colors.$night900, 10%)};
-    --uui-color-700: #{colors.$night900};
-    --uui-color-800: #{darken(colors.$night900, 10%)};
-    --uui-color-900: #{darken(colors.$night900, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night900, colors.$night700, white)};
-}

package/scss/text-size.scss

@@ -1,37 +0,0 @@
-@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/styles/error-pages.less

@@ -1,68 +0,0 @@
-@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/styles/index.less

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