modules/cms/client/scss/_partials/_context-tag.scss
.context-tag {
background: #ffffff;
flex: 1 1 100%;
.flex {
display: flex;
align-content: flex-start;
&:first-of-type {
margin-bottom: 2rem;
}
}
h1 {
font-size: 2rem;
flex: 0 0 auto;
margin-right: 2rem;
}
button.trash {
flex: 0 0 auto;
padding: 0;
margin: 0;
appearance: none;
background: #ffffff;
border: 0;
outline: none;
cursor: pointer;
}
h2 {
font-family: 'Roboto', sans-serif;
font-size: 0.85rem;
margin-bottom: 0.2rem;
&:not(:first-child) {
margin-top: 1.2rem;
}
}
.left {
flex: 1 1 50%;
color: #6c6c6c;
a.preview {
display: inline-block;
vertical-align: middle;
margin-left: 1rem;
img {
margin-bottom: 2px;
}
}
}
.right {
flex: 1 1 40%;
.mediaContainer {
margin: 0 auto;
background-image:
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #cccccc), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #cccccc), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #cccccc)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #cccccc));
background-size: 10px 10px;
-webkit-background-size: 10px 10px;
background-position: 0 0, 5px 0, 5px -5px, 0px 5px;
img {
margin: 0 auto;
border: 1px solid #c8c8c8;
max-width: 100%;
}
video {
width: 100%;
}
img[src=""] {
display: none;
}
}
}
.buttons {
display: block;
margin-top: 2.8rem;
input, button {
&:focus {outline:0;}
}
}
}