mirror of
https://github.com/dbeaver/cloudbeaver.git
synced 2026-09-24 16:04:36 +08:00
Sychev Andrey
584e5bb260
* refactor: rename css variable in order to be more descriptive and stick to the naming convention * refactor: unify controls, add new global control css variables * feat: add radio component * docs: add radio stories * docs: add input docs story * docs: add simple form story * refactor: change default radio dot size * refactor: change class name for radio children wrapper * refactor: don't reexport inner radio elements * refactor: simplify RadioGroup interface by removing items props, make label(any) required The radiogroup must have an accessible name either by a visible label referenced by aria-labelledby or has a label specified with aria-label. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/radiogroup_role * refactor: use label wrapper for input component to simplify structure * refactor: add classname for radio group container
76 lines
2.1 KiB
CSS
76 lines
2.1 KiB
CSS
@import './_base.css';
|
|
@import './_sizes.css';
|
|
@import './_variants.css';
|
|
|
|
.dbv-kit-input-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dbv-kit-input {
|
|
background: var(--dbv-kit-input-background);
|
|
border-radius: var(--dbv-kit-input-radius);
|
|
border-color: var(--dbv-kit-input-border-color);
|
|
border-width: var(--dbv-kit-input-border-width);
|
|
border-style: var(--dbv-kit-input-border-style);
|
|
color: var(--dbv-kit-input-foreground);
|
|
padding-inline: var(--dbv-kit-input-padding);
|
|
font-size: var(--dbv-kit-input-font-size);
|
|
height: var(--dbv-kit-input-height);
|
|
|
|
&:not(:disabled):hover {
|
|
border-color: var(--dbv-kit-color-control-hover);
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
opacity: var(--dbv-kit-control-disabled-opacity);
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--dbv-kit-input-placeholder-foreground);
|
|
}
|
|
|
|
&:focus-visible,
|
|
&[data-focus-visible] {
|
|
outline: var(--dbv-kit-control-outline-width) solid var(--dbv-kit-control-outline-color);
|
|
outline-offset: var(--dbv-kit-control-outline-offset);
|
|
}
|
|
}
|
|
|
|
.dbv-kit-input__title {
|
|
color: var(--dbv-kit-input-label-foreground);
|
|
padding-inline-start: var(--dbv-kit-input-label-padding);
|
|
margin-block-end: var(--tw-spacing);
|
|
}
|
|
|
|
.dbv-kit-input__title--required {
|
|
&:after {
|
|
content: '*';
|
|
color: var(--dbv-kit-color-control-required);
|
|
margin-inline-start: 0.125rem;
|
|
}
|
|
}
|
|
|
|
/* ---------------------------- */
|
|
/* Sizes */
|
|
|
|
.dbv-kit-input--small {
|
|
--dbv-kit-input-height: var(--dbv-kit-input-small-height);
|
|
--dbv-kit-input-padding: var(--dbv-kit-input-small-padding);
|
|
--dbv-kit-input-font-size: var(--dbv-kit-input-small-font-size);
|
|
}
|
|
|
|
.dbv-kit-input--large {
|
|
--dbv-kit-input-height: var(--dbv-kit-input-large-height);
|
|
--dbv-kit-input-padding: var(--dbv-kit-input-large-padding);
|
|
--dbv-kit-input-font-size: var(--dbv-kit-input-large-font-size);
|
|
}
|
|
|
|
.dbv-kit-input--xlarge {
|
|
--dbv-kit-input-height: var(--dbv-kit-input-xlarge-height);
|
|
--dbv-kit-input-padding: var(--dbv-kit-input-xlarge-padding);
|
|
--dbv-kit-input-font-size: var(--dbv-kit-input-xlarge-font-size);
|
|
}
|