entrouvert
/
gadjo
15
0
Fork 0
Code Issues Pull Requests 2 Releases Activity

general: restyle buttons (#14465)

This commit is contained in:
Frédéric Péters 2016-12-28 11:53:03 +01:00
parent dba0d9918c
commit 0e07368fb8
3 changed files with 49 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
gadjo/static/css/_forms.scss
View File

@ -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;

3
gadjo/static/css/_jqueryui.scss
View File

@ -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 {

8
gadjo/static/css/_utils.scss
View File

@ -11,3 +11,11 @@
#{$vendor}#{$name}: #{$value};
}
}
@function text-color($color) {
@if (lightness($color) > 50) {
@return #303030;
} @else {
@return #ffffff;
}
}