shut/src/less/utilities/functions.less

Shut UI Framework

/* coloring forground */
.fcolor (@c) {
    // how about color-mix in hsl longer hue,
    color: contrast(@c, @text-color, @white, @front-color-contrast);

}

.colorbox (@c) {
    background-color: @c;
    .fcolor(@c);
}


/* rem */
#rem() {

    .font-size(@value) when not(@rem-enabled) {
        font-size: @value * 10px;
    }

    .font-size(@value) when (@rem-enabled) {
        font-size: @value * 1rem;
    }

    .padding(@value) {
        // don't use rem for padding unless rem is enabled, else leave
        padding: @value * 1rem;
    }

    .res-font-size(@value) when not(@rem-enabled) {
        font-size: @value * 10px * if((@enable-res-fonts), @resFontFactor, 1);
    }

    .res-font-size(@value) when(@rem-enabled) {
        font-size: @value * 1rem * if((@enable-res-fonts), @resFontFactor, 1);
    }

}

// obsolete
.resfont(@fontsize) when (@enable-res-fonts) {
    font-size: @fontsize * @resFontFactor;
}
// exact width should not be used!
.columns(@column: 1, @shift: 0) when (@shift <=0) {
    width: percentage((@column / @wrapper));
}

.columns(@column: 1, @shift: 0) when (@shift > 0) {
    width: calc(percentage((@column / @wrapper)) - @shift);
}

.offset(@offset: 1) {
    margin-inline-start: percentage((@offset / @wrapper));
}

.generate-column(@column, @key: c) when (@column > 0) {
    .generate-column((@column - 1), @key);

    .@{key}-@{column},
    &.u@{key}-@{column}>li {
        width: percentage((@column / @wrapper));
    }
}


.generate-offset(@column, @key: c) when (@column > 0) {
    .generate-offset((@column - 1), @key);

    .offset-@{key}-@{column} {
        margin-inline-start: percentage((@column / @wrapper));
    }
}

// spaced out begins at md only
.generate-spaced-column(@column, @key: c) when (@column > 0) {
    .generate-spaced-column((@column - 1), @key);

    >.@{key}-@{column},
    &.u@{key}-@{column}>li {
        width: calc(percentage((@column / @wrapper)) - @gutterspace/2);
    }
}

.generate-min-heights(@from, @to) {

    each(range(@from, @to), {

        .h-@{value},
        .uh-@{value} > li {
            min-height: (@grid-column-height) * @value;
        }
    });
}

.generate-max-heights(@from, @to) {

    each(range(@from, @to), {

        .hm-@{value},
        .uhm-@{value} > li {
            max-height: (@grid-column-height) * @value;
        }
    });
}