From 55cd6b190be7e39fc07e3e70cbef07209d238bd4 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Wed, 22 Nov 2017 11:45:09 +0100 Subject: [PATCH] Apply skin colors to buttons, and other small improvements --- skins/elastic/styles/colors.less | 14 ++++- skins/elastic/styles/widgets/buttons.less | 65 ++++++++++++++++++++++ skins/elastic/styles/widgets/forms.less | 4 +- skins/elastic/styles/widgets/jqueryui.less | 10 +++- skins/elastic/styles/widgets/taskmenu.less | 27 +++++---- 5 files changed, 101 insertions(+), 19 deletions(-) diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less index b1fd4e3d9..cfdb3f8ef 100644 --- a/skins/elastic/styles/colors.less +++ b/skins/elastic/styles/colors.less @@ -44,7 +44,7 @@ @color-taskmenu-button-background-hover: lighten(@color-taskmenu-background, 10%); @color-taskmenu-button-action-background-hover: lighten(@color-taskmenu-button-action-background, 10%); @color-taskmenu-button-special-background-hover:lighten(@color-taskmenu-button-special-background, 10%); -@color-taskmenu-button-logout-hover: #ff1a1a; +@color-taskmenu-button-logout-hover: @color-error; // Toolbar @@ -56,14 +56,14 @@ // Toolbar menu @color-toolbarmenu-hover: #fff; -@color-toolbarmenu-hover-background: darken(@color-main, 20%); +@color-toolbarmenu-hover-background: @color-main; // Listings @color-list: @color-font; @color-list-selected: inherit; @color-list-selected-background: tint(@color-main, 96%); -@color-list-flagged: #ff5c33; +@color-list-flagged: @color-error; @color-list-deleted: #ccc; @color-list-secondary: #666; @color-list-droptarget-background: #ffffcc; @@ -133,6 +133,14 @@ @color-image-upload-background: #f6f6f6; +@color-btn-secondary: #fff; +@color-btn-secondary-background: #7f8a90; +@color-btn-primary: #fff; +@color-btn-primary-background: @color-main; +@color-btn-danger: #fff; +@color-btn-danger-background: @color-error; + + @color-blockquote-background: #f6f6f6; @color-blockquote-0: blue; @color-blockquote-1: green; diff --git a/skins/elastic/styles/widgets/buttons.less b/skins/elastic/styles/widgets/buttons.less index f695d8638..c225bb71b 100644 --- a/skins/elastic/styles/widgets/buttons.less +++ b/skins/elastic/styles/widgets/buttons.less @@ -120,3 +120,68 @@ html.touch { box-shadow: none; } } + +/*** Bootstrap button style overrides ***/ + +.btn-secondary { + color: @color-btn-secondary; + background: @color-btn-secondary-background; + border-color: @color-btn-secondary-background; + + &:focus { + box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 50%); + } + + &:hover { + background: darken(@color-btn-secondary-background, 8%); + border-color: darken(@color-btn-secondary-background, 10%); + } + + &:not([disabled]):not(.disabled):active { + background: darken(@color-btn-secondary-background, 11%); + border-color: darken(@color-btn-secondary-background, 13%); + box-shadow: 0 0 0 .2rem fade(@color-btn-secondary-background, 53%); + } +} + +.btn-primary { + color: @color-btn-primary; + background: @color-btn-primary-background; + border-color: @color-btn-primary-background; + + &:focus { + box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 50%); + } + + &:hover { + background: darken(@color-btn-primary-background, 8%); + border-color: darken(@color-btn-primary-background, 10%); + } + + &:not([disabled]):not(.disabled):active { + background: darken(@color-btn-primary-background, 11%); + border-color: darken(@color-btn-primary-background, 13%); + box-shadow: 0 0 0 .2rem fade(@color-btn-primary-background, 53%); + } +} + +.btn-danger { + color: @color-btn-danger; + background: @color-btn-danger-background; + border-color: @color-btn-danger-background; + + &:focus { + box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 50%); + } + + &:hover { + background: darken(@color-btn-danger-background, 8%); + border-color: darken(@color-btn-danger-background, 10%); + } + + &:not([disabled]):not(.disabled):active { + background: darken(@color-btn-danger-background, 11%); + border-color: darken(@color-btn-danger-background, 13%); + box-shadow: 0 0 0 .2rem fade(@color-btn-danger-background, 53%); + } +} diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less index 8c00e1768..dbbaba98b 100644 --- a/skins/elastic/styles/widgets/forms.less +++ b/skins/elastic/styles/widgets/forms.less @@ -586,7 +586,9 @@ html.touch .popupmenu.form { margin: 0 !important; } - .input-group-addon { + a.input-group-addon { + padding: .375rem .5rem; + &.reset:before { &:extend(.font-icon-class); content: @fa-var-trash-o; diff --git a/skins/elastic/styles/widgets/jqueryui.less b/skins/elastic/styles/widgets/jqueryui.less index 53158f6e1..4410cd856 100644 --- a/skins/elastic/styles/widgets/jqueryui.less +++ b/skins/elastic/styles/widgets/jqueryui.less @@ -42,8 +42,6 @@ border-bottom: 1px solid @color-dialog-header-border; button { - margin-right: .25rem; - &:before { margin: 0; } @@ -64,7 +62,8 @@ right: 0; top: 0; position: absolute; - height: @layout-header-height; + height: (@layout-header-height - .7rem); + margin: .25rem; cursor: pointer; &:before { @@ -90,6 +89,11 @@ button { .overflow-ellipsis; min-width: 5rem; + margin: .65rem .3rem; + + &:last-child { + margin-right: 0; + } } } } diff --git a/skins/elastic/styles/widgets/taskmenu.less b/skins/elastic/styles/widgets/taskmenu.less index d9cef87c8..2d42d9f3d 100644 --- a/skins/elastic/styles/widgets/taskmenu.less +++ b/skins/elastic/styles/widgets/taskmenu.less @@ -16,6 +16,7 @@ height: 100%; a { + .overflow-ellipsis; text-decoration: none; padding: .45rem 0; display: block; @@ -80,6 +81,7 @@ span.inner { font-size: 90%; + padding: 0 .1em; } } @@ -150,12 +152,6 @@ } @media screen and (max-width: @screen-width-xs) { - a { - height: auto; - margin-top: 1rem; - background: transparent; - } - a, a:before { height: 2.25rem; @@ -164,6 +160,12 @@ font-size: 1.25em; } + a { + height: auto; + margin-top: 1rem; + background: transparent; + } + a:hover { background: transparent !important; } @@ -183,12 +185,6 @@ } } - @media screen and (min-width: (@screen-width-xs + 1px)) { - .menu-header { - display: none; - } - } - .menu-header { border-bottom: 1px solid @color-taskmenu-button; height: @layout-touch-header-height; @@ -206,6 +202,7 @@ line-height: @layout-touch-header-height; height: @layout-touch-header-height; width: auto; + margin-right: .25rem; } &:hover { @@ -213,4 +210,10 @@ } } } + + @media screen and (min-width: (@screen-width-xs + 1px)) { + .menu-header { + display: none; + } + } }