Use SCSS for jquery-ui-fixes

[juliushaertl]

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

[juliushaertl]

@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: 4px 8px;
	width: auto;
	border-radius: 3px;
	border: none;
	.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default {
	border: 1px solid transparent;
	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") center center no-repeat;
	}
	&.ui-icon-circle-triangle-w {
	background: url("../img/actions/arrow-left.svg") center center no-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-today a:not(.ui-state-hover) {
	background-color: nc-lighten($color-main-text, 86%);
	}
	&.ui-datepicker-current-day a.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 :)