Generated by SassMeister.com.

SassMeister-input-HTML.html

<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>

SassMeister-input.scss

// ----
// 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;
}

SassMeister-output.css

.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;
}

SassMeister-rendered.html

<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>