|
/* ------------------------------------------------------------- */
|
|
/* MESSAGES (messages.less) */
|
|
/* ------------------------------------------------------------- */
|
|
|
|
|
|
// ----------------------------------------------------------------------------
|
|
//
|
|
// MESSAGES
|
|
//
|
|
// ----------------------------------------------------------------------------
|
|
// DESCRIPTION: all kind of messages
|
|
//
|
|
//
|
|
// CONTENTS:
|
|
// - MESSAGES & WARNINGS
|
|
// - Messages (Depraceted)
|
|
// - Flash Messages
|
|
// ----------------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// MESSAGE MIXIN
|
|
// --------------------------------------
|
|
|
|
.mx-message {
|
|
display: block;
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
clear: both ;
|
|
|
|
width: auto;
|
|
min-width: @messages-min-width ;
|
|
max-width: @messages-max-width ;
|
|
|
|
padding: 0.6em 0.8em ;
|
|
|
|
border-radius: @controlpanel-radius;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
|
|
font-size: @font-size-smaller ;
|
|
font-weight: normal;
|
|
line-height: 110% ;
|
|
text-align: left;
|
|
white-space: normal;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// MESSAGES & FLASH MESSAGES
|
|
// --------------------------------------
|
|
.flash_message,
|
|
.message {
|
|
&,
|
|
&_error,
|
|
&_ok,
|
|
&_hint,
|
|
&_warning,
|
|
&_info{
|
|
.mx-message ;
|
|
}
|
|
} // /.flash_message
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// MESSAGES (SIMPLE STYLE)
|
|
// --------------------------------------
|
|
|
|
.message {
|
|
|
|
// -----------------------
|
|
// ERROR
|
|
// -----------------------
|
|
&_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; }
|
|
}
|
|
// -----------------------
|
|
// Warning
|
|
// -----------------------
|
|
&_warning {
|
|
color: @message_warning_text;
|
|
background-color: @message_warning_bg;
|
|
border-color: @message_warning_border;
|
|
h4{ color: @message_warning_text; }
|
|
p { color: @message_warning_text; }
|
|
}
|
|
// -----------------------
|
|
// INFO / HINT
|
|
// -----------------------
|
|
&_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
|
|
// -----------------------
|
|
&_ok {
|
|
color: @message_ok_text;
|
|
background-color: @message_ok_bg;
|
|
border-color: @message_ok_border;
|
|
h4{ color: @message_ok_text; }
|
|
p { color: @message_ok_text; }
|
|
}
|
|
// -----------------------
|
|
// ATTENTION (PENDING)
|
|
// -----------------------
|
|
// PENDENT: noch aktuell? ggf. durch Hint ersetzen
|
|
&.attention{
|
|
color: @message_hint_text;
|
|
background-color: @message_hint_bg;
|
|
border-color: @message_hint_border;
|
|
h4 { color: @message_hint_text ; }
|
|
p { color: @message_hint_text ; }
|
|
}
|
|
// -----------------------
|
|
// TYPOGRAPHY
|
|
// -----------------------
|
|
h4{
|
|
font-weight: bold;
|
|
font-size: 110%;
|
|
margin: 0.4em 1.0em 0.2em 0 ;
|
|
padding: 0;
|
|
}
|
|
p{
|
|
margin: 0 1.0em 0.6em 0 ;
|
|
padding: 0;
|
|
}
|
|
|
|
// PENDENT: GGF. entfernen
|
|
&_error,
|
|
&_warning,
|
|
&_hint,
|
|
&_info,
|
|
&_ok {
|
|
// PENDENT: wieso wird in einem DIV-Container nochmals ein Paragraf mit der gleichen Klasse ausgegeben?
|
|
// ggf. entfernen
|
|
& > .message {
|
|
&_error,
|
|
&_warning,
|
|
&_hint,
|
|
&_info,
|
|
&_ok{
|
|
display: none;
|
|
}
|
|
}
|
|
} // /_TYPE of messages
|
|
} // /.message
|
|
p.message{ padding: 0.6em !important ; }
|
|
|
|
|
|
// -----------------------
|
|
// Message blocks in different levels in the #content
|
|
// -----------------------
|
|
#content {
|
|
& > form {
|
|
|
|
// -----------------------
|
|
// Message Immediately In Form
|
|
// -----------------------
|
|
& > .message,
|
|
& > .ui-tabs > .ui-tabs-panel > .message {
|
|
margin-top: @margin-left-from-content;
|
|
margin-right: 0;
|
|
margin-bottom: @margin-left-from-content;
|
|
margin-left: @margin-left-from-content;
|
|
|
|
&.message_ok,
|
|
&.message_info,
|
|
&.message_hint,
|
|
&.message_error,
|
|
&.message_warning{
|
|
margin-left: @margin-left-from-content ;
|
|
}
|
|
} // .message
|
|
|
|
|
|
& > .message_ok,
|
|
& > .message_info,
|
|
& > .message_hint,
|
|
& > .message_error,
|
|
& > .message_warning{
|
|
margin-top: @margin-left-from-content;
|
|
margin-right: 0;
|
|
margin-bottom: @margin-left-from-content;
|
|
margin-left: @margin-left-from-content;
|
|
}
|
|
|
|
// -----------------------
|
|
// Message Immediately In Wrapper
|
|
// -----------------------
|
|
.wrapper{
|
|
& > .message,
|
|
& > .message_ok,
|
|
& > .message_info,
|
|
& > .message_hint,
|
|
& > .message_error,
|
|
& > .message_warning{
|
|
margin: @margin-from-wrapper ;
|
|
}
|
|
}
|
|
|
|
} // /form
|
|
} // /#content
|
|
|
|
// -----------------------
|
|
// Message on the welcome screen
|
|
// -----------------------
|
|
body > div.login .message{
|
|
width: 100% ;
|
|
text-align: center ;
|
|
margin: 0 auto 1.0em auto ;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// FLASH MESSAGES
|
|
// --------------------------------------
|
|
|
|
.flash_message {
|
|
|
|
// General (apears two times within a .flash_message)
|
|
|
|
// -----------------------
|
|
// Error
|
|
// -----------------------
|
|
&.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;
|
|
}
|
|
}
|
|
// -----------------------
|
|
// OK
|
|
// -----------------------
|
|
&.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;
|
|
}
|
|
}
|
|
// -----------------------
|
|
// Warning
|
|
// -----------------------
|
|
&.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;
|
|
}
|
|
}
|
|
// -----------------------
|
|
// Info / Hint
|
|
// -----------------------
|
|
|
|
&.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;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// -----------------------
|
|
// Elements in .flash_message
|
|
// -----------------------
|
|
|
|
.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
|
|
|
|
|
|
|
|
// -----------------------
|
|
// Flash Message blocks in different levels in #content
|
|
// -----------------------
|
|
|
|
#content {
|
|
|
|
& > form {
|
|
|
|
// Flash message immediately in form
|
|
& > .flash_message {
|
|
&_error,
|
|
&_ok,
|
|
&_warning,
|
|
&_info{
|
|
margin: 48px 0 0 @margin-left-from-content ;
|
|
}
|
|
} // /.flash_message
|
|
|
|
|
|
// Flash message in .ui-tabs
|
|
.ui-tabs-panel{
|
|
& > .flash_message {
|
|
&_error,
|
|
&_ok,
|
|
&_warning,
|
|
&_info{
|
|
margin: 48px 0 0 @margin-left-from-content ;
|
|
}
|
|
} // /.flash_message
|
|
} // /.ui-tabs
|
|
|
|
|
|
// Flash message within .wrapper
|
|
.wrapper {
|
|
.flash_message {
|
|
margin: @margin-from-wrapper ;
|
|
&_error,
|
|
&_ok,
|
|
&_warning,
|
|
&_info{
|
|
margin: @margin-from-wrapper ;
|
|
}
|
|
} // /.flash_message
|
|
} // /.wrapper
|
|
|
|
} // /form
|
|
|
|
// Flash message immediately in #content
|
|
& > .flash_message {
|
|
&_error,
|
|
&_ok,
|
|
&_warning,
|
|
&_info{
|
|
margin: 24px 0 0 @margin-left-from-content ;
|
|
}
|
|
}
|
|
|
|
} // /#content
|
|
|
|
|
|
|
|
// -----------------------
|
|
// Flash Messages in the admin area
|
|
// -----------------------
|
|
|
|
#admin {
|
|
.flash_message {
|
|
margin: 48px 0 0 @margin-left-from-content ;
|
|
}
|
|
}
|