1 files changed, 596 insertions, 0 deletions
diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less
new file mode 100644
index 0000000..00389ea
--- /dev/null
+++ b/public/css/icinga/forms.less
@@ -0,0 +1,596 @@
+/*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */
+
+/**
+ Rules found in here are structured with two layers:
+
+  1) form.icinga-form, that's what defines the general structure of our single/individual forms. It's not
+     supposed to be used for any other forms that are not the only content on the page (e.g. inline-forms)
+  2) .icinga-controls, this defines the design of our controls. Any input that's part of a container with
+     this class gets our design applied
+ */
+
+// General form layout
+
+form.icinga-form {
+  max-width: 70em;
+  width: 80%;
+
+  .control-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+
+    // Negative margin-right because every child gets 1em right but we can't exclude
+    // the last element as it's impossible to identify the last *visible* element
+    margin: 1em -1em 1em 0;
+
+    > fieldset {
+      > .control-group:first-of-type {
+        margin-top: 0;
+      }
+
+      > .control-group:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .control-group > :not(.control-label-group) {
+    margin-right: 1em;
+  }
+
+  .form-controls {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &.inline {
+    width: auto;
+
+    .control-group {
+      margin: 0;
+      align-items: center;
+
+      > :not(.control-label-group) {
+        margin-right: .5em;
+      }
+
+      &:last-child {
+        margin-right: -.5em;
+      }
+    }
+  }
+}
+
+form.inline {
+  display: inline-block;
+
+  fieldset {
+    display: inline-block;
+    vertical-align: top;
+    border: none;
+  }
+}
+
+// Minimal form layout
+
+#layout.minimal-layout,
+#layout.twocols:not(.wide-layout) {
+  form.icinga-form {
+    &:not(.inline) {
+      width: 100%;
+    }
+
+    .control-label-group {
+      text-align: left;
+      padding-bottom: 0;
+      padding-left: 0;
+      margin-bottom: 0;
+    }
+
+    .toggle-switch ~ .control-info:before {
+      margin-left: 0;
+    }
+
+    .errors {
+      margin: 0;
+    }
+  }
+}
+
+#layout.minimal-layout .icinga-form {
+  .form-controls {
+    input[type="submit"] {
+      width: 100%;
+
+      &:not(:last-child) {
+        margin-bottom: 1em;
+      }
+    }
+  }
+}
+
+// Label styles
+
+form.icinga-form .control-label-group {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1.1em;
+  padding: .5625em .5625em .5625em 0;
+  max-height: 2.5em;
+  text-align: right;
+  width: 14em;
+}
+
+form.icinga-form.inline .control-label-group {
+  width: auto;
+  line-height: 0.857em;
+}
+
+.icinga-controls fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  legend {
+    font-weight: bold;
+    font-size: 4/3em;
+    margin: 0.556em 0 0.333em;
+  }
+}
+
+.icinga-controls .control-info {
+  line-height: 2.25em;
+  opacity: .6;
+
+  &:before {
+    margin-right: 0;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+form.icinga-form .control-group .control-info {
+  margin-left: -.5em;
+}
+form.icinga-form .control-group .toggle-switch ~ .control-info {
+  margin-left: 0;
+}
+
+// General input styles
+
+.icinga-controls {
+  input[type="text"],
+  input[type="password"],
+  input[type="number"],
+  input[type="datetime-local"],
+  input[type="date"],
+  input[type="time"],
+  input[type="file"],
+  textarea,
+  select {
+    background-color: @low-sat-blue;
+  }
+}
+
+form.icinga-form {
+  input[type="text"],
+  input[type="password"],
+  input[type="number"],
+  input[type="datetime-local"],
+  input[type="date"],
+  input[type="time"],
+  input[type="file"],
+  .control-group > fieldset,
+  textarea,
+  select {
+    flex: 1 1 auto;
+    width: 0;
+  }
+}
+
+.icinga-controls {
+  input:not([type="radio"]),
+  .toggle-switch,
+  button,
+  select,
+  textarea {
+    border: none;
+    .rounded-corners(.25em);
+    .appearance(none);
+  }
+}
+
+.icinga-controls {
+  input:not([type="checkbox"]),
+  .toggle-switch,
+  select,
+  textarea,
+  button,
+  .toggle-switch {
+    font-size: inherit;
+    padding: @vertical-padding;
+  }
+
+  input[type="radio"] {
+    margin-right: .25em;
+  }
+}
+
+form.icinga-form {
+  .control-group .toggle-switch,
+  .form-controls .toggle-switch {
+    margin-top: 0.5em*0.666666667;
+    margin-bottom: 0.5em*0.666666667;
+  }
+}
+
+form.icinga-form select:not([multiple]) {
+  // Compensate inconsistent select height calculations
+  line-height: 1em;
+  height: 2.25em;
+}
+
+// Remove native dropdown arrow in IE10+
+.icinga-controls select::-ms-expand {
+  display: none;
+  opacity: 0;
+}
+
+.icinga-controls select:not([multiple]) {
+  padding-right: 1.5625em;
+  background-image: url(../img/select-icon.svg);
+  background-repeat: no-repeat;
+  background-position: right center;
+  background-size: contain;
+}
+
+form.icinga-form select {
+  width: 0; // Prevent selects with long option values from exceeding the container
+}
+
+form.inline select {
+  width: auto;
+}
+
+
+// Specific input styles
+
+.link-button {
+  .action-link();
+  // Reset defaults
+  background: none;
+  border: none;
+  display: inline-block;
+  padding: 0;
+
+  text-align: left;
+}
+
+.icinga-controls {
+  input ~ .spinner,
+  button ~ .spinner,
+  select ~ .spinner,
+  textarea ~ .spinner {
+    line-height: normal;
+    padding: .5em 0;
+
+    &:before {
+      vertical-align: middle;
+      margin-left: .5em;
+      opacity: 0.4;
+    }
+  }
+}
+
+/* selects get their spinner specifically placed */
+.icinga-controls select:not([multiple]) + .spinner {
+  height: 2.25em;
+  margin: 0;
+
+  &:before {
+    margin-left: -3.75em;
+  }
+}
+
+form.icinga-form .form-controls {
+  .spinner {
+    order: -1;
+  }
+
+  .btn-primary {
+    order: 99;
+  }
+}
+
+// Button styles
+
+.icinga-controls {
+  button:not([type]),
+  button[type="submit"],
+  input[type="submit"],
+  input[type="submit"].btn-confirm {
+    .button();
+  }
+
+  input[type="submit"].btn-remove {
+    .button(@body-bg-color, @color-critical, @color-critical-accentuated);
+  }
+
+  input[type="submit"].btn-cancel {
+    .button(@body-bg-color, @gray, @black);
+  }
+
+  button.noscript-apply {
+    color: @gray;
+    background-color: @gray-lightest;
+    border-color: @gray;
+    border-width: 1px;
+  }
+
+  button[type="button"] {
+    background-color: @low-sat-blue;
+  }
+}
+
+form.icinga-form {
+  button[type="button"] {
+    line-height: normal;
+  }
+}
+
+form.inline {
+  :not([type="hidden"]) {
+    & ~ button:not([type]),
+    & ~ button[type="submit"],
+    & ~ input[type="submit"],
+    & ~ input[type="submit"].btn-confirm {
+      margin-left: @horizontal-padding;
+    }
+  }
+
+  button.noscript-apply {
+    margin-left: .5em;
+    padding: .1em;
+  }
+}
+
+// Toggle styles
+
+.icinga-controls .toggle-switch {
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  height: 1.5em;
+  width: 2.625em;
+}
+
+.icinga-controls .toggle-switch .toggle-slider {
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  display: inline-block;
+  background: @low-sat-blue;
+  border: 1px solid;
+  border-color: @low-sat-blue;
+  box-sizing: content-box;
+  border-radius: 1em;
+  height: 4/3em;
+  width: 8/3em;
+  vertical-align: middle;
+}
+
+.icinga-controls .toggle-switch .toggle-slider:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  background: @text-color-inverted;
+  border-radius: 1em;
+  border: 1px solid;
+  border-color: @low-sat-blue;
+  box-sizing: border-box;
+  content: "";
+  display: block;
+  height: 4/3em;
+  margin-left: 0;
+  width: 4/3em;
+
+  @transition: left .2s ease, margin .2s ease;
+  -webkit-transition: @transition;
+  -moz-transition: @transition;
+  -o-transition: @transition;
+  transition: @transition;
+}
+
+.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
+  background-color: @icinga-blue;
+  border: 1px solid;
+  border-color: @icinga-blue;
+}
+
+.icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
+  box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px @icinga-blue-light;
+}
+
+.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {
+  border: 1px solid;
+  border-color: @icinga-blue;
+  left: 100%;
+  margin-left: -4/3em;
+}
+
+// Disabled inputs
+
+.icinga-controls .toggle-switch.disabled {
+  cursor: default;
+
+  & > .toggle-slider {
+    background-color: @gray-light;
+    border-color: @gray-light;
+
+    &:before {
+      background-color: @gray-lighter;
+      border-color: @gray-light;
+    }
+  }
+}
+
+form.icinga-form .control-group.disabled .control-label-group {
+  color: @disabled-gray;
+}
+
+.icinga-controls {
+  input[disabled],
+  select[disabled] {
+    background-color: @gray-lighter;
+    border-color: transparent;
+  }
+}
+
+// Errors and additional information
+
+form.icinga-form {
+  .form-notifications,
+  .form-description {
+    border-radius: .25em;
+    display: flex;
+    list-style: none;
+    align-items: center;
+    margin: 0 0 1em 0;
+    padding: .25em .5em;
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0 .5em;
+    }
+
+    li {
+      list-style: none;
+    }
+
+    & .form-notification-icon,
+    & .form-description-icon {
+      font-size: 2em;
+      margin-left: .25em;
+      opacity: .4;
+      align-self: flex-start;
+    }
+  }
+
+  .form-notifications {
+    &.info {
+      background-color: @form-info-bg-color;
+    }
+
+    &.error {
+      background-color: @form-error-bg-color;
+    }
+
+    &.warning {
+      background-color: @form-warning-bg-color;
+    }
+  }
+
+  .form-description {
+    background-color: @light-text-bg-color;
+  }
+
+  .errors {
+    list-style: none;
+    display: block;
+    width: 100%;
+    margin: 0 0 0 15em;
+    padding: 0;
+
+    & > li {
+      margin: 0.5em;
+      color: #f56;
+    }
+  }
+}
+
+form.icinga-form .form-info {
+  color: @text-color-light;
+  font-size: @font-size-small;
+  list-style: none;
+  padding-left: 0;
+}
+
+// Placeholder styles
+
+.icinga-controls {
+  input::placeholder {
+    color: @disabled-gray;
+    font-style: italic;
+    opacity: 1;
+  }
+
+  input:-ms-input-placeholder {
+    color: @disabled-gray;
+    font-style: italic;
+    opacity: 1;
+  }
+}
+
+// Specific form styles
+
+.search.inline {
+  display: inline-block;
+}
+
+/* Flyover form styles */
+
+.flyover-content form:not(.inline):not([role="search"]) {
+  width: auto;
+}
+
+.flyover-content .control-label-group {
+  text-align: left;
+}
+
+.theme-mode-input {
+  display: none;
+
+  &:checked + img {
+    border-color: @icinga-blue;
+    border-radius: .25em;
+  }
+
+  & + img {
+    margin: 0 auto;
+    border: .25em solid transparent;
+    display: block;
+    width: 6em;
+    overflow: hidden;
+    box-shadow: 0 0 .25em 0 rgba(0,0,0,.4);
+  }
+
+  &[disabled] ~ img,
+  &[disabled] ~ span {
+    opacity: .25;
+  }
+
+  & ~ span {
+    display: block;
+    text-align: center;
+  }
+}
+
+#layout.minimal-layout .icinga-form {
+  .theme-mode {
+    .control-label-group {
+      width: 100%;
+      margin-bottom: .5em;
+    }
+
+    label:first-of-type {
+      margin-left: auto;
+    }
+  }
+}