argos/dmp-frontend/src/app/ui/auth/login/login.component.scss

309 lines
4.5 KiB
SCSS
Raw Normal View History

2019-04-25 11:00:24 +02:00
.login-screen {
margin-top: 70px;
2019-09-17 16:58:13 +02:00
min-height: calc(100vh - 10px);
2019-04-25 11:00:24 +02:00
}
.login-card {
width: auto;
margin-top: 0;
2019-04-25 11:00:24 +02:00
}
2018-07-11 15:47:36 +02:00
.container {
padding: 15px 30px;
2017-12-19 18:34:00 +01:00
}
2018-07-11 15:47:36 +02:00
.card {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
border-radius: 6px;
color: rgba(0, 0, 0, 0.87);
background: #fff;
2017-12-19 18:34:00 +01:00
}
2018-07-11 15:47:36 +02:00
.card-raised {
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12),
0 8px 10px -5px rgba(0, 0, 0, 0.2);
2017-12-19 18:34:00 +01:00
}
2018-07-11 15:47:36 +02:00
.page-title {
margin-top: 40px;
2017-12-19 18:34:00 +01:00
}
2019-10-29 17:17:04 +01:00
.container {
height: 100%;
position: relative;
z-index: 1;
2017-12-19 18:34:00 +01:00
}
2019-10-29 17:17:04 +01:00
@-webkit-keyframes card {
from {
top: -40px;
}
2017-12-19 18:34:00 +01:00
2019-10-29 17:17:04 +01:00
to {
top: 0;
}
2017-12-19 18:34:00 +01:00
}
2019-10-29 17:17:04 +01:00
@keyframes card {
from {
top: -40px;
}
2019-10-25 16:58:09 +02:00
2019-10-29 17:17:04 +01:00
to {
top: 0;
}
2017-12-19 16:59:34 +01:00
}
2018-07-11 15:47:36 +02:00
.card {
position: relative;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
top: -50px;
-webkit-animation-name: card;
-moz-animation-name: card;
-o-animation-name: card;
animation-name: card;
-webkit-animation-duration: 600ms;
-moz-animation-duration: 600ms;
-o-animation-duration: 600ms;
animation-duration: 600ms;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
2017-12-19 16:59:34 +01:00
}
2018-07-11 15:47:36 +02:00
.card-header {
position: relative;
overflow: hidden;
top: -50px;
width: 100%;
min-height: 200px;
padding: 25px;
border-radius: 3px;
2019-09-17 16:58:13 +02:00
background: #0c7489;
// background: rgb(0, 112, 192);
display: flex;
flex-direction: column;
align-items: center;
2017-12-19 16:59:34 +01:00
}
2018-07-11 15:47:36 +02:00
.card-header h4 {
font-weight: 400;
color: #fff;
margin-bottom: 25px;
margin-top: 5px;
}
.social-btns {
height: 6em;
2019-10-29 17:17:04 +01:00
justify-content: center;
2017-12-19 16:59:34 +01:00
}
2018-07-11 15:47:36 +02:00
.social-btns i {
font-size: 2.5em;
2019-10-25 16:58:09 +02:00
padding: 0.8em;
color: #fff;
2017-12-19 16:59:34 +01:00
}
2019-10-29 17:17:04 +01:00
.social-btns .col {
flex-grow: 0;
}
.social-btns i:hover {
background-color: #f5f5f51c;
border-radius: 60%;
}
.accesss-methods {
height: 5em;
justify-content: center;
}
.accesss-methods .col-auto:hover {
background-color: #f5f5f51c;
border-radius: 100%;
}
.accesss-methods .logo {
flex-grow: 0;
padding-top: 21px;
padding-bottom: 21px;
}
.accesss-methods .openaire-logo {
flex-grow: 0;
padding-top: 21px;
padding-bottom: 21px;
margin-top: 5px;
height: 90px;
}
.accesss-methods .orcid-logo {
height: 75px;
padding-top: 8px;
margin-top: 13px;
}
2019-10-25 16:58:09 +02:00
.accesss-methods .configurable-logo {
flex-grow: 0;
padding-top: 21px;
padding-bottom: 21px;
margin-top: 5px;
height: 90px;
}
2018-07-11 15:47:36 +02:00
.tip {
margin-top: -20px;
2017-12-19 16:59:34 +01:00
}
2018-07-11 15:47:36 +02:00
.form-row,
.card-form,
.mat-form-field {
width: 100%;
2017-12-19 16:59:34 +01:00
}
2018-07-11 15:47:36 +02:00
.card-form {
padding: 5px;
2017-12-19 16:59:34 +01:00
}
2018-07-11 15:47:36 +02:00
.form-row {
position: relative;
display: flex;
align-items: center;
margin-top: 13px;
2017-12-19 16:59:34 +01:00
}
2018-07-11 15:47:36 +02:00
.form-row i {
position: relative;
top: -5px;
margin-right: 15px;
color: #555;
2017-12-19 16:59:34 +01:00
}
2018-07-11 15:47:36 +02:00
.card-footer {
2019-04-25 11:00:24 +02:00
padding: 0;
border-radius: 0;
align-items: start;
flex-direction: column;
2017-12-19 16:59:34 +01:00
}
2018-07-11 15:47:36 +02:00
.card-footer button {
color: #e91e63;
2018-02-23 11:41:39 +01:00
}
.btn span.icon {
background: url(img/b2access_small.png) no-repeat;
float: left;
width: 45px;
height: 25px;
2018-02-23 11:41:39 +01:00
}
2018-07-11 15:47:36 +02:00
2018-02-23 12:09:25 +01:00
span.iconmedium {
background: url(img/b2access_medium.png) no-repeat;
float: left;
width: 100px;
height: 56px;
2019-04-25 11:00:24 +02:00
}
2019-07-12 16:22:57 +02:00
span.orcidIconMedium {
background: url(img/ORCIDiD_medium.png) no-repeat;
background-position: center;
float: right;
2019-10-29 17:17:04 +01:00
width: 56px;
height: 56px;
2019-07-12 16:22:57 +02:00
}
span.openaireIcon {
background: url(img/openaire_small.png) no-repeat;
background-position: center;
float: right;
2019-10-29 17:17:04 +01:00
width: 80px;
height: 56px;
}
span.configurableIcon {
float: right;
width: 80px;
height: 56px;
}
2019-04-25 11:00:24 +02:00
.b2access-button {
margin-top: 10px;
width: fit-content;
2019-04-25 11:00:24 +02:00
}
2019-07-12 16:22:57 +02:00
.orcid-button {
margin-top: 10px;
width: fit-content;
2019-07-12 16:22:57 +02:00
}
.openaire-button {
margin-top: 10px;
width: fit-content;
}
.configurable-button {
margin-top: 10px;
width: fit-content;
}
2019-04-25 11:00:24 +02:00
.login-logo {
background: url(img/open-dmp.png) no-repeat;
2019-09-17 12:55:18 +02:00
width: 273px;
height: 300px;
background-size: cover;
2019-04-25 11:00:24 +02:00
}
.login-bg {
background: url(img/login_bg.png) no-repeat;
background-size: cover;
2018-07-11 15:47:36 +02:00
}
2018-08-31 10:14:56 +02:00
2019-04-25 11:00:24 +02:00
.login-social-button {
width: auto;
height: auto;
}
2019-10-29 17:17:04 +01:00
@media (min-width: 1200px) {
.container {
width: 100%;
}
}
@media (min-width: 992px) {
.container {
width: 100%;
}
}
@media (min-width: 768px) {
.container {
width: 100%;
}
}
@media (min-width: 401px) and (max-width: 560px) {
.social-btns i {
padding: 0.4em !important;
}
.accesss-methods {
padding-top: 1em;
}
}
@media (min-width: 0px) and (max-width: 400px) {
.social-btns i {
padding: 0.4em !important;
}
.card-header {
height: 350px !important;
}
.accesss-methods {
padding-top: 1em;
}
2018-08-31 10:14:56 +02:00
}