CSS: Re-add form.less but w/ out-commented content

refs #5543
This commit is contained in:
Eric Lippmann 2015-09-27 13:37:35 +02:00
parent 73242da6bc
commit 181f6d5285
2 changed files with 417 additions and 417 deletions

View File

@ -27,7 +27,7 @@ class StyleSheet
'css/icinga/footer-elements.less',
// 'css/icinga/main-content.less',
'css/icinga/tabs.less',
// 'css/icinga/forms.less',
'css/icinga/forms.less',
'css/icinga/setup.less',
'css/icinga/widgets.less',
'css/icinga/pagination.less',

View File

@ -1,418 +1,418 @@
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
div.config-form-buttons {
margin-top: 5px;
}
table.configTable {
border-spacing: 15px;
border-collapse: separate;
}
td.configTable {
border: solid;
border-width: thin;
padding: 10px;
min-width: 300px;
}
.form-element {
margin-bottom: 1em;
}
label {
display: block;
font-weight: bold;
}
input, select, textarea {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 1px solid #ddd;
font-size: 0.9em;
padding: 0.2em;
background: #fff;
font-family: Calibri, Helvetica, sans-serif;
}
input[type=checkbox] {
margin-top: 0.3em;
margin-bottom: 0.1em;
}
input:focus, select:focus {
border-color: #333;
}
input[type=submit] {
font-weight: bold;
text-align: center;
color: #fff;
border: 1px solid;
border-color: @colorPetrol;
background: @colorPetrol;
outline: 0;
&[disabled] {
background-color: #666;
border-color: black;
}
&:hover[disabled], &:active[disabled], &:focus[disabled] {
background-color: #666;
}
}
input[type=submit]:hover, a.button:hover, input[type=submit]:focus {
background-color: #333;
border-color: #333;
}
input[type=submit]:hover, a.button:hover {
cursor: pointer;
color: white;
}
input:focus, select:focus {
background: white;
outline: 0;
}
input::-moz-placeholder {
color: #333;
}
input::-webkit-input-placeholder {
color: #333;
}
input:-ms-input-placeholder {
color: #333;
}
input::-moz-focus-inner {
border: 0;
outline: 0;
}
button::-moz-focus-inner {
border: 0;
outline: 0;
}
select::-moz-focus-inner {
border: 0;
outline: 0;
}
form.inline {
margin: 0;
padding: 0;
display: inline;
}
div.spinner {
display: inline-block;
margin-top: 0.2em;
margin-left: 0.25em;
i {
visibility: hidden;
&.active {
visibility: visible;
&:before {
.animate(spin 2s infinite linear);
}
}
&:before {
margin: 0; // Disables wobbling
}
}
}
button.animated.active {
&.move-up i:before {
.animate(move-vertical 500ms infinite linear);
}
&.move-down i:before {
.animate(move-vertical 500ms infinite linear reverse);
}
}
button, .button-like {
font-size: 0.9em;
font-weight: bold;
outline: 0;
color: #fff;
padding: 0.2em;
border: 1px solid;
border-color: @colorPetrol;
background: @colorPetrol;
&[disabled] {
background-color: #666;
border-color: black;
}
&:hover, &:focus, &:active {
background-color: #333;
border-color: #333;
cursor: pointer;
&[disabled] {
background-color: #666;
}
}
}
.button-like {
display: inline-block;
}
a.button-like {
cursor: default;
text-decoration: none;
}
form.link-like input[type="submit"], form.link-like button[type="submit"], input.link-like, button.link-like {
color: @colorLinkDefault;
font-weight: normal;
border: none;
background: none;
padding: 0;
font-size: 1em;
cursor: pointer;
&.icon-only {
color: inherit;
font-size: 1.5em;
&:hover, &:focus, &:active {
color: #666;
}
}
}
form.link-like input[type="submit"]:hover,
form.link-like input[type="submit"]:focus,
form.link-like input[type="submit"]:active,
form.link-like button[type="submit"]:hover,
form.link-like button[type="submit"]:focus,
form.link-like button[type="submit"]:active,
input.link-like:hover,
input.link-like:focus,
input.link-like:active,
button.link-like:hover,
button.link-like:focus,
button.link-like:active {
text-decoration: underline;
background: none;
color: @colorLinkDefault;
}
.non-list-like-list {
list-style-type: none;
margin: 0;
padding: 0.5em 0.5em 0;
li {
padding-bottom: 0.5em;
}
}
form div.element ul.errors {
.non-list-like-list;
margin: 0.3em 0 0 0.6em;
li {
color: @colorCritical;
font-weight: bold;
}
}
form ul.form-errors {
.non-list-like-list;
margin-bottom: 1em;
background-color: @colorCritical;
ul.errors {
.non-list-like-list;
padding: 0;
li:last-child {
padding-bottom: 0;
}
}
li {
color: white;
font-weight: bold;
}
}
form ul.form-notifications {
.non-list-like-list;
margin-bottom: 1em;
padding: 0;
ul {
.non-list-like-list;
&.info {
background-color: @colorFormNotificationInfo;
}
&.warning {
background-color: @colorFormNotificationWarning;
}
&.error {
background-color: @colorFormNotificationError;
}
}
li {
color: white;
font-weight: bold;
}
}
form div.element {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
form label {
display: inline-block;
vertical-align: top;
margin-top: 0.25em;
margin-right: 1em;
font-size: 0.9em;
width: 10em;
}
form div.element i.help:before {
margin-top: 0.25em;
}
label ~ * {
vertical-align: top;
}
form dt {
vertical-align: top;
}
select, input[type=text], textarea {
width: 20em;
display: inline-block;
}
textarea {
height: 4em;
}
textarea.resource {
&.ssh-identity {
width: 50%;
height: 25em;
}
}
form .description {
font-size: 0.8em;
margin: 0.3em 0 0 0.6em;
}
.description {
display: block;
}
select.grant-permissions {
height: 20em;
width: auto;
}
label ~ input, label ~ select, label ~ textarea {
margin-left: 1.3em;
}
label + i ~ input, label + i ~ select, label + i ~ textarea {
margin-left: 0;
}
button.noscript-apply {
margin-left: 0.5em;
}
i.autosubmit-warning {
display: inline-block;
margin-left: 0.2em;
margin-top: 0.25em;
&:before {
margin: 0; // Disables wobbling
}
&.spinning:before {
content: '\e874'; // icon-spin6
.animate(spin 2s infinite linear);
}
}
input[type=checkbox] + i.autosubmit-warning {
margin-top: 0.15em;
}
html.no-js i.autosubmit-warning {
.sr-only;
}
form ul.descriptions {
.info-box;
padding: 0.5em 0.5em 0 1.8em;
li {
padding-bottom: 0.5em;
&:only-child {
margin-left: -1.3em;
list-style-type: none;
}
}
}
form ul.hints {
.non-list-like-list;
padding: 0.5em 0.5em 0 0.5em;
li {
font-size: 0.8em;
padding-bottom: 0.5em;
}
}
.control-group {
& > * {
float: left;
margin-right: 0.5em;
}
div.element {
margin-top: 0;
margin-bottom: 0;
}
&:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
}
//div.config-form-buttons {
// margin-top: 5px;
//}
//
//table.configTable {
// border-spacing: 15px;
// border-collapse: separate;
//}
//
//td.configTable {
// border: solid;
// border-width: thin;
// padding: 10px;
// min-width: 300px;
//}
//
//.form-element {
// margin-bottom: 1em;
//}
//
//label {
// display: block;
// font-weight: bold;
//}
//
//input, select, textarea {
// box-sizing: border-box;
// -moz-box-sizing: border-box;
// -webkit-box-sizing: border-box;
// border: 1px solid #ddd;
// font-size: 0.9em;
// padding: 0.2em;
// background: #fff;
// font-family: Calibri, Helvetica, sans-serif;
//}
//
//input[type=checkbox] {
// margin-top: 0.3em;
// margin-bottom: 0.1em;
//}
//
//input:focus, select:focus {
// border-color: #333;
//}
//
//input[type=submit] {
// font-weight: bold;
// text-align: center;
// color: #fff;
// border: 1px solid;
// border-color: @colorPetrol;
// background: @colorPetrol;
// outline: 0;
//
// &[disabled] {
// background-color: #666;
// border-color: black;
// }
//
// &:hover[disabled], &:active[disabled], &:focus[disabled] {
// background-color: #666;
// }
//}
//
//input[type=submit]:hover, a.button:hover, input[type=submit]:focus {
// background-color: #333;
// border-color: #333;
//}
//
//input[type=submit]:hover, a.button:hover {
// cursor: pointer;
// color: white;
//}
//
//input:focus, select:focus {
// background: white;
// outline: 0;
//}
//
//input::-moz-placeholder {
// color: #333;
//}
//
//input::-webkit-input-placeholder {
// color: #333;
//}
//
//input:-ms-input-placeholder {
// color: #333;
//}
//
//input::-moz-focus-inner {
// border: 0;
// outline: 0;
//}
//
//button::-moz-focus-inner {
// border: 0;
// outline: 0;
//}
//
//select::-moz-focus-inner {
// border: 0;
// outline: 0;
//}
//
//form.inline {
// margin: 0;
// padding: 0;
// display: inline;
//}
//
//div.spinner {
// display: inline-block;
// margin-top: 0.2em;
// margin-left: 0.25em;
//
// i {
// visibility: hidden;
//
// &.active {
// visibility: visible;
//
// &:before {
// .animate(spin 2s infinite linear);
// }
// }
//
// &:before {
// margin: 0; // Disables wobbling
// }
// }
//}
//
//button.animated.active {
// &.move-up i:before {
// .animate(move-vertical 500ms infinite linear);
// }
//
// &.move-down i:before {
// .animate(move-vertical 500ms infinite linear reverse);
// }
//}
//
//button, .button-like {
// font-size: 0.9em;
// font-weight: bold;
// outline: 0;
// color: #fff;
// padding: 0.2em;
// border: 1px solid;
// border-color: @colorPetrol;
// background: @colorPetrol;
//
// &[disabled] {
// background-color: #666;
// border-color: black;
// }
//
// &:hover, &:focus, &:active {
// background-color: #333;
// border-color: #333;
// cursor: pointer;
//
// &[disabled] {
// background-color: #666;
// }
// }
//}
//
//.button-like {
// display: inline-block;
//}
//
//a.button-like {
// cursor: default;
// text-decoration: none;
//}
//
//form.link-like input[type="submit"], form.link-like button[type="submit"], input.link-like, button.link-like {
// color: @colorLinkDefault;
// font-weight: normal;
// border: none;
// background: none;
// padding: 0;
// font-size: 1em;
// cursor: pointer;
//
// &.icon-only {
// color: inherit;
// font-size: 1.5em;
//
// &:hover, &:focus, &:active {
// color: #666;
// }
// }
//}
//
//form.link-like input[type="submit"]:hover,
//form.link-like input[type="submit"]:focus,
//form.link-like input[type="submit"]:active,
//form.link-like button[type="submit"]:hover,
//form.link-like button[type="submit"]:focus,
//form.link-like button[type="submit"]:active,
//input.link-like:hover,
//input.link-like:focus,
//input.link-like:active,
//button.link-like:hover,
//button.link-like:focus,
//button.link-like:active {
// text-decoration: underline;
// background: none;
// color: @colorLinkDefault;
//}
//
//.non-list-like-list {
// list-style-type: none;
// margin: 0;
// padding: 0.5em 0.5em 0;
//
// li {
// padding-bottom: 0.5em;
// }
//}
//
//form div.element ul.errors {
// .non-list-like-list;
// margin: 0.3em 0 0 0.6em;
//
// li {
// color: @colorCritical;
// font-weight: bold;
// }
//}
//
//form ul.form-errors {
// .non-list-like-list;
// margin-bottom: 1em;
// background-color: @colorCritical;
//
// ul.errors {
// .non-list-like-list;
// padding: 0;
//
// li:last-child {
// padding-bottom: 0;
// }
// }
//
// li {
// color: white;
// font-weight: bold;
// }
//}
//
//form ul.form-notifications {
// .non-list-like-list;
// margin-bottom: 1em;
// padding: 0;
//
// ul {
// .non-list-like-list;
//
// &.info {
// background-color: @colorFormNotificationInfo;
// }
//
// &.warning {
// background-color: @colorFormNotificationWarning;
// }
//
// &.error {
// background-color: @colorFormNotificationError;
// }
// }
//
// li {
// color: white;
// font-weight: bold;
// }
//}
//
//form div.element {
// margin-top: 0.5em;
// margin-bottom: 0.5em;
//}
//
//form label {
// display: inline-block;
// vertical-align: top;
// margin-top: 0.25em;
// margin-right: 1em;
// font-size: 0.9em;
// width: 10em;
//}
//
//form div.element i.help:before {
// margin-top: 0.25em;
//}
//
//label ~ * {
// vertical-align: top;
//}
//
//form dt {
// vertical-align: top;
//}
//
//select, input[type=text], textarea {
// width: 20em;
// display: inline-block;
//}
//
//textarea {
// height: 4em;
//}
//
//textarea.resource {
// &.ssh-identity {
// width: 50%;
// height: 25em;
// }
//}
//
//form .description {
// font-size: 0.8em;
// margin: 0.3em 0 0 0.6em;
//}
//
//.description {
// display: block;
//}
//
//select.grant-permissions {
// height: 20em;
// width: auto;
//}
//
//label ~ input, label ~ select, label ~ textarea {
// margin-left: 1.3em;
//}
//
//label + i ~ input, label + i ~ select, label + i ~ textarea {
// margin-left: 0;
//}
//
//button.noscript-apply {
// margin-left: 0.5em;
//}
//
//i.autosubmit-warning {
// display: inline-block;
// margin-left: 0.2em;
// margin-top: 0.25em;
//
// &:before {
// margin: 0; // Disables wobbling
// }
//
// &.spinning:before {
// content: '\e874'; // icon-spin6
// .animate(spin 2s infinite linear);
// }
//}
//
//input[type=checkbox] + i.autosubmit-warning {
// margin-top: 0.15em;
//}
//
//html.no-js i.autosubmit-warning {
// .sr-only;
//}
//
//form ul.descriptions {
// .info-box;
// padding: 0.5em 0.5em 0 1.8em;
//
// li {
// padding-bottom: 0.5em;
//
// &:only-child {
// margin-left: -1.3em;
// list-style-type: none;
// }
// }
//}
//
//form ul.hints {
// .non-list-like-list;
// padding: 0.5em 0.5em 0 0.5em;
//
// li {
// font-size: 0.8em;
// padding-bottom: 0.5em;
// }
//}
//
//.control-group {
// & > * {
// float: left;
// margin-right: 0.5em;
// }
//
// div.element {
// margin-top: 0;
// margin-bottom: 0;
// }
//
// &:after {
// content: ".";
// visibility: hidden;
// display: block;
// height: 0;
// clear: both;
// }
//}