Skip to content

Commit fadf218

Browse files
Arpan-KreetiArp-G
Arpan-Kreeti
authored and
Arp-G
committed
modularize css
1 parent f69da9e commit fadf218

File tree

8 files changed

+291
-294
lines changed

8 files changed

+291
-294
lines changed

‎apps/dashboard/assets/css/app.scss

Lines changed: 0 additions & 258 deletions
Original file line numberDiff line numberDiff line change
@@ -2,264 +2,6 @@
22
@import "./phoenix.css";
33
@import "../node_modules/nprogress/nprogress.css";
44

5-
spinner.loading {
6-
display: none;
7-
text-align: center;
8-
position: relative;
9-
display: flex;
10-
justify-content: center;
11-
align-items: center;
12-
width: 106px;
13-
height: 106px;
14-
}
15-
.spinner.loading:before {
16-
content: "";
17-
height: 120px;
18-
width: 120px;
19-
position: absolute;
20-
top: 0;
21-
left: 0;
22-
border-width: 8px;
23-
border-style: solid;
24-
border-color: #770505 #ccc #ccc;
25-
border-radius: 100%;
26-
animation: rotation .7s infinite linear;
27-
}
28-
@keyframes rotation {
29-
from {
30-
transform: rotate(0deg);
31-
}
32-
to {
33-
transform: rotate(359deg);
34-
}
35-
}
36-
37-
.required-config{
38-
color: red;
39-
font-size: 1em;
40-
}
41-
42-
#spinnerText{
43-
font-size: 2.2em;
44-
font-weight: bolder;
45-
font-variant: small-caps;
46-
padding-top: 35%;
47-
text-align: center;
48-
vertical-align: middle;
49-
}
50-
51-
#error_stage {
52-
font-size: 0.7em;
53-
}
54-
55-
56-
.main-footer {
57-
height: 70px;
58-
background-color: rebeccapurple;
59-
opacity: 0.8;
60-
}
61-
62-
.main-footer .container {
63-
height: 120px;
64-
width: 120px;
65-
position: absolute;
66-
bottom: 5px;
67-
border-radius: 50%;
68-
opacity: 1;
69-
background-image: linear-gradient(red, yellow);
70-
border: 1px solid rgb(168, 159, 159);
71-
box-shadow: 0 2px 5px rgba(201,209,230,.5), 0 7px 20px rgba(201,209,230,.75);
72-
cursor: pointer;
73-
// center item
74-
left: 0;
75-
right: 0;
76-
margin-left: auto;
77-
margin-right: auto;
78-
}
79-
80-
.current-stats{
81-
display: flex;
82-
flex-wrap: wrap;
83-
border-radius: 10px;
84-
width: 90%;
85-
min-height: 150px;
86-
box-shadow: 0 2px 5px rgba(201,209,230,.5), 0 7px 20px rgba(201,209,230,.75);
87-
margin: auto;
88-
margin-bottom: 50px;
89-
margin-top: 20px;
90-
padding: 10px;
91-
font-size: 2em;
92-
}
93-
94-
.current-stats > div {
95-
width: 50%;
96-
}
97-
98-
.finish-check {
99-
color: #cc00ff;
100-
}
101-
102-
.file-list {
103-
margin: auto;
104-
width: 90%;
105-
box-shadow: 0 2px 5px rgba(201,209,230,.5), 0 7px 20px rgba(201,209,230,.75);
106-
}
107-
108-
.file-list-item {
109-
min-height: 100px;
110-
font-size: 1.5em;
111-
}
112-
113-
.file-name, .file-path, .file-size, .row_count, .records_inserted, .status {
114-
display: block;
115-
}
116-
117-
.progress {
118-
height: 25px !important;
119-
}
120-
121-
.progress-percentage{
122-
color: black;
123-
font-size: 2.5em;
124-
font-weight: bold;
125-
}
126-
127-
.stage_pending,
128-
.stage_infer_schema,
129-
.stage_loading_schema,
130-
.stage_insert_data,
131-
.stage_finished {
132-
border-radius: 10px;
133-
border: 1px solid black;
134-
padding: 5px;
135-
font-weight: bold;
136-
}
137-
138-
.stage_pending {
139-
background-color: #FFA07A;
140-
}
141-
142-
.stage_infer_schema {
143-
background-color: #8A2BE2;
144-
color: white;
145-
}
146-
147-
.stage_loading_schema {
148-
background-color: #BDB76B;
149-
}
150-
151-
.stage_insert_data {
152-
background-color: #0000FF;
153-
color: white;
154-
}
155-
156-
.stage_finished {
157-
background-color: #3CB371;
158-
}
159-
160-
.status {
161-
margin-top: 10px;
162-
margin-bottom: 10px;
163-
}
164-
165-
.overall-status, .validation-status {
166-
text-transform: capitalize;
167-
border: 1px solid #FAEBD7;
168-
background-color: #FAEBD7;
169-
border-radius: 15px;
170-
padding: 5px;
171-
font-variant: small-caps;
172-
font-weight: bold;
173-
font-style: italic;
174-
box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
175-
}
176-
177-
.validation-status {
178-
background-color: #3CB371;
179-
}
180-
181-
.error-status {
182-
background-color: rgb(214, 29, 29);
183-
}
184-
185-
.config-page {
186-
background-color: #f8f9fa;
187-
}
188-
189-
.tab-navbar{
190-
font-size: 1.5em;
191-
font-weight: bold;
192-
font-variant: small-caps;
193-
font-style: oblique;
194-
background-color: white;
195-
}
196-
197-
.flex-container {
198-
display: flex;
199-
flex-wrap: wrap;
200-
}
201-
202-
.legend-heading {
203-
align-self: center;
204-
}
205-
206-
.legend{
207-
position: absolute;
208-
flex-direction: column;
209-
margin: 10px;
210-
width: 13%;
211-
border-radius: 6px;
212-
box-shadow: 0 2px 5px rgba(201,209,230,.5), 0 7px 20px rgba(201,209,230,.75);
213-
background-color: #fff;
214-
padding: 1rem;
215-
}
216-
217-
.legend-item{
218-
display: flex;
219-
margin: 10px;
220-
font-size: 1.3 em;
221-
border-radius: 5px;
222-
font-weight: bold;
223-
}
224-
225-
.legend-heading{
226-
font-weight: bold;
227-
font-style: italic;
228-
}
229-
230-
.legend-text-item{
231-
width: 90%;
232-
align-self: flex-start;
233-
display: inline-block;
234-
}
235-
236-
.legend-color-item{
237-
position: absolute;
238-
right: 10px;
239-
width: 20px;
240-
height: 20px;
241-
}
242-
243-
.flex-item {
244-
margin: 20px;
245-
width: 300px;
246-
border-radius: 6px;
247-
box-shadow: 0 2px 5px rgba(201,209,230,.5), 0 7px 20px rgba(201,209,230,.75);
248-
background-color: #fff;
249-
padding: 1rem;
250-
}
251-
252-
.flex-item input{
253-
font-size: 1.7em;
254-
}
255-
.check-box-input{
256-
margin-top: 10px !important;
257-
}
258-
259-
.popup{
260-
cursor: help;
261-
}
262-
2635
/* LiveView specific classes for your customizations */
2646
.invalid-feedback {
2657
color: #a94442;

‎apps/dashboard/assets/css/common.scss

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.csv2sql-logo {
2+
min-width: 100px;
3+
margin: 1rem;
4+
display: inline-block;
5+
}
6+
7+
#main-nav-header{
8+
background-color: #4a4473;
9+
}
10+
11+
.nav-header{
12+
display: inline-block;
13+
color: white;
14+
font-size: 2.5rem;
15+
font-variant: small-caps;
16+
font-weight: bold;
17+
font-style: italic;
18+
position: absolute;
19+
top: 20px;
20+
}
21+
22+
.csv2sql-logo img {
23+
height: 50px;
24+
width: auto;
25+
display: block;
26+
}
27+
28+
.tab-navbar{
29+
font-size: 1.5em;
30+
font-weight: bold;
31+
font-variant: small-caps;
32+
font-style: oblique;
33+
background-color: white;
34+
}

‎apps/dashboard/assets/css/config_live.scss

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
2+
.flex-container {
3+
display: flex;
4+
flex-wrap: wrap;
5+
}
6+
7+
.legend-heading {
8+
align-self: center;
9+
}
10+
11+
.legend{
12+
position: absolute;
13+
flex-direction: column;
14+
margin: 10px;
15+
width: 13%;
16+
border-radius: 6px;
17+
box-shadow: 0 2px 5px rgba(201,209,230,.5), 0 7px 20px rgba(201,209,230,.75);
18+
background-color: #fff;
19+
padding: 1rem;
20+
}
21+
22+
.legend-item{
23+
display: flex;
24+
margin: 10px;
25+
font-size: 1.3 em;
26+
border-radius: 5px;
27+
font-weight: bold;
28+
}
29+
30+
.legend-heading{
31+
font-weight: bold;
32+
font-style: italic;
33+
}
34+
35+
.legend-text-item{
36+
width: 90%;
37+
align-self: flex-start;
38+
display: inline-block;
39+
}
40+
41+
.legend-color-item{
42+
position: absolute;
43+
right: 10px;
44+
width: 20px;
45+
height: 20px;
46+
}
47+
48+
.flex-item {
49+
margin: 20px;
50+
width: 300px;
51+
border-radius: 6px;
52+
box-shadow: 0 2px 5px rgba(201,209,230,.5), 0 7px 20px rgba(201,209,230,.75);
53+
background-color: #fff;
54+
padding: 1rem;
55+
}
56+
57+
.flex-item input{
58+
font-size: 1.7em;
59+
}
60+
.check-box-input{
61+
margin-top: 10px !important;
62+
}
63+
64+
.popup{
65+
cursor: help;
66+
}

0 commit comments

Comments
 (0)