Merge branch 'eliminate-sass' into 'master'

Eliminate sass

See merge request !310

Libraries/iTasks/UI/Definition.css

+/* Global themabable variables shared by the builtin editors. */
+:root {
+	--canvas-base-color: #eee;
+	--canvas-text-color: #000;
+
+	--panel-header-base-color: #ccc;
+	--panel-header-base-color-lighter: #ececec; /* lighten 12.5% */
+	--panel-header-base-color-lighter2: white; /* lighten 20% */
+	--panel-header-base-color-darker: #999999; /* darken 20% */
+	--panel-header-base-color-darker2: #b3b3b3; /* darken 10% */
+
+	--panel-header-text-color: #000;
+	--panel-border-color: #ccc;
+
+	--window-header-base-color: #ccc;
+	--window-header-base-color-lighter: #ececec; /* lighten 12.5% */
+	--window-header-text-color: #000;
+	--window-border-color: #ccc;
+
+	--toolbar-base-color: var(--canvas-base-color);
+	--toolbar-base-color-lighter: #f8f8f8; /* lighten 4% */
+	--toolbar-base-color-darker: #cecece; /* darken 12.5% */
+	--toolbar-base-color-darker2: #e1e1e1; /* darken 5% */
+
+	--button-base-color: var(--canvas-base-color);
+	--button-base-color-lighter: white; /* lighten 10% */
+	--button-base-color-darker: #bbbbbb; /* darken 20% */
+	--button-base-color-darkest: #888888; /* darken 40% */
+	--button-text-color: var(--canvas-text-color);
+	--button-text-color-lighter: #595959; /* lighten 35% */
+
+	--tab-base-color: var(--canvas-base-color);
+	--tab-base-color-darker: #e1e1e1; /* lighten 5% */
+	--tab-text-color: var(--canvas-text-color);
+	--tab-border-color: #ccc;
+
+	--select-base-color: #333;
+	--select-text-color: #fff;
+
+	--list-base-color: #fff;
+	--list-text-color: #000;
+	--list-highlight-color: #eee;
+	--list-border-color: #ccc;
+
+	--choicegrid-up-color: #d9d9d9; /* lighten 5% */
+	--choicegrid-down-color: #f2f2f2; /* lighten 15% */
+}
+
+/* Predefined themes: just add this class to the viewport or (any container) */
+.itasks-orangeblue {
+	--panel-header-base-color: #fb7322;
+	--panel-header-text-color: #fff;
+	--panel-border-color: #fb7322;
+
+	--window-header-base-color: #004584;
+	--window-header-text-color: #fff;
+	--window-border-color: #fb7322;
+
+	--toolbar-base-color: #fb7322;
+
+	--select-base-color: #004584;
+
+	--panel-header-base-color-lighter: #fc9b61;
+	--panel-header-base-color-lighter2: #fdb286;
+	--panel-header-base-color-darker: #b44503;
+	--panel-header-base-color-darker2: #e65804;
+	--window-header-base-color-lighter: #0066c4;
+	--toolbar-base-color-lighter: #fb8036;
+	--toolbar-base-color-darker: #d95404;
+	--toolbar-base-color-darker2: #fb6309;
+	--choicegrid-up-color: #fb833b;
+	--choicegrid-down-color: #fca36d;
+}
+
+/* Intermediate UI elements */
+.itasks-raw-record,
+.itasks-raw-cons,
+.itasks-raw-var-cons,
+.itasks-raw-interact,
+.itasks-raw-step,
+.itasks-raw-parallel,
+.itasks-raw-form,
+.itasks-raw-form-item {
+	border: dashed 2px #ccc;
+}
+.itasks-raw-record > .itasks-header,
+.itasks-raw-cons > .itasks-header,
+.itasks-raw-var-cons > .itasks-header,
+.itasks-raw-interact > .itasks-header,
+.itasks-raw-step > .itasks-header,
+.itasks-raw-parallel > .itasks-header,
+.itasks-raw-form > .itasks-header,
+.itasks-raw-form-item > .itasks-header {
+	color: #fff;
+	padding: 2px;
+}
+.itasks-raw-form {
+	border: solid 2px #f33;
+	background: #fee;
+}
+.itasks-raw-form > .itasks-header {
+	background: #f33;
+}
+.itasks-raw-form-item {
+	border: dashed 2px #f33;
+	border-radius: 5px;
+}
+.itasks-raw-form-item > .itasks-header {
+	background: #f33;
+}
+.itasks-raw-record {
+	border: solid 2px #f33;
+	background: #fee;
+}
+.itasks-raw-record > .itasks-header {
+	background: #f33;
+}
+.itasks-raw-cons {
+	border: solid 2px #ff3;
+	background: #ffe;
+}
+.itasks-raw-cons > .itasks-header {
+	background: #ff3;
+}
+.itasks-raw-var-cons {
+	border: solid 2px #ff3;
+	background: #ffe;
+}
+.itasks-raw-var-cons > .itasks-header {
+	background: #ff3;
+}
+.itasks-raw-interact {
+	border: solid 2px #f3f;
+	background: #fef;
+}
+.itasks-raw-interact > .itasks-header {
+	background: #f3f;
+}
+.itasks-raw-step {
+	border: solid 2px #33f;
+	background: #eef;
+}
+.itasks-raw-step > .itasks-header {
+	background: #33f;
+}
+.itasks-raw-parallel {
+	border: solid 2px #3f3;
+	background: #efe;
+}
+.itasks-raw-parallel > .itasks-header {
+	background: #3f3;
+}
+.itasks-raw-empty {
+	border: dashed 2px #eee;
+	color: #ccc;
+	font-style: italic;
+}
+.itasks-raw-action {
+	border: solid 2px #000;
+	padding: 5px 20px;
+	border-radius: 5px;	
+	color: #fff;
+	font-weight: bold;
+}
+.itasks-raw-action-enabled {
+	background-color: #0f0;
+}
+.itasks-raw-action-disabled {
+	background-color: #f00;
+}
+
+/* Predefined icon classes */
+*.itasks-viewport .icon-help {
+	background-image: url('/css/icons/help.png');
+}
+*.itasks-viewport .icon-info {
+	background-image: url('/css/icons/information.png') !important;
+}
+*.itasks-viewport .icon-valid {
+	background-image: url('/css/icons/accept.png') !important;
+}
+*.itasks-viewport .icon-warning {
+	background-image: url('/css/icons/warning.png') !important;
+}
+*.itasks-viewport .icon-invalid {
+	background-image: url('/css/icons/exclamation.png') !important;
+}
+*.itasks-viewport .icon-continue {
+	background-image: url('/css/icons/arrow_right.png');
+}
+*.itasks-viewport .icon-login, *.itasks-viewport .icon-log-in {
+	background-image: url('/css/icons/tick.png');
+}
+*.itasks-viewport .icon-logout, *.itasks-viewport .icon-log-out {
+	background-image: url('/css/icons/door_in.png');
+}
+*.itasks-viewport .icon-view {
+	background-image: url('/css/icons/page.png') !important;
+}
+*.itasks-viewport .icon-edit {
+	background-image: url('/css/icons/pencil.png') !important;
+}
+*.itasks-viewport .icon-delete {
+	background-image: url('/css/icons/trash.png') !important;
+}
+*.itasks-viewport .icon-refresh {
+	background-image: url('/css/icons/refresh.png') !important;
+}
+*.itasks-viewport .icon-up {
+	background-image: url('/css/icons/move-up.png') !important;
+}
+*.itasks-viewport .icon-down {
+	background-image: url('/css/icons/move-down.png') !important;
+}
+*.itasks-viewport .icon-add, *.itasks-viewport .icon-new {
+	background-image: url('/css/icons/add.png') !important;
+}
+*.itasks-viewport .icon-remove {
+	background-image: url('/css/icons/delete.png') !important;
+}
+*.itasks-viewport .icon-ok {
+	background-image: url('/css/icons/tick.png') !important;
+}
+*.itasks-viewport .icon-cancel {
+	background-image: url('/css/icons/cancel.png') !important;
+}
+*.itasks-viewport .icon-open {
+	background-image: url('/css/icons/document-open.png') !important;
+}
+*.itasks-viewport .icon-save {
+	background-image: url('/css/icons/document-save.png') !important;
+}
+*.itasks-viewport .icon-document {
+	background-image: url('/css/icons/document.png') !important;
+}
+*.itasks-viewport .icon-document-error {
+	background-image: url('/css/icons/document-error.png') !important;
+}
+*.itasks-viewport .icon-folder {
+	background-image: url('/css/icons/folder.png') !important;
+}
+*.itasks-viewport .icon-close {
+	background-image: url('/css/icons/cancel.png') !important;
+}
+*.itasks-viewport .icon-previous {
+	background-image: url('/css/icons/arrow_left.png') !important;
+}
+*.itasks-viewport .icon-next {
+	background-image: url('/css/icons/arrow_right.png') !important;
+}
+*.itasks-viewport .icon-preferences {
+	background-image: url('/css/icons/cog.png') !important;
+}
+*.itasks-viewport .icon-finish {
+	background-image: url('/css/icons/flag.png') !important;
+}
+*.itasks-viewport .icon-fullscreen {
+	background-image: url('/css/icons/fullscreen.png') !important;
+}

Libraries/iTasks/UI/WebPublic/css/src/components-core.scss → Libraries/iTasks/UI/Editor.css

-div.#{$prefix}loader {
+div.itasks-loader {
 	display: flex;
 	font-size: 16pt;
 	font-style: italic;
 	text-align: center;
 }
-div.#{$prefix}loader-spinner {
+div.itasks-loader-spinner {
 	width: 40px;
 	height: 40px;
 	border: 10px solid;
 	border-radius: 100%;
-	border-color: $panel-border-color $panel-border-color $panel-border-color $select-base-color;
+	border-color: var(--panel-border-color) var(--panel-border-color) var(--panel-border-color) var(--select-base-color);
 	margin: auto auto;
-	animation: #{$prefix}rotation .8s infinite linear;
+	animation: itasks-rotation .8s infinite linear;
 }
-@keyframes #{$prefix}rotation {
+@keyframes itasks-rotation {
 	from { transform: rotate(0deg); }
 	to { transform: rotate(359deg); }
 }
-div.#{$prefix}exception {
+div.itasks-exception {
 	text-align: center;
 }

Libraries/iTasks/UI/Editor/Controls.css

+.itasks-textview, .itasks-htmlview {
+	padding: 5px;
+}
+
+.itasks-icon {
+	width: 16px;
+	height: 16px;
+}
+.itasks-label {
+	width: 100px;
+	padding: 5px;
+	text-overflow: elipsis;
+}
+.itasks-button {
+	font-size: 8pt;
+   	padding: 3px;
+	background: linear-gradient(var(--button-base-color-lighter), var(--button-base-color));
+	background-repeat: none;
+	border: 1px solid var(--button-base-color-darker);
+	border-radius: 3px;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	text-decoration: none;
+	color: var(--button-text-color);
+	flex-shrink: 0;
+}
+.itasks-button:hover {
+	border-color: var(--button-base-color-darkest);
+}
+.itasks-button:active {
+	background: var(--button-base-color-lighter);
+}
+
+.itasks-button-label {
+	margin: 0 4px;
+	height: 16px;
+	cursor: default;
+}
+.itasks-button-icon {
+	width: 16px;
+	height: 16px;
+}
+.itasks-button:disabled {
+	color: var(--button-text-color-lighter);
+	background: linear-gradient(var(--button-base-color-lighter), var(--button-base-color-darker));
+}
+.itasks-button:disabled:hover {
+	border-color: var(--button-base-color-darkest);
+}
+.itasks-button:disabled .itasks-button-icon {
+	opacity: 0.5;
+}
+
+.itasks-checkgroup, {
+	margin: 0;
+	padding: 0;
+}
+.itasks-checkgroup li {
+	list-style: none;
+}
+.itasks-checkgroup label {
+	margin-left: 5px;
+}
+.itasks-choicegrid {
+	display: flex;
+	flex-direction: column;
+
+	/*Default stretch in both directions*/
+	flex-grow: 1;
+	align-self: stretch;
+}
+.itasks-choicegrid-header {
+	color: var(--panel-header-text-color);
+	background: var(--panel-header-base-color);
+	background: linear-gradient(var(--panel-header-base-color-lighter2), var(--panel-header-base-color-darker2));
+	display: flex;
+	flex-direction: row;
+	flex: none;
+}
+.itasks-choicegrid-header > div {
+	border: 1px solid;
+	border-color:  var(--choicegrid-up-color) var(--choicegrid-up-color) var(--choicegrid-down-color) var(--choicegrid-down-color);
+	flex: 1;
+	padding: 3px 5px;
+	font-size: 11px;
+	height: 20px;
+}
+.itasks-choicegrid-body {
+	flex: 1;
+	background: #fff;
+	color: #000;
+	overflow: auto;
+	min-height: 100px;
+}
+.itasks-choicegrid-body > div {
+	display: flex;
+	flex-direction: row;
+	cursor: default;
+	border: solid transparent;
+	border-width: 1px 0;
+	border-bottom-color: #ddd;
+}
+.itasks-choicegrid-body > div:nth-child(even) {
+	background-color: #fafafa;
+}
+.itasks-choicegrid-body > div:hover {
+	background-color: #eee;
+}
+.itasks-choicegrid-body > div.itasks-selected {
+	background-color: var(--select-base-color);
+	color: var(--select-text-color);
+	border: 1px dotted #333;
+}
+.itasks-choicegrid-body > div > div {
+	flex: 1;
+	padding: 3px 5px;
+}
+
+.itasks-choicetree {
+	overflow: auto;
+	min-width: 150px;
+	min-height: 100px;
+
+	background: #fff;
+	color: #000;
+}
+.itasks-choicetree ol {
+	margin: 5px 0 0 20px;
+	padding: 0;
+}
+.itasks-choicetree li {
+	position: relative;
+	margin: 0 0 2px -15px;
+	list-style: none;
+}
+.itasks-choicetree li input {
+	display: none;
+}
+.itasks-choicetree li input + label {
+	display: inline-block;
+	background: url("/css/icons/toggle-small-expand.png") no-repeat;
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: 0;
+}
+.itasks-choicetree li input ~ ol {
+	margin: 0 0 0 -44px;
+}
+.itasks-choicetree li input ~ ol > li {
+	display: none;
+	margin-left: -24px !important;
+	padding-left: 1px;
+}
+
+.itasks-choicetree li input:checked + label {
+	background: url("/css/icons/toggle-small.png") no-repeat;
+}
+.itasks-choicetree li input:checked ~ ol {
+	padding: 0 0 0 80px;
+	height: auto;
+}
+.itasks-choicetree li input:checked ~ ol > li {
+	display: block;
+	margin: 0 0 2px;
+}
+.itasks-choicetree li input:checked ~ ol > li:last-child {
+	margin: 0 0 1px;
+}
+
+.itasks-choicetree li.itasks-leaf > label {
+	background-position: 16px 0px;
+	background-repeat: no-repeat;
+}
+.itasks-choicetree li.itasks-selected > label {
+	font-weight: bold;
+}
+.itasks-choicetree li label {
+	cursor: pointer;
+	display: block;
+	white-space: nowrap;
+	font-size: 12px;
+	padding-left: 37px;
+	background-color: #fff;
+	background-position: 15px 0px;
+	background-repeat: no-repeat;
+	height: 16px;
+}
+.itasks-choicetree li label.itasks-default-folder {
+	background-image: url('/css/icons/folder.png');
+}
+.itasks-choicetree li label.itasks-default-leaf {
+	background-image: url('/css/icons/document.png');
+}
+
+.itasks-choice-list {
+	margin: 0;
+	border: 1px solid var(--select-base-color);
+	display: flex;
+	overflow: auto;
+	flex-direction: column;
+	align-items: stretch;
+	
+	/*Default stretch in both directions*/
+	flex-grow: 1;
+	align-self: stretch;
+}
+.itasks-choice-list * {
+	align-self: stretch;
+}
+.itasks-choice-list-option {
+	border: solid var(--select-base-color);
+	border-width: 0 0 1px 0;
+	padding: 5px 10px;
+	flex-shrink: 0;
+}
+.itasks-choice-list-option:last-child {
+	border-width: 0;
+}
+.itasks-choice-list-option.itasks-selected {
+	background-color: var(--select-base-color);
+	color: var(--select-text-color);
+}
+
+.itasks-progress {
+	height: 1.5em;
+	width: 100%;
+	background-color: #c9c9c9;
+	position: relative;
+}
+.itasks-progress:before {
+	content: attr(title);
+	font-size: 0.8em;
+	position: absolute;
+	text-align: center;
+	height: 80%;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	margin: auto;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.itasks-progress .value {
+	background-color: #7cc4ff;
+	display: inline-block;
+	height: 100%;
+	width: 100%;
+}
+
+*.itasks-viewport [data-tooltip] {
+		position: relative;
+		display: inline-block;
+}
+*.itasks-viewport [data-tooltip]:before, *.itasks-viewport [data-tooltip]:after {
+	position: absolute;
+	transform: translate3d(0, 0, 0);
+	visibility: hidden;
+	opacity: 0;
+	z-index: 1000000;
+	pointer-events: none;
+	transition: 0.3s ease;
+}
+*.itasks-viewport [data-tooltip]:hover:before, *.itasks-viewport [data-tooltip]:hover:after,
+*.itasks-viewport [data-tooltip]:focus:before, *.itasks-viewport [data-tooltip]:focus:after {
+	visibility: visible;
+	opacity: 1;
+}
+*.itasks-viewport [data-tooltip]:before {
+	content: '';
+	position: absolute;
+	background: transparent;
+	border: 6px solid transparent;
+	z-index: 1000001;
+}
+*.itasks-viewport [data-tooltip]:after {
+	content: attr(data-tooltip);
+	background: #ccc;
+	color: #000;
+	padding: 8px 10px;
+	font-size: 12px;
+	line-height: 12px;
+	white-space: nowrap;
+	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
+}
+*.itasks-viewport [data-tooltip]:before {
+  border-left-color: #ccc;
+  margin-right: -12px;
+  margin-bottom: -6px;
+}
+*.itasks-viewport [data-tooltip]:after {
+  margin-bottom: -14px;
+}
+*.itasks-viewport [data-tooltip]:before, *.itasks-viewport [data-tooltip]:after {
+  right: 100%;
+  bottom: 50%;
+}
+*.itasks-viewport [data-tooltip]:hover:after, *.itasks-viewport [data-tooltip]:hover:before, *.itasks-viewport [data-tooltip]:focus:after, *.itasks-viewport [data-tooltip]:focus:before {
+  transform: translateX(-8px);
+}

Libraries/iTasks/UI/WebPublic/css/generate-css.sh

-#!/bin/sh
-sass --no-source-map src/itasks-default.scss itasks.css
-sass --no-source-map src/itasks-orangeblue.scss itasks-orangeblue.css

Libraries/iTasks/UI/WebPublic/css/src/components-display.scss

-.#{$prefix}textview, .#{$prefix}htmlview {
-	padding: 5px;
-}
-
-.#{$prefix}progress {
-	height: 1.5em;
-	width: 100%;
-	background-color: #c9c9c9;
-	position: relative;
-}
-.#{$prefix}progress:before {
-	content: attr(title);
-	font-size: 0.8em;
-	position: absolute;
-	text-align: center;
-	height: 80%;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	margin: auto;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.#{$prefix}progress .value {
-	background-color: #7cc4ff;
-	display: inline-block;
-	height: 100%;
-	width: 100%;
-}

Libraries/iTasks/UI/WebPublic/css/src/components-form.scss

-.#{$prefix}icon {
-    width: 16px;
-    height: 16px;
-}
-.#{$prefix}label {
-	width: 100px;
-	padding: 5px;
-	text-overflow: elipsis;
-}
-.#{$prefix}button {
-	font-size: 8pt;
-   	padding: 3px;
-    background: linear-gradient(lighten($button-base-color,20% ), $button-base-color);
-    background-repeat: none;
-    border: 1px solid darken($button-base-color,20%);
-    border-radius: 3px;
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    text-decoration: none;
-    color: $button-text-color;
-    flex-shrink: 0;
-
-    &:hover {
-        border-color: darken($button-base-color,40%);
-    }
-
-    &:active {