@acusti/dropdown/dist/styles.js.flow

React component that renders a dropdown with a trigger and supports searching, keyboard access, and more

/**
 * Flowtype definitions for styles
 * Generated by Flowgen from a Typescript Definition
 * Flowgen v1.20.1
 * @flow
 */

declare export var ROOT_CLASS_NAME: 'uktdropdown';
declare export var ROOT_SELECTOR: '.uktdropdown';
declare export var BODY_CLASS_NAME: 'uktdropdown-body';
declare export var LABEL_CLASS_NAME: 'uktdropdown-label';
declare export var LABEL_TEXT_CLASS_NAME: 'uktdropdown-label-text';
declare export var TRIGGER_CLASS_NAME: 'uktdropdown-trigger';
declare export var BODY_SELECTOR: '.uktdropdown-body';
declare export var LABEL_SELECTOR: '.uktdropdown-label';
declare export var LABEL_TEXT_SELECTOR: '.uktdropdown-label-text';
declare export var TRIGGER_SELECTOR: '.uktdropdown-trigger';
declare export var BODY_MAX_HEIGHT_VAR: '--uktdd-body-max-height';
declare export var BODY_MAX_WIDTH_VAR: '--uktdd-body-max-width';
declare export var STYLES: '\n:root {\n  --uktdd-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;\n  --uktdd-body-bg-color: #fff;\n  --uktdd-body-bg-color-hover: rgb(105,162,249);\n  --uktdd-body-color-hover: #fff;\n  --uktdd-body-buffer: 10px;\n  --uktdd-body-max-height: calc(100vh - var(--uktdd-body-buffer));\n  --uktdd-body-max-width: calc(100vw - var(--uktdd-body-buffer));\n  --uktdd-body-pad-bottom: 9px;\n  --uktdd-body-pad-left: 12px;\n  --uktdd-body-pad-right: 12px;\n  --uktdd-body-pad-top: 9px;\n  --uktdd-label-pad-right: 10px;\n}\n.uktdropdown,\n.uktdropdown-trigger {\n  font-family: var(--uktdd-font-family);\n}\n.uktdropdown {\n  position: relative;\n  display: inline-block;\n}\n.uktdropdown.disabled {\n  pointer-events: none;\n}\n.uktdropdown > * {\n  cursor: default;\n}\n.uktdropdown-label {\n  display: flex;\n}\n.uktdropdown-label-text {\n  padding-right: var(--uktdd-label-pad-right);\n}\n.uktdropdown-body {\n  box-sizing: border-box;\n  position: absolute;\n  top: 100%;\n  max-height: var(--uktdd-body-max-height);\n  min-height: 50px;\n  max-width: var(--uktdd-body-max-width);\n  min-width: 100%;\n  overflow: auto;\n  z-index: 2;\n  padding: var(--uktdd-body-pad-top) var(--uktdd-body-pad-right) var(--uktdd-body-pad-bottom) var(--uktdd-body-pad-left);\n  background-color: var(--uktdd-body-bg-color);\n  box-shadow: 0 8px 18px rgba(0,0,0,0.25);\n}\n.uktdropdown-body.calculating-position {\n  visibility: hidden;\n}\n.uktdropdown-body.out-of-bounds-bottom:not(.out-of-bounds-top) {\n  top: auto;\n  bottom: 100%;\n}\n.uktdropdown-body.out-of-bounds-right:not(.out-of-bounds-left) {\n  left: auto;\n  right: 0px;\n}\n.uktdropdown-label + .uktdropdown-body {\n  left: auto;\n  right: 0;\n}\n.uktdropdown-body.has-items {\n  user-select: none;\n}\n.uktdropdown-body [data-ukt-active] {\n  background-color: var(--uktdd-body-bg-color-hover);\n  color: var(--uktdd-body-color-hover);\n}\n';