Commit ab4582fd authored by Bas Lijnse's avatar Bas Lijnse

Inlined sass prefix and paths

parent 57ae1167
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;
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;
}
.#{$prefix}textview, .#{$prefix}htmlview {
.itasks-textview, .itasks-htmlview {
padding: 5px;
}
.#{$prefix}icon {
.itasks-icon {
width: 16px;
height: 16px;
}
.#{$prefix}label {
.itasks-label {
width: 100px;
padding: 5px;
text-overflow: elipsis;
}
.#{$prefix}button {
.itasks-button {
font-size: 8pt;
padding: 3px;
background: linear-gradient($button-base-color-lighter, $button-base-color);
......@@ -30,22 +30,22 @@
background: $button-base-color-lighter;
}
}
.#{$prefix}button-label {
.itasks-button-label {
margin: 0 4px;
height: 16px;
cursor: default;
}
.#{$prefix}button-icon {
.itasks-button-icon {
width: 16px;
height: 16px;
}
.#{$prefix}button-disabled {
.itasks-button-disabled {
color: $button-text-color-lighter;
background: linear-gradient($button-base-color-lighter, $button-base-color-darker);
}
.#{$prefix}button-disabled:hover {
.itasks-button-disabled:hover {
border-color: $button-base-color-darkest;
}
.#{$prefix}button-disabled .#{$prefix}button-icon {
.itasks-button-disabled .itasks-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
.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;
> .#{$prefix}header {
> .itasks-header {
color: #fff;
padding: 2px;
}
}
.#{$prefix}raw-form {
.itasks-raw-form {
border: solid 2px #f33;
background: #fee;
> .#{$prefix}header {
> .itasks-header {
background: #f33;
}
}
.#{$prefix}raw-form-item {
.itasks-raw-form-item {
border: dashed 2px #f33;
border-radius: 5px;
> .#{$prefix}header {
> .itasks-header {
background: #f33;
}
}
.#{$prefix}raw-record {
.itasks-raw-record {
border: solid 2px #f33;
background: #fee;
> .#{$prefix}header {
> .itasks-header {
background: #f33;
}
}
.#{$prefix}raw-cons {
.itasks-raw-cons {
border: solid 2px #ff3;
background: #ffe;
> .#{$prefix}header {
> .itasks-header {
background: #ff3;
}
}
.#{$prefix}raw-var-cons {
.itasks-raw-var-cons {
border: solid 2px #ff3;
background: #ffe;
> .#{$prefix}header {
> .itasks-header {
background: #ff3;
}
}
.#{$prefix}raw-interact {
.itasks-raw-interact {
border: solid 2px #f3f;
background: #fef;
> .#{$prefix}header {
> .itasks-header {
background: #f3f;
}
}
.#{$prefix}raw-step {
.itasks-raw-step {
border: solid 2px #33f;
background: #eef;
> .#{$prefix}header {
> .itasks-header {
background: #33f;
}
}
.#{$prefix}raw-parallel {
.itasks-raw-parallel {
border: solid 2px #3f3;
background: #efe;
> .#{$prefix}header {
> .itasks-header {
background: #3f3;
}
}
.#{$prefix}raw-empty {
.itasks-raw-empty {
border: dashed 2px #eee;
color: #ccc;
font-style: italic;
}
.#{$prefix}raw-action {
.itasks-raw-action {
border: solid 2px #000;
padding: 5px 20px;
border-radius: 5px;
color: #fff;
font-weight: bold;
}
.#{$prefix}raw-action-enabled {
.itasks-raw-action-enabled {
background-color: #0f0;
}
.#{$prefix}raw-action-disabled {
.itasks-raw-action-disabled {
background-color: #f00;
}
.#{$prefix}checkgroup, {
.itasks-checkgroup, {
margin: 0;
padding: 0;
}
.#{$prefix}checkgroup li {
.itasks-checkgroup li {
list-style: none;
}
.#{$prefix}checkgroup label {
.itasks-checkgroup label {
margin-left: 5px;
}
.#{$prefix}choicegrid {
.itasks-choicegrid {
display: flex;
flex-direction: column;
......@@ -16,7 +16,7 @@
flex-grow: 1;
align-self: stretch;
}
.#{$prefix}choicegrid-header {
.itasks-choicegrid-header {
color: $panel-header-text-color;
background: $panel-header-base-color;
background: linear-gradient($panel-header-base-color-lighter2, $panel-header-base-color-darker2);
......@@ -24,7 +24,7 @@
flex-direction: row;
flex: none;
}
.#{$prefix}choicegrid-header > div {
.itasks-choicegrid-header > div {
border: 1px solid;
border-color: $choicegrid-up-color $choicegrid-up-color $choicegrid-down-color $choicegrid-down-color;
flex: 1;
......@@ -32,14 +32,14 @@
font-size: 11px;
height: 20px;
}
.#{$prefix}choicegrid-body {
.itasks-choicegrid-body {
flex: 1;
background: #fff;
color: #000;
overflow: auto;
min-height: 100px;
}
.#{$prefix}choicegrid-body > div {
.itasks-choicegrid-body > div {
display: flex;
flex-direction: row;
cursor: default;
......@@ -47,23 +47,23 @@
border-width: 1px 0;
border-bottom-color: #ddd;
}
.#{$prefix}choicegrid-body > div:nth-child(even) {
.itasks-choicegrid-body > div:nth-child(even) {
background-color: #fafafa;
}
.#{$prefix}choicegrid-body > div:hover {
.itasks-choicegrid-body > div:hover {
background-color: #eee;
}
.#{$prefix}choicegrid-body > div.#{$prefix}selected {
.itasks-choicegrid-body > div.itasks-selected {
background-color: $select-base-color;
color: $select-text-color;
border: 1px dotted #333;
}
.#{$prefix}choicegrid-body > div > div {
.itasks-choicegrid-body > div > div {
flex: 1;
padding: 3px 5px;
}
.#{$prefix}choicetree {
.itasks-choicetree {
overflow: auto;
min-width: 150px;
min-height: 100px;
......@@ -123,11 +123,11 @@
}
}
}
&.#{$prefix}leaf > label {
&.itasks-leaf > label {
background-position: 16px 0px;
background-repeat: no-repeat;
}
&.#{$prefix}selected > label {
&.itasks-selected > label {
font-weight: bold;
}
label {
......@@ -141,15 +141,15 @@
background-repeat: no-repeat;
height: 16px;
}
label.#{$prefix}default-folder {
background-image: url('#{$icon-path}folder.png');
label.itasks-default-folder {
background-image: url('/css/icons/folder.png');
}
label.#{$prefix}default-leaf {
background-image: url('#{$icon-path}document.png');
label.itasks-default-leaf {
background-image: url('/css/icons/document.png');
}
}
}
.#{$prefix}choice-list {
.itasks-choice-list {
margin: 0;
border: 1px solid $select-base-color;
display: flex;
......@@ -161,10 +161,10 @@
flex-grow: 1;
align-self: stretch;
}
.#{$prefix}choice-list * {
.itasks-choice-list * {
align-self: stretch;
}
.#{$prefix}choice-list-option {
.itasks-choice-list-option {
border: solid $select-base-color;
border-width: 0 0 1px 0;
padding: 5px 10px;
......@@ -174,7 +174,7 @@
border-width: 0;
}
}
.#{$prefix}choice-list-option.#{$prefix}selected {
.itasks-choice-list-option.itasks-selected {
background-color: $select-base-color;
color: $select-text-color;
}
.icon-help {
background-image: url('#{$icon-path}help.png');
background-image: url('/css/icons/help.png');
}
.icon-info {
background-image: url('#{$icon-path}information.png') !important;
background-image: url('/css/icons/information.png') !important;
}
.icon-valid {
background-image: url('#{$icon-path}accept.png') !important;
background-image: url('/css/icons/accept.png') !important;
}
.icon-warning {
background-image: url('#{$icon-path}warning.png') !important;
background-image: url('/css/icons/warning.png') !important;
}
.icon-invalid {
background-image: url('#{$icon-path}exclamation.png') !important;
background-image: url('/css/icons/exclamation.png') !important;
}
.icon-continue {
background-image: url('#{$icon-path}arrow_right.png');
background-image: url('/css/icons/arrow_right.png');
}
.icon-login, .icon-log-in {
background-image: url('#{$icon-path}tick.png');
background-image: url('/css/icons/tick.png');
}
.icon-logout, .icon-log-out {
background-image: url('#{$icon-path}door_in.png');
background-image: url('/css/icons/door_in.png');
}
.icon-view {
background-image: url('#{$icon-path}page.png') !important;
background-image: url('/css/icons/page.png') !important;
}
.icon-edit {
background-image: url('#{$icon-path}pencil.png') !important;
background-image: url('/css/icons/pencil.png') !important;
}
.icon-delete {
background-image: url('#{$icon-path}trash.png') !important;
background-image: url('/css/icons/trash.png') !important;
}
.icon-refresh {
background-image: url('#{$icon-path}refresh.png') !important;
background-image: url('/css/icons/refresh.png') !important;
}
.icon-up {
background-image: url('#{$icon-path}move-up.png') !important;
background-image: url('/css/icons/move-up.png') !important;
}
.icon-down {
background-image: url('#{$icon-path}move-down.png') !important;
background-image: url('/css/icons/move-down.png') !important;
}
.icon-add, .icon-new {
background-image: url('#{$icon-path}add.png') !important;
background-image: url('/css/icons/add.png') !important;
}
.icon-remove {
background-image: url('#{$icon-path}delete.png') !important;
background-image: url('/css/icons/delete.png') !important;
}
.icon-ok {
background-image: url('#{$icon-path}tick.png') !important;
background-image: url('/css/icons/tick.png') !important;
}
.icon-cancel {
background-image: url('#{$icon-path}cancel.png') !important;
background-image: url('/css/icons/cancel.png') !important;
}
.icon-open {
background-image: url('#{$icon-path}document-open.png') !important;
background-image: url('/css/icons/document-open.png') !important;
}
.icon-save {
background-image: url('#{$icon-path}document-save.png') !important;
background-image: url('/css/icons/document-save.png') !important;
}
.icon-document {
background-image: url('#{$icon-path}document.png') !important;
background-image: url('/css/icons/document.png') !important;
}
.icon-document-error {
background-image: url('#{$icon-path}document-error.png') !important;
background-image: url('/css/icons/document-error.png') !important;
}
.icon-folder {
background-image: url('#{$icon-path}folder.png') !important;
background-image: url('/css/icons/folder.png') !important;
}
.icon-close {
background-image: url('#{$icon-path}cancel.png') !important;
background-image: url('/css/icons/cancel.png') !important;
}
.icon-previous {
background-image: url('#{$icon-path}arrow_left.png') !important;
background-image: url('/css/icons/arrow_left.png') !important;
}
.icon-next {
background-image: url('#{$icon-path}arrow_right.png') !important;
background-image: url('/css/icons/arrow_right.png') !important;
}
.icon-preferences {
background-image: url('#{$icon-path}cog.png') !important;
background-image: url('/css/icons/cog.png') !important;
}
.icon-finish {
background-image: url('#{$icon-path}flag.png') !important;
background-image: url('/css/icons/flag.png') !important;
}
.icon-fullscreen {
background-image: url('#{$icon-path}fullscreen.png') !important;
background-image: url('/css/icons/fullscreen.png') !important;
}
......@@ -42,6 +42,3 @@ $list-border-color: #ccc;
$choicegrid-up-color: #d9d9d9; // lighten 5%
$choicegrid-down-color: #f2f2f2; // lighten 15%
$prefix: itasks-;
$icon-path: '/css/icons/';
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment