Skip to content

Instantly share code, notes, and snippets.

View alxpsr's full-sized avatar

alxpsr alxpsr

  • Artsofte
  • 🇷🇺 Russia
View GitHub Profile
@alxpsr
alxpsr / for single element
Created April 8, 2016 16:30
vertical middle align
.img-wrap {
height: 100px;
line-height: 100px;
}
.img-wrap img {
display: inline-block;
vertical-align: middle;
}
@alxpsr
alxpsr / справка
Created April 8, 2016 16:31
Отрицательные margin
Чтобы отрицательные margin-left/right растягивали элемент, ширина элемента не должна быть задана явно (либо не задана вовсе, либо auto)
@alxpsr
alxpsr / justify navbar
Last active April 8, 2016 16:34
justify navbar
nav ul {
text-align: justify;
}
nav ul:after {
content: "";
display: inline-block;
width: 100%;
}
@alxpsr
alxpsr / on jquery
Created April 8, 2016 16:51
Form validate
function validate(items){
items.removeClass('invalid');
var retval = true;
items.each(function (i,e){
if($(e).val() == ''){
$(e).addClass('invalid');
retval = false;
}
});
return retval;
<script>
var toTopBtn = document.getElementsByClassName('to-top-btn')[0];
window.onscroll = function() {
var scrollTop = window.pageYOffset;
if ( scrollTop >= 120 ) {
toTopBtn.classList.add('to-top-btn--active');
}
else {
toTopBtn.classList.remove('to-top-btn--active');
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.otf') format("opentype"),
url('myfont-webfont.svg#svgFontName') format('svg');
font-weight: normal;
font-style: normal;
}
@alxpsr
alxpsr / close button
Last active April 28, 2016 12:14
btn-close
<button class="_btn-close" data-ng-click="activeItem = undefined">
<span class="line-left"></span>
<span class="line-right"></span>
</button>
._btn-close {
position: absolute;
top: 5px;
right: 5px;
display: inline-block;
@alxpsr
alxpsr / header__phone
Created May 5, 2016 12:21
header__phone twig
<a class="header-phone" href="tel:{{ currentHost.company.phone()|replace({'(':'',' ':'',')':'','-':''}) }}">{{ currentHost.company.phone() }}</a>
Специфичность селектора определяется компонентами самого селек
тора. Значение специфичности состоит из четырех частей: 0,0,0,0. Ре
альная специфичность селектора определяется следующим образом:
1) Для каждого указанного в селекторе значения идентификатора
к специфичности добавляется 0,1,0,0.
2) Для каждого указанного в селекторе имени класса, псевдокласса
или атрибута к специфичности добавляется 0,0,1,0.
3) Для каждого заданного в селекторе элемента и псевдоэлемента
к специфичности добавляется 0,0,0,1. Внутреннее противоречие
@alxpsr
alxpsr / @mixin breakpoint( $breakpoint )
Last active May 14, 2016 06:17
@mixin breakpoint( $breakpoint )
$phone: 480px;
$tablet-portrait: 768px;
$tablet: 1024px;
$desktop-lg: 1200px;
/*
phone = max-width: 480px
tablet = min-width: 480px and max-width: 1024px
mobile-between = min-width: 480px and max-width: 768px