tyler.durden/icingaweb2-module-director
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2-module-director.git synced 2025-09-25 18:59:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

css, QuickForm: style director-form only

Browse Source
This commit is contained in:
Thomas Gelf 2022-07-01 08:38:33 +02:00
parent 4c502bb010
commit 14317a9c20
2 changed files with 82 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
library/Director/Web/Form/QuickForm.php
View File

@ -92,6 +92,7 @@ abstract class QuickForm extends QuickBaseForm
protected function setPreferredDecorators() protected function setPreferredDecorators()
{ {
$current = $this->getAttrib('class'); $current = $this->getAttrib('class');
$current .= ' director-form';
if ($current) { if ($current) {
$this->setAttrib('class', "$current autofocus"); $this->setAttrib('class', "$current autofocus");
} else { } else {

154
public/css/module.less
View File

@ -33,11 +33,11 @@ a:before {
text-decoration: none; text-decoration: none;
} }
form { form.director-form {
max-width: 68em; max-width: 68em;
} }
form:focus { form.director-form:focus {
outline: none; outline: none;
} }
@ -59,7 +59,7 @@ div.action-bar {
vertical-align: middle; vertical-align: middle;
} }
form input { form.director-form input {
margin: 0; margin: 0;
} }
input { input {
@ -198,14 +198,14 @@ span.disabled {
color: @icinga-blue; color: @icinga-blue;
margin-right: 1em; margin-right: 1em;
} }
form { form.director-form {
display: inline; display: inline;
margin-right: 1em; margin-right: 1em;
} }
} }
.action-bar { .action-bar {
form { form.director-form {
display: inline; display: inline;
margin-right: 1em; margin-right: 1em;
} }
@ -215,12 +215,12 @@ pre.disabled {
color: @disabled-gray; color: @disabled-gray;
} }
form i.link-color::before { form.director-form i.link-color::before {
color: @icinga-blue; color: @icinga-blue;
} }
/* TODO: remove this, but autosubmit looks ugly otherwise */ /* TODO: remove this, but autosubmit looks ugly otherwise */
input[disabled] { form.director-form input[disabled] {
background: inherit; background: inherit;
} }
/* END OF TODO */ /* END OF TODO */
@ -311,12 +311,12 @@ table.avp th {
font-size: inherit; font-size: inherit;
} }
.content form { .content form.director-form {
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 2em; margin-bottom: 2em;
} }
.content form.inline { .content form.director-form.inline {
margin: 0; margin: 0;
i.icon::before { i.icon::before {
@ -329,12 +329,12 @@ table.avp th {
left: -100%; left: -100%;
} }
form input[type=file] { form.director-form input[type=file] {
padding-right: 1em; padding-right: 1em;
} }
form input[type=submit] { form.director-form input[type=submit] {
.button(); .button();
border-width: 1px; border-width: 1px;
margin-top: 0.5em; margin-top: 0.5em;
@ -346,11 +346,11 @@ form input[type=submit] {
} }
} }
form input[type=submit]:first-of-type { form.director-form input[type=submit]:first-of-type {
border-width: 2px; border-width: 2px;
} }
form input[type=submit].link-button { form.director-form input[type=submit].link-button {
color: @icinga-blue; color: @icinga-blue;
background: none; background: none;
border: none; border: none;
@ -365,19 +365,21 @@ form input[type=submit].link-button {
} }
} }
form p.description { form.director-form p.description {
padding: 1em 1em; padding: 1em 1em;
margin: 0; margin: 0;
font-style: italic; font-style: italic;
width: 100%; width: 100%;
} }
input[type=text], input[type=button], select, select option, textarea { form.director-form {
input[type=text], input[type=button], select, select option, textarea {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
}
} }
form ul.form-errors { form.director-form ul.form-errors {
list-style-type: none; list-style-type: none;
margin-bottom: 0.5em; margin-bottom: 0.5em;
padding: 0; padding: 0;
@ -395,17 +397,18 @@ form ul.form-errors {
} }
} }
select::-ms-expand, input::-ms-expand, textarea::-ms-expand { /* for IE 11 */ form.director-form {
select::-ms-expand, input::-ms-expand, textarea::-ms-expand { /* for IE 11 */
display: none; display: none;
} }
select { select {
border: 1px solid @gray-light; border: 1px solid @gray-light;
cursor: pointer; cursor: pointer;
background: none; background: none;
} }
input[type=text], input[type=password], textarea, select { input[type=text], input[type=password], textarea, select {
max-width: 36em; max-width: 36em;
min-width: 20em; min-width: 20em;
width: 100%; width: 100%;
@ -419,33 +422,34 @@ input[type=text], input[type=password], textarea, select {
background-color: @low-sat-blue; background-color: @low-sat-blue;
&.search { &.search {
background: transparent url("../img/icons/search.png") no-repeat scroll 0.5em center / 1em 1em; background: transparent url("../img/icons/search.png") no-repeat scroll 0.5em center / 1em 1em;
padding-left: 2em; padding-left: 2em;
} }
} }
textarea { textarea {
max-width: 100%; max-width: 100%;
} }
select[multiple] { select[multiple] {
height: auto; height: auto;
} }
select option { select option {
height: 2em; height: 2em;
padding-top: 0.3em; padding-top: 0.3em;
} }
select[multiple=multiple] { select[multiple=multiple] {
height: auto; height: auto;
} }
label { label {
line-height: 2em; line-height: 2em;
}
} }
form dl { form.director-form dl {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -478,7 +482,7 @@ div.filter form.editor {
} }
} }
form.editor { form.director-form.editor {
select, input[type=text] { select, input[type=text] {
background: @low-sat-blue; background: @low-sat-blue;
max-width: unset; max-width: unset;
@ -567,14 +571,14 @@ ul.extensible-set {
} }
} }
form { form.director-form {
#_FAKE_SUBMIT { #_FAKE_SUBMIT {
position: absolute; position: absolute;
left: -100%; left: -100%;
} }
} }
dd.active ul.extensible-set, ul.extensible-set.sortable { form.director-form dd.active ul.extensible-set, ul.extensible-set.sortable {
li { li {
display: list-item; display: list-item;
@ -595,7 +599,7 @@ dd.active ul.extensible-set, ul.extensible-set.sortable {
} }
} }
dd.active ul.extensible-set { form.director-form dd.active ul.extensible-set {
border: 1px solid @icinga-blue; border: 1px solid @icinga-blue;
input[type=submit]:first-of-type { input[type=submit]:first-of-type {
@ -607,33 +611,37 @@ dd.active ul.extensible-set {
} }
} }
select::-moz-focus-inner { border: 0; } form.director-form {
select::-moz-focus-inner {
border: 0;
}
select:-moz-focusring { select:-moz-focusring {
color: transparent; color: transparent;
text-shadow: 0 0 0 #000; text-shadow: 0 0 0 #000;
} }
select, input[type=text], textarea { select, input[type=text], textarea {
&:hover { &:hover {
border-style: dotted solid dotted solid; border-style: dotted solid dotted solid;
border-color: @gray-light; border-color: @gray-light;
} }
&:focus, &:focus:hover { &:focus, &:focus:hover {
border-style: solid; border-style: solid;
border-color: @icinga-blue; border-color: @icinga-blue;
outline: none; outline: none;
} }
} }
select option { select option {
padding-left: 0.5em; padding-left: 0.5em;
} }
select option[value=""] { select option[value=""] {
color: @disabled-gray; color: @disabled-gray;
background-color: @low-sat-blue; background-color: @low-sat-blue;
}
} }
a { a {
@ -785,7 +793,7 @@ ul.main-actions {
} }
} }
#layout.minimal-layout div.content form { #layout.minimal-layout div.content form.director-form {
dt, dd { dt, dd {
display: block; display: block;
width: auto; width: auto;
@ -839,7 +847,7 @@ ul.main-actions {
} }
fieldset { form.director-form fieldset {
margin: 0; margin: 0;
padding: 0 0 1.5em 0; padding: 0 0 1.5em 0;
border: none; border: none;
@ -895,7 +903,7 @@ fieldset {
/* BEGIN Forms */ /* BEGIN Forms */
form dt label { form.director-form dt label {
width: auto; width: auto;
font-weight: normal; font-weight: normal;
font-size: inherit; font-size: inherit;
@ -912,19 +920,19 @@ form dt label {
} }
} }
form fieldset { form.director-form fieldset {
min-width: 36em; min-width: 36em;
} }
form dd input.related-action[type='submit'] { form.director-form dd input.related-action[type='submit'] {
display: none; display: none;
} }
form dd.active li.active input.related-action[type='submit'] { form.director-form dd.active li.active input.related-action[type='submit'] {
display: inline-block; display: inline-block;
} }
form { form.director-form {
p.description { p.description {
color: @gray; color: @gray;
font-style: italic; font-style: italic;
@ -942,7 +950,7 @@ form {
} }
} }
form.db-selector { form.director-form.db-selector {
padding: 0; padding: 0;
margin: 0; margin: 0;
select { select {
@ -972,21 +980,21 @@ form.db-selector {
flex-grow: 1; flex-grow: 1;
} }
form dd { form.director-form dd {
padding: 0.3em 0.5em; padding: 0.3em 0.5em;
margin: 0; margin: 0;
} }
form dt { form.director-form dt {
padding: 0.5em 0.5em; padding: 0.5em 0.5em;
margin: 0; margin: 0;
} }
form dt.active, form dd.active { form.director-form dt.active, form.director-form dd.active {
background-color: @tr-active-color; background-color: @tr-active-color;
} }
form dt { form.director-form dt {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
min-width: 12em; min-width: 12em;
@ -997,11 +1005,11 @@ form dt {
} }
} }
form .errors label { form.director-form .errors label {
color: @color-critical; color: @color-critical;
} }
form dd { form.director-form dd {
display: inline-block; display: inline-block;
width: 63%; width: 63%;
min-height: 2.5em; min-height: 2.5em;
@ -1019,16 +1027,16 @@ form dd {
} }
} }
form dd:after { form.director-form dd:after {
display: block; display: block;
content: ''; content: '';
} }
form textarea { form.director-form textarea {
height: auto; height: auto;
} }
form dd ul.errors { form.director-form dd ul.errors {
list-style-type: none; list-style-type: none;
padding-left: 0.3em; padding-left: 0.3em;
@ -1038,7 +1046,7 @@ form dd ul.errors {
} }
} }
form div.hint { form.director-form div.hint {
padding: 1em; padding: 1em;
background-color: @tr-hover-color; background-color: @tr-hover-color;
margin: 1em 0; margin: 1em 0;