Use SCSS for jquery-ui-fixes

[juliusknorr]

This PR contains several improvements for our jquery-ui-fixes:

• Move to SCSS so we use theming color values
• Apply tab style from files sidebar to ui-tabs (e.g. in user_ldap)
• Move select style to the jquery-ui-fixes file and make those only apply to ui-autocomplete elements

Fixes#1090#5348#6178

[mention-bot]

@juliushaertl, thanks for your PR! By analyzing the history of the files in this pull request, we identified @skjnldsv, @jancborchardt and @DeepDiver1975 to be potential reviewers.

[skjnldsv]

Very nice!! :)

[MorrisJobke]

Drop it, because it is overwritten and outdated anyways. (same with the statement above)

[MorrisJobke]

Unneeded change

[codecov]

Codecov Report

Merging #6341 into master will decrease coverage by <.01%.
The diff coverage is n/a.

@@ Coverage Diff @@## master #6341 +/- ##
===========================================
- Coverage 53.31% 53.3% -0.01% 
Complexity 22497 22497 ===========================================
Files 1403 1403 Lines 87079 87079 Branches 1327 1327 ===========================================
- Hits 46422 46421 -1 - Misses 40657 40658 +1

Impacted Files	Coverage Δ	Complexity Δ
apps/files_trashbin/lib/Trashbin.php	72.28% <0%> (-0.25%)	136% <0%> (ø)

Fixed.

[MorrisJobke]

If this is primary text, then the background should be the accent color as well. Otherwise it should have the color-main-text. With a dark blue as theme it otherwise shows white background and white text.

[MorrisJobke]

I fixed the font colouring:

@juliushaertl Please have a look if this is okay with you. Thanks

[juliusknorr]

@MorrisJobke Makes sense 👍 Thanks for fixing.

[pixelipo]

Nice work, @juliushaertl

We should also move this stuff over to core/css/jquery-ui-fixes.scss :

server/core/css/styles.scss

Lines 990 to 1072 in ad5a298

	/* ---- jQuery UI datepicker ---- */
	.ui-widget.ui-datepicker {
	margin-top: 10px;
	padding: 4px8px;
	width: auto;
	border-radius: 3px;
	border: none;
	.ui-state-default,
	.ui-widget-content.ui-state-default,
	.ui-widget-header.ui-state-default {
	border: 1pxsolidtransparent;
	background: inherit;
	}
	.ui-widget-header {
	padding: 7px;
	font-size: 13px;
	border: none;
	background-color: $color-main-background;
	color: $color-main-text;
	.ui-datepicker-title {
	line-height: 1;
	font-weight: 300;
	}
	.ui-icon {
	opacity: .5;
	&.ui-icon-circle-triangle-e {
	background: url("../img/actions/arrow-right.svg") centercenterno-repeat;
	}
	&.ui-icon-circle-triangle-w {
	background: url("../img/actions/arrow-left.svg") centercenterno-repeat;
	}
	}
	.ui-state-hover.ui-icon {
	opacity: 1;
	}
	}
	.ui-datepicker-calendar {
	th {
	font-weight: normal;
	color: nc-lighten($color-main-text, 33%);
	opacity: .8;
	}
	tr:hover {
	background-color: inherit;
	}
	td {
	> * {
	border-radius: 50%;
	text-align: center;
	font-weight: normal;
	color: $color-main-text;
	padding: 6px;
	line-height: 12px;
	}
	&.ui-datepicker-todaya:not(.ui-state-hover) {
	background-color: nc-lighten($color-main-text, 86%);
	}
	&.ui-datepicker-current-daya.ui-state-active,
	.ui-state-hover,
	.ui-state-focus {
	background-color: $color-primary;
	color: $color-primary-text;
	font-weight: bold;
	}
	&.ui-datepicker-week-end:not(.ui-state-hover),
	.ui-priority-secondary:not(.ui-state-hover) {
	color: nc-lighten($color-main-text, 33%);
	opacity: .8;
	}
	}
	}
	}
	.ui-datepicker-prev, .ui-datepicker-next {
	border: nc-lighten($color-main-text, 86%);
	background: $color-main-background;
	}

[jancborchardt]

Good stuff @juliushaertl! Thanks a lot :)