angular-docs-cn/public/resources/css/module/_dropdown.scss

104 lines
2.0 KiB
SCSS
Raw Normal View History

2015-03-03 17:22:30 -05:00
.dropdown {
background: $blue-grey-50;
bottom: 0;
box-sizing: border-box;
box-shadow: 0 -1px 2px rgba($black, 0.12);
left: 0;
margin: 0;
padding: $unit * 2;
position: fixed;
width: $sidenav-width;
2015-03-04 23:27:30 -05:00
z-index: $layer-1;
@include respond-to('mobile') {
display: none;
width: 100%;
.is-visible & {
display: block;
}
}
2015-03-03 17:22:30 -05:00
.dropdown-button {
background: rgba($blue-grey-100, .56);
2015-03-03 17:22:30 -05:00
border: none;
border-radius: 2px;
box-sizing: border-box;
color: $blue-grey-600;
display: block;
2015-03-03 17:22:30 -05:00
text-transform: none;
font-weight: normal;
font-size: 14px;
line-height: $unit * 5;
2015-03-04 08:27:48 -05:00
padding: 0px ($unit * 4) 0px ($unit * 2);
margin: 0;
2015-03-03 17:22:30 -05:00
cursor: pointer;
2015-03-04 08:27:48 -05:00
position: relative;
width: 100%;
2015-03-04 23:27:30 -05:00
z-index: $layer-1;
opacity: 0.87;
2015-03-04 08:27:48 -05:00
.icon {
color: $blue-grey-200;
font-size: 24px;
2015-03-04 08:27:48 -05:00
position: absolute;
top: $unit;
2015-03-04 08:27:48 -05:00
right: $unit;
z-index: $layer-1;
opacity: .87;
}
&:hover {
background: $white;
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
color: $blue-600;
.icon {
color: $blue-600;
}
}
2015-03-03 17:22:30 -05:00
}
.dropdown-menu {
background: $white;
bottom: $unit * 2;
border-radius: 2px;
box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
2015-03-05 09:30:53 -05:00
display: none;
left: $unit * 2;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
right: $unit * 2;
z-index: $layer-5;
2015-03-03 17:22:30 -05:00
li {
border-bottom: 1px solid $blue-grey-50;
2015-03-04 10:13:59 -05:00
margin: 0px;
padding: 0;
2015-03-03 17:22:30 -05:00
&:last-child {
border: none;
2015-03-03 17:22:30 -05:00
}
}
a {
display: block;
font-size: 12px;
line-height: $unit * 7;
margin: 0;
2015-03-03 17:22:30 -05:00
padding: 0px ($unit * 2);
text-decoration: none;
text-align: left;
font-weight: 400;
color: $blue-grey-600;
&:hover {
background: $white;
color: $blue-600;
}
2015-03-03 17:22:30 -05:00
}
}
}