diff --git a/angular.json b/angular.json index f12f9d7..95547c3 100644 --- a/angular.json +++ b/angular.json @@ -2,7 +2,8 @@ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "cli": { - "packageManager": "npm" + "packageManager": "npm", + "analytics": false }, "newProjectRoot": "projects", "projects": { diff --git a/src/app/app.scss b/src/app/app.scss index 61ee79f..c34c4ce 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -7,8 +7,8 @@ section { margin-bottom: 40px; padding: 20px; - border: 1px solid #eee; - border-radius: 12px; + border: 2px solid rgba(0, 0, 0, 0.2); + border-radius: 8px; } h1 { diff --git a/src/app/app.ts b/src/app/app.ts index 398a4d6..1e21ef8 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -11,14 +11,12 @@ import { Dropdown, DropdownOption } from './components/dropdown/dropdown'; }) export class App { isToggled = signal(false); - + dropdownOptions: DropdownOption[] = [ - { label: 'Option 1', value: 1 }, - { label: 'Option 2', value: 2 }, - { label: 'Option 3', value: 3 }, - { label: 'Option 4', value: 4 }, + { label: 'English', value: "EN" }, + { label: '한국어', value: "KR" } ]; - + selectedDropdownValue = signal(null); handleToggle(state: boolean) { diff --git a/src/app/components/dropdown/dropdown.scss b/src/app/components/dropdown/dropdown.scss index 49f0619..90870b1 100644 --- a/src/app/components/dropdown/dropdown.scss +++ b/src/app/components/dropdown/dropdown.scss @@ -51,7 +51,6 @@ $dropdown_animation_duration: 0.2s; .placeholder { white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; margin-right: auto; @@ -75,18 +74,29 @@ $dropdown_animation_duration: 0.2s; top: calc(100% + 4px); left: 0; width: 100%; - padding: 4px 0; + padding: 0; margin: 0; list-style: none; background-color: $dropdown_bg; - border: 1px solid $dropdown_border_color; 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; + &::after { + display: inline-block; + + content: ""; + box-shadow: 0 0 0 1px $dropdown_border_color inset; + pointer-events: none; + z-index: 1001; + + position: absolute; + top: 0; left: 0; bottom: 0; right: 0; + border-radius: $dropdown_border_radius; + } + @keyframes slideIn { from { opacity: 0; @@ -100,7 +110,10 @@ $dropdown_animation_duration: 0.2s; } .dropdown-item { - padding: 8px list.nth($dropdown_padding, 2); + display: flex; + align-items: center; + height: 40px; + padding: 0 16px; transition: background-color $dropdown_animation_duration $dropdown_animation_timing; &:hover, &.focused {