css/design40/less/mixins.less

   1 /* ------------------------------------------------------------- */
   2 /* MIXINS (mixins.less)                                          */
   3 /* ------------------------------------------------------------- */
   4
   5 // ----------------------------------------------------------------------------
   6 //
   7 // MIXINS (general sitewide properties)
   8 //
   9 // ----------------------------------------------------------------------------
  10 // DESCRIPTION:
  11 // Mixins can be used like variables and be written like a CSS-class
  12 // Do not apply these classes onto selectors but apply besides other properties
  13 // within a selector
  14 //
  15 // CONTENTS:
  16 // - H3 & CAPTION
  17 // - CONTENT-BLOCKS (Content-Boxes)
  18 // - -
  19 // -
  20 // -
  21 // -
  22 //
  23 // ----------------------------------------------------------------------------
  24
  25
  26
  27 // --------------
  28 // H3
  29 //
  30 // Mixin, no class to apply in selectors
  31 // see H3 in main.less
  32 // see also Caption in tables.less
  33 .mx-h3-caption {
  34   font-size :  @table-caption-size ;
  35   //font-style:  @h3-style;
  36   font-weight: @h3-weight;
  37   color:       @table-caption-color !important ;
  38   padding:     0.2em 0 0.2em 0.2em;
  39         margin: 0.1em 0 0.4em 0 ;
  40   //margin:      0;
  41   text-align:  left;
  42   letter-spacing: 0.12em;
  43 }
  44
  45 // -------------------
  46 // Content-BLOCKS (Content-Boxes)
  47 //
  48 .mx-contentbox-properties {
  49   margin:  @contentbox-margin ;
  50   padding: @contentbox-padding;
  51 }
  52
  53
  54 //  --------------------------------------
  55 //  Tables
  56 //  --------------------------------------
  57 .mx-thead-th {
  58   color:            @t-cell-head-text ;
  59   background-color: @t-cell-head-bg ;
  60   border-top:       1px solid @table-border-color;
  61   border-bottom:    1px solid @table-border-color;
  62   text-align:       left ;
  63   vertical-align:   middle ;
  64 }
  65 //  --------------------------------------
  66 //  Buttons
  67 //  --------------------------------------
  68 .mx-button {
  69   display:       inline-block ;
  70   cursor:        pointer ;
  71   width:         auto ;
  72   padding:       0.2em 0.6em;
  73   font-size:     @font-size-smaller ;
  74   font-weight:   normal;
  75   font-style:    normal;
  76   text-align:    center;
  77   border-style:  solid;
  78   border-width:  1px;
  79   border-radius: @button-border-radius;
  80 }
  81 // -------------------
  82 // STRONG
  83 //
  84 // for links, labels, buttons (no :link pseudo class)
  85 .mx-button-standard{
  86   border:                       @button-strong-border ;
  87   background-color: @button-strong-bg ;
  88   color:            @button-strong-color ;
  89   text-decoration:  none;
  90 }
  91 // for hover, focus, active pseudo classes
  92 .mx-button-standard-hover-focus{
  93   &:hover{
  94     border:                             @button-strong-hover-border ;
  95     background-color: @button-strong-hover-bg;
  96     color:            @button-strong-hover-color;
  97     text-decoration:  none;
  98   }
  99   &:active,
 100   &:focus{
 101     border                      :     @button-strong-active-border ;
 102     background-color: @button-strong-active-bg;
 103     color:            @button-strong-active-color;
 104     text-decoration:  none;
 105   }
 106 }
 107 // -------------------
 108 // NEUTRAL
 109 //
 110 // for links, labels, buttons (no :link pseudo class)
 111 .mx-button-neutral {
 112   border:                       @button-neutral-border ;
 113   background-color: @button-neutral-bg;
 114   color:            @button-neutral-color;
 115 }
 116 // for hover, focus, active pseudo classes
 117 .mx-button-neutral-hover-focus {
 118   &:hover{
 119     border:                                     @button-neutral-hover-border ;
 120     background-color:   @button-neutral-hover-bg;
 121     color:              @button-neutral-hover-color;
 122     text-decoration:    none;
 123   }
 124   &:active,
 125   &:focus{
 126     border:                             @button-neutral-active-border ;
 127     background-color: @button-neutral-active-bg;
 128     color:            @button-neutral-active-color;
 129     text-decoration:  none;
 130   }
 131 }
 132
 133
 134
 135