agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-14 22:23:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #16254 from overleaf/tm-website-redesign-navbar-footer-base

Browse Source 
Implement navbar and footer changes for website redesign, and for existing pages for treatment users

GitOrigin-RevId: d91328e3928bc0e249e19eff34c6f9423784ccbf
This commit is contained in:
Thomas
2023-12-18 09:05:08 +00:00
committed by Copybot
parent ede42bb016
commit abd2974469
9 changed files with 223 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/stylesheets/components/footer.less
+20 -1
View File
@@ -298,7 +298,7 @@ footer.site-footer {
}
}
.website-redesign {
.website-redesign-fat-footer {
&.fat-footer {
background: @white;
color: @neutral-90;
@@ -306,9 +306,28 @@ footer.site-footer {
a {
color: @neutral-90;
}
.footer-section-heading {
color: @neutral-90;
}
h2 {
font-weight: 400;
}
.fat-footer-base {
color: @neutral-90;
}
}
.footer-brand {
background-image: @navbar-brand-image-url-website-redesign;
}
@media (max-width: @screen-xs-max) {
.fat-footer-sections {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(6, auto);
}
}
}
services/web/frontend/stylesheets/components/navbar.less
+126 -26
View File
@@ -488,6 +488,16 @@
}
}
> li.primary > a {
.btn-borderless();
}
> li.secondary > a {
.btn-bordered();
border-width: @border-radius-small;
}
@media (min-width: @grid-float-breakpoint) {
> li > a {
border-color: @navbar-default-link-border-color;
@@ -615,7 +625,7 @@
}
}
.website-redesign {
.website-redesign-navbar {
&.navbar-default {
background-color: @navbar-default-bg-website-redesign;
@@ -627,36 +637,23 @@
color: @navbar-default-color-website-redesign;
}
// There is this -15px margin hack that is needed on the original
// This causes inconsistency with the website redesign navbar,
// so reset it to 0 for now
@media (min-width: @grid-float-breakpoint) {
.navbar-right:last-child {
margin-right: 0;
}
}
.navbar-nav {
> li > a {
color: @navbar-default-link-color-website-redesign;
// border: 2px solid transparent;
font-size: @navbar-btn-font-size; // TODO
font-weight: @navbar-btn-font-weight; // TODO
line-height: @navbar-btn-line-height; // TODO
background-color: @navbar-default-link-bg; // TODO
&:hover,
&:focus {
color: #fff;
background-color: @navbar-default-link-hover-bg; // TODO
// border: 2px solid @navbar-default-link-hover-color; // TODO
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color; // TODO
background-color: @navbar-default-link-active-bg; // TODO
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color; // TODO
background-color: @navbar-default-link-disabled-bg; // TODO
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-btn-border-radius;
padding: @navbar-btn-padding;
}
}
@@ -674,6 +671,109 @@
padding: @navbar-subdued-padding;
}
}
> li.primary > a {
.btn-borderless();
}
> li.secondary > a {
.btn-bordered();
border-width: @border-radius-small;
border-color: transparent;
@media (min-width: @grid-float-breakpoint) {
border-color: @btn-bordered-border-color;
}
}
}
.navbar-toggle {
border-color: @navbar-default-toggle-border-color-website-redesign;
color: @navbar-default-link-color-website-redesign;
&:hover,
&.active {
background-color: @navbar-default-toggle-hover-bg-website-redesign;
border-color: @navbar-default-toggle-hover-bg-website-redesign;
color: #fff;
}
}
.navbar-collapse {
// Use absolute positioning to build the hamburger menu.
background-color: @navbar-default-bg-website-redesign;
border-bottom: solid 1px @navbar-default-border;
}
// Dropdown menu items
.navbar-nav {
.dropdown-menu-button,
.dropdown-menu > li > a {
&:hover,
&:focus {
background-color: @navbar-default-link-active-bg-website-redesign;
}
}
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @btn-secondary-hover-bg-color; // force secondary button style
color: @navbar-default-link-active-color-website-redesign;
}
}
> .open.subdued > a {
&,
&:hover,
&:focus {
color: @navbar-subdued-hover-color-website-redesign;
background-color: @navbar-subdued-hover-bg-website-redesign;
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
background-color: darken(@navbar-default-bg-website-redesign, 5%);
> li > div.subdued {
color: mix(
@navbar-default-link-color-website-redesign,
@navbar-default-bg-website-redesign
);
}
> li > a,
> li > form > button {
// padding: 12px 12px 13px 30px;
color: @navbar-default-link-color-website-redesign;
&:hover,
&:focus {
color: #fff;
background-color: @navbar-default-link-hover-bg-website-redesign;
}
}
> .active > a,
> .active > form > button {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color-website-redesign;
background-color: @navbar-default-link-active-bg-website-redesign;
}
}
> .disabled > a,
> .disabled > form > button {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color-website-redesign;
background-color: @navbar-default-link-disabled-bg;
}
}
}
}
}
}
}
services/web/frontend/stylesheets/variables/all.less
+8 -2
View File
@@ -400,9 +400,13 @@
@navbar-default-link-border-color: @navbar-default-link-color;
@navbar-default-link-hover-color: @green;
@navbar-default-link-hover-bg: @green;
@navbar-default-link-hover-bg-website-redesign: @neutral-90;
@navbar-default-link-active-color: #fff;
@navbar-default-link-active-color-website-redesign: @neutral-90;
@navbar-default-link-active-bg: @green;
@navbar-default-link-active-bg-website-redesign: @neutral-90;
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-color-website-redesign: @neutral-80;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@@ -412,7 +416,9 @@
// Navbar toggle
@navbar-default-toggle-hover-bg: @link-hover-color;
@navbar-default-toggle-hover-bg-website-redesign: @neutral-90;
@navbar-default-toggle-border-color: @link-color;
@navbar-default-toggle-border-color-website-redesign: @neutral-90;
//== Navs
//
@@ -765,9 +771,9 @@
@navbar-subdued-hover-bg: #fff;
@navbar-subdued-hover-bg-website-redesign: @neutral-90;
@navbar-subdued-hover-color: @green;
@navbar-subdued-hover-color-website-redesign: @green; // TODO
@navbar-subdued-hover-color-website-redesign: #fff;
@navbar-brand-image-url: url(../../../public/img/ol-brand/overleaf-white.svg);
@navbar-brand-image-url-website-redesign: url(../../../public/img/ol-brand/overleaf.svg);
@navbar-brand-image-url-website-redesign: url(../../../public/img/ol-brand/overleaf-black.svg);
@dropdown-divider-margin: 6px;
@dropdown-item-padding: 4px 20px;