Skip to content

Instantly share code, notes, and snippets.

View jelbourn's full-sized avatar

Jeremy Elbourn jelbourn

1.1k followers · 0 following
View GitHub Profile
@jelbourn
jelbourn / input.scss
Created December 15, 2022 22:52
Generated by SassMeister.com.
@function button() {
@return (
id: 'mat-button',
something: 'xxx',
)
}
@mixin button-theme($theme) {
.mat-button {
color: blue;
@jelbourn
jelbourn / index.html
Created July 9, 2019 23:53
Alpha blending calculator
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>
@jelbourn
jelbourn / release-names.txt
Last active May 26, 2021 16:45
Angular Material release names so far
12.0.1 acrylic-apple
12.0.0 azurite-insight
11.2.13 denim-doily
11.2.12 glass-grass
11.2.11 metal-mountain
11.2.10 walnut-tabletop
11.2.9 earthenware-nightmare
11.2.8 linen-library
11.2.7 foam-feather
11.2.6 wool-mammoth
@jelbourn
jelbourn / taxonomy.js
Created April 15, 2018 18:26
Example tree data
[
{
name: 'Animalia',
subclassification: [
{
name: 'Chordata',
subclassification: [
{name: 'Craniata', subclassification: []},
{name: 'Tunicata', subclassification: []},
{name: 'Cephalochordata', subclassification: []},
@jelbourn
jelbourn / rx-chain.ts
Created June 21, 2017 17:02
Chaining rxjs operators without modifying the prototype with type enforcement
export declare class MapBrand { private _x; }
export declare class FilterBrand { private _x; }
export declare class ReduceBrand { private _x; }
export type mapOperator<T, R> = typeof map & MapBrand;
export type filterOperator<T> = typeof filter & FilterBrand;
export type reduceOperator<T> = typeof reduce & ReduceBrand;
const myMap = map as typeof map & MapBrand;
@jelbourn
jelbourn / dynamic-component.ts
Created October 12, 2016 12:00
Dynamic component loading cookbook
import {
NgModule,
Component,
Directive,
ViewContainerRef,
ViewChild,
ComponentFactoryResolver,
} from '@angular/core';
@jelbourn
jelbourn / scrape.js
Created September 23, 2015 18:19
Scrape Material Design colors from public site
var us = document.createElement('script');
us.src = 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js';
document.body.appendChild(us);
setTimeout(() => {
window.palettes = {};
_.each(document.querySelectorAll('.color-group:not(:last-child)'), (group) => {
var nameElement = group.querySelector('.name');
if (!nameElement) return;
@jelbourn
jelbourn / component.scss
Last active August 29, 2015 14:17
Flexible shadow component styling
// The "modifier", such as '.md-primary' or '.md-fab' is applied to the
// *host* element, but the style actually needs to be applied to an element
// within the shadow root. We can use a mixin to cover both native shadow DOM
// and emulated / polyfilled shadow DOM at the same time.
// Base mixin for general use.
@mixin host-context($element, $modifier, $target) {
:host(#{$modifier}) #{$target},
#{$element}#{$modifier} #{$target} {
@content
@jelbourn
jelbourn / palette.scss
Created March 3, 2015 01:28
Material Design Color Palette Variables
$md-red: (
50: #ffebee,
100: #ffcdd2,
200: #ef9a9a,
300: #e57373,
400: #ef5350,
500: #f44336,
600: #e53935,
700: #d32f2f,
800: #c62828,
@jelbourn
jelbourn / alpha-blend.scss
Last active September 12, 2018 03:50
SCSS alpha blend
// Overlays one color on top of another and returns the resulting color.
// This is used to determine contrast ratio for two colors with partial opacity.
// See http://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
@function alpha-blend($overlay, $base) {
$overlayAlpha: alpha($overlay);
$baseAlpha: alpha($base);
// If the overlaid color is completely opaque, then the result is just going to be that color.
@if $overlayAlpha >= 1 {
@return $overlay;