UNPKG

@sgalinski/responsive-side-menu

Version:

A simple and extendable slide-in menu

210 lines (196 loc) 5.08 kB
@charset "UTF-8"; .rsm-search-plugin [type="text"] { padding: 10px 20px; display: block; width: 100%; border: 0; background: #337AB7; color: #FFF; } .rsm-search-plugin [type="text"]::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.8); } .rsm-search-plugin [type="text"]::-moz-placeholder { color: rgba(255, 255, 255, 0.8); } .rsm-search-plugin [type="text"]:-ms-input-placeholder { color: rgba(255, 255, 255, 0.8); } .rsm-search-plugin [type="text"]::placeholder { color: rgba(255, 255, 255, 0.8); } .rsm-top-menu { position: absolute; width: 100%; background: #dbe9f5; top: 0; z-index: 100; display: flex; flex-wrap: wrap; } .rsm-top-menu-button { padding: 10px 20px; } .rsm-footer-menu { position: absolute; width: 100%; background: #dbe9f5; bottom: 0; z-index: 100; display: flex; flex-wrap: wrap; } .rsm-footer-menu-button { padding: 10px 20px; } .rsm-user-profile-header img { margin: auto; display: block; border-radius: 50%; } .rsm-user-profile-header .rsm-user-profile-header-link { background: transparent; color: #FFF; text-align: center; } .rsm-user-profile-header .rsm-user-profile-header-link:hover, .rsm-user-profile-header .rsm-user-profile-header-link:focus { background: transparent; } .rsm .rsm-user-profile-header-wrapper-link { background: transparent; } .rsm .rsm-user-profile-header-wrapper-link:hover, .rsm .rsm-user-profile-header-wrapper-link:focus { background: transparent; } .rsm-header { padding: 60px 20px 20px; background: #286090; color: #FFF; font-size: 20px; font-weight: 700; } .rsm-close { background: transparent; border: 0; color: #FFF; position: absolute; top: 7px; right: 9px; font-size: 30px; width: 35px; height: 35px; line-height: 1; text-align: center; z-index: 200; } .rsm-close::after { content: '×'; } .rsm { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1000; } .rsm::before { position: absolute; content: ''; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); transition: opacity .2s ease-in-out; opacity: 0; will-change: opacity; } .rsm.rsm-open { pointer-events: auto; } .rsm.rsm-open::before { opacity: 1; } .rsm li { list-style: none; } .rsm-root { margin: 0; padding: 0; height: 100%; background: #FFF; transition: -webkit-transform .4s ease-in-out; transition: transform .4s ease-in-out; transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out; will-change: transform; overflow-x: hidden; overflow-y: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.5); } .rsm-orientation-left .rsm-root { -webkit-transform: translateX(-110%); transform: translateX(-110%); } .rsm-orientation-right > .rsm-root { -webkit-transform: translateX(110%); transform: translateX(110%); left: auto; } .rsm-root .rsm-root { -webkit-transform: translateX(110%); transform: translateX(110%); } .rsm > .rsm-root { width: 90%; max-width: 400px; } .rsm-open > .rsm-root { -webkit-transform: none; transform: none; } .rsm-root .rsm-sub-open { -webkit-transform: none; transform: none; } .rsm-root a { display: block; padding: 10px 20px; color: #000; text-decoration: none; transition: background .2s ease, color .2s ease; } .rsm-root a:hover { background: #5094ce; color: #FFF; } .rsm-root .rsm-sub-opener { position: relative; display: block; width: 100%; z-index: 0; } .rsm-root .rsm-sub-opener:hover { background: #5094ce; } .rsm-root .rsm-sub-opener::before { content: ''; display: block; background: #286090; position: absolute; width: 45px; top: 0; bottom: 0; right: 0; } .rsm-root .rsm-sub-opener::after { margin-top: -1px; content: '▶'; display: block; position: absolute; top: 50%; right: 0; text-align: center; width: 45px; color: #FFF; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .rsm-root .rsm-back-link a { display: block; background: #286090; color: #FFF; } .rsm-root .rsm-back-link a::before { content: '◀'; } .rsm-root .rsm-back-link a .rsm-back-link-title { margin-left: 10px; display: inline-block; vertical-align: middle; font-weight: 700; } .rsm-root .rsm-back-link a:hover { background: #5094ce; } .rsm-root .rsm-root > li:not(.rsm-section-link):not(.rsm-back-link) > a { padding: 10px 20px 10px 30px; } .rsm-root .rsm-section-link { background-color: #dbe9f5; } .rsm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /*# sourceMappingURL=responsive-side-menu.css.map */