Maxim Tatarinov maxcraftsman

🎯

Focusing

maxcraftsman / zurb-js-bp.js

Last active April 16, 2018 01:13

foundation javascript breakpoints [js]

	$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
	modal();
	})
	modal();
	function modal(){
	if (Foundation.MediaQuery.is('large') == true) {
	alert('large');
	} else if (Foundation.MediaQuery.is('medium') == true) {
	alert('medium');
	} else {

maxcraftsman / number-count-input.html

Last active April 16, 2018 01:14

Input number with plus/minus buttons [html,sass]

	<div class="number-input">
	<button type="button" onclick="this.parentNode.querySelector('input[type=number]').stepDown()"></button>
	<input class="quantity" min="0" name="quantity" value="1" type="number">
	<button type="button" onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
	</div>
	<style>
	.number-input {
	display: inline-flex;
	width: 80px;
	height: 30px;

maxcraftsman / table-data.html

Last active April 11, 2018 08:16

Adaptive table styles

	<div class="table">
	<div class="table__tbody white-box">
	<div class="table__tbody_inner" id="table-data">
	<div class="table__row table__row_head">
	<div class="table__cell">№</div>
	<div class="table__cell">Имя</div>
	<div class="table__cell">Страна</div>
	<div class="table__cell">Дата посещения</div>
	</div>
	<div class="table__row">

maxcraftsman / input-placeholder.html

Last active April 11, 2018 06:17

Animated input placeholder

	<label class="reverse-input">
	<input type="text" placeholder="" required="">
	<em>Фамилия и имя</em>
	</label>
	<style>
	.reverse-input {
	display: flex;
	flex-direction: column;
	& em {
	padding: 0 5px;

maxcraftsman / checkbox.html

Last active April 11, 2018 05:21

Checkboxes styles

	<div class="input-line">
	<input id="checkbox" type="checkbox">
	<label for="checkbox"><span></span>Для всех типов</label>
	</div>
	<style>
	.input-line input[type="radio"] + label span {
	border: 1px solid #c6c6c6;
	border-radius: 50%;
	width: 16px;
	height: 16px;

maxcraftsman / hypotenuse.js

Created March 29, 2018 10:13

	function displayCalc(e){
	catetA = document.documentElement.clientWidth;
	catetB = document.documentElement.clientHeight;
	gipotenuza = Math.sqrt(Math.pow(catetA,2)+Math.pow(catetB,2));
	alpha = Math.asin(catetB/gipotenuza);
	degrees = alpha * 180 / Math.PI;
	$("#top-cover, #bottom-cover").css('transform','rotate(-'+ degrees +'deg)');
	var all = document.getElementsByTagName("*");
	}
	Pace.on('start',function(){

maxcraftsman / hamburger.scss

Last active May 6, 2019 05:23

hamburger animate icon