From 97a43937d9987e3b9d3217f6534244085de47789 Mon Sep 17 00:00:00 2001 From: Henriette Dinger Date: Fri, 17 Aug 2018 16:12:39 +0200 Subject: [PATCH] Remove 15px as font-size && minor changes (feedback included) --- .../menus/_project_autocompletion.sass | 3 ++- .../fonts/_openproject_icon_font.sass | 4 ++-- app/assets/stylesheets/layout/_main_menu.sass | 16 +++++++--------- app/assets/stylesheets/layout/_top_menu.sass | 2 +- .../stylesheets/layout/_top_menu_mobile.sass | 1 - .../layout/work_packages/_query_menu.sass | 19 +++++++++++-------- lib/open_project/design.rb | 2 +- 7 files changed, 24 insertions(+), 23 deletions(-) diff --git a/app/assets/stylesheets/content/menus/_project_autocompletion.sass b/app/assets/stylesheets/content/menus/_project_autocompletion.sass index b13e6dcddc..106210d9c5 100644 --- a/app/assets/stylesheets/content/menus/_project_autocompletion.sass +++ b/app/assets/stylesheets/content/menus/_project_autocompletion.sass @@ -14,7 +14,7 @@ @include default-font($header-drop-down-projects-search-font-color, 13px) li padding: 0 10px - font-size: 15px + font-size: 14px .select2-search margin: 1px 0 0 0 @@ -53,6 +53,7 @@ margin: 0 10px padding: 0px 32px 0px 10px border: 1px solid #D9D9D9 + border-radius: 3px box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.1) box-sizing: border-box width: calc(100% - 20px) diff --git a/app/assets/stylesheets/fonts/_openproject_icon_font.sass b/app/assets/stylesheets/fonts/_openproject_icon_font.sass index ce15be9ea4..52764206cd 100644 --- a/app/assets/stylesheets/fonts/_openproject_icon_font.sass +++ b/app/assets/stylesheets/fonts/_openproject_icon_font.sass @@ -75,13 +75,13 @@ @mixin icon-action-menu-rules padding: 0 10px 0 0 - font-size: 15px + font-size: 14px line-height: 5px @mixin icon-sub-menu-rules padding: 0 float: right - font-size: 15px + font-size: 14px line-height: 5px vertical-align: -40% diff --git a/app/assets/stylesheets/layout/_main_menu.sass b/app/assets/stylesheets/layout/_main_menu.sass index 130acb206d..66ec9cb1c3 100644 --- a/app/assets/stylesheets/layout/_main_menu.sass +++ b/app/assets/stylesheets/layout/_main_menu.sass @@ -150,7 +150,7 @@ $arrow-left-width: 40px &:hover @include varprop(background, main-menu-bg-hover-background) - &:hover + &:hover, &:focus , &:active @include varprop(background, main-menu-bg-hover-background) @include varprop(color, main-menu-hover-font-color) @@ -193,7 +193,7 @@ $arrow-left-width: 40px &.selected, &.selected @include varprop(background, main-menu-bg-selected-background) @include varprop(color, main-menu-selected-font-color) - &:hover + &:hover, &:focus , &:active @include varprop(color, main-menu-hover-font-color) @include varprop(background, main-menu-child-bg-hover-color) @@ -211,21 +211,21 @@ $arrow-left-width: 40px padding-left: 14px padding-right: 14px width: 40px - &:hover + &:hover, &:focus, &:active @include varprop(background, main-menu-bg-hover-background) @include varprop(color, main-menu-hover-font-color) a.main-menu--parent-node display: inline-block padding: 0px 11px 0 11px - font-size: 15px + font-size: $main-menu-font-size font-weight: 700 width: calc(100% - #{$arrow-left-width}) height: $main-menu-item-height line-height: $main-menu-item-height border-radius: 3px @include varprop(color, main-menu-font-color) - &:hover + &:hover, &:focus, &:active @include varprop(background, main-menu-bg-hover-background) @include varprop(color, main-menu-hover-font-color) @@ -330,10 +330,10 @@ a.main-menu--parent-node padding-right: 7px .main-menu--segment-header - color: $gray-dark + @include varprop(color, content-icon-link-pressed-color) text-transform: uppercase padding-left: $hierarchy-span-width - font-size: 0.8rem + font-size: 0.7rem .main-menu--resizer background: none @@ -355,7 +355,6 @@ a.main-menu--parent-node @include varprop(border-left-color, main-menu-resizer-color) .main-menu--navigation-toggler opacity: 1 - font-size: 11px i:before @include varprop(color, main-menu-navigation-toggler-font-hover-color) @@ -381,7 +380,6 @@ a.main-menu--parent-node margin-top: 50vh margin-left: -14px padding: 0 - font-size: 14px // Center toggle icon vertically. The element is higher than it looks like. line-height: 38px i diff --git a/app/assets/stylesheets/layout/_top_menu.sass b/app/assets/stylesheets/layout/_top_menu.sass index ea5f1918d2..131a41d53c 100644 --- a/app/assets/stylesheets/layout/_top_menu.sass +++ b/app/assets/stylesheets/layout/_top_menu.sass @@ -36,7 +36,7 @@ $hamburger-width: 50px left: calc(50% - 230px / 2) .home-link - margin-top: 14px + margin-top: 15px display: block background: $header-home-link-bg background-size: 140px diff --git a/app/assets/stylesheets/layout/_top_menu_mobile.sass b/app/assets/stylesheets/layout/_top_menu_mobile.sass index f9196d10bb..19aa11f327 100644 --- a/app/assets/stylesheets/layout/_top_menu_mobile.sass +++ b/app/assets/stylesheets/layout/_top_menu_mobile.sass @@ -105,7 +105,6 @@ #account-nav-left #projects-menu - font-size: 15px .button--dropdown-text // Viewport minus #account-nav-right when logged out, which is // 165px, as this is the space for the long login text label: "Connexion" (French). diff --git a/app/assets/stylesheets/layout/work_packages/_query_menu.sass b/app/assets/stylesheets/layout/work_packages/_query_menu.sass index 8204b8ceaf..e1829d0558 100644 --- a/app/assets/stylesheets/layout/work_packages/_query_menu.sass +++ b/app/assets/stylesheets/layout/work_packages/_query_menu.sass @@ -46,10 +46,12 @@ $wp-query-menu-search-container-height: 35px display: inline-block width: 100% white-space: normal + font-size: $main-menu-font-size .wp-query-menu--search-container padding-top: 15px overflow: hidden + @include varprop(color, main-menu-font-color) // Specific fix for Firefox body.-browser-firefox & @@ -131,29 +133,30 @@ $wp-query-menu-search-container-height: 35px line-height: 30px height: 30px !important - &:hover, &:focus + &:hover, &:focus, &:active @include varprop(background, main-menu-bg-hover-background) // Rule complexed for specificity issues input[type="text"].wp-query-menu--search-input - box-sizing: border-box - margin: 0px auto + @include varprop(color, main-menu-font-color) width: 100% height: 35px - line-height: $menu-item-line-height - border: 0px solid + border: 1px solid $main-menu-border-color border-radius: 3px box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15) - background-color: rgba(255, 255, 255, 0.1) - color: rgba(255, 255, 255, 0.5) + background-color: rgba(0, 0, 0, 0.15) padding: 0px 30px 0px 10px // Hide the little x to remove input where exists + supported &::-webkit-search-cancel-button display: none + &::placeholder + @include varprop(color, main-menu-font-color) + opacity: 0.5 .wp-query-menu--search-icon position: absolute top: 5px right: 10px - color: #999999 + @include varprop(color, main-menu-font-color) + opacity: 0.5 diff --git a/lib/open_project/design.rb b/lib/open_project/design.rb index 6e3844e7e3..cd5057bd51 100644 --- a/lib/open_project/design.rb +++ b/lib/open_project/design.rb @@ -92,7 +92,7 @@ module OpenProject 'main-menu-hover-font-color' => "$main-menu-font-color", 'main-menu-resizer-color' => "$primary-color", 'main-menu-selected-font-color' => "$main-menu-font-color", - 'main-menu-font-size' => "15px", + 'main-menu-font-size' => "14px", 'main-menu-selected-indicator-color' => "#E0E0E0", 'main-menu-hover-indicator-color' => "$primary-color-dark", 'main-menu-selected-hover-indicator-width' => "4px",