VChip.sass 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. @use '../../styles/tools'
  2. @use './variables' as *
  3. @use './mixins' as *
  4. @include tools.layer('components')
  5. .v-chip
  6. align-items: center
  7. display: inline-flex
  8. font-weight: $chip-font-weight
  9. max-width: $chip-max-width
  10. min-width: 0
  11. overflow: hidden
  12. position: relative
  13. text-decoration: none
  14. white-space: $chip-white-space
  15. vertical-align: middle
  16. .v-icon
  17. --v-icon-size-multiplier: #{$chip-icon-size-multiplier}
  18. @at-root
  19. @include chip-sizes()
  20. @include chip-density('height', $chip-density)
  21. @include tools.border($chip-border...)
  22. @include tools.states('.v-chip__overlay')
  23. @include tools.rounded($chip-border-radius)
  24. @include tools.variant($chip-variants...)
  25. &--border
  26. border-width: $chip-border-thin-width
  27. &--link
  28. cursor: pointer
  29. &--link,
  30. &--filter
  31. user-select: none
  32. &--label
  33. @include tools.rounded($chip-label-border-radius)
  34. // Elements
  35. .v-chip__content
  36. align-items: center
  37. display: inline-flex
  38. .v-autocomplete__selection &,
  39. .v-combobox__selection &,
  40. .v-select__selection &
  41. overflow: hidden
  42. .v-chip__filter,
  43. .v-chip__prepend,
  44. .v-chip__append,
  45. .v-chip__close
  46. align-items: center
  47. display: inline-flex
  48. .v-chip__close
  49. cursor: pointer
  50. flex: 0 1 auto
  51. font-size: $chip-close-size
  52. max-height: $chip-close-size
  53. max-width: $chip-close-size
  54. user-select: none
  55. .v-icon
  56. font-size: inherit
  57. .v-chip__filter
  58. transition: $chip-filter-transition
  59. .v-chip__overlay
  60. background-color: currentColor
  61. border-radius: inherit
  62. pointer-events: none
  63. opacity: 0
  64. transition: opacity .2s ease-in-out
  65. @include tools.absolute()
  66. .v-chip--disabled
  67. opacity: $chip-disabled-opacity
  68. pointer-events: none
  69. user-select: none
  70. .v-chip--label
  71. border-radius: $chip-label-border-radius