From e782de6064f2a9b79d871e40bf6d61c8061b7c1a Mon Sep 17 00:00:00 2001 From: Dave Cranwell Date: Fri, 12 Feb 2016 17:29:59 +0000 Subject: [PATCH] tweaks to styling of revision list and added new 'warning' style for buttons/dropdowns --- .../wagtailadmin/scss/_variables.scss | 4 +- .../scss/components/_dropdowns.scss | 44 +++++++++++-------- .../wagtailadmin/scss/components/_forms.scss | 23 ++++++++++ .../scss/components/_listing.scss | 30 ++++++------- .../scss/components/_typography.scss | 16 +++++-- .../static_src/wagtailadmin/scss/core.scss | 11 ++++- .../scss/layouts/page-editor.scss | 24 +++++----- 7 files changed, 100 insertions(+), 52 deletions(-) diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/_variables.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/_variables.scss index f5ba4401ee..509956f09f 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/_variables.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/_variables.scss @@ -1,4 +1,4 @@ -// paths +// paths // We can't use absolute paths here, because those are dependent on Django's // STATIC_URL setting. Instead, relative paths from the final location of the @@ -57,6 +57,8 @@ $color-button-yes: $color-green; $color-button-yes-hover: darken($color-button-yes, 8%); $color-button-no: $color-red; $color-button-no-hover: darken($color-button-no, 20%); +$color-button-warning: $color-orange; +$color-button-warning-hover: darken($color-orange, 20%); $color-link: $color-teal; $color-link-hover: $color-teal-dark; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_dropdowns.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_dropdowns.scss index f0e93b0a8b..6169b9276f 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_dropdowns.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_dropdowns.scss @@ -2,10 +2,10 @@ @include clearfix(); position: relative; - input[type=submit], - input[type=reset], - input[type=button], - button, + input[type=submit], + input[type=reset], + input[type=button], + button, .button { padding: 0; display: block; @@ -17,8 +17,8 @@ float: left; } - input[type=submit], - input[type=reset], + input[type=submit], + input[type=reset], input[type=button], button { line-height: inherit; @@ -71,11 +71,11 @@ } } - a, - input[type=submit], - input[type=reset], - input[type=button], - .button, + a, + input[type=submit], + input[type=reset], + input[type=button], + .button, button { border-radius: 0; font-size: 0.95em; @@ -117,10 +117,10 @@ top: auto; bottom: 100%; - li { + li { border-width: 0 0 1px; } - } + } .dropdown-toggle { color: $color-white; @@ -148,6 +148,14 @@ &:hover { background-color: $color-teal-darker; } + + &.warning { + background-color: $color-button-warning; + + &:hover { + background-color: $color-button-warning-hover; + } + } } &.open .dropdown-toggle { @@ -162,9 +170,9 @@ } &.open { - > input[type=button], - > input[type=submit], - > button, + > input[type=button], + > input[type=submit], + > button, > .button { border-radius: 3px 3px 0 0; } @@ -178,8 +186,8 @@ &.dropup.dropdown-button { &.open { > input[type=button], - > input[type=submit], - > button, + > input[type=submit], + > button, > .button { border-radius: 0 0 3px 3px; } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss index 9a9afa4303..2c9f02921f 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_forms.scss @@ -269,6 +269,29 @@ button { } } + &.warning { + background-color: $color-button-warning; + border: 1px solid $color-button-warning; + + &.button-secondary { + border: 1px solid $color-button-warning; + color: $color-button-warning; + background-color: transparent; + } + + &:hover { + color: $color-white; + border-color: transparent; + background-color: $color-button-warning-hover; + } + + &.button-nobg:hover { + color: $color-button-warning; + background-color: transparent; + } + } + + &.no, &.serious { background-color: $color-button-no; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_listing.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_listing.scss index ac854e09d8..3e7e1eff43 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_listing.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_listing.scss @@ -23,12 +23,12 @@ ul.listing { font-size: 1em; } - td, + td, th { padding: 1.2em 1em; } - &.small td, + &.small td, th { padding: 0.6em 1em; } @@ -81,14 +81,18 @@ ul.listing { tbody { border-bottom: 1px dashed $color-input-border; - - + + tr { border-top: 1px dashed $color-input-border; - + &:first-child { border-top: 1px dashed $color-input-border; } + + &:hover { + background-color: #fcfcfc; + } } } @@ -96,10 +100,6 @@ ul.listing { border: 0; } - &.full-width tbody tr:hover { - background-color: #fdfdfd; - } - &.chooser { tbody .title a { @include transition(none); @@ -110,7 +110,7 @@ ul.listing { background-color: $color-teal; color: $color-white; - .title a, + .title a, .title a:hover { color: $color-white; } @@ -220,7 +220,7 @@ ul.listing { background-color: $color-teal; } } - + .button-secondary { background-color: $color-white; } @@ -233,7 +233,7 @@ ul.listing { .children, .no-children { padding: 0; - + &:hover { background-color: $color-grey-5; } @@ -247,7 +247,7 @@ ul.listing { .children a { color: $color-teal; display: block; - + &:before { font-size: 3rem; } @@ -256,7 +256,7 @@ ul.listing { .no-children a { color: $color-grey-3; display: block; - + &:before { font-size: 1.5rem; } @@ -577,7 +577,7 @@ table.listing { .no-children { border-color: transparent; - + a { opacity: 0; } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_typography.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_typography.scss index 1dba86642f..5c3bb94295 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_typography.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_typography.scss @@ -51,6 +51,10 @@ a { } } +a.underlined { + border-bottom: 1px solid currentColor; +} + code { box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.2); background-color: $color-fieldset-hover; @@ -65,8 +69,8 @@ kbd { padding: 0.3em 0.5em; } -dl, -dt, +dl, +dt, dd { padding: 0; margin: 0; @@ -86,6 +90,10 @@ dd { margin-bottom: 1em; } +.unbold { + font-weight: normal; +} + // Help text formatters .help-block { @@ -107,8 +115,8 @@ dd { } } - .help-info, - .help-warning, + .help-info, + .help-warning, .help-critical { border-radius: 3px; padding-left: 3.5em; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss index 315597bb95..a680cec208 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss @@ -146,8 +146,7 @@ footer { .meta { float: right; text-align: right; - padding-right: $grid-gutter-width/2; - line-height: 3.5em; + padding: 7px $grid-gutter-width/2; font-size: 0.85em; p { @@ -155,6 +154,14 @@ footer { margin-right: $grid-gutter-width; white-space: nowrap; } + + a { + color: inherit; + + &:hover { + color: $color-link; + } + } } } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss index c59390aa98..9a5d75c0c9 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss @@ -108,7 +108,7 @@ font-size: inherit; } - &:before, + &:before, label:before { text-shadow: none; font-family: wagtail; @@ -299,7 +299,7 @@ min-height: 41px; h2 { - &:before, + &:before, label:before { content: '6'; cursor: pointer; @@ -308,7 +308,7 @@ &.collapsed { h2 { - &:before, + &:before, label:before { content: '5'; } @@ -318,8 +318,8 @@ } // Custom styles that make some fields look more important -.full input, -.full textarea, +.full input, +.full textarea, .full .richtext { @include nice-padding(); border-radius: 0; @@ -338,7 +338,7 @@ // Footer control bar for perfoming actions on the page footer .preview { - button, + button, .button { background-color: lighten($color-grey-2, 10%); border-color: lighten($color-grey-2, 10%); @@ -350,9 +350,9 @@ footer .preview { } .dropdown { - input[type=button], - input[type=submit], - button, + input[type=button], + input[type=submit], + button, .button { background-color: lighten($color-grey-2, 10%); border-color: lighten($color-grey-2, 10%); @@ -363,7 +363,7 @@ footer .preview { } } - ul, + ul, .dropdown-toggle { background-color: lighten($color-grey-2, 10%); } @@ -420,8 +420,8 @@ footer .preview { padding: 3.2em 0 0; } - input, - textarea, + input, + textarea, .richtext { border-width: 0 1px; }