first commit
This commit is contained in:
mukesh13
277
public/scss/component/_nice-select.scss
Normal file
277
public/scss/component/_nice-select.scss
Normal file
@ -0,0 +1,277 @@
|
||||
@use "../abstracts/index" as *;
|
||||
|
||||
.nice-select {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: var(--White);
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition: all linear 0.2s;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "\e923";
|
||||
font-family: $fontIcon;
|
||||
right: 10px;
|
||||
font-size: 24px;
|
||||
top: 50%;
|
||||
color: var(--Black);
|
||||
position: absolute;
|
||||
transform: translateY(-50%) rotate(0);
|
||||
@include transition3();
|
||||
z-index: 1;
|
||||
}
|
||||
> span {
|
||||
font-weight: 400;
|
||||
}
|
||||
> .list {
|
||||
position: absolute;
|
||||
background-color: var(--White);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
|
||||
box-sizing: border-box;
|
||||
margin-top: 4px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
-webkit-transform-origin: 50% 0;
|
||||
-ms-transform-origin: 50% 0;
|
||||
transform-origin: 50% 0;
|
||||
-webkit-transform: scale(0.75) translateY(-21px);
|
||||
-ms-transform: scale(0.75) translateY(-21px);
|
||||
transform: scale(0.75) translateY(-21px);
|
||||
-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25),
|
||||
opacity 0.15s ease-out;
|
||||
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
|
||||
z-index: 9;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
max-height: 155px;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 4px;
|
||||
background-color: #f5f5f5;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #a7a7a7;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
|
||||
background-color: #f5f5f5;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.option {
|
||||
width: 100%;
|
||||
padding: 10px 10px;
|
||||
color: var(--Text);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
&.selected {
|
||||
color: var(--Main-color);
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
&::after {
|
||||
position: absolute;
|
||||
font-family: $fontIcon;
|
||||
content: "\e930";
|
||||
right: 18px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.open {
|
||||
border-color: var(--Line) !important;
|
||||
z-index: 99;
|
||||
&::after {
|
||||
transform: translateY(-50%) rotate(-180deg);
|
||||
}
|
||||
.list {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
z-index: 10;
|
||||
pointer-events: auto;
|
||||
-webkit-transform: scale(1) translateY(0);
|
||||
-ms-transform: scale(1) translateY(0);
|
||||
transform: scale(1) translateY(0);
|
||||
width: 100%;
|
||||
-moz-transform: scale(1) translateY(0);
|
||||
-o-transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
&.select-sort {
|
||||
padding-right: 30px !important;
|
||||
&::after {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 18px;
|
||||
}
|
||||
&.open {
|
||||
&::after {
|
||||
transform: translateY(-50%) rotate(-180deg);
|
||||
}
|
||||
}
|
||||
&.style-2 {
|
||||
> .list {
|
||||
right: 0;
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import url(/css/bootstrap-select.min.css);
|
||||
|
||||
.image-select {
|
||||
&.style-default {
|
||||
display: flex;
|
||||
width: max-content !important;
|
||||
> select {
|
||||
display: none !important;
|
||||
}
|
||||
> .dropdown-toggle {
|
||||
padding: 0;
|
||||
padding-right: 25px;
|
||||
background-color: transparent !important;
|
||||
border: 0 !important;
|
||||
outline: none !important;
|
||||
&::after {
|
||||
border: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
content: "\e958";
|
||||
font-family: "icomoon";
|
||||
font-size: 6px;
|
||||
color: var(--White);
|
||||
}
|
||||
}
|
||||
.filter-option-inner-inner {
|
||||
@include flex(center, flex-start);
|
||||
gap: 8px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
width: 30px;
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
> .dropdown-menu {
|
||||
overflow: unset !important;
|
||||
margin-top: 17px !important;
|
||||
margin-bottom: 17px !important;
|
||||
padding: 8px 10px;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background-color: var(--White);
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
|
||||
a {
|
||||
padding: 5px 0;
|
||||
.text {
|
||||
@include flex(center, flex-start);
|
||||
gap: 5px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
color: var(--primary) !important;
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
background-color: var(--White);
|
||||
top: 0;
|
||||
left: 60%;
|
||||
z-index: 2;
|
||||
}
|
||||
&[data-popper-placement="top-start"] {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: translate(-50%, 50%) rotate(45deg);
|
||||
background-color: var(--White);
|
||||
bottom: 00%;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.style-box {
|
||||
padding: 6px 11px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--line);
|
||||
background-color: var(--White);
|
||||
> .dropdown-toggle {
|
||||
width: max-content;
|
||||
}
|
||||
.filter-option-inner-inner {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
> .dropdown-menu {
|
||||
margin-left: -11px !important;
|
||||
width: 160px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.type-currencies {
|
||||
> .dropdown-menu {
|
||||
width: 78px !important;
|
||||
margin-left: calc(50% - 61px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user