just-the-docs 0.1.0

data/_sass/tables.scss

@@ -0,0 +1,77 @@
+//
+// Tables
+//
+// stylelint-disable max-nesting-depth, selector-no-type
+
+table {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: $sp-5;
+  overflow-x: auto;
+  border-collapse: separate;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
+
+  @include mq(sm) {
+    display: table;
+  }
+}
+
+th,
+td {
+  @include fs-3;
+  min-width: 120px;
+  padding-top: $sp-2;
+  padding-right: $sp-3;
+  padding-bottom: $sp-2;
+  padding-left: $sp-3;
+  border-bottom: $border $grey-lt-000;
+  border-left: $border $border-color;
+
+  &:first-of-type {
+    border-left: 0;
+  }
+}
+
+thead,
+tbody:first-child {
+  tr {
+    &:first-of-type {
+      th,
+      td {
+        &:first-of-type {
+          border-top-left-radius: $border-radius;
+        }
+
+        &:last-of-type {
+          border-top-right-radius: $border-radius;
+        }
+      }
+    }
+  }
+}
+
+tbody {
+  tr {
+    &:last-of-type {
+      th,
+      td {
+        border-bottom: 0;
+
+        &:first-of-type {
+          border-bottom-left-radius: $border-radius;
+        }
+
+        &:last-of-type {
+          border-bottom-right-radius: $border-radius;
+        }
+      }
+    }
+  }
+}
+
+thead {
+  th {
+    border-bottom: 1px solid $border-color;
+  }
+}

data/_sass/typography.scss

@@ -0,0 +1,54 @@
+//
+// Typography
+//
+// stylelint-disable primer/selector-no-utility, selector-no-type
+
+h1,
+.text-alpha {
+  @include fs-8;
+  font-weight: 300;
+}
+
+h2,
+.text-beta {
+  @include fs-6;
+}
+
+h3,
+.text-gamma {
+  @include fs-5;
+}
+
+h4,
+.text-delta {
+  @include fs-2;
+  font-weight: 300;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+h5,
+.text-epsilon {
+  @include fs-3;
+  color: $grey-dk-200;
+}
+
+h6,
+.text-zeta {
+  @include fs-2;
+  color: $grey-dk-200;
+}
+
+li {
+  .highlight {
+    margin-top: $sp-2;
+  }
+}
+
+.text-small {
+  @include fs-2;
+}
+
+.text-mono {
+  font-family: $mono-font-family;
+}

data/_sass/utilities/_colors.scss

@@ -0,0 +1,231 @@
+//
+// Utility classes for colors
+//
+
+// Text colors
+
+.text-grey-dk-000 {
+  color: $grey-dk-000 !important;
+}
+
+.text-grey-dk-100 {
+  color: $grey-dk-100 !important;
+}
+
+.text-grey-dk-200 {
+  color: $grey-dk-200 !important;
+}
+
+.text-grey-dk-300 {
+  color: $grey-dk-300 !important;
+}
+
+.text-grey-lt-000 {
+  color: $grey-lt-000 !important;
+}
+
+.text-grey-lt-100 {
+  color: $grey-lt-100 !important;
+}
+
+.text-grey-lt-200 {
+  color: $grey-lt-200 !important;
+}
+
+.text-grey-lt-300 {
+  color: $grey-lt-300 !important;
+}
+
+.text-blue-000 {
+  color: $blue-000 !important;
+}
+
+.text-blue-100 {
+  color: $blue-100 !important;
+}
+
+.text-blue-200 {
+  color: $blue-200 !important;
+}
+
+.text-blue-300 {
+  color: $blue-300 !important;
+}
+
+.text-green-000 {
+  color: $green-000 !important;
+}
+
+.text-green-100 {
+  color: $green-100 !important;
+}
+
+.text-green-200 {
+  color: $green-200 !important;
+}
+
+.text-green-300 {
+  color: $green-300 !important;
+}
+
+.text-purple-000 {
+  color: $purple-000 !important;
+}
+
+.text-purple-100 {
+  color: $purple-100 !important;
+}
+
+.text-purple-200 {
+  color: $purple-200 !important;
+}
+
+.text-purple-300 {
+  color: $purple-300 !important;
+}
+
+.text-yellow-000 {
+  color: $yellow-000 !important;
+}
+
+.text-yellow-100 {
+  color: $yellow-100 !important;
+}
+
+.text-yellow-200 {
+  color: $yellow-200 !important;
+}
+
+.text-yellow-300 {
+  color: $yellow-300 !important;
+}
+
+.text-red-000 {
+  color: $red-000 !important;
+}
+
+.text-red-100 {
+  color: $red-100 !important;
+}
+
+.text-red-200 {
+  color: $red-200 !important;
+}
+
+.text-red-300 {
+  color: $red-300 !important;
+}
+
+// Background colors
+
+.bg-grey-dk-000 {
+  background-color: $grey-dk-000 !important;
+}
+
+.bg-grey-dk-100 {
+  background-color: $grey-dk-100 !important;
+}
+
+.bg-grey-dk-200 {
+  background-color: $grey-dk-200 !important;
+}
+
+.bg-grey-dk-300 {
+  background-color: $grey-dk-300 !important;
+}
+
+.bg-grey-lt-000 {
+  background-color: $grey-lt-000 !important;
+}
+
+.bg-grey-lt-100 {
+  background-color: $grey-lt-100 !important;
+}
+
+.bg-grey-lt-200 {
+  background-color: $grey-lt-200 !important;
+}
+
+.bg-grey-lt-300 {
+  background-color: $grey-lt-300 !important;
+}
+
+.bg-blue-000 {
+  background-color: $blue-000 !important;
+}
+
+.bg-blue-100 {
+  background-color: $blue-100 !important;
+}
+
+.bg-blue-200 {
+  background-color: $blue-200 !important;
+}
+
+.bg-blue-300 {
+  background-color: $blue-300 !important;
+}
+
+.bg-green-000 {
+  background-color: $green-000 !important;
+}
+
+.bg-green-100 {
+  background-color: $green-100 !important;
+}
+
+.bg-green-200 {
+  background-color: $green-200 !important;
+}
+
+.bg-green-300 {
+  background-color: $green-300 !important;
+}
+
+.bg-purple-000 {
+  background-color: $purple-000 !important;
+}
+
+.bg-purple-100 {
+  background-color: $purple-100 !important;
+}
+
+.bg-purple-200 {
+  background-color: $purple-200 !important;
+}
+
+.bg-purple-300 {
+  background-color: $purple-300 !important;
+}
+
+.bg-yellow-000 {
+  background-color: $yellow-000 !important;
+}
+
+.bg-yellow-100 {
+  background-color: $yellow-100 !important;
+}
+
+.bg-yellow-200 {
+  background-color: $yellow-200 !important;
+}
+
+.bg-yellow-300 {
+  background-color: $yellow-300 !important;
+}
+
+.bg-red-000 {
+  background-color: $red-000 !important;
+}
+
+.bg-red-100 {
+  background-color: $red-100 !important;
+}
+
+.bg-red-200 {
+  background-color: $red-200 !important;
+}
+
+.bg-red-300 {
+  background-color: $red-300 !important;
+}

data/_sass/utilities/_layout.scss

@@ -0,0 +1,38 @@
+// stylelint-disable primer/selector-no-utility
+//
+// Utility classes for layout
+//
+
+// Display
+
+.d-block { display: block !important; }
+.d-flex { display: flex !important; }
+.d-inline { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-none { display: none !important; }
+
+@each $media-query in map-keys($media-queries) {
+  @for $i from 1 through length($spacers) {
+    @include mq($media-query) {
+      $size: #{map-get($spacers, sp-#{$i - 1})};
+      $scale: #{$i - 1};
+
+      // .d-sm-block, .d-md-none, .d-lg-inline
+      .d-#{$media-query}-block { display: block !important; }
+      .d-#{$media-query}-flex { display: flex !important; }
+      .d-#{$media-query}-inline { display: inline !important; }
+      .d-#{$media-query}-inline-block { display: inline-block !important; }
+      .d-#{$media-query}-none { display: none !important; }
+
+    }
+  }
+}
+
+// Vertical alignment
+
+.v-align-baseline { vertical-align: baseline !important; }
+.v-align-bottom { vertical-align: bottom !important; }
+.v-align-middle { vertical-align: middle !important; }
+.v-align-text-bottom { vertical-align: text-bottom !important; }
+.v-align-text-top { vertical-align: text-top !important; }
+.v-align-top { vertical-align: top !important; }

data/_sass/utilities/_lists.scss

@@ -0,0 +1,11 @@
+//
+// Utility classes for lists
+//
+
+// stylelint-disable primer/selector-no-utility
+
+.list-style-none {
+  padding: 0 !important;
+  margin: 0 !important;
+  list-style: none !important;
+}

data/_sass/utilities/_spacing.scss

@@ -0,0 +1,121 @@
+//
+// Utility classes for margins and padding
+//
+
+// scss-lint:disable SpaceAfterPropertyName
+// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
+
+// Margin spacer utilities
+
+@for $i from 1 through length($spacers) {
+  $size: #{map-get($spacers, sp-#{$i - 1})};
+  $scale: #{$i - 1};
+
+  // .m-0, .m-1, .m-2...
+  .m-#{$scale}  { margin: #{$size} !important; }
+  .mt-#{$scale} { margin-top: #{$size} !important; }
+  .mr-#{$scale} { margin-right: #{$size} !important; }
+  .mb-#{$scale} { margin-bottom: #{$size} !important; }
+  .ml-#{$scale} { margin-left: #{$size} !important; }
+
+  .mx-#{$scale} {
+    margin-right: #{$size} !important;
+    margin-left: #{$size} !important;
+  }
+
+  .my-#{$scale} {
+    margin-top: #{$size} !important;
+    margin-bottom: #{$size} !important;
+  }
+
+  .mxn-#{$scale} {
+    margin-right: -#{$size} !important;
+    margin-left: -#{$size} !important;
+  }
+}
+
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+@each $media-query in map-keys($media-queries) {
+  @for $i from 1 through length($spacers) {
+    @include mq($media-query) {
+      $size: #{map-get($spacers, sp-#{$i - 1})};
+      $scale: #{$i - 1};
+
+      // .m-sm-0, .m-md-1, .m-lg-2...
+      .m-#{$media-query}-#{$scale}  { margin: #{$size} !important; }
+      .mt-#{$media-query}-#{$scale} { margin-top: #{$size} !important; }
+      .mr-#{$media-query}-#{$scale} { margin-right: #{$size} !important; }
+      .mb-#{$media-query}-#{$scale} { margin-bottom: #{$size} !important; }
+      .ml-#{$media-query}-#{$scale} { margin-left: #{$size} !important; }
+
+      .mx-#{$media-query}-#{$scale} {
+        margin-right: #{$size} !important;
+        margin-left: #{$size} !important;
+      }
+
+      .my-#{$media-query}-#{$scale} {
+        margin-top: #{$size} !important;
+        margin-bottom: #{$size} !important;
+      }
+
+      .mxn-#{$media-query}-#{$scale} {
+        margin-right: -#{$size} !important;
+        margin-left: -#{$size} !important;
+      }
+    }
+  }
+}
+
+// Padding spacer utilities
+
+@for $i from 1 through length($spacers) {
+  $size: #{map-get($spacers, sp-#{$i - 1})};
+  $scale: #{$i - 1};
+
+  // .p-0, .p-1, .p-2...
+  .p-#{$scale}  { padding: #{$size} !important; }
+  .pt-#{$scale} { padding-top: #{$size} !important; }
+  .pr-#{$scale} { padding-right: #{$size} !important; }
+  .pb-#{$scale} { padding-bottom: #{$size} !important; }
+  .pl-#{$scale} { padding-left: #{$size} !important; }
+
+  .px-#{$scale} {
+    padding-right: #{$size} !important;
+    padding-left: #{$size} !important;
+  }
+
+  .py-#{$scale} {
+    padding-top: #{$size} !important;
+    padding-bottom: #{$size} !important;
+  }
+}
+
+@each $media-query in map-keys($media-queries) {
+  @include mq($media-query) {
+    @for $i from 1 through length($spacers) {
+      $size: #{map-get($spacers, sp-#{$i - 1})};
+      $scale: #{$i - 1};
+
+      // .p-sm-0, .p-md-1, .p-lg-2...
+      .p-#{$media-query}-#{$scale}  { padding: #{$size} !important; }
+      .pt-#{$media-query}-#{$scale} { padding-top: #{$size} !important; }
+      .pr-#{$media-query}-#{$scale} { padding-right: #{$size} !important; }
+      .pb-#{$media-query}-#{$scale} { padding-bottom: #{$size} !important; }
+      .pl-#{$media-query}-#{$scale} { padding-left: #{$size} !important; }
+
+      .px-#{$media-query}-#{$scale} {
+        padding-right: #{$size} !important;
+        padding-left: #{$size} !important;
+      }
+
+      .py-#{$media-query}-#{$scale} {
+        padding-top: #{$size} !important;
+        padding-bottom: #{$size} !important;
+      }
+    }
+  }
+}