|
/* ------------------------------------------------------------- */
|
|
/* BUTTONS (buttons.less) */
|
|
/* ------------------------------------------------------------- */
|
|
|
|
// ----------------------------------------------------------------------------
|
|
//
|
|
// 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)
|
|
|
|
// A lot of buttons are outside of a form, so let be this tag deactivated
|
|
//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 {
|
|
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;
|
|
}
|
|
&.wi-verytiny{
|
|
font-size: 8pt !important;
|
|
padding: 0.0em 0.3em 0.1em 0.3em;
|
|
display: inline-block;
|
|
min-height: 17px;
|
|
max-height: 17px;
|
|
}
|
|
|
|
} // /input[type="button etc."]
|
|
|
|
button.icon{
|
|
padding: 0 ;
|
|
margin: 0 ;
|
|
background: none !important;
|
|
border: 0 !important;
|
|
display: inline-block;
|
|
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"] {
|
|
color: @button-strong-color ;
|
|
background-color: @button-strong-bg;
|
|
border: @button-strong-border ;
|
|
&:hover{
|
|
color: @button-strong-hover-color ;
|
|
background-color: @button-strong-hover-bg;
|
|
border: @button-strong-hover-border ;
|
|
}
|
|
&:active,
|
|
&:focus{
|
|
color: @button-strong-active-color ;
|
|
background-color: @button-strong-active-bg;
|
|
border: @button-strong-active-border ;
|
|
}
|
|
}
|
|
|
|
// -------------------
|
|
// 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"] {
|
|
color: @button-neutral-color ;
|
|
background-color: @button-neutral-bg;
|
|
border: @button-neutral-border ;
|
|
&:hover {
|
|
color: @button-neutral-hover-color ;
|
|
background-color: @button-neutral-hover-bg;
|
|
border: @button-neutral-hover-border ;
|
|
}
|
|
&:active,
|
|
&:focus {
|
|
color: @button-neutral-active-color;
|
|
background-color: @button-neutral-active-bg;
|
|
border: @button-neutral-active-border ;
|
|
}
|
|
|
|
// 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
|
|
|
|
// PENDENT: Neu
|
|
input[type="button"]{
|
|
&.below{
|
|
clear: both !important;
|
|
float: none;
|
|
//margin-top: 0.3em;
|
|
overflow: hidden ;
|
|
}
|
|
}
|
|
//} // /form
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// 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 {
|
|
display: inline-block;
|
|
width: auto ;
|
|
padding: 0.16em 0.2em 0.1em 0.2em;
|
|
margin: -0.3em 0 0 0.2em;
|
|
font-size: 84% ;
|
|
}
|
|
|
|
// Toggle (for filters e.g.)
|
|
&.toggle {
|
|
background-color: @controlpanel-bg-color !important ;
|
|
|
|
&.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 ;
|
|
&:hover {
|
|
border-top: @controlpanel-border !important ;
|
|
border-right: @controlpanel-border !important ;
|
|
border-bottom: 0 !important;
|
|
border-left: @controlpanel-border !important ;
|
|
}
|
|
}
|
|
&:hover{
|
|
background-color: @button-neutral-bg !important;
|
|
border: @controlpanel-border !important ;
|
|
color: @button-neutral-color;
|
|
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 {
|
|
padding: 1.0em ;
|
|
clear: left ;
|
|
display: block;
|
|
// PENDENT: anschauen, steht fuer Anzeige von Positionsdetails in Listen-Tabellen
|
|
&.positions {
|
|
margin: 0 0 -1.7em 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{
|
|
|
|
}
|
|
}
|
|
&.below {
|
|
padding: 0 ;
|
|
margin: 0 ;
|
|
}
|
|
}
|
|
.col > .buttons,
|
|
.wrapper * .buttons {
|
|
padding: 1.0em 1.0em 1.0em 0 !important;
|
|
}
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// 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 {
|
|
background-image: url("image/cross2.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
color: #fff;
|
|
background-color: transparent;
|
|
border-color: none;
|
|
border-width: 0;
|
|
}
|
|
}
|