kai-jacobsen/kontentblocks

/*
* Fields Common Styles
*
*/

.kb-field {
  font-family: 'Open Sans', sans-serif !important;
}

.kb-field {

  label.heading {
    display: block;
    margin-bottom: 12px;
    padding-bottom: 4px;
    /* border-left: 2px solid #33b5e5; */
    /* padding-left: 20px; */
    /* margin-left: -20px; */
    font-weight: 900;
    font-size: 14px;
    color: #333333;
  }

  //background-color: #fff;
  padding: 10px 10px 0px 12px;
  text-align: left !important;

  // Text Input general
  input[type=text] {
    display: inline-block;
    text-align: left;
    height: 30px;
    line-height: 22px;
    //border: none;
    //border-bottom: 1px solid #dadada;
    font-size: 14px;
    //background: transparent !important;
    box-shadow: none !important;
    width: 60%;
    min-width: 150px !important;
    max-width: 450px !important;
    //padding: 0 10px 0 0 !important;
    transition: width .2s ease-out;
    margin: 0;

    &.large {
      width: 90%;
    }

    &:focus {
      //border-bottom: 1px solid $lightblue;
    }
  }

  // Select general
  select {
    min-width: 200px;
    max-width: 50%;
    height: 30px !important;
    padding: 0px 4px !important;
    line-height: 30px;
    margin: 0 !important;
  }

  input[type=checkbox] {
    margin-right: 3px;
    line-height: 150%;
  }

  select {
    min-width: 200px;
  }

}

body .kb-field-wrapper {
  border-left: 1px solid transparent;

  //&:hover{
  //  border-left: 1px solid #333;
  //}

  .kb-field-wrapper:hover {
    border-left: 1px solid transparent;

  }

}

.kb-field-wrapper {
  padding: $halfpadding 0;
  border-bottom: 1px dotted #eaeaea;
  position: relative;

  .kb-field-type-label {
    font-size: 9px !important;
    color: #666;
    text-transform: capitalize;
    padding: 1px 4px;
    position: absolute;
    top: 0;
    right: 0;
  }

  &:hover {
    background-color: #fefefe;
  }

  &.field-has-description {

    label.heading {
      margin-bottom: 0;
    }

    p.description {
      font-size: 12px;
      margin-bottom: 12px;
      font-style: normal;
      display: block;
    }
  }
}

.kb-field-wrapper.field-renderer-wp {

  &:hover {
    background-color: transparent;
    border-left: none;
  }

  .kb-field:not(.kb-field--flexfields) {

    .kb-field--label-heading {
      display: none;
    }

    input[type='text'] {
      width: 100%;
      max-width: 100% !important;
    }
  }

}

.kb-field--reset {
  margin: 0;
  font-size: 12px;
}

.kb-field--bubble.charcount {
  display: block;
  text-align: right;
  color: $grey-500;
}

@media screen and (min-width: 1200px) {

  .kb-field-flex.klearfix {
    //display: flex !important;
    flex-direction: row;
    &.kb-field {
      padding: 0;
    }

    .kb-field--label-wrap {
      //width: 150px;
      margin-right: 0;
      //background-color: $grey-100;
      padding: 20px;
      padding-bottom: 6px;
      margin-bottom: 12px;

      &:after{
        content: '';
        display: block;
        border-bottom: 1px solid $grey-300;
        width: 100px;

      }

      label.heading {
        font-size: 13px;
      }

    }

    .kb-field--field-wrap {
      //flex-grow: 1;
      padding: 20px 20px;
      padding-top: 0;

    }

  }
}


.kb-flex-wrapper.kb-field-wrapper {
  padding: 0;
}