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