Tweak things

pull/224/head
Satyajit Sahoo 2014-12-14 17:52:13 +05:30
parent 63b89ba1f0
commit e2dc6ca7cc
7 changed files with 51 additions and 50 deletions

View File

@ -35,13 +35,14 @@
} }
@mixin entry($bg, $fg) { @mixin entry($bg, $fg) {
@include linear-gradient($bg);
@include border(shade($bg, .9)); @include border(shade($bg, .9));
padding: ($spacing - 1px) ($spacing + 1px); padding: ($spacing - 1px) $spacing;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: $roundness; border-radius: $roundness;
background-color: $bg;
background-image: none;
transition: border 100ms ease; transition: border 100ms ease;
box-shadow: inset 1px 0 alpha($dark_shadow, .1), box-shadow: inset 1px 0 alpha($dark_shadow, .1),
inset 0 1px alpha($dark_shadow, .12), inset 0 1px alpha($dark_shadow, .12),
@ -55,8 +56,8 @@
} }
&:insensitive { &:insensitive {
@include linear-gradient(shade($bg, .9)); background-color: shade($bg, .9);
background-image: none;
color: mix($bg, $fg, .5); color: mix($bg, $fg, .5);
box-shadow: none; box-shadow: none;
} }
@ -69,7 +70,7 @@
color: $selected_fg_color; color: $selected_fg_color;
} }
&.image.left { padding-right: $spacing; } &.image.left { padding-right: ($spacing / 2); }
} }
@include exports("entry") { @include exports("entry") {

View File

@ -5,6 +5,7 @@ $modules: () !default;
@mixin exports($name) { @mixin exports($name) {
@if (not index($modules, $name)) { @if (not index($modules, $name)) {
$modules: append($modules, $name) !global; $modules: append($modules, $name) !global;
@content; @content;
} }
} }
@ -18,15 +19,7 @@ $modules: () !default;
} }
@function shade($color, $amount) { @function shade($color, $amount) {
// @if type-of($color) == "color" {
// @if $amount < 1 {
// @return darken($color, ((1 - $amount) * 100));
// } @else {
// @return lighten($color, (($amount - 1) * 100));
// }
// } @else {
@return unquote("shade(#{$color},#{$amount})"); @return unquote("shade(#{$color},#{$amount})");
// }
} }
@function mix($color1, $color2, $amount) { @function mix($color1, $color2, $amount) {
@ -50,6 +43,10 @@ $modules: () !default;
} }
@mixin linear-gradient($color, $direction: to bottom) { @mixin linear-gradient($color, $direction: to bottom) {
@if $gradient == 0 {
background-color: $color;
background-image: none;
} @else {
$amount: $gradient / 2; $amount: $gradient / 2;
background-color: $color; background-color: $color;
@ -57,6 +54,7 @@ $modules: () !default;
shade($color, (1 + $amount)), shade($color, (1 + $amount)),
shade($color, (1 - $amount)) shade($color, (1 - $amount))
); );
}
} }
@mixin border($color) { @mixin border($color) {

View File

@ -1,15 +1,15 @@
// default color scheme // default color scheme
$bg_color: #eee; $bg_color: #eee;
$fg_color: #444; $fg_color: #333;
$base_color: #fff; $base_color: #fff;
$text_color: #444; $text_color: #333;
$selected_bg_color: #f06860; $selected_bg_color: #f06860;
$selected_fg_color: #fff; $selected_fg_color: #fff;
$tooltip_bg_color: #444; $tooltip_bg_color: #333;
$tooltip_fg_color: #eee; $tooltip_fg_color: #eee;
// dark colors // dark colors
$dark_bg_color: #444; $dark_bg_color: #333;
$dark_fg_color: #eee; $dark_fg_color: #eee;
// shadows // shadows
@ -50,6 +50,6 @@ $lightdm_fg_color: $dark_fg_color;
// widget styles // widget styles
$roundness: 2px; $roundness: 2px;
$spacing: 5px; $spacing: 6px;
$gradient: 0; $gradient: 0;
$contrast: .7; $contrast: .7;

View File

@ -24,9 +24,9 @@
$bg_color: nth($colors, 2); $bg_color: nth($colors, 2);
&.#{$type} { &.#{$type} {
@include linear-gradient($bg_color);
border: 1px solid shade($bg_color, 0.8); border: 1px solid shade($bg_color, 0.8);
background-color: $bg_color;
background-image: none;
color: $fg_color; color: $fg_color;
.button { .button {

View File

@ -18,10 +18,10 @@
@include exports("tooltip") { @include exports("tooltip") {
.tooltip { .tooltip {
@include linear-gradient($tooltip_bg_color);
border: none; border: none;
border-radius: $roundness; border-radius: $roundness;
background-color: $tooltip_bg_color;
background-image: none;
color: $tooltip_fg_color; color: $tooltip_fg_color;
* { background-color: transparent; } * { background-color: transparent; }
@ -111,10 +111,10 @@
@include exports("floatingbar") { @include exports("floatingbar") {
.floating-bar { .floating-bar {
@include linear-gradient($bg_color);
border: 1px solid border_normal($bg_color); border: 1px solid border_normal($bg_color);
border-radius: $roundness; border-radius: $roundness;
background-color: $bg_color;
background-image: none;
color: $fg_color; color: $fg_color;
&.top { &.top {

View File

@ -30,8 +30,8 @@
} }
.progressbar { .progressbar {
background-image: none; @include linear-gradient($selected_bg_color);
background-color: $selected_bg_color;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
@ -48,8 +48,7 @@
&.left.right { box-shadow: none; } &.left.right { box-shadow: none; }
&.vertical { &.vertical {
background-image: none; @include linear-gradient($selected_bg_color, to right);
background-color: $selected_bg_color;
&.bottom { &.bottom {
border-bottom-left-radius: $roundness; border-bottom-left-radius: $roundness;
@ -75,16 +74,17 @@
.level-bar { .level-bar {
&.trough { &.trough {
@include linear-gradient(shade($bg_color, 1.08), to top);
border: 1px solid alpha(border_normal($bg_color), 0.5); border: 1px solid alpha(border_normal($bg_color), 0.5);
background-color: shade($bg_color, 1.08);
background-image: none;
border-radius: $roundness; border-radius: $roundness;
} }
&.fill-block { &.fill-block {
@include linear-gradient($selected_bg_color);
// FIXME: it would be nice to set make fill blocks bigger, but we'd need // FIXME: it would be nice to set make fill blocks bigger, but we'd need
// :nth-child working on discrete indicators // :nth-child working on discrete indicators
background-color: $selected_bg_color;
border-color: transparent; border-color: transparent;
border-radius: 0; border-radius: 0;
@ -123,9 +123,10 @@
&.slider { &.slider {
@include linear-gradient(shade($bg_color, 1.08));
border-radius: 8px; border-radius: 8px;
background-color: shade($bg_color, 1.08);
background-image: none;
/* we will draw the border using box shadow for now */ /* we will draw the border using box shadow for now */
box-shadow: inset 1px 0 border_normal($bg_color), box-shadow: inset 1px 0 border_normal($bg_color),
inset 0 1px border_normal($bg_color), inset 0 1px border_normal($bg_color),
@ -147,8 +148,8 @@
} }
&:insensitive { &:insensitive {
background-color: shade($bg_color, 0.9); @include linear-gradient(shade($bg_color, 0.9));
background-image: none;
box-shadow: inset 1px 0 border_insensitive($bg_color), box-shadow: inset 1px 0 border_insensitive($bg_color),
inset 0 1px border_insensitive($bg_color), inset 0 1px border_insensitive($bg_color),
inset -1px 0 border_insensitive($bg_color), inset -1px 0 border_insensitive($bg_color),
@ -170,26 +171,27 @@
&.trough { &.trough {
@include linear-gradient(shade($bg_color, 1.08));
margin: 7px 0; margin: 7px 0;
border: 1px solid alpha(border_normal($bg_color), 0.5); border: 1px solid alpha(border_normal($bg_color), 0.5);
border-radius: $roundness; border-radius: $roundness;
background-color: shade($bg_color, 1.08);
background-image: none;
&:insensitive { background-color: shade($bg_color, 0.9); } &:insensitive { @include linear-gradient(shade($bg_color, 0.9)); }
&.vertical { margin: 0 7px; } &.vertical { margin: 0 7px; }
} }
&.highlight { &.highlight {
&, &.left, &.bottom { &, &.left, &.bottom {
@include linear-gradient($selected_bg_color);
border-color: $selected_bg_color; border-color: $selected_bg_color;
background-color: $selected_bg_color;
background-image: none;
&:insensitive { &:insensitive {
@include linear-gradient(shade($bg_color, 0.8));
border-color: shade($bg_color, 0.7); border-color: shade($bg_color, 0.7);
background-color: shade($bg_color, 0.8);
} }
} }
} }

View File

@ -14,7 +14,7 @@
color: $fg; color: $fg;
&:insensitive { &:insensitive {
@include linear-gradient(darken($bg, 10%)); @include linear-gradient(shade($bg, .9));
color: mix($fg, $bg, .5); color: mix($fg, $bg, .5);
} }
@ -105,7 +105,7 @@
&:active, &:active:hover { &:active, &:active:hover {
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
color: darken($selected_bg_color, 10%); color: shade($selected_bg_color, .9);
box-shadow: none; box-shadow: none;
} }