Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Use SCSS nesting in portico-signin.scss for `.input-box`.

This commit is contained in:
majordwarf 2020-03-11 20:18:26 +05:30 committed by Tim Abbott
parent a14846f259
commit f7f3148e44
1 changed files with 77 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
static/styles/portico/portico-signin.scss
View File

@ -357,11 +357,10 @@ html {
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
}
.new-style .input-box input[type=text], input[type=text],
.new-style .input-box input[type=email], input[type=email],
.new-style .input-box input[type=password] { input[type=password] {
padding: 9px 32px 11px 12px; padding: 9px 32px 11px 12px;
margin: 25px 0 4px; margin: 25px 0 4px;
@ -377,26 +376,22 @@ html {
border-radius: 4px; border-radius: 4px;
transition: border 0.3s ease; transition: border 0.3s ease;
}
.new-style .input-box input[type=text]:focus:invalid, &:focus:invalid {
.new-style .input-box input[type=email]:focus:invalid,
.new-style .input-box input[type=password]:focus:invalid {
box-shadow: none; box-shadow: none;
color: hsl(0, 0%, 27%); color: hsl(0, 0%, 27%);
} }
.new-style .input-box input[type=text]:focus, &:focus {
.new-style .input-box input[type=email]:focus,
.new-style .input-box input[type=password]:focus {
border: 1px solid hsl(0, 0%, 53%); border: 1px solid hsl(0, 0%, 53%);
} }
}
.new-style .input-box input[type=email] { input[type=email] {
margin-bottom: 10px; margin-bottom: 10px;
} }
.new-style .input-box label { label {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -404,26 +399,28 @@ html {
margin-top: 1px; margin-top: 1px;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.new-style .input-box.moving-label input[type=text]:invalid + label, &.moving-label {
.new-style .input-box.moving-label input[type=email]:invalid + label, input[type=text]:invalid + label,
.new-style .input-box.moving-label input[type=password]:invalid + label { input[type=email]:invalid + label,
input[type=password]:invalid + label {
transform: translateY(35px) translateX(14px); transform: translateY(35px) translateX(14px);
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 400; font-weight: 400;
color: hsl(0, 0%, 67%); color: hsl(0, 0%, 67%);
pointer-events: none; pointer-events: none;
} }
}
.new-style .input-box label, label,
.new-style .input-box input[type=text]:focus + label, input[type=text]:focus + label,
.new-style .input-box input[type=email]:focus + label, input[type=email]:focus + label,
.new-style .input-box input[type=password]:focus + label, input[type=password]:focus + label,
.new-style .input-box input[type=text]:valid + label, input[type=text]:valid + label,
.new-style .input-box input[type=email]:valid + label, input[type=email]:valid + label,
.new-style .input-box input[type=password]:valid + label { input[type=password]:valid + label {
left: 0px; left: 0px;
transform: translateY(-0px) translateX(0px); transform: translateY(-0px) translateX(0px);
pointer-events: auto; pointer-events: auto;
@ -431,9 +428,9 @@ html {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
color: hsl(0, 0%, 27%); color: hsl(0, 0%, 27%);
} }
.new-style .input-box p.text-error { p.text-error {
display: block; display: block;
padding: 0px; padding: 0px;
@ -446,9 +443,9 @@ html {
position: relative; position: relative;
top: -4px; top: -4px;
left: 1px; left: 1px;
} }
.new-style .input-box label.text-error { label.text-error {
display: block; display: block;
top: 66px; top: 66px;
@ -456,6 +453,7 @@ html {
font-size: 0.7em; font-size: 0.7em;
font-weight: 600; font-weight: 600;
padding-left: 0px; padding-left: 0px;
}
} }
.new-style .lead { .new-style .lead {