22

✏️ Editing: vc_icon_element.less

@icon-element-bottom-margin: @vc_element_margin_bottom;
@icon-element-rounded-radius: 5px;
@icon-element-font-size-base: 14px;

@icon-element-icon-size-xs: 1.20em;
// 17px
@icon-element-icon-size-sm: 1.6em;
// 22px
@icon-element-icon-size-md: 2.15em;
// 30px default
@icon-element-icon-size-lg: 2.85em;
// 40px
@icon-element-icon-size-xl: 5em;
// 70px

@icon-element-box-size-xs: 2.5em;
// 35px
@icon-element-box-size-sm: 3.15em;
// 45px
@icon-element-box-size-md: 4em;
// 56px default
@icon-element-box-size-lg: 5em;
// 70px
@icon-element-box-size-xl: 7.15em;
// 100px

.vc_icon_element {
  line-height: 0;
  font-size: @icon-element-font-size-base;
  margin-bottom: @icon-element-bottom-margin;
  &.vc_icon_element-outer {
    box-sizing: border-box;
    text-align: center; // default align
    //align styles
    &.vc_icon_element-align-left {
      text-align: left;
    }
    &.vc_icon_element-align-center {
      text-align: center;
    }
    &.vc_icon_element-align-right {
      text-align: right;
    }

.vc_icon_element-inner {
      text-align: center;
      display: inline-block;
      border: 2px solid transparent;
      width: @icon-element-box-size-md; // default size md
      height: @icon-element-box-size-md; //default size md
      box-sizing: content-box; // helps for font-awesome centring on small sizes
      position: relative;
      .vc_icon_element-icon {
        font-size: @icon-element-icon-size-md; // default size md
        // font awesome logic for all icons
        font-style: normal;
        line-height: 1 !important;
        font-size-adjust: none;
        font-stretch: normal;
        -webkit-font-feature-settings: normal;
        font-feature-settings: normal;
        -webkit-font-language-override: normal;
        font-language-override: normal;
        -webkit-font-kerning: auto;
        font-kerning: auto;
        font-synthesis: weight style;
        font-variant: normal;
        text-rendering: auto;

display: inline-block;

position: absolute;
        top: 50%;
        left: 50%;

.translate(-50%, -50%);

&:before {
          font-style: normal;
          display: inline-block;
          text-decoration: inherit;
          width: inherit;
          height: inherit;
          font-size: 1em;
          text-align: center;
          text-rendering: optimizelegibility;
        }

}

.vc_icon_element-link, .vc_gitem-link {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        box-sizing: content-box;
        border: none;
      }

// size styles
      .size-(@selector, @size, @font_size) {
        &.vc_icon_element-size-@{selector} {
          // fix if no background style selected
          &.vc_icon_element-have-style-inner {
            width: @size !important;
            height: @size !important;
          }
          max-width: 100% !important;
          line-height: @font_size !important;
          .vc_icon_element-icon {
            font-size: @font_size !important;
          }
        }
      }
      .size-(~"xs", @icon-element-box-size-xs, @icon-element-icon-size-xs);
      .size-(~"sm", @icon-element-box-size-sm, @icon-element-icon-size-sm);
      .size-(~"md", @icon-element-box-size-md, @icon-element-icon-size-md);
      .size-(~"lg", @icon-element-box-size-lg, @icon-element-icon-size-lg);
      .size-(~"xl", @icon-element-box-size-xl, @icon-element-icon-size-xl);

// display styles
      &.vc_icon_element-style-boxed {
      }

&.vc_icon_element-style-boxed-outline {
      }

&.vc_icon_element-style-rounded {
        border-radius: 50%;
        .vc_icon_element-link, .vc_gitem-link {
          border-radius: 50%;
        }
      }
      &.vc_icon_element-style-rounded-outline {
        border-radius: 50%;
        .vc_icon_element-link, .vc_gitem-link {
          border-radius: 50%;
        }
      }
      &.vc_icon_element-style-rounded-less {
        border-radius: @icon-element-rounded-radius;
        .vc_icon_element-link, .vc_gitem-link {
          border-radius: @icon-element-rounded-radius;
        }
      }
      &.vc_icon_element-style-rounded-less-outline {
        border-radius: @icon-element-rounded-radius;
        .vc_icon_element-link, .vc_gitem-link {
          border-radius: @icon-element-rounded-radius;
        }
      }

.vc_icon_element_colors_variants(@selector, @text_color) {
        &.vc_icon_element-color-@{selector} {
          .vc_icon_element-icon {
            color: @text_color;
          }
        }
      }
      .vc_icon_element_colors_variants(~'blue', @blue);
      .vc_icon_element_colors_variants(~'turquoise', @turquoise);
      .vc_icon_element_colors_variants(~'pink', @pink);
      .vc_icon_element_colors_variants(~'violet', @violet);
      .vc_icon_element_colors_variants(~'peacoc', @peacoc);
      .vc_icon_element_colors_variants(~'chino', @chino);
      .vc_icon_element_colors_variants(~'mulled_wine', @mulled_wine);
      .vc_icon_element_colors_variants(~'vista_blue', @vista_blue);
      .vc_icon_element_colors_variants(~'black', @black);
      .vc_icon_element_colors_variants(~'grey', @grey);
      .vc_icon_element_colors_variants(~'orange', @orange);
      .vc_icon_element_colors_variants(~'sky', @sky);
      .vc_icon_element_colors_variants(~'green', @green);
      .vc_icon_element_colors_variants(~'juicy_pink', @juicy_pink);
      .vc_icon_element_colors_variants(~'sandy_brown', @sandy_brown);
      .vc_icon_element_colors_variants(~'purple', @purple);
      .vc_icon_element_colors_variants(~'white', @white);

// colors for styles
      // Background Shape Colors
      .vc_icon_element_shape_color_variants(@selector, @color) {
        &.vc_icon_element-background-color-@{selector} {
          &.vc_icon_element-outline {
            border-color: @color;
          }
          &.vc_icon_element-background {
            background-color: @color;
          }
        }
      }
      .vc_icon_element_shape_color_variants(~'blue', @blue);
      .vc_icon_element_shape_color_variants(~'turquoise', @turquoise);
      .vc_icon_element_shape_color_variants(~'pink', @pink);
      .vc_icon_element_shape_color_variants(~'violet', @violet);
      .vc_icon_element_shape_color_variants(~'peacoc', @peacoc);
      .vc_icon_element_shape_color_variants(~'chino', @chino);
      .vc_icon_element_shape_color_variants(~'mulled_wine', @mulled_wine);
      .vc_icon_element_shape_color_variants(~'vista_blue', @vista_blue);
      .vc_icon_element_shape_color_variants(~'black', @black);
      .vc_icon_element_shape_color_variants(~'grey', @grey);
      .vc_icon_element_shape_color_variants(~'orange', @orange);
      .vc_icon_element_shape_color_variants(~'sky', @sky);
      .vc_icon_element_shape_color_variants(~'green', @green);
      .vc_icon_element_shape_color_variants(~'juicy_pink', @juicy_pink);
      .vc_icon_element_shape_color_variants(~'sandy_brown', @sandy_brown);
      .vc_icon_element_shape_color_variants(~'purple', @purple);
      .vc_icon_element_shape_color_variants(~'white', @white);
    }
  }
}

MR SKB