Issue 5734 - Add utility classes to website-defaults

static/scss/_utilities.scss

 // This file is part of website-defaults
 // Copyright (C) 2016-present eyeo GmbH
 //
 // website-defaults is free software: you can redistribute it and/or
 // modify it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // website-defaults is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 34 matching lines @@
 
 /* Device widths
  ******************************************************************************/
 
 .phone-width { width: $phone-width; }
 .phablet-width { width: $phablet-width; }
 .tablet-width { width: $tablet-width; }
 .desktop-width { width: $desktop-width; }
 .large-desktop-width { width: $large-desktop-width; }
 
+/* Text alignment

[ire, 2017/10/30 16:19:56]

I don't know if we need/want all of this. The utility class I had in hc was just
text-center. But I figure they could be useful

+ ******************************************************************************/
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+.text-start { text-align: left; }
+[dir="rtl"] .text-start { text-align: right; }
+.text-end { text-align: right; }
+[dir="rtl"] .text-end { text-align: left; }
+
 /* Clearfix
  ******************************************************************************/
 
 .clearfix:after,
 .clearfix:before
 {
   display: table;
   content: " ";
 }
 
 .clearfix:after
 {
   clear: both;
 }
 
+/* Screen reader only
+ ******************************************************************************/
+
+.sr-only
+{
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
+
 /* Backgrounds
  ******************************************************************************/
 
 .bg-primary
 {
   color: $primary-light;
   background-color: $primary-dark;
 }
 
 .bg-secondary
 {
   color: $secondary-light;
   background-color: $secondary-dark;
 }
 
 .bg-accent
 {
   color: $accent-light;
   background-color: $accent-dark;
 }
 
 .bg-error
 {
   color: $error-light;
   background-color: $error-dark;
 }