css/design40/less/messages.less

   1 /* ------------------------------------------------------------- */
   2 /* MESSAGES (messages.less)                                      */
   3 /* ------------------------------------------------------------- */
   4
   5
   6 // ----------------------------------------------------------------------------
   7 //
   8 // MESSAGES
   9 //
  10 // ----------------------------------------------------------------------------
  11 // DESCRIPTION: all kind of messages
  12 //
  13 //
  14 // CONTENTS:
  15 // - MESSAGES & WARNINGS
  16 //   - Messages (Depraceted)
  17 //   - Flash Messages
  18 // ----------------------------------------------------------------------------
  19
  20
  21
  22
  23
  24 // --------------------------------------
  25 // MESSAGE MIXIN
  26 // --------------------------------------
  27
  28 .mx-message {
  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;
  49 }
  50
  51
  52
  53
  54
  55
  56 // --------------------------------------
  57 // MESSAGES & FLASH MESSAGES
  58 // --------------------------------------
  59 .flash_message,
  60 .message {
  61   &,
  62   &_error,
  63   &_ok,
  64   &_hint,
  65   &_warning,
  66   &_info{
  67     .mx-message ;
  68   }
  69 } // /.flash_message
  70
  71
  72
  73
  74 // --------------------------------------
  75 // MESSAGES (SIMPLE STYLE)
  76 // --------------------------------------
  77
  78 .message {
  79
  80   // -----------------------
  81   // ERROR
  82   // -----------------------
  83   &_error {
  84     color:            @message_error_text;
  85     background-color: @message_error_bg;
  86     border-color:     @message_error_border;
  87     h4{ color:        @message_error_text; }
  88     p { color:        @message_error_text; }
  89   }
  90   // -----------------------
  91   // Warning
  92   // -----------------------
  93   &_warning {
  94     color:            @message_warning_text;
  95     background-color: @message_warning_bg;
  96     border-color:     @message_warning_border;
  97     h4{ color:        @message_warning_text; }
  98     p { color:        @message_warning_text; }
  99   }
 100   // -----------------------
 101   // INFO / HINT
 102   // -----------------------
 103   &_hint,
 104   &_info {
 105     color:            @message_hint_text;
 106     background-color: @message_hint_bg;
 107     border-color:     @message_hint_border;
 108     h4 { color:       @message_hint_text ; }
 109     p  { color:       @message_hint_text ; }
 110   }
 111   // -----------------------
 112   // OK
 113   // -----------------------
 114   &_ok {
 115     color:            @message_ok_text;
 116     background-color: @message_ok_bg;
 117     border-color:     @message_ok_border;
 118     h4{ color:        @message_ok_text; }
 119     p { color:        @message_ok_text; }
 120   }
 121   // -----------------------
 122   // ATTENTION (PENDING)
 123   // -----------------------
 124   // PENDENT: noch aktuell? ggf. durch Hint ersetzen
 125   &.attention{
 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 ; }
 131   }
 132   // -----------------------
 133   // TYPOGRAPHY
 134   // -----------------------
 135   h4{
 136     font-weight: bold;
 137     font-size: 110%;
 138     margin: 0.4em 1.0em 0.2em 0 ;
 139     padding: 0;
 140   }
 141   p{
 142     margin: 0 1.0em 0.6em 0 ;
 143     padding: 0;
 144   }
 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
 164 } // /.message
 165 p.message{ padding: 0.6em !important ; }
 166
 167
 168 // -----------------------
 169 // Message blocks in different levels in the #content
 170 // -----------------------
 171 #content {
 172   & > form {
 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;
 183
 184       &.message_ok,
 185       &.message_info,
 186       &.message_hint,
 187       &.message_error,
 188       &.message_warning{
 189         margin-left: @margin-left-from-content ;
 190       }
 191     } // .message
 192
 193
 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       }
 217     }
 218
 219   } // /form
 220 } // /#content
 221
 222 // -----------------------
 223 // Message on the welcome screen
 224 // -----------------------
 225 body > div.login .message{
 226   width: 100% ;
 227   text-align: center ;
 228   margin: 0 auto 1.0em auto ;
 229 }
 230
 231
 232
 233
 234
 235
 236
 237 // --------------------------------------
 238 // FLASH MESSAGES
 239 // --------------------------------------
 240
 241 .flash_message {
 242
 243   // General (apears two times within a .flash_message)
 244
 245   // -----------------------
 246   // Error
 247   // -----------------------
 248   &.flash_message_error {
 249     background-color: @message_error_bg;
 250     border-color: @message_error_border;
 251     color: @message_error_text;
 252     a.button.wi-tiny,
 253     a.icon-close {
 254       border: @message_error_border !important;
 255       color: @message_error_text;
 256     }
 257   }
 258   // -----------------------
 259   // OK
 260   // -----------------------
 261   &.flash_message_ok {
 262     background-color: @message_ok_bg;
 263     border: @message_ok_border;
 264     color: @message_ok_text;
 265     a.button.wi-tiny,
 266     a.icon-close {
 267       border: @message_ok_border;
 268       color: @message_ok_text;
 269     }
 270   }
 271   // -----------------------
 272   // Warning
 273   // -----------------------
 274   &.flash_message_warning {
 275     background-color: @message_warning_bg;
 276     border-color: @message_warning_border;
 277     color: @message_warning_text;
 278     a.button.wi-tiny,
 279     a.icon-close {
 280       border: @message_warning_border;
 281       color: @message_warning_text;
 282     }
 283   }
 284   // -----------------------
 285   // Info / Hint
 286   // -----------------------
 287
 288   &.flash_message_info {
 289     background-color: @message_info_bg;
 290     border: @message_info_border;
 291     color: @message_info_text;
 292     a.button.wi-tiny,
 293     a.icon-close {
 294       border: @message_info_border;
 295       color: @message_info_text;
 296     }
 297   }
 298
 299
 300
 301         // -----------------------
 302         // Elements in .flash_message
 303         // -----------------------
 304
 305   .flash_title {
 306     font-weight: bold;
 307     float: left;
 308     display: block ;
 309     padding-right: 1.0em ;
 310   }
 311   .flash_notification{
 312     float: left;
 313     display: block ;
 314   }
 315
 316   // Buttons (Details & Close)
 317   a.button.wi-tiny {
 318     font-size: 76% ;
 319     padding: 0 0.2em 0 0.2em ;
 320     margin: 0 0.4em 0 0.4em  ;
 321     width: auto ;
 322     background-color: transparent;
 323   }
 324   a.icon-close {
 325     //display: block ;
 326   }
 327
 328   div.button-container,
 329   div.icon-container  {
 330     overflow: hidden ;
 331     width: 12% ;
 332     float: right ;
 333
 334     a.icon-close {
 335       font-size: 76% ;
 336       float: right ;
 337       border-width: 1px ;
 338       border-style: solid ;
 339       padding: 0 3px ;
 340       border-radius: 3px;
 341     }
 342     span.display {
 343       float: right !important;
 344       display: block;
 345       width: auto ;
 346       text-align: right ;
 347       margin: 0 ;
 348       padding: 0;
 349       a.button { }
 350     }
 351   } // /div.icon-container
 352
 353   div.message-container {
 354     overflow: hidden ;
 355     width: 86% ;
 356     float: left ;
 357
 358     &>span.flash_title {
 359       display: block;
 360       float: left ;
 361       width: auto ;
 362     }
 363     & > div.flash_notification {
 364       display: block;
 365       float: left ;
 366       max-width: 80% ;
 367       width: auto ;
 368
 369       span.content {
 370         float: left ;
 371         display: block;
 372         width: 100% ;
 373       }
 374       div.detail {
 375         display: block;
 376         clear: both ;
 377         padding-top: 0.9em ;
 378
 379         span {
 380           display: block;
 381           width: 94%;
 382           float: right;
 383         }
 384         a.button.wi-tiny{
 385           display: block ;
 386           float: left ;
 387           margin-left: 0 ;
 388         }
 389       }
 390     } // /.div.flash_notification
 391   } // /div.message-container
 392 } // /.flash_message
 393
 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 {
 445     &_error,
 446     &_ok,
 447     &_warning,
 448     &_info{
 449       margin: 24px 0 0 @margin-left-from-content ;
 450     }
 451   }
 452
 453 } // /#content
 454
 455
 456
 457 // -----------------------
 458 // Flash Messages in the admin area
 459 // -----------------------
 460
 461 #admin {
 462   .flash_message {
 463     margin: 48px 0 0 @margin-left-from-content ;
 464   }
 465 }