1/* =Menu 2----------------------------------------------- */ 3 4.main-navigation { 5 display: block; 6 position: relative; 7 float: left; 8 width: 300px; 9 padding: 0 0 35px; 10 margin: 0 -40px 20px; 11 font-weight: bold; 12 text-transform: uppercase; 13} 14.main-navigation:after { 15 content: ''; 16 display: block; 17 position: absolute; 18 left: 40px; 19 bottom: 0; 20 width: 220px; 21 border-bottom: 3px solid @ini_theme_color_alt; 22} 23.main-navigation ul { 24 list-style: none; 25 margin: 0; 26 padding-left: 0; 27} 28.main-navigation li { 29 position: relative; 30} 31.main-navigation a { 32 display: block; 33 position: relative; 34 padding: 10px 40px; 35 text-decoration: none; 36 color: @ini_background !important; 37} 38.main-navigation a:hover { 39 background: @ini_theme_color_alt; 40} 41.main-navigation ul ul { 42 display: none; 43 opacity: 0; 44 z-index: 9998; 45 float: left; 46 position: absolute; 47 top: 0; 48 left: 100%; 49 width: 300px; 50 background: @ini_theme_color; 51} 52.main-navigation ul ul li:last-child { 53 border-bottom: none; 54} 55.main-navigation .node > div > a { 56 padding-right: 65px; 57} 58.main-navigation .node > div > a:after { 59 font-family: 'bootstrap-icons'; 60 content: '\f285'; 61 display: block; 62 position: absolute; 63 top: calc(25%); 64 right: 20px; 65} 66.main-navigation ul > li:hover > ul { 67 display: block; 68 opacity: 1; 69 -webkit-animation: menuFadeIn 0.25s; 70 -moz-animation: menuFadeIn 0.25s; 71 -ms-animation: menuFadeIn 0.25s; 72 -o-animation: menuFadeIn 0.25s; 73 animation: menuFadeIn 0.25s; 74} 75.main-navigation li .curid > a { 76 background: @ini_text_alt !important; 77} 78 79/* Small menu */ 80.menu-toggle { 81 display: none; 82 cursor: pointer; 83 background: @ini_theme_color_alt; 84} 85.dropdown-icon { 86 display: none; 87 background: @ini_theme_color_alt; 88} 89 90/* =Transition 91----------------------------------------------- */ 92 93@-webkit-keyframes menuFadeIn { 94 95 0% { 96 display:none; 97 opacity: 0; 98 } 99 1% { 100 display: block; 101 opacity: 0; 102 } 103 100% { 104 display: block; 105 opacity: 1; 106 } 107 108} 109@-moz-keyframes menuFadeIn { 110 111 0% { 112 display:none; 113 opacity: 0; 114 } 115 1% { 116 display: block; 117 opacity: 0; 118 } 119 100% { 120 display: block; 121 opacity: 1; 122 } 123 124} 125@-ms-keyframes menuFadeIn { 126 127 0% { 128 display:none; 129 opacity: 0; 130 } 131 1% { 132 display: block; 133 opacity: 0; 134 } 135 100% { 136 display: block; 137 opacity: 1; 138 } 139 140} 141@-o-keyframes menuFadeIn { 142 143 0% { 144 display:none; 145 opacity: 0; 146 } 147 1% { 148 display: block; 149 opacity: 0; 150 } 151 100% { 152 display: block; 153 opacity: 1; 154 } 155 156} 157@keyframes menuFadeIn { 158 159 0% { 160 display:none; 161 opacity: 0; 162 } 163 1% { 164 display: block; 165 opacity: 0; 166 } 167 100% { 168 display: block; 169 opacity: 1; 170 } 171 172} 173