Line 126: | Line 126: | ||
.navbar-brand a.navbar-item:hover { | .navbar-brand a.navbar-item:hover { | ||
background-color: transparent; | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | .navbar-item.is-active .navbar-dropdown, | ||
+ | .navbar-item.is-hoverable:focus .navbar-dropdown, | ||
+ | .navbar-item.is-hoverable:focus-within .navbar-dropdown, | ||
+ | .navbar-item.is-hoverable:hover .navbar-dropdown { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .navbar.is-spaced .navbar-item.is-active .navbar-dropdown, | ||
+ | .navbar-item.is-active .navbar-dropdown.is-boxed, | ||
+ | .navbar.is-spaced .navbar-item.is-hoverable:focus .navbar-dropdown, | ||
+ | .navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed, | ||
+ | .navbar.is-spaced .navbar-item.is-hoverable:focus-within .navbar-dropdown, | ||
+ | .navbar-item.is-hoverable:focus-within .navbar-dropdown.is-boxed, | ||
+ | .navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown, | ||
+ | .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed { | ||
+ | opacity: 1; | ||
+ | pointer-events: auto; | ||
+ | -webkit-transform: translateY(0); | ||
+ | transform: translateY(0); | ||
+ | } | ||
+ | |||
+ | .navbar-dropdown { | ||
+ | background-color: white; | ||
+ | border-bottom-left-radius: 6px; | ||
+ | border-bottom-right-radius: 6px; | ||
+ | border-top: 2px solid #dbdbdb; | ||
+ | box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); | ||
+ | display: none; | ||
+ | font-size: 0.875rem; | ||
+ | left: 0; | ||
+ | min-width: 100%; | ||
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | z-index: 20; | ||
+ | } | ||
+ | |||
+ | .navbar-dropdown .navbar-item { | ||
+ | padding: 0.375rem 1rem; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | |||
+ | .navbar-dropdown a.navbar-item { | ||
+ | padding-right: 3rem; | ||
+ | } | ||
+ | |||
+ | .navbar-dropdown a.navbar-item:focus, | ||
+ | .navbar-dropdown a.navbar-item:hover { | ||
+ | background-color: whitesmoke; | ||
+ | color: #0a0a0a; | ||
+ | } | ||
+ | |||
+ | .navbar-dropdown a.navbar-item.is-active { | ||
+ | background-color: whitesmoke; | ||
+ | color: #3273dc; | ||
} | } | ||
Revision as of 16:41, 21 July 2019