tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CSS: Style form descriptions, hints, notifications and errors 

refs #5543
This commit is contained in:
Eric Lippmann 2015-10-01 02:49:38 +02:00
parent 51d6c61bf7
commit c318454a45
4 changed files with 69 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
library/Icinga/Web/Form/Decorator/FormDescriptions.php
View File

@ -35,7 +35,7 @@ class FormDescriptions extends Zend_Form_Decorator_Abstract
return $content;
}
$html = '<ul class="descriptions">';
$html = '<ul class="form-description">';
foreach ($descriptions as $description) {
if (is_array($description)) {
list($description, $properties) = $description;

2
library/Icinga/Web/Form/Decorator/FormHints.php
View File

@ -67,7 +67,7 @@ class FormHints extends Zend_Form_Decorator_Abstract
return $content;
}
$html = '<ul class="hints">';
$html = '<ul class="form-info">';
foreach ($hints as $hint) {
if (is_array($hint)) {
list($hint, $properties) = $hint;

2
library/Icinga/Web/Form/Decorator/FormNotifications.php
View File

@ -39,7 +39,7 @@ class FormNotifications extends Zend_Form_Decorator_Abstract
$html = '<ul class="form-notifications">';
foreach (array(Form::NOTIFICATION_ERROR, Form::NOTIFICATION_WARNING, Form::NOTIFICATION_INFO) as $type) {
if (isset($notifications[$type])) {
$html .= '<li><ul class="' . $this->getNotificationTypeName($type) . '">';
$html .= '<li><ul class="notification-' . $this->getNotificationTypeName($type) . '">';
foreach ($notifications[$type] as $message) {
if (is_array($message)) {
list($message, $properties) = $message;

67
public/css/icinga/forms.less
View File

@ -14,8 +14,12 @@ input {
input.search {
padding-left: 20px;
background: url('../img/icons/search.png') no-repeat 0;
background: @gray-lightest url('../img/icons/search.png') no-repeat 2px;
background-size: 12px 12px;
&:focus {
background-color: @body-bg-color;
}
}
input, select, textarea {
@ -42,6 +46,8 @@ form.inline {
margin-left: 160px;
}
.control-button,
input[type="submit"] {
.button();
}
@ -65,6 +71,10 @@ button:hover .icon-cancel {
.control-group {
padding: @vertical-padding @horizontal-padding;
.errors {
color: @color-critical;
}
}
.link-button {
@ -81,6 +91,61 @@ button:hover .icon-cancel {
}
}
// @TODO(el): Fix that
.form-description, .form-description ul,
.form-info, .form-info ul,
.form-notifications, .form-notifications ul,
.form-errors, .form-errors ul,
form .errors, form .errors ul {
// Reset defaults
margin: 0;
padding: 0;
list-style-type: none;
}
.form-errors {
background-color: @color-critical;
color: @text-color-inverted;
}
.form-info {
.text-small();
}
.form-notifications {
.notification-error {
background-color: @color-critical;
color: @text-color-inverted;
li {
padding: @vertical-padding @horizontal-padding;
}
}
.notification-info {
background-color: @color-ok;
color: @text-color-inverted;
li {
padding: @vertical-padding @horizontal-padding;
}
}
.notification-warning {
background-color: @color-warning;
color: @text-color-inverted;
li {
padding: @vertical-padding @horizontal-padding;
}
}
}
button.animated.active {
&.move-up i:before {
.animate(move-vertical 500ms infinite linear);
}
&.move-down i:before {
.animate(move-vertical 500ms infinite linear reverse);
}
}
//div.config-form-buttons {
// margin-top: 5px;
//}