Improve combobox styling

pull/224/head
Satyajit Sahoo 2014-12-20 17:08:26 +05:30
parent 7dccf6b479
commit 1b99e55e91
2 changed files with 57 additions and 37 deletions

View File

@ -15,6 +15,18 @@
-GtkWidget-focus-line-width: 0; -GtkWidget-focus-line-width: 0;
} }
%linked_middle {
border-radius: 0;
border-left-style: none;
border-right-style: solid;
&:dir(rtl) {
border-radius: 0; // needed when including %linked_middle:dir(rtl)
border-right-style: none;
border-left-style: solid
}
}
%linked_button { %linked_button {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
@ -266,3 +278,48 @@
} }
} }
} }
/******************
! ComboBoxes *
*******************/
@include exports("combobox") {
GtkComboBox {
> .button {
padding: ($spacing - 2px) ($spacing + 1px);
-GtkComboBox-arrow-scaling: 0.5;
-GtkComboBox-shadow-type: none;
}
&.combobox-entry {
.entry, .button { @extend %linked_button; }
}
.separator {
/* always disable separators */
-GtkWidget-wide-separators: true;
-GtkWidget-horizontal-separator: 0;
-GtkWidget-vertical-separator: 0;
border-style: none;
}
}
.linked > GtkComboBox {
> .button {
// the combo is a composite widget so the way we do button linked doesn't
// work, special case needed. See
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
&:dir(ltr) { @extend %linked_middle; } // specificity bump
&:dir(rtl) { @extend %linked_middle:dir(rtl); }
}
&:first-child > .button { @extend %linked_button:first-child; }
&:last-child > .button { @extend %linked_button:last-child; }
&:only-child > .button { @extend %linked_button:only-child; }
}
}

View File

@ -76,40 +76,3 @@
&.linked, .linked & { @extend %linked_entry; } &.linked, .linked & { @extend %linked_entry; }
} }
} }
/******************
! Combobox entry *
*******************/
@include exports("combobox") {
GtkComboBox {
&.combobox-entry {
.entry {
&, &:hover, &:focus, &:active, &:insensitive {
border-width: 1px 0 1px 1px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.button {
&, &:hover, &:focus, &:active, &:insensitive {
border-width: 1px 1px 1px 1px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
}
}
.separator {
/* always disable separators */
-GtkWidget-wide-separators: true;
-GtkWidget-horizontal-separator: 0;
-GtkWidget-vertical-separator: 0;
border-style: none;
}
}
}