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 components.scss for `.new-style`.

This commit is contained in:
Vaibhav 2019-05-23 22:37:00 +05:30 committed by Tim Abbott
parent f6051d8819
commit eed09527d5
1 changed files with 42 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
static/styles/components.scss
View File

@ -1,56 +1,58 @@
/* Reusable, object-oriented CSS base components for all Zulip pages
(both webapp and portico). */
.new-style label.checkbox {
padding: 0px;
display: inline-block;
vertical-align: top;
}
.new-style {
label.checkbox {
padding: 0px;
display: inline-block;
vertical-align: top;
.new-style label.checkbox input[type=checkbox] {
display: none;
}
input[type=checkbox] {
display: none;
.new-style label.checkbox input[type=checkbox] ~ span {
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
~ span {
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
padding: 2px;
margin: 0px 5px 0px 0px;
height: 10px;
width: 10px;
padding: 2px;
margin: 0px 5px 0px 0px;
height: 10px;
width: 10px;
font-weight: 300;
line-height: 0.8;
font-size: 1.3rem;
text-align: center;
border: 1px solid hsla(0, 0%, 0%, 0.6);
color: hsl(0, 0%, 80%);
font-weight: 300;
line-height: 0.8;
font-size: 1.3rem;
text-align: center;
border: 1px solid hsla(0, 0%, 0%, 0.6);
color: hsl(0, 0%, 80%);
border-radius: 4px;
-webkit-filter: brightness(0.80);
border-radius: 4px;
-webkit-filter: brightness(0.80);
cursor: pointer;
}
cursor: pointer;
}
.new-style label.checkbox input[type=checkbox]:checked ~ span {
color: transparent;
&:checked ~ span {
color: transparent;
background-image: url(/static/images/checkbox.svg);
background-size: 85%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
background-image: url(/static/images/checkbox.svg);
background-size: 85%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.new-style label.checkbox input[type=checkbox]:disabled ~ span {
opacity: 0.50;
cursor: default;
}
&:disabled ~ span {
opacity: 0.50;
cursor: default;
}
}
}
.new-style a.no-style {
color: inherit;
a.no-style {
color: inherit;
}
}
a.no-underline,