Skip to content

Instantly share code, notes, and snippets.

View alxpsr's full-sized avatar

alxpsr alxpsr

  • Artsofte
  • 🇷🇺 Russia
View GitHub Profile
@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 / 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 / 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');
@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
@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 / placeholder
Last active May 25, 2016 09:16
::placeholder
//mozilla adds opacity to placeholder by default, set opacity for -moz- to 1
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: rgba(0,0,0,1);
}
::-moz-placeholder { /* Firefox 19+ */
color: rgba(0,0,0,1);
opacity: 1;
}
@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>