xv-webcomponents 0.1.43 → 0.1.46

package/dist/collection/components/xv-dropdown/xv-dropdown.css

@@ -0,0 +1,327 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
+:host {
+  --dropdown-padding-x: 16px;
+  --dropdown-padding-y: 11px;
+  --dropdown-max-width: 300px;
+  display: block;
+  position: relative;
+  text-align: left;
+  max-width: min(var(--dropdown-max-width), 100%);
+}
+:host .label {
+  display: block;
+  color: var(--text-secondary, #515151);
+  font-family: var(--ff-body, Tahoma);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+  margin-bottom: 8px;
+}
+:host .label ::slotted([slot=label]) {
+  color: var(--text-secondary, #515151);
+  font-family: var(--ff-body, Tahoma);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+}
+:host .label_info {
+  margin-left: var(--spacing-02);
+}
+:host .control {
+  background-blend-mode: multiply;
+  border-radius: 3px;
+  box-shadow: 0 0 0 1px #8B8B8B inset;
+  transition: 0.2s ease-in-out background-color;
+  cursor: pointer;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  background-color: var(--field-02, #FFF);
+  text-align: start;
+  inline-size: 100%;
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+  align-items: center;
+  block-size: calc(100% + 1px);
+  outline: none;
+  padding-block: var(--dropdown-padding-y);
+  padding-inline: var(--dropdown-padding-x);
+  text-overflow: ellipsis;
+  vertical-align: top;
+  white-space: nowrap;
+}
+:host .control_value, :host .control_placeholder {
+  flex: 1;
+  margin: 0;
+  overflow: hidden;
+  color: var(--text-primary, #333);
+  user-select: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--fz-body, Tahoma);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.16px;
+  padding-inline: 0 1rem;
+}
+:host .control_placeholder {
+  color: var(--text-placeholder, #ACACAC);
+}
+:host .control_icon {
+  width: 18px;
+  height: 18px;
+}
+:host .control_icon.error {
+  color: var(--support-error, #F1290E);
+}
+:host .control_icon.warning {
+  color: var(--support-warning, #FF7F04);
+}
+:host .control_arrow {
+  box-sizing: border-box;
+  margin: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  background: none;
+  text-align: start;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+  inset-inline-end: 0.75rem;
+  outline: none;
+  transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+:host .control:hover {
+  background-color: var(--field-hover-02, #E9E9E9);
+}
+:host .control:active {
+  background-color: var(--layer-selected-02, #E3E3E3);
+}
+:host .options {
+  inset-block-start: 100%;
+  margin-block-start: 1px;
+  display: block;
+  max-block-size: 13.75rem;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  position: absolute;
+  z-index: 10;
+  inline-size: 100%;
+  inset-inline: 0;
+  overflow-y: auto;
+  transition: max-height 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
+  border-radius: 3px;
+  background-color: var(--field-02, #FFF);
+  scrollbar-width: thin;
+  scrollbar-color: var(--layer-accent-03) transparent;
+}
+:host .options ::slotted(.xv-dropdown-item) {
+  display: block;
+  max-block-size: 13.75rem;
+  inset-inline: 0;
+  box-sizing: border-box;
+  padding: var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + 16px) var(--dropdown-padding-y) var(--dropdown-padding-x);
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+  color: var(--text-secondary, #515151);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.16px;
+  transition: 0.2s ease-in-out background-color;
+  user-select: none;
+}
+:host .options ::slotted(.xv-dropdown-item):after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  height: 1px;
+  left: 10px;
+  width: calc(100% - 20px);
+  background-color: var(--border-subtle-01);
+}
+:host .options ::slotted(.xv-dropdown-item:hover) {
+  background-color: var(--layer-hover-02, #F7F7F7);
+}
+:host .options ::slotted(.xv-dropdown-item:active) {
+  background-color: var(--layer-selected-hover-02, #DADADA);
+}
+:host .options ::slotted(.xv-dropdown-item[selected]) {
+  background-color: var(--layer-selected-02, #E3E3E3);
+}
+:host .options ::slotted(.xv-dropdown-item[selected]:hover) {
+  background-color: var(--layer-selected-hover-02, #DADADA);
+}
+:host .options ::slotted(.xv-dropdown-item[disabled]) {
+  background-color: transparent;
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+:host .helper {
+  color: var(--text-helper, #646464);
+  font-family: var(--ff-heading, "IBM Plex Sans");
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+  margin: 4px 0 0;
+  padding: 0;
+}
+
+:host([open]) .control_arrow {
+  transform: rotate(180deg);
+}
+
+:host([disabled]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+:host([disabled]) .control {
+  cursor: inherit;
+}
+:host([disabled]) .control:hover, :host([disabled]) .control:active, :host([disabled]) .control:focus-within {
+  background-color: transparent;
+}
+
+:host([error]) .control {
+  box-shadow: none;
+  outline: 2px solid var(--support-support-error, #F1290E);
+}
+:host([error]) .helper {
+  color: var(--text-error, #D62512);
+}
+
+:host([size=xs]) {
+  --dropdown-padding-y: 4px;
+}
+
+:host([size=sm]) {
+  --dropdown-padding-y: 7px;
+}
+
+:host([size=md]) {
+  --dropdown-padding-y: 11px;
+}
+
+:host([size=lg]) {
+  --dropdown-padding-y: 15px;
+}
+
+:host([size=xl]) {
+  --dropdown-padding-y: 16px;
+}