generated from Leo_Ding/web-template
136 lines
2.6 KiB
Plaintext
136 lines
2.6 KiB
Plaintext
// Align
|
|
each(left center right, {
|
|
.align-@{value} {
|
|
text-align: @value !important;
|
|
}
|
|
})
|
|
|
|
// Color
|
|
each({
|
|
primary: @color-primary;
|
|
error: @color-error;
|
|
success: @color-success;
|
|
warning: @color-warning;
|
|
heading: @color-text-heading;
|
|
secondary: @color-text-secondary;
|
|
caption: @color-text-label;
|
|
disabled: @color-text-disabled;
|
|
placeholder: @color-text-placeholder;
|
|
}, {
|
|
.color-@{key} {
|
|
color: @value !important;
|
|
}
|
|
})
|
|
|
|
// FontSize
|
|
each(12 14 16 18 24, {
|
|
.fs-@{value} {
|
|
font-size: @value * 1px !important;
|
|
}
|
|
})
|
|
|
|
// FontWeight
|
|
each(400 500 600, {
|
|
.fw-@{value} {
|
|
font-weight: @value !important;
|
|
}
|
|
})
|
|
|
|
// Spacing
|
|
each({
|
|
mt: margin-top;
|
|
mb: margin-bottom;
|
|
ml: margin-left;
|
|
mr: margin-right;
|
|
mx: margin-left, margin-right;
|
|
my: margin-top, margin-bottom;
|
|
ma: margin;
|
|
pt: padding-top;
|
|
pb: padding-bottom;
|
|
pl: padding-left;
|
|
pr: padding-right;
|
|
px: padding-left, padding-right;
|
|
py: padding-top, padding-bottom;
|
|
pa: padding;
|
|
}, .(@property, @class) {
|
|
|
|
each(0 auto, .(@value){
|
|
.@{class}-@{value} {
|
|
each(@property, .(@prop) {
|
|
@{prop}: @value !important;
|
|
})
|
|
}
|
|
})
|
|
|
|
each(4 5 8, .(@value) {
|
|
each(1 2 3 4 5, .(@multi) {
|
|
.@{class}-@{value}-@{multi} {
|
|
each(@property, .(@prop) {
|
|
@{prop}: @value * @multi * 1px !important;
|
|
})
|
|
}
|
|
})
|
|
})
|
|
})
|
|
|
|
// Display
|
|
each({
|
|
display: block;
|
|
display: flex;
|
|
display: inline-block;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
align-items: flex-end;
|
|
align-items: flex-start;
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
justify-content: start;
|
|
justify-content: end;
|
|
justify-content: flex-start;
|
|
justify-content: flex-end;
|
|
justify-content: left;
|
|
justify-content: right;
|
|
}, {
|
|
.@{key}-@{value} {
|
|
@{key}: @value
|
|
}
|
|
});
|
|
|
|
// Percentage
|
|
each(1 2 3 4 5 6 7 8 9 10, {
|
|
@prop: @value * 10;
|
|
@v: @prop * 1%;
|
|
.wp-@{prop} {
|
|
width: @v;
|
|
}
|
|
.hp-@{prop} {
|
|
height: @v;
|
|
}
|
|
});
|
|
|
|
// Overflow
|
|
each({
|
|
overflow: hidden;
|
|
overflow: auto;
|
|
overflow: scroll;
|
|
overflow-x: hidden;
|
|
overflow-x: auto;
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
overflow-y: auto;
|
|
overflow-y: scroll;
|
|
}, .(@value, @prop) {
|
|
.@{prop}-@{value} {
|
|
@{prop}: @value;
|
|
}
|
|
});
|
|
|
|
// Cursor
|
|
each(pointer not-allowed, {
|
|
.cursor-@{value}{
|
|
cursor: @value;
|
|
}
|
|
}) |