Skip to content

Instantly share code, notes, and snippets.

Avatar

Ozyr Origame

  • Paris
View GitHub Profile
@Origame
Origame / visibility-transition.scss
Created Jun 29, 2018
SCSS - Visibility transition mixin
View visibility-transition.scss
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
@Origame
Origame / nth-last-child.css
Created Oct 3, 2017
CSS : select last X items
View nth-last-child.css
//Last 4 items won't have margin
.selector{
margin-bottom: 20px;
&:nth-last-child(-n+4){
margin-bottom: 0;
}
}
@Origame
Origame / flexbox-same-height-div.css
Last active Aug 3, 2017
CSS - Flexbox => same height divs / vertically centered content
View flexbox-same-height-div.css
//SAME HEIGHT + VERTICALLY CENTERED CONTENT
.parent {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
}
@Origame
Origame / togglePasswordText.js
Created Mar 27, 2017
JS - toggle encrypted password
View togglePasswordText.js
var togglePasswordText = function(){
var $showBtn = $('.js-show-password');
var $pw = $('.js-password-toshow');
$showBtn.on('click', function(){
if ( $pw.get(0).type === "password" ){
$pw.get(0).type = 'text';
$showBtn.addClass('active');
}
else{
@Origame
Origame / openMobileMenu.js
Created Mar 27, 2017
JS - mobile - open burger menu
View openMobileMenu.js
//MOBILE MENU MANAGER - MOBILE //ON CLICK
var toggleMobileMenu = function(){
var $menuBtn = $('.js-mobile-menu-toggler');
var $menuContent = $('.js-mobile-menu-content');
var $body = $('body');
var $overlay = $('.overlay');
var viewPort = Nsw.viewPortWidth();
var menuWidth = viewPort - 80;
@Origame
Origame / goToDataLink.js
Created Mar 27, 2017
JS - Go to data-link
View goToDataLink.js
@Origame
Origame / ismobile.js
Created Mar 27, 2017
JS - isMobile / isTablet / isDesk
View ismobile.js
//Global function
if (!window.Nsw) {
window.Nsw = {};
}
Nsw.viewPortWidth = function() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
View magento-skin-url.phtml
<!-- this is inside of .phtml files -->
<img src="<?php echo $this->getSkinUrl('images/breadcrumbs_arrow.gif'); ?>" alt="arrow"/>
<!-- this is in cms block -->
<img class="featured-ratings" src="{{skin url='images/ratings.jpg'}}" alt="" />
View close-cross-css3.css
.pre-header .close{
position: absolute;
top: 25px;
right: 5px;
width: 30px;
height: 30px;
cursor: pointer;
}
.pre-header .close .cross{
@Origame
Origame / isRetinaOrHighDensity.js
Created Nov 18, 2016
Retina & high density detect function
View isRetinaOrHighDensity.js
function isHighDensity(){
return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.3));
}
function isRetina(){
return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >=
You can’t perform that action at this time.