english_tea 0.1.0

data/app/assets/stylesheets/english_tea/forms/_choices.scss

@@ -0,0 +1,204 @@
+// ==========================================================================
+// Shorthand choice field styling classes
+// ==========================================================================
+
+// ---
+// CHOICE W/BUTTON
+// ---
+
+.btn-choice
+{
+	background-color: map-get($colors, 2);
+	border: $border-width $border-style map-get($colors, 2);
+	color: map-get($colors, 4);
+
+	&:active,
+	&:focus,
+	&:hover
+	{
+		background-color: map-get($colors, 3);
+		border-color: map-get($colors, 3);
+		color: map-get($colors, 6);
+	}
+
+	input:checked + &,
+	input:checked + &:active,
+	input:checked + &:hover
+	{
+		background-color: map-get($colors, 10);
+		border-color: map-get($colors, 10);
+		color: map-get($colors, 1);
+		cursor: not-allowed;
+	}
+
+	// Show/hide 1..8 panels related to the choice buttons
+
+	~ .pnl-choice
+	{
+		display: none;
+	}
+
+	@for $i from 1 through 8
+	{
+		input:nth-of-type(#{$i}):checked ~ & ~ .pnl-choice:nth-of-type(#{$i})
+		{
+			display: block;
+		}
+	}
+}
+
+// ---
+// CHOICE W/LABEL + CHECKBOX
+// ---
+
+.lbl-choice
+{
+	background-color: map-get($colors, 1);
+	border-color: map-get($colors, 10);
+	color: map-get($colors, 10);
+	@include display(inline-flex);
+	@include align-items(center);
+	position: relative;
+	@include prefixer(user-select, none, webkit moz ms spec);
+
+	&:before
+	{
+		background: transparent;
+		border: 2px solid;
+		border-color: inherit;
+		border-radius: $border-radius-rounded;
+		color: inherit;
+		content: '';
+		display: inline-block;
+		height: _rem($base-font-size);
+		left: 0;
+		position: absolute;
+		top: 0;
+		width: _rem($base-font-size);
+
+		input[type="radio"] + &
+		{
+			border-radius: $border-radius-circle;
+		}
+
+		input:checked + &
+		{
+			background-color: inherit;
+			content: url('data:image/svg+xml,#{$icon-check-simple}');
+		}
+	}
+
+	> *
+	{
+		background-color: map-get($colors, 1);
+		display: block;
+		@include flex-grow(1);
+		font-weight: $type-weight-normal;
+		padding-left: _rem($base-font-size + $base-gutter);
+	}
+}
+
+// ---
+// CHOICE W/IMAGE
+// ---
+
+.img-choice
+{
+	opacity: map-get($opacity-scale, 1);
+	@include transition(opacity $transition-timing-base $transition-easing-base);
+
+	input:checked + &
+	{
+		opacity: 1;
+	}
+
+	img {
+		pointer-events: none; // Avoid svg gobbling click events - same fix as .icon
+	}
+}
+
+// ---
+// ON/OFF TOGGLES
+// .btn-toggle used to style text-only button
+// .toggle-on/off used to show hide icons
+// data-toggle-on/off attribute values used to show text labels
+// ---
+
+.toggle
+{
+	@include transition(all $transition-timing-button $transition-easing-button);
+
+	&.btn-toggle
+	{
+		background-color: map-get($colors, 10);
+		border: $border-width $border-style map-get($colors, 10);
+		color: map-get($colors, 1);
+
+		&:active,
+		&:focus,
+		&:hover
+		{
+			background-color: map-get($colors, 8);
+			border-color: map-get($colors, 8);
+		}
+	}
+
+	// Either add the toggled off text to the element
+	// or the direct child element
+	&[data-toggle-off],
+	> [data-toggle-off]
+	{
+		&:after
+		{
+			content: attr(data-toggle-off);
+		}
+	}
+
+	.toggle-off
+	{
+		display: block;
+	}
+
+	.toggle-on
+	{
+		display: none;
+	}
+
+	input:checked + &
+	{
+		&.btn-toggle
+		{
+			background-color: map-get($colors, 1);
+			border: $border-width $border-style map-get($colors, 10);
+			color: map-get($colors, 10);
+
+			&:active,
+			&:focus,
+			&:hover
+			{
+				background-color: map-get($colors, 2);
+			}
+		}
+
+		// Either add the toggled on text to the element
+		// or the direct child element
+		&[data-toggle-on],
+		> [data-toggle-on]
+		{
+			&:after
+			{
+				content: attr(data-toggle-on);
+			}
+		}
+
+		.toggle-off
+		{
+			display: none;
+		}
+
+		.toggle-on
+		{
+			display: block;
+		}
+	}
+}

data/app/assets/stylesheets/english_tea/forms/_datepicker.scss

@@ -0,0 +1,142 @@
+// ==========================================================================
+// Shorthand datepicker styling classes
+// ==========================================================================
+
+$datepicker-header-type: map-get($type-scale, 6);
+$datepicker-table-type: map-get($type-scale, 1);
+
+.pika-single
+{
+	background-color: map-get($colors, 1);
+	color: map-get($colors, 10);
+  display: block;
+  position: relative;
+	z-index: map-get($layer-scale, 5);
+
+	&.is-hidden 
+	{
+    display: none;
+	}
+
+	&.is-bound 
+	{
+    position: absolute;
+    @include _box-shadow(2);
+	}
+
+	.is-disabled
+	{
+		> input[type="button"],
+		> input[type="submit"],
+		> button[type="button"]
+		{
+			cursor: default;
+		}	
+	}
+}
+
+	.pika-title
+	{
+		background-color: map-get($colors, 9);
+		color: map-get($colors, 1);
+		padding: _rem($base-rhythm);
+		position: relative;
+		text-align: center;
+	}
+		
+		.pika-label
+		{
+			display: inline-block;
+			font-family: $type-font-title;
+			font-size: #{_rem(map-get($datepicker-header-type, size))};
+			font-weight: $type-weight-normal;
+			letter-spacing: $type-kerning-title;
+			line-height: #{_rem(map-get($datepicker-header-type, line-height))};
+			text-transform: uppercase;
+
+			&:nth-child(2)
+			{
+				color: map-get($colors, 6);
+				margin-left: 2px;
+			}
+		}
+
+		.pika-select
+		{
+			display: none;
+		}
+
+		.pika-prev,
+		.pika-next
+		{
+			background: transparent url('data:image/svg+xml,#{$icon-prev-rev}') no-repeat center center;
+			display: block;
+			height: _rem(map-get($icon-scale, base));
+			left: _rem($base-rhythm);
+			position: absolute;
+			text-indent: -999em;
+			top: 50%;
+			@include transform(translate3d(0, -50%, 0));
+			width: _rem(map-get($icon-scale, base));
+		}
+
+		.pika-next
+		{
+			background-image: url('data:image/svg+xml,#{$icon-next-rev}');
+			left: auto;
+			right: _rem($base-rhythm);
+		}
+
+	.pika-table 
+	{
+		border: $border-width $border-style $color-border-base;
+		width: 100%;
+
+		td, th 
+		{
+			font-size: #{_rem(map-get($datepicker-table-type, size))};
+			line-height: #{_rem(map-get($datepicker-table-type, line-height))};
+			padding: _rem($base-rhythm);
+			text-align: center;
+		}
+
+		abbr 
+		{
+			border: none;
+			display: inline-block;
+			font-weight: $type-weight-medium;
+			margin: _rem($base-rhythm-half) 0;
+		}
+
+		.is-outside-current-month
+		{
+			color: map-get($colors, 3);
+		}
+
+		.is-today 
+		{
+			position: relative;
+			z-index: 0;
+
+			&:after 
+			{
+				background-color: map-get($colors, 2);
+				border-radius: 100%;
+				content: '';
+				display: block;
+				height: 75%;
+				left: 50%;
+				position: absolute;
+				top: 50%;
+				@include transform(translate3d(-50%, -50%, 0));
+				width: 75%;
+				z-index: 1;
+			}
+
+			.pika-day 
+			{
+				position: relative;
+				z-index: 2;
+			}
+		}
+	}

data/app/assets/stylesheets/english_tea/forms/_index.scss

@@ -0,0 +1,246 @@
+// ==========================================================================
+// Shorthand basic field styling classes
+// ==========================================================================
+
+.field
+{
+	@include display(flex);
+	@include flex-wrap(wrap);
+	@include justify-content(space-between);
+	@include align-items(flex-end);
+	min-width: 0; // fixes flexbox+select2 issues: https://css-tricks.com/flexbox-truncated-text/
+
+	.field-header
+	{
+		@include flex(1 0 auto);
+		margin-bottom: _rem($base-rhythm);
+		max-width: 100%; // Don't let this flex child overflow its parent
+		padding-right: _rem($base-gutter);
+	}
+
+		.field-label
+		{
+			$_font: map-get($type-scale, 2);
+
+			@include align-items(center);
+			@include display(flex);
+			@include flex(1 0 auto);
+			font-size: _rem(map-get($_font, size));
+			font-weight: $type-weight-medium;
+			line-height: _decimal-ceil(map-get($_font, line-height) / map-get($_font, size), 3);
+
+			> small
+			{
+				// TODO: Put this back when we have client side validation
+				//$_font-small: map-get($type-scale, 1);
+				//font-size: _rem(map-get($_font-small, size));
+
+				margin-left: _rem($base-rhythm-half);
+			}
+		}
+
+		.field-tooltip
+		{
+			@include align-items(center);
+			@include display(inline-flex);
+		}
+
+		.field-description
+		{
+			color: map-get($colors, 4);
+		}
+
+	.field-feedback
+	{
+		display: none;
+		margin-bottom: _rem($base-rhythm);
+	}
+
+	.field-control,
+	.field-custom-control,
+	.awesomplete,
+	.select2-container--wnw
+	{
+		@include flex-basis(100%);
+	}
+
+	// ---
+	// FIELD ELEMENT SUBCLASSING
+	// ---
+
+	&.field-horizontal
+	{
+		@include display(flex);
+		@include justify-content(space-between);
+		@include align-items(center);
+
+		.field-header
+		{
+			@include flex-basis(auto);
+			margin-bottom: 0;
+			padding-right: 0;
+		}
+
+		.field-feedback
+		{
+			margin-bottom: 0;
+			padding-right: _rem($base-gutter);
+		}
+
+		.field-control,
+		.field-custom-control,
+		.awesomplete,
+		.select2-container--wnw
+		{
+			@include flex-basis(auto);
+		}
+
+		.field-choices
+		{
+			@include display(flex);
+			@include flex-grow(1);
+		}
+	}
+
+	&.error,
+	&.success,
+	&.warning
+	{
+		> .field-feedback
+		{
+			display: block;
+		}
+	}
+
+	&.error
+	{
+		> .field-control,
+		> .field-custom-control > .field-control
+		{
+			border-color: $color-validation-error;
+		}
+
+		> .field-feedback
+		{
+			.field-errors
+			{
+				display: block;
+				color: $color-validation-error;
+			}
+
+			.field-success,
+			.field-warning
+			{
+				display: none;
+			}
+		}
+	}
+
+	&.success
+	{
+		> .field-control,
+		> .field-custom-control > .field-control
+		{
+			border-color: $color-validation-success;
+		}
+
+		> .field-feedback
+		{
+			.field-success
+			{
+				display: block;
+				color: $color-validation-success;
+			}
+
+			.field-errors,
+			.field-warning
+			{
+				display: none;
+			}
+		}
+	}
+
+	&.warning
+	{
+		> .field-control,
+		> .field-custom-control > .field-control
+		{
+			border-color: orange;
+		}
+
+		> .field-feedback
+		{
+			.field-warning
+			{
+				display: block;
+				color: orange;
+			}
+
+			.field-success,
+			.field-errors
+			{
+				display: none;
+			}
+		}
+	}
+}
+
+.field-control
+{
+	@include prefixer(appearance, none, webkit moz);
+
+	$_font: map-get($type-scale, 3);
+	$_font_bpm: map-get($type-scale, 2);
+
+	background-color: map-get($colors, 1);
+	border: 1px solid map-get($colors, 2);
+	border-radius: 0;
+	color: $color-text-base;
+	font-size: _rem(map-get($_font, size));
+	font-weight: normal;
+	line-height: _decimal-ceil(map-get($_font, line-height) / map-get($_font, size), 3);
+	min-width: 0; // fixes flexbox overflow issue
+	padding: _rem($base-gutter);
+	@include transition(border-color $transition-timing-border $transition-easing-border);
+
+	@include _mq(map-get($breakpoints, bpm))
+	{
+		padding-right: _rem($base-rhythm * 2);
+		padding-left: _rem($base-rhythm * 2);
+		font-size: _rem(map-get($_font_bpm, size));
+		line-height: _decimal-ceil(map-get($_font_bpm, line-height) / map-get($_font_bpm, size), 3);
+	}
+
+	@include _placeholder-prefix()
+	{
+		color: map-get($colors, 3);
+	}
+
+	&:focus
+	{
+		border-color: map-get($colors, 3) !important;
+	}
+
+	// Add an icon to the start of the field and adjust dropdown
+	// content padding and (optional) heading to reflect this
+	[data-has-icon] &
+	{
+		&[data-icon]
+		{
+			background-repeat: no-repeat;
+			background-position: _rem($base-gutter) center;
+			background-size: _rem(map-get($icon-scale, base));
+			padding-left: _rem($base-gutter-large + $base-gutter) !important;
+
+			&[data-icon="search"]
+			{
+				background-image: url('data:image/svg+xml,#{$icon-search-light}');
+			}
+
+			&[data-icon="location"]
+			{
+				background-image: url('data:image/svg+xml,#{$icon-location-light}');
+			}
+		}
+	}
+}

data/app/assets/stylesheets/english_tea/forms/_media.scss

@@ -0,0 +1,61 @@
+// ==========================================================================
+// Shorthand media editor control styling classes
+// ==========================================================================
+
+.media-editor
+{
+	counter-reset: editor;
+
+	.media-item-asset
+	{
+			// &:before
+			// {
+			// 	$icon-size-massive: map-get($icon-scale, massive);
+
+			// 	@include _pseudo-elem(_rem($icon-size-massive * 2), _rem($icon-size-massive * 2));
+
+			// 	background: transparent url('data:image/svg+xml,#{$icon-upload}') no-repeat center center;
+			// 	opacity: 0.125;
+			// 	z-index: 0;
+			// }
+	}
+
+		// .media-editor-item-thumbnail
+		// {
+		// 	height: 0;
+		// 	padding-bottom: 100%;
+		// }
+
+	.embed-type .image-type
+	{
+		display: none !important;
+	}
+
+	.image-type .embed-type
+	{
+		display: none !important;
+	}
+
+	.media-editor-item-meta:before
+	{
+		content: counter(editor);
+		counter-increment: editor;
+		display: block;
+	}
+
+	.media-editor-item:first-child
+	{
+		[data-behavior="project-image-position-up"]
+		{
+			display: none !important;
+		}
+	}
+
+	.media-editor-item:last-child
+	{
+		[data-behavior="project-image-position-down"]
+		{
+			display: none !important;
+		}
+	}
+}

data/app/assets/stylesheets/english_tea/forms/_numeric.scss

@@ -0,0 +1,47 @@
+// ==========================================================================
+// Shorthand form numerical field styling classes
+// ==========================================================================
+
+// ---
+// SIMPLE NUMBER FIELDS
+// ---
+
+.field-num
+{
+	width: _rem($base-rhythm * 10);
+}
+
+// ---
+// CREDIT CARD EXPIRY DATE FIELDS
+// ---
+
+.field-cc-date
+{
+	width: _rem($base-rhythm * 6);
+}
+
+// ---
+// LENGTH MEASURING FIELD
+// ---
+
+.field-length
+{
+	$_font: map-get($type-scale, 0);
+
+	color: map-get($colors, 4);
+	display: block;
+	font-size: map-get($_font, size);
+	line-height: map-get($_font, line-height) / map-get($_font, size);
+	margin-top: _rem($base-rhythm-half);
+	margin-right: _rem($base-rhythm-half);
+	text-align: right;
+	width: 100%;
+
+	.field-length-value
+	{
+		display: inline-block;
+		text-align: left;
+		margin-left: _rem($base-rhythm-half);
+		width: 2em;
+	}
+}