combobox-item.css 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  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. @media (prefers-reduced-motion: reduce) {
  66. :root {
  67. --calcite-internal-duration-factor: 0.01;
  68. }
  69. }
  70. /**
  71. * Currently only used in Checkbox.
  72. */
  73. :root {
  74. --calcite-floating-ui-transition: var(--calcite-animation-timing);
  75. }
  76. :host([hidden]) {
  77. display: none;
  78. }
  79. :host([disabled]){
  80. pointer-events: none;
  81. cursor: default;
  82. -webkit-user-select: none;
  83. user-select: none;
  84. opacity: var(--calcite-ui-opacity-disabled);
  85. }
  86. .scale--s{
  87. font-size: var(--calcite-font-size--2);
  88. line-height: 1rem;
  89. --calcite-combobox-item-spacing-unit-l: 0.5rem;
  90. --calcite-combobox-item-spacing-unit-s: 0.25rem;
  91. --calcite-combobox-item-spacing-indent: 0.5rem;
  92. }
  93. .scale--m{
  94. font-size: var(--calcite-font-size--1);
  95. line-height: 1rem;
  96. --calcite-combobox-item-spacing-unit-l: 0.75rem;
  97. --calcite-combobox-item-spacing-unit-s: 0.5rem;
  98. --calcite-combobox-item-spacing-indent: 0.75rem;
  99. }
  100. .scale--l{
  101. font-size: var(--calcite-font-size-0);
  102. line-height: 1.25rem;
  103. --calcite-combobox-item-spacing-unit-l: 1rem;
  104. --calcite-combobox-item-spacing-unit-s: 0.75rem;
  105. --calcite-combobox-item-spacing-indent: 1rem;
  106. }
  107. .container {
  108. --calcite-combobox-item-indent-value: calc(
  109. var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)
  110. );
  111. }
  112. :host(:focus){
  113. --tw-shadow: 0 0 #0000;
  114. --tw-shadow-colored: 0 0 #0000;
  115. box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  116. }
  117. :host([disabled]) ::slotted([calcite-hydrated][disabled]),
  118. :host([disabled]) [calcite-hydrated][disabled] {
  119. /* prevent opacity stacking */
  120. opacity: 1;
  121. }
  122. :host,
  123. ul{
  124. margin: 0px;
  125. display: flex;
  126. flex-direction: column;
  127. padding: 0px;
  128. }
  129. :host(:focus),
  130. ul:focus{
  131. outline: 2px solid transparent;
  132. outline-offset: 2px;
  133. }
  134. .label{
  135. position: relative;
  136. box-sizing: border-box;
  137. display: flex;
  138. inline-size: 100%;
  139. min-inline-size: 100%;
  140. cursor: pointer;
  141. align-items: center;
  142. color: var(--calcite-ui-text-3);
  143. text-decoration-line: none;
  144. transition-duration: 150ms;
  145. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  146. outline-color: transparent;
  147. padding-block: var(--calcite-combobox-item-spacing-unit-s);
  148. padding-inline: var(--calcite-combobox-item-spacing-unit-l);
  149. }
  150. :host([disabled]) .label{
  151. cursor: default;
  152. }
  153. .label--selected{
  154. font-weight: var(--calcite-font-weight-medium);
  155. color: var(--calcite-ui-text-1);
  156. }
  157. .label--active{
  158. outline: 2px solid var(--calcite-ui-brand);
  159. outline-offset: -2px;
  160. }
  161. .label:hover,
  162. .label:active{
  163. background-color: var(--calcite-ui-foreground-2);
  164. color: var(--calcite-ui-text-1);
  165. text-decoration-line: none;
  166. --tw-shadow: 0 0 #0000;
  167. --tw-shadow-colored: 0 0 #0000;
  168. box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  169. }
  170. .title {
  171. padding-block: 0;
  172. padding-inline: var(--calcite-combobox-item-spacing-unit-l);
  173. }
  174. .icon{
  175. display: inline-flex;
  176. opacity: 0;
  177. transition-duration: 150ms;
  178. transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  179. color: var(--calcite-ui-border-1);
  180. }
  181. .icon--indent {
  182. padding-inline-start: var(--calcite-combobox-item-indent-value);
  183. }
  184. .icon--custom {
  185. margin-block-start: -1px;
  186. color: var(--calcite-ui-text-3);
  187. }
  188. .icon--active{
  189. color: var(--calcite-ui-text-1);
  190. }
  191. .icon--dot{
  192. display: flex;
  193. justify-content: flex-end;
  194. min-inline-size: var(--calcite-combobox-item-spacing-unit-l);
  195. }
  196. .icon--dot:before {
  197. text-align: start;
  198. content: "•";
  199. }
  200. .label--active .icon{
  201. opacity: 1;
  202. }
  203. .label--selected .icon{
  204. opacity: 1;
  205. color: var(--calcite-ui-brand);
  206. }
  207. :host(:hover[disabled]) .icon{
  208. opacity: 1;
  209. }