Sha256: a64584b487c5b004b37d8ef21e007a913694eb89ae2976f014cf6052bdc7b5db
Contents?: true
Size: 1.5 KB
Versions: 17
Compression:
Stored size: 1.5 KB
Contents
// Sliding Panel Component
// ========================================
// Variables
$sliding-panel-background: $white-base;
$sliding-panel-header-background: $green-base;
$sliding-panel-background-active: $black-base;
$sliding-panel-shadow-active: rgba(0, 0, 0, 0.35);
$sliding-panel-spread-active: 5px 0 10px;
// Structure
.sliding-panel-content {
@include position(fixed, 0 auto 0 0);
@include size(90% 100%);
@include transform(translateX(-100%));
@include transition(all 0.5s ease-in);
background: $sliding-panel-background;
z-index: 999999;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
&.is-visible {
@include box-shadow($sliding-panel-spread-active, $sliding-panel-shadow-active);
@include transform(translateX(0));
}
}
.sliding-panel-header {
@include position(relative);
@include rem(margin-bottom, 20px);
@include rem(padding, 20px);
background-color: $sliding-panel-header-background;
.title {
@include s-foxtrot;
margin: 0;
text-transform: uppercase;
}
}
.sliding-panel-header--close {
@include position(absolute, 15px 15px null null);
@include transform(rotate(45deg));
}
.sliding-panel-body {
margin: 0 auto;
width: 65%;
img,
iframe,
video { width: 100%; }
}
.sliding-panel-fade-screen {
@include position(fixed, 0 0 0 0);
@include transition();
background: $sliding-panel-background-active;
opacity: 0;
visibility: hidden;
z-index: 999998;
&.is-visible {
opacity: 0.8;
visibility: visible;
}
}
Version data entries
17 entries across 17 versions & 1 rubygems