@loftyshaky/shared-app 2.1.0 → 2.7.0

package/scss/shared/embed/error.scss

@@ -1,113 +1,116 @@
-@import 'normalize.css';
-@import '../all';
-@import '../vars';
-@import '../mixins';
-@import '../mods';
-@import '../text';
-@import '../crash_handler';
-@import '../close_btn';
-
-body,
-button {
-    color: white;
-}
-
-.main {
-    @include max_z_index;
-
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    margin: 0;
-    border: 0;
-    overflow: hidden;
-    background-color: #da4747;
-    color: white;
-}
-
-.error {
-    .body {
-        position: relative;
-
-        .top_stuff {
-            display: flex;
-            align-items: start;
-
-            .ext_name_and_keep_visible_msg {
-                flex-grow: 1;
-            }
-        }
-    }
-
-    .progress {
-        appearance: none;
-        display: block;
-        width: 100%;
-        height: 8px;
-
-        &::-webkit-progress-bar {
-            background-color: transparent;
-        }
-
-        &::-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;
-
-        outline-color: white;
-        background-color: transparent;
-        display: table;
-        margin: auto;
-        margin-top: 6px;
-        padding: 3px 6px;
-        cursor: pointer;
-        white-space: nowrap;
-    }
-
-    .more_info_btn:hover {
-        color: $black;
-        background-color: white;
-    }
-
-    .more_info_btn:focus,
-    .close_btn:focus {
-        @include outline_solid_thick;
-
-        outline-color: $black;
-    }
-
-    &.positive {
-        background-color: #40af49;
-    }
-
-    &.neutral {
-        background-color: #4d94ea;
-    }
-
-    &.is_highlighted {
-        background-color: #e28036;
-    }
-}
+@use 'normalize.css';
+@use '../all';
+@use '../vars';
+@use '../mixins';
+@use '../mods';
+@use '../text';
+@use '../crash_handler';
+@use '../close_btn';
+
+body,
+button {
+    color: white;
+}
+
+.main {
+    @include mixins.max_z_index;
+
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    border: 0;
+    overflow: hidden;
+    background-color: #da4747;
+    color: white;
+}
+
+.error {
+    .body {
+        position: relative;
+
+        .top_stuff {
+            display: flex;
+            align-items: start;
+
+            .ext_name_and_keep_visible_msg {
+                flex-grow: 1;
+            }
+        }
+    }
+
+    .progress {
+        appearance: none;
+        display: block;
+        width: 100%;
+        height: 8px;
+        border: none;
+        background: transparent;
+
+        &::-webkit-progress-bar {
+            background-color: transparent;
+        }
+
+        &::-webkit-progress-value,
+        &::-moz-progress-bar {
+            background-color: #ffe81a;
+        }
+    }
+
+    .keep_visible_msg {
+        font-size: vars.$font_small;
+        margin-left: vars.$ext_name_offset;
+        margin-top: 2px;
+    }
+
+    .msg {
+        white-space: pre-wrap;
+        text-align: center;
+        padding: 10px;
+        padding-top: 12px;
+    }
+
+    .ext_name {
+        margin-top: vars.$ext_name_offset;
+        margin-left: vars.$ext_name_offset;
+    }
+
+    .more_info_btn {
+        @include mixins.btn;
+        @include mixins.outline_solid;
+
+        outline-color: white;
+        background-color: transparent;
+        display: table;
+        margin: auto;
+        margin-top: 6px;
+        padding: 3px 6px;
+        cursor: pointer;
+        white-space: nowrap;
+    }
+
+    .more_info_btn:hover {
+        color: vars.$black;
+        background-color: white;
+    }
+
+    .more_info_btn:focus,
+    .close_btn:focus {
+        @include mixins.outline_solid_thick;
+
+        outline-color: vars.$black;
+    }
+
+    &.positive {
+        background-color: #40af49;
+    }
+
+    &.neutral {
+        background-color: #4d94ea;
+    }
+
+    &.is_highlighted {
+        background-color: #e28036;
+    }
+}

package/scss/shared/embed/hidden_roots.scss

@@ -1,3 +1,3 @@
-body > [class^='root_']:not([class*='loading_screen_']) {
-    opacity: 0;
-}
+body > [class^='root_']:not([class*='loading_screen_']) {
+    opacity: 0;
+}

package/scss/shared/embed/loading_screen.scss

@@ -1,36 +1,35 @@
-@import 'normalize.css';
-@import '../all';
-@import '../vars';
-@import '../mixins';
-@import '../transitions';
-@import '../mods';
-@import '../crash_handler';
-
-$svg_size: 110px;
-$window_mode_svg_size: 64px;
-
-.main {
-    @include full_spread;
-    @include max_z_index;
-
-    position: fixed;
-    top: 0;
-    margin: 0;
-    background-color: white;
-    border-style: solid;
-    border-width: 0;
-    cursor: wait;
-}
-
-svg {
-    @include center_translate;
-
-    position: absolute;
-    height: $svg_size;
-    width: $svg_size;
-}
-
-.small_svg svg {
-    height: $window_mode_svg_size;
-    width: $window_mode_svg_size;
-}
+@use 'normalize.css';
+@use '../all';
+@use '../mixins';
+@use '../transitions';
+@use '../mods';
+@use '../crash_handler';
+
+$svg_size: 110px;
+$window_mode_svg_size: 64px;
+
+.main {
+    @include mixins.full_spread;
+    @include mixins.max_z_index;
+
+    position: fixed;
+    top: 0;
+    margin: 0;
+    background-color: white;
+    border-style: solid;
+    border-width: 0;
+    cursor: wait;
+}
+
+svg {
+    @include mixins.center_translate;
+
+    position: absolute;
+    height: $svg_size;
+    width: $svg_size;
+}
+
+.small_svg svg {
+    height: $window_mode_svg_size;
+    width: $window_mode_svg_size;
+}

package/scss/shared/firefox.scss

@@ -0,0 +1,31 @@
+@use 'vars';
+
+@mixin input_btn_padding_vertical {
+    padding-top: 0;
+    padding-bottom: 1px;
+}
+
+@supports (-moz-appearance: none) {
+    .input_item {
+        &.text,
+        &.number {
+            .input {
+                @include input_btn_padding_vertical;
+
+                height: vars.$input_height;
+                line-height: normal;
+            }
+        }
+
+        &.select select {
+            height: vars.$input_height;
+            line-height: normal;
+            padding-top: 2px;
+            padding-bottom: 4px;
+        }
+    }
+
+    .btn.text {
+        @include input_btn_padding_vertical;
+    }
+}

package/scss/shared/focus.scss

@@ -1,5 +1,7 @@
 /* stylelint-disable no-descending-specificity, selector-class-pattern */
 
+@use 'mixins';
+
 $text_input_outline_size: 20px;
 $text_input_outline_offset: 4px;
 $outline_offset_1: 2px;
@@ -23,18 +25,19 @@ $outline_offset_2: 3px;
 .input_item .pcr-result:focus,
 .keyboard .input_item .color_picker_w input:not(.pcr-result):focus,
 .keyboard .btn.text_input:focus::before,
-.keyboard .icon_btn:focus,
+.keyboard .icon_btn .btn:focus,
 .keyboard .input_item .checkbox .box:focus,
 .keyboard .link:focus,
 .keyboard .link_btn:focus,
 .keyboard .help_btn:focus,
+.keyboard .side_btn:focus,
 .keyboard .input_item .input_w:not(.text, .textarea).is_in_focus_state::before,
 .keyboard .input_item.range .input.is_in_focus_state {
-    @include outline_solid_thick;
+    @include mixins.outline_solid_thick;
 }
 
 body.keyboard .btn.text:focus {
-    @include outline_solid_thick;
+    @include mixins.outline_solid_thick;
 }
 
 .keyboard .input_item .pcr-palette:focus,
@@ -42,34 +45,35 @@ body.keyboard .btn.text:focus {
 .keyboard .link:focus,
 .keyboard .link_btn:focus,
 .keyboard .help_btn:focus,
-.keyboard .icon_btn:focus,
+.keyboard .icon_btn .btn:focus,
+.keyboard .side_btn:focus,
 .keyboard .input_item.range .input.is_in_focus_state {
     outline-offset: $outline_offset_1;
 }
 
 .input_item .palette_visualization_w.selected:not(.opened) .palette_visualization {
-    @include outline_solid_thick;
+    @include mixins.outline_solid_thick;
 
     outline-offset: $outline_offset_2;
 }
 
 .input_item .visualization_w.opened .visualization,
 .input_item .palette_visualization_w.opened .palette_visualization {
-    @include outline_dashed_thick;
+    @include mixins.outline_dashed_thick;
 
     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;
+    @include mixins.outline_solid_thick;
 
     outline-offset: $outline_offset_2;
 }
 
 .keyboard .input_item .visualization_w.opened .visualization:focus,
 .keyboard .input_item .palette_visualization_w.opened .palette_visualization:focus {
-    @include outline_dashed_thick;
+    @include mixins.outline_dashed_thick;
 }
 
 .keyboard .btn.text_input:focus::before {
@@ -82,5 +86,5 @@ body.keyboard .btn.text:focus {
 }
 
 .reload_ui_btn_w .keyboard .btn:focus {
-    @include blue_border;
+    @include mixins.blue_border;
 }

package/scss/shared/group.scss

@@ -1,4 +1,6 @@
-.input_item.group {
+@use 'vars';
+
+.input_item.group:not(.is_column_layout) {
     .input_item {
         margin-top: 0;
 
@@ -29,7 +31,12 @@
         }
 
         & > .btn_w:not(:last-child) {
-            margin-right: $gap;
+            margin-right: vars.$gap;
         }
     }
 }
+
+.input_item.group.is_column_layout > .input_item_inner > .input_w_and_help_btn > .input_w {
+    display: flex;
+    flex-direction: column;
+}

package/scss/shared/help.scss

@@ -1,69 +1,80 @@
-.help,
-.color_help {
-    @include folding_text;
-}
-
-.help_btn {
-    @include btn;
-
-    margin-left: var(--help_btn_margin);
-    display: flex;
-    order: 1;
-
-    svg {
-        display: block;
-        width: var(--help_btn_size);
-        height: var(--help_btn_size);
-    }
-}
-
-.section_help {
-    display: flex;
-    margin-bottom: $gap;
-
-    &:empty {
-        display: none;
-    }
-
-    + .subsection {
-        margin-top: $gap;
-    }
-
-    .help {
-        max-width: unset;
-        margin-top: 0;
-        margin-right: 15px;
-    }
-
-    .help_btn {
-        margin-left: auto;
-        align-self: flex-start;
-    }
-}
-
-.input_item {
-    .color_help_w {
-        margin-bottom: $gap;
-    }
-
-    .color_help {
-        margin: 0;
-        line-height: initial;
-    }
-
-    &:not(.textarea) .help_btn {
-        align-self: center;
-    }
-
-    &.textarea {
-        .input_w_and_help_btn {
-            align-items: normal;
-        }
-
-        .help_btn {
-            margin-top: 5px;
-            display: inline-block;
-            height: max-content;
-        }
-    }
-}
+@use 'vars';
+@use 'mixins';
+
+.help,
+.color_help {
+    @include mixins.folding_text;
+}
+
+.help_btn {
+    @include mixins.btn;
+
+    margin-left: var(--help_btn_margin);
+    display: flex;
+    order: 1;
+
+    svg {
+        display: block;
+        width: var(--help_btn_size);
+        height: var(--help_btn_size);
+    }
+}
+
+.section_help {
+    display: flex;
+    margin-bottom: vars.$gap;
+
+    &:empty {
+        display: none;
+    }
+
+    + .subsection {
+        margin-top: vars.$gap;
+    }
+
+    .help {
+        max-width: unset;
+        margin-top: 0;
+        margin-right: 15px;
+    }
+
+    .help_btn {
+        margin-left: auto;
+        align-self: flex-start;
+    }
+}
+
+.input_item {
+    .color_help_w {
+        margin-bottom: vars.$gap;
+    }
+
+    .color_help {
+        margin: 0;
+        line-height: initial;
+    }
+
+    .help_btn {
+        align-self: center;
+    }
+
+    &.textarea {
+        .input_w_and_help_btn {
+            align-items: normal;
+        }
+
+        .help_btn {
+            margin-top: 5px;
+            display: inline-block;
+            height: max-content;
+            align-self: flex-end;
+        }
+    }
+}
+
+.help {
+    .link {
+        margin: 0;
+        display: inline;
+    }
+}

package/scss/shared/hr.scss

@@ -1,6 +1,8 @@
-hr {
-    margin: 0;
-    margin-top: $gap;
-    border: 0;
-    height: 1px;
-}
+@use 'vars';
+
+hr {
+    margin: 0;
+    margin-top: vars.$gap;
+    border: 0;
+    height: 1px;
+}

package/scss/shared/icon_btns.scss

@@ -0,0 +1,18 @@
+@use 'vars';
+@use 'mixins';
+
+.btn_w.icon_btn {
+    @include mixins.btn;
+
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .label_in_input_item_w {
+        margin-left: vars.$gap;
+
+        .label_in_input_item {
+            cursor: pointer;
+        }
+    }
+}