awesome-selector - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "awesome-selector",
   "description": "React, Javascript, and Typescript compatible selector.",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "author": "Mostafa Mohammadzadeh",
@@ -6,0 +6,0 @@ "license": "MIT",

src/selector.js

@@ -6,5 +6,5 @@ "use strict";
     constructor(parameters) {
+        var _a;
         //append CSS styles to DOM:
-        // Selector.appendCSS();//comment at dev mode
-        var _a;
+        Selector.appendCSS(); //comment at dev mode
         //the view:
@@ -418,3 +418,358 @@ this.viewID = Selector.generateViewID();
 const Style = `
+@media (hover: hover) and (pointer: fine) {
+  .thinScrollbar::-webkit-scrollbar, .selector > .container > .window > .optionsColumnsWrapper::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  .thinScrollbar::-webkit-scrollbar-track, .selector > .container > .window > .optionsColumnsWrapper::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .thinScrollbar::-webkit-scrollbar-thumb, .selector > .container > .window > .optionsColumnsWrapper::-webkit-scrollbar-thumb {
+    background: #bbb;
+    border-radius: 20px;
+  }
+  .darkMode .thinScrollbar::-webkit-scrollbar-thumb, .darkMode .selector > .container > .window > .optionsColumnsWrapper::-webkit-scrollbar-thumb {
+    background: #555;
+  }
+}
+.transparentBackground, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected, .selector > .container > .window > .toolbar > .closeButton, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton {
+  transition: background-color 50ms;
+}
 
+.transparentBackground:enabled:active, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:active, .selector > .container > .window > .toolbar > .closeButton:enabled:active, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:active {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .transparentBackground, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected, .selector > .container > .window > .toolbar > .closeButton, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton {
+    transition: background-color 150ms;
+  }
+  .transparentBackground:enabled:hover, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:hover, .selector > .container > .window > .toolbar > .closeButton:enabled:hover, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:hover {
+    background-color: rgba(0, 0, 0, 0.03) !important;
+  }
+  .transparentBackground:enabled:focus, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:focus, .selector > .container > .window > .toolbar > .closeButton:enabled:focus, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:focus {
+    background-color: rgba(0, 0, 0, 0.04) !important;
+  }
+  .transparentBackground:enabled:active, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:active, .selector > .container > .window > .toolbar > .closeButton:enabled:active, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:active {
+    background-color: rgba(0, 0, 0, 0.08) !important;
+  }
+}
+.transparentBackground:disabled, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:disabled, .selector > .container > .window > .toolbar > .closeButton:disabled, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.coloredBackground, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected {
+  opacity: 0.8;
+}
+
+.coloredBackground:enabled:active, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected:enabled:active {
+  opacity: 1;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .coloredBackground:enabled:hover, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected:enabled:hover {
+    opacity: 0.85;
+  }
+  .coloredBackground:enabled:focus, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected:enabled:focus {
+    opacity: 0.9;
+  }
+  .coloredBackground:enabled:active, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected:enabled:active {
+    opacity: 1;
+  }
+}
+.coloredBackground:disabled, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.transparentBackground_dark, .selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected, .selector.dark > .container > .window > .toolbar > .closeButton, .selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton {
+  transition: background-color 50ms;
+}
+
+.transparentBackground_dark:enabled:active, .selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:active, .selector.dark > .container > .window > .toolbar > .closeButton:enabled:active, .selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:active {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .transparentBackground_dark, .selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected, .selector.dark > .container > .window > .toolbar > .closeButton, .selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton {
+    transition: background-color 150ms;
+  }
+  .transparentBackground_dark:enabled:hover, .selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:hover, .selector.dark > .container > .window > .toolbar > .closeButton:enabled:hover, .selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:hover {
+    background-color: rgba(255, 255, 255, 0.12) !important;
+  }
+  .transparentBackground_dark:enabled:focus, .selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:focus, .selector.dark > .container > .window > .toolbar > .closeButton:enabled:focus, .selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:focus {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+  }
+  .transparentBackground_dark:enabled:active, .selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:active, .selector.dark > .container > .window > .toolbar > .closeButton:enabled:active, .selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:active {
+    background-color: rgba(255, 255, 255, 0.07) !important;
+  }
+}
+.selector {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  visibility: hidden;
+  z-index: 99999999;
+}
+.selector * {
+  box-sizing: border-box;
+}
+.selector > .shadow {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 160ms ease-in-out;
+}
+.selector > .container {
+  width: 100%;
+  height: 100%;
+  max-height: 800px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity 160ms ease-in-out;
+}
+.selector > .container > .window {
+  max-width: calc(100% - 100px);
+  min-height: 260px;
+  max-height: calc(100% - 60px);
+  padding: 15px 17px;
+  padding-top: 13px;
+  background-color: white;
+  border: solid 1px rgb(100, 100, 100);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.selector > .container > .window > .toolbar {
+  border-bottom: solid 1px #e6e6e6;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+}
+.selector > .container > .window > .toolbar > .title {
+  min-width: 226px;
+  padding-left: 2px;
+  color: #333;
+}
+.selector > .container > .window > .toolbar > .searchContainer {
+  flex: 1;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  display: flex;
+  align-items: center;
+}
+.selector > .container > .window > .toolbar > .searchContainer > svg {
+  min-width: 30px;
+}
+.selector > .container > .window > .toolbar > .searchContainer > .searchInput {
+  flex: 1;
+  font-size: 1rem;
+  color: #333;
+}
+.selector > .container > .window > .toolbar > .recentSelectsWrapper {
+  text-align: right;
+  height: 35px;
+  display: none;
+  overflow: hidden;
+}
+.selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton {
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  padding-left: 7px;
+  padding-right: 7px;
+  height: 35px;
+  font-size: 1rem;
+  text-align: center;
+  color: #333;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border-radius: 3px;
+}
+.selector > .container > .window > .toolbar > .closeButton {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: -5px;
+  margin-bottom: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.selector > .container > .window > .toolbar > .closeButton > * {
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+.selector > .container > .window > .toolbar > .closeButton > .closeIcon_light {
+  display: flex;
+}
+.selector > .container > .window > .optionsColumnsWrapper {
+  flex: 1;
+  width: 100%;
+  padding-right: 10px;
+  display: flex;
+  gap: 5px;
+  overflow-y: auto;
+}
+.selector > .container > .window > .optionsColumnsWrapper > .optionsColumn {
+  flex: 1;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.selector > .container > .window > .optionsColumnsWrapper > .optionsColumn .optionButton {
+  width: 100%;
+  min-width: 167px;
+  max-width: 200px;
+  padding-left: 20px;
+  padding-right: 7px;
+  height: 38px;
+  font-size: 1rem;
+  text-align: left;
+  color: #333;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border-radius: 3px;
+}
+.selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected {
+  background-color: #e0eaf5;
+  color: #0729ae;
+}
+.selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.withIcon {
+  padding-left: 35px;
+  background-repeat: no-repeat;
+  background-position: left 8px center;
+  background-size: 17px auto;
+}
+.selector > .container > .window > .optionsColumnsWrapper > .optionsColumn.singleColumn .optionButton {
+  max-width: 100%;
+}
+
+.selector.visible {
+  visibility: visible;
+}
+.selector.visible > .shadow,
+.selector.visible > .container {
+  opacity: 1;
+}
+
+.selector.dark > .container > .window {
+  background-color: #181818;
+  border-color: #1a1a1a;
+}
+.selector.dark > .container > .window > .toolbar {
+  border-bottom-color: #e6e6e6;
+}
+.selector.dark > .container > .window > .toolbar > .searchInput {
+  color: #ccc;
+}
+.selector.dark > .container > .window > .toolbar > .title {
+  color: #ccc;
+}
+.selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton {
+  color: #ccc;
+}
+.selector.dark > .container > .window > .toolbar > .closeButton > * {
+  display: none;
+}
+.selector.dark > .container > .window > .toolbar > .closeButton > .closeIcon_dark {
+  display: flex;
+}
+.selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected {
+  color: #ccc;
+}
+.selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected {
+  background-color: #269;
+  color: #fff;
+}
+
+@media only screen and (max-width: 450px) {
+  .selector > .container > .window {
+    width: 100%;
+    max-width: 100%;
+    min-width: 100%;
+    height: 100%;
+    min-height: unset;
+    max-height: 85%;
+    padding-top: 20px;
+    border: unset;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    top: unset;
+    bottom: 0;
+    left: 0;
+    transform: unset;
+  }
+  .selector > .container > .window > .toolbar {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    position: relative;
+    padding-bottom: 8px;
+  }
+  .selector > .container > .window > .toolbar > .searchContainer {
+    width: calc(100% - 50px);
+    flex: none;
+  }
+  .selector > .container > .window > .toolbar > .recentSelectsWrapper {
+    text-align: left;
+    flex: none;
+    width: 100%;
+    margin-bottom: -5px;
+  }
+  .selector > .container > .window > .toolbar > .closeButton {
+    flex: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: -6px -8px 0 0;
+  }
+  .selector > .container > .window > .toolbar > .closeButton > * {
+    display: none !important;
+  }
+  .selector > .container > .window > .toolbar > .closeButton > .downIcon_light {
+    display: flex !important;
+  }
+  .selector > .container > .window > .optionsColumnsWrapper {
+    width: calc(100% + 5px);
+    padding-right: 5px;
+  }
+  .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn {
+    width: 100%;
+  }
+  .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton {
+    min-width: unset;
+    max-width: unset;
+  }
+  .selector.dark > .container > .window > .toolbar > .closeButton > * {
+    display: none !important;
+  }
+  .selector.dark > .container > .window > .toolbar > .closeButton > .downIcon_dark {
+    display: flex !important;
+  }
+}/*# sourceMappingURL=selector.css.map */
 `;

src/selector.ts

@@ -50,3 +50,3 @@ //custom types:
         //append CSS styles to DOM:
-        // Selector.appendCSS();//comment at dev mode
+        Selector.appendCSS();//comment at dev mode
 
@@ -484,3 +484,358 @@ //the view:
 const Style = `
+@media (hover: hover) and (pointer: fine) {
+  .thinScrollbar::-webkit-scrollbar, .selector > .container > .window > .optionsColumnsWrapper::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  .thinScrollbar::-webkit-scrollbar-track, .selector > .container > .window > .optionsColumnsWrapper::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .thinScrollbar::-webkit-scrollbar-thumb, .selector > .container > .window > .optionsColumnsWrapper::-webkit-scrollbar-thumb {
+    background: #bbb;
+    border-radius: 20px;
+  }
+  .darkMode .thinScrollbar::-webkit-scrollbar-thumb, .darkMode .selector > .container > .window > .optionsColumnsWrapper::-webkit-scrollbar-thumb {
+    background: #555;
+  }
+}
+.transparentBackground, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected, .selector > .container > .window > .toolbar > .closeButton, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton {
+  transition: background-color 50ms;
+}
 
+.transparentBackground:enabled:active, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:active, .selector > .container > .window > .toolbar > .closeButton:enabled:active, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:active {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .transparentBackground, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected, .selector > .container > .window > .toolbar > .closeButton, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton {
+    transition: background-color 150ms;
+  }
+  .transparentBackground:enabled:hover, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:hover, .selector > .container > .window > .toolbar > .closeButton:enabled:hover, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:hover {
+    background-color: rgba(0, 0, 0, 0.03) !important;
+  }
+  .transparentBackground:enabled:focus, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:focus, .selector > .container > .window > .toolbar > .closeButton:enabled:focus, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:focus {
+    background-color: rgba(0, 0, 0, 0.04) !important;
+  }
+  .transparentBackground:enabled:active, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:active, .selector > .container > .window > .toolbar > .closeButton:enabled:active, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:active {
+    background-color: rgba(0, 0, 0, 0.08) !important;
+  }
+}
+.transparentBackground:disabled, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:disabled, .selector > .container > .window > .toolbar > .closeButton:disabled, .selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.coloredBackground, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected {
+  opacity: 0.8;
+}
+
+.coloredBackground:enabled:active, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected:enabled:active {
+  opacity: 1;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .coloredBackground:enabled:hover, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected:enabled:hover {
+    opacity: 0.85;
+  }
+  .coloredBackground:enabled:focus, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected:enabled:focus {
+    opacity: 0.9;
+  }
+  .coloredBackground:enabled:active, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected:enabled:active {
+    opacity: 1;
+  }
+}
+.coloredBackground:disabled, .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.transparentBackground_dark, .selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected, .selector.dark > .container > .window > .toolbar > .closeButton, .selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton {
+  transition: background-color 50ms;
+}
+
+.transparentBackground_dark:enabled:active, .selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:active, .selector.dark > .container > .window > .toolbar > .closeButton:enabled:active, .selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:active {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .transparentBackground_dark, .selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected, .selector.dark > .container > .window > .toolbar > .closeButton, .selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton {
+    transition: background-color 150ms;
+  }
+  .transparentBackground_dark:enabled:hover, .selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:hover, .selector.dark > .container > .window > .toolbar > .closeButton:enabled:hover, .selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:hover {
+    background-color: rgba(255, 255, 255, 0.12) !important;
+  }
+  .transparentBackground_dark:enabled:focus, .selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:focus, .selector.dark > .container > .window > .toolbar > .closeButton:enabled:focus, .selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:focus {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+  }
+  .transparentBackground_dark:enabled:active, .selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected:enabled:active, .selector.dark > .container > .window > .toolbar > .closeButton:enabled:active, .selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton:enabled:active {
+    background-color: rgba(255, 255, 255, 0.07) !important;
+  }
+}
+.selector {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  visibility: hidden;
+  z-index: 99999999;
+}
+.selector * {
+  box-sizing: border-box;
+}
+.selector > .shadow {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 160ms ease-in-out;
+}
+.selector > .container {
+  width: 100%;
+  height: 100%;
+  max-height: 800px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity 160ms ease-in-out;
+}
+.selector > .container > .window {
+  max-width: calc(100% - 100px);
+  min-height: 260px;
+  max-height: calc(100% - 60px);
+  padding: 15px 17px;
+  padding-top: 13px;
+  background-color: white;
+  border: solid 1px rgb(100, 100, 100);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.selector > .container > .window > .toolbar {
+  border-bottom: solid 1px #e6e6e6;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+}
+.selector > .container > .window > .toolbar > .title {
+  min-width: 226px;
+  padding-left: 2px;
+  color: #333;
+}
+.selector > .container > .window > .toolbar > .searchContainer {
+  flex: 1;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  display: flex;
+  align-items: center;
+}
+.selector > .container > .window > .toolbar > .searchContainer > svg {
+  min-width: 30px;
+}
+.selector > .container > .window > .toolbar > .searchContainer > .searchInput {
+  flex: 1;
+  font-size: 1rem;
+  color: #333;
+}
+.selector > .container > .window > .toolbar > .recentSelectsWrapper {
+  text-align: right;
+  height: 35px;
+  display: none;
+  overflow: hidden;
+}
+.selector > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton {
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  padding-left: 7px;
+  padding-right: 7px;
+  height: 35px;
+  font-size: 1rem;
+  text-align: center;
+  color: #333;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border-radius: 3px;
+}
+.selector > .container > .window > .toolbar > .closeButton {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: -5px;
+  margin-bottom: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.selector > .container > .window > .toolbar > .closeButton > * {
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+.selector > .container > .window > .toolbar > .closeButton > .closeIcon_light {
+  display: flex;
+}
+.selector > .container > .window > .optionsColumnsWrapper {
+  flex: 1;
+  width: 100%;
+  padding-right: 10px;
+  display: flex;
+  gap: 5px;
+  overflow-y: auto;
+}
+.selector > .container > .window > .optionsColumnsWrapper > .optionsColumn {
+  flex: 1;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.selector > .container > .window > .optionsColumnsWrapper > .optionsColumn .optionButton {
+  width: 100%;
+  min-width: 167px;
+  max-width: 200px;
+  padding-left: 20px;
+  padding-right: 7px;
+  height: 38px;
+  font-size: 1rem;
+  text-align: left;
+  color: #333;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border-radius: 3px;
+}
+.selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected {
+  background-color: #e0eaf5;
+  color: #0729ae;
+}
+.selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.withIcon {
+  padding-left: 35px;
+  background-repeat: no-repeat;
+  background-position: left 8px center;
+  background-size: 17px auto;
+}
+.selector > .container > .window > .optionsColumnsWrapper > .optionsColumn.singleColumn .optionButton {
+  max-width: 100%;
+}
+
+.selector.visible {
+  visibility: visible;
+}
+.selector.visible > .shadow,
+.selector.visible > .container {
+  opacity: 1;
+}
+
+.selector.dark > .container > .window {
+  background-color: #181818;
+  border-color: #1a1a1a;
+}
+.selector.dark > .container > .window > .toolbar {
+  border-bottom-color: #e6e6e6;
+}
+.selector.dark > .container > .window > .toolbar > .searchInput {
+  color: #ccc;
+}
+.selector.dark > .container > .window > .toolbar > .title {
+  color: #ccc;
+}
+.selector.dark > .container > .window > .toolbar > .recentSelectsWrapper > .recentButton {
+  color: #ccc;
+}
+.selector.dark > .container > .window > .toolbar > .closeButton > * {
+  display: none;
+}
+.selector.dark > .container > .window > .toolbar > .closeButton > .closeIcon_dark {
+  display: flex;
+}
+.selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.unselected {
+  color: #ccc;
+}
+.selector.dark > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton.selected {
+  background-color: #269;
+  color: #fff;
+}
+
+@media only screen and (max-width: 450px) {
+  .selector > .container > .window {
+    width: 100%;
+    max-width: 100%;
+    min-width: 100%;
+    height: 100%;
+    min-height: unset;
+    max-height: 85%;
+    padding-top: 20px;
+    border: unset;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    top: unset;
+    bottom: 0;
+    left: 0;
+    transform: unset;
+  }
+  .selector > .container > .window > .toolbar {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    position: relative;
+    padding-bottom: 8px;
+  }
+  .selector > .container > .window > .toolbar > .searchContainer {
+    width: calc(100% - 50px);
+    flex: none;
+  }
+  .selector > .container > .window > .toolbar > .recentSelectsWrapper {
+    text-align: left;
+    flex: none;
+    width: 100%;
+    margin-bottom: -5px;
+  }
+  .selector > .container > .window > .toolbar > .closeButton {
+    flex: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: -6px -8px 0 0;
+  }
+  .selector > .container > .window > .toolbar > .closeButton > * {
+    display: none !important;
+  }
+  .selector > .container > .window > .toolbar > .closeButton > .downIcon_light {
+    display: flex !important;
+  }
+  .selector > .container > .window > .optionsColumnsWrapper {
+    width: calc(100% + 5px);
+    padding-right: 5px;
+  }
+  .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn {
+    width: 100%;
+  }
+  .selector > .container > .window > .optionsColumnsWrapper > .optionsColumn > .optionButton {
+    min-width: unset;
+    max-width: unset;
+  }
+  .selector.dark > .container > .window > .toolbar > .closeButton > * {
+    display: none !important;
+  }
+  .selector.dark > .container > .window > .toolbar > .closeButton > .downIcon_dark {
+    display: flex !important;
+  }
+}/*# sourceMappingURL=selector.css.map */
 `;

No alert changes

Improved metrics

Total package byte prevSize

112251

increased by64.4%

Number of package files

12

increased by20%

Lines of code

2109

increased by102.4%

No dependency changes