Skip to content

Instantly share code, notes, and snippets.

@krisnod

krisnod/SassMeister-input-HTML.html

Created March 15, 2015 21:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save krisnod/8f75be71f88f162605c0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save krisnod/8f75be71f88f162605c0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. krisnod created this gist Mar 15, 2015.
    23 changes: 23 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <div class="login-screen">
    <h1>kratti.net &raquo; kirjaudu</h1>
    <div class="login-widget">
    <div class="facebook-login">
    <div>FACEBOOK</div>
    f
    <div>tunnuksellasi</div>
    </div>
    <div class="kratti-login">
    <form>
    <label>sähköpostiosoite:</label>
    <input type="text" />
    <label>salasana:</label>
    <input type="password" />
    <button>KIRJAUDU</button>
    </form>
    <hr />
    <div>
    <a href="#">unohditko salasanasi?</a>
    </div>
    </div>
    </div>
    </div>
    123 changes: 123 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,123 @@
    // ----
    // Sass (v3.4.12)
    // Compass (v1.0.3)
    // ----

    .login-screen {
    display: table;
    margin: 1rem auto;

    h1 {
    color: purple;
    font-size: 1rem;
    font-variant: small-caps;
    margin-left: .4rem;
    margin-bottom: .25rem;
    }
    }

    .login-widget {
    display: table;
    }

    .facebook-login {
    display: table-cell;
    background: blue;
    border: 0px solid white;
    border-right: 2px solid white;
    border-radius: 5px 0 0 5px;
    color: white;
    font-size: 4em;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 10rem;

    div {
    font-size: 1rem;
    font-variant: small-caps;
    }
    }

    .facebook-login:before {
    display: block;
    background: white;
    box-sizing: border-box;
    border: 0px solid white;
    border-radius: 2.5rem;
    content: "tai";
    color: purple;
    font-size: 1rem;
    font-variant: small-caps;
    position: absolute;
    right: -1.4rem;
    top: 1rem;
    padding-top: .6rem;
    height: 2.5rem;
    width: 2.5rem;
    z-index: 9999;
    }

    .kratti-login {
    background: purple;
    border: 0px solid white;
    border-left: 2px solid white;
    border-radius: 0 5px 5px 0;
    box-sizing: border-box;
    display: table-cell;
    padding: 2rem;
    position: relative;
    width: 15rem;

    form {
    margin: 0 .5em;
    }

    button {
    margin-top: 1em;
    background-color: white;
    box-sizing: border-box;
    border: 1px solid white;
    font-variant: small-caps;
    width: 100%;
    }

    input[type=text],
    input[type=password] {
    box-sizing: border-box;
    width: 100%;
    }

    label {
    color: white;
    display: block;
    font-size: 11px;
    font-variant: small-caps;
    }

    div {
    color: white;
    font-size: 11px;
    font-variant: small-caps;
    text-align: center;

    a {
    color: white;
    }
    }
    }

    .kratti-login:before {
    display: block;
    background: transparent;
    box-sizing: border-box;
    border: 1px solid purple;
    border-radius: 2.2rem;
    content: " ";
    position: absolute;
    left: -1.2rem;
    top: 1.15rem;
    height: 2.2rem;
    width: 2.2rem;
    z-index: 9999;
    }
    110 changes: 110 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,110 @@
    .login-screen {
    display: table;
    margin: 1rem auto;
    }
    .login-screen h1 {
    color: purple;
    font-size: 1rem;
    font-variant: small-caps;
    margin-left: .4rem;
    margin-bottom: .25rem;
    }

    .login-widget {
    display: table;
    }

    .facebook-login {
    display: table-cell;
    background: blue;
    border: 0px solid white;
    border-right: 2px solid white;
    border-radius: 5px 0 0 5px;
    color: white;
    font-size: 4em;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 10rem;
    }
    .facebook-login div {
    font-size: 1rem;
    font-variant: small-caps;
    }

    .facebook-login:before {
    display: block;
    background: white;
    box-sizing: border-box;
    border: 0px solid white;
    border-radius: 2.5rem;
    content: "tai";
    color: purple;
    font-size: 1rem;
    font-variant: small-caps;
    position: absolute;
    right: -1.4rem;
    top: 1rem;
    padding-top: .6rem;
    height: 2.5rem;
    width: 2.5rem;
    z-index: 9999;
    }

    .kratti-login {
    background: purple;
    border: 0px solid white;
    border-left: 2px solid white;
    border-radius: 0 5px 5px 0;
    box-sizing: border-box;
    display: table-cell;
    padding: 2rem;
    position: relative;
    width: 15rem;
    }
    .kratti-login form {
    margin: 0 .5em;
    }
    .kratti-login button {
    margin-top: 1em;
    background-color: white;
    box-sizing: border-box;
    border: 1px solid white;
    font-variant: small-caps;
    width: 100%;
    }
    .kratti-login input[type=text],
    .kratti-login input[type=password] {
    box-sizing: border-box;
    width: 100%;
    }
    .kratti-login label {
    color: white;
    display: block;
    font-size: 11px;
    font-variant: small-caps;
    }
    .kratti-login div {
    color: white;
    font-size: 11px;
    font-variant: small-caps;
    text-align: center;
    }
    .kratti-login div a {
    color: white;
    }

    .kratti-login:before {
    display: block;
    background: transparent;
    box-sizing: border-box;
    border: 1px solid purple;
    border-radius: 2.2rem;
    content: " ";
    position: absolute;
    left: -1.2rem;
    top: 1.15rem;
    height: 2.2rem;
    width: 2.2rem;
    z-index: 9999;
    }
    23 changes: 23 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <div class="login-screen">
    <h1>kratti.net &raquo; kirjaudu</h1>
    <div class="login-widget">
    <div class="facebook-login">
    <div>FACEBOOK</div>
    f
    <div>tunnuksellasi</div>
    </div>
    <div class="kratti-login">
    <form>
    <label>sähköpostiosoite:</label>
    <input type="text" />
    <label>salasana:</label>
    <input type="password" />
    <button>KIRJAUDU</button>
    </form>
    <hr />
    <div>
    <a href="#">unohditko salasanasi?</a>
    </div>
    </div>
    </div>
    </div>