Revision 3fc38171
Von Andreas Rudin vor etwa 6 Jahren hinzugefügt
| css/less/scaffolding.less | ||
|---|---|---|
| 30 | 30 |
// -------------------------------------- |
| 31 | 31 |
|
| 32 | 32 |
body {
|
| 33 |
margin: 0 ; |
|
| 34 |
background-color: #efefef; |
|
| 35 |
color: #000000; |
|
| 36 |
font-family: @font-family-sans-serif; |
|
| 37 |
font-size: @font-size-base ; |
|
| 38 |
|
|
| 33 |
margin: 0 ; |
|
| 34 |
background-color: @body-bg; |
|
| 35 |
color: @brand-primary ; |
|
| 36 |
font-family: @font-family-sans-serif; |
|
| 37 |
font-size: @font-size-base ; |
|
| 39 | 38 |
|
| 40 | 39 |
|
| 41 | 40 |
|
| 42 | 41 |
// -------------------------------------- |
| 43 | 42 |
// Frame-Header |
| 44 | 43 |
// -------------------------------------- |
| 45 |
|
|
| 46 | 44 |
// Quicksearch, User, Client, Logout |
| 47 | 45 |
// see also frame-header.less |
| 48 | 46 |
#frame-header{
|
| ... | ... | |
| 53 | 51 |
|
| 54 | 52 |
|
| 55 | 53 |
|
| 56 |
|
|
| 57 |
|
|
| 58 | 54 |
// -------------------------------------- |
| 59 | 55 |
// MENUV3 |
| 60 | 56 |
// -------------------------------------- |
| 61 | 57 |
|
| 58 |
// admin section & |
|
| 59 |
& #menuv3:first-child{
|
|
| 60 |
top: 0 !important; |
|
| 61 |
} |
|
| 62 | 62 |
// see also menu.less |
| 63 | 63 |
#menuv3 {
|
| 64 |
z-index: @zindex-navbar;
|
|
| 65 |
position: fixed;
|
|
| 66 |
top: 28px ; |
|
| 67 |
width: 100%; |
|
| 68 |
height: 32px; |
|
| 64 |
position: fixed;
|
|
| 65 |
z-index: @zindex-navbar;
|
|
| 66 |
top: 28px ;
|
|
| 67 |
width: 100%;
|
|
| 68 |
height: 32px;
|
|
| 69 | 69 |
} |
| 70 | 70 |
|
| 71 | 71 |
|
| 72 | 72 |
|
| 73 |
|
|
| 74 |
|
|
| 75 | 73 |
// -------------------------------------- |
| 76 | 74 |
// LAYOUT-ACTIONBAR |
| 77 | 75 |
// -------------------------------------- |
| ... | ... | |
| 81 | 79 |
display: block; |
| 82 | 80 |
z-index: @zindex-actionbar; |
| 83 | 81 |
position: fixed; |
| 82 |
float: left !important; |
|
| 84 | 83 |
width: auto; |
| 85 |
float: right !important; |
|
| 86 | 84 |
top: 68px ; |
| 87 |
left: auto ;
|
|
| 85 |
left: 656px ;
|
|
| 88 | 86 |
right: 0.2em ; |
| 89 | 87 |
margin: 0 0.4em 0 0; |
| 90 | 88 |
padding: 0; |
| ... | ... | |
| 106 | 104 |
// -------------------------------------- |
| 107 | 105 |
// CONTENT |
| 108 | 106 |
// -------------------------------------- |
| 109 |
#content {
|
|
| 110 |
top: 104px; |
|
| 111 |
position: absolute; |
|
| 112 |
overflow: hidden; |
|
| 113 |
display: block; |
|
| 114 |
width: 100%; |
|
| 115 |
background-color: #fff; |
|
| 116 |
} |
|
| 117 |
|
|
| 118 |
|
|
| 119 |
|
|
| 120 |
|
|
| 121 |
// -------------------------------------- |
|
| 122 |
// Columns |
|
| 123 |
// -------------------------------------- |
|
| 124 |
|
|
| 125 |
|
|
| 126 |
// -------------- |
|
| 127 |
// Container with Columns (including clear-break) |
|
| 128 |
// |
|
| 129 |
|
|
| 130 |
.wrapper, |
|
| 131 |
.cols-no-padding{
|
|
| 132 |
clear: both; |
|
| 133 |
overflow: hidden; |
|
| 134 |
display: block; |
|
| 135 |
width: 100%; |
|
| 136 |
|
|
| 137 |
// -------------- |
|
| 138 |
// Single Column (DIV or TABLE) |
|
| 139 |
// |
|
| 140 |
|
|
| 141 |
.col, |
|
| 142 |
.col-left, |
|
| 143 |
.col-right{
|
|
| 144 |
display: block; |
|
| 145 |
overflow: hidden; |
|
| 146 |
p { font-size: 10pt; }
|
|
| 147 |
} |
|
| 148 |
.col, |
|
| 149 |
.col-left, |
|
| 150 |
.tbl-horizontal{
|
|
| 151 |
float: left; |
|
| 152 |
margin-right: 1.8em; |
|
| 153 |
} |
|
| 154 |
.col-right{
|
|
| 155 |
float: right; |
|
| 156 |
margin-left: 2.0em; |
|
| 157 |
} |
|
| 158 |
// Centered Column |
|
| 159 |
&.center{
|
|
| 160 |
margin: 0 auto; |
|
| 161 |
display: table; |
|
| 162 |
width: auto; |
|
| 163 |
} |
|
| 164 |
|
|
| 165 |
// PENDENT: anschauen |
|
| 166 |
&.width-moderate{
|
|
| 167 |
width: auto; |
|
| 107 |
& > #content {
|
|
| 108 |
overflow: hidden; |
|
| 109 |
display: block; |
|
| 110 |
padding: @content-padding; |
|
| 111 |
margin: @content-margin; |
|
| 112 |
|
|
| 113 |
|
|
| 114 |
|
|
| 115 |
|
|
| 116 |
// -------------------------------------- |
|
| 117 |
// Wrapper & Columns |
|
| 118 |
// -------------------------------------- |
|
| 119 |
// PENDENT: .cols-no-padding??? |
|
| 120 |
.wrapper{
|
|
| 121 |
clear: both; |
|
| 122 |
display: block; |
|
| 123 |
overflow: hidden; |
|
| 124 |
width: auto; |
|
| 125 |
height: auto; |
|
| 126 |
|
|
| 127 |
// -------------- |
|
| 128 |
// Single Column (DIV or HORIZONTAL TABLE) |
|
| 129 |
// |
|
| 130 |
& > .col {
|
|
| 131 |
display: block; |
|
| 132 |
overflow: hidden; |
|
| 133 |
float: left; |
|
| 134 |
margin-right: 1.6em; |
|
| 135 |
div label {
|
|
| 136 |
font-size: 10pt; |
|
| 137 |
line-height: 12.6pt; |
|
| 138 |
} |
|
| 139 |
p { font-size: @font-size-small }
|
|
| 140 |
} |
|
| 141 |
& > .col, |
|
| 142 |
& > .tbl-horizontal{
|
|
| 143 |
float: left; |
|
| 144 |
margin-right: 1.6em; |
|
| 145 |
padding-bottom: 2px ; // needed to avoid crops of buttons |
|
| 146 |
} |
|
| 147 |
// Centered Column |
|
| 148 |
&.center{
|
|
| 149 |
margin: 0 auto; |
|
| 150 |
display: table; |
|
| 151 |
width: auto; |
|
| 152 |
} |
|
| 153 |
// PENDENT: anschauen |
|
| 154 |
&.width-moderate{
|
|
| 155 |
width: auto; |
|
| 156 |
} |
|
| 168 | 157 |
} |
| 169 |
|
|
| 170 |
} |
|
| 171 |
// /.cols |
|
| 172 |
|
|
| 173 |
// columns-container with padding |
|
| 174 |
// .cols {
|
|
| 175 |
// margin: @contentbox-margin ; |
|
| 176 |
// |
|
| 177 |
// &.test .col {
|
|
| 178 |
// border: 1px #6CF solid; |
|
| 179 |
// } |
|
| 180 |
// } |
|
| 158 |
// /.wrapper |
|
| 181 | 159 |
|
| 182 | 160 |
|
| 183 | 161 |
|
| 184 |
|
|
| 185 |
// -------------------------------------- |
|
| 186 |
// Single Column |
|
| 187 |
// -------------------------------------- |
|
| 188 |
|
|
| 189 |
// only for seldom exceptions |
|
| 190 |
// PENDENT: genauer anschauen |
|
| 191 |
.col{
|
|
| 192 |
display: block; |
|
| 193 |
overflow: hidden; |
|
| 194 |
float: left; |
|
| 195 |
margin-right: 3.0em; |
|
| 196 |
|
|
| 197 |
&.test { }
|
|
| 198 |
|
|
| 199 |
div label {
|
|
| 200 |
font-size: 10pt; |
|
| 201 |
line-height: 12.6pt; |
|
| 162 |
// -------------------------------------- |
|
| 163 |
// UI-TABS-PANEL |
|
| 164 |
// -------------------------------------- |
|
| 165 |
.ui-tabs-panel {
|
|
| 166 |
background-color: @tabs-bg; |
|
| 202 | 167 |
} |
| 203 |
} |
|
| 204 | 168 |
|
| 205 | 169 |
|
| 170 |
} // /#content |
|
| 206 | 171 |
|
| 207 | 172 |
|
| 208 | 173 |
|
| ... | ... | |
| 210 | 175 |
// WRAPPER POSITIONS-TABLE (FULL-WIDTH) |
| 211 | 176 |
// -------------------------------------- |
| 212 | 177 |
// Special Container with Full-Width-Table (Positions) and Show/Hide-Buttons |
| 213 |
.fullwidth {
|
|
| 178 |
// PENDENT: woanders plazieren |
|
| 179 |
.full-width {
|
|
| 214 | 180 |
width: 100% ; |
| 215 | 181 |
padding: 0 0 1.0em 0 ; |
| 216 | 182 |
margin: 0 0 0 0; |
| ... | ... | |
| 221 | 187 |
&.positions{ }
|
| 222 | 188 |
} |
| 223 | 189 |
|
| 224 |
|
|
| 225 |
|
|
| 226 |
// -------------------------------------- |
|
| 227 |
// DIVERS COMPONENTS |
|
| 228 |
// -------------------------------------- |
|
| 229 |
|
|
| 230 |
// Um Tabellen auf gleiche Breite (100%) zu setzen |
|
| 231 |
// Im HTML-Element kann beispielsweise das Attribut 'style="width:60em;"' gesetzt sein |
|
| 232 |
// Die Tabellen muessen das style-Attribut 'style="width:100%;"' enthalten, |
|
| 233 |
// um gleichmaessig ueber den Wrapper gespannt zu sein. |
|
| 234 |
// PENDENT: braucht es eventuell nicht |
|
| 235 |
.wrapper{
|
|
| 236 |
|
|
| 237 |
.col, |
|
| 238 |
.col-left {
|
|
| 239 |
float: left; |
|
| 240 |
} |
|
| 241 |
.col-right {
|
|
| 242 |
float: right; |
|
| 243 |
padding-right: 0 ; |
|
| 244 |
padding-left: 1.0em ; |
|
| 245 |
} |
|
| 246 |
|
|
| 247 |
} |
|
| 248 |
|
|
| 249 |
|
|
| 250 |
// zentrierte Elemente |
|
| 251 |
// PENDENT: braucht es das? |
|
| 190 |
// zentrierte Elemente |
|
| 191 |
// PENDENT: braucht es das? |
|
| 252 | 192 |
div.center{
|
| 253 | 193 |
margin: 0 auto; |
| 254 | 194 |
display: table; |
| ... | ... | |
| 259 | 199 |
} |
| 260 | 200 |
// /body |
| 261 | 201 |
|
| 262 |
|
|
| 263 |
|
|
| 264 |
|
|
| 265 |
|
|
| 266 |
|
|
| 267 |
// -------------------------------------- |
|
| 268 |
// MEDIA: Print |
|
| 269 |
// -------------------------------------- |
|
| 270 |
|
|
| 271 |
// PENDENT: Druckversion erstellen |
|
| 272 |
// PENDENT: noch erweitern |
|
| 273 |
|
|
| 274 |
@media print {
|
|
| 275 |
#menuv3, |
|
| 276 |
#html-menu, |
|
| 277 |
#frame-header, |
|
| 278 |
#main_menu_div, |
|
| 279 |
#js-header {
|
|
| 280 |
display: none; |
|
| 281 |
} |
|
| 282 |
#content.html-menu { margin-left: 0; }
|
|
| 283 |
} |
|
| 284 |
|
|
| 285 |
|
|
Auch abrufbar als: Unified diff
HP Aenderungen bis Oktober 2018