kivitendo/css/design40/less/mixins.less @ 25ca3f8a
| a3fd097d | Sven Schöling | /* ------------------------------------------------------------- */
|
|
/* MIXINS (mixins.less) */
|
|||
/* ------------------------------------------------------------- */
|
|||
// ----------------------------------------------------------------------------
|
|||
//
|
|||
// MIXINS (general sitewide properties)
|
|||
//
|
|||
// ----------------------------------------------------------------------------
|
|||
// DESCRIPTION:
|
|||
// Mixins can be used like variables and be written like a CSS-class
|
|||
// Do not apply these classes onto selectors but apply besides other properties
|
|||
// within a selector
|
|||
//
|
|||
// CONTENTS:
|
|||
// - H3 & CAPTION
|
|||
// - CONTENT-BLOCKS (Content-Boxes)
|
|||
// - -
|
|||
// -
|
|||
// -
|
|||
// -
|
|||
//
|
|||
// ----------------------------------------------------------------------------
|
|||
// --------------
|
|||
// H3
|
|||
//
|
|||
// Mixin, no class to apply in selectors
|
|||
// see H3 in main.less
|
|||
// see also Caption in tables.less
|
|||
.mx-h3-caption {
|
|||
font-size : @table-caption-size ;
|
|||
//font-style: @h3-style;
|
|||
font-weight: @h3-weight;
|
|||
color: @table-caption-color !important ;
|
|||
padding: 0.2em 0 0.2em 0.2em;
|
|||
margin: 0.1em 0 0.4em 0 ;
|
|||
//margin: 0;
|
|||
text-align: left;
|
|||
letter-spacing: 0.12em;
|
|||
}
|
|||
// -------------------
|
|||
// Content-BLOCKS (Content-Boxes)
|
|||
//
|
|||
.mx-contentbox-properties {
|
|||
margin: @contentbox-margin ;
|
|||
padding: @contentbox-padding;
|
|||
}
|
|||
// --------------------------------------
|
|||
// Tables
|
|||
// --------------------------------------
|
|||
.mx-thead-th {
|
|||
color: @t-cell-head-text ;
|
|||
background-color: @t-cell-head-bg ;
|
|||
border-top: 1px solid @table-border-color;
|
|||
border-bottom: 1px solid @table-border-color;
|
|||
text-align: left ;
|
|||
vertical-align: middle ;
|
|||
}
|
|||
// --------------------------------------
|
|||
// Buttons
|
|||
// --------------------------------------
|
|||
.mx-button {
|
|||
display: inline-block ;
|
|||
cursor: pointer ;
|
|||
width: auto ;
|
|||
padding: 0.2em 0.6em;
|
|||
font-size: @font-size-smaller ;
|
|||
font-weight: normal;
|
|||
font-style: normal;
|
|||
text-align: center;
|
|||
border-style: solid;
|
|||
border-width: 1px;
|
|||
border-radius: @button-border-radius;
|
|||
}
|
|||
// -------------------
|
|||
// STRONG
|
|||
//
|
|||
// for links, labels, buttons (no :link pseudo class)
|
|||
.mx-button-standard{
|
|||
border: @button-strong-border ;
|
|||
background-color: @button-strong-bg ;
|
|||
color: @button-strong-color ;
|
|||
text-decoration: none;
|
|||
}
|
|||
// for hover, focus, active pseudo classes
|
|||
.mx-button-standard-hover-focus{
|
|||
&:hover{
|
|||
border: @button-strong-hover-border ;
|
|||
background-color: @button-strong-hover-bg;
|
|||
color: @button-strong-hover-color;
|
|||
text-decoration: none;
|
|||
}
|
|||
&:active,
|
|||
&:focus{
|
|||
border : @button-strong-active-border ;
|
|||
background-color: @button-strong-active-bg;
|
|||
color: @button-strong-active-color;
|
|||
text-decoration: none;
|
|||
}
|
|||
}
|
|||
// -------------------
|
|||
// NEUTRAL
|
|||
//
|
|||
// for links, labels, buttons (no :link pseudo class)
|
|||
.mx-button-neutral {
|
|||
border: @button-neutral-border ;
|
|||
background-color: @button-neutral-bg;
|
|||
color: @button-neutral-color;
|
|||
}
|
|||
// for hover, focus, active pseudo classes
|
|||
.mx-button-neutral-hover-focus {
|
|||
&:hover{
|
|||
border: @button-neutral-hover-border ;
|
|||
background-color: @button-neutral-hover-bg;
|
|||
color: @button-neutral-hover-color;
|
|||
text-decoration: none;
|
|||
}
|
|||
&:active,
|
|||
&:focus{
|
|||
border: @button-neutral-active-border ;
|
|||
background-color: @button-neutral-active-bg;
|
|||
color: @button-neutral-active-color;
|
|||
text-decoration: none;
|
|||
}
|
|||
}
|
|||