css/design40/less/responsive.less

   1 /* ------------------------------------------------------------- */
   2 /* RESPONSIVE (responsive.less)                          */
   3 /* ------------------------------------------------------------- */
   4
   5 //  --------------------------------------
   6 //  Medienabfragen und Beruecksichtigungen Plattformen
   7 //  --------------------------------------
   8 //  Handheld Hochformat width: 320px
   9 @media screen and (max-device-width: 479px) {
  10
  11 }
  12
  13
  14
  15 //  Handheld Querformat width: 480px
  16 @media screen and (min-device-width: 480px) and (max-device-width: 767px) {
  17
  18   body #content .tbl-horizontal th {
  19
  20     .colgroup col { width: @tcol-wi-lightwide ; }
  21
  22     width: @tcol-wi-normal ;
  23     background-color: #D6EEBF;
  24
  25     //  --------------
  26     //  Width of Columns (Dimensions)
  27     //
  28     &.wi-smallest    { width:  @tcol-wi-normal        ; }
  29     &.wi-verysmall   { width:  @tcol-wi-normal        ; }
  30     &.wi-small       { width:  @tcol-wi-normal        ; }
  31     &.wi-mediumsmall { width:  @tcol-wi-normal        ; }
  32     &.wi-normal      { width:  @tcol-wi-normal        ; }
  33     &.wi-lightwide   { width:  @tcol-wi-normal        ; }
  34     &.wi-wide        { width:  @tcol-wi-normal        ; }
  35     &.wi-wider       { width:  @tcol-wi-normal        ; }
  36     &.wi-verywide    { width:  @tcol-wi-normal        ; }
  37   }
  38 }
  39
  40
  41
  42 //  < Tablet Querformat
  43 @media screen and (max-device-width: 1024px) {
  44   body #content .tbl-horizontal th{
  45
  46     width: @tcol-wi-lightwide ;
  47     //background-color: #EEBBB7 !important; // TEST
  48
  49     //  --------------
  50     //  Width of Columns (Dimensions)
  51     //
  52     &.wi-smallest    { width:  @tcol-wi-normal        ; }
  53     &.wi-verysmall   { width:  @tcol-wi-normal        ; }
  54     &.wi-small       { width:  @tcol-wi-normal        ; }
  55     &.wi-mediumsmall { width:  @tcol-wi-normal        ; }
  56     &.wi-normal      { width:  @tcol-wi-normal        ; }
  57     &.wi-lightwide   { width:  @tcol-wi-normal        ; }
  58     &.wi-wide        { width:  @tcol-wi-normal        ; }
  59     &.wi-wider       { width:  @tcol-wi-normal        ; }
  60     &.wi-verywide    { width:  @tcol-wi-normal        ; }
  61   }
  62 }
  63
  64
  65 //  Tablet Hochformat
  66 @media screen and (min-device-width: 768px) and (max-device-width: 1023px) {
  67
  68   #content h1{
  69     // background-color: red ; // TEST
  70   }
  71
  72   //colgroup col:first-child,
  73   .tbl-horizontal th{
  74
  75     width: @tcol-wi-normal ;
  76
  77
  78     //  --------------
  79     //  Width of Columns (Dimensions)
  80     //
  81     &.wi-smallest    { width:  @tcol-wi-normal        ; }
  82     &.wi-verysmall   { width:  @tcol-wi-normal        ; }
  83     &.wi-small       { width:  @tcol-wi-normal        ; }
  84     &.wi-mediumsmall { width:  @tcol-wi-normal        ; }
  85     &.wi-normal      { width:  @tcol-wi-normal        ; }
  86     &.wi-lightwide   { width:  @tcol-wi-normal        ; }
  87     &.wi-wide        { width:  @tcol-wi-normal        ; }
  88     &.wi-wider       { width:  @tcol-wi-normal        ; }
  89     &.wi-verywide    { width:  @tcol-wi-normal        ; }
  90   }
  91 }
  92
  93 //  < Tablet Querformat
  94 @media screen and (max-device-width: 1024px) {
  95   .tbl-horizontal th{
  96
  97     width: @tcol-wi-normal ;
  98
  99     //  --------------
 100     //  Width of Columns (Dimensions)
 101     //
 102     &.wi-smallest    { width:  @tcol-wi-normal        ; }
 103     &.wi-verysmall   { width:  @tcol-wi-normal        ; }
 104     &.wi-small       { width:  @tcol-wi-normal        ; }
 105     &.wi-mediumsmall { width:  @tcol-wi-normal        ; }
 106     &.wi-normal      { width:  @tcol-wi-normal        ; }
 107     &.wi-lightwide   { width:  @tcol-wi-normal        ; }
 108     &.wi-wide        { width:  @tcol-wi-normal        ; }
 109     &.wi-wider       { width:  @tcol-wi-normal        ; }
 110     &.wi-verywide    { width:  @tcol-wi-normal        ; }
 111   }
 112 }
 113
 114
 115 //  Normale Bildschirme
 116 //@media screen and (min-device-width: 1260px)  {
 117 @media screen and (min-device-width: 1110px)  {
 118
 119 }