Misago/misago/emberapp/app/styles/_misago/forms.less

//
// Form page
// --------------------------------------------------


//== Form container
//
//**
.form-panel {
  background: @form-panel-bg;
  border: 1px solid @form-panel-border;
  border-radius: @border-radius-large;
  box-shadow: 0px 0px 0px 3px @form-panel-shadow;
  overflow: hidden;

  form {
    margin: 0px;
    padding: 0px;
  }
}


//== Form header
//
//**
.form-panel {
  .form-header {
    padding: @form-panel-padding;

    h1, h2, h3 {
      margin: 0px;
    }

    h1 {
      font-size: @font-size-large * 1.6;
    }

    h2 {
      font-size: @font-size-large * 1.2;
    }

    h3 {
      font-size: @font-size-large;
    }

    p {
      margin: (@line-height-computed / 2) 0px 0px 0px;
    }
  }
}


//== Form non-field errors
//
//**
.form-panel {
  .form-errors-block {
    background-color: @state-danger-bg;
    border-radius: 0;
    margin-bottom: 0px;
    padding: (@form-panel-padding-vertical / 2) @form-panel-padding-horizontal;
    overflow: auto;

    color: @state-danger-text-contrast;
    font-size: @font-size-large;

    .fa {
      position: relative;
      top: 4px;

      float: right;
      font-size: 26px;
    }

    ul {
      margin-right: 56px;
      margin-bottom: 0px;
      padding: 0px;

      li {
        margin: 0px;
        padding: (@line-height-computed / 5) 0px;
      }
    }
  }
}


//== Form alerts
//
//**
.form-panel {
  .misago-alerts {
    margin: 0px @form-panel-padding-vertical;

    .alert.lead {
      font-size: @font-size-large;
    }
  }
}


//== Form body
//
//**
.form-panel {
  .form-body {
    fieldset, &.no-fieldsets {
      margin: 0px;
      padding-bottom: @line-height-computed * .25;

      legend {
        border-top: 1px solid @form-panel-border;
        border-bottom: 0px;
        padding: @form-panel-padding;
        padding-bottom: 0px;
        margin-bottom: @line-height-computed * .6;

        font-size: @font-size-large;
      }

      .form-group {
        margin-left: @form-panel-padding-horizontal;
        margin-right: @form-panel-padding-horizontal;
      }

      .control-checkboxselect, .control-radioselect {
        label.checkbox, label.radio {
          font-weight: normal;

          &:first-child {
            margin-top: 0px;
          }
        }
      }

      .misago-editor {
        margin: @form-panel-padding;
        margin-top: 0px;
      }

      .help-block {
        color: @field-help-block-color;
        margin-bottom: 0px;
        padding-bottom: 0px;
      }

      .control-errors {
        &, & .help-block {
          color: @state-danger-text;
          font-weight: bold;
        }
      }

      .control-success {
        &, & .help-block {
          color: @state-success-text;
          font-weight: bold;
        }
      }

      .gallery {
        padding: @form-panel-padding;
        padding-top: 0px;
        padding-bottom: 0px;
      }

      .extra-padding {
        padding: @form-panel-padding;
        padding-top: 0px;
      }
    }

    &.no-fieldsets {
      border-top: 1px solid @form-panel-border;
      padding: 0px;
      padding-top: @line-height-computed;
      padding-bottom: @line-height-computed * .25;
    }

    &.form-markup-preview {
      border-top: 1px solid @form-panel-border;
      padding: @form-panel-padding;
      padding-top: @line-height-computed;
      padding-bottom: @line-height-computed * .5;

      .misago-markdown {
        margin-bottom: @line-height-computed;
      }
    }

    &.form-text {
      border-top: 1px solid @form-panel-border;
      padding: @form-panel-padding;
      padding-top: @line-height-computed;
      padding-bottom: 0px;
    }
  }
}


//== Form footer
//
//**
.form-panel {
  .form-footer {
    background-color: @form-panel-footer-bg;
    border-radius: 0px 0px (@border-radius-large - 1px) (@border-radius-large - 1px);
    border-top: 1px solid @form-panel-border;
    padding: @form-panel-padding;

    &>.row>div {
      padding: 0px @padding-base-horizontal * 2;
    }

    a.extra, p.extra {
      margin-top: @line-height-computed;
    }

    a.extra {
      display: inline-block;
    }

    div.extra {
      margin-top: @line-height-computed + @form-panel-padding-vertical / 2;
    }

    p, div {
      &.extra {
        a {
          color: @state-hover;
          text-decoration: underline;

          &:hover {
            color: @state-hover;
          }

          &:active {
            color: @state-clicked;
          }
        }
      }
    }
  }
}


/* Big displays */
@media (min-width: @screen-sm-min) {
  .form-panel {
    .form-footer {
      p.extra {
        display: inline-block;
      }

      a.extra, p.extra {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: @padding-base-horizontal;
      }
    }
  }
}


// Form side panel
.form-panel{
  &.form-side-panel {
    .form-body {
      &:first-child {
        legend {
          border-top: none;
        }
      }

      fieldset {
        legend {
          font-size: @font-size-base;
          font-weight: bold;
        }
      }
    }
  }
}