kivitendo/css/less/buttons.less @ e5ac8ee3
| 00462921 | Hans P. Schlaepfer | /* ------------------------------------------------------------- */
|
||
/* BUTTONS (buttons.less) */
|
||||
/* ------------------------------------------------------------- */
|
||||
| b6b30e72 | Hans Peter Schlaepfer | // ----------------------------------------------------------------------------
|
||
//
|
||||
// BUTTONS (FORM BUTTONS & LINKS AS BUTTONS)
|
||||
//
|
||||
// ----------------------------------------------------------------------------
|
||||
// DESCRIPTION: all kind of buttons
|
||||
//
|
||||
// CONTENTS:
|
||||
// - FORM BUTTONS
|
||||
// - input, button
|
||||
// - .clear
|
||||
// - Dimensions
|
||||
// - button.icon
|
||||
// - Action STRONG (submission to server page)
|
||||
// - Action SOFT/NEUTRAL (no submission to server page)
|
||||
// - button
|
||||
// - .below
|
||||
// - LINK AND LABELS DESIGNED AS BUTTONS
|
||||
// - BUTTONS CONTAINER
|
||||
// - IMAGE-BUTTONS
|
||||
// ----------------------------------------------------------------------------
|
||||
// --------------------------------------
|
||||
// FORM BUTTONS
|
||||
// --------------------------------------
|
||||
// At first we tried to nest the buttons within the form element,
|
||||
// but it is not possible because some forms do not have a form element
|
||||
// (e.g. print dialog)
|
||||
| 00462921 | Hans P. Schlaepfer | |||
// A lot of buttons are outside of a form, so let be this tag deactivated
|
||||
| b6b30e72 | Hans Peter Schlaepfer | //form {
|
||
// General
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
button {
|
||||
.mx-button ; // Mixin
|
||||
&.clear { clear: left; }
|
||||
// DIMENSIONS
|
||||
&.wi-verysmall { min-width: @input-wi-verysmall ; }
|
||||
&.wi-small { min-width: @input-wi-small ; }
|
||||
&.wi-mediumsmall { min-width: @input-wi-mediumsmall ; }
|
||||
&.wi-normal { min-width: @input-wi-normal ; }
|
||||
&.wi-lightwide { width: @input-wi-lightwide ; }
|
||||
&.wi-wide { width: @input-wi-wide ; }
|
||||
&.wi-wider { width: @input-wi-wider ; }
|
||||
&.wi-verywide { width: @input-wi-verywide ; }
|
||||
&.wi-tiny {
|
||||
| 00462921 | Hans P. Schlaepfer | width: auto ;
|
||
padding: 0.16em 0.2em 0.1em 0.2em;
|
||||
margin: -0.3em 0 0 0.2em;
|
||||
//float: right;
|
||||
display: inline-block;
|
||||
font-size: 84% ;
|
||||
min-height: 23px;
|
||||
max-height: 23px;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | }
|
||
&.wi-verytiny{
|
||||
| 00462921 | Hans P. Schlaepfer | font-size: 8pt !important;
|
||
padding: 0.0em 0.3em 0.1em 0.3em;
|
||||
display: inline-block;
|
||||
min-height: 17px;
|
||||
max-height: 17px;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | }
|
||
| 00462921 | Hans P. Schlaepfer | } // /input[type="button etc."]
|
||
| b6b30e72 | Hans Peter Schlaepfer | |||
button.icon{
|
||||
| 00462921 | Hans P. Schlaepfer | padding: 0 ;
|
||
margin: 0 ;
|
||||
background: none !important;
|
||||
border: 0 !important;
|
||||
display: inline-block;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | img { vertical-align: middle ; }
|
||
}
|
||||
// -------------------
|
||||
// Action STRONG (submission to server page)
|
||||
input[type="submit"],
|
||||
input[type="button"],
|
||||
input[type="button"].button,
|
||||
button[type="submit"],
|
||||
button[type="button"] {
|
||||
| 00462921 | Hans P. Schlaepfer | color: @button-strong-color ;
|
||
background-color: @button-strong-bg;
|
||||
border: @button-strong-border ;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | &:hover{
|
||
| 00462921 | Hans P. Schlaepfer | color: @button-strong-hover-color ;
|
||
background-color: @button-strong-hover-bg;
|
||||
border: @button-strong-hover-border ;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | }
|
||
&:active,
|
||||
&:focus{
|
||||
| 00462921 | Hans P. Schlaepfer | color: @button-strong-active-color ;
|
||
background-color: @button-strong-active-bg;
|
||||
border: @button-strong-active-border ;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | }
|
||
}
|
||||
// -------------------
|
||||
// Action SOFT/NEUTRAL (no submission to server page)
|
||||
input[type="button"].neutral,
|
||||
input[type="submit"].neutral,
|
||||
input[type="reset"],
|
||||
input[type="reset"].neutral,
|
||||
button.neutral,
|
||||
button[type="reset"] {
|
||||
| 00462921 | Hans P. Schlaepfer | color: @button-neutral-color ;
|
||
background-color: @button-neutral-bg;
|
||||
border: @button-neutral-border ;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | &:hover {
|
||
| 00462921 | Hans P. Schlaepfer | color: @button-neutral-hover-color ;
|
||
background-color: @button-neutral-hover-bg;
|
||||
border: @button-neutral-hover-border ;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | }
|
||
&:active,
|
||||
&:focus {
|
||||
| 00462921 | Hans P. Schlaepfer | color: @button-neutral-active-color;
|
||
background-color: @button-neutral-active-bg;
|
||||
border: @button-neutral-active-border ;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | }
|
||
| 00462921 | Hans P. Schlaepfer | |||
// Toggle-Button (e.g. for position details in tables)
|
||||
&.positions {
|
||||
padding-right: 1.2em ;
|
||||
// ::after does not work in buttons
|
||||
// input#cb_show_details {
|
||||
// &::after {
|
||||
// content: "▸" !important ;
|
||||
// }
|
||||
// }
|
||||
// input#cb_hide_details::after {
|
||||
// content: "▾" !important ;
|
||||
// }
|
||||
} // /.positions
|
||||
} // /input[type="*"].neutral
|
||||
| b6b30e72 | Hans Peter Schlaepfer | |||
// PENDENT: Neu
|
||||
input[type="button"]{
|
||||
&.below{
|
||||
clear: both !important;
|
||||
float: none;
|
||||
| 00462921 | Hans P. Schlaepfer | //margin-top: 0.3em;
|
||
| b6b30e72 | Hans Peter Schlaepfer | overflow: hidden ;
|
||
}
|
||||
}
|
||||
//} // /form
|
||||
| 00462921 | Hans P. Schlaepfer | |||
| b6b30e72 | Hans Peter Schlaepfer | // --------------------------------------
|
||
// LINKS DESIGNED AS BUTTONS
|
||||
// They may be placed inside or outside a form
|
||||
// --------------------------------------
|
||||
a {
|
||||
&.button {
|
||||
.mx-button ;
|
||||
&.below { clear: both !important; }
|
||||
// STANDARD colors
|
||||
.mx-button-standard ;
|
||||
.mx-button-standard-hover-focus ;
|
||||
// NEUTRAL (no Submission)
|
||||
&.neutral {
|
||||
&:link,
|
||||
&:visited{
|
||||
.mx-button-neutral ; // Mixin
|
||||
}
|
||||
.mx-button-neutral-hover-focus ; // Mixin
|
||||
} // /.neutral
|
||||
&.wi-smallest { width: @input-wi-smallest ; }
|
||||
&.wi-verysmall { width: @input-wi-verysmall ; }
|
||||
&.wi-small { width: @input-wi-small ; }
|
||||
&.wi-mediumsmall { width: @input-wi-mediumsmall ; }
|
||||
&.wi-normal { width: @input-wi-normal ; }
|
||||
&.wi-lightwide { width: @input-wi-lightwide ; }
|
||||
&.wi-wide { width: @input-wi-wide ; }
|
||||
&.wi-wider { min-width: @input-wi-wider ; }
|
||||
&.wi-verywide { min-width: @input-wi-verywide ; }
|
||||
// Tiny button (one letter button)
|
||||
&.wi-tiny {
|
||||
| 00462921 | Hans P. Schlaepfer | display: inline-block;
|
||
width: auto ;
|
||||
padding: 0.16em 0.2em 0.1em 0.2em;
|
||||
margin: -0.3em 0 0 0.2em;
|
||||
font-size: 84% ;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | }
|
||
// Toggle (for filters e.g.)
|
||||
&.toggle {
|
||||
| 00462921 | Hans P. Schlaepfer | background-color: @controlpanel-bg-color !important ;
|
||
| b6b30e72 | Hans Peter Schlaepfer | &.off::after{
|
||
content: " ▸";
|
||||
padding-right: 1.0em;
|
||||
}
|
||||
&.on::after {
|
||||
content: " ▾";
|
||||
padding-right: 1.0em;
|
||||
}
|
||||
&.with-panel{
|
||||
margin-bottom: 0 ;
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0px ;
|
||||
border-bottom-right-radius: 0px ;
|
||||
| 00462921 | Hans P. Schlaepfer | &:hover {
|
||
border-top: @controlpanel-border !important ;
|
||||
border-right: @controlpanel-border !important ;
|
||||
border-bottom: 0 !important;
|
||||
border-left: @controlpanel-border !important ;
|
||||
}
|
||||
| b6b30e72 | Hans Peter Schlaepfer | }
|
||
&:hover{
|
||||
| 00462921 | Hans P. Schlaepfer | background-color: @button-neutral-bg !important;
|
||
border: @controlpanel-border !important ;
|
||||
color: @button-neutral-color;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | text-decoration: none;
|
||
}
|
||||
} // /.toggle
|
||||
} // /.button
|
||||
}// /a
|
||||
// --------------------------------------
|
||||
// LABELS DESIGNED AS BUTTONS
|
||||
// They may be placed inside or outside a form
|
||||
// --------------------------------------
|
||||
#content label.button {
|
||||
.mx-button ; // Mixin
|
||||
// STANDARD colors
|
||||
.mx-button-standard ; // Mixin
|
||||
.mx-button-standard-hover-focus ; // Mixin
|
||||
// NEUTRAL (no Submission)
|
||||
&.neutral {
|
||||
.mx-button-neutral ; // Mixin
|
||||
.mx-button-neutral-hover-focus ; // Mixin
|
||||
} // /.neutral
|
||||
} // /.button
|
||||
// --------------------------------------
|
||||
// BUTTONS CONTAINER
|
||||
// --------------------------------------
|
||||
// Container fuer Buttons
|
||||
div.buttons {
|
||||
| 00462921 | Hans P. Schlaepfer | padding: 1.0em ;
|
||
clear: left ;
|
||||
display: block;
|
||||
// PENDENT: anschauen, steht fuer Anzeige von Positionsdetails in Listen-Tabellen
|
||||
| b6b30e72 | Hans Peter Schlaepfer | &.positions {
|
||
| 00462921 | Hans P. Schlaepfer | margin: 0 0 -1.9em 26.0em;
|
||
padding: 0em;
|
||||
label.button.neutral,
|
||||
input.positions {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
padding-bottom: 0.6em !important;
|
||||
margin-bottom: -0.8em !important;
|
||||
background: none !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
input.positions{
|
||||
}
|
||||
| b6b30e72 | Hans Peter Schlaepfer | }
|
||
&.below {
|
||||
| 00462921 | Hans P. Schlaepfer | padding: 0 ;
|
||
margin: 0 ;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | }
|
||
}
|
||||
.col > .buttons,
|
||||
.wrapper * .buttons {
|
||||
| 00462921 | Hans P. Schlaepfer | padding: 1.0em 1.0em 1.0em 0 !important;
|
||
| b6b30e72 | Hans Peter Schlaepfer | }
|
||
// --------------------------------------
|
||||
// IMAGE BUTTONS ()
|
||||
// --------------------------------------
|
||||
.button-image {
|
||||
display: inline-block ;
|
||||
// Info or details button
|
||||
&.info { }
|
||||
// Delete (cross) button
|
||||
&.delete { }
|
||||
// Edit (pencil) button
|
||||
&.edit { }
|
||||
// Map (globus / planet earth) button
|
||||
&.map { }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
.button-image { vertical-align: middle; }
|
||||
}
|
||||
input[type="button"].button-image{
|
||||
&.delete {
|
||||
| 00462921 | Hans P. Schlaepfer | background-image: url("image/cross.png");
|
||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border-color: none;
|
||||
border-width: 0;
|
||||
| b6b30e72 | Hans Peter Schlaepfer | }
|
||
}
|