improve button and add message level 'warning'

This commit is contained in:
Julien Fastré 2017-08-19 21:44:51 +02:00
parent 10b67b5a5f
commit 2d0d45e01a
6 changed files with 120 additions and 84 deletions

View File

@ -4279,7 +4279,7 @@ span.force-inline-label label {
color: #cd5e1f; }
.sc-button.bt-action[disabled]:hover, .sc-button.bt-edit[disabled]:hover, .sc-button.bt-update[disabled]:hover {
box-shadow: none; }
.sc-button.bt-show {
.sc-button.bt-show, .sc-button.bt-view {
color: #fff;
background: #334d5c;
border: medium none;
@ -4295,37 +4295,37 @@ span.force-inline-label label {
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.sc-button.bt-show:hover, .sc-button.bt-show:active {
.sc-button.bt-show:hover, .sc-button.bt-show:active, .sc-button.bt-view:hover, .sc-button.bt-view:active {
background: #2a3f4c;
color: #fff;
text-decoration: none; }
.sc-button.bt-show:focus {
.sc-button.bt-show:focus, .sc-button.bt-view:focus {
background: #2a3f4c; }
.sc-button.bt-show[disabled] {
.sc-button.bt-show[disabled], .sc-button.bt-view[disabled] {
background: rgba(51, 77, 92, 0.6);
color: #21323b; }
.sc-button.bt-show[disabled]:hover {
.sc-button.bt-show[disabled]:hover, .sc-button.bt-view[disabled]:hover {
box-shadow: none; }
.sc-button.bt-create::before, .sc-button.bt-save::before, .sc-button.bt-new::before, .sc-button.bt-delete::before, .sc-button.bt-update::before, .sc-button.bt-edit::before, .sc-button.bt-cancel::before, .sc-button.bt-show::before {
.sc-button:not(.change-icon).bt-create::before, .sc-button:not(.change-icon).bt-save::before, .sc-button:not(.change-icon).bt-new::before, .sc-button:not(.change-icon).bt-delete::before, .sc-button:not(.change-icon).bt-update::before, .sc-button:not(.change-icon).bt-edit::before, .sc-button:not(.change-icon).bt-cancel::before, .sc-button:not(.change-icon).bt-view::before, .sc-button:not(.change-icon).bt-show::before {
font: normal normal normal 14px/1 FontAwesome;
margin-right: 0.5em; }
.sc-button.bt-save::before {
.sc-button:not(.change-icon).bt-save::before {
content: ""; }
.sc-button.bt-create::before, .sc-button.bt-new::before {
.sc-button:not(.change-icon).bt-create::before, .sc-button:not(.change-icon).bt-new::before {
content: ""; }
.sc-button.bt-delete::before {
.sc-button:not(.change-icon).bt-delete::before {
content: ""; }
.sc-button.bt-edit::before, .sc-button.bt-update::before {
.sc-button:not(.change-icon).bt-edit::before, .sc-button:not(.change-icon).bt-update::before {
content: ""; }
.sc-button.bt-cancel::before {
.sc-button:not(.change-icon).bt-cancel::before {
content: ""; }
.sc-button.bt-show::before {
.sc-button:not(.change-icon).bt-show::before, .sc-button:not(.change-icon).bt-view::before {
content: ""; }
.sc-button > i.fa {
margin-right: 0.5em; }
.sc-button.has-hidden > i.fa, .sc-button.no-content > i.fa {
.sc-button.has-hidden > i.fa, .sc-button:empty > i.fa {
margin-right: 0; }
.sc-button.has-hidden.bt-create::before, .sc-button.has-hidden.bt-save::before, .sc-button.has-hidden.bt-new::before, .sc-button.has-hidden.bt-delete::before, .sc-button.has-hidden.bt-update::before, .sc-button.has-hidden.bt-edit::before, .sc-button.has-hidden.bt-cancel::before, .sc-button.has-hidden.bt-show::before, .sc-button.no-content.bt-create::before, .sc-button.no-content.bt-save::before, .sc-button.no-content.bt-new::before, .sc-button.no-content.bt-delete::before, .sc-button.no-content.bt-update::before, .sc-button.no-content.bt-edit::before, .sc-button.no-content.bt-cancel::before, .sc-button.no-content.bt-show::before {
.sc-button.has-hidden:not(.change-icon).bt-create::before, .sc-button.has-hidden:not(.change-icon).bt-save::before, .sc-button.has-hidden:not(.change-icon).bt-new::before, .sc-button.has-hidden:not(.change-icon).bt-delete::before, .sc-button.has-hidden:not(.change-icon).bt-update::before, .sc-button.has-hidden:not(.change-icon).bt-edit::before, .sc-button.has-hidden:not(.change-icon).bt-cancel::before, .sc-button.has-hidden:not(.change-icon).bt-view::before, .sc-button.has-hidden:not(.change-icon).bt-show::before, .sc-button:empty:not(.change-icon).bt-create::before, .sc-button:empty:not(.change-icon).bt-save::before, .sc-button:empty:not(.change-icon).bt-new::before, .sc-button:empty:not(.change-icon).bt-delete::before, .sc-button:empty:not(.change-icon).bt-update::before, .sc-button:empty:not(.change-icon).bt-edit::before, .sc-button:empty:not(.change-icon).bt-cancel::before, .sc-button:empty:not(.change-icon).bt-view::before, .sc-button:empty:not(.change-icon).bt-show::before {
margin-right: 0; }
.sc-button.has-hidden > span.show-on-hover {
display: none; }
@ -4333,7 +4333,7 @@ span.force-inline-label label {
display: inline-block; }
.sc-button.has-hidden:hover > i.fa {
margin-right: 0.5em; }
.sc-button.has-hidden:hover.bt-create::before, .sc-button.has-hidden:hover.bt-save::before, .sc-button.has-hidden:hover.bt-new::before, .sc-button.has-hidden:hover.bt-delete::before, .sc-button.has-hidden:hover.bt-update::before, .sc-button.has-hidden:hover.bt-edit::before, .sc-button.has-hidden:hover.bt-cancel::before, .sc-button.has-hidden:hover.bt-show::before {
.sc-button.has-hidden:hover:not(.change-icon).bt-create::before, .sc-button.has-hidden:hover:not(.change-icon).bt-save::before, .sc-button.has-hidden:hover:not(.change-icon).bt-new::before, .sc-button.has-hidden:hover:not(.change-icon).bt-delete::before, .sc-button.has-hidden:hover:not(.change-icon).bt-update::before, .sc-button.has-hidden:hover:not(.change-icon).bt-edit::before, .sc-button.has-hidden:hover:not(.change-icon).bt-cancel::before, .sc-button.has-hidden:hover:not(.change-icon).bt-view::before, .sc-button.has-hidden:hover:not(.change-icon).bt-show::before {
margin-right: 0.5em; }
.sc-button.button-small {
font-size: 80%;
@ -4548,6 +4548,23 @@ td ul.record_actions li,
ul.record_actions_small li {
margin-right: 0.2em; }
.flash_message {
margin-top: 2.5em; }
.alert {
background: rgba(223, 73, 73, 0.2);
color: #df4949;
font-weight: bold;
margin-bottom: 0.75em;
padding: 0.75em; }
.warning {
background: rgba(226, 121, 61, 0.2);
color: #e2793d;
font-weight: bold;
margin-bottom: 0.75em;
padding: 0.75em; }
html, body {
min-height: 100%;
font-family: 'Open Sans'; }
@ -4657,9 +4674,6 @@ dl.chill_view_data dd {
dl.chill_view_data dd ul {
padding-left: 0; }
.flash_message {
margin-top: 2.5em; }
blockquote.chill-user-quote {
border-left: 10px solid #eec84a;
margin: 1.5em 10px;

File diff suppressed because one or more lines are too long

View File

@ -8,6 +8,7 @@
@import 'custom/custom-fields';
@import 'custom/address';
@import 'custom/record_actions';
@import 'custom/flash_messages';
html,body {
@ -156,9 +157,6 @@ dl.chill_view_data {
}
.flash_message {
margin-top: 2.5em;
}
blockquote.chill-user-quote {
border-left: 10px solid $chill-yellow;

View File

@ -0,0 +1,14 @@
.flash_message {
margin-top: 2.5em;
}
// note that other level are defined in modules/_alerts.scss
.alert {
// override in modules/_alerts.scss
@include alert($red);
}
.warning {
@include alert($orange);
}

View File

@ -11,60 +11,11 @@
@include button($orange, $white);
}
&.bt-show {
&.bt-show, &.bt-view {
@include button($blue, $white);
}
&.bt-create::before,
&.bt-save::before,
&.bt-new::before,
&.bt-delete::before,
&.bt-update::before,
&.bt-edit::before,
&.bt-cancel::before,
&.bt-show::before {
font: normal normal normal 14px/1 FontAwesome;
margin-right: 0.5em;
}
&.bt-save::before {
// add a floppy
content: "";
}
&.bt-create::before, &.bt-new::before {
// add a plus
content: "";
}
&.bt-delete::before {
// add a trash
content: "";
}
&.bt-edit::before, &.bt-update::before {
// add a pencil
content: "";
}
&.bt-cancel::before {
// add an arrow left
content: "";
}
&.bt-show::before {
content: "";
}
> i.fa {
margin-right: 0.5em;
}
&.has-hidden,
&.no-content {
> i.fa {
margin-right: 0;
}
&:not(.change-icon) {
&.bt-create::before,
&.bt-save::before,
@ -73,9 +24,64 @@
&.bt-update::before,
&.bt-edit::before,
&.bt-cancel::before,
&.bt-view::before,
&.bt-show::before {
font: normal normal normal 14px/1 FontAwesome;
margin-right: 0.5em;
}
&.bt-save::before {
// add a floppy
content: "";
}
&.bt-create::before, &.bt-new::before {
// add a plus
content: "";
}
&.bt-delete::before {
// add a trash
content: "";
}
&.bt-edit::before, &.bt-update::before {
// add a pencil
content: "";
}
&.bt-cancel::before {
// add an arrow left
content: "";
}
&.bt-show::before, &.bt-view::before {
content: "";
}
}
> i.fa {
margin-right: 0.5em;
}
&.has-hidden,
&:empty {
> i.fa {
margin-right: 0;
}
&:not(.change-icon) {
&.bt-create::before,
&.bt-save::before,
&.bt-new::before,
&.bt-delete::before,
&.bt-update::before,
&.bt-edit::before,
&.bt-cancel::before,
&.bt-view::before,
&.bt-show::before {
margin-right: 0;
}
}
}
&.has-hidden > span.show-on-hover {
@ -92,15 +98,18 @@
margin-right: 0.5em;
}
&.bt-create::before,
&.bt-save::before,
&.bt-new::before,
&.bt-delete::before,
&.bt-update::before,
&.bt-edit::before,
&.bt-cancel::before,
&.bt-show::before {
margin-right: 0.5em;
&:not(.change-icon) {
&.bt-create::before,
&.bt-save::before,
&.bt-new::before,
&.bt-delete::before,
&.bt-update::before,
&.bt-edit::before,
&.bt-cancel::before,
&.bt-view::before,
&.bt-show::before {
margin-right: 0.5em;
}
}
}

View File

@ -30,6 +30,7 @@ Not valid: Non valide
not valid: non valide
Confirm: Confirmer
Cancel: Annuler
Save: Enregistrer
Edit: Modifier
Update: Mettre à jour