12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- .dropmenu {
- @include breakpoint(md) {
- display: none;
- }
- ul {
- white-space: nowrap;
- margin: 0;
- display: flex;
- li {
- position: relative;
- margin: 0;
- a {
- text-decoration: none;
- padding: $dropmenu-vert-padding ($dropmenu-horiz-padding + $dropmenu-child-padding) $dropmenu-vert-padding $dropmenu-horiz-padding;
- display: block;
- &:hover, &:focus, &.active {
- color: $dropmenu-hover-text !important;
- }
- &:before {
- content: '\f107';
- font-family: 'FontAwesome';
- display: inline-block;
- vertical-align: middle;
- float: right;
- margin-right: - (2 *$dropmenu-child-padding);
- }
- &:only-child {
- //background: none;
- padding-right: $dropmenu-horiz-padding;
- &:before {
- content: '';
- }
- }
- }
- &:hover {
- & > ul {
- display: block;
- visibility: visible;
- }
- }
- }
- ul li a:before {
- content: '\f105';
- }
- ul {
- position: absolute;
- top: 100%;
- list-style: none;
- background: $dropmenu-bg;
- box-shadow: $dropmenu-shadow;
- visibility: hidden;
- ul {
- position: absolute;
- left: 100%;
- top: 0;
- }
- }
- }
- & > ul > li {
- display: inline-block;
- }
- // Animation options
- &.animated {
- ul li {
- transition: background .7s, color 0.5s;
- }
- ul li:hover > ul {
- opacity: 1;
- transform: translateY(0);
- }
- ul ul {
- transition: transform .3s, opacity .5s;
- opacity: 0;
- transform: translateY(-10px);
- }
- }
- }
|