mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-07-28 17:49:40 +02:00
Sidebar redesign (#200)
* New sidebar * Save state to local storage * Make sidebar sticky * Text overflow * Fix add page button on mobile * Mobile layout * Display sidebar when ready * Add logo * Remove files * Fix margin * Update logo padding-bottom * Hovers * Decrease logo's font size * Make logo not sticky * Cleanup classnames * Simplify css * Update sidebar module * Fix animation * Fix cursor issue * Fix vars and logo paddings
This commit is contained in:
Tanya
GitHub
parent
16ba86fddb
commit
30d96909d3
15 changed files with 531 additions and 185 deletions
|
|
@ -1,92 +0,0 @@
|
|||
.docs-aside {
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.01em;
|
||||
|
||||
@media (--mobile) {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
max-height: none;
|
||||
font-size: 13px;
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&--toggled {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
}
|
||||
|
||||
&__section {
|
||||
margin-bottom: 30px;
|
||||
|
||||
@media (--mobile) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.18em;
|
||||
font-weight: 600;
|
||||
|
||||
@media (--mobile) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
padding: 8px 0;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__current {
|
||||
color: var(--color-page-active) !important;
|
||||
}
|
||||
|
||||
&__logo-wrapper {
|
||||
margin-top: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
|
||||
.logo {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.docs-aside-toggler {
|
||||
display: none;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-second);
|
||||
|
||||
@media (--mobile) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,10 +14,8 @@
|
|||
transition-duration: 0.1s;
|
||||
border-radius: 8px;
|
||||
|
||||
@supports(-webkit-mask-box-image: url('')){
|
||||
border-radius: 0;
|
||||
-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;
|
||||
}
|
||||
@apply --squircle;
|
||||
|
||||
|
||||
&__icon {
|
||||
display: inline-flex;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,12 @@
|
|||
font-size: 18px;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
height: var(--layout-height-header);
|
||||
box-sizing: border-box;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
|
||||
@media (--mobile){
|
||||
line-height: 40px;
|
||||
|
|
@ -60,25 +66,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-add {
|
||||
@media (--mobile) {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
line-height: 1em;
|
||||
margin: 0 !important;
|
||||
}
|
||||
a {
|
||||
li&-add {
|
||||
flex-shrink: 0;
|
||||
|
||||
&--desktop {
|
||||
@media (--mobile) {
|
||||
font-size: 0;
|
||||
padding: 0 4px;
|
||||
margin-right: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-button__icon {
|
||||
&--mobile {
|
||||
display: none;
|
||||
|
||||
@media (--mobile) {
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
216
src/frontend/styles/components/sidebar.pcss
Normal file
216
src/frontend/styles/components/sidebar.pcss
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
.docs-sidebar {
|
||||
width: 100vw;
|
||||
|
||||
@media (--desktop) {
|
||||
width: var(--layout-sidebar-width);
|
||||
}
|
||||
|
||||
&__content {
|
||||
border-bottom: 1px solid var(--color-line-gray);
|
||||
box-sizing: border-box;
|
||||
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
|
||||
position: sticky;
|
||||
top: var(--layout-height-header);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
|
||||
@media (--desktop) {
|
||||
height: calc(100vh - var(--layout-height-header));
|
||||
border-right: 1px solid var(--color-line-gray);
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__section {
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--animated {
|
||||
.docs-sidebar__section-list {
|
||||
transition: max-height 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.docs-sidebar__section-toggler {
|
||||
svg {
|
||||
transition: transform 200ms ease-in;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
.docs-sidebar__section-list {
|
||||
max-height: 0 !important;
|
||||
}
|
||||
|
||||
.docs-sidebar__section-toggler {
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__section:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&__section-title {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 700;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
&__section-list-item {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
&__section-title,
|
||||
&__section-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px;
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.1s;
|
||||
@apply --squircle;
|
||||
}
|
||||
|
||||
&__section-title > span,
|
||||
&__section-list-item > span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__section-title-wrapper {
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 1px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__section-list-item-wrapper {
|
||||
padding: 1px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
.docs-sidebar__section-list-item-wrapper {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__section-title:not(&__section-title--active),
|
||||
&__section-list-item:not(&__section-list-item--active) {
|
||||
@media (--can-hover) {
|
||||
&:hover {
|
||||
background: var(--color-link-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__section-title--active,
|
||||
&__section-list-item--active {
|
||||
background: linear-gradient(270deg, #129BFF 0%, #8A53FF 100%);
|
||||
color: white;
|
||||
|
||||
@media (--can-hover) {
|
||||
.docs-sidebar__section-toggler:hover {
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__section-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__section-toggler {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.1s;
|
||||
|
||||
@apply --squircle;
|
||||
|
||||
@media (--can-hover) {
|
||||
&:hover {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__toggler {
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-second);
|
||||
padding: 20px 15px;
|
||||
border-bottom: 1px solid var(--color-line-gray);
|
||||
|
||||
@media (--desktop) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: none;
|
||||
margin-top: auto;
|
||||
background: white;
|
||||
z-index: 2;
|
||||
padding-bottom: 20px;
|
||||
padding-top: 60px;
|
||||
font-size: 14px;
|
||||
|
||||
@media (--desktop) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-image{
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
&-caption {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue