Sha256: 254493245137df0c984e6afd339066469b7a3f1c317023679682b50794f6f81a
Contents?: true
Size: 1.76 KB
Versions: 3
Compression:
Stored size: 1.76 KB
Contents
//
// TwoPaneWidget styles mixin for a widget
//
@mixin two-pane-widget {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
box-sizing: border-box;
.pane.left {
@include two-pane-widget-pane( -1 );
}
.pane.right {
@include two-pane-widget-pane( 1 );
}
}
//
// TwoPaneWidget styles mixin for a pane
// $left_or_right: -1 for left, 1 for right
//
@mixin two-pane-widget-pane( $left_or_right ) {
display: inline-block;
box-sizing: border-box;
width: 50%;
height: 100%;
vertical-align: top;
position: relative;
&.closed {
width: 0;
.btn-open {
display: inline-block;
}
.content {
display: none;
}
}
&.half-open{
width: 50%;
&:not(:hover) .btn-open { display: none }
}
&.open {
width: 100%;
.btn-open { display: none }
}
// scrollable content of a pane
.content {
overflow-y: scroll;
height: 100%;
}
// opening button/tab
.btn-open {
@include two-pane-widget-button( $left_or_right );
}
&.closed {
.btn-open:not(:hover) {
opacity: 0.5;
}
}
}
// Opening button/tab mixin.
// $left_or_right: -1 for left, 1 for right
//
@mixin two-pane-widget-button( $left_or_right ) {
$btn-size: 45px;
width: $btn-size;
height: $btn-size;
position: absolute;
z-index: 50;
top: 45%;
@if $left_or_right > 0 {
right: 100%;
} @else {
left: 100%;
}
cursor: pointer;
i {
display: inline-block;
margin: auto;
position: absolute;
height: 16px;
width: 16px;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
Version data entries
3 entries across 3 versions & 1 rubygems