Browse Source

Upload files to 'public_html/style'

david.ortiz11 5 years ago
parent
commit
7d3b760776

+ 57
- 0
public_html/style/hazards.css View File

@@ -0,0 +1,57 @@
1
+/*  Authors         :   Carlos C. Corrada-Bravo
2
+                        David J. Ortiz-Rivera
3
+
4
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
5
+    Project         :   OPASO Material Registry   
6
+    File            :   hazards.css
7
+    Description     :   Styling for hazards page */
8
+
9
+.header-wrapper{
10
+	padding-bottom: 20px;
11
+}
12
+
13
+.ghs-codes{
14
+	display: none;
15
+}
16
+
17
+.ghs{
18
+	padding: 7.5px;
19
+	cursor: pointer;
20
+	border-radius: 2.5px;
21
+	color: #202124;
22
+	border: 1px solid rgb(218,220,224);
23
+}
24
+
25
+.ghs-wrapper{
26
+	float: left;
27
+	padding: 7.5px;
28
+	padding-left: 0px;
29
+	display: inline-block;
30
+}
31
+
32
+.description{
33
+	color: #202124;
34
+}
35
+
36
+.hazard{
37
+	display: none;
38
+	min-height: 100%;
39
+}
40
+
41
+.download{
42
+    margin-right: 0px;
43
+}
44
+
45
+td[value=lab_room]{
46
+	text-align: left;
47
+}
48
+
49
+@media screen and (max-width: 991px){
50
+	.ghs-wrapper{
51
+		padding-top: 0;
52
+	}
53
+
54
+	.download{
55
+		margin-bottom: 0px;
56
+	}
57
+}

+ 264
- 0
public_html/style/manage.css View File

@@ -0,0 +1,264 @@
1
+/*  Authors         :   Carlos C. Corrada-Bravo
2
+                        David J. Ortiz-Rivera
3
+
4
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
5
+    Project         :   OPASO Material Registry   
6
+    File            :   manage.css
7
+    Description     :   Styling for manage pages */
8
+
9
+.manage-labs{
10
+	width: 100%;
11
+}
12
+
13
+.add-lab-warning{
14
+	color: #202124;
15
+	padding: 7.5px 0px;
16
+	border-radius: 2.5px;
17
+	display: inline-block;
18
+}
19
+
20
+td[value=access_level]{
21
+	text-transform: capitalize;
22
+}
23
+
24
+td[value=person_name],th[value=person]{
25
+	text-align: left;
26
+	padding-left: 15px !important;
27
+}
28
+
29
+td[value=lab_name],td[value=building],td[value=lab_room]{
30
+	text-align: left;
31
+  	padding-left: 15px !important;
32
+}
33
+
34
+.form-header{
35
+	float: left;
36
+	color: #202124;
37
+	display: inline-block;
38
+	text-transform: capitalize;
39
+}
40
+.close-icon{
41
+	float: right;
42
+	color: darkgray;
43
+	cursor: pointer;
44
+	display: inline-block;
45
+}
46
+
47
+.selects{
48
+	width: 100%;
49
+	display: inline-block;
50
+}
51
+
52
+.form{
53
+	width: 100%;
54
+	text-align: center;	
55
+
56
+}
57
+
58
+.add-form-wrapper{
59
+	border-radius: 2.5px;
60
+	background-color: #fff;
61
+	border: 1px solid rgb(218,220,224);
62
+}
63
+
64
+.add-form-body{
65
+	width: 100%;
66
+	overflow-y: auto;
67
+}
68
+
69
+.add-form-body-wrapper{
70
+	width: 100%;
71
+	text-align: left;
72
+	padding: 7.5px 15px;
73
+}
74
+
75
+.form-wrapper{
76
+	width: 500px;
77
+	margin: auto;
78
+	z-index: 9999;
79
+	text-align: left;
80
+	position: relative;
81
+	border-radius: 2.5px;
82
+	display: inline-block;
83
+    background-color: #fff;
84
+	border: 1px solid rgb(218,220,224);
85
+}
86
+
87
+.form-body{
88
+	text-align: left;
89
+}
90
+
91
+.main-form{
92
+	top: 0%;
93
+	opacity: 0;
94
+	width: 100%;
95
+	height: 100%;
96
+	text-align: center;
97
+	padding: 105px 0;
98
+	will-change: transform,opacity;
99
+	transform: translateY(-100%);
100
+  	will-change: transform, opacity;
101
+  	transition: transform 0.5s,opacity 0.5s ease-in-out;
102
+}
103
+
104
+.form-shader{
105
+	opacity: 0;
106
+	z-index: -1;
107
+	width: 100%;
108
+	height: 100%;
109
+	overflow: hidden;
110
+	text-align: center;
111
+	position: absolute;
112
+	background-color: rgb(0,0,0,0.85);
113
+	will-change: z-index,opacity;
114
+	transition: z-index 0.25s, opacity 0.25s ease-in-out;
115
+}
116
+
117
+.t-form{
118
+	display: none;
119
+}
120
+
121
+.c-form{
122
+	display: block !important;
123
+}
124
+
125
+.form-actions{
126
+	width: 100%;
127
+	padding: 15px;
128
+	text-align: right;
129
+	display: inline-block;
130
+}
131
+
132
+.add-form-actions{
133
+	text-align: right;
134
+	padding-bottom: 7.5px;
135
+}
136
+
137
+.add-form{
138
+	top: 0%;
139
+  	opacity: 0;
140
+	height: 100%;
141
+	width: 100%;
142
+	padding: 105px 0;
143
+	text-align: center;
144
+	position: absolute;
145
+	transform: translateY(-100%);
146
+	will-change: transform,opacity;
147
+  	transition: transform 0.5s,opacity 0.5s ease-in-out;
148
+}
149
+
150
+.add-form-header-wrapper{
151
+	width: 100%;
152
+	color: #202124;
153
+	display: inline-block;
154
+	padding: 15px 15px 0px;
155
+	border-bottom: 1px solid rgb(218,220,224);
156
+}
157
+
158
+.form-header-wrapper{
159
+	width: 100%;
160
+	display: inline-block;
161
+	padding: 10px 15px 0px;
162
+	border-bottom: 1px solid rgb(218,220,224);
163
+}
164
+
165
+.add-form-wrapper{
166
+	width: 432px;
167
+	display: inline-block;
168
+	border-radius: 2.5px;
169
+	border: 1px solid rgb(218,220,224);
170
+}
171
+
172
+.select-wrapper{
173
+	width: 100%;
174
+	padding: 7.5px 15px;
175
+	display: inline-block;
176
+	border-top: 1px solid rgb(218,220,224);
177
+}
178
+
179
+.li-wrapper label{
180
+	color: #202124;
181
+}
182
+
183
+.select-label{
184
+	width: 100%;
185
+	color: #202124;
186
+	display: inline-block;
187
+}
188
+
189
+.person{
190
+	padding: 7.5px 15px;
191
+}
192
+
193
+.action{
194
+	border: none !important;
195
+	background-color: transparent;
196
+}
197
+
198
+.add-personnel-icon{
199
+	font-size: 13.25px;
200
+	transform: translateY(25%);
201
+}
202
+
203
+.add-text{
204
+	float: right;
205
+	transform: translateY(1.25px);
206
+	margin-left: 7.5px;
207
+}
208
+
209
+.float-right{
210
+	float: right;
211
+	display: inline-block;
212
+}
213
+
214
+.edit-lab{
215
+	width: 550px;
216
+}
217
+
218
+.edit-lab-body{
219
+	padding: 7.5px 15px;
220
+}
221
+
222
+#lab_name{
223
+	width: 100%;
224
+}
225
+
226
+#add{
227
+	float: left;
228
+	color: #202124;
229
+	font-size: 15px;
230
+	height: 31.25px;
231
+	padding: 2.5px 7.5px;
232
+	display: inline-flex;
233
+	border-radius: 2.5px !important;
234
+	border: 1px solid rgb(218,220,224) !important;
235
+}
236
+
237
+#add:hover{
238
+	color: #202124;
239
+}
240
+
241
+.fade-in{
242
+    opacity: 1;
243
+    z-index: 9999;
244
+    transition: opacity 0.25s ease-in-out;
245
+}
246
+
247
+.slide-down{
248
+    opacity: 1;
249
+    z-index: 9999;
250
+    transform: translateY(0%);
251
+    transition: transform 0.5s,opacity 0.5s ease-in-out;
252
+}
253
+
254
+
255
+@media screen and (max-width: 991px){
256
+	.add-form,.main-form{
257
+		padding: 15px;
258
+		overflow-y: auto;
259
+	}
260
+
261
+	.add-form,.add-form-wrapper,.main-form,.form-wrapper{
262
+		width: 100%;
263
+	}
264
+}

+ 115
- 0
public_html/style/materials.css View File

@@ -0,0 +1,115 @@
1
+/*  Authors         :   Carlos C. Corrada-Bravo
2
+                        David J. Ortiz-Rivera
3
+
4
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
5
+    Project         :   OPASO Material Registry   
6
+    File            :   materials.css
7
+    Description     :   Styling for materials page */
8
+
9
+.download{
10
+	margin-right: 0px;
11
+}
12
+
13
+td[value=mat_name]{
14
+	cursor: pointer;
15
+}
16
+
17
+td[value=cas]{
18
+	max-width: 250px;
19
+}
20
+
21
+.material-data-icon-wrapper{
22
+	width: 100%;
23
+	cursor: pointer;
24
+	text-align: right;
25
+	padding: 15px 15px 0px;
26
+}
27
+
28
+.material-data-shader{
29
+	top: 0;
30
+	left: 0;
31
+	z-index: 5;
32
+	width: 100%;
33
+	height: 100%;
34
+	position: absolute;
35
+	will-change: transform;
36
+	transform: translateX(-100%);
37
+	background-color: rgba(0,0,0,0);
38
+    transition: all 0.25s ease-in-out;
39
+}
40
+
41
+.material-data-wrapper{
42
+	left: 0;
43
+	top: 0px;
44
+	width: 300px;
45
+	height: 100%;
46
+	background-color: #fff;
47
+	border-right: 1px solid rgb(52,53,54);
48
+}
49
+
50
+.material-data-row,.material-name-wrapper{
51
+	width: 100%;
52
+	padding: 5px 15px;
53
+	display: inline-block;
54
+	word-break: break-all;
55
+	border-bottom: 0.5px solid rgb(52,53,54);
56
+}
57
+.material-data-row{
58
+	padding-left: 30px;
59
+}
60
+
61
+.material-name-wrapper{
62
+	border-bottom: 1px solid rgb(52,53,54);
63
+}
64
+
65
+.material-data-header{
66
+	margin-bottom: 7.5px;
67
+}
68
+
69
+.material-data-sub-header{
70
+	width: initial;
71
+	color: #060606;
72
+}
73
+
74
+.material-data-text-wrapper{
75
+	width: 100%;
76
+	padding-left: 15px;
77
+	display: inline-block;
78
+}
79
+
80
+.material-data-text{
81
+	float: right;
82
+	color: #060606;
83
+}
84
+
85
+.material-name{
86
+	float: left;
87
+	color: #060606;
88
+	width: initial;
89
+	display: inline-block;
90
+}
91
+
92
+.hide-material-data-icon{
93
+	color: darkgray;
94
+}
95
+
96
+.slide-right{
97
+    transform: translateX(0%);
98
+    transition: transform 0.25s ease-in-out;
99
+}
100
+
101
+@media screen and (max-width: 991px){
102
+	.download{
103
+		margin-bottom: 0px;
104
+	}
105
+
106
+	.material-data-shader{
107
+		z-index: 9999;
108
+	}
109
+
110
+	.material-data-wrapper{
111
+		top: 0px;
112
+		width: 90%;
113
+		height: 100%;
114
+	}
115
+}

+ 133
- 0
public_html/style/menu.css View File

@@ -0,0 +1,133 @@
1
+/*  Authors         :   Carlos C. Corrada-Bravo
2
+                        David J. Ortiz-Rivera
3
+
4
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
5
+    Project         :   OPASO Material Registry   
6
+    File            :   menu.css
7
+    Description     :   Styling for menu */
8
+
9
+.arg-link-wrapper{
10
+	display: none;
11
+}
12
+
13
+.sub-menu{
14
+	width: 100%;
15
+	padding: 10px 0px;
16
+	display: inline-block;
17
+	border-bottom: 0.5px solid rgb(52,53,54);
18
+}
19
+
20
+.sub-menu-wrapper{
21
+	float: left;
22
+	width: 50%;
23
+	height: 100%;
24
+	display: inline-block;
25
+}
26
+
27
+.sub-menu-wrapper:first-child{
28
+	padding-right: 45px;
29
+}
30
+
31
+.sub-menu-wrapper:last-child{
32
+	padding-left: 15px;
33
+}
34
+
35
+.sub-menu:first-child{
36
+	padding-top: 0;
37
+}
38
+
39
+.sub-menu:last-child{
40
+	border-bottom: none;
41
+}
42
+
43
+.sub-header{
44
+	width: 100%;
45
+	color: #060606;
46
+    font-weight: 700;
47
+	margin-bottom: 15px;
48
+	display: inline-block;
49
+	text-transform: capitalize;
50
+}
51
+
52
+.menu-link,.lab-room{
53
+	float: left;
54
+	cursor: pointer;
55
+	font-size: 13.25px;
56
+	display: inline-block;
57
+	text-decoration: none;
58
+	color: #202124;
59
+}
60
+
61
+.lab-row{
62
+	margin-top: 5px;
63
+}
64
+
65
+.lab-link{
66
+	width: 100%;
67
+	height: 100%;
68
+	padding: 5px 10px;
69
+	border-radius: 2.5px;
70
+	display: inline-block;
71
+	background-color: #fff;
72
+	border: 1px solid rgb(218,220,224);
73
+}
74
+
75
+.laboratory-wrapper{
76
+	float: left;
77
+	padding: 0px 5px;
78
+	display: inline-block;
79
+}
80
+
81
+.laboratory-wrapper:hover *{
82
+	color: #060606;
83
+}
84
+
85
+.menu-link{
86
+	width: 100%;
87
+}
88
+
89
+.lab-link:hover,.menu-link:hover{
90
+	color: #202124;
91
+	cursor: pointer;
92
+	text-decoration: none;
93
+}
94
+
95
+.menu-link-wrapper{
96
+	display: flex;
97
+	padding: 2.5px 5px;
98
+}
99
+
100
+.menu-link-icon{
101
+	float: right;
102
+	font-size: 15px;
103
+	transform: translate(-20%,20%);
104
+}
105
+
106
+.material-icons{
107
+	font-size: 20px;
108
+	transform: translateY(0%);
109
+}
110
+
111
+.fa-user-alt{
112
+	transform: translateX(-10%) !important; 
113
+}
114
+
115
+.privileges-indicator{
116
+	float: right;
117
+	font-size: 13.25px;
118
+	color: #202124;
119
+	display: inline-block;
120
+	text-transform: capitalize;
121
+}
122
+
123
+@media screen and (max-width: 991px){
124
+	.sub-menu-wrapper{
125
+		width: 100%;
126
+		padding: 0px !important;
127
+	}
128
+
129
+	.sub-menu-wrapper:last-child{
130
+		padding-top: 7.5px !important;
131
+		border-top: 0.5px solid rgb(52,53,54);
132
+	}
133
+}

+ 138
- 0
public_html/style/offered.css View File

@@ -0,0 +1,138 @@
1
+/*  Authors         :   Carlos C. Corrada-Bravo
2
+                        David J. Ortiz-Rivera
3
+
4
+    Organization    :   Centro de Desarrollo y Consultoria Computacional
5
+    Project         :   OPASO Material Registry   
6
+    File            :   offered.css
7
+    Description     :   Styling for offered page */
8
+
9
+.request{
10
+	cursor: pointer;
11
+}
12
+
13
+.request-icon{
14
+	font-size: 20px;
15
+}
16
+
17
+.form-message{
18
+    color: #202124;
19
+	margin-bottom: 15px;
20
+}
21
+
22
+.select-wrapper{
23
+    width: 100%;
24
+    margin-top: 15px;
25
+    display: inline-block;
26
+}
27
+
28
+.labs{
29
+	margin-left: 7.5px;
30
+}
31
+
32
+.form-shader{
33
+	opacity: 0;
34
+	z-index: -1;
35
+	width: 100%;
36
+	height: 100%;
37
+	overflow: hidden;
38
+	text-align: center;
39
+	position: absolute;
40
+	will-change: z-index,opacity;
41
+	background-color: rgb(0,0,0,0.85);
42
+	transition: z-index 0.25s,opacity 0.25s ease-in-out;
43
+}
44
+
45
+.form-actions{
46
+	width: 100%;
47
+	padding: 15px;
48
+	text-align: right;
49
+	display: inline-block;
50
+}
51
+
52
+.form-header-wrapper{
53
+	width: 100%;
54
+	display: inline-block;
55
+	padding: 10px 15px 0px;
56
+	border-bottom: 1px solid rgb(218,220,224);
57
+}
58
+
59
+.form-wrapper{
60
+	width: 375px;
61
+	z-index: 9999;
62
+	margin: auto;
63
+	text-align: left;
64
+	position: relative;
65
+	border-radius: 2.5px;
66
+	display: inline-block;
67
+	background-color: #fff;
68
+	border: 1px solid rgb(218,220,224);
69
+}
70
+
71
+.select-label{
72
+    color: #202124;
73
+}
74
+
75
+.form-body{
76
+	padding: 15px;
77
+	text-align: left;
78
+}
79
+
80
+.lab-form{
81
+	text-align: center;
82
+	height: 100%;
83
+	width: 100%;
84
+	padding: 100px 0;
85
+	will-change: opacity;
86
+	opacity: 0;
87
+	transform: translateY(-100%);
88
+	top: 0%;
89
+  	will-change: transform, opacity;
90
+	transition: transform 0.5s,opacity 0.5s ease-in-out;
91
+}
92
+
93
+.form-header{
94
+	float: left;
95
+    color: #202124;
96
+	display: inline-block;
97
+	text-transform: capitalize;
98
+}
99
+
100
+.close-icon{
101
+	float: right;
102
+	cursor: pointer;
103
+	color: darkgray;
104
+	display: inline-block;
105
+}
106
+
107
+.selects{
108
+	width: 100%;
109
+	display: inline-block;
110
+}
111
+
112
+.form{
113
+	width: 100%;
114
+	text-align: center;
115
+}
116
+
117
+.fade-in{
118
+    opacity: 1;
119
+    z-index: 9999;
120
+    transition: opacity 0.25s ease-in-out;
121
+}
122
+
123
+.slide-down{
124
+    opacity: 1;
125
+    z-index: 9999;
126
+    transform: translateY(0%);
127
+    transition: transform 0.5s,opacity 0.5s ease-in-out;
128
+}
129
+
130
+@media screen and (max-width: 991px){
131
+	.lab-form{
132
+		padding: 15px;
133
+	}
134
+
135
+	.form-wrapper{
136
+		width: 100%;
137
+	}
138
+}