minio/docs
1
0
Fork 0
mirror of https://github.com/minio/docs.git synced 2025-07-31 18:04:52 +03:00
Code Activity

Add docs switch menu (#881)

Browse Source 
Fixes https://github.com/minio/docs/issues/842

Also made some changes to the dark-mode/read-mode icons to maintain the
consistency with KES docs UI.

**Preview:**
<img width="627" alt="Screenshot 2023-06-15 at 14 19 32"
src="https://github.com/minio/docs/assets/13393018/708d8991-c6af-406f-a474-65449c38c06c">

<img width="627" alt="Screenshot 2023-06-15 at 14 19 36"
src="https://github.com/minio/docs/assets/13393018/63f9db43-1408-4e96-81ad-9ecb7c39b9f0">


**Updating the list:**

Edit the `docs` array in `default.conf.py@268`.
This commit is contained in:
Rushan
2023-06-16 10:36:35 +00:00
committed by GitHub
parent afc7a03071
commit edbbe90742
18 changed files with 191 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
source/_static/scss/includes/_base.scss
View File

@ -34,4 +34,5 @@ body {
background-color: var(--body-bg);
display: flex;
flex-direction: column;
word-break: break-word;
}

140
source/_static/scss/includes/_header.scss
View File

@ -29,19 +29,130 @@
}
.header__logo {
display: flex;
& > svg {
width: 6.25rem;
fill: var(--logo-fill-color);
}
}
.header__top__title {
line-height: 100%;
font-weight: 500;
color: var(--header-headings-color);
margin-left: 0.5rem;
font-size: $font-size-sm;
padding-bottom: 0.1rem;
.header__docs {
position: relative;
font-size: $font-size-xs;
margin-left: 1rem;
@include breakpoint-min(breakpoints(lg)) {
position: absolute;
bottom: -2.425rem;
right: 1.75rem;
z-index: 1;
&:before {
content: "Go to:";
position: absolute;
left: -2.75rem;
top: 0.35rem;
font-weight: $font-weight-medium;
color: var(--headings-color);
pointer-events: none;
}
}
&:hover {
.header__docs__menu {
display: flex;
}
.header__docs__current {
border-radius: $border-radius $border-radius 0 0;
}
}
}
:root {
&.read-mode {
.header__docs {
@include breakpoint-min(breakpoints(lg)) {
right: 4.5rem;
}
}
}
&:not(.dark-mode) {
.header__docs {
@include breakpoint-max(breakpoints(lg)) {
.header__docs__current {
--docs-menu-border-color: #{rgba($white, 0.25)};
--docs-menu-bg: transparent;
--headings-color: #{$white};
}
&:hover {
.header__docs__current {
--docs-menu-bg: #{$white};
--headings-color: $headings-color;
}
}
}
}
}
}
.header__docs__current {
color: var(--headings-color);
font-weight: $font-weight-medium;
border: 1px solid var(--docs-menu-border-color);
border-radius: $border-radius;
display: flex;
white-space: nowrap;
align-items: center;
height: 2rem;
padding: 0.075rem 0.75rem 0;
background-color: var(--docs-menu-bg);
& > svg {
margin-top: 1px;
margin-left: 0.5rem;
}
}
.header__docs__menu {
position: absolute;
margin-top: -1px;
left: 0;
top: 100%;
width: 100%;
flex-direction: column;
gap: 1px;
display: none;
background-color: var(--nav-dropdown-bg);
padding: 0.25rem;
z-index: 10;
border-radius: 0 0 $border-radius $border-radius;
border: 1px solid var(--docs-menu-border-color);
& > a {
padding: 0.35rem 1.6rem 0.35rem 0.6rem;
display: flex;
align-items: center;
border-radius: $border-radius;
white-space: nowrap;
color: var(--text-muted-color);
border: 1px solid transparent;
&:hover {
background-color: var(--theme-light-bg);
color: var(--text-color);
}
&.current {
background-color: var(--theme-light-hover-bg);
pointer-events: none;
color: var(--text-color);
}
}
}
.header__actions {
@ -65,26 +176,13 @@
}
.icon--switch {
transition: background-color 500ms, border-color 500ms;
background-color: var(--header-actions-icon-bg);
border-color: var(--header-actions-icon-border-color);
color: var(--text-color);
&:hover {
background-color: var(--header-actions-icon-hover-bg);
}
& > svg {
stroke: var(--header-actions-icon-stroke);
stroke-width: var(--header-actions-icon-stroke-width);
&:last-child {
& > path {
&:last-child {
fill: var(--header-actions-icon-path-fill);
}
}
}
}
}
}

8
source/_static/scss/includes/_misc.scss
View File

@ -49,8 +49,8 @@
// Buttons icons
// ----------------------
.icon {
width: 1.75rem;
height: 1.75rem;
width: 2rem;
height: 2rem;
border: 1px solid transparent;
border-radius: $border-radius;
background-color: transparent;
@ -79,11 +79,9 @@
& > svg {
transform: scale(1);
opacity: 1;
transition: transform 300ms, opacity 300ms;
position: absolute;
&:last-child:not(:only-child) {
transform: scale(0);
opacity: 0;
}
}
@ -92,12 +90,10 @@
& > svg,
& > img {
&:first-child {
transform: scale(0);
opacity: 0;
}
&:last-child {
transform: scale(1);
opacity: 1;
}
}

10
source/_static/scss/includes/_theme.scss
View File

@ -12,14 +12,14 @@ $theme-properties: (
--headings-color: $black #E3EEEF,
// Theme
--theme-light-bg: $light-300 $dark-200,
--theme-light-hover-bg: $light-500 $dark-300,
--theme-light-bg: $light-200 $dark-200,
--theme-light-hover-bg: $light-300 $dark-300,
// Header
--header-bg: $header-light-bg $dark-0,
--logo-fill-color: $theme-red $white,
--header-actions-icon-bg: $white $dark-0,
--header-actions-icon-border-color: transparent $dark-500,
--header-actions-icon-border-color: transparent $dark-300,
--header-actions-icon-stroke: $black $dark-500,
--header-actions-icon-stroke-width: 1.5 1.25,
--header-actions-icon-path-fill: $header-light-bg $dark-500,
@ -129,6 +129,10 @@ $theme-properties: (
--is-meta-key-border-color: #c5cad0 $dark-400,
--is-search-border-color: $light-500 $dark-300,
--is-search-focus-box-shadow: rgba($light-500, 0.35) rgba($dark-100, 0.75),
// Docs menu
--docs-menu-border-color: $light-300 $dark-300,
--docs-menu-bg: $white transparent,
);
// Activate dark/light themes

2
source/_static/scss/includes/_toc.scss
View File

@ -74,6 +74,8 @@ div.topic {
flex: 1;
position: relative;
border: none;
padding: 0;
margin: 0.25rem 0;
.topic-title {
@include breakpoint-max(breakpoints(lg)) {