HC: vertical linked buttons,entries & combos

https://bugzilla.gnome.org/show_bug.cgi?id=740860
This commit is contained in:
Jakub Steiner 2014-12-01 17:45:26 +01:00
parent cf7851b948
commit 3eaaf12c04
2 changed files with 242 additions and 5 deletions

View File

@ -225,6 +225,80 @@ GtkLabel {
&:dir(rtl) { border-left-style: solid; }
}
}
.linked.vertical & { //FIXME comment stuff and make the whole thing smarter.
@include entry(normal);
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_glow($selected_bg_color),
0 -1px 0 0 entry_focus_border($selected_bg_color);
@extend %linked_vertical;
}
&:insensitive {
@include entry(insensitive);
border-bottom-color: mix($borders_color, $base_color, 30%);
@extend %linked_vertical;
&:backdrop {
@include entry(backdrop-insensitive);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
@extend %linked_vertical;
}
}
&:backdrop {
@include entry(backdrop);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
@extend %linked_vertical;
}
&:first-child {
@include entry(normal);
border-bottom-color: mix($borders_color, $base_color, 30%);
&:focus { @include entry(focus); }
&:insensitive {
@include entry(insensitive);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
@extend %linked_vertical:first-child;
&:backdrop {
@include entry(backdrop-insensitive);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
border-top-style: solid;
}
}
&:backdrop {
@include entry(backdrop);
border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
@extend %linked_vertical:first-child;
}
}
&:last-child {
@include entry(normal);
border-top-width: 0;
background-image: linear-gradient(to bottom, $base_color);
box-shadow: none;
&:focus {
border-color: entry_focus_border($selected_bg_color);
box-shadow: entry_focus_glow($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;
}
}
}
&.error {
color: $error_color;
border-color: $error_color;
@ -348,9 +422,17 @@ GtkLabel {
// -GtkWidget-wide-separators: true;
// -GtkWidget-horizontal-separator: 0;
// }
.linked &, .linked &:backdrop {
@extend %linked;
}
.linked &,
.linked &:hover,
.linked &:active,
.linked &:checked,
.linked &:backdrop { @extend %linked; }
.linked.vertical &,
.linked.vertical &:hover,
.linked.vertical &:active,
.linked.vertical &:checked,
.linked.vertical &:backdrop { @extend %linked_vertical; }
}
// all the following is for the +|- buttons on inline toolbars, that way
@ -419,9 +501,14 @@ GtkLabel {
}
}
%linked_vertical{
%linked_vertical_middle {
border-left-style: solid;
border-top-style: none;
border-radius: 0;
}
%linked_vertical{
@extend %linked_vertical_middle;
&:first-child {
border-style: solid;
border-radius: 3px 3px 0 0;
@ -668,6 +755,15 @@ GtkComboBox {
@extend %linked:only-child;
}
.linked.vertical > GtkComboBoxText > .button,
.linked.vertical > GtkComboBox > .button { @extend %linked_vertical_middle; }
.linked.vertical > GtkComboBoxText:first-child > .button,
.linked.vertical > GtkComboBox:first-child > .button { @extend %linked_vertical:first-child; }
.linked.vertical > GtkComboBoxText:last-child > .button,
.linked.vertical > GtkComboBox:last-child > .button { @extend %linked_vertical:last-child; }
.linked.vertical > GtkComboBoxText:only-child > .button,
.linked.vertical > GtkComboBox:only-child > .button { @extend %linked_vertical:only-child; }
/************
* Toolbars *
************/

View File

@ -271,6 +271,129 @@
border-left-style: none; }
.linked .entry:last-child:dir(rtl) {
border-left-style: solid; }
.linked.vertical .entry {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #7f7f7f;
box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff;
background-image: linear-gradient(to bottom, #fff);
border-bottom-color: #d8d8d8;
box-shadow: none; }
.linked.vertical .entry:focus {
border-color: entry_focus_border(#000);
box-shadow: entry_focus_glow(#000), 0 -1px 0 0 entry_focus_border(#000); }
.linked.vertical .entry:insensitive {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
color: #7f7f7f;
border-color: #7f7f7f;
background-image: linear-gradient(to bottom, white);
box-shadow: 0 1px #fff;
border-bottom-color: #d8d8d8; }
.linked.vertical .entry:insensitive:backdrop {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
color: #7f7f7f;
background-image: linear-gradient(to bottom, #fff);
box-shadow: 0 1px rgba(255, 255, 255, 0);
border-bottom-color: gainsboro; }
.linked.vertical .entry:backdrop {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
color: #000;
background-image: linear-gradient(to bottom, #fff);
box-shadow: 0 1px rgba(255, 255, 255, 0);
border-bottom-color: gainsboro; }
.linked.vertical .entry:first-child {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #7f7f7f;
box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff;
border-bottom-color: #d8d8d8; }
.linked.vertical .entry:first-child:focus {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #000;
box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #cccccc, 0 1px #fff; }
.linked.vertical .entry:first-child:insensitive {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
color: #7f7f7f;
border-color: #7f7f7f;
background-image: linear-gradient(to bottom, white);
box-shadow: 0 1px #fff;
border-bottom-color: gainsboro; }
.linked.vertical .entry:first-child:insensitive:backdrop {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
color: #7f7f7f;
background-image: linear-gradient(to bottom, #fff);
box-shadow: 0 1px rgba(255, 255, 255, 0);
border-bottom-color: gainsboro;
border-top-style: solid; }
.linked.vertical .entry:first-child:backdrop {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
color: #000;
background-image: linear-gradient(to bottom, #fff);
box-shadow: 0 1px rgba(255, 255, 255, 0);
border-bottom-color: gainsboro; }
.linked.vertical .entry:last-child {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
border-color: #7f7f7f;
box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff;
border-top-width: 0;
background-image: linear-gradient(to bottom, #fff);
box-shadow: none; }
.linked.vertical .entry:last-child:focus {
border-color: entry_focus_border(#000);
box-shadow: entry_focus_glow(#000), 0 -1px 0 0 entry_focus_border(#000), _widget_edge(); }
.linked.vertical .entry:last-child:insensitive {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
color: #7f7f7f;
border-color: #7f7f7f;
background-image: linear-gradient(to bottom, white);
box-shadow: 0 1px #fff; }
.linked.vertical .entry:last-child:insensitive:backdrop {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
color: #7f7f7f;
background-image: linear-gradient(to bottom, #fff);
box-shadow: 0 1px rgba(255, 255, 255, 0); }
.linked.vertical .entry:last-child:backdrop {
background-color: transparent;
border-style: solid;
border-width: 1px;
background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
color: #000;
background-image: linear-gradient(to bottom, #fff);
box-shadow: 0 1px rgba(255, 255, 255, 0); }
.entry.error {
color: #cc0000;
border-color: #cc0000; }
@ -554,7 +677,7 @@
border-radius: 3px;
border-style: solid; }
.osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:backdrop, .linked > GtkComboBox > .button:dir(ltr) {
.osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:insensitive, .osd .button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked .button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, .linked > GtkComboBox > .button:dir(ltr) {
border-radius: 0;
border-left-style: none; }
.osd .button:dir(rtl), .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl), .linked > GtkComboBox > .button:dir(rtl) {
@ -573,6 +696,24 @@
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, .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-radius: 0; }
.linked.vertical .entry:first-child, .linked.vertical .button: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, .linked.vertical > GtkComboBoxText:last-child > .button,
.linked.vertical > GtkComboBox:last-child > .button {
border-radius: 0 0 3px 3px; }
.linked.vertical .entry:only-child, .linked.vertical .button:only-child, .linked.vertical > GtkComboBoxText:only-child > .button,
.linked.vertical > GtkComboBox:only-child > .button {
border-radius: 3px;
border-style: solid; }
.button.flat, .button.flat:backdrop, .menuitem.button.flat, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, .list-row.button:backdrop:hover, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
border-color: transparent;
background-color: transparent;