lib.styl

// Widths
$desktop-content = 690px;
$desktop-ftr = 732px;
$header-height = 48px;
$max-site-width = 1024px;

// Use these as @media $at-least-desktop {}
$at-least-desktop = unquote('(min-width: 710px)');
$narrower-than-desktop = unquote('(max-width: 709px)');
$wider-desktop = unquote('(min-width: 1024px)');
$small-desktop = unquote('(min-width: 710px) and (max-width: 1024px)')

$retina-tablet = $retina unquote('and (max-width: 540px)');
$retina-desktop = $retina unquote('and (min-width: 710px)');
$retina-wide = $retina unquote('and (min-width: 1024px)');

// Colors
// TODO: Have Michael take a peek at these!
$link = #2d87ca;
$link-dark = darken($link, 10%);
$faded-link = rgba($link, .5);
$shadow-blue = #98B2C9;
$border-blue = #C9DDF2;
$border-black = rgba(#000, .2);
$faded-blue = rgba($border-blue, .1);
$orange = darken(#d60, 5%);
$red = #c00000;
$maroon = #800;
$green = #090;
$black = #000;
$dark-gray = #333;
$navy-gray = #394C58;
$overlay-gray = #2a353c;
$text = #424f5a;
$subtext = #74828d;
$darker-text = darken($text, 25%);
$medium-gray = #666;
$gray = #888;
$note-gray = #999;
$bg-gray = #bbb;
$light-gray = #ccc;
$faint-gray = #eee;
$barely-gray = #fcfcfc;
$white = #fff;
$bg = #eff1f3;
$black-border = #14171a;
$bg-lite = lighten($bg, 2%);
$faint-blue = #ECF5FE;
$grain = #394C58;

// New design.
$flamin-hot-cheetos-orange = #ff9500;
$sailor-blue = #0099d0;
$castle-skull-gray = #333;
$grey-gardens-gray = #4d4d4d;
$london-fog-gray = #5f5f5f;
$earl-gray = #a7a7a7;
$primer-gray = #b7b7b7;
$cement-gray = #c7c7c7;
$cloud-gray = #d7d7d7;
$seavan-salt-white = #e7e7e7;
$salt-flat-white = #f1f1f1;
$steam-white = #fffefe;

// Feed.
$breezy-blue = #4cb1ff;
$navbar-gray = #e0e0e0;
$hungry-text = #797979;
$navbar-text = #1a1a1a;

// User Collections Primary, from style guide:
// http://pwalm.github.io/marketplace-style-guides/palette.html#userColPrimary
$user-collections-ruby = #ce001c;
$user-collections-amber = #f78813;
$user-collections-emerald = #00953f;
$user-collections-topaz = #0099d0;
$user-collections-sapphire = #1e1e9c;
$user-collections-amethyst = #5a197e;
$user-collections-garnet = #a20d55;

// Used for content ratings for games in Brazil.
// You can use them elsewhere when you want colourful boxes.
// Don't be a square.
$box-green = #00b963;
$box-blue = #00d5ff;
$box-yellow = #ffd300;
$box-orange = #ff7c00;
$box-red = #ff2600;


$btn-b = #44A5E1;
$btn-b-dark = #267CC2;
$btn-b-lite = saturate(spin($btn-b, 4), 4%);

// Font Stacks
$open-stack = "Fira Sans OT", "Fira Sans", FiraSansWeb, sans-serif;

// Retina
$retina = unquote('screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2)');

// Mixins
$grain-src = url(../img/grain.png);
grain() {
    background-image: $grain-src;
}

$arrow-src = url(../img/arrows/plain.png);

light-text-shadow() {
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

transform($tform) {
    -webkit-transform: $tform;
    -moz-transform: $tform;
    -ms-transform: $tform;
    transform: $tform;
}

transform-origin($x, $y) {
    -moz-transform-origin: $x $y;
    -webkit-transform-origin: $x $y;
    -ms-transform-origin: $x $y;
    transform-origin: $x $y;
}

transition($property) {
    -webkit-transition: $property;
    transition: $property;
}

transition-property($property) {
    -webkit-transition-property: $property;
    transition-property: $property;
}

transition-duration($duration = 2s) {
    -webkit-transition-duration: $duration;
    transition-duration: $duration;
}

transition-delay($delay = 1s) {
    -webkit-transition-delay: $delay;
    transition-delay: $delay;
}

text-columns($count, $gap = 1em) {
    column-count: $count;
    -moz-column-count: $count;
    -webkit-column-count: $count;
    column-gap: $gap;
    -moz-column-gap: $gap;
    -webkit-column-gap: $gap;
}

ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// Image replacement.
hidetext() {
    color: transparent;  // For IE.
    overflow: hidden;
    text-indent: 101%;
    white-space: nowrap;
}

animation($animation) {
    -webkit-animation: $animation;
    animation: $animation;
}

animation-delay($delay) {
    -webkit-animation-delay: $delay;
    animation-delay: $delay;
}

gradientLinear($gradient) {
    background-image: -webkit-linear-gradient($gradient);
    background-image:         linear-gradient($gradient);
}

gradientLeft($gradient) {
    background-image: -webkit-linear-gradient(left, $gradient);
    background-image:         linear-gradient(to right, $gradient);
}

gradientTop($gradient) {
    background-image: -webkit-linear-gradient(top, $gradient);
    background-image:         linear-gradient(to bottom, $gradient);
}

gradient-two-color($color1, $color2) {
    background-color: $color2;
    background-image: -webkit-gradient(linear, left bottom, left top, from($color1), to($color2));
    background-image: -webkit-linear-gradient($color1, $color2);
    background-image:         linear-gradient($color1, $color2);
}

gradient-two-color-with-image($color1, $color2, $image=unquote(''), $position=unquote(''), $repeat=unquote('')) {
    background: $color2;
    background: $image $position $repeat, -webkit-gradient(linear, left bottom, left top, from($color1), to($color2));
    background: $image $position $repeat, -webkit-linear-gradient($color1, $color2);
    background: $image $position $repeat, linear-gradient($color1, $color2);
}

// Depressed button/link styles
depressed() {
    box-shadow: inset 0 8px 20px 6px rgba(0,0,0,.1), inset 0 0 1px 1px rgba(0,0,0,.1);
}

appearance-none() {
    // appearance: none; // This isn't even a proposed descriptor.
    -moz-appearance: none;
    -webkit-appearance: none;
}

header-hover() {
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.25) 25%, rgba(0,0,0,.25) 75%, rgba(0,0,0,0) 100%);
    background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.25) 25%, rgba(0,0,0,.25) 75%, rgba(0,0,0,0) 100%);
}

header-active() {
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.35) 25%, rgba(0,0,0,.35) 75%, rgba(0,0,0,0) 100%);
    background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.35) 25%, rgba(0,0,0,.35) 75%, rgba(0,0,0,0) 100%);
}

// Because WebKit can't figure out how to animate PNGs.
webkit-spin() {
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: spin;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

// Spinners!
spinner-base() {
    animation(unquote('0.9s spin infinite steps(30)'));
    height: 30px;
    margin: 0 auto;
    spinner-base-image();
    width: 30px;
}

spinner-abs() {
    left: 50%;
    margin-left: -15px;
    position: absolute;
}

spinner-alt-image(type = '') {
    if (type == 'retina') {
        background-image: url(../img/btn_spinner_alt_2x.png);
        background-size: 30px auto;

    } else {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAnFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4jUzeAAAANHRSTlMoDw0uDAsqISceLQkIKyUHFxsdHy8SDhQVGCQiJhoQLAUxChwGFikREwQgGTAjMgIDATMALVRcswAAASBJREFUeNp109eWgjAARVEVKwioFBWklyCkQf7/3yYzgRUZzHnd6z7eFZsq72GSYYzdV1WyqYlzNMhg/o9vw6xoxrQe5lWSpUIUNU2E4FDTTxaqN5TJJBcYc20lztjIMPd2ISMfsizDDlNwCiHMTKpi4LoQekzFhea6CVUy0jWtZUq2El2/qDlIkgSoGZmmGas53O/3DzW3db0qvknf/3J3PB4DomT/xfO/KI/z27KswFnOiWDWBQEKHwslRLCNUHho73Olbzoya7g6J49I7N+pZHbleiu6nEx4tv+YCSYd12vUVfHubBu7zdawS85MMPcn5+55qR73BsT+Nj+XKf28QXyNRvYE0/mJUvAcGaw3u7JnkkXU8IEH4vUmTzmO/QBhgZ0/tlb0mAAAAABJRU5ErkJggg==');
    }
}

spinner-base-image(type = '') {
    if (type == 'retina') {
        background-image: url(../img/btn_spinner_2x.png);
        background-size: 30px auto;

    } else {
        background: url(../img/btn_spinner.png) no-repeat center;
    }
}

spinner-install-image(type = '') {
    if (type == 'retina') {
        background-image: url(../img/btn_spinner_18_2x.png);
        background-size: 18px auto;

    } else {
        background: url(../img/btn_spinner_18.png) no-repeat center;
    }
}

spinner-loading-image() {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAEfklEQVRIib3Wa2wUVRQH8AHEAiICJgRJ2W7fj91Cl93ug+22S7u7pRADwYj6oTFRP2AMLwnEiNg1xg9ghARjQiOkCrizc2fm3pldbBCJq+ycc6bFiERjYjBBQQ0+Y1R8RHD9QJFHC2mx6z85H+bemfvLSe69GUkaRWYf7J9Rns7f71SsneVpOFwuw9lyGc6WyXC2LA0fOVLWgfmytbFUzgdGs95N45Rzzsq01VepQKFSgUKFAoWKNBTKh8o5VA7ZulCWgnPzU9bx0hSsvWWwSoFktYKFKgUKVUNo5QhomQwXHTKcd8jWGUfKQocMrHTv4dlj664vN7OGwYkahoVqhoXL8NVoxdVoagR0J5s6VvCDWoaFmqGqVq7AFWk4XZG2djlT1gannI86U8dWOmTocchW2iFbZ+anrCOlB/LRMXVZy+B4LYMLNQz/vgxf6hZOVMljXGyU4NY6Ff6oZ/hnHYO/ahS8WMuwUKNActwxSZKkCmY5Ghj8Uq/i+ToGv1+BrYeLAkqSJLkUeMXF8Kd6FX5uYPhrHcPfalV4pnggy01vYPBdA8MfXAx+HMI/Lhp4Cc0vdat4zq3BN24Vvm1Q8XuXgg8VFXUza3Ojil82qvCVW4OvXRp8WlRQkiSpUYXtCzQ6vUDDz90qfOFW4dX/AcV9C1U8tVDFU40afubWYF0RmAnXPDVpaDTp9Mm/peET404mkxOvR1/0aHTSo9HJJp0+XKjRmqKjHg2f9ej0vkfD4006Di7ScMc4kxMkxiZdi+rQ7dERPRqCV0NrEaf+cSWTyYnRZO62a8a8zGpZpON7Po7venV6x8fxqFeFxHiZ3t7eyd7e3snXDWan+Tge9el0pFnHwz5O/T6O+8ZFZGxStC83ZRgqSZLk1WGTT6c3mzlm/RyNgE6an9N/vewnRFlueojhVBdjtw+bXcBhjp+j0cxJ93NkAU5yQOD+oE7hW+KSyYnLD+Vnxdjbd92bzU7r2t1fMuJ7zRqt9nNUggLfCHB8PcTtfQFu7wlyWjUWr2t3f8kyNjg3wWFOVORmJva/dUe0Lzflhh8EOWwNcnwtKGhvgNt7Qjq93CLopYigLYsFNN0Mi/blpsRNa95yTvXLdChbxgbnLj+UnxVluek3Rb292WlBQT2XwZBBO1sEbW8R9HxE2NsiAje0CkhEBPrbdSiLcapfkrFc7QYuTmQG2jsF+jszg65EZqC8Uz92TyfD2WHTunPYOR0JDgl7fVjYu8KGvSPM6YUWQT1tBj0dMXFz1LTXtwt6vN2gx+LC7o5laHUsY6+IZ7EjYVAgwcHdJaAyblrzOvjA3SPu3BtlsYBEi6CeiGE/FxH2tlbDfqpV2JuWGLQuatKajgw+Ghd2d4dBD3SIgZUxg2JLswOhmIGNnSZWJTjMGXYpjCZNIjczwmFFG6cn2wRtaTNoY5ugtVGT1sRMfCQu7O6EaT8YM2lVp4lL4yaFuwy7oeugPWPM2PWp2t1f0qrZ1RGdwm3cji/htCom7PtiGXtFhzEQiZuWL8YsR4jhqH6y/wGjN55P0DKcoQAAAABJRU5ErkJggg==') no-repeat center;
    background-size: 18px auto;
}

spinner(type = '') {
    spinner-base();
    if (type == 'absolute') {
        spinner-abs();
    } else if (type == 'absolute alt') {
        spinner-abs();
        spinner-alt-image();
    } else if (type == 'alt') {
        spinner-alt-image();
    } else if (type == 'install') {
        height: 18px;
        margin: 2px 0;
        spinner-install-image();
        width: 18px;
    } else if (type == 'loading') {
        height: 18px;
        margin: 2px 0;
        spinner-loading-image();
        width: 18px;
    }
}

// Flex Box (trim me!)

display-flex() {
    display: -ms-box;
    display: -moz-box;
    display: -webkit-box;
    display: flex;
    display: -ms-flex;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
}

flex-stack() {
    flex-direction: column;
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
}

flex-line() {
    flex-direction: row;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    -ms-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
}

flex-center() {
    -ms-box-align: center;
    -ms-flex-align: center;
    -moz-box-align: center;
    -webkit-box-align: center;
    align-self: center;
    -ms-align-self: center;
    -moz-align-self: center;
    -webkit-align-self: center;
}

flex-vertical-center() {
    // old way
    display-flex();
    flex-center();

    // new way
    align-items: center;
    display: flex;
    justify-content: center;
}

flex($flex) {
    -ms-box-flex: $flex;
    -moz-box-flex: $flex;
    -webkit-box-flex: $flex;
    flex: $flex;
    -ms-flex: $flex;
    -moz-flex: $flex;
    -webkit-flex: $flex;
}

diagonal-lines($bgcolor='#fff') {
    // Not using gradient due to scroll perf (bug 867535)
    background: $bgcolor url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIgogICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIgogICAgIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KCTxkZWZzPgogICAgCTxwYXR0ZXJuIGlkPSJkaWFnb25hbEhhdGNoIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ij4KICAgIAkJPGcgc3R5bGU9ImZpbGw6I2ZmZjsgc3Ryb2tlOiNmN2Y3Zjc7IHN0cm9rZS13aWR0aDoxIj4KICAJCQkJPHBhdGggZD0iTS0xLDEgbDIsLTIiIC8+CiAgCQkJCTxwYXRoIGQ9Ik0wLDQgbDQsLTQiIC8+CiAgICAgICAgICAgCQk8cGF0aCBkPSJNMyw1IGwyLC0yIiAvPgogICAgICAgICAgICA8L2c+CgkJPC9wYXR0ZXJuPgogICAgPC9kZWZzPgoJPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNkaWFnb25hbEhhdGNoKSAiLz4KPC9zdmc+');
}

btn-shadow() {
    box-shadow: 0 1px 0 darken($breezy-blue, 10%);
}

alt-btn-shadow() {
    box-shadow: 0 1px 0 #fff, 0 1px 1px $salt-flat-white inset;
}

btn-shadow-active() {
    box-shadow: 0 2px 0 0 rgba(0,0,0,.2) inset, 0 12px 24px 6px rgba(0,0,0,.2) inset, 0 0 2px 2px rgba(0,0,0,.2) inset;
}

glow($glowColor, $glowSize) {
    box-shadow: 0 0 $glowSize 0 $glowColor;
}

alt-btn-hover-focus() {
    gradient-two-color(darken(#fff, 10%), darken($seavan-salt-white, 10%));
}

alt-btn-hover-focus-active() {
    color: darken($london-fog-gray, 10%);
}

alt-btn-active() {
    btn-shadow-active();
    border: 1px solid darken($primer-gray, 10%);
}

dropdown() {
    background: url(../img/pretty/dropdown.svg) 0 50% no-repeat;
    background-size: 24px auto;
    content: "";
    display: inline-block;
    height: 15px;
    margin-left: 10px;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 15px;
    width: 25px;
}

disable-user-select() {
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}