css/design40/less/lists.less

   1 /* ------------------------------------------------------------- */
   2 /* LISTS (lists.less)                                            */
   3 /* ------------------------------------------------------------- */
   4
   5
   6
   7 // ----------------------------------------------------------------------------
   8 //
   9 // Lists
  10 //
  11 // ----------------------------------------------------------------------------
  12 // DESCRIPTION: UL or OL lists and some fake tables with DIVs
  13 //
  14 // CONTENTS:
  15 // - UNORDERED LISTS (UL)
  16 // - TABLES build with DIVS
  17 // - TABLES with PARAGRAPHS or DIVs for Checkboxes
  18 // ----------------------------------------------------------------------------
  19
  20
  21 // --------------------------------------
  22 // UNORDERED LISTS
  23 // --------------------------------------
  24 ul {
  25   list-style-type:       disc;
  26   list-style-position:   outside;
  27   list-style-image:     none;
  28   padding:               0 0 0 1.4em;
  29   margin:               0.4em 0 0.4em 0;
  30
  31   // with SUP-items for footnotes
  32   &.footnotes {
  33     list-style-type:       none !important ;
  34     list-style-position:   outside ;
  35     margin:               0 0 0 1.8em !important ;
  36     li {
  37       sup {
  38         display:   inline-block;
  39         margin:   0 0.6em 0 -2.6em;
  40         padding:   0;
  41       }
  42       & > ul {
  43         position:             relative;
  44         list-style-type:       circle ;
  45         list-style-position:   outside ;
  46         margin:               0.3em 0 0.3em 1.4em !important ;
  47       }
  48     }
  49
  50   } // /.footnotes
  51
  52   // List inside a list item
  53   li {
  54     ul {
  55       list-style-type:       circle ;
  56       list-style-position:   outside ;
  57       li { }
  58     }
  59   }
  60 }
  61
  62
  63
  64 //  --------------------------------------
  65 //  TABLES build with DIVS
  66 //  --------------------------------------
  67
  68 div.table {
  69   margin-bottom:   1.0em ;
  70   &.col {
  71     float:         left ;
  72     margin-right: 1.6em ;
  73   }
  74   div.caption {
  75     clear:         left ;
  76     display:       block ;
  77     font-weight:   bold ;
  78     color:         @table-caption-color ;
  79   }
  80   div.field {
  81     clear:         left ;
  82     display:       block ;
  83     overflow:     hidden ;
  84     margin-right:  2.0em ;
  85     // PENDENT: ueberpruefen wegen cke-Editor-Konflikte
  86     span.label {
  87       display:     inline-block ;
  88       float:       left ;
  89       min-width:   12em;
  90       width:       auto;
  91     }
  92     span.value {
  93       display:     inline-block ;
  94       float:       left ;
  95       min-width:   12em;
  96       width:       auto;
  97     }
  98   }
  99 }
 100
 101
 102 //  --------------------------------------
 103 //  TABLES with PARAGRAPHS or DIVs for Checkboxes
 104 //  --------------------------------------
 105 // PENDENT: siehe auch form-additions
 106 div.list {
 107   font-size:   @font-size-small ;
 108   color:       @t-cell-text-color ;
 109
 110   // A column with a list
 111   &.col {
 112     float: left ;
 113     margin-right:  2.6em !important ;
 114     width:         auto ;
 115     min-width:     110px ;
 116   }
 117   // List Title
 118   h4 {
 119     padding:       0.6em 0 0.2em 0.0em !important ;
 120     margin:       0.2em 0 0 0 ;
 121     font-weight:   normal;
 122     font-size:     @font-size-medium;
 123     font-family:   "Helvetica Neue", Helvetica, Arial; // PENDENT: in Variablen verlegen
 124     color:         @base-dark ;
 125   }
 126   // List Elements
 127   & > p,
 128   & > div {
 129     padding:       0.2em 0 0.2em 0 !important ;
 130     margin:       0 !important ;
 131     white-space:   normal ;
 132
 133     &>input[type="checkbox"],
 134     &>input[type="radio"] {
 135       padding:     0 ;
 136       margin:     0 0.3em 0.3em 0 ;
 137       float:       left ;
 138     }
 139     label {
 140       width:       auto ;
 141       float:       left ;
 142     }
 143   }
 144   &>p {
 145     //margin:     0 0 1.2em 0 !important ;
 146     overflow:     hidden ;
 147   }
 148   // Special Element but same like above (see Custom Vars)
 149   &>input[type="checkbox"] {
 150     clear:           both;
 151     float:           left;
 152     margin-right:   0.4em ;
 153   }
 154   &>label { width:   82% ; }
 155
 156   div { clear:       left }
 157
 158   & > div.no-rows {
 159     &>input[type="checkbox"],
 160     &>input[type="radio"] {
 161       padding:   0 ;
 162       margin:    0.3em 0.3em 0 0 ;
 163       clear:     left ;
 164     }
 165     label {
 166       width: 82% ;
 167       float: left ;
 168     }
 169   }
 170
 171 } // /div.list
 172
 173
 174
 175
 176 // PENDENT: wo eingesetzt?
 177 div.list-table-with-separate-total-table {
 178
 179   div.full-width {
 180     padding-bottom:  0 ;
 181     margin-bottom:   0 ;
 182
 183     .tbl-list {
 184       margin-bottom: 0 ;
 185     }
 186
 187   }
 188
 189   // Total-Tabelle
 190   // Separater Block mit Table ohne Body, nur Footer für Totals
 191   div.list-total {
 192     width:    100% ;
 193     margin:   0 ;
 194     padding:  0 ;
 195     overflow: hidden ;
 196
 197     table.footer-only {
 198       margin:  0 ;
 199       padding: 0 ;
 200       &.right { float: right ; }
 201     }
 202     div.after-item {  }
 203   }
 204 }