1 files changed, 222 insertions, 0 deletions
diff --git a/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss
new file mode 100644
index 0000000..b54dd8f
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss
@@ -0,0 +1,222 @@
+.noborder,
+iframe,
+dialog { border: 0; }
+
+.border-collapse {
+  border-collapse: collapse;
+}
+
+.unstyled {
+	padding-left: 0;
+	list-style-type: none;
+}
+
+@if $rtl-option == true {
+	/* RTL */
+	[dir="rtl"] {
+		.unstyled {
+			padding-right: 0;
+		}
+	}
+}
+
+/*
+ * taken from http://tinytypo.tetue.net/ made by @tetue
+ * tuned with the help of https://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
+ *
+ * see https://en.wikipedia.org/wiki/Quotation_mark#Summary_table for reference
+ */
+q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+:lang(fr) > q {
+  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
+}
+:lang(en) > q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+q:before {
+  content: open-quote;
+}
+q:after {
+  content: close-quote;
+}
+
+@import './_includes/_resets/typo-sub-sup';
+
+/* avoid margin problems */
+@if $vertical-rhythm == 'single_top' or $vertical-rhythm == 'double_top_single_bottom' {
+  h1,.h1,
+  h2,.h2,
+  h3,.h3,
+  h4,.h4,
+  h5,.h5,
+  h6,.h6{
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  /* remove bottom margin on last child */
+  p,
+  ul,
+  ol,
+  dl,
+  blockquote,
+  pre,
+  table {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+/* avoid margin on nested elements */
+li p,
+li ul {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+/* Hyphenation: Thou shalt not pass (Moïse or Gandalf, don’t remember) */
+@if $hyphenation == true {
+  textarea,
+  table,
+  td,
+  th,
+  code,
+  pre,
+  samp,
+  div,
+  p {
+    word-break: break-word;
+  }
+  @supports (-webkit-hyphens: auto) or (hyphens: auto) {
+    textarea,
+    table,
+    td,
+    th,
+    code,
+    pre,
+    samp,
+    div,
+    p {
+      word-break: normal;
+      @include vendor-prefix(hyphens, auto, webkit);
+    }
+  }
+}
+@else {
+  .cut {
+    word-break: break-word;
+  }
+  @supports (-webkit-hyphens: auto) or (hyphens: auto) {
+    .cut {
+      word-break: normal;
+      @include vendor-prefix(hyphens, auto, webkit);
+    }
+  }
+}
+
+/* remove hyphenation if needed */
+.nocut {
+  word-wrap: normal;
+}
+@supports (-webkit-hyphens: auto) or (hyphens: auto) {
+  .nocut {
+    @include vendor-prefix(hyphens, none, webkit);
+  }
+}
+
+.break {
+  word-break: break-word;
+}
+.hyphens {
+	@include vendor-prefix(hyphens, auto, webkit);
+}
+
+kbd {
+  border: solid 1px;
+  border-top-left-radius: .5em;
+  border-top-right-radius: .5em;
+  padding: 0 .25em;
+}
+table {
+  margin-bottom: 1.5em;
+  table-layout: fixed;
+}
+
+/* text aligns */
+.alignright  { text-align: right; }
+.aligncenter { text-align: center; }
+.alignleft   { text-align: left; }
+
+@if $rtl-option == true {
+  /* RTL */
+  [dir="rtl"] .alignright  { text-align: left; }
+  [dir="rtl"] .alignleft   { text-align: right; }
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ellipsis-two-lines,
+.ellipsis-four-lines {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.ellipsis-two-lines {
+  -webkit-line-clamp: 2;
+}
+.ellipsis-four-lines {
+  -webkit-line-clamp: 4;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+.capitalize {
+  text-transform: capitalize;
+}
+.capitalize-block {
+  text-transform: lowercase;
+  &:first-letter {
+    text-transform: uppercase;
+  }
+}
+
+.strong, .bold {
+	@extend %bold;
+}
+.nobold {
+	font-weight: normal;
+}
+
+.semibold {
+  font-weight: 600;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.no-outline {
+  outline: 0;
+}
+
+.strike {
+	text-decoration: line-through;
+}
+
+.pre-wrap {
+	white-space: pre-wrap;
+}
+.no-wrap {
+  white-space: nowrap;
+}
+.pre {
+	white-space: pre;
+}
+