aurelia-materialize-bridge/src/colors/md-colors-legacy.html

Aurelia interface to http://materializecss.com/

<template>
	<require from="./color-value-converters"></require>

	<!--
		According to Material color spec (https://www.google.com/design/spec/style/color.html#color-ui-color-application)
		and using Materialize terminology (darken/lighten instead of hue numbers)
		the used palettes here consist of:
		Primary - lighten-1 (400), lighten-2 (300), lighten-3 (200)
		Accent	- lighten-1 (400), lighten-3 (200)

		These should optionally be defined by the user. At the moment, they are
		calculated and even not exact (but close).

		Focused elements are an exception, these use "lighten-0.5" which is
		not specified anywhere.
	-->

	<style>
	.primary {
		background-color: ${primaryColor};
		color: white;
	}

	.primary-text {
		/*background-color: white;*/
		color: ${primaryColor};
	}

	.waves-effect.waves-primary .waves-ripple {
		background-color: ${primaryColor};
	}

	.waves-effect.waves-accent .waves-ripple {
		background-color: ${accentColor};
	}

	.accent {
		background-color: ${accentColor};
		color: white;
	}

	.accent-text {
		/*background-color: white;*/
		color: ${accentColor};
	}

	.error {
		background-color: ${errorColor};
	}

	.error-text {
		color: ${errorColor}
	}

	.success {
		background-color: ${accentColor};
		color: white;
	}

	.success-text {
		color: ${accentColor};
	}

	/* buttons */
	.btn.primary, .btn-flat.primary, .btn-large.primary {
		transition: .2s ease-out;
	}
	.btn.primary:hover, .btn-flat.primary:hover, .btn-large.primary:hover {
		background-color: ${primaryColor | lighten:1};
		transition: .2s ease-out;
	}
	.btn.primary:focus, .btn-flat.primary:focus, .btn-large.primary:focus {
		background-color: ${primaryColor | lighten:0.5};
		transition: .2s ease-out;
	}
	.btn-flat:not(.disabled):hover {
		/*background-color: ${accentColor | lighten:3};*/
		background-color: rgba(50, 50, 50, .15);
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
		border: none;
		box-shadow: none;
		transition: .2s ease-out;
	}
	.btn-flat:focus {
		/*background-color: ${accentColor | lighten:2};*/
		background-color: transparent;
		border: none;
		box-shadow: none;
		transition: .2s ease-out;
	}

	.btn.accent, .btn-flat.accent, .btn-large.accent {
		transition: .2s ease-out;
	}
	.btn.accent:hover, .btn-flat.accent:hover, .btn-large.accent:hover, .btn-floating.accent:hover {
		background-color: ${accentColor | lighten:1};
		transition: .2s ease-out;
	}
	.btn.accent:focus, .btn-flat.accent:focus, .btn-large.accent:focus, .btn-floating.accent:focus {
		background-color: ${accentColor | lighten:0.5};
		transition: .2s ease-out;
	}

	.btn.error, .btn-flat.error, .btn-large.error {
		transition: .2s ease-out;
	}
	.btn.error:hover, .btn-flat.error:hover, .btn-large.error:hover, .btn-floating.error:hover {
		background-color: ${errorColor | lighten:1};
		transition: .2s ease-out;
	}
	.btn.error:focus, .btn-flat.error:focus, .btn-large.error:focus, .btn-floating.error:focus {
		background-color: ${errorColor | lighten:0.5};
		transition: .2s ease-out;
	}
		
	/* checkbox */
	[type="checkbox"]:checked + label:before {
		border-right-color: ${accentColor};
		border-bottom-color: ${accentColor};
	}

	[type="checkbox"].filled-in:checked + label:after {
		border-color: ${accentColor};
		background-color: ${accentColor};
	}

	[type="checkbox"]:indeterminate + label:before {
		border-right-color: ${accentColor};
	}

	/* collection */
	md-collection .collection md-collection-item.collection-item.active {
		background-color: ${accentColor};
		color: white;
	}

	md-collection .collection md-collection-item.collection-item .secondary-content {
		color: ${accentColor};
	}

	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary {
		background-color: ${primaryColor};
	}
	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent {
		background-color: ${accentColor};
	}
	md-collection .collection md-collection-item.collection-item.avatar i.circle.error {
		background-color: ${errorColor};
	}
	md-collection .collection md-collection-item.collection-item.avatar i.circle.success {
		background-color: ${accentColor};
	}
	md-collection .collection md-collection-item.collection-item.avatar i.circle.primary-text {
		color: ${primaryColor};
		background-color: transparent;
	}
	md-collection .collection md-collection-item.collection-item.avatar i.circle.accent-text {
		color: ${accentColor};
		background-color: transparent;
	}
	md-collection .collection md-collection-item.collection-item.avatar i.circle.error-text {
		color: ${errorColor};
		background-color: transparent;
	}
	md-collection .collection md-collection-item.collection-item.avatar i.circle.success-text {
		color: ${accentColor};
		background-color: transparent;
	}	 


	/* datepicker */
	.datepicker-date-display {
		background-color: ${accentColor};
	}

	.datepicker-table td.is-today {
		color: ${accentColor};
	}

	.datepicker-table td.is-selected {
		background-color: ${accentColor};
	}

	.datepicker-day-button:focus {
		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);  /* $datepicker-day-focus;*/
	}

	.datepicker-cancel,
	.datepicker-today,
	.datepicker-done {
		color: ${accentColor};
	}
	
	.datepicker-clear {
		color: ${errorColor};
	}

	.datepicker-controls .select-wrapper input.select-dropdown:focus {
			border-bottom: none; /* select styling sets the border so it needs to be reset again*/
	}

	/* text input */
	input:not([type]):focus:not([readonly]),
	input[type=text]:not(.browser-default):focus:not([readonly]),
	input[type=password]:not(.browser-default):focus:not([readonly]),
	input[type=email]:not(.browser-default):focus:not([readonly]),
	input[type=url]:not(.browser-default):focus:not([readonly]),
	input[type=time]:not(.browser-default):focus:not([readonly]),
	input[type=date]:not(.browser-default):focus:not([readonly]),
	input[type=datetime]:not(.browser-default):focus:not([readonly]),
	input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
	input[type=tel]:not(.browser-default):focus:not([readonly]),
	input[type=number]:not(.browser-default):focus:not([readonly]),
	input[type=search]:not(.browser-default):focus:not([readonly]),
	textarea.materialize-textarea:focus:not([readonly]) {
		border-bottom: 1px solid ${accentColor};
		box-shadow: 0 1px 0 0 ${accentColor};
	}

	.input-field .prefix.active {
		color: ${accentColor}
	}

	/* text input label */
	input:not([type]):focus:not([readonly]) + label,
	input[type=text]:not(.browser-default):focus:not([readonly]) + label,
	input[type=password]:not(.browser-default):focus:not([readonly]) + label,
	input[type=email]:not(.browser-default):focus:not([readonly]) + label,
	input[type=url]:not(.browser-default):focus:not([readonly]) + label,
	input[type=time]:not(.browser-default):focus:not([readonly]) + label,
	input[type=date]:not(.browser-default):focus:not([readonly]) + label,
	input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
	input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
	input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
	input[type=number]:not(.browser-default):focus:not([readonly]) + label,
	input[type=search]:not(.browser-default):focus:not([readonly]) + label,
	textarea.materialize-textarea:focus:not([readonly]) + label {
		color: ${accentColor}
	}

	/* text input error label */
	md-input input:not([type]).invalid + label:after,
	md-input input:not([type]):focus.invalid + label:after,
	md-input input[type=text].invalid + label:after,
	md-input input[type=text]:focus.invalid + label:after,
	md-input input[type=password].invalid + label:after,
	md-input input[type=password]:focus.invalid + label:after,
	md-input input[type=email].invalid + label:after,
	md-input input[type=email]:focus.invalid + label:after,
	md-input input[type=url].invalid + label:after,
	md-input input[type=url]:focus.invalid + label:after,
	md-input input[type=time].invalid + label:after,
	md-input input[type=time]:focus.invalid + label:after,
	md-input input[type=date].invalid + label:after,
	md-input input[type=date]:focus.invalid + label:after,
	md-input input[type=datetime].invalid + label:after,
	md-input input[type=datetime]:focus.invalid + label:after,
	md-input input[type=datetime-local].invalid + label:after,
	md-input input[type=datetime-local]:focus.invalid + label:after,
	md-input input[type=tel].invalid + label:after,
	md-input input[type=tel]:focus.invalid + label:after,
	md-input input[type=number].invalid + label:after,
	md-input input[type=number]:focus.invalid + label:after,
	md-input input[type=search].invalid + label:after,
	md-input input[type=search]:focus.invalid + label:after,
	md-input textarea.materialize-textarea.invalid + label:after,
	md-input textarea.materialize-textarea:focus.invalid + label:after
	{
		color: ${errorColor}
	}

	/* text input success border */
	input:not([type]).valid, input:not([type]):focus.valid, input[type=text]:not(.browser-default).valid, input[type=text]:not(.browser-default):focus.valid, input[type=password]:not(.browser-default).valid, input[type=password]:not(.browser-default):focus.valid, input[type=email]:not(.browser-default).valid, input[type=email]:not(.browser-default):focus.valid, input[type=url]:not(.browser-default).valid, input[type=url]:not(.browser-default):focus.valid, input[type=time]:not(.browser-default).valid, input[type=time]:not(.browser-default):focus.valid, input[type=date]:not(.browser-default).valid, input[type=date]:not(.browser-default):focus.valid, input[type=datetime]:not(.browser-default).valid, input[type=datetime]:not(.browser-default):focus.valid, input[type=datetime-local]:not(.browser-default).valid, input[type=datetime-local]:not(.browser-default):focus.valid, input[type=tel]:not(.browser-default).valid, input[type=tel]:not(.browser-default):focus.valid, input[type=number]:not(.browser-default).valid, input[type=number]:not(.browser-default):focus.valid, input[type=search]:not(.browser-default).valid, input[type=search]:not(.browser-default):focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid {
		border-bottom: 1px solid ${successColor};
		box-shadow: 0 1px 0 0 ${successColor};
	}

	/* validation helper-text tweaks */
	input:not(.invalid):not(.valid) ~ .helper-text[data-error],
	input:not(.invalid):not(.valid) ~ .helper-text[data-success],
	input.valid ~ .helper-text:not([data-success]),
	input.invalid ~ .helper-text:not([data-error]) {
		display: none;
	}

	.input-field .helper-text {
		/* original helper-text is too low */
		transform: translateY(-7px); 
	}

	/* pagination */
	md-pagination .pagination li.active {
		background-color: ${primaryColor}
	}

	/* progress */
	md-progress .progress {
		background-color: ${accentColor | lighten:2};
	}

	md-progress .progress .determinate, md-progress .progress .indeterminate {
		background-color: ${accentColor};
	}

	/* radio input */
	md-radio input[type="radio"]:checked + label:after {
		border: 2px solid ${accentColor};
		background-color: ${accentColor};
	}
	md-radio [type="radio"].with-gap:checked + label:before {
		border: 2px solid ${accentColor};
	}
	md-radio [type="radio"].with-gap:checked + label:after {
		border: 2px solid ${accentColor};
		background-color: ${accentColor};
	}

	/* range */
	md-range .range-field input[type="range"]::-webkit-slider-thumb {
		background: ${accentColor};
	}
	md-range .range-field input[type="range"]::-moz-range-thumb {
		background: ${accentColor};
	}
	md-range .range-field input[type="range"]::-ms-thumb {
		background: ${accentColor};
	}
	md-range input[type="range"] + .thumb {
		background-color: ${accentColor} !important;
	}

	/* select */
	.dropdown-content li > a, .dropdown-content li > span {
		color: ${accentColor};
	}

	.select-wrapper input.select-dropdown:focus {
		border-bottom: 1px solid ${accentColor};
	}

	/* side-nav */
	md-sidenav .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
		background-color: ${primaryColor};
	}

	.side-nav .collapsible-body > ul:not(.collapsible) > li.active, .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
		background-color: ${primaryColor};
	}

	/* slider */
	.slider .indicators .indicator-item.active {
		background-color: ${accentColor};
	}

	/* switch */
	md-switch.switch label input[type=checkbox]:checked + .lever {
		background-color: ${accentColor | lighten:1};
	}
	md-switch.switch label input[type=checkbox]:checked + .lever:after {
		background-color: ${accentColor};
	}

	/* tabs */

	.tab.primary-text a {
		color: ${primaryColor};
	}
	.tab.primary-text a.active {
		color: ${primaryColor};
	}
	.tab.waves-effect {
		position: static;
	}
	.tab.primary-text a:hover {
		color: ${primaryColor | lighten:2};
	}
	.tabs .indicator {
		background-color: ${primaryColor | lighten:2};
	}
	.tabs .tab a:focus, .tabs .tab a:focus.active {
		background-color: rgba(${cs.toRgb(primaryColor, 2)}, 0.2);
		outline: none;
	}

	/* timepicker */
	.timepicker-digital-display {
		background-color: ${accentColor};
	}
	
	.timepicker-tick.active,
	.timepicker-tick:hover {
		background-color: rgba(${cs.toRgb(accentColor)}, 0.25);
	}

	.timepicker-canvas line {
			stroke: ${accentColor};
	}
		
	.timepicker-canvas-bearing {
		fill: ${accentColor};
	}

	.timepicker-canvas-bg {
		fill: ${accentColor};
	}
	
	.timepicker-clear {
		color: ${errorColor};
	}
	
	.timepicker-close {
		color: ${accentColor};
	}
		
	/* well */
	md-well li.active {
		border-right: 2px solid ${primaryColor};
		background-color: ${primaryColor | lighten:3};
	}

	/* footer */
	footer.page-footer {
		background-color: ${primaryColor};
	}

	/* lookup */
	md-lookup .dropdown-div li {
		color: ${accentColor};
	}

	md-lookup .dropdown-div li a {
		color: ${accentColor};
	}

	/* tap target */
	.tap-target {
		background-color: ${primaryColor};
	}

	</style>
</template>