fix: add user-select util

twbs · Sep 21, 2020 · d9827eb · d9827eb
1 parent 3a09d5c
commit d9827eb
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 0 deletions.
diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss
@@ -48,5 +48,6 @@
 @import "bootstrap/responsive-utilities";
 
 // Talis Extras
+@import "utils";
 @import "loader";
 @import "skip-link";
diff --git a/assets/stylesheets/_error.scss b/assets/stylesheets/_error.scss
@@ -0,0 +1,98 @@
+.plain.error-page-wrapper {
+    font-family: 'Open Sans', sans-serif;
+    padding: 0 5%;
+    position: relative;
+}
+
+.plain.error-page-wrapper .content-container {
+    -webkit-transition: left .5s ease-out, opacity .5s ease-out;
+    -moz-transition: left .5s ease-out, opacity .5s ease-out;
+    -ms-transition: left .5s ease-out, opacity .5s ease-out;
+    -o-transition: left .5s ease-out, opacity .5s ease-out;
+    transition: left .5s ease-out, opacity .5s ease-out;
+    max-width: 400px;
+    position: relative;
+    left: -30px;
+    opacity: 0;
+}
+
+.plain.error-page-wrapper .content-container.in {
+    left: 0px;
+    top: 123px;
+    opacity: 1;
+}
+
+.plain.error-page-wrapper .head-line {
+    transition: color .2s linear;
+    font-size: 48px;
+    line-height: 60px;
+    color: rgba(255, 255, 255, .2);
+    letter-spacing: -1px;
+    margin-bottom: 5px;
+}
+
+.plain.error-page-wrapper .subheader {
+    transition: color .2s linear;
+    font-size: 36px;
+    line-height: 46px;
+    color: #fff;
+}
+
+.plain.error-page-wrapper hr {
+    height: 1px;
+    background-color: rgba(255, 255, 255, .2);
+    border: none;
+    width: 250px;
+    margin: 35px 0;
+}
+
+.plain.error-page-wrapper .context {
+    transition: color .2s linear;
+    font-size: 18px;
+    line-height: 27px;
+    color: #fff;
+}
+
+.plain.error-page-wrapper .context p {
+    margin: 0;
+}
+
+.plain.error-page-wrapper .context p:nth-child(n+2) {
+    margin-top: 12px;
+}
+
+@media screen and (max-width: 485px) {
+
+    .plain.error-page-wrapper .subheader {
+        font-size: 27px;
+        line-height: 38px;
+    }
+
+    .plain.error-page-wrapper hr {
+        width: 185px;
+        margin: 25px 0;
+    }
+
+    .plain.error-page-wrapper .context {
+        font-size: 16px;
+        line-height: 24px;
+    }
+}
+
+.background-color {
+    background-color: rgba(1, 125, 135, 1) !important;
+}
+
+.primary-text-color {
+    color: #FFFFFF !important;
+}
+
+.secondary-text-color {
+    color: rgba(0, 93, 100, 1) !important;
+}
+
+.error-debug {
+    font-weight: 300;
+    line-height: initial;
+    font-size: small;
+}
diff --git a/assets/stylesheets/_utils.scss b/assets/stylesheets/_utils.scss
@@ -0,0 +1,10 @@
+.o-dl--inline *:not(div) {
+  display: inline;
+}
+
+.u-selectable-text {
+  -webkit-user-select: text;  /* Chrome all / Safari all */
+  -moz-user-select: text;     /* Firefox all */
+  -ms-user-select: text;      /* IE 10+ */
+  user-select: text !important;
+}
diff --git a/error.html b/error.html
@@ -0,0 +1,32 @@
+
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <title>Error – Talis</title>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="dist/app.css">
+  </head>
+    <body class="plain error-page-wrapper background-color background-image">
+        <main id="error-container" class="content-container in">
+            <header>
+              <hgroup>
+                <h1 class="head-line secondary-text-color">Error!
+                  <small class="subheader primary-text-color">Something has gone wrong, and our team has been notified</small>
+                </h1>
+              </hgroup>
+            </header>
+            <hr>
+            <section class="context primary-text-color">
+                <dl id="errorDesc" class="list-inline">
+                  <dt>
+                    Error code:
+                  </dt>
+                  <dd>
+                    Error message
+                  </dd>
+                </dl>
+                <p>A useful error message</p>
+            </section>
+          </main>
+    </body>
+</html>