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 "global";
/**************
! GTK settings
***************/
* {
-GtkArrow-arrow-scaling: 0.5;
-GtkButton-child-displacement-x: 0;
@ -11,8 +16,6 @@
-GtkButton-interior-focus: true;
-GtkButtonBox-child-min-height: 24;
-GtkButtonBox-child-internal-pad-y: 1;
-GtkCheckButton-indicator-size: 16;
-GtkCheckMenuItem-indicator-size: 14;
-GtkExpander-expander-size: 8;
-GtkMenu-horizontal-padding: 0;
-GtkMenu-vertical-padding: 0;
@ -37,10 +40,6 @@
-GtkWindow-resize-grip-width: 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-style: dashed;
outline-width: 1px;
@ -48,9 +47,11 @@
outline-radius: 2px;
}
/***************
* base states *
***************/
/*************
! Base states
*************/
%selected_items {
&, &:focus {
background-color: $selected_bg_color;
@ -88,7 +89,7 @@
}
.gtkstyle-fallback {
background-color: $bg_color;
background-color: alpha($bg_color, .5);
color: $fg_color;
&:prelight {
@ -129,75 +130,3 @@ GtkLabel {
opacity: 0.5;
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 "global";
/*********
! Buttons
**********/
@mixin linked_button($bg, $shadow) {
border: 1px solid border_normal($bg);
@ -47,7 +53,9 @@
}
&: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),
inset 1px 0 alpha($shadow, .07),
inset 0 1px alpha($shadow, .08),
@ -58,9 +66,11 @@
&:last-child, &: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),
inset 0 1px alpha($shadow, .08),
inset -1px 0 alpha($shadow, .07);
@ -90,9 +100,7 @@
&:checked, &:active {
@include linear-gradient(shade($bg, .95));
}
&:active {
box-shadow: inset 1px 0 alpha($dark_shadow, .07),
inset 0 1px alpha($dark_shadow, .08),
inset -1px 0 alpha($dark_shadow, .07),
@ -106,7 +114,8 @@
box-shadow: none;
}
&:active *:insensitive {
&:active *:insensitive,
&:checked *:insensitive {
@include linear-gradient(shade($bg, .8));
box-shadow: none;

View File

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

View File

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

View File

@ -1,4 +1,10 @@
@import "functions";
@import "global";
/******************
! Grid and flowbox
*******************/
.list {
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 "global";
@import "entry";
/******
! Menu
*******/
GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
&.menu, .menu {
background-color: $menu_bg_color;
@ -113,6 +119,11 @@ GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; }
/*********
! Popover
**********/
GtkPopover {
@include border($menu_bg_color);

View File

@ -1,4 +1,10 @@
@import "functions";
@import "global";
/*********
! Sidebar
**********/
.sidebar {
&, &.view, & .view, & GtkScrolledWindow {
@ -51,6 +57,17 @@
background-color: $bg_color;
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; }
}
}

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 @@
/*************************
* Check and Radio items *
*************************/
@import "functions";
@import "global";
/***********************
! Check and Radio items
************************/
* {
-GtkCheckButton-indicator-size: 16;
-GtkCheckMenuItem-indicator-size: 14;
}
@mixin toggle($type, $bg, $fg) {
color: $fg;
background-image: none;
@ -32,9 +42,46 @@
}
.radio {
@include toggle("radio", $bg_color, $fg_color);
}
.check {
@include toggle("checkbox", $bg_color, $fg_color);
.radio { @include toggle("radio", $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 "global";
@import "button";
/*********
! Toolbar
**********/
@mixin toolbar($bg, $fg) {
@include linear-gradient($bg);
@include border($bg);

View File

@ -1,4 +1,17 @@
@import "functions";
@import "global";
/***************
! Generic views
****************/
.view {
color: $text_color;
background-color: $base_color;
&:selected { @extend %selected_items; }
}
.cell {
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 {
.button {
&, &:active {
@ -48,52 +123,3 @@ column-header {
&: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 {
border: none;
border-radius: $roundness $roundness 0 0;