parent
919afcbcfc
commit
e754e40622
22 changed files with 1034 additions and 184 deletions
|
|
@ -1,33 +1,33 @@
|
|||
@use "./tokens" as *;
|
||||
@use "./mixins";
|
||||
|
||||
.position-fixed {
|
||||
.msp-position-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.position-sticky {
|
||||
.msp-position-sticky {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.d-none {
|
||||
.msp-d-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.d-block {
|
||||
.msp-d-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
.msp-d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
.msp-visually-hidden {
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
|
|
@ -35,46 +35,46 @@
|
|||
}
|
||||
|
||||
@include mixins.responsive using($breakpoint, $size) {
|
||||
.d-#{$breakpoint}-none {
|
||||
.msp-d-#{$breakpoint}-none {
|
||||
display: none;
|
||||
}
|
||||
.d-#{$breakpoint}-block {
|
||||
.msp-d-#{$breakpoint}-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.d-#{$breakpoint}-flex {
|
||||
.msp-d-#{$breakpoint}-flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-eq > * {
|
||||
.msp-flex-eq > * {
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
.msp-flex-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.flex-row {
|
||||
.msp-flex-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
@include mixins.responsive using($breakpoint, $size) {
|
||||
.flex-#{$breakpoint}-column {
|
||||
.msp-flex-#{$breakpoint}-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.flex-#{$breakpoint}-row {
|
||||
.msp-flex-#{$breakpoint}-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hstack {
|
||||
.msp-hstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
gap: var(--prj-gap);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hstack-reverse {
|
||||
.msp-hstack-reverse {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
gap: var(--prj-gap);
|
||||
|
|
@ -82,63 +82,63 @@
|
|||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.vstack {
|
||||
.msp-vstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
gap: var(--prj-gap);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vstack-reverse {
|
||||
.msp-vstack-reverse {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
.msp-flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
.msp-flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flex-nowrap {
|
||||
.msp-flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@include mixins.responsive using($breakpoint, $size) {
|
||||
.flex-#{$breakpoint}-wrap {
|
||||
.msp-flex-#{$breakpoint}-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-#{$breakpoint}-nowrap {
|
||||
.msp-flex-#{$breakpoint}-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
.msp-flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
.msp-justify-content-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.justify-content-between {
|
||||
.msp-justify-content-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.justify-content-around {
|
||||
.msp-justify-content-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
.msp-align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.grid {
|
||||
.msp-grid {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
--prj-columns: repeat(3, 1fr);
|
||||
--prj-min-col-width: 150px;
|
||||
|
|
@ -152,81 +152,81 @@
|
|||
}
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
.grid-cols-#{$i} {
|
||||
.msp-grid-cols-#{$i} {
|
||||
@include grid-cols($i);
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.responsive-steps(1, 12) using ($breakpoint, $index) {
|
||||
.grid-#{$breakpoint}-cols-#{$index} {
|
||||
.msp-grid-#{$breakpoint}-cols-#{$index} {
|
||||
@include grid-cols($index);
|
||||
}
|
||||
}
|
||||
|
||||
.list-unstyle {
|
||||
.msp-list-unstyle {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
.msp-text-justify {
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
}
|
||||
|
||||
.text-start {
|
||||
.msp-text-start {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
.msp-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-end {
|
||||
.msp-text-end {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
.msp-align-start {
|
||||
vertical-align: start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
.msp-align-center {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.align-end {
|
||||
.msp-align-end {
|
||||
vertical-align: end;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
.msp-overflow-scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
.overflow-x-scroll {
|
||||
.msp-overflow-x-scroll {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.overflow-y-scroll {
|
||||
.msp-overflow-y-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
.msp-w-auto {
|
||||
width: auto;
|
||||
}
|
||||
.h-auto {
|
||||
.msp-h-auto {
|
||||
height: auto;
|
||||
}
|
||||
@for $i from 0 through 100 {
|
||||
.w-#{$i} {
|
||||
.msp-w-#{$i} {
|
||||
width: percentage(calc($i / 100));
|
||||
}
|
||||
.h-#{$i} {
|
||||
.msp-h-#{$i} {
|
||||
height: percentage(calc($i / 100));
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.responsive-steps(0, 100) using ($breakpoint, $index) {
|
||||
.w-#{$breakpoint}-#{$index} {
|
||||
.msp-w-#{$breakpoint}-#{$index} {
|
||||
width: percentage(calc($index / 100));
|
||||
}
|
||||
|
||||
.h-#{$breakpoint}-#{$index} {
|
||||
.msp-h-#{$breakpoint}-#{$index} {
|
||||
height: percentage(calc($index / 100));
|
||||
}
|
||||
}
|
||||
|
|
@ -236,54 +236,54 @@
|
|||
$name: "#{$breakpoint}-#{$name}";
|
||||
}
|
||||
|
||||
.m-#{$name} {
|
||||
.msp-m-#{$name} {
|
||||
margin: $value !important;
|
||||
}
|
||||
.mx-#{$name} {
|
||||
.msp-mx-#{$name} {
|
||||
margin-left: $value !important;
|
||||
margin-right: $value !important;
|
||||
}
|
||||
.my-#{$name} {
|
||||
.msp-my-#{$name} {
|
||||
margin-top: $value !important;
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
.mt-#{$name} {
|
||||
.msp-mt-#{$name} {
|
||||
margin-top: $value !important;
|
||||
}
|
||||
.mb-#{$name} {
|
||||
.msp-mb-#{$name} {
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
.ml-#{$name} {
|
||||
.msp-ml-#{$name} {
|
||||
margin-left: $value !important;
|
||||
}
|
||||
.mr-#{$name} {
|
||||
.msp-mr-#{$name} {
|
||||
margin-right: $value !important;
|
||||
}
|
||||
.p-#{$name} {
|
||||
.msp-p-#{$name} {
|
||||
padding: $value !important;
|
||||
}
|
||||
.px-#{$name} {
|
||||
.msp-px-#{$name} {
|
||||
padding-left: $value !important;
|
||||
padding-right: $value !important;
|
||||
}
|
||||
.py-#{$name} {
|
||||
.msp-py-#{$name} {
|
||||
padding-top: $value !important;
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
.pt-#{$name} {
|
||||
.msp-pt-#{$name} {
|
||||
padding-top: $value !important;
|
||||
}
|
||||
.pb-#{$name} {
|
||||
.msp-pb-#{$name} {
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
.pl-#{$name} {
|
||||
.msp-pl-#{$name} {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
.pr-#{$name} {
|
||||
.msp-pr-#{$name} {
|
||||
padding-right: $value !important;
|
||||
}
|
||||
|
||||
.gap-#{$name} {
|
||||
.msp-gap-#{$name} {
|
||||
--prj-gap: #{$value};
|
||||
}
|
||||
}
|
||||
|
|
@ -300,30 +300,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
.shadow-0 {
|
||||
.msp-shadow-0 {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.shadow-1 {
|
||||
.msp-shadow-1 {
|
||||
box-shadow: 10px 10px 5px 0px var(--prj-shadow);
|
||||
}
|
||||
|
||||
.border-radius {
|
||||
.msp-border-radius {
|
||||
border-radius: var(--prj-border-radius);
|
||||
}
|
||||
|
||||
.text-none {
|
||||
.msp-text-none {
|
||||
text-transform: none;
|
||||
}
|
||||
.text-capitalize {
|
||||
.msp-text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.text-uppercase {
|
||||
.msp-text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-uppercase {
|
||||
.msp-text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-lowercase {
|
||||
.msp-text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue