@vsn-ux/gaia-styles 0.6.0 → 0.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all-10pt.css +1 -2
- package/dist/all-no-reset-10pt.css +1 -2
- package/dist/all-no-reset.css +1 -2
- package/dist/all.css +1 -2
- package/dist/components/tabs.css +1 -2
- package/dist/components.css +1 -2
- package/dist/docs/Avatar.md +52 -0
- package/dist/docs/Badge.md +60 -0
- package/dist/docs/Button.md +60 -0
- package/dist/docs/Calendar.md +468 -0
- package/dist/docs/Card.md +57 -0
- package/dist/docs/Checkbox.md +112 -0
- package/dist/docs/Container.md +62 -0
- package/dist/docs/Datepicker.md +107 -0
- package/dist/docs/Dropdown.md +152 -0
- package/dist/docs/FormField.md +101 -0
- package/dist/docs/Input.md +84 -0
- package/dist/docs/Link.md +109 -0
- package/dist/docs/Menu.md +316 -0
- package/dist/docs/Modal.md +337 -0
- package/dist/docs/Notification.md +341 -0
- package/dist/docs/ProgressBar.md +87 -0
- package/dist/docs/ProgressIndicator.md +217 -0
- package/dist/docs/QuickFilterButton.md +74 -0
- package/dist/docs/Radio.md +106 -0
- package/dist/docs/SegmentedControl.md +69 -0
- package/dist/docs/Select.md +411 -0
- package/dist/docs/Switch.md +97 -0
- package/dist/docs/Tabs.md +129 -0
- package/dist/docs/Tag.md +154 -0
- package/dist/docs/TextArea.md +51 -0
- package/dist/docs/TextSize.md +63 -0
- package/dist/docs/Tooltip.md +95 -0
- package/package.json +3 -1
- package/src/styles/components/tabs.css +1 -1
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# Quick Filter Button
|
|
2
|
+
|
|
3
|
+
## Visual Structure
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
ga-quick-filter-button [--selected|--transparent|--disabled]
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Elements Hierarchy
|
|
10
|
+
|
|
11
|
+
### Core Block
|
|
12
|
+
|
|
13
|
+
- `ga-quick-filter-button` - Main container for the quick filter button component used for filtering content
|
|
14
|
+
|
|
15
|
+
### Modifiers
|
|
16
|
+
|
|
17
|
+
- `ga-quick-filter-button--selected` - Selected state indicating the filter is active
|
|
18
|
+
- `ga-quick-filter-button--transparent` - Transparent variant for use on colored backgrounds
|
|
19
|
+
- `ga-quick-filter-button--disabled` - An explicit disabled state (can be omitted if used on a native `<button>` element)
|
|
20
|
+
|
|
21
|
+
## Examples
|
|
22
|
+
|
|
23
|
+
### Default
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<button class="ga-quick-filter-button">Button</button>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### With Icon
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<button class="ga-quick-filter-button">
|
|
33
|
+
<!-- icon: user-round-plus, size=24, class="ga-icon" -->
|
|
34
|
+
Button
|
|
35
|
+
</button>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Selected
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<button class="ga-quick-filter-button ga-quick-filter-button--selected">
|
|
42
|
+
Button
|
|
43
|
+
</button>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Selected with Icon
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<button class="ga-quick-filter-button ga-quick-filter-button--selected">
|
|
50
|
+
<!-- icon: user-round-plus, size=24, class="ga-icon" -->
|
|
51
|
+
Button
|
|
52
|
+
</button>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Transparent
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<button class="ga-quick-filter-button ga-quick-filter-button--transparent">
|
|
59
|
+
<!-- icon: user-round-plus, size=24, class="ga-icon" -->
|
|
60
|
+
Button
|
|
61
|
+
</button>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Disabled
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<button
|
|
68
|
+
class="ga-quick-filter-button ga-quick-filter-button--disabled"
|
|
69
|
+
disabled=""
|
|
70
|
+
>
|
|
71
|
+
<!-- icon: user-round-plus, size=24, class="ga-icon" -->
|
|
72
|
+
Button
|
|
73
|
+
</button>
|
|
74
|
+
```
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
# Radio Button
|
|
2
|
+
|
|
3
|
+
## Visual Structure
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
ga-radio-button [--invalid]
|
|
7
|
+
├── ga-radio-button__native
|
|
8
|
+
├── ga-radio-button__marker
|
|
9
|
+
└── ga-radio-button__label (optional)
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Elements Hierarchy
|
|
13
|
+
|
|
14
|
+
### Core Block
|
|
15
|
+
|
|
16
|
+
- `ga-radio-button` - Main container for the radio button component
|
|
17
|
+
|
|
18
|
+
### Mandatory Elements
|
|
19
|
+
|
|
20
|
+
- `ga-radio-button__native` - Native HTML radio input element (visually hidden)
|
|
21
|
+
- `ga-radio-button__marker` - Visual circular marker for the radio button state
|
|
22
|
+
|
|
23
|
+
### Optional Elements
|
|
24
|
+
|
|
25
|
+
- `ga-radio-button__label` - Text label for the radio button
|
|
26
|
+
|
|
27
|
+
### Modifiers
|
|
28
|
+
|
|
29
|
+
- `ga-radio-button--invalid` - Styles the radio button to indicate an invalid/error state
|
|
30
|
+
|
|
31
|
+
## Additional Elements
|
|
32
|
+
|
|
33
|
+
- `ga-radio-group` - Container for grouping multiple radio buttons with proper spacing
|
|
34
|
+
|
|
35
|
+
## Examples
|
|
36
|
+
|
|
37
|
+
### Default
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<label class="ga-radio-button">
|
|
41
|
+
<input
|
|
42
|
+
type="radio"
|
|
43
|
+
class="ga-radio-button__native"
|
|
44
|
+
name="radio1"
|
|
45
|
+
checked=""
|
|
46
|
+
/>
|
|
47
|
+
<div class="ga-radio-button__marker"></div>
|
|
48
|
+
<div class="ga-radio-button__label">Option A</div>
|
|
49
|
+
</label>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Disabled
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<label class="ga-radio-button">
|
|
56
|
+
<input type="radio" class="ga-radio-button__native" disabled="" checked="" />
|
|
57
|
+
<div class="ga-radio-button__marker"></div>
|
|
58
|
+
<div class="ga-radio-button__label">Option A</div>
|
|
59
|
+
</label>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Invalid
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<label class="ga-radio-button ga-radio-button--invalid">
|
|
66
|
+
<input type="radio" class="ga-radio-button__native" required="" />
|
|
67
|
+
<div class="ga-radio-button__marker"></div>
|
|
68
|
+
<div class="ga-radio-button__label">Option A</div>
|
|
69
|
+
</label>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### No Label
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<div class="ga-radio-button">
|
|
76
|
+
<input type="radio" class="ga-radio-button__native" name="radio2" />
|
|
77
|
+
<div class="ga-radio-button__marker"></div>
|
|
78
|
+
</div>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Radio Group
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<div class="ga-radio-group">
|
|
85
|
+
<label class="ga-radio-button">
|
|
86
|
+
<input
|
|
87
|
+
type="radio"
|
|
88
|
+
class="ga-radio-button__native"
|
|
89
|
+
name="radio3"
|
|
90
|
+
checked=""
|
|
91
|
+
/>
|
|
92
|
+
<div class="ga-radio-button__marker"></div>
|
|
93
|
+
<div class="ga-radio-button__label">Option A</div>
|
|
94
|
+
</label>
|
|
95
|
+
<label class="ga-radio-button">
|
|
96
|
+
<input type="radio" class="ga-radio-button__native" name="radio3" />
|
|
97
|
+
<div class="ga-radio-button__marker"></div>
|
|
98
|
+
<div class="ga-radio-button__label">Option B</div>
|
|
99
|
+
</label>
|
|
100
|
+
<label class="ga-radio-button">
|
|
101
|
+
<input type="radio" class="ga-radio-button__native" name="radio3" />
|
|
102
|
+
<div class="ga-radio-button__marker"></div>
|
|
103
|
+
<div class="ga-radio-button__label">Option C</div>
|
|
104
|
+
</label>
|
|
105
|
+
</div>
|
|
106
|
+
```
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# Segmented Control
|
|
2
|
+
|
|
3
|
+
## Visual Structure
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
ga-segmented-control
|
|
7
|
+
└── ga-segmented-control__button [--selected] [--icon-only]
|
|
8
|
+
└── ga-segmented-control__button-sr-label (optional)
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Elements Hierarchy
|
|
12
|
+
|
|
13
|
+
### Core Block
|
|
14
|
+
|
|
15
|
+
- `ga-segmented-control` - Main container for the entire segmented control component
|
|
16
|
+
|
|
17
|
+
### Mandatory Elements
|
|
18
|
+
|
|
19
|
+
- `ga-segmented-control__button` - Individual button segments within the control
|
|
20
|
+
|
|
21
|
+
### Optional Elements
|
|
22
|
+
|
|
23
|
+
- `ga-segmented-control__button-sr-label` - Hidden label for screen readers when using an icon-only button, alternative to aria-label
|
|
24
|
+
|
|
25
|
+
### Modifiers
|
|
26
|
+
|
|
27
|
+
- `ga-segmented-control__button--icon-only` - Styles the button to only display an icon. Make sure the icon is 16px in size.
|
|
28
|
+
- `ga-segmented-control__button--selected` - Styles the button as currently selected
|
|
29
|
+
|
|
30
|
+
## Examples
|
|
31
|
+
|
|
32
|
+
### Text
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<div class="ga-segmented-control">
|
|
36
|
+
<button
|
|
37
|
+
class="ga-segmented-control__button ga-segmented-control__button--selected"
|
|
38
|
+
>
|
|
39
|
+
All documents
|
|
40
|
+
</button>
|
|
41
|
+
<button class="ga-segmented-control__button">Invoices</button>
|
|
42
|
+
<button class="ga-segmented-control__button">Expense claims</button>
|
|
43
|
+
</div>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Icon
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<div class="ga-segmented-control">
|
|
50
|
+
<button
|
|
51
|
+
class="ga-segmented-control__button ga-segmented-control__button--icon-only ga-segmented-control__button--selected"
|
|
52
|
+
>
|
|
53
|
+
<!-- icon: tree-palm, size=16 -->
|
|
54
|
+
<span class="ga-segmented-control__button-sr-label">Item 1</span>
|
|
55
|
+
</button>
|
|
56
|
+
<button
|
|
57
|
+
class="ga-segmented-control__button ga-segmented-control__button--icon-only"
|
|
58
|
+
>
|
|
59
|
+
<!-- icon: hand, size=16 -->
|
|
60
|
+
<span class="ga-segmented-control__button-sr-label">Item 2</span>
|
|
61
|
+
</button>
|
|
62
|
+
<button
|
|
63
|
+
class="ga-segmented-control__button ga-segmented-control__button--icon-only"
|
|
64
|
+
aria-label="Item 3"
|
|
65
|
+
>
|
|
66
|
+
<!-- icon: shopping-cart, size=16 -->
|
|
67
|
+
</button>
|
|
68
|
+
</div>
|
|
69
|
+
```
|
|
@@ -0,0 +1,411 @@
|
|
|
1
|
+
# Select
|
|
2
|
+
|
|
3
|
+
## Visual Structure
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
ga-select [--empty|--expanded|--invalid|--disabled|--multi|--label-hidden]
|
|
7
|
+
├── ga-select__main-area
|
|
8
|
+
│ ├── ga-select__placeholder (when no value)
|
|
9
|
+
│ ├── ga-select__value (when value(s) selected)
|
|
10
|
+
│ └── ga-select__input (for searchable variant)
|
|
11
|
+
└── ga-select__suffix
|
|
12
|
+
└── ga-select__action-icon
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Elements Hierarchy
|
|
16
|
+
|
|
17
|
+
### Core Block
|
|
18
|
+
|
|
19
|
+
- `ga-select` - Main container for the select component
|
|
20
|
+
|
|
21
|
+
### Mandatory Elements
|
|
22
|
+
|
|
23
|
+
- `ga-select__main-area` - Container for the value, placeholder, and input
|
|
24
|
+
|
|
25
|
+
### Optional Elements
|
|
26
|
+
|
|
27
|
+
- `ga-select__placeholder` - Shown when no value is selected
|
|
28
|
+
- `ga-select__value` - Shown when a value (single) or tags (multi) are selected
|
|
29
|
+
- `ga-select__input` - Input field for searchable variant
|
|
30
|
+
- `ga-select__suffix` - Container for icons (chevron, clear, etc.)
|
|
31
|
+
- `ga-select__action-icon` - Icon indicating dropdown or clear action
|
|
32
|
+
- `ga-tag` - Tag element for each selected value in multi-select
|
|
33
|
+
|
|
34
|
+
### Modifiers
|
|
35
|
+
|
|
36
|
+
- `ga-select--empty` - No value selected
|
|
37
|
+
- `ga-select--expanded` - Dropdown is open
|
|
38
|
+
- `ga-select--invalid` - Validation error
|
|
39
|
+
- `ga-select--disabled` - Disabled state
|
|
40
|
+
- `ga-select--multi` - Multi-select mode
|
|
41
|
+
- `ga-select--label-hidden` - Placeholder remains visible when values are selected (multi-select only)
|
|
42
|
+
|
|
43
|
+
## Examples
|
|
44
|
+
|
|
45
|
+
### Single Select
|
|
46
|
+
|
|
47
|
+
#### Empty
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<div class="ga-select ga-select--empty">
|
|
51
|
+
<div class="ga-select__main-area">
|
|
52
|
+
<div class="ga-select__placeholder">Placeholder</div>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="ga-select__suffix">
|
|
55
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
#### Selected
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<div class="ga-select">
|
|
64
|
+
<div class="ga-select__main-area">
|
|
65
|
+
<div class="ga-select__value">Mercedes</div>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="ga-select__suffix">
|
|
68
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
#### Expanded
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<div class="ga-select ga-select--expanded">
|
|
77
|
+
<div class="ga-select__main-area">
|
|
78
|
+
<div class="ga-select__value">Mercedes</div>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="ga-select__suffix">
|
|
81
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
#### Invalid Empty
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<div class="ga-select ga-select--invalid ga-select--empty">
|
|
90
|
+
<div class="ga-select__main-area">
|
|
91
|
+
<div class="ga-select__placeholder">Placeholder</div>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="ga-select__suffix">
|
|
94
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
#### Invalid Selected
|
|
100
|
+
|
|
101
|
+
```html
|
|
102
|
+
<div class="ga-select ga-select--invalid">
|
|
103
|
+
<div class="ga-select__main-area">
|
|
104
|
+
<div class="ga-select__value">Mercedes</div>
|
|
105
|
+
</div>
|
|
106
|
+
<div class="ga-select__suffix">
|
|
107
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
#### Disabled
|
|
113
|
+
|
|
114
|
+
```html
|
|
115
|
+
<div class="ga-select ga-select--disabled">
|
|
116
|
+
<div class="ga-select__main-area">
|
|
117
|
+
<div class="ga-select__value">Mercedes</div>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="ga-select__suffix">
|
|
120
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
#### Clearable
|
|
126
|
+
|
|
127
|
+
```html
|
|
128
|
+
<div class="ga-select">
|
|
129
|
+
<div class="ga-select__main-area">
|
|
130
|
+
<div class="ga-select__value">Mercedes</div>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="ga-select__suffix">
|
|
133
|
+
<!-- icon: circle-x, size=16, class="ga-icon" -->
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
#### Searchable Empty
|
|
139
|
+
|
|
140
|
+
```html
|
|
141
|
+
<div class="ga-select ga-select--empty ga-select--expanded">
|
|
142
|
+
<div class="ga-select__main-area">
|
|
143
|
+
<input type="text" class="ga-select__input" placeholder="Placeholder" />
|
|
144
|
+
</div>
|
|
145
|
+
<div class="ga-select__suffix">
|
|
146
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
#### Searchable Selected
|
|
152
|
+
|
|
153
|
+
```html
|
|
154
|
+
<div class="ga-select ga-select--expanded">
|
|
155
|
+
<div class="ga-select__main-area">
|
|
156
|
+
<input type="text" class="ga-select__input" placeholder="" />
|
|
157
|
+
<div class="ga-select__value">Mercedes</div>
|
|
158
|
+
</div>
|
|
159
|
+
<div class="ga-select__suffix">
|
|
160
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Multi Select
|
|
166
|
+
|
|
167
|
+
#### Empty
|
|
168
|
+
|
|
169
|
+
```html
|
|
170
|
+
<div class="ga-select ga-select--multi ga-select--empty w-60">
|
|
171
|
+
<div class="ga-select__main-area">
|
|
172
|
+
<div class="ga-select__placeholder">Placeholder</div>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="ga-select__suffix">
|
|
175
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
#### Selected
|
|
181
|
+
|
|
182
|
+
```html
|
|
183
|
+
<div class="ga-select ga-select--multi w-60">
|
|
184
|
+
<div class="ga-select__main-area">
|
|
185
|
+
<div class="ga-select__value">
|
|
186
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
187
|
+
<span class="ga-tag__label">Mercedes</span>
|
|
188
|
+
<div class="ga-tag__separator"></div>
|
|
189
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
190
|
+
</div>
|
|
191
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
192
|
+
<span class="ga-tag__label">BMW</span>
|
|
193
|
+
<div class="ga-tag__separator"></div>
|
|
194
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
195
|
+
</div>
|
|
196
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
197
|
+
<span class="ga-tag__label">Audi</span>
|
|
198
|
+
<div class="ga-tag__separator"></div>
|
|
199
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
200
|
+
</div>
|
|
201
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
202
|
+
<span class="ga-tag__label">Toyota</span>
|
|
203
|
+
<div class="ga-tag__separator"></div>
|
|
204
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
205
|
+
</div>
|
|
206
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
207
|
+
<span class="ga-tag__label">Peugeot</span>
|
|
208
|
+
<div class="ga-tag__separator"></div>
|
|
209
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
210
|
+
</div>
|
|
211
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
212
|
+
<span class="ga-tag__label">Porsche</span>
|
|
213
|
+
<div class="ga-tag__separator"></div>
|
|
214
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
<div class="ga-select__suffix">
|
|
219
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
#### Disabled
|
|
225
|
+
|
|
226
|
+
```html
|
|
227
|
+
<div class="ga-select ga-select--multi ga-select--disabled w-60">
|
|
228
|
+
<div class="ga-select__main-area">
|
|
229
|
+
<div class="ga-select__value">
|
|
230
|
+
<div class="ga-tag ga-tag--interactive-selected-disabled">
|
|
231
|
+
<span class="ga-tag__label">Mercedes</span>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="ga-tag ga-tag--interactive-selected-disabled">
|
|
234
|
+
<span class="ga-tag__label">BMW</span>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="ga-tag ga-tag--interactive-selected-disabled">
|
|
237
|
+
<span class="ga-tag__label">Audi</span>
|
|
238
|
+
</div>
|
|
239
|
+
<div class="ga-tag ga-tag--interactive-selected-disabled">
|
|
240
|
+
<span class="ga-tag__label">Toyota</span>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="ga-tag ga-tag--interactive-selected-disabled">
|
|
243
|
+
<span class="ga-tag__label">Peugeot</span>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="ga-tag ga-tag--interactive-selected-disabled">
|
|
246
|
+
<span class="ga-tag__label">Porsche</span>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
<div class="ga-select__suffix">
|
|
251
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
```
|
|
255
|
+
|
|
256
|
+
#### Clearable
|
|
257
|
+
|
|
258
|
+
```html
|
|
259
|
+
<div class="ga-select ga-select--multi ga-select--expanded w-60">
|
|
260
|
+
<div class="ga-select__main-area">
|
|
261
|
+
<div class="ga-select__value">
|
|
262
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
263
|
+
<span class="ga-tag__label">Mercedes</span>
|
|
264
|
+
<div class="ga-tag__separator"></div>
|
|
265
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
266
|
+
</div>
|
|
267
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
268
|
+
<span class="ga-tag__label">BMW</span>
|
|
269
|
+
<div class="ga-tag__separator"></div>
|
|
270
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
271
|
+
</div>
|
|
272
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
273
|
+
<span class="ga-tag__label">Audi</span>
|
|
274
|
+
<div class="ga-tag__separator"></div>
|
|
275
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
276
|
+
</div>
|
|
277
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
278
|
+
<span class="ga-tag__label">Toyota</span>
|
|
279
|
+
<div class="ga-tag__separator"></div>
|
|
280
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
281
|
+
</div>
|
|
282
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
283
|
+
<span class="ga-tag__label">Peugeot</span>
|
|
284
|
+
<div class="ga-tag__separator"></div>
|
|
285
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
286
|
+
</div>
|
|
287
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
288
|
+
<span class="ga-tag__label">Porsche</span>
|
|
289
|
+
<div class="ga-tag__separator"></div>
|
|
290
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
<div class="ga-select__suffix">
|
|
295
|
+
<!-- icon: circle-x, size=16, class="ga-select__action-icon" -->
|
|
296
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
#### Searchable Empty
|
|
302
|
+
|
|
303
|
+
```html
|
|
304
|
+
<div
|
|
305
|
+
class="ga-select ga-select--multi ga-select--empty ga-select--expanded w-60"
|
|
306
|
+
>
|
|
307
|
+
<div class="ga-select__main-area">
|
|
308
|
+
<input type="text" class="ga-select__input" placeholder="Placeholder" />
|
|
309
|
+
</div>
|
|
310
|
+
<div class="ga-select__suffix">
|
|
311
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
312
|
+
</div>
|
|
313
|
+
</div>
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
#### Searchable Selected
|
|
317
|
+
|
|
318
|
+
```html
|
|
319
|
+
<div class="ga-select ga-select--multi ga-select--expanded w-60">
|
|
320
|
+
<div class="ga-select__main-area">
|
|
321
|
+
<div class="ga-select__value">
|
|
322
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
323
|
+
<span class="ga-tag__label">Mercedes</span>
|
|
324
|
+
<div class="ga-tag__separator"></div>
|
|
325
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
326
|
+
</div>
|
|
327
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
328
|
+
<span class="ga-tag__label">BMW</span>
|
|
329
|
+
<div class="ga-tag__separator"></div>
|
|
330
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
331
|
+
</div>
|
|
332
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
333
|
+
<span class="ga-tag__label">Audi</span>
|
|
334
|
+
<div class="ga-tag__separator"></div>
|
|
335
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
336
|
+
</div>
|
|
337
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
338
|
+
<span class="ga-tag__label">Toyota</span>
|
|
339
|
+
<div class="ga-tag__separator"></div>
|
|
340
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
341
|
+
</div>
|
|
342
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
343
|
+
<span class="ga-tag__label">Peugeot</span>
|
|
344
|
+
<div class="ga-tag__separator"></div>
|
|
345
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
346
|
+
</div>
|
|
347
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
348
|
+
<span class="ga-tag__label">Porsche</span>
|
|
349
|
+
<div class="ga-tag__separator"></div>
|
|
350
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
<input type="text" class="ga-select__input" />
|
|
354
|
+
</div>
|
|
355
|
+
<div class="ga-select__suffix">
|
|
356
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
```
|
|
360
|
+
|
|
361
|
+
#### Label Hidden Selected
|
|
362
|
+
|
|
363
|
+
```html
|
|
364
|
+
<div class="ga-select ga-select--multi ga-select--label-hidden w-60">
|
|
365
|
+
<div class="ga-select__main-area">
|
|
366
|
+
<div class="ga-select__value">
|
|
367
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
368
|
+
<span class="ga-tag__label">Mercedes</span>
|
|
369
|
+
<div class="ga-tag__separator"></div>
|
|
370
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
371
|
+
</div>
|
|
372
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
373
|
+
<span class="ga-tag__label">BMW</span>
|
|
374
|
+
<div class="ga-tag__separator"></div>
|
|
375
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
<div class="ga-select__placeholder">Placeholder</div>
|
|
379
|
+
</div>
|
|
380
|
+
<div class="ga-select__suffix">
|
|
381
|
+
<!-- icon: chevron-down, size=24, class="ga-select__action-icon" -->
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
```
|
|
385
|
+
|
|
386
|
+
#### Label Hidden Searchable Selected
|
|
387
|
+
|
|
388
|
+
```html
|
|
389
|
+
<div
|
|
390
|
+
class="ga-select ga-select--multi ga-select--label-hidden ga-select--expanded w-60"
|
|
391
|
+
>
|
|
392
|
+
<div class="ga-select__main-area">
|
|
393
|
+
<div class="ga-select__value">
|
|
394
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
395
|
+
<span class="ga-tag__label">Mercedes</span>
|
|
396
|
+
<div class="ga-tag__separator"></div>
|
|
397
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
398
|
+
</div>
|
|
399
|
+
<div class="ga-tag ga-tag--interactive-selected">
|
|
400
|
+
<span class="ga-tag__label">BMW</span>
|
|
401
|
+
<div class="ga-tag__separator"></div>
|
|
402
|
+
<!-- icon: x, size=16, class="ga-tag__icon" -->
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
<input type="text" class="ga-select__input" placeholder="Placeholder" />
|
|
406
|
+
</div>
|
|
407
|
+
<div class="ga-select__suffix">
|
|
408
|
+
<!-- icon: chevron-up, size=24, class="ga-select__action-icon" -->
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
```
|