routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+257
@@ -0,0 +1,257 @@
|
||||
@layer vuetify-components {
|
||||
.v-time-picker-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.875rem;
|
||||
margin-inline: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.v-time-picker-controls__text {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.v-time-picker-controls__time {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
.v-time-picker-controls__time__separator {
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.v-time-picker--density-compact .v-time-picker-controls__time__separator {
|
||||
font-weight: bold;
|
||||
}
|
||||
.v-time-picker--density-default .v-time-picker-controls__time__separator {
|
||||
font-size: 56px;
|
||||
line-height: 74px;
|
||||
}
|
||||
.v-time-picker--variant-input .v-time-picker--density-default .v-time-picker-controls__time__separator {
|
||||
line-height: 64px;
|
||||
}
|
||||
.v-time-picker-controls__time--with-seconds .v-time-picker--density-default .v-time-picker-controls__time__separator {
|
||||
height: 80px;
|
||||
font-size: 56px;
|
||||
}
|
||||
.v-time-picker--density-comfortable .v-time-picker-controls__time__separator {
|
||||
font-size: 40px;
|
||||
line-height: 58px;
|
||||
}
|
||||
.v-time-picker--variant-input .v-time-picker--density-comfortable .v-time-picker-controls__time__separator {
|
||||
line-height: 48px;
|
||||
}
|
||||
.v-time-picker-controls__time--with-seconds .v-time-picker--density-comfortable .v-time-picker-controls__time__separator {
|
||||
height: 64px;
|
||||
font-size: 40px;
|
||||
}
|
||||
.v-time-picker--density-compact .v-time-picker-controls__time__separator {
|
||||
font-size: 32px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.v-time-picker--variant-input .v-time-picker--density-compact .v-time-picker-controls__time__separator {
|
||||
line-height: 40px;
|
||||
}
|
||||
.v-time-picker-controls__time--with-seconds .v-time-picker--density-compact .v-time-picker-controls__time__separator {
|
||||
height: 56px;
|
||||
font-size: 32px;
|
||||
}
|
||||
.v-time-picker-controls__time__field {
|
||||
width: 96px;
|
||||
}
|
||||
.v-time-picker-controls__time__field .v-field {
|
||||
width: 96px;
|
||||
background-color: rgb(var(--v-theme-surface-light));
|
||||
color: inherit;
|
||||
transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.v-time-picker-controls__time__field .v-field > .v-field__overlay {
|
||||
opacity: 0.04;
|
||||
}
|
||||
.v-time-picker-controls__time__field--active .v-field > .v-field__overlay {
|
||||
opacity: calc((0.04 + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
.v-time-picker--variant-input .v-time-picker-controls__time__field {
|
||||
width: 96px;
|
||||
}
|
||||
.v-time-picker--variant-input .v-time-picker-controls__time__field .v-field {
|
||||
width: 96px;
|
||||
}
|
||||
.v-time-picker-controls__time--with-seconds .v-time-picker-controls__time__field {
|
||||
width: 64px;
|
||||
}
|
||||
.v-time-picker--variant-input .v-time-picker-controls__time--with-seconds .v-time-picker-controls__time__field {
|
||||
width: 64px;
|
||||
}
|
||||
.v-time-picker-controls__time__field .v-field__input {
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
align-self: center;
|
||||
}
|
||||
.v-time-picker-controls__time__field .v-field__input:focus::placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
.v-time-picker-controls__time__field.v-input > .v-input__details {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.0333333333em;
|
||||
padding-inline: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
.v-time-picker-controls__time__field.v-input > .v-input__details > .v-messages {
|
||||
opacity: 1;
|
||||
}
|
||||
.v-time-picker-controls__time__field.v-input--error .v-field__input {
|
||||
color: rgb(var(--v-theme-error));
|
||||
}
|
||||
.v-time-picker-controls__ampm {
|
||||
margin-left: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.v-time-picker-controls__ampm--readonly {
|
||||
pointer-events: none;
|
||||
}
|
||||
.v-time-picker-controls__ampm--readonly .v-picker__title__btn.v-picker__title__btn--active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.v-time-picker-controls__ampm__btn.v-btn {
|
||||
min-width: 52px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.v-time-picker-controls__ampm__btn.v-btn.v-time-picker-controls__ampm__am {
|
||||
border-radius: 4px 4px 0 0;
|
||||
border: 1px solid;
|
||||
}
|
||||
.v-time-picker-controls__ampm__btn.v-btn.v-time-picker-controls__ampm__pm {
|
||||
border-radius: 0 0 4px 4px;
|
||||
border: 1px solid;
|
||||
border-top: none;
|
||||
}
|
||||
.v-time-picker-controls__ampm__btn.v-btn__active {
|
||||
background: rgb(var(--v-theme-primary));
|
||||
}
|
||||
.v-time-picker--density-default .v-time-picker-controls__time__field .v-input__control {
|
||||
height: 80px;
|
||||
}
|
||||
.v-time-picker--density-default .v-time-picker-controls__time__field .v-input__control .v-field {
|
||||
font-size: 56px;
|
||||
}
|
||||
.v-time-picker--density-default .v-time-picker-controls__time__field .v-input__control .v-field .v-field__input {
|
||||
min-height: 80px;
|
||||
}
|
||||
.v-time-picker--density-default.v-time-picker--variant-input .v-time-picker-controls__time__field .v-input__control {
|
||||
height: 72px;
|
||||
}
|
||||
.v-time-picker--density-default.v-time-picker--variant-input .v-time-picker-controls__time__field .v-input__control .v-field {
|
||||
font-size: 44px;
|
||||
}
|
||||
.v-time-picker--density-default.v-time-picker--variant-input .v-time-picker-controls__time__field .v-input__control .v-field .v-field__input {
|
||||
min-height: 72px;
|
||||
}
|
||||
.v-time-picker--density-default .v-time-picker-controls__time--with-seconds .v-time-picker-controls__time__field .v-field {
|
||||
font-size: 40px;
|
||||
}
|
||||
.v-time-picker--density-default .v-time-picker-controls__ampm__btn.v-btn {
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
}
|
||||
.v-time-picker--density-default.v-time-picker--variant-input .v-time-picker-controls__ampm__btn.v-btn {
|
||||
height: 36px;
|
||||
}
|
||||
.v-time-picker--density-comfortable .v-time-picker-controls__time__field .v-input__control {
|
||||
height: 64px;
|
||||
}
|
||||
.v-time-picker--density-comfortable .v-time-picker-controls__time__field .v-input__control .v-field {
|
||||
font-size: 40px;
|
||||
}
|
||||
.v-time-picker--density-comfortable .v-time-picker-controls__time__field .v-input__control .v-field .v-field__input {
|
||||
min-height: 64px;
|
||||
}
|
||||
.v-time-picker--density-comfortable.v-time-picker--variant-input .v-time-picker-controls__time__field .v-input__control {
|
||||
height: 56px;
|
||||
}
|
||||
.v-time-picker--density-comfortable.v-time-picker--variant-input .v-time-picker-controls__time__field .v-input__control .v-field {
|
||||
font-size: 32px;
|
||||
}
|
||||
.v-time-picker--density-comfortable.v-time-picker--variant-input .v-time-picker-controls__time__field .v-input__control .v-field .v-field__input {
|
||||
min-height: 56px;
|
||||
}
|
||||
.v-time-picker--density-comfortable .v-time-picker-controls__time--with-seconds .v-time-picker-controls__time__field .v-field {
|
||||
font-size: 32px;
|
||||
}
|
||||
.v-time-picker--density-comfortable .v-time-picker-controls__ampm__btn.v-btn {
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
}
|
||||
.v-time-picker--density-comfortable.v-time-picker--variant-input .v-time-picker-controls__ampm__btn.v-btn {
|
||||
height: 28px;
|
||||
}
|
||||
.v-time-picker--density-compact .v-time-picker-controls__time__field .v-input__control {
|
||||
height: 56px;
|
||||
}
|
||||
.v-time-picker--density-compact .v-time-picker-controls__time__field .v-input__control .v-field {
|
||||
font-size: 32px;
|
||||
}
|
||||
.v-time-picker--density-compact .v-time-picker-controls__time__field .v-input__control .v-field .v-field__input {
|
||||
min-height: 56px;
|
||||
}
|
||||
.v-time-picker--density-compact.v-time-picker--variant-input .v-time-picker-controls__time__field .v-input__control {
|
||||
height: 48px;
|
||||
}
|
||||
.v-time-picker--density-compact.v-time-picker--variant-input .v-time-picker-controls__time__field .v-input__control .v-field {
|
||||
font-size: 26px;
|
||||
}
|
||||
.v-time-picker--density-compact.v-time-picker--variant-input .v-time-picker-controls__time__field .v-input__control .v-field .v-field__input {
|
||||
min-height: 48px;
|
||||
}
|
||||
.v-time-picker--density-compact .v-time-picker-controls__time--with-seconds .v-time-picker-controls__time__field .v-field {
|
||||
font-size: 28px;
|
||||
}
|
||||
.v-time-picker--density-compact .v-time-picker-controls__ampm__btn.v-btn {
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
}
|
||||
.v-time-picker--density-compact.v-time-picker--variant-input .v-time-picker-controls__ampm__btn.v-btn {
|
||||
height: 24px;
|
||||
}
|
||||
.v-picker__title--landscape .v-time-picker-controls {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.v-picker__title--landscape .v-time-picker-controls__time {
|
||||
text-align: right;
|
||||
}
|
||||
.v-picker__title--landscape .v-time-picker-controls__time .v-picker__title__btn,
|
||||
.v-picker__title--landscape .v-time-picker-controls__time span {
|
||||
height: 55px;
|
||||
font-size: 55px;
|
||||
}
|
||||
.v-picker__title--landscape .v-time-picker-controls__ampm {
|
||||
margin: 16px 0 0;
|
||||
align-self: initial;
|
||||
text-align: center;
|
||||
}
|
||||
.v-picker--time .v-picker__title--landscape {
|
||||
padding: 0;
|
||||
}
|
||||
.v-picker--time .v-picker__title--landscape .v-time-picker-controls__time {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@layer vuetify-final.trumps {
|
||||
@media (forced-colors: active) {
|
||||
.v-time-picker-controls__time__field:has(input:focus-visible) {
|
||||
outline: 2px solid highlight;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.v-time-picker-controls__ampm__btn.v-btn--active {
|
||||
color: highlight;
|
||||
forced-color-adjust: preserve-parent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user