Cacher is the code snippet organizer for pro developers

mixin incr(state,className, min)
  .incr.js-incr-wrap(class= className data-min=min)
    .incr-nav.js-inc-nav.js-inc-nav--minus
      +icon("minus","icon")
    .incr-val
      span.js-incr-val=state ? state : 0
    .incr-nav.js-inc-nav.js-inc-nav--plus
      +icon("plus","icon")

// incr
.incr
	f()
	position relative
.incr-nav
	flex(mid)
	tr(all)
	size 40px
	border 1px solid #dddddd
	background white
	round()
	.icon
		size 14px
		fill $gray
		tr()
	&:hover
		cp()
		border 1px solid $mark
		.icon
			fill $mark
	&:active
		background-color darken($mark,10)
.incr-val
	flex(mid)
	background white
	position relative
	tr(all)
	padding: 0 15px
	span
		outline: none
		user-select: none

	// incr
	var incrEl = {}
	$('body').on('click', '.js-inc-nav', function (e) {
		incrEl.parent = $(this).closest(".js-incr-wrap");
		incrEl.value = parseInt(incrEl.parent.find('.js-incr-val').html());
		incrEl.state = incrEl.parent.find('.js-incr-val')
		incrEl.min = incrEl.parent.data('min')*1 || 0
	});
	$('body').on('click', '.js-inc-nav--minus', function (e) {
		incrEl.value = incrEl.value <= incrEl.min ? incrEl.min : --incrEl.value
		incrEl.state.html(incrEl.value);
		console.log(incrEl.value);
	});
	$('body').on('click', '.js-inc-nav--plus', function (e) {
		++incrEl.value;
		incrEl.value = incrEl.value > 100 ? 100 : incrEl.value;
		incrEl.state.html(incrEl.value);
	});
	// incr === end