Commit 32268735 authored by Steffen Michels's avatar Steffen Michels

Merge branch 'eliminate-sass' into 'master'

Eliminate sass

See merge request !310
parents 9bdf6ee7 a9384198
Pipeline #29656 passed with stage
in 4 minutes and 39 seconds
/* 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;
}
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;
}
This diff is collapsed.
.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);
}
#!/bin/sh
sass --no-source-map src/itasks-default.scss itasks.css
sass --no-source-map src/itasks-orangeblue.scss itasks-orangeblue.css
This diff is collapsed.
.#{$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%;
}
.#{$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 {
background: lighten($button-base-color,20%);
}
}
.#{$prefix}button-label {
margin: 0 4px;
height: 16px;
cursor: default;
}
.#{$prefix}button-icon {
width: 16px;
height: 16px;
}
.#{$prefix}button:disabled {
color: lighten($button-text-color,35%);
background: linear-gradient(lighten($button-base-color,20%), darken($button-base-color,20%));
}
.#{$prefix}button:disabled:hover {
border-color: darken($button-base-color,40%);
}
.#{$prefix}button:disabled .#{$prefix}button-icon {
opacity: 0.5;
}
/* Styles for unlayouted content */
.#{$prefix}raw-record
, .#{$prefix}raw-cons
, .#{$prefix}raw-var-cons
, .#{$prefix}raw-interact
, .#{$prefix}raw-step
, .#{$prefix}raw-parallel
, .#{$prefix}raw-form
, .#{$prefix}raw-form-item
{
border: dashed 2px #ccc;
> .#{$prefix}header {
color: #fff;
padding: 2px;
}
}
.#{$prefix}raw-form {
border: solid 2px #f33;
background: #fee;
> .#{$prefix}header {
background: #f33;
}