| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- // *************************************
- //
- // Dropdown
- // -> Dropdown menus
- //
- // -------------------------------------
- // Template (Haml)
- // -------------------------------------
- //
- // .dropdown(.is-active)
- // %a.dropdown-btn.btn{href: '#'} Button
- // %ul.dropdown-menu.list
- // %li.dropdown-item.list-item(.is-active)
- // %a.dropdown-item-link.list-item-link{href: '#'} Item
- // %li.dropdown-item.list-item(.is-active)
- // %a.dropdown-item-link.list-item-link{href: '#'} Item
- //
- // *************************************
- // ----- Dropdown ----- //
- $dropdown-width: 150px
- $b-transitionSpeed: 0.3s
- .dropdown
- max-width: $dropdown-width
- position: relative
- width: auto
- z-index: 30
- // -------------------------------------
- // States
- // -------------------------------------
- // ----- Active ----- //
- .dropdown:hover
- .dropdown-btn
- color: $c-text-invert
- &::after
- color: $c-text-invert
- .dropdown-menu
- @extend %fauxShow
- +transition(opacity $b-transitionSpeed ease-in-out, top $b-transitionSpeed ease-in-out)
- top: 130%
- // -------------------------------------
- // Context
- // -------------------------------------
- .has-dropdown
- overflow: visible
- // -------------------------------------
- // Scaffolding
- // -------------------------------------
- // ----- Button ----- //
- .dropdown-btn
- $placement: 'after'
- // @extend %icn
- // @extend %icn--#{$placement}
- // @extend %icn--arrowDown--alt--#{$placement}
- display: block
- &:hover,
- &:focus
- &::#{$placement}
- color: $c-text-invert
- &::#{$placement}
- color: $c-highlight
- font-size: 7px // IE being a jerk.
- left: auto
- line-height: 30px // IE being a jerk.
- padding-left: (1.25 * $b-space)
- padding-right: (1.25 * $b-space)
- // ----- Item ----- //
- .dropdown-item
- border-bottom: $b-border
- margin: 0
- &:last-child
- border: 0
- &:hover
- background: darken(#fff, 15%)
- // Link
- .dropdown-item-link
- border: 0
- display: block
- padding: $b-space-s $b-space
- // ----- Menu ----- //
- .dropdown-menu
- @extend %boxSizing
- @extend %card
- @extend %fauxHide
- border-radius: 0
- font-size: $b-fontSize-m
- left: 50%
- margin-left: -($dropdown-width / 2)
- padding: 0
- position: absolute
- text-align: center
- top: 3.5 * $b-space
- width: $dropdown-width
- z-index: 10
- &::after
- +caret('top', 8px, $c-text-invert)
|
