Skip to content

Commit baca428

Browse files
synnestormsynnestorm
authored
Merge pull request #67 from NoroffFEU/55-feature-2-select-user-manage-user
Feature: select user, manage user, modal delete, search
2 parents a454c4f + eeec215 commit baca428

7 files changed

Lines changed: 1120 additions & 0 deletions

File tree

‎css/manage-users.css‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
* {
2+
box-sizing: border-box;
3+
line-height: var(--line-height);
4+
}
5+
6+
body {
7+
text-align: center;
8+
background-color: var(--color-neutral-gray);
9+
color: var(--color-neutral-dark-gray);
10+
}
11+
12+
main {
13+
margin: 2em 0;
14+
}
15+
16+
p {
17+
margin: 2.5em;
18+
font-family: var(--secondary-font);
19+
font-size: var(--paragraph);
20+
font-weight: 400;
21+
}
22+
23+
form {
24+
max-width: 300px;
25+
margin: 0 auto;
26+
padding: 0 1em;
27+
}
28+
29+
.manage-user-form {
30+
display: flex;
31+
flex-direction: column;
32+
gap: 1em;
33+
}
34+
35+
span {
36+
align-self: flex-start;
37+
}
38+
39+
.manage-user-form label {
40+
color: var(--color-neutral-medium-gray);
41+
font-size: var(--small-txt);
42+
display: flex;
43+
flex-direction: column;
44+
gap: 6px;
45+
}
46+
47+
.manage-user-form input {
48+
padding: 8px;
49+
border: 1px solid #cccccc;
50+
border-radius: 6px;
51+
color: var(--color-neutral-dark-gray);
52+
background-color: #fff;
53+
font-family: var(--secondary-font);
54+
}
55+
56+
.manage-user-form input:focus {
57+
border-color: var(--primary-color);
58+
}
59+
60+
.manage-user-actions {
61+
margin: 2.5em 1em;
62+
display: flex;
63+
flex-wrap: wrap;
64+
justify-content: center;
65+
gap: 2em;
66+
}
67+
68+
.btn {
69+
border: none;
70+
color: #fff;
71+
font-weight: 600;
72+
line-height: var(--line-height);
73+
padding: 10px 20px;
74+
}
75+
76+
.btn-primary {
77+
background-color: var(--primary-color);
78+
}
79+
80+
.btn-primary:hover {
81+
background-color: #388E3C;
82+
}
83+
84+
.btn-delete {
85+
background-color: var(--accent-color);
86+
}
87+
88+
.btn-delete:hover {
89+
background-color: #E64A19;
90+
}
91+
92+
/* modal */
93+
94+
.modal[aria-hidden="true"] {
95+
display: none;
96+
}
97+
98+
.modal[aria-hidden="false"] {
99+
display: grid;
100+
}
101+
102+
.modal {
103+
position: fixed;
104+
inset: 0;
105+
z-index: 9999;
106+
place-items: center;
107+
}
108+
109+
.modal-backdrop {
110+
position: absolute;
111+
inset: 0;
112+
background-color: rgba(0, 0, 0, 0.55);
113+
}
114+
115+
.modal-dialog {
116+
position: relative;
117+
width: min(450px, 100%);
118+
background: #fff;
119+
border-radius: 8px;
120+
padding: 1.5em;
121+
}
122+
123+
.modal-close {
124+
position: absolute;
125+
top: 25px;
126+
right: 25px;
127+
border: none;
128+
background: transparent;
129+
cursor: pointer;
130+
padding: 0;
131+
}
132+
133+
.modal-close img {
134+
width: 17px;
135+
height: 17px;
136+
display: block;
137+
}
138+
139+
.modal-close:hover img {
140+
content: url("../public/icons/x-close(1).jpg");
141+
}
142+
143+
.modal-content {
144+
text-align: left;
145+
}
146+
147+
.modal-text {
148+
margin: 0 0 1.5em 0;
149+
}
150+
151+
.delete-btn-modal {
152+
background-color: var(--accent-color);
153+
border: 2px solid var(--accent-color);
154+
color: #ffffff;
155+
}
156+
157+
.delete-btn-modal:hover {
158+
background-color: #E64A19;
159+
border-color: #E64A19;
160+
cursor: pointer;
161+
}
162+
163+
.modal-actions {
164+
display: flex;
165+
justify-content: space-between;
166+
}
167+
168+
.cancel-btn {
169+
color: var(--secondary-color);
170+
border: 2px solid var(--secondary-color);
171+
background: transparent;
172+
}
173+
174+
.cancel-btn:hover {
175+
background-color: #bbdefb;
176+
cursor: pointer;
177+
}
178+
179+
.delete-btn-modal,
180+
.cancel-btn {
181+
border-radius: 6px;
182+
padding: 8px 16px;
183+
letter-spacing: var(--letter-spacing);
184+
}
185+
186+
@media (max-width: 400px) {
187+
188+
.manage-user-actions {
189+
gap: 1em;
190+
}
191+
192+
.modal-dialog {
193+
width: min(380px, 100%);
194+
}
195+
}

0 commit comments

Comments
 (0)