重写通知栏样式
This commit is contained in:
Argo-Lenovo
parent
7f9b93ab0e
commit
1749f74cbd
|
|
@ -187,18 +187,15 @@ div button span {
|
||||||
left: auto;
|
left: auto;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-menu .dropdown-menu.logout li {
|
.top-menu .dropdown-menu.logout li {
|
||||||
margin-left: 0;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 33.3%;
|
width: 33.3%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-menu .dropdown-menu.logout li:last-child {
|
.top-menu .dropdown-menu.logout li:last-child {
|
||||||
float: left;
|
float: left;
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #a9d96c;
|
background: #a9d96c;
|
||||||
border-radius: 0 0 3px 3px;
|
border-radius: 0 0 3px 3px;
|
||||||
|
|
@ -206,7 +203,6 @@ div button span {
|
||||||
|
|
||||||
.top-menu .dropdown-menu.logout li:last-child a, .top-menu .dropdown-menu.logout li:last-child a:hover {
|
.top-menu .dropdown-menu.logout li:last-child a, .top-menu .dropdown-menu.logout li:last-child a:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-bottom: none !important;
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -216,7 +212,7 @@ div button span {
|
||||||
|
|
||||||
.top-menu .dropdown-menu.logout li a {
|
.top-menu .dropdown-menu.logout li a {
|
||||||
color: #a4abbb;
|
color: #a4abbb;
|
||||||
border-bottom: none !important;
|
border-bottom: none;
|
||||||
padding: 15px 10px;
|
padding: 15px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -279,6 +275,18 @@ div button span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.notify-row .bg-success, .notify-row .dropdown-menu.tasks-bar li p, .notify-row .dropdown-menu.tasks-bar li:last-child {
|
||||||
|
background: #a9d86e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notify-row .bg-important, .notify-row .dropdown-menu.inbox li p, .notify-row .dropdown-menu.inbox li:last-child {
|
||||||
|
background: #ff6c60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notify-row .bg-warning, .notify-row .dropdown-menu.notification li p, .notify-row .dropdown-menu.notification li:last-child {
|
||||||
|
background: #FCB322;
|
||||||
|
}
|
||||||
|
|
||||||
.notify-row > li {
|
.notify-row > li {
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -300,18 +308,6 @@ div button span {
|
||||||
top: -10px;
|
top: -10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-row > li > a .badge.bg-success {
|
|
||||||
background: #a9d86e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row > li > a .badge.bg-important {
|
|
||||||
background: #ff6c60;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row > li > a .badge.bg-warning {
|
|
||||||
background: #FCB322;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu {
|
.notify-row .dropdown-menu {
|
||||||
float: left;
|
float: left;
|
||||||
max-width: 300px !important;
|
max-width: 300px !important;
|
||||||
|
|
@ -321,12 +317,10 @@ div button span {
|
||||||
width: 235px !important;
|
width: 235px !important;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.176) !important;
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.176) !important;
|
||||||
border: none !important;
|
border: none;
|
||||||
border-radius: 4px;
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-row .dropdown-menu > .notify-arrow {
|
.notify-row .dropdown-menu .notify-arrow {
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 0 9px 9px;
|
border-width: 0 9px 9px;
|
||||||
height: 0;
|
height: 0;
|
||||||
|
|
@ -342,37 +336,45 @@ div button span {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-row .dropdown-menu > .notify-arrow.notify-arrow-green {
|
.notify-row .dropdown-menu .notify-arrow.notify-arrow-green {
|
||||||
border-color: transparent transparent #a9d86e;
|
border-color: transparent transparent #a9d86e;
|
||||||
border-bottom-color: #a9d86e !important;
|
border-bottom-color: #a9d86e;
|
||||||
border-top-color: #a9d86e !important;
|
border-top-color: #a9d86e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-row .dropdown-menu > .notify-arrow.notify-arrow-yellow {
|
.notify-row .dropdown-menu .notify-arrow.notify-arrow-yellow {
|
||||||
border-color: transparent transparent #FCB322;
|
border-color: transparent transparent #FCB322;
|
||||||
border-bottom-color: #FCB322 !important;
|
border-bottom-color: #FCB322;
|
||||||
border-top-color: #FCB322 !important;
|
border-top-color: #FCB322;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-row .dropdown-menu > .notify-arrow.notify-arrow-red {
|
.notify-row .dropdown-menu .notify-arrow.notify-arrow-red {
|
||||||
border-color: transparent transparent #ff6c60;
|
border-color: transparent transparent #ff6c60;
|
||||||
border-bottom-color: #ff6c60 !important;
|
border-bottom-color: #ff6c60;
|
||||||
border-top-color: #ff6c60 !important;
|
border-top-color: #ff6c60;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-row .dropdown-menu > li > a {
|
.notify-row .dropdown-menu li:last-child, .notify-row .dropdown-menu li:last-child a:hover {
|
||||||
border-bottom: 1px solid #EBEBEB !important;
|
border-radius: 0 0 4px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notify-row .dropdown-menu li:last-child a {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notify-row .dropdown-menu li a {
|
||||||
|
border-bottom: 1px solid #EBEBEB;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 15px 10px !important;
|
padding: 15px 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-row .dropdown-menu li a:hover {
|
.notify-row .dropdown-menu li a:hover {
|
||||||
background-color: #F7F8F9 !important;
|
background-color: #F7F8F9;
|
||||||
color: #2E2E2E;
|
color: #2E2E2E;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-row .dropdown-menu .label {
|
.notify-row .dropdown-menu .label {
|
||||||
padding: 0.5em 0.8em;
|
padding: 0.5em 0.8em;
|
||||||
|
|
@ -383,7 +385,6 @@ div button span {
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-row .dropdown-menu p {
|
.notify-row .dropdown-menu p {
|
||||||
background-color: #F1F2F7;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
@ -391,18 +392,6 @@ div button span {
|
||||||
-webkit-border-radius: 4px 4px 0px 0px;
|
-webkit-border-radius: 4px 4px 0px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notify-row .dropdown-menu p.green {
|
|
||||||
background-color: #a9d86e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu p.yellow {
|
|
||||||
background-color: #fcb322;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu p.red {
|
|
||||||
background-color: #ff6c60;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notify-row .dropdown-menu.tasks-bar .desc {
|
.notify-row .dropdown-menu.tasks-bar .desc {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
<ul class="dropdown-menu tasks-bar">
|
<ul class="dropdown-menu tasks-bar">
|
||||||
<div class="notify-arrow notify-arrow-green"></div>
|
<div class="notify-arrow notify-arrow-green"></div>
|
||||||
<li>
|
<li>
|
||||||
<p class="green">您有 5 个待处理的任务</p>
|
<p>您有 5 个待处理的任务</p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
|
|
@ -114,7 +114,7 @@
|
||||||
<ul class="dropdown-menu inbox">
|
<ul class="dropdown-menu inbox">
|
||||||
<div class="notify-arrow notify-arrow-red"></div>
|
<div class="notify-arrow notify-arrow-red"></div>
|
||||||
<li>
|
<li>
|
||||||
<p class="red">您有 4 个待处理的消息</p>
|
<p>您有 4 个待处理的消息</p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
|
|
@ -171,7 +171,7 @@
|
||||||
<ul class="dropdown-menu notification">
|
<ul class="dropdown-menu notification">
|
||||||
<div class="notify-arrow notify-arrow-yellow"></div>
|
<div class="notify-arrow notify-arrow-yellow"></div>
|
||||||
<li>
|
<li>
|
||||||
<p class="yellow">您有 5 条新通知</p>
|
<p>您有 5 条新通知</p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#">
|
<a href="#">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue