Styles overriding

[sairamkiran9]

@mdahardy thanks for reviewing the PR. Do you mean all the parent styles should be reflected in the nested and media styles? Before making changes to your comment, can you please share the expected merged style for the above input? From my understanding you are expecting the below as output for the media part?

'@media (max-width: 650px)': {
       boxShadow: '0 0 10px rgba(0,0,255,1)',
}

[mdahardy]

Yes, that's correct. If a user overrides a style for large screens, it should also override for small screens. So the container background should be '0 0 10px rgba(0,0,255,1)' on all screen sizes.

Your PR fixes this for elements where the media query is not used (e.g., the body in the example below), but not when the media query is used. So for this example:

const survey = new Survey({
    styles: {
        body: {
            background: '#f0f8ff',
        },
        container: {
            boxShadow: '0 0 10px rgba(0,0,255,1)',
            '@media (max-width: 650px)': {
                border: 'none',
            }
        }
    }
});

• The body background should be set to #f0f8ff on all screen types (already good)
• The container box shadow should be set to '0 0 10px rgba(0,0,255,1)' on all screen types (needs to be fixed)
• There should be no container border on small screens (already good)

All other styles should be the default styles in survey.js. Does that make sense?

[sairamkiran9]

@mdahardy sounds good! I'll update the changes as per the suggestions. Thanks!!

[sairamkiran9]

@mdahardy please review the updated changes. Thanks!!