login-view.js

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-form-layout/src/vaadin-form-layout.js';
import '@vaadin/vaadin-form-layout/src/vaadin-form-item.js';
import '@vaadin/vaadin-ordered-layout/src/vaadin-horizontal-layout.js';
import '@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js';
import '@polymer/iron-icon/iron-icon.js';
import '@vaadin/vaadin-button/src/vaadin-button.js';
import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';

class LoginView extends PolymerElement {

    static get template() {
        return html`
<style include="shared-styles">
                :host {
                    display: block;
                    height: 100%;
                }

                .background {
                    background: rgb(5,18,33);
                    background: linear-gradient(180deg, rgba(5,18,33,1) 0%, rgba(11,37,48,1) 100%);

                }

                .inner-container {
                    background-color: white;
                    -webkit-box-shadow: 0px 0px 20px -3px #cccccc;
                    box-shadow: 0px 0px 20px -3px #cccccc;
                    padding-bottom:32px;
                }

                .logo-container {
                    background-color:#63C7B2;
                    padding:32px;
                }
                .logo{
                    width:200px;
                    height:200px;
                    background-color:#ffffff;
                    border-radius: 100px;
                    display:flex;
                    color:#63C7B2;
                }

                .login-button {
                    background-color:#63C7B2;
                }

                .link {
                    color:#63C7B2;
                }

                .separator {
                    color:#63C7B2;
                }
            </style>
<vaadin-vertical-layout style="width: 100%; height: 100%; justify-content: center;" class="background">
 <vaadin-vertical-layout theme="spacing" style="align-self: center; width: 400px; align-items: center; flex:1; flex-shrink: 0; flex-grow: 0;" class="inner-container">
  <vaadin-vertical-layout theme="" class="logo-container" style="align-items: stretch; align-self: stretch; justify-content: flex-start;">
   <div class="logo" style="align-self: center; display:flex; flex-direction: column; align-items: center; flex-shrink: 1; justify-content: center;font-size:20px;">
    <iron-icon icon="lumo:bell" style="align-self: center; flex-grow: 0; height:128px;width:128px;"></iron-icon>The Bell 
   </div>
  </vaadin-vertical-layout>
  <vaadin-vertical-layout theme="margin" style="margin: 32px 64px;">
   <vaadin-vertical-layout theme="spacing" style="display:none">
    <vaadin-text-field class="full-width" value="Jane" autofocus="true" label="Username"></vaadin-text-field>
    <vaadin-text-field class="full-width" value="" label="Password"></vaadin-text-field>
   </vaadin-vertical-layout>
   <vaadin-form-layout>
    <vaadin-form-item>
     <label slot="label">Username</label>
     <vaadin-text-field class="full-width" value="" autofocus="true" label=""></vaadin-text-field>
    </vaadin-form-item>
    <vaadin-form-item>
     <label slot="label">Password</label>
     <vaadin-text-field class="full-width" value=""></vaadin-text-field>
    </vaadin-form-item>
   </vaadin-form-layout>
  </vaadin-vertical-layout>
  <vaadin-button theme="primary" class="login-button">
    Log in 
  </vaadin-button>
  <vaadin-horizontal-layout theme="spacing" style="flex-direction: row; flex:1; flex-shrink: 0; flex-grow: 1; align-items: center;">
   <div style="width: 150px; display:flex; justify-content: flex-end;">
    <vaadin-button theme="tertiary" class="link">
      Sign up 
    </vaadin-button>
   </div>
   <div class="separator">
     | 
   </div>
   <div style="width: 150px; display:flex; justify-content: flex-start;">
    <vaadin-button theme="tertiary" class="link">
      Forgot Password? 
    </vaadin-button>
   </div>
  </vaadin-horizontal-layout>
 </vaadin-vertical-layout>
</vaadin-vertical-layout>
`;
    }

    static get is() {
        return 'login-view';
    }

    static get properties() {
        return {
            // Declare your properties here.
        };
    }
}

customElements.define(LoginView.is, LoginView);