/********* ! 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 { min-height: 22px; 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); padding: ($spacing - 3px) ($spacing + 3px); 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.vertical > & { @extend %linked_vertical_entry; } } }