Initial commit

assets/scss/argon-design-system/docs/clipboard-js.scss

@@ -0,0 +1,40 @@
+// clipboard.js
+//
+// JS-based `Copy` buttons for code snippets.
+
+.ct-clipboard {
+  position: relative;
+  display: none;
+  float: right;
+
+  + .highlight {
+    margin-top: 0;
+  }
+}
+
+.btn-clipboard {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10;
+  display: block;
+  padding: .25rem .5rem;
+  font-size: 75%;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: .25rem;
+  color: #fff;
+  background-color: $ct-primary;
+
+  &:hover {
+    color: #fff;
+    background-color: darken($ct-primary, 10%);
+  }
+}
+
+@media (min-width: 768px) {
+  .ct-clipboard {
+    display: block;
+  }
+}

assets/scss/argon-design-system/docs/component-examples.scss

@@ -0,0 +1,516 @@
+// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type
+
+//
+// Grid examples
+//
+
+.ct-example-row {
+  .row {
+    > .col,
+    > [class^="col-"] {
+      span {
+        display: block;
+        padding: .75rem;
+        color: rgb(57, 63, 73);
+        background-color: rgb(255, 255, 255);
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 16px;
+        font-size: $font-size-sm;
+        border-radius: .25rem;
+        margin: 1rem 0;
+      }
+    }
+  }
+
+  .no-gutters {
+    > .col,
+    > [class^="col-"] {
+      span {
+        border-radius: 0;
+      }
+    }
+  }
+
+  .flex-items-top,
+  .flex-items-middle,
+  .flex-items-bottom {
+    min-height: 6rem;
+    background-color: rgba(255, 0, 0, .1);
+  }
+}
+
+.ct-example-row-flex-cols .row {
+  min-height: 10rem;
+  background-color: rgba(255, 0, 0, .1);
+
+  & + .row {
+    margin-top: 1rem;
+  }
+}
+
+.ct-highlight {
+  background-color: rgba($ct-primary, .15);
+  border: 1px solid rgba($ct-primary, .15);
+}
+
+// Grid mixins
+.example-container {
+  width: 800px;
+  @include make-container();
+}
+
+.example-row {
+  @include make-row();
+}
+
+.example-content-main {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(8);
+  }
+}
+
+.example-content-secondary {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(4);
+  }
+}
+
+
+//
+// Container illustrations
+//
+
+.ct-example-container {
+  min-width: 16rem;
+  max-width: 25rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.ct-example-container-header {
+  height: 3rem;
+  margin-bottom: .5rem;
+  background-color: lighten($blue, 50%);
+  border-radius: .25rem;
+}
+
+.ct-example-container-sidebar {
+  float: right;
+  width: 4rem;
+  height: 8rem;
+  background-color: lighten($blue, 25%);
+  border-radius: .25rem;
+}
+
+.ct-example-container-body {
+  height: 8rem;
+  margin-right: 4.5rem;
+  background-color: lighten($ct-primary, 25%);
+  border-radius: .25rem;
+}
+
+.ct-example-container-fluid {
+  max-width: none;
+}
+
+
+//
+// Docs examples
+//
+
+.ct-example {
+  position: relative;
+  margin: 1rem (-$grid-gutter-width / 2) 0;
+  @include clearfix();
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  + .highlight,
+  + .clipboard + .highlight {
+    margin-top: 0;
+  }
+
+  + p {
+    margin-top: 2rem;
+  }
+
+  .pos-f-t {
+    position: relative;
+    margin: -1rem;
+
+    @include media-breakpoint-up(sm) {
+      margin: -1.5rem;
+    }
+  }
+
+  .custom-file-input:lang(es) ~ .custom-file-label::after {
+    content: "Elegir";
+  }
+
+  > .form-control {
+    + .form-control {
+      margin-top: .5rem;
+    }
+  }
+
+  > .nav + .nav,
+  > .alert + .alert,
+  > .navbar + .navbar,
+  > .progress + .progress,
+  > .progress + .btn,
+  .badge,
+  .btn {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+  }
+
+  .btn-group {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+    .btn {
+      margin: 0;
+    }
+  }
+
+  .alert {
+    margin: 0;
+
+    + .alert {
+      margin-top: 1.25rem;
+    }
+  }
+
+  .badge {
+    margin-right: .5rem;
+  }
+
+  > .dropdown-menu:first-child {
+    position: static;
+    display: block;
+  }
+
+  > .form-group:last-child {
+    margin-bottom: 0;
+  }
+
+  > .close {
+    float: none;
+  }
+}
+
+// Typography
+.ct-example-type {
+  .table {
+    .type-info {
+      color: #999;
+      vertical-align: middle;
+    }
+    td {
+      padding: 1rem 0;
+      border-color: #eee;
+    }
+    tr:first-child td {
+      border-top: 0;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+// Contextual background colors
+.ct-example-bg-classes p {
+  padding: 1rem;
+}
+
+// Images
+.ct-example > img {
+  + img {
+    margin-left: .5rem;
+  }
+}
+
+// Buttons
+.ct-example {
+  > .btn-group {
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+  }
+  > .btn-toolbar + .btn-toolbar {
+    margin-top: .5rem;
+  }
+}
+
+// Forms
+.ct-example-control-sizing select,
+.ct-example-control-sizing input[type="text"] + input[type="text"] {
+  margin-top: .5rem;
+}
+.ct-example-form .input-group {
+  margin-bottom: .5rem;
+}
+.ct-example > textarea.form-control {
+  resize: vertical;
+}
+
+// List groups
+.ct-example > .list-group {
+  max-width: 400px;
+}
+
+// Navbars
+.ct-example {
+  .fixed-top,
+  .sticky-top {
+    position: static;
+    margin: -1rem -1rem 1rem;
+  }
+  .fixed-bottom {
+    position: static;
+    margin: 1rem -1rem -1rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    .fixed-top,
+    .sticky-top {
+      margin: -1.5rem -1.5rem 1rem;
+    }
+    .fixed-bottom {
+      margin: 1rem -1.5rem -1.5rem;
+    }
+  }
+}
+
+// Pagination
+.ct-example .pagination {
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+}
+
+// Example modals
+.modal {
+  z-index: 1072;
+
+  .tooltip,
+  .popover {
+    z-index: 1073;
+  }
+}
+
+.modal-backdrop {
+  z-index: 1071;
+}
+
+.ct-example-modal {
+  background-color: #fafafa;
+
+  .modal {
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    z-index: 1;
+    display: block;
+  }
+
+  .modal-dialog {
+    left: auto;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+// Example tabbable tabs
+.ct-example-tabs .nav-tabs {
+  margin-bottom: 1rem;
+}
+
+// Popovers
+.ct-example-popover-static {
+  padding-bottom: 1.5rem;
+  background-color: #f9f9f9;
+
+  .popover {
+    position: relative;
+    display: block;
+    float: left;
+    width: 260px;
+    margin: 1.25rem;
+  }
+}
+
+// Tooltips
+.tooltip-demo a {
+  white-space: nowrap;
+}
+
+.ct-example-tooltip-static .tooltip {
+  position: relative;
+  display: inline-block;
+  margin: 10px 20px;
+  opacity: 1;
+}
+
+// Scrollspy demo on fixed height div
+.scrollspy-example {
+  position: relative;
+  height: 200px;
+  margin-top: .5rem;
+  overflow: auto;
+}
+
+.scrollspy-example-2 {
+  position: relative;
+  height: 350px;
+  overflow: auto;
+}
+
+.ct-example-border-utils {
+  [class^="border"] {
+    display: inline-block;
+    width: 5rem;
+    height: 5rem;
+    margin: .25rem;
+    background-color: #f5f5f5;
+  }
+}
+
+.ct-example-border-utils-0 {
+  [class^="border"] {
+    border: 1px solid $border-color;
+  }
+}
+
+//
+// Code snippets
+//
+
+.highlight {
+  padding: 0;
+  margin-top: 1rem;
+  //margin-bottom: 3rem;
+  //background-color: $gray-100;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  @include media-breakpoint-up(sm) {
+    padding: 0;
+  }
+}
+
+.ct-content .highlight {
+  margin-right: (-$grid-gutter-width / 2);
+  margin-left: (-$grid-gutter-width / 2);
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+//
+// Component-Code tabs
+//
+
+.ct-example {
+  margin-bottom: 2rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid $gray-200;
+
+  .tab-content {
+    .tab-example-result {
+        background-color: #f5f7f9;
+        border: 1px solid #e6ecf1;
+        padding: 1.25rem;
+        border-radius: .25rem;
+    }
+  }
+
+  .nav-tabs-code {
+    margin-bottom: .375rem;
+
+    .nav-link {
+      font-size: .875rem;
+
+      &:active,
+      &.active {
+        color: $ct-primary;
+      }
+    }
+  }
+}
+
+// Icon examples
+.icon-examples {
+  margin-top: 1rem;
+}
+.btn-icon-clipboard {
+  margin: 0px;
+  padding: 24px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.25;
+  color: rgb(57, 63, 73);
+  background-color: rgb(248, 249, 250);
+  border-radius: 4px;
+  border: 0px none;
+  text-align: left;
+  font-family: inherit;
+  display: inline-block;
+  vertical-align: middle;
+  text-decoration: none;
+  -moz-appearance: none;
+  cursor: pointer;
+  width: 100%;
+  margin: .5rem 0;
+
+  &:hover {
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 16px;
+  }
+
+  > div {
+    align-items: center;
+    display: flex;
+  }
+
+  i {
+    box-sizing: content-box;
+    color: rgb(57, 63, 73);
+    vertical-align: middle;
+    font-size: 1.5rem;
+  }
+
+  span {
+    display: inline-block;
+    font-size: .875rem;
+    line-height: 1.5;
+    color: rgb(57, 63, 73);
+    margin-left: 16px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+  }
+}

assets/scss/argon-design-system/docs/content.scss

@@ -0,0 +1,374 @@
+.docs {
+    background: #FFF;
+
+    h6 {
+        font-size: 1rem;
+        font-weight: $font-weight-bold;
+    }
+}
+
+.ct-content {
+    order: 1;
+
+    >h2[id],
+    >h3[id],
+    >h4[id] {
+        pointer-events: none;
+
+        >div,
+        >a {
+            pointer-events: auto;
+        }
+
+        &::before {
+            display: block;
+            height: 6rem;
+            margin-top: -6rem;
+            visibility: hidden;
+            content: "";
+        }
+    }
+
+    >table {
+        width: 100%;
+        max-width: 100%;
+        margin-bottom: 1rem;
+
+        @include media-breakpoint-down(md) {
+            display: block;
+            overflow-x: auto;
+            -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+            &.table-bordered {
+                border: 0;
+            }
+        } // Cells
+        >thead,
+        >tbody,
+        >tfoot {
+            >tr {
+                >th,
+                >td {
+                    padding: $table-cell-padding;
+                    vertical-align: top;
+                    border: 1px solid $table-border-color;
+
+                    >p:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        } // Prevent breaking of code (e.g., Grunt tasks list)
+        td:first-child>code {
+            white-space: nowrap;
+        }
+    }
+}
+
+//
+// Docs sections
+//
+.ct-content {
+    >h2:not(:first-child) {
+        margin-top: 3rem;
+        font-size: 1.5rem;
+        font-weight: $font-weight-bold;
+    }
+
+    >h3 {
+        margin-top: 2.5rem;
+        font-size: 1.25rem;
+        font-weight: $font-weight-bold;
+    }
+
+    >ul li,
+    >ol li {
+        margin-bottom: .25rem;
+    }
+
+    @include media-breakpoint-up(lg) {
+        >ul,
+        >ol,
+        >p {
+            max-width: 80%;
+        }
+    }
+}
+
+.ct-page-title {
+    padding-left: 1.25rem;
+    border-left: 2px solid $ct-primary;
+    margin-bottom: 1.5rem;
+}
+
+.ct-title {
+    margin-top: 1rem;
+    margin-bottom: .5rem;
+    font-weight: 300;
+
+    @include media-breakpoint-up(sm) {
+        font-size: 1.5rem;
+        font-weight: $font-weight-bold;
+    }
+}
+
+.ct-lead {
+    color: rgb(59, 69, 78);
+    font-weight: 500;
+
+    @include media-breakpoint-up(sm) {
+        max-width: 80%;
+        margin-bottom: 1rem;
+        font-size: .875rem;
+    }
+}
+
+.ct-text-purple {
+    color: $ct-primary;
+}
+
+.ct-text-purple-bright {
+    color: $ct-primary-bright;
+}
+
+// Docs code example tabs
+.ct-tabs-example {
+    .nav-link i {
+        margin-right: 5px;
+    }
+}
+
+// Color swatches
+.color-swatch {
+    margin: 1rem 0;
+    border-radius: .25rem;
+    background-color: #F4F5F7;
+}
+
+.color-swatch:after {
+    content: " ";
+    display: table;
+    clear: both;
+}
+
+.color-swatch-header {
+    position: relative;
+    height: 0;
+    padding-bottom: 50%;
+    border-radius: .25rem .25rem 0 0;
+    border: 1px solid transparent;
+}
+
+.color-swatch-header.is-light {
+    border-color: #C1C7D0;
+}
+
+.color-swatch-header .pass-fail {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+}
+
+.color-swatch-header .pass-fail-item-wrap {
+    position: relative;
+    float: left;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.color-swatch-header .pass-fail-item-group {
+    display: inline-block;
+    padding: 0 5px;
+}
+
+.color-swatch-header .pass-fail-item {
+    float: left;
+    display: inline-block;
+    text-align: center;
+    padding: 2px;
+}
+
+.color-swatch-header .pass-fail-item.white .example {
+    color: #fff;
+}
+
+.color-swatch-header .pass-fail-item.small .example {
+    font-size: 10px;
+}
+
+.color-swatch-header .pass-fail-item .lozenge {
+    font-size: 11px;
+    text-transform: uppercase;
+    font-weight: 600;
+    background: #000;
+    color: #fff;
+    padding: 2px 4px;
+    line-height: 10px;
+    border-radius: 4px;
+    letter-spacing: 0.05em;
+}
+
+.color-swatch-body {
+    position: relative;
+    left: 50%;
+    float: left;
+    padding: 10px 0;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.color-swatch-body .prop-item-wrap {
+    float: left;
+    padding: 0 15px;
+    min-width: 65px;
+}
+
+.color-swatch-body .prop-item {
+    padding: 15px 0;
+}
+
+.color-swatch-body .prop-item .label {
+    font-size: 11px;
+    color: #62748C;
+    text-transform: uppercase;
+    line-height: 16px;
+}
+
+.color-swatch-body .prop-item .value {
+    font-size: 14px;
+}
+
+.table-colors {
+    font-weight: 600;
+    font-size: 16px;
+    width: 100%;
+}
+
+.table-colors td,
+.table-colors:first-child td,
+.table-colors td:first-child,
+.table-colors:first-child td:first-child,
+.table-colors td:last-child,
+.table-colors:first-child td:last-child {
+    background: $ct-primary-light;
+    border-bottom: 1px solid rgba(0, 0, 0, .1);
+    padding: 10px;
+}
+
+.table-colors tr:last-child td,
+.table-colors:first-child tr:last-child td {
+    border-bottom: none;
+}
+
+.table-colors td:nth-child(1),
+.table-colors:first-child td:nth-child(1) {
+    line-height: 40px;
+}
+
+.table-colors .swatch,
+.table-colors:first-child .swatch {
+    float: left;
+    height: 40px;
+    width: 40px;
+    margin-right: 20px;
+    display: inline-block;
+    border-radius: 4px;
+    border: 1px solid transparent;
+}
+
+.table-colors .swatch.is-light,
+.table-colors:first-child .swatch.is-light {
+    border-color: #C1C7D0;
+}
+
+.table-colors .lozenge,
+.table-colors:first-child .lozenge {
+    float: left;
+    margin: 5px 10px 0 0;
+    font-size: 10px;
+    display: inline-block;
+    text-transform: uppercase;
+    font-weight: 600;
+    background: #97A0AF;
+    color: #042A53;
+    padding: 2px 4px;
+    line-height: 10px;
+    border-radius: 4px;
+    letter-spacing: 0.05em;
+}
+
+
+
+#tags-component.tab-pane {
+  .choices__inner {
+    height: 60px;
+  }
+}
+
+.highlight pre {
+  overflow: auto;
+  margin: 0;
+  padding: 1.25rem;
+  font-family: Consolas,Menlo,Monaco,'Andale Mono WT','Andale Mono','Lucida Console','Lucida Sans Typewriter','DejaVu Sans Mono','Bitstream Vera Sans Mono','Liberation Mono','Nimbus Mono L','Courier New',Courier,monospace;
+  font-size: 14px;
+  line-height: 1.375;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  hyphens: none;
+  color: #5e6687;
+  border-radius: .25rem;
+  background: #f5f7ff;
+  direction: ltr;
+  -ms-hyphens: none;
+
+  code {
+    font-size: 87.5%;
+    word-break: break-word;
+    color: #5e6687;
+  }
+
+  pre code {
+    font-size: inherit;
+    word-break: normal;
+    color: inherit;
+  }
+  code, kbd, pre, samp {
+    font-family: SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
+    font-size: 1em;
+  }
+  .nt {
+    color: #3d8fd1;
+  }
+  .na {
+    color: #c76b29;
+  }
+  .s,
+  .token.control,
+  .token.directive,
+  .token.keyword,
+  .token.unit {
+    color: #ac9739;
+  }
+  .token.punctuation {
+    color: #5e6687;
+  }
+
+}
+.btn-clipboard {
+  top: 3.5rem;
+}
+
+.offline-doc .page-header{
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

assets/scss/argon-design-system/docs/footer.scss

@@ -0,0 +1,39 @@
+//
+// Footer
+//
+.ct-footer {
+    font-size: 85%;
+    text-align: center;
+    background-color: #f7f7f7;
+
+    a {
+        font-weight: 500;
+        color: $gray-700;
+
+        &:hover,
+        &:focus {
+            color: $link-color;
+        }
+    }
+
+    p {
+        margin-bottom: 0;
+    }
+
+    @include media-breakpoint-up(sm) {
+        text-align: left;
+    }
+}
+
+.ct-footer-links {
+    padding-left: 0;
+    margin-bottom: 1rem;
+
+    li {
+        display: inline-block;
+
+        +li {
+            margin-left: 1rem;
+        }
+    }
+}

assets/scss/argon-design-system/docs/nav.scss

@@ -0,0 +1,110 @@
+//
+// Main navbar
+//
+.ct-navbar {
+    background-color: $ct-primary;
+    box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    
+    @include media-breakpoint-down(md) {
+        padding-right: .5rem;
+        padding-left: .5rem;
+
+        .navbar-nav-scroll {
+            max-width: 100%;
+            height: 2.5rem;
+            margin-top: .25rem;
+            overflow: hidden;
+            font-size: .875rem;
+
+            .navbar-nav {
+                padding-bottom: 2rem;
+                overflow-x: auto;
+                white-space: nowrap;
+                -webkit-overflow-scrolling: touch;
+            }
+        }
+    }
+
+    @include media-breakpoint-up(md) {
+        @supports (position: sticky) {
+            position: sticky;
+            top: 0;
+            z-index: 1071; // over everything in bootstrap
+        }
+    }
+
+    .navbar-nav {
+        .nav-link {
+            padding-right: .5rem;
+            padding-left: .5rem;
+            color: $ct-primary-light !important;
+
+            &.active,
+            &:hover {
+                color: #fff !important;
+                background-color: transparent !important;
+            }
+
+            &.active {
+                font-weight: 500;
+            }
+        }
+    }
+
+    .navbar-nav-svg {
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+        vertical-align: text-top;
+    }
+
+    .dropdown-menu {
+        font-size: .875rem;
+    }
+
+    .dropdown-item.active {
+        font-weight: 500;
+        color: $gray-900;
+        background-color: transparent;
+        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: .4rem .87rem;
+        background-size: .75rem .75rem;
+        padding-left: 25px;
+    }
+}
+
+// Github corner
+.github-corner {
+    position: fixed;
+    right: 0;
+    z-index: 1080;
+
+    &:hover {
+        .octo-arm {
+            animation: octocat-wave 560ms ease-in-out
+        }
+    }
+
+    svg {
+        fill: $white;
+        color: $ct-primary;
+    }
+}
+
+@keyframes octocat-wave {
+    0%,
+    100% {
+        transform: rotate(0)
+    }
+    20%,
+    60% {
+        transform: rotate(-25deg)
+    }
+    40%,
+    80% {
+        transform: rotate(10deg)
+    }
+}

assets/scss/argon-design-system/docs/prism.scss

@@ -0,0 +1,176 @@
+code[class*="language-"],
+pre[class*="language-"] {
+    font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+    font-size: 14px;
+    line-height: 1.375;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    background: #f5f7ff;
+    color: #5e6687;
+    border-radius: .25rem;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+    text-shadow: none;
+    background: #dfe2f1;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+    text-shadow: none;
+    background: #dfe2f1;
+}
+
+
+/* Code blocks */
+
+pre[class*="language-"] {
+    padding: 1.25rem;
+    margin: 0;
+    overflow: auto;
+}
+
+
+/* Inline code */
+
+:not(pre)>code[class*="language-"] {
+    padding: .1em;
+    border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #898ea4;
+}
+
+.token.punctuation {
+    color: #5e6687;
+}
+
+.token.namespace {
+    opacity: .7;
+}
+
+.token.operator,
+.token.boolean,
+.token.number {
+    color: #c76b29;
+}
+
+.token.property {
+    color: #c08b30;
+}
+
+.token.tag {
+    color: #3d8fd1;
+}
+
+.token.string {
+    color: #22a2c9;
+}
+
+.token.selector {
+    color: #6679cc;
+}
+
+.token.attr-name {
+    color: #c76b29;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    color: #22a2c9;
+}
+
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit {
+    color: #ac9739;
+}
+
+.token.statement,
+.token.regex,
+.token.atrule {
+    color: #22a2c9;
+}
+
+.token.placeholder,
+.token.variable {
+    color: #3d8fd1;
+}
+
+.token.deleted {
+    text-decoration: line-through;
+}
+
+.token.inserted {
+    border-bottom: 1px dotted #202746;
+    text-decoration: none;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.important {
+    color: #c94922;
+}
+
+.token.entity {
+    cursor: help;
+}
+
+pre>code.highlight {
+    outline: 0.4em solid #c94922;
+    outline-offset: .4em;
+}
+
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+
+.line-numbers .line-numbers-rows {
+    border-right-color: #dfe2f1;
+}
+
+.line-numbers-rows>span:before {
+    color: #979db4;
+}
+
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+
+.line-highlight {
+    background: rgba(107, 115, 148, 0.2);
+    background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+    background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+}

assets/scss/argon-design-system/docs/sidebar.scss

@@ -0,0 +1,213 @@
+// stylelint-disable declaration-no-important
+//
+// Right side table of contents
+//
+.ct-toc {
+    @supports (position: sticky) {
+        position: sticky;
+        top: 4rem;
+        height: calc(100vh - 4rem);
+        overflow-y: auto;
+    }
+    order: 2;
+    padding-top: 2rem;
+    padding-bottom: 1.5rem;
+    font-size: .875rem;
+}
+
+.section-nav {
+    padding-left: 0;
+    border-left: 1px solid #eee;
+
+    ul {
+        padding-left: 1rem;
+
+        ul {
+            display: none;
+        }
+    }
+}
+
+.toc-entry {
+    display: block;
+    font-size: 1rem;
+
+    a {
+        display: block;
+        padding: .125rem 1.5rem;
+        color: #99979c;
+        font-size: 90%;
+
+        &:hover {
+            color: $blue;
+            text-decoration: none;
+        }
+    }
+}
+
+//
+// Left side navigation
+//
+.ct-sidebar {
+    order: 0; // background-color: #f5f2f9;
+    border-bottom: 1px solid $ct-sidebar-border-color;
+    background-color: $ct-sidebar-bg;
+
+    @include media-breakpoint-up(md) {
+        @supports (position: sticky) {
+            position: sticky;
+            top: 4rem;
+            z-index: 1000;
+            height: calc(100vh - 4rem);
+        }
+        border-right: 1px solid $ct-sidebar-border-color;
+    }
+
+    @include media-breakpoint-up(xl) {
+        flex: 0 1 320px;
+    }
+}
+
+.ct-links {
+    padding-top: 2rem;
+    padding-bottom: 1rem;
+    margin-right: -15px;
+    margin-left: -15px;
+
+    @include media-breakpoint-up(md) {
+        @supports (position: sticky) {
+            max-height: calc(100vh - 5rem);
+            overflow-y: auto;
+        }
+    } // Override collapse behaviors
+    @include media-breakpoint-up(md) {
+        display: block !important;
+    }
+}
+
+.ct-search {
+    position: relative; // To contain the Algolia search
+    padding: 1rem 15px;
+    margin-right: -15px;
+    margin-left: -15px;
+    border-bottom: 1px solid rgba(0, 0, 0, .05);
+
+    .form-control:focus {
+        border-color: $ct-primary-bright;
+        box-shadow: 0 0 0 3px rgba($ct-primary-bright, .25);
+    }
+}
+
+.ct-search-docs-toggle {
+    line-height: 1;
+    color: $gray-900;
+}
+
+.ct-sidenav {
+    display: none;
+}
+
+.ct-toc-link {
+    display: block;
+    padding: .25rem 1.5rem;
+    font-weight: 600;
+    font-size: .875rem;
+    color: #0d2b3e;
+
+    &:hover {
+        color: rgba(0, 0, 0, .85);
+        text-decoration: none;
+    }
+}
+
+.ct-toc-item {
+    &.active {
+        margin-bottom: 1rem;
+
+        &:not(:first-child) {
+            margin-top: 1rem;
+        }
+
+        >.ct-toc-link {
+            color: rgba(0, 0, 0, .85);
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+
+        >.ct-sidenav {
+            display: block;
+        }
+    }
+}
+
+// All levels of nav
+.ct-sidebar .nav>li>a {
+    display: block;
+    padding: .25rem 1.5rem;
+    font-size: 84%;
+    color: #4c555a;
+}
+
+.ct-sidebar .nav>li>a:hover {
+    color: rgba(0, 0, 0, .85);
+    text-decoration: none;
+    background-color: transparent;
+}
+
+.ct-sidebar .nav>.active>a {
+    font-weight: 500;
+    color: #0099e5;
+    background-color: transparent;
+    padding-left: 2rem;
+    position: relative;
+
+    &:before {
+        content: '';
+        position: absolute;
+        height: 16px;
+        width: 2px;
+        background-color: #0099e5;
+        top: 50%;
+        left: 1.5rem;
+        transform: translateY(-50%);
+    }
+}
+
+.ct-sidebar .nav>.active:hover>a {
+    color: #0099e5
+}
+
+
+.scrollbar-inner {
+    height: 100%;
+
+    &:not(:hover) .scroll-element {
+        opacity: 0;
+    }
+
+    .scroll-element {
+        transition: opacity 300ms;
+        margin-right: 2px;
+
+        .scroll-bar,
+        .scroll-element_track {
+            transition: background-color 300ms;
+        }
+
+        .scroll-element_track {
+            background-color: transparent;
+        }
+    }
+
+    .scroll-element.scroll-y {
+        width: 3px;
+        right: 0;
+    }
+
+    .scroll-element.scroll-x {
+        height: 3px;
+        bottom: 0;
+    }
+}

assets/scss/argon-design-system/docs/variables.scss

@@ -0,0 +1,13 @@
+// Local docs variables
+$ct-primary:        theme-color("primary") !default;
+$ct-primary-bright: lighten(saturate($ct-primary, 5%), 15%) !default;
+$ct-primary-light:  rgba(255, 255, 255, .9) !default;
+$ct-dark:          	#2a2730 !default;
+$ct-download:      	#ffe484 !default;
+$ct-info:          	#5bc0de !default;
+$ct-warning:       	#f0ad4e !default;
+$ct-danger:        	#d9534f !default;
+
+$ct-sidebar-bg:	#f5f7f9;
+$ct-sidebar-border-color: #e6ecf1;
+