awesome-selector
Advanced tools
Comparing version 1.0.0 to 1.0.1
{ | ||
"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", |
@@ -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 */ | ||
`; |
@@ -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 */ | ||
`; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
112251
12
2109