@loftyshaky/shared 0.0.30 → 0.0.34

package/scss/shared/embed/loading_screen.scss

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

package/scss/shared/embed/no_tr.scss

@@ -1,3 +1,3 @@
-* {
-    transition: none !important;
-}
+* {
+    transition: none !important;
+}

package/scss/shared/focus.scss

@@ -1,78 +1,78 @@
-/* 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 .input_item .link_btn:focus,
-.keyboard .input_item .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 .input_item .link_btn:focus,
-.keyboard .input_item .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 .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;
+}

package/scss/shared/help.scss

@@ -1,66 +1,66 @@
-.help,
-.color_help {
-    max-width: 700px;
-    font-size: $font_small;
-    margin: 0;
-    margin-top: $gap_small;
-    white-space: pre-wrap;
-}
-
-.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;
-
-    + .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;
-        }
-    }
-}
+.help,
+.color_help {
+    max-width: 700px;
+    font-size: $font_small;
+    margin: 0;
+    margin-top: $gap_small;
+    white-space: pre-wrap;
+}
+
+.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;
+
+    + .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;
+        }
+    }
+}

package/scss/shared/hr.scss

@@ -0,0 +1,6 @@
+hr {
+    margin: 0;
+    margin-top: $gap;
+    border: 0;
+    height: 1px;
+}

package/scss/shared/index.scss

@@ -1,26 +1,28 @@
-@import 'normalize.css';
-@import '~@simonwep/pickr/dist/themes/monolith.min.css';
-@import 'vars';
-@import 'mixins';
-@import 'themes/general/light_theme';
-@import 'all';
-@import 'btns';
-@import 'checkboxes';
-@import 'color_pickers';
-@import 'colors';
-@import 'crash_handler';
-@import 'css_vars';
-@import 'focus';
-@import 'help';
-@import 'input_btns';
-@import 'inputs';
-@import 'inset_border';
-@import 'link_btns';
-@import 'links';
-@import 'mods';
-@import 'range';
-@import 'scrollbar';
-@import 'selects';
-@import 'text';
-@import 'textareas';
-@import 'transitions';
+@import 'normalize.css';
+@import '~@simonwep/pickr/dist/themes/monolith.min.css';
+@import 'vars';
+@import 'mixins';
+@import 'themes/general/light_theme';
+@import 'all';
+@import 'btns';
+@import 'checkboxes';
+@import 'color_pickers';
+@import 'colors';
+@import 'crash_handler';
+@import 'css_vars';
+@import 'focus';
+@import 'hr';
+@import 'help';
+@import 'input_btns';
+@import 'inputs';
+@import 'inset_border';
+@import 'link_btns';
+@import 'links';
+@import 'mods';
+@import 'range';
+@import 'scrollbar';
+@import 'selects';
+@import 'text';
+@import 'textareas';
+@import 'transitions';
+@import 'upload_box';

package/scss/shared/input_btns.scss

@@ -1,11 +1,11 @@
-.btn {
-    &.text_input {
-        @include btn;
-
-        padding: $input_content_gap_2 $input_content_gap_2 $input_content_gap_2 0;
-
-        svg {
-            @include text_btn_svg;
-        }
-    }
-}
+.btn {
+    &.text_input {
+        @include btn;
+
+        padding: $input_content_gap_2 $input_content_gap_2 $input_content_gap_2 0;
+
+        svg {
+            @include text_btn_svg;
+        }
+    }
+}

package/scss/shared/inputs.scss

@@ -1,73 +1,69 @@
-input[type='file'] {
-    display: none;
-}
-
-.input_item {
-    padding-right: $main_margin;
-    margin-left: unset;
-    justify-content: unset;
-    align-items: center;
-    flex-direction: column;
-    display: table;
-    width: auto;
-
-    &.parent_disabled {
-        opacity: 0.3;
-        pointer-events: none;
-    }
-
-    &.child {
-        margin-left: 28px;
-    }
-
-    &:not(:first-child) {
-        margin-top: $gap;
-    }
-
-    .label {
-        display: flex;
-        align-items: center;
-        height: unset;
-        margin-right: 0;
-        white-space: normal;
-    }
-
-    &.text .label,
-    &.textarea .label,
-    &.select .label,
-    &.range .label {
-        margin-bottom: $gap_small;
-    }
-
-    .input {
-        @include input_basic;
-
-        height: $input_height;
-        padding: 0 $input_inner_padding 0 $input_inner_padding;
-        flex-grow: 1;
-        border-radius: 0;
-        box-sizing: border-box;
-    }
-
-    .input_w_and_help_btn {
-        display: flex;
-        align-items: center;
-    }
-
-    .input_w {
-        position: relative;
-        display: flex;
-        flex-shrink: 0;
-
-        &.text,
-        &.textarea,
-        &.select {
-            @include border_transparent;
-        }
-
-        &.is_in_focus_state:not(.select)::before,
-        &.is_in_warn_state:not(.select)::before {
-            @include outline_solid_thick;
-        }
-    }
-}
+input[type='file'] {
+    display: none;
+}
+
+.input_item {
+    padding-right: $main_margin;
+    margin-left: unset;
+    justify-content: unset;
+    align-items: center;
+    flex-direction: column;
+    display: table;
+    width: auto;
+
+    &.child {
+        margin-left: 28px;
+    }
+
+    &:not(:first-child) {
+        margin-top: $gap;
+    }
+
+    .label {
+        display: flex;
+        align-items: center;
+        height: unset;
+        margin-right: 0;
+        white-space: normal;
+    }
+
+    &.text .label,
+    &.textarea .label,
+    &.select .label,
+    &.range .label {
+        margin-bottom: $gap_small;
+    }
+
+    .input {
+        @include input_basic;
+
+        opacity: 1; // needed to keep default color when element is is_enabled
+        height: $input_height;
+        padding: 0 $input_inner_padding 0 $input_inner_padding;
+        flex-grow: 1;
+        border-radius: 0;
+        box-sizing: border-box;
+    }
+
+    .input_w_and_help_btn {
+        display: flex;
+        align-items: center;
+    }
+
+    .input_w {
+        position: relative;
+        display: flex;
+        flex-shrink: 0;
+
+        &.text,
+        &.textarea,
+        &.select {
+            @include border_transparent;
+        }
+
+        &.is_in_focus_state:not(.select)::before,
+        &.is_in_warn_state:not(.select)::before {
+            @include outline_solid_thick;
+        }
+    }
+}

package/scss/shared/inset_border.scss

@@ -1,20 +1,20 @@
-.inset_border {
-    position: relative;
-
-    &::before {
-        @include outline_solid;
-
-        content: '';
-        position: absolute;
-        pointer-events: none;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1;
-    }
-}
-
-.input_item.color .inset_border::before {
-    outline: none;
-}
+.inset_border {
+    position: relative;
+
+    &::before {
+        @include outline_solid;
+
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+    }
+}
+
+.input_item.color .inset_border::before {
+    outline: none;
+}

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