#loginPage { overflow: scroll; div.loginForm { @include flexbox; @include flex-direction(column); @include align-items(stretch); height: 100%; text-align: center; background-color: $main-color; header { @include flex(1); @include icon-font(); font-size: 48pt; color: $main-alternate-text-color; } div.form { @include flex(4); margin-left: auto; margin-right: auto; form { position: relative; background: $main-alternate-text-color; // @include border-radius(10px); padding: 20px; margin-bottom: 50px; /* &:after { content: ""; position: absolute; top: -15px; margin-left: 50%; left: -15px; border-style: solid; border-width: 0 15px 15px; border-color: $main-alternate-text-color transparent; display: block; width: 0; z-index: 1; } */ label { display: none; } input { font-family: "clipperz-font"; display: block; // @include border-radius(4px); padding: 5px; margin-top: 5px; margin-bottom: 10px; font-size: 100%; // box-shadow:inset 0 0 0; font-size: 24pt; width: 100%; } button { font-family: "clipperz-font"; min-height: 48px; min-width: 48px; color: white; font-size: 24pt; font-weight: 500; border: 0px; padding: 10px 25px; border: 1px solid white; background-color: $main-color; @include transition(background-color font-weight, 0.2s, linear); &:hover { }; &:disabled { font-weight: 100; background-color: #c0c0c0; cursor: default; &:hover { }; } } } } div.registrationLink { @include flex(1); color: $main-alternate-text-color; background-color: $main-alternate-color; cursor: pointer; font-size: 24pt; &:before { content: "> "; }; a { } } } div.loginForm.extra-short { header { // @include flex(1); font-size: 18pt; } div.form { // @include flex(6); form { padding: 10px; margin-bottom: 20px; input { padding: 3px; margin-top: 3px; margin-bottom: 5px; font-size: 16pt; } button { min-height: 20px; font-size: 12pt; padding: 3px 10px; border: 1px solid white; } } } div.registrationLink { // @include flex(2); font-size: 14pt; } } }