Commit edc18901 authored by Bas Lijnse's avatar Bas Lijnse

Replaced sass variables by css variables

parent d98d11a1
#!/bin/sh #!/bin/sh
sass --no-source-map src/itasks-default.scss itasks.css sass --no-source-map src/main.scss itasks.css
sass --no-source-map src/itasks-orangeblue.scss itasks-orangeblue.css sass --no-source-map src/main.scss itasks-orangeblue.css
...@@ -30,9 +30,9 @@ ...@@ -30,9 +30,9 @@
} }
.itasks-panel { .itasks-panel {
color: $canvas-text-color; color: var(--canvas-text-color);
background-color: $canvas-base-color; background-color: var(--canvas-base-color);
border: 1px solid $panel-border-color; border: 1px solid var(--panel-border-color);
display: grid; display: grid;
grid-template-areas: grid-template-areas:
...@@ -51,9 +51,9 @@ ...@@ -51,9 +51,9 @@
} }
.itasks-panel > .itasks-header { .itasks-panel > .itasks-header {
grid-area: header; grid-area: header;
color: $panel-header-text-color; color: var(--panel-header-text-color);
background-color: $panel-header-base-color; background-color: var(--panel-header-base-color);
background: linear-gradient($panel-header-base-color-lighter, $panel-header-base-color); background: linear-gradient(var(--panel-header-base-color-lighter), var(--panel-header-base-color));
font-weight: bold; font-weight: bold;
font-size: 11px; font-size: 11px;
height: 25px; height: 25px;
...@@ -99,11 +99,11 @@ ...@@ -99,11 +99,11 @@
} }
.itasks-panel .itasks-sizer-top, .itasks-panel .itasks-sizer-bottom, .itasks-panel .itasks-sizer-top, .itasks-panel .itasks-sizer-bottom,
.itasks-panel .itasks-sizer-left, .itasks-panel .itasks-sizer-right { .itasks-panel .itasks-sizer-left, .itasks-panel .itasks-sizer-right {
background-color: #{$canvas-base-color}; background-color: var(--canvas-base-color);
} }
.itasks-panel .itasks-sizer-top:hover, .itasks-panel .itasks-sizer-bottom:hover, .itasks-panel .itasks-sizer-top:hover, .itasks-panel .itasks-sizer-bottom:hover,
.itasks-panel .itasks-sizer-left:hover, .itasks-panel .itasks-sizer-right:hover { .itasks-panel .itasks-sizer-left:hover, .itasks-panel .itasks-sizer-right:hover {
background-color: #{$select-base-color}; background-color: var(--select-base-color);
} }
.itasks-window > .itasks-header { .itasks-window > .itasks-header {
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
} }
.itasks-window > .itasks-header a.close { .itasks-window > .itasks-header a.close {
float: right; float: right;
color: $panel-header-text-color; color: var(--panel-header-text-color);
display: inline-block; display: inline-block;
position: relative; position: relative;
margin: 4px 4px 0 0; margin: 4px 4px 0 0;
...@@ -122,8 +122,8 @@ ...@@ -122,8 +122,8 @@
font-weight: bold; font-weight: bold;
font-size: 8px; font-size: 8px;
line-height: 8px; line-height: 8px;
background: $panel-header-base-color-lighter; background: var(--panel-header-base-color-lighter);
border: 1px solid $panel-header-text-color; border: 1px solid var(--panel-header-text-color);
border-radius: 2px; border-radius: 2px;
padding: 0 4px 2px 4px; padding: 0 4px 2px 4px;
text-decoration: none; text-decoration: none;
...@@ -167,26 +167,26 @@ ...@@ -167,26 +167,26 @@
} }
.itasks-window.itasks-floating-window { .itasks-window.itasks-floating-window {
color: $canvas-text-color; color: var(--canvas-text-color);
background-color: $canvas-base-color; background-color: var(--canvas-base-color);
border: 1px solid $window-border-color; border: 1px solid var(--window-border-color);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 5px 5px rgba(0,0,0,0.5); box-shadow: 0 5px 5px rgba(0,0,0,0.5);
} }
.itasks-window.itasks-floating-window > .itasks-header { .itasks-window.itasks-floating-window > .itasks-header {
color: $window-header-text-color; color: var(--window-header-text-color);
background-color: $window-header-base-color; background-color: var(--window-header-base-color);
background: linear-gradient($window-header-base-color-lighter, $window-header-base-color); background: linear-gradient(var(--window-header-base-color-lighter), var(--window-header-base-color));
} }
.itasks-window.itasks-notification-bubble { .itasks-window.itasks-notification-bubble {
background-color: $canvas-base-color; background-color: var(--canvas-base-color);
border: 3px solid $window-header-base-color; border: 3px solid var(--window-header-base-color);
border-radius: 10px; border-radius: 10px;
opacity: 0.9; opacity: 0.9;
} }
.itasks-window.itasks-notification-bubble > .itasks-header { .itasks-window.itasks-notification-bubble > .itasks-header {
color: $window-header-text-color; color: var(--window-header-text-color);
background-color: $window-header-base-color; background-color: var(--window-header-base-color);
} }
.itasks-tabset { .itasks-tabset {
...@@ -206,14 +206,14 @@ ...@@ -206,14 +206,14 @@
position: relative; position: relative;
min-height: 24px; min-height: 24px;
background: linear-gradient($panel-header-base-color-lighter2, $panel-header-base-color); background: linear-gradient(var(--panel-header-base-color-lighter2), var(--panel-header-base-color));
overflow: hidden; overflow: hidden;
} }
.itasks-tabset .itasks-tabbar li { .itasks-tabset .itasks-tabbar li {
margin: 0; margin: 0;
padding: 0 10px; padding: 0 10px;
border: 1px solid $tab-border-color; border: 1px solid var(--tab-border-color);
background: $tab-base-color-darker; background: var(--tab-base-color-darker);
display: inline-block; display: inline-block;
position: relative; position: relative;
z-index: 0; z-index: 0;
...@@ -222,7 +222,7 @@ ...@@ -222,7 +222,7 @@
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
.itasks-tabset .itasks-tabbar li a { .itasks-tabset .itasks-tabbar li a {
color: $tab-text-color; color: var(--tab-text-color);
text-decoration: none; text-decoration: none;
} }
.itasks-tabset .itasks-tabbar li:before, .itasks-tabset .itasks-tabbar li:before,
...@@ -232,31 +232,31 @@ ...@@ -232,31 +232,31 @@
width: 5px; width: 5px;
height: 5px; height: 5px;
content: " "; content: " ";
border: 1px solid $tab-border-color; border: 1px solid var(--tab-border-color);
} }
.itasks-tabset .itasks-tabbar li:before { .itasks-tabset .itasks-tabbar li:before {
left: -6px; left: -6px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
border-width: 0 1px 1px 0; border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 $tab-base-color-darker; box-shadow: 2px 2px 0 var(--tab-base-color-darker);
} }
.itasks-tabset .itasks-tabbar li:after { .itasks-tabset .itasks-tabbar li:after {
right: -6px; right: -6px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-width: 0 0 1px 1px; border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 $tab-base-color-darker; box-shadow: -2px 2px 0 var(--tab-base-color-darker);
} }
.itasks-tabset .itasks-tabbar li.itasks-selected { .itasks-tabset .itasks-tabbar li.itasks-selected {
background: $tab-base-color; background: var(--tab-base-color);
color: $tab-text-color; color: var(--tab-text-color);
z-index: 2; z-index: 2;
border-bottom-color: $tab-base-color; border-bottom-color: var(--tab-base-color);
} }
.itasks-tabset .itasks-tabbar li.itasks-selected:before { .itasks-tabset .itasks-tabbar li.itasks-selected:before {
box-shadow: 2px 2px 0 $tab-base-color; box-shadow: 2px 2px 0 var(--tab-base-color);
} }
.itasks-tabset .itasks-tabbar li.itasks-selected:after { .itasks-tabset .itasks-tabbar li.itasks-selected:after {
box-shadow: -2px 2px 0 $tab-base-color; box-shadow: -2px 2px 0 var(--tab-base-color);
} }
.itasks-tabset .itasks-tabbar li a.itasks-tabclose { .itasks-tabset .itasks-tabbar li a.itasks-tabclose {
color: #aaa; color: #aaa;
...@@ -279,7 +279,7 @@ ...@@ -279,7 +279,7 @@
width: 100%; width: 100%;
bottom: 0; bottom: 0;
left: 0; left: 0;
border-bottom: 1px solid $tab-border-color; border-bottom: 1px solid var(--tab-border-color);
z-index: 1; z-index: 1;
} }
.itasks-tabset .itasks-tabbar:before { .itasks-tabset .itasks-tabbar:before {
...@@ -302,9 +302,9 @@ ...@@ -302,9 +302,9 @@
} }
.itasks-tabset .itasks-tabitems { .itasks-tabset .itasks-tabitems {
z-index: 2; z-index: 2;
border: 1px solid $tab-border-color; border: 1px solid var(--tab-border-color);
border-top-width: 0; border-top-width: 0;
background-color: $canvas-base-color; background-color: var(--canvas-base-color);
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -329,14 +329,14 @@ ...@@ -329,14 +329,14 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
background: linear-gradient($toolbar-base-color-lighter, $toolbar-base-color-darker); background: linear-gradient(var(--toolbar-base-color-lighter), var(--toolbar-base-color-darker));
} }
.itasks-toolbar { .itasks-toolbar {
justify-content: flex-start; justify-content: flex-start;
margin: 0; margin: 0;
padding: 2px; padding: 2px;
background: $toolbar-base-color; background: var(--toolbar-base-color);
background: linear-gradient($toolbar-base-color-lighter, $toolbar-base-color-darker2); background: linear-gradient(var(--toolbar-base-color-lighter), var(--toolbar-base-color-darker2));
} }
.itasks-toolbar > .itasks-menu-item > div { .itasks-toolbar > .itasks-menu-item > div {
background-image: url('/css/icons/menu-down.png'); background-image: url('/css/icons/menu-down.png');
...@@ -361,13 +361,13 @@ ...@@ -361,13 +361,13 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-shrink: 0; flex-shrink: 0;
border: 1px solid $button-base-color-darker; border: 1px solid var(--button-base-color-darker);
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
} }
.itasks-menu div.itasks-menu-label { .itasks-menu div.itasks-menu-label {
height: 23px; height: 23px;
background: linear-gradient($button-base-color-lighter, $button-base-color); background: linear-gradient(var(--button-base-color-lighter), var(--button-base-color));
background-repeat: none; background-repeat: none;
background-image: url('/css/icons/menu-down.png'); background-image: url('/css/icons/menu-down.png');
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -377,10 +377,10 @@ ...@@ -377,10 +377,10 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: $button-text-color; color: var(--button-text-color);
flex-shrink: 0; flex-shrink: 0;
border: 1px solid $button-base-color-darker; border: 1px solid var(--button-base-color-darker);
border-radius: 3px; border-radius: 3px;
text-decoration: none; text-decoration: none;
float: left; float: left;
...@@ -405,7 +405,7 @@ ...@@ -405,7 +405,7 @@
position: absolute; position: absolute;
background: #eee; background: #eee;
box-shadow: 0 3px 3px rgba(0,0,0,0.5); box-shadow: 0 3px 3px rgba(0,0,0,0.5);
border: 1px solid $button-base-color-darker; border: 1px solid var(--button-base-color-darker);
border-radius: 0 3px 3px 3px; border-radius: 0 3px 3px 3px;
min-width: 150px; min-width: 150px;
} }
...@@ -425,8 +425,8 @@ ...@@ -425,8 +425,8 @@
background-image: url('/css/icons/menu-down.png'); background-image: url('/css/icons/menu-down.png');
} }
.itasks-menu .itasks-menu-content .itasks-menu-label:hover { .itasks-menu .itasks-menu-content .itasks-menu-label:hover {
background: #{$select-base-color}; background: var(--select-base-color);
color: #{$select-text-color}; color: var(--select-text-color);
border-radius: 0; border-radius: 0;
} }
...@@ -435,8 +435,8 @@ ...@@ -435,8 +435,8 @@
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
} }
.itasks-menu .itasks-menu-content .itasks-button:hover { .itasks-menu .itasks-menu-content .itasks-button:hover {
background: #{$select-base-color}; background: var(--select-base-color);
color: #{$select-text-color}; color: var(--select-text-color);
} }
/* Opening menus */ /* Opening menus */
...@@ -449,9 +449,9 @@ ...@@ -449,9 +449,9 @@
} }
.itasks-list { .itasks-list {
color: $list-text-color; color: var(--list-text-color);
background-color: $list-base-color; background-color: var(--list-base-color);
border: 2px solid $list-border-color; border: 2px solid var(--list-border-color);
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
...@@ -466,7 +466,7 @@ ...@@ -466,7 +466,7 @@
align-items: flex-start; align-items: flex-start;
} }
.itasks-list .itasks-listitem:nth-child(even) { .itasks-list .itasks-listitem:nth-child(even) {
background-color: $list-highlight-color; background-color: var(--list-highlight-color);
} }
.itasks-list .itasks-listitem-controls { .itasks-list .itasks-listitem-controls {
flex-direction: row; flex-direction: row;
......
...@@ -9,7 +9,7 @@ div.itasks-loader-spinner { ...@@ -9,7 +9,7 @@ div.itasks-loader-spinner {
height: 40px; height: 40px;
border: 10px solid; border: 10px solid;
border-radius: 100%; 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; margin: auto auto;
animation: itasks-rotation .8s infinite linear; animation: itasks-rotation .8s infinite linear;
} }
......
...@@ -10,23 +10,23 @@ ...@@ -10,23 +10,23 @@
.itasks-button { .itasks-button {
font-size: 8pt; font-size: 8pt;
padding: 3px; padding: 3px;
background: linear-gradient($button-base-color-lighter, $button-base-color); background: linear-gradient(var(--button-base-color-lighter), var(--button-base-color));
background-repeat: none; background-repeat: none;
border: 1px solid $button-base-color-darker; border: 1px solid var(--button-base-color-darker);
border-radius: 3px; border-radius: 3px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: $button-text-color; color: var(--button-text-color);
flex-shrink: 0; flex-shrink: 0;
} }
.itasks-button:hover { .itasks-button:hover {
border-color: $button-base-color-darkest; border-color: var(--button-base-color-darkest);
} }
.itasks-button:active { .itasks-button:active {
background: $button-base-color-lighter; background: var(--button-base-color-lighter);
} }
.itasks-button-label { .itasks-button-label {
...@@ -39,11 +39,11 @@ ...@@ -39,11 +39,11 @@
height: 16px; height: 16px;
} }
.itasks-button-disabled { .itasks-button-disabled {
color: $button-text-color-lighter; color: var(--button-text-color-lighter);
background: linear-gradient($button-base-color-lighter, $button-base-color-darker); background: linear-gradient(var(--button-base-color-lighter), var(--button-base-color-darker));
} }
.itasks-button-disabled:hover { .itasks-button-disabled:hover {
border-color: $button-base-color-darkest; border-color: var(--button-base-color-darkest);
} }
.itasks-button-disabled .itasks-button-icon { .itasks-button-disabled .itasks-button-icon {
opacity: 0.5; opacity: 0.5;
......
...@@ -17,16 +17,16 @@ ...@@ -17,16 +17,16 @@
align-self: stretch; align-self: stretch;
} }
.itasks-choicegrid-header { .itasks-choicegrid-header {
color: $panel-header-text-color; color: var(--panel-header-text-color);
background: $panel-header-base-color; background: var(--panel-header-base-color);
background: linear-gradient($panel-header-base-color-lighter2, $panel-header-base-color-darker2); background: linear-gradient(var(--panel-header-base-color-lighter2), var(--panel-header-base-color-darker2));
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex: none; flex: none;
} }
.itasks-choicegrid-header > div { .itasks-choicegrid-header > div {
border: 1px solid; border: 1px solid;
border-color: $choicegrid-up-color $choicegrid-up-color $choicegrid-down-color $choicegrid-down-color; border-color: var(--choicegrid-up-color) var(--choicegrid-up-color) var(--choicegrid-down-color) var(--choicegrid-down-color);
flex: 1; flex: 1;
padding: 3px 5px; padding: 3px 5px;
font-size: 11px; font-size: 11px;
...@@ -54,8 +54,8 @@ ...@@ -54,8 +54,8 @@
background-color: #eee; background-color: #eee;
} }
.itasks-choicegrid-body > div.itasks-selected { .itasks-choicegrid-body > div.itasks-selected {
background-color: $select-base-color; background-color: var(--select-base-color);
color: $select-text-color; color: var(--select-text-color);
border: 1px dotted #333; border: 1px dotted #333;
} }
.itasks-choicegrid-body > div > div { .itasks-choicegrid-body > div > div {
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
.itasks-choice-list { .itasks-choice-list {
margin: 0; margin: 0;
border: 1px solid $select-base-color; border: 1px solid var(--select-base-color);
display: flex; display: flex;
overflow: auto; overflow: auto;
flex-direction: column; flex-direction: column;
...@@ -158,7 +158,7 @@ ...@@ -158,7 +158,7 @@
align-self: stretch; align-self: stretch;
} }
.itasks-choice-list-option { .itasks-choice-list-option {
border: solid $select-base-color; border: solid var(--select-base-color);
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
padding: 5px 10px; padding: 5px 10px;
flex-shrink: 0; flex-shrink: 0;
...@@ -167,6 +167,6 @@ ...@@ -167,6 +167,6 @@
border-width: 0; border-width: 0;
} }
.itasks-choice-list-option.itasks-selected { .itasks-choice-list-option.itasks-selected {
background-color: $select-base-color; background-color: var(--select-base-color);
color: $select-text-color; color: var(--select-text-color);
} }
@import "options-default.scss";
@import "main.scss";
@import "options-default.scss";
$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;
//DERIVED
$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;
@import "main.scss";
/* @import "options.scss";
SASS-Themable stylesheet for iTasks javascript UI library @import "themes.scss";