Arty
Well-known member
1. Class .chosen-container:
background color and color are already parts of textCtrl property, so it doesn't make sense to have it twice
box-shadow doesn't belong there. That element is supposed to look like text input, so why does it add extra style and its hardcoded in css template? It only causes problems with third party styles.
2. Class .chosen-container .chosen-results li and entries that follow it.
They use their own styling, hardcoded in css template, yet they behave like link list items from XenForo dropdowns (.blockLinksList a) that have style properties. Why not reuse existing style properties @blockLinksListItem, @blockLinksListItemHover, @blockLinksListItemActive, @blockLinksListItemSelected for some of them where appropriate?
3. This code should be removed because its no longer used. That element uses Font Awesome and there is no background:
Code:
background-color: {xen:property textCtrlBackground};
background-clip: padding-box;
box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
color: {xen:property textCtrlText};
{xen:property textCtrl}
box-shadow doesn't belong there. That element is supposed to look like text input, so why does it add extra style and its hardcoded in css template? It only causes problems with third party styles.
2. Class .chosen-container .chosen-results li and entries that follow it.
They use their own styling, hardcoded in css template, yet they behave like link list items from XenForo dropdowns (.blockLinksList a) that have style properties. Why not reuse existing style properties @blockLinksListItem, @blockLinksListItemHover, @blockLinksListItemActive, @blockLinksListItemSelected for some of them where appropriate?
Code:
.chosen-container .chosen-results li {
display: none;
margin: 0;
list-style: none;
-webkit-touch-callout: none;
{xen:property blockLinksListItem}
}
.chosen-container .chosen-results li.active-result {
display: list-item;
cursor: pointer;
{xen:property blockLinksListItemSelected}
}
.chosen-container .chosen-results li.disabled-result {
display: list-item;
color: @faintTextColor;
cursor: default;
}
.chosen-container .chosen-results li.highlighted {
{xen:property blockLinksListItemHover}
}
3. This code should be removed because its no longer used. That element uses Font Awesome and there is no background:
Code:
.chosen-rtl.chosen-container-single .chosen-single div b {
background-position: 6px 2px;
}
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
background-position: -12px 2px;
}