Skip to content

Instantly share code, notes, and snippets.

$tappable-height:60px;
$default-border-radius:4px;
$Green: #97cb5b;
.ButtonStyle {
background:#fff;
display: inline-block;
border-radius:$default-border-radius;
font-size: 18px;
font-weight: bold;
cursor: pointer;
$tappable-height:60px;
$default-border-radius:4px;
$Green: #97cb5b;
%ButtonStyle {
background:#fff;
display: inline-block;
border-radius:$default-border-radius;
font-size: 18px;
font-weight: bold;
cursor: pointer;
%GutterPaddingContent {
padding:40px 20px;
}
.Content {
@extend %GutterPaddingContent /* Mobile */
}
@media all and (min-width: 1001px) {
%GutterPaddingContent {
@ozinepank
ozinepank / dabblet.css
Created October 10, 2012 10:20 — forked from daneden/dabblet.css
CSS Photo Album
/* CSS Photo Album */
/* Rebound of this shot by @daryl: http://drbl.in/fwwM */
* {
margin: 0;
padding: 0;
position: relative;
box-sizing: border-box;
}
@ozinepank
ozinepank / gist:4090802
Created November 16, 2012 20:49 — forked from hileon/gist:1311735
Sublime Text 2 - Useful Shortcuts

Sublime Text 2 – Useful Shortcuts (Windows)

General

Ctrl+KB toggle side bar
Ctrl+Shift+P command prompt
Ctrl+` python console
Ctrl+N new file

Editing

@ozinepank
ozinepank / mixing-palceholder.scss
Last active November 18, 2015 04:00
Using Mixing pseudo palceholder (SASS)
@mixin psuedo-placeholder($color-placeholder) {
&::-webkit-input-placeholder {
color: $color-placeholder;
@include transition-color;
}
&:-moz-placeholder { /* Firefox 18- */
color: $color-placeholder;
@include transition-color;
}
<?php
add_action( 'wp_head', 'wps_add_ie_html5_shim' );
/**
* Add IE conditional html5 shim to header
*/
function wps_add_ie_html5_shim() {
global $is_IE;
if ( $is_IE ) {
echo '<!--[if lt IE 9]>';
echo '<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>';
img.grayscale.disabled {
filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
-webkit-filter: grayscale(0%);
}
@ozinepank
ozinepank / detection_user_agent.js
Last active December 15, 2015 15:09
Detect User agent
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$(".body-section").addClass("app-visible");
/* | เมื่อ user เปิดเว็บผ่าน iPhone/iPod ให้ addClass .app-visible เข้าไปใน body-section | */
// credit : http://davidwalsh.name/detect-iphone
IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
IS_IPHONE = (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);
IS_android = navigator.userAgent.match(/Android/i) != null;
@ozinepank
ozinepank / Animations.css
Created April 1, 2013 02:39
Cross-Browser Animations animations that works across Firefox, Chrome, Opera, and IE10
.polling_message {
color:white;
float:left;
margin-right:2%;
}
.view_port {
background-color:black;
height:25px;
width:100%;