Skip to content

Commit 5c25f9f

Browse files
gabrielsrsgabrielsrs
committed
style: manage accesses templates
1 parent 122dff5 commit 5c25f9f

5 files changed

Lines changed: 779 additions & 1 deletion

File tree

‎static/css/access.css‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
.manager {
2+
width: 920px;
3+
justify-self: center;
4+
}
5+
6+
/* Header */
7+
.header-row {
8+
flex-direction: column;
9+
padding: 0;
10+
gap: 1rem;
11+
}
12+
13+
.create-new-access {
14+
display: flex;
15+
padding: 0.5rem;
16+
}
17+
18+
.header-items {
19+
display: flex;
20+
align-items: center;
21+
justify-content: space-between;
22+
width: 100%;
23+
}
24+
25+
/* Nav */
26+
.header-nav {
27+
display: flex;
28+
align-items: center;
29+
gap: .5rem;
30+
margin: 0;
31+
list-style-type: none;
32+
color: #333333a6;
33+
padding: 0.5rem 0;
34+
}
35+
36+
.header-nav > li {
37+
display: flex;
38+
}
39+
40+
.header-nav li:hover {
41+
transform: scale(1.2);
42+
}
43+
44+
.header-nav > li > a {
45+
text-decoration: none;
46+
color: inherit;
47+
font-size: 1rem;
48+
padding: .2rem .5rem;
49+
cursor: pointer;
50+
}
51+
52+
.access-selected {
53+
color: #4CAF50;
54+
}
55+
56+
/* Create new record */
57+
58+
/* Toggle new record */
59+
.new-access-content {
60+
display: none;
61+
}
62+
63+
.new-access-active {
64+
display: flex;
65+
}
66+
67+
.new-access {
68+
display: flex;
69+
align-items: center;
70+
justify-content: space-between;
71+
width: 100%;
72+
padding: .5rem;
73+
margin-bottom: .5rem;
74+
}
75+
76+
.input-fields {
77+
display: flex;
78+
}
79+
80+
.input-fields > div,
81+
.select-content {
82+
display: flex;
83+
flex-direction: column;
84+
position: relative;
85+
margin-right: 20px;
86+
}
87+
88+
.input-fields > div label {
89+
font-size: 1rem;
90+
margin-bottom: .2rem;
91+
font-weight: 600;
92+
}
93+
94+
#password-content {
95+
display: flex;
96+
padding: .2rem 0;
97+
height: 16px;
98+
gap: .2rem;
99+
}
100+
101+
#allow-generate-password + label {
102+
font-size: .8rem;
103+
margin: 0;
104+
line-height: 1.1rem;
105+
}
106+
107+
#allow-generate-password {
108+
align-self: center;
109+
height: 15px;
110+
width: 15px;
111+
margin: 0;
112+
}
113+
114+
#display-selected-roles > span {
115+
padding: .2rem;
116+
font-size: .8rem;
117+
}
118+
119+
.relative-select,
120+
#display-selected-roles {
121+
position: relative;
122+
}
123+
124+
.input-fields > div > input,
125+
select,
126+
#display-selected-roles {
127+
min-height: 20px;
128+
min-width: 160px;
129+
background: #f4f4f9;
130+
outline: none;
131+
border: 1px solid #aaa;
132+
border-radius: 4px;
133+
padding: .3rem;
134+
}
135+
136+
#access-options {
137+
min-height: 20px;
138+
box-sizing: content-box;
139+
background-color: #f4f4f9;
140+
overflow: auto;
141+
width: 100%;
142+
position: absolute;
143+
}
144+
145+
.input-fields input::placeholder,
146+
#display-selected-roles {
147+
line-height: 1.25rem;
148+
font-size: .9rem;
149+
font-weight: 600;
150+
color: #aaaaaaf8;
151+
}
152+
153+
.input-fields select,
154+
select > option {
155+
font-weight: 600;
156+
cursor: pointer;
157+
color: #333;
158+
}
159+
160+
.select-content select:focus {
161+
z-index: 1;
162+
}
163+
164+
/* Toggle multi select */
165+
.access-options-inactive {
166+
display: none;
167+
height: 150px;
168+
}
169+
170+
.access-options-active {
171+
display: flex;
172+
}
173+
174+
.drop-select {
175+
position: absolute;
176+
right: -15px;
177+
bottom: 6px;
178+
cursor: pointer;
179+
user-select: none;
180+
}
181+
182+
.actions {
183+
align-items: center;
184+
}
185+
186+
.create {
187+
height: 32px;
188+
}
189+
190+
.overflow-multi-role {
191+
overflow-x: auto;
192+
max-width: 400px;
193+
}
194+
195+
.multi-role {
196+
padding: .4rem;
197+
background-color: #ccc;
198+
border-radius: 4px;
199+
margin-right: 2px;
200+
color: #333;
201+
font-weight: 100;
202+
}
203+
204+
/* Style to scroll */
205+
::-webkit-scrollbar {
206+
width: 5px;
207+
height: 5px;
208+
}
209+
210+
#display-selected-roles::-webkit-scrollbar {
211+
height: 3px;
212+
}
213+
214+
::-webkit-scrollbar-thumb {
215+
background: #aaa;
216+
border-radius: 10px;
217+
}

‎static/css/nav.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,20 @@ nav {
4949
.nav-links {
5050
display: flex;
5151
flex: 1;
52+
margin: 0;
53+
padding: 0;
54+
list-style-type: none;
55+
color: #333333a6;
56+
}
57+
58+
.nav-links a {
59+
text-decoration: none;
60+
padding: .5rem;
61+
color: inherit;
62+
}
63+
64+
.nav-links li:hover {
65+
transform: scale(1.03);
5266
}
5367

5468
.nav-logout {

0 commit comments

Comments
 (0)