terrier-engine 4.13.0 → 4.13.2

package/app/assets/stylesheets/terrier/tiny-modal.scss

@@ -0,0 +1,210 @@
+
+// The structure of the modal window is:
+// #modal-window
+//   #modal-row
+//     .modal-column (one or more)
+
+$modal-pad: 24px;
+$animation-duration: 0.25s;
+$modal-breakpoint: 720px;
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Overlay
+////////////////////////////////////////////////////////////////////////////////
+
+body.with-modal {
+	#content, #header, #footer {
+		filter: blur(12px);
+	}
+}
+
+#modal-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(#000, 0.5);
+	z-index: 99;
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Window
+////////////////////////////////////////////////////////////////////////////////
+
+#modal-window {
+	position: fixed;
+	top: $modal-pad;
+	width: 85%;
+	left: 50%;
+	z-index: 100;
+	transform: translate(-50%, -120%);
+	transition: $animation-duration ease transform;
+	box-shadow: 0 2px $modal-pad rgba(#000, 0.25);
+	// as of Chrome 96, overflow: hidden seems to be broken in some circumstances and doesn't respect
+	// the relative positioning, so we're forced to make it visible with a clip path
+	overflow-x: visible;
+	clip-path: inset(0); // clip everything outside of the view
+	background-color: #fff;
+	&.show {
+		transform: translate(-50%,0);
+	}
+	&.tiny {
+		max-width: 500px;
+	}
+	&.no-transition {
+		transition: none;
+	}
+	&.expanded {
+		width: 96%;
+		max-width: inherit;
+	}
+}
+
+@media only screen and (max-width: $modal-breakpoint) {
+	#modal-window {
+		width: 94%;
+	}
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Row
+////////////////////////////////////////////////////////////////////////////////
+
+#modal-row {
+	position: relative;
+	width: 100%;
+	display: flex;
+	transition: left $animation-duration ease;
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Container
+////////////////////////////////////////////////////////////////////////////////
+
+.modal-column {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	.modal-header {
+		flex: 0 0 auto;
+		display: flex;
+		padding-right: 50px;
+		h2 {
+			flex: 1 0 auto;
+			margin: 0;
+			padding: $modal-pad/3 $modal-pad/2;
+			line-height: 1;
+		}
+		a.close-modal {
+			position: absolute;
+			right: 0;
+			top: 0;
+			font-size: 32px;
+			display: block;
+			width: 32px;
+			height: 32px;
+			text-align: center;
+			&:hover {
+				transform: scale(1.08);
+			}
+			&:active {
+				transform: scale(0.92);
+			}
+		}
+	}
+	.modal-content {
+		min-height: 400px;
+		flex: 1 1 auto;
+		overflow-y: auto;
+	}
+	.modal-actions {
+		flex: 0 0 auto;
+		padding: $modal-pad/2;
+		display: flex;
+		justify-content: end;
+		align-items: center;
+		gap: $modal-pad/2;
+
+		position: relative;
+		a {
+			display: block;
+			&[disabled] {
+				opacity: 0.5;
+			}
+		}
+		.start {
+			flex: 0 0 auto;
+			gap: $modal-pad/2;
+			display: flex;
+		}
+		.end {
+			flex: 1 1 auto;
+			gap: $modal-pad/2;
+			display: flex;
+		}
+	}
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Alert
+////////////////////////////////////////////////////////////////////////////////
+
+#modal-alert {
+	position: fixed;
+	top: 50%;
+	width: 300px;
+	left: 50%;
+	z-index: 1000;
+	transform: translate(-50%, -50%) scale(0);
+	transition: $animation-duration ease transform;
+	box-shadow: 0 2px $modal-pad rgba(#000, 0.25);
+	overflow-x: hidden;
+	background-color: #fff;
+	&.show {
+		transform: translate(-50%, -50%) scale(1);
+	}
+	> .title {
+		i {
+			margin-right: 0.5em;
+		}
+		padding: 1em 1em 0.5em 1em;
+		text-align: center;
+		font-weight: bold;
+	}
+	.body {
+		padding: 0.5em 1em;
+		p {
+			margin-top: 0;
+			line-height: 1.3;
+		}
+		ul, ol {
+			padding-left: 2em;
+			li {
+				margin: 0.5em 0;
+			}
+		}
+	}
+	.actions {
+		padding: 1em;
+		a.action {
+			display: block;
+			padding: 1em;
+			line-height: 1;
+			font-weight: bold;
+			text-align: center;
+			margin-bottom: 1em;
+			&.glyp-spacing {
+				line-height: 1.4;
+			}
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}

package/app/assets/stylesheets/terrier/tt-card.scss

@@ -0,0 +1,9 @@
+@import "tt-mixins";
+
+.tt-card {
+	@include panel-like;
+
+	&.padded {
+		padding: var(--tt-pad);
+	}
+}

package/app/assets/stylesheets/terrier/tt-dropdowns.scss

@@ -0,0 +1,116 @@
+@import "tt-mixins";
+
+.tt-dropdown-content {
+	pointer-events: auto;
+	position: fixed;
+	background-color: var(--tt-dropdown-color);
+	@include tt-inset-white-text;
+	@include tt-rounded-corners;
+	@include tt-box-shadow;
+	transform: scale(0);
+	transition: transform var(--tt-animation-duration) ease;
+
+	overflow-y: auto;
+	overflow-x: hidden;
+
+	&.show {
+		transform: scale(1);
+	}
+
+	.padded {
+		padding: var(--tt-pad);
+	}
+
+	label {
+		text-transform: none;
+		margin-bottom: 0;
+	}
+}
+
+.tt-dropdown-backdrop {
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(#000, 0.05);
+}
+
+.tt-actions-dropdown {
+	.tt-dropdown-content {
+		overflow-y: scroll;
+	}
+	a, .header {
+		display: flex;
+		@include tt-inset-white-text;
+		@include tt-text-pad;
+		@include tt-no-select;
+		@include tt-brighten-hover;
+		flex-wrap: wrap;
+		row-gap: 0.2em;
+		align-items: center;
+		gap: 0.5em;
+		@include tt-inset-white-text;
+		font-size: var(--tt-body-font-size);
+		background-color: var(--tt-secondary-color);
+
+		&:first-child {
+			@include tt-top-rounded-corners;
+		}
+
+		&:last-child {
+			@include tt-bottom-rounded-corners;
+		}
+
+		> div, > span {
+			flex: 1 1 auto;
+		}
+
+		&.inactive {
+			opacity: 0.5;
+		}
+
+		.subtitle {
+			flex: 0 0 100%;
+			font-size: var(--tt-label-font-size);
+		}
+
+		.icon.white svg {
+			@include tt-icon-size(0.75);
+			* {
+				color: var(--tt-white-color);
+			}
+		}
+
+		&.border-top {
+			border-top: 1px solid rgba(#fff, 0.5);
+		}
+
+		&.primary {
+			background-color: var(--tt-primary-color);
+		}
+
+		> .right-title {
+			flex: 0 0 auto;
+			text-align: right;
+			font-style: italic;
+		}
+
+		&:hover {
+			color: #fff;
+		}
+	}
+
+
+	.header {
+		justify-content: center;
+
+		div, span {
+			flex: 0 0 auto;
+		}
+
+		&:hover {
+			filter: none;
+		}
+	}
+}

package/app/assets/stylesheets/terrier/tt-flex.scss

@@ -0,0 +1,101 @@
+@import "tt-mixins";
+
+
+.tt-flex {
+	display: flex;
+	gap: 0;
+	padding: 0;
+	align-content: flex-start;
+
+	@include tt-flex-utils;
+
+	&.h-gap {
+		row-gap: 0;
+	}
+
+	&.gap {
+		gap: var(--tt-gap);
+	}
+
+
+	@mixin stretch {
+		flex: 1 1 auto;
+	}
+	@mixin shrink {
+		flex: 0 0 auto;
+	}
+
+	> div, > label, > a.stretch {
+		// default is stretch
+		@include stretch;
+		min-width: 1em;
+		min-height: 1em;
+
+		&.shrink {
+			@include shrink;
+		}
+	}
+
+	&.shrink-items > div, &.shrink-items > label {
+		@include shrink;
+
+		&.stretch {
+			@include stretch;
+		}
+	}
+}
+
+a.tt-flex {
+	gap: 0.5em;
+	&.alert {
+		color: var(--tt-alert-color);
+	}
+}
+
+
+@media screen and (max-width: $phone-breakpoint) {
+	.tt-flex.phone-collapsible {
+		flex-direction: column;
+	}
+}
+
+@media screen and (max-width: $mobile-breakpoint) {
+	.tt-flex.mobile-collapsible {
+		flex-direction: column;
+	}
+}
+
+@media screen and (max-width: $tablet-breakpoint) {
+	.tt-flex.tablet-collapsible {
+		flex-direction: column;
+	}
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Container Breakpoints
+////////////////////////////////////////////////////////////////////////////////
+
+// Apply this to parents of .flex elements for whom you'd like to
+// use the container-based collapsible classes below
+.breakpoint-container {
+	container-type: inline-size;
+}
+
+@container (max-width: #{$tablet-breakpoint}) {
+	.tt-flex.container-tablet-collapsible {
+		flex-direction: column;
+	}
+}
+
+@container (max-width: #{$mobile-breakpoint}) {
+	.tt-flex.container-mobile-collapsible {
+		flex-direction: column;
+	}
+}
+
+@container (max-width: #{$phone-breakpoint}) {
+	.tt-flex.container-phone-collapsible {
+		flex-direction: column;
+	}
+}

package/app/assets/stylesheets/terrier/tt-forms.scss

@@ -0,0 +1,166 @@
+@import "tt-mixins";
+
+
+.tt-form {
+
+	// text-like fields
+	input[type=text], input[type=number], input[type=email], input[type=tel], input[type=search], input[type=date], select, textarea {
+		margin: 0;
+		font-size: var(--tt-body-font-size);
+		min-height: var(--tt-field-height);
+		@include tt-rounded-corners;
+		border: 1px solid var(--tt-field-border-color);
+		padding: 0 0.6em;
+		width: 100%;
+		&.error {
+			border-color: var(--tt-alert-color);
+		}
+	}
+
+	// text area
+	textarea {
+		padding: 0.6em;
+	}
+
+	// checkboxes and radio buttons
+	input[type=checkbox], input[type=radio] {
+		margin: 0;
+		width: 1.5em;
+		height: 1.5em;
+		cursor: pointer;
+	}
+
+	// all labels are flex
+	label {
+		display: flex;
+		gap: 0.8em;
+		line-height: 1.3;
+		align-items: center;
+		&.caption-size {
+			font-size: var(--tt-caption-font-size);
+		}
+		&.body-size {
+			font-size: var(--tt-body-font-size);
+		}
+	}
+}
+
+.tt-readonly-field {
+	margin: 0;
+	font-size: var(--tt-body-font-size);
+	min-height: var(--tt-field-height);
+	@include tt-rounded-corners;
+	border: 1px solid var(--tt-field-border-color);
+	display: flex;
+	align-items: center;
+	padding: 0 0.6em;
+	gap: 0.6em;
+	flex: 1 1 auto;
+	background-color: var(--tt-inactive-background);
+	i {
+		transform: scale(1.25);
+	}
+}
+
+
+.tt-compound-field {
+	@include tt-rounded-corners;
+	@include tt-concave-bg(#{var(--tt-field-background)}, false);
+	display: flex;
+	align-items: stretch;
+
+	border: 1px solid var(--tt-field-border-color);
+
+	> *:not(:last-child) {
+		border-right: 1px solid var(--tt-field-border-color);
+	}
+
+	&.inline {
+		display: inline-flex;
+	}
+
+	input[type=text], input[type=number], input[type=email], input[type=tel], input[type=search], input[type=date], select, textarea, .readonly-field, .field_with_errors, ul {
+		flex: 1 1 auto;
+		margin-bottom: 0;
+		display: block;
+		min-height: var(--tt-field-height);
+
+		&.shrink { // for when it's next to another field
+			flex: 0 1 auto;
+			width: initial;
+		}
+
+		border-radius: 0;
+		border: none;
+
+		&:first-child {
+			@include tt-left-rounded-corners;
+		}
+
+		&:last-child {
+			@include tt-right-rounded-corners;
+		}
+	}
+
+	input[type=checkbox], input[type=radio] {
+		align-self: center;
+		margin: 0 14px; // can't use padding on checkbox/radio, but we need space. so margin
+	}
+
+	ul {
+		margin-bottom: 0;
+		display: inline-flex;
+	}
+
+	label, a {
+		flex: 0 0 auto;
+		display: block;
+		min-height: var(--tt-field-height);
+		font-size: var(--tt-caption-font-size);
+		padding: 11px 14px;
+		margin-bottom: 0 !important;
+		opacity: 1;
+		text-shadow: 0 1px 0 #fff;
+		line-height: 1;
+
+		&:first-child {
+			@include tt-left-rounded-corners;
+		}
+
+		&:last-child {
+			@include tt-right-rounded-corners;
+		}
+
+		&.icon-only i {
+			display: block;
+			transform: scale(1.5);
+		}
+	}
+
+	label {
+		text-transform: none;
+	}
+
+	ul.button-group {
+		margin-bottom: 0;
+
+		li:first-child a.button {
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
+		}
+	}
+
+	a {
+		@include tt-raised-bg(#{var(--tt-field-background)}, true);
+		color: var(--tt-secondary-color);
+		cursor: pointer;
+
+		&.button {
+			color: #fff;
+		}
+	}
+
+	.field_with_errors:last-child > * {
+		@include tt-right-rounded-corners;
+	}
+}

package/app/assets/stylesheets/terrier/tt-grid.scss

@@ -0,0 +1,26 @@
+.tt-grid {
+	display: grid;
+
+	&.gap {
+		grid-gap: var(--tt-gap);
+	}
+
+	&.large-gap {
+		grid-gap: calc(var(--tt-gap) * 2);
+	}
+
+	&.small-gap {
+		grid-gap: calc(var(--tt-gap) / 2);
+	}
+
+	--tt-grid-column-width: 350px;
+	grid-template-columns: repeat(auto-fill, minmax(var(--tt-grid-column-width), 1fr));
+
+	&.small-columns {
+		--tt-grid-column-width: 225px;
+	}
+
+	&.large-columns {
+		--tt-grid-column-width: 475px;
+	}
+}

package/app/assets/stylesheets/terrier/tt-lightbox.scss

@@ -0,0 +1,33 @@
+@import "tt-mixins";
+
+
+.tuff-part-LightboxPart {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	@include tt-blur-background;
+	.scroller {
+		@include tt-absolute-fill;
+		overflow-x: scroll;
+		overflow-y: scroll;
+		padding: var(--tt-pad);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		img {
+			@include tt-box-shadow;
+			transition: transform var(--tt-animation-duration) ease;
+			transform: scale(0);
+			max-height: 100%;
+		}
+	}
+
+	&.active {
+		background-color: rgba(#000, 0.2);
+		.scroller img {
+			transform: scale(1);
+		}
+	}
+}