@loftyshaky/shared-app 1.0.2 → 1.2.0

package/scss/shared/colors.scss

@@ -1,84 +1,90 @@
-.input_item {
-    &.color .label {
-        align-self: normal;
-    }
-
-    .inner_w {
-        position: absolute;
-        height: $color_input_height;
-        align-self: center;
-        order: -1;
-    }
-
-    .visualization_w {
-        display: flex;
-        align-items: center;
-    }
-
-    .visualization {
-        @include border;
-
-        outline: none;
-        margin-right: $input_content_gap;
-        min-width: $color_input_height;
-        height: $color_input_height;
-        cursor: pointer;
-        border-radius: 0;
-    }
-
-    .palette_visualization_w {
-        display: inline-flex;
-        padding: 0;
-        margin-right: $gap;
-        margin-bottom: $gap;
-        cursor: pointer;
-
-        &:nth-child(10),
-        &:nth-child(20),
-        &:nth-child(30) {
-            margin-right: 0;
-        }
-
-        &:nth-child(n + 21) {
-            margin-bottom: 0;
-        }
-    }
-
-    .palette_visualization {
-        @include border;
-
-        outline: none;
-        width: $color_input_height;
-        height: $color_input_height;
-        cursor: pointer;
-        border-radius: 0;
-    }
-
-    .fill_shadow_w {
-        position: absolute;
-        top: $input_content_gap + $input_content_gap;
-        left: 0;
-    }
-
-    .fill_shadow {
-        position: fixed;
-        display: block;
-        visibility: hidden;
-    }
-
-    .palette_w {
-        z-index: 2;
-        position: absolute;
-        top: $input_content_gap + $input_content_gap;
-        left: 0;
-    }
-
-    .palette {
-        @include box_shadow;
-
-        position: fixed;
-        padding: 10px;
-        width: 410px;
-        line-height: 0;
-    }
-}
+$palette_visualization_w_border_offset: 1 * 2;
+
+.input_item {
+    &.color .label_in_input_item {
+        align-self: normal;
+    }
+
+    .inner_w {
+        position: absolute;
+        height: $color_input_height;
+        align-self: center;
+        order: -1;
+    }
+
+    .main_visualization_w {
+        height: fit-content;
+        display: flex;
+        align-self: center;
+    }
+
+    .visualization_w {
+        display: flex;
+        align-items: center;
+        margin-right: $input_content_gap;
+    }
+
+    .visualization {
+        border: 0;
+        outline: none;
+        min-width: $color_input_height;
+        height: $color_input_height;
+        cursor: pointer;
+        border-radius: 0;
+    }
+
+    .palette_visualization_w {
+        display: inline-flex;
+        padding: 0;
+        margin-right: $gap + $palette_visualization_w_border_offset;
+        margin-bottom: $gap + $palette_visualization_w_border_offset;
+        cursor: pointer;
+
+        &:nth-child(10),
+        &:nth-child(20),
+        &:nth-child(30) {
+            margin-right: 0;
+        }
+
+        &:nth-child(n + 21) {
+            margin-bottom: 0;
+        }
+    }
+
+    .palette_visualization {
+        border: 0;
+        outline: none;
+        width: $color_input_height;
+        height: $color_input_height;
+        cursor: pointer;
+        border-radius: 0;
+    }
+
+    .fill_shadow_w {
+        position: absolute;
+        top: $input_content_gap + $input_content_gap;
+        left: 0;
+    }
+
+    .fill_shadow {
+        position: fixed;
+        display: block;
+        visibility: hidden;
+    }
+
+    .palette_w {
+        z-index: 3;
+        position: absolute;
+        top: $input_content_gap + $input_content_gap;
+        left: 0;
+    }
+
+    .palette {
+        @include box_shadow;
+
+        position: fixed;
+        padding: 10px;
+        width: 410px;
+        line-height: 0;
+    }
+}

package/scss/shared/embed/error.scss

@@ -5,8 +5,7 @@
 @import '../mods';
 @import '../text';
 @import '../crash_handler';
-
-$ext_name_offset: 7px;
+@import '../close_btn';
 
 body,
 button {
@@ -28,41 +27,55 @@ button {
 }
 
 .error {
-    .msg {
-        white-space: pre-wrap;
-        text-align: center;
-        padding: 10px;
-        padding-top: 40px;
-    }
+    .body {
+        position: relative;
 
-    .ext_name {
-        position: absolute;
-        top: $ext_name_offset;
-        left: $ext_name_offset;
-    }
+        .top_stuff {
+            display: flex;
+            align-items: start;
 
-    .close_btn {
-        @include btn();
+            .ext_name_and_keep_visible_msg {
+                flex-grow: 1;
+            }
+        }
+    }
 
-        position: absolute;
-        top: $ext_name_offset;
-        right: $ext_name_offset;
+    .progress {
+        appearance: none;
+        display: block;
+        width: 100%;
+        height: 8px;
 
-        &:focus {
-            outline-offset: $outline_offset;
+        &::-webkit-progress-bar {
+            background-color: transparent;
         }
 
-        svg {
-            display: block;
-            fill: white;
-            height: 20px;
-            width: 20px;
+        &::-webkit-progress-value {
+            background-color: #ffe81a;
         }
     }
 
+    .keep_visible_msg {
+        font-size: $font_small;
+        margin-left: $ext_name_offset;
+        margin-top: 2px;
+    }
+
+    .msg {
+        white-space: pre-wrap;
+        text-align: center;
+        padding: 10px;
+        padding-top: 12px;
+    }
+
+    .ext_name {
+        margin-top: $ext_name_offset;
+        margin-left: $ext_name_offset;
+    }
+
     .more_info_btn {
-        @include btn();
-        @include outline_solid();
+        @include btn;
+        @include outline_solid;
 
         outline-color: white;
         background-color: transparent;
@@ -86,7 +99,11 @@ button {
         outline-color: $black;
     }
 
-    &.is_notification {
+    &.positive {
+        background-color: #40af49;
+    }
+
+    &.neutral {
         background-color: #4d94ea;
     }
 

package/scss/shared/embed/font_face.scss

@@ -1,5 +1,4 @@
 @font-face {
     font-family: 'u6Pgzb39sNF';
-    src: url('../../../fonts/noto_sans.woff2')
-        format('woff2');
+    src: url('../../../fonts/NotoSans-Regular.ttf') format('truetype');
 }

package/scss/shared/focus.scss

@@ -1,6 +1,9 @@
 /* stylelint-disable no-descending-specificity, selector-class-pattern */
 
 $text_input_outline_size: 20px;
+$text_input_outline_offset: 4px;
+$outline_offset_1: 2px;
+$outline_offset_2: 3px;
 
 .input_item .pcr-interaction input:focus {
     box-shadow: none !important;
@@ -20,8 +23,7 @@ $text_input_outline_size: 20px;
 .input_item .pcr-result:focus,
 .keyboard .input_item .color_picker_w input:not(.pcr-result):focus,
 .keyboard .btn.text_input:focus::before,
-body.keyboard .btn.text:focus,
-.keyboard .btn.icon:focus,
+.keyboard .icon_btn:focus,
 .keyboard .input_item .checkbox .box:focus,
 .keyboard .link:focus,
 .keyboard .link_btn:focus,
@@ -31,34 +33,38 @@ body.keyboard .btn.text:focus,
     @include outline_solid_thick;
 }
 
+body.keyboard .btn.text:focus {
+    @include outline_solid_thick;
+}
+
 .keyboard .input_item .pcr-palette:focus,
 .keyboard .input_item .pcr-slider:focus,
 .keyboard .link:focus,
 .keyboard .link_btn:focus,
 .keyboard .help_btn:focus,
-.keyboard .btn.icon:focus,
+.keyboard .icon_btn:focus,
 .keyboard .input_item.range .input.is_in_focus_state {
-    outline-offset: $outline_offset;
+    outline-offset: $outline_offset_1;
 }
 
 .input_item .palette_visualization_w.selected:not(.opened) .palette_visualization {
     @include outline_solid_thick;
 
-    outline-offset: $outline_offset;
+    outline-offset: $outline_offset_2;
 }
 
 .input_item .visualization_w.opened .visualization,
 .input_item .palette_visualization_w.opened .palette_visualization {
     @include outline_dashed_thick;
 
-    outline-offset: $outline_offset;
+    outline-offset: $outline_offset_2;
 }
 
 .keyboard .input_item .visualization_w .visualization:focus,
 .keyboard .input_item .palette_visualization_w .palette_visualization:focus {
     @include outline_solid_thick;
 
-    outline-offset: $outline_offset;
+    outline-offset: $outline_offset_2;
 }
 
 .keyboard .input_item .visualization_w.opened .visualization:focus,
@@ -71,8 +77,8 @@ body.keyboard .btn.text:focus,
     position: absolute;
     width: $text_input_outline_size;
     height: $text_input_outline_size;
-    top: 4px;
-    left: -2px;
+    top: $text_input_outline_offset;
+    right: $text_input_outline_offset;
 }
 
 .reload_ui_btn_w .keyboard .btn:focus {

package/scss/shared/functions.scss

@@ -0,0 +1,5 @@
+@function two_color_gradient($color_1, $color_2) {
+    $result: linear-gradient(97deg, $color_1, $color_2);
+
+    @return $result;
+}

package/scss/shared/help.scss

@@ -1,10 +1,6 @@
 .help,
 .color_help {
-    max-width: 700px;
-    font-size: $font_small;
-    margin: 0;
-    margin-top: $gap_small;
-    white-space: pre-wrap;
+    @include folding_text;
 }
 
 .help_btn {
@@ -61,6 +57,8 @@
 
         .help_btn {
             margin-top: 5px;
+            display: inline-block;
+            height: max-content;
         }
     }
 }

package/scss/shared/index.scss

@@ -2,10 +2,12 @@
 @import '~@simonwep/pickr/dist/themes/monolith.min.css';
 @import 'vars';
 @import 'mixins';
+@import 'functions';
 @import 'themes/general/light_theme';
 @import 'all';
 @import 'btns';
 @import 'checkboxes';
+@import 'close_btn';
 @import 'color_pickers';
 @import 'colors';
 @import 'crash_handler';
@@ -14,11 +16,13 @@
 @import 'hr';
 @import 'group';
 @import 'help';
+@import 'input_error';
 @import 'input_btns';
 @import 'inputs';
 @import 'inset_border';
 @import 'link_btns';
 @import 'links';
+@import 'main';
 @import 'mods';
 @import 'range';
 @import 'scrollbar';
@@ -27,3 +31,4 @@
 @import 'textareas';
 @import 'transitions';
 @import 'upload_box';
+@import 'offers';

package/scss/shared/input_btns.scss

@@ -1,11 +1,12 @@
-.btn {
-    &.text_input {
-        @include btn;
-
-        padding: $input_content_gap_2 $input_content_gap_2 $input_content_gap_2 0;
-
-        svg {
-            @include text_btn_svg;
-        }
-    }
-}
+.btn {
+    &.text_input {
+        @include btn;
+
+        position: relative;
+        padding: $input_content_gap_2 $input_content_gap_2 $input_content_gap_2 0;
+
+        svg {
+            @include text_btn_svg;
+        }
+    }
+}

package/scss/shared/input_error.scss

@@ -0,0 +1,3 @@
+.input_error {
+    @include folding_text;
+}

package/scss/shared/inputs.scss

@@ -1,70 +1,90 @@
-input[type='file'] {
-    display: none;
-}
-
-.input_item {
-    padding-right: $main_margin;
-    margin-left: unset;
-    justify-content: unset;
-    align-items: center;
-    flex-direction: column;
-    display: table;
-    width: auto;
-
-    &.child {
-        margin-left: 28px;
-    }
-
-    &:not(:first-child) {
-        margin-top: $gap;
-    }
-
-    .label {
-        display: flex;
-        align-items: center;
-        height: unset;
-        margin-right: 0;
-        white-space: normal;
-    }
-
-    &.text .label,
-    &.textarea .label,
-    &.select .label,
-    &.range .label {
-        margin-bottom: $gap_small;
-    }
-
-    .input {
-        @include input_basic;
-
-        opacity: 1; // needed to keep default color when element is is_enabled
-        height: $input_height;
-        padding: 0 $input_inner_padding 0 $input_inner_padding;
-        flex-grow: 1;
-        border-radius: 0;
-        box-sizing: border-box;
-    }
-
-    .input_w_and_help_btn {
-        display: flex;
-        align-items: center;
-    }
-
-    .input_w {
-        position: relative;
-        display: flex;
-        flex-shrink: 0;
-        box-sizing: border-box;
-
-        &.text,
-        &.textarea,
-        &.select {
-            @include border_transparent;
-        }
-
-        &.is_in_focus_state:not(.select)::before,
-        &.is_in_warn_state:not(.select)::before {
-            @include outline_solid_thick;
-        }
-    }
-}
+input[type='file'] {
+    display: none;
+}
+
+.input_item_form {
+    margin-bottom: 0;
+}
+
+.label:not(:first-child) {
+    margin-top: $gap;
+}
+
+.input_item {
+    padding-right: $main_margin;
+    margin-left: unset;
+    justify-content: unset;
+    align-items: center;
+    flex-direction: column;
+    display: table;
+    width: auto;
+
+    &.child {
+        margin-left: 28px;
+    }
+
+    &:not(:first-child) {
+        margin-top: $gap;
+    }
+
+    .label_in_input_item {
+        display: flex;
+        align-items: center;
+        height: unset;
+        margin-right: 0;
+        white-space: normal;
+    }
+
+    &.text,
+    &.textarea,
+    &.select,
+    &.range,
+    &.upload_box,
+    &.group {
+        .label_in_input_item:not(:empty) {
+            margin-bottom: $gap_small;
+        }
+    }
+
+    .input {
+        @include input_basic;
+
+        width: inherit;
+        opacity: 1; // needed to keep default color when element is is_enabled
+        height: $input_height;
+        padding: 0 $input_inner_padding 0 $input_inner_padding;
+        flex-grow: 1;
+        border-radius: 0;
+        box-sizing: border-box;
+
+        &.text {
+            line-height: $input_height;
+        }
+    }
+
+    .input_w_and_help_btn {
+        display: flex;
+        align-items: center;
+    }
+
+    .input_w {
+        position: relative;
+        display: flex;
+        box-sizing: border-box;
+
+        &.text,
+        &.textarea,
+        &.select {
+            @include border_transparent;
+        }
+
+        .main_visualization_w {
+            @include border_transparent;
+        }
+
+        &.is_in_focus_state:not(.select)::before,
+        &.is_in_warn_state:not(.select)::before {
+            @include outline_solid_thick;
+        }
+    }
+}

package/scss/shared/inset_border.scss

@@ -7,14 +7,7 @@
         content: '';
         position: absolute;
         pointer-events: none;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0;
         z-index: 1;
     }
 }
-
-.input_item.color .inset_border::before {
-    outline: none;
-}

package/scss/shared/link_btns.scss

@@ -1,10 +1,18 @@
 .link_btn {
+    @include btn;
+
     display: block;
     font-size: $font_small;
 
     &.hide {
         margin-top: 4px;
     }
+
+    &.show_content,
+    &.hide_content {
+        margin-bottom: $gap;
+        font-size: $font_main;
+    }
 }
 
 .palette_link_btns .link_btn {

package/scss/shared/links.scss

@@ -4,6 +4,18 @@
     border: 0;
     padding: 0;
     cursor: pointer;
+
+    &.offer {
+        display: unset;
+    }
+
+    &.svg {
+        svg {
+            display: block;
+            width: $icon_btn_size;
+            height: $icon_btn_size;
+        }
+    }
 }
 
 .link:not(:first-child) {

package/scss/shared/main.scss

@@ -0,0 +1,3 @@
+.main_2 {
+    box-sizing: border-box;
+}