forms.less

/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */

input {
  .transition(border 0.3s ease);

  border: none;
  border-bottom: 1px solid @gray-light;
  color: inherit;
  display: inline-block;
  padding: @vertical-padding / 2 @horizontal-padding / 2;

  &:focus {
    border-color: @icinga-blue;
    outline: none;
  }
}

input.search {
  padding-left: 20px;
  background: @gray-lightest url('../img/icons/search.png') no-repeat 2px;
  background-size: 12px 12px;

  &:focus {
    background-color: @body-bg-color;
  }

  &::-webkit-input-placeholder {
    color: @text-color;
  }

  &:-moz-placeholder {
    color: @text-color;
  }

  &::-moz-placeholder {
    color: @text-color;
  }

  &:-ms-input-placeholder {
    color: @text-color;
  }
}

input, select, textarea {
  width: 320px;
}

input[type="checkbox"],
input[type="radio"],
input[type="submit"] {
  width: initial;
}

// TODO(el): .form-inline control-group { display: inline-block; }
form.inline {
  .control-group {
    padding: 0;
  }
  .form-controls {
    margin: 0;
  }
  display: inline-block;
}

.form-controls {
  margin-left: 160px;
}


.control-button,
input[type="submit"] {
  .button();
}

button:hover .icon-cancel {
  color: @color-critical;
}

.control-info {
  color: @text-color-light;

  &:hover {
    .opacity(0.6);
  }
}

.control-label {
  display: inline-block;
}

label {
  color: @text-color-light;
  font-size: @font-size-small;
}

.control-label-group {
  display: inline-block;
  padding-right: @horizontal-padding;
  text-align: right;
  width: 160px;
}

.control-group {
  padding: @vertical-padding @horizontal-padding;

  .errors {
    color: @color-critical;
  }
}

.link-button {
  .action-link();
  // Reset defaults
  background: none;
  border: none;
  padding: 0;

  font-weight: @font-weight-bold;

  &:hover {
    text-decoration: underline;
  }
}

// @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 {
  color: @text-color-light;
  font-size: @font-size-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);
  }
}

textarea {
  height: 4em;
}

select.grant-permissions {
  height: 20em;
  width: auto;
}

//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;
//  }
//}