.viewport( class="contexto" )
ons-page( ng-controller='ngC' )
ons-toolbar( class="toolbar", modifier="material" )
div( class="pl title center", ng-bind="titulo" )
.card.sin-overflow.relativo(
class="tarjeta p0"
)
.absoluto.ancho-full.div-imagen(
style="height:50%;background-image:url(http://lorempixel.com/400/600/people/7)"
)
.circulo.absoluto.l0.div-imagen(
class="h2+ w2+ ml1"
style="z-index:10;top:45%;background-image:url(http://placeimg.com/100/100/people/4)"
)
.bfab.circulo.absoluto.r0.mr1.sin-overflow(
ng-click="accion()"
class="h2+ w2+ alinear-centro cursor-pointer"
)
.contenido-fab.ancho-full.absoluto
ons-icon.lh2(
size="1.25em"
icon="md-twitter"
)
br
ons-icon.lh2(
size="1.25em"
icon="md-close"
)
.contenedor-circular
.contenedor.sin-overflow
.absoluto.r0.b0(
style="height:11em;width:15.5em"
)
.boton DUPLICATE
.boton SCHEDULE
.boton DELETE
.texto-md.ct.gris(
class="p1+ mt1+"
) Nemo, velit maxime excepturi dolores, optio voluptates, molestiae quas labore explicabo facere at a voluptatibus qui totam voluptate deleniti quia consequatur quam?
a( href="http://bappzi.com" target="_blank" )
.bappzi bappzi
@colorPrincipal: #FDFDFD;
@colorAcento: #2aD;
body {
overflow: none;
background-color: #222;
}
.contexto {
margin-left: -180px;
left:50%; top:1em;
width: 360px;
height: 640px;
//crear clases aqui
.toolbar {
background-color: @colorPrincipal;
.title {
color: #222;
}
}
.tarjeta{
height: 25em;
}
.contenido-fab{
transition: all .3s cubic-bezier(.65,.68,.34,1.42);
top: 0;
}
.cerrar{
}
.bfab{
transition: all .3s ease;
background-color: @colorAcento;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
z-index:2;
top:45%;
color:#FFF;
}
.contenedor-circular{
z-index: 1;
overflow: hidden;
position: relative;
width: 100%;
height: 50%;
.contenedor {
position: absolute;
bottom:-1px; right:-1px;
width: 0; height: 0;
background-color: @colorAcento;
transition: all ease-out .35s;
border-radius: 3000px 0 0 0;
}
}
.boton{
color: #FFF;
text-align: center;
margin-bottom: 1em;
padding: .75em;
cursor:pointer;
width: 10em;
outline: none !important;
font-family: OpenSans,Roboto,Arial,'sans-serif';
background-color: transparent;
border: 1px solid #FFF;
border-radius: 4px;
font-size:.85em;
transition: all ease .5s;
&:hover, &:active {
color: @colorAcento;
background-color: #fff;
}
}
}
.bappzi{
z-index: 10;
position:fixed;
top:1em;
right:1.5em;
font-family:Ubuntu,OpenSans,sans-serif,Tahoma;
font-weight: bold;
color: rgba(127,127,127,.35);
}
var app = ons.bootstrap();
app
.controller('ngC', function($scope){
$scope.titulo = "CSS-based Circular Reveal";
$scope.accion = function(e){
var $contenidoFab = $('.contenido-fab');
var $contenedor = $('.contenedor-circular .contenedor');
var max = ($('.contenedor-circular')[0].getBoundingClientRect().width*1.5)+'px';
var $bFab = $('.bfab');
var objClase={}, objClase2={}, objClase3={};
if( $contenidoFab.hasClass('cerrar') ){
objClase = {'top':'0','color':'#FFF'};
objClase2 = {'background-color':'#2ad'};
objClase3 = {'width':'0','height':'0'};
} else {
objClase = {'top':'-2.5em','color':'#169'};
objClase2 = {'background-color':'#FFF'};
objClase3 = {'width':max,'height':max};
}
$contenidoFab
.css(objClase)
.toggleClass('cerrar');
$bFab
.css(objClase2);
$contenedor
.css(objClase3);
}
})
Also see: Tab Triggers