@loftyshaky/shared 0.0.40 → 0.0.43

package/scss/shared/focus.scss

@@ -1,78 +1,80 @@
-/* stylelint-disable no-descending-specificity, selector-class-pattern */
-
-$text_input_outline_size: 20px;
-
-.input_item .pcr-interaction input:focus {
-    box-shadow: none !important;
-}
-
-.keyboard .input_item .pcr-palette:focus,
-.keyboard .input_item .pcr-slider:focus,
-.keyboard .input_item .pcr-picker:focus,
-.input_item .pcr-result:focus,
-.keyboard .input_item .color_picker_w input:not(.pcr-result):focus {
-    box-shadow: none;
-}
-
-.keyboard .input_item .pcr-palette:focus,
-.keyboard .input_item .pcr-slider:focus,
-.keyboard .input_item .pcr-picker:focus,
-.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 .input_item .checkbox .box:focus,
-.keyboard .link:focus,
-.keyboard .link_btn:focus,
-.keyboard .help_btn:focus,
-.keyboard .input_item .input_w:not(.text):not(.textarea).is_in_focus_state::before,
-.keyboard .input_item.range .input.is_in_focus_state {
-    @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 .input_item.range .input.is_in_focus_state {
-    outline-offset: $outline_offset;
-}
-
-.input_item .palette_visualization_w.selected:not(.opened) .palette_visualization {
-    @include outline_solid_thick;
-
-    outline-offset: $outline_offset;
-}
-
-.input_item .visualization_w.opened .visualization,
-.input_item .palette_visualization_w.opened .palette_visualization {
-    @include outline_dashed_thick;
-
-    outline-offset: $outline_offset;
-}
-
-.keyboard .input_item .visualization_w .visualization:focus,
-.keyboard .input_item .palette_visualization_w .palette_visualization:focus {
-    @include outline_solid_thick;
-
-    outline-offset: $outline_offset;
-}
-
-.keyboard .input_item .visualization_w.opened .visualization:focus,
-.keyboard .input_item .palette_visualization_w.opened .palette_visualization:focus {
-    @include outline_dashed_thick;
-}
-
-.keyboard .btn.text_input:focus::before {
-    content: '';
-    position: absolute;
-    width: $text_input_outline_size;
-    height: $text_input_outline_size;
-    top: 4px;
-    left: -2px;
-}
-
-.reload_ui_btn_w .keyboard .btn:focus {
-    @include blue_border;
-}
+/* stylelint-disable no-descending-specificity, selector-class-pattern */
+
+$text_input_outline_size: 20px;
+
+.input_item .pcr-interaction input:focus {
+    box-shadow: none !important;
+}
+
+.keyboard .input_item .pcr-palette:focus,
+.keyboard .input_item .pcr-slider:focus,
+.keyboard .input_item .pcr-picker:focus,
+.input_item .pcr-result:focus,
+.keyboard .input_item .color_picker_w input:not(.pcr-result):focus {
+    box-shadow: none;
+}
+
+.keyboard .input_item .pcr-palette:focus,
+.keyboard .input_item .pcr-slider:focus,
+.keyboard .input_item .pcr-picker:focus,
+.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 .input_item .checkbox .box:focus,
+.keyboard .link:focus,
+.keyboard .link_btn:focus,
+.keyboard .help_btn:focus,
+.keyboard .input_item .input_w:not(.text):not(.textarea).is_in_focus_state::before,
+.keyboard .input_item.range .input.is_in_focus_state {
+    @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 .input_item.range .input.is_in_focus_state {
+    outline-offset: $outline_offset;
+}
+
+.input_item .palette_visualization_w.selected:not(.opened) .palette_visualization {
+    @include outline_solid_thick;
+
+    outline-offset: $outline_offset;
+}
+
+.input_item .visualization_w.opened .visualization,
+.input_item .palette_visualization_w.opened .palette_visualization {
+    @include outline_dashed_thick;
+
+    outline-offset: $outline_offset;
+}
+
+.keyboard .input_item .visualization_w .visualization:focus,
+.keyboard .input_item .palette_visualization_w .palette_visualization:focus {
+    @include outline_solid_thick;
+
+    outline-offset: $outline_offset;
+}
+
+.keyboard .input_item .visualization_w.opened .visualization:focus,
+.keyboard .input_item .palette_visualization_w.opened .palette_visualization:focus {
+    @include outline_dashed_thick;
+}
+
+.keyboard .btn.text_input:focus::before {
+    content: '';
+    position: absolute;
+    width: $text_input_outline_size;
+    height: $text_input_outline_size;
+    top: 4px;
+    left: -2px;
+}
+
+.reload_ui_btn_w .keyboard .btn:focus {
+    @include blue_border;
+}

package/scss/shared/group.scss

@@ -0,0 +1,18 @@
+.input_item.group {
+    .input_item {
+        margin-top: 0;
+
+        &.range {
+            width: 100%;
+        }
+    }
+
+    .input_w.group {
+        display: flex;
+        align-items: center;
+
+        .input_w.range {
+            width: 100%;
+        }
+    }
+}

package/scss/shared/index.scss

@@ -12,6 +12,7 @@
 @import 'css_vars';
 @import 'focus';
 @import 'hr';
+@import 'group';
 @import 'help';
 @import 'input_btns';
 @import 'inputs';

package/scss/shared/link_btns.scss

@@ -1,12 +1,12 @@
-.link_btn {
-    display: block;
-    font-size: $font_small;
-
-    &.hide {
-        margin-top: 4px;
-    }
-}
-
-.palette_link_btns .link_btn {
-    margin-bottom: $gap;
-}
+.link_btn {
+    display: block;
+    font-size: $font_small;
+
+    &.hide {
+        margin-top: 4px;
+    }
+}
+
+.palette_link_btns .link_btn {
+    margin-bottom: $gap;
+}

package/scss/shared/mods.scss

@@ -13,7 +13,11 @@
 .hidden {
     position: fixed !important;
     visibility: hidden !important;
-    top: 99999px !important;
+    top: -99999px !important;
+}
+
+.overflow_auto {
+    overflow: auto;
 }
 
 .border {

package/scss/shared/themes/colors/dark.scss

@@ -3,6 +3,7 @@ $gaq: #1d2329;
 $hev: #42505e;
 $lpe: white;
 $yos: #144581;
+$htm: #8d4816;
 $qgp: #1b5a17;
 $ycp: #308af9;
 $cop: #09a700;

package/scss/shared/themes/colors/light.scss

@@ -3,6 +3,7 @@ $gaq: #efefef;
 $hev: #bbb;
 $lpe: $black;
 $yos: #c7e0ff;
+$htm: #ffbd8e;
 $qgp: #beffba;
 $ycp: #2e8cff;
 $cop: #14bf0a;

package/scss/shared/themes/colors/very_dark.scss

@@ -3,6 +3,7 @@ $gaq: #000308;
 $hev: #1f2c40;
 $lpe: #e5e5e5;
 $yos: #0e2e54;
+$htm: #583013;
 $qgp: #133e10;
 $ycp: #2176de;
 $cop: #089200;