initial

2026-03-17 13:24:22 +03:00
commit 82e5ac9d81
554 changed files with 29637 additions and 0 deletions
--- a/layers/ui/components/dropdown/styles.scss
+++ b/layers/ui/components/dropdown/styles.scss
@@ -0,0 +1,79 @@
+@use '../../styles/mixins' as *;
+@use '../../styles/variables' as *;
+@use 'sass:color';
+
+.ui-dropdown {
+  $self: &;
+
+  position: relative;
+  display: inline-flex;
+
+  &__overlay {
+    position: fixed;
+    z-index: 6999;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    transition: background-color .2s ease-out;
+
+    &.is-active {
+      background-color: color.change($clr-black, $alpha: 0.15);
+    }
+  }
+
+  &__popper {
+    min-width: 170px;
+    z-index: 7000;
+  }
+
+  &__dropdown {
+    //overflow: hidden;
+    border-radius: 12px;
+    background-color: $clr-white;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+.ui-dropdown-item {
+  @include txt-m-m('dropdown-item');
+
+  display: flex;
+  align-items: center;
+  padding: var(--dropdown-item-padding, 12px 16px);
+  background-color: $clr-white;
+  transition: background-color .2s ease-out;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 8px;
+  outline: none;
+
+  &:hover,
+  &:focus {
+    background-color: $clr-grey-200;
+  }
+
+  &:active,
+  &.is-active {
+    background-color: $clr-grey-300;
+  }
+
+  &__icon {
+    margin-right: 8px;
+  }
+}
+
+.ui-dropdown-separator {
+  height: 1px;
+  width: 100%;
+  background-color: $clr-grey-200;
+  margin-block: 12px;
+}
+