w*
|
Width Width
|
w-1-hc
|
.w-1-hc {
width: calc(2 * var(--mg-sp-1));
}
|
.w-1-hc
|
w-2-hc
|
.w-2-hc {
width: calc(2 * var(--mg-sp-2));
}
|
.w-2-hc
|
w-3-hc
|
.w-3-hc {
width: calc(2 * var(--mg-sp-3));
}
|
.w-3-hc
|
w-4-hc
|
.w-4-hc {
width: calc(2 * var(--mg-sp-4));
}
|
.w-4-hc
|
w-5-hc
|
.w-5-hc {
width: calc(2 * var(--mg-sp-5));
}
|
.w-5-hc
|
w-6-hc
|
.w-6-hc {
width: calc(2 * var(--mg-sp-6));
}
|
.w-6-hc
|
w-7-hc
|
.w-7-hc {
width: calc(2 * var(--mg-sp-7));
}
|
.w-7-hc
|
w-8-hc
|
.w-8-hc {
width: calc(2 * var(--mg-sp-8));
}
|
.w-8-hc
|
Percentages |
w-10-hc
|
.w-10-hc {
width: 10%;
}
|
.w-10-hc
|
w-20-hc
|
.w-20-hc {
width: 20%;
}
|
.w-20-hc
|
w-25-hc
|
.w-25-hc {
width: 25%;
}
|
.w-25-hc
|
w-30-hc
|
.w-30-hc {
width: 30%;
}
|
.w-30-hc
|
w-40-hc
|
.w-40-hc {
width: 40%;
}
|
.w-40-hc
|
w-50-hc
|
.w-50-hc {
width: 50%;
}
|
.w-50-hc
|
w-60-hc
|
.w-60-hc {
width: 60%;
}
|
.w-60-hc
|
w-70-hc
|
.w-70-hc {
width: 70%;
}
|
.w-70-hc
|
w-75-hc
|
.w-75-hc {
width: 75%;
}
|
.w-75-hc
|
w-80-hc
|
.w-80-hc {
width: 80%;
}
|
.w-80-hc
|
w-90-hc
|
.w-90-hc {
width: 90%;
}
|
.w-90-hc
|
w-100-hc
|
.w-100-hc {
width: 100%;
}
|
.w-100-hc
|
w-third-hc
|
.w-third-hc {
width: calc(100% / 3);
}
|
.w-third-hc
|
w-two-thirds-hc
|
.w-two-thirds-hc {
width: calc(100% / 1.5);
}
|
.w-two-thirds-hc
|
Percentages of View Width |
w-10vw-hc
|
.w-10vw-hc {
width: 10vw;
}
|
.w-10vw-hc
|
w-20vw-hc
|
.w-20vw-hc {
width: 20vw;
}
|
.w-20vw-hc
|
w-30vw-hc
|
.w-30vw-hc {
width: 30vw;
}
|
.w-30vw-hc
|
w-40vw-hc
|
.w-40vw-hc {
width: 40vw;
}
|
.w-40vw-hc
|
w-50vw-hc
|
.w-50vw-hc {
width: 50vw;
}
|
.w-50vw-hc
|
w-60vw-hc
|
.w-60vw-hc {
width: 60vw;
}
|
.w-60vw-hc
|
w-70vw-hc
|
.w-70vw-hc {
width: 70vw;
}
|
.w-70vw-hc
|
w-80vw-hc
|
.w-80vw-hc {
width: 80vw;
}
|
.w-80vw-hc
|
w-90vw-hc
|
.w-90vw-hc {
width: 90vw;
}
|
.w-90vw-hc
|
w-100vw-hc
|
.w-100vw-hc {
width: 100vw;
}
|
.w-100vw-hc
|
w-auto-hc
|
.w-auto-hc {
width: auto;
}
|
.w-auto-hc
|
mw*
|
Width Max Width
|
mw-1-hc
|
.mw-1-hc {
max-width: calc(2 * var(--mg-sp-1));
}
|
|
mw-2-hc
|
.mw-2-hc {
max-width: calc(2 * var(--mg-sp-2));
}
|
|
mw-3-hc
|
.mw-3-hc {
max-width: calc(2 * var(--mg-sp-3));
}
|
|
mw-4-hc
|
.mw-4-hc {
max-width: calc(2 * var(--mg-sp-4));
}
|
|
mw-5-hc
|
.mw-5-hc {
max-width: calc(2 * var(--mg-sp-5));
}
|
|
mw-6-hc
|
.mw-6-hc {
max-width: calc(2 * var(--mg-sp-6));
}
|
|
mw-7-hc
|
.mw-7-hc {
max-width: calc(2 * var(--mg-sp-7));
}
|
|
mw-8-hc
|
.mw-8-hc {
max-width: calc(2 * var(--mg-sp-8));
}
|
|
Percentages |
mw-10-hc
|
.mw-10-hc {
max-width: 10%;
}
|
|
mw-20-hc
|
.mw-20-hc {
max-width: 20%;
}
|
|
mw-25-hc
|
.mw-25-hc {
max-width: 25%;
}
|
|
mw-30-hc
|
.mw-30-hc {
max-width: 30%;
}
|
|
mw-40-hc
|
.mw-40-hc {
max-width: 40%;
}
|
|
mw-50-hc
|
.mw-50-hc {
max-width: 50%;
}
|
|
mw-60-hc
|
.mw-60-hc {
max-width: 60%;
}
|
|
mw-70-hc
|
.mw-70-hc {
max-width: 70%;
}
|
|
mw-75-hc
|
.mw-75-hc {
max-width: 75%;
}
|
|
mw-80-hc
|
.mw-80-hc {
max-width: 80%;
}
|
|
mw-90-hc
|
.mw-90-hc {
max-width: 90%;
}
|
|
mw-100-hc
|
.mw-100-hc {
max-width: 100%;
}
|
|
mw-third-hc
|
.mw-third-hc {
max-width: calc(100% / 3);
}
|
|
mw-two-thirds-hc
|
.mw-two-thirds-hc {
max-width: calc(100% / 1.5);
}
|
|
Percentages of View Width |
mw-10vw-hc
|
.mw-10vw-hc {
max-width: 10vw;
}
|
|
mw-20vw-hc
|
.mw-20vw-hc {
max-width: 20vw;
}
|
|
mw-30vw-hc
|
.mw-30vw-hc {
max-width: 30vw;
}
|
|
mw-40vw-hc
|
.mw-40vw-hc {
max-width: 40vw;
}
|
|
mw-50vw-hc
|
.mw-50vw-hc {
max-width: 50vw;
}
|
|
mw-60vw-hc
|
.mw-60vw-hc {
max-width: 60vw;
}
|
|
mw-70vw-hc
|
.mw-70vw-hc {
max-width: 70vw;
}
|
|
mw-80vw-hc
|
.mw-80vw-hc {
max-width: 80vw;
}
|
|
mw-90vw-hc
|
.mw-90vw-hc {
max-width: 90vw;
}
|
|
mw-100vw-hc
|
.mw-100vw-hc {
max-width: 100vw;
}
|
|
mw-auto-hc
|
.mw-auto-hc {
max-width: auto;
}
|
|
minw*
|
Width Min Width
|
minw-1-hc
|
.minw-1-hc {
min-width: calc(2 * var(--mg-sp-1));
}
|
|
minw-2-hc
|
.minw-2-hc {
min-width: calc(2 * var(--mg-sp-2));
}
|
|
minw-3-hc
|
.minw-3-hc {
min-width: calc(2 * var(--mg-sp-3));
}
|
|
minw-4-hc
|
.minw-4-hc {
min-width: calc(2 * var(--mg-sp-4));
}
|
|
minw-5-hc
|
.minw-5-hc {
min-width: calc(2 * var(--mg-sp-5));
}
|
|
minw-6-hc
|
.minw-6-hc {
min-width: calc(2 * var(--mg-sp-6));
}
|
|
minw-7-hc
|
.minw-7-hc {
min-width: calc(2 * var(--mg-sp-7));
}
|
|
minw-8-hc
|
.minw-8-hc {
min-width: calc(2 * var(--mg-sp-8));
}
|
|
Percentages |
minw-10-hc
|
.minw-10-hc {
min-width: 10%;
}
|
|
minw-20-hc
|
.minw-20-hc {
min-width: 20%;
}
|
|
minw-25-hc
|
.minw-25-hc {
min-width: 25%;
}
|
|
minw-30-hc
|
.minw-30-hc {
min-width: 30%;
}
|
|
minw-40-hc
|
.minw-40-hc {
min-width: 40%;
}
|
|
minw-50-hc
|
.minw-50-hc {
min-width: 50%;
}
|
|
minw-60-hc
|
.minw-60-hc {
min-width: 60%;
}
|
|
minw-70-hc
|
.minw-70-hc {
min-width: 70%;
}
|
|
minw-75-hc
|
.minw-75-hc {
min-width: 75%;
}
|
|
minw-80-hc
|
.minw-80-hc {
min-width: 80%;
}
|
|
minw-90-hc
|
.minw-90-hc {
min-width: 90%;
}
|
|
minw-100-hc
|
.minw-100-hc {
min-width: 100%;
}
|
|
minw-third-hc
|
.minw-third-hc {
min-width: calc(100% / 3);
}
|
|
minw-two-thirds-hc
|
.minw-two-thirds-hc {
min-width: calc(100% / 1.5);
}
|
|
Percentages of View Width |
minw-10vw-hc
|
.minw-10vw-hc {
min-width: 10vw;
}
|
|
minw-20vw-hc
|
.minw-20vw-hc {
min-width: 20vw;
}
|
|
minw-30vw-hc
|
.minw-30vw-hc {
min-width: 30vw;
}
|
|
minw-40vw-hc
|
.minw-40vw-hc {
min-width: 40vw;
}
|
|
minw-50vw-hc
|
.minw-50vw-hc {
min-width: 50vw;
}
|
|
minw-60vw-hc
|
.minw-60vw-hc {
min-width: 60vw;
}
|
|
minw-70vw-hc
|
.minw-70vw-hc {
min-width: 70vw;
}
|
|
minw-80vw-hc
|
.minw-80vw-hc {
min-width: 80vw;
}
|
|
minw-90vw-hc
|
.minw-90vw-hc {
min-width: 90vw;
}
|
|
minw-100vw-hc
|
.minw-100vw-hc {
min-width: 100vw;
}
|
|
minw-auto-hc
|
.minw-auto-hc {
min-width: auto;
}
|
|