apex4x/Templates/Comboboxes/Native Inputs, Multiselect Editable with Substring Match/css/combobox.css

The Comprehensive ARIA Development Suite

/**********************************************
Common Combobox Colours - update in colors.css
*************************************************/
/*
--globalWhite; #ffffff;
--bodyText; #262626;
--elementBlack; #1f1f23;
--listbox-darkGrey; #333333;
--combobox-midGrey; #777777;
*/

/**********************************************
Common Combobox styles
*************************************************/

.select--container {
  position: relative;
}

.form--container {
  border-radius: 3px;
  list-style-type: none;
  max-width: 38em;
  padding: 0;
}

@media (min-width: 33em) {
  .form--container p input {
    min-width: 15em;
  }
}

.form--container p input[type="submit"] {
  border-radius: 0.5em;
  flex: none;
  min-width: 6em;
}

.form--container p img {
  margin: auto;
}

ul.listbox {
  position: relative;
  overflow-y: scroll;
  margin-left: 0;
  height: 10em;
  background-color: var(--globalWhite);
}

#ctryIcon {
  height: 25px;
  width: auto;
  padding-left: 0.5em;
  margin: auto;
}

#mobileCloseIcon {
  /* height: 25px;
  width: auto;
  padding-left: 0.5em;
  margin: auto; */
}

#mobileCloseIcon {
  vertical-align: middle;
}

li.option {
  margin-bottom: 0.3em;
  padding-right: 1em;
}

li.option a,
li.option a:visited {
  text-decoration: none;
  color: var(--bodyText);
  padding: 0.3em;
}

li.option a:hover,
li.option a:focus,
li.option.active a,
li.option.active a:visited {
  color: var(--globalWhite);
  background: var(--elementBlack);
}

li.option[aria-selected="true"] {
  background: url("../img/checked.svg");
  background-repeat: no-repeat;
  background-position: right 0.3em center; /* moves the SVG 0.3em to the left */
  border: 2px solid var(--apexDarkGreen);
  padding: 0.3em 0 0.3em;
  margin-right: 0.3em;
  font-weight: 700;
}

div.toplevel-div {
  border: 1px solid var(--listbox-darkGrey);
  position: absolute;
  -webkit-box-shadow: 0 10px 6px -6px var(--combobox-midGrey);
  -moz-box-shadow: 0 10px 6px -6px var(--combobox-midGrey);
  box-shadow: 0 10px 6px -6px var(--combobox-midGrey);
  padding: 0.3em;
  padding-bottom: 0;
  padding-right: 0;
  z-index: 1;
}

#frm p {
  display: inline;
}

span.aria-combobox[aria-expanded="false"] sup:before {
  content: "\2193";
}

span.aria-combobox[aria-expanded="true"] sup:before {
  content: "\2191";
}

.button span {
  font-weight: bold;
}

/**********************************************
Overwrite the auto positioning
*************************************************/

ul.listbox {
  position: relative;
  overflow-y: scroll;
  margin-left: 0;
  height: 10em;
}

.multi--select--editable .toplevel-div {
  background-color: var(--globalWhite);
  left: 71px !important;
  top: 35px !important;
  width: 17em;
}

/****************
New activate / collapse icon
*******************/
/* Basic styles for the button */
#mobileCloseIcon {
  background: none;
  border: none;
  padding: 0;
  /* display: inline-block; */
}

/* Styles for the SVG itself */
#mobileCloseIcon svg {
  width: 35px;
  height: 35px;
}

/* Focus-visible styles */
#mobileCloseIcon:focus-visible {
  outline: 3px solid #ffcc00; /* Bright outline color for high visibility */
  outline-offset: 2px; /* Space between the outline and the element */
}

/* Styles for the SVG rectangle */
#mobileCloseIcon svg rect {
  fill: #2e3135; /* Dark fill color for the rectangle */
}

/* Styles for the SVG path */
#mobileCloseIcon svg path {
  stroke: #ffcc00; /* Bright stroke color for the chevron */
  stroke-width: 8; /* Width of the stroke */
  stroke-linecap: round; /* Rounded ends of the stroke */
  fill: none; /* No fill for the path */
}