1<template>
2  <main>
3    <b-container class="login-container" fluid>
4      <b-row class="login-row" align-v="center">
5        <b-col class="login-branding mt-5 mb-5 text-center" md="6">
6          <div class="login-branding__container">
7            <img
8              class="logo"
9              width="200px"
10              src="@/assets/images/logo-login.svg"
11              :alt="altLogo"
12            />
13            <h1>OpenBMC</h1>
14          </div>
15        </b-col>
16        <b-col md="6">
17          <router-view />
18        </b-col>
19      </b-row>
20    </b-container>
21  </main>
22</template>
23
24<script>
25export default {
26  name: 'LoginLayout',
27  data() {
28    return {
29      altLogo: `${process.env.VUE_APP_COMPANY_NAME} logo`
30    };
31  }
32};
33</script>
34
35<style lang="scss" scoped>
36.login-container {
37  @include media-breakpoint-up(md) {
38    background: linear-gradient(
39      to right,
40      theme-color('light') 50%,
41      gray('200') 50%
42    );
43  }
44}
45
46.login-row {
47  @include media-breakpoint-up(md) {
48    min-height: 100vh;
49  }
50}
51
52.login-branding__container {
53  @include media-breakpoint-up(md) {
54    float: right;
55    margin-right: 4rem;
56  }
57}
58</style>
59