routie dev init since i didn't adhere to any proper guidance up until now

2026-04-29 22:27:29 -06:00
commit e1dabb71e2
15301 changed files with 3562618 additions and 0 deletions
@@ -0,0 +1,84 @@
+@use 'sass:selector'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+@include tools.layer('components')
+  /* region BLOCK */
+  .v-text-field
+    input
+      color: inherit
+      flex: $text-field-input-flex
+      transition: $text-field-input-transition
+      min-width: 0
+
+      &:focus,
+      &:active
+        outline: none
+
+      // Remove Firefox red outline
+      &:invalid
+        box-shadow: none
+
+    .v-field
+      cursor: text
+
+      &:not(.v-field--reverse)
+        .v-field__input
+          @at-root #{selector.append('.v-text-field--prefixed', &)}
+            --v-field-padding-start: #{$text-field-input-padding-start}
+
+          @at-root #{selector.append('.v-text-field--suffixed', &)}
+            --v-field-padding-end: #{$text-field-input-padding-end}
+
+      &.v-field--reverse
+        .v-field__input
+          @at-root #{selector.append('.v-text-field--prefixed', &)}
+            --v-field-padding-end: #{$text-field-input-padding-start}
+
+          @at-root #{selector.append('.v-text-field--suffixed', &)}
+            --v-field-padding-start: #{$text-field-input-padding-end}
+
+      &:not(.v-field--no-label, .v-field--active)
+        input::placeholder
+          opacity: 0
+
+    .v-field--single-line
+      input
+        transition: none
+
+  /* endregion */
+  /* region ELEMENTS */
+  .v-text-field
+    &__prefix,
+    &__suffix
+      align-items: center
+      color: $text-field-affix-color
+      cursor: default
+      display: flex
+      opacity: 0
+      transition: inherit
+      white-space: nowrap
+      min-height: $field-input-min-height
+      padding-top: calc(var(--v-field-padding-top, 4px) + var(--v-input-padding-top, 0))
+      padding-bottom: var(--v-field-padding-bottom, 6px)
+
+      .v-field--active &
+        opacity: 1
+
+      .v-field--disabled &
+        color: $text-field-disabled-affix-color
+
+    &__prefix
+      @at-root #{selector.nest('.v-field:not(.v-field--reverse)', &)}
+        padding-inline-start: var(--v-field-padding-start)
+      @at-root #{selector.nest('.v-field.v-field--reverse', &)}
+        padding-inline-end: var(--v-field-padding-end)
+
+    &__suffix
+      @at-root #{selector.nest('.v-field:not(.v-field--reverse)', &)}
+        padding-inline-end: var(--v-field-padding-end)
+      @at-root #{selector.nest('.v-field.v-field--reverse', &)}
+        padding-inline-start: var(--v-field-padding-start)
+
+  /* endregion */