Add Dropdown Prototype

2026-03-10 15:19:15 +09:00
1 parent c9461bd910
commit 9f4ed96190
@@ -0,0 +1,116 @@
+@use "sass:list";
+@use "sass:color";
+@use "styles/library" as library;
+
+$dropdown_bg: #FFFFFF;
+$dropdown_border: #E0E0E0;
+$dropdown_hover: #F5F5F5;
+$dropdown_selected: #FFF4F0;
+$dropdown_accent: #FF6E37;
+
+$dropdown_min_width: 150px;
+$dropdown_height: 40px;
+$dropdown_padding: (0px, 16px);
+$dropdown_border_radius: 8px;
+
+$dropdown_animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
+$dropdown_animation_duration: 0.2s;
+
+:host {
+  display: inline-block;
+  min-width: $dropdown_min_width;
+  position: relative;
+  font-family: inherit;
+  font-size: 14px;
+  color: #333;
+  cursor: pointer;
+  outline: none;
+
+  &:focus-visible {
+    .dropdown-trigger {
+      border-color: $dropdown_accent;
+      box-shadow: 0 0 0 2px rgba($dropdown_accent, 0.2);
+    }
+  }
+}
+
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: $dropdown_height;
+  padding: 0 list.nth($dropdown_padding, 2);
+  background-color: $dropdown_bg;
+  border: 1px solid $dropdown_border;
+  border-radius: $dropdown_border_radius;
+  transition: border-color $dropdown_animation_duration $dropdown_animation_timing,
+              box-shadow $dropdown_animation_duration $dropdown_animation_timing;
+
+  &:hover {
+    border-color: color.adjust($dropdown_border, $lightness: -10%);
+  }
+
+  .placeholder {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .chevron {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid #666;
+    margin-left: 8px;
+    transition: transform $dropdown_animation_duration $dropdown_animation_timing;
+
+    &.open {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.dropdown-list {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  width: 100%;
+  padding: 4px 0;
+  margin: 0;
+  list-style: none;
+  background-color: $dropdown_bg;
+  border: 1px solid $dropdown_border;
+  border-radius: $dropdown_border_radius;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  max-height: 200px;
+  overflow-y: auto;
+  animation: slideIn $dropdown_animation_duration $dropdown_animation_timing;
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+.dropdown-item {
+  padding: 8px list.nth($dropdown_padding, 2);
+  transition: background-color $dropdown_animation_duration $dropdown_animation_timing;
+
+  &:hover, &.focused {
+    background-color: $dropdown_hover;
+  }
+
+  &.selected {
+    background-color: $dropdown_selected;
+    color: $dropdown_accent;
+    font-weight: 600;
+  }
+}