mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-11-16 13:40:31 +00:00
HC: vertical linked buttons,entries & combos
https://bugzilla.gnome.org/show_bug.cgi?id=740860
This commit is contained in:
Jakub Steiner
parent
cf7851b948
commit
3eaaf12c04
@ -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 *
|
||||
************/
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user