diff --git a/gadjo/static/css/_forms.scss b/gadjo/static/css/_forms.scss index 11237be..6804c54 100644 --- a/gadjo/static/css/_forms.scss +++ b/gadjo/static/css/_forms.scss @@ -1,3 +1,8 @@ +$button-color: #5B616B; +$button-cancel-color: grayscale($button-color); +$button-delete-color: #CD2026; +$button-submit-color: #215D9C; + label { margin-bottom: 0; } @@ -51,26 +56,48 @@ a.button { line-height: 2.5em; } -a.button, -.fargo-pick-popup button, -div#content button, -input[type=submit], -.ui-dialog .ui-dialog-buttonpane button, -div.buttons input { - background-image: linear-gradient(to bottom, #f9f9f9, #eeeeee); - color: #3c3c33; +a.button, button, input[type=submit], div.buttons input { padding: 5px 15px; cursor: pointer; - border: 1px solid #aaa; + border: 0px solid #aaa; transition: all 0.2s ease; - margin-right: 2ex; height: 2.5em; vertical-align: middle; - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.21); + border-radius: 3px; + font-weight: bold; +} - &:hover { - box-shadow: 0px 0px 5px #888; - } +a.button, button, input[type=submit], div.buttons input { + background: $button-color; + border: 1px solid $button-color; + color: text-color($button-color); + &:hover { background: darken($button-color, 20%); } + &:active { background: darken($button-color, 10%); } + &:focus { + box-shadow: 0 0 3px #2e444f, 0 0 7px #2e444f; + }; + transition: background 0.3s linear; +} + +a.cancel-button, button.cancel-button, div.buttons .cancel-button input, div.buttons .cancel-button button { + background: $button-cancel-color; + border-color: $button-cancel-color; + &:hover { background: darken($button-cancel-color, 20%); } + &:active { background: darken($button-cancel-color, 10%); } +} + +a.delete-button, button.delete-button, div.buttons .delete-button input, div.buttons .delete-button button { + background: $button-delete-color; + border-color: $button-delete-color; + &:hover { background: darken($button-delete-color, 20%); } + &:active { background: darken($button-delete-color, 10%); } +} + +a.submit-button, button.submit-button, div.buttons .submit-button input, div.buttons .submit-button button { + background: $button-submit-color; + border-color: $button-submit-color; + &:hover { background: darken($button-submit-color, 20%); } + &:active { background: darken($button-submit-color, 10%); } } div#content button:disabled, @@ -82,12 +109,6 @@ input[type=submit]:disabled { cursor: not-allowed; } -button::-moz-focus-inner { - border: 0; - padding: 1px 0 -1px 0; - margin: -3px 0 1px 0; -} - input, input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="file"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select { border: 1px solid #AAA; border-radius: 0px; diff --git a/gadjo/static/css/_jqueryui.scss b/gadjo/static/css/_jqueryui.scss index ecf1da2..c25b928 100644 --- a/gadjo/static/css/_jqueryui.scss +++ b/gadjo/static/css/_jqueryui.scss @@ -166,9 +166,6 @@ div.ui-dialog { padding: .5em 1em; background: none; overflow: auto; - .ui-state-default.ui-button { - border-radius: 0; - } } .ui-dialog-buttonpane { diff --git a/gadjo/static/css/_utils.scss b/gadjo/static/css/_utils.scss index 6f0db47..11d900c 100644 --- a/gadjo/static/css/_utils.scss +++ b/gadjo/static/css/_utils.scss @@ -11,3 +11,11 @@ #{$vendor}#{$name}: #{$value}; } } + +@function text-color($color) { + @if (lightness($color) > 50) { + @return #303030; + } @else { + @return #ffffff; + } +}