Changes between Initial Version and Version 1 of Ticket #15155, comment 2


Ignore:
Timestamp:
Mar 22, 2017, 9:26:13 PM (5 years ago)
Author:
Ryan J Ollos
Comment:

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #15155, comment 2

    initial v1  
    1 No.  Setting the background colour is the wrong fix.  The tick needs to be in the Clickable: active state colour, not the default state colour.  The HTML for the checkboxradio checkbox item is this.  Note that we have ui-button and ui-state-active in the class list for <label> while ui-icon is in the first enclosed <span>.
     1No.  Setting the background colour is the wrong fix.  The tick needs to be in the Clickable: active state colour, not the default state colour.  The HTML for the checkboxradio checkbox item is this.  Note that we have `ui-button` and `ui-state-active` in the class list for `<label>` while ui-icon is in the first enclosed `<span>`.
    22
     3{{{#!text/html
    34<label for="messages-totems-newsfeed" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-checked ui-state-active">
    45<span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-check ui-state-checked"></span>
     
    67Newsfeed
    78</label>
     9}}}
    810
    911Now look at the jquery-ui.css file from themeroller.  It contains this:-
    1012
     13{{{#!css
    1114.ui-state-active .ui-icon,
    1215.ui-button:active .ui-icon {
     
    1720        background-image: url("images/ui-icons_cccccc_256x240.png");
    1821}
     22}}}
    1923
    2024The second of these rules is firing because it matches as closely as ".ui-state-active .ui-icon" but is appears later.  The ".ui-button:active .ui-icon" does not fire because the ":active" pseudo-class isn't present.  The correct fix is to use:-
    2125
     26{{{#!css
    2227.ui-state-active .ui-icon,
    23 '''.ui-button.ui-state-active .ui-icon,
    24 '''.ui-button:active .ui-icon {
     28.ui-button.ui-state-active .ui-icon,
     29.ui-button:active .ui-icon {
    2530        background-image: url("images/ui-icons_222222_256x240.png");
    2631}
     32}}}
    2733
    28 This will sort out any other non-button elements that use .ui-button styling.
     34This will sort out any other non-button elements that use `.ui-button` styling.