From 1821bb6b7dabe4adb3fa919d7ebf498593269fac Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Thu, 6 Sep 2018 12:11:10 +0200 Subject: [PATCH] CSS general cleanup and minor style tweaks --- src/styles/_config.sass | 2 +- src/styles/_organizations.sass | 13 ---------- src/styles/_project-dashboard.sass | 6 ----- src/styles/_project.sass | 35 +++++++++------------------ src/styles/_utils.sass | 8 ++++++ src/styles/components/_jumbotron.sass | 4 +-- src/styles/components/_navbar.sass | 16 ++++++------ 7 files changed, 31 insertions(+), 53 deletions(-) diff --git a/src/styles/_config.sass b/src/styles/_config.sass index f0f1f1f7..38fe2bd1 100644 --- a/src/styles/_config.sass +++ b/src/styles/_config.sass @@ -100,7 +100,7 @@ $sidebar-width: 50px !default /* Project specifics */ $project_nav-width: 250px !default -$project-sidebar-width: 50px !default +$project-sidebar-width: 40px !default $project_header-height: 37px !default $project_footer-height: 30px !default diff --git a/src/styles/_organizations.sass b/src/styles/_organizations.sass index f3b82eb0..b5af8501 100644 --- a/src/styles/_organizations.sass +++ b/src/styles/_organizations.sass @@ -1,17 +1,4 @@ body.organizations - ul#sub-nav-tabs__list - align-items: center - display: flex - - li.result - padding: 10px 20px - - .dashboard-secondary - .box - +container-box - padding: 10px 20px - margin: 0 - #item-details .organization label diff --git a/src/styles/_project-dashboard.sass b/src/styles/_project-dashboard.sass index f63b1b50..c11b6d9c 100644 --- a/src/styles/_project-dashboard.sass +++ b/src/styles/_project-dashboard.sass @@ -1,22 +1,16 @@ - .dashboard-container section#home, section#projects - background-color: $color-background border-bottom-left-radius: 3px border-bottom-right-radius: 3px nav#sub-nav-tabs.home, nav#sub-nav-tabs.projects - background-color: white border-bottom: thin solid $color-background-dark li.nav-tabs__list-tab padding: 15px 20px 10px 20px - section#home - background-color: $color-background-dark - nav.nav-tabs__tab display: none background-color: $color-background-light diff --git a/src/styles/_project.sass b/src/styles/_project.sass index 822380ca..bd1a80d6 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -40,10 +40,6 @@ body.blog width: 100% left: 0 -#project_context-header - span#status-bar - text-align: left - #project_nav-container +media-lg width: $project_nav-width * 1.33 @@ -62,6 +58,7 @@ body.blog #project_sidebar width: $project-sidebar-width z-index: $z-index-base + 6 + box-shadow: inset -1px 0 0 0 $color-background +media-xs width: 100% @@ -95,30 +92,21 @@ body.blog &:first-child border-top: thin solid transparent - &:hover - background-color: $primary + &:hover, + &.active cursor: pointer a - color: $white + color: $primary a align-items: center + color: $color-text display: flex justify-content: center height: $project-sidebar-width width: $project-sidebar-width - i - font-size: 1.1em - - &.active - background-color: $primary - color: $white - - a - color: $white - &.tabs-thumbnail img height: $project-sidebar-width @@ -176,13 +164,16 @@ body.blog height: $project_header-height min-height: $project_header-height position: fixed - top: $project_header-height + top: $project_header-height + 1 transition: box-shadow 250ms ease-in-out z-index: $z-index-base + 3 &.is-offset box-shadow: 0 0 25px rgba(black, .2) + span#status-bar + text-align: left + #project_nav-header left: 0 position: absolute @@ -432,8 +423,8 @@ ul.project_nav-edit-list padding-top: $project_header-height #node-container - flex: 1 background-color: white + flex: 1 /* For error messages (403) and other overlaid text*/ #node-overlay @@ -466,8 +457,7 @@ ul.project_nav-edit-list +media-xs margin-top: 0 - border-right: thin solid $color-background - margin-top: $project_header-height //so it's right below the project title. + // margin-top: $project_header-height //so it's right below the project title. overflow-y: auto // show vertical scrollbars when needed. padding: 0 0 5px 0 // some padding on top/bottom of jstree. position: relative @@ -816,6 +806,7 @@ section.node-preview-forbidden justify-content: center min-height: 400px position: relative + overflow: hidden img height: 130% @@ -1243,8 +1234,6 @@ a.learn-more section.node-children - background-color: white - &.group, &.storage flex: 1 padding: 10px 0 25px 20px diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass index 3bdf374c..be5af072 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -666,3 +666,11 @@ .user-select-none user-select: none + +// Bootstrap has .img-fluid, a class to limit the width of an image to 100%. +// .imgs-fluid below is to be applied on a parent container when we can't add +// classes to the images themselves. e.g. the blog. +.imgs-fluid + img + // Just re-use Bootstrap's mixin here. + +img-fluid diff --git a/src/styles/components/_jumbotron.sass b/src/styles/components/_jumbotron.sass index 985ed80d..ffa1a735 100644 --- a/src/styles/components/_jumbotron.sass +++ b/src/styles/components/_jumbotron.sass @@ -2,8 +2,8 @@ .jumbotron background-size: cover border-radius: 0 - padding-top: 12em - padding-bottom: 12em + padding-top: 10em + padding-bottom: 10em // Black-transparent gradient from left to right to better read the overlay text. &.jumbotron-overlay diff --git a/src/styles/components/_navbar.sass b/src/styles/components/_navbar.sass index ee13a1d5..a339ccf9 100644 --- a/src/styles/components/_navbar.sass +++ b/src/styles/components/_navbar.sass @@ -1,4 +1,8 @@ // Navigation. + +.navbar + box-shadow: inset 0 -2px $color-background + .navbar, nav.sidebar border: none @@ -39,10 +43,6 @@ nav.sidebar color: $primary box-shadow: inset 0 -3px 0 $primary - .pi-angle-down - position: relative - left: 5px - li user-select: none position: relative @@ -130,15 +130,16 @@ nav.sidebar // Secondary navigation for .nav-secondary align-items: center - box-shadow: 0 2px 0 0 $color-background + box-shadow: inset 0 -2px 0 0 $color-background .nav-link color: $color-text + cursor: pointer transition: box-shadow 150ms ease-in-out &:hover, &.active - box-shadow: 0 2px 0 0 $primary + box-shadow: inset 0 -2px 0 0 $primary .navbar-overlay @@ -160,9 +161,8 @@ nav.sidebar text-shadow: none .navbar-brand - padding-left: 10px color: inherit - width: 120px // Blender Cloud logo width + padding-left: 4px &:hover color: $primary