Alexandre
Alexandre

Reputation: 2025

YUI and Purecss button color

I'm created a simple CSS with YUI Skin Builder, but, when I try to use it in my MVC project the color system is not correct

My skin is that: Skin, the spected button color is red, but, I just get a gray or blue button: enter image description here

My cshtml code:

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>UniFlex</title>
    <link href="@Url.Content("~/css/pure/pure-min.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/pure-skin-min.css")" rel="stylesheet" />
</head>
<body>
    <div style="margin-top: 60px;margin-left:auto; margin-right: auto;width:330px;">
        <img src="@Url.Content("~/Imagens/logo.png")">
    </div>

    <div style="width:500px; margin-right:auto; margin-left:auto;">
        <form class="pure-form pure-form-aligned">
            <fieldset>
                <div class="pure-control-group">
                    <label for="name">Usuario:</label>
                    <input id="name" type="text" placeholder="Username">
                </div>

                <div class="pure-control-group">
                    <label for="password">Senha:</label>
                    <input id="password" type="password" placeholder="Password">
                </div>
                <button class="pure-button pure-button-primary">A Pure Button</button>
            </fieldset>
        </form>
    </div>
</body>
</html>

What is wrong ?

Upvotes: 1

Views: 217

Answers (1)

Alexandre
Alexandre

Reputation: 2025

Ok, I forgot to put the css name in body

<body class="pure-skin-mine">



<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>UniFlex - Bradesco</title>
    <link href="@Url.Content("~/css/pure/pure-min.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/pure-skin-mine.css")" rel="stylesheet" />
</head>
<body class="pure-skin-mine">
    <div style="margin-top: 60px;margin-left:auto; margin-right: auto;width:330px;">
        <img src="@Url.Content("~/Imagens/bradesco-logo.png")">
    </div>
...

Now it's work very well!

Upvotes: 2

Related Questions