| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | //the notifications and new message buttons |
| A | 2 | .ace-nav { |
| 3 | height: 100%; | |
| 4 | margin: 0 !important; | |
| 5 | ||
| 6 | > li { | |
| 7 | line-height: @navbar-min-height; | |
| 8 | height: @navbar-min-height; | |
| 9 | ||
| 10 | border-left: 1px solid #E1E1E1; | |
| 11 | padding: 0; | |
| 12 | ||
| 13 | position: relative; | |
| 14 | float: left; | |
| 15 | ||
| 16 | &:first-child { | |
| 17 | border-left-width: 0; | |
| 18 | } | |
| 19 | ||
| 20 | > a { | |
| 21 | background-color: @ace-nav-default; | |
| 22 | color: #FFF; | |
| 23 | ||
| 24 | display: block; | |
| 25 | line-height: inherit; | |
| 26 | text-align: center; | |
| 27 | ||
| 28 | height: 100%; | |
| 29 | width: auto; | |
| 30 | min-width: 50px; | |
| 31 | padding: 0 8px; | |
| 32 | ||
| 33 | position: relative; | |
| 34 | ||
| 35 | > .@{icon} { | |
| 36 | display: inline-block; | |
| 37 | font-size: @font-size-navbar-user-button-icon; | |
| 38 | color: #FFF; | |
| 39 | text-align: center; | |
| 40 | width: 20px; | |
| 41 | } | |
| 42 | ||
| 43 | > .badge { | |
| 44 | position: relative; | |
| 45 | top: -4px; | |
| 46 | left: 2px; | |
| 47 | ||
| 48 | padding-right: 5px; | |
| 49 | padding-left: 5px; | |
| 50 | } | |
| 51 | } | |
| 52 | ||
| 53 | > a:hover , > a:focus, &.open > a { | |
| 54 | background-color: desaturate(darken(@ace-nav-default, 4%), 4%); | |
| 55 | color: #FFF; | |
| 56 | } | |
| 57 | ||
| 58 | //different colors | |
| 59 | .ace-nav-color(@color) { | |
| 60 | @ace-nav-class: ~`"ace-nav-@{color}"`; | |
| 61 | @ace-nav-bg: ~`"ace-nav-@{color}"`; | |
| 62 | @ace-nav-cl: @@ace-nav-bg; | |
| 63 | ||
| 64 | &.@{color} > a { | |
| 65 | background-color:@ace-nav-cl; | |
| 66 | } | |
| 67 | &.@{color} > a:hover , &.@{color} > a:focus, &.open.@{color} > a { | |
| 68 | background-color: desaturate(darken(@ace-nav-cl, 4%), 4%); | |
| 69 | } | |
| 70 | } | |
| 71 | ||
| 72 | .ace-nav-color(~"blue"); | |
| 73 | .ace-nav-color(~"grey"); | |
| 74 | .ace-nav-color(~"purple"); | |
| 75 | .ace-nav-color(~"green"); | |
| 76 | .ace-nav-color(~"light-blue"); | |
| 77 | .ace-nav-color(~"light-blue2"); | |
| 78 | .ace-nav-color(~"red"); | |
| 79 | .ace-nav-color(~"light-green"); | |
| 80 | .ace-nav-color(~"light-purple"); | |
| 81 | .ace-nav-color(~"light-orange"); | |
| 82 | .ace-nav-color(~"light-pink"); | |
| 83 | .ace-nav-color(~"dark"); | |
| 84 | .ace-nav-color(~"white-opaque"); | |
| 85 | .ace-nav-color(~"dark-opaque"); | |
| 86 | ||
| 87 | //some extra ones | |
| 88 | &.transparent > a { | |
| 89 | background-color: transparent; | |
| 90 | } | |
| 91 | &.transparent > a:hover, &.transparent > a:focus, &.open.transparent > a { | |
| 92 | background-color: rgba(0,0,0,0.1); | |
| 93 | } | |
| 94 | ||
| 95 | &.light-10 > a { | |
| 96 | background-color: rgba(255,255,255,0.1); | |
| 97 | } | |
| 98 | &.light-10 > a:hover, &.light-10 > a:focus, &.open.light-10 > a { | |
| 99 | background-color: rgba(255,255,255,0.2); | |
| 100 | } | |
| 101 | ||
| 102 | &.dark-10 > a { | |
| 103 | background-color: rgba(0,0,0,0.1); | |
| 104 | } | |
| 105 | &.dark-10 > a:hover, &.dark-10 > a:focus, &.open.dark-10 > a { | |
| 106 | background-color: rgba(0,0,0,0.2); | |
| 107 | } | |
| 108 | ||
| 109 | //margins | |
| 110 | .marginX (@index) when (@index > 0) { | |
| 111 | &.margin-@{index} { margin-left: unit(@index,px); } | |
| 112 | .marginX(@index - 1); | |
| 113 | } | |
| 114 | .marginX(4); | |
| 115 | &.no-border { | |
| 116 | border-width: 0 !important; | |
| 117 | } | |
| 118 | ||
| 119 | /// | |
| 120 | .dropdown-menu { | |
| 121 | z-index: @zindex-navbar-fixed + 1; | |
| 122 | } | |
| 123 | } | |
| 124 | ||
| 125 | .nav-user-photo { | |
| 126 | margin: -4px 8px 0 0; | |
| 127 | ||
| 128 | border-radius: 100%; | |
| 129 | border: 2px solid #FFF; | |
| 130 | ||
| 131 | max-width: 40px; | |
| 132 | } | |
| 133 | ||
| 134 | ||
| 135 | li.dropdown-footer a .@{icon} { | |
| 136 | // the arrow indicating "See more" on each dropdown , and the icons of user menu */ | |
| 137 | display: inline-block; | |
| 138 | width: 1.25em; | |
| 139 | text-align: center; | |
| 140 | } | |
| 141 | ||
| 142 | } | |
| 143 | ||
| 144 | ||
| 145 | ||
| 146 | //let dropdowns become like modals in small devices! | |
| 147 | //@media only screen and (max-height: @screen-topbar-down) { | |
| 148 | @media only screen and (max-height: @screen-qhd-width) { | |
| 149 | .ace-nav > li.dropdown-modal > .dropdown-menu { | |
| 150 | position: fixed; | |
| 151 | margin-top: auto; | |
| 152 | z-index: @zindex-modal + 2; | |
| 153 | ||
| 154 | &:before, &:after { | |
| 155 | display: none; | |
| 156 | } | |
| 157 | } | |
| 158 | .ace-nav > li.dropdown-modal > .user-menu > li > a { | |
| 159 | padding-top: 6px; | |
| 160 | padding-bottom: 6px; | |
| 161 | } | |
| 162 | .ace-nav > li.dropdown-modal.open:before { | |
| 163 | background-color: #000; | |
| 164 | opacity: 0.5; | |
| 165 | border-width: 0; | |
| 166 | ||
| 167 | position: fixed; | |
| 168 | left: 0; | |
| 169 | right: 0; | |
| 170 | top: 0; | |
| 171 | bottom: 0; | |
| 172 | ||
| 173 | content: ""; | |
| 174 | display: block; | |
| 175 | height: 2000px; | |
| 176 | width: auto; | |
| 177 | ||
| 178 | z-index: @zindex-modal + 1; | |
| 179 | } | |
| 180 | } | |
