@loftyshaky/shared-app 2.1.0 → 2.7.0

package/scss/shared/mixins.scss

@@ -1,184 +1,193 @@
-$border_width_thick: 2px;
-
-@mixin hidden {
-    position: fixed !important;
-    visibility: hidden !important;
-    top: -99999px !important;
-}
-
-@mixin full_dims {
-    width: 100%;
-    height: 100%;
-}
-
-@mixin top_left {
-    top: 0;
-    left: 0;
-}
-
-@mixin full_spread {
-    @include full_dims;
-    @include top_left;
-}
-
-@mixin max_z_index {
-    z-index: 2147483647;
-}
-
-@mixin center_flex {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-@mixin center_translate {
-    margin: auto;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-
-@mixin center_horizontal_variable_width {
-    // max-width should be set
-    left: calc(-50vw + 50%);
-    right: calc(-50vw + 50%);
-    margin-left: auto;
-    margin-right: auto;
-}
-
-@mixin btn {
-    background-color: transparent;
-    outline: none;
-    cursor: pointer;
-    border: 0;
-    padding: 0;
-}
-
-@mixin text_btn_svg {
-    height: 16px;
-    width: 16px;
-    display: block;
-}
-
-@mixin input_basic {
-    border: 0;
-    outline: none;
-}
-
-$box_shadow_for_mixin:
-    rgb(0 0 0 / 30%) 0 0 2px,
-    rgb(0 0 0 / 30%) 0 4px 8px;
-
-@mixin box_shadow {
-    box-shadow: $box_shadow_for_mixin;
-}
-
-@mixin box_shadow_important {
-    box-shadow: $box_shadow_for_mixin !important;
-}
-
-@mixin border {
-    border-width: $border_width;
-    border-style: solid;
-}
-
-@mixin border_transparent {
-    @include border;
-
-    border-color: transparent;
-}
-
-@mixin border_top {
-    border-top-width: $border_width;
-    border-top-style: solid;
-}
-
-@mixin border_bottom {
-    border-bottom-width: $border_width;
-    border-bottom-style: solid;
-}
-
-@mixin border_left {
-    border-left-width: $border_width;
-    border-left-style: solid;
-}
-
-@mixin border_right {
-    border-right-width: $border_width;
-    border-right-style: solid;
-}
-
-@mixin white_border {
-    border: $border_width solid white;
-}
-
-@mixin black_border {
-    border: $border_width solid $black;
-}
-
-@mixin blue_border {
-    border: $border_width solid $blue;
-}
-
-@mixin outline_solid {
-    outline-width: $border_width;
-    outline-style: solid;
-}
-
-@mixin outline_dashed {
-    outline-width: $border_width;
-    outline-style: dashed;
-}
-
-@mixin outline_solid_thick {
-    outline-width: $border_width_thick;
-    outline-style: solid;
-}
-
-@mixin outline_dashed_thick {
-    outline-width: $border_width_thick;
-    outline-style: dashed;
-}
-
-@mixin folding_text {
-    max-width: 700px;
-    font-size: $font_small;
-    margin: 0;
-    margin-top: $gap_small;
-    white-space: pre-wrap;
-}
-
-@mixin glass {
-    border: 1px solid $yuv;
-    box-shadow: $black_shadow_2;
-}
-
-@mixin link_colors($main, $visited, $hover, $active) {
-    color: $main;
-
-    &:visited {
-        color: $visited;
-    }
-
-    &:hover {
-        color: $hover;
-    }
-
-    &:active {
-        color: $active;
-    }
-}
-
-@mixin backdrop_filter_before {
-    @include full_spread;
-
-    content: '';
-    position: absolute;
-    z-index: -1;
-    backdrop-filter: $glass_blur;
-}
-
-@mixin is_disabled {
-    opacity: 0.3 !important;
-    pointer-events: none !important;
-}
+@use 'vars';
+
+$black_shadow: 0 20px 30px rgb(0 0 0 / 20%);
+$glass_blur: blur(8px);
+$box_shadow_for_mixin:
+    rgb(0 0 0 / 30%) 0 0 2px,
+    rgb(0 0 0 / 30%) 0 4px 8px;
+
+@mixin hidden {
+    position: fixed !important;
+    visibility: hidden !important;
+    top: -99999px !important;
+}
+
+@mixin full_dims {
+    width: 100%;
+    height: 100%;
+}
+
+@mixin top_left {
+    top: 0;
+    left: 0;
+}
+
+@mixin full_spread {
+    @include full_dims;
+    @include top_left;
+}
+
+@mixin max_z_index {
+    z-index: 2147483647;
+}
+
+@mixin center_flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@mixin center_translate {
+    margin: auto;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+@mixin btn {
+    background-color: transparent;
+    outline: none;
+    cursor: pointer;
+    border: 0;
+    padding: 0;
+}
+
+@mixin input_btn_padding_vertical {
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+@mixin no_btn_style {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+}
+
+@mixin text_btn_svg {
+    height: 16px;
+    width: 16px;
+    display: block;
+}
+
+@mixin input_basic {
+    border: 0;
+    outline: none;
+}
+
+@mixin box_shadow {
+    box-shadow: $box_shadow_for_mixin;
+}
+
+@mixin box_shadow_important {
+    box-shadow: $box_shadow_for_mixin !important;
+}
+
+@mixin border {
+    border-width: vars.$border_width;
+    border-style: solid;
+}
+
+@mixin border_transparent {
+    @include border;
+
+    border-color: transparent;
+}
+
+@mixin border_top {
+    border-top-width: vars.$border_width;
+    border-top-style: solid;
+}
+
+@mixin border_bottom {
+    border-bottom-width: vars.$border_width;
+    border-bottom-style: solid;
+}
+
+@mixin border_left {
+    border-left-width: vars.$border_width;
+    border-left-style: solid;
+}
+
+@mixin border_right {
+    border-right-width: vars.$border_width;
+    border-right-style: solid;
+}
+
+@mixin white_border {
+    border: vars.$border_width solid white;
+}
+
+@mixin black_border {
+    border: vars.$border_width solid vars.$black;
+}
+
+@mixin blue_border {
+    border: vars.$border_width solid vars.$blue;
+}
+
+@mixin outline_solid {
+    outline-width: vars.$border_width;
+    outline-style: solid;
+}
+
+@mixin outline_dashed {
+    outline-width: vars.$border_width;
+    outline-style: dashed;
+}
+
+@mixin outline_solid_thick {
+    outline-width: vars.$border_width_thick;
+    outline-style: solid;
+}
+
+@mixin outline_dashed_thick {
+    outline-width: vars.$border_width_thick;
+    outline-style: dashed;
+}
+
+@mixin folding_text {
+    max-width: 700px;
+    font-size: vars.$font_small;
+    margin: 0;
+    margin-top: vars.$gap_small;
+    white-space: pre-wrap;
+}
+
+@mixin glass {
+    border: 1px solid var(--yuv);
+    box-shadow: $black_shadow;
+}
+
+@mixin link_colors($main, $visited, $hover, $active) {
+    color: $main;
+
+    &:visited {
+        color: $visited;
+    }
+
+    &:hover {
+        color: $hover;
+    }
+
+    &:active {
+        color: $active;
+    }
+}
+
+@mixin backdrop_filter_before {
+    @include full_spread;
+
+    content: '';
+    position: absolute;
+    z-index: -1;
+    backdrop-filter: $glass_blur;
+}
+
+@mixin is_disabled {
+    opacity: 0.3 !important;
+    pointer-events: none !important;
+}

package/scss/shared/mods.scss

@@ -1,45 +1,51 @@
-.opacity_1 {
-    opacity: 1 !important;
-}
-
-.opacity_0 {
-    opacity: 0 !important;
-}
-
-.none {
-    display: none !important;
-}
-
-.hidden {
-    @include hidden;
-}
-
-.visibility_hidden {
-    visibility: hidden !important;
-}
-
-.overflow_auto {
-    overflow: auto;
-}
-
-.border {
-    border-width: 1px !important;
-    border-style: solid !important;
-}
-
-.is_disabled:not(.input_item.group) {
-    @include is_disabled;
-}
-
-.pointer_events_none {
-    pointer-events: none !important;
-}
-
-.cursor_default {
-    cursor: default !important;
-}
-
-.fullscreen {
-    width: 100vw;
-    height: 100vh;
-}
+@use 'mixins';
+
+.opacity_1 {
+    opacity: 1 !important;
+}
+
+.opacity_0 {
+    opacity: 0 !important;
+}
+
+.none {
+    display: none !important;
+}
+
+.hidden {
+    @include mixins.hidden;
+}
+
+.visibility_hidden {
+    visibility: hidden !important;
+}
+
+.overflow_auto {
+    overflow: auto;
+}
+
+.border {
+    border-width: 1px !important;
+    border-style: solid !important;
+}
+
+.is_disabled:not(.input_item.group, .side_btn) {
+    @include mixins.is_disabled;
+}
+
+.pointer_events_none {
+    pointer-events: none !important;
+}
+
+.cursor_default {
+    cursor: default !important;
+}
+
+.fullscreen {
+    width: 100vw;
+    height: 100vh;
+}
+
+.margin_bottom_0 {
+    margin-bottom: 0 !important;
+}

package/scss/shared/offers.scss

@@ -1,3 +1,6 @@
+@use 'vars';
+@use 'mixins';
+
 .offers {
     overflow: auto;
     flex-shrink: 0;
@@ -11,7 +14,7 @@
         display: flex;
         justify-content: end;
         order: 1;
-        margin-top: $gap;
+        margin-top: vars.$gap;
 
         .visible {
             position: absolute;
@@ -20,21 +23,36 @@
         .shadow {
             visibility: hidden;
         }
+
+        .btn_w {
+            border-width: 0;
+            display: inline-block;
+
+            &:not(:first-child) {
+                margin-top: 0;
+            }
+
+            &.icon_btn .btn {
+                width: unset;
+                height: unset;
+                background-color: transparent;
+            }
+        }
     }
 
     .offer {
         img {
-            @include border;
+            @include mixins.border;
 
             display: block;
-            margin-right: $main_margin;
+            margin-right: vars.$main_margin;
         }
 
         p {
             margin: 0;
 
             + a {
-                margin-top: $gap_small;
+                margin-top: vars.$gap_small;
                 display: block;
                 width: fit-content;
             }
@@ -45,7 +63,7 @@
         flex-grow: 1;
 
         div {
-            @include outline_solid;
+            @include mixins.outline_solid;
 
             display: inline-block;
             outline-offset: -1px;

package/scss/shared/range.scss

@@ -1,43 +1,51 @@
-$range_track_height: 12px;
-$lower_fill_offset_top: 8px;
-
-.input_item {
-    .range {
-        .input {
-            min-width: inherit;
-            appearance: none;
-            padding: 0;
-            background-color: transparent;
-            cursor: pointer;
-
-            &::-webkit-slider-thumb {
-                appearance: none;
-                width: $range_track_height;
-                height: $input_height;
-                margin-top: -$lower_fill_offset_top;
-            }
-
-            &::-webkit-slider-runnable-track {
-                height: $range_track_height;
-            }
-        }
-
-        .lower_fill {
-            position: absolute;
-            height: $range_track_height;
-            top: $lower_fill_offset_top;
-            pointer-events: none;
-        }
-    }
-
-    .displayed_val {
-        font-size: $font_small;
-        width: max-content;
-        margin-left: auto;
-        margin-top: $gap_small;
-
-        &.help_is_present {
-            margin-right: $input_height;
-        }
-    }
-}
+@use 'vars';
+
+$track_height: 12px;
+$lower_fill_offset_top: 8px;
+
+.input_item {
+    .range {
+        .input {
+            height: vars.$input_height;
+            min-width: inherit;
+            appearance: none;
+            padding: 0;
+            background-color: transparent;
+            cursor: pointer;
+
+            &::-webkit-slider-thumb,
+            &::-moz-range-thumb {
+                appearance: none;
+                width: $track_height;
+                height: vars.$input_height;
+                margin-top: -$lower_fill_offset_top;
+                border: none;
+                border-radius: 0;
+            }
+
+            &::-webkit-slider-runnable-track,
+            &::-moz-range-track {
+                height: $track_height;
+            }
+        }
+
+        .lower_fill {
+            position: absolute;
+            height: $track_height;
+            top: $lower_fill_offset_top;
+            pointer-events: none;
+            z-index: -1;
+        }
+    }
+
+    .displayed_val {
+        font-size: vars.$font_small;
+        width: max-content;
+        margin-left: auto;
+        margin-top: vars.$gap_small;
+
+        &.help_is_present {
+            margin-right: vars.$input_height;
+        }
+    }
+}

package/scss/shared/scrollbar.scss

@@ -1,3 +1,6 @@
+@use 'vars';
+@use 'mixins';
+
 $thumb_border_left: 5px solid transparent;
 $thumb_border_right: 4px solid transparent;
 
@@ -11,16 +14,16 @@ $thumb_border_right: 4px solid transparent;
     }
 
     &::-webkit-resizer {
-        @include border_top;
-        @include border_left;
+        @include mixins.border_top;
+        @include mixins.border_left;
     }
 
     &::-webkit-scrollbar-track:vertical {
-        @include border_left;
+        @include mixins.border_left;
     }
 
     &::-webkit-scrollbar-track:horizontal {
-        @include border_top;
+        @include mixins.border_top;
     }
 
     &::-webkit-scrollbar-thumb:vertical {