diff --git a/core/client/assets/sass/modules/dropdowns.scss b/core/client/assets/sass/modules/dropdowns.scss index 7504e658f5..a10da8f9d6 100644 --- a/core/client/assets/sass/modules/dropdowns.scss +++ b/core/client/assets/sass/modules/dropdowns.scss @@ -8,15 +8,19 @@ // List .dropdown-menu { - + position: relative; display: inline-block; min-width: 160px; padding: 0.5rem 0; margin: 0; - position: relative; + font-size: 1.4rem; + line-height: 1; + font-weight: normal; + text-transform: none; + letter-spacing: 0; background: #fff; - border: 1px solid rgba(0,0,0,0.15); - box-shadow: 0 1px 12px rgba(0,0,0,0.175); + border: #B0BEC4 1px solid; + box-shadow: rgba(0,0,0,0.175) 0 2px 6px; border-radius: 2px; // Item Resets - This means we can use any element @@ -39,20 +43,21 @@ &:after { content: ''; position: absolute; - width: 20px; - height: 20px; + width: 12px; + height: 12px; background: #fff; transform: rotate(45deg); - box-shadow: 0 0 5px 1px rgba(0,0,0,0.175); + box-shadow: #B0BEC4 0 0 0 1px; z-index: -1; } // :after } // %triangle %triangle-top { @extend %triangle; + &:before { - border-width: 0 10px 10px 10px; - top: -10px; + border-width: 0 6px 6px 6px; + top: -6px; } &:after { top: -5px; @@ -61,9 +66,10 @@ %triangle-bottom { @extend %triangle; + &:before { - border-width: 10px 10px 0 10px; - bottom: -10px; + border-width: 6px 6px 0 6px; + bottom: -6px; } &:after { bottom: -5px; @@ -74,33 +80,36 @@ &.triangle-top { @extend %triangle-top; + &:before { left: 50%; - margin-left: -10px; + margin-left: -6px; } &:after { left: 50%; - margin-left: -10px; + margin-left: -6px; } } // &.triangle-top &.triangle-top-left { @extend %triangle-top; + &:before { - left: 2rem; + left: 1.2rem; } &:after { - left: 2rem; + left: 1.2rem; } } // &.triangle-top-left &.triangle-top-right { @extend %triangle-top; + &:before { - right: 2rem; + right: 1.2rem; } &:after { - right: 2rem; + right: 1.2rem; } } // &.triangle-top-right @@ -108,31 +117,31 @@ @extend %triangle-bottom; &:before { left: 50%; - margin-left: -10px; + margin-left: -6px; } &:after { left: 50%; - margin-left: -10px; + margin-left: -6px; } } // &.triangle-bottom &.triangle-bottom-left { @extend %triangle-bottom; &:before { - left: 2rem; + left: 1.2rem; } &:after { - left: 2rem; + left: 1.2rem; } } // &.triangle-bottom-left &.triangle-bottom-right { @extend %triangle-bottom; &:before { - right: 2rem; + right: 1.2rem; } &:after { - right: 2rem; + right: 1.2rem; } } // &.triangle-bottom-right } // .dropdown-menu @@ -141,14 +150,15 @@ .dropdown-item { display: block; width: 100%; - padding: 0.6rem 2rem; + padding: 0.8rem 2rem; font-size: 1.4rem; line-height: 1; color: #000; &:not(.divider):hover, &:not(.divider):focus { - background: #f6f6f6; + color: #fff; + background: $blue; } } // .dropdown-item @@ -160,7 +170,7 @@ height: 1px; width: 100%; position: relative; - background: #eee; + background: #D0DADE; overflow: hidden; } // .dropdown-menu .divider