src/app/login/login.scss
@import "../variables.scss";
@import "../../planet-mat-theme.scss";
@import "../mixins.scss";
:host {
@include left-right-grid-areas;
text-align: center;
.login-container {
padding: 10vh;
overflow: hidden;
h1 {
margin-bottom: 0;
}
.myplanet-link {
display: flex;
align-items: center;
a {
padding: 0 0.5rem;
}
}
}
.login-tile {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.login-card {
padding: 0;
min-height: 80vh;
display: grid;
grid-template-areas: "lt rt";
grid-template-columns: 1fr 2fr;
grid-auto-rows: 1fr;
}
.login-form,
.login-left-tile-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 5px;
}
.login-form {
a,
button[mat-raised-button] {
margin-bottom: 1rem;
}
a:hover {
color: $primary;
}
}
.ole-logo {
width: 7rem;
display: block;
}
// Target Tablet devices Whatever orientation
@media only screen and (max-device-width: 1024px) {
.login-container {
padding: 0;
overflow: hidden;
}
.login-card {
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr;
grid-auto-rows: 1fr;
min-height: 100vh;
}
.login-left-tile-container {
display: inline;
}
.right-tile {
grid-area: rt;
grid-row-start: rt-start;
grid-row-end: rt-end;
grid-column-start: rt-end;
grid-column-end: rt-start;
}
.ole-logo {
display: inline;
width: 5rem;
}
.myplanet-link {
display: inline;
}
}
// Targeting Smaller Screens in portait mode
@media only screen and (max-width: 550px) and (orientation: portrait) {
.login-container {
padding: 0;
overflow: hidden;
}
.login-card {
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr;
grid-auto-rows: 1fr;
min-height: 100vh;
}
.left-tile {
grid-area: lt;
grid-row-start: lt;
grid-row-end: lt;
grid-column-start: lt-start;
grid-column-end: lt-end;
}
.right-tile {
grid-area: rt;
grid-row-start: lt-end;
grid-row-end: lt-end;
grid-column-start: lt-start;
grid-column-end: lt-end;
}
.login-left-tile-container {
display: flex;
flex-direction: row;
}
.ole-logo {
display: inline;
width: 5rem;
}
h1 {
display: inline;
margin-left: 10px;
}
.myplanet-link {
justify-content: center;
}
h3 {
margin: 0;
}
}
// Targeting smaller devices in Landscape mode
@media only screen and (max-height: 375px) and (orientation: "landscape") {
.login-container {
padding: 0;
overflow: hidden;
}
.login-card {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-auto-rows: 1fr;
min-height: 100vh;
}
.login-left-tile-container {
display: inline;
}
.right-tile {
grid-area: rt;
grid-row-start: rt-start;
grid-row-end: rt-end;
grid-column-start: rt-end;
grid-column-end: rt-start;
}
.ole-logo {
display: inline;
width: 5rem;
}
.myplanet-link {
display: inline;
}
}
// Add line break for `try planet` statement
@media only screen and (max-width: 650px) {
.myplanet-link {
flex-direction: column;
margin-top: 10px;
}
}
}