mirror of
https://github.com/minio/docs.git
synced 2025-07-28 19:42:10 +03:00
Update navigation
This commit is contained in:
Rushan M
Ravind Kumar
@ -319,6 +319,14 @@ table.docutils {
|
|||||||
top: 0;
|
top: 0;
|
||||||
max-width: 200px; }
|
max-width: 200px; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--nav-text-color: #000000;
|
||||||
|
--nav-item-border-color: #000000;
|
||||||
|
--nav-item-arrow: url(../img/icons/nav-arrow.svg);
|
||||||
|
--nav-toggle-hover-border-color: #000000;
|
||||||
|
--nav-bg-gray: #f8f8f8;
|
||||||
|
--header-bg: #ffffff; }
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
@ -362,11 +370,16 @@ table.docutils {
|
|||||||
transition: opacity 300ms, -webkit-transform 300ms;
|
transition: opacity 300ms, -webkit-transform 300ms;
|
||||||
transition: opacity 300ms, transform 300ms;
|
transition: opacity 300ms, transform 300ms;
|
||||||
transition: opacity 300ms, transform 300ms, -webkit-transform 300ms;
|
transition: opacity 300ms, transform 300ms, -webkit-transform 300ms;
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 0.9375rem; }
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.nav {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: auto;
|
-webkit-box-align: center;
|
||||||
font-size: 0.9375rem; }
|
-ms-flex-align: center;
|
||||||
|
align-items: center; } }
|
||||||
@media (max-width: 991px) {
|
@media (max-width: 991px) {
|
||||||
.nav {
|
.nav {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
@ -401,29 +414,62 @@ table.docutils {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 100; } }
|
z-index: 100; } }
|
||||||
|
|
||||||
.nav__item {
|
.nav__item:hover .nav__dropdown,
|
||||||
position: relative; }
|
.nav__item:hover ~ .nav__dropdown--product {
|
||||||
.nav__item:hover .nav__dropdown {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: auto; }
|
pointer-events: auto; }
|
||||||
.nav__item:hover .nav__link--dropdown > span:before {
|
|
||||||
|
.nav__item:hover .nav__link--dropdown > span:before {
|
||||||
opacity: 0; }
|
opacity: 0; }
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.nav__item .nav__link {
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
background: var(--nav-item-arrow) no-repeat top 2.45rem right 0.25rem; }
|
||||||
|
.nav__item .nav__link:after {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -3px;
|
||||||
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 6px 4px;
|
||||||
|
border-color: transparent transparent #fff;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
-webkit-transition: opacity 200ms;
|
||||||
|
transition: opacity 200ms;
|
||||||
|
z-index: 2; }
|
||||||
|
.nav__item:hover .nav__link:after {
|
||||||
|
opacity: 1; } }
|
||||||
|
|
||||||
.nav__link {
|
.nav__link {
|
||||||
line-height: 100%; }
|
position: relative; }
|
||||||
.nav__link, .nav__link:hover {
|
.nav__link, .nav__link:hover {
|
||||||
color: #4b4b4b; }
|
color: var(--nav-text-color); }
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.nav__link {
|
.nav__link {
|
||||||
padding: 0.625rem 1.25rem 0.8125rem;
|
padding: 0 1.25rem;
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.25rem;
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
|
.nav__link:not(.nav__link--download) {
|
||||||
|
height: 5rem;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center; }
|
||||||
.nav__link > span {
|
.nav__link > span {
|
||||||
position: relative; }
|
position: relative; }
|
||||||
.nav__link > span:before {
|
.nav__link > span:before {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #4b4b4b;
|
background-color: var(--nav-item-border-color);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -8px;
|
bottom: -8px;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -442,8 +488,10 @@ table.docutils {
|
|||||||
@media (max-width: 991px) {
|
@media (max-width: 991px) {
|
||||||
.nav__link {
|
.nav__link {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #000000;
|
color: #000000; }
|
||||||
padding: 0.75rem 1.75rem; } }
|
.nav__link > span {
|
||||||
|
display: block;
|
||||||
|
padding: 0.5rem 1.5rem; } }
|
||||||
|
|
||||||
.nav__link--active > span:before {
|
.nav__link--active > span:before {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -454,71 +502,67 @@ table.docutils {
|
|||||||
border: 1px solid #C72C48;
|
border: 1px solid #C72C48;
|
||||||
-webkit-transition: background-color 300ms, color 300ms;
|
-webkit-transition: background-color 300ms, color 300ms;
|
||||||
transition: background-color 300ms, color 300ms;
|
transition: background-color 300ms, color 300ms;
|
||||||
border-radius: 0.1875rem; }
|
border-radius: 0.1875rem;
|
||||||
|
padding: 0.5rem 1.25rem 0.6rem; }
|
||||||
.nav__link--download:hover {
|
.nav__link--download:hover {
|
||||||
background-color: #C72C48;
|
background-color: #C72C48;
|
||||||
color: #ffffff; }
|
color: #ffffff; }
|
||||||
@media (max-width: 991px) {
|
@media (max-width: 991px) {
|
||||||
.nav__link--download {
|
.nav__link--download {
|
||||||
margin: 1.5rem;
|
margin: 1.5rem;
|
||||||
text-align: center; } }
|
text-align: center;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
display: block; } }
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.nav__dropdown {
|
.nav__dropdown {
|
||||||
margin-top: 0.3125rem;
|
|
||||||
width: 385px;
|
width: 385px;
|
||||||
-webkit-transform: translateX(calc(-50% + 3rem));
|
-webkit-transform: translateX(calc(-50% + 3rem));
|
||||||
transform: translateX(calc(-50% + 3rem));
|
transform: translateX(calc(-50% + 3rem));
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 90%;
|
top: 4rem;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
-webkit-transition: opacity 200ms;
|
-webkit-transition: opacity 200ms;
|
||||||
transition: opacity 200ms;
|
transition: opacity 200ms;
|
||||||
pointer-events: none; }
|
pointer-events: none;
|
||||||
.nav__dropdown:before {
|
border-radius: 0.3125rem;
|
||||||
left: 50%;
|
overflow: hidden;
|
||||||
margin-left: -5px;
|
-webkit-box-shadow: 0 0.0625rem 1.25rem rgba(0, 0, 0, 0.13);
|
||||||
content: "";
|
box-shadow: 0 0.0625rem 1.25rem rgba(0, 0, 0, 0.13);
|
||||||
width: 0;
|
background-color: #ffffff;
|
||||||
height: 0;
|
z-index: 1; }
|
||||||
border-style: solid;
|
|
||||||
border-width: 0 10px 8px;
|
|
||||||
border-color: transparent transparent #ffffff transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: -8px; }
|
|
||||||
.nav__dropdown .nav__dropdown__inner {
|
.nav__dropdown .nav__dropdown__inner {
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
max-height: calc(100vh - 5rem);
|
max-height: calc(100vh - 5rem);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border-radius: 0.1875rem;
|
border-radius: 0.3125rem; } }
|
||||||
-webkit-box-shadow: 0 0.0625rem 1.25rem rgba(0, 0, 0, 0.13);
|
|
||||||
box-shadow: 0 0.0625rem 1.25rem rgba(0, 0, 0, 0.13);
|
|
||||||
background-color: #ffffff; } }
|
|
||||||
|
|
||||||
@media (max-width: 991px) {
|
@media (max-width: 991px) {
|
||||||
.nav__dropdown .nav__dropdown__inner {
|
.nav__dropdown .nav__dropdown__inner {
|
||||||
background-color: #f8f8f8;
|
background-color: var(--nav-bg-gray);
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 0.8rem;
|
||||||
margin-bottom: 1rem; } }
|
margin-bottom: 1rem; } }
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.nav__dropdown--lg {
|
.nav__dropdown--product {
|
||||||
width: 800px; }
|
width: calc(100% - 3.5rem);
|
||||||
.nav__dropdown--lg .nav__dropdown__inner {
|
max-width: 1200px;
|
||||||
padding: 3.5rem; } }
|
-webkit-transform: translateX(0);
|
||||||
|
transform: translateX(0);
|
||||||
@media (max-width: 1200px) and (min-width: 992px) {
|
left: auto;
|
||||||
.nav__dropdown--lg {
|
right: 1.75rem; }
|
||||||
width: 500px; }
|
.nav__dropdown--product:hover {
|
||||||
.nav__dropdown--lg .nav__dropdown__inner {
|
opacity: 1;
|
||||||
padding: 1.5rem; } }
|
pointer-events: auto; }
|
||||||
|
.nav__dropdown--product .nav__dropdown__inner {
|
||||||
|
padding: 2.5rem 2.25rem; } }
|
||||||
|
|
||||||
.nav__sub {
|
.nav__sub {
|
||||||
padding: 0.6rem 0.75rem;
|
padding: 0.6rem 0.75rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
border-radius: 0.25rem; }
|
border-radius: 0.1875rem; }
|
||||||
@media (max-width: 991px) {
|
@media (max-width: 991px) {
|
||||||
.nav__sub {
|
.nav__sub {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
@ -536,44 +580,31 @@ table.docutils {
|
|||||||
.nav__sub > small {
|
.nav__sub > small {
|
||||||
display: none; } }
|
display: none; } }
|
||||||
.nav__sub:hover {
|
.nav__sub:hover {
|
||||||
background-color: #f8f8f8;
|
background-color: var(--nav-bg-gray);
|
||||||
color: #000000; }
|
color: #000000; }
|
||||||
|
|
||||||
.nav__arrow {
|
|
||||||
width: 9px;
|
|
||||||
height: 5px;
|
|
||||||
background: url(../img/icons/nav-arrow.svg) no-repeat center;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 4px; }
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
.nav__arrow {
|
|
||||||
display: none; } }
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.nav__feature {
|
.nav__feature {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex; } }
|
||||||
-webkit-box-align: start;
|
|
||||||
-ms-flex-align: start;
|
|
||||||
align-items: flex-start; } }
|
|
||||||
|
|
||||||
.nav__column {
|
@media (min-width: 992px) {
|
||||||
|
.nav__column {
|
||||||
|
padding: 0 1rem; }
|
||||||
|
.nav__column:not(:first-child) {
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-ms-flex: 1;
|
-ms-flex: 1;
|
||||||
flex: 1; }
|
flex: 1; }
|
||||||
|
.nav__column:first-child > .nav__sub {
|
||||||
@media (min-width: 992px) {
|
|
||||||
.nav__column--main {
|
|
||||||
padding-right: 1rem; }
|
|
||||||
.nav__column--main > .nav__sub {
|
|
||||||
margin-top: 1rem; } }
|
margin-top: 1rem; } }
|
||||||
|
|
||||||
.nav__column__title {
|
.nav__column__title {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 0.6rem;
|
font-size: 0.6rem;
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.75rem;
|
||||||
margin-bottom: 0.2rem; }
|
margin-bottom: 0.5rem;
|
||||||
|
line-height: 100%; }
|
||||||
@media (max-width: 991px) {
|
@media (max-width: 991px) {
|
||||||
.nav__column__title {
|
.nav__column__title {
|
||||||
margin-top: 1rem; } }
|
margin-top: 1rem; } }
|
||||||
@ -614,6 +645,13 @@ table.docutils {
|
|||||||
.nav__jump {
|
.nav__jump {
|
||||||
display: none; } }
|
display: none; } }
|
||||||
|
|
||||||
|
.nav__seperator {
|
||||||
|
border-left: 1px solid var(--nav-bg-gray);
|
||||||
|
margin: 0 1rem; }
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.nav__seperator {
|
||||||
|
display: none; } }
|
||||||
|
|
||||||
.toggle-icon {
|
.toggle-icon {
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
|
|||||||
2
source/_static/css/main.min.css
vendored
2
source/_static/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
1
source/_static/img/icons/erasure-code-calculator.svg
Normal file
1
source/_static/img/icons/erasure-code-calculator.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg id="prefix__Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 28.83"><defs><style>.prefix__cls-1{fill:none}.prefix__cls-2{fill:#c72c48}.prefix__cls-3{fill:#fff}</style></defs><g id="prefix__Group_298" data-name="Group 298"><g id="prefix__Group_271" data-name="Group 271"><g id="prefix__Rectangle_495" data-name="Rectangle 495"><path class="prefix__cls-1" d="M440.4 184.23h14.14a2.76 2.76 0 012.76 2.77 2.76 2.76 0 01-2.76 2.75H440.4a2.75 2.75 0 01-2.76-2.75 2.75 2.75 0 012.76-2.77z" transform="translate(-432.47 -179.07)"/><path class="prefix__cls-2" d="M454.54 189.74H440.4a2.76 2.76 0 110-5.51h14.14a2.76 2.76 0 110 5.51zm-14.14-4.07a1.32 1.32 0 100 2.63h14.14a1.32 1.32 0 000-2.63z" transform="translate(-432.47 -179.07)"/></g></g><g id="prefix__Rectangle_458" data-name="Rectangle 458"><rect class="prefix__cls-1" width="30" height="28.83" rx="2.62"/><path class="prefix__cls-2" d="M459.84 207.91h-24.75a2.62 2.62 0 01-2.62-2.62V181.7a2.62 2.62 0 012.62-2.63h24.75a2.63 2.63 0 012.63 2.63v23.59a2.63 2.63 0 01-2.63 2.62zm-24.75-27a.79.79 0 00-.79.79v23.59a.78.78 0 00.79.78h24.75a.78.78 0 00.79-.78V181.7a.79.79 0 00-.79-.79z" transform="translate(-432.47 -179.07)"/></g><g id="prefix__Ellipse_5" data-name="Ellipse 5"><circle class="prefix__cls-3" cx="15" cy="15.16" r="1.97"/><path class="prefix__cls-2" d="M447.47 196.2a2 2 0 112-2 2 2 0 01-2 2zm0-2.49a.52.52 0 00-.53.52.53.53 0 00.53.53.52.52 0 00.52-.53.52.52 0 00-.52-.52z" transform="translate(-432.47 -179.07)"/></g><g id="prefix__Ellipse_6" data-name="Ellipse 6"><circle class="prefix__cls-3" cx="8.45" cy="15.16" r="1.97"/><path class="prefix__cls-2" d="M440.91 196.2a2 2 0 112-2 2 2 0 01-2 2zm0-2.49a.52.52 0 00-.52.52.53.53 0 101.05 0 .52.52 0 00-.53-.52z" transform="translate(-432.47 -179.07)"/></g><g id="prefix__Ellipse_7" data-name="Ellipse 7"><circle class="prefix__cls-3" cx="21.55" cy="15.16" r="1.97"/><path class="prefix__cls-2" d="M454 196.2a2 2 0 112-2 2 2 0 01-2 2zm0-2.49a.52.52 0 00-.53.52.53.53 0 00.53.53.52.52 0 00.52-.53.52.52 0 00-.52-.52z" transform="translate(-432.47 -179.07)"/></g><g id="prefix__Ellipse_8" data-name="Ellipse 8"><circle class="prefix__cls-3" cx="14.98" cy="21.71" r="1.97"/><path class="prefix__cls-2" d="M447.45 202.75a2 2 0 112-2 2 2 0 01-2 2zm0-2.49a.53.53 0 100 1.05.53.53 0 000-1.05z" transform="translate(-432.47 -179.07)"/></g><g id="prefix__Ellipse_9" data-name="Ellipse 9"><circle class="prefix__cls-3" cx="8.43" cy="21.71" r="1.97"/><path class="prefix__cls-2" d="M440.9 202.75a2 2 0 112-2 2 2 0 01-2 2zm0-2.49a.53.53 0 10.52.52.53.53 0 00-.52-.52z" transform="translate(-432.47 -179.07)"/></g><g id="prefix__Ellipse_10" data-name="Ellipse 10"><circle class="prefix__cls-3" cx="21.53" cy="21.71" r="1.97"/><path class="prefix__cls-2" d="M454 202.75a2 2 0 112-2 2 2 0 01-2 2zm0-2.49a.53.53 0 000 1.05.53.53 0 100-1.05z" transform="translate(-432.47 -179.07)"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
@ -1 +1 @@
|
|||||||
<svg width="9" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M8.071.135a.562.562 0 1 1 .733.855L4.866 4.365a.562.562 0 0 1-.732 0L.196.99A.562.562 0 1 1 .93.135L4.5 3.197 8.071.135z" fill="#505050" fill-rule="evenodd"/></svg>
|
<svg width="9" height="4" xmlns="http://www.w3.org/2000/svg"><path d="M8.071.12A.619.619 0 018.625.03c.19.059.33.204.366.38a.47.47 0 01-.187.472L4.866 3.88a.616.616 0 01-.732 0L.196.88a.463.463 0 01-.06-.705A.614.614 0 01.93.12L4.5 2.84 8.071.122z" fill="#505050" fill-rule="evenodd"/></svg>
|
||||||
|
Before Width: | Height: | Size: 234 B After Width: | Height: | Size: 291 B |
@ -1,3 +1,13 @@
|
|||||||
|
// Using CSS variables to match the parent site's nav configs.
|
||||||
|
:root {
|
||||||
|
--nav-text-color: #{$black};
|
||||||
|
--nav-item-border-color: #{$black};
|
||||||
|
--nav-item-arrow: #{$nav-arrow-icon};
|
||||||
|
--nav-toggle-hover-border-color: #{$black};
|
||||||
|
--nav-bg-gray: #{$nav-sub-hover-bg};
|
||||||
|
--header-bg: #{$white};
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
height: $header-height;
|
height: $header-height;
|
||||||
background-color: $header-bg;
|
background-color: $header-bg;
|
||||||
@ -40,10 +50,14 @@
|
|||||||
.nav {
|
.nav {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
transition: opacity 300ms, transform 300ms;
|
transition: opacity 300ms, transform 300ms;
|
||||||
display: flex;
|
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
|
|
||||||
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
@include breakpoint-max(breakpoints(lg)) {
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: $nav-mobile-width;
|
width: $nav-mobile-width;
|
||||||
@ -81,10 +95,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav__item {
|
.nav__item {
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.nav__dropdown {
|
.nav__dropdown,
|
||||||
|
& ~ .nav__dropdown--product {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
@ -97,28 +110,67 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
|
.nav__link {
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
background: var(--nav-item-arrow) no-repeat top 2.45rem right 0.25rem;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -3px;
|
||||||
|
content: "";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 6px 4px;
|
||||||
|
border-color: transparent transparent #fff;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
transition: opacity 200ms;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.nav__link {
|
||||||
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__link {
|
.nav__link {
|
||||||
line-height: 100%;
|
position: relative;
|
||||||
|
|
||||||
&,
|
&,
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $nav-link-color;
|
color: var(--nav-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint-min(breakpoints(lg)) {
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
padding: 0.625rem 1.25rem 0.8125rem;
|
padding: 0 1.25rem;
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.25rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:not(.nav__link--download) {
|
||||||
|
height: $header-height;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
& > span {
|
& > span {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: $nav-link-color;
|
background-color: var(--nav-item-border-color);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -8px;
|
bottom: -8px;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -144,7 +196,11 @@
|
|||||||
@include breakpoint-max(breakpoints(lg)) {
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
font-weight: $font-weight-medium;
|
font-weight: $font-weight-medium;
|
||||||
color: $black;
|
color: $black;
|
||||||
padding: 0.75rem 1.75rem;
|
|
||||||
|
& > span {
|
||||||
|
display: block;
|
||||||
|
padding: 0.5rem 1.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -161,6 +217,7 @@
|
|||||||
border: 1px solid $theme-red;
|
border: 1px solid $theme-red;
|
||||||
transition: background-color 300ms, color 300ms;
|
transition: background-color 300ms, color 300ms;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
|
padding: 0.5rem 1.25rem 0.6rem;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $theme-red;
|
background-color: $theme-red;
|
||||||
@ -170,78 +227,68 @@
|
|||||||
@include breakpoint-max(breakpoints(lg)) {
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
margin: 1.5rem;
|
margin: 1.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__dropdown {
|
.nav__dropdown {
|
||||||
@include breakpoint-min(breakpoints(lg)) {
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
margin-top: 0.3125rem;
|
|
||||||
width: 385px;
|
width: 385px;
|
||||||
transform: translateX(calc(-50% + 3rem));
|
transform: translateX(calc(-50% + 3rem));
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 90%;
|
top: 4rem;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 200ms;
|
transition: opacity 200ms;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
border-radius: $border-radius-lg;
|
||||||
&:before {
|
overflow: hidden;
|
||||||
left: 50%;
|
box-shadow: 0 0.0625rem 1.25rem rgba($black, 0.13);
|
||||||
margin-left: -5px;
|
background-color: $white;
|
||||||
content: "";
|
z-index: 1;
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0 10px 8px;
|
|
||||||
border-color: transparent transparent $white transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: -8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav__dropdown__inner {
|
.nav__dropdown__inner {
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
max-height: calc(100vh - 5rem);
|
max-height: calc(100vh - 5rem);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius-lg;
|
||||||
box-shadow: 0 0.0625rem 1.25rem rgba($black, 0.13);
|
|
||||||
background-color: $white;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint-max(breakpoints(lg)) {
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
.nav__dropdown__inner {
|
.nav__dropdown__inner {
|
||||||
background-color: $nav-sub-hover-bg;
|
background-color: var(--nav-bg-gray);
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 0.8rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__dropdown--lg {
|
.nav__dropdown--product {
|
||||||
@include breakpoint-min(breakpoints(lg)) {
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
width: 800px;
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
width: calc(100% - 3.5rem);
|
||||||
|
max-width: 1200px;
|
||||||
|
transform: translateX(0);
|
||||||
|
left: auto;
|
||||||
|
right: 1.75rem;
|
||||||
|
|
||||||
.nav__dropdown__inner {
|
.nav__dropdown__inner {
|
||||||
padding: 3.5rem;
|
padding: 2.5rem 2.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: map_get($breakpoints, xl)) and (min-width: map_get($breakpoints, lg)) {
|
|
||||||
width: 500px;
|
|
||||||
|
|
||||||
.nav__dropdown__inner {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__sub {
|
.nav__sub {
|
||||||
padding: 0.6rem 0.75rem;
|
padding: 0.6rem 0.75rem;
|
||||||
font-weight: $font-weight-medium;
|
font-weight: $font-weight-medium;
|
||||||
color: $black;
|
color: $black;
|
||||||
border-radius: 0.25rem;
|
border-radius: $border-radius;
|
||||||
|
|
||||||
@include breakpoint-max(breakpoints(lg)) {
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
@ -266,53 +313,45 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $nav-sub-hover-bg;
|
background-color: var(--nav-bg-gray);
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__arrow {
|
|
||||||
width: 9px;
|
|
||||||
height: 5px;
|
|
||||||
background: $nav-arrow-icon;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 4px;
|
|
||||||
|
|
||||||
@include breakpoint-max(breakpoints(lg)) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav__feature {
|
.nav__feature {
|
||||||
@include breakpoint-min(breakpoints(lg)) {
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__column {
|
.nav__column {
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav__column--main {
|
|
||||||
@include breakpoint-min(breakpoints(lg)) {
|
@include breakpoint-min(breakpoints(lg)) {
|
||||||
padding-right: 1rem;
|
padding: 0 1rem;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
& > .nav__sub {
|
& > .nav__sub {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__column__title {
|
.nav__column__title {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 0.6rem;
|
font-size: 0.6rem;
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.75rem;
|
||||||
margin-bottom: 0.2rem;
|
margin-bottom: 0.5rem;
|
||||||
|
line-height: 100%;
|
||||||
|
|
||||||
@include breakpoint-max(breakpoints(lg)) {
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav__lead {
|
.nav__lead {
|
||||||
@ -362,6 +401,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav__seperator {
|
||||||
|
border-left: 1px solid var(--nav-bg-gray);
|
||||||
|
margin: 0 1rem;
|
||||||
|
|
||||||
|
@include breakpoint-max(breakpoints(lg)) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.toggle-icon {
|
.toggle-icon {
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
|
|||||||
@ -104,4 +104,4 @@ $nav-mobile-bg: $white;
|
|||||||
$nav-mobile-width: 300px;
|
$nav-mobile-width: 300px;
|
||||||
$nav-mobile-box-shadow: 0 0 10px rgba($black, 0.1);
|
$nav-mobile-box-shadow: 0 0 10px rgba($black, 0.1);
|
||||||
$nav-active-z-index: 100;
|
$nav-active-z-index: 100;
|
||||||
$nav-arrow-icon: url(../img/icons/nav-arrow.svg) no-repeat center;
|
$nav-arrow-icon: url(../img/icons/nav-arrow.svg);
|
||||||
@ -4,13 +4,12 @@
|
|||||||
<div class="nav__item">
|
<div class="nav__item">
|
||||||
<div class="nav__link nav__link--dropdown">
|
<div class="nav__link nav__link--dropdown">
|
||||||
<span>Product</span>
|
<span>Product</span>
|
||||||
<i class="nav__arrow"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="nav__dropdown nav__dropdown--lg">
|
<div class="nav__dropdown nav__dropdown--product">
|
||||||
<div class="nav__dropdown__inner">
|
<div class="nav__dropdown__inner">
|
||||||
<div class="nav__feature">
|
<div class="nav__feature">
|
||||||
<div class="nav__column nav__column--main">
|
<div class="nav__column">
|
||||||
<div class="nav__sub">
|
<div class="nav__sub">
|
||||||
<a href="https://min.io/hybrid-cloud-storage" class="nav__lead">
|
<a href="https://min.io/hybrid-cloud-storage" class="nav__lead">
|
||||||
<img src="{{ pathto('_static/img/icons/hybrid-cloud.svg',1) }}" alt="Hybrid Cloud Object Storage">
|
<img src="{{ pathto('_static/img/icons/hybrid-cloud.svg',1) }}" alt="Hybrid Cloud Object Storage">
|
||||||
@ -31,6 +30,10 @@
|
|||||||
<a href="https://min.io/product/overview#architecture">Architecture</a>
|
<a href="https://min.io/product/overview#architecture">Architecture</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<a href="https://min.io/product/erasure-code-calculator" class="nav__sub nav__lead">
|
||||||
|
<img src="{{ pathto('_static/img/icons/erasure-code-calculator.svg',1) }}" alt="Erasure Code Calculator">
|
||||||
|
Erasure Code Calculator
|
||||||
|
</a>
|
||||||
<a href="https://min.io/product/reference-hardware" class="nav__sub nav__lead">
|
<a href="https://min.io/product/reference-hardware" class="nav__sub nav__lead">
|
||||||
<img src="{{ pathto('_static/img/icons/ref-hardware.svg',1) }}" alt="Reference Hardware">
|
<img src="{{ pathto('_static/img/icons/ref-hardware.svg',1) }}" alt="Reference Hardware">
|
||||||
Reference Hardware
|
Reference Hardware
|
||||||
@ -49,41 +52,56 @@
|
|||||||
<a href="https://min.io/product/object-storage-performance-monitoring" class="nav__sub">Monitoring</a>
|
<a href="https://min.io/product/object-storage-performance-monitoring" class="nav__sub">Monitoring</a>
|
||||||
<a href="https://min.io/product/scalable-object-storage" class="nav__sub">Scalability</a>
|
<a href="https://min.io/product/scalable-object-storage" class="nav__sub">Scalability</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<i class="nav__seperator"></i>
|
||||||
|
|
||||||
|
<div class="nav__column">
|
||||||
|
<div class="nav__column__title">Native Versions</div>
|
||||||
|
|
||||||
|
<a href="https://min.io/product/private-cloud-vmware-tanzu" class="nav__sub">MinIO for VMware Tanzu</a>
|
||||||
|
<a href="https://min.io/product/private-cloud-red-hat-openshift" class="nav__sub">MinIO for OpenShift</a>
|
||||||
|
<a href="https://min.io/product/multicloud-elastic-kubernetes-service" class="nav__sub">MinIO for Amazon Elastic Kubernetes Service</a>
|
||||||
|
<a href="https://min.io/product/multicloud-azure-kubernetes-service" class="nav__sub">MinIO for Azure Kubernetes Service</a>
|
||||||
|
<a href="https://min.io/product/multicloud-google-kubernetes-service" class="nav__sub">MinIO for Google Kubernetes Engine</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="nav__item">
|
<div class="nav__item">
|
||||||
<div class="nav__link nav__link--dropdown nav__link--active">
|
<div class="nav__link nav__link--dropdown nav__link--active">
|
||||||
<span>Docs</span>
|
<span>Docs</span>
|
||||||
<i class="nav__arrow"></i>
|
|
||||||
</div>
|
|
||||||
<div class="nav__dropdown">
|
<div class="nav__dropdown">
|
||||||
<div class="nav__dropdown__inner">
|
<div class="nav__dropdown__inner">
|
||||||
<a href="https://docs.min.io/minio/baremetal" class="nav__sub">
|
<a class="nav__sub" href="https://docs.min.io/minio/baremetal">
|
||||||
<span class="">MinIO Baremetal</span>
|
<span class="">MinIO Baremetal</span>
|
||||||
<small class="">MinIO Object Storage for Baremetal Infrastructure</small>
|
<small class="">MinIO Object Storage for Baremetal Infrastructure</small>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://docs.min.io/minio/k8s" class="nav__sub">
|
<a class="nav__sub" href="https://docs.min.io/minio/k8s">
|
||||||
<span class="">MinIO Hybrid Cloud</span>
|
<span class="">MinIO Hybrid Cloud</span>
|
||||||
<small class="">MinIO Object Storage for Kubernetes-Managed Private and Public Cloud Infrastructure</small>
|
<small class="">MinIO Object Storage for Kubernetes-Managed Private and Public Cloud Infrastructure</small>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://docs.min.io/minio/vsphere" class="nav__sub">
|
<a class="nav__sub" href="https://docs.min.io/minio/vsphere">
|
||||||
<span class="">MinIO for VMware Cloud Foundation</span>
|
<span class="">MinIO for VMware Cloud Foundation</span>
|
||||||
<small class="">MinIO Object Storage for VMware Cloud Foundation 4.2</small>
|
<small class="">MinIO Object Storage for VMware Cloud Foundation 4.2</small>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://docs.min.io" class="nav__sub">
|
<a class="nav__sub" href="https://docs.min.io">
|
||||||
<span class="">MinIO Legacy Documentation</span>
|
<span class="">MinIO Legacy Documentation</span>
|
||||||
<small class="">Legacy Documentation for MinIO Object Storage</small>
|
<small class="">Legacy Documentation for MinIO Object Storage</small>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav__item">
|
|
||||||
<div class="nav__link nav__link--dropdown" data-href="solutions">
|
|
||||||
<span class="relative">Solutions</span>
|
|
||||||
<i class="nav__arrow"></i>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="nav__item">
|
||||||
|
<div class="nav__link nav__link--dropdown">
|
||||||
|
<span>Solutions</span>
|
||||||
|
|
||||||
<div class="nav__dropdown">
|
<div class="nav__dropdown">
|
||||||
<div class="nav__dropdown__inner">
|
<div class="nav__dropdown__inner">
|
||||||
<a href="https://min.io/solutions/vmware" class="nav__sub">
|
<a href="https://min.io/solutions/vmware" class="nav__sub">
|
||||||
@ -117,7 +135,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="https://min.io/resources" class="nav__link" data-href="resources">
|
</div>
|
||||||
|
<a href="https://min.io/resources" class="nav__link">
|
||||||
<span>Resources</span>
|
<span>Resources</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://blog.min.io/" class="nav__link">
|
<a href="https://blog.min.io/" class="nav__link">
|
||||||
|
|||||||
Reference in New Issue
Block a user