_variables.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. @forward '../VInput/variables';
  2. @use 'sass:map';
  3. @use '../../styles/settings';
  4. @use '../VInput/variables' as *;
  5. // INPUT
  6. $field-border-radius: settings.$border-radius-root !default;
  7. $field-rounded-border-radius: map.get(settings.$rounded, 'xl') !default;
  8. $field-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
  9. $field-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
  10. $field-error-color: rgb(var(--v-theme-error)) !default;
  11. $field-font-size: 16px !default;
  12. $field-letter-spacing: .009375em !default;
  13. $field-max-width: 100% !default;
  14. $field-transition-timing: .15s settings.$standard-easing !default;
  15. $field-subtle-transition-timing: 250ms settings.$standard-easing !default;
  16. $field-underlined-margin-bottom: 4px !default;
  17. $field-clearable-margin: 4px !default;
  18. $field-clearable-transition: .15s opacity, .15s width settings.$standard-easing !default;
  19. $field-chip-height: 24px !default;
  20. // CONTROL
  21. $field-control-solo-background: rgb(var(--v-theme-surface)) !default;
  22. $field-control-solo-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
  23. $field-control-solo-elevation: 2 !default;
  24. $field-control-solo-inverted-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
  25. $field-control-solo-inverted-focused-color: rgb(var(--v-theme-on-surface-variant)) !default;
  26. $field-control-filled-background: rgba(var(--v-theme-on-surface), var(--v-idle-opacity)) !default;
  27. $field-control-padding-start: 16px !default;
  28. $field-control-padding-end: 16px !default;
  29. $field-control-padding-top: 8px !default;
  30. $field-control-padding-bottom: 4px !default;
  31. $field-control-affixed-padding: 12px !default;
  32. $field-control-affixed-inner-padding: 6px !default;
  33. $field-control-underlined-height: 48px !default;
  34. $field-control-underlined-padding-bottom: 2px !default;
  35. $field-control-height: 56px !default;
  36. // INPUT
  37. $field-input-opacity: var(--v-high-emphasis-opacity) !default;
  38. $field-input-min-height: #{max(
  39. var(--v-input-control-height, $input-control-height),
  40. calc($input-font-size * $input-line-height + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom))
  41. )} !default;
  42. $field-input-padding-top: calc(var(--v-field-padding-top, $field-control-padding-top) + var(--v-input-padding-top, 0)) !default;
  43. $field-input-padding-bottom: var(--v-field-padding-bottom, $field-control-padding-bottom) !default;
  44. $field-input-column-gap: 2px !default;
  45. $field-input-row-gap: 8px !default;
  46. // LABEL
  47. $field-label-floating-scale: .75 !default;
  48. // OUTLINE
  49. $field-outline-opacity: .38 !default;
  50. $field-border-width: 1px !default;
  51. $field-focused-border-width: 2px !default;
  52. // OVERLAY
  53. $field-overlay-filled-opacity: 0.04 !default;
  54. $field-overlay-focused-background-color: rgb(var(--v-theme-surface-variant)) !default;