New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui-corner-* classes missing from 1.3 beta1 themes #5511

Closed
owais opened this Issue Jan 22, 2013 · 3 comments

Comments

Projects
None yet
3 participants
@owais

owais commented Jan 22, 2013

I upgraded from Jquery mobile 1.2 to 1.3Beta1. I noticed that the following classes have been removed from the default theme.

ui-corner-tl
ui-corner-tr
ui-corner-bl
ui-corner-br
ui-corner-top
ui-corner-bottom
ui-corner-right
ui-corner-left
ui-corner-none

These classes were very useful. Were they removed on purpose or accidentally? According to the 1.3 docs, they should still be there but they are not.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 22, 2013

Contributor

They were removed on purpose. We decided to keep ui-corner-all and ui-btn-corner-all and override with border-(left|right|top|bottom)-radius: 0; where we don't want corners. You can also add ui-corner-all to an outer element, and synchronize the corners of elements inside the outer element with border-(left|right|top|bottom)-radius: inherit;. We do that with .ui-btn-inner elements.

This should be equivalent.
If this doesn't help you, please re-open this issue for discussion.

Contributor

gabrielschulhof commented Jan 22, 2013

They were removed on purpose. We decided to keep ui-corner-all and ui-btn-corner-all and override with border-(left|right|top|bottom)-radius: 0; where we don't want corners. You can also add ui-corner-all to an outer element, and synchronize the corners of elements inside the outer element with border-(left|right|top|bottom)-radius: inherit;. We do that with .ui-btn-inner elements.

This should be equivalent.
If this doesn't help you, please re-open this issue for discussion.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jan 22, 2013

Member

@owais

In addition to @gabrielschulhof his comment...

In previous versions the JS applied those corner classes. For performance we changed this to having the JS only apply the ui-corner-all or ui-btn-corner-all class. In the CSS we added rules to make child elements inherit the border-radius for the applicable corners.

If you used those classes for other elements you have to add them to your custom CSS. Note that you don't need the -moz prefixed property anymore. Two examples with the default radius of .6em:

.ui-corner-tl {
    -webkit-border-top-left-radius: .6em;   
    border-top-left-radius: .6em;
}
.ui-corner-bottom {
    -webkit-border-bottom-left-radius: .6em;    
    border-bottom-left-radius: .6em;
    -webkit-border-bottom-right-radius: .6em;   
    border-bottom-right-radius: .6em;
}

@toddparker - Should we mention this change in the 1.3 release blog post?

Member

jaspermdegroot commented Jan 22, 2013

@owais

In addition to @gabrielschulhof his comment...

In previous versions the JS applied those corner classes. For performance we changed this to having the JS only apply the ui-corner-all or ui-btn-corner-all class. In the CSS we added rules to make child elements inherit the border-radius for the applicable corners.

If you used those classes for other elements you have to add them to your custom CSS. Note that you don't need the -moz prefixed property anymore. Two examples with the default radius of .6em:

.ui-corner-tl {
    -webkit-border-top-left-radius: .6em;   
    border-top-left-radius: .6em;
}
.ui-corner-bottom {
    -webkit-border-bottom-left-radius: .6em;    
    border-bottom-left-radius: .6em;
    -webkit-border-bottom-right-radius: .6em;   
    border-bottom-right-radius: .6em;
}

@toddparker - Should we mention this change in the 1.3 release blog post?

@owais

This comment has been minimized.

Show comment
Hide comment
@owais

owais Jan 22, 2013

Great! Thanks guys.

owais commented Jan 22, 2013

Great! Thanks guys.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment