Removed component
This commit is contained in:
parent
ceb65421eb
commit
c57727e20a
2 changed files with 0 additions and 176 deletions
|
|
@ -1,147 +0,0 @@
|
||||||
.aa
|
|
||||||
font-size: 5rem
|
|
||||||
|
|
||||||
.combobox__control
|
|
||||||
display: inline-flex
|
|
||||||
justify-content: space-between
|
|
||||||
width: 200px
|
|
||||||
border-radius: 6px
|
|
||||||
font-size: 16px
|
|
||||||
line-height: 1
|
|
||||||
outline: none
|
|
||||||
background-color: white
|
|
||||||
border: 1px solid hsl(240 6% 90%)
|
|
||||||
color: hsl(240 4% 16%)
|
|
||||||
transition: border-color 250ms, color 250ms
|
|
||||||
|
|
||||||
&[data-invalid]
|
|
||||||
border-color: hsl(0 72% 51%)
|
|
||||||
color: hsl(0 72% 51%)
|
|
||||||
|
|
||||||
&_multi
|
|
||||||
width: 100%
|
|
||||||
min-width: 200px
|
|
||||||
max-width: 300px
|
|
||||||
|
|
||||||
.combobox__input
|
|
||||||
appearance: none
|
|
||||||
display: inline-flex
|
|
||||||
min-width: 0
|
|
||||||
min-height: 40px
|
|
||||||
padding-left: 16px
|
|
||||||
font-size: 16px
|
|
||||||
background: transparent
|
|
||||||
border-top-left-radius: 6px
|
|
||||||
border-bottom-left-radius: 6px
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
&::placeholder
|
|
||||||
color: hsl(240 4% 46%)
|
|
||||||
|
|
||||||
.combobox__trigger
|
|
||||||
appearance: none
|
|
||||||
display: inline-flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
width: auto
|
|
||||||
outline: none
|
|
||||||
border-top-right-radius: 6px
|
|
||||||
border-bottom-right-radius: 6px
|
|
||||||
padding: 0 10px
|
|
||||||
background-color: hsl(240 5% 96%)
|
|
||||||
border-left: 1px solid hsl(240 6% 90%)
|
|
||||||
color: hsl(240 4% 16%)
|
|
||||||
font-size: 16px
|
|
||||||
line-height: 0
|
|
||||||
transition: 250ms background-color
|
|
||||||
|
|
||||||
.combobox__icon
|
|
||||||
height: 20px
|
|
||||||
width: 20px
|
|
||||||
flex: 0 0 20px
|
|
||||||
|
|
||||||
.combobox__description
|
|
||||||
margin-top: 8px
|
|
||||||
color: hsl(240 5% 26%)
|
|
||||||
font-size: 12px
|
|
||||||
user-select: none
|
|
||||||
|
|
||||||
.combobox__error-message
|
|
||||||
margin-top: 8px
|
|
||||||
color: hsl(0 72% 51%)
|
|
||||||
font-size: 12px
|
|
||||||
user-select: none
|
|
||||||
|
|
||||||
.combobox__content
|
|
||||||
background-color: white
|
|
||||||
border-radius: 6px
|
|
||||||
border: 1px solid hsl(240 6% 90%)
|
|
||||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
|
|
||||||
// transform-origin: var(--kb-combobox-content-transform-origin)
|
|
||||||
animation: contentHide 250ms ease-in forwards
|
|
||||||
|
|
||||||
&[data-expanded]
|
|
||||||
animation: contentShow 250ms ease-out
|
|
||||||
|
|
||||||
.combobox__listbox
|
|
||||||
overflow-y: auto
|
|
||||||
max-height: 360px
|
|
||||||
padding: 8px
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
.combobox__item
|
|
||||||
font-size: 16px
|
|
||||||
line-height: 1
|
|
||||||
color: hsl(240 4% 16%)
|
|
||||||
border-radius: 4px
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: space-between
|
|
||||||
height: 32px
|
|
||||||
padding: 0 8px
|
|
||||||
position: relative
|
|
||||||
user-select: none
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
&[data-disabled]
|
|
||||||
color: hsl(240 5% 65%)
|
|
||||||
opacity: 0.5
|
|
||||||
pointer-events: none
|
|
||||||
|
|
||||||
&[data-highlighted]
|
|
||||||
outline: none
|
|
||||||
background-color: hsl(200 98% 39%)
|
|
||||||
color: white
|
|
||||||
|
|
||||||
.combobox__section
|
|
||||||
padding: 8px 0 0 8px
|
|
||||||
font-size: 14px
|
|
||||||
line-height: 32px
|
|
||||||
color: hsl(240 4% 46%)
|
|
||||||
|
|
||||||
.combobox__item-indicator
|
|
||||||
height: 20px
|
|
||||||
width: 20px
|
|
||||||
display: inline-flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
|
|
||||||
@keyframes contentShow
|
|
||||||
from
|
|
||||||
opacity: 0
|
|
||||||
transform: translateY(-8px)
|
|
||||||
|
|
||||||
to
|
|
||||||
opacity: 1
|
|
||||||
transform: translateY(0)
|
|
||||||
|
|
||||||
@keyframes contentHide
|
|
||||||
from
|
|
||||||
opacity: 1
|
|
||||||
transform: translateY(0)
|
|
||||||
|
|
||||||
to
|
|
||||||
opacity: 0
|
|
||||||
transform: translateY(-8px)
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import './RegistrationForm.sass'
|
|
||||||
import { Button, Logo, Link, Box, Page, Form, Row, Column, Image, Display, Padding } from '../../components'
|
|
||||||
import { ofetch } from 'ofetch'
|
|
||||||
import { Combobox } from '@kobalte/core/combobox'
|
|
||||||
import { AiTwotoneCheckCircle } from 'solid-icons/ai'
|
|
||||||
import { TiArrowSortedDown } from 'solid-icons/ti'
|
|
||||||
import { createMemo, createSignal, createUniqueId, For, Show } from 'solid-js'
|
|
||||||
|
|
||||||
const OPTIONS = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
|
|
||||||
|
|
||||||
// const api = import.meta.env.BACKEND
|
|
||||||
// const assessors = await ofetch(api + 'get-list-assessors', { parseResponse: JSON.parse })
|
|
||||||
// const assessorsIDList = assessors.result
|
|
||||||
// const assessorsNameList = assessors.result2
|
|
||||||
|
|
||||||
// const [sample, setSample] = createSignal('')
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* <Form> */}
|
|
||||||
{/* <span>{OPTIONS}</span>
|
|
||||||
<span>{assessorsNameList}</span> */}
|
|
||||||
|
|
||||||
{/* <span>{sample()}</span> */}
|
|
||||||
{/* </Form> */}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue