| Current Path : /home/atelierpru/www/OLD/squelettes/less/framework_components/ |
| Current File : /home/atelierpru/www/OLD/squelettes/less/framework_components/dropdowns.less |
.dropdown{
position: relative;
.dropdown__container{
.transition(0.3s,ease);
opacity: 0;
pointer-events: none;
position: absolute;
z-index: 999;
.dropdown__container{
&:before{
height: 0;
}
}
}
.dropdown__content{
padding: @base-line-height;
&:not([class*='col-']){
width: @base-line-height*10;
}
&:not([class*='bg-']){
background: @color-bg-site;
}
&:not([class='bg--dark']){
.menu-vertical{
a{
color: @color-body;
}
}
}
}
.dropdown__trigger{
cursor: pointer;
user-select: none;
}
&.dropdown--active{
>.dropdown__container{
opacity: 1;
>.container{
>.row{
> .dropdown__content{
pointer-events: all;
}
}
}
}
}
}
//Desktop
@media all and (min-width: 991px){
.dropdown{
.dropdown__container{
&:before{
height: @base-line-height/2;
width: 100%;
content: '';
display: block;
}
}
.dropdown__content{
&.dropdown__content--md{
padding: @base-line-height*1.5;
}
&.dropdown__content--lg{
padding: @base-line-height*2;
}
&.dropdown__content--xlg{
padding: @base-line-height*2.5;
}
}
}
}
// Tablet Down
@media all and (max-width: 767px){
.dropdown{
.dropdown__container{
min-width: 100%;
position: relative;
display: none;
}
.dropdown__content{
padding: @base-line-height;
left: 0 !important;
}
&.dropdown--active{
>.dropdown__container{
display: block;
}
}
}
}
// Dropdown Hovers
body.dropdowns--hover{
.dropdown:not(.dropdown--click){
&:hover{
>.dropdown__container{
&:before{
pointer-events: all;
}
opacity: 1;
.dropdown__content{
pointer-events: all;
}
}
}
}
}
body:not(.dropdowns--hover){
.dropdown.dropdown--hover{
&:hover{
>.dropdown__container{
&:before{
pointer-events: all;
}
opacity: 1;
.dropdown__content{
pointer-events: all;
}
}
}
}
}
// Tablet Down
@media all and (max-width: 990px){
body.dropdowns--hover{
.dropdown:not(.dropdown--click){
&.dropdown--active{
>.dropdown__container{
&:before{
pointer-events: all;
}
display: block;
}
}
}
}
}
@media all and (max-width: 767px){
.dropdown{
&.dropdown--absolute{
.dropdown__container{
position: absolute;
}
}
}
}