tonyair/silverstripe-webpack
1
1
Fork 0
mirror of https://github.com/a2nt/silverstripe-webpack.git synced 2024-10-22 17:05:31 +02:00
Code Issues Projects Releases Wiki Activity

hover dropdown

Browse Source
This commit is contained in:
Tony Air 2019-08-19 14:56:29 +07:00
parent aabf571396
commit 7eba950986
3 changed files with 69 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/src/js/app.js
View File

@ -9,7 +9,7 @@ import 'bootstrap/js/dist/carousel';
import 'bootstrap/js/dist/collapse';
// conflicting with bootstrap-select/dist/js/bootstrap-select
//import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/tooltip';

67
app/client/src/scss/_components/_ui.main.scss
View File

@ -137,3 +137,70 @@ button, input, optgroup, select, textarea,
@extend .alert-danger;
}
// dropdown icon
.dropdown.show .dropdown-toggle::after,
.dropdown-toggle.active-dropdown::after,
.dropdown-toggle.active::after {
transform: rotate(-90deg);
}
// dropdown hover
@media only screen and (min-width: map-get($grid-breakpoints, "md")) {
.dropdown-hover .collapse ul li {
position: relative;
}
.dropdown-hover .collapse ul li:hover {
> .dropdown-toggle::after {
transform: rotate(-90deg);
}
> ul {
display: block;
}
}
.dropdown-hover .collapse ul ul {
position: absolute;
top: 100%;
left: 0;
min-width: 250px;
display: none;
}
/*******/
.dropdown-hover .collapse ul ul li {
position: relative;
}
.dropdown-hover .collapse ul ul li:hover > ul {
display: block;
}
.dropdown-hover .collapse ul ul ul {
position: absolute;
top: 0;
left: 100%;
min-width: 250px;
display: none;
}
/*******/
.dropdown-hover .collapse ul ul ul li {
position: relative;
}
.dropdown-hover .collapse ul ul ul li:hover ul {
display: block;
}
.dropdown-hover .collapse ul ul ul ul {
position: absolute;
top: 0;
left: -100%;
min-width: 250px;
display: none;
z-index: 1;
}
}

2
app/templates/Includes/Navigation.ss
View File

@ -1,4 +1,4 @@
<nav id="{$NavID}" class="navbar navbar-expand-lg navbar-light bg-light">
<nav id="{$NavID}" class="navbar navbar-expand-lg navbar-light bg-light dropdown-hover">
<button
class="navbar-toggler"
type="button"