app/assets/stylesheets/_snapshots.scss
@-webkit-keyframes pulse-opacity {
from { opacity: 1; }
to { opacity: .4; }
}
@keyframes pulse-opacity {
from { opacity: 1; }
to { opacity: .4; }
}
.snapshots {
display: flex;
flex-wrap: wrap;
}
.snapshot-header-and-buttons {
form {
display: inline-block;
}
}
.snapshot-buttons {
.btn {
margin-bottom: 5px;
min-width: 150px;
.snapshot-button-disabled {
display: none;
}
&:disabled {
.snapshot-button-enabled {
display: none;
}
.snapshot-button-disabled {
display: inline;
}
}
}
}
.snapshot-diff-image {
$navbar-height: 45px;
margin-bottom: 2em;
max-width: 100%;
padding: 0;
img {
max-width: 100%;
}
.nav {
background-image: linear-gradient(#fff, #fff 10%, rgba(255, 255, 255, 0));
margin-bottom: -$navbar-height;
padding: 2px 0;
-webkit-transform: translateZ(0); // Force layer in Chrome
width: 100%;
&.affix {
padding-bottom: 25px;
top: 0;
z-index: 1;
}
}
.snapshot-diff-with-clusters {
margin-top: $navbar-height;
position: relative;
}
.snapshot-diff-cluster {
box-shadow: 0 0 0 1px #999, 0 0 0 2px #ccc;
position: absolute;
visibility: hidden;
width: 100%;
&[aria-selected] {
visibility: visible;
}
.glyphicon {
$icon-size: 12px;
font-size: $icon-size;
line-height: 1;
margin-left: -($icon-size + 2);
margin-top: -($icon-size / 2);
position: absolute;
top: 50%;
}
&.anchor-top,
&.anchor-bottom {
box-shadow: none;
height: 0;
top: 0;
}
&.anchor-bottom {
top: 100%;
}
}
}
.snapshot-diff-sprite {
// Render a checkered pattern background, similar to what e.g. Photoshop shows
// for transparent parts of an image.
// From http://lea.verou.me/css3patterns/#checkerboard
$checkered-pattern-size: 16px;
$checkered-pattern-color: rgba(0, 0, 0, .06);
background: linear-gradient(45deg, $checkered-pattern-color 25%, transparent 25%,
transparent 75%, $checkered-pattern-color 75%, $checkered-pattern-color),
linear-gradient(45deg, $checkered-pattern-color 25%, transparent 25%,
transparent 75%, $checkered-pattern-color 75%, $checkered-pattern-color);
background-position: 0 0, ($checkered-pattern-size / 2) ($checkered-pattern-size / 2);
background-size: $checkered-pattern-size $checkered-pattern-size;
overflow: hidden;
img {
margin-left: -100%;
max-width: 300%;
}
}
.snapshot-card {
$snapshot-width: 100px;
display: inline-block;
font-size: 10px;
line-height: 12px;
margin: 1em 1em .5em 0;
min-height: 130px;
position: relative;
transition: none;
vertical-align: top;
width: $snapshot-width + 10px; // Add room for padding+border from bootstrap
// `.thumbnail` class
&:hover,
&:focus {
text-decoration: none;
}
&.snapshot-card-pending {
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-duration: .7s;
animation-duration: .7s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: pulse-opacity;
animation-name: pulse-opacity;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.snapshot-indicator {
$icon-size: 20px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
box-shadow: 0 0 10px #fff;
color: #cc6;
font-size: $icon-size;
line-height: $icon-size;
position: absolute;
right: -$icon-size / 3;
top: -$icon-size / 3;
&.glyphicon-ok-sign {
color: #6c6;
}
&.glyphicon-remove-sign {
color: #c66;
}
}
.glyphicon-time {
color: #ccc;
display: block;
font-size: $snapshot-width * (3/4);
line-height: $snapshot-width;
text-align: center;
text-decoration: none;
}
}