/********* ! Entry * **********/ %linked_entry { border-width: 1px; border-radius: 0; border-right-width: 0; border-left-width: 0; &:first-child { border-width: 1px; border-radius: $roundness; 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 { border-width: 1px; border-radius: $roundness; 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-radius: $roundness; } } %linked_vertical_entry { border-width: 1px; border-radius: 0; border-top-width: 0; border-bottom-width: 0; &: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-radius: $roundness; } } %entry { padding: $spacing; border-width: 1px; border-style: solid; border-radius: $roundness; transition: border 150ms ease; box-shadow: inset 1px 1px alpha($dark_shadow, .06), inset -1px 0 alpha($dark_shadow, .06); &:focus, &:hover, &:active { transition: none; } &:selected, &:selected:focus { background-color: $selected_bg_color; color: $selected_fg_color; } &:disabled { box-shadow: none; } progress { @include linear-gradient($selected_bg_color); border-width: 0; border-radius: $roundness; color: $selected_fg_color; } image.left { padding-right: $spacing; } image.right { padding-left: $spacing; } selection { &:focus, & { @extend %selected_items; } } } @mixin entry($bg, $fg) { @extend %entry; @include linear-gradient($bg, to top); @include border($bg); color: $fg; caret-color: $fg; &:focus, &:active { border-color: border_focus($borders_color); } &:disabled { @include linear-gradient(shade($bg, .9), to top); color: mix($bg, $fg, .5); } } @include exports("entry") { entry { @include entry($base_color, $text_color); .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: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; } } } } }