Fix linked buttons and other fixes

pull/224/head
Satyajit Sahoo 2014-11-23 22:36:45 +05:30
parent e87a3b6f41
commit c3bc33386c
12 changed files with 256 additions and 146 deletions

View File

@ -1,6 +1,11 @@
@import "functions"; @import "functions";
@import "global"; @import "global";
/**************
! GTK settings
***************/
* { * {
-GtkArrow-arrow-scaling: 0.5; -GtkArrow-arrow-scaling: 0.5;
-GtkButton-child-displacement-x: 0; -GtkButton-child-displacement-x: 0;
@ -11,8 +16,6 @@
-GtkButton-interior-focus: true; -GtkButton-interior-focus: true;
-GtkButtonBox-child-min-height: 24; -GtkButtonBox-child-min-height: 24;
-GtkButtonBox-child-internal-pad-y: 1; -GtkButtonBox-child-internal-pad-y: 1;
-GtkCheckButton-indicator-size: 16;
-GtkCheckMenuItem-indicator-size: 14;
-GtkExpander-expander-size: 8; -GtkExpander-expander-size: 8;
-GtkMenu-horizontal-padding: 0; -GtkMenu-horizontal-padding: 0;
-GtkMenu-vertical-padding: 0; -GtkMenu-vertical-padding: 0;
@ -37,10 +40,6 @@
-GtkWindow-resize-grip-width: 0; -GtkWindow-resize-grip-width: 0;
-WnckTasklist-fade-overlay-rect: 0; -WnckTasklist-fade-overlay-rect: 0;
/* legacy stuff */
-GtkWidget-focus-line-width: 1;
-GtkWidget-focus-padding: 0;
outline-color: alpha($selected_bg_color, 0.5); outline-color: alpha($selected_bg_color, 0.5);
outline-style: dashed; outline-style: dashed;
outline-width: 1px; outline-width: 1px;
@ -48,9 +47,11 @@
outline-radius: 2px; outline-radius: 2px;
} }
/***************
* base states * /*************
***************/ ! Base states
*************/
%selected_items { %selected_items {
&, &:focus { &, &:focus {
background-color: $selected_bg_color; background-color: $selected_bg_color;
@ -88,7 +89,7 @@
} }
.gtkstyle-fallback { .gtkstyle-fallback {
background-color: $bg_color; background-color: alpha($bg_color, .5);
color: $fg_color; color: $fg_color;
&:prelight { &:prelight {
@ -129,75 +130,3 @@ GtkLabel {
opacity: 0.5; opacity: 0.5;
text-shadow: none; text-shadow: none;
} }
.view {
color: $text_color;
background-color: $base_color;
&:selected { @extend %selected_items; }
}
.rubberband {
border: 1px solid $selected_bg_color;
background-color: alpha($selected_bg_color, 0.2);
}
/* used by GtkScrolledWindow, shown when content is touch-dragged past boundaries. */
.overshoot { background-color: alpha($selected_bg_color, 0.2); }
GtkAssistant {
.sidebar {
background-color: $base_color;
border-top: 1px solid border_normal($base_color);
&:dir(ltr) { border-right: 1px solid border_normal($base_color); }
&:dir(rtl) { border-left: 1px solid border_normal($base_color); }
GtkLabel {
padding: $spacing ($spacing * 2);
&.highlight { background-color: mix($bg_color, $fg_color, 0.80); }
}
}
&.csd .sidebar { border-top-style: none; }
}
GtkTextView {
/* this will get overridden by .view, needed by gedit line numbers */
background-color: mix($bg_color, $base_color, 0.50);
}
GtkFlowBox .grid-child {
padding: 3px;
border-radius: 3px;
&:selected {
@extend %selected_items;
outline-offset: -2px;
}
}
/*********************
* spinner animation *
*********************/
@keyframes spin {
to { -gtk-icon-transform: rotate(1turn); }
}
.spinner {
background-image: none;
background-color: blue;
opacity: 0; // non spinning spinner makes no sense
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
&:active {
opacity: 1;
animation: spin 1s linear infinite;
&:insensitive { opacity: 0.5; }
}
}

View File

@ -1,4 +1,10 @@
@import "functions"; @import "functions";
@import "global";
/*********
! Buttons
**********/
@mixin linked_button($bg, $shadow) { @mixin linked_button($bg, $shadow) {
border: 1px solid border_normal($bg); border: 1px solid border_normal($bg);
@ -47,7 +53,9 @@
} }
&:active, &:active:hover, &:active, &:active:hover,
&:active:focus, &:active:hover:focus { &:active:focus, &:active:hover:focus,
&:checked, &:checked:hover,
&:checked:focus, &:checked:hover:focus {
box-shadow: inset -1px 0 border_active($bg), box-shadow: inset -1px 0 border_active($bg),
inset 1px 0 alpha($shadow, .07), inset 1px 0 alpha($shadow, .07),
inset 0 1px alpha($shadow, .08), inset 0 1px alpha($shadow, .08),
@ -58,9 +66,11 @@
&:last-child, &:only-child, &:last-child, &:only-child,
&:insensitive:last-child, &:insensitive:only-child, &:insensitive:last-child, &:insensitive:only-child,
&:active *:insensitive:last-child, &:active *:insensitive:only-child { box-shadow: none; } &:active *:insensitive:last-child, &:active *:insensitive:only-child,
&:checked *:insensitive:last-child, &:checked *:insensitive:only-child { box-shadow: none; }
&:active:last-child, &:active:only-child { &:active:last-child, &:active:only-child,
&:checked:last-child, &:checked:only-child {
box-shadow: inset 1px 0 alpha($shadow, .07), box-shadow: inset 1px 0 alpha($shadow, .07),
inset 0 1px alpha($shadow, .08), inset 0 1px alpha($shadow, .08),
inset -1px 0 alpha($shadow, .07); inset -1px 0 alpha($shadow, .07);
@ -90,9 +100,7 @@
&:checked, &:active { &:checked, &:active {
@include linear-gradient(shade($bg, .95)); @include linear-gradient(shade($bg, .95));
}
&:active {
box-shadow: inset 1px 0 alpha($dark_shadow, .07), box-shadow: inset 1px 0 alpha($dark_shadow, .07),
inset 0 1px alpha($dark_shadow, .08), inset 0 1px alpha($dark_shadow, .08),
inset -1px 0 alpha($dark_shadow, .07), inset -1px 0 alpha($dark_shadow, .07),
@ -106,7 +114,8 @@
box-shadow: none; box-shadow: none;
} }
&:active *:insensitive { &:active *:insensitive,
&:checked *:insensitive {
@include linear-gradient(shade($bg, .8)); @include linear-gradient(shade($bg, .8));
box-shadow: none; box-shadow: none;

View File

@ -1,4 +1,10 @@
@import "functions"; @import "functions";
@import "global";
/*******
! Entry
********/
@mixin linked_entry($bg) { @mixin linked_entry($bg) {
border-width: 1px; border-width: 1px;

View File

@ -1,5 +1,14 @@
@import "global"; @import "global";
$modules: () !default;
@mixin exports($name) {
@if (not index($modules, $name)) {
$modules: append($modules, $name) !global;
@content;
}
}
@function alpha($color, $amount) { @function alpha($color, $amount) {
@if type-of($color) == "color" { @if type-of($color) == "color" {
@return fade-out($color, (1 - $amount)); @return fade-out($color, (1 - $amount));

View File

@ -1,4 +1,10 @@
@import "functions"; @import "functions";
@import "global";
/******************
! Grid and flowbox
*******************/
.list { .list {
background-color: shade($bg_color, 0.97); background-color: shade($bg_color, 0.97);
@ -26,4 +32,15 @@
} }
} }
.grid-child { padding: $spacing; } .grid-child {
&, GtkFlowBox & {
padding: $spacing;
border-radius: $roundness;
&:selected {
@extend %selected_items;
outline-offset: -2px;
}
}
}

View File

@ -1,6 +1,12 @@
@import "functions"; @import "functions";
@import "global";
@import "entry"; @import "entry";
/******
! Menu
*******/
GtkTreeMenu, GtkMenuToolButton, GtkComboBox { GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
&.menu, .menu { &.menu, .menu {
background-color: $menu_bg_color; background-color: $menu_bg_color;
@ -113,6 +119,11 @@ GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; } GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; }
/*********
! Popover
**********/
GtkPopover { GtkPopover {
@include border($menu_bg_color); @include border($menu_bg_color);

View File

@ -1,4 +1,10 @@
@import "functions"; @import "functions";
@import "global";
/*********
! Sidebar
**********/
.sidebar { .sidebar {
&, &.view, & .view, & GtkScrolledWindow { &, &.view, & .view, & GtkScrolledWindow {
@ -51,6 +57,17 @@
background-color: $bg_color; background-color: $bg_color;
color: mix($fg_color, $bg_color, 0.1); color: mix($fg_color, $bg_color, 0.1);
&:dir(ltr) { border-width: 0 1px 0 0; }
&:dir(rtl) { border-width: 0 0 0 1px; }
GtkLabel {
padding: $spacing ($spacing * 2);
&.highlight { background-color: mix($bg_color, $fg_color, 0.80); }
}
&.csd .sidebar { border-top-style: none; }
.highlight { font: bold; } .highlight { font: bold; }
} }
} }

View File

@ -0,0 +1,26 @@
@import "functions";
@import "global";
/*******************
! Spinner animation
********************/
@keyframes spin {
to { -gtk-icon-transform: rotate(1turn); }
}
.spinner {
background-image: none;
background-color: $selected_bg_color;
opacity: 0; // non spinning spinner makes no sense
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
&:active {
opacity: 1;
animation: spin 1s linear infinite;
&:insensitive { opacity: 0.5; }
}
}

View File

@ -1,6 +1,16 @@
/************************* @import "functions";
* Check and Radio items * @import "global";
*************************/
/***********************
! Check and Radio items
************************/
* {
-GtkCheckButton-indicator-size: 16;
-GtkCheckMenuItem-indicator-size: 14;
}
@mixin toggle($type, $bg, $fg) { @mixin toggle($type, $bg, $fg) {
color: $fg; color: $fg;
background-image: none; background-image: none;
@ -32,9 +42,46 @@
} }
.radio { .radio { @include toggle("radio", $bg_color, $fg_color); }
@include toggle("radio", $bg_color, $fg_color);
} .check { @include toggle("checkbox", $bg_color, $fg_color); }
.check {
@include toggle("checkbox", $bg_color, $fg_color);
/********
! Switch
*********/
GtkSwitch {
padding: 0;
border-radius: $roundness;
font: bold condensed;
outline-offset: -4px;
&.slider {
border: 1px solid shade($bg_color, 0.8);
background-color: shade($bg_color, 1.08);
&:insensitive {
border-color: shade($bg_color, 0.85);
background-color: shade($bg_color, 0.9);
}
}
&.trough {
border-color: shade($bg_color, 0.8);
background-color: shade($bg_color, 0.95);
color: $fg_color;
&:active {
border-color: shade($selected_bg_color, 0.9);
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&:insensitive {
border-color: shade($bg_color, 0.85);
background-color: shade($bg_color, 0.9);
color: mix($fg_color, $bg_color, 0.5);
}
}
} }

View File

@ -1,6 +1,11 @@
@import "functions"; @import "functions";
@import "global";
@import "button"; @import "button";
/*********
! Toolbar
**********/
@mixin toolbar($bg, $fg) { @mixin toolbar($bg, $fg) {
@include linear-gradient($bg); @include linear-gradient($bg);
@include border($bg); @include border($bg);

View File

@ -1,4 +1,17 @@
@import "functions"; @import "functions";
@import "global";
/***************
! Generic views
****************/
.view {
color: $text_color;
background-color: $base_color;
&:selected { @extend %selected_items; }
}
.cell { .cell {
border-width: 0; border-width: 0;
@ -24,6 +37,68 @@ row {
} }
} }
.content-view {
&.view {
background-color: $base_color;
&:prelight { background-color: alpha($selected_bg_color, 0.6); }
&:selected, &:active { background-color: $selected_bg_color; }
&:insensitive { background-color: shade($base_color, 0.9); }
&.check {
&, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; }
}
}
.subtitle {
font: smaller;
padding: 0 12px;
}
}
GtkIconView {
&.content-view.check { @extend .content-view.check; }
&.view.cell {
&:selected, &:selected:focus {
border: none;
border-radius: 2px;
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
}
.rubberband {
&, &.view, &.content-view.view {
border: 1px solid $selected_bg_color;
border-radius: 0;
background-color: alpha($selected_bg_color, 0.3);
}
}
/* used by GtkScrolledWindow, shown when content is touch-dragged past boundaries. */
.overshoot { background-color: alpha($selected_bg_color, 0.3); }
GdMainIconView.content-view { -GdMainIconView-icon-size: 40; }
/* this will get overridden by .view, needed by gedit line numbers */
GtkTextView { background-color: mix($bg_color, $base_color, 0.50); }
GtkDrawingArea, GtkHTML {
@extend .view;
&:insensitive { background-color: shade($base_color, 0.9); }
}
/*********************
! Column view headers
**********************/
column-header { column-header {
.button { .button {
&, &:active { &, &:active {
@ -48,52 +123,3 @@ column-header {
&:last-child .button { border-width: 0 0 1px 0; } &:last-child .button { border-width: 0 0 1px 0; }
} }
} }
.content-view {
&.view {
background-color: $base_color;
&:prelight { background-color: alpha($selected_bg_color, 0.6); }
&:selected, &:active { background-color: $selected_bg_color; }
&:insensitive { background-color: shade($base_color, 0.9); }
&.check {
&, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; }
}
}
.subtitle {
font: smaller;
padding: 0 12px;
}
}
GtkIconView {
&.content-view.check {
&, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; }
}
&.view.cell {
&:selected, &:selected:focus {
border: none;
border-radius: 2px;
background-color: $selected_bg_color;
background-image: none;
color: $selected_fg_color;
}
}
}
.rubberband {
&, &.view, &.content-view.view {
border-width: 1px;
border-style: solid;
border-color: $selected_bg_color;
border-radius: 0;
background-color: alpha($selected_bg_color, 0.3);
}
}
GdMainIconView.content-view { -GdMainIconView-icon-size: 40; }

View File

@ -1,3 +1,11 @@
@import "functions";
@import "global";
/**************
! Window frame
***************/
.window-frame { .window-frame {
border: none; border: none;
border-radius: $roundness $roundness 0 0; border-radius: $roundness $roundness 0 0;