|
/* ------------------------------------------------------------- */
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|