shut/src/less/css.Icon.less

Shut UI Framework

/* icons*/
& when (@enable-icon-font =true) {
    @font-face {
        font-family: "@{icon-font}";
        font-display: block;
        src:  local(@icon-font),
            url("@{font-url}@{icon-font}.woff") format("woff"),
			  url("@{font-url}@{icon-font}.ttf") format("truetype"),
            url("@{font-url}@{icon-font}.svg#icons") format("svg");
        font-weight: normal;
        font-style: normal;
    }
    // @media screen and (-webkit-min-device-pixel-ratio: 0) {
    //     @font-face {
    //         font-family: "@{icon-font}";
    //         src: url("@{font-url}@{icon-font}.svg#icons") format("svg");
    //     }
    // }
    .liga,
    .symbol:before,
    .symbolAfter:after {
        .symbolDef();
    }
    .icon-inline {
        &:before {
            margin-inline-end: @icon-inline-margin;
        }
    }
}

.symbolDef() {

    font-family: @icon-font;
    text-transform: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    display: inline-block;

    -webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    speak: none;
    font-smooth: always;
    /* Enable Ligatures ================ */
    letter-spacing: 0;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-variant-ligatures: discretionary-ligatures;
    font-variant-ligatures: discretionary-ligatures;
    /* ligatures? */
    content: attr(data-icon);
}

// generating .icon-name classes from sh.icons.less
.icon(@name, @value) {
    .@{name} {
        &:before {
            content: @value;
        }
    }
}

// may be should remove from shut
.displayIcon(@value) {
    /*this is for plain icons content */
    content: @value;
    font-family: @icon-font;
}

.getIcon(@value) {
    &:before {
        &:extend(.symbol:before);
        content: @value;
    }
}

.getIcon(@value, @dir) when(@dir = "after") {
    // .symbolAfter();

    &:after {
        &:extend(.symbol:before);
        content: @value;
    }
}

.changeIcon(@value) {
    &:before {
        content: @value;
    }
}

.changeIcon(@value,@dir) when(@dir = "after") {
    &:after {
        content: @value;
    }
}