Commit 57ae1167 authored by Bas Lijnse's avatar Bas Lijnse

Inlined sass computed colors

parent 063c7a9f
......@@ -50,8 +50,7 @@
grid-area: header;
color: $panel-header-text-color;
background-color: $panel-header-base-color;
background: linear-gradient(lighten($panel-header-base-color,12.5%), $panel-header-base-color);
background: linear-gradient($panel-header-base-color-lighter, $panel-header-base-color);
font-weight: bold;
font-size: 11px;
height: 25px;
......@@ -126,7 +125,7 @@
font-weight: bold;
font-size: 8px;
line-height: 8px;
background: lighten($panel-header-base-color, 12.5%);
background: $panel-header-base-color-lighter;
border: 1px solid $panel-header-text-color;
border-radius: 2px;
padding: 0 4px 2px 4px;
......@@ -180,7 +179,7 @@
> .#{$prefix}header {
color: $window-header-text-color;
background-color: $window-header-base-color;
background: linear-gradient(lighten($window-header-base-color, 12.5%), $window-header-base-color);
background: linear-gradient($window-header-base-color-lighter, $window-header-base-color);
}
}
.#{$prefix}window.#{$prefix}notification-bubble {
......@@ -210,14 +209,14 @@
position: relative;
min-height: 24px;
background: linear-gradient(lighten($panel-header-base-color,20%), $panel-header-base-color);
background: linear-gradient($panel-header-base-color-lighter2, $panel-header-base-color);
overflow: hidden;
li {
margin: 0;
padding: 0 10px;
border: 1px solid $tab-border-color;
background: darken($tab-base-color, 5%);
background: $tab-base-color-darker;
display: inline-block;
position: relative;
z-index: 0;
......@@ -242,13 +241,13 @@
left: -6px;
border-bottom-right-radius: 5px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 darken($tab-base-color,5%);
box-shadow: 2px 2px 0 $tab-base-color-darker;
}
li:after {
right: -6px;
border-bottom-left-radius: 5px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 darken($tab-base-color,5%);
box-shadow: -2px 2px 0 $tab-base-color-darker;
}
li.#{$prefix}selected {
background: $tab-base-color;
......@@ -335,7 +334,7 @@
flex-direction: row;
align-items: center;
background: linear-gradient(lighten($toolbar-base-color,4%), darken($toolbar-base-color,12.5%));
background: linear-gradient($toolbar-base-color-lighter, $toolbar-base-color-darker);
}
.#{$prefix}toolbar {
......@@ -343,7 +342,7 @@
margin: 0;
padding: 2px;
background: $toolbar-base-color;
background: linear-gradient(lighten($toolbar-base-color,4%), darken($toolbar-base-color,5%));
background: linear-gradient($toolbar-base-color-lighter, $toolbar-base-color-darker2);
> .#{$prefix}menu-item > div {
background-image: url('#{$icon-path}menu-down.png');
......@@ -370,13 +369,13 @@
display: flex;
flex-direction: row;
flex-shrink: 0;
border: 1px solid darken($button-base-color,20%);
border: 1px solid $button-base-color-darker;
border-width: 0 0 1px 0;
}
div.#{$prefix}menu-label {
height: 23px;
background: linear-gradient(lighten($button-base-color,10%), $button-base-color);
background: linear-gradient($button-base-color-lighter, $button-base-color);
background-repeat: none;
background-image: url('#{$icon-path}menu-down.png');
background-repeat: no-repeat;
......@@ -389,7 +388,7 @@
color: $button-text-color;
flex-shrink: 0;
border: 1px solid darken($button-base-color,20%);
border: 1px solid $button-base-color-darker;
border-radius: 3px;
text-decoration: none;
float: left;
......@@ -414,7 +413,7 @@
position: absolute;
background: #eee;
box-shadow: 0 3px 3px rgba(0,0,0,0.5);
border: 1px solid darken($button-base-color,20%);
border: 1px solid $button-base-color-darker;
border-radius: 0 3px 3px 3px;
min-width: 150px;
......
......@@ -10,9 +10,9 @@
.#{$prefix}button {
font-size: 8pt;
padding: 3px;
background: linear-gradient(lighten($button-base-color,20% ), $button-base-color);
background: linear-gradient($button-base-color-lighter, $button-base-color);
background-repeat: none;
border: 1px solid darken($button-base-color,20%);
border: 1px solid $button-base-color-darker;
border-radius: 3px;
display: flex;
......@@ -23,11 +23,11 @@
flex-shrink: 0;
&:hover {
border-color: darken($button-base-color,40%);
border-color: $button-base-color-darkest;
}
&:active {
background: lighten($button-base-color,20%);
background: $button-base-color-lighter;
}
}
.#{$prefix}button-label {
......@@ -40,11 +40,11 @@
height: 16px;
}
.#{$prefix}button-disabled {
color: lighten($button-text-color,35%);
background: linear-gradient(lighten($button-base-color,20%), darken($button-base-color,20%));
color: $button-text-color-lighter;
background: linear-gradient($button-base-color-lighter, $button-base-color-darker);
}
.#{$prefix}button-disabled:hover {
border-color: darken($button-base-color,40%);
border-color: $button-base-color-darkest;
}
.#{$prefix}button-disabled .#{$prefix}button-icon {
opacity: 0.5;
......
......@@ -19,16 +19,14 @@
.#{$prefix}choicegrid-header {
color: $panel-header-text-color;
background: $panel-header-base-color;
background: linear-gradient(lighten($panel-header-base-color,20%), darken($panel-header-base-color,10%) );
background: linear-gradient($panel-header-base-color-lighter2, $panel-header-base-color-darker2);
display: flex;
flex-direction: row;
flex: none;
}
.#{$prefix}choicegrid-header > div {
$up-color: lighten($panel-header-base-color, 5%);
$down-color: lighten($panel-header-base-color, 15%);
border: 1px solid;
border-color: $up-color $up-color $down-color $down-color;
border-color: $choicegrid-up-color $choicegrid-up-color $choicegrid-down-color $choicegrid-down-color;
flex: 1;
padding: 3px 5px;
font-size: 11px;
......
......@@ -11,4 +11,16 @@ $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";
......@@ -2,19 +2,33 @@ $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;
......@@ -26,5 +40,8 @@ $list-text-color: #000;
$list-highlight-color: #eee;
$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