diff options
Diffstat (limited to 'client/src/sass/primeng-custom.scss')
-rw-r--r-- | client/src/sass/primeng-custom.scss | 68 |
1 files changed, 54 insertions, 14 deletions
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index 0568de4e2..1d6eebcfa 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss | |||
@@ -2,7 +2,7 @@ | |||
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | @import '~primeng/resources/primeng.css'; | 4 | @import '~primeng/resources/primeng.css'; |
5 | @import '~primeng/resources/themes/bootstrap/theme.css'; | 5 | @import '~primeng/resources/themes/nova-light/theme.css'; |
6 | 6 | ||
7 | @mixin glyphicon-light { | 7 | @mixin glyphicon-light { |
8 | font-family: 'Glyphicons Halflings'; | 8 | font-family: 'Glyphicons Halflings'; |
@@ -12,10 +12,9 @@ | |||
12 | 12 | ||
13 | // data table customizations | 13 | // data table customizations |
14 | p-table { | 14 | p-table { |
15 | font-size: 15px !important; | ||
16 | |||
17 | .ui-table-caption { | 15 | .ui-table-caption { |
18 | border: none; | 16 | border: none !important; |
17 | background-color: #fff !important; | ||
19 | 18 | ||
20 | .caption { | 19 | .caption { |
21 | height: 40px; | 20 | height: 40px; |
@@ -24,6 +23,17 @@ p-table { | |||
24 | } | 23 | } |
25 | } | 24 | } |
26 | 25 | ||
26 | th { | ||
27 | background-color: #fff !important; | ||
28 | outline: 0; | ||
29 | } | ||
30 | |||
31 | td, th { | ||
32 | font-family: $main-fonts; | ||
33 | font-size: 15px !important; | ||
34 | color: var(--mainForegroundColor) !important; | ||
35 | } | ||
36 | |||
27 | td { | 37 | td { |
28 | padding-left: 15px !important; | 38 | padding-left: 15px !important; |
29 | 39 | ||
@@ -35,12 +45,16 @@ p-table { | |||
35 | } | 45 | } |
36 | 46 | ||
37 | tr { | 47 | tr { |
48 | outline: 0; | ||
38 | background-color: var(--mainBackgroundColor) !important; | 49 | background-color: var(--mainBackgroundColor) !important; |
39 | height: 46px; | 50 | height: 46px; |
40 | 51 | ||
41 | &.ui-state-highlight { | 52 | &.ui-state-highlight { |
42 | background-color:var(--submenuColor) !important; | 53 | background-color: var(--submenuColor) !important; |
43 | color:var(--mainForegroundColor) !important; | 54 | |
55 | td, td > a { | ||
56 | color: var(--mainForegroundColor) !important; | ||
57 | } | ||
44 | } | 58 | } |
45 | } | 59 | } |
46 | 60 | ||
@@ -56,6 +70,10 @@ p-table { | |||
56 | } | 70 | } |
57 | } | 71 | } |
58 | 72 | ||
73 | td { | ||
74 | border: none !important; | ||
75 | } | ||
76 | |||
59 | &:first-child td { | 77 | &:first-child td { |
60 | border-top: none !important; | 78 | border-top: none !important; |
61 | } | 79 | } |
@@ -93,14 +111,14 @@ p-table { | |||
93 | } | 111 | } |
94 | 112 | ||
95 | &.ui-state-highlight { | 113 | &.ui-state-highlight { |
96 | background-color:var(--submenuColor) !important; | 114 | background-color: var(--submenuColor) !important; |
97 | 115 | ||
98 | .pi { | 116 | .pi { |
99 | @extend .glyphicon; | 117 | @extend .glyphicon; |
100 | 118 | ||
101 | color: #000; | 119 | color: #000 !important; |
102 | font-size: 11px; | 120 | font-size: 11px !important; |
103 | top: 0; | 121 | top: 0 !important; |
104 | 122 | ||
105 | &.pi-sort-up { | 123 | &.pi-sort-up { |
106 | @extend .glyphicon-triangle-top; | 124 | @extend .glyphicon-triangle-top; |
@@ -177,11 +195,12 @@ p-table { | |||
177 | a { | 195 | a { |
178 | color: #000 !important; | 196 | color: #000 !important; |
179 | font-weight: $font-semibold !important; | 197 | font-weight: $font-semibold !important; |
180 | margin: 0 10px !important; | 198 | margin: 0 5px !important; |
181 | outline: 0 !important; | 199 | outline: 0 !important; |
182 | border-radius: 3px !important; | 200 | border-radius: 3px !important; |
183 | padding: 5px 2px !important; | 201 | padding: 5px 2px !important; |
184 | height: auto !important; | 202 | height: auto !important; |
203 | line-height: initial !important; | ||
185 | 204 | ||
186 | &.ui-state-active { | 205 | &.ui-state-active { |
187 | &, &:hover, &:active, &:focus { | 206 | &, &:hover, &:active, &:focus { |
@@ -210,11 +229,23 @@ p-calendar .ui-datepicker { | |||
210 | .ui-datepicker-next { | 229 | .ui-datepicker-next { |
211 | @extend .glyphicon-chevron-right; | 230 | @extend .glyphicon-chevron-right; |
212 | @include glyphicon-light; | 231 | @include glyphicon-light; |
232 | |||
233 | text-align: right; | ||
234 | |||
235 | .pi.pi-chevron-right { | ||
236 | display: none !important; | ||
237 | } | ||
213 | } | 238 | } |
214 | 239 | ||
215 | .ui-datepicker-prev { | 240 | .ui-datepicker-prev { |
216 | @extend .glyphicon-chevron-left; | 241 | @extend .glyphicon-chevron-left; |
217 | @include glyphicon-light; | 242 | @include glyphicon-light; |
243 | |||
244 | text-align: left; | ||
245 | |||
246 | .pi.pi-chevron-left { | ||
247 | display: none !important; | ||
248 | } | ||
218 | } | 249 | } |
219 | } | 250 | } |
220 | 251 | ||
@@ -232,6 +263,7 @@ p-calendar .ui-datepicker { | |||
232 | } | 263 | } |
233 | } | 264 | } |
234 | 265 | ||
266 | |||
235 | .ui-chkbox-box { | 267 | .ui-chkbox-box { |
236 | &.ui-state-active { | 268 | &.ui-state-active { |
237 | border-color: var(--mainColor) !important; | 269 | border-color: var(--mainColor) !important; |
@@ -240,13 +272,15 @@ p-calendar .ui-datepicker { | |||
240 | 272 | ||
241 | .ui-chkbox-icon { | 273 | .ui-chkbox-icon { |
242 | position: relative; | 274 | position: relative; |
275 | overflow: visible !important; | ||
243 | 276 | ||
244 | &:after { | 277 | &:after { |
245 | content: ''; | 278 | content: ''; |
246 | position: absolute; | 279 | position: absolute; |
247 | left: 5px; | 280 | top: 1px; |
281 | left: 7px; | ||
248 | width: 5px; | 282 | width: 5px; |
249 | height: 12px; | 283 | height: 13px; |
250 | opacity: 0; | 284 | opacity: 0; |
251 | transform: rotate(45deg) scale(0); | 285 | transform: rotate(45deg) scale(0); |
252 | border-right: 2px solid var(--mainBackgroundColor); | 286 | border-right: 2px solid var(--mainBackgroundColor); |
@@ -258,4 +292,10 @@ p-calendar .ui-datepicker { | |||
258 | transform: rotate(45deg) scale(1); | 292 | transform: rotate(45deg) scale(1); |
259 | } | 293 | } |
260 | } | 294 | } |
261 | } \ No newline at end of file | 295 | } |
296 | |||
297 | p-inputswitch { | ||
298 | .ui-inputswitch-checked .ui-inputswitch-slider { | ||
299 | background-color: var(--mainColor) !important; | ||
300 | } | ||
301 | } | ||