Skip to content

Instantly share code, notes, and snippets.

@jonathanpath
jonathanpath / _header-title.scss
Created March 8, 2017 13:19
Header title full width for bootstrap (mobile first style)
.header-title {
@media (max-width: $screen-xs-max) {
width: 100%;
position: absolute;
left: 0;
text-align: center;
padding: 15px 60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@jonathanpath
jonathanpath / _table-bootstrap.scss
Created January 17, 2017 15:53
Smart responsive bootstrap tables
/*===========================================
= Override BS3 tables =
===========================================*/
.table-smartresponsive {
@media (max-width: $screen-xs-max) {
th {
display: none;
}
@jonathanpath
jonathanpath / Full modal on Bootstrap
Last active May 23, 2017 10:06
_full-modal-boostrap.scss
/* =Modal full
---------------------- */
.modal-full {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
background: #fff;
transform: translate(0,0) !important;
@jonathanpath
jonathanpath / responsive-lap-and-top.scss
Created July 6, 2016 10:23
Inuit CSS media query Lap and top
<snippet>
<content><![CDATA[
@include media-query(lap-and-up) {
}
]]></content>
<tabTrigger>inuitcss-medium</tabTrigger>
<scope>source.scss</scope>
</snippet>
@jonathanpath
jonathanpath / _customcheckbox.scss
Created May 27, 2016 10:01
Simple Custom Checkbox in Sass + Glyphicons
/* ==|====================
Module/Custom Checkbox
======================= */
.customcheckbox {
display: block;
position: relative;
cursor: pointer;
font-weight: 300;
@jonathanpath
jonathanpath / retina-mixin.scss
Last active October 1, 2015 14:46
Retina Sass mixin
// Need autoprefixer to generate browser prefix needed
@mixin retina {
@media
(min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
@content;
}
}
@jonathanpath
jonathanpath / placeholder_polyfill.js
Last active September 11, 2015 14:01
Placeholder Polyfill
/**
* Placeholders for old browsers
*/
function placeholderOldBrowsers() {
if (!Modernizr.input.autofocus) {
$('input').each(function(){
if ($(this).attr('autofocus'))
$(this).focus();
});
}
@jonathanpath
jonathanpath / _title-border.scss
Created August 19, 2015 13:16
Title with line at left and right
.title-border {
font-size: 20px;
font-weight: 300;
border-bottom: solid 1px #eee;
text-align: center;
margin: 0 15px 40px;
padding-top: 20px;
clear: both;
span {
@jonathanpath
jonathanpath / _buttons-bootstrap.scss
Last active September 9, 2016 12:20
Facebook and Twitter shares buttons (based on Bootstrap)
/* ==|====================
Vendor override/Bootstrap/Buttons
======================= */
/* =Sizes
---------------------- */
.btn-xlg {
font-size: 20px;
padding: 14px 32px;
@jonathanpath
jonathanpath / _buttons-foundation.scss
Last active September 9, 2016 12:20
Facebook and Twitter Buttons (based on Foundation)
/* =Icons
---------------------- */
.button-icon-left {
position: relative;
padding-left: 63px !important;
padding-right: 10px !important;
i {
position: absolute;