amis2/scss/components/_anchor-nav.scss
hsm-lv 72d7b1b663
feat:add AnchorNav Component (#1656)
* feat:add Elevator Component

* feat:add Elevator Component

* feat:remove Elevator and add Anchor Component

* feat:add AnchorNav Component
2021-03-16 13:13:11 +08:00

56 lines
1.2 KiB
SCSS

.#{$ns}AnchorNav {
display: flex;
height: px2rem(400px);
&-link-wrap {
margin: 0;
padding: 0;
width: var(--Tabs--vertical-width);
border-right: var(--AnchorNav-links-container-borderRight);
padding-bottom: px2rem(60px);
> .#{$ns}AnchorNav-link {
position: relative;
display: block;
> a {
display: block;
border: var(--Tabs-borderWidth) solid transparent;
border-width: var(--AnchorNav-onActive-borderWidth);
color: var(--Tabs-color);
padding: var(--Tabs-linkPadding);
font-size: var(--Tabs-linkFontSize);
outline: none;
text-align: right;
text-decoration: none;
cursor: pointer;
margin: 0;
&:hover {
color: var(--primary);
}
}
&.is-active {
> a,
> a:hover {
color: var(--Tabs--vertical-onActive-color);
border-color: var(--Tabs--vertical-onActive-border);
}
}
}
}
&-section-wrap {
border: none;
flex-grow: 1;
overflow: auto;
background: var(--Tabs-content-bg);
> .#{$ns}AnchorNav-section {
display: block;
padding: var(--gap-base);
}
}
}