552 lines
8.9 KiB
CSS
552 lines
8.9 KiB
CSS
:root {
|
|
--prj-spacing-1: 0.25rem;
|
|
--prj-spacing-2: 0.5rem;
|
|
--prj-spacing-3: 1rem;
|
|
--prj-spacing-4: 2rem;
|
|
--prj-spacing-5: 3rem;
|
|
}
|
|
|
|
.d-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-eq > * {
|
|
flex: 100%;
|
|
}
|
|
|
|
.hstack {
|
|
--prj-gap: var(--prj-spacing-3);
|
|
display: flex;
|
|
gap: var(--prj-gap);
|
|
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);
|
|
display: grid;
|
|
grid-template-columns: var(--prj-columns);
|
|
gap: var(--prj-gap);
|
|
}
|
|
|
|
.grid-cols-1 {
|
|
--prj-columns: repeat(1, 1fr);
|
|
}
|
|
|
|
.grid-cols-2 {
|
|
--prj-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.grid-cols-3 {
|
|
--prj-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.grid-cols-4 {
|
|
--prj-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.grid-cols-5 {
|
|
--prj-columns: repeat(5, 1fr);
|
|
}
|
|
|
|
.grid-cols-6 {
|
|
--prj-columns: repeat(6, 1fr);
|
|
}
|
|
|
|
.grid-cols-7 {
|
|
--prj-columns: repeat(7, 1fr);
|
|
}
|
|
|
|
.grid-cols-8 {
|
|
--prj-columns: repeat(8, 1fr);
|
|
}
|
|
|
|
.grid-cols-9 {
|
|
--prj-columns: repeat(9, 1fr);
|
|
}
|
|
|
|
.grid-cols-10 {
|
|
--prj-columns: repeat(10, 1fr);
|
|
}
|
|
|
|
.grid-cols-11 {
|
|
--prj-columns: repeat(11, 1fr);
|
|
}
|
|
|
|
.grid-cols-12 {
|
|
--prj-columns: repeat(12, 1fr);
|
|
}
|
|
|
|
.gap-0 {
|
|
--prj-gap: 0;
|
|
}
|
|
|
|
.gap-1 {
|
|
--prj-gap: var(--prj-spacing-1);
|
|
}
|
|
|
|
.gap-2 {
|
|
--prj-gap: var(--prj-spacing-2);
|
|
}
|
|
|
|
.gap-3 {
|
|
--prj-gap: var(--prj-spacing-3);
|
|
}
|
|
|
|
.gap-4 {
|
|
--prj-gap: var(--prj-spacing-4);
|
|
}
|
|
|
|
.gap-5 {
|
|
--prj-gap: var(--prj-spacing-5);
|
|
}
|
|
|
|
.list-unstyle {
|
|
list-style: none;
|
|
}
|
|
|
|
.text-justify {
|
|
text-align: justify;
|
|
text-justify: inter-word;
|
|
}
|
|
|
|
.text-start {
|
|
text-align: start;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.overflow-x-scroll {
|
|
overflow-x: scroll;
|
|
}
|
|
.overflow-y-scroll {
|
|
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;
|
|
}
|
|
.m-2 {
|
|
margin: var(--prj-spacing-2) !important;
|
|
}
|
|
.m-3 {
|
|
margin: var(--prj-spacing-3) !important;
|
|
}
|
|
.m-4 {
|
|
margin: var(--prj-spacing-4) !important;
|
|
}
|
|
.m-5 {
|
|
margin: var(--prj-spacing-5) !important;
|
|
}
|
|
.m-auto {
|
|
margin: auto !important;
|
|
}
|
|
.mx-1 {
|
|
margin-right: var(--prj-spacing-1) 0 !important;
|
|
}
|
|
.mx-2 {
|
|
margin-right: var(--prj-spacing-2) 0 !important;
|
|
}
|
|
.mx-3 {
|
|
margin-right: var(--prj-spacing-3) 0 !important;
|
|
}
|
|
.mx-4 {
|
|
margin-right: var(--prj-spacing-4) 0 !important;
|
|
}
|
|
.mx-5 {
|
|
margin-right: var(--prj-spacing-5) 0 !important;
|
|
}
|
|
.mx-auto {
|
|
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-top: var(--prj-spacing-1) !important;
|
|
margin-bottom: var(--prj-spacing-1) !important;
|
|
}
|
|
.my-2 {
|
|
margin-top: var(--prj-spacing-2) !important;
|
|
margin-bottom: var(--prj-spacing-2) !important;
|
|
}
|
|
.my-3 {
|
|
margin-top: var(--prj-spacing-3) !important;
|
|
margin-bottom: var(--prj-spacing-3) !important;
|
|
}
|
|
.my-4 {
|
|
margin-top: var(--prj-spacing-4) !important;
|
|
margin-bottom: var(--prj-spacing-4) !important;
|
|
}
|
|
.my-5 {
|
|
margin-top: var(--prj-spacing-5) !important;
|
|
margin-bottom: var(--prj-spacing-5) !important;
|
|
}
|
|
.my-auto {
|
|
margin-top: auto !important;
|
|
margin-bottom: auto !important;
|
|
}
|
|
.mt-0 {
|
|
margin-top: 0 !important;
|
|
}
|
|
.mt-1 {
|
|
margin-top: var(--prj-spacing-1) !important;
|
|
}
|
|
.mt-2 {
|
|
margin-top: var(--prj-spacing-2) !important;
|
|
}
|
|
.mt-3 {
|
|
margin-top: var(--prj-spacing-3) !important;
|
|
}
|
|
.mt-4 {
|
|
margin-top: var(--prj-spacing-4) !important;
|
|
}
|
|
.mt-5 {
|
|
margin-top: var(--prj-spacing-5) !important;
|
|
}
|
|
.mt-auto {
|
|
margin-top: auto !important;
|
|
}
|
|
.mb-0 {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.mb-1 {
|
|
margin-bottom: var(--prj-spacing-1) !important;
|
|
}
|
|
.mb-2 {
|
|
margin-bottom: var(--prj-spacing-2) !important;
|
|
}
|
|
.mb-3 {
|
|
margin-bottom: var(--prj-spacing-3) !important;
|
|
}
|
|
.mb-4 {
|
|
margin-bottom: var(--prj-spacing-4) !important;
|
|
}
|
|
.mb-5 {
|
|
margin-bottom: var(--prj-spacing-5) !important;
|
|
}
|
|
.mb-auto {
|
|
margin-bottom: auto !important;
|
|
}
|
|
.ml-1 {
|
|
margin-left: var(--prj-spacing-1) !important;
|
|
}
|
|
.ml-2 {
|
|
margin-left: var(--prj-spacing-2) !important;
|
|
}
|
|
.ml-3 {
|
|
margin-left: var(--prj-spacing-3) !important;
|
|
}
|
|
.ml-4 {
|
|
margin-left: var(--prj-spacing-4) !important;
|
|
}
|
|
.ml-5 {
|
|
margin-left: var(--prj-spacing-5) !important;
|
|
}
|
|
.ml-auto {
|
|
margin-left: auto !important;
|
|
}
|
|
.mr-1 {
|
|
margin-right: var(--prj-spacing-1) !important;
|
|
}
|
|
.mr-2 {
|
|
margin-right: var(--prj-spacing-2) !important;
|
|
}
|
|
.mr-3 {
|
|
margin-right: var(--prj-spacing-3) !important;
|
|
}
|
|
.mr-4 {
|
|
margin-right: var(--prj-spacing-4) !important;
|
|
}
|
|
.mr-5 {
|
|
margin-right: var(--prj-spacing-5) !important;
|
|
}
|
|
.mr-auto {
|
|
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 */
|