Results 1 to 6 of 6

Thread: Theme bug with extjs-checkbox-ui?

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290
    Answers
    9

    Default Theme bug with extjs-checkbox-ui?

    I'm playing around with creating a custom UI for my checkboxes. One of the things I want to do is change the color of the label. There is a parameter for the '$ui-label-color', but when I specify something, nothing changes. I looked at the definition of the mixin and from what I can tell the $ui-label-color parameter is never used anywhere. Am I missing something? This is in 5.0.1.

    Thanks!

    Jim

  2. #2
    Sencha User
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Hi,

    Can you post what your Checkbox.scss file looks like with the ui defined?
    Also, what is the path where you have the Checkbox.scss file within your custom theme folder?

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290
    Answers
    9

    Default

    The Checkbox.scss file looked like this:

    @include extjs-checkbox-ui(
    $ui: 'filter',
    $ui-label-color: $dark-blue,
    $ui-label-font-weight: bold
    );

    The $dark-blue is a definition defined in packages\mytheme\sass\var\Component.scss. The Checkbox.scss file is found in packages\mytheme\sass\src\form\field\Checkbox.scss.

    I'm currently working around this problem by defining an empty ui in Checkbox.scss like this:

    @include extjs-checkbox-ui(
    $ui: 'filter'
    );

    and using some corresponding code in packages\mytheme\sass\var\form\field\Checkbox.scss which looks like this:

    .x-form-cb-label-filter {
    color: $dark-blue;
    font-weight: bold;
    }

    This works, but it's a bit of a hack.

    Jim

  4. #4
    Sencha User
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Hi,

    Styling the field labels for a field component is a bit unique.

    In order to provide UI styling for a field component OR a field label for any field component you will need to have that named UI mixin defined in both the component's scss file and the Labelable.scss file.

    The reason is that when the 'ui' is changed from 'default' to 'filter' it is applied to all of the field markup in and surrounding the field component which managed the style for the component and its label. So, setting 'filter' as the ui will affect all of the parts contributing to both the input and its label - necessitating a call the the mixin for the component and the labelable file to generate all of the supporting rules.

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290
    Answers
    9

    Default

    Ok, that's good to know, but why does the extjs-checkbox-ui have a parameter for $ui-label-color which says that it controls the color of the checkbox's label? The mixin takes a value for that parameter, but then never uses it. Seems like a bug. It either shouldn't be in the parameter list, or it should be used, shouldn't it? I'm looking at the mixin as defined in ext-theme-neutral/sass/src/form/field/Checkbox.scss.

  6. #6
    Sencha Premium User
    Join Date
    Oct 2015
    Location
    Arvada, CO
    Posts
    76
    Answers
    3

    Default

    Quote Originally Posted by slemmon View Post
    Hi,

    Styling the field labels for a field component is a bit unique.

    In order to provide UI styling for a field component OR a field label for any field component you will need to have that named UI mixin defined in both the component's scss file and the Labelable.scss file.

    The reason is that when the 'ui' is changed from 'default' to 'filter' it is applied to all of the field markup in and surrounding the field component which managed the style for the component and its label. So, setting 'filter' as the ui will affect all of the parts contributing to both the input and its label - necessitating a call the the mixin for the component and the labelable file to generate all of the supporting rules.
    Is this explained somewhere in the docs? This is definitely a useful piece of information that I did not know until stumbling upon this thread...

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •