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 lightbox.scss for `.image-actions`.

This commit is contained in:
Vaibhav 2019-06-10 14:36:51 +05:30 committed by Tim Abbott
parent 7610c5f025
commit a7b820ddc3
1 changed files with 50 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
static/styles/lightbox.scss
View File

@ -77,72 +77,72 @@
#lightbox_overlay .image-actions { #lightbox_overlay .image-actions {
float: right; float: right;
}
#lightbox_overlay .image-actions .lightbox-canvas-trigger { .lightbox-canvas-trigger {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
min-width: 75px; min-width: 75px;
margin: 0px; margin: 0px;
margin-right: 5px; margin-right: 5px;
padding: 0px 5px; padding: 0px 5px;
border-radius: 4px; border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.6);
text-align: center; text-align: center;
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
}
#lightbox_overlay .image-actions .lightbox-canvas-trigger:hover { &:hover {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 100%); border: 1px solid hsl(0, 0%, 100%);
color: hsl(227, 40%, 16%); color: hsl(227, 40%, 16%);
opacity: 1; opacity: 1;
} }
#lightbox_overlay .image-actions .lightbox-canvas-trigger .status { .status {
margin-top: -7px; margin-top: -7px;
}
#lightbox_overlay .image-actions .lightbox-canvas-trigger .status::after { &::after {
content: attr(data-disabled); content: attr(data-disabled);
text-transform: uppercase; text-transform: uppercase;
opacity: 0.7; opacity: 0.7;
} }
}
#lightbox_overlay .image-actions .lightbox-canvas-trigger.enabled .status::after { &.enabled .status::after {
content: attr(data-enabled); content: attr(data-enabled);
} }
#lightbox_overlay .image-actions .lightbox-canvas-trigger .title { .title {
font-weight: 600; font-weight: 600;
} }
}
#lightbox_overlay .image-actions .button { .button {
font-size: 0.9rem; font-size: 0.9rem;
min-width: inherit; min-width: inherit;
padding: 4px 10px; padding: 4px 10px;
border: 1px solid hsla(0, 0%, 100%, 0.6); border: 1px solid hsla(0, 0%, 100%, 0.6);
background-color: transparent; background-color: transparent;
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
margin: 0px 5px; margin: 0px 5px;
&:hover { &:hover {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
border-color: hsl(0, 0%, 100%); border-color: hsl(0, 0%, 100%);
color: hsl(227, 40%, 16%); color: hsl(227, 40%, 16%);
}
} }
} }