@loftyshaky/shared 2.5.0 → 2.7.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,10 +1,13 @@
+@use 'vars';
+@use 'mixins';
+
 .help,
 .color_help {
-    @include folding_text;
+    @include mixins.folding_text;
 }
 
 .help_btn {
-    @include btn;
+    @include mixins.btn;
 
     margin-left: var(--help_btn_margin);
     display: flex;
@@ -19,14 +22,14 @@
 
 .section_help {
     display: flex;
-    margin-bottom: $gap;
+    margin-bottom: vars.$gap;
 
     &:empty {
         display: none;
     }
 
     + .subsection {
-        margin-top: $gap;
+        margin-top: vars.$gap;
     }
 
     .help {
@@ -43,7 +46,7 @@
 
 .input_item {
     .color_help_w {
-        margin-bottom: $gap;
+        margin-bottom: vars.$gap;
     }
 
     .color_help {
@@ -51,7 +54,7 @@
         line-height: initial;
     }
 
-    &:not(.textarea) .help_btn {
+    .help_btn {
         align-self: center;
     }
 
@@ -64,6 +67,14 @@
             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;
+        }
+    }
+}

package/scss/shared/index.scss

@@ -1,34 +1,35 @@
-@import 'normalize.css';
-@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';
-@import 'css_vars';
-@import 'focus';
-@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';
-@import 'selects';
-@import 'text';
-@import 'textareas';
-@import 'transitions';
-@import 'upload_box';
-@import 'offers';
+@use 'normalize.css';
+@use '@simonwep/pickr/dist/themes/monolith.min.css';
+@use 'mixins';
+@use 'themes/general/light_theme';
+@use 'all';
+@use 'btns';
+@use 'checkboxes';
+@use 'close_btn';
+@use 'color_pickers';
+@use 'colors';
+@use 'crash_handler';
+@use 'css_vars';
+@use 'focus';
+@use 'hr';
+@use 'group';
+@use 'help';
+@use 'input_error';
+@use 'input_btns';
+@use 'inputs';
+@use 'inset_border';
+@use 'icon_btns';
+@use 'link_btns';
+@use 'links';
+@use 'main';
+@use 'mods';
+@use 'range';
+@use 'scrollbar';
+@use 'selects';
+@use 'side_btns';
+@use 'text';
+@use 'textareas';
+@use 'transitions';
+@use 'upload_box';
+@use 'offers';
+@use 'firefox';

package/scss/shared/input_btns.scss

@@ -1,12 +1,17 @@
+@use 'vars';
+@use 'mixins';
+
+$input_content_gap_2: vars.$input_content_gap - (vars.$border_width * 2);
+
 .btn {
     &.text_input {
-        @include btn;
+        @include mixins.btn;
 
         position: relative;
         padding: $input_content_gap_2 $input_content_gap_2 $input_content_gap_2 0;
 
         svg {
-            @include text_btn_svg;
+            @include mixins.text_btn_svg;
         }
     }
 }

package/scss/shared/input_error.scss

@@ -1,3 +1,5 @@
+@use 'mixins';
+
 .input_error {
-    @include folding_text;
+    @include mixins.folding_text;
 }

package/scss/shared/inputs.scss

@@ -1,3 +1,6 @@
+@use 'vars';
+@use 'mixins';
+
 input[type='file'] {
     display: none;
 }
@@ -7,57 +10,80 @@ input[type='file'] {
 }
 
 .label:not(:first-child) {
-    margin-top: $gap;
+    margin-top: vars.$gap;
 }
 
 .input_item {
-    padding-right: $main_margin;
     margin-left: unset;
     justify-content: unset;
-    align-items: center;
-    flex-direction: column;
-    display: table;
+    align-items: end;
+    display: flex;
     width: auto;
 
+    .input_item_inner {
+        width: inherit;
+        padding-right: vars.$main_margin;
+    }
+
     &.child {
         margin-left: 28px;
     }
 
     &:not(:first-child) {
-        margin-top: $gap;
+        margin-top: vars.$gap;
     }
 
-    .label_in_input_item {
-        display: table;
+    .label_in_input_item_w {
+        display: flex;
+        align-items: center;
         height: unset;
         margin-right: 0;
         white-space: normal;
     }
 
+    &.checkbox {
+        align-items: center;
+
+        .label_in_input_item_w {
+            display: block;
+        }
+    }
+
+    &.text .input {
+        line-height: 2;
+    }
+
     &.text,
     &.textarea,
     &.select,
     &.range,
     &.upload_box,
     &.group {
-        .label_in_input_item:not(:empty) {
-            margin-bottom: $gap_small;
+        .label_in_input_item_w:not(:empty) {
+            margin-bottom: vars.$gap_small;
         }
     }
 
     .input {
-        @include input_basic;
+        padding: 0 vars.$input_inner_padding;
+
+        @include mixins.input_basic;
+        @include mixins.input_btn_padding_vertical;
 
+        height: vars.$input_height;
         width: inherit;
         opacity: 1; // needed to keep default color when element is is_enabled
-        height: $input_height;
-        padding: 0 $input_inner_padding;
         flex-grow: 1;
         border-radius: 0;
         box-sizing: border-box;
 
-        &.text {
-            line-height: $input_height;
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            appearance: none;
+        }
+
+        &[type='number'] {
+            appearance: textfield;
         }
     }
 
@@ -74,16 +100,20 @@ input[type='file'] {
         &.text,
         &.textarea,
         &.select {
-            @include border_transparent;
+            @include mixins.border_transparent;
         }
 
         .main_visualization_w {
-            @include border_transparent;
+            @include mixins.border_transparent;
         }
 
         &.is_in_focus_state:not(.select)::before,
         &.is_in_warn_state:not(.select)::before {
-            @include outline_solid_thick;
+            @include mixins.outline_solid_thick;
         }
     }
 }
+
+.side_btns + .input_item {
+    margin-top: 0;
+}

package/scss/shared/inset_border.scss

@@ -1,13 +1,15 @@
-.inset_border {
-    position: relative;
-
-    &::before {
-        @include outline_solid;
-
-        content: '';
-        position: absolute;
-        pointer-events: none;
-        inset: 0;
-        z-index: 1;
-    }
-}
+@use 'mixins';
+
+.inset_border {
+    position: relative;
+
+    &::before {
+        @include mixins.outline_solid;
+
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        inset: 0;
+        z-index: 1;
+    }
+}

package/scss/shared/link_btns.scss

@@ -1,20 +1,26 @@
-.link_btn {
-    @include btn;
+@use 'vars';
+@use 'mixins';
+
+.link_btn_w {
+    @include mixins.btn;
 
     display: block;
-    font-size: $font_small;
 
-    &.hide {
-        margin-top: 4px;
+    .link_btn {
+        display: flex;
+    }
+}
+
+.palette {
+    .link_btn_w.hide {
+        margin-top: vars.$gap_small;
     }
 
-    &.show_content,
-    &.hide_content {
-        margin-bottom: $gap;
-        font-size: $font_main;
+    .link_btn {
+        font-size: vars.$font_small;
     }
 }
 
-.palette_link_btns .link_btn {
-    margin-bottom: $gap;
+.palette_link_btns .link_btn_w {
+    margin-bottom: vars.$gap;
 }

package/scss/shared/links.scss

@@ -1,23 +1,25 @@
-.link {
-    display: table;
-    text-decoration: none;
-    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) {
-    margin-top: $gap;
-}
+@use 'vars';
+
+.link {
+    display: table;
+    text-decoration: none;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+
+    &.offer {
+        display: unset;
+    }
+
+    &.svg {
+        svg {
+            display: block;
+            width: vars.$icon_btn_size;
+            height: vars.$icon_btn_size;
+        }
+    }
+}
+
+.link:not(:first-child) {
+    margin-top: vars.$gap;
+}

package/scss/shared/main.scss

@@ -1,5 +1,7 @@
+@use 'mixins';
+
 body::before {
-    @include full_spread;
+    @include mixins.full_spread;
 
     content: '';
     position: fixed;