AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-11-17 23:10:22 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: simplify entry vertical linking.

Browse Source 
Now it should be "right" in basically every combination of entries
and buttons.
This commit is contained in:
Lapo Calamandrei 2015-04-22 14:42:58 +02:00
parent 2495edc9fd
commit 4128ff93dd
4 changed files with 86 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
gtk/theme/Adwaita/_common.scss
View File

@ -300,78 +300,6 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 80%); }
}
.linked.vertical > & { //FIXME comment stuff and make the whole thing smarter.
@include entry(normal, $edge: none);
background-image: linear-gradient(to bottom, $base_color);
border-bottom-color: mix($borders_color, $base_color, 30%);
box-shadow: none;
@extend %linked_vertical;
&:focus {
border-color: entry_focus_border($selected_bg_color);
box-shadow: entry_focus_shadow($selected_bg_color),
0 -1px 0 0 entry_focus_border($selected_bg_color);
@extend %linked_vertical;
}
&:insensitive {
@include entry(insensitive, $edge: none);
border-bottom-color: mix($borders_color, $base_color, 30%);
@extend %linked_vertical;
&:backdrop {
@include entry(backdrop-insensitive, $edge: none);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
@extend %linked_vertical;
}
}
&:backdrop {
@include entry(backdrop, $edge: none);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
@extend %linked_vertical;
}
&:first-child {
@include entry(normal, $edge: none);
border-bottom-color: mix($borders_color, $base_color, 30%);
&:focus { @include entry(focus, $edge: none); }
&:insensitive {
@include entry(insensitive, $edge: none);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
@extend %linked_vertical:first-child;
&:backdrop {
@include entry(backdrop-insensitive, $edge: none);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
border-top-style: solid;
}
}
&:backdrop {
@include entry(backdrop, $edge: none);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
@extend %linked_vertical:first-child;
}
}
&:last-child {
@include entry(normal);
background-image: linear-gradient(to bottom, $base_color);
box-shadow: _widget_edge();
&:focus {
border-color: entry_focus_border($selected_bg_color);
box-shadow: entry_focus_shadow($selected_bg_color),
0 -1px 0 0 entry_focus_border($selected_bg_color),
_widget_edge();
@extend %linked_vertical:last-child;
}
&:insensitive {
@include entry(insensitive);
@extend %linked_vertical:last-child;
&:backdrop {
@include entry(backdrop-insensitive);
@extend %linked_vertical:last-child;
}
}
&:backdrop {
@include entry(backdrop);
@extend %linked_vertical:last-child;
}
}
}
.osd & {
@include entry(osd);
&:focus { @include entry(osd-focus); }
@ -380,6 +308,42 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
}
}
// Vertically linked entries
// FIXME: take care of "colored" entries
.linked.vertical {
> .entry { @extend %linked_vertical; }
// remove the edge hilight
> .entry:not(:last-child) { box-shadow: none; }
// add back the focus shadow on focused entries
> .entry:focus:not(last-child) { box-shadow: entry_focus_shadow(); }
// brighter border between linked entries
> .entry:not(:insensitive) + .entry:not(:insensitive) {
border-top-color: mix($borders_color, $base_color, 30%);
background-image: linear-gradient(to bottom, $base_color);
&:backdrop {
border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
background-image: linear-gradient(to bottom, $backdrop_base_color);
}
}
// color back the top border of a linked focused entry following another entry and add back the focus shadow.
// :not(:only-child) is a specificity bump hack.
> .entry:not(:only-child) + .entry:focus {
border-top-color: entry_focus_border();
box-shadow: entry_focus_shadow();
}
// this takes care of coloring the top border of the focused entry subsequent widget
> .entry:focus:not(:only-child) + .entry,
> .entry:focus:not(:only-child) + .button,
> .entry:focus:not(:only-child) + GtkComboBox > .button,
> .entry:focus:not(:only-child) + GtkComboBoxText > .button { border-top-color: entry_focus_border(); }
}
/***********
* Buttons *
***********/
@ -772,18 +736,18 @@ $_dot_color: if($variant=='light', $selected_bg_color,
%linked_vertical_middle {
border-left-style: solid;
border-top-style: none;
border-bottom-style: none;
border-radius: 0;
}
%linked_vertical{
@extend %linked_vertical_middle;
&:first-child {
border-style: solid;
border-radius: 3px 3px 0 0;
}
&:last-child {
border-radius: 0 0 3px 3px;
border-style: solid;
}
&:only-child {
border-radius: 3px;

4
gtk/theme/Adwaita/_drawing.scss
View File

@ -19,12 +19,12 @@
// entries
@function entry_focus_border($fc) {
@function entry_focus_border($fc:$selected_bg_color) {
@if $variant == 'light' { @return $fc; }
@else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc,35%)); }
}
@function entry_focus_shadow($fc) {
@function entry_focus_shadow($fc:$selected_bg_color) {
@return inset 0 0 0 1px $fc;
}

132
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -253,111 +253,6 @@ GtkTextView {
color: #215d9c; }
.entry.image:backdrop {
color: #7e8080; }
.linked.vertical > .entry {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
color: white;
border-color: #1c1f1f;
box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0);
background-image: linear-gradient(to bottom, #292929);
border-bottom-color: #252626;
box-shadow: none; }
.linked.vertical > .entry:focus {
border-color: #0f2b48;
box-shadow: inset 0 0 0 1px #215d9c, 0 -1px 0 0 #0f2b48; }
.linked.vertical > .entry:insensitive {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #323636);
box-shadow: none;
border-bottom-color: #252626; }
.linked.vertical > .entry:insensitive:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
color: #5d6767;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #323636);
box-shadow: none;
border-bottom-color: #272929; }
.linked.vertical > .entry:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
color: #d4d4d4;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #2c2c2c);
box-shadow: none;
border-bottom-color: #272929; }
.linked.vertical > .entry:first-child {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
color: white;
border-color: #1c1f1f;
box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0);
border-bottom-color: #252626; }
.linked.vertical > .entry:first-child:focus {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
box-shadow: inset 0 0 0 1px #215d9c;
border-color: #0f2b48; }
.linked.vertical > .entry:first-child:insensitive {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #323636);
box-shadow: none;
border-bottom-color: #272929; }
.linked.vertical > .entry:first-child:insensitive:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
color: #5d6767;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #323636);
box-shadow: none;
border-bottom-color: #272929;
border-top-style: solid; }
.linked.vertical > .entry:first-child:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
color: #d4d4d4;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #2c2c2c);
box-shadow: none;
border-bottom-color: #272929; }
.linked.vertical > .entry:last-child {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
color: white;
border-color: #1c1f1f;
box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0), 0 1px rgba(238, 238, 236, 0.1);
background-image: linear-gradient(to bottom, #292929);
box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
.linked.vertical > .entry:last-child:focus {
border-color: #0f2b48;
box-shadow: inset 0 0 0 1px #215d9c, 0 -1px 0 0 #0f2b48, 0 1px rgba(238, 238, 236, 0.1); }
.linked.vertical > .entry:last-child:insensitive {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #323636);
box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
.linked.vertical > .entry:last-child:insensitive:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
color: #5d6767;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #323636);
box-shadow: 0 1px rgba(238, 238, 236, 0); }
.linked.vertical > .entry:last-child:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
color: #d4d4d4;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #2c2c2c);
box-shadow: 0 1px rgba(238, 238, 236, 0); }
.osd .entry {
background-color: transparent;
background-image: linear-gradient(to bottom, #1c1f1f, #232525 3px, #292929 90%);
@ -399,6 +294,25 @@ GtkTextView {
text-shadow: none;
icon-shadow: none; }
.linked.vertical > .entry:not(:last-child) {
box-shadow: none; }
.linked.vertical > .entry:focus:not(last-child) {
box-shadow: inset 0 0 0 1px #215d9c; }
.linked.vertical > .entry:not(:insensitive) + .entry:not(:insensitive) {
border-top-color: #252626;
background-image: linear-gradient(to bottom, #292929); }
.linked.vertical > .entry:not(:insensitive) + .entry:not(:insensitive):backdrop {
border-top-color: #272929;
background-image: linear-gradient(to bottom, #2c2c2c); }
.linked.vertical > .entry:not(:only-child) + .entry:focus {
border-top-color: #0f2b48;
box-shadow: inset 0 0 0 1px #215d9c; }
.linked.vertical > .entry:focus:not(:only-child) + .entry,
.linked.vertical > .entry:focus:not(:only-child) + .button,
.linked.vertical > .entry:focus:not(:only-child) + GtkComboBox > .button,
.linked.vertical > .entry:focus:not(:only-child) + GtkComboBoxText > .button {
border-top-color: #0f2b48; }
/***********
* Buttons *
***********/
@ -1242,22 +1156,22 @@ GtkComboBox.combobox-entry .titlebar .button.titlebutton,
border-radius: 3px;
border-style: solid; }
.linked.vertical > .entry, .linked.vertical > .entry:focus, .linked.vertical > .entry:insensitive, .linked.vertical > .entry:insensitive:backdrop, .linked.vertical > .entry:backdrop, .linked.vertical > .button, .header-bar .linked.vertical > .button.titlebutton,
.linked.vertical > .entry, .linked.vertical > .button, .header-bar .linked.vertical > .button.titlebutton,
.titlebar .linked.vertical > .button.titlebutton, .linked.vertical > .button:hover, .linked.vertical > .button:active, .linked.vertical > .button:checked, .linked.vertical > .button:backdrop, .linked.vertical > GtkComboBoxText > .button,
.linked.vertical > GtkComboBox > .button {
border-left-style: solid;
border-top-style: none;
border-bottom-style: none;
border-radius: 0; }
.linked.vertical > .entry:first-child, .linked.vertical > .button:first-child, .header-bar .linked.vertical > .button.titlebutton:first-child,
.titlebar .linked.vertical > .button.titlebutton:first-child, .linked.vertical > GtkComboBoxText:first-child > .button,
.linked.vertical > GtkComboBox:first-child > .button {
border-style: solid;
border-radius: 3px 3px 0 0; }
.linked.vertical > .entry:last-child, .linked.vertical > .button:last-child, .header-bar .linked.vertical > .button.titlebutton:last-child,
.titlebar .linked.vertical > .button.titlebutton:last-child, .linked.vertical > GtkComboBoxText:last-child > .button,
.linked.vertical > GtkComboBox:last-child > .button {
border-radius: 0 0 3px 3px; }
border-radius: 0 0 3px 3px;
border-style: solid; }
.linked.vertical > .entry:only-child, .linked.vertical > .button:only-child, .header-bar .linked.vertical > .button.titlebutton:only-child,
.titlebar .linked.vertical > .button.titlebutton:only-child, .linked.vertical > GtkComboBoxText:only-child > .button,
.linked.vertical > GtkComboBox:only-child > .button {

132
gtk/theme/Adwaita/gtk-contained.css
View File

@ -253,111 +253,6 @@ GtkTextView {
color: #4a90d9; }
.entry.image:backdrop {
color: #a3a6a7; }
.linked.vertical > .entry {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
color: black;
border-color: #a1a1a1;
box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0);
background-image: linear-gradient(to bottom, #ffffff);
border-bottom-color: #e2e2e2;
box-shadow: none; }
.linked.vertical > .entry:focus {
border-color: #4a90d9;
box-shadow: inset 0 0 0 1px #4a90d9, 0 -1px 0 0 #4a90d9; }
.linked.vertical > .entry:insensitive {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
color: #8d9091;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: none;
border-bottom-color: #e2e2e2; }
.linked.vertical > .entry:insensitive:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: none;
border-bottom-color: #e4e4e4; }
.linked.vertical > .entry:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
color: #323232;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, white);
box-shadow: none;
border-bottom-color: #e4e4e4; }
.linked.vertical > .entry:first-child {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
color: black;
border-color: #a1a1a1;
box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0);
border-bottom-color: #e2e2e2; }
.linked.vertical > .entry:first-child:focus {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
box-shadow: inset 0 0 0 1px #4a90d9;
border-color: #4a90d9; }
.linked.vertical > .entry:first-child:insensitive {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
color: #8d9091;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: none;
border-bottom-color: #e4e4e4; }
.linked.vertical > .entry:first-child:insensitive:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: none;
border-bottom-color: #e4e4e4;
border-top-style: solid; }
.linked.vertical > .entry:first-child:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
color: #323232;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, white);
box-shadow: none;
border-bottom-color: #e4e4e4; }
.linked.vertical > .entry:last-child {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
color: black;
border-color: #a1a1a1;
box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0), 0 1px white;
background-image: linear-gradient(to bottom, #ffffff);
box-shadow: 0 1px white; }
.linked.vertical > .entry:last-child:focus {
border-color: #4a90d9;
box-shadow: inset 0 0 0 1px #4a90d9, 0 -1px 0 0 #4a90d9, 0 1px white; }
.linked.vertical > .entry:last-child:insensitive {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
color: #8d9091;
border-color: #a1a1a1;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: 0 1px white; }
.linked.vertical > .entry:last-child:insensitive:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: 0 1px rgba(255, 255, 255, 0); }
.linked.vertical > .entry:last-child:backdrop {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
color: #323232;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, white);
box-shadow: 0 1px rgba(255, 255, 255, 0); }
.osd .entry {
background-color: transparent;
background-image: linear-gradient(to bottom, #dedede, #f8f8f8 3px, #ffffff 90%);
@ -399,6 +294,25 @@ GtkTextView {
text-shadow: none;
icon-shadow: none; }
.linked.vertical > .entry:not(:last-child) {
box-shadow: none; }
.linked.vertical > .entry:focus:not(last-child) {
box-shadow: inset 0 0 0 1px #4a90d9; }
.linked.vertical > .entry:not(:insensitive) + .entry:not(:insensitive) {
border-top-color: #e2e2e2;
background-image: linear-gradient(to bottom, #ffffff); }
.linked.vertical > .entry:not(:insensitive) + .entry:not(:insensitive):backdrop {
border-top-color: #e4e4e4;
background-image: linear-gradient(to bottom, white); }
.linked.vertical > .entry:not(:only-child) + .entry:focus {
border-top-color: #4a90d9;
box-shadow: inset 0 0 0 1px #4a90d9; }
.linked.vertical > .entry:focus:not(:only-child) + .entry,
.linked.vertical > .entry:focus:not(:only-child) + .button,
.linked.vertical > .entry:focus:not(:only-child) + GtkComboBox > .button,
.linked.vertical > .entry:focus:not(:only-child) + GtkComboBoxText > .button {
border-top-color: #4a90d9; }
/***********
* Buttons *
***********/
@ -1242,22 +1156,22 @@ GtkComboBox.combobox-entry .titlebar .button.titlebutton,
border-radius: 3px;
border-style: solid; }
.linked.vertical > .entry, .linked.vertical > .entry:focus, .linked.vertical > .entry:insensitive, .linked.vertical > .entry:insensitive:backdrop, .linked.vertical > .entry:backdrop, .linked.vertical > .button, .header-bar .linked.vertical > .button.titlebutton,
.linked.vertical > .entry, .linked.vertical > .button, .header-bar .linked.vertical > .button.titlebutton,
.titlebar .linked.vertical > .button.titlebutton, .linked.vertical > .button:hover, .linked.vertical > .button:active, .linked.vertical > .button:checked, .linked.vertical > .button:backdrop, .linked.vertical > GtkComboBoxText > .button,
.linked.vertical > GtkComboBox > .button {
border-left-style: solid;
border-top-style: none;
border-bottom-style: none;
border-radius: 0; }
.linked.vertical > .entry:first-child, .linked.vertical > .button:first-child, .header-bar .linked.vertical > .button.titlebutton:first-child,
.titlebar .linked.vertical > .button.titlebutton:first-child, .linked.vertical > GtkComboBoxText:first-child > .button,
.linked.vertical > GtkComboBox:first-child > .button {
border-style: solid;
border-radius: 3px 3px 0 0; }
.linked.vertical > .entry:last-child, .linked.vertical > .button:last-child, .header-bar .linked.vertical > .button.titlebutton:last-child,
.titlebar .linked.vertical > .button.titlebutton:last-child, .linked.vertical > GtkComboBoxText:last-child > .button,
.linked.vertical > GtkComboBox:last-child > .button {
border-radius: 0 0 3px 3px; }
border-radius: 0 0 3px 3px;
border-style: solid; }
.linked.vertical > .entry:only-child, .linked.vertical > .button:only-child, .header-bar .linked.vertical > .button.titlebutton:only-child,
.titlebar .linked.vertical > .button.titlebutton:only-child, .linked.vertical > GtkComboBoxText:only-child > .button,
.linked.vertical > GtkComboBox:only-child > .button {