@loftyshaky/shared 2.5.0 → 2.7.0

package/scss/shared/btns.scss

@@ -1,106 +1,87 @@
-$icon_btn_size: 20px;
+@use 'vars';
+@use 'mixins';
 
-.btn {
-    @include btn;
-
-    position: relative;
-
-    .shadow {
-        @include full_spread;
+$side_btn_height: vars.$input_height + (vars.$border_width * 2);
 
-        position: absolute;
-    }
-
-    svg {
-        display: block;
-    }
-}
+.btn {
+    @include mixins.btn;
 
-.btn.icon_btn {
-    border-radius: 0;
     position: relative;
-    vertical-align: bottom;
-    background-color: transparent;
-
-    &:not(:first-child) {
-        margin-left: $gap !important;
-    }
 
-    svg {
-        width: $icon_btn_size;
-        height: $icon_btn_size;
+    &.side_btn {
+        svg {
+            @include mixins.text_btn_svg;
+        }
     }
 }
 
 .btn.text {
-    @include border_transparent;
-    @include outline_solid;
+    padding: 0 vars.$input_inner_padding;
+
+    @include mixins.border_transparent;
+    @include mixins.outline_solid;
 
+    height: vars.$input_height;
     border-radius: 0;
-    height: $input_height;
-    padding: 0 $input_inner_padding;
     display: table;
     box-sizing: border-box;
 
     &:not(:first-child) {
-        margin-top: $gap;
+        margin-top: vars.$gap;
     }
 
     &.color_ok_btn {
         margin-left: auto !important;
     }
-
-    &.icon_btn {
-        svg {
-            width: $icon_btn_size;
-            height: $icon_btn_size;
-        }
-    }
 }
 
 .btn_w {
-    @include border_transparent;
+    @include mixins.border_transparent;
 
     display: table;
 
     &:not(:first-child) {
-        margin-top: $gap;
+        margin-top: vars.$gap;
     }
 
-    .btn.text {
-        border: none;
-    }
-}
+    .shadow {
+        @include mixins.full_spread;
 
-.btn_options {
-    @include border;
+        position: absolute;
+    }
 
-    backdrop-filter: $glass_blur;
-    box-shadow: $black_shadow;
+    &.icon_btn {
+        border-radius: 0;
+        position: relative;
+        vertical-align: bottom;
+        background-color: transparent;
 
-    .btn_option {
-        @include btn;
+        &:not(:first-child) {
+            margin-left: vars.$gap !important;
+        }
 
-        display: block;
-        width: 100%;
-        padding: 3px 6px;
-        border: 0;
-        text-align: left;
-        background-color: transparent;
-        cursor: pointer;
-        box-sizing: border-box;
-        color: unset;
-        text-decoration: none;
-        white-space: nowrap;
+        svg {
+            display: block;
+            width: vars.$icon_btn_size;
+            height: vars.$icon_btn_size;
+        }
     }
 
-    hr {
-        margin-top: 0;
+    .btn.text {
+        border: none;
     }
 }
 
-.keyboard .btn_options .btn_option:focus {
-    @include outline_solid_thick;
+.icon_btn .btn,
+.side_btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $side_btn_height;
+    height: $side_btn_height;
+    margin-right: vars.$gap;
+}
 
-    outline-offset: -1px;
+.icon_btn .btn {
+    margin-right: 0;
 }

package/scss/shared/checkboxes.scss

@@ -1,4 +1,7 @@
-$box_size: 22px;
+@use 'vars';
+@use 'mixins';
+
+$checkmark_box_size: 22px;
 $checkmark_size: 18px;
 
 .input_item {
@@ -8,18 +11,18 @@ $checkmark_size: 18px;
         }
 
         .wrap_label {
-            @include center_flex;
-            @include border_transparent;
+            @include mixins.center_flex;
+            @include mixins.border_transparent;
 
-            margin-right: $input_content_gap;
+            margin-right: vars.$input_content_gap;
         }
 
         .box {
-            @include center_flex;
-            @include outline_solid;
+            @include mixins.center_flex;
+            @include mixins.outline_solid;
 
-            height: $box_size;
-            width: $box_size;
+            height: $checkmark_box_size;
+            width: $checkmark_box_size;
             cursor: pointer;
         }
 

package/scss/shared/close_btn.scss

@@ -1,9 +1,12 @@
+@use 'vars';
+@use 'mixins';
+
 .close_btn {
-    @include btn;
+    @include mixins.btn;
 
-    margin-top: $ext_name_offset;
-    margin-right: $ext_name_offset;
-    margin-left: $gap;
+    margin-top: vars.$ext_name_offset;
+    margin-right: vars.$ext_name_offset;
+    margin-left: vars.$gap;
 
     &:focus {
         outline-offset: 2px;

package/scss/shared/color_pickers.scss

@@ -1,5 +1,8 @@
 /* stylelint-disable selector-class-pattern */
 
+@use 'vars';
+@use 'mixins';
+
 $pcr_picker_size: 16px;
 $btn_padding: 6px;
 
@@ -15,18 +18,18 @@ $btn_padding: 6px;
 
     .pcr-palette,
     .pcr-slider {
-        @include border;
+        @include mixins.border;
     }
 
     .color_picker_w {
         position: absolute;
         z-index: 3;
-        top: $input_height + $input_content_gap;
+        top: vars.$input_height + vars.$input_content_gap;
         left: 0;
         user-select: none;
 
         input {
-            @include outline_solid;
+            @include mixins.outline_solid;
 
             filter: initial !important;
 
@@ -41,13 +44,13 @@ $btn_padding: 6px;
     }
 
     .pcr-app {
-        @include box_shadow_important;
+        @include mixins.box_shadow_important;
 
         position: relative !important;
         left: initial !important;
         top: initial !important;
         width: fit-content !important;
-        padding: $gap !important;
+        padding: vars.$gap !important;
         transition: none !important;
     }
 
@@ -58,9 +61,9 @@ $btn_padding: 6px;
     }
 
     .pcr-color-preview {
-        @include border;
+        @include mixins.border;
 
-        margin-bottom: $gap !important;
+        margin-bottom: vars.$gap !important;
     }
 
     .pcr-swatches {
@@ -84,7 +87,7 @@ $btn_padding: 6px;
     }
 
     .pcr-color-chooser {
-        margin-top: $gap !important;
+        margin-top: vars.$gap !important;
     }
 
     .pcr-type {

package/scss/shared/colors.scss

@@ -1,4 +1,8 @@
-$palette_visualization_w_border_offset: 1 * 2;
+@use 'vars';
+@use 'mixins';
+
+$input_height: vars.$input_height + (vars.$border_width * 4) - 2;
+$palette_visualization_w_border_offset: vars.$border_width * 2;
 
 .input_item {
     &.color .label_in_input_item {
@@ -7,7 +11,7 @@ $palette_visualization_w_border_offset: 1 * 2;
 
     .inner_w {
         position: absolute;
-        height: $color_input_height;
+        height: $input_height;
         align-self: center;
         order: -1;
     }
@@ -21,14 +25,14 @@ $palette_visualization_w_border_offset: 1 * 2;
     .visualization_w {
         display: flex;
         align-items: center;
-        margin-right: $input_content_gap;
+        margin-right: vars.$input_content_gap;
     }
 
     .visualization {
         border: 0;
         outline: none;
-        min-width: $color_input_height;
-        height: $color_input_height;
+        min-width: $input_height;
+        height: $input_height;
         cursor: pointer;
         border-radius: 0;
     }
@@ -36,8 +40,8 @@ $palette_visualization_w_border_offset: 1 * 2;
     .palette_visualization_w {
         display: inline-flex;
         padding: 0;
-        margin-right: $gap + $palette_visualization_w_border_offset;
-        margin-bottom: $gap + $palette_visualization_w_border_offset;
+        margin-right: vars.$gap + $palette_visualization_w_border_offset;
+        margin-bottom: vars.$gap + $palette_visualization_w_border_offset;
         cursor: pointer;
 
         &:nth-child(10),
@@ -54,15 +58,15 @@ $palette_visualization_w_border_offset: 1 * 2;
     .palette_visualization {
         border: 0;
         outline: none;
-        width: $color_input_height;
-        height: $color_input_height;
+        width: $input_height;
+        height: $input_height;
         cursor: pointer;
         border-radius: 0;
     }
 
     .fill_shadow_w {
         position: absolute;
-        top: $input_content_gap + $input_content_gap;
+        top: vars.$input_content_gap + vars.$input_content_gap;
         left: 0;
     }
 
@@ -75,12 +79,12 @@ $palette_visualization_w_border_offset: 1 * 2;
     .palette_w {
         z-index: 3;
         position: absolute;
-        top: $input_content_gap + $input_content_gap;
+        top: vars.$input_content_gap + vars.$input_content_gap;
         left: 0;
     }
 
     .palette {
-        @include box_shadow;
+        @include mixins.box_shadow;
 
         position: fixed;
         padding: 10px;

package/scss/shared/crash_handler.scss

@@ -1,36 +1,39 @@
-.reload_ui_btn_w {
-    @include full_spread;
-    @include center_flex;
-
-    position: fixed;
-    visibility: hidden;
-
-    .btn {
-        @include btn;
-        @include outline_solid;
-
-        outline-color: $black;
-        visibility: visible;
-        color: $black;
-        background-color: $light_orange;
-        padding: 6px 12px;
-        width: max-content;
-        font-size: 21px;
-
-        &:hover {
-            background-color: $blue;
-            color: white;
-        }
-
-        &:active {
-            background-color: $yellow;
-            color: $black;
-        }
-
-        &:focus {
-            @include outline_solid_thick;
-
-            outline-color: #293fe2;
-        }
-    }
-}
+@use 'vars';
+@use 'mixins';
+
+.reload_ui_btn_w {
+    @include mixins.full_spread;
+    @include mixins.center_flex;
+
+    position: fixed;
+    visibility: hidden;
+
+    .btn {
+        @include mixins.btn;
+        @include mixins.outline_solid;
+
+        outline-color: vars.$black;
+        visibility: visible;
+        color: vars.$black;
+        background-color: vars.$light_orange;
+        padding: 6px 12px;
+        width: max-content;
+        font-size: 21px;
+
+        &:hover {
+            background-color: vars.$blue;
+            color: white;
+        }
+
+        &:active {
+            background-color: vars.$yellow;
+            color: vars.$black;
+        }
+
+        &:focus {
+            @include mixins.outline_solid_thick;
+
+            outline-color: #293fe2;
+        }
+    }
+}

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;
+}