Skip to content

Instantly share code, notes, and snippets.

ɥɔɐ⅂ ɐɥɔsɐS voodoocode

View GitHub Profile
View _mixin.visuallyhidden.scss
// Mixin to quickly apply accessible hiding to elements.
@mixin hidden-visually() {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
@voodoocode
voodoocode / bookmarklet.js
Last active Feb 28, 2018
Bookmarklet to remove Speigel Online adblocker-blocker message
View bookmarklet.js
javascript:(function()%7B%24('%23wrapper-content').css(%7Bopacity%3A%201%2Cfilter%3A%20'none'%2CpointerEvents%3A%20'all'%7D)%3B%24('.ua-detected').hide()%7D)()
@voodoocode
voodoocode / atom-vertical-file-tabs.less
Last active Sep 26, 2017 — forked from jasesmith/atom-vertical-file-tabs.less
For vertically stacked open file tabs, put this in your `./atom/styles.less`
View atom-vertical-file-tabs.less
atom-workspace-axis.vertical atom-pane {
flex-direction: row-reverse;
.tab-bar {
box-shadow: inset -1px 0 0 #181a1f;
resize: horizontal;
height: auto;
display: block;
padding-right: 1px;
padding-bottom: 3em;
min-width: 14em;
@voodoocode
voodoocode / pseudo-elements.md
Last active Jul 1, 2016 — forked from webtobesocial/pseudo_elements.md
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.
View pseudo-elements.md

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {
@voodoocode
voodoocode / gist:ad1f872725171f06658a
Created Apr 21, 2015
post-checkout hook "Master"
View gist:ad1f872725171f06658a
#!/bin/bash
branch=$(git symbolic-ref HEAD | cut -d '/' -f 3);
if [ "master" == "$branch" ]; then
lines[0]="Master, Master, where's the dreams that I've been after?"
lines[1]="Master, Master, you promised only lies"
lines[2]="Laughter, laughter, all I hear or see is laughter"
lines[3]="Laughter, laughter, laughing at my cries"
echo -e "\033[1;31m ${lines[$((RANDOM%${#lines[*]}))]} \033[0m";
fi
@voodoocode
voodoocode / SassMeister-input.scss
Created Apr 14, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
@function some-function($some-number:10, $another-number:5){
@return $some-number + $another-number
}
.some-class {
@voodoocode
voodoocode / SassMeister-input.scss
Created Mar 13, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$base-color: green;
$base-color : red !default;
$base-link-color: $base-color !default;
View _base.scss
/**
* The result of this file structure is ONE *.css file per theme. Making a global change
* to _base or _config partial will update all themes that inherit from them. #win
*/
@import 'config';
/**
* Global
*/
View _mixins.scss
//custom dashed border
@mixin dashed-border($dashlength, $spacelength, $borderwidth, $color, $position: top) {
$per: percentage($dashlength / ($dashlength + $spacelength));
background-image: linear-gradient(to right, $color 0%, $color $per, rgba(0, 0, 0, 0) $per);
background-position: 0 $position;
background-size: ($dashlength + $spacelength) $borderwidth;
background-repeat: repeat-x;
}
@voodoocode
voodoocode / _mixins.scss
Created Jun 30, 2014
A short mixin to insert a given character in generated content element before an element.
View _mixins.scss
//include a character with before
@mixin insert-before($char: '-') {
&:before {
content: $char;
@content;
}
}
@mixin checkmark() {
@include insert-before('') {
You can’t perform that action at this time.