yyzone/src/assets/styles/components/icons/icon-object.less

yyzone vue components and utils

// Icon time
.@{icon-prefix}-time {
  border: @icon-border-width solid currentColor;
  border-radius: 50%;
  &::before {
    background: currentColor;
    content: "";
    height: .4em;
    transform: translate(-50%, -75%);
    width: @icon-border-width;
  }
  &::after {
    background: currentColor;
    content: "";
    height: .3em;
    transform: translate(-50%, -75%) rotate(90deg);
    transform-origin: 50% 90%;
    width: @icon-border-width;
  }
}

// Icon mail
.@{icon-prefix}-mail {
  &::before {
    border: @icon-border-width solid currentColor;
    border-radius: @icon-border-radius;
    content: "";
    height: .8em;
    width: 1em;
  }
  &::after {
    border: @icon-border-width solid currentColor;
    border-right: 0;
    border-top: 0;
    content: "";
    height: .5em;
    transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
    width: .5em;
  }
}

// Icon people
.@{icon-prefix}-people {
  &::before {
    border: @icon-border-width solid currentColor;
    border-radius: 50%;
    content: "";
    height: .45em;
    top: 25%;
    width: .45em;
  }
  &::after {
    border: @icon-border-width solid currentColor;
    border-radius: 50% 50% 0 0;
    content: "";
    height: .4em;
    top: 75%;
    width: .9em;
  }
}

// Icon message
.@{icon-prefix}-message {
  border: @icon-border-width solid currentColor;
  border-bottom: 0;
  border-radius: @icon-border-radius;
  border-right: 0;
  &::before {
    border: @icon-border-width solid currentColor;
    border-bottom-right-radius: @icon-border-radius;
    border-left: 0;
    border-top: 0;
    content: "";
    height: .8em;
    left: 65%;
    top: 40%;
    width: .7em;
  }
  &::after {
    background: currentColor;
    border-radius: @icon-border-radius;
    content: "";
    height: .3em;
    left: 10%;
    top: 100%;
    transform: translate(0, -90%) rotate(45deg);
    width: @icon-border-width;
  }
}

// Icon photo
.@{icon-prefix}-photo {
  border: @icon-border-width solid currentColor;
  border-radius: @icon-border-radius;
  &::before {
    border: @icon-border-width solid currentColor;
    border-radius: 50%;
    content: "";
    height: .25em;
    left: 35%;
    top: 35%;
    width: .25em;
  }
  &::after {
    border: @icon-border-width solid currentColor;
    border-bottom: 0;
    border-left: 0;
    content: "";
    height: .5em;
    left: 60%;
    transform: translate(-50%, 25%) rotate(-45deg);
    width: .5em;
  }
}

// Icon link
.@{icon-prefix}-link {
  &::before,
  &::after {
    border: @icon-border-width solid currentColor;
    border-radius: 5em 0 0 5em;
    border-right: 0;
    content: "";
    height: .5em;
    width: .75em;
  }
  &::before {
    transform: translate(-70%, -45%) rotate(-45deg);
  }
  &::after {
    transform: translate(-30%, -55%) rotate(135deg);
  }
}

// Icon location
.@{icon-prefix}-location {
  &::before {
    border: @icon-border-width solid currentColor;
    border-radius: 50% 50% 50% 0;
    content: "";
    height: .8em;
    transform: translate(-50%, -60%) rotate(-45deg);
    width: .8em;
  }
  &::after {
    border: @icon-border-width solid currentColor;
    border-radius: 50%;
    content: "";
    height: .2em;
    transform: translate(-50%, -80%);
    width: .2em;
  }
}

// Icon emoji
.@{icon-prefix}-emoji {
  border: @icon-border-width solid currentColor;
  border-radius: 50%;
  &::before {
    border-radius: 50%;
    box-shadow: -.17em -.15em, .17em -.15em;
    content: "";
    height: .1em;
    width: .1em;
  }
  &::after {
    border: @icon-border-width solid currentColor;
    border-bottom-color: transparent;
    border-radius: 50%;
    border-right-color: transparent;
    content: "";
    height: .5em;
    transform: translate(-50%, -40%) rotate(-135deg);
    width: .5em;
  }
}