1
0
mirror of https://github.com/bitwarden/help synced 2025-12-06 00:03:30 +00:00
Files
help/_scss/_sidebar.scss
fred_the_tech_writer a491a9587e Landing Page (#413)
* crazy egg script

* Client gs guides (#398)

* JS for intra-article tabbing

* Combine Android/iOS guide to tabbable "Getting Started with Mobile" + image.

* Link changes -> redirect.

* b.e. & mobile edits

* GS w/ Desktop App + Images

* tagging

* video cleanup

* header improvements

* GS w/ Web Vault + reorder

* orgs name change

* web vault article frame

* web vault article

* Landing (#399)

* poc

* "Home" sidebar option

* Events into Resources card

* events <-> suggest an edit

* tweaks

* card fix

* fix video icons

* video size

* margin/border on secondary cards

* added table items

* links & drop a stray item

* more responsive secondary cards

* fixed linking

* link fixes

* crazy egg script merge

* mobile view for alignment of columns in help

* mobile image width issue fix

* responsiveness fixes

* final edits

* link check

Co-authored-by: David Choi <davidgumzchoi@gmail.com>
2021-02-22 09:42:06 -05:00

128 lines
2.4 KiB
SCSS

.bd-sidebar {
order: 0;
background-color: $light;
border-bottom: 1px solid rgba(0, 0, 0, .1);
@include media-breakpoint-up(md) {
@supports (position: sticky) {
position: sticky;
top: 4rem;
z-index: 1000;
height: subtract(100vh, 4rem);
}
border-right: 1px solid rgba(0, 0, 0, .1);
}
@include media-breakpoint-up(xl) {
flex: 0 1 320px;
}
}
.bd-links {
margin-right: -15px;
margin-left: -15px;
@include media-breakpoint-up(md) {
display: block !important;
padding-top: 1rem;
padding-bottom: 1rem;
@supports (position: sticky) {
max-height: subtract(100vh, 4rem);
overflow-y: auto;
}
}
}
.bd-sidenav {
li {
width: 100%;
}
}
.bd-toc-link {
display: flex;
align-items: center;
padding: .25rem 1.5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
transition: all 0.5s ease;
&:hover {
color: rgba(0, 0, 0, .85);
text-decoration: none;
}
&[aria-expanded="true"] {
.fa-chevron-down {
transform: rotate(180deg);
}
}
}
.bd-toc-item {
border-top: 1px solid $border-color;
padding: 0.5rem 0;
&:first-child {
border-top: 0;
}
&.active {
padding-bottom: 1.5rem;
&:not(:first-child) {
padding-top: 1rem;
}
> .bd-toc-link {
color: rgba(0, 0, 0, .85);
&:hover {
background-color: transparent;
}
}
}
}
.search-header {
background-color: $light;
padding: 0.5rem;
.btn {
border: solid;
border-color: #ccd2d7;
border-width: thin;
background-color: #fff;
&:hover {
background-color: #F2F2F2;
}
}
}
.bd-sidebar .nav {
> li > a {
border-left: 2px solid transparent;
display: block;
margin: .25rem 1.5rem;
padding-left: 1rem;
@include font-size(90%);
color: rgba(0, 0, 0, .65);
&:hover {
background-color: transparent;
color: $primary;
text-decoration: none;
}
}
> .active > a,
> .active:hover > a {
font-weight: 600;
color: $primary;
background-color: transparent;
border-left-color: $primary;
}
}