@broxus/react-uikit 0.21.0 → 0.23.0

package/dist/assets/select.css

@@ -0,0 +1,515 @@
+@charset "UTF-8";
+/* ========================================================================
+   Component: Select
+ ========================================================================== */
+.uk-select {
+  cursor: pointer;
+  display: flex;
+  min-height: 100%;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+
+.uk-select-content {
+  align-items: center;
+  display: flex;
+  flex: auto;
+  min-width: 0;
+  order: 0;
+  overflow: hidden;
+  padding: 0 var(--select-content-padding-horizontal);
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.uk-select-content input {
+  cursor: inherit;
+  font: inherit;
+}
+
+/* Disabled */
+.uk-select-content.uk-select-disabled,
+.uk-select-content.uk-select-disabled input {
+  cursor: not-allowed;
+}
+
+.uk-select-content .uk-select-input {
+  appearance: none;
+  background: transparent;
+  border: none;
+  color: var(--select-search-input-color);
+  margin: 0;
+  outline: none;
+  padding: 0;
+}
+
+.uk-select-content .uk-select-input::-webkit-search-cancel-button {
+  appearance: none;
+  display: none;
+}
+
+.uk-select-content-value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@media all and (-ms-high-contrast: none) {
+  .uk-select-content-value *::-ms-backdrop, .uk-select-content-value {
+    flex: auto;
+  }
+}
+
+.uk-select-placeholder {
+  color: var(--select-placeholder-color);
+  overflow: hidden;
+  pointer-events: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.uk-select-placeholder::after {
+  content: " ";
+  overflow: hidden;
+  width: 0;
+}
+@media all and (-ms-high-contrast: none) {
+  .uk-select-placeholder *::-ms-backdrop, .uk-select-placeholder {
+    flex: auto;
+  }
+}
+
+.uk-select-show-search {
+  cursor: text;
+}
+
+/* Single selection
+ ========================================================================== */
+.uk-select-single .uk-select-content {
+  overflow: hidden;
+}
+
+.uk-select-single .uk-select-input {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  inset: 0 var(--select-content-padding-horizontal);
+  line-height: initial;
+  position: absolute;
+}
+
+.uk-select-single .uk-select-content-value,
+.uk-select-single .uk-select-placeholder {
+  padding: 0;
+  transition: color var(--transition-duration);
+}
+
+.uk-select-single .uk-select-content-value {
+  position: relative;
+  user-select: none;
+}
+
+.uk-select-single.uk-select-open .uk-select-content-value {
+  color: var(--select-placeholder-color);
+}
+
+/* Multiple selection
+ ========================================================================== */
+.uk-select-multiple .uk-select-content {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--select-gutter);
+  height: auto;
+  line-height: normal;
+  padding: var(--select-content-padding-vertical) var(--select-content-padding-horizontal);
+}
+
+.uk-select-multiple .uk-select-placeholder {
+  left: var(--select-content-padding-horizontal);
+  position: absolute;
+  right: var(--select-content-padding-horizontal);
+  top: 50%;
+  transform: translateY(-50%);
+  transition: all var(--transition-duration);
+}
+
+.uk-select-multiple .uk-select-content-item {
+  flex: none;
+  max-width: 100%;
+}
+
+.uk-select-multiple .uk-select-selection-item {
+  align-items: center;
+  background-color: var(--select-selection-item-background);
+  border-radius: var(--select-selection-item-border-radius);
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  font-size: var(--select-selection-item-font-size);
+  line-height: var(--select-selection-item-line-height);
+  max-width: 100%;
+  padding: 0;
+  position: relative;
+  transition: font-size var(--transition-duration), line-height var(--transition-duration), height var(--transition-duration);
+  user-select: none;
+}
+
+.uk-select-multiple .uk-select-selection-item-content {
+  display: inline-flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  padding: 0 var(--select-gutter);
+  text-overflow: ellipsis;
+  white-space: pre;
+}
+
+.uk-select-multiple .uk-select-selection-item-remove {
+  --icon-size: var(--select-selection-item-remove-icon-size);
+  align-items: center;
+  color: var(--control-icon-color);
+  cursor: pointer;
+  display: inline-flex;
+  flex-wrap: wrap;
+  padding-right: var(--select-gutter);
+}
+
+.uk-select-multiple .uk-select-selection-item-remove:hover {
+  color: var(--select-selection-item-remove-icon-hover-color);
+}
+
+.uk-select-multiple .uk-select-input {
+  font-family: inherit;
+  min-width: 4.1px;
+  transition: color var(--transition-duration);
+  width: calc(var(--select-search-input-width, 10) * 1px);
+}
+
+/* Icons
+ ========================================================================== */
+.uk-select-suffix {
+  order: 20;
+}
+
+.uk-select-arrow,
+.uk-select-clear {
+  align-items: center;
+  color: var(--select-icon-color);
+  cursor: pointer;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  overflow: hidden;
+  transition: color var(--transition-duration) var(--ease-in-out);
+  width: min-content;
+}
+
+.uk-select:not(.uk-select-disabled) .uk-select-arrow:hover,
+.uk-select:not(.uk-select-disabled) .uk-select-clear:hover {
+  color: var(--select-icon-hover-color);
+}
+
+.uk-select-disabled .uk-select-arrow,
+.uk-select-disabled .uk-select-clear {
+  color: var(--select-icon-disabled-color);
+  cursor: not-allowed;
+}
+
+/* Arrow */
+.uk-select-arrow {
+  --icon-size: var(--select-arrow-icon-size);
+  width: var(--select-height);
+}
+
+/* Clear */
+.uk-select-clear {
+  min-width: fit-content;
+  order: 10;
+}
+
+:not(.uk-select-suffix) + .uk-select-clear:last-child {
+  min-width: var(--select-height);
+}
+
+/* Dropdown
+ ========================================================================== */
+.uk-select-dropdown {
+  background-color: var(--select-dropdown-background);
+  border: var(--select-dropdown-border-width) var(--select-dropdown-border-style) var(--select-dropdown-border);
+  border-radius: var(--select-dropdown-border-radius);
+  box-sizing: border-box;
+  font-variant: initial;
+  left: -9999px;
+  outline: none;
+  overflow: hidden;
+  padding: calc(var(--select-gutter) / 2);
+  position: absolute;
+  top: -9999px;
+  z-index: calc(var(--global-z-index) + 30);
+}
+
+.uk-select-dropdown-placement-bottom-left.uk-slide-up-enter.uk-slide-up-enter-active,
+.uk-select-dropdown-placement-bottom-left.uk-slide-up-appear.uk-slide-up-appear-active {
+  animation-name: uk-slide-up-in;
+}
+
+.uk-select-dropdown-placement-top-left.uk-slide-up-enter.uk-slide-up-enter-active,
+.uk-select-dropdown-placement-top-left.uk-slide-up-appear.uk-slide-up-appear-active {
+  animation-name: uk-slide-down-in;
+}
+
+.uk-select-dropdown-placement-bottom-left .uk-slide-up-leave.uk-slide-up-leave-active {
+  animation-name: uk-slide-up-out;
+}
+
+.uk-select-dropdown-placement-top-left.uk-slide-up-leave.uk-slide-up-leave-active {
+  animation-name: uk-slide-down-out;
+}
+
+.uk-select-dropdown-hidden {
+  display: none;
+}
+
+.uk-select-dropdown-empty {
+  color: var(--control-disabled-color);
+}
+
+/* Dropdown options
+ ========================================================================== */
+/* Empty */
+.uk-select-item-empty {
+  color: var(--select-item-disabled-color);
+  text-align: center;
+  display: block;
+  font-weight: normal;
+  line-height: var(--select-item-line-height);
+  padding: var(--select-gutter);
+  position: relative;
+}
+
+.uk-select-item-empty .uk-empty {
+  margin: var(--global-small-margin) 0;
+}
+
+.uk-select-item-empty .uk-empty-img-simple-ellipse {
+  fill: var(--control-icon-color);
+  fill-opacity: 0.08;
+}
+
+.uk-select-item-empty .uk-empty-img-simple-g {
+  stroke: var(--control-icon-color);
+}
+
+.uk-select-item-empty .uk-empty-img-simple-path {
+  fill: var(--global-default-background);
+  stroke: var(--control-icon-color);
+}
+
+/* Items */
+.uk-select-item {
+  color: var(--select-item-color);
+  cursor: pointer;
+  transition: background var(--transition-duration) ease;
+  display: block;
+  font-weight: normal;
+  line-height: var(--select-item-line-height);
+  padding: var(--select-gutter);
+  position: relative;
+}
+
+.uk-select-item-option {
+  align-items: center;
+  display: flex;
+}
+
+.uk-select-item-option-content {
+  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.uk-select-item-option-state {
+  align-items: center;
+  display: flex;
+  flex: none;
+}
+
+.uk-select-item-option-active {
+  background-color: var(--select-item-active-background);
+}
+
+.uk-select-item-option-selected {
+  background-color: var(--select-item-selected-background);
+}
+.uk-select-item-option-selected .uk-select-item-option-state {
+  color: var(--select-item-selected-state-color);
+}
+
+.uk-select-item-option-disabled {
+  color: var(--select-item-disabled-color);
+  cursor: not-allowed;
+}
+
+.uk-select-item-option-grouped {
+  padding-left: calc(var(--control-padding-horizontal) * 2);
+}
+
+.uk-select-item-group {
+  color: var(--select-item-group-color);
+  cursor: default;
+  font-size: var(--select-item-group-font-size);
+  padding: 0 var(--select-item-group-padding-horizontal);
+  text-transform: var(--select-item-group-text-transform);
+}
+
+.uk-select-item-group:not(:first-child) {
+  margin: var(--select-gutter) 0;
+}
+
+.uk-select-item-group:not(:first-child):empty {
+  border-bottom: var(--control-border-width) var(--control-border-style) var(--control-border);
+}
+
+/* Control
+ ========================================================================== */
+.uk-control.uk-control-select {
+  align-items: unset;
+  border: 0 none;
+  height: auto;
+  min-height: var(--select-height);
+  padding: 0;
+}
+
+.uk-control-select .uk-select {
+  border: var(--select-border-width) var(--select-border-style) var(--select-border);
+  border-radius: var(--select-border-radius);
+  box-sizing: border-box;
+  transition: var(--transition-medium-fast-duration) var(--ease-in-out);
+  transition-property: border;
+}
+
+.uk-control-select .uk-icon {
+  opacity: 1;
+}
+
+.uk-control-select:not(.uk-disabled):hover .uk-select {
+  border-color: var(--select-hover-border);
+}
+
+.uk-control-select:not(.uk-disabled):focus .uk-select,
+.uk-control-select:not(.uk-disabled):focus-within .uk-select,
+.uk-control-select.uk-focused:not(.uk-disabled) .uk-select {
+  border-color: var(--select-focus-border);
+}
+
+.uk-control-select.uk-disabled {
+  border-color: var(--select-disabled-border);
+}
+
+/* Small */
+.uk-control-select.uk-control-small {
+  min-height: var(--select-small-height);
+}
+
+.uk-control-select.uk-control-small .uk-select-content {
+  padding: 0 var(--select-content-small-padding-horizontal);
+}
+
+.uk-control-select.uk-control-small .uk-select-arrow {
+  min-width: var(--select-small-height);
+  width: var(--select-small-height);
+}
+
+/* Medium */
+.uk-control-select.uk-control-medium {
+  min-height: var(--select-medium-height);
+}
+
+.uk-control-select.uk-control-medium .uk-select-content {
+  padding: 0 var(--select-content-medium-padding-horizontal);
+}
+
+.uk-control-select.uk-control-medium .uk-select-arrow {
+  min-width: var(--select-medium-height);
+  width: var(--select-medium-height);
+}
+
+/* Large */
+.uk-control-select.uk-control-large {
+  min-height: var(--select-large-height);
+}
+
+.uk-control-select.uk-control-large .uk-select-content {
+  padding: 0 var(--select-content-large-padding-horizontal);
+}
+
+.uk-control-select.uk-control-large .uk-select-arrow {
+  min-width: calc(var(--select-large-height) * 0.8667);
+  width: calc(var(--select-large-height) * 0.8667);
+}
+
+/* Right to Left Direction
+ ========================================================================== */
+.uk-control-select.uk-control-rtl,
+.uk-select-dropdown.uk-dropdown-rtl {
+  direction: rtl;
+}
+
+.uk-select-dropdown-rtl .uk-select-item-option-grouped {
+  padding-left: var(--select-gutter);
+  padding-right: calc(var(--control-padding-horizontal) * 2);
+}
+
+:root {
+  --select-border: var(--control-border);
+  --select-border-style: var(--control-border-style);
+  --select-border-width: var(--control-border-width);
+  --select-border-radius: var(--control-border-radius);
+  --select-hover-border: var(--control-hover-border);
+  --select-focus-border: var(--control-focus-border);
+  --select-disabled-border: var(--control-disabled-border);
+  --select-height: var(--control-height);
+  --select-small-height: var(--control-small-height);
+  --select-medium-height: var(--control-medium-height);
+  --select-large-height: var(--control-large-height);
+  --select-arrow-icon-size: 24px;
+  --select-gutter: 5px;
+  --select-small-gutter: 5px;
+  --select-medium-gutter: 15px;
+  --select-large-gutter: 12px;
+  --select-content-padding-horizontal: var(--control-padding-horizontal);
+  --select-content-padding-vertical: var(--select-gutter);
+  --select-content-small-padding-horizontal: var(--control-small-padding-horizontal);
+  --select-content-medium-padding-horizontal: var(--control-medium-padding-horizontal);
+  --select-content-large-padding-horizontal: var(--control-large-padding-horizontal);
+  --select-search-input-width: 4px;
+  --select-search-input-color: var(--control-color);
+  --select-placeholder-color: var(--control-placeholder-color);
+  --select-selection-item-background: var(--global-background);
+  --select-selection-item-border-radius: var(--control-border-radius);
+  --select-selection-item-font-size: 14px;
+  --select-selection-item-line-height: 24px;
+  --select-selection-item-remove-icon-size: var(--select-selection-item-font-size);
+  --select-selection-item-remove-icon-hover-color: var(--global-primary-background);
+  --select-dropdown-background: var(--global-muted-background);
+  --select-dropdown-border: var(--control-border);
+  --select-dropdown-border-style: var(--control-border-style);
+  --select-dropdown-border-width: var(--control-border-width);
+  --select-dropdown-border-radius: var(--control-border-radius);
+  --select-icon-color: var(--control-icon-color);
+  --select-icon-hover-color: var(--control-icon-hover-color);
+  --select-icon-disabled-color: var(--control-disabled-color);
+  --select-item-color: var(--control-color);
+  --select-item-line-height: 24px;
+  --select-item-active-background: var(--global-default-background);
+  --select-item-selected-background: rgb(229.5, 229.5, 229.5);
+  --select-item-selected-state-color: var(--global-primary-background);
+  --select-item-disabled-color: var(--control-disabled-color);
+  --select-item-group-color: var(--global-muted-color);
+  --select-item-group-font-size: var(--global-small-font-size);
+  --select-item-group-text-transform: uppercase;
+  --select-item-group-padding-horizontal: var(--select-gutter);
+}