Revision 00462921
Von Hans P. Schlaepfer vor mehr als 3 Jahren hinzugefügt
| css/less/messages.less | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* MESSAGES (messages.less) */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
|
|
| 5 |
|
|
| 1 | 6 |
// ---------------------------------------------------------------------------- |
| 2 | 7 |
// |
| 3 | 8 |
// MESSAGES |
| ... | ... | |
| 12 | 17 |
// - Flash Messages |
| 13 | 18 |
// ---------------------------------------------------------------------------- |
| 14 | 19 |
|
| 20 |
|
|
| 21 |
|
|
| 22 |
|
|
| 23 |
|
|
| 24 |
// -------------------------------------- |
|
| 25 |
// MESSAGE MIXIN |
|
| 26 |
// -------------------------------------- |
|
| 27 |
|
|
| 15 | 28 |
.mx-message {
|
| 16 |
display: block; |
|
| 17 |
overflow: hidden; |
|
| 18 |
clear: both ; |
|
| 19 |
width: auto; |
|
| 20 |
min-width: @messages-min-width ; |
|
| 21 |
max-width: @messages-max-width ; |
|
| 22 |
padding: 0.6em 0.8em ; |
|
| 23 |
font-size: @font-size-smaller ; |
|
| 24 |
font-weight: normal; |
|
| 25 |
line-height: 110% ; |
|
| 26 |
text-align: left; |
|
| 27 |
white-space: normal; |
|
| 28 |
border-radius: 0.6em; |
|
| 29 |
border-style: solid; |
|
| 30 |
border-width: 1px; |
|
| 29 |
display: block; |
|
| 30 |
overflow: hidden; |
|
| 31 |
overflow-x: auto; |
|
| 32 |
clear: both ; |
|
| 33 |
|
|
| 34 |
width: auto; |
|
| 35 |
min-width: @messages-min-width ; |
|
| 36 |
max-width: @messages-max-width ; |
|
| 37 |
|
|
| 38 |
padding: 0.6em 0.8em ; |
|
| 39 |
|
|
| 40 |
border-radius: @controlpanel-radius; |
|
| 41 |
border-style: solid; |
|
| 42 |
border-width: 1px; |
|
| 43 |
|
|
| 44 |
font-size: @font-size-smaller ; |
|
| 45 |
font-weight: normal; |
|
| 46 |
line-height: 110% ; |
|
| 47 |
text-align: left; |
|
| 48 |
white-space: normal; |
|
| 31 | 49 |
} |
| 32 | 50 |
|
| 33 | 51 |
|
| 34 | 52 |
|
| 53 |
|
|
| 54 |
|
|
| 55 |
|
|
| 35 | 56 |
// -------------------------------------- |
| 36 |
// Messages & Warnings
|
|
| 57 |
// MESSAGES & FLASH MESSAGES
|
|
| 37 | 58 |
// -------------------------------------- |
| 38 | 59 |
.flash_message, |
| 39 | 60 |
.message {
|
| ... | ... | |
| 48 | 69 |
} // /.flash_message |
| 49 | 70 |
|
| 50 | 71 |
|
| 51 |
// -------------- |
|
| 52 |
// Messages (Simple Style) |
|
| 53 |
// |
|
| 54 | 72 |
|
| 55 |
.message {
|
|
| 56 |
&_error, |
|
| 57 |
&_warning, |
|
| 58 |
&_hint, |
|
| 59 |
&_info, |
|
| 60 |
&_ok {
|
|
| 61 |
// General |
|
| 62 |
//margin: 0.2em 1.0em 1.2em 0 ; |
|
| 63 | 73 |
|
| 64 |
// PENDENT: wieso wird in einem DIV-Container nochmals ein Paragraf mit der gleichen Klasse ausgegeben? |
|
| 65 |
& > .message {
|
|
| 66 |
&_error, |
|
| 67 |
&_warning, |
|
| 68 |
&_hint, |
|
| 69 |
&_info, |
|
| 70 |
&_ok{
|
|
| 71 |
display: none; |
|
| 72 |
} |
|
| 73 |
} |
|
| 74 |
// -------------------------------------- |
|
| 75 |
// MESSAGES (SIMPLE STYLE) |
|
| 76 |
// -------------------------------------- |
|
| 74 | 77 |
|
| 75 |
} |
|
| 78 |
.message {
|
|
| 79 |
|
|
| 80 |
// ----------------------- |
|
| 81 |
// ERROR |
|
| 82 |
// ----------------------- |
|
| 76 | 83 |
&_error {
|
| 77 | 84 |
color: @message_error_text; |
| 78 | 85 |
background-color: @message_error_bg; |
| 79 | 86 |
border-color: @message_error_border; |
| 80 | 87 |
h4{ color: @message_error_text; }
|
| 81 |
p { color: @message_error_text; } // PENDENT: andere Message-Typen auch erweitern
|
|
| 88 |
p { color: @message_error_text; }
|
|
| 82 | 89 |
} |
| 90 |
// ----------------------- |
|
| 91 |
// Warning |
|
| 92 |
// ----------------------- |
|
| 83 | 93 |
&_warning {
|
| 84 | 94 |
color: @message_warning_text; |
| 85 | 95 |
background-color: @message_warning_bg; |
| 86 | 96 |
border-color: @message_warning_border; |
| 97 |
h4{ color: @message_warning_text; }
|
|
| 98 |
p { color: @message_warning_text; }
|
|
| 87 | 99 |
} |
| 100 |
// ----------------------- |
|
| 101 |
// INFO / HINT |
|
| 102 |
// ----------------------- |
|
| 88 | 103 |
&_hint, |
| 89 | 104 |
&_info {
|
| 90 | 105 |
color: @message_hint_text; |
| 91 | 106 |
background-color: @message_hint_bg; |
| 92 | 107 |
border-color: @message_hint_border; |
| 93 |
|
|
| 94 |
h4 { color: @message_hint_text ; }
|
|
| 95 |
p { color: @message_hint_text ; }
|
|
| 108 |
h4 { color: @message_hint_text ; }
|
|
| 109 |
p { color: @message_hint_text ; }
|
|
| 96 | 110 |
} |
| 111 |
// ----------------------- |
|
| 112 |
// OK |
|
| 113 |
// ----------------------- |
|
| 97 | 114 |
&_ok {
|
| 98 | 115 |
color: @message_ok_text; |
| 99 | 116 |
background-color: @message_ok_bg; |
| 100 | 117 |
border-color: @message_ok_border; |
| 118 |
h4{ color: @message_ok_text; }
|
|
| 119 |
p { color: @message_ok_text; }
|
|
| 101 | 120 |
} |
| 121 |
// ----------------------- |
|
| 122 |
// ATTENTION (PENDING) |
|
| 123 |
// ----------------------- |
|
| 102 | 124 |
// PENDENT: noch aktuell? ggf. durch Hint ersetzen |
| 103 | 125 |
&.attention{
|
| 104 |
font-size: @font-size-smaller; |
|
| 105 |
border-color: @message_warning_border; |
|
| 106 |
background-color: @message_warning_bg; |
|
| 107 |
|
|
| 108 |
h4 { color: @message_warning_text ; }
|
|
| 109 |
p { color: @message_warning_text ; }
|
|
| 126 |
color: @message_hint_text; |
|
| 127 |
background-color: @message_hint_bg; |
|
| 128 |
border-color: @message_hint_border; |
|
| 129 |
h4 { color: @message_hint_text ; }
|
|
| 130 |
p { color: @message_hint_text ; }
|
|
| 110 | 131 |
} |
| 111 |
|
|
| 132 |
// ----------------------- |
|
| 133 |
// TYPOGRAPHY |
|
| 134 |
// ----------------------- |
|
| 112 | 135 |
h4{
|
| 113 | 136 |
font-weight: bold; |
| 114 | 137 |
font-size: 110%; |
| 115 |
margin: 0.4em 0 0.2em 0 ;
|
|
| 138 |
margin: 0.4em 1.0em 0.2em 0 ;
|
|
| 116 | 139 |
padding: 0; |
| 117 | 140 |
} |
| 118 | 141 |
p{
|
| 119 |
margin: 0 0 0.6em 0 ;
|
|
| 142 |
margin: 0 1.0em 0.6em 0 ;
|
|
| 120 | 143 |
padding: 0; |
| 121 | 144 |
} |
| 122 | 145 |
|
| 146 |
// PENDENT: GGF. entfernen |
|
| 147 |
&_error, |
|
| 148 |
&_warning, |
|
| 149 |
&_hint, |
|
| 150 |
&_info, |
|
| 151 |
&_ok {
|
|
| 152 |
// PENDENT: wieso wird in einem DIV-Container nochmals ein Paragraf mit der gleichen Klasse ausgegeben? |
|
| 153 |
// ggf. entfernen |
|
| 154 |
& > .message {
|
|
| 155 |
&_error, |
|
| 156 |
&_warning, |
|
| 157 |
&_hint, |
|
| 158 |
&_info, |
|
| 159 |
&_ok{
|
|
| 160 |
display: none; |
|
| 161 |
} |
|
| 162 |
} |
|
| 163 |
} // /_TYPE of messages |
|
| 123 | 164 |
} // /.message |
| 165 |
p.message{ padding: 0.6em !important ; }
|
|
| 166 |
|
|
| 124 | 167 |
|
| 168 |
// ----------------------- |
|
| 125 | 169 |
// Message blocks in different levels in the #content |
| 170 |
// ----------------------- |
|
| 126 | 171 |
#content {
|
| 127 | 172 |
& > form {
|
| 128 |
& > .message {
|
|
| 129 |
margin-left: @margin-left-from-content ; |
|
| 173 |
|
|
| 174 |
// ----------------------- |
|
| 175 |
// Message Immediately In Form |
|
| 176 |
// ----------------------- |
|
| 177 |
& > .message, |
|
| 178 |
& > .ui-tabs > .ui-tabs-panel > .message {
|
|
| 179 |
margin-top: @margin-left-from-content; |
|
| 180 |
margin-right: 0; |
|
| 181 |
margin-bottom: @margin-left-from-content; |
|
| 182 |
margin-left: @margin-left-from-content; |
|
| 130 | 183 |
|
| 131 | 184 |
&.message_ok, |
| 132 | 185 |
&.message_info, |
| ... | ... | |
| 136 | 189 |
margin-left: @margin-left-from-content ; |
| 137 | 190 |
} |
| 138 | 191 |
} // .message |
| 139 |
} // /form |
|
| 140 |
& > p {
|
|
| 141 |
&.message_ok, |
|
| 142 |
&.message_info, |
|
| 143 |
&.message_hint, |
|
| 144 |
&.message_error, |
|
| 145 |
&.message_warning{
|
|
| 146 |
margin-left: @margin-left-from-content ; |
|
| 147 |
} |
|
| 148 |
} |
|
| 149 |
& > .message_ok, |
|
| 150 |
& > .message_info, |
|
| 151 |
& > .message_hint, |
|
| 152 |
& > .message_error, |
|
| 153 |
& > .message_warning{
|
|
| 154 |
margin: @margin-left-from-content ; |
|
| 155 |
} |
|
| 156 |
} // /#content |
|
| 157 | 192 |
|
| 158 |
// Message blocks in different levels in the #content |
|
| 159 |
.wrapper{
|
|
| 160 |
& > .message, |
|
| 161 |
& > .message_ok, |
|
| 162 |
& > .message_info, |
|
| 163 |
& > .message_hint, |
|
| 164 |
& > .message_error, |
|
| 165 |
& > .message_warning{
|
|
| 166 |
margin: @margin-from-wrapper ; |
|
| 167 |
} |
|
| 168 |
} |
|
| 169 | 193 |
|
| 170 |
p {
|
|
| 171 |
&.message {
|
|
| 172 |
&, |
|
| 173 |
&_error, |
|
| 174 |
&_warning, |
|
| 175 |
&_hint, |
|
| 176 |
&_info, |
|
| 177 |
&_ok {
|
|
| 178 |
padding-bottom: 0.4em ; |
|
| 194 |
& > .message_ok, |
|
| 195 |
& > .message_info, |
|
| 196 |
& > .message_hint, |
|
| 197 |
& > .message_error, |
|
| 198 |
& > .message_warning{
|
|
| 199 |
margin-top: @margin-left-from-content; |
|
| 200 |
margin-right: 0; |
|
| 201 |
margin-bottom: @margin-left-from-content; |
|
| 202 |
margin-left: @margin-left-from-content; |
|
| 203 |
} |
|
| 204 |
|
|
| 205 |
// ----------------------- |
|
| 206 |
// Message Immediately In Wrapper |
|
| 207 |
// ----------------------- |
|
| 208 |
.wrapper{
|
|
| 209 |
& > .message, |
|
| 210 |
& > .message_ok, |
|
| 211 |
& > .message_info, |
|
| 212 |
& > .message_hint, |
|
| 213 |
& > .message_error, |
|
| 214 |
& > .message_warning{
|
|
| 215 |
margin: @margin-from-wrapper ; |
|
| 216 |
} |
|
| 179 | 217 |
} |
| 180 |
} |
|
| 181 |
} |
|
| 182 | 218 |
|
| 219 |
} // /form |
|
| 220 |
} // /#content |
|
| 221 |
|
|
| 222 |
// ----------------------- |
|
| 183 | 223 |
// Message on the welcome screen |
| 224 |
// ----------------------- |
|
| 184 | 225 |
body > div.login .message{
|
| 185 | 226 |
width: 100% ; |
| 186 | 227 |
text-align: center ; |
| ... | ... | |
| 189 | 230 |
|
| 190 | 231 |
|
| 191 | 232 |
|
| 192 |
// -------------- |
|
| 193 |
// Flash Messages |
|
| 194 |
// |
|
| 233 |
|
|
| 234 |
|
|
| 235 |
|
|
| 236 |
|
|
| 237 |
// -------------------------------------- |
|
| 238 |
// FLASH MESSAGES |
|
| 239 |
// -------------------------------------- |
|
| 195 | 240 |
|
| 196 | 241 |
.flash_message {
|
| 197 |
//.mx-message ; |
|
| 198 |
// General (apears two times within a .flash:message) |
|
| 199 | 242 |
|
| 243 |
// General (apears two times within a .flash_message) |
|
| 244 |
|
|
| 245 |
// ----------------------- |
|
| 246 |
// Error |
|
| 247 |
// ----------------------- |
|
| 200 | 248 |
&.flash_message_error {
|
| 201 | 249 |
background-color: @message_error_bg; |
| 202 | 250 |
border-color: @message_error_border; |
| ... | ... | |
| 207 | 255 |
color: @message_error_text; |
| 208 | 256 |
} |
| 209 | 257 |
} |
| 258 |
// ----------------------- |
|
| 259 |
// OK |
|
| 260 |
// ----------------------- |
|
| 210 | 261 |
&.flash_message_ok {
|
| 211 | 262 |
background-color: @message_ok_bg; |
| 212 | 263 |
border: @message_ok_border; |
| ... | ... | |
| 217 | 268 |
color: @message_ok_text; |
| 218 | 269 |
} |
| 219 | 270 |
} |
| 271 |
// ----------------------- |
|
| 272 |
// Warning |
|
| 273 |
// ----------------------- |
|
| 220 | 274 |
&.flash_message_warning {
|
| 221 | 275 |
background-color: @message_warning_bg; |
| 222 | 276 |
border-color: @message_warning_border; |
| ... | ... | |
| 227 | 281 |
color: @message_warning_text; |
| 228 | 282 |
} |
| 229 | 283 |
} |
| 284 |
// ----------------------- |
|
| 285 |
// Info / Hint |
|
| 286 |
// ----------------------- |
|
| 287 |
|
|
| 230 | 288 |
&.flash_message_info {
|
| 231 | 289 |
background-color: @message_info_bg; |
| 232 | 290 |
border: @message_info_border; |
| ... | ... | |
| 238 | 296 |
} |
| 239 | 297 |
} |
| 240 | 298 |
|
| 299 |
|
|
| 300 |
|
|
| 301 |
// ----------------------- |
|
| 302 |
// Elements in .flash_message |
|
| 303 |
// ----------------------- |
|
| 304 |
|
|
| 241 | 305 |
.flash_title {
|
| 242 | 306 |
font-weight: bold; |
| 243 | 307 |
float: left; |
| ... | ... | |
| 327 | 391 |
} // /div.message-container |
| 328 | 392 |
} // /.flash_message |
| 329 | 393 |
|
| 330 |
.wrapper {
|
|
| 331 |
.flash_message {
|
|
| 332 |
margin: @margin-from-wrapper ; |
|
| 394 |
|
|
| 395 |
|
|
| 396 |
// ----------------------- |
|
| 397 |
// Flash Message blocks in different levels in #content |
|
| 398 |
// ----------------------- |
|
| 399 |
|
|
| 400 |
#content {
|
|
| 401 |
|
|
| 402 |
& > form {
|
|
| 403 |
|
|
| 404 |
// Flash message immediately in form |
|
| 405 |
& > .flash_message {
|
|
| 406 |
&_error, |
|
| 407 |
&_ok, |
|
| 408 |
&_warning, |
|
| 409 |
&_info{
|
|
| 410 |
margin: 48px 0 0 @margin-left-from-content ; |
|
| 411 |
} |
|
| 412 |
} // /.flash_message |
|
| 413 |
|
|
| 414 |
|
|
| 415 |
// Flash message in .ui-tabs |
|
| 416 |
.ui-tabs-panel{
|
|
| 417 |
& > .flash_message {
|
|
| 418 |
&_error, |
|
| 419 |
&_ok, |
|
| 420 |
&_warning, |
|
| 421 |
&_info{
|
|
| 422 |
margin: 48px 0 0 @margin-left-from-content ; |
|
| 423 |
} |
|
| 424 |
} // /.flash_message |
|
| 425 |
} // /.ui-tabs |
|
| 426 |
|
|
| 427 |
|
|
| 428 |
// Flash message within .wrapper |
|
| 429 |
.wrapper {
|
|
| 430 |
.flash_message {
|
|
| 431 |
margin: @margin-from-wrapper ; |
|
| 432 |
&_error, |
|
| 433 |
&_ok, |
|
| 434 |
&_warning, |
|
| 435 |
&_info{
|
|
| 436 |
margin: @margin-from-wrapper ; |
|
| 437 |
} |
|
| 438 |
} // /.flash_message |
|
| 439 |
} // /.wrapper |
|
| 440 |
|
|
| 441 |
} // /form |
|
| 442 |
|
|
| 443 |
// Flash message immediately in #content |
|
| 444 |
& > .flash_message {
|
|
| 333 | 445 |
&_error, |
| 334 | 446 |
&_ok, |
| 335 | 447 |
&_warning, |
| 336 | 448 |
&_info{
|
| 337 |
margin: @margin-from-wrapper ;
|
|
| 449 |
margin: 24px 0 0 @margin-left-from-content ;
|
|
| 338 | 450 |
} |
| 339 |
} // /.flash_message |
|
| 340 |
} // /.wrapper |
|
| 341 |
#content > form > .flash_message {
|
|
| 342 |
&, |
|
| 343 |
&_error, |
|
| 344 |
&_ok, |
|
| 345 |
&_warning, |
|
| 346 |
&_info{
|
|
| 347 |
margin: 48px 0 0 @margin-left-from-content ; |
|
| 348 | 451 |
} |
| 349 |
} |
|
| 350 |
#content > .flash_message {
|
|
| 351 |
&, |
|
| 352 |
&_error, |
|
| 353 |
&_ok, |
|
| 354 |
&_warning, |
|
| 355 |
&_info{
|
|
| 356 |
margin: 24px 0 0 @margin-left-from-content ; |
|
| 357 |
} |
|
| 358 |
} |
|
| 452 |
|
|
| 453 |
} // /#content |
|
| 359 | 454 |
|
Auch abrufbar als: Unified diff
css/less -> Geaenderte & Neue Less-Dateien