small mobile pass
This commit is contained in:
parent
d70ba4d33c
commit
8d13c52d18
3 changed files with 13 additions and 10 deletions
|
|
@ -70,6 +70,13 @@
|
||||||
.preview-100 {
|
.preview-100 {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
|
|
||||||
|
@include media-down(md) {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 900;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-200 {
|
.preview-200 {
|
||||||
|
|
@ -185,12 +192,10 @@
|
||||||
transform: translate(var(--start-x), var(--start-y)) scale(1);
|
transform: translate(var(--start-x), var(--start-y)) scale(1);
|
||||||
}
|
}
|
||||||
25% {
|
25% {
|
||||||
transform: translate(var(--mid1-x), var(--mid1-y))
|
transform: translate(var(--mid1-x), var(--mid1-y)) scale(var(--scale1, 1.1));
|
||||||
scale(var(--scale1, 1.1));
|
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: translate(var(--mid2-x), var(--mid2-y))
|
transform: translate(var(--mid2-x), var(--mid2-y)) scale(var(--scale2, 0.9));
|
||||||
scale(var(--scale2, 0.9));
|
|
||||||
}
|
}
|
||||||
75% {
|
75% {
|
||||||
transform: translate(var(--mid3-x), var(--mid3-y))
|
transform: translate(var(--mid3-x), var(--mid3-y))
|
||||||
|
|
|
||||||
|
|
@ -811,7 +811,6 @@
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(180deg, transparent, #0096ff, transparent);
|
background: linear-gradient(180deg, transparent, #0096ff, transparent);
|
||||||
//box-shadow: 0 0 10px rgba(0, 150, 255, 0.8);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Orange line on the right
|
// Orange line on the right
|
||||||
|
|
@ -824,7 +823,6 @@
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: linear-gradient(180deg, transparent, #ff7800, transparent);
|
background: linear-gradient(180deg, transparent, #ff7800, transparent);
|
||||||
//box-shadow: 0 0 10px rgba(255, 120, 0, 0.8);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-down(md) {
|
@include media-down(md) {
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<div id="lavalamp-adoptable-app">
|
<div id="lavalamp-adoptable-app">
|
||||||
<div class="adoptable-container">
|
<div class="adoptable-container">
|
||||||
<div class="preview-section">
|
<div class="preview-section">
|
||||||
<h3>Preview</h3>
|
<h3 class="hidden-md-down">Preview</h3>
|
||||||
<div class="preview-grid">
|
<div class="preview-grid">
|
||||||
<div class="preview-item">
|
<div class="preview-item hidden-md-down">
|
||||||
<div class="preview-wrapper preview-flexible">
|
<div class="preview-wrapper preview-flexible">
|
||||||
<div
|
<div
|
||||||
id="lavalamp-preview-flex"
|
id="lavalamp-preview-flex"
|
||||||
|
|
@ -19,9 +19,9 @@
|
||||||
class="lavalamp-preview-container"
|
class="lavalamp-preview-container"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<span class="preview-label">100px × 200px</span>
|
<span class="preview-label hidden-md-down">100px × 200px</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="preview-item">
|
<div class="preview-item hidden-md-down">
|
||||||
<div class="preview-wrapper preview-200">
|
<div class="preview-wrapper preview-200">
|
||||||
<div
|
<div
|
||||||
id="lavalamp-preview-200"
|
id="lavalamp-preview-200"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue