Simplify CSS boder/background styles for listing elements with focus indicator

Thomas Bruederli

2014-06-03 e75d5e813a900d65ad3e853d3f3f214c0536dba7

Simplify CSS boder/background styles for listing elements with focus indicator

 skins/larry/addressbook.css

@@ -139,32 +139,20 @@
}

#contacts-table .contact td.name {
    background-position: 6px -1603px;
}

#contacts-table.focus .contact.focused td.name {
    background-position: 4px -1603px;
}

#contacts-table .contact.selected td.name {
    background-position: 6px -1627px;
    background-position: 4px -1627px;
    font-weight: bold;
}

#contacts-table.focus .contact.selected.focused td.name {
    background-position: 4px -1627px;
}

#contacts-table .group td.name {
    background-position: 6px -1555px;
}

#contacts-table.focus .group.focused td.name {
    background-position: 4px -1555px;
}

#contacts-table .group.selected td.name {
    background-position: 6px -1579px;
    background-position: 4px -1579px;
    font-weight: bold;
}


 skins/larry/styles.css

@@ -1166,6 +1166,7 @@
}

.listbox .listitem a,
.listbox .listitem span,
.listbox .tablink a,
.listing tbody td,
.listing li a {
@@ -1200,31 +1201,22 @@
/* This padding-left minus the focused padding left should be half of the focused border-left */
.listing thead tr td:first-child,
.listing tbody tr td:first-child {
    border-left: 0;
    border-left: 2px solid transparent;
    padding-left: 6px;
}

.listing.iconized thead tr td:first-child,
.listing.iconized tbody tr td:first-child {
    padding-left: 36px;
    padding-left: 34px;
}

/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
.listing.focus tbody tr.focused > td:first-child {
    border-left: 2px solid #b0ccd7;
    padding-left: 4px;
}

.listing.iconized.focus tbody tr.focused > td:first-child {
    padding-left: 34px;
}

.listing.focus tbody tr.selected.focused > td:first-child {
    border-left-color: #9ec2d0;
}

.listing.inconized.focus tr.focused td:first-child {
    padding-left: 34px;
}

.listbox .listitem.selected,
@@ -1297,7 +1289,10 @@
    text-overflow: ellipsis;
}

ul.treelist li a:focus {
ul.treelist li a:focus,
ul.listing .listitem a:focus,
ul.listing .listitem span:focus,
ul.listing.focus .listitem.focused span {
    color: #fff !important;
    background-color: rgba(73,180,210,0.6);
    text-shadow: 0px 1px 1px #666;
@@ -1568,14 +1563,13 @@
/* This padding-left minus the focused padding left should be half of the focused border-left */
.records-table thead tr td:first-child,
.records-table tbody tr td:first-child {
    border-left: 0;
    padding-left: 6px;
    border-left: 2px solid transparent;
    padding-left: 4px;
}

/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
.records-table.focus tbody tr.focused > td:first-child {
    border-left: 2px solid #b0ccd7;
    padding-left: 4px;
}

.records-table.focus tbody tr.selected.focused > td:first-child {
@@ -2770,6 +2764,10 @@
    background: none;
}

.boxcontent.tabbed.ui-tabs {
    padding: 10px;
}

.ui-tabs .tabsbar.ui-tabs-nav {
    margin-bottom: 10px;
}