Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha User nak1's Avatar
    Join Date
    Jan 2008
    Posts
    266
    Vote Rating
    0
    nak1 is an unknown quantity at this point

      0  

    Default Checkbox colors

    Checkbox colors


    I've created a new color for my site using the SASS process and now I'm noticing that my checkboxes aren't really contrasting as to when an item is checked or not. Is there a way to manually override that?

    checkbox.png
    No longer a Newbie

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Looks like the $form-light is the variable to be used when it is unchecked and $active-color is the color to be used when it is checked.

    Code:
      .x-field .x-input-radio,
      .x-field .x-input-checkbox {
        position: relative;
        &:after {
          @include checkmark($form-light);
        }
        &:checked:after {
          @include checkmark($active-color);
        }
      }
    
    @mixin checkmark($color: #000){
      @extend .x-checkmark-base;
      background-color: $color;
    }
    Let me know if that works for you.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User nak1's Avatar
    Join Date
    Jan 2008
    Posts
    266
    Vote Rating
    0
    nak1 is an unknown quantity at this point

      0  

    Default


    As always, thanks for the prompt response. I ended up having to write a special override for the checkbox style, as the $active-color altered the onclick color for the list as well. Here's the css class I had to override:

    .x-field .x-input-radio:checked::after, .x-field .x-input-checkbox:checked::after {
    background-color: #900;
    }
    No longer a Newbie

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    8
    Vote Rating
    0
    sonia.bonvicin is on a distinguished road

      0  

    Default


    ..and if I want to change the css style of one checkbox and not for the whole project?
    Thank you in advance!

  5. #5
    Sencha Premium Member Matt Jenkins's Avatar
    Join Date
    Mar 2013
    Location
    Insch, Aberdeenshire, Scotland
    Posts
    24
    Vote Rating
    3
    Matt Jenkins is on a distinguished road

      0  

    Default


    Doesn't seem to work any more since 2.2... anyone got any ideas?