Initial

web/css/src/utilities.css

@@ -0,0 +1,192 @@
+/* Utilities
+   ========================================================================== */
+
+.u-block {
+	display: block !important;
+}
+
+.u-hidden {
+	display: none !important;
+}
+
+.u-hidden-visually {
+	border: 0 !important;
+	clip: rect(1px, 1px, 1px, 1px) !important;
+	height: 1px !important;
+	overflow: hidden !important;
+	padding: 0 !important;
+	position: absolute !important;
+	width: 1px !important;
+}
+
+.u-noselect {
+	user-select: none !important;
+}
+
+.u-text-right {
+	text-align: right !important;
+}
+
+.u-text-center {
+	text-align: center !important;
+}
+
+.u-text-center-desktop {
+	@media (--viewport-large) {
+		text-align: center !important;
+	}
+}
+
+.u-text-small {
+	font-size: 0.75rem !important;
+}
+
+.u-text-bold {
+	font-weight: bold !important;
+}
+
+.u-text-truncate {
+	overflow: hidden !important;
+	text-overflow: ellipsis !important;
+	white-space: nowrap !important;
+}
+
+.u-text-break {
+	word-break: break-word !important;
+}
+
+.u-text-no-wrap {
+	white-space: nowrap !important;
+}
+
+.u-overflow {
+	overflow: auto !important;
+}
+
+.u-mt15 {
+	margin-top: 15px !important;
+}
+
+.u-mt10 {
+	margin-top: 10px !important;
+}
+
+.u-mt20 {
+	margin-top: 20px !important;
+}
+
+.u-ml5 {
+	margin-left: 5px !important;
+}
+
+.u-ml10 {
+	margin-left: 10px !important;
+}
+
+.u-mr5 {
+	margin-right: 5px !important;
+}
+
+.u-mr10 {
+	margin-right: 10px !important;
+}
+
+.u-mb5 {
+	margin-bottom: 5px !important;
+}
+
+.u-mb10 {
+	margin-bottom: 10px !important;
+}
+
+.u-mb20 {
+	margin-bottom: 20px !important;
+}
+
+.u-mb40 {
+	margin-bottom: 40px !important;
+}
+
+.u-pt10 {
+	padding-top: 10px !important;
+}
+
+.u-pl30 {
+	padding-left: 30px !important;
+}
+
+.u-pr30 {
+	padding-right: 30px !important;
+}
+
+.u-pos-relative {
+	position: relative !important;
+}
+
+.u-width-full {
+	width: 100% !important;
+}
+
+.u-min-height100 {
+	min-height: 100px !important;
+}
+
+.u-min-height300 {
+	min-height: 300px !important;
+}
+
+.u-min-height600 {
+	min-height: 600px !important;
+}
+
+.u-max-width200 {
+	max-width: 200px !important;
+}
+
+.u-max-width300 {
+	max-width: 300px !important;
+}
+
+.u-max-height300 {
+	max-height: 300px !important;
+}
+
+.u-side-by-side {
+	display: flex !important;
+	justify-content: space-between !important;
+	align-items: center !important;
+}
+
+.u-list-bulleted {
+	list-style: disc !important;
+	padding-left: 40px !important;
+}
+
+.u-allow-resize {
+	min-width: 100% !important;
+	resize: both !important;
+}
+
+.u-unstyled-button {
+	border: 0 !important;
+	padding: 0 !important;
+	background-color: transparent !important;
+}
+
+.u-console {
+	font-family: var(--font-family-monospace) !important;
+	white-space: pre !important;
+	line-height: 1.2 !important;
+}
+
+.u-hide-tablet {
+	@media (--viewport-medium) {
+		display: none !important;
+	}
+}
+
+.u-hide-desktop {
+	@media (--viewport-large) {
+		display: none !important;
+	}
+}