Skip to content

Instantly share code, notes, and snippets.

&:after, &:before{
content: '';
display: table;
}
&:after{
clear: both;
}
@Farmatique
Farmatique / gist:fae576f52f1de24ab7388be2ce233cb2
Last active January 26, 2017 15:12
remove arrows from input[type="number"]
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
input[type=number]{
-moz-appearance: textfield;
}
@Farmatique
Farmatique / gist:afa2e33ee1a1fb96ba91273bc6ff99dd
Last active October 26, 2016 14:36
Script for mobile dropdown menu in header with scroll
/* set height for mobile menu */
var headerHeight = 80;
jQuery('.navbar-toggle').on('click', function(){
jQuery('.navbar-collapse').delay(400).queue(function(next){
jQuery(this).css('height', window.innerHeight-headerHeight);
next();
});
})
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<meta name="format-detection" content="telephone=no">
@Farmatique
Farmatique / gist:c2b60570787268f7d72ba8955b66799f
Created November 8, 2016 11:55
Opacity for modal window (bootstrap modal)
.modal-backdrop.in {
opacity: 0.9;
background-color: black;
}
@Farmatique
Farmatique / gist:7ff4218d829ac5453be48623a2819370
Created November 8, 2016 19:39
bootstrap modal vertical centering
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
@Farmatique
Farmatique / gist:ae57c0b12b342b705355c3ec169f7612
Created November 9, 2016 19:49
wrap to the next line with flex
ul{
display: flex;
&::before, &::after {
content: '';
width: 100%;
order: 1;
-webkit-order: 1;
}
>li{
display: inline-block;
@Farmatique
Farmatique / gist:cdd388bbcbd1a36d8cc2c745e06311b9
Last active March 7, 2018 12:36
Bootstrap Close button mobile menu - crossed buton when mobile menu expanded.
/* button to cross */
.navbar-toggle .icon-bar:nth-of-type(2) {
top: 1px;
}
.navbar-toggle {
.icon-bar {
position: relative;
transition: all 500ms ease-in-out;
&:nth-of-type(2) {
top: 3px;
@Farmatique
Farmatique / gist:de4a535aebedd1cd35102f4e65ffe732
Created November 18, 2016 17:12
Fix thin font in Safari issue
body {
-webkit-font-smoothing: subpixel-antialiased;
}
/* For SVG */
.bg {
background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}