From d9827eb9f096f05b1188d005921dc74f3477adbf Mon Sep 17 00:00:00 2001 From: Dan Matthew Date: Mon, 21 Sep 2020 17:23:25 +0100 Subject: [PATCH] fix: add user-select util --- assets/stylesheets/_bootstrap.scss | 1 + assets/stylesheets/_error.scss | 98 ++++++++++++++++++++++++++++++ assets/stylesheets/_utils.scss | 10 +++ error.html | 32 ++++++++++ 4 files changed, 141 insertions(+) create mode 100644 assets/stylesheets/_error.scss create mode 100644 error.html diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss index f8ac7c5beb..befbcdeb28 100644 --- 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 new file mode 100644 index 0000000000..5cfc009f05 --- /dev/null +++ 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 index e69de29bb2..ef0fd99148 100644 --- 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 new file mode 100644 index 0000000000..7c3eda9d69 --- /dev/null +++ b/error.html @@ -0,0 +1,32 @@ + + + + + Error – Talis + + + + +
+
+
+

Error! + Something has gone wrong, and our team has been notified +

+
+
+
+
+
+
+ Error code: +
+
+ Error message +
+
+

A useful error message

+
+
+ +