|
// ----------------------------------------------------------------------------
|
|
//
|
|
// MESSAGES
|
|
//
|
|
// ----------------------------------------------------------------------------
|
|
// DESCRIPTION: all kind of messages
|
|
//
|
|
//
|
|
// CONTENTS:
|
|
// - MESSAGES & WARNINGS
|
|
// - Messages (Depraceted)
|
|
// - Flash Messages
|
|
// ----------------------------------------------------------------------------
|
|
|
|
.mx-message {
|
|
display: block;
|
|
overflow: hidden;
|
|
clear: both ;
|
|
width: auto;
|
|
min-width: @messages-min-width ;
|
|
max-width: @messages-max-width ;
|
|
padding: 0.6em 0.8em ;
|
|
font-size: @font-size-smaller ;
|
|
font-weight: normal;
|
|
line-height: 110% ;
|
|
text-align: left;
|
|
white-space: normal;
|
|
border-radius: 0.6em;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// Messages & Warnings
|
|
// --------------------------------------
|
|
.flash_message,
|
|
.message {
|
|
&,
|
|
&_error,
|
|
&_ok,
|
|
&_hint,
|
|
&_warning,
|
|
&_info{
|
|
.mx-message ;
|
|
}
|
|
} // /.flash_message
|
|
|
|
|
|
// --------------
|
|
// Messages (Simple Style)
|
|
//
|
|
|
|
.message {
|
|
&_error,
|
|
&_warning,
|
|
&_hint,
|
|
&_info,
|
|
&_ok {
|
|
// General
|
|
//margin: 0.2em 1.0em 1.2em 0 ;
|
|
|
|
// PENDENT: wieso wird in einem DIV-Container nochmals ein Paragraf mit der gleichen Klasse ausgegeben?
|
|
& > .message {
|
|
&_error,
|
|
&_warning,
|
|
&_hint,
|
|
&_info,
|
|
&_ok{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
&_error {
|
|
color: @message_error_text;
|
|
background-color: @message_error_bg;
|
|
border-color: @message_error_border;
|
|
h4{ color: @message_error_text; }
|
|
p { color: @message_error_text; } // PENDENT: andere Message-Typen auch erweitern
|
|
}
|
|
&_warning {
|
|
color: @message_warning_text;
|
|
background-color: @message_warning_bg;
|
|
border-color: @message_warning_border;
|
|
}
|
|
&_hint,
|
|
&_info {
|
|
color: @message_hint_text;
|
|
background-color: @message_hint_bg;
|
|
border-color: @message_hint_border;
|
|
|
|
h4 { color: @message_hint_text ; }
|
|
p { color: @message_hint_text ; }
|
|
}
|
|
&_ok {
|
|
color: @message_ok_text;
|
|
background-color: @message_ok_bg;
|
|
border-color: @message_ok_border;
|
|
}
|
|
// PENDENT: noch aktuell? ggf. durch Hint ersetzen
|
|
&.attention{
|
|
font-size: @font-size-smaller;
|
|
border-color: @message_warning_border;
|
|
background-color: @message_warning_bg;
|
|
|
|
h4 { color: @message_warning_text ; }
|
|
p { color: @message_warning_text ; }
|
|
}
|
|
|
|
h4{
|
|
font-weight: bold;
|
|
font-size: 110%;
|
|
margin: 0.4em 0 0.2em 0 ;
|
|
padding: 0;
|
|
}
|
|
p{
|
|
margin: 0 0 0.6em 0 ;
|
|
padding: 0;
|
|
}
|
|
|
|
} // /.message
|
|
|
|
// Message blocks in different levels in the #content
|
|
#content {
|
|
& > form {
|
|
& > .message {
|
|
margin-left: @margin-left-from-content ;
|
|
|
|
&.message_ok,
|
|
&.message_info,
|
|
&.message_hint,
|
|
&.message_error,
|
|
&.message_warning{
|
|
margin-left: @margin-left-from-content ;
|
|
}
|
|
} // .message
|
|
} // /form
|
|
& > p {
|
|
&.message_ok,
|
|
&.message_info,
|
|
&.message_hint,
|
|
&.message_error,
|
|
&.message_warning{
|
|
margin-left: @margin-left-from-content ;
|
|
}
|
|
}
|
|
& > .message_ok,
|
|
& > .message_info,
|
|
& > .message_hint,
|
|
& > .message_error,
|
|
& > .message_warning{
|
|
margin: @margin-left-from-content ;
|
|
}
|
|
} // /#content
|
|
|
|
// Message blocks in different levels in the #content
|
|
.wrapper{
|
|
& > .message,
|
|
& > .message_ok,
|
|
& > .message_info,
|
|
& > .message_hint,
|
|
& > .message_error,
|
|
& > .message_warning{
|
|
margin: @margin-from-wrapper ;
|
|
}
|
|
}
|
|
|
|
p {
|
|
&.message {
|
|
&,
|
|
&_error,
|
|
&_warning,
|
|
&_hint,
|
|
&_info,
|
|
&_ok {
|
|
padding-bottom: 0.4em ;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Message on the welcome screen
|
|
body > div.login .message{
|
|
width: 100% ;
|
|
text-align: center ;
|
|
margin: 0 auto 1.0em auto ;
|
|
}
|
|
|
|
|
|
|
|
// --------------
|
|
// Flash Messages
|
|
//
|
|
|
|
.flash_message {
|
|
//.mx-message ;
|
|
// General (apears two times within a .flash:message)
|
|
|
|
&.flash_message_error {
|
|
background-color: @message_error_bg;
|
|
border-color: @message_error_border;
|
|
color: @message_error_text;
|
|
a.button.wi-tiny,
|
|
a.icon-close {
|
|
border: @message_error_border !important;
|
|
color: @message_error_text;
|
|
}
|
|
}
|
|
&.flash_message_ok {
|
|
background-color: @message_ok_bg;
|
|
border: @message_ok_border;
|
|
color: @message_ok_text;
|
|
a.button.wi-tiny,
|
|
a.icon-close {
|
|
border: @message_ok_border;
|
|
color: @message_ok_text;
|
|
}
|
|
}
|
|
&.flash_message_warning {
|
|
background-color: @message_warning_bg;
|
|
border-color: @message_warning_border;
|
|
color: @message_warning_text;
|
|
a.button.wi-tiny,
|
|
a.icon-close {
|
|
border: @message_warning_border;
|
|
color: @message_warning_text;
|
|
}
|
|
}
|
|
&.flash_message_info {
|
|
background-color: @message_info_bg;
|
|
border: @message_info_border;
|
|
color: @message_info_text;
|
|
a.button.wi-tiny,
|
|
a.icon-close {
|
|
border: @message_info_border;
|
|
color: @message_info_text;
|
|
}
|
|
}
|
|
|
|
.flash_title {
|
|
font-weight: bold;
|
|
float: left;
|
|
display: block ;
|
|
padding-right: 1.0em ;
|
|
}
|
|
.flash_notification{
|
|
float: left;
|
|
display: block ;
|
|
}
|
|
|
|
// Buttons (Details & Close)
|
|
a.button.wi-tiny {
|
|
font-size: 76% ;
|
|
padding: 0 0.2em 0 0.2em ;
|
|
margin: 0 0.4em 0 0.4em ;
|
|
width: auto ;
|
|
background-color: transparent;
|
|
}
|
|
a.icon-close {
|
|
//display: block ;
|
|
}
|
|
|
|
div.button-container,
|
|
div.icon-container {
|
|
overflow: hidden ;
|
|
width: 12% ;
|
|
float: right ;
|
|
|
|
a.icon-close {
|
|
font-size: 76% ;
|
|
float: right ;
|
|
border-width: 1px ;
|
|
border-style: solid ;
|
|
padding: 0 3px ;
|
|
border-radius: 3px;
|
|
}
|
|
span.display {
|
|
float: right !important;
|
|
display: block;
|
|
width: auto ;
|
|
text-align: right ;
|
|
margin: 0 ;
|
|
padding: 0;
|
|
a.button { }
|
|
}
|
|
} // /div.icon-container
|
|
|
|
div.message-container {
|
|
overflow: hidden ;
|
|
width: 86% ;
|
|
float: left ;
|
|
|
|
&>span.flash_title {
|
|
display: block;
|
|
float: left ;
|
|
width: auto ;
|
|
}
|
|
& > div.flash_notification {
|
|
display: block;
|
|
float: left ;
|
|
max-width: 80% ;
|
|
width: auto ;
|
|
|
|
span.content {
|
|
float: left ;
|
|
display: block;
|
|
width: 100% ;
|
|
}
|
|
div.detail {
|
|
display: block;
|
|
clear: both ;
|
|
padding-top: 0.9em ;
|
|
|
|
span {
|
|
display: block;
|
|
width: 94%;
|
|
float: right;
|
|
}
|
|
a.button.wi-tiny{
|
|
display: block ;
|
|
float: left ;
|
|
margin-left: 0 ;
|
|
}
|
|
}
|
|
} // /.div.flash_notification
|
|
} // /div.message-container
|
|
} // /.flash_message
|
|
|
|
.wrapper {
|
|
.flash_message {
|
|
margin: @margin-from-wrapper ;
|
|
&_error,
|
|
&_ok,
|
|
&_warning,
|
|
&_info{
|
|
margin: @margin-from-wrapper ;
|
|
}
|
|
} // /.flash_message
|
|
} // /.wrapper
|
|
#content > form > .flash_message {
|
|
&,
|
|
&_error,
|
|
&_ok,
|
|
&_warning,
|
|
&_info{
|
|
margin: 48px 0 0 @margin-left-from-content ;
|
|
}
|
|
}
|
|
#content > .flash_message {
|
|
&,
|
|
&_error,
|
|
&_ok,
|
|
&_warning,
|
|
&_info{
|
|
margin: 24px 0 0 @margin-left-from-content ;
|
|
}
|
|
}
|
|
|