mirror of https://github.com/freeCodeCamp/devdocs
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
368 lines
7.4 KiB
368 lines
7.4 KiB
//
|
|
// Sidebar
|
|
//
|
|
|
|
._sidebar {
|
|
position: absolute;
|
|
z-index: $sidebarZ;
|
|
top: $headerHeight;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
text-shadow: 0 1px rgba(white, .3);
|
|
background: #e5eaf4;
|
|
box-shadow: inset 0 1px #b4b7bf, // top border
|
|
inset 0 2px rgba(black, .03); // top inner shadow
|
|
-webkit-overflow-scrolling: touch;
|
|
-ms-overflow-style: none; // IE 10 doesn't support pointer-events
|
|
@extend %user-select-none;
|
|
|
|
&::-webkit-scrollbar { width: 10px; }
|
|
&::-webkit-scrollbar-button { display: none; }
|
|
&::-webkit-scrollbar-track { background: white; }
|
|
&::-webkit-scrollbar-thumb {
|
|
min-height: 1rem;
|
|
background: #ccc;
|
|
background-clip: padding-box;
|
|
border: 3px solid white;
|
|
border-radius: 5px;
|
|
|
|
&:active {
|
|
background-color: #999;
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// List
|
|
//
|
|
|
|
._list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
width: $sidebarWidth;
|
|
|
|
@media #{$mediumScreen} { width: $sidebarMediumWidth; }
|
|
|
|
._sidebar > & {
|
|
min-height: 100%;
|
|
padding-bottom: 3.5rem;
|
|
box-shadow: inset -1px 0 #bbc1cc, // right border
|
|
inset -2px 0 rgba(white, .2); // right inner glow
|
|
@extend %border-box;
|
|
}
|
|
}
|
|
|
|
._list-item {
|
|
display: block;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: .25rem .75rem;
|
|
line-height: 1.25rem;
|
|
font-size: .875rem;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
overflow-wrap: normal;
|
|
text-overflow: ellipsis;
|
|
text-shadow: 0 1px rgba(white, .3);
|
|
border: solid transparent;
|
|
border-width: 1px 1px 1px 0;
|
|
cursor: default;
|
|
|
|
&, &:hover {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.focus,
|
|
&.focus:hover,
|
|
&.active,
|
|
&.active:hover {
|
|
color: white;
|
|
text-shadow: 0 1px rgba(black, .2);
|
|
background: -webkit-linear-gradient(top, #bfc6dd, #949eb8);
|
|
background: linear-gradient(to bottom, #bfc6dd, #949eb8);
|
|
border-color: #96a1c6 #8e99b7 #7f87a4;
|
|
box-shadow: inset 0 1px rgba(white, .15), // top inner glow
|
|
inset 0 0 0 1px rgba(white, .08), // inner glow
|
|
0 1px rgba(black, .05); // drop shadow
|
|
}
|
|
|
|
&.active,
|
|
&.active:hover {
|
|
background: -webkit-linear-gradient(top, #65b2fb, #3492e9);
|
|
background: linear-gradient(to bottom, #65b2fb, #3492e9);
|
|
border-color: #318ce4 #2b82db #2878c7;
|
|
}
|
|
|
|
&:before {
|
|
float: left;
|
|
margin: .125rem .625rem 0 0;
|
|
@extend %icon;
|
|
}
|
|
}
|
|
|
|
._list-count {
|
|
float: right;
|
|
font-size: .75rem;
|
|
color: $textColorLighter;
|
|
pointer-events: none;
|
|
|
|
.focus > &,
|
|
.active > & {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
//
|
|
// List hierarchy
|
|
//
|
|
|
|
._list-dir,
|
|
%_list-dir {
|
|
line-height: 1.5rem;
|
|
padding-left: 2.25rem;
|
|
|
|
&:before { margin-top: .25rem; }
|
|
}
|
|
|
|
._list-disabled {
|
|
@extend %_list-dir;
|
|
|
|
&, &:hover { color: $textColorLight; }
|
|
&:before { opacity: .7; }
|
|
}
|
|
|
|
._list-arrow {
|
|
position: absolute;
|
|
top: 0;
|
|
left: .25rem;
|
|
padding: .5rem;
|
|
cursor: pointer;
|
|
opacity: .45;
|
|
|
|
&:hover { opacity: .7; }
|
|
|
|
&:before {
|
|
@extend %icon, %icon-dir;
|
|
|
|
.open > & {
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
._list-sub {
|
|
> ._list-item { padding-left: 2.75rem; }
|
|
> ._list-item:before { content: none; }
|
|
> ._list-dir { line-height: 1.25rem; }
|
|
|
|
._list-arrow {
|
|
left: 1rem;
|
|
padding: .375rem;
|
|
}
|
|
}
|
|
|
|
//
|
|
// List pagination
|
|
//
|
|
|
|
._list-pagelink {
|
|
color: $linkColor;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: $linkColorHover;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Search results
|
|
//
|
|
|
|
._list-result.active {
|
|
padding-right: 1.75rem;
|
|
|
|
> ._list-reveal { display: block; }
|
|
}
|
|
|
|
._list-reveal {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 1.75rem;
|
|
cursor: pointer;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 50%;
|
|
left: .5rem;
|
|
width: .75rem;
|
|
height: 1px;
|
|
background: rgba(white, .9);
|
|
box-shadow: 0 -3px rgba(white, .9), // top line
|
|
0 3px rgba(white, .9), // bottom line
|
|
0 -2px rgba(black, .15), // top shadow
|
|
0 1px rgba(black, .15), // middle shadow
|
|
0 4px rgba(black, .15); // bottom shadow
|
|
}
|
|
}
|
|
|
|
//
|
|
// List hover clone
|
|
//
|
|
|
|
._list-hover.clone {
|
|
position: fixed;
|
|
z-index: $hoverZ;
|
|
left: 0;
|
|
overflow: visible;
|
|
padding: .25rem .75rem;
|
|
background-color: #e5eaf4;
|
|
pointer-events: none;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
&:not(._list-result) {
|
|
padding-left: 2.75rem;
|
|
|
|
&:before { content: none; }
|
|
}
|
|
|
|
&:not(.focus):not(.active):after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -1px;
|
|
bottom: -1px;
|
|
left: $sidebarWidth;
|
|
right: -2px;
|
|
margin-left: -1px;
|
|
border: 1px solid #bbc1cc;
|
|
border-left-width: 0;
|
|
border-radius: 0 2px 2px 0;
|
|
box-shadow: inset -1px 0 rgba(white, .15), // right inner glow
|
|
inset 0 1px rgba(white, .15), // top inner glow
|
|
inset 0 -1px rgba(white, .15), // bottom inner glow
|
|
1px 0 rgba(black, .04), // right shadow
|
|
0 1px rgba(black, .04), // bottom shadow
|
|
0 -1px rgba(black, .02); // top shadow
|
|
|
|
@media #{$mediumScreen} { left: $sidebarMediumWidth; }
|
|
}
|
|
}
|
|
|
|
//
|
|
// List picker
|
|
//
|
|
|
|
._list-checkbox {
|
|
position: absolute;
|
|
top: .5rem;
|
|
right: -1rem;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
transition: .2s;
|
|
}
|
|
|
|
._list-label {
|
|
transition: .2s;
|
|
@extend %_list-dir;
|
|
|
|
._in > & { padding-left: .75rem; }
|
|
._in > & > ._list-checkbox { right: .5rem }
|
|
}
|
|
|
|
._list-label-off {
|
|
opacity: 0;
|
|
padding-left: .75rem;
|
|
|
|
._in > & { opacity: 1; }
|
|
> ._list-checkbox { right: .5rem; }
|
|
}
|
|
|
|
._list-link {
|
|
display: block;
|
|
margin-top: .75rem;
|
|
font-size: .8125rem;
|
|
text-align: center;
|
|
@extend %external-link;
|
|
|
|
&:after { visibility: hidden; }
|
|
&:hover:after { visibility: visible; }
|
|
}
|
|
|
|
//
|
|
// Footer
|
|
//
|
|
|
|
._sidebar-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: $sidebarWidth;
|
|
background: #e5eaf4;
|
|
box-shadow: inset -1px 0 #bbc1cc, // right border
|
|
inset -2px 0 rgba(white, .2); // right inner glow
|
|
|
|
@media #{$mediumScreen} { width: $sidebarMediumWidth; }
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
right: 1px;
|
|
height: 1em;
|
|
background-image: -webkit-linear-gradient(top, rgba(#e5eaf4, 0), rgba(#e5eaf4, .95));
|
|
background-image: linear-gradient(to bottom, rgba(#e5eaf4, 0), rgba(#e5eaf4, .95));
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
._sidebar-footer-link {
|
|
position: relative;
|
|
display: block;
|
|
height: 2.5rem;
|
|
line-height: 1rem;
|
|
padding: .75rem;
|
|
font-size: .875em;
|
|
cursor: pointer;
|
|
@extend %border-box;
|
|
|
|
&, &:hover {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:before {
|
|
float: left;
|
|
margin-right: .625rem;
|
|
@extend %icon;
|
|
}
|
|
}
|
|
|
|
._sidebar-footer-edit {
|
|
&:before { @extend %icon-settings; }
|
|
}
|
|
|
|
._sidebar-footer-save {
|
|
margin-right: 1px;
|
|
font-weight: bold;
|
|
background-image: -webkit-linear-gradient(top, #fbfbfe, #f5f5f8 50%, #eeeef1 51%, #e8e8ec);
|
|
background-image: linear-gradient(to bottom, #fbfbfe, #f5f5f8 50%, #eeeef1 51%, #e8e8ec);
|
|
box-shadow: inset 0 1px white, // top inner glow
|
|
inset 0 0 0 1px rgba(white, .2), // inner glow
|
|
0 -1px #c4cfde; // top border
|
|
|
|
&:before { @extend %icon-check; }
|
|
}
|