@loftyshaky/shared 0.0.32 → 0.0.36

package/scss/settings/main.scss

@@ -1,19 +1,17 @@
-html,
-.body {
-    height: 100%;
-}
-
-.main {
-    padding: $main_margin_2;
-    padding-left: $main_margin_2;
-    display: block;
-}
-
-.main_2 {
-    @include border;
-
-    display: flex;
-    height: calc(100vh - #{$main_margin_4 + 2});
-    max-width: 1366px - $main_margin_2 + 2px;
-    margin: auto;
-}
+html,
+.body {
+    height: 100%;
+}
+
+.main {
+    padding: $main_margin_2;
+    padding-left: $main_margin_2;
+    display: block;
+}
+
+.main_2 {
+    display: flex;
+    height: calc(100vh - #{$main_margin_4 + 2});
+    max-width: 1366px - $main_margin_2 + 2px;
+    margin: auto;
+}

package/scss/settings/section_btns.scss

@@ -1,40 +1,52 @@
-.section_btns {
-    flex-shrink: 0;
-    display: flex;
-    flex-flow: column;
-    overflow: auto;
-
-    .filler {
-        position: relative;
-        height: 100%;
-    }
-
-    .filler::after,
-    .section_btn::after {
-        content: '';
-        position: absolute;
-        height: 100%;
-        width: 1px;
-        top: 0;
-        right: 0;
-    }
-
-    .section_btn {
-        @include input_basic;
-        @include border_bottom;
-
-        position: relative;
-        text-align: left;
-        padding: 10px;
-        padding-right: 11px;
-        cursor: pointer;
-
-        &.selected {
-            cursor: default;
-        }
-
-        &.selected::after {
-            width: 0;
-        }
-    }
-}
+.section_btns {
+    flex-shrink: 0;
+    display: flex;
+    flex-flow: column;
+    overflow: auto;
+
+    .filler {
+        position: relative;
+        height: 100%;
+    }
+
+    .section_btn {
+        @include input_basic;
+
+        position: relative;
+        text-align: left;
+        padding: 10px;
+        padding-right: 11px;
+        cursor: pointer;
+
+        &.selected {
+            cursor: default;
+        }
+
+        &.selected::before,
+        &:not(.selected):hover::before {
+            content: '';
+            height: 33px;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 3px;
+            margin: auto;
+            width: 3px;
+        }
+
+        &:not(.selected):hover::before {
+            animation: var(--animation);
+            animation-name: fade_in;
+        }
+    }
+}
+
+@keyframes fade_in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

package/scss/settings/sections.scss

@@ -1,22 +1,22 @@
-.sections {
-    flex-grow: 1;
-    height: 100%;
-    overflow: auto;
-}
-
-.section {
-    margin: $main_margin;
-}
-
-.subsection {
-    .name {
-        margin: 0;
-        font-weight: bold;
-        font-size: unset;
-        text-decoration: underline;
-
-        &:not(:first-child) {
-            margin-top: $main_margin;
-        }
-    }
-}
+.sections {
+    flex-grow: 1;
+    height: 100%;
+    overflow: auto;
+}
+
+.section {
+    margin: $main_margin;
+}
+
+.subsection {
+    .name {
+        margin: 0;
+        font-weight: bold;
+        font-size: unset;
+        text-decoration: underline;
+
+        &:not(:first-child) {
+            margin-top: $main_margin;
+        }
+    }
+}

package/scss/settings/transitions.scss

@@ -1,20 +1,20 @@
-.input_item,
-.input_w,
-.help {
-    transition: var(--transition);
-    transition-property: opacity;
-}
-
-.section_btn {
-    transition: var(--transition);
-    transition-property: background-color;
-}
-
-.link {
-    transition: var(--transition);
-    transition-property: color;
-}
-
-.link:active {
-    transition: none;
-}
+.input_item,
+.input_w,
+.help, {
+    transition: var(--transition);
+    transition-property: opacity;
+}
+
+.section_btns .section_btn::before {
+    transition: var(--transition);
+    transition-property: background-color;
+}
+
+.link {
+    transition: var(--transition);
+    transition-property: color;
+}
+
+.link:active {
+    transition: none;
+}

package/scss/shared/all.scss

@@ -1,3 +1,3 @@
-.main {
-    all: initial;
-}
+.main {
+    all: initial;
+}

package/scss/shared/btns.scss

@@ -1,30 +1,30 @@
-.btn {
-    @include btn;
-
-    border-radius: 0;
-    position: relative;
-    vertical-align: bottom;
-
-    &.text {
-        @include btn;
-        @include border_transparent;
-        @include outline_solid;
-
-        display: block;
-        height: $input_height + ($border_width * 2);
-        padding: 0 $input_inner_padding 0 $input_inner_padding;
-        outline-offset: -1px;
-
-        &:not(:first-child) {
-            margin-top: $gap;
-        }
-
-        &::before {
-            display: none;
-        }
-    }
-
-    &.color_ok_btn {
-        margin-left: auto;
-    }
-}
+.btn {
+    @include btn;
+
+    border-radius: 0;
+    position: relative;
+    vertical-align: bottom;
+
+    &.text {
+        @include btn;
+        @include border_transparent;
+        @include outline_solid;
+
+        display: block;
+        height: $input_height + ($border_width * 2);
+        padding: 0 $input_inner_padding 0 $input_inner_padding;
+        outline-offset: -1px;
+
+        &:not(:first-child) {
+            margin-top: $gap;
+        }
+
+        &::before {
+            display: none;
+        }
+    }
+
+    &.color_ok_btn {
+        margin-left: auto;
+    }
+}

package/scss/shared/checkboxes.scss

@@ -1,38 +1,38 @@
-$box_size: 20px;
-$checkmark_size: 16px;
-
-.input_item {
-    &.checkbox {
-        input {
-            display: none;
-        }
-
-        .wrap_label {
-            @include border_transparent;
-
-            margin-right: $input_content_gap;
-        }
-
-        .box {
-            @include center_flex;
-            @include outline_solid;
-
-            height: $box_size;
-            width: $box_size;
-            cursor: pointer;
-        }
-
-        .box svg {
-            width: $checkmark_size;
-            height: $checkmark_size;
-        }
-
-        input + .box svg {
-            opacity: 0;
-        }
-
-        input:checked + .box svg {
-            opacity: 1;
-        }
-    }
-}
+$box_size: 20px;
+$checkmark_size: 16px;
+
+.input_item {
+    &.checkbox {
+        input {
+            display: none;
+        }
+
+        .wrap_label {
+            @include border_transparent;
+
+            margin-right: $input_content_gap;
+        }
+
+        .box {
+            @include center_flex;
+            @include outline_solid;
+
+            height: $box_size;
+            width: $box_size;
+            cursor: pointer;
+        }
+
+        .box svg {
+            width: $checkmark_size;
+            height: $checkmark_size;
+        }
+
+        input + .box svg {
+            opacity: 0;
+        }
+
+        input:checked + .box svg {
+            opacity: 1;
+        }
+    }
+}

package/scss/shared/color_pickers.scss

@@ -1,94 +1,93 @@
-/* stylelint-disable selector-class-pattern */
-
-$pcr_picker_size: 16px;
-$btn_padding: 6px;
-
-.input_item {
-    .pcr-app,
-    .pcr-last-color,
-    .pcr-palette,
-    .pcr-current-color,
-    .pcr-slider,
-    .color_picker_w input {
-        border-radius: 0 !important;
-    }
-
-    .pcr-palette,
-    .pcr-slider {
-        @include border;
-    }
-
-    .color_picker_w {
-        position: absolute;
-        z-index: 2;
-        top: $input_height + $input_content_gap;
-        left: 0;
-        user-select: none;
-
-        input {
-            @include outline_solid;
-
-            filter: initial !important;
-
-            &:not(.pcr-result) {
-                padding: $btn_padding $btn_padding 5px $btn_padding;
-            }
-        }
-    }
-
-    .color_picker {
-        position: fixed;
-    }
-
-    .pcr-app {
-        @include box_shadow_important;
-        @include border;
-
-        position: relative !important;
-        left: initial !important;
-        top: initial !important;
-        width: fit-content !important;
-        padding: $gap !important;
-        transition: none !important;
-    }
-
-    .pcr-picker {
-        width: $pcr_picker_size !important;
-        height: $pcr_picker_size !important;
-        border-width: 1px !important;
-    }
-
-    .pcr-color-preview {
-        @include border;
-
-        margin-bottom: $gap !important;
-    }
-
-    .pcr-swatches {
-        margin-top: 2px !important;
-    }
-
-    .pcr-interaction {
-        margin-left: -2px !important;
-        margin-right: -1px !important;
-        margin-bottom: 1px !important;
-        white-space: nowrap;
-        display: unset !important;
-    }
-
-    .pcr-result {
-        width: calc(100% - 5px);
-        display: block;
-        margin-top: 9px !important;
-        padding-top: 6px !important;
-        margin-bottom: 2px !important;
-    }
-
-    .pcr-color-chooser {
-        margin-top: $gap !important;
-    }
-
-    .pcr-type {
-        margin-right: 5px !important;
-    }
-}
+/* stylelint-disable selector-class-pattern */
+
+$pcr_picker_size: 16px;
+$btn_padding: 6px;
+
+.input_item {
+    .pcr-app,
+    .pcr-last-color,
+    .pcr-palette,
+    .pcr-current-color,
+    .pcr-slider,
+    .color_picker_w input {
+        border-radius: 0 !important;
+    }
+
+    .pcr-palette,
+    .pcr-slider {
+        @include border;
+    }
+
+    .color_picker_w {
+        position: absolute;
+        z-index: 2;
+        top: $input_height + $input_content_gap;
+        left: 0;
+        user-select: none;
+
+        input {
+            @include outline_solid;
+
+            filter: initial !important;
+
+            &:not(.pcr-result) {
+                padding: $btn_padding $btn_padding 5px $btn_padding;
+            }
+        }
+    }
+
+    .color_picker {
+        position: fixed;
+    }
+
+    .pcr-app {
+        @include box_shadow_important;
+
+        position: relative !important;
+        left: initial !important;
+        top: initial !important;
+        width: fit-content !important;
+        padding: $gap !important;
+        transition: none !important;
+    }
+
+    .pcr-picker {
+        width: $pcr_picker_size !important;
+        height: $pcr_picker_size !important;
+        border-width: 1px !important;
+    }
+
+    .pcr-color-preview {
+        @include border;
+
+        margin-bottom: $gap !important;
+    }
+
+    .pcr-swatches {
+        margin-top: 2px !important;
+    }
+
+    .pcr-interaction {
+        margin-left: -2px !important;
+        margin-right: -1px !important;
+        margin-bottom: 1px !important;
+        white-space: nowrap;
+        display: unset !important;
+    }
+
+    .pcr-result {
+        width: calc(100% - 5px);
+        display: block;
+        margin-top: 9px !important;
+        padding-top: 6px !important;
+        margin-bottom: 2px !important;
+    }
+
+    .pcr-color-chooser {
+        margin-top: $gap !important;
+    }
+
+    .pcr-type {
+        margin-right: 5px !important;
+    }
+}