LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Menu

0 Items
Done

Coffee

Espresso

0
+
-

Cappuccino

0
+
-

Lato

0
+
-

Sweet

Baklava

0
+
-

Kunafeh Nabulsia

0
+
-

Basbousa

0
+
-

Food

Shawarma

0
+
-

Foul Mudammes

0
+
-

Falafel

0
+
-

Drink

Tamer Hindi

0
+
-

Jalab

0
+
-

Menu

2 Items
Done

Coffee

Espresso

2
+
-

Cappuccino

0
+
-

Lato

0
+
-

Sweet

Baklava

0
+
-

Kunafeh Nabulsia

0
+
-

Basbousa

0
+
-

Food

Shawarma

0
+
-

Foul Mudammes

0
+
-

Falafel

0
+
-

Drink

Tamer Hindi

0
+
-

Jalab

0
+
-
CSS
/* I'm using Ubuntu Condensed font
/* instead of the original shot font,
/* I think Ubuntu font is a better fit,
/* What do you think? 
/* **************************** */

* {box-sizing:border-box}
html,body {height:100%}
body {
  background: #d3e2d4;
  background: linear-gradient(135deg, #d3e2d4,#819083) top left fixed;
  font: 14px 'Ubuntu Condensed', sans-serif;
  line-height:1;
  min-height:580px;
  -webkit-font-smoothing: antialiased;
}

.paper {
  width:280px;
  height:480px;
  border-radius:4px;
  box-shadow: 0 5px 25px rgba(0,0,0,.15);
  position:absolute;
  top:50px;
  right:50%
}

.box {width:100%;height:100%;overflow:hidden;border-radius:4px}
.bar {
  height:80px;
  background: #f7ffce;
  background:linear-gradient(135deg,#f7ffce,#e2e4b8);
  border-radius:4px 4px 0 0;
  color:#af9a50;
  padding:20px;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  position:relative;
  z-index:5
}
.menu {float:left;width:12px}
.menu span {
  height:1px;
  background:#af9a50;
  display:block;
  margin-bottom:3px;
}
.bar p {
  float:left;
  margin-left:10px;
  margin-top:-3px;
}
.bar .action {
  float:right;
  margin-top:-13px
}
.bar>span {  
   float:left;
   width:100%;
   margin-top:22px
}
.item {
  height:100px;
  padding:20px;
  box-shadow: 0 4px 5px rgba(0,0,0,.3);
  position:relative;
  font-size:21px;
  -webkit-transition:all 200ms ease;
  transition:all 200ms ease;
}

.item>.box>p {
  line-height:60px;
  -webkit-transition:all 200ms ease;
  transition:all 200ms ease;
}
.detail {
  font-size:17px;
  -webkit-transition:all 200ms ease;
  transition:all 200ms ease;
  opacity:0
 
}
.detail div {line-height:35px}
.detail .counter,.detail p {float:left;width:50%}
.detail>div {float:left;width:100%}
.detail .counter {text-align:right}
.detail .counter div {
 width:29px;
 height:20px;
 float:right;
 text-align:center;
 line-height:20px;
 margin-top:7px;
 cursor: pointer
}
.detail .counter .plus {
  margin-left:1px;
  border-radius:0 30px 30px 0;
}
.detail .counter .minus {
  margin-right:1px;
  margin-left:11px;
  border-radius:30px 0 0 30px;
}

.item.coffee {
  background: #ffe26f;
  background:linear-gradient(135deg,#ffe26f,#e8c962);
  z-index:4;
  color:#e07556; 
}
.item.coffee .detail .counter div {background: #FFF2BE}

.item.sweet {
  background: #f3825f;
  background:linear-gradient(135deg,#f3825f,#f3825f);
  z-index:3;
  color:#9c3c53;
}
.item.sweet .detail .counter div {background: #FFC5B2}

.item.food {
  background: #a7425c;
  background:linear-gradient(135deg,#a7425c,#993950);
  z-index:2;
  color:#402344;
}
.item.food .detail .counter div {background: #ECA9BA}

.item.drink {
  background: #563761;
  background:linear-gradient(135deg,#563761,#502f55);
  z-index:1;
  color:#1c1730;
  border-radius:0 0 4px 4px
}
.item.drink .detail .counter div {background: #8A7193}

.item-icon {  background:url(https://image.ibb.co/b6zDSF/items_icons_t.png) no-repeat top left;
  height:60px;
  width:65px;
  float:left;
  margin-right:10px;
  -webkit-transition:all 200ms ease;
  transition:all 200ms ease;
  -webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);
}
.item-icon.coffee {background-position:0 0}
.item-icon.sweet {background-position:-70px 0}
.item-icon.food {background-position:-137px 0}
.item-icon.drink {background-position:-208px 0}

/** Active **/
.paper.item-active .item {height:60px;padding:0 20px}
.paper.item-active .item.active {height:260px;padding:20px;-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);}
.item.active .item-icon {
  -webkit-transform:scale(1.5) translateZ(0);
  -ms-transform:scale(1.5) translateZ(0);
  -moz-transform:scale(1.5) translateZ(0);
  transform:scale(1.5) translateZ(0);
  margin:0 auto;
  float:none;
}
.item.active>.box>p {
  font-size:31px;
  text-align:center
}
.item.active .detail {opacity:1}

/** Extra For Previewing **/
.item .number,.paper.preview-1 .bar .action {
    display:none
}
.paper.preview-1 {
  margin-right:20px;
}
.paper.preview-2 {
  margin-right:-300px;
}
/** making some things unselectable **/
.item>.box>p,.counter {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.item>.box>p {
  cursor: default
}
 
JS
// Items Magic [Preview-1]
$('.paper.preview-1 .item').click(function () {
    $('.paper.preview-1 .item').not(this).removeClass('active');
    $(this).toggleClass('active');
    if ($('.paper.preview-1 .item').hasClass('active')) {
        $('.paper.preview-1').addClass('item-active');
    } else {
        $('.paper.preview-1').removeClass('item-active')
    };
});
// Preventing Closing when Click inside counter
$('.minus,.plus').click(function (a) {
    a.stopPropagation();
});

// Adding Counter [Preview-1]
$('.paper.preview-1 .plus').click(function () {
    $(this).parent().find('.number').html(function (y, val) {
        return val * 1 + 1
    });
});

$('.paper.preview-1 .minus').click(function () {
    var increased = parseInt($(this).parent().find('.number').text());
    if (isNaN(increased) || increased > 0) {
        $(this).parent().find('.number').html(function (t, val) {
            return val * 1 - 1
        });
    } else {
      return false;
    }
});
$('.paper.preview-1 .plus, .paper.preview-1 .minus').click(function () {
    var increased = parseInt($(this).parent().find('.number').text());
    
    var itemsTotal = 0;
    $('.paper.preview-1 .number').each(function () {
        itemsTotal += ($(this).html() * 1);
    });
    $('.paper.preview-1 .items-total').html(itemsTotal);
    
    var itemsTotalAll = parseInt($('.paper.preview-1 .items-total').text());
    if (isNaN(itemsTotalAll) || itemsTotalAll <= 0) {
        $('.paper.preview-1 .action').hide();
    } else {
        $('.paper.preview-1 .action').show();
    }
    
    if (isNaN(increased) || increased <= 0) {        
        $(this).parent().find('.number').hide();
    } else {
        $(this).parent().find('.number').show();
    }
});

// JavaScript code is done
// the rest are just repeating 
// for Paper Preview-2 functionality

// Items Magic [Preview-2]
$('.paper.preview-2 .item').click(function () {
    $('.paper.preview-2 .item').not(this).removeClass('active');
    $(this).toggleClass('active');
    if ($('.paper.preview-2 .item').hasClass('active')) {
        $('.paper.preview-2').addClass('item-active');
    } else {
        $('.paper.preview-2').removeClass('item-active')
    };
});

// Adding Counter [Preview-2]
$('.paper.preview-2 .plus').click(function () {
    $(this).parent().find('.number').html(function (p, val) {
        return val * 1 + 1
    });
});


$('.paper.preview-2 .minus').click(function () {
    var increased = parseInt($(this).parent().find('.number').text());
    if (isNaN(increased) || increased > 0) {
        $(this).parent().find('.number').html(function (k, val) {
            return val * 1 - 1
        });
    } else {

    }
});
$('.paper.preview-2 .plus, .paper.preview-2 .minus').click(function () {
    var increased = parseInt($(this).parent().find('.number').text());
    
    var itemsTotal = 0;
    $('.paper.preview-2 .number').each(function () {
        itemsTotal += ($(this).html() * 1);
    });
    $('.paper.preview-2 .items-total').html(itemsTotal);
    
    var itemsTotalAll = parseInt($('.paper.preview-2 .items-total').text());
    if (isNaN(itemsTotalAll) || itemsTotalAll <= 0) {
        $('.paper.preview-2 .action').hide();
    } else {
        $('.paper.preview-2 .action').show();
    }
    
    if (isNaN(increased) || increased <= 0) {        
        $(this).parent().find('.number').hide();
    } else {
        $(this).parent().find('.number').show();
    }
});

Description

Based on a Dribbble shot that caught my eye http://drbl.in/pWyx
Term
Mon, 11/27/2017 - 21:28

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv