An error occurred while loading the file. Please try again.
-
Arun Kumar authored57ec1af2
@import "../../../../../node_modules/common-consumption-styles/assets/_colors.scss";.multi-select-section-app { margin: 1rem 0;}label{ font-size: 14px; font-weight: normal; margin: 0}.multi-select-container { position: relative; margin-bottom: 8px;}.multi-select-container .caret-down { position: absolute; top: 12px; right: 19px; z-index: 0;}.multi-select-container .list-border .placeholder { margin: 0; color: var(--gray-100);}.multi-select-container .list-border ul[disabled] { opacity: 0.3; pointer-events: none;}.multi-select-container .list-border ul { list-style-type: none; position: absolute; margin: 0; font-size: 14px; font-weight: bold;}.multi-select-container .list-border { border: 0.5px solid var(--gray-400); padding: 1.3rem; cursor: pointer; display: flex; align-items: center; left: 0; height: 40px;}.multi-select-container .list-border li { float: left; font-size: 12px; font-weight: 700; margin-left: 4px;}.multi-select-container .dropdown ul { list-style-type: none;}.multi-select-container .dropdown li { cursor: pointer; padding: 8px; border: 1px solid var(--white);}.multi-select-container .dropdown ul {7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
margin: 0;
padding: 0;
}
.multi-select-container .row {
display: grid;
grid-template-columns: 1fr 10fr;
grid-gap: 0rem;
}
.multi-select-container .footer {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0rem;
padding-left: 8px;
padding-bottom: 8px;
padding-top: 8px;
}
.multi-select-container .sb-modal-container {
position: fixed;
height: 100vh;
overflow: hidden;
width: 100%;
left: 0;
top: 0;
right: 0;
z-index: 10;
}
.multi-select-container .sb-modal-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background: rgba(0, 0, 0, 0.6);
left: 0;
z-index: 10;
}
.multi-select-container .fa .fa-close {
float: right;
}
.multi-select-container .sb-modal {
display: block;
position: absolute;
bottom: 0px;
width: 100%;
--border-top: 0.5px solid var(--white);
z-index: 11;
background: var(--white);
}
.multi-select-container .sb-modal ul {
list-style-type: none;
}
.multi-select-container .sb-modal li {
cursor: pointer;
padding-bottom: 8px;
padding-top: 8px;
padding-left: 16px;
}
.value-label {
width: 270px;
white-space: nowrap;
overflow: hidden;
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
text-overflow: ellipsis;
}
.multi-select-container .sb-forms-radio {
margin-top: 6px;
}
.multi-select-container .sb-form-button {
display: inline;
padding: 10px;
}
.multi-select-container .sb-btn-primary-outline {
color: var(--primary-color);
background-color: transparent;
border: 0.5px solid var(--primary-color);
border-radius: 4px;
padding: 10px 40px;
font-size: 16px;
text-transform: uppercase;
width: 100%;
}
.multi-select-container .sb-btn-primary {
color: var(--white);
background-color: var(--primary-color);
border: 0.5px solid var(--primary-color);
border-radius: 4px;
padding: 10px 40px;
font-size: 16px;
text-transform: uppercase;
width: 100%;
}
.multi-select-container .header {
padding: 16px;
margin-left: 8px;
font-weight: bold;
}
.multi-select-container .body {
padding-top: 8px;
border-bottom: 0.5px solid var(--gray-100);
;
border-top: 0.5px solid var(--gray-100);
max-height: 300px;
overflow: scroll;
}
.list-with-ellipsis:nth-child(3) {
float: left;
font-size: 12px;
font-weight: 700;
margin-left: 4px;
width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-with-ellipsis:nth-child(n+4) {
visibility: hidden;
}
/* The container */
.multi-select-container .container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 3px;
left: 0;
height: 15px;
width: 15px;
border: 0.4px solid var(--black);
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: var(--white);
}
/* When the checkbox is checked, add a blue background */
.container input:checked~.checkmark {
background-color: var(--primary-600);
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 5px;
top: 0px;
width: 5px;
height: 10px;
border: solid var(--white);
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.sb-modal-dropdown-web ul {
list-style-type: none;
display: block;
position: absolute;
top: 38px;
left: 0;
background-color: white;
width: 100%;
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
z-index: 999;
box-shadow: 2px 2px 2px 2px aliceblue;
border: 2px solid #80a7ce;
max-height: 314px;
overflow: scroll;
}
.sb-modal-dropdown-web ul li {
margin-top: 10px;
margin-bottom: 8px;
padding: 8px;
font-size: 13px;
}
.sb-modal-dropdown-web .selected-option {
font-weight: bold;
background-color: #eee;
}
/* width */
::-webkit-scrollbar {
width: 6px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.cursor-pointer {
cursor: pointer;
}