Sha256: 2275b90b9798097ec6790a79e1a55ed2ed29759ac39aed4e7db3910b159575f0
Contents?: true
Size: 1.31 KB
Versions: 8
Compression:
Stored size: 1.31 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 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-body {
margin: 0 auto;
width: 65%;
}
.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
8 entries across 8 versions & 1 rubygems