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