Adjust Dropdown CSS to Match Design
This commit is contained in:
copecone committed
1 parent
04a5350587
commit
a1eaead457
6 files changed
+79
-53
No files matched your search
+6
-5
@@ -1,6 +1,6 @@
|
||||
<div class="container">
|
||||
<h1>AEF Component Test</h1>
|
||||
|
||||
|
||||
<section>
|
||||
<h2>Switch Component</h2>
|
||||
<switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
|
||||
@@ -9,10 +9,11 @@
|
||||
|
||||
<section>
|
||||
<h2>Dropdown Component</h2>
|
||||
<dropdown
|
||||
[options]="dropdownOptions"
|
||||
[(selectedValue)]="selectedDropdownValue"
|
||||
(change)="handleDropdownChange($event)">
|
||||
<dropdown
|
||||
[options]="dropdownOptions"
|
||||
[(selectedValue)]="selectedDropdownValue"
|
||||
(change)="handleDropdownChange($event)"
|
||||
icon="language">
|
||||
</dropdown>
|
||||
<p>Selected Value: {{ selectedDropdownValue() }}</p>
|
||||
</section>
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
<div class="dropdown-trigger">
|
||||
<div class="dropdown-box">
|
||||
@if (icon()) {
|
||||
<span class="material-symbols-outlined icon-24 prefix-icon">{{ icon() }}</span>
|
||||
}
|
||||
<span class="placeholder">{{ selectedLabel }}</span>
|
||||
<span class="chevron" [class.open]="isOpen()"></span>
|
||||
<span class="material-symbols-outlined icon-24 chevron" [class.open]="isOpen()">keyboard_arrow_down</span>
|
||||
</div>
|
||||
|
||||
@if (isOpen()) {
|
||||
<ul class="dropdown-list" role="listbox">
|
||||
@for (option of options(); track option.value; let i = $index) {
|
||||
<li
|
||||
class="dropdown-item"
|
||||
role="option"
|
||||
<li
|
||||
class="dropdown-item"
|
||||
role="option"
|
||||
[class.selected]="option.value === selectedValue()"
|
||||
[class.focused]="i === focusedIndex()"
|
||||
[attr.aria-selected]="option.value === selectedValue()"
|
||||
|
||||
@@ -3,14 +3,13 @@
|
||||
@use "styles/library" as library;
|
||||
|
||||
$dropdown_bg: #FFFFFF;
|
||||
$dropdown_border: #E0E0E0;
|
||||
$dropdown_border_color: oklch(0 0 0 / 20%);
|
||||
$dropdown_hover: #F5F5F5;
|
||||
$dropdown_selected: #FFF4F0;
|
||||
$dropdown_accent: #FF6E37;
|
||||
$dropdown_accent: oklch(0.7086 0.1896 39.86);
|
||||
|
||||
$dropdown_min_width: 150px;
|
||||
$dropdown_height: 40px;
|
||||
$dropdown_padding: (0px, 16px);
|
||||
$dropdown_dimension: (324px, 40px);
|
||||
$dropdown_padding: (10px, 5px);
|
||||
$dropdown_border_radius: 8px;
|
||||
|
||||
$dropdown_animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@@ -18,52 +17,52 @@ $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;
|
||||
|
||||
width: list.nth($dropdown_dimension, 1);
|
||||
padding: 0; margin: 0;
|
||||
|
||||
background-color: $dropdown_bg;
|
||||
border-radius: $dropdown_border_radius;
|
||||
box-shadow: 0 0 0 1px $dropdown_border_color inset;
|
||||
outline: none;
|
||||
|
||||
&:focus-visible {
|
||||
.dropdown-trigger {
|
||||
border-color: $dropdown_accent;
|
||||
box-shadow: 0 0 0 2px rgba($dropdown_accent, 0.2);
|
||||
}
|
||||
box-shadow: 0 0 0 1px $dropdown_border_color inset, 0 0 0 2px white, 0 0 0 4px $dropdown_accent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-trigger {
|
||||
.dropdown-box {
|
||||
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;
|
||||
justify-content: flex-start;
|
||||
padding: list.nth($dropdown_padding, 2) list.nth($dropdown_padding, 1);
|
||||
height: list.nth($dropdown_dimension, 2) - list.nth($dropdown_padding, 2) * 2;
|
||||
|
||||
&:hover {
|
||||
border-color: color.adjust($dropdown_border, $lightness: -10%);
|
||||
border-radius: $dropdown_border_radius;
|
||||
transition: library.append-transition((border-color, box-shadow), $dropdown_animation_duration $dropdown_animation_timing);
|
||||
gap: 8px;
|
||||
|
||||
.prefix-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: auto;
|
||||
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 5px solid #666;
|
||||
margin-left: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transition: transform $dropdown_animation_duration $dropdown_animation_timing;
|
||||
user-select: none;
|
||||
|
||||
&.open {
|
||||
transform: rotate(180deg);
|
||||
@@ -80,7 +79,7 @@ $dropdown_animation_duration: 0.2s;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background-color: $dropdown_bg;
|
||||
border: 1px solid $dropdown_border;
|
||||
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;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Component, input, model, output, signal, HostListener, ElementRef } from '@angular/core'
|
||||
import { Component, input, model, output, signal, HostListener, ElementRef
|
||||
} from '@angular/core'
|
||||
import { CommonModule } from '@angular/common'
|
||||
|
||||
export interface DropdownOption {
|
||||
@@ -29,6 +30,7 @@ export interface DropdownOption {
|
||||
export class Dropdown {
|
||||
options = input<DropdownOption[]>([]);
|
||||
placeholder = input<string>('Select an option');
|
||||
icon = input<string>();
|
||||
selectedValue = model<any>(null);
|
||||
change = output<any>();
|
||||
|
||||
|
||||
+11
-10
@@ -1,13 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>AefComponentTest</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>AefComponentTest</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300,0..1,-50..200" />
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +1,21 @@
|
||||
@forward 'functions';
|
||||
|
||||
.icon-24 {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 300,
|
||||
'GRAD' 0,
|
||||
'opsz' 24;
|
||||
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.icon-40 {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 300,
|
||||
'GRAD' 0,
|
||||
'opsz' 40;
|
||||
|
||||
line-height: 40px;
|
||||
}
|
||||
Reference in new issue
Block a user