22

✏️ Editing: vc_separator.less

@vc_separator-title-padding: 0.8em;
@vc_separator-shadow-size: 10px;

.vc_separator {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  h4 {
    line-height: 1em;
    font-size: 100%;
    margin: 0;
    word-wrap: break-word;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    .normal {
      font-size: 12px;
      font-weight: normal;
    }
  }
  .vc_sep_holder {
    height: 1px;
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 10%;
    .vc_sep_line {
      height: 1px;
      border-top: 1px solid  @vc_separator_border;
      display: block;
      position: relative;
      top: 1px;
      width: 100%;
    }
  }
  &.vc_separator_align_center {
    h4 {
      padding: 0 @vc_separator-title-padding;
    }
  }
  &.vc_separator_align_left {
    h4 {
      padding: 0 @vc_separator-title-padding 0 0;
    }
    .vc_sep_holder.vc_sep_holder_l {
      display: none;
    }
  }
  &.vc_separator_align_right {
    h4 {
      padding: 0 0 0 @vc_separator-title-padding;
      margin: 0 !important;
    }
    .vc_sep_holder.vc_sep_holder_r {
      display: none;
    }
  }
  &.vc_sep_ {
    &double {
      height: 3px;
      .vc_sep_line {
        border-bottom: 1px solid @vc_separator_border;
        border-top: 1px solid  @vc_separator_border;
        height: 3px;
      }
    }
    &dashed {
      .vc_sep_line {
        border-top-style: dashed;
      }
    }
    &dotted {
      .vc_sep_line {
        border-top-style: dotted;
      }
    }
  }

// shadow style
  &.vc_sep_shadow {
    .vc_sep_line {
      border: none;
      position: relative;
      height: @vc_separator-shadow-size * 2;
      top: 0;
      overflow: hidden;
      &::after {
        content:'';
        display: block;
        position: absolute;
        left: 0;
        top: -@vc_separator-shadow-size * 2;
        right: 0;
        height: @vc_separator-shadow-size;
        border-radius: 100%;
      }
    }
    .vc_sep_holder_l .vc_sep_line::after {
      right: -100%;
      box-shadow: @vc_separator-shadow-size @vc_separator-shadow-size @vc_separator-shadow-size 1px;
    }
    .vc_sep_holder_r .vc_sep_line::after {
      left: -100%;
      box-shadow: -@vc_separator-shadow-size @vc_separator-shadow-size @vc_separator-shadow-size 1px;
    }
  }

&.vc_separator_no_text:not(.vc_sep_shadow) {
    .vc_sep_holder_l {
      width: 100%;
    }
    .vc_sep_holder_r {
      display: none;
    }
  }
  // icon behaviour
  .vc_icon_element {
    margin-bottom: 0;
    &:not(.vc_icon_element-have-style){
      + h4 {
        padding-left: 0;
      }
      .vc_icon_element-size-xl {
        margin-left: @vc_separator-title-padding;
        margin-right: @vc_separator-title-padding;
      }
    }
  }
  &.vc_separator-has-text {
    &.vc_separator_align_center,
    &.vc_separator_align_right {
      .vc_icon_element {
        &.vc_icon_element-have-style {
          margin-left: @vc_separator-title-padding;
        }
      }
    }
  }
  &.vc_separator_align_left {
    .vc_icon_element {
      &.vc_icon_element-have-style {
        + h4 {
          padding-left: @vc_separator-title-padding;
        }
      }
    }
  }
  //Border widths
  .vc_separator_widths(1);
  .vc_separator_widths(2);
  .vc_separator_widths(3);
  .vc_separator_widths(4);
  .vc_separator_widths(5);
  .vc_separator_widths(6);
  .vc_separator_widths(7);
  .vc_separator_widths(8);
  .vc_separator_widths(9);
  .vc_separator_widths(10);

.vc_separator_widths(@width) {
    &.vc_sep_border_width_@{width} {
      .vc_sep_holder .vc_sep_line {
        border-top-width: unit(@width, px);
      }
      &.vc_sep_double .vc_sep_holder .vc_sep_line {
        border-bottom-width: unit(@width, px);
        top: unit(ceil(-@width/2), px);
      }
      &.vc_sep_shadow {
        .vc_sep_line {
          top: -(unit(floor(@width/2), px));
        }
        .vc_sep_holder_l .vc_sep_line::after {
          box-shadow: @vc_separator-shadow-size @vc_separator-shadow-size @vc_separator-shadow-size unit(@width, px);
        }
        .vc_sep_holder_r .vc_sep_line::after {
          box-shadow: -@vc_separator-shadow-size @vc_separator-shadow-size @vc_separator-shadow-size unit(@width, px);
        }
      }
    }
  }
  //Color variations
  .vc_separator_variants(_blue, @blue);
  .vc_separator_variants(_turquoise, @turquoise);
  .vc_separator_variants(_pink, @pink);
  .vc_separator_variants(_violet, @violet);
  .vc_separator_variants(_peacoc, @peacoc);
  .vc_separator_variants(_chino, @chino);
  .vc_separator_variants(_mulled_wine, @mulled_wine);
  .vc_separator_variants(_vista_blue, @vista_blue);
  .vc_separator_variants(_black, @black);
  .vc_separator_variants(_grey, @grey);
  .vc_separator_variants(_orange, @orange);
  .vc_separator_variants(_sky, @sky);
  .vc_separator_variants(_green, @green);
  .vc_separator_variants(_juicy_pink, @juicy_pink);
  .vc_separator_variants(_sandy_brown, @sandy_brown);
  .vc_separator_variants(_purple, @purple);
  .vc_separator_variants(_white, @white);
}

.vc_separator_variants(@selector, @color) {
  &.vc_sep_color {
    &@{selector} {
      .vc_sep_line {
        border-color: @color;
      }
      &.vc_sep_shadow {
        .vc_sep_holder {
          color: @color;
        }
      }
    }
  }
}

.wpb_separator,
.vc_text_separator {
  border-bottom: 1px solid @vc_separator_border;
}

.vc_sep_width {
  &_10 {
    width: 10%;
  }
  &_20 {
    width: 20%;
  }
  &_30 {
    width: 30%;
  }
  &_40 {
    width: 40%;
  }
  &_50 {
    width: 50%;
  }
  &_60 {
    width: 60%;
  }
  &_70 {
    width: 70%;
  }
  &_80 {
    width: 80%;
  }
  &_90 {
    width: 90%;
  }
  &_100 {
    width: 100%;
  }
}

.vc_sep_pos {
  &_align_center {
    margin-left: auto;
    margin-right: auto;
  }
  &_align_left {
    margin-left: 0;
    margin-right: auto;
  }
  &_align_right {
    margin-left: auto;
    margin-right: 0;
  }
}

/* Separator
---------------------------------------------------------- */
.wpb_separator {
  clear: both;
  height: 1px;
}

/* Text Separator
---------------------------------------------------------- */
.vc_text_separator {
  clear: both;
  height: 1px;
  div {
    display: inline-block;
    background-color: @bodyBackground;
    padding: 1px 1em;
    position: relative;
    top: -9px;
  }
}

.separator_align_center {
  text-align: center;
}

.separator_align_left {
  text-align: left;
}

.separator_align_right {
  text-align: right;
}

MR SKB