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

yyzone vue components and utils

// Icon arrows
@icon-nav-border-width: .06rem;
.@{icon-prefix}-arrow-down,
.@{icon-prefix}-arrow-left,
.@{icon-prefix}-arrow-right,
.@{icon-prefix}-arrow-up,
.@{icon-prefix}-downward,
.@{icon-prefix}-back,
.@{icon-prefix}-forward,
.@{icon-prefix}-upward {
  &::before {
    border: @icon-nav-border-width solid currentColor;
    border-bottom: 0;
    border-right: 0;
    content: "";
    height: .65em;
    width: .65em;
  }
}

.@{icon-prefix}-arrow-down {
  &::before {
    transform: translate(-50%, -75%) rotate(225deg);
  }
}

.@{icon-prefix}-arrow-left {
  &::before {
    transform: translate(-25%, -50%) rotate(-45deg);
  }
}

.@{icon-prefix}-arrow-right {
  &::before {
    transform: translate(-75%, -50%) rotate(135deg);
  }
}

.@{icon-prefix}-arrow-up {
  &::before {
    transform: translate(-50%, -25%) rotate(45deg);
  }
}

.@{icon-prefix}-back,
.@{icon-prefix}-forward {
  &::after {
    background: currentColor;
    content: "";
    height: @icon-nav-border-width;
    width: .8em;
  }
}

.@{icon-prefix}-downward,
.@{icon-prefix}-upward {
  &::after {
    background: currentColor;
    content: "";
    height: .8em;
    width: @icon-nav-border-width;
  }
}

.@{icon-prefix}-back {
  &::after {
    left: 55%;
  }
  &::before {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

.@{icon-prefix}-downward {
  &::after {
    top: 45%;
  }
  &::before {
    transform: translate(-50%, -50%) rotate(-135deg);
  }
}

.@{icon-prefix}-forward {
  &::after {
    left: 45%;
  }
  &::before {
    transform: translate(-50%, -50%) rotate(135deg);
  }
}

.@{icon-prefix}-upward {
  &::after {
    top: 55%;
  }
  &::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

// Icon caret
.@{icon-prefix}-caret {
  &::before {
    border-top: .3em solid currentColor;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
    content: "";
    height: 0;
    transform: translate(-50%, -25%);
    width: 0;
  }
}

// Icon menu
.@{icon-prefix}-menu {
  &::before {
    background: currentColor;
    box-shadow: 0 -.35em, 0 .35em;
    content: "";
    height: @icon-nav-border-width;
    width: 100%;
  }
}

// Icon apps
.@{icon-prefix}-apps {
  &::before {
    background: currentColor;
    box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
    content: "";
    height: 3px;
    width: 3px;
  }
}