// ------------------------------------ Base ------------------------------------ // .dropdown{ .dropdown-contents{ li{ margin: 10px 0; a{ font-size:14px; } } } .menu-label{ display: block; } .menu-description{ display: block; font-weight: normal; font-size: 12px; margin-top: 2px; color: $medium-text; } .admin-item{ .menu-label:after{ content: "[A]"; font-size: 10px; color: $red; display: inline-block; margin-left: 3px; } } .dropdown-top-label{ cursor: pointer; } } // ------------------------------------ List ------------------------------------ // .dropdown-list{ .show-more{ display: none; } } // ------------------------------------ Hover ------------------------------------ // .dropdown-hover{ position:relative; &.dropdown-has-items{ .dropdown-top-level{ cursor: pointer; &:after{ display:inline-block; position:relative; top:-1px; margin-left:4px; content:"▼"; font-size:8px; } } &:hover{ .dropdown-menu{ display:block; } } } .dropdown-menu{ display:none; top:10px; left:10px; position:absolute; padding-top:20px; z-index: 10000; &, a, a:link, a:visited{ color: $text; } a.button{ color: white; } ul{ background:white; padding:1px 10px; min-width:180px; border-radius: 3px; box-shadow: 0 1px 3px black(0.35); list-style-type: none; } } .show-more{ display: none; } } // ------------------------------------ Accordion ------------------------------------ // .dropdown-accordion{ /* ------- Show More Button ------- */ .show-more{ border-top: 1px solid #ccc; padding: 8px 0; display: none; text-align: center; .show-more-icon{ display: block; visibility: hidden; // hide until SVG injection height: 20px; width: 20px; opacity: 0.5; margin: 0 auto; } &:hover{ background: white(0.2); .show-more-icon{ opacity: 1; } } .show-more-minus{ display: none; } } &.dropdown-long .show-more{ display: block; // only show the "show more" button if the dropdown has more than three items } &.dropdown-open{ .show-more-minus{ display: block; } .show-more-plus{ display: none; } } /* expand/collapse animation */ .dropdown-contents{ max-height: 103px; overflow: hidden; @include animate(max-height); } &.dropdown-open .dropdown-contents{ max-height: 999px !important; } }