@loftyshaky/shared 0.0.32 → 0.0.36

package/scss/shared/colors.scss

@@ -1,77 +1,84 @@
-.input_item {
-    &.color .label {
-        align-self: normal;
-    }
-
-    .visualization_w {
-        display: flex;
-    }
-
-    .visualization {
-        @include border;
-
-        outline: none;
-        margin-right: $input_content_gap;
-        width: $color_input_height;
-        height: $color_input_height;
-        cursor: pointer;
-        border-radius: 0;
-    }
-
-    .palette_visualization_w {
-        display: inline-block;
-        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 border;
-        @include box_shadow;
-
-        position: fixed;
-        padding: 10px;
-        width: 410px;
-        line-height: 0;
-    }
-}
+.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;
+    }
+}

package/scss/shared/crash_handler.scss

@@ -1,36 +1,36 @@
-.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;
-        }
-    }
-}
+.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;
+        }
+    }
+}

package/scss/shared/css_vars.scss

@@ -1,4 +1,4 @@
-:root {
-    --help_btn_size: 20px;
-    --help_btn_margin: 8px;
-}
+:root {
+    --help_btn_size: 20px;
+    --help_btn_margin: 8px;
+}

package/scss/shared/embed/error.scss

@@ -1,96 +1,96 @@
-@import 'normalize.css';
-@import '../all';
-@import '../vars';
-@import '../mixins';
-@import '../mods';
-@import '../text';
-@import '../crash_handler';
-
-$ext_name_offset: 7px;
-
-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 {
-    .msg {
-        white-space: pre-wrap;
-        text-align: center;
-        padding: 10px;
-        padding-top: 40px;
-    }
-
-    .ext_name {
-        position: absolute;
-        top: $ext_name_offset;
-        left: $ext_name_offset;
-    }
-
-    .close_btn {
-        @include btn();
-
-        position: absolute;
-        top: $ext_name_offset;
-        right: $ext_name_offset;
-
-        &:focus {
-            outline-offset: $outline_offset;
-        }
-
-        svg {
-            display: block;
-            fill: white;
-            height: 20px;
-            width: 20px;
-        }
-    }
-
-    .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;
-    }
-
-    &.is_notification {
-        background-color: #4d94ea;
-    }
-
-    &.is_highlighted {
-        background-color: #e28036;
-    }
-}
+@import 'normalize.css';
+@import '../all';
+@import '../vars';
+@import '../mixins';
+@import '../mods';
+@import '../text';
+@import '../crash_handler';
+
+$ext_name_offset: 7px;
+
+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 {
+    .msg {
+        white-space: pre-wrap;
+        text-align: center;
+        padding: 10px;
+        padding-top: 40px;
+    }
+
+    .ext_name {
+        position: absolute;
+        top: $ext_name_offset;
+        left: $ext_name_offset;
+    }
+
+    .close_btn {
+        @include btn();
+
+        position: absolute;
+        top: $ext_name_offset;
+        right: $ext_name_offset;
+
+        &:focus {
+            outline-offset: $outline_offset;
+        }
+
+        svg {
+            display: block;
+            fill: white;
+            height: 20px;
+            width: 20px;
+        }
+    }
+
+    .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;
+    }
+
+    &.is_notification {
+        background-color: #4d94ea;
+    }
+
+    &.is_highlighted {
+        background-color: #e28036;
+    }
+}