frontend: import more tailwind classes, apply them
This commit is contained in:
parent
45aab0b5bc
commit
07530d194d
18 changed files with 816 additions and 70 deletions
|
|
@ -1,14 +0,0 @@
|
|||
@font-face {
|
||||
font-family: "Noto Sans Regular";
|
||||
src: url("/fonts/noto-sans-regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Noto Sans Mono Regular";
|
||||
src: url("/fonts/noto-sans-mono-regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Noto Serif Regular";
|
||||
src: url("/fonts/noto-serif-regular.ttf") format("truetype");
|
||||
}
|
||||
|
|
@ -1,19 +1,4 @@
|
|||
body .wrapper {
|
||||
a {
|
||||
@import "colors";
|
||||
color: $accent-color;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:visited {
|
||||
color: $accent-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,7 +76,6 @@ body .wrapper .group {
|
|||
a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 50px;
|
||||
justify-content: space-between;
|
||||
padding: 10px 10px 5px 0px;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import "layout/height";
|
||||
@import "layout/width";
|
||||
@import "layout/margin";
|
||||
@import "layout/padding";
|
||||
@import "layout/borders";
|
||||
@import "layout/text";
|
||||
|
||||
.m-0-auto { margin: 0 auto; }
|
||||
.maxw-1024 { max-width: 1024px; }
|
||||
|
|
@ -40,14 +44,3 @@
|
|||
.text-left { text-align: left; }
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
|
||||
|
||||
/* padding */
|
||||
.p-3 { padding: 3px; }
|
||||
.p-5 { padding: 5px; }
|
||||
|
||||
|
||||
/* borders */
|
||||
.rounded { border-radius: 5px; }
|
||||
.border-primary { border: 1px solid $primary-color; }
|
||||
.border-secondary { border: 1px solid $secondary-color; }
|
||||
|
|
|
|||
180
twenty-frontend/src/css/layout/_borders.scss
Normal file
180
twenty-frontend/src/css/layout/_borders.scss
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
.rounded-none { border-radius: 0px; }
|
||||
.rounded-sm { border-radius: 0.125rem; }
|
||||
.rounded { border-radius: 0.25rem; }
|
||||
.rounded-md { border-radius: 0.375rem; }
|
||||
.rounded-lg { border-radius: 0.5rem; }
|
||||
.rounded-xl { border-radius: 0.75rem; }
|
||||
.rounded-2xl { border-radius: 1rem; }
|
||||
.rounded-3xl { border-radius: 1.5rem; }
|
||||
.rounded-full { border-radius: 9999px; }
|
||||
.rounded-s-none { border-start-start-radius: 0px; }
|
||||
.rounded-s-sm { border-start-start-radius: 0.125rem; }
|
||||
.rounded-s { border-start-start-radius: 0.25rem; }
|
||||
.rounded-s-md { border-start-start-radius: 0.375rem; }
|
||||
.rounded-s-lg { border-start-start-radius: 0.5rem; }
|
||||
.rounded-s-xl { border-start-start-radius: 0.75rem; }
|
||||
.rounded-s-2xl { border-start-start-radius: 1rem; }
|
||||
.rounded-s-3xl { border-start-start-radius: 1.5rem; }
|
||||
.rounded-s-full { border-start-start-radius: 9999px; }
|
||||
.rounded-e-none { border-start-end-radius: 0px; }
|
||||
.rounded-e-sm { border-start-end-radius: 0.125rem; }
|
||||
.rounded-e { border-start-end-radius: 0.25rem; }
|
||||
.rounded-e-md { border-start-end-radius: 0.375rem; }
|
||||
.rounded-e-lg { border-start-end-radius: 0.5rem; }
|
||||
.rounded-e-xl { border-start-end-radius: 0.75rem; }
|
||||
.rounded-e-2xl { border-start-end-radius: 1rem; }
|
||||
.rounded-e-3xl { border-start-end-radius: 1.5rem; }
|
||||
.rounded-e-full { border-start-end-radius: 9999px; }
|
||||
.rounded-t-none { border-top-left-radius: 0px; }
|
||||
.rounded-t-sm { border-top-left-radius: 0.125rem; }
|
||||
.rounded-t { border-top-left-radius: 0.25rem; }
|
||||
.rounded-t-md { border-top-left-radius: 0.375rem; }
|
||||
.rounded-t-lg { border-top-left-radius: 0.5rem; }
|
||||
.rounded-t-xl { border-top-left-radius: 0.75rem; }
|
||||
.rounded-t-2xl { border-top-left-radius: 1rem; }
|
||||
.rounded-t-3xl { border-top-left-radius: 1.5rem; }
|
||||
.rounded-t-full { border-top-left-radius: 9999px; }
|
||||
.rounded-r-none { border-top-right-radius: 0px; }
|
||||
.rounded-r-sm { border-top-right-radius: 0.125rem; }
|
||||
.rounded-r { border-top-right-radius: 0.25rem; }
|
||||
.rounded-r-md { border-top-right-radius: 0.375rem; }
|
||||
.rounded-r-lg { border-top-right-radius: 0.5rem; }
|
||||
.rounded-r-xl { border-top-right-radius: 0.75rem; }
|
||||
.rounded-r-2xl { border-top-right-radius: 1rem; }
|
||||
.rounded-r-3xl { border-top-right-radius: 1.5rem; }
|
||||
.rounded-r-full { border-top-right-radius: 9999px; }
|
||||
.rounded-b-none { border-bottom-right-radius: 0px; }
|
||||
.rounded-b-sm { border-bottom-right-radius: 0.125rem; }
|
||||
.rounded-b { border-bottom-right-radius: 0.25rem; }
|
||||
.rounded-b-md { border-bottom-right-radius: 0.375rem; }
|
||||
.rounded-b-lg { border-bottom-right-radius: 0.5rem; }
|
||||
.rounded-b-xl { border-bottom-right-radius: 0.75rem; }
|
||||
.rounded-b-2xl { border-bottom-right-radius: 1rem; }
|
||||
.rounded-b-3xl { border-bottom-right-radius: 1.5rem; }
|
||||
.rounded-b-full { border-bottom-right-radius: 9999px; }
|
||||
.rounded-l-none { border-top-left-radius: 0px; }
|
||||
.rounded-l-sm { border-top-left-radius: 0.125rem; }
|
||||
.rounded-l { border-top-left-radius: 0.25rem; }
|
||||
.rounded-l-md { border-top-left-radius: 0.375rem; }
|
||||
.rounded-l-lg { border-top-left-radius: 0.5rem; }
|
||||
.rounded-l-xl { border-top-left-radius: 0.75rem; }
|
||||
.rounded-l-2xl { border-top-left-radius: 1rem; }
|
||||
.rounded-l-3xl { border-top-left-radius: 1.5rem; }
|
||||
.rounded-l-full { border-top-left-radius: 9999px; }
|
||||
.rounded-ss-none { border-start-start-radius: 0px; }
|
||||
.rounded-ss-sm { border-start-start-radius: 0.125rem; }
|
||||
.rounded-ss { border-start-start-radius: 0.25rem; }
|
||||
.rounded-ss-md { border-start-start-radius: 0.375rem; }
|
||||
.rounded-ss-lg { border-start-start-radius: 0.5rem; }
|
||||
.rounded-ss-xl { border-start-start-radius: 0.75rem; }
|
||||
.rounded-ss-2xl { border-start-start-radius: 1rem; }
|
||||
.rounded-ss-3xl { border-start-start-radius: 1.5rem; }
|
||||
.rounded-ss-full { border-start-start-radius: 9999px; }
|
||||
.rounded-se-none { border-start-end-radius: 0px; }
|
||||
.rounded-se-sm { border-start-end-radius: 0.125rem; }
|
||||
.rounded-se { border-start-end-radius: 0.25rem; }
|
||||
.rounded-se-md { border-start-end-radius: 0.375rem; }
|
||||
.rounded-se-lg { border-start-end-radius: 0.5rem; }
|
||||
.rounded-se-xl { border-start-end-radius: 0.75rem; }
|
||||
.rounded-se-2xl { border-start-end-radius: 1rem; }
|
||||
.rounded-se-3xl { border-start-end-radius: 1.5rem; }
|
||||
.rounded-se-full { border-start-end-radius: 9999px; }
|
||||
.rounded-ee-none { border-end-end-radius: 0px; }
|
||||
.rounded-ee-sm { border-end-end-radius: 0.125rem; }
|
||||
.rounded-ee { border-end-end-radius: 0.25rem; }
|
||||
.rounded-ee-md { border-end-end-radius: 0.375rem; }
|
||||
.rounded-ee-lg { border-end-end-radius: 0.5rem; }
|
||||
.rounded-ee-xl { border-end-end-radius: 0.75rem; }
|
||||
.rounded-ee-2xl { border-end-end-radius: 1rem; }
|
||||
.rounded-ee-3xl { border-end-end-radius: 1.5rem; }
|
||||
.rounded-ee-full { border-end-end-radius: 9999px; }
|
||||
.rounded-es-none { border-end-start-radius: 0px; }
|
||||
.rounded-es-sm { border-end-start-radius: 0.125rem; }
|
||||
.rounded-es { border-end-start-radius: 0.25rem; }
|
||||
.rounded-es-md { border-end-start-radius: 0.375rem; }
|
||||
.rounded-es-lg { border-end-start-radius: 0.5rem; }
|
||||
.rounded-es-xl { border-end-start-radius: 0.75rem; }
|
||||
.rounded-es-2xl { border-end-start-radius: 1rem; }
|
||||
.rounded-es-3xl { border-end-start-radius: 1.5rem; }
|
||||
.rounded-es-full { border-end-start-radius: 9999px; }
|
||||
.rounded-tl-none { border-top-left-radius: 0px; }
|
||||
.rounded-tl-sm { border-top-left-radius: 0.125rem; }
|
||||
.rounded-tl { border-top-left-radius: 0.25rem; }
|
||||
.rounded-tl-md { border-top-left-radius: 0.375rem; }
|
||||
.rounded-tl-lg { border-top-left-radius: 0.5rem; }
|
||||
.rounded-tl-xl { border-top-left-radius: 0.75rem; }
|
||||
.rounded-tl-2xl { border-top-left-radius: 1rem; }
|
||||
.rounded-tl-3xl { border-top-left-radius: 1.5rem; }
|
||||
.rounded-tl-full { border-top-left-radius: 9999px; }
|
||||
.rounded-tr-none { border-top-right-radius: 0px; }
|
||||
.rounded-tr-sm { border-top-right-radius: 0.125rem; }
|
||||
.rounded-tr { border-top-right-radius: 0.25rem; }
|
||||
.rounded-tr-md { border-top-right-radius: 0.375rem; }
|
||||
.rounded-tr-lg { border-top-right-radius: 0.5rem; }
|
||||
.rounded-tr-xl { border-top-right-radius: 0.75rem; }
|
||||
.rounded-tr-2xl { border-top-right-radius: 1rem; }
|
||||
.rounded-tr-3xl { border-top-right-radius: 1.5rem; }
|
||||
.rounded-tr-full { border-top-right-radius: 9999px; }
|
||||
.rounded-br-none { border-bottom-right-radius: 0px; }
|
||||
.rounded-br-sm { border-bottom-right-radius: 0.125rem; }
|
||||
.rounded-br { border-bottom-right-radius: 0.25rem; }
|
||||
.rounded-br-md { border-bottom-right-radius: 0.375rem; }
|
||||
.rounded-br-lg { border-bottom-right-radius: 0.5rem; }
|
||||
.rounded-br-xl { border-bottom-right-radius: 0.75rem; }
|
||||
.rounded-br-2xl { border-bottom-right-radius: 1rem; }
|
||||
.rounded-br-3xl { border-bottom-right-radius: 1.5rem; }
|
||||
.rounded-br-full { border-bottom-right-radius: 9999px; }
|
||||
.rounded-bl-none { border-bottom-left-radius: 0px; }
|
||||
.rounded-bl-sm { border-bottom-left-radius: 0.125rem; }
|
||||
.rounded-bl { border-bottom-left-radius: 0.25rem; }
|
||||
.rounded-bl-md { border-bottom-left-radius: 0.375rem; }
|
||||
.rounded-bl-lg { border-bottom-left-radius: 0.5rem; }
|
||||
.rounded-bl-xl { border-bottom-left-radius: 0.75rem; }
|
||||
.rounded-bl-2xl { border-bottom-left-radius: 1rem; }
|
||||
.rounded-bl-3xl { border-bottom-left-radius: 1.5rem; }
|
||||
.rounded-bl-full { border-bottom-left-radius: 9999px; }
|
||||
.border-0 { border-width: 0px; }
|
||||
.border-2 { border-width: 2px; }
|
||||
.border-4 { border-width: 4px; }
|
||||
.border-8 { border-width: 8px; }
|
||||
.border { border-width: 1px; }
|
||||
.border-x-0 { border-left-width: 0px; }
|
||||
.border-x-2 { border-left-width: 2px; }
|
||||
.border-x-4 { border-left-width: 4px; }
|
||||
.border-x-8 { border-left-width: 8px; }
|
||||
.border-x { border-left-width: 1px; }
|
||||
.border-y-0 { border-top-width: 0px; }
|
||||
.border-y-2 { border-top-width: 2px; }
|
||||
.border-y-4 { border-top-width: 4px; }
|
||||
.border-y-8 { border-top-width: 8px; }
|
||||
.border-y { border-top-width: 1px; }
|
||||
.border-s-0 { border-inline-start-width: 0px; }
|
||||
.border-s-2 { border-inline-start-width: 2px; }
|
||||
.border-s-4 { border-inline-start-width: 4px; }
|
||||
.border-s-8 { border-inline-start-width: 8px; }
|
||||
.border-s { border-inline-start-width: 1px; }
|
||||
.border-e-0 { border-inline-end-width: 0px; }
|
||||
.border-e-2 { border-inline-end-width: 2px; }
|
||||
.border-e-4 { border-inline-end-width: 4px; }
|
||||
.border-e-8 { border-inline-end-width: 8px; }
|
||||
.border-e { border-inline-end-width: 1px; }
|
||||
.border-t-0 { border-top-width: 0px; }
|
||||
.border-t-2 { border-top-width: 2px; }
|
||||
.border-t-4 { border-top-width: 4px; }
|
||||
.border-t-8 { border-top-width: 8px; }
|
||||
.border-t { border-top-width: 1px; }
|
||||
.border-r-0 { border-right-width: 0px; }
|
||||
.border-r-2 { border-right-width: 2px; }
|
||||
.border-r-4 { border-right-width: 4px; }
|
||||
.border-r-8 { border-right-width: 8px; }
|
||||
.border-r { border-right-width: 1px; }
|
||||
.border-b-0 { border-bottom-width: 0px; }
|
||||
.border-b-2 { border-bottom-width: 2px; }
|
||||
.border-b-4 { border-bottom-width: 4px; }
|
||||
.border-b-8 { border-bottom-width: 8px; }
|
||||
.border-b { border-bottom-width: 1px; }
|
||||
.border-l-0 { border-left-width: 0px; }
|
||||
.border-l-2 { border-left-width: 2px; }
|
||||
.border-l-4 { border-left-width: 4px; }
|
||||
.border-l-8 { border-left-width: 8px; }
|
||||
.border-l { border-left-width: 1px; }
|
||||
13
twenty-frontend/src/css/layout/_font.scss
Normal file
13
twenty-frontend/src/css/layout/_font.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.font-sans { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
|
||||
.font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }
|
||||
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
|
||||
|
||||
.font-thin { font-weight: 100; }
|
||||
.font-extralight { font-weight: 200; }
|
||||
.font-light { font-weight: 300; }
|
||||
.font-normal { font-weight: 400; }
|
||||
.font-medium { font-weight: 500; }
|
||||
.font-semibold { font-weight: 600; }
|
||||
.font-bold { font-weight: 700; }
|
||||
.font-extrabold { font-weight: 800; }
|
||||
.font-black { font-weight: 900; }
|
||||
13
twenty-frontend/src/css/layout/_fonts.scss
Normal file
13
twenty-frontend/src/css/layout/_fonts.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.font-sans { font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
|
||||
.font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }
|
||||
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
|
||||
|
||||
.font-thin { font-weight: 100; }
|
||||
.font-extralight { font-weight: 200; }
|
||||
.font-light { font-weight: 300; }
|
||||
.font-normal { font-weight: 400; }
|
||||
.font-medium { font-weight: 500; }
|
||||
.font-semibold { font-weight: 600; }
|
||||
.font-bold { font-weight: 700; }
|
||||
.font-extrabold { font-weight: 800; }
|
||||
.font-black { font-weight: 900; }
|
||||
288
twenty-frontend/src/css/layout/_margin.scss
Normal file
288
twenty-frontend/src/css/layout/_margin.scss
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
.m-0 { margin: 0px; }
|
||||
.mx-0 { margin-left: 0px; }
|
||||
.my-0 { margin-top: 0px; }
|
||||
.ms-0 { margin-inline-start: 0px; }
|
||||
.me-0 { margin-inline-end: 0px; }
|
||||
.mt-0 { margin-top: 0px; }
|
||||
.mr-0 { margin-right: 0px; }
|
||||
.mb-0 { margin-bottom: 0px; }
|
||||
.ml-0 { margin-left: 0px; }
|
||||
.m-px { margin: 1px; }
|
||||
.mx-px { margin-left: 1px; }
|
||||
.my-px { margin-top: 1px; }
|
||||
.ms-px { margin-inline-start: 1px; }
|
||||
.me-px { margin-inline-end: 1px; }
|
||||
.mt-px { margin-top: 1px; }
|
||||
.mr-px { margin-right: 1px; }
|
||||
.mb-px { margin-bottom: 1px; }
|
||||
.ml-px { margin-left: 1px; }
|
||||
.m-1 { margin: 0.25rem; }
|
||||
.mx-1 { margin-left: 0.25rem; }
|
||||
.my-1 { margin-top: 0.25rem; }
|
||||
.ms-1 { margin-inline-start: 0.25rem; }
|
||||
.me-1 { margin-inline-end: 0.25rem; }
|
||||
.mt-1 { margin-top: 0.25rem; }
|
||||
.mr-1 { margin-right: 0.25rem; }
|
||||
.mb-1 { margin-bottom: 0.25rem; }
|
||||
.ml-1 { margin-left: 0.25rem; }
|
||||
.m-2 { margin: 0.5rem; }
|
||||
.mx-2 { margin-left: 0.5rem; }
|
||||
.my-2 { margin-top: 0.5rem; }
|
||||
.ms-2 { margin-inline-start: 0.5rem; }
|
||||
.me-2 { margin-inline-end: 0.5rem; }
|
||||
.mt-2 { margin-top: 0.5rem; }
|
||||
.mr-2 { margin-right: 0.5rem; }
|
||||
.mb-2 { margin-bottom: 0.5rem; }
|
||||
.ml-2 { margin-left: 0.5rem; }
|
||||
.m-3 { margin: 0.75rem; }
|
||||
.mx-3 { margin-left: 0.75rem; }
|
||||
.my-3 { margin-top: 0.75rem; }
|
||||
.ms-3 { margin-inline-start: 0.75rem; }
|
||||
.me-3 { margin-inline-end: 0.75rem; }
|
||||
.mt-3 { margin-top: 0.75rem; }
|
||||
.mr-3 { margin-right: 0.75rem; }
|
||||
.mb-3 { margin-bottom: 0.75rem; }
|
||||
.ml-3 { margin-left: 0.75rem; }
|
||||
.m-4 { margin: 1rem; }
|
||||
.mx-4 { margin-left: 1rem; }
|
||||
.my-4 { margin-top: 1rem; }
|
||||
.ms-4 { margin-inline-start: 1rem; }
|
||||
.me-4 { margin-inline-end: 1rem; }
|
||||
.mt-4 { margin-top: 1rem; }
|
||||
.mr-4 { margin-right: 1rem; }
|
||||
.mb-4 { margin-bottom: 1rem; }
|
||||
.ml-4 { margin-left: 1rem; }
|
||||
.m-5 { margin: 1.25rem; }
|
||||
.mx-5 { margin-left: 1.25rem; }
|
||||
.my-5 { margin-top: 1.25rem; }
|
||||
.ms-5 { margin-inline-start: 1.25rem; }
|
||||
.me-5 { margin-inline-end: 1.25rem; }
|
||||
.mt-5 { margin-top: 1.25rem; }
|
||||
.mr-5 { margin-right: 1.25rem; }
|
||||
.mb-5 { margin-bottom: 1.25rem; }
|
||||
.ml-5 { margin-left: 1.25rem; }
|
||||
.m-6 { margin: 1.5rem; }
|
||||
.mx-6 { margin-left: 1.5rem; }
|
||||
.my-6 { margin-top: 1.5rem; }
|
||||
.ms-6 { margin-inline-start: 1.5rem; }
|
||||
.me-6 { margin-inline-end: 1.5rem; }
|
||||
.mt-6 { margin-top: 1.5rem; }
|
||||
.mr-6 { margin-right: 1.5rem; }
|
||||
.mb-6 { margin-bottom: 1.5rem; }
|
||||
.ml-6 { margin-left: 1.5rem; }
|
||||
.m-7 { margin: 1.75rem; }
|
||||
.mx-7 { margin-left: 1.75rem; }
|
||||
.my-7 { margin-top: 1.75rem; }
|
||||
.ms-7 { margin-inline-start: 1.75rem; }
|
||||
.me-7 { margin-inline-end: 1.75rem; }
|
||||
.mt-7 { margin-top: 1.75rem; }
|
||||
.mr-7 { margin-right: 1.75rem; }
|
||||
.mb-7 { margin-bottom: 1.75rem; }
|
||||
.ml-7 { margin-left: 1.75rem; }
|
||||
.m-8 { margin: 2rem; }
|
||||
.mx-8 { margin-left: 2rem; }
|
||||
.my-8 { margin-top: 2rem; }
|
||||
.ms-8 { margin-inline-start: 2rem; }
|
||||
.me-8 { margin-inline-end: 2rem; }
|
||||
.mt-8 { margin-top: 2rem; }
|
||||
.mr-8 { margin-right: 2rem; }
|
||||
.mb-8 { margin-bottom: 2rem; }
|
||||
.ml-8 { margin-left: 2rem; }
|
||||
.m-9 { margin: 2.25rem; }
|
||||
.mx-9 { margin-left: 2.25rem; }
|
||||
.my-9 { margin-top: 2.25rem; }
|
||||
.ms-9 { margin-inline-start: 2.25rem; }
|
||||
.me-9 { margin-inline-end: 2.25rem; }
|
||||
.mt-9 { margin-top: 2.25rem; }
|
||||
.mr-9 { margin-right: 2.25rem; }
|
||||
.mb-9 { margin-bottom: 2.25rem; }
|
||||
.ml-9 { margin-left: 2.25rem; }
|
||||
.m-10 { margin: 2.5rem; }
|
||||
.mx-10 { margin-left: 2.5rem; }
|
||||
.my-10 { margin-top: 2.5rem; }
|
||||
.ms-10 { margin-inline-start: 2.5rem; }
|
||||
.me-10 { margin-inline-end: 2.5rem; }
|
||||
.mt-10 { margin-top: 2.5rem; }
|
||||
.mr-10 { margin-right: 2.5rem; }
|
||||
.mb-10 { margin-bottom: 2.5rem; }
|
||||
.ml-10 { margin-left: 2.5rem; }
|
||||
.m-11 { margin: 2.75rem; }
|
||||
.mx-11 { margin-left: 2.75rem; }
|
||||
.my-11 { margin-top: 2.75rem; }
|
||||
.ms-11 { margin-inline-start: 2.75rem; }
|
||||
.me-11 { margin-inline-end: 2.75rem; }
|
||||
.mt-11 { margin-top: 2.75rem; }
|
||||
.mr-11 { margin-right: 2.75rem; }
|
||||
.mb-11 { margin-bottom: 2.75rem; }
|
||||
.ml-11 { margin-left: 2.75rem; }
|
||||
.m-12 { margin: 3rem; }
|
||||
.mx-12 { margin-left: 3rem; }
|
||||
.my-12 { margin-top: 3rem; }
|
||||
.ms-12 { margin-inline-start: 3rem; }
|
||||
.me-12 { margin-inline-end: 3rem; }
|
||||
.mt-12 { margin-top: 3rem; }
|
||||
.mr-12 { margin-right: 3rem; }
|
||||
.mb-12 { margin-bottom: 3rem; }
|
||||
.ml-12 { margin-left: 3rem; }
|
||||
.m-14 { margin: 3.5rem; }
|
||||
.mx-14 { margin-left: 3.5rem; }
|
||||
.my-14 { margin-top: 3.5rem; }
|
||||
.ms-14 { margin-inline-start: 3.5rem; }
|
||||
.me-14 { margin-inline-end: 3.5rem; }
|
||||
.mt-14 { margin-top: 3.5rem; }
|
||||
.mr-14 { margin-right: 3.5rem; }
|
||||
.mb-14 { margin-bottom: 3.5rem; }
|
||||
.ml-14 { margin-left: 3.5rem; }
|
||||
.m-16 { margin: 4rem; }
|
||||
.mx-16 { margin-left: 4rem; }
|
||||
.my-16 { margin-top: 4rem; }
|
||||
.ms-16 { margin-inline-start: 4rem; }
|
||||
.me-16 { margin-inline-end: 4rem; }
|
||||
.mt-16 { margin-top: 4rem; }
|
||||
.mr-16 { margin-right: 4rem; }
|
||||
.mb-16 { margin-bottom: 4rem; }
|
||||
.ml-16 { margin-left: 4rem; }
|
||||
.m-20 { margin: 5rem; }
|
||||
.mx-20 { margin-left: 5rem; }
|
||||
.my-20 { margin-top: 5rem; }
|
||||
.ms-20 { margin-inline-start: 5rem; }
|
||||
.me-20 { margin-inline-end: 5rem; }
|
||||
.mt-20 { margin-top: 5rem; }
|
||||
.mr-20 { margin-right: 5rem; }
|
||||
.mb-20 { margin-bottom: 5rem; }
|
||||
.ml-20 { margin-left: 5rem; }
|
||||
.m-24 { margin: 6rem; }
|
||||
.mx-24 { margin-left: 6rem; }
|
||||
.my-24 { margin-top: 6rem; }
|
||||
.ms-24 { margin-inline-start: 6rem; }
|
||||
.me-24 { margin-inline-end: 6rem; }
|
||||
.mt-24 { margin-top: 6rem; }
|
||||
.mr-24 { margin-right: 6rem; }
|
||||
.mb-24 { margin-bottom: 6rem; }
|
||||
.ml-24 { margin-left: 6rem; }
|
||||
.m-28 { margin: 7rem; }
|
||||
.mx-28 { margin-left: 7rem; }
|
||||
.my-28 { margin-top: 7rem; }
|
||||
.ms-28 { margin-inline-start: 7rem; }
|
||||
.me-28 { margin-inline-end: 7rem; }
|
||||
.mt-28 { margin-top: 7rem; }
|
||||
.mr-28 { margin-right: 7rem; }
|
||||
.mb-28 { margin-bottom: 7rem; }
|
||||
.ml-28 { margin-left: 7rem; }
|
||||
.m-32 { margin: 8rem; }
|
||||
.mx-32 { margin-left: 8rem; }
|
||||
.my-32 { margin-top: 8rem; }
|
||||
.ms-32 { margin-inline-start: 8rem; }
|
||||
.me-32 { margin-inline-end: 8rem; }
|
||||
.mt-32 { margin-top: 8rem; }
|
||||
.mr-32 { margin-right: 8rem; }
|
||||
.mb-32 { margin-bottom: 8rem; }
|
||||
.ml-32 { margin-left: 8rem; }
|
||||
.m-36 { margin: 9rem; }
|
||||
.mx-36 { margin-left: 9rem; }
|
||||
.my-36 { margin-top: 9rem; }
|
||||
.ms-36 { margin-inline-start: 9rem; }
|
||||
.me-36 { margin-inline-end: 9rem; }
|
||||
.mt-36 { margin-top: 9rem; }
|
||||
.mr-36 { margin-right: 9rem; }
|
||||
.mb-36 { margin-bottom: 9rem; }
|
||||
.ml-36 { margin-left: 9rem; }
|
||||
.m-40 { margin: 10rem; }
|
||||
.mx-40 { margin-left: 10rem; }
|
||||
.my-40 { margin-top: 10rem; }
|
||||
.ms-40 { margin-inline-start: 10rem; }
|
||||
.me-40 { margin-inline-end: 10rem; }
|
||||
.mt-40 { margin-top: 10rem; }
|
||||
.mr-40 { margin-right: 10rem; }
|
||||
.mb-40 { margin-bottom: 10rem; }
|
||||
.ml-40 { margin-left: 10rem; }
|
||||
.m-44 { margin: 11rem; }
|
||||
.mx-44 { margin-left: 11rem; }
|
||||
.my-44 { margin-top: 11rem; }
|
||||
.ms-44 { margin-inline-start: 11rem; }
|
||||
.me-44 { margin-inline-end: 11rem; }
|
||||
.mt-44 { margin-top: 11rem; }
|
||||
.mr-44 { margin-right: 11rem; }
|
||||
.mb-44 { margin-bottom: 11rem; }
|
||||
.ml-44 { margin-left: 11rem; }
|
||||
.m-48 { margin: 12rem; }
|
||||
.mx-48 { margin-left: 12rem; }
|
||||
.my-48 { margin-top: 12rem; }
|
||||
.ms-48 { margin-inline-start: 12rem; }
|
||||
.me-48 { margin-inline-end: 12rem; }
|
||||
.mt-48 { margin-top: 12rem; }
|
||||
.mr-48 { margin-right: 12rem; }
|
||||
.mb-48 { margin-bottom: 12rem; }
|
||||
.ml-48 { margin-left: 12rem; }
|
||||
.m-52 { margin: 13rem; }
|
||||
.mx-52 { margin-left: 13rem; }
|
||||
.my-52 { margin-top: 13rem; }
|
||||
.ms-52 { margin-inline-start: 13rem; }
|
||||
.me-52 { margin-inline-end: 13rem; }
|
||||
.mt-52 { margin-top: 13rem; }
|
||||
.mr-52 { margin-right: 13rem; }
|
||||
.mb-52 { margin-bottom: 13rem; }
|
||||
.ml-52 { margin-left: 13rem; }
|
||||
.m-56 { margin: 14rem; }
|
||||
.mx-56 { margin-left: 14rem; }
|
||||
.my-56 { margin-top: 14rem; }
|
||||
.ms-56 { margin-inline-start: 14rem; }
|
||||
.me-56 { margin-inline-end: 14rem; }
|
||||
.mt-56 { margin-top: 14rem; }
|
||||
.mr-56 { margin-right: 14rem; }
|
||||
.mb-56 { margin-bottom: 14rem; }
|
||||
.ml-56 { margin-left: 14rem; }
|
||||
.m-60 { margin: 15rem; }
|
||||
.mx-60 { margin-left: 15rem; }
|
||||
.my-60 { margin-top: 15rem; }
|
||||
.ms-60 { margin-inline-start: 15rem; }
|
||||
.me-60 { margin-inline-end: 15rem; }
|
||||
.mt-60 { margin-top: 15rem; }
|
||||
.mr-60 { margin-right: 15rem; }
|
||||
.mb-60 { margin-bottom: 15rem; }
|
||||
.ml-60 { margin-left: 15rem; }
|
||||
.m-64 { margin: 16rem; }
|
||||
.mx-64 { margin-left: 16rem; }
|
||||
.my-64 { margin-top: 16rem; }
|
||||
.ms-64 { margin-inline-start: 16rem; }
|
||||
.me-64 { margin-inline-end: 16rem; }
|
||||
.mt-64 { margin-top: 16rem; }
|
||||
.mr-64 { margin-right: 16rem; }
|
||||
.mb-64 { margin-bottom: 16rem; }
|
||||
.ml-64 { margin-left: 16rem; }
|
||||
.m-72 { margin: 18rem; }
|
||||
.mx-72 { margin-left: 18rem; }
|
||||
.my-72 { margin-top: 18rem; }
|
||||
.ms-72 { margin-inline-start: 18rem; }
|
||||
.me-72 { margin-inline-end: 18rem; }
|
||||
.mt-72 { margin-top: 18rem; }
|
||||
.mr-72 { margin-right: 18rem; }
|
||||
.mb-72 { margin-bottom: 18rem; }
|
||||
.ml-72 { margin-left: 18rem; }
|
||||
.m-80 { margin: 20rem; }
|
||||
.mx-80 { margin-left: 20rem; }
|
||||
.my-80 { margin-top: 20rem; }
|
||||
.ms-80 { margin-inline-start: 20rem; }
|
||||
.me-80 { margin-inline-end: 20rem; }
|
||||
.mt-80 { margin-top: 20rem; }
|
||||
.mr-80 { margin-right: 20rem; }
|
||||
.mb-80 { margin-bottom: 20rem; }
|
||||
.ml-80 { margin-left: 20rem; }
|
||||
.m-96 { margin: 24rem; }
|
||||
.mx-96 { margin-left: 24rem; }
|
||||
.my-96 { margin-top: 24rem; }
|
||||
.ms-96 { margin-inline-start: 24rem; }
|
||||
.me-96 { margin-inline-end: 24rem; }
|
||||
.mt-96 { margin-top: 24rem; }
|
||||
.mr-96 { margin-right: 24rem; }
|
||||
.mb-96 { margin-bottom: 24rem; }
|
||||
.ml-96 { margin-left: 24rem; }
|
||||
.m-auto { margin: auto; }
|
||||
.mx-auto { margin-left: auto; }
|
||||
.my-auto { margin-top: auto; }
|
||||
.ms-auto { margin-inline-start: auto; }
|
||||
.me-auto { margin-inline-end: auto; }
|
||||
.mt-auto { margin-top: auto; }
|
||||
.mr-auto { margin-right: auto; }
|
||||
.mb-auto { margin-bottom: auto; }
|
||||
.ml-auto { margin-left: auto; }
|
||||
279
twenty-frontend/src/css/layout/_padding.scss
Normal file
279
twenty-frontend/src/css/layout/_padding.scss
Normal file
|
|
@ -0,0 +1,279 @@
|
|||
.p-0 { padding: 0px; }
|
||||
.px-0 { padding-left: 0px; }
|
||||
.py-0 { padding-top: 0px; }
|
||||
.ps-0 { padding-inline-start: 0px; }
|
||||
.pe-0 { padding-inline-end: 0px; }
|
||||
.pt-0 { padding-top: 0px; }
|
||||
.pr-0 { padding-right: 0px; }
|
||||
.pb-0 { padding-bottom: 0px; }
|
||||
.pl-0 { padding-left: 0px; }
|
||||
.p-px { padding: 1px; }
|
||||
.px-px { padding-left: 1px; }
|
||||
.py-px { padding-top: 1px; }
|
||||
.ps-px { padding-inline-start: 1px; }
|
||||
.pe-px { padding-inline-end: 1px; }
|
||||
.pt-px { padding-top: 1px; }
|
||||
.pr-px { padding-right: 1px; }
|
||||
.pb-px { padding-bottom: 1px; }
|
||||
.pl-px { padding-left: 1px; }
|
||||
.p-1 { padding: 0.25rem; }
|
||||
.px-1 { padding-left: 0.25rem; }
|
||||
.py-1 { padding-top: 0.25rem; }
|
||||
.ps-1 { padding-inline-start: 0.25rem; }
|
||||
.pe-1 { padding-inline-end: 0.25rem; }
|
||||
.pt-1 { padding-top: 0.25rem; }
|
||||
.pr-1 { padding-right: 0.25rem; }
|
||||
.pb-1 { padding-bottom: 0.25rem; }
|
||||
.pl-1 { padding-left: 0.25rem; }
|
||||
.p-2 { padding: 0.5rem; }
|
||||
.px-2 { padding-left: 0.5rem; }
|
||||
.py-2 { padding-top: 0.5rem; }
|
||||
.ps-2 { padding-inline-start: 0.5rem; }
|
||||
.pe-2 { padding-inline-end: 0.5rem; }
|
||||
.pt-2 { padding-top: 0.5rem; }
|
||||
.pr-2 { padding-right: 0.5rem; }
|
||||
.pb-2 { padding-bottom: 0.5rem; }
|
||||
.pl-2 { padding-left: 0.5rem; }
|
||||
.p-3 { padding: 0.75rem; }
|
||||
.px-3 { padding-left: 0.75rem; }
|
||||
.py-3 { padding-top: 0.75rem; }
|
||||
.ps-3 { padding-inline-start: 0.75rem; }
|
||||
.pe-3 { padding-inline-end: 0.75rem; }
|
||||
.pt-3 { padding-top: 0.75rem; }
|
||||
.pr-3 { padding-right: 0.75rem; }
|
||||
.pb-3 { padding-bottom: 0.75rem; }
|
||||
.pl-3 { padding-left: 0.75rem; }
|
||||
.p-4 { padding: 1rem; }
|
||||
.px-4 { padding-left: 1rem; }
|
||||
.py-4 { padding-top: 1rem; }
|
||||
.ps-4 { padding-inline-start: 1rem; }
|
||||
.pe-4 { padding-inline-end: 1rem; }
|
||||
.pt-4 { padding-top: 1rem; }
|
||||
.pr-4 { padding-right: 1rem; }
|
||||
.pb-4 { padding-bottom: 1rem; }
|
||||
.pl-4 { padding-left: 1rem; }
|
||||
.p-5 { padding: 1.25rem; }
|
||||
.px-5 { padding-left: 1.25rem; }
|
||||
.py-5 { padding-top: 1.25rem; }
|
||||
.ps-5 { padding-inline-start: 1.25rem; }
|
||||
.pe-5 { padding-inline-end: 1.25rem; }
|
||||
.pt-5 { padding-top: 1.25rem; }
|
||||
.pr-5 { padding-right: 1.25rem; }
|
||||
.pb-5 { padding-bottom: 1.25rem; }
|
||||
.pl-5 { padding-left: 1.25rem; }
|
||||
.p-6 { padding: 1.5rem; }
|
||||
.px-6 { padding-left: 1.5rem; }
|
||||
.py-6 { padding-top: 1.5rem; }
|
||||
.ps-6 { padding-inline-start: 1.5rem; }
|
||||
.pe-6 { padding-inline-end: 1.5rem; }
|
||||
.pt-6 { padding-top: 1.5rem; }
|
||||
.pr-6 { padding-right: 1.5rem; }
|
||||
.pb-6 { padding-bottom: 1.5rem; }
|
||||
.pl-6 { padding-left: 1.5rem; }
|
||||
.p-7 { padding: 1.75rem; }
|
||||
.px-7 { padding-left: 1.75rem; }
|
||||
.py-7 { padding-top: 1.75rem; }
|
||||
.ps-7 { padding-inline-start: 1.75rem; }
|
||||
.pe-7 { padding-inline-end: 1.75rem; }
|
||||
.pt-7 { padding-top: 1.75rem; }
|
||||
.pr-7 { padding-right: 1.75rem; }
|
||||
.pb-7 { padding-bottom: 1.75rem; }
|
||||
.pl-7 { padding-left: 1.75rem; }
|
||||
.p-8 { padding: 2rem; }
|
||||
.px-8 { padding-left: 2rem; }
|
||||
.py-8 { padding-top: 2rem; }
|
||||
.ps-8 { padding-inline-start: 2rem; }
|
||||
.pe-8 { padding-inline-end: 2rem; }
|
||||
.pt-8 { padding-top: 2rem; }
|
||||
.pr-8 { padding-right: 2rem; }
|
||||
.pb-8 { padding-bottom: 2rem; }
|
||||
.pl-8 { padding-left: 2rem; }
|
||||
.p-9 { padding: 2.25rem; }
|
||||
.px-9 { padding-left: 2.25rem; }
|
||||
.py-9 { padding-top: 2.25rem; }
|
||||
.ps-9 { padding-inline-start: 2.25rem; }
|
||||
.pe-9 { padding-inline-end: 2.25rem; }
|
||||
.pt-9 { padding-top: 2.25rem; }
|
||||
.pr-9 { padding-right: 2.25rem; }
|
||||
.pb-9 { padding-bottom: 2.25rem; }
|
||||
.pl-9 { padding-left: 2.25rem; }
|
||||
.p-10 { padding: 2.5rem; }
|
||||
.px-10 { padding-left: 2.5rem; }
|
||||
.py-10 { padding-top: 2.5rem; }
|
||||
.ps-10 { padding-inline-start: 2.5rem; }
|
||||
.pe-10 { padding-inline-end: 2.5rem; }
|
||||
.pt-10 { padding-top: 2.5rem; }
|
||||
.pr-10 { padding-right: 2.5rem; }
|
||||
.pb-10 { padding-bottom: 2.5rem; }
|
||||
.pl-10 { padding-left: 2.5rem; }
|
||||
.p-11 { padding: 2.75rem; }
|
||||
.px-11 { padding-left: 2.75rem; }
|
||||
.py-11 { padding-top: 2.75rem; }
|
||||
.ps-11 { padding-inline-start: 2.75rem; }
|
||||
.pe-11 { padding-inline-end: 2.75rem; }
|
||||
.pt-11 { padding-top: 2.75rem; }
|
||||
.pr-11 { padding-right: 2.75rem; }
|
||||
.pb-11 { padding-bottom: 2.75rem; }
|
||||
.pl-11 { padding-left: 2.75rem; }
|
||||
.p-12 { padding: 3rem; }
|
||||
.px-12 { padding-left: 3rem; }
|
||||
.py-12 { padding-top: 3rem; }
|
||||
.ps-12 { padding-inline-start: 3rem; }
|
||||
.pe-12 { padding-inline-end: 3rem; }
|
||||
.pt-12 { padding-top: 3rem; }
|
||||
.pr-12 { padding-right: 3rem; }
|
||||
.pb-12 { padding-bottom: 3rem; }
|
||||
.pl-12 { padding-left: 3rem; }
|
||||
.p-14 { padding: 3.5rem; }
|
||||
.px-14 { padding-left: 3.5rem; }
|
||||
.py-14 { padding-top: 3.5rem; }
|
||||
.ps-14 { padding-inline-start: 3.5rem; }
|
||||
.pe-14 { padding-inline-end: 3.5rem; }
|
||||
.pt-14 { padding-top: 3.5rem; }
|
||||
.pr-14 { padding-right: 3.5rem; }
|
||||
.pb-14 { padding-bottom: 3.5rem; }
|
||||
.pl-14 { padding-left: 3.5rem; }
|
||||
.p-16 { padding: 4rem; }
|
||||
.px-16 { padding-left: 4rem; }
|
||||
.py-16 { padding-top: 4rem; }
|
||||
.ps-16 { padding-inline-start: 4rem; }
|
||||
.pe-16 { padding-inline-end: 4rem; }
|
||||
.pt-16 { padding-top: 4rem; }
|
||||
.pr-16 { padding-right: 4rem; }
|
||||
.pb-16 { padding-bottom: 4rem; }
|
||||
.pl-16 { padding-left: 4rem; }
|
||||
.p-20 { padding: 5rem; }
|
||||
.px-20 { padding-left: 5rem; }
|
||||
.py-20 { padding-top: 5rem; }
|
||||
.ps-20 { padding-inline-start: 5rem; }
|
||||
.pe-20 { padding-inline-end: 5rem; }
|
||||
.pt-20 { padding-top: 5rem; }
|
||||
.pr-20 { padding-right: 5rem; }
|
||||
.pb-20 { padding-bottom: 5rem; }
|
||||
.pl-20 { padding-left: 5rem; }
|
||||
.p-24 { padding: 6rem; }
|
||||
.px-24 { padding-left: 6rem; }
|
||||
.py-24 { padding-top: 6rem; }
|
||||
.ps-24 { padding-inline-start: 6rem; }
|
||||
.pe-24 { padding-inline-end: 6rem; }
|
||||
.pt-24 { padding-top: 6rem; }
|
||||
.pr-24 { padding-right: 6rem; }
|
||||
.pb-24 { padding-bottom: 6rem; }
|
||||
.pl-24 { padding-left: 6rem; }
|
||||
.p-28 { padding: 7rem; }
|
||||
.px-28 { padding-left: 7rem; }
|
||||
.py-28 { padding-top: 7rem; }
|
||||
.ps-28 { padding-inline-start: 7rem; }
|
||||
.pe-28 { padding-inline-end: 7rem; }
|
||||
.pt-28 { padding-top: 7rem; }
|
||||
.pr-28 { padding-right: 7rem; }
|
||||
.pb-28 { padding-bottom: 7rem; }
|
||||
.pl-28 { padding-left: 7rem; }
|
||||
.p-32 { padding: 8rem; }
|
||||
.px-32 { padding-left: 8rem; }
|
||||
.py-32 { padding-top: 8rem; }
|
||||
.ps-32 { padding-inline-start: 8rem; }
|
||||
.pe-32 { padding-inline-end: 8rem; }
|
||||
.pt-32 { padding-top: 8rem; }
|
||||
.pr-32 { padding-right: 8rem; }
|
||||
.pb-32 { padding-bottom: 8rem; }
|
||||
.pl-32 { padding-left: 8rem; }
|
||||
.p-36 { padding: 9rem; }
|
||||
.px-36 { padding-left: 9rem; }
|
||||
.py-36 { padding-top: 9rem; }
|
||||
.ps-36 { padding-inline-start: 9rem; }
|
||||
.pe-36 { padding-inline-end: 9rem; }
|
||||
.pt-36 { padding-top: 9rem; }
|
||||
.pr-36 { padding-right: 9rem; }
|
||||
.pb-36 { padding-bottom: 9rem; }
|
||||
.pl-36 { padding-left: 9rem; }
|
||||
.p-40 { padding: 10rem; }
|
||||
.px-40 { padding-left: 10rem; }
|
||||
.py-40 { padding-top: 10rem; }
|
||||
.ps-40 { padding-inline-start: 10rem; }
|
||||
.pe-40 { padding-inline-end: 10rem; }
|
||||
.pt-40 { padding-top: 10rem; }
|
||||
.pr-40 { padding-right: 10rem; }
|
||||
.pb-40 { padding-bottom: 10rem; }
|
||||
.pl-40 { padding-left: 10rem; }
|
||||
.p-44 { padding: 11rem; }
|
||||
.px-44 { padding-left: 11rem; }
|
||||
.py-44 { padding-top: 11rem; }
|
||||
.ps-44 { padding-inline-start: 11rem; }
|
||||
.pe-44 { padding-inline-end: 11rem; }
|
||||
.pt-44 { padding-top: 11rem; }
|
||||
.pr-44 { padding-right: 11rem; }
|
||||
.pb-44 { padding-bottom: 11rem; }
|
||||
.pl-44 { padding-left: 11rem; }
|
||||
.p-48 { padding: 12rem; }
|
||||
.px-48 { padding-left: 12rem; }
|
||||
.py-48 { padding-top: 12rem; }
|
||||
.ps-48 { padding-inline-start: 12rem; }
|
||||
.pe-48 { padding-inline-end: 12rem; }
|
||||
.pt-48 { padding-top: 12rem; }
|
||||
.pr-48 { padding-right: 12rem; }
|
||||
.pb-48 { padding-bottom: 12rem; }
|
||||
.pl-48 { padding-left: 12rem; }
|
||||
.p-52 { padding: 13rem; }
|
||||
.px-52 { padding-left: 13rem; }
|
||||
.py-52 { padding-top: 13rem; }
|
||||
.ps-52 { padding-inline-start: 13rem; }
|
||||
.pe-52 { padding-inline-end: 13rem; }
|
||||
.pt-52 { padding-top: 13rem; }
|
||||
.pr-52 { padding-right: 13rem; }
|
||||
.pb-52 { padding-bottom: 13rem; }
|
||||
.pl-52 { padding-left: 13rem; }
|
||||
.p-56 { padding: 14rem; }
|
||||
.px-56 { padding-left: 14rem; }
|
||||
.py-56 { padding-top: 14rem; }
|
||||
.ps-56 { padding-inline-start: 14rem; }
|
||||
.pe-56 { padding-inline-end: 14rem; }
|
||||
.pt-56 { padding-top: 14rem; }
|
||||
.pr-56 { padding-right: 14rem; }
|
||||
.pb-56 { padding-bottom: 14rem; }
|
||||
.pl-56 { padding-left: 14rem; }
|
||||
.p-60 { padding: 15rem; }
|
||||
.px-60 { padding-left: 15rem; }
|
||||
.py-60 { padding-top: 15rem; }
|
||||
.ps-60 { padding-inline-start: 15rem; }
|
||||
.pe-60 { padding-inline-end: 15rem; }
|
||||
.pt-60 { padding-top: 15rem; }
|
||||
.pr-60 { padding-right: 15rem; }
|
||||
.pb-60 { padding-bottom: 15rem; }
|
||||
.pl-60 { padding-left: 15rem; }
|
||||
.p-64 { padding: 16rem; }
|
||||
.px-64 { padding-left: 16rem; }
|
||||
.py-64 { padding-top: 16rem; }
|
||||
.ps-64 { padding-inline-start: 16rem; }
|
||||
.pe-64 { padding-inline-end: 16rem; }
|
||||
.pt-64 { padding-top: 16rem; }
|
||||
.pr-64 { padding-right: 16rem; }
|
||||
.pb-64 { padding-bottom: 16rem; }
|
||||
.pl-64 { padding-left: 16rem; }
|
||||
.p-72 { padding: 18rem; }
|
||||
.px-72 { padding-left: 18rem; }
|
||||
.py-72 { padding-top: 18rem; }
|
||||
.ps-72 { padding-inline-start: 18rem; }
|
||||
.pe-72 { padding-inline-end: 18rem; }
|
||||
.pt-72 { padding-top: 18rem; }
|
||||
.pr-72 { padding-right: 18rem; }
|
||||
.pb-72 { padding-bottom: 18rem; }
|
||||
.pl-72 { padding-left: 18rem; }
|
||||
.p-80 { padding: 20rem; }
|
||||
.px-80 { padding-left: 20rem; }
|
||||
.py-80 { padding-top: 20rem; }
|
||||
.ps-80 { padding-inline-start: 20rem; }
|
||||
.pe-80 { padding-inline-end: 20rem; }
|
||||
.pt-80 { padding-top: 20rem; }
|
||||
.pr-80 { padding-right: 20rem; }
|
||||
.pb-80 { padding-bottom: 20rem; }
|
||||
.pl-80 { padding-left: 20rem; }
|
||||
.p-96 { padding: 24rem; }
|
||||
.px-96 { padding-left: 24rem; }
|
||||
.py-96 { padding-top: 24rem; }
|
||||
.ps-96 { padding-inline-start: 24rem; }
|
||||
.pe-96 { padding-inline-end: 24rem; }
|
||||
.pt-96 { padding-top: 24rem; }
|
||||
.pr-96 { padding-right: 24rem; }
|
||||
.pb-96 { padding-bottom: 24rem; }
|
||||
.pl-96 { padding-left: 24rem; }
|
||||
7
twenty-frontend/src/css/layout/_text.scss
Normal file
7
twenty-frontend/src/css/layout/_text.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.text-left { text-align: left; }
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
.underline { text-decoration-line: underline; }
|
||||
.overline { text-decoration-line: overline; }
|
||||
.line-through { text-decoration-line: line-through; }
|
||||
.no-underline { text-decoration-line: none; }
|
||||
|
|
@ -14,7 +14,7 @@ html, html body, .wrapper {
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: monospace;
|
||||
font-family: Noto Sans Regular;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="wrapper m-0-auto maxw-1024 h-100">
|
||||
<div class="react-mount edit-task h-100"></div>
|
||||
<div class="wrapper w-full">
|
||||
<div class="react-mount edit-task"></div>
|
||||
<script src="/js/main/task/edit.js"></script>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="wrapper m-0-auto maxw-1024">
|
||||
<div class="wrapper w-full">
|
||||
<div class="react-mount tasks"></div>
|
||||
<script src="/js/main/tasks.js"></script>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="wrapper m-0-auto maxw-1024 h-100">
|
||||
<div class="react-mount new-task h-100"></div>
|
||||
<div class="wrapper w-full">
|
||||
<div class="react-mount new-task"></div>
|
||||
<script src="/js/main/task/new.js"></script>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export function Group({ groupName, getItems }: Props) {
|
|||
</div>
|
||||
<div>
|
||||
<span
|
||||
className="flex align-items-center justify-content-center text-primary rounded border-secondary p-3"
|
||||
className="flex align-items-center justify-content-center text-primary text-smaller rounded border-secondary p-2"
|
||||
style={{ backgroundColor: task.project.color }}
|
||||
>
|
||||
{task.project.name}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,23 @@
|
|||
import React from "react";
|
||||
|
||||
const BASE_CLASSNAMES = [ "block", "w-3/4", "no-underline", "p-3"];
|
||||
const ACTIVE_CLASSNAMES = [...BASE_CLASSNAMES, "rounded", "bg-secondary", "text-primary" ].join(" ");
|
||||
const INACTIVE_CLASSNAMES = [...BASE_CLASSNAMES, "text-accent"].join(" ");
|
||||
|
||||
export function NavBar() {
|
||||
return (
|
||||
<ul className="items nav">
|
||||
<h1>Tasks</h1>
|
||||
<li className="item">
|
||||
<a href="/tasks/new">New</a> task
|
||||
</li>
|
||||
<li className="item">
|
||||
<a href="/tasks">Show</a> tasks
|
||||
</li>
|
||||
<h1>Projects</h1>
|
||||
<li className="item">
|
||||
<a href="/projects">Show</a> projects
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
return (
|
||||
<ul>
|
||||
<h1>Tasks</h1>
|
||||
<li>
|
||||
<a className={ACTIVE_CLASSNAMES} href="/tasks">All tasks</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className={INACTIVE_CLASSNAMES} href="/tasks/new">New task</a>
|
||||
</li>
|
||||
<h1>Projects</h1>
|
||||
<li>
|
||||
<a className={INACTIVE_CLASSNAMES} href="/projects">All projects</a>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,11 +66,11 @@ export function Task({ taskId }: { taskId?: number }) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="flex w-100 h-100">
|
||||
<div className="w-25">
|
||||
<div className="flex w-full h-full">
|
||||
<div className="w-1/4">
|
||||
<NavBar />
|
||||
</div>
|
||||
<div className="w-75 h-100">
|
||||
<div className="w-3/4">
|
||||
<h1>{task ? "Edit task" : "New task"}</h1>
|
||||
<form className="group h-100" onSubmit={handleSubmit(onSave)}>
|
||||
<div className="group-name">
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ export function Tasks() {
|
|||
<NavBar />
|
||||
</div>
|
||||
<div className="w-3/4">
|
||||
<h1>Tasks</h1>
|
||||
<Group
|
||||
groupName="Working on it"
|
||||
getItems={getTasks(TaskStatus.InProgress)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue