VSelectionControl.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. .v-selection-control {
  2. align-items: center;
  3. contain: layout;
  4. display: flex;
  5. flex: 1 0;
  6. grid-area: control;
  7. position: relative;
  8. user-select: none;
  9. }
  10. .v-selection-control .v-label {
  11. white-space: normal;
  12. word-break: break-word;
  13. height: 100%;
  14. opacity: 1;
  15. }
  16. .v-selection-control--disabled {
  17. opacity: var(--v-disabled-opacity);
  18. pointer-events: none;
  19. }
  20. .v-selection-control--error:not(.v-selection-control--disabled) .v-label {
  21. color: rgb(var(--v-theme-error));
  22. }
  23. .v-selection-control--inline {
  24. display: inline-flex;
  25. flex: 0 0 auto;
  26. min-width: 0;
  27. max-width: 100%;
  28. }
  29. .v-selection-control--inline .v-label {
  30. width: auto;
  31. }
  32. .v-selection-control--density-default {
  33. --v-selection-control-size: 40px;
  34. }
  35. .v-selection-control--density-comfortable {
  36. --v-selection-control-size: 36px;
  37. }
  38. .v-selection-control--density-compact {
  39. --v-selection-control-size: 28px;
  40. }
  41. .v-selection-control__wrapper {
  42. width: var(--v-selection-control-size);
  43. height: var(--v-selection-control-size);
  44. display: inline-flex;
  45. align-items: center;
  46. position: relative;
  47. justify-content: center;
  48. flex: none;
  49. }
  50. .v-selection-control__input {
  51. width: var(--v-selection-control-size);
  52. height: var(--v-selection-control-size);
  53. align-items: center;
  54. display: flex;
  55. flex: none;
  56. justify-content: center;
  57. position: relative;
  58. border-radius: 50%;
  59. }
  60. .v-selection-control__input input {
  61. cursor: pointer;
  62. position: absolute;
  63. left: 0;
  64. top: 0;
  65. width: 100%;
  66. height: 100%;
  67. opacity: 0;
  68. }
  69. .v-selection-control__input::before {
  70. border-radius: 100%;
  71. background-color: currentColor;
  72. opacity: 0;
  73. pointer-events: none;
  74. }
  75. .v-selection-control__input::before {
  76. content: "";
  77. position: absolute;
  78. top: 0;
  79. left: 0;
  80. width: 100%;
  81. height: 100%;
  82. }
  83. .v-selection-control__input:hover::before {
  84. opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
  85. }
  86. .v-selection-control__input > .v-icon {
  87. opacity: var(--v-medium-emphasis-opacity);
  88. }
  89. .v-selection-control--disabled .v-selection-control__input > .v-icon, .v-selection-control--dirty .v-selection-control__input > .v-icon, .v-selection-control--error .v-selection-control__input > .v-icon {
  90. opacity: 1;
  91. }
  92. .v-selection-control--error:not(.v-selection-control--disabled) .v-selection-control__input > .v-icon {
  93. color: rgb(var(--v-theme-error));
  94. }
  95. .v-selection-control--focus-visible .v-selection-control__input::before {
  96. opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
  97. }