Revision cd670dfa
Von Hans Peter Schlaepfer vor etwa 5 Jahren hinzugefügt
- ID cd670dfafdb3560614634765e2a377946ff1809b
- Vorgänger ff33b093
| css/less/variables.less | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* VARIABLES (variables.less) */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
|
|
| 1 | 5 |
// ---------------------------------------------------------------------------- |
| 2 | 6 |
// |
| 3 | 7 |
// VARIABLES (Less-Style) for general use (most of it is Bootstrap-Stuff) |
| ... | ... | |
| 18 | 22 |
// - Font family |
| 19 | 23 |
// - Font size |
| 20 | 24 |
// - Line height |
| 21 |
// - Heading 1 - 6
|
|
| 25 |
// - Heading 1 - 4
|
|
| 22 | 26 |
// - Heading 1 (H1) |
| 23 |
// - ICONOGRAPHY |
|
| 27 |
// - Heading Controlpanels |
|
| 28 |
// - Data Types |
|
| 29 |
// - ICONOGRAPHY (ggf. OBSOLETE) |
|
| 30 |
// - PAGE COMPONENTS |
|
| 31 |
// - Z-Index |
|
| 32 |
// - Dashboard (frame-header) |
|
| 33 |
// - Menu Top (CSS) |
|
| 34 |
// - Menu Left (JS) |
|
| 35 |
// - Context Menu (layout-actionbar) -> missing |
|
| 36 |
// - Component properties |
|
| 37 |
// - Tabs |
|
| 24 | 38 |
// - TABLES |
| 25 | 39 |
// - Table & Caption |
| 26 | 40 |
// - Table Cells |
| 27 |
// - Dimensions (Table Cells Only) |
|
| 41 |
// - Zebra effect in list tables |
|
| 42 |
// - Dimensions (Table Cells Only) (OBSOLETE) |
|
| 28 | 43 |
// - BUTTONS |
| 44 |
// - STANDARD-Button Strong (with Submission / data manipulation) |
|
| 45 |
// - NEUTRAL-Button (NO Submission) |
|
| 46 |
// - Diverse Button states |
|
| 47 |
// - DROPDOWNS (OBSOLETE) |
|
| 29 | 48 |
// - FORMS |
| 30 |
// - Input fields
|
|
| 49 |
// - Input elements
|
|
| 31 | 50 |
// - Legend, Labels, Fieldsets |
| 32 | 51 |
// - Highlighting (Focus and so on) |
| 33 |
// - Dimensions (input, select) |
|
| 34 |
// - DROPDOWNS |
|
| 35 |
// - COMPONENTS |
|
| 36 |
// - Z-Index |
|
| 37 |
// - Dashboard (frame-header) |
|
| 38 |
// - Menu (menuv3) |
|
| 39 |
// - Context-Menu (layout-actionbar) -> missing |
|
| 40 |
// - Component properties |
|
| 52 |
// - Dimensions (input, select) (OBSOLETE) |
|
| 41 | 53 |
// - MESSAGES |
| 42 |
// - Messages Old Style |
|
| 43 |
// - Flash Messages |
|
| 44 | 54 |
// - DIMENSIONS |
| 45 |
// - Standard Dimensions |
|
| 46 |
// - Dimensions for Table Colums (COL) |
|
| 55 |
// - Standard Dimensions (even for TABLE CELLS) |
|
| 56 |
// - Dimensions for for DIVs |
|
| 57 |
// - Dimensions for Table Colums (TH, TD & Col) |
|
| 58 |
// - Dimensions for combined rows with combination Table column widths |
|
| 59 |
// - Dimensions for Form input elements |
|
| 60 |
// - Dimensions for Form Select elements |
|
| 61 |
// - Dimensions for Textarea elements with standard dimensions |
|
| 62 |
// - |
|
| 63 |
// - |
|
| 47 | 64 |
// ---------------------------------------------------------------------------- |
| 48 | 65 |
|
| 49 | 66 |
|
| 50 |
// -------------------------------------- |
|
| 51 |
// COLORS |
|
| 52 |
// -------------------------------------- |
|
| 53 |
// Base Colors see variables_color_scheme.less |
|
| 54 | 67 |
|
| 55 | 68 |
|
| 69 |
// -------------------------------------- |
|
| 70 |
// COLORS (GREYs, BRAND COLORS & OTHERS) |
|
| 71 |
// -------------------------------------- |
|
| 72 |
// Base Colors see variables_color[*-9].less |
|
| 73 |
// Include the preferred color scheme in style.less before including this less file |
|
| 56 | 74 |
|
| 57 |
// ------------------- |
|
| 75 |
// -----------------------
|
|
| 58 | 76 |
// General text color (label & data) |
| 59 |
// |
|
| 77 |
// -----------------------
|
|
| 60 | 78 |
// Standard text |
| 61 | 79 |
@brand-primary: @brand-text-color; |
| 62 | 80 |
@brand-label: @brand-data-label-color; |
| 63 | 81 |
@brand-label-bg: @brand-lighter; |
| 64 | 82 |
|
| 65 |
// Messages & info types |
|
| 83 |
// ----------------------- |
|
| 84 |
// MESSAGES & INFO TYPES |
|
| 85 |
// ----------------------- |
|
| 86 |
// color definitions in variables_color_[*-9].less |
|
| 66 | 87 |
@brand-ok: @color-green-strong; |
| 67 | 88 |
@brand-ok-bg: @color-green-light; |
| 68 | 89 |
|
| ... | ... | |
| 82 | 103 |
@brand-negative-bg: @color-red-light; |
| 83 | 104 |
|
| 84 | 105 |
|
| 85 |
// ------------------- |
|
| 86 |
// Messages & info types |
|
| 87 |
// |
|
| 88 |
@brand-ok: @color-green-strong; |
|
| 89 |
@brand-ok-bg: @color-green-light; |
|
| 90 |
|
|
| 91 |
@brand-error: @color-red-strong; |
|
| 92 |
@brand-error-bg: @color-red-light; |
|
| 93 |
|
|
| 94 |
@brand-info: @color-blue-strong; |
|
| 95 |
@brand-info-bg: @color-blue-light; |
|
| 96 | 106 |
|
| 97 |
@brand-warning: @color-orange-strong; |
|
| 98 |
@brand-warning-bg: @color-orange-light; |
|
| 99 | 107 |
|
| 100 |
// Positive & negative colors |
|
| 101 |
@brand-positive: @color-green-strong; |
|
| 102 |
@brand-positive-bg: @color-green-light; |
|
| 103 |
@brand-negative: @color-red-strong; |
|
| 104 |
@brand-negative-bg: @color-red-light; |
|
| 105 | 108 |
|
| 106 |
|
|
| 107 |
|
|
| 108 |
// -------------- |
|
| 109 |
// Content Boxes |
|
| 110 |
// |
|
| 109 |
// -------------------------------------- |
|
| 110 |
// CONTENT CONTAINER |
|
| 111 |
// -------------------------------------- |
|
| 111 | 112 |
|
| 112 | 113 |
@text-min-width: 400px ; |
| 113 | 114 |
@text-max-width: 600px ; |
| 114 | 115 |
|
| 115 |
|
|
| 116 | 116 |
// like Wrappers, Colums Containers, Flash-Messages and Record Selection |
| 117 |
@content-padding: 0 0 0 0; // 0 is OK otherwise there will be a border after the ui-tabs-panels |
|
| 118 |
@content-margin: 104px 0 1.0em 0; // PENDENT: ueberpruefen |
|
| 117 |
//@content-padding: 0 0 0 0; // 0 is OK otherwise there will be a border after the ui-tabs-panels |
|
| 118 |
//@content-margin: 101px 0 1.0em 0; // PENDENT: ueberpruefen |
|
| 119 |
// working alternative |
|
| 120 |
@content-padding: 101px 0 0 0; // 0 is OK otherwise there will be a border after the ui-tabs-panels |
|
| 121 |
@content-margin: 0 0 1.0em 0; // PENDENT: ueberpruefen |
|
| 119 | 122 |
|
| 120 | 123 |
|
| 121 |
@margin-left-from-content: 0.6em ; // directly inside #content |
|
| 124 |
|
|
| 125 |
@margin-left-from-content: 1.2em ; // directly inside #content |
|
| 122 | 126 |
@margin-left-from-wrapper: 0 ; // directly inside .wrapper |
| 123 | 127 |
|
| 124 | 128 |
@margin-from-content: 1em 1em 1em @margin-left-from-content ; // directly inside #content |
| ... | ... | |
| 133 | 137 |
@messages-min-width: 60.0em; |
| 134 | 138 |
@messages-max-width: 40.0em; |
| 135 | 139 |
|
| 136 |
|
|
| 137 |
@contentbox-margin: 1.0em 1.0em 1.0em 0.6em ; |
|
| 140 |
@contentbox-margin: 1.0em 1.0em 1.0em @margin-from-panel-left ; |
|
| 138 | 141 |
@contentbox-padding: 0.6em 1.0em 1.2em 1.8em ; |
| 139 | 142 |
@contentbox-radius: 0.6em ; |
| 140 | 143 |
|
| 141 |
// -------------- |
|
| 142 |
// Content Panels |
|
| 143 |
// |
|
| 144 |
@controlpanel-margin: @contentbox-margin ; |
|
| 145 |
@controlpanel-padding: 1.2em 1.0em 0.8em 1.2em ; |
|
| 146 |
@controlpanel-padding-bold: 0.8em 1.0em 1.4em 1.2em ; |
|
| 147 |
@controlpanel-bg: @brand-lighter ; |
|
| 148 |
@controlpanel-color: @brand-darkest ; |
|
| 149 |
@controlpanel-border: 1px @brand-darkest solid ; |
|
| 150 |
@controlpanel-radius: @contentbox-radius ; |
|
| 151 |
@controlpanel-bg-hover: @brand-darkest ; |
|
| 152 |
@controlpanel-bg-hover-text:@brand-light ; |
|
| 153 |
@controlpanel-active-bg: @brand-strong-dimmed ; |
|
| 154 |
@controlpanel-active-text: @brand-lighter ; |
|
| 155 |
|
|
| 156 |
@controlpanel-h3-color: @brand-heading-color ; |
|
| 157 |
@controlpanel-h3-size: 110% ; |
|
| 158 |
@controlpanel-h3-style: normal ; |
|
| 159 |
@controlpanel-h3-weight: normal ; |
|
| 160 |
|
|
| 161 |
@controlpanel-h4-color: @brand-heading-color ; |
|
| 162 |
@controlpanel-h4-size: 105% ; |
|
| 163 |
@controlpanel-h4-weight: bold ; |
|
| 164 |
@controlpanel-h4-style: normal ; |
|
| 144 |
// ----------------------- |
|
| 145 |
// Component properties |
|
| 146 |
// ----------------------- |
|
| 147 |
// Based on 14px font-size and 1.428 line-height (~20px to start) |
|
| 148 |
// PENDENT: UI-Tabs und so weiter |
|
| 149 |
// PENDENT: genauer anschauen, ggf. obsolete da nicht verwendet |
|
| 150 |
|
|
| 151 |
@padding-base-vertical: 6px; |
|
| 152 |
@padding-base-horizontal: 12px; |
|
| 153 |
|
|
| 154 |
@padding-large-vertical: 10px; |
|
| 155 |
@padding-large-horizontal: 16px; |
|
| 156 |
|
|
| 157 |
@padding-small-vertical: 5px; |
|
| 158 |
@padding-small-horizontal: 10px; |
|
| 159 |
|
|
| 160 |
@line-height-large: 1.33; |
|
| 161 |
@line-height-small: 1.5; |
|
| 162 |
|
|
| 163 |
@border-radius-base: 4px; |
|
| 164 |
@border-radius-large: 6px; |
|
| 165 |
@border-radius-small: 3px; |
|
| 166 |
|
|
| 167 |
@component-active-color: @brand-superlight; |
|
| 168 |
@component-active-bg: @brand-primary; // PENDENT: Variable nicht vorgesehen dafuer |
|
| 169 |
|
|
| 170 |
@caret-width-base: 4px; |
|
| 171 |
@caret-width-large: 5px; |
|
| 172 |
|
|
| 173 |
@margin-from-panel-left: 1.2em; // for panels and wrappers |
|
| 174 |
|
|
| 175 |
@padding-databoxes-left: 0.6em ; // for input, span.data in data tables |
|
| 176 |
|
|
| 177 |
|
|
| 178 |
|
|
| 165 | 179 |
|
| 166 |
// select item control panel |
|
| 167 |
@controlpanel-select-item-padding: 0.6em 1.0em 0.6em 0.8em ; |
|
| 168 | 180 |
|
| 169 |
@instructionbox-bg: @controlpanel-bg ; |
|
| 170 |
@instructionbox-border: 1px @brand-darkest solid ; |
|
| 171 | 181 |
|
| 172 | 182 |
|
| 173 | 183 |
|
| ... | ... | |
| 181 | 191 |
|
| 182 | 192 |
|
| 183 | 193 |
|
| 194 |
|
|
| 195 |
|
|
| 184 | 196 |
// -------------------------------------- |
| 185 | 197 |
// TYPOGRAPHY |
| 186 | 198 |
// -------------------------------------- |
| 187 | 199 |
|
| 188 |
// -------------- |
|
| 200 |
// -----------------------
|
|
| 189 | 201 |
// Font family |
| 190 |
// |
|
| 202 |
// -----------------------
|
|
| 191 | 203 |
@font-family-sans-serif: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif ; |
| 192 | 204 |
@font-family-serif: Georgia, "Times New Roman", Times, serif ; |
| 193 | 205 |
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; |
| 194 | 206 |
|
| 195 | 207 |
@font-family-base: @font-family-sans-serif; |
| 196 | 208 |
|
| 197 |
// -------------- |
|
| 209 |
// -----------------------
|
|
| 198 | 210 |
// Font size |
| 199 |
// |
|
| 211 |
// -----------------------
|
|
| 200 | 212 |
@font-size-base: 11pt; // vorh.14px |
| 201 | 213 |
@font-size-large: ceil(@font-size-base * 1.25); // ~18px |
| 202 | 214 |
@font-size-medium: ceil(@font-size-base * 1.0 ); // ~18px |
| ... | ... | |
| 204 | 216 |
@font-size-smaller: ceil(@font-size-base * 0.76); // ~12px |
| 205 | 217 |
@font-size-verysmall: ceil(@font-size-base * 0.6); // ~12px |
| 206 | 218 |
|
| 207 |
// -------------- |
|
| 219 |
// -----------------------
|
|
| 208 | 220 |
// Line height |
| 209 |
// |
|
| 221 |
// -----------------------
|
|
| 210 | 222 |
@line-height-base: 1.428571429; // 20/14 |
| 211 | 223 |
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px |
| 212 | 224 |
|
| 213 |
|
|
| 214 |
// -------------- |
|
| 215 |
// Heading 1-6 |
|
| 216 |
// |
|
| 225 |
// ----------------------- |
|
| 226 |
// Heading 1-4 |
|
| 227 |
// ----------------------- |
|
| 217 | 228 |
@headings-font-family: @font-family-base; |
| 218 | 229 |
@headings-weight: 500; |
| 219 | 230 |
@headings-line-height: 1.3em; |
| ... | ... | |
| 240 | 251 |
@h3-weight: normal; |
| 241 | 252 |
@h4-weight: normal; |
| 242 | 253 |
|
| 243 |
// -------------- |
|
| 254 |
// -----------------------
|
|
| 244 | 255 |
// Heading 1 (H1) |
| 256 |
// ----------------------- |
|
| 245 | 257 |
// Fixed on top of every page together with the action bar |
| 246 |
@h1-color: @brand-h1-color;
|
|
| 247 |
@h1-bg: @brand-h1-bg;
|
|
| 248 |
@h1-padding: 0.7em 0.5em 0.7em 0.7em;
|
|
| 249 |
@h1-margin: 0;
|
|
| 258 |
@brand-h1-color: @_brand-h1-color;
|
|
| 259 |
@brand-h1-bg: @_brand-h1-bg;
|
|
| 260 |
@h1-padding: 0.7em 0.5em 0.7em 1.3em;
|
|
| 261 |
@h1-margin: 0;
|
|
| 250 | 262 |
|
| 263 |
// ----------------------- |
|
| 251 | 264 |
// Heading Controlpanels |
| 252 |
|
|
| 265 |
// ----------------------- |
|
| 253 | 266 |
@h3-controlpanel-size: @h3-size; |
| 254 | 267 |
@h4-controlpanel-size: @h4-size; |
| 255 | 268 |
|
| ... | ... | |
| 257 | 270 |
@h4-controlpanel-style: bold; |
| 258 | 271 |
|
| 259 | 272 |
@h3-controlpanel-weight: normal; |
| 260 |
@he-controlpanel-weight: bold; |
|
| 261 |
|
|
| 273 |
@h4-controlpanel-weight: bold; |
|
| 262 | 274 |
|
| 263 |
// ------------------- |
|
| 275 |
// -----------------------
|
|
| 264 | 276 |
// Data types |
| 265 |
// |
|
| 277 |
// -----------------------
|
|
| 266 | 278 |
@heading-and-label-color: @brand-data-label-color ; |
| 267 | 279 |
@heading-and-label-bg: @brand-data-label-color ; |
| 268 | 280 |
@data-color: @brand-data-color ; |
| ... | ... | |
| 273 | 285 |
|
| 274 | 286 |
|
| 275 | 287 |
// -------------------------------------- |
| 276 |
// Iconography |
|
| 288 |
// Iconography (ggf. OBSOLETE)
|
|
| 277 | 289 |
// -------------------------------------- |
| 278 | 290 |
//@icon-font-path: "../bootstrap/fonts/"; |
| 279 | 291 |
//@icon-font-name: "glyphicons-halflings-regular"; |
| ... | ... | |
| 281 | 293 |
|
| 282 | 294 |
|
| 283 | 295 |
|
| 296 |
|
|
| 284 | 297 |
// -------------------------------------- |
| 285 |
// TABLES
|
|
| 298 |
// PAGE COMPONENTS
|
|
| 286 | 299 |
// -------------------------------------- |
| 287 | 300 |
|
| 288 |
// -------------- |
|
| 289 |
// Table & Caption |
|
| 290 |
// |
|
| 291 |
@table-bg: transparent; // overall background-color |
|
| 292 |
@table-bg-accent: @brand-lighter; // for striping |
|
| 293 |
@table-bg-hover: #ffffff; |
|
| 294 |
@table-bg-active: @table-bg-hover; |
|
| 295 |
@table-border-color: @brand-darkest; // table and cell border |
|
| 296 |
|
|
| 297 |
@table-caption-bg: transparent ; |
|
| 298 |
@table-caption-color: @brand-darkest; |
|
| 299 |
@table-caption-size: @h3-size - 1pt ; |
|
| 300 |
@table-caption-style: @h3-style ; |
|
| 301 |
@table-caption-weight: @h3-weight ; |
|
| 301 |
// ----------------------- |
|
| 302 |
// Z-index |
|
| 303 |
// ----------------------- |
|
| 304 |
// Stack-/Layer Positions of components |
|
| 305 |
// only for specialists |
|
| 302 | 306 |
|
| 307 |
// General |
|
| 308 |
@zindex-dropdown: 1000; |
|
| 309 |
@zindex-popover: 1010; |
|
| 310 |
@zindex-tooltip: 1030; |
|
| 311 |
@zindex-navbar-fixed: 1030; |
|
| 312 |
@zindex-modal-background: 1040; |
|
| 313 |
@zindex-modal: 1050; |
|
| 303 | 314 |
|
| 304 |
// -------------- |
|
| 305 |
// Table Cells |
|
| 306 |
// |
|
| 307 |
@t-cell-padding: 8px; |
|
| 308 |
@t-cell-padding-condensed: 5px; |
|
| 315 |
// Components |
|
| 316 |
@zindex-dashboard: 1040; // frame-header |
|
| 317 |
@zindex-navbar: 1999; // menuv3 must be on top |
|
| 318 |
@zindex-h1: 1020; // h1 inside content |
|
| 309 | 319 |
|
| 310 |
@t-cell-text-color: @brand-darkest; |
|
| 320 |
@zindex-actionbar: 1030; // action-bar (Workflow) |
|
| 321 |
@zindex-actionbar-action: 1031; |
|
| 322 |
@zindex-actionbar-combobox: 1031; |
|
| 323 |
@zindex-actionbar-combobox-head: 1033; |
|
| 324 |
@zindex-actionbar-combobox-list: 1032; |
|
| 311 | 325 |
|
| 312 |
@t-cell-head-bg: @brand-strong; |
|
| 313 |
@t-cell-head-bg-accent: @gray-light; |
|
| 314 |
@t-cell-head-text: @brand-light; |
|
| 315 |
@t-cell-head-text-accent: @brand-lighter; |
|
| 326 |
// ----------------------- |
|
| 327 |
// DASHBOARD (FRAME HEADER) |
|
| 328 |
// ----------------------- |
|
| 329 |
@dashbrd_bg: @_dashbrd_bg ; |
|
| 330 |
@dashbrd_text: @_dashbrd_text ; |
|
| 331 |
@dashbrd_link: @_dashbrd_link ; |
|
| 332 |
@dashbrd_link_hover: @_dashbrd_link_hover ; |
|
| 333 |
@dashbrd_link_deco: underline ; |
|
| 334 |
@dashbrd_input_bg: @_dashbrd_input_bg; |
|
| 335 |
@dashbrd_input_text: @_dashbrd_input_text ; |
|
| 316 | 336 |
|
| 317 |
@t-cell-label-text: @brand-strong-dimmed; |
|
| 318 |
@t-cell-label-text-accent: @brand-strong-dimmed-hover; |
|
| 319 |
@t-cell-data-text: @brand-darkest; |
|
| 320 |
@t-cell-data-text-accent: @brand-darkest; |
|
| 337 |
// ----------------------- |
|
| 338 |
// Menue (menuv3) |
|
| 339 |
// ----------------------- |
|
| 340 |
@menu_bg: @_menu_bg ; |
|
| 341 |
@menu_link: @_menu_link ; |
|
| 321 | 342 |
|
| 343 |
@menu_link_bg: @_menu_link_bg ; // display:block |
|
| 344 |
@menu_link_hover: @_menu_link_hover ; |
|
| 345 |
@menu_link_hover_bg: @_menu_link_hover_bg ; |
|
| 346 |
@menu_link_hover_deco: underline ; |
|
| 347 |
@menu_border_color: @_menu_border_color ; |
|
| 348 |
@menu_border: 1px @menu_border_color solid ; |
|
| 349 |
|
|
| 350 |
@menu_link_bg_level1: @_menu_link_bg_level1 ; |
|
| 351 |
@menu_link_bg_level1_hover: @_menu_link_bg_level1_hover ; |
|
| 352 |
@menu_link_bg_level2: @_menu_link_bg_level2 ; |
|
| 353 |
@menu_link_bg_level2_hover: @_menu_link_bg_level2_hover ; |
|
| 354 |
@menu_link_bg_level3: @_menu_link_bg_level3 ; |
|
| 355 |
@menu_link_bg_level3_hover: @_menu_link_bg_level3_hover ; |
|
| 356 |
|
|
| 357 |
|
|
| 358 |
// ----------------------- |
|
| 359 |
// Menu Left (JS & HTML) |
|
| 360 |
// ----------------------- |
|
| 361 |
@menu_left_level_1_color: @_menu_left_level_1_color ; |
|
| 362 |
@menu_left_level_1_bg: @_menu_left_level_1_bg ; |
|
| 363 |
@menu_left_level_1_hover_color: @_menu_left_level_1_hover_color ; |
|
| 364 |
@menu_left_level_1_hover_bg: @_menu_left_level_1_hover_bg ; |
|
| 365 |
@menu_left_level_2_color: @_menu_left_level_2_color ; |
|
| 366 |
@menu_left_level_2_bg: @_menu_left_level_2_bg ; |
|
| 367 |
@menu_left_level_2_hover_color: @_menu_left_level_2_hover_color ; |
|
| 368 |
@menu_left_level_2_hover_bg: @_menu_left_level_2_hover_bg ; |
|
| 369 |
@menu_left_level_3_color: @_menu_left_level_3_color ; |
|
| 370 |
@menu_left_level_3_bg: @_menu_left_level_3_bg ; |
|
| 371 |
@menu_left_level_3_hover_color: @_menu_left_level_3_hover_color ; |
|
| 372 |
@menu_left_level_3_hover_bg: @_menu_left_level_3_hover_bg ; |
|
| 373 |
|
|
| 374 |
// Additional Variables for Menu Left (JS) |
|
| 375 |
@menu_open_color: @_menu_open_color; |
|
| 376 |
@menu_open_bg: @_menu_open_bg; |
|
| 377 |
|
|
| 378 |
// ----------------------- |
|
| 379 |
// CONTEXT-MENU (LAYOUT-ACTIONBAR) |
|
| 380 |
// ----------------------- |
|
| 381 |
@actionbar-bg: @_actionbar-bg; |
|
| 382 |
@actionbar-bg-active: @_actionbar-bg-active; |
|
| 383 |
//@actionbar-bg-hover: @_actionbar-bg-hover; |
|
| 384 |
@actionbar-font-color: @_actionbar-font-color; |
|
| 385 |
@actionbar-font-color-active: @_actionbar-font-color-active; |
|
| 386 |
@actionbar-border-color: @_actionbar-border-color; |
|
| 387 |
@actionbar-border-color-active: @_actionbar-border-color-active; |
|
| 388 |
@actionbar-hover-bg: @_actionbar-hover-bg; |
|
| 389 |
@actionbar-hover-color: @_actionbar-hover-color; |
|
| 390 |
@actionbar-border-radius: 4px ; |
|
| 391 |
|
|
| 392 |
// ----------------------- |
|
| 393 |
// Tabs |
|
| 394 |
// ----------------------- |
|
| 395 |
// background tabs panel (data/content) |
|
| 396 |
|
|
| 397 |
@tabs-bg: @_tabs-bg ; |
|
| 398 |
@tabs-panel-bg: @_tabs-panel-bg ; |
|
| 399 |
@tabs-border-color: @_tabs-border-color ; |
|
| 400 |
@tabs-border-radius: 4px ; |
|
| 401 |
|
|
| 402 |
@tabs-default-bg: @_tabs-default-bg; |
|
| 403 |
@tabs-default-color: @_tabs-default-color; |
|
| 404 |
@tabs-default-hover-bg: @_tabs-default-hover-bg; |
|
| 405 |
@tabs-default-hover-color: @_tabs-default-hover-color; |
|
| 406 |
|
|
| 407 |
@tabs-active-bg: @_tabs-active-bg; |
|
| 408 |
@tabs-active-color: @_tabs-active-color; |
|
| 409 |
@tabs-active-hover-bg: @_tabs-active-hover-bg; |
|
| 410 |
@tabs-active-hover-color: @_tabs-active-hover-color; |
|
| 322 | 411 |
|
| 323 |
@t-cell-foot-text: @brand-darkest; |
|
| 324 | 412 |
|
| 325 |
// Zebra effect in list tables |
|
| 326 |
@t-row-zebra-bg-odd: @brand-lighter; |
|
| 327 |
@t-row-zebra-bg-even: @brand-light; |
|
| 328 |
@t-row-zebra-bg-hover: #ffffff; |
|
| 329 | 413 |
|
| 330 |
@t-row-zebra-bg-error: @brand-error-bg; |
|
| 331 |
@t-row-zebra-bg-special: #FEF2C5; // PENDENT: ANSCHAUEN |
|
| 332 |
@t-row-zebra-bg-highlight: #B4F4FE; // PENDENT: ANSCHAUEN |
|
| 333 | 414 |
|
| 334 | 415 |
|
| 335 | 416 |
// -------------------------------------- |
| 336 |
// BUTTONS
|
|
| 417 |
// Dropdowns (OBSOLETE?)
|
|
| 337 | 418 |
// -------------------------------------- |
| 338 | 419 |
|
| 339 |
@btn-font-weight: normal; |
|
| 340 |
// ------------------- |
|
| 341 |
// STANDARD-Button Strong (with Submission / data manipulation) |
|
| 342 |
// |
|
| 343 |
// Standard |
|
| 344 |
@btn-default-color: @brand-verylight; |
|
| 345 |
@btn-default-bg: @brand-strong; |
|
| 346 |
@btn-default-border: @brand-darkest; |
|
| 347 |
// Hover |
|
| 348 |
@btn-default-hover-color: #ffffff; |
|
| 349 |
@btn-default-hover-bg: @brand-strong-dimmed; |
|
| 350 |
@btn-default-hover-border: @brand-darkest; |
|
| 351 |
// Active |
|
| 352 |
@btn-default-active-color: #ffffff; |
|
| 353 |
@btn-default-active-bg: @brand-strong-dimmed; |
|
| 354 |
@btn-default-active-border: @brand-darkest; |
|
| 355 |
|
|
| 356 |
// ------------------- |
|
| 357 |
// NEUTRAL-Button (NO Submission) |
|
| 358 |
// |
|
| 359 |
// Standard |
|
| 360 |
@btn-neutral-color: @brand-strong; |
|
| 361 |
@btn-neutral-bg: @brand-lighter; |
|
| 362 |
@btn-neutral-border: @brand-darkest; |
|
| 363 |
// Hover |
|
| 364 |
@btn-neutral-hover-color: @brand-strong; |
|
| 365 |
@btn-neutral-hover-bg: @brand-light; |
|
| 366 |
@btn-neutral-hover-border: @brand-darkest; |
|
| 367 |
// Active |
|
| 368 |
@btn-neutral-active-color: #ffffff; |
|
| 369 |
@btn-neutral-active-bg: @brand-light; |
|
| 370 |
@btn-neutral-active-border: @brand-darkest; |
|
| 371 |
|
|
| 420 |
@dropdown-bg: #fff; |
|
| 421 |
@dropdown-border: rgba(0,0,0,.15); |
|
| 422 |
@dropdown-fallback-border: #ccc; |
|
| 423 |
@dropdown-divider-bg: #e5e5e5; |
|
| 372 | 424 |
|
| 373 |
// -------------------
|
|
| 374 |
// Diverse Button states
|
|
| 375 |
//
|
|
| 425 |
@dropdown-link-color: @gray-dark;
|
|
| 426 |
@dropdown-link-hover-color: darken(@gray-dark, 5%);
|
|
| 427 |
@dropdown-link-hover-bg: #f5f5f5;
|
|
| 376 | 428 |
|
| 377 |
@btn-primary-color: #ffffff; |
|
| 378 |
@btn-primary-bg: @brand-primary; |
|
| 379 |
@btn-primary-border: darken(@btn-primary-bg, 5%); |
|
| 429 |
@dropdown-link-active-color: @component-active-color; |
|
| 430 |
@dropdown-link-active-bg: @component-active-bg; |
|
| 380 | 431 |
|
| 381 |
@btn-success-color: #ffffff; |
|
| 382 |
@btn-success-bg: @color-green-strong; |
|
| 383 |
@btn-success-border: darken(@color-green-light, 5%); |
|
| 432 |
@dropdown-link-disabled-color: @gray-light; |
|
| 384 | 433 |
|
| 385 |
@btn-warning-color: #ffffff; |
|
| 386 |
@btn-warning-bg: @brand-warning; |
|
| 387 |
@btn-warning-border: darken(@btn-warning-bg, 5%); |
|
| 434 |
@dropdown-header-color: @gray-light; |
|
| 388 | 435 |
|
| 389 |
@btn-info-color: #ffffff; |
|
| 390 |
@btn-info-bg: @brand-info; |
|
| 391 |
@btn-info-border: darken(@btn-info-bg, 5%); |
|
| 436 |
@dropdown-caret-color: #000; |
|
| 392 | 437 |
|
| 393 |
@btn-link-disabled-color: @gray-light; |
|
| 394 | 438 |
|
| 395 | 439 |
|
| 396 | 440 |
|
| ... | ... | |
| 399 | 443 |
// FORMS |
| 400 | 444 |
// -------------------------------------- |
| 401 | 445 |
|
| 402 |
|
|
| 403 |
// -------------- |
|
| 446 |
// ------------------- |
|
| 404 | 447 |
// Input elements |
| 405 |
// |
|
| 406 |
|
|
| 448 |
// ------------------- |
|
| 407 | 449 |
@input-bg: #fff; |
| 408 | 450 |
@input-bg-disabled: @gray-lighter; |
| 409 | 451 |
|
| 410 |
@input-color: @gray; |
|
| 452 |
@input-color: @gray-standard;
|
|
| 411 | 453 |
@input-border: #ccc; |
| 412 | 454 |
@input-border-radius: @border-radius-base; |
| 413 | 455 |
@input-border-focus: #66afe9; |
| ... | ... | |
| 421 | 463 |
@input-group-addon-bg: @gray-lighter; |
| 422 | 464 |
@input-group-addon-border-color: @input-border; |
| 423 | 465 |
|
| 424 |
|
|
| 425 |
|
|
| 426 |
// -------------- |
|
| 466 |
// ------------------- |
|
| 427 | 467 |
// Legend, Labels, Fieldsets |
| 428 |
// |
|
| 429 |
|
|
| 468 |
// ------------------- |
|
| 430 | 469 |
@legend-color: @gray-dark; |
| 431 | 470 |
@legend-border-color: #e5e5e5; |
| 432 | 471 |
|
| 433 |
|
|
| 434 |
// -------------- |
|
| 472 |
// ------------------- |
|
| 435 | 473 |
// Highlighting (Focused, Activated) |
| 436 |
// |
|
| 437 |
|
|
| 438 |
@formelement-focus-bg: #E7FFCE ; |
|
| 439 |
@formelement-focus-border: 1px solid #9ccb21 ; |
|
| 440 |
|
|
| 441 |
|
|
| 474 |
// ------------------- |
|
| 475 |
@formelement-focus-bg: @_formelement-focus-bg ; |
|
| 476 |
@formelement-focus-text: @_formelement-focus-text ; |
|
| 477 |
@formelement-focus-border: 1px @_formelement-focus-border solid ; |
|
| 442 | 478 |
|
| 443 | 479 |
|
| 444 | 480 |
|
| 445 | 481 |
|
| 446 | 482 |
|
| 447 | 483 |
// -------------------------------------- |
| 448 |
// Dropdowns
|
|
| 484 |
// BUTTONS
|
|
| 449 | 485 |
// -------------------------------------- |
| 486 |
@button-font-weight: normal; |
|
| 487 |
@button-border-radius: 6px ; |
|
| 488 |
// ------------------- |
|
| 489 |
// STANDARD-Button Strong (with Submission / data manipulation) |
|
| 490 |
// ------------------- |
|
| 491 |
// Standard |
|
| 492 |
@button-strong-color: @_button-strong-color; |
|
| 493 |
@button-strong-bg: @_button-strong-bg; |
|
| 494 |
@button-strong-border: 1px @_button-strong-border-color solid; |
|
| 450 | 495 |
|
| 451 |
@dropdown-bg: #fff;
|
|
| 452 |
@dropdown-border: rgba(0,0,0,.15);
|
|
| 453 |
@dropdown-fallback-border: #ccc;
|
|
| 454 |
@dropdown-divider-bg: #e5e5e5;
|
|
| 496 |
// Hover
|
|
| 497 |
@button-strong-hover-color: @_button-strong-hover-color;
|
|
| 498 |
@button-strong-hover-bg: @_button-strong-hover-bg;
|
|
| 499 |
@button-strong-hover-border: 1px @_button-strong-hover-border-color solid;
|
|
| 455 | 500 |
|
| 456 |
@dropdown-link-color: @gray-dark; |
|
| 457 |
@dropdown-link-hover-color: darken(@gray-dark, 5%); |
|
| 458 |
@dropdown-link-hover-bg: #f5f5f5; |
|
| 501 |
// Active |
|
| 502 |
@button-strong-active-color: @_button-strong-active-color; |
|
| 503 |
@button-strong-active-bg: @_button-strong-active-bg; |
|
| 504 |
@button-strong-active-border: 1px @_button-strong-active-border-color solid; |
|
| 459 | 505 |
|
| 460 |
@dropdown-link-active-color: @component-active-color; |
|
| 461 |
@dropdown-link-active-bg: @component-active-bg; |
|
| 506 |
// ------------------- |
|
| 507 |
// NEUTRAL-Button (NO Submission) |
|
| 508 |
// ------------------- |
|
| 509 |
// Standard |
|
| 510 |
@button-neutral-color: @_button-neutral-color; |
|
| 511 |
@button-neutral-bg: @_button-neutral-bg; |
|
| 512 |
@button-neutral-border: 1px @_button-neutral-border-color solid; |
|
| 462 | 513 |
|
| 463 |
@dropdown-link-disabled-color: @gray-light; |
|
| 514 |
// Hover |
|
| 515 |
@button-neutral-hover-color: @_button-neutral-hover-color; |
|
| 516 |
@button-neutral-hover-bg: @_button-neutral-hover-bg; |
|
| 517 |
@button-neutral-hover-border: 1px @_button-neutral-hover-border-color solid; |
|
| 464 | 518 |
|
| 465 |
@dropdown-header-color: @gray-light; |
|
| 519 |
// Active |
|
| 520 |
@button-neutral-active-color: @_button-neutral-active-color; |
|
| 521 |
@button-neutral-active-bg: @_button-neutral-active-bg; |
|
| 522 |
@button-neutral-active-border: 1px @_button-neutral-active-border-color solid; |
|
| 466 | 523 |
|
| 467 |
@dropdown-caret-color: #000; |
|
| 524 |
// ------------------- |
|
| 525 |
// Diverse Button states |
|
| 526 |
// ------------------- |
|
| 527 |
//@button-primary-color: @_button-primary-color; |
|
| 528 |
//@button-primary-bg: @_button-primary-bg; |
|
| 529 |
//@button-primary-border: 1px darken(@button-primary-bg, 5%) solid; |
|
| 468 | 530 |
|
| 531 |
@button-success-color: @_button-success-color; |
|
| 532 |
@button-success-bg: @_button-success-bg; |
|
| 533 |
@button-success-border: 1px darken(@color-green-light, 5%) solid; |
|
| 469 | 534 |
|
| 535 |
@button-warning-color: @_button-warning-color; |
|
| 536 |
@button-warning-bg: @_button-warning-bg; |
|
| 537 |
@button-warning-border: 1px darken(@button-warning-bg, 5%) solid; |
|
| 470 | 538 |
|
| 539 |
@button-info-color: @_button-info-color; |
|
| 540 |
@button-info-bg: @_button-info-bg; |
|
| 541 |
@button-info-border: 1px darken(@button-info-bg, 5%) solid; |
|
| 471 | 542 |
|
| 472 |
// -------------------------------------- |
|
| 473 |
// COMPONENTS |
|
| 474 |
// -------------------------------------- |
|
| 543 |
@button-link-disabled-color: @_button-link-disabled-color; |
|
| 475 | 544 |
|
| 476 | 545 |
|
| 477 |
// -------------- |
|
| 478 |
// Z-index |
|
| 479 |
// Stack-/Layer Positions of components |
|
| 480 |
// only for specialists |
|
| 481 | 546 |
|
| 482 |
// General |
|
| 483 |
@zindex-dropdown: 1000; |
|
| 484 |
@zindex-popover: 1010; |
|
| 485 |
@zindex-tooltip: 1030; |
|
| 486 |
@zindex-navbar-fixed: 1030; |
|
| 487 |
@zindex-modal-background: 1040; |
|
| 488 |
@zindex-modal: 1050; |
|
| 489 | 547 |
|
| 490 |
// Components |
|
| 491 |
@zindex-dashboard: 1040; // frame-header |
|
| 492 |
@zindex-navbar: 1999; // menuv3 muss zuoberst sein |
|
| 493 |
@zindex-h1: 1020; // h1 innerhalb content |
|
| 494 | 548 |
|
| 495 |
@zindex-actionbar: 1030; // action-bar (Workflow) |
|
| 496 |
@zindex-actionbar-action: 1031; |
|
| 497 |
@zindex-actionbar-combobox: 1031; |
|
| 498 |
@zindex-actionbar-combobox-head: 1033; |
|
| 499 |
@zindex-actionbar-combobox-list: 1032; |
|
| 549 |
// -------------------------------------- |
|
| 550 |
// CONTROL PANELS |
|
| 551 |
// -------------------------------------- |
|
| 500 | 552 |
|
| 553 |
@controlpanel-margin: @contentbox-margin ; |
|
| 554 |
@controlpanel-padding: 1.2em 1.0em 0.8em 0.9em ; |
|
| 555 |
@controlpanel-padding-bold: 0.8em 1.0em 1.4em 1.2em ; // PENDENT: wozu? |
|
| 556 |
@controlpanel-bg-color: @_controlpanel-bg-color ; |
|
| 557 |
@controlpanel-bg-style: @_bg_style_controlpanel ; |
|
| 558 |
@controlpanel-color: @_controlpanel-color ; |
|
| 559 |
@controlpanel-border: 1px @_controlpanel-border-color solid ; |
|
| 560 |
@controlpanel-radius: @contentbox-radius ; |
|
| 561 |
|
|
| 562 |
// PENDENT: noetig? |
|
| 563 |
@controlpanel-bg-hover: @brand-superdark ; |
|
| 564 |
@controlpanel-bg-hover-text: @brand-light ; |
|
| 565 |
@controlpanel-active-bg: @brand-darker ; |
|
| 566 |
@controlpanel-active-text: @brand-lighter ; |
|
| 567 |
|
|
| 568 |
@controlpanel-h3-color: @h3-size ; |
|
| 569 |
@controlpanel-h3-size: 110% ; |
|
| 570 |
@controlpanel-h3-style: normal ; |
|
| 571 |
@controlpanel-h3-weight: normal ; |
|
| 572 |
|
|
| 573 |
@controlpanel-h4-color: @_controlpanel-header-color ; |
|
| 574 |
@controlpanel-h4-size: @h4-size ; |
|
| 575 |
@controlpanel-h4-weight: normal ; |
|
| 576 |
@controlpanel-h4-style: normal ; |
|
| 501 | 577 |
|
| 578 |
// select item control panel |
|
| 579 |
@controlpanel-select-item-padding: 0.6em 1.0em 0.6em 0.8em ; |
|
| 502 | 580 |
|
| 503 |
// -------------- |
|
| 504 |
// Dashboard (frame-header) |
|
| 505 |
// |
|
| 506 |
@dashbrd_bg: @brand-darkest ; |
|
| 507 |
@dashbrd_text: @brand-light ; |
|
| 508 |
@dashbrd_link: @brand-light ; |
|
| 509 |
@dashbrd_link_hover: #ffffff ; |
|
| 510 |
@dashbrd_link_deco: underline ; |
|
| 511 |
@dashbrd_input_bg: @brand-light; |
|
| 512 |
@dashbrd_input_text: #000000 ; |
|
| 581 |
@instructionbox-bg: @controlpanel-bg-color ; |
|
| 582 |
@instructionbox-border: 1px @_controlpanel-border-color solid ; |
|
| 513 | 583 |
|
| 514 | 584 |
|
| 515 |
// -------------- |
|
| 516 |
// Menue (menuv3) |
|
| 517 |
// |
|
| 518 | 585 |
|
| 519 |
@menu_bg: #fff ; |
|
| 520 |
@menu_link: #000 ; |
|
| 521 |
@menu_link_bg: #ebebeb ; // display:block |
|
| 522 |
@menu_link_hover: #000 ; |
|
| 523 |
@menu_link_hover_bg: #ebebeb ; |
|
| 524 |
@menu_link_hover_deco: underline ; |
|
| 525 | 586 |
|
| 526 | 587 |
|
| 527 |
@menu_link_bg_level1: #dcdcdc ; |
|
| 528 |
@menu_link_bg_level1_hover: #cdcdcd ; |
|
| 529 |
@menu_link_bg_level2: #cdcdcd ; |
|
| 530 |
@menu_link_bg_level2_hover: #dcdcdc ; |
|
| 531 |
@menu_link_bg_level3: #dcdcdc ; |
|
| 532 |
@menu_link_bg_level3_hover: #cdcdcd ; |
|
| 588 |
// -------------------------------------- |
|
| 589 |
// TABLES |
|
| 590 |
// -------------------------------------- |
|
| 591 |
|
|
| 592 |
@table-border-color: @_table-border-color; // table and cell border |
|
| 593 |
|
|
| 594 |
@table-bg: @_table-bg; // overall background-color |
|
| 595 |
@table-bg-accent: @_table-bg-accent; // for striping |
|
| 596 |
@table-bg-hover: @_table-bg-hover; |
|
| 597 |
@table-bg-active: @_table-bg-active; |
|
| 533 | 598 |
|
| 599 |
@table-caption-bg: @_table-caption-bg; |
|
| 600 |
@table-caption-color: @_table-caption-color; |
|
| 601 |
@table-caption-size: @h3-size - 1pt ; |
|
| 602 |
@table-caption-style: @h3-style ; |
|
| 603 |
@table-caption-weight: @h3-weight ; |
|
| 534 | 604 |
|
| 535 | 605 |
|
| 536 | 606 |
// -------------- |
| 537 |
// Context-Menu (layout-actionbar) |
|
| 538 |
// |
|
| 539 |
@actionbar-bg: @brand-light; |
|
| 540 |
@actionbar-bg-active: @brand-light; |
|
| 541 |
@actionbar-font-color: #ffffff; |
|
| 542 |
@actionbar-font-color-active: #ffffff; |
|
| 543 |
@actionbar-border-color: @brand-strong; |
|
| 544 |
@actionbar-border-color-active: @brand-strong; |
|
| 607 |
// Table Cells |
|
| 608 |
// -------------- |
|
| 609 |
@t-cell-text-color: @_t-cell-text-color; |
|
| 610 |
@t-cell-th-text-color: @_t-cell-th-text-color; // even for label/.label in tables |
|
| 545 | 611 |
|
| 612 |
@t-cell-head-bg: @_t-cell-head-bg; |
|
| 613 |
@t-cell-head-bg-accent: @_t-cell-head-bg-accent; |
|
| 614 |
@t-cell-head-text: @_t-cell-head-text; |
|
| 615 |
@t-cell-head-text-accent: @_t-cell-head-text-accent; |
|
| 546 | 616 |
|
| 617 |
@t-cell-label-text: @_t-cell-label-text; |
|
| 618 |
@t-cell-label-text-accent: @_t-cell-label-text-accent; |
|
| 619 |
@t-cell-data-text: @_t-cell-data-text; |
|
| 620 |
@t-cell-data-text-accent: @_t-cell-data-text-accent; |
|
| 547 | 621 |
|
| 548 |
// -------------- |
|
| 549 |
// Component properties |
|
| 550 |
// |
|
| 551 |
// Based on 14px font-size and 1.428 line-height (~20px to start) |
|
| 552 |
// PENDENT: UI-Tabs und so weiter |
|
| 622 |
@t-cell-databox-text-color: @_t-cell-databox-text-color ; |
|
| 623 |
@t-cell-databox-border-color: @_t-cell-databox-border-color ; |
|
| 553 | 624 |
|
| 554 | 625 |
|
| 555 |
@padding-base-vertical: 6px; |
|
| 556 |
@padding-base-horizontal: 12px; |
|
| 626 |
@t-cell-foot-text: @_t-cell-foot-text; |
|
| 557 | 627 |
|
| 558 |
@padding-large-vertical: 10px; |
|
| 559 |
@padding-large-horizontal: 16px; |
|
| 628 |
// ----------------------- |
|
| 629 |
// Zebra effect in list tables |
|
| 630 |
// ----------------------- |
|
| 631 |
@t-row-zebra-bg-odd: @_t-row-zebra-bg-odd; |
|
| 632 |
@t-row-zebra-bg-even: @_t-row-zebra-bg-even; |
|
| 560 | 633 |
|
| 561 |
@padding-small-vertical: 5px; |
|
| 562 |
@padding-small-horizontal: 10px; |
|
| 634 |
@t-row-zebra-bg-hover: @_t-row-zebra-bg-hover; |
|
| 563 | 635 |
|
| 564 |
@line-height-large: 1.33; |
|
| 565 |
@line-height-small: 1.5; |
|
| 636 |
@t-row-zebra-bg-error: @msg-error-light; |
|
| 566 | 637 |
|
| 567 |
@border-radius-base: 4px; |
|
| 568 |
@border-radius-large: 6px; |
|
| 569 |
@border-radius-small: 3px; |
|
| 638 |
@table-list-zebra-text-color: @_table-list-zebra-text-color ; |
|
| 639 |
@table-list-zebra-link-color: @_table-list-zebra-link-color ; |
|
| 570 | 640 |
|
| 571 |
@component-active-color: #fff;
|
|
| 572 |
@component-active-bg: @brand-primary;
|
|
| 641 |
@t-row-zebra-bg-special: #FEF2C5; // PENDENT: ANSCHAUEN
|
|
| 642 |
@t-row-zebra-bg-highlight: #B4F4FE; // PENDENT: ANSCHAUEN
|
|
| 573 | 643 |
|
| 574 |
@caret-width-base: 4px; |
|
| 575 |
@caret-width-large: 5px; |
|
| 576 | 644 |
|
| 645 |
// PENDENT: Footer |
|
| 577 | 646 |
|
| 578 | 647 |
|
| 579 | 648 |
|
| 580 | 649 |
// -------------------------------------- |
| 581 |
// Messages
|
|
| 650 |
// MESSAGES
|
|
| 582 | 651 |
// -------------------------------------- |
| 583 |
@message-margin: 3.6em 2.0em 0.6em 1.0em ; |
|
| 584 |
@message-padding: 0.6em 0.6em 0.5em 0.6em ; |
|
| 652 |
|
|
| 653 |
@message-margin: 3.6em 2.0em 0.6em 1.0em ; |
|
| 654 |
@message-padding: 0.6em 0.6em 0.5em 0.6em ; |
|
| 585 | 655 |
|
| 586 | 656 |
// Error |
| 587 | 657 |
@message_error_bg: @brand-error-bg ; |
| ... | ... | |
| 606 | 676 |
|
| 607 | 677 |
|
| 608 | 678 |
|
| 679 |
|
|
| 680 |
|
|
| 609 | 681 |
// -------------------------------------- |
| 610 |
// DIMENSIONS (width)
|
|
| 682 |
// JQUERY-UI STUFF
|
|
| 611 | 683 |
// -------------------------------------- |
| 612 | 684 |
|
| 613 | 685 |
|
| 614 |
// -------------- |
|
| 615 |
// Standard Dimensions |
|
| 686 |
// ----------------------- |
|
| 687 |
// Date picker |
|
| 688 |
// ----------------------- |
|
| 689 |
@jquery_datepicker-bg-color: @brand-superlight ; |
|
| 690 |
|
|
| 691 |
// ----------------------- |
|
| 692 |
// UI-Dialog |
|
| 693 |
// ----------------------- |
|
| 694 |
@jquery_ui_dialog-bg-color: @brand-verylight ; |
|
| 695 |
@jquery_ui_dialog-bg-style: @_bg_style_body ; |
|
| 696 |
|
|
| 697 |
// ----------------------- |
|
| 698 |
// TOOLTIPSTER |
|
| 699 |
// ----------------------- |
|
| 700 |
@jquery_ui_tooltipster-bg-color: @brand-standard ; |
|
| 701 |
@jquery_ui_tooltipster-border-color: @brand-lighter ; |
|
| 702 |
@jquery_ui_tooltipster-color: @brand-verylight ; |
|
| 703 |
|
|
| 704 |
|
|
| 705 |
|
|
| 706 |
|
|
| 707 |
|
|
| 708 |
|
|
| 709 |
|
|
| 710 |
|
|
| 711 |
|
|
| 712 |
|
|
| 713 |
|
|
| 714 |
|
|
| 715 |
|
|
| 716 |
|
|
| 717 |
|
|
| 718 |
|
|
| 719 |
// -------------------------------------- |
|
| 720 |
// DIMENSIONS (width) |
|
| 721 |
// -------------------------------------- |
|
| 616 | 722 |
// Only for Containers like DIV, TABLE, TH, TD, COL, P |
| 617 |
// |
|
| 723 |
|
|
| 724 |
// ----------------------- |
|
| 725 |
// Standard Dimensions (even for table cells) |
|
| 726 |
// ----------------------- |
|
| 618 | 727 |
// Table cells: COL, TD, TH, DIV |
| 619 |
// |
|
| 620 | 728 |
@wi-smallest: 42px ; // 2.6em ; // one or two ciphers |
| 621 | 729 |
@wi-verysmall: 80px ; // 5.0em ; |
| 622 | 730 |
@wi-small: 128px ; // 8.0em ; // also date e.g. 2018/06/06 |
| ... | ... | |
| 627 | 735 |
@wi-wider: 384px ; // 24.0em ; |
| 628 | 736 |
@wi-verywide: 576px ; // 36.0em ; |
| 629 | 737 |
|
| 630 |
// -------------- |
|
| 631 |
// Dimensions for DIVs
|
|
| 632 |
// |
|
| 738 |
// -----------------------
|
|
| 739 |
// Standard Dimensions for for DIVs
|
|
| 740 |
// -----------------------
|
|
| 633 | 741 |
@div-wi-smallest: (@wi-smallest ) ; |
| 634 | 742 |
@div-wi-verysmall: (@wi-verysmall ) ; |
| 635 | 743 |
@div-wi-small: (@wi-small ) ; |
| ... | ... | |
| 640 | 748 |
@div-wi-wider: (@wi-wider ) ; // min-width |
| 641 | 749 |
@div-wi-verywide: (@wi-verywide ) ; // min-width |
| 642 | 750 |
|
| 643 |
// -------------- |
|
| 751 |
// -----------------------
|
|
| 644 | 752 |
// Dimensions for Table Colums (TH, TD & Col) |
| 645 |
// |
|
| 753 |
// -----------------------
|
|
| 646 | 754 |
@tcol-wi-smallest: (@wi-smallest ) ; |
| 647 | 755 |
@tcol-wi-verysmall: (@wi-verysmall ) ; |
| 648 | 756 |
@tcol-wi-small: (@wi-small ) ; |
| ... | ... | |
| 653 | 761 |
@tcol-wi-wider: (@wi-wider ) ; // min-width |
| 654 | 762 |
@tcol-wi-verywide: (@wi-verywide ) ; // min-width |
| 655 | 763 |
|
| 656 |
// -------------- |
|
| 764 |
// -----------------------
|
|
| 657 | 765 |
// Dimensions for combined rows with combination Table column widths |
| 658 |
// |
|
| 766 |
// -----------------------
|
|
| 659 | 767 |
@tcol-wi-small-small: (@tcol-wi-small + @tcol-wi-small ) ; |
| 660 | 768 |
@tcol-wi-small-mediumsmall: (@tcol-wi-small + @tcol-wi-mediumsmall ) ; |
| 661 | 769 |
@tcol-wi-small-normal: (@tcol-wi-small + @tcol-wi-normal ) ; |
| ... | ... | |
| 688 | 796 |
@tcol-wi-lightwide-wider: (@tcol-wi-lightwide + @tcol-wi-wider ) ; |
| 689 | 797 |
@tcol-wi-lightwide-verywide: (@tcol-wi-lightwide + @tcol-wi-verywide ) ; |
| 690 | 798 |
|
| 691 |
// -------------- |
|
| 692 |
// Dimensions for Form elements |
|
| 693 |
// |
|
| 799 |
// -----------------------
|
|
| 800 |
// Dimensions for Form input elements
|
|
| 801 |
// -----------------------
|
|
| 694 | 802 |
@diff-input-select: 36px ; //1.6em ; |
| 695 | 803 |
|
| 696 | 804 |
// Input elements |
| ... | ... | |
| 712 | 820 |
@input-wi-lightwide--verysmall: ( @input-wi-lightwide - @input-wi-verysmall ) - 1 ; |
| 713 | 821 |
@input-wi-wide--verysmall: ( @input-wi-wide - @input-wi-verysmall ) - ( @form-element-margin-right ) + 4px ; |
| 714 | 822 |
|
| 715 |
// Select elements |
|
| 823 |
// ----------------------- |
|
| 824 |
// Dimensions for Form Select elements |
|
| 825 |
// ----------------------- |
|
| 716 | 826 |
@select-wi-smallest: (@wi-smallest ) ; |
| 717 | 827 |
@select-wi-verysmall: (@wi-verysmall ) ; |
| 718 | 828 |
@select-wi-small: (@wi-small - @diff-input-select ) ; |
| ... | ... | |
| 752 | 862 |
@select-wi-wide-wider: ((@wi-wide + (@wi-wider - @diff-input-select)) - @diff-select-combined ) ; |
| 753 | 863 |
@select-wi-wide-verywide: ((@wi-wide + (@wi-verywide - @diff-input-select)) - @diff-select-combined ) ; |
| 754 | 864 |
|
| 755 |
// Textarea elements with standard dimensions |
|
| 865 |
// ----------------------- |
|
| 866 |
// Dimensions for Textarea elements with standard dimensions |
|
| 867 |
// ----------------------- |
|
| 868 |
|
|
| 756 | 869 |
@textarea-wi-normal: (@wi-normal - @diff-input-select ) ; |
| 757 | 870 |
@textarea-wi-lightwide: (@wi-lightwide - @diff-input-select ) ; |
| 758 | 871 |
@textarea-wi-wide: (@wi-wide - @diff-input-select ) ; // min-width |
Auch abrufbar als: Unified diff
Erweiterung und Optimierung less und css fuer Design 4.0