<template>
    <b-col cols="4" class="m-auto">
         <b-form-group
            id="username"
            label="Username"
            description="Enter your username"
            label-for="username"
        >
            <b-form-input id="username"></b-form-input>
        </b-form-group>
        <b-form-group
            id="password"
            label="Password"
            description="Enter your password"
            label-for="username"
        >
            <b-form-input id="password" type="password"></b-form-input>
        </b-form-group>

        <b-button variant="primary" class="loginButton">Login</b-button>
    </b-col>
</template>

<script>
export default {
  name: "Login"
};
</script>

<style lang="scss">
@import '../styles/sass/variables';

.b-form-group{
    label{
        font-size: 13px;
    }

    small{
        font-size:12px;
    }
}

.loginButton{
    background-color: $smg;
    border-color:$smg;
    float: right;
    transition: .3s ease-in-out all;

    &:focus, &:active, &:hover{
        background-color: darken($smg,5)!important;
        border-color:$smg!important;
    }

}

</style>


