wux-weapp/src/styles/mixins/setArrow.less

一套组件化、可复用、易扩展的微信小程序 UI 组件库

// Encoded SVG Background
.encoded-svg-background-i(@svg) {
    @url: `encodeURIComponent(@{svg}) `;

    background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}

// Arrow Icon
.encoded-svg-background(@svg, @color: #c7c7cc) when (@svg = right) {
    @svg-bg-img: '<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M2 0L0 2l11.5 11L0 24l2 2 14-13z" fill="@{color}" fill-rule="evenodd"/></svg>';

    .encoded-svg-background-i(@svg-bg-img);
}

// Loading Icon
.encoded-svg-background(@svg) when (@svg = loading) {
    @svg-bg-img: '<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 100 100"><path fill="none" d="M0 0h100v100H0z"/><rect width="7" height="20" x="46.5" y="40" fill="#E9E9E9" rx="5" ry="5" transform="translate(0 -30)"/><rect width="7" height="20" x="46.5" y="40" fill="#989697" rx="5" ry="5" transform="rotate(30 105.98 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#9B999A" rx="5" ry="5" transform="rotate(60 75.98 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#A3A1A2" rx="5" ry="5" transform="rotate(90 65 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#ABA9AA" rx="5" ry="5" transform="rotate(120 58.66 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#B2B2B2" rx="5" ry="5" transform="rotate(150 54.02 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#BAB8B9" rx="5" ry="5" transform="rotate(180 50 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#C2C0C1" rx="5" ry="5" transform="rotate(-150 45.98 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#CBCBCB" rx="5" ry="5" transform="rotate(-120 41.34 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#D2D2D2" rx="5" ry="5" transform="rotate(-90 35 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#DADADA" rx="5" ry="5" transform="rotate(-60 24.02 65)"/><rect width="7" height="20" x="46.5" y="40" fill="#E2E2E2" rx="5" ry="5" transform="rotate(-30 -5.98 65)"/></svg>';

    .encoded-svg-background-i(@svg-bg-img);
}

// Delete Icon
.encoded-svg-background(@svg, @color: #888) when (@svg = delete) {
    @svg-bg-img: '<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><g fill="@{color}" fill-rule="evenodd"><path d="M1.414 0l28.284 28.284-1.414 1.414L0 1.414z"/><path d="M28.284 0L0 28.284l1.414 1.414L29.698 1.414z"/></g></svg>';

    .encoded-svg-background-i(@svg-bg-img);
}

// Upload Delete Icon
.encoded-svg-background(@svg) when (@svg = upload_delete) {
    @svg-bg-img: '<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill-opacity=".4" fill="#404040" cx="8" cy="8" r="8"/><path d="M11.898 4.101a.345.345 0 0 0-.488 0L8 7.511l-3.411-3.41a.345.345 0 0 0-.488.488l3.411 3.41-3.41 3.412a.345.345 0 0 0 .488.488L8 8.487l3.411 3.411a.345.345 0 0 0 .488-.488L8.488 8l3.41-3.412a.344.344 0 0 0 0-.487z" fill="#FFF"/></g></svg>';

    .encoded-svg-background-i(@svg-bg-img);
}

// Spin Icon
.encoded-svg-background(@svg, @color: #387ef5) when (@svg = spin) {
    @svg-bg-img: '<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-137.000000, -840.000000)" fill="@{color}"><g transform="translate(80.000000, 823.000000)"><g transform="translate(53.000000, 13.000000)"><path d="M17.9996753,31.5 C10.5556724,31.5 4.5,25.4443275 4.5,18.0003247 C4.5,10.5563219 10.5556724,4.5 17.9996753,4.5 C18.5355492,4.5 18.9702974,4.93474816 18.9702974,5.47062208 C18.9702974,6.006496 18.5355492,6.44124416 17.9996753,6.44124416 C11.6261524,6.44124416 6.44124416,11.6267709 6.44124416,18.0002938 C6.44124416,24.3738167 11.6261524,29.5587249 17.9996753,29.5587249 C24.3731982,29.5587249 29.5587249,24.3738167 29.5587249,18.0002938 C29.5587249,14.7964616 28.2778291,11.8169616 25.9523687,9.61220279 C25.5637302,9.24317094 25.5473089,8.62893223 25.9157222,8.23967523 C26.2841356,7.84976878 26.8989928,7.83461537 27.2882498,8.20302872 C30.0042351,10.7787368 31.5,14.2580826 31.5,18.0002938 C31.5,25.4443275 25.4436781,31.5 17.9996753,31.5 Z"></path></g></g></g></g></svg>';

    .encoded-svg-background-i(@svg-bg-img);
}

// eye
.encoded-svg-background(@svg, @color: #c7c7cc) when (@svg = eye) {
    @svg-bg-img: '<svg viewBox="64 64 896 896" xmlns="http://www.w3.org/2000/svg" focusable="false" class="" data-icon="eye" width="1em" height="1em" fill="@{color}" aria-hidden="true"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg>';

    .encoded-svg-background-i(@svg-bg-img);
}

// eye-invisible
.encoded-svg-background(@svg, @color: #c7c7cc) when (@svg = eye_invisible) {
    @svg-bg-img: '<svg viewBox="64 64 896 896" xmlns="http://www.w3.org/2000/svg" focusable="false" class="" data-icon="eye-invisible" width="1em" height="1em" fill="@{color}" aria-hidden="true"><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z"></path></svg>';

    .encoded-svg-background-i(@svg-bg-img);
}

// Set Arrow Icon
// Direction - top|right|down|left
._setArrow(@size: 15px, @color: #c7c7cc) {
    display: inline-block;
    width: @size;
    height: @size;

    .encoded-svg-background(right, @color);

    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.setArrow(@direction, @size: 15px, @color: #c7c7cc) when (@direction = top) {
    ._setArrow(@size, @color);

    transform: rotate(270deg);
}

.setArrow(@direction, @size: 15px, @color: #c7c7cc) when (@direction = right) {
    ._setArrow(@size, @color);

    transform: rotate(0);
}

.setArrow(@direction, @size: 15px, @color: #c7c7cc) when (@direction = down) {
    ._setArrow(@size, @color);

    transform: rotate(90deg);
}

.setArrow(@direction, @size: 15px, @color: #c7c7cc) when (@direction = left) {
    ._setArrow(@size, @color);

    transform: rotate(180deg);
}