diff --git a/twenty-frontend/src/css/_groups.scss b/twenty-frontend/src/css/_groups.scss index 4809353..23aea10 100644 --- a/twenty-frontend/src/css/_groups.scss +++ b/twenty-frontend/src/css/_groups.scss @@ -79,24 +79,7 @@ body .wrapper .group { height: 50px; justify-content: space-between; padding: 10px 10px 5px 0px; - - .title { - display: flex; - padding-bottom: 5px; - } - - .subtitle { - color: $secondary-color; - } - } - - .tags { - .tag { - color: $primary-color; - border: 1px solid $secondary-color; - border-radius: 5px; - font-weight: bold; - } + text-decoration: none; } } } diff --git a/twenty-frontend/src/css/_layout.scss b/twenty-frontend/src/css/_layout.scss index 926f700..f22194d 100644 --- a/twenty-frontend/src/css/_layout.scss +++ b/twenty-frontend/src/css/_layout.scss @@ -1,6 +1,11 @@ +@import "layout/height"; +@import "layout/width"; .m-0-auto { margin: 0 auto; } .maxw-1024 { max-width: 1024px; } +.block { display: block; } + + /* flex */ .flex { display: flex; } @@ -12,8 +17,9 @@ .justify-content-start { justify-content: flex-start; } .justify-content-center { justify-content: center; } .justify-content-end { justify-content: flex-end; } +.align-items-center { align-items: center; } -/* colors */ +/* text colors */ .bg-primary { background: $primary-color; } .bg-secondary { background: $secondary-color; } .bg-accent { background: $accent-color; } @@ -21,7 +27,7 @@ .text-secondary { color: $secondary-color; } .text-accent { color: $accent-color; } -/* font sizes */ +/* text sizes */ .text-xxsmall { font-size: xx-small; } .text-xsmall { font-size: x-small; } .text-small { font-size: small; } @@ -30,46 +36,18 @@ .text-large { font-size: large; } .text-larger { font-size: larger; } -/* width */ -.w-100 { width: 100%; } -.w-95 { width: 95%; } -.w-90 { width: 90%; } -.w-85 { width: 85%; } -.w-80 { width: 80%; } -.w-75 { width: 75%; } -.w-70 { width: 70%; } -.w-65 { width: 65%; } -.w-60 { width: 60%; } -.w-55 { width: 55%; } -.w-50 { width: 50%; } -.w-45 { width: 45%; } -.w-40 { width: 40%; } -.w-35 { width: 35%; } -.w-30 { width: 30%; } -.w-25 { width: 25%; } -.w-20 { width: 20%; } -.w-15 { width: 15%; } -.w-10 { width: 10%; } -.w-5 { width: 5%; } +/* text alignment */ +.text-left { text-align: left; } +.text-center { text-align: center; } +.text-right { text-align: right; } -/* height */ -.h-100 { height: 100%; } -.h-95 { height: 95%; } -.h-90 { height: 90%; } -.h-85 { height: 85%; } -.h-80 { height: 80%; } -.h-75 { height: 75%; } -.h-70 { height: 70%; } -.h-65 { height: 65%; } -.h-60 { height: 60%; } -.h-55 { height: 55%; } -.h-50 { height: 50%; } -.h-45 { height: 45%; } -.h-40 { height: 40%; } -.h-35 { height: 35%; } -.h-30 { height: 30%; } -.h-25 { height: 25%; } -.h-20 { height: 20%; } -.h-15 { height: 15%; } -.h-10 { height: 10%; } -.h-5 { height: 5%; } + +/* 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; } diff --git a/twenty-frontend/src/css/_lists.scss b/twenty-frontend/src/css/_lists.scss deleted file mode 100644 index a6c9cff..0000000 --- a/twenty-frontend/src/css/_lists.scss +++ /dev/null @@ -1,77 +0,0 @@ -/** - ----------------- - | ul.collection | - ----------------- -**/ - -ul { - h1, h2 { - display: flex; - align-items: center; - margin: 0; - padding: 0; - background: $primary-color; - color: $secondary-color; - height: 25px; - width: 100%; - } -} - - -ul.items { - @import "colors"; - margin: 0; - padding: 0; - list-style-type: none; -} - -ul.items.nav { - border: 1px solid $secondary-color; - border-radius: 5px; - background: $secondary-color; - color: $primary-color; - width: 90%; - padding: 10px; - - h1 { - height: unset; - align-items: center; - background: $secondary-color; - color: $primary-color; - margin-top: 10px; - } - h1:first-child { - margin-top: unset; - } - - li.item { - padding: 5px; - justify-content: space-between; - background: $primary-color; - color: $secondary-color; - display: flex; - align-items: center; - height: 25px; - a { - display: inline; - height: unset; - padding: unset; - } - } -} - -ul.items.projects { - li.item { - a { - width: 100%; - } - } -} - -ul.items.tasks { - li.item { - a { - width: 95%; - } - } -} diff --git a/twenty-frontend/src/css/layout/_height.scss b/twenty-frontend/src/css/layout/_height.scss new file mode 100644 index 0000000..55a41d5 --- /dev/null +++ b/twenty-frontend/src/css/layout/_height.scss @@ -0,0 +1,40 @@ +.h-0 { height: 0px; } +.h-px { height: 1px; } +.h-1 { height: 0.25rem; } +.h-2 { height: 0.5rem; } +.h-3 { height: 0.75rem; } +.h-4 { height: 1rem; } +.h-5 { height: 1.25rem; } +.h-6 { height: 1.5rem; } +.h-7 { height: 1.75rem; } +.h-8 { height: 2rem; } +.h-9 { height: 2.25rem; } +.h-10 { height: 2.5rem; } +.h-11 { height: 2.75rem; } +.h-12 { height: 3rem; } +.h-14 { height: 3.5rem; } +.h-16 { height: 4rem; } +.h-20 { height: 5rem; } +.h-24 { height: 6rem; } +.h-28 { height: 7rem; } +.h-32 { height: 8rem; } +.h-36 { height: 9rem; } +.h-40 { height: 10rem; } +.h-44 { height: 11rem; } +.h-48 { height: 12rem; } +.h-52 { height: 13rem; } +.h-56 { height: 14rem; } +.h-60 { height: 15rem; } +.h-64 { height: 16rem; } +.h-72 { height: 18rem; } +.h-80 { height: 20rem; } +.h-96 { height: 24rem; } +.h-auto { height: auto; } +.h-full { height: 100%; } +.h-screen { height: 100vh; } +.h-svh { height: 100svh; } +.h-lvh { height: 100lvh; } +.h-dvh { height: 100dvh; } +.h-min { height: min-content; } +.h-max { height: max-content; } +.h-fit { height: fit-content; } diff --git a/twenty-frontend/src/css/layout/_width.scss b/twenty-frontend/src/css/layout/_width.scss new file mode 100644 index 0000000..9183f6e --- /dev/null +++ b/twenty-frontend/src/css/layout/_width.scss @@ -0,0 +1,156 @@ +.w-0 { width: 0px; } +.w-px { width: 1px; } +.w-1 { width: 0.25rem; } +.w-2 { width: 0.5rem; } +.w-3 { width: 0.75rem; } +.w-4 { width: 1rem; } +.w-5 { width: 1.25rem; } +.w-6 { width: 1.5rem; } +.w-7 { width: 1.75rem; } +.w-8 { width: 2rem; } +.w-9 { width: 2.25rem; } +.w-10 { width: 2.5rem; } +.w-11 { width: 2.75rem; } +.w-12 { width: 3rem; } +.w-14 { width: 3.5rem; } +.w-16 { width: 4rem; } +.w-20 { width: 5rem; } +.w-24 { width: 6rem; } +.w-28 { width: 7rem; } +.w-32 { width: 8rem; } +.w-36 { width: 9rem; } +.w-40 { width: 10rem; } +.w-44 { width: 11rem; } +.w-48 { width: 12rem; } +.w-52 { width: 13rem; } +.w-56 { width: 14rem; } +.w-60 { width: 15rem; } +.w-64 { width: 16rem; } +.w-72 { width: 18rem; } +.w-80 { width: 20rem; } +.w-96 { width: 24rem; } +.w-auto { width: auto; } +.w-1\/2 { width: 50%; } +.w-1\/3 { width: 33.333333%; } +.w-2\/3 { width: 66.666667%; } +.w-1\/4 { width: 25%; } +.w-2\/4 { width: 50%; } +.w-3\/4 { width: 75%; } +.w-1\/5 { width: 20%; } +.w-2\/5 { width: 40%; } +.w-3\/5 { width: 60%; } +.w-4\/5 { width: 80%; } +.w-1\/6 { width: 16.666667%; } +.w-2\/6 { width: 33.333333%; } +.w-3\/6 { width: 50%; } +.w-4\/6 { width: 66.666667%; } +.w-5\/6 { width: 83.333333%; } +.w-1\/12 { width: 8.333333%; } +.w-2\/12 { width: 16.666667%; } +.w-3\/12 { width: 25%; } +.w-4\/12 { width: 33.333333%; } +.w-5\/12 { width: 41.666667%; } +.w-6\/12 { width: 50%; } +.w-7\/12 { width: 58.333333%; } +.w-8\/12 { width: 66.666667%; } +.w-9\/12 { width: 75%; } +.w-10\/12 { width: 83.333333%; } +.w-11\/12 { width: 91.666667%; } +.w-full { width: 100%; } +.w-screen { width: 100vw; } +.w-svw { width: 100svw; } +.w-lvw { width: 100lvw; } +.w-dvw { width: 100dvw; } +.w-min { width: min-content; } +.w-max { width: max-content; } +.w-fit { width: fit-content; } + +.min-w-0 { min-width: 0px } +.min-w-1 { min-width: 0.25rem; } +.min-w-2 { min-width: 0.5rem; } +.min-w-3 { min-width: 0.75rem; } +.min-w-4 { min-width: 1rem; } +.min-w-5 { min-width: 1.25rem; } +.min-w-6 { min-width: 1.5rem; } +.min-w-7 { min-width: 1.75rem; } +.min-w-8 { min-width: 2rem; } +.min-w-9 { min-width: 2.25rem; } +.min-w-10 { min-width: 2.5rem; } +.min-w-11 { min-width: 2.75rem; } +.min-w-12 { min-width: 3rem; } +.min-w-14 { min-width: 3.5rem; } +.min-w-16 { min-width: 4rem; } +.min-w-20 { min-width: 5rem; } +.min-w-24 { min-width: 6rem; } +.min-w-28 { min-width: 7rem; } +.min-w-32 { min-width: 8rem; } +.min-w-36 { min-width: 9rem; } +.min-w-40 { min-width: 10rem; } +.min-w-44 { min-width: 11rem; } +.min-w-48 { min-width: 12rem; } +.min-w-52 { min-width: 13rem; } +.min-w-56 { min-width: 14rem; } +.min-w-60 { min-width: 15rem; } +.min-w-64 { min-width: 16rem; } +.min-w-72 { min-width: 18rem; } +.min-w-80 { min-width: 20rem; } +.min-w-96 { min-width: 24rem; } +.min-w-px { min-width: 1px; } +.min-w-full { min-width: 100%; } +.min-w-min { min-width: min-content; } +.min-w-max { min-width: max-content; } +.min-w-fit { min-width: fit-content; } + +.max-w-0 { max-width: 0px; } +.max-w-px { max-width: 1px; } +.max-w-1 { max-width: 0.25rem; } +.max-w-2 { max-width: 0.5rem; } +.max-w-3 { max-width: 0.75rem; } +.max-w-4 { max-width: 1rem; } +.max-w-5 { max-width: 1.25rem; } +.max-w-6 { max-width: 1.5rem; } +.max-w-7 { max-width: 1.75rem; } +.max-w-8 { max-width: 2rem; } +.max-w-9 { max-width: 2.25rem; } +.max-w-10 { max-width: 2.5rem; } +.max-w-11 { max-width: 2.75rem; } +.max-w-12 { max-width: 3rem; } +.max-w-14 { max-width: 3.5rem; } +.max-w-16 { max-width: 4rem; } +.max-w-20 { max-width: 5rem; } +.max-w-24 { max-width: 6rem; } +.max-w-28 { max-width: 7rem; } +.max-w-32 { max-width: 8rem; } +.max-w-36 { max-width: 9rem; } +.max-w-40 { max-width: 10rem; } +.max-w-44 { max-width: 11rem; } +.max-w-48 { max-width: 12rem; } +.max-w-52 { max-width: 13rem; } +.max-w-56 { max-width: 14rem; } +.max-w-60 { max-width: 15rem; } +.max-w-64 { max-width: 16rem; } +.max-w-72 { max-width: 18rem; } +.max-w-80 { max-width: 20rem; } +.max-w-96 { max-width: 24rem; } +.max-w-none { max-width: none; } +.max-w-xs { max-width: 20rem; } +.max-w-sm { max-width: 24rem; } +.max-w-md { max-width: 28rem; } +.max-w-lg { max-width: 32rem; } +.max-w-xl { max-width: 36rem; } +.max-w-2xl { max-width: 42rem; } +.max-w-3xl { max-width: 48rem; } +.max-w-4xl { max-width: 56rem; } +.max-w-5xl { max-width: 64rem; } +.max-w-6xl { max-width: 72rem; } +.max-w-7xl { max-width: 80rem; } +.max-w-full { max-width: 100%; } +.max-w-min { max-width: min-content; } +.max-w-max { max-width: max-content; } +.max-w-fit { max-width: fit-content; } +.max-w-prose { max-width: 65ch; } +.max-w-screen-sm { max-width: 640px; } +.max-w-screen-md { max-width: 768px; } +.max-w-screen-lg { max-width: 1024px; } +.max-w-screen-xl { max-width: 1280px; } +.max-w-screen-2xl { max-width: 1536px; } diff --git a/twenty-frontend/src/css/main.scss b/twenty-frontend/src/css/main.scss index 873da35..4fc39f1 100644 --- a/twenty-frontend/src/css/main.scss +++ b/twenty-frontend/src/css/main.scss @@ -1,12 +1,8 @@ @import "fonts"; @import "colors"; @import "global"; -@import "layout"; @import "groups"; -@import "lists"; - -@import "vendor/forms"; -@import "vendor/animations"; +@import "layout"; *, *:before, *:after { box-sizing: border-box; @@ -18,16 +14,10 @@ html, html body, .wrapper { } body { - font-family: 'Courier new', serif; + font-family: monospace; font-weight: normal; } -.pt-20 { padding-top: 20px; } -.pb-20 { padding-bottom: 20px; } -.mb-20 { margin-bottom: 20px; } -.mb-50 { margin-bottom: 50px; } -.w-100 { width: 100%; } - .wrapper { color: $secondary-color; diff --git a/twenty-frontend/src/js/components/Group.tsx b/twenty-frontend/src/js/components/Group.tsx index babf06a..f0c92d2 100644 --- a/twenty-frontend/src/js/components/Group.tsx +++ b/twenty-frontend/src/js/components/Group.tsx @@ -31,8 +31,8 @@ export function Group({ groupName, getItems }: Props) { const editHref = `/tasks/edit#id=${task.id}`; return (