New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Additional Breakpoint #49

Closed
influxweb opened this Issue Nov 28, 2018 · 5 comments

Comments

Projects
None yet
1 participant
@influxweb
Copy link
Contributor

influxweb commented Nov 28, 2018

Currently, at the top-end of the scale, we have a breakpoint at 60em (960px) and then a final one at 90em (1440px). As we have seen new devices on the market, such as the larger iPad Pro, which have screen sizes between these two points, I have updated the display.css, grids.css, and widths.css file to add an x-large breakpoint at 75em (1200px).

Additionally, I have added breakpoint display as a hidden body::before element which can be accessed via JavaScript. These changes are within the resets.css and scripts.js files.

I have added this enhancement and it will be included in the next maintenance release. To make the update prior to the next release, you will need to update the contents of the following files via FTP:

@influxweb influxweb added this to the v1.0.4 milestone Nov 28, 2018

@influxweb influxweb self-assigned this Nov 28, 2018

@influxweb

This comment has been minimized.

Copy link
Contributor Author

influxweb commented Nov 28, 2018

mm5/themes/shadows/core/css/utilities/display.css

/* ==========================================================================
   UTILITIES / DISPLAY
   ========================================================================== */

.u-overflow-hidden {
	overflow: hidden;
}

/**
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.u-hide-visually {
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

	.u-hide-visually.focusable:active,
	.u-hide-visually.focusable:focus {
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		position: static;
		clip: auto;
		white-space: inherit;
	}


/**
 * Hide visually and from screen readers.
 */
[aria-hidden='true'],
.u-hidden {
	display: none;
}


/**
 * Hidden visually but maintains the layout.
 */
.u-invisible {
	visibility: hidden;
}


/**
 * Various utility classes to show the content.
 */
.u-flex {
	display: flex;
}

.u-block,
.u-shown {
	display: block;
}

.u-inline {
	display: inline;
}

.u-inline-block {
	display: inline-block;
}

.u-visible {
	visibility: visible;
}


/* Small Breakpoint [40em = 640px]
   =========================================== */
@media screen and (min-width: 40em) {
	.u-hidden--s {
		display: none;
	}
	
	.u-invisible--s {
		visibility: hidden;
	}
	
	.u-flex--s {
		display: flex;
	}
	
	.u-block--s,
	.u-shown--s {
		display: block;
	}
	
	.u-inline--s {
		display: inline;
	}
	
	.u-inline-block--s {
		display: inline-block;
	}
	
	.u-visible--s {
		visibility: visible;
	}
}


/* Medium Breakpoint [48em = 768px]
   =========================================== */
@media screen and (min-width: 48em) {
	.u-hidden--m {
		display: none;
	}
	
	.u-invisible--m {
		visibility: hidden;
	}
	
	.u-flex--m {
		display: flex;
	}
	
	.u-block--m,
	.u-shown--m {
		display: block;
	}
	
	.u-inline--m {
		display: inline;
	}
	
	.u-inline-block--m {
		display: inline-block;
	}
	
	.u-visible--m {
		visibility: visible;
	}
}


/* Large Breakpoint [60em = 960px]
   =========================================== */
@media screen and (min-width: 60em) {
	.u-hidden--l {
		display: none;
	}
	
	.u-invisible--l {
		visibility: hidden;
	}
	
	.u-flex--l {
		display: flex;
	}
	
	.u-block--l,
	.u-shown--l {
		display: block;
	}
	
	.u-inline--l {
		display: inline;
	}
	
	.u-inline-block--l {
		display: inline-block;
	}
	
	.u-visible--l {
		visibility: visible;
	}
}


/* Extra-Large Breakpoint [75em = 1200px]
   =========================================== */
@media screen and (min-width: 75em) {
	.u-hidden--xl {
		display: none;
	}
	
	.u-invisible--xl {
		visibility: hidden;
	}
	
	.u-flex--xl {
		display: flex;
	}
	
	.u-block--xl,
	.u-shown--xl {
		display: block;
	}
	
	.u-inline--xl {
		display: inline;
	}
	
	.u-inline-block--xl {
		display: inline-block;
	}
	
	.u-visible--xl {
		visibility: visible;
	}
}


/* Wide-Screen Breakpoint [90em = 1440px]
   =========================================== */
@media screen and (min-width: 90em) {
	.u-hidden--w {
		display: none;
	}
	
	.u-invisible--w {
		visibility: hidden;
	}
	
	.u-flex--w {
		display: flex;
	}
	
	.u-block--w,
	.u-shown--w {
		display: block;
	}
	
	.u-inline--w {
		display: inline;
	}
	
	.u-inline-block--w {
		display: inline-block;
	}
	
	.u-visible--w {
		visibility: visible;
	}
}
@influxweb

This comment has been minimized.

Copy link
Contributor Author

influxweb commented Nov 28, 2018

mm5/themes/shadows/core/css/utilities/grids.css

/* ==========================================================================
   UTILITIES / GRIDS
   ========================================================================== */

/**
 * A series of utility classes that give an automatic number of columns based
 * on the class used, media breakpoints are included.
 *
 *	<div class="o-layout u-grids-3">
 *		<div class="o-layout__item">
 *		</div>
 *		<div class="o-layout__item">
 *		</div>
 *		<div class="o-layout__item">
 *		</div>
 *		<div class="o-layout__item">
 *		</div>
 *		<div class="o-layout__item">
 *		</div>
 *	</div>
 *
 * The above will create a three-column structure in which each column will
 * fluidly fill one-third of the width of the parent with the remainder elements
 * wrapping as needed. We can have more complex systems:
 *
 * 	<div class="o-layout u-grids-1 u-grids-3--m">
 *		<div class="o-layout__item">
 *		</div>
 *		<div class="o-layout__item">
 *		</div>
 *		<div class="o-layout__item">
 *		</div>
 *		<div class="o-layout__item">
 *		</div>
 *		<div class="o-layout__item">
 *		</div>
 * 	</div>
 *
 * The above will create a structure in which each column will be 100% width
 * until we enter our medium breakpoint, then they will be one-third the width
 * of the parent container with the remainder elements wrapping as needed.
 */

/* Mobile First
   =========================================== */
.u-grids-1 > .o-layout__item {
	flex-basis: 100%;
	max-width: 100%;
}

.u-grids-2 > .o-layout__item {
	flex-basis: calc(100% / 2);
	max-width: calc(100% / 2);
}

.u-grids-3 > .o-layout__item {
	flex-basis: calc(100% / 3);
	max-width: calc(100% / 3);
}

.u-grids-4 > .o-layout__item {
	flex-basis: calc(100% / 4);
	max-width: calc(100% / 4);
}

.u-grids-5 > .o-layout__item {
	flex-basis: calc(100% / 5);
	max-width: calc(100% / 5);
}

.u-grids-6 > .o-layout__item {
	flex-basis: calc(100% / 6);
	max-width: calc(100% / 6);
}

.u-grids-7 > .o-layout__item {
	flex-basis: calc(100% / 7);
	max-width: calc(100% / 7);
}

.u-grids-8 > .o-layout__item {
	flex-basis: calc(100% / 8);
	max-width: calc(100% / 8);
}

.u-grids-9 > .o-layout__item {
	flex-basis: calc(100% / 9);
	max-width: calc(100% / 9);
}

.u-grids-10 > .o-layout__item {
	flex-basis: calc(100% / 10);
	max-width: calc(100% / 10);
}

.u-grids-11 > .o-layout__item {
	flex-basis: calc(100% / 11);
	max-width: calc(100% / 11);
}

.u-grids-12 > .o-layout__item {
	flex-basis: calc(100% / 12);
	max-width: calc(100% / 12);
}


/* Small Breakpoint [40em = 640px]
   =========================================== */
@media screen and (min-width: 40em) {
	.u-grids-1--s > .o-layout__item {
		flex-basis: 100%;
		max-width: 100%;
	}
	
	.u-grids-2--s > .o-layout__item {
		flex-basis: calc(100% / 2);
		max-width: calc(100% / 2);
	}
	
	.u-grids-3--s > .o-layout__item {
		flex-basis: calc(100% / 3);
		max-width: calc(100% / 3);
	}
	
	.u-grids-4--s > .o-layout__item {
		flex-basis: calc(100% / 4);
		max-width: calc(100% / 4);
	}
	
	.u-grids-5--s > .o-layout__item {
		flex-basis: calc(100% / 5);
		max-width: calc(100% / 5);
	}
	
	.u-grids-6--s > .o-layout__item {
		flex-basis: calc(100% / 6);
		max-width: calc(100% / 6);
	}
	
	.u-grids-7--s > .o-layout__item {
		flex-basis: calc(100% / 7);
		max-width: calc(100% / 7);
	}
	
	.u-grids-8--s > .o-layout__item {
		flex-basis: calc(100% / 8);
		max-width: calc(100% / 8);
	}
	
	.u-grids-9--s > .o-layout__item {
		flex-basis: calc(100% / 9);
		max-width: calc(100% / 9);
	}
	
	.u-grids-10--s > .o-layout__item {
		flex-basis: calc(100% / 10);
		max-width: calc(100% / 10);
	}
	
	.u-grids-11--s > .o-layout__item {
		flex-basis: calc(100% / 11);
		max-width: calc(100% / 11);
	}
	
	.u-grids-12--s > .o-layout__item {
		flex-basis: calc(100% / 12);
		max-width: calc(100% / 12);
	}
}


/* Medium Breakpoint [48em = 768px]
   =========================================== */
@media screen and (min-width: 48em) {
	.u-grids-1--m > .o-layout__item {
		flex-basis: 100%;
		max-width: 100%;
	}
	
	.u-grids-2--m > .o-layout__item {
		flex-basis: calc(100% / 2);
		max-width: calc(100% / 2);
	}
	
	.u-grids-3--m > .o-layout__item {
		flex-basis: calc(100% / 3);
		max-width: calc(100% / 3);
	}
	
	.u-grids-4--m > .o-layout__item {
		flex-basis: calc(100% / 4);
		max-width: calc(100% / 4);
	}
	
	.u-grids-5--m > .o-layout__item {
		flex-basis: calc(100% / 5);
		max-width: calc(100% / 5);
	}
	
	.u-grids-6--m > .o-layout__item {
		flex-basis: calc(100% / 6);
		max-width: calc(100% / 6);
	}
	
	.u-grids-7--m > .o-layout__item {
		flex-basis: calc(100% / 7);
		max-width: calc(100% / 7);
	}
	
	.u-grids-8--m > .o-layout__item {
		flex-basis: calc(100% / 8);
		max-width: calc(100% / 8);
	}
	
	.u-grids-9--m > .o-layout__item {
		flex-basis: calc(100% / 9);
		max-width: calc(100% / 9);
	}
	
	.u-grids-10--m > .o-layout__item {
		flex-basis: calc(100% / 10);
		max-width: calc(100% / 10);
	}
	
	.u-grids-11--m > .o-layout__item {
		flex-basis: calc(100% / 11);
		max-width: calc(100% / 11);
	}
	
	.u-grids-12--m > .o-layout__item {
		flex-basis: calc(100% / 12);
		max-width: calc(100% / 12);
	}
}


/* Large Breakpoint [60em = 960px]
   =========================================== */
@media screen and (min-width: 60em) {
	.u-grids-1--l > .o-layout__item {
		flex-basis: 100%;
		max-width: 100%;
	}
	
	.u-grids-2--l > .o-layout__item {
		flex-basis: calc(100% / 2);
		max-width: calc(100% / 2);
	}
	
	.u-grids-3--l > .o-layout__item {
		flex-basis: calc(100% / 3);
		max-width: calc(100% / 3);
	}
	
	.u-grids-4--l > .o-layout__item {
		flex-basis: calc(100% / 4);
		max-width: calc(100% / 4);
	}
	
	.u-grids-5--l > .o-layout__item {
		flex-basis: calc(100% / 5);
		max-width: calc(100% / 5);
	}
	
	.u-grids-6--l > .o-layout__item {
		flex-basis: calc(100% / 6);
		max-width: calc(100% / 6);
	}
	
	.u-grids-7--l > .o-layout__item {
		flex-basis: calc(100% / 7);
		max-width: calc(100% / 7);
	}
	
	.u-grids-8--l > .o-layout__item {
		flex-basis: calc(100% / 8);
		max-width: calc(100% / 8);
	}
	
	.u-grids-9--l > .o-layout__item {
		flex-basis: calc(100% / 9);
		max-width: calc(100% / 9);
	}
	
	.u-grids-10--l > .o-layout__item {
		flex-basis: calc(100% / 10);
		max-width: calc(100% / 10);
	}
	
	.u-grids-11--l > .o-layout__item {
		flex-basis: calc(100% / 11);
		max-width: calc(100% / 11);
	}
	
	.u-grids-12--l > .o-layout__item {
		flex-basis: calc(100% / 12);
		max-width: calc(100% / 12);
	}
}


/* Extra-Large Breakpoint [75em = 1200px]
   =========================================== */
@media screen and (min-width: 75em) {
	.u-grids-1--xl > .o-layout__item {
		flex-basis: 100%;
		max-width: 100%;
	}
	
	.u-grids-2--xl > .o-layout__item {
		flex-basis: calc(100% / 2);
		max-width: calc(100% / 2);
	}
	
	.u-grids-3--xl > .o-layout__item {
		flex-basis: calc(100% / 3);
		max-width: calc(100% / 3);
	}
	
	.u-grids-4--xl > .o-layout__item {
		flex-basis: calc(100% / 4);
		max-width: calc(100% / 4);
	}
	
	.u-grids-5--xl > .o-layout__item {
		flex-basis: calc(100% / 5);
		max-width: calc(100% / 5);
	}
	
	.u-grids-6--xl > .o-layout__item {
		flex-basis: calc(100% / 6);
		max-width: calc(100% / 6);
	}
	
	.u-grids-7--xl > .o-layout__item {
		flex-basis: calc(100% / 7);
		max-width: calc(100% / 7);
	}
	
	.u-grids-8--xl > .o-layout__item {
		flex-basis: calc(100% / 8);
		max-width: calc(100% / 8);
	}
	
	.u-grids-9--xl > .o-layout__item {
		flex-basis: calc(100% / 9);
		max-width: calc(100% / 9);
	}
	
	.u-grids-10--xl > .o-layout__item {
		flex-basis: calc(100% / 10);
		max-width: calc(100% / 10);
	}
	
	.u-grids-11--xl > .o-layout__item {
		flex-basis: calc(100% / 11);
		max-width: calc(100% / 11);
	}
	
	.u-grids-12--xl > .o-layout__item {
		flex-basis: calc(100% / 12);
		max-width: calc(100% / 12);
	}
}


/* Wide-Screen Breakpoint [90em = 1440px]
   =========================================== */
@media screen and (min-width: 90em) {
	.u-grids-1--w > .o-layout__item {
		flex-basis: 100%;
		max-width: 100%;
	}
	
	.u-grids-2--w > .o-layout__item {
		flex-basis: calc(100% / 2);
		max-width: calc(100% / 2);
	}
	
	.u-grids-3--w > .o-layout__item {
		flex-basis: calc(100% / 3);
		max-width: calc(100% / 3);
	}
	
	.u-grids-4--w > .o-layout__item {
		flex-basis: calc(100% / 4);
		max-width: calc(100% / 4);
	}
	
	.u-grids-5--w > .o-layout__item {
		flex-basis: calc(100% / 5);
		max-width: calc(100% / 5);
	}
	
	.u-grids-6--w > .o-layout__item {
		flex-basis: calc(100% / 6);
		max-width: calc(100% / 6);
	}
	
	.u-grids-7--w > .o-layout__item {
		flex-basis: calc(100% / 7);
		max-width: calc(100% / 7);
	}
	
	.u-grids-8--w > .o-layout__item {
		flex-basis: calc(100% / 8);
		max-width: calc(100% / 8);
	}
	
	.u-grids-9--w > .o-layout__item {
		flex-basis: calc(100% / 9);
		max-width: calc(100% / 9);
	}
	
	.u-grids-10--w > .o-layout__item {
		flex-basis: calc(100% / 10);
		max-width: calc(100% / 10);
	}
	
	.u-grids-11--w > .o-layout__item {
		flex-basis: calc(100% / 11);
		max-width: calc(100% / 11);
	}
	
	.u-grids-12--w > .o-layout__item {
		flex-basis: calc(100% / 12);
		max-width: calc(100% / 12);
	}
}
@influxweb

This comment has been minimized.

Copy link
Contributor Author

influxweb commented Nov 28, 2018

mm5/themes/shadows/core/css/utilities/widths.css

/* ==========================================================================
   UTILITIES / WIDTHS
   ========================================================================== */

/**
 * A series of utility classes that give a fluid width to whichever element
 * they are applied to, media breakpoints are included.
 */

/* Mobile First
   =========================================== */
/**
 * Width size modifiers.
 */
.u-width-1 {
	flex-basis: calc(100% / 12 * 1);
	max-width: calc(100% / 12 * 1);
}

.u-width-2 {
	flex-basis: calc(100% / 12 * 2);
	max-width: calc(100% / 12 * 2);
}

.u-width-3 {
	flex-basis: calc(100% / 12 * 3);
	max-width: calc(100% / 12 * 3);
}

.u-width-4 {
	flex-basis: calc(100% / 12 * 4);
	max-width: calc(100% / 12 * 4);
}

.u-width-5 {
	flex-basis: calc(100% / 12 * 5);
	max-width: calc(100% / 12 * 5);
}

.u-width-6 {
	flex-basis: calc(100% / 12 * 6);
	max-width: calc(100% / 12 * 6);
}

.u-width-7 {
	flex-basis: calc(100% / 12 * 7);
	max-width: calc(100% / 12 * 7);
}

.u-width-8 {
	flex-basis: calc(100% / 12 * 8);
	max-width: calc(100% / 12 * 8);
}

.u-width-9 {
	flex-basis: calc(100% / 12 * 9);
	max-width: calc(100% / 12 * 9);
}

.u-width-10 {
	flex-basis: calc(100% / 12 * 10);
	max-width: calc(100% / 12 * 10);
}

.u-width-11 {
	flex-basis: calc(100% / 12 * 11);
	max-width: calc(100% / 12 * 11);
}

.u-width-12 {
	flex-basis: calc(100% / 12 * 12);
	max-width: calc(100% / 12 * 12);
}


/**
 * Offset size modifiers.
 */
.u-offset-1 {
	margin-left: calc(100% / 12 * 1);
}

.u-offset-2 {
	margin-left: calc(100% / 12 * 2);
}

.u-offset-3 {
	margin-left: calc(100% / 12 * 3);
}

.u-offset-4 {
	margin-left: calc(100% / 12 * 4);
}

.u-offset-5 {
	margin-left: calc(100% / 12 * 5);
}

.u-offset-6 {
	margin-left: calc(100% / 12 * 6);
}

.u-offset-7 {
	margin-left: calc(100% / 12 * 7);
}

.u-offset-8 {
	margin-left: calc(100% / 12 * 8);
}

.u-offset-9 {
	margin-left: calc(100% / 12 * 9);
}

.u-offset-10 {
	margin-left: calc(100% / 12 * 10);
}

.u-offset-11 {
	margin-left: calc(100% / 12 * 11);
}


/* Small Breakpoint [40em = 640px]
   =========================================== */
@media screen and (min-width: 40em) {
	.u-width-1--s {
		flex-basis: calc(100% / 12 * 1);
		max-width: calc(100% / 12 * 1);
	}
	
	.u-width-2--s {
		flex-basis: calc(100% / 12 * 2);
		max-width: calc(100% / 12 * 2);
	}
	
	.u-width-3--s {
		flex-basis: calc(100% / 12 * 3);
		max-width: calc(100% / 12 * 3);
	}
	
	.u-width-4--s {
		flex-basis: calc(100% / 12 * 4);
		max-width: calc(100% / 12 * 4);
	}
	
	.u-width-5--s {
		flex-basis: calc(100% / 12 * 5);
		max-width: calc(100% / 12 * 5);
	}
	
	.u-width-6--s {
		flex-basis: calc(100% / 12 * 6);
		max-width: calc(100% / 12 * 6);
	}
	
	.u-width-7--s {
		flex-basis: calc(100% / 12 * 7);
		max-width: calc(100% / 12 * 7);
	}
	
	.u-width-8--s {
		flex-basis: calc(100% / 12 * 8);
		max-width: calc(100% / 12 * 8);
	}
	
	.u-width-9--s {
		flex-basis: calc(100% / 12 * 9);
		max-width: calc(100% / 12 * 9);
	}
	
	.u-width-10--s {
		flex-basis: calc(100% / 12 * 10);
		max-width: calc(100% / 12 * 10);
	}
	
	.u-width-11--s {
		flex-basis: calc(100% / 12 * 11);
		max-width: calc(100% / 12 * 11);
	}
	
	.u-width-12--s {
		flex-basis: calc(100% / 12 * 12);
		max-width: calc(100% / 12 * 12);
	}
	
	
	/**
	 * Offset size modifiers.
	 */
	.u-offset-1--s {
		margin-left: calc(100% / 12 * 1);
	}
	
	.u-offset-2--s {
		margin-left: calc(100% / 12 * 2);
	}
	
	.u-offset-3--s {
		margin-left: calc(100% / 12 * 3);
	}
	
	.u-offset-4--s {
		margin-left: calc(100% / 12 * 4);
	}
	
	.u-offset-5--s {
		margin-left: calc(100% / 12 * 5);
	}
	
	.u-offset-6--s {
		margin-left: calc(100% / 12 * 6);
	}
	
	.u-offset-7--s {
		margin-left: calc(100% / 12 * 7);
	}
	
	.u-offset-8--s {
		margin-left: calc(100% / 12 * 8);
	}
	
	.u-offset-9--s {
		margin-left: calc(100% / 12 * 9);
	}
	
	.u-offset-10--s {
		margin-left: calc(100% / 12 * 10);
	}
	
	.u-offset-11--s {
		margin-left: calc(100% / 12 * 11);
	}
}


/* Medium Breakpoint [48em = 768px]
   =========================================== */
@media screen and (min-width: 48em) {
	.u-width-1--m {
		flex-basis: calc(100% / 12 * 1);
		max-width: calc(100% / 12 * 1);
	}
	
	.u-width-2--m {
		flex-basis: calc(100% / 12 * 2);
		max-width: calc(100% / 12 * 2);
	}
	
	.u-width-3--m {
		flex-basis: calc(100% / 12 * 3);
		max-width: calc(100% / 12 * 3);
	}
	
	.u-width-4--m {
		flex-basis: calc(100% / 12 * 4);
		max-width: calc(100% / 12 * 4);
	}
	
	.u-width-5--m {
		flex-basis: calc(100% / 12 * 5);
		max-width: calc(100% / 12 * 5);
	}
	
	.u-width-6--m {
		flex-basis: calc(100% / 12 * 6);
		max-width: calc(100% / 12 * 6);
	}
	
	.u-width-7--m {
		flex-basis: calc(100% / 12 * 7);
		max-width: calc(100% / 12 * 7);
	}
	
	.u-width-8--m {
		flex-basis: calc(100% / 12 * 8);
		max-width: calc(100% / 12 * 8);
	}
	
	.u-width-9--m {
		flex-basis: calc(100% / 12 * 9);
		max-width: calc(100% / 12 * 9);
	}
	
	.u-width-10--m {
		flex-basis: calc(100% / 12 * 10);
		max-width: calc(100% / 12 * 10);
	}
	
	.u-width-11--m {
		flex-basis: calc(100% / 12 * 11);
		max-width: calc(100% / 12 * 11);
	}
	
	.u-width-12--m {
		flex-basis: calc(100% / 12 * 12);
		max-width: calc(100% / 12 * 12);
	}
	
	
	/**
	 * Offset size modifiers.
	 */
	.u-offset-1--m {
		margin-left: calc(100% / 12 * 1);
	}
	
	.u-offset-2--m {
		margin-left: calc(100% / 12 * 2);
	}
	
	.u-offset-3--m {
		margin-left: calc(100% / 12 * 3);
	}
	
	.u-offset-4--m {
		margin-left: calc(100% / 12 * 4);
	}
	
	.u-offset-5--m {
		margin-left: calc(100% / 12 * 5);
	}
	
	.u-offset-6--m {
		margin-left: calc(100% / 12 * 6);
	}
	
	.u-offset-7--m {
		margin-left: calc(100% / 12 * 7);
	}
	
	.u-offset-8--m {
		margin-left: calc(100% / 12 * 8);
	}
	
	.u-offset-9--m {
		margin-left: calc(100% / 12 * 9);
	}
	
	.u-offset-10--m {
		margin-left: calc(100% / 12 * 10);
	}
	
	.u-offset-11--m {
		margin-left: calc(100% / 12 * 11);
	}
}


/* Large Breakpoint [60em = 960px]
   =========================================== */
@media screen and (min-width: 60em) {
	.u-width-1--l {
		flex-basis: calc(100% / 12 * 1);
		max-width: calc(100% / 12 * 1);
	}
	
	.u-width-2--l {
		flex-basis: calc(100% / 12 * 2);
		max-width: calc(100% / 12 * 2);
	}
	
	.u-width-3--l {
		flex-basis: calc(100% / 12 * 3);
		max-width: calc(100% / 12 * 3);
	}
	
	.u-width-4--l {
		flex-basis: calc(100% / 12 * 4);
		max-width: calc(100% / 12 * 4);
	}
	
	.u-width-5--l {
		flex-basis: calc(100% / 12 * 5);
		max-width: calc(100% / 12 * 5);
	}
	
	.u-width-6--l {
		flex-basis: calc(100% / 12 * 6);
		max-width: calc(100% / 12 * 6);
	}
	
	.u-width-7--l {
		flex-basis: calc(100% / 12 * 7);
		max-width: calc(100% / 12 * 7);
	}
	
	.u-width-8--l {
		flex-basis: calc(100% / 12 * 8);
		max-width: calc(100% / 12 * 8);
	}
	
	.u-width-9--l {
		flex-basis: calc(100% / 12 * 9);
		max-width: calc(100% / 12 * 9);
	}
	
	.u-width-10--l {
		flex-basis: calc(100% / 12 * 10);
		max-width: calc(100% / 12 * 10);
	}
	
	.u-width-11--l {
		flex-basis: calc(100% / 12 * 11);
		max-width: calc(100% / 12 * 11);
	}
	
	.u-width-12--l {
		flex-basis: calc(100% / 12 * 12);
		max-width: calc(100% / 12 * 12);
	}
	
	
	/**
	 * Offset size modifiers.
	 */
	.u-offset-1--l {
		margin-left: calc(100% / 12 * 1);
	}
	
	.u-offset-2--l {
		margin-left: calc(100% / 12 * 2);
	}
	
	.u-offset-3--l {
		margin-left: calc(100% / 12 * 3);
	}
	
	.u-offset-4--l {
		margin-left: calc(100% / 12 * 4);
	}
	
	.u-offset-5--l {
		margin-left: calc(100% / 12 * 5);
	}
	
	.u-offset-6--l {
		margin-left: calc(100% / 12 * 6);
	}
	
	.u-offset-7--l {
		margin-left: calc(100% / 12 * 7);
	}
	
	.u-offset-8--l {
		margin-left: calc(100% / 12 * 8);
	}
	
	.u-offset-9--l {
		margin-left: calc(100% / 12 * 9);
	}
	
	.u-offset-10--l {
		margin-left: calc(100% / 12 * 10);
	}
	
	.u-offset-11--l {
		margin-left: calc(100% / 12 * 11);
	}
}


/* Extra-Large Breakpoint [75em = 1200px]
   =========================================== */
@media screen and (min-width: 75em) {
	.u-width-1--xl {
		flex-basis: calc(100% / 12 * 1);
		max-width: calc(100% / 12 * 1);
	}
	
	.u-width-2--xl {
		flex-basis: calc(100% / 12 * 2);
		max-width: calc(100% / 12 * 2);
	}
	
	.u-width-3--xl {
		flex-basis: calc(100% / 12 * 3);
		max-width: calc(100% / 12 * 3);
	}
	
	.u-width-4--xl {
		flex-basis: calc(100% / 12 * 4);
		max-width: calc(100% / 12 * 4);
	}
	
	.u-width-5--xl {
		flex-basis: calc(100% / 12 * 5);
		max-width: calc(100% / 12 * 5);
	}
	
	.u-width-6--xl {
		flex-basis: calc(100% / 12 * 6);
		max-width: calc(100% / 12 * 6);
	}
	
	.u-width-7--xl {
		flex-basis: calc(100% / 12 * 7);
		max-width: calc(100% / 12 * 7);
	}
	
	.u-width-8--xl {
		flex-basis: calc(100% / 12 * 8);
		max-width: calc(100% / 12 * 8);
	}
	
	.u-width-9--xl {
		flex-basis: calc(100% / 12 * 9);
		max-width: calc(100% / 12 * 9);
	}
	
	.u-width-10--xl {
		flex-basis: calc(100% / 12 * 10);
		max-width: calc(100% / 12 * 10);
	}
	
	.u-width-11--xl {
		flex-basis: calc(100% / 12 * 11);
		max-width: calc(100% / 12 * 11);
	}
	
	.u-width-12--xl {
		flex-basis: calc(100% / 12 * 12);
		max-width: calc(100% / 12 * 12);
	}
	
	
	/**
	 * Offset size modifiers.
	 */
	.u-offset-1--xl {
		margin-left: calc(100% / 12 * 1);
	}
	
	.u-offset-2--xl {
		margin-left: calc(100% / 12 * 2);
	}
	
	.u-offset-3--xl {
		margin-left: calc(100% / 12 * 3);
	}
	
	.u-offset-4--xl {
		margin-left: calc(100% / 12 * 4);
	}
	
	.u-offset-5--xl {
		margin-left: calc(100% / 12 * 5);
	}
	
	.u-offset-6--xl {
		margin-left: calc(100% / 12 * 6);
	}
	
	.u-offset-7--xl {
		margin-left: calc(100% / 12 * 7);
	}
	
	.u-offset-8--xl {
		margin-left: calc(100% / 12 * 8);
	}
	
	.u-offset-9--xl {
		margin-left: calc(100% / 12 * 9);
	}
	
	.u-offset-10--xl {
		margin-left: calc(100% / 12 * 10);
	}
	
	.u-offset-11--xl {
		margin-left: calc(100% / 12 * 11);
	}
}


/* Wide-Screen Breakpoint [90em = 1440px]
   =========================================== */
@media screen and (min-width: 90em) {
	.u-width-1--w {
		flex-basis: calc(100% / 12 * 1);
		max-width: calc(100% / 12 * 1);
	}
	
	.u-width-2--w {
		flex-basis: calc(100% / 12 * 2);
		max-width: calc(100% / 12 * 2);
	}
	
	.u-width-3--w {
		flex-basis: calc(100% / 12 * 3);
		max-width: calc(100% / 12 * 3);
	}
	
	.u-width-4--w {
		flex-basis: calc(100% / 12 * 4);
		max-width: calc(100% / 12 * 4);
	}
	
	.u-width-5--w {
		flex-basis: calc(100% / 12 * 5);
		max-width: calc(100% / 12 * 5);
	}
	
	.u-width-6--w {
		flex-basis: calc(100% / 12 * 6);
		max-width: calc(100% / 12 * 6);
	}
	
	.u-width-7--w {
		flex-basis: calc(100% / 12 * 7);
		max-width: calc(100% / 12 * 7);
	}
	
	.u-width-8--w {
		flex-basis: calc(100% / 12 * 8);
		max-width: calc(100% / 12 * 8);
	}
	
	.u-width-9--w {
		flex-basis: calc(100% / 12 * 9);
		max-width: calc(100% / 12 * 9);
	}
	
	.u-width-10--w {
		flex-basis: calc(100% / 12 * 10);
		max-width: calc(100% / 12 * 10);
	}
	
	.u-width-11--w {
		flex-basis: calc(100% / 12 * 11);
		max-width: calc(100% / 12 * 11);
	}
	
	.u-width-12--w {
		flex-basis: calc(100% / 12 * 12);
		max-width: calc(100% / 12 * 12);
	}
	
	
	/**
	 * Offset size modifiers.
	 */
	.u-offset-1--w {
		margin-left: calc(100% / 12 * 1);
	}
	
	.u-offset-2--w {
		margin-left: calc(100% / 12 * 2);
	}
	
	.u-offset-3--w {
		margin-left: calc(100% / 12 * 3);
	}
	
	.u-offset-4--w {
		margin-left: calc(100% / 12 * 4);
	}
	
	.u-offset-5--w {
		margin-left: calc(100% / 12 * 5);
	}
	
	.u-offset-6--w {
		margin-left: calc(100% / 12 * 6);
	}
	
	.u-offset-7--w {
		margin-left: calc(100% / 12 * 7);
	}
	
	.u-offset-8--w {
		margin-left: calc(100% / 12 * 8);
	}
	
	.u-offset-9--w {
		margin-left: calc(100% / 12 * 9);
	}
	
	.u-offset-10--w {
		margin-left: calc(100% / 12 * 10);
	}
	
	.u-offset-11--w {
		margin-left: calc(100% / 12 * 11);
	}
}
@influxweb

This comment has been minimized.

Copy link
Contributor Author

influxweb commented Nov 28, 2018

mm5/themes/shadows/core/css/base/resets.css

/* ==========================================================================
   BASE / RESETS
   ========================================================================== */

/**
 * This contains some additional resets and baselines not facilitated by
 * 'normalize.css'. Editing is not recommended.
 */

html {
	box-sizing: border-box;
}


*,
*::before,
*::after {
	box-sizing: inherit;
}





/* Vertical Rhythm
   =========================================== */

/**
 * Apply our base spacing unit as a `margin-bottom` to all block level elements
 * so that we get nice and consistent vertical rhythm very cheaply.
 * http://csswizardry.com/2012/06/single-direction-margin-declarations/
 */
address,
blockquote,
dl,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
menu,
ol,
p,
pre,
summary,
table,
ul {
	margin-top: 0;
	margin-bottom: 16px;
}

fieldset {
	margin-right: 0;
	margin-left: 0;
	padding: 0;
}


/**
 * We'll also indent list elements by the same amount of spacing. Also, we will
 * remove the left padding added by some user-agents.
 */
dd,
ol,
ul {
	margin-left: 16px;
	padding-left: 0;
}

/**
 * Remove trailing margins from nested lists.
 */
li > ol,
li > ul {
	margin-bottom: 0;
}





/**
 * Pseudo Selection
 */
::-moz-selection {
	background: #eaeaea;
	text-shadow: none;
}

::selection {
	background: #eaeaea;
	text-shadow: none;
}

::selection:window-inactive {
	background: #eaeaea;
}

img::selection {
	background: rgba(0, 0, 0, 0);
}

img::-moz-selection {
	background: rgba(0, 0, 0, 0);
}





/**
 * Identify Disabled/Not Allowed Elements
 */
*[disabled] {
	cursor: not-allowed;
}





/**
 * Breakpoints
 * These values will not show up in content, but can be queried by JavaScript
 * to know which breakpoint is active.
 */
body::before {
	display: none;
	content: "xsmall";
	visibility: hidden;
}

@media (min-width: 40em) {
	body::before {
		content: "small";
	}
}

@media (min-width: 48em) {
	body::before {
		content: "medium";
	}
}

@media (min-width: 60em) {
	body::before {
		content: "large";
	}
}

@media (min-width: 75em) {
	body::before {
		content: "xlarge";
	}
}

@media (min-width: 90em) {
	body::before {
		content: "wide";
	}
}
@influxweb

This comment has been minimized.

Copy link
Contributor Author

influxweb commented Nov 28, 2018

mm5/themes/shadows/core/js/scripts.js

/**
 * Check if Cash has been replaced by jQuery. If it has not, set jQuery
 * as a `window` element.
 */
if (typeof jQuery === 'undefined') {
	window.jQuery = cash = $;
}


(function (mivaJS) {}(window.mivaJS || (window.mivaJS = {})));

/**
 *    Cash/jQuery Extensions
 */
$.extend({
	debounced: function (fn, timeout, invokeAsap, ctx) {
		/**
		 * Custom function to allow us to delay events until after the
		 * trigger has ended.
		 *
		 * Example: $(window).on('resize', $.debounced(function () {...DO SOMETHING...}, 100));
		 */
		if (arguments.length === 3 && typeof invokeAsap !== 'boolean') {
			ctx = invokeAsap;
			invokeAsap = false;
		}
		var timer;

		return function () {
			var args = arguments;

			ctx = ctx || this;
			invokeAsap && !timer && fn.apply(ctx, args);
			clearTimeout(timer);
			timer = setTimeout(function () {
				invokeAsap || fn.apply(ctx, args);
				timer = null;
			}, timeout);
		};
	},
	hook: function (hookName) {
		/**
		 * Custom function to allow us to unify event triggers/binding
		 * using `data-` elements.
		 *
		 * Usage: $.hook('HOOK NAME')...
		 * Example: $.hook('open-menu').on('click', function (e) {e.preventDefault(); ELEMENT.show();});
		 */
		var selector;

		if (!hookName || hookName === '*') {
			// select all data-hooks
			selector = '[data-hook]';
		}
		else {
			// select specific data-hook
			selector = '[data-hook~="' + hookName + '"]';
		}
		return $(selector);
	},
	loadScript: function (url, callback) {
		/**
		 * Loads a JavaScript file asynchronously with a callback, like
		 * jQuery's `$.getScript()` except without jQuery.
		 *
		 * Usage:
		 * $.loadScript(FILE_PATH, function () {
		 * 		DO SOMETHING...
		 * });
		 */
		var head = document.getElementsByTagName('head')[0],
			scriptCalled = document.createElement('script');

		scriptCalled.async = true;
		scriptCalled.src = url;
		scriptCalled.onload = scriptCalled.onreadystatechange = function () {
			if (!scriptCalled.readyState || /loaded|complete/.test(scriptCalled.readyState)) {
				scriptCalled.onload = scriptCalled.onreadystatechange = null;

				if (head && scriptCalled.parentNode) {
					head.removeChild(scriptCalled)
				}

				scriptCalled = undefined;

				if (callback) {
					callback();
				}
			}
		};
		//head.insertBefore(scriptCalled, head.firstChild);
		head.appendChild(scriptCalled)
	}
});


/**
 *    HTML Class Name
 *    This function will check if JavaScript is enabled, detect touch and hover
 *    capabilities, and modify the class list as needed.
 */
(function () {
	'use strict';

	var html = document.documentElement;

	html.classList.remove('no-js');
	html.classList.add('js');

	/**
	 * Detect if the user is utilizing a touch interface.
	 */
	window.addEventListener('touchstart', function onFirstTouch() {
		html.classList.add('touch');
		html.setAttribute('data-touch', '');
		window.USER_IS_TOUCHING = true;
		sessionStorage.setItem('USER_IS_TOUCHING', true);
		window.USER_CAN_HOVER = false;
		sessionStorage.setItem('USER_CAN_HOVER', false);
		window.removeEventListener('touchstart', onFirstTouch, false);
	}, false);

	/**
	 * Detect if the user can hover over elements.
	 */
	window.addEventListener('mouseover', function onFirstHover() {
		window.USER_CAN_HOVER = true;
		sessionStorage.setItem('USER_CAN_HOVER', true);
		html.classList.remove('touch');
		html.removeAttribute('data-touch');
		window.USER_IS_TOUCHING = false;
		sessionStorage.setItem('USER_IS_TOUCHING', false);
		window.removeEventListener('mouseover', onFirstHover, false);
	}, false);
}());


/**
 * Breakpoints
 * This function will retrieve the breakpoint value set via CSS. You can use
 * this to trigger a function based on the predefined breakpoints rather than
 * a randomly chosen one.
 *
 * Usage:
 * if (breakpoint === 'medium') {
 *     yourFunctionCall();
 * }
 */
// Setup the breakpoint variable
var breakpoint;

// Get the current breakpoint
var getBreakpoint = function () {
	return window.getComputedStyle(document.body, '::before').content.replace(/\"/g, '');
};

// Setup a timer
var timeout;

// Calculate breakpoint on page load
breakpoint = getBreakpoint();

// Listen for resize events
window.addEventListener('resize', function (event) {
	// If there's a timer, cancel it
	if (timeout) {
		window.cancelAnimationFrame(timeout);
	}

	// Setup the new requestAnimationFrame()
	timeout = window.requestAnimationFrame(function () {
		console.log('test');
		breakpoint = getBreakpoint();
	});

}, false);


/**
 * CSS Feature Detect - Used in place of Modernizr
 * Returns true or false depending on your browser. Let's hope it's true.
 * NOTE: This may be removed in future versions of the framework as
 * browser compatibility and support changes.
 *
 * Usage: detectCSSFeature('transition');
 */
function detectCSSFeature(featureName) {
	'use strict';

	var feature = false,
		domPrefixes = 'Moz ms Webkit'.split(' '),
		elm = document.createElement('div'),
		featureNameCapital = null;

	featureName = featureName.toLowerCase();
	if (elm.style[featureName] !== undefined) {
		feature = true;
	}
	if (feature === false) {
		featureNameCapital = featureName.charAt(0).toUpperCase() + featureName.substr(1);
		for (var i = 0; i < domPrefixes.length; i++) {
			if (elm.style[domPrefixes[i] + featureNameCapital] !== undefined) {
				feature = true;
				break;
			}
		}
	}
	return feature;
}


/**
 * A complete cookies reader/writer framework with full unicode support.
 *
 * Revision #1 - September 4, 2014
 * https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
 * https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework
 * https://developer.mozilla.org/User:fusionchess
 * https://github.com/madmurphy/cookies.js
 *
 * This framework is released under the GNU Public License, version 3 or later.
 * http://www.gnu.org/licenses/gpl-3.0-standalone.html
 *
 * Syntax:
 * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]]);
 * docCookies.getItem(name);
 * docCookies.removeItem(name[, path[, domain]]);
 * docCookies.hasItem(name);
 * docCookies.keys();
 */
var docCookies = {
	getItem: function (sKey) {
		if (!sKey) {
			return null;
		}
		return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
	},
	setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
		if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) {
			return false;
		}
		var sExpires = "";
		if (vEnd) {
			switch (vEnd.constructor) {
				case Number:
					sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
					break;
				case String:
					sExpires = "; expires=" + vEnd;
					break;
				case Date:
					sExpires = "; expires=" + vEnd.toUTCString();
					break;
			}
		}
		document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
		return true;
	},
	removeItem: function (sKey, sPath, sDomain) {
		if (!this.hasItem(sKey)) {
			return false;
		}
		document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
		return true;
	},
	hasItem: function (sKey) {
		if (!sKey) {
			return false;
		}
		return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
	},
	keys: function () {
		var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
		for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) {
			aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]);
		}
		return aKeys;
	}
};


var elementsUI = {
	site: function () {
		/**
		 * Load the `polyfills.js` file and initialise functions.
		 * NOTE: This may be removed in future versions of the framework as
		 * browser compatibility and support changes.
		 */
		if (!window.CSS || !window.CSS.supports('(--foo: red)')) {
			$.loadScript(theme_path + 'core/js/polyfills.js', function () {
				sessionStorage.setItem('outdated', true);
				cssCapabilities.init();
			});
		}


		/**
		 * Load the `mini-modal.js` file and initialize functions.
		 * This is the default set of modal/light box functionality supplied with the framework.
		 */
		$.loadScript(theme_path + 'core/js/mini-modal.js', function () {
			var targets = document.querySelectorAll('[data-mini-modal]');

			for (var i = 0; i < targets.length; i += 1) {
				var modal = minimodal(targets[i], {
					// If you are using, and have, a Google Maps API Key, enter it here.
					googleMapsAPIKey: ''
				});

				modal.init();
			}
		});


		/**
		 * Although NodeList is not an Array, it is possible to iterate on it using forEach().
		 * It can also be converted to an Array using Array.from().
		 * However some older browsers have not yet implemented NodeList.forEach() nor Array.from().
		 * But those limitations can be circumvented by using Array.prototype.forEach().
		 * This polyfill adds compatibility to browsers which do not support NodeList.forEach(). [IE11]
		 */
		if (window.NodeList && !NodeList.prototype.forEach) {
			NodeList.prototype.forEach = function (callback, thisArg) {
				thisArg = thisArg || window;
				for (var i = 0; i < this.length; i++) {
					callback.call(thisArg, this[i], i, this);
				}
			};
		}

	},

	pages: {
		/* ----------
		 Common :
		 ---------- */
		common: function () {
			/**
			 * Add `ID` and `CLASS` attributes to `INPUT` and `SELECT` elements
			 * dynamically created by Miva.
			 */
			var mvtInputWraps = document.querySelectorAll('[data-hook~="mvt-input"]');
			var mvtSelectWraps = document.querySelectorAll('[data-hook~="mvt-select"]');

			mvtInputWraps.forEach(function (element) {
				var classes = element.getAttribute('data-classlist');
				var id = element.getAttribute('data-id');
				var mvtInputs = element.querySelectorAll('input');

				mvtInputs.forEach(function (mvtInput) {
					if (mvtInput.getAttribute('type') !== 'hidden') {
						mvtInput.setAttribute('class', classes);
						mvtInput.setAttribute('id', id);
					}
				});
			});

			mvtSelectWraps.forEach(function (element) {
				var classes = element.getAttribute('data-classlist');
				var id = element.getAttribute('data-id');
				var mvtSelects = element.querySelectorAll('select');

				mvtSelects.forEach(function (mvtSelect) {
					mvtSelect.setAttribute('class', classes);
					mvtSelect.setAttribute('id', id);
				});
			});

		},

		jsSFNT: function () {
		},

		jsCTGY: function () {
		},

		jsPROD: function () {
			/**
			 * This removes the default Miva `closeup_backing` container.
			 */
			window.addEventListener('load', function () {
				document.querySelector('div.closeup_backing').parentNode.removeChild(document.querySelector('div.closeup_backing'));
			});

		},

		jsPATR: function () {
		},

		jsBASK: function () {
			/**
			 * Estimate Shipping
			 */
			mivaJS.estimateShipping = function (element) {
				'use strict';

				var currentModal = document.querySelector('[data-hook="' + element + '"]');
				var formElement = currentModal.querySelector('[data-hook="shipping-estimate-form"]');
				var formButton = formElement.querySelector('[data-hook="calculate-shipping-estimate"]');

				function createCalculation () {
					var processor = document.createElement('iframe');

					processor.id = 'calculate-shipping';
					processor.name = 'calculate-shipping';
					processor.style.display = 'none';
					formElement.before(processor);
					processor.addEventListener('load', function () {
						displayResults(processor);
					});
					formElement.submit();
				}

				function displayResults (source) {
					var content = source.contentWindow.document.body.innerHTML;

					formElement.querySelector('[data-hook="shipping-estimate-fields"]').classList.add('u-hidden');
					formElement.querySelector('[data-hook="shipping-estimate-results"]').innerHTML = content;
					formElement.setAttribute('data-status', 'idle');

					formElement.querySelector('[data-hook="shipping-estimate-recalculate"]').addEventListener('click', function () {
						formElement.querySelector('[data-hook="shipping-estimate-results"]').innerHTML = '';
						formElement.querySelector('[data-hook="shipping-estimate-fields"]').classList.remove('u-hidden');
					});

					setTimeout(
						function () {
							source.parentNode.removeChild(source);
						}, 1
					);
				}

				formButton.addEventListener('click', function (event) {
					event.preventDefault();
					createCalculation();
				}, false);
			};

		},

		jsORDL: function () {
		},

		jsOCST: function () {
		},

		jsOSEL: function () {
		},

		jsOPAY: function () {
			/**
			 * Credit Card Detection
			 */
			$.loadScript(theme_path + 'core/js/payment-method.js', function () {
				$.hook('detect-card').on('input paste', function () {
					var cardInput = this;

					if (isNaN(this.value)) {
						this.classList.add('has-error');
					}
					paymentMethod(this, function (paymentDetected) {
						if (paymentDetected) {
							cardInput.classList.remove('has-error');
							$.hook('payment-method-display').text(paymentDetected.display);
							$.hook('payment-method').val(supportedPaymentMethods.findPaymentMethod(paymentDetected.name));
						}
					});
				});
			});

			/**
			 * Added functionality to help style the default Miva output payment
			 * fields.
			 */
			$.hook('mvt-input').each(function () {
				var dataHook = $(this).attr('data-datahook');

				if (dataHook) {
					$(this).find('input').attr('data-hook', dataHook);
				}

				Array.prototype.forEach.call($(this), function (el) {
					el.innerHTML = el.innerHTML.replace(/&nbsp;/gi, '');
				});
			});

			$.hook('detect-card').attr('type', 'tel');

			$('[data-id="cvv"]').find('input').attr('type', 'tel');

			$.hook('mvt-select').find('select').each(function () {
				var wrapDiv = document.createElement('div'),
					select = this;

				wrapDiv.classList.add('c-form-select');
				select.parentNode.insertBefore(wrapDiv, select);
				wrapDiv.appendChild(select);
			});

		},

		jsINVC: function () {
			/**
			 *  Launch Printer Dialog
			 */
			$.hook('print-invoice').on('click', function (element) {
				element.preventDefault();
				window.print();
			});
		},

		jsORDS: function () {
			/**
			 *  Launch Printer Dialog
			 */
			$.hook('print-invoice').on('click', function (element) {
				element.preventDefault();
				window.print();
			});
		},

		jsLOGN: function () {
		},

		jsACAD: function () {
		},

		jsACED: function () {
		},

		jsCABK: function () {
		},

		jsCADA: function () {
		},

		jsCADE: function () {
		},

		jsAFCL: function () {
		},

		jsAFAD: function () {
		},

		jsAFED: function () {
		},

		jsORHL: function () {
		},

		jsCTUS: function () {
		}
	},

	theme: function (pageID) {
		/**
		 * Call in additional functions as developed for theme.
		 */
		$.loadScript(theme_path + 'ui/js/theme.js', function () {
			window.addEventListener('load',
				$.debounced(function () {
					themeFunctionality.init();

					if (themeFunctionality[pageID]) {
						themeFunctionality[pageID]();
					}
				}, 300),
				false
			);
		});
	}
};


(function () {
	String.prototype.toCamelCase = function (cap1st) {
		'use strict';

		return ((cap1st ? '-' : '') + this).replace(/-+([^-])/g, function (a, b) {
			return b.toUpperCase();
		});
	};
	var pageID = document.body.id.toCamelCase();

	/**
	 * Initialize Global Site Functions
	 */
	elementsUI.site();

	/**
	 * Initialize Common Page Functions
	 */
	elementsUI.pages.common();

	/**
	 * Initialize Page Specific Functions
	 */
	if (elementsUI.pages[pageID]) {
		elementsUI.pages[pageID]();
	}

	/**
	 * Initialize Theme Specific Function
	 */
	elementsUI.theme(pageID);
}());

@influxweb influxweb closed this Nov 28, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment