Button size - Githubissues

hartmut27 commented 10 years ago

Without skinbuilder, I can define different sizes of buttons, as described here http://purecss.io/buttons/ ("Buttons with different sizes"):

Then I switched from <body> to <body class="pure-skin-mine"> and added the bm_pure_skin.css file.

Since then all buttons are equally sized :-(

<!-- Formular -->
<div id="test">
    <style scoped>

        .button-xsmall {
            font-size: 70%;
        }

        .button-small {
            font-size: 85%;
        }

        .button-large {
            font-size: 110%;
        }

        .button-xlarge {
            font-size: 125%;
        }

    </style>

    <button class="button-xsmall pure-button">Extra Small Button</button>
    <button class="button-small pure-button">Small Button</button>
    <button class="pure-button">Regular Button</button>
    <button class="button-large pure-button">Large Button</button>
    <button class="button-xlarge pure-button">Extra Large Button</button>
</div>

My Skin goes like this: http://yui.github.io/skinbuilder/?mode=pureindex.html?opt=mine,3355BA,F2F2F2,0.4,0.08,3,1.5&h=0,-30,60&n=0,-30,75&l=0,-30,80&b=0,-30,90&mode=pure

Any help is appreciated, thanks!

jconniff commented 10 years ago

These classes .button-xsmall .button-small etc are being overridden by the Skin Builder class .pure-skin-mine .pure-button { which has higher specificity Try adding something like this to the css... .pure-skin-mine .pure-button.button-xsmall { font-size: 70%; }

    .pure-skin-mine .pure-button.button-small {
        font-size: 85%;
    }

    .pure-skin-mine .pure-button.button-large {
        font-size: 110%;
    }

    .pure-skin-mine .pure-button.button-xlarge {
        font-size: 125%;
    }

jconniff commented 10 years ago

I've also been directed to refer you to this blog post http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui

hartmut27 commented 10 years ago

Jeff, this works perfect. Thanks for Your help.

yui / skinbuilder

Button size #41