shut/src/less/css.Type.less

Shut UI Framework

@import (reference) "utilities/media";
@import (reference) "utilities/functions";

/* font setting */
/* CRITICAL BEGIN */

html {
    font-size: var(--sh-htmlFontBase);
}

body,
textarea,
select,
option,
input {
    font-family: var(--sh-fontface);
    #rem > .font-size(@font-size);
    color: var(--sh-text-color);
}
// fixed, added button
button {
	font-family: var(--sh-fontface);
}

/* CRITICAL END */

section {
    margin-block-end: @extraspace;
}

p {
    margin-block-end: @space;
}

/* font size */

// Note to self: this prevents reuse mixins in css, keep open

.larger {
    #rem > .font-size(@font-multiplier[larger] * @font-size);
}
.large {
    #rem > .font-size(@font-multiplier[large] * @font-size);
}

.f1 {
    #rem > .font-size(@font-multiplier[f1] * @font-size);
}

.f2 {
    #rem > .font-size(@font-multiplier[f2] * @font-size);
}

.f3 {
    #rem > .font-size(@font-multiplier[f3] * @font-size);
}

.f4 {
    #rem > .font-size(@font-multiplier[f4] * @font-size);
}

.f5 {
    #rem > .font-size(@font-multiplier[f5] * @font-size);
}

.f6 {
    #rem > .font-size(@font-multiplier[f6] * @font-size);
}

.small {
    #rem > .font-size(@font-multiplier[small] * @font-size);
}

.smaller {
    #rem > .font-size(@font-multiplier[smaller] * @font-size);
}

each(@custom-font-multiplier, {
    .@{key} {
        #rem>.font-size(@value * @font-size);
    }
});


each(@font-weight-set, {
	.weight-@{key} {
		font-weight: floor((@value / 100)) * 100;
		@supports (font-variation-settings: "wght" @value) {
			font-weight: @value;
		}
	}
});

.face-italic {
    font-style: italic;
}

/* mixed content*/
/* CRITICAL BEGIN */

.ltr {
    font-family: var(--sh-fontface);
    direction: ltr;
}
.rtl {
    font-family: var(--sh-fontface-ar);
    direction: rtl;
}
/* CRITICAL END */

/* HTML tags redefined */

a,
.a {
    /* mimic a href */
    color: var(--sh-linkcolor);
    text-decoration: none;
    cursor: pointer;
}

/*camoflage a*/

a.cam,
.a.cam,
.cam {
    color: var(--sh-text-color);
    cursor: pointer;
    &:hover {
        color: var(--sh-linkcolor);
    }
}

// TODO: double check
a[rel="track"]:visited {
    color: var(--sh-visitedcolor);
}

a:hover,
.a:hover,
a[rel="track"]:hover {
    color: var(--sh-altcolor);
}

.normalsize {
    #rem > .font-size(@font-size) !important;
    font-family: var(--sh-fontface);
}

.sup {
    font-size: 70%;
    vertical-align: 4px;
}

.del {
    color: var(--sh-text-light);
    text-decoration: line-through;
}

.ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* CRITICAL BEGIN */
.media(md, {
    // increase size if enabled
    html {
		#rem > .res-font-size(@htmlFontBase);
    }
    
});
/* CRITICAL END */