You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
XJC/scss/mdb/pro/_dropdowns-pro.scss

226 lines
6.0 KiB
SCSS

// Dropdown pro
// Dropdowns menu's colors
.dropdown {
.dropdown-menu {
padding: $dropdown-menu-padding;
@each $name, $color in $material-colors {
&.dropdown-#{$name} {
.dropdown-item {
&:hover,
&:active {
background-color: $color;
}
}
}
}
.dropdown-item {
padding: 0.5rem;
margin-left: 0;
font-size:0.9rem;
&:hover,
&:active {
@include border-radius($border-radius);
@include transition(all 0.1s linear);
@extend .z-depth-1-half;
@extend .white-text;
background-color: $primary-color;
}
}
}
}
.dropdown-menu-right {
right: 0;
left: auto!important;
}
.dropdown-content {
@extend .z-depth-1;
background-color: $dropdown-bg-color;
margin: 0;
display: none;
min-width: 100px;
max-height: 650px;
overflow-y: auto;
opacity: 0;
position: absolute;
z-index: 999;
will-change: width, height;
li {
clear: both;
color: #000;//$off-black;
cursor: pointer;
line-height: 1.3rem;
width: 100%;
text-align: left;
text-transform: none;
&:hover,
&.active {
background-color: $dropdown-hover-bg-color;
}
& > a,
& > span {
font-size: 0.7rem;
color: $dropdown-color;
display: block;
padding: 0.5rem;
}
// Icon alignment override
& > a > i {
height: inherit;
line-height: inherit;
}
}
}
// Material select color variations
.colorful-select {
.dropdown-content {
padding: 0.5rem;
li {
&.active span {
color: #fff!important;
@extend .z-depth-1-half;
[type="checkbox"]:checked + label:before {
border-color: transparent white white transparent;
}
}
a:hover, span:hover {
color: #fff!important;
@extend .z-depth-2;
@include transition (all 0.1s linear);
@include border-radius (2px);
[type="checkbox"] + label:before {
border-color: white;
}
[type="checkbox"]:checked + label:before {
border-color: transparent white white transparent;
}
}
optgroup {
}
&.disabled,
&:disabled,
&.optgroup {
&.active span {
@extend .z-depth-0;
color: $rgba-black-light !important;
border-bottom-color: $rgba-black-light;
cursor: default;
}
a:hover, span:hover {
@extend .z-depth-0;
color: $rgba-black-light !important;
border-bottom-color: $rgba-black-light;
cursor: default;
background-color: white !important;
}
label {
cursor: default;
}
}
}
}
}
// Dropdown color variations
.dropdown {
.dropdown-menu {
padding: 0.5rem;
&.dd-right {
left: -100px;
}
&.dropdown-primary .dropdown-item {
&:hover,
&:active {
background-color: $primary-color;
}
}
&.dropdown-danger .dropdown-item {
&:hover,
&:active {
background-color: $danger-color-dark;
}
}
&.dropdown-default .dropdown-item {
&:hover,
&:active {
background-color: $default-color;
}
}
&.dropdown-secondary .dropdown-item {
&:hover,
&:active {
background-color: $secondary-color;
}
}
&.dropdown-success .dropdown-item {
&:hover,
&:active {
background-color: $success-color;
}
}
&.dropdown-info .dropdown-item {
&:hover,
&:active {
background-color: $info-color;
}
}
&.dropdown-warning .dropdown-item {
&:hover,
&:active {
background-color: $warning-color-dark;
}
}
&.dropdown-ins .dropdown-item {
&:hover,
&:active {
background-color: $ins-color;
}
}
&.dropdown-dark .dropdown-item {
&:hover,
&:active {
background-color: $elegant-color;
}
}
.dropdown-item {
padding: 0.5rem;
margin-left:0;
&:hover,
&:active {
border-radius: 2px;
color: #fff!important;
transition: all 0.1s linear;
@extend .z-depth-2;
background-color: $primary-color;
}
}
}
}
@each $type, $color in $dropdown-colors {
.dropdown-#{$type} {
.dropdown-content li {
&.active, a, span:hover {
background-color: $color;
}
}
.search-wrap input:focus {
border-bottom: 1px solid $color;
box-shadow: 0 1px 0 0 $color;
}
}
}
.dropdown-menu.animated {
/* Speed up animations */
-webkit-animation-duration: 0.55s;
animation-duration: 0.55s;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
}