aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/application.scss126
-rw-r--r--client/src/sass/include/_mixins.scss6
-rw-r--r--client/src/sass/primeng-custom.scss174
3 files changed, 184 insertions, 122 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 4006c9128..dae0c52c2 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -6,14 +6,14 @@ $icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
6 6
7@import '_fonts'; 7@import '_fonts';
8 8
9@import '~primeng/resources/themes/bootstrap/theme.css';
10@import '~primeng/resources/primeng.css';
11@import '~video.js/dist/video-js.css'; 9@import '~video.js/dist/video-js.css';
12 10
13$assets-path: '../assets/'; 11$assets-path: '../assets/';
14@import './player/player'; 12@import './player/player';
15@import './loading-bar'; 13@import './loading-bar';
16 14
15@import './primeng-custom';
16
17[hidden] { 17[hidden] {
18 display: none !important; 18 display: none !important;
19} 19}
@@ -142,126 +142,6 @@ label {
142 to { transform: scale(1) rotate(360deg);} 142 to { transform: scale(1) rotate(360deg);}
143} 143}
144 144
145// ngprime data table customizations
146p-table {
147 font-size: 15px !important;
148
149 td {
150 border: 1px solid #E5E5E5 !important;
151 padding-left: 15px !important;
152 overflow: hidden !important;
153 text-overflow: ellipsis !important;
154 white-space: nowrap !important;
155 }
156
157 tr {
158 background-color: #fff !important;
159 height: 46px;
160 }
161
162 .ui-table-tbody {
163 tr {
164 &:hover {
165 background-color: #f0f0f0 !important;
166 }
167
168 &:not(:hover) {
169 .action-cell * {
170 display: none !important;
171 }
172 }
173
174 &:first-child td {
175 border-top: none !important;
176 }
177
178 &:last-child td {
179 border-bottom: none !important;
180 }
181 }
182
183 .expander {
184 cursor: pointer;
185 position: relative;
186 top: 1px;
187 }
188 }
189
190 th {
191 border: none !important;
192 border-bottom: 1px solid #f0f0f0 !important;
193 text-align: left !important;
194 padding: 5px 0 5px 15px !important;
195 font-weight: $font-semibold !important;
196 color: #000 !important;
197
198 &.ui-sortable-column:hover {
199 background-color: #f0f0f0 !important;
200 border: 1px solid #f0f0f0 !important;
201 border-width: 0 1px !important;
202
203 &:first-child {
204 border-width: 0 1px 0 0 !important;
205 }
206 }
207
208 &.ui-state-highlight {
209 background-color: #fff !important;
210
211 .fa {
212 @extend .glyphicon;
213 font-size: 11px;
214
215 &.fa-sort-asc {
216 @extend .glyphicon-triangle-top;
217 }
218
219 &.fa-sort-desc {
220 @extend .glyphicon-triangle-bottom;
221 }
222 }
223 }
224 }
225
226 .action-cell {
227 width: 250px !important;
228 padding: 0 !important;
229 text-align: center;
230
231 my-edit-button + my-delete-button {
232 margin-left: 5px;
233 }
234 }
235
236 p-paginator {
237 .ui-paginator-bottom {
238 position: relative;
239 border: none !important;
240 border: 1px solid #f0f0f0 !important;
241 height: 40px;
242 display: flex;
243 justify-content: center;
244 align-items: center;
245
246 a {
247 color: #000 !important;
248 font-weight: $font-semibold !important;
249 margin-right: 20px !important;
250 outline: 0 !important;
251 border-radius: 3px !important;
252 padding: 5px 2px !important;
253
254 &.ui-state-active {
255 &, &:hover, &:active, &:focus {
256 color: #fff !important;
257 background-color: $orange-color !important;
258 }
259 }
260 }
261 }
262 }
263}
264
265// Bootstrap customizations 145// Bootstrap customizations
266.dropdown-menu { 146.dropdown-menu {
267 border-radius: 3px; 147 border-radius: 3px;
@@ -352,6 +232,8 @@ tabset:not(.bootstrap) {
352} 232}
353 233
354tabset.bootstrap { 234tabset.bootstrap {
235 margin-left: 0;
236
355 .nav-item .nav-link { 237 .nav-item .nav-link {
356 &, & a { 238 &, & a {
357 color: #000; 239 color: #000;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 748c98afa..3904751c2 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -281,6 +281,12 @@
281 cursor: pointer; 281 cursor: pointer;
282 display: inline; 282 display: inline;
283 } 283 }
284
285 &[disabled] + label,
286 &[disabled] + label + label{
287 opacity: 0.5;
288 cursor: default;
289 }
284} 290}
285 291
286 292
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
new file mode 100644
index 000000000..b28b20e0f
--- /dev/null
+++ b/client/src/sass/primeng-custom.scss
@@ -0,0 +1,174 @@
1@import '_variables';
2@import '_mixins';
3
4@import '~primeng/resources/primeng.css';
5@import '~primeng/resources/themes/bootstrap/theme.css';
6
7@mixin glyphicon-light {
8 font-family: 'Glyphicons Halflings';
9 text-decoration: none !important;
10 color: #000 !important;
11}
12
13// data table customizations
14p-table {
15 font-size: 15px !important;
16
17 td {
18 border: 1px solid #E5E5E5 !important;
19 padding-left: 15px !important;
20 overflow: hidden !important;
21 text-overflow: ellipsis !important;
22 white-space: nowrap !important;
23 }
24
25 tr {
26 background-color: #fff !important;
27 height: 46px;
28 }
29
30 .ui-table-tbody {
31 tr {
32 &:hover {
33 background-color: #f0f0f0 !important;
34 }
35
36 &:not(:hover) {
37 .action-cell * {
38 display: none !important;
39 }
40 }
41
42 &:first-child td {
43 border-top: none !important;
44 }
45
46 &:last-child td {
47 border-bottom: none !important;
48 }
49 }
50
51 .expander {
52 cursor: pointer;
53 position: relative;
54 top: 1px;
55 }
56 }
57
58 th {
59 border: none !important;
60 border-bottom: 1px solid #f0f0f0 !important;
61 text-align: left !important;
62 padding: 5px 0 5px 15px !important;
63 font-weight: $font-semibold !important;
64 color: #000 !important;
65
66 &.ui-sortable-column:hover {
67 background-color: #f0f0f0 !important;
68 border: 1px solid #f0f0f0 !important;
69 border-width: 0 1px !important;
70
71 &:first-child {
72 border-width: 0 1px 0 0 !important;
73 }
74 }
75
76 &.ui-state-highlight {
77 background-color: #fff !important;
78
79 .pi {
80 @extend .glyphicon;
81
82 color: #000;
83 font-size: 11px;
84
85 &.pi-sort-up {
86 @extend .glyphicon-triangle-top;
87 }
88
89 &.pi-sort-down {
90 @extend .glyphicon-triangle-bottom;
91 }
92 }
93 }
94 }
95
96 .action-cell {
97 width: 250px !important;
98 padding: 0 !important;
99 text-align: center;
100
101 my-edit-button + my-delete-button {
102 margin-left: 5px;
103 }
104 }
105
106 p-paginator {
107 .ui-paginator-bottom {
108 position: relative;
109 border: 1px solid #f0f0f0 !important;
110 height: 40px;
111 display: flex;
112 justify-content: center;
113 align-items: center;
114
115 .ui-paginator-pages {
116 height: auto !important;
117
118 a {
119 color: #000 !important;
120 font-weight: $font-semibold !important;
121 margin-right: 20px !important;
122 outline: 0 !important;
123 border-radius: 3px !important;
124 padding: 5px 2px !important;
125 height: auto !important;
126
127 &.ui-state-active {
128 &, &:hover, &:active, &:focus {
129 color: #fff !important;
130 background-color: $orange-color !important;
131 }
132 }
133 }
134 }
135 }
136 }
137}
138
139// PrimeNG calendar tweaks
140p-calendar .ui-datepicker {
141 a {
142 @include disable-default-a-behaviour;
143 }
144
145 .ui-datepicker-header {
146
147 .ui-datepicker-year {
148 margin-left: 5px;
149 }
150
151 .ui-datepicker-next {
152 @extend .glyphicon-chevron-right;
153 @include glyphicon-light;
154 }
155
156 .ui-datepicker-prev {
157 @extend .glyphicon-chevron-left;
158 @include glyphicon-light;
159 }
160 }
161
162 .ui-timepicker {
163
164 .pi.pi-chevron-up {
165 @extend .glyphicon-chevron-up;
166 @include glyphicon-light;
167 }
168
169 .pi.pi-chevron-down {
170 @extend .glyphicon-chevron-down;
171 @include glyphicon-light;
172 }
173 }
174} \ No newline at end of file