Initial commit of RTL support

1 files changed, 526 insertions, 0 deletions

diff --git a/docs/dist/docs.css b/docs/dist/docs.css
new file mode 100644
index 0000000..8cd5f24
--- /dev/null
+++ b/docs/dist/docs.css
@@ -0,0 +1,526 @@
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
+.version::after {
+  content: "0.5.1";
+}
+
+.off-canvas .off-canvas-toggle {
+  font-size: 1rem;
+  left: 1.5rem;
+  position: fixed;
+  top: 1rem;
+}
+
+.off-canvas .off-canvas-sidebar {
+  width: 12rem;
+}
+
+.docs-navbar {
+  height: 3.8rem;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 100;
+}
+
+.docs-navbar .btn {
+  position: absolute;
+  right: 1.5rem;
+  top: 1rem;
+}
+
+.docs-sidebar .docs-nav {
+  bottom: 1.5rem;
+  -webkit-overflow-scrolling: touch; 
+  overflow-y: auto;
+  padding: .5rem 1.5rem;
+  position: fixed;
+  top: 3.5rem;
+  width: 12rem;
+}
+
+.docs-sidebar .accordion {
+  margin-bottom: .75rem;
+}
+
+.docs-sidebar .accordion input ~ .accordion-header {
+  color: #5b657a;
+  font-size: .65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.docs-sidebar .accordion input:checked ~ .accordion-header {
+  color: #667189;
+}
+
+.docs-sidebar .accordion .menu .menu-item {
+  font-size: .7rem;
+  padding-left: 1rem;
+}
+
+.docs-sidebar .accordion .menu .menu-item > a {
+  background: transparent;
+  color: #667189;
+  display: inline-block;
+}
+
+.docs-content {
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: calc(100vw - 12rem);
+}
+
+.docs-content.off-canvas-content {
+  padding: 0 4rem;
+}
+
+.docs-content > .container {
+  margin-left: 0;
+  max-width: 800px;
+  padding-bottom: 1.5rem;
+}
+
+.docs-content .anchor {
+  color: #6362dc;
+  height: 0;
+  margin-left: -2em;
+  overflow: hidden;
+  padding: 0 1em;
+  position: absolute;
+  text-align: center;
+  width: 0;
+  z-index: 100;
+}
+
+.docs-content .anchor:focus,
+.docs-content .anchor:hover {
+  box-shadow: none;
+  height: auto;
+  text-decoration: none;
+  width: 2em;
+}
+
+.docs-content .s-title,
+.docs-content .s-subtitle {
+  color: #414857;
+  line-height: 1.8rem;
+  margin-bottom: 0;
+  padding-bottom: 1rem;
+  padding-top: 1rem;
+  position: static;
+}
+
+@supports ((position: -webkit-sticky) or (position: sticky)) {
+  .docs-content .s-title,
+  .docs-content .s-subtitle {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 100;
+  }
+  .docs-content .s-title::before,
+  .docs-content .s-subtitle::before {
+    background: #fff;
+    bottom: 0;
+    content: "";
+    display: block;
+    left: -10px;
+    position: absolute;
+    right: -10px;
+    top: -5px;
+    z-index: -1;
+  }
+}
+
+.docs-content .s-title:hover .anchor,
+.docs-content .s-subtitle:hover .anchor {
+  height: auto;
+  width: 1em;
+}
+
+.docs-content .s-title + .docs-note,
+.docs-content .s-subtitle + .docs-note {
+  margin-top: .4rem;
+}
+
+.docs-content .docs-note {
+  margin: 1.5rem 0;
+}
+
+.docs-content .docs-ad {
+  background: #f8f9fa;
+  border-radius: .1rem;
+  display: inline-block;
+  padding: .4rem;
+  position: relative;
+}
+
+.docs-content .docs-ad::before {
+  color: #acb3c2;
+  content: "AD";
+  font-size: .7rem;
+  position: absolute;
+  right: .4rem;
+  top: .1rem;
+}
+
+.docs-content .column {
+  padding: .4rem;
+}
+
+.docs-content .docs-block {
+  border-radius: .1rem;
+  padding: .4rem;
+}
+
+.docs-content .docs-block.bg-gray {
+  background: #f0f1f4;
+}
+
+.docs-content .docs-shape {
+  height: 4.8rem;
+  line-height: 1.2rem;
+  padding: 1.8rem 0;
+  width: 4.8rem;
+}
+
+.docs-content .docs-dot {
+  border-radius: 50%;
+  display: inline-block;
+  height: .5rem;
+  padding: 0;
+  width: .5rem;
+}
+
+.docs-content .docs-table th,
+.docs-content .docs-table td {
+  padding: .75rem .25rem;
+}
+
+.docs-content .docs-color {
+  border-radius: .1rem;
+  margin: .25rem 0;
+  padding: .5rem;
+}
+
+.docs-content .docs-color .color-subtitle {
+  font-size: .7rem;
+  opacity: .75;
+}
+
+.docs-content .code {
+  color: #667189;
+}
+
+.docs-content .code .com {
+  color: #acb3c2;
+}
+
+.docs-content .code .tag {
+  color: #5755d9;
+}
+
+.docs-content .code .atn {
+  color: #667189;
+}
+
+.docs-content .code .atv {
+  color: #e06870;
+}
+
+.docs-content .code[data-lang="Bash"] .tag {
+  margin-right: 1em;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.docs-content .panel {
+  height: 75vh;
+}
+
+.docs-content .panel .tile {
+  margin: .75rem 0;
+}
+
+.docs-content .parallax {
+  margin: 2rem auto;
+}
+
+.docs-content .form-autocomplete .menu {
+  position: static;
+}
+
+.docs-content .example-tile-icon {
+  align-content: space-around;
+  align-items: center;
+  background: #5755d9;
+  border-radius: .1rem;
+  color: #fff;
+  display: flex;
+  display: -ms-flexbox;
+  -ms-flex-align: center;
+  -ms-flex-line-pack: distribute;
+  font-size: 1.2rem;
+  height: 2rem;
+  width: 2rem;
+}
+
+.docs-content .example-tile-icon .icon {
+  margin: auto;
+}
+
+.docs-content .comparison-slider {
+  height: auto;
+  padding-bottom: 56.2222%;
+}
+
+.docs-content .comparison-slider .filter-grayscale {
+  -webkit-filter: grayscale(75%);
+  filter: grayscale(75%);
+}
+
+.docs-content .off-canvas {
+  position: relative;
+}
+
+.docs-content .off-canvas .off-canvas-toggle {
+  left: .4rem;
+  position: absolute;
+  top: .4rem;
+  z-index: 1;
+}
+
+.docs-brand {
+  color: #5755d9;
+  left: 1.5rem;
+  position: fixed;
+  top: .85rem;
+}
+
+.docs-brand .docs-logo {
+  align-items: center;
+  border-radius: .1rem;
+  display: inline-flex;
+  display: -ms-inline-flexbox;
+  -ms-flex-align: center;
+  height: 2rem;
+  padding: .2rem;
+  width: auto;
+}
+
+.docs-brand .docs-logo:focus,
+.docs-brand .docs-logo:hover {
+  text-decoration: none;
+}
+
+.docs-brand .docs-logo img {
+  display: inline;
+  height: auto;
+  width: 1.6rem;
+}
+
+.docs-brand .docs-logo h2 {
+  display: inline;
+  font-size: .8rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  margin-bottom: 0;
+  margin-left: .5rem;
+  margin-right: .5rem;
+}
+
+.docs-footer {
+  color: #acb3c2;
+  padding: .5rem .5rem 1.5rem .5rem;
+}
+
+.docs-footer a {
+  color: #667189;
+}
+
+.btn .feather {
+  height: 1rem;
+  vertical-align: middle;
+}
+
+/* Spectre Homepage style */
+.section-hero {
+  padding: 1rem .5rem;
+}
+
+.section-hero .docs-brand {
+  position: absolute;
+  top: .85rem;
+}
+
+.section-hero .docs-brand h2 {
+  color: #5755d9;
+}
+
+.section-hero .column {
+  padding: .4rem;
+}
+
+.section-updates {
+  padding: 4.5rem .5rem 3.5rem .5rem;
+}
+
+.section-updates .card {
+  border: 0;
+  color: #727e96;
+  margin-bottom: 1rem;
+}
+
+.section-features {
+  padding: 4.5rem .5rem;
+}
+
+.section-features .column {
+  padding: .4rem;
+}
+
+.section-footer {
+  color: #acb3c2;
+  padding: 1.8rem .75rem 1rem .75rem;
+  position: relative;
+  z-index: 200;
+}
+
+.section-footer a {
+  color: #667189;
+}
+
+.grid-hero {
+  padding-bottom: 2rem;
+  padding-top: 6rem;
+}
+
+.grid-hero h1 {
+  color: #50596c;
+  font-size: 1.6rem;
+  margin-bottom: 1.5rem;
+}
+
+.grid-hero h2 {
+  color: #5b657a;
+  font-size: .9rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.grid-hero h2 u {
+  border-bottom: .1rem solid currentColor;
+  padding-bottom: .05rem;
+  text-decoration: none;
+}
+
+.grid-hero .card {
+  background: none;
+  border: 0;
+  color: #727e96;
+  padding: .5rem;
+}
+
+.grid-hero .card .card-title {
+  color: #5755d9;
+  font-size: .9rem;
+  margin-bottom: 0;
+}
+
+@media (max-width: 960px) {
+  .off-canvas .off-canvas-toggle {
+    z-index: 300;
+  }
+  .docs-sidebar .docs-brand {
+    margin: .85rem 1.5rem;
+    padding: 0;
+    position: static;
+  }
+  .docs-sidebar .docs-nav {
+    margin-top: 1rem;
+    position: static;
+  }
+  .docs-sidebar .menu .menu-item > a {
+    padding: .3rem .4rem;
+  }
+  .docs-navbar {
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+    background: rgba(248, 249, 250, .65);
+    left: 0;
+  }
+  .docs-content.off-canvas-content {
+    min-width: auto;
+    padding: 0 1.5rem;
+    width: 100%;
+  }
+  .docs-content .s-title,
+  .docs-content .s-subtitle {
+    padding-top: 5rem;
+    position: static;
+  }
+  .docs-content .s-title::before,
+  .docs-content .s-subtitle::before {
+    content: none;
+  }
+  .section-hero .s-brand {
+    height: 5rem;
+    padding: 1.5rem .5rem;
+    text-align: center;
+    width: 100%;
+  }
+  .section-hero .s-brand .s-logo {
+    height: auto;
+  }
+  .section-hero .s-brand img {
+    height: 3.2rem;
+    width: 3.2rem;
+  }
+  .section-hero .s-brand h2 {
+    display: none;
+  }
+}
+
+@media (max-width: 600px) {
+  .grid-hero h2 {
+    font-size: .9rem;
+  }
+  .grid-hero .card {
+    padding: 0;
+  }
+  .off-canvas .off-canvas-toggle {
+    left: .5rem;
+  }
+  .docs-navbar .btn {
+    right: 1rem;
+  }
+  .grid-hero .docs-brand {
+    left: 1rem;
+  }
+  .docs-sidebar .docs-brand {
+    margin: .85rem 1rem;
+  }
+  .docs-sidebar .docs-nav {
+    padding: .5rem 1rem;
+  }
+  .docs-content.off-canvas-content {
+    padding: 0 .5rem;
+  }
+  .docs-content .docs-block {
+    padding: .4rem .1rem;
+  }
+  .docs-content .anchor {
+    display: none;
+  }
+}
+
+@media (min-width: 1366px) {
+  .docs-ad.docs-ad-sidebar {
+    bottom: 1rem;
+    position: fixed;
+    right: 1rem;
+  }
+}
\ No newline at end of file