* Rewirte spinbutton and linked entry, button. Implement inline-toolbar button linked.

pull/437/head
Megax 2016-05-15 13:58:00 +02:00
parent 94e5f7a717
commit 3cb2ee87da
3 changed files with 120 additions and 72 deletions

View File

@ -93,3 +93,12 @@ $modules: () !default;
@return transparentize(black, $_lbg * .8);
}
}
// entries
@function entry_focus_border($fc:$selected_bg_color) {
@if $variant == 'light' {
@return $fc;
} @else {
@return if($fc == $selected_bg_color, $selected_borders_color, shade($fc, .65));
}
}

View File

@ -367,90 +367,61 @@
min-width: 24px;
@include button(shade($bg_color, 1.2), $fg_color);
&.linked, .linked & { @include linked_button(shade($bg_color, 1.2)); }
.linked > & { @include linked_button(shade($bg_color, 1.2)); }
&.linked.vertical, .linked.vertical & { @include linked_vertical_button(shade($bg_color, 1.2)); }
.linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); }
spinbutton & {
.inline-toolbar & { @extend %linked_button; }
}
spinbutton {
button {
color: mix($text_color, $base_color, .4);
padding: $spacing ($spacing * 2);
border: 0;
border-radius: 0;
border-style: none;
background-color: transparent;
background-image: none;
box-shadow: inset 1px 0 shade($base_color, .9);
&:disabled {
color: mix($text_color, $base_color, .7);
box-shadow: inset 1px 0 shade($base_color, .85);
}
&:active, &:checked, &:hover { color: $text_color; }
&:first-child {
border-radius: $roundness 0 0 $roundness;
box-shadow: none;
}
&:last-child { border-radius: 0 $roundness $roundness 0; }
&:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, .9); }
&:disabled { color: mix($text_color, $base_color, .7); }
}
spinbutton.vertical & {
border: 1px solid shade($bg_color, .8);
border-radius: $roundness;
background-color: shade($bg_color, 1.08);
background-image: none;
color: $fg_color;
box-shadow: none;
&:hover {
border-color: shade($bg_color, .7);
background-color: shade($bg_color, 1.1);
background-image: none;
&:not(.vertical) {
entry {
// reset all the other props since the spinbutton node is styled here
border-radius: 0;
}
&:active, &:checked {
border-color: shade($bg_color, .8);
background-color: shade($bg_color, .95);
background-image: none;
}
button {
@extend %linked_middle;
&:active:hover, &:checked:hover {
border-color: shade($bg_color, .7);
}
&:first-child { border-radius: $roundness 0 0 $roundness; }
&:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, .7); }
&:disabled {
border-color: shade($bg_color, .85);
background-color: shade($bg_color, .9);
background-image: none;
}
&:first-child {
border-width: 1px;
border-bottom-width: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&:last-child {
border-width: 1px;
border-top-width: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
&:last-child { border-radius: 0 $roundness $roundness 0; }
}
}
spinbutton.vertical entry {
border-width: 1px;
border-style: solid;
border-radius: 0;
}
&.vertical {
entry {
// reset all the other props since the spinbutton node is styled here
border-radius: 0;
}
button {
@extend %linked_vertical_entry;
&:first-child {
border-width: 1px;
border-bottom-width: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&:last-child {
border-width: 1px;
border-top-width: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
}
}
}

View File

@ -14,6 +14,11 @@
border-right-width: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
&:dir(rtl) {
border-left-width: 0;
border-right-width: 1px;
}
}
&:last-child {
@ -22,10 +27,18 @@
border-left-width: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
&:dir(rtl) {
border-left-width: 1px;
border-right-width: 0;
}
}
&:only-child, &:first-child:only-child {
border-width: 1px;
}
&:only-child {
border-width: 1px;
border-radius: $roundness;
}
}
@ -39,21 +52,36 @@
&:first-child {
border-width: 1px;
border-radius: $roundness;
border-top-width: 1px;
border-bottom-width: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&:dir(rtl) {
border-top-width: 0;
border-bottom-width: 1px;
}
}
&:last-child {
border-width: 1px;
border-radius: $roundness;
border-top-width: 0;
border-bottom-width: 1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
&:dir(rtl) {
border-top-width: 1px;
border-bottom-width: 0;
}
}
&:only-child, &:first-child:only-child {
border-width: 1px;
}
&:only-child {
border-width: 1px;
border-radius: $roundness;
}
}
@ -112,8 +140,48 @@
entry {
@include entry($base_color, $text_color);
&.linked, .linked & { @extend %linked_entry; }
.linked:not(.vertical) > & { @extend %linked_entry; }
.linked:not(.vertical) > &:focus + &,
.linked:not(.vertical) > &:focus + button,
.linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); }
&.linked.vertical, .linked.vertical & { @extend %linked_vertical_entry; }
.linked:not(.vertical) > &:drop(active) + &,
.linked:not(.vertical) > &:drop(active) + button,
.linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
.linked.vertical > & {
@extend %linked_vertical_entry;
// brighter border between linked entries
&:not(:disabled) + entry:not(:disabled) {
border-top-color: mix($borders_color, $base_color, .3);
&:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, .3); }
}
// brighter border between linked insensitive entries
&:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, .3); }
// color back the top border of a linked focused entry following another entry.
// :not(:only-child) is a specificity bump hack.
+ entry:focus:not(:only-child) { border-top-color: entry_focus_border(); }
+ entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
// this takes care of coloring the top border of the focused entry subsequent widget.
// :not(:only-child) is a specificity bump hack.
&:focus:not(:only-child) {
+ entry,
+ button,
+ combobox > box > button.combo { border-top-color: entry_focus_border(); }
}
&:drop(active):not(:only-child) {
+ entry,
+ button,
+ combobox > box > button.combo { border-top-color: $drop_target_color; }
}
}
}
}