diff --git a/library/Icinga/Web/StyleSheet.php b/library/Icinga/Web/StyleSheet.php index 8f7210cdf8..b4d890d587 100644 --- a/library/Icinga/Web/StyleSheet.php +++ b/library/Icinga/Web/StyleSheet.php @@ -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', diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index f149c32728..d113c44dbe 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -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; - } -} \ No newline at end of file +//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; +// } +//}