amis2/scss/components/_nav.scss

144 lines
3.3 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}Nav {
2019-12-06 09:58:08 +08:00
list-style: none;
margin: 0;
padding: 0;
&--tabs {
border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
.#{$ns}Nav-item {
margin-bottom: -$Tabs-borderWidth;
display: inline-block;
> a {
font-size: $Tabs-linkFontSize;
display: block;
outline: none;
border: $Tabs-borderWidth solid transparent;
border-top-left-radius: $Tabs-borderRadius;
border-top-right-radius: $Tabs-borderRadius;
color: $Tabs-color;
text-decoration: none;
margin-right: px2rem(2px);
padding: $gap-sm $gap-base;
cursor: pointer;
}
&:hover > a,
> a:focus {
border-color: $Tabs-onHover-borderColor;
text-decoration: none;
}
&.disabled > a,
&.is-disabled > a {
color: $Tabs-onDisabled-color;
background-color: transparent;
border-color: transparent;
pointer-events: none;
}
&.active > a,
&.is-active > a {
color: $Tabs-onActive-color;
background-color: $Tabs-onActive-bg;
border-color: $Tabs-onActive-borderColor;
border-bottom-color: $Tabs-content-bg;
}
}
.#{$ns}Nav-itemIcon {
margin-right: $gap-xs;
}
}
&--stacked {
.#{$ns}Nav-item {
position: relative;
> a {
display: block;
outline: none;
color: $Nav-item-color;
text-decoration: none;
padding: $gap-sm $gap-base;
cursor: pointer;
background-color: $Nav-item-bg;
border-radius: $Nav-item-borderRadius;
}
&:hover > a,
> a:focus {
border-color: $Nav-item-onHover-color;
text-decoration: none;
background-color: $Nav-item-onHover-bg;
}
&.disabled > a,
&.is-disabled > a {
color: $Nav-item-onDisabled-color;
background-color: transparent;
pointer-events: none;
}
&.active > a,
&.is-active > a {
color: $Nav-item-onActive-color;
background-color: $Nav-item-onActive-bg;
border-left: $Nav-item-onActive-borderLeft;
padding-left: px2rem(12px);
}
&.is-unfolded {
.#{$ns}Nav-itemToggler {
transform: rotate(180deg) scale(0.8);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
.#{$ns}Nav-subItems {
display: block;
}
}
.#{$ns}Nav-itemToggler {
position: absolute;
width: px2rem(30px);
height: px2rem(30px);
text-align: center;
line-height: px2rem(30px);
vertical-align: middle;
top: px2rem(4px);
right: px2rem(2px);
cursor: pointer;
transform: scale(0.8);
transition: transform 0.3s;
}
.#{$ns}Nav-subItems {
display: none;
padding-left: 0;
list-style: none;
}
.#{$ns}Nav-item {
font-size: $Nav-subItem-fontSize;
a:before {
content: '';
display: inline-block;
width: px2rem(4px);
height: px2rem(4px);
background-color: #ccc;
border-radius: px2rem(500px);
margin-right: px2rem(8px);
vertical-align: middle;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&.active > a:before,
&.is-active > a:before {
background-color: $Nav-subItem-onActiveBeforeBg;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
}