@kelvininc/ui-components
Version:
Kelvin UI Components
63 lines (61 loc) • 1.47 kB
CSS
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate-border {
to {
--rotation: 360deg;
}
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
display: none;
}
:host {
/**
* @prop --wizard-stepper-width: defines how much space the stepper should take up
* @prop --wizard-header-height: defines how much space the header should take up
* @prop --wizard-footer-height: defines how much space the footer should take up
*/
--wizard-stepper-width: 100%;
--wizard-header-height: 66px;
--wizard-footer-height: 68px;
}
.wizard {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.wizard .wizard-header {
width: 100%;
height: var(--wizard-header-height);
padding: var(--spacing-md);
box-sizing: border-box;
}
.wizard .wizard-content {
width: 100%;
height: calc(100% - var(--wizard-footer-height));
}
.wizard .wizard-content.has-header {
height: calc(100% - var(--wizard-footer-height) - var(--wizard-header-height));
}
.wizard .wizard-footer {
width: 100%;
height: var(--wizard-footer-height);
display: flex;
align-items: flex-end;
}
.wizard .wizard-footer kv-wizard-footer {
--stepper-width: var(--wizard-stepper-width);
width: 100%;
}