diff --git a/services/web/app/views/project/list/side-bar.pug b/services/web/app/views/project/list/side-bar.pug index 93eeb46125..570372001f 100644 --- a/services/web/app/views/project/list/side-bar.pug +++ b/services/web/app/views/project/list/side-bar.pug @@ -45,7 +45,7 @@ a(href) #{translate("shared_with_you")} li(ng-class="{active: (filter == 'archived')}", ng-click="filterProjects('archived')") a(href) #{translate("deleted_projects")} - li + li.separator h2 #{translate("folders")} li.tag( ng-repeat="tag in tags | orderBy:'name'", diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less index e5f4a9caff..3dd793a167 100644 --- a/services/web/public/stylesheets/app/project-list.less +++ b/services/web/public/stylesheets/app/project-list.less @@ -95,19 +95,21 @@ ul.folders-menu { } > li { cursor: pointer; - line-height: 1.8; position: relative; > a { + line-height: @folders-menu-line-height; display: block; - font-size: 0.9rem; color: @sidebar-link-color; - padding: (@line-height-computed / 4) (@grid-gutter-width / 2); - line-height: 1.2; + padding: @folders-menu-item-v-padding (@grid-gutter-width / 2); + border-bottom: solid 1px transparent; &:hover { background-color: @sidebar-hover-bg; text-decoration: @sidebar-hover-text-decoration; } } + &.separator { + cursor: auto; + } } > li.active { //border-right: 4px solid @red; @@ -125,10 +127,14 @@ ul.folders-menu { color: @gray; } h2 { - margin-top: @line-height-computed / 2; - margin-bottom: @line-height-computed / 4; - font-size: @font-size-base; - font-weight: 500; + margin-top: @folders-title-margin-top; + margin-bottom: @folders-title-margin-bottom; + font-size: @folders-title-font-size; + color: @folders-title-color; + line-height: @folders-title-line-height; + text-transform: @folders-title-text-transform; + padding: @folders-menu-item-v-padding (@grid-gutter-width / 2); + font-weight: @folders-title-font-weight; font-family: @font-family-sans-serif; } > li.tag { @@ -137,7 +143,7 @@ ul.folders-menu { color: white; border-color: white; &:hover { - background-color: darken(@brand-primary, 10%); + background-color: @folders-tag-menu-active-hover; } } } @@ -145,7 +151,7 @@ ul.folders-menu { font-style: italic; margin-bottom: @line-height-computed / 4; a { - line-height: 1.7; + line-height: @folders-untagged-line-height; &:hover, &:focus { text-decoration: none; @@ -157,7 +163,7 @@ ul.folders-menu { } &:hover { &:not(.active) { - background-color: darken(@gray-lightest, 2%); + background-color: @folders-tag-hover; } .tag-menu { display: block @@ -165,30 +171,30 @@ ul.folders-menu { } &:not(.active) { .tag-menu > a:hover { - background-color: @gray-light; + background-color: @folders-tag-menu-hover; } } a.tag-name { - padding: 2px (@line-height-computed / 4); - margin-right: 18px; - display: inline-block; + padding: @folders-tag-padding; + margin-right: @folders-tag-margin-right; + display: @folders-tag-display; position: relative; i { - position: absolute; + position: @folders-tag-icon-position; top: 5px; left: 6px; } span.name { display: inline-block; - padding-left: 22px; + padding-left: @folders-tag-spacing; line-height: 1.4; } } .tag-menu { > a { - border: 1px solid @gray; + border: 1px solid @folders-tag-border-color; border-radius: @border-radius-small; - color: @text-color; + color: @folders-tag-menu-color; display: block; width: 16px; height: 16px; @@ -201,7 +207,8 @@ ul.folders-menu { } display: none; position: absolute; - top: 6px; + top: 50%; + margin-top: -8px; // Half the element height. right: 4px; &.open { display: block; @@ -272,7 +279,7 @@ ul.structured-list { ul.project-list { li { - line-height: 3; + line-height: @structured-list-line-height; padding: 0; // .last-modified, .owner { // font-size: .8rem; diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 75a57c5e7f..723c7d4145 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -825,6 +825,28 @@ @sidebar-hover-bg: transparent; @sidebar-hover-text-decoration: underline; +@structured-list-line-height: inherit; +@folders-menu-line-height: 1.8; +@folders-menu-item-v-padding: (@line-height-computed / 4); +@folders-title-margin-top: @line-height-computed / 2; +@folders-title-margin-bottom: @line-height-computed / 4; +@folders-title-font-size: @font-size-base; +@folders-title-font-weight: 500; +@folders-title-line-height: @headings-line-height; +@folders-title-color: inherit; +@folders-title-text-transform: none; +@folders-tag-icon-position: absolute; +@folders-tag-padding: 2px (@line-height-computed / 4); +@folders-tag-spacing: 22px; +@folders-tag-display: inline-block; +@folders-tag-margin-right: 18px; +@folders-tag-menu-color: @gray; +@folders-tag-hover: darken(@gray-lightest, 2%); +@folders-tag-border-color: @text-color; +@folders-tag-menu-active-hover: darken(@brand-primary, 10%); +@folders-tag-menu-hover: @gray-light; +@folders-untagged-line-height: 1.7; + @btn-border-width: 1px; @btn-border-bottom-width: 2px; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 6946a697f3..a788e51998 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -80,18 +80,18 @@ // Forms @input-border-radius : unit(@line-height-base, em); -@input-height-base : @line-height-computed + (@padding-base-vertical * 2); +@input-height-base : @line-height-computed + (@padding-base-vertical * 2) - 1; // TODO Warning color-orange? -@btn-warning-color : #FFF; -@btn-warning-bg : @ol-red; -@btn-warning-border : transparent; +@btn-warning-color : #FFF; +@btn-warning-bg : @ol-red; +@btn-warning-border : transparent; -@btn-danger-color : #FFF; -@btn-danger-bg : @ol-red; -@btn-danger-border : transparent; +@btn-danger-color : #FFF; +@btn-danger-bg : @ol-red; +@btn-danger-border : transparent; // Cards -@card-box-shadow : none; +@card-box-shadow : none; // Sidebar @sidebar-bg : @ol-blue-gray-5; @@ -107,6 +107,27 @@ @structured-list-border-color : @ol-blue-gray-1; @structured-list-hover-color : lighten(@ol-blue-gray-1, 5%); +@structured-list-line-height : 2.5; +@folders-menu-line-height : @structured-list-line-height; +@folders-menu-item-v-padding : 0; +@folders-title-margin-top : 0; +@folders-title-margin-bottom : 0; +@folders-title-font-weight : normal; +@folders-title-font-size : @font-size-small; +@folders-title-line-height : unit((@font-size-base / @font-size-small) * @folders-menu-line-height); +@folders-title-color : @ol-blue-gray-3; +@folders-title-text-transform : uppercase; +@folders-tag-display : block; +@folders-tag-margin-right : 0; +@folders-tag-icon-position : static; +@folders-tag-padding : @folders-menu-item-v-padding (@grid-gutter-width / 2); +@folders-tag-spacing : 0.5em; +@folders-tag-menu-color : #FFF; +@folders-tag-hover : @sidebar-hover-bg; +@folders-tag-border-color : @folders-tag-menu-color; +@folders-tag-menu-hover : rgba(0, 0, 0, .1); +@folders-tag-menu-active-hover : rgba(0, 0, 0, .1); +@folders-untagged-line-height : @folders-menu-line-height; //== Colors // //## Gray and brand colors for use across Bootstrap.