icingaweb2/public/css/icinga/forms.less

/*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */

/**********************************************************************************************************************
                                   used colors (todo: move to base.less eventually)
***********************************************************************************************************************/

@disabled-gray: #9a9a9a;
@low-sat-blue: #dae3e6;
@low-sat-blue-dark: #becbcf;
@icinga-blue-light: #a5c4cd;
@icinga-blue-dark: #0081a6;

/**********************************************************************************************************************
                                             general form layout
***********************************************************************************************************************/

form:not(.inline):not([role="search"]) {
  max-width: 70em;
  width: 80%;
}

.form-element,
.form-controls {
  display: flex;
  margin-left: 16em;

}

.form-control {
  display: inline-block;
  float: right;

  &:not(:last-child) {
    margin-left: .5em;
  }

  &:last-child {
    .clearfix();
  }
}

.control-group {
  display: flex;
  margin: 0 -.5em;

  > * {
    margin: .5em;
  }
}

/**********************************************************************************************************************
                                             minimal form layout
***********************************************************************************************************************/

#layout.minimal-layout,
#layout.twocols:not(.wide-layout) {
  form:not(.inline) {
    width: 100%;

    .control-label-group {
      text-align: left;
      width: 100%;
      padding-bottom: 0;
      padding-left: 0;
      margin-bottom: 0;
    }
  }

  .toggle-switch ~ .control-info:before {
    margin-left: 0;
  }

  .control-info {
    position: relative;
  }

  .errors > li {
    margin-left: .5em;
  }
}

/**********************************************************************************************************************
                                                 label styles
***********************************************************************************************************************/

.control-group .control-label-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  padding: .5625em;
  max-height: 2.5em;
  text-align: right;
  width: 15em;
}

.control-info {
  line-height: 2.5em;

  &:before {
    margin-left: -.5em;
    margin-right: .5em;
  }
}

.toggle-switch ~ .control-info {
  position: relative;
  margin-left: .5em;
}

.spinner {
  line-height: 2.5em;
  margin: .5em 0;

  &:before {
    margin-left: .5em;
    opacity: 0.4;
  }
}

select ~ .spinner:before {
  margin-left: -3.5em;
}

/**********************************************************************************************************************
                                               general input styles
***********************************************************************************************************************/

.control-group input[type="text"],
.control-group input[type="password"],
.control-group input[type="number"],
.control-group textarea,
.control-group select {
  background: @low-sat-blue;
  flex: 1;
}

.control-group input:not([type="checkbox"]),
.control-group .toggle-switch,
.control-group button,
.control-group select,
.control-group textarea,
.form-controls button,
.form-controls .toggle-switch,
.form-controls input {
  border: none;
  border-radius: .25em;
  font-size: inherit;
  padding: .5625em;
  .appearance(none);
}

.control-group .toggle-switch,
.form-controls .toggle-switch {
  margin: 1em .5em;
}

/**********************************************************************************************************************
                                             specific input styles
***********************************************************************************************************************/

input.search {
  .transition(border 0.3s ease);
  .transition(background-image 0.2s ease);

  background: transparent url(../img/icons/search.png) no-repeat scroll 0.1em center;
  background-size: 1em 1em;
  border: none;
  border-bottom: 1px solid @gray-light;
  outline: none;
  padding: @vertical-padding / 2 @horizontal-padding / 2;
  padding-left: 1.5em;
  width: 20em;

  &:focus {
    background-color: @body-bg-color;
    background-image: url(../img/icons/search_icinga_blue.png);
  }
  &:focus:not([readonly]) {
     border-color: @icinga-blue;
   }
}

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

  text-align: left;
}

/* The default resize handles are still displayed over the image, so I will remove this for now
.control-group textarea {
  background-image: url(../img/textarea-corner-2x.png);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 1em 1em;
} */

.control-group select {
  padding-right: 1.5625em;
}

/* Remove native dropdown arrow in IE10+ */
.control-group select::-ms-expand {
  display: none;
  opacity: 0
}

.form-controls input:not(:last-child),
.form-controls button:not(:last-child) {
  margin-right: 1em;
}

.control-group select:not([multiple]) {
  background-image: url(../img/select-icon.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

/**********************************************************************************************************************
                                               button styles
***********************************************************************************************************************/

.form-controls input[type="submit"],
.form-controls input[type="submit"].btn-confirm {
  .button();
}

.form-controls input[type="submit"].btn-remove {
  .button(@body-bg-color, @color-critical, darken(@color-critical, 10%));
}

.form-controls input[type="submit"].btn-cancel {
  .button(@body-bg-color, @gray, @black);
}

/**********************************************************************************************************************
                                               IPL toggle styles
***********************************************************************************************************************/

/* The switch - the box around the slider */
.toggle-switch {
  cursor: pointer;
  position: relative;
  display: inline-block;
  height: 1.5em;
  width: 2.625em;
}

/* Hide default HTML checkbox */
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.toggle-slider {
  position: absolute;
  left: 0;
  top: 0;

  display: inline-block;
  background:  @low-sat-blue;
  border: 1px solid @low-sat-blue;
  box-sizing: content-box;
  border-radius: 1em;
  height: 4/3em;
  width: 8/3em;
  vertical-align: middle;
}

.toggle-slider:before {
  position: absolute;
  top: 0;
  left: 0;

  background: @text-color-inverted;
  border-radius: 1em;
  border: 1px solid @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;
}

input:checked + .toggle-slider {
  background-color: @icinga-blue;
  border: 1px solid @icinga-blue;
}

input:focus + .toggle-slider {
  box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@icinga-blue, 40);
}

input:checked + .toggle-slider:before {
  border: 1px solid @icinga-blue;
  left: 100%;
  margin-left: -4/3em;
}

/**********************************************************************************************************************
                                                 disabled inputs
***********************************************************************************************************************/

.toggle-switch.disabled {
  cursor: default;

  & > .toggle-slider {
    background-color: @gray-light;
    border-color: @gray-light;

    &:before {
      background-color: @gray-lighter;
      border-color: @gray-light;
    }
  }
}

.control-group.disabled .control-label-group {
  color: @disabled-gray;
}

.control-group input[disabled],
.control-group select[disabled] {
  background: @gray-lighter;
  border: none;
}

/**********************************************************************************************************************
                                          errors and additional information
***********************************************************************************************************************/

.form-notifications,
.form-description {
  border-radius: .25em;
  display: flex;
  list-style: none;
  margin: 0 0 1em 0;
  padding: 1em .5em;

  ul {
    list-style: none;
    margin: 0;
    padding: 0 .5em;
  }

  li {
    list-style: none;
  }

  & .form-notification-icon,
  & .form-description-icon {
    margin-left: 1em;
  }
}

.form-notifications {
  background-color: fade(@color-ok, 20%);
}

.form-description {
  background-color: fade(@gray, 20%);
}

.errors {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;

  & > li {
    margin: -0.5em 0 0.5em 16.5em;
    color: #f56;
  }
}

.form-element-error {
  color: @color-critical;
  margin: 0 0 0.5em 15em;
  padding: 0.5625em;
  width: 100%;
}

.control-group {
  flex-wrap: wrap;
}

.form-info {
  color: @text-color-light;
  font-size: @font-size-small;
  list-style: none;
  padding-left: 0;
}

/**********************************************************************************************************************
                                                placeholder styles
***********************************************************************************************************************/

input:-moz-placeholder { // FF 18-
  color: @gray-light;
  opacity: 1;
}

input::-moz-placeholder { // FF 19+
  color: @gray-light;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: @gray-light;
}

input::-webkit-input-placeholder {
  color: @gray-light;
}


/**********************************************************************************************************************
                                             specific form styles
***********************************************************************************************************************/


.limiter-control-form > * {
  display: inline-block;
  margin-right: 0.25em;
}

.search.inline {
  display: inline-block;
}


.sort-control > * {
  display: inline-block;
  margin: 0.5em 0;
}