123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- // Icon arrows
- .icon-arrow-down,
- .icon-arrow-left,
- .icon-arrow-right,
- .icon-arrow-up,
- .icon-downward,
- .icon-back,
- .icon-forward,
- .icon-upward {
- &::before {
- border: $icon-border-width solid currentColor;
- border-bottom: 0;
- border-right: 0;
- content: "";
- height: .65em;
- width: .65em;
- }
- }
- .icon-arrow-down {
- &::before {
- transform: translate(-50%, -75%) rotate(225deg);
- }
- }
- .icon-arrow-left {
- &::before {
- transform: translate(-25%, -50%) rotate(-45deg);
- }
- }
- .icon-arrow-right {
- &::before {
- transform: translate(-75%, -50%) rotate(135deg);
- }
- }
- .icon-arrow-up {
- &::before {
- transform: translate(-50%, -25%) rotate(45deg);
- }
- }
- .icon-back,
- .icon-forward {
- &::after {
- background: currentColor;
- content: "";
- height: $icon-border-width;
- width: .8em;
- }
- }
- .icon-downward,
- .icon-upward {
- &::after {
- background: currentColor;
- content: "";
- height: .8em;
- width: $icon-border-width;
- }
- }
- .icon-back {
- &::after {
- left: 55%;
- }
- &::before {
- transform: translate(-50%, -50%) rotate(-45deg);
- }
- }
- .icon-downward {
- &::after {
- top: 45%;
- }
- &::before {
- transform: translate(-50%, -50%) rotate(-135deg);
- }
- }
- .icon-forward {
- &::after {
- left: 45%;
- }
- &::before {
- transform: translate(-50%, -50%) rotate(135deg);
- }
- }
- .icon-upward {
- &::after {
- top: 55%;
- }
- &::before {
- transform: translate(-50%, -50%) rotate(45deg);
- }
- }
- // Icon caret
- .icon-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-menu {
- &::before {
- background: currentColor;
- box-shadow: 0 -.35em, 0 .35em;
- content: "";
- height: $icon-border-width;
- width: 100%;
- }
- }
- // Icon apps
- .icon-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;
- }
- }
|