feat(Components): Add Button and BackgroudnImage
This commit is contained in:
parent
a1528a2ad8
commit
b74fcb19cc
5 changed files with 399 additions and 10 deletions
|
|
@ -6,6 +6,14 @@
|
|||
--prj-spacing-5: 3rem;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-eq > * {
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
.hstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
|
|
@ -13,16 +21,41 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.hstack-reverse {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
gap: var(--prj-gap);
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.vstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.grid {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
--prj-columns: repeat(3, 1fr);
|
||||
|
|
@ -79,6 +112,10 @@
|
|||
--prj-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
.gap-0 {
|
||||
--prj-gap: 0;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
--prj-gap: var(--prj-spacing-1);
|
||||
}
|
||||
|
|
@ -112,14 +149,26 @@
|
|||
text-align: start;
|
||||
}
|
||||
|
||||
.text-middle {
|
||||
text-align: middle;
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-end {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
vertical-align: start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.align-end {
|
||||
vertical-align: end;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
|
@ -130,7 +179,82 @@
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* Start Width */
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
.w-10 {
|
||||
width: 10%;
|
||||
}
|
||||
.w-20 {
|
||||
width: 20%;
|
||||
}
|
||||
.w-30 {
|
||||
width: 30%;
|
||||
}
|
||||
.w-40 {
|
||||
width: 40%;
|
||||
}
|
||||
.w-50 {
|
||||
width: 50%;
|
||||
}
|
||||
.w-60 {
|
||||
width: 60%;
|
||||
}
|
||||
.w-70 {
|
||||
width: 70%;
|
||||
}
|
||||
.w-80 {
|
||||
width: 80%;
|
||||
}
|
||||
.w-90 {
|
||||
width: 90%;
|
||||
}
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
/* End Width */
|
||||
|
||||
/* Start Height */
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
.h-10 {
|
||||
height: 10%;
|
||||
}
|
||||
.h-20 {
|
||||
height: 20%;
|
||||
}
|
||||
.h-30 {
|
||||
height: 30%;
|
||||
}
|
||||
.h-40 {
|
||||
height: 40%;
|
||||
}
|
||||
.h-50 {
|
||||
height: 50%;
|
||||
}
|
||||
.h-60 {
|
||||
height: 60%;
|
||||
}
|
||||
.h-70 {
|
||||
height: 70%;
|
||||
}
|
||||
.h-80 {
|
||||
height: 80%;
|
||||
}
|
||||
.h-90 {
|
||||
height: 90%;
|
||||
}
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
/* End Width */
|
||||
|
||||
/* Start Margins */
|
||||
.m-0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.m-1 {
|
||||
margin: var(--prj-spacing-1) !important;
|
||||
}
|
||||
|
|
@ -165,25 +289,39 @@
|
|||
margin-right: var(--prj-spacing-5) 0 !important;
|
||||
}
|
||||
.mx-auto {
|
||||
margin-right: auto 0 !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.my-0 {
|
||||
margin-top: var(--prj-spacing-1) !important;
|
||||
margin-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.my-1 {
|
||||
margin-right: 0 var(--prj-spacing-1) !important;
|
||||
margin-top: var(--prj-spacing-1) !important;
|
||||
margin-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.my-2 {
|
||||
margin-right: 0 var(--prj-spacing-2) !important;
|
||||
margin-top: var(--prj-spacing-2) !important;
|
||||
margin-bottom: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.my-3 {
|
||||
margin-right: 0 var(--prj-spacing-3) !important;
|
||||
margin-top: var(--prj-spacing-3) !important;
|
||||
margin-bottom: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.my-4 {
|
||||
margin-right: 0 var(--prj-spacing-4) !important;
|
||||
margin-top: var(--prj-spacing-4) !important;
|
||||
margin-bottom: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.my-5 {
|
||||
margin-right: 0 var(--prj-spacing-5) !important;
|
||||
margin-top: var(--prj-spacing-5) !important;
|
||||
margin-bottom: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.my-auto {
|
||||
margin-right: 0 auto !important;
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
.mt-0 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
.mt-1 {
|
||||
margin-top: var(--prj-spacing-1) !important;
|
||||
|
|
@ -203,6 +341,9 @@
|
|||
.mt-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
.mb-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.mb-1 {
|
||||
margin-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
|
|
@ -258,3 +399,154 @@
|
|||
margin-right: var(--prj-spacing-5) !important;
|
||||
}
|
||||
/* End Margins */
|
||||
|
||||
/* Start paddings */
|
||||
.p-0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.p-1 {
|
||||
padding: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.p-2 {
|
||||
padding: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.p-3 {
|
||||
padding: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.p-4 {
|
||||
padding: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.p-5 {
|
||||
padding: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.p-auto {
|
||||
padding: auto !important;
|
||||
}
|
||||
.px-1 {
|
||||
padding-left: var(--prj-spacing-1) !important;
|
||||
padding-right: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.px-2 {
|
||||
padding-left: var(--prj-spacing-2) !important;
|
||||
padding-right: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.px-3 {
|
||||
padding-left: var(--prj-spacing-3) !important;
|
||||
padding-right: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.px-4 {
|
||||
padding-left: var(--prj-spacing-4) !important;
|
||||
padding-right: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.px-5 {
|
||||
padding-left: var(--prj-spacing-5) !important;
|
||||
padding-right: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.px-auto {
|
||||
padding-left: auto !important;
|
||||
padding-right: auto !important;
|
||||
}
|
||||
.py-0 {
|
||||
padding-top: var(--prj-spacing-1) !important;
|
||||
padding-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.py-1 {
|
||||
padding-top: var(--prj-spacing-1) !important;
|
||||
padding-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.py-2 {
|
||||
padding-top: var(--prj-spacing-2) !important;
|
||||
padding-bottom: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.py-3 {
|
||||
padding-top: var(--prj-spacing-3) !important;
|
||||
padding-bottom: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.py-4 {
|
||||
padding-top: var(--prj-spacing-4) !important;
|
||||
padding-bottom: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.py-5 {
|
||||
padding-top: var(--prj-spacing-5) !important;
|
||||
padding-bottom: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.py-auto {
|
||||
padding-top: auto !important;
|
||||
padding-bottom: auto !important;
|
||||
}
|
||||
.pt-1 {
|
||||
padding-top: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.pt-2 {
|
||||
padding-top: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.pt-3 {
|
||||
padding-top: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.pt-4 {
|
||||
padding-top: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.pt-5 {
|
||||
padding-top: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.pt-auto {
|
||||
padding-top: auto !important;
|
||||
}
|
||||
.pb-0 {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.pb-1 {
|
||||
padding-bottom: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.pb-2 {
|
||||
padding-bottom: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.pb-3 {
|
||||
padding-bottom: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.pb-4 {
|
||||
padding-bottom: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.pb-5 {
|
||||
padding-bottom: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.pb-auto {
|
||||
padding-bottom: auto !important;
|
||||
}
|
||||
.pl-1 {
|
||||
padding-left: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.pl-2 {
|
||||
padding-left: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.pl-3 {
|
||||
padding-left: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.pl-4 {
|
||||
padding-left: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.pl-5 {
|
||||
padding-left: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.pl-auto {
|
||||
padding-left: auto !important;
|
||||
}
|
||||
.pr-1 {
|
||||
padding-right: var(--prj-spacing-1) !important;
|
||||
}
|
||||
.pr-2 {
|
||||
padding-right: var(--prj-spacing-2) !important;
|
||||
}
|
||||
.pr-3 {
|
||||
padding-right: var(--prj-spacing-3) !important;
|
||||
}
|
||||
.pr-4 {
|
||||
padding-right: var(--prj-spacing-4) !important;
|
||||
}
|
||||
.pr-5 {
|
||||
padding-right: var(--prj-spacing-5) !important;
|
||||
}
|
||||
.pr-auto {
|
||||
padding-right: var(--prj-spacing-5) !important;
|
||||
}
|
||||
/* End paddings */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue