Commit edc18901 authored by Bas Lijnse's avatar Bas Lijnse

Replaced sass variables by css variables

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