Files
oav/dotclear._no/admin/style/scss/partials/_buttons.scss
2023-03-20 12:18:38 +01:00

290 lines
5.9 KiB
SCSS

/* Removes inner padding and border in FF3+ - Knacss */
button::-moz-focus-inner,
input[type=button]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner {
border: 0;
padding: 0;
}
/* tous les boutons */
button,
a.button,
input[type=button],
input[type=reset],
input[type=submit] {
border: 1px solid $button-border;
font-family: $sans-serif-input;
padding: 3px 10px;
line-height: normal !important;
display: inline-block;
font-size: 100%;
text-align: center;
text-decoration: none;
cursor: pointer;
position: relative;
box-shadow: 0 1px 3px $button-shadow;
border-style: solid;
border-width: 1px;
}
a.button {
vertical-align: middle;
}
/* validation */
input[type=submit],
button[type=submit],
a.button.submit,
button.submit,
input.button.start {
color: $submit-color;
background-color: $submit-background;
@include background-image(linear-gradient(to bottom, $submit-background, $submit-background-alt));
border-color: $submit-background;
}
input[type=submit]:hover,
input[type=submit]:focus,
button[type=submit]:hover,
button[type=submit]:focus,
input.button.start:hover,
input.button.start:focus,
button.submit:hover,
button.submit:focus,
a.button.submit:hover,
a.button.submit:focus {
background-color: $submit-background-alt;
@include background-image(linear-gradient(to bottom, $submit-background-alt, $submit-background));
border-color: $submit-background-alt;
}
/* suppression, reset, "neutres" fond gris */
button,
input[type=button],
input.button,
input[type=reset],
input[type=submit].reset,
input.reset,
input[type=submit].delete,
input.delete,
a.button,
a.button.delete,
a.button.reset {
color: $reset-color;
background-color: $reset-background;
@include background-image(linear-gradient(to bottom, $reset-background-alt, $reset-background));
background-repeat: repeat-x;
border-color: $reset-border;
}
button:hover,
input[type=button]:hover,
input.button:hover,
button:focus,
input[type=button]:focus,
input.button:focus,
input[type=reset]:hover,
input[type=submit].reset:hover,
input.reset:hover,
input[type=reset]:focus,
input[type=submit].reset:focus,
input.reset:focus,
input[type=submit].delete:hover,
input.delete:hover,
input[type=submit].delete:focus,
input.delete:focus,
a.button.delete:hover,
a.button.reset:hover,
a.button:hover,
a.button.delete:focus,
a.button.reset:focus,
a.button:focus {
background-color: $reset-background-ter;
@include background-image(linear-gradient(to bottom, $reset-background, $reset-background-ter));
background-repeat: repeat-x;
border-color: $reset-border;
}
/* suppression */
input[type=submit].delete,
input.delete,
button[type=submit].delete,
button.delete,
a.button.delete {
color: $delete-color;
}
input[type=submit].delete:hover,
input.delete:hover,
button[type=submit].delete:hover,
button.delete:hover,
a.button.delete:hover,
input[type=submit].delete:focus,
input.delete:focus,
button[type=submit].delete:focus,
button.delete:focus,
a.button.delete:focus {
color: $delete-hover-color;
background-color: $delete-hover-background;
@include background-image(linear-gradient(to bottom, $delete-hover-background-alt, $delete-hover-background));
background-repeat: repeat-x;
border-color: $delete-hover-border;
}
#info-box a.button,
#info-box button {
padding: 0 .5em;
margin-left: 2em;
}
.button.add,
button.add {
color: $add-color;
background-color: $add-background;
@include background-image(linear-gradient(to bottom, $add-background, $add-background-alt));
border-color: $add-border;
padding: .33em 1.33em .5em;
}
.button.add:hover,
.button.add:active,
.button.add:focus,
button.add:hover,
button.add:active,
button.add:focus {
background-color: $add-background-alt;
@include background-image(linear-gradient(to bottom, $add-background-alt, $add-background));
border-color: $add-border-alt;
}
.button-add:focus {
outline: dotted 1px;
}
/* paragraphe pour bouton Nouveau bidule */
p.top-add {
text-align: right;
margin: 0;
}
/* disabled */
input.disabled,
input[type=submit].disabled,
button.disabled,
button[type=submit].disabled {
color: $button-disabled-color;
background: $button-disabled-background;
border: 1px solid $button-disabled-border;
}
input.disabled:hover,
input[type=submit].disabled:hover,
button.disabled:hover,
button[type=submit].disabled:hover {
color: $button-disabled-color;
background: $button-disabled-background-alt;
border: 1px solid $button-disabled-border;
}
/* Boutons javascript (dépliage/repliage, …) */
.void-btn {
border: none;
border-radius: 0;
padding: 0;
}
button.details-cmd {
font-size: 0.9em;
border: none;
border-radius: 0;
padding: 0;
margin: 0 5px 0 0;
color: currentColor;
background: transparent;
box-shadow: none;
&:hover,
&:focus {
background: transparent;
color: $input-focus;
}
}
/* specific buttons */
// Ajax or js buttons (action do not reload current page)
.checkbox-helper,
#gototop,
.metaGetList,
.metaGetMore,
a.checkbox-helper,
a#gototop,
a.metaGetList,
a.metaGetMore {
font-size: 0.825em;
color: $ajax-color;
background: $ajax-background;
box-shadow: none;
border: 1px solid $ajax-border;
margin-bottom: .25em;
text-align: center;
&:hover {
background: $ajax-background-alt;
box-shadow: none;
border: 1px solid $ajax-border;
}
}
#gototop {
display: none;
z-index: 1000;
position: fixed;
bottom: 0;
right: .5em;
width: 10em;
padding: .25em;
border-radius: .25em;
a,
a:link,
a:hover,
a:active {
color: $gotop-color;
background: $gotop-background;
border: $gotop-border;
}
}
.metaRemove,
.addMeta button:not(.metaGetMore),
.addMeta a:not(.metaGetMore) {
border: none;
border-radius: 0;
padding: 0;
color: $addmeta-color;
background: $addmeta-background;
}
.addMeta button:not(.metaGetMore),
.addMeta a:not(.metaGetMore) {
box-shadow: initial;
margin-bottom: 2px;
&:hover,
&:focus {
color: $addmeta-focus-color;
background: $addmeta-focus-background;
}
}