Add .nav-pills styling for v2

This commit is contained in:
Jessica Lawshe 2018-08-27 09:59:09 -05:00
parent a2a98e0be1
commit bc89d8fb11
5 changed files with 24 additions and 2 deletions

View file

@ -0,0 +1,7 @@
.nav-pills {
> li {
> a {
border-radius: @btn-border-radius-base;
}
}
}

View file

@ -123,8 +123,14 @@
// Links rendered as pills
> a {
border-radius: @nav-pills-border-radius;
border: 2px solid @link-color;
border: 2px solid @nav-pills-link-color;
color: @nav-pills-link-color;
padding: 8px 13px;
&:hover,
&:focus {
background-color: @nav-pills-link-hover-bg;
border: 2px solid @nav-pills-link-hover-bg;
}
}
+ li {
margin-left: 2px;
@ -136,6 +142,7 @@
&:hover,
&:focus {
color: @nav-pills-active-link-hover-color;
border: 2px solid @nav-pills-active-link-hover-bg;
background-color: @nav-pills-active-link-hover-bg;
}
}
@ -247,4 +254,4 @@
margin-top: -1px;
// Remove the top rounded corners here since there is a hard edge above the menu
.border-top-radius(0);
}
}

View file

@ -370,6 +370,9 @@
@nav-tabs-justified-active-link-border-color: @body-bg;
//== Pills
@nav-pills-link-color: @link-color;
@nav-pills-link-hover-color: @nav-link-hover-bg;
@nav-pills-link-hover-bg: @nav-link-hover-bg;
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color;

View file

@ -34,6 +34,10 @@
@navbar-default-border : transparent;
@navbar-brand-image-url : url(/img/ol-brand/overleaf-white.svg);
@navbar-default-link-bg : transparent;
@nav-pills-active-link-hover-bg: @ol-dark-green;
@nav-pills-link-color : @btn-default-bg;
@nav-pills-link-hover-bg : darken(@ol-blue-gray-4, 8%); // match button-variant mixin
// Backgrounds
@body-bg : #FFF;
@content-alt-bg-color : @ol-blue-gray-1;

View file

@ -8,6 +8,7 @@
@import "_ol_style_includes.less";
@import "components/embed-responsive.less";
@import "components/icons.less";
@import "components/navs-ol.less";
@import "components/pagination.less";
// Pages