<div class="row">
<h1 class="mytitle">Collapsing modal/notification buttons</h1>
<div class="col-xs-12 col-md-4">
<div class="mynotification">
<div class="text-notification">Close right</div>
<div class="close-me right"></div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="mynotification">
<div class="text-notification">Close bottom, height is not dependant from the modal text</div>
<div class="close-me bottom"></div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="mynotification">
<div class="close-me left"></div>
<div class="text-notification left-text">Close left</div>
</div>
</div>
</div>
@import "compass/css3";
body,html{
position:relative;
background:black;
font-family:Raleway,sans serif;
font-weight:500;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
}
h1{
color:white;
text-align:center;
margin:25px;
font-size:2rem;
}
$white:white;
.col-xs-12.col-md-4{
text-align:center;
}
//Main container
.mynotification{
@include perspective(1000);
position:relative;
margin:40px;
}
.text-notification{
display:inline-block;
padding: 20px;
border:1px solid $white;
color:$white;
width:200px;
}
.close-me{
@include transition(
box-shadow 400ms ease-in,
color 100ms 200ms linear,
opacity 200ms linear 200ms,
transform 200ms linear 200ms
);
cursor:pointer;
}
.close-me.right{
width:60px;
height:100%;
border-top:1px solid $white;
border-right:1px solid $white;
border-bottom:1px solid $white;
position:absolute;
&:after{
position:absolute;
width:15px;
height:2px;
content:"";
background:$white;
top:50%;
left:50%;
margin-left:-7.5px;
margin-top:-1px;
@include transform(rotate(45deg));
@include transition(background-color 100ms 200ms linear,transform 200ms ease-in-out);
}
&:before{
@extend .close-me:after;
@include transform(rotate(-45deg));
@include transition(background-color 100ms 200ms linear,transform 200ms ease-in-out);
}
}
.close-me.right{
display:inline-block;
}
.mynotification.close-right{
@include animation(close-right 0.4s ease-in-out forwards);
opacity:0;
@include transition(opacity 150ms 300ms linear);
.close-me.right{
@include transform-origin(left, center);
@include transform(rotateY(90deg));
opacity:0;
@include transition(
opacity 200ms linear 200ms,
transform 200ms linear 200ms
)
}
}
@include keyframes(close-right){
0%{
@include transform(translate3d(0,0,0));
}
50%{
@include transform(translate3d(-20px,0,0));
}
100%{
@include transform(translate3d(20px,0,0));
}
}
.bottom{
@extend .close-me.right;
display:block;
width:200px;
height:60%;
border-top:none;
border-left:1px solid $white;
left:50%;
margin-left:-100px;
@include transform-origin(top, center);
}
.mynotification.close-bottom{
@include animation(close-bottom 0.4s ease-in-out forwards);
opacity:0;
@include transition(opacity 150ms 300ms linear);
.close-me.bottom{
@include transform(rotateX(-90deg));
opacity:0;
@include transition(
opacity 200ms linear 200ms,
transform 100ms linear 200ms
)
}
}
@include keyframes(close-bottom){
0%{
@include transform(translate3d(0,0px,0));
}
50%{
@include transform(translate3d(0,-20px,0));
}
100%{
@include transform(translate3d(0,20px,0));
}
}
.text-notification.left-text{
margin-left:60px;
}
.left{
@extend .close-me.right;
border-left:1px solid $white;
border-right:none;
}
.close-left{
@include animation(close-left 0.4s ease-in-out forwards);
opacity:0;
@include transition(opacity 150ms 300ms linear);
.close-me{
@include transform(rotateY(-90deg));
opacity:0;
@include transition(
opacity 200ms linear 200ms,
transform 200ms linear 200ms
);
@include transform-origin(right, center);
}
}
@include keyframes(close-left){
0%{
@include transform(translate3d(0,0,0));
}
50%{
@include transform(translate3d(20px,0,0));
}
100%{
@include transform(translate3d(-20px,0,0));
}
}
.close-me:hover{
@include box-shadow(inset 0px 0px 100px 150px white);
@include transition(
box-shadow 400ms ease-in,
color 100ms 200ms linear,
opacity 200ms linear 200ms,
transform 200ms linear 200ms
);
&:before,
&:after{
background-color:black;
@include transition(background-color 100ms 200ms linear,transform 200ms ease-in-out);
@include transform(scale(1.2));
}
}
View Compiled
$('.close-me.right').on('click',function(){
$(this).closest('.mynotification').addClass('close-right');
});
$('.close-me.bottom').on('click',function(){
$(this).closest('.mynotification').addClass('close-bottom');
});
$('.close-me.left').on('click',function(){
$(this).closest('.mynotification').addClass('close-left');
});
var classes = ['close-right','close-bottom','close-left'];
$('.close-me').on('click',function(){
if(
$('.mynotification').hasClass(classes[0]) &&
$('.mynotification').hasClass(classes[1]) &&
$('.mynotification').hasClass(classes[2])){
$('.mytitle').fadeOut(500,function(){
$('.mytitle').text('Refresh to see it again!').fadeIn(500);
});
}
});
This Pen doesn't use any external CSS resources.