dh-c
Version:
The front-end development engineers jimberton gulp react component
189 lines (187 loc) • 6.88 kB
CSS
@charset "UTF-8";
/** *
颜色值变量
*/
/** *
主题颜色
*/
.dp, .dh-menu-submenu-inline > .dh-menu-submenu-title:after, .dh-menu-submenu-vertical > .dh-menu-submenu-title:after {
font-family: dhfont ;
font-style: normal;
vertical-align: baseline;
text-align: center;
text-transform: none;
font-size: 12px;
text-rendering: auto;
transition: transform .3s ease;
position: absolute;
right: 10px;
line-height: 36px; }
.dh-menu {
margin-bottom: 0;
padding-left: 0;
list-style: none;
z-index: 1050;
color: #666666;
background: #fff;
outline: none;
font-size: 12px;
line-height: 36px; }
.dh-menu-item {
position: relative;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 36px;
padding: 0 24px; }
.dh-menu-item-active, .dh-menu-item-selected {
color: #23c132; }
.dh-menu-item-selected {
background-color: rgba(35, 193, 50, 0.1); }
.dh-menu-item-selected:before {
content: "";
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 0;
background: #23c132;
transform: scaleY(0);
box-shadow: 0 0 10px 0 rgba(35, 193, 50, 0.5);
-webkit-animation: keyframesScale 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
animation: keyframesScale 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards; }
.dh-menu-inline {
z-index: auto; }
.dh-menu-vertical {
z-index: auto; }
.dh-menu-horizontal {
z-index: 0; }
.dh-menu-horizontal:after {
content: "\20";
display: block;
height: 0;
clear: both; }
.dh-menu-horizontal > .dh-menu-item {
position: relative;
float: left; }
.dh-menu-hidden {
display: none; }
.dh-menu-submenu {
position: relative;
display: block; }
.dh-menu-submenu-title {
position: relative;
padding: 0 24px;
font-size: 12px;
line-height: 36px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
.dh-menu-submenu-title:hover {
position: relative;
color: #23c132; }
.dh-menu-submenu-inline > .dh-menu-submenu-title:after {
content: "\e63e";
top: 0; }
.dh-menu-submenu-inline.dh-menu-submenu-open > .dh-menu-submenu-title:after {
transform: rotate(180deg); }
.dh-menu-submenu-vertical > .dh-menu-submenu-title:after {
content: "\e621";
top: 0; }
.dh-menu-submenu-vertical > .dh-menu-sub {
top: 0;
left: 100%;
position: absolute;
min-width: 160px;
margin-left: 4px;
z-index: 1050;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); }
.dh-menu-submenu-horizontal {
float: left; }
.dh-menu-submenu-horizontal > .dh-menu-sub {
top: 100%;
left: 0;
position: absolute;
min-width: 100%;
margin-top: 4px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
z-index: 1050; }
.dh-menu-border.dh-menu-inline, .dh-menu-border.dh-menu-vertical {
border-right: 1px solid #e9e9e9; }
.dh-menu-border.dh-menu-horizontal {
border-bottom: 1px solid #e9e9e9; }
.dh-menu.dh-menu-dark {
background-color: #404040;
color: rgba(255, 255, 255, 0.67); }
.dh-menu.dh-menu-dark > .dh-menu-submenu {
/*
&.dh-menu-submenu-active {
.dh-menu-submenu-title {
position: relative;
background-color: #404040;
}
}
*/ }
.dh-menu.dh-menu-dark > .dh-menu-submenu .dh-menu-submenu-title:hover {
position: relative;
background-color: #f5fcf7; }
.dh-menu.dh-menu-dark > .dh-menu-submenu > .dh-menu-sub {
background-color: #404040;
color: rgba(255, 255, 255, 0.67); }
.dh-menu.dh-menu-dark > .dh-menu-submenu > .dh-menu-sub > .dh-menu-item-active, .dh-menu.dh-menu-dark > .dh-menu-submenu > .dh-menu-sub > .dh-menu-item-selected {
background: none;
color: #fff;
font-weight: bold; }
.dh-menu.dh-menu-dark > .dh-menu-submenu > .dh-menu-sub > .dh-menu-item-selected {
color: #fff;
font-weight: bold; }
.dh-menu.dh-menu-dark > .dh-menu-submenu > .dh-menu-sub > .dh-menu-item-selected:before {
content: "";
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 0;
background: none;
transform: scaleY(0);
box-shadow: 0 0 10px 0 rgba(35, 193, 50, 0.5);
-webkit-animation: keyframesScale 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
animation: keyframesScale 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards; }
.dh-menu.dh-menu-dark.dh-menu-inline > .dh-menu-item-active, .dh-menu.dh-menu-dark.dh-menu-inline > .dh-menu-item-selected {
background-color: #23c132; }
.dh-menu.dh-menu-dark.dh-menu-inline > .dh-menu-item-selected {
color: #fff;
font-weight: bold; }
.dh-menu.dh-menu-dark.dh-menu-inline > .dh-menu-item-selected:before {
content: "";
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 0;
background: #23c132;
transform: scaleY(0);
box-shadow: 0 0 10px 0 rgba(35, 193, 50, 0.5);
-webkit-animation: keyframesScale 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
animation: keyframesScale 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards; }
.dh-menu.dh-menu-dark.dh-menu-vertical > .dh-menu-item-active, .dh-menu.dh-menu-dark.dh-menu-vertical > .dh-menu-item-selected, .dh-menu.dh-menu-dark.dh-menu-float > .dh-menu-item-active, .dh-menu.dh-menu-dark.dh-menu-float > .dh-menu-item-selected, .dh-menu.dh-menu-dark.dh-menu-horizontal > .dh-menu-item-active, .dh-menu.dh-menu-dark.dh-menu-horizontal > .dh-menu-item-selected {
background: none;
color: #fff;
font-weight: bold; }
.dh-menu.dh-menu-dark.dh-menu-vertical > .dh-menu-item-selected, .dh-menu.dh-menu-dark.dh-menu-float > .dh-menu-item-selected, .dh-menu.dh-menu-dark.dh-menu-horizontal > .dh-menu-item-selected {
color: #fff;
font-weight: bold; }
.dh-menu.dh-menu-dark.dh-menu-vertical > .dh-menu-item-selected:before, .dh-menu.dh-menu-dark.dh-menu-float > .dh-menu-item-selected:before, .dh-menu.dh-menu-dark.dh-menu-horizontal > .dh-menu-item-selected:before {
content: "";
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 0;
background: none;
transform: scaleY(0);
box-shadow: 0 0 10px 0 rgba(35, 193, 50, 0.5);
-webkit-animation: keyframesScale 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
animation: keyframesScale 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s forwards; }