elyseholladay

    	// detect page width, if it's more than 700px, apply .equalheight to .product_attributes
		var $win = $(window);
		console.log($(window).width());
		var $widthDiv = $(".product_attributes");
		function checkWindowSize(){
			console.log($(window).width());
			if ($(window).width() >= 700) {
				// $widthDiv.addClass('equalheight');
				// set FAQ product attributes to equal heights
				var attributeheight = 0;

elyseholladay

<div class="preview-section">
    <h2>CSS Triangle with optional Border</h2>
    <p>Creates a CSS triangle of any size that can be plain (borderless), or 
    have an optional border. The size and color of the border are customizable. 
    The triangle can be in any direction (up, down, right, left). 
    By default the triangle is positioned in the vertical or horizontal 
    center; it can have an optional offset (a percentage, positive or 
    negative) to be moved in any direction.</p>
    <div class="tests">

elyseholladay

yarn storybook
@storybook/cli v7.6.6

info => Starting manager..
(node:87275) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/elyse.holladay/color/src/projects/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Starting preview..
info Using Babel compiler
info Addon-docs: using MDX2

elyseholladay

You are an experienced Principal Software Engineer. You have 15+ years of experience. You know the following programming languages and frameworks at an expert level: Django, Python, JavaScript, Typescript, React, and Material UI. You are familiar with monorepo tools and data analysis as well.

You are going to look at a diff of a Pull Request from GitHub. This diff represents a set of changes that are about to get deployed to the production environment.

First, analyze the diff to see what will change.

Then, summarize the changes in 2-4 sentences. The description should be approximately at a reading level 10 and use straightforward language. You can include technical terms to describe the changes, especially if you are referencing code in the changes like function and method names. Prefer to use plain non-jargon non-technical language when you can. Assume that non-engineers will also be reading this, like product managers and designers. Write the summary in imperative mood. For example, write "Fix bug in dat

elyseholladay

// Simple Responsive Grid
// based on Chris Eppstein's SASS responsive layouts
// http://chriseppstein.github.com/blog/2011/08/21/responsive-layouts-with-sass/

// -------------------------------------------------------------- //
// DESKTOP - LARGE - %desktop-large ----------------------------- //
// -------------------------------------------------------------- //
// 1024px and up to 1280px at which it becomes fixed

@media all and (min-width: 1024px)

elyseholladay

// Variables
$black: #000000;
$greydark: lighten($black,28%); // #424242
$greymedium: lighten($black,40.75%); // #686868
$greylight: lighten($black,68%); // #adadad
$greypale: lighten($black,80%); // #cccccc
$white: #ffffff;

// Site colors
$turquoise: darken(rgb(97,210,214),20%);

elyseholladay

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

%button {
    display: inline-block;
    box-sizing: border-box;
    margin: 0 20px 0 0;
    padding: .25em 1em;

elyseholladay

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----


// variables
$white: #fff;
$black: #000;
$greydark: lighten($black,50%);

elyseholladay

<button class="button_primary">Post</button>
<button class="button_primary button_disabled">Approve</button>
<button class="button_secondary">Edit</button>
<button class="button_tertiary">Cancel</button>
<button class="button_text">Unsubscribe</button>

elyseholladay

// -------------------------------------------------------------- //
// APPLICATION GLOBAL ------------------------------------------- //
// -------------------------------------------------------------- //
// These files need app-required.sass (theme and variables and mixins)
// to load. The files imported here are global CSS that will apply to
// all applications and, ideally, never need to be recompiled per app.

@import app-required.sass // import the stuff required for compile

// Styles