X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/9701c6210c32335ce3baf964b7e564a4da48d7b8..1727cd7c2b066a4442f6714be7aa170f4d8c1eef:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 0e03da6de..0c2d8ed01 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -202,6 +202,7 @@ h6:first-child { .icon.close { background-position: -200px 0; } .icon.check { background-position: -220px 0; } .icon.note { background-position: -240px 0; } +.icon.gear { background-position: -260px 0; } /* Rules for links */ @@ -472,7 +473,11 @@ a.donate { height: 30px; border-bottom: 1px solid #ccc; background: white; - z-index: 100; + z-index: 1001; + + .caret { + margin-top: 10px; + } } .site-edit #top-bar, @@ -544,12 +549,52 @@ a.donate { #greeting { float: right; - padding-top: 3px; - margin-right: $lineheight/4; -} + height: 100%; -.greeting-bar-unread { - font-weight: bold; + &.secondary-actions { + padding: 3px $lineheight/2; + } + + &.dropdown { + background-color: #EEE; + &:hover { + background-color: #CCC; + } + } + + img { + vertical-align: top; + border-radius: 2px 0 0 2px; + padding-right: 5px; + } + + #inboxanchor { + display: inline-block; + position: relative; + height: 20px; + top: -2px; + margin: 0 2px 0 0; + padding: 0 5px 0 0; + border-radius: 2px; + } + + .dropdown-toggle { + display: block; + padding: 3px 7px; + color: #000; + text-decoration: none; + } + + .dropdown-menu { + left: auto; + right: 0; + + .count-number { + float: right; + padding: 0 5px; + margin: 0; + } + } } /* Rules for the message shown in place of the map when javascript is disabled */ @@ -2292,6 +2337,134 @@ a.button { background: #fff; } +/* Rules for dropdown menus */ + +.dropdown { + position: relative; +} + +.dropdown-toggle { + *margin-bottom: -3px; +} + +.dropdown-toggle:active, +.open .dropdown-toggle { + outline: 0; +} + +.caret { + display: inline-block; + width: 0; + height: 0; + vertical-align: top; + border-top: 4px solid #000000; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + content: ""; +} + +.dropdown .caret { + margin-top: 8px; + margin-left: 2px; +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 0; + list-style: none; + background-color: #ffffff; + border: 1px solid #ccc; + *border-right-width: 2px; + *border-bottom-width: 2px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.dropdown-menu.pull-right { + right: 0; + left: auto; +} + +.dropdown-menu .divider { + *width: 100%; + height: 1px; + margin: 9px 1px; + *margin: -5px 0 5px; + overflow: hidden; + background-color: #e5e5e5; + border-bottom: 1px solid #ffffff; +} + +.dropdown-menu > li > a { + display: block; + padding: 3px 10px; + clear: both; + font-weight: normal; + line-height: 20px; + color: #333333; + white-space: nowrap; +} + +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus, +.dropdown-submenu:hover > a, +.dropdown-submenu:focus > a { + color: #ffffff; + text-decoration: none; + background-color: #0081c2; +} + +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + color: #ffffff; + text-decoration: none; + background-color: #0081c2; + outline: 0; +} + +.dropdown-menu > .disabled > a, +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + color: #999999; +} + +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + text-decoration: none; + cursor: default; + background-color: transparent; + background-image: none; +} + +.open { + *z-index: 1000; +} + +.open > .dropdown-menu { + display: block; +} + +.dropdown-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 990; +} + /* Rules for the "Welcome" page */ .site-welcome { .center {