Remove 15px as font-size && minor changes (feedback included)

pull/6492/head
Henriette Dinger 6 years ago
parent 2a4d821c1d
commit 97a43937d9
  1. 3
      app/assets/stylesheets/content/menus/_project_autocompletion.sass
  2. 4
      app/assets/stylesheets/fonts/_openproject_icon_font.sass
  3. 16
      app/assets/stylesheets/layout/_main_menu.sass
  4. 2
      app/assets/stylesheets/layout/_top_menu.sass
  5. 1
      app/assets/stylesheets/layout/_top_menu_mobile.sass
  6. 19
      app/assets/stylesheets/layout/work_packages/_query_menu.sass
  7. 2
      lib/open_project/design.rb

@ -14,7 +14,7 @@
@include default-font($header-drop-down-projects-search-font-color, 13px) @include default-font($header-drop-down-projects-search-font-color, 13px)
li li
padding: 0 10px padding: 0 10px
font-size: 15px font-size: 14px
.select2-search .select2-search
margin: 1px 0 0 0 margin: 1px 0 0 0
@ -53,6 +53,7 @@
margin: 0 10px margin: 0 10px
padding: 0px 32px 0px 10px padding: 0px 32px 0px 10px
border: 1px solid #D9D9D9 border: 1px solid #D9D9D9
border-radius: 3px
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.1) box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.1)
box-sizing: border-box box-sizing: border-box
width: calc(100% - 20px) width: calc(100% - 20px)

@ -75,13 +75,13 @@
@mixin icon-action-menu-rules @mixin icon-action-menu-rules
padding: 0 10px 0 0 padding: 0 10px 0 0
font-size: 15px font-size: 14px
line-height: 5px line-height: 5px
@mixin icon-sub-menu-rules @mixin icon-sub-menu-rules
padding: 0 padding: 0
float: right float: right
font-size: 15px font-size: 14px
line-height: 5px line-height: 5px
vertical-align: -40% vertical-align: -40%

@ -150,7 +150,7 @@ $arrow-left-width: 40px
&:hover &:hover
@include varprop(background, main-menu-bg-hover-background) @include varprop(background, main-menu-bg-hover-background)
&:hover &:hover, &:focus , &:active
@include varprop(background, main-menu-bg-hover-background) @include varprop(background, main-menu-bg-hover-background)
@include varprop(color, main-menu-hover-font-color) @include varprop(color, main-menu-hover-font-color)
@ -193,7 +193,7 @@ $arrow-left-width: 40px
&.selected, &.selected &.selected, &.selected
@include varprop(background, main-menu-bg-selected-background) @include varprop(background, main-menu-bg-selected-background)
@include varprop(color, main-menu-selected-font-color) @include varprop(color, main-menu-selected-font-color)
&:hover &:hover, &:focus , &:active
@include varprop(color, main-menu-hover-font-color) @include varprop(color, main-menu-hover-font-color)
@include varprop(background, main-menu-child-bg-hover-color) @include varprop(background, main-menu-child-bg-hover-color)
@ -211,21 +211,21 @@ $arrow-left-width: 40px
padding-left: 14px padding-left: 14px
padding-right: 14px padding-right: 14px
width: 40px width: 40px
&:hover &:hover, &:focus, &:active
@include varprop(background, main-menu-bg-hover-background) @include varprop(background, main-menu-bg-hover-background)
@include varprop(color, main-menu-hover-font-color) @include varprop(color, main-menu-hover-font-color)
a.main-menu--parent-node a.main-menu--parent-node
display: inline-block display: inline-block
padding: 0px 11px 0 11px padding: 0px 11px 0 11px
font-size: 15px font-size: $main-menu-font-size
font-weight: 700 font-weight: 700
width: calc(100% - #{$arrow-left-width}) width: calc(100% - #{$arrow-left-width})
height: $main-menu-item-height height: $main-menu-item-height
line-height: $main-menu-item-height line-height: $main-menu-item-height
border-radius: 3px border-radius: 3px
@include varprop(color, main-menu-font-color) @include varprop(color, main-menu-font-color)
&:hover &:hover, &:focus, &:active
@include varprop(background, main-menu-bg-hover-background) @include varprop(background, main-menu-bg-hover-background)
@include varprop(color, main-menu-hover-font-color) @include varprop(color, main-menu-hover-font-color)
@ -330,10 +330,10 @@ a.main-menu--parent-node
padding-right: 7px padding-right: 7px
.main-menu--segment-header .main-menu--segment-header
color: $gray-dark @include varprop(color, content-icon-link-pressed-color)
text-transform: uppercase text-transform: uppercase
padding-left: $hierarchy-span-width padding-left: $hierarchy-span-width
font-size: 0.8rem font-size: 0.7rem
.main-menu--resizer .main-menu--resizer
background: none background: none
@ -355,7 +355,6 @@ a.main-menu--parent-node
@include varprop(border-left-color, main-menu-resizer-color) @include varprop(border-left-color, main-menu-resizer-color)
.main-menu--navigation-toggler .main-menu--navigation-toggler
opacity: 1 opacity: 1
font-size: 11px
i:before i:before
@include varprop(color, main-menu-navigation-toggler-font-hover-color) @include varprop(color, main-menu-navigation-toggler-font-hover-color)
@ -381,7 +380,6 @@ a.main-menu--parent-node
margin-top: 50vh margin-top: 50vh
margin-left: -14px margin-left: -14px
padding: 0 padding: 0
font-size: 14px
// Center toggle icon vertically. The element is higher than it looks like. // Center toggle icon vertically. The element is higher than it looks like.
line-height: 38px line-height: 38px
i i

@ -36,7 +36,7 @@ $hamburger-width: 50px
left: calc(50% - 230px / 2) left: calc(50% - 230px / 2)
.home-link .home-link
margin-top: 14px margin-top: 15px
display: block display: block
background: $header-home-link-bg background: $header-home-link-bg
background-size: 140px background-size: 140px

@ -105,7 +105,6 @@
#account-nav-left #account-nav-left
#projects-menu #projects-menu
font-size: 15px
.button--dropdown-text .button--dropdown-text
// Viewport minus #account-nav-right when logged out, which is // Viewport minus #account-nav-right when logged out, which is
// 165px, as this is the space for the long login text label: "Connexion" (French). // 165px, as this is the space for the long login text label: "Connexion" (French).

@ -46,10 +46,12 @@ $wp-query-menu-search-container-height: 35px
display: inline-block display: inline-block
width: 100% width: 100%
white-space: normal white-space: normal
font-size: $main-menu-font-size
.wp-query-menu--search-container .wp-query-menu--search-container
padding-top: 15px padding-top: 15px
overflow: hidden overflow: hidden
@include varprop(color, main-menu-font-color)
// Specific fix for Firefox // Specific fix for Firefox
body.-browser-firefox & body.-browser-firefox &
@ -131,29 +133,30 @@ $wp-query-menu-search-container-height: 35px
line-height: 30px line-height: 30px
height: 30px !important height: 30px !important
&:hover, &:focus &:hover, &:focus, &:active
@include varprop(background, main-menu-bg-hover-background) @include varprop(background, main-menu-bg-hover-background)
// Rule complexed for specificity issues // Rule complexed for specificity issues
input[type="text"].wp-query-menu--search-input input[type="text"].wp-query-menu--search-input
box-sizing: border-box @include varprop(color, main-menu-font-color)
margin: 0px auto
width: 100% width: 100%
height: 35px height: 35px
line-height: $menu-item-line-height border: 1px solid $main-menu-border-color
border: 0px solid
border-radius: 3px border-radius: 3px
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15) box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15)
background-color: rgba(255, 255, 255, 0.1) background-color: rgba(0, 0, 0, 0.15)
color: rgba(255, 255, 255, 0.5)
padding: 0px 30px 0px 10px padding: 0px 30px 0px 10px
// Hide the little x to remove input where exists + supported // Hide the little x to remove input where exists + supported
&::-webkit-search-cancel-button &::-webkit-search-cancel-button
display: none display: none
&::placeholder
@include varprop(color, main-menu-font-color)
opacity: 0.5
.wp-query-menu--search-icon .wp-query-menu--search-icon
position: absolute position: absolute
top: 5px top: 5px
right: 10px right: 10px
color: #999999 @include varprop(color, main-menu-font-color)
opacity: 0.5

@ -92,7 +92,7 @@ module OpenProject
'main-menu-hover-font-color' => "$main-menu-font-color", 'main-menu-hover-font-color' => "$main-menu-font-color",
'main-menu-resizer-color' => "$primary-color", 'main-menu-resizer-color' => "$primary-color",
'main-menu-selected-font-color' => "$main-menu-font-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-selected-indicator-color' => "#E0E0E0",
'main-menu-hover-indicator-color' => "$primary-color-dark", 'main-menu-hover-indicator-color' => "$primary-color-dark",
'main-menu-selected-hover-indicator-width' => "4px", 'main-menu-selected-hover-indicator-width' => "4px",

Loading…
Cancel
Save