Skip to content

Commit 979aa40

Browse files
GifteaGiftea
committed
feat: added styling for components
Signed-off-by: Giftea <eleojogiftuhiene@gmail.com>
1 parent b58fa15 commit 979aa40

File tree

2 files changed

+127
-1
lines changed

2 files changed

+127
-1
lines changed

‎src/components/ProjectPage/FilterSortModal.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useState, useEffect } from "react";
22
import * as Dialog from "@radix-ui/react-dialog";
33
import * as ScrollArea from "@radix-ui/react-scroll-area";
4-
import "./index.css";
54
import { ListFilter } from "lucide-react";
65
import search_icon from "../../assets/images/Search.svg";
76
import * as Tabs from "@radix-ui/react-tabs";

‎src/index.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,130 @@
33
@tailwind utilities;
44

55

6+
.DialogOverlay {
7+
position: fixed;
8+
inset: 0;
9+
}
10+
11+
.DialogContent {
12+
box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
13+
position: fixed;
14+
top: 50%;
15+
left: 50%;
16+
transform: translate(-50%, -50%);
17+
max-width: 600px;
18+
padding: 25px;
19+
}
20+
21+
.DialogContent:focus {
22+
outline: none;
23+
}
24+
25+
.DialogTitle {
26+
margin: 0;
27+
font-weight: 500;
28+
font-size: 17px;
29+
}
30+
31+
.DialogDescription {
32+
margin: 10px 0 20px;
33+
font-size: 15px;
34+
line-height: 1.5;
35+
}
36+
37+
.TabsRoot {
38+
display: flex;
39+
flex-direction: column;
40+
width: 300px;
41+
}
42+
43+
.TabsList {
44+
flex-shrink: 0;
45+
display: flex;
46+
}
47+
48+
.TabsTrigger {
49+
font-family: inherit;
50+
background-color: white;
51+
padding: 0 20px;
52+
height: 45px;
53+
flex: 1;
54+
display: flex;
55+
align-items: center;
56+
justify-content: center;
57+
font-size: 15px;
58+
line-height: 1;
59+
user-select: none;
60+
}
61+
.TabsTrigger:first-child {
62+
border-top-left-radius: 6px;
63+
}
64+
.TabsTrigger:last-child {
65+
border-top-right-radius: 6px;
66+
}
67+
.TabsTrigger[data-state='active'] {
68+
box-shadow: inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor;
69+
}
70+
.TabsTrigger:focus {
71+
position: relative;
72+
box-shadow: 0 0 0 2px black;
73+
}
74+
75+
.TabsContent {
76+
flex-grow: 1;
77+
padding: 20px;
78+
background-color: white;
79+
border-bottom-left-radius: 6px;
80+
border-bottom-right-radius: 6px;
81+
outline: none;
82+
}
83+
.TabsContent:focus {
84+
box-shadow: 0 0 0 2px black;
85+
}
86+
87+
.ScrollAreaRoot {
88+
overflow: hidden;
89+
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.038);
90+
--scrollbar-size: 10px;
91+
}
92+
93+
.ScrollAreaViewport {
94+
width: 100%;
95+
height: 100%;
96+
border-radius: inherit;
97+
}
98+
99+
.ScrollAreaScrollbar {
100+
display: flex;
101+
user-select: none;
102+
touch-action: none;
103+
padding: 2px;
104+
}
105+
106+
.ScrollAreaScrollbar[data-orientation='vertical'] {
107+
width: var(--scrollbar-size);
108+
}
109+
.ScrollAreaScrollbar[data-orientation='horizontal'] {
110+
flex-direction: column;
111+
height: var(--scrollbar-size);
112+
}
113+
114+
.ScrollAreaThumb {
115+
flex: 1;
116+
background: #D9D9D9;
117+
border-radius: var(--scrollbar-size);
118+
position: relative;
119+
}
120+
121+
.ScrollAreaThumb::before {
122+
content: '';
123+
position: absolute;
124+
top: 50%;
125+
left: 50%;
126+
transform: translate(-50%, -50%);
127+
width: 100%;
128+
height: 100%;
129+
min-width: 44px;
130+
min-height: 44px;
131+
}
132+

0 commit comments

Comments
 (0)