scss: use gradient instead border to generate OR separator line (#54416)

This commit is contained in:
Thomas Jund 2021-05-31 15:53:49 +02:00 committed by Serghei Mihai
parent d83c3f874e
commit 4588675bb9
1 changed files with 18 additions and 6 deletions

View File

@ -103,7 +103,6 @@ div#login-methods input {
#registration-blocks .a2-block:not(:first-child),
#login-page .block:not(:first-child) {
position: relative;
border-left: 1px solid #999;
padding-left: 2rem;
border-radius: 0;
overflow: visible;
@ -114,16 +113,29 @@ div#login-methods input {
left: -1.5rem;
width: 3rem;
text-align: center;
background: white;
top: 1rem;
height: 3rem;
top: 0;
height: 100%;
line-height: 3rem;
padding-top: 1rem;
background-image:
linear-gradient(black, black),
linear-gradient(black, black);
background-size: 1px 1rem, 1px 100%;
background-repeat: no-repeat;
background-position: center 0, center 4rem;
}
@media screen and ($max-mobile-viewport) {
border-left: none;
padding-left: 0;
margin-top: 3rem;
&::after {
content: none;
padding-top: 0;
left: 0;
top: -3rem;
height: 3rem;
width: 100%;
background-size: calc(50% - 2rem) 1px;
background-repeat: no-repeat;
background-position: right, left;
}
}
}