branding: use separate css

This commit is contained in:
Girish Ramakrishnan
2020-03-25 08:53:27 -07:00
parent da08da2b54
commit fe4b3d5f1d
2 changed files with 83 additions and 2 deletions

View File

@@ -1360,6 +1360,87 @@ footer {
}
}
// ----------------------------
// Branding
// ----------------------------
.branding-avatar {
position: relative;
cursor: pointer;
width: 64px;
height: 64px;
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
border: 1px solid gray;
border-radius: 3px;
img {
display: block;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(127, 127, 127 ,0.3);
background-image: url('/img/plus.png');
background-repeat: no-repeat;
background-position: center;
transition: all 150ms;
opacity: 0;
&:hover {
opacity: 1;
}
}
}
.branding-avatar-selector {
text-align: center;
.grid {
margin-top: 20px;
}
.preview-avatar {
text-align: center;
}
.item {
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 64px;
height: 64px;
margin: 5px;
cursor: pointer;
opacity: 0.6;
transform: scale(1.0);
transition: all 150ms;
&:hover {
opacity: 1;
transform: scale(1.1);
}
&.add {
border-radius: 2px;
width: 54px;
height: 54px;
background-color: $brand-primary;
background-image: url('/img/plus.png');
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
}
}
}
// ----------------------------
// Tag Input
// ----------------------------