combobox-item.css 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. @charset "UTF-8";
  2. /* mixins & extensions */
  3. @keyframes in {
  4. 0% {
  5. opacity: 0;
  6. }
  7. 100% {
  8. opacity: 1;
  9. }
  10. }
  11. @keyframes in-down {
  12. 0% {
  13. opacity: 0;
  14. transform: translate3D(0, -5px, 0);
  15. }
  16. 100% {
  17. opacity: 1;
  18. transform: translate3D(0, 0, 0);
  19. }
  20. }
  21. @keyframes in-up {
  22. 0% {
  23. opacity: 0;
  24. transform: translate3D(0, 5px, 0);
  25. }
  26. 100% {
  27. opacity: 1;
  28. transform: translate3D(0, 0, 0);
  29. }
  30. }
  31. @keyframes in-scale {
  32. 0% {
  33. opacity: 0;
  34. transform: scale3D(0.95, 0.95, 1);
  35. }
  36. 100% {
  37. opacity: 1;
  38. transform: scale3D(1, 1, 1);
  39. }
  40. }
  41. :root {
  42. --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
  43. --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
  44. --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
  45. --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
  46. --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
  47. }
  48. .calcite-animate {
  49. opacity: 0;
  50. animation-fill-mode: both;
  51. animation-duration: var(--calcite-animation-timing);
  52. }
  53. .calcite-animate__in {
  54. animation-name: in;
  55. }
  56. .calcite-animate__in-down {
  57. animation-name: in-down;
  58. }
  59. .calcite-animate__in-up {
  60. animation-name: in-up;
  61. }
  62. .calcite-animate__in-scale {
  63. animation-name: in-scale;
  64. }
  65. /**
  66. * Currently only used in Checkbox.
  67. */
  68. :root {
  69. --calcite-popper-transition: var(--calcite-animation-timing);
  70. }
  71. :host([hidden]) {
  72. display: none;
  73. }
  74. .scale--s{
  75. font-size: var(--calcite-font-size--2);
  76. line-height: 1rem;
  77. --calcite-combobox-item-spacing-unit-l: 0.5rem;
  78. --calcite-combobox-item-spacing-unit-s: 0.25rem;
  79. --calcite-combobox-item-spacing-indent: 0.5rem;
  80. }
  81. .scale--m{
  82. font-size: var(--calcite-font-size--1);
  83. line-height: 1rem;
  84. --calcite-combobox-item-spacing-unit-l: 0.75rem;
  85. --calcite-combobox-item-spacing-unit-s: 0.5rem;
  86. --calcite-combobox-item-spacing-indent: 0.75rem;
  87. }
  88. .scale--l{
  89. font-size: var(--calcite-font-size-0);
  90. line-height: 1.25rem;
  91. --calcite-combobox-item-spacing-unit-l: 1rem;
  92. --calcite-combobox-item-spacing-unit-s: 0.75rem;
  93. --calcite-combobox-item-spacing-indent: 1rem;
  94. }
  95. .container {
  96. --calcite-combobox-item-indent-value: calc(
  97. var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)
  98. );
  99. }
  100. :host(:focus){
  101. --tw-shadow: 0 0 #0000;
  102. --tw-shadow-colored: 0 0 #0000;
  103. box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  104. }
  105. :host([disabled]){
  106. pointer-events: none;
  107. cursor: default;
  108. -webkit-user-select: none;
  109. user-select: none;
  110. opacity: var(--calcite-ui-opacity-disabled);
  111. }
  112. :host([disabled]) ::slotted([calcite-hydrated][disabled]),
  113. :host([disabled]) [calcite-hydrated][disabled] {
  114. /* prevent opacity stacking */
  115. opacity: 1;
  116. }
  117. :host, ul{
  118. margin: 0px;
  119. display: flex;
  120. flex-direction: column;
  121. padding: 0px;
  122. outline: 2px solid transparent;
  123. outline-offset: 2px;
  124. }
  125. .label{
  126. position: relative;
  127. box-sizing: border-box;
  128. display: flex;
  129. width: 100%;
  130. min-width: 100%;
  131. cursor: pointer;
  132. align-items: center;
  133. color: var(--calcite-ui-text-3);
  134. -webkit-text-decoration-line: none;
  135. text-decoration-line: none;
  136. transition-duration: 150ms;
  137. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  138. outline-offset: 0;
  139. outline-color: transparent;
  140. transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
  141. padding: var(--calcite-combobox-item-spacing-unit-s) var(--calcite-combobox-item-spacing-unit-l);
  142. }
  143. :host([disabled]) .label{
  144. cursor: default;
  145. }
  146. .label--selected{
  147. font-weight: var(--calcite-font-weight-medium);
  148. color: var(--calcite-ui-text-1);
  149. }
  150. .label--active{
  151. outline: 2px solid var(--calcite-ui-brand);
  152. outline-offset: -2px;
  153. }
  154. .label:hover, .label:active{
  155. background-color: var(--calcite-ui-foreground-2);
  156. color: var(--calcite-ui-text-1);
  157. -webkit-text-decoration-line: none;
  158. text-decoration-line: none;
  159. --tw-shadow: 0 0 #0000;
  160. --tw-shadow-colored: 0 0 #0000;
  161. box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  162. }
  163. .title {
  164. padding: 0 var(--calcite-combobox-item-spacing-unit-l);
  165. }
  166. .icon{
  167. display: inline-flex;
  168. opacity: 0;
  169. transition-duration: 150ms;
  170. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  171. color: var(--calcite-ui-border-1);
  172. }
  173. .icon--indent {
  174. padding-inline-start: var(--calcite-combobox-item-indent-value);
  175. }
  176. .icon--custom {
  177. margin-top: -1px;
  178. color: var(--calcite-ui-text-3);
  179. }
  180. .icon--active{
  181. color: var(--calcite-ui-text-1);
  182. }
  183. .icon--dot{
  184. display: flex;
  185. justify-content: flex-end;
  186. min-width: var(--calcite-combobox-item-spacing-unit-l);
  187. }
  188. .icon--dot:before {
  189. text-align: start;
  190. content: "•";
  191. }
  192. .label--active .icon{
  193. opacity: 1;
  194. }
  195. .label--selected .icon{
  196. opacity: 1;
  197. color: var(--calcite-ui-brand);
  198. }
  199. :host(:hover[disabled]) .icon{
  200. opacity: 1;
  201. }