(front end prep for Purchasing Tickets module)

2026-02-26 20:57:38 +00:00 · 2016-11-07 09:56:51 -05:00
parent a3d6a1efcd
commit ced05329c6
53 changed files with 12963 additions and 273 deletions
--- a/resources/assets/less/animations.less
+++ b/resources/assets/less/animations.less
@@ -0,0 +1,4 @@
+@keyframes spin-around {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(359deg); }
+}
--- a/resources/assets/less/app.less
+++ b/resources/assets/less/app.less
@@ -0,0 +1,30 @@
+@import "base";
+@import "colors";
+@import "typography";
+@import "z-index";
+@import "grid";
+@import "flex";
+@import "images";
+
+// Components
+@import "media-object";
+@import "progress";
+@import "forms";
+@import "buttons";
+@import "navbar";
+@import "subnav";
+@import "card";
+@import "icons";
+
+// Misc
+@import "vue";
+
+// Utilities
+@import "backgrounds";
+@import "layout";
+@import "spacing";
+@import "borders";
+@import "utilities";
+@import "responsive-utilities";
+@import "animations";
+
--- a/resources/assets/less/backgrounds.less
+++ b/resources/assets/less/backgrounds.less
@@ -0,0 +1,9 @@
+@bg-light: @color-white;
+@bg-soft: @color-gray-lightest;
+@bg-muted: @color-gray-lighter;
+@bg-dark: @color-black;
+
+.bg-light   { background-color: @bg-light; }
+.bg-soft    { background-color: @bg-soft; }
+.bg-muted   { background-color: @bg-muted; }
+.bg-dark    { background-color: @bg-dark; }
--- a/resources/assets/less/base.less
+++ b/resources/assets/less/base.less
@@ -0,0 +1,39 @@
+@import (less) '../../../node_modules/normalize.css/normalize.css';
+@import (less) '../../../node_modules/suitcss-base/lib/base.css';
+
+@-moz-viewport      { width: device-width; }
+@-ms-viewport       { width: device-width; }
+@-o-viewport        { width: device-width; }
+@-webkit-viewport   { width: device-width; }
+@viewport           { width: device-width; }
+
+html {
+    font-size: 16px;
+
+    // Changes the default tap highlight to be completely transparent in iOS.
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-font-smoothing: antialiased;
+
+    @media (min-width: @screen-sm) {
+      font-size: 16px;
+    }
+}
+
+body {
+  font-family: @font-family-base;
+  font-size: @font-size-base;
+  font-weight: @font-weight-normal;
+  line-height: @line-height;
+  color: @text-dark;
+
+  // By default, `<body>` has no `background-color` so we set one as a best practice.
+  background-color: @color-gray-lightest;
+}
+
+textarea {
+    resize: vertical;
+}
+
+button, [role=button] {
+  cursor: pointer;
+}
--- a/resources/assets/less/borders.less
+++ b/resources/assets/less/borders.less
@@ -0,0 +1,13 @@
+@border-color: @color-gray-lighter;
+@border-radius: 0.25rem;
+
+@border-1: 1px;
+
+.border { border: 1px solid @border-color; }
+
+.border-t { border-top: @border-1 solid @border-color; }
+.border-b { border-bottom: @border-1 solid @border-color; }
+.border-l { border-left: @border-1 solid @border-color; }
+.border-r { border-right: @border-1 solid @border-color; }
+
+.border-rounded { border-radius: @border-radius; }
--- a/resources/assets/less/buttons.less
+++ b/resources/assets/less/buttons.less
@@ -0,0 +1,227 @@
+@button-border-radius: @border-radius;
+@btn-disabled-bg: @color-gray-lighter;
+@btn-disabled-border: @color-gray;
+@btn-disabled-text: @btn-disabled-border;
+
+.btn {
+    display: inline-block;
+    padding: 0.5em 1em;
+    font-weight: @font-weight-bold;
+    line-height: 1.25;
+    border-radius: @button-border-radius;
+
+    &:focus, &:hover {
+        text-decoration: none;
+    }
+
+    &:active, &:focus {
+        .tab-focus;
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.2;
+    }
+}
+
+.btn-block {
+    display: block;
+    width: 100%;
+    text-align: center;
+}
+
+.btn-sm {
+    font-size: @font-size-sm;
+}
+
+.btn-lg {
+    font-size: @font-size-lg;
+}
+
+.btn-xs {
+    // padding: @spacer-1;
+    // padding-top: 0;
+    // padding-bottom: 0;
+    font-size: @font-size-xs;
+}
+
+.btn-wide {
+    padding-left: 2em;
+    padding-right: 2em;
+}
+
+.btn-primary-outline {
+    .button-outline-variant(@color-brand-primary);
+}
+
+.btn-inv-outline {
+    .button-outline-variant(@color-white);
+}
+
+.btn-danger {
+    .button-outline-variant(@color-danger);
+}
+
+.btn-link {
+    font-weight: @font-weight-normal;
+    color: @text-dark;
+    background-color: transparent;
+
+    &:focus, &:hover {
+        color: darken(@text-dark, 15%);
+        text-decoration: underline;
+    }
+}
+
+.btn-pad-lg {
+    padding: @spacer-2 @spacer-4;
+}
+
+.btn-loading {
+    position: relative;
+    color: transparent !important;
+    &:after {
+        position: absolute !important;
+        display: block;
+        height: 1rem;
+        width: 1rem;
+        top: 50%;
+        left: 50%;
+        margin-left: -0.5rem;
+        margin-top: -0.5rem;
+        border: 2px solid @text-dark;
+        border-radius: 0.5rem;
+        border-right-color: transparent;
+        border-top-color: transparent;
+        animation: spin-around 500ms infinite linear;
+        content: "";
+    }
+}
+
+// .button-variant(@color; @background) {
+//     @active-background: darken(desaturate(@background, 0%), 10%);
+
+//     color: @color;
+//     background-color: @background;
+//     background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
+//     border: 1px solid @border-color;
+//     font-weight: @font-weight-bold;
+
+//     &:active, &:hover {
+//         color: @color;
+//         background-color: @active-background;
+//         border-color: @active-background;
+//     }
+
+//     &:focus {
+//         color: @color;
+//     }
+
+//     &:disabled {
+//         background-color: @btn-disabled-bg;
+//         border-color: @btn-disabled-border;
+//         color: @btn-disabled-text;
+
+//         background-color: @color-gray-lighter;
+//         border-color: @color-black;
+//         color: @color-black;
+//     }
+
+//     &.btn-loading:after {
+//         border-left-color: fade(@color, 70%);
+//         border-bottom-color: fade(@color, 70%);
+//     }
+// }
+
+.button-outline-variant(@color) {
+    @inactive-border: lighten(@color, 0%);
+
+    color: @color;
+    background-color: transparent;
+    border: 1px solid @inactive-border;
+    font-weight: @font-weight-normal;
+
+    &:active, &:hover {
+        color: @color;
+        background-color: fade(@color, 10%);
+        border-color: @color;
+    }
+
+    &:focus {
+        color: @color;
+    }
+
+    &:disabled {
+        &:active, &:hover {
+            border-color: @inactive-border;
+        }
+    }
+}
+
+.btn-variant(@text; @background) {
+    @border-color: @background;
+    @bottom-border-color: darken(desaturate(@background, 0%), 8%);
+
+    color: @text;
+    font-weight: 700;
+    background-color: @background;
+    border: 1px solid @border-color;
+    border-bottom: 1px solid @bottom-border-color;
+
+    & when (lightness(@text) >= 50%) {
+        @text-shadow-color: @bottom-border-color;
+        text-shadow: 0px -1px @text-shadow-color;
+    }
+    & when (lightness(@text) < 50%) {
+        text-shadow: 0px 1px hsla(255, 255, 255, 0.4);
+    }
+
+    &:active, &:hover {
+        color: @text;
+
+        background-color: darken(@background, 5%);
+        border: 1px solid darken(@border-color, 5%);
+        border-bottom: 1px solid darken(@bottom-border-color, 5%);
+    }
+
+    // &:focus {
+    //     color: @text;
+    // }
+
+    &:disabled {
+        background-color: @btn-disabled-bg;
+        border-color: @btn-disabled-border;
+        color: @btn-disabled-text;
+
+        background-color: @color-gray-lighter;
+        background-image: none;
+        border-color: @color-black;
+        color: @color-black;
+    }
+
+    &.btn-loading {
+        text-shadow: none;
+        &:after {
+            border-left-color: fade(@text, 70%);
+            border-bottom-color: fade(@text, 70%);
+        }
+        &:disabled {
+            color: @text;
+            background-color: @background;
+            border-color: @border-color;
+            border-bottom-color: @bottom-border-color;
+            opacity: 0.5;
+        }
+    }
+}
+
+.btn-primary {
+    // #36a4e4 dig this color if I go no-gradient
+    // hsl(202, 76%, 55%)
+    .btn-variant(@color-white; @color-brand-primary);
+    .box-shadow;
+}
+
+.btn-secondary {
+    .btn-variant(@text-dark; @color-gray-lighter);
+}
--- a/resources/assets/less/card.less
+++ b/resources/assets/less/card.less
@@ -0,0 +1,12 @@
+@card-border-color: @color-gray-lighter;
+
+.card {
+    background: @color-white;
+    border: 1px solid @card-border-color;
+    border-radius: @border-radius;
+    overflow: hidden; // Prevent things breaking out of border radius
+}
+
+.card-section {
+    padding: @spacer-4 @spacer-5;
+}
--- a/resources/assets/less/colors.less
+++ b/resources/assets/less/colors.less
@@ -0,0 +1,11 @@
+@hue-brand-primary: 202;
+@color-brand-primary: hsl(@hue-brand-primary, 73%, 55%);
+@color-danger: hsv(2, 63%, 85%);
+
+@color-white: #fff;
+@color-gray-lightest: hsv(@hue-brand-primary, 1%, 98%);
+@color-gray-lighter: hsv(@hue-brand-primary, 1%, 92%);
+@color-gray-light: hsv(@hue-brand-primary, 3%, 86%);
+@color-gray: hsv(@hue-brand-primary, 8%, 52%);
+@color-gray-dark: hsv(@hue-brand-primary, 12%, 32%);
+@color-black: hsv(@hue-brand-primary, 5%, 16%);
--- a/resources/assets/less/flex.less
+++ b/resources/assets/less/flex.less
@@ -0,0 +1,40 @@
+.flex { display: flex; }
+.flex-top { align-items: flex-start; }
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.flex-y-center {
+    display: flex;
+    align-items: center;
+}
+
+.flex-y-end {
+    display: flex;
+    align-items: flex-end;
+}
+
+.flex-right {
+    justify-content: flex-end;
+}
+
+.flex-spaced {
+    display: flex;
+    justify-content: space-between;
+}
+
+.flex-around {
+    display: flex;
+    justify-content: space-around;
+}
+
+.flex-fit { flex: 1; }
+.flex-no-shrink { flex-shrink: 0; }
--- a/resources/assets/less/forms.less
+++ b/resources/assets/less/forms.less
@@ -0,0 +1,131 @@
+.form-title {
+    display: block;
+    width: 100%;
+    margin-bottom: @spacer-4;
+    border-bottom: 1px solid @border-color;
+}
+
+.form-group {
+    margin-bottom: @spacer-4;
+}
+
+.form-label {
+    display: block;
+    margin-bottom: @spacer-1;
+    font-size: @font-size-sm;
+    font-weight: @font-weight-medium;
+}
+
+.form-control-file {
+    display: block;
+    max-width: 100%;
+
+    &::-webkit-file-upload-button {
+        .btn;
+        .btn-xs;
+        .btn-secondary;
+        cursor: pointer;
+    }
+}
+
+.form-control {
+    display: block;
+    width: 100%;
+    padding: @spacer-2 @spacer-3;
+    background: @color-white;
+    line-height: 1.25;
+    border: 1px solid @border-color;
+    border-radius: @border-radius;
+
+    &.has-error {
+        border-color: lighten(@color-danger, 25%);
+    }
+
+    select& {
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAABGdBTUEAALGPC/xhBQAAALJJREFUGBm9UCEOwkAQ3L3Cf2pwpKkhoQkej0GRUE/bpSdwbR3BYXlAwwOQmP4Eh7xlh4BFsuJmZzK7N3dMnxJp4xD05ByvRfIBssMh0i1CoJsqP4Hg0KOybDcmnIn44H2+SpJsrKrHNJ0/MDljpr332xpuIDh08H8XF0XTM/O9rnP5Xm4vEEs8sbSuV6VdVTVISEBw6AzBnJk5L7ZhMIwNl7bp+v4hNFHkpuYbAcEx9LNeG4xMYRDZ28cAAAAASUVORK5CYII=) right 8px center no-repeat;
+        -moz-appearance: none;
+        -webkit-appearance: none;
+    }
+
+    [type="date"]& {
+        // Get the date picker to be the same height as a regular form control
+        &::-webkit-datetime-edit-fields-wrapper { padding: 0; }
+        &::-webkit-inner-spin-button { height: 1.25em; }
+    }
+
+    &::placeholder {
+        color: lighten(@color-gray, 20%);
+    }
+
+    [type="color"]& {
+        position: relative;
+
+        // Increased padding values simulate height of regular text content
+        padding-top: 1.125rem;
+        padding-bottom: 1.125rem;
+
+        &::-webkit-color-swatch-wrapper {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            padding: @spacer-2 @spacer-3;
+        }
+        &::-webkit-color-swatch {
+            border: 1px solid rgba(0,0,0,0.2);
+        }
+    }
+}
+
+.form-control-static {
+    display: block;
+    width: 100%;
+    padding-top: @spacer-2;
+    padding-bottom: @spacer-2;
+    line-height: 1.25;
+    border: 1px solid transparent; // To ensure matches regular control height
+}
+
+.help-block {
+    font-size: @font-size-sm;
+    margin-top: @spacer-1;
+}
+
+.form-group.has-error {
+    .form-label, .help-block {
+        color: @color-danger;
+    }
+    .form-control, .input-group {
+        border-color: lighten(@color-danger, 25%);
+    }
+    .form-control-feedback {
+        color: @color-danger;
+    }
+}
+
+.form-control-feedback {
+    margin-top: @spacer-2;
+}
+
+.input-group {
+    display: flex;
+    border: 1px solid @border-color;
+    border-radius: @border-radius;
+    background: @color-white;
+    overflow: hidden;
+
+    .input-group-addon {
+        display: flex;
+        padding-left: @spacer-3;
+        padding-right: @spacer-3;
+        border-right: 1px solid @border-color;
+        align-items: center;
+    }
+
+    .form-control {
+        flex: 1;
+        border: none;
+        border-radius: 0;
+    }
+}
--- a/resources/assets/less/grid.less
+++ b/resources/assets/less/grid.less
--- a/resources/assets/less/icons.less
+++ b/resources/assets/less/icons.less
@@ -0,0 +1,8 @@
+.zondicon {
+    display: inline-block;
+    height: 1.25em;
+    width: 1.25em;
+    fill: currentColor;
+    color: @text-dark;
+    vertical-align: text-bottom; // Trial and error, this is the best option for 20px icon + 16px text
+}
--- a/resources/assets/less/images.less
+++ b/resources/assets/less/images.less
@@ -0,0 +1,7 @@
+img {
+    vertical-align: middle;
+}
+
+.img-fit {
+    max-width: 100%;
+}
--- a/resources/assets/less/layout.less
+++ b/resources/assets/less/layout.less
@@ -0,0 +1,11 @@
+.constrain {
+    max-width: 33rem;
+}
+
+.constrain-lg {
+    max-width: 40rem;
+}
+
+.constrain-sm {
+    max-width: 26rem;
+}
--- a/resources/assets/less/media-object.less
+++ b/resources/assets/less/media-object.less
@@ -0,0 +1,13 @@
+.media-object {
+    display: flex;
+}
+
+.media-left {
+    > .zondicon {
+        vertical-align: sub; // Trial and error bullshit
+    }
+}
+
+.media-body {
+    flex: 1;
+}
--- a/resources/assets/less/navbar.less
+++ b/resources/assets/less/navbar.less
@@ -0,0 +1,11 @@
+.navbar {
+    padding-top: @spacer-4;
+    padding-top: @spacer-4;
+    background-color: @color-black;
+}
+
+.navbar-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
--- a/resources/assets/less/progress.less
+++ b/resources/assets/less/progress.less
@@ -0,0 +1,74 @@
+@progress-bg: @color-gray-lighter;
+@progress-bar-color: #79bc70;
+@progress-border-radius: @border-radius;
+
+.progress {
+  display: block;
+  width: 100%;
+  height: @spacer-2;
+}
+
+.progress[value] {
+  // Set overall background
+  background-color: @progress-bg;
+  // Remove Firefox and Opera border
+  border: 0;
+  // Reset the default appearance
+  appearance: none;
+  // Set overall border radius
+  border-radius: @progress-border-radius;
+}
+
+// Filled-in portion of the bar
+.progress[value]::-ms-fill {
+  background-color: @progress-bar-color;
+  // Remove right-hand border of value bar from IE10+/Edge
+  border: 0;
+}
+.progress[value]::-moz-progress-bar {
+  background-color: @progress-bar-color;
+  border-top-left-radius: @progress-border-radius;
+  border-bottom-left-radius: @progress-border-radius;
+}
+.progress[value]::-webkit-progress-value {
+  background-color: @progress-bar-color;
+  border-top-left-radius: @progress-border-radius;
+  border-bottom-left-radius: @progress-border-radius;
+}
+// Tweaks for full progress bar
+.progress[value="100"]::-moz-progress-bar {
+  border-top-right-radius: @progress-border-radius;
+  border-bottom-right-radius: @progress-border-radius;
+}
+.progress[value="100"]::-webkit-progress-value {
+  border-top-right-radius: @progress-border-radius;
+  border-bottom-right-radius: @progress-border-radius;
+}
+
+// Unfilled portion of the bar
+.progress[value]::-webkit-progress-bar {
+  background-color: @progress-bg;
+  border-radius: @progress-border-radius;
+}
+
+// Absurd-but-syntactically-valid selector to make these styles Firefox-only
+base::-moz-progress-bar,
+.progress[value] {
+  background-color: @progress-bg;
+  border-radius: @progress-border-radius;
+}
+
+.progress-variant (@color) {
+  &[value]::-webkit-progress-value {
+    background-color: @color;
+  }
+
+  &[value]::-moz-progress-bar {
+    background-color: @color;
+  }
+
+  // IE10+, Microsoft Edge
+  &[value]::-ms-fill {
+    background-color: @color;
+  }
+}
--- a/resources/assets/less/responsive-utilities.less
+++ b/resources/assets/less/responsive-utilities.less
@@ -0,0 +1,137 @@
+@screen-sm-min: @screen-sm;
+@screen-md-min: @screen-md;
+@screen-lg-min: @screen-lg;
+@screen-xl-min: @screen-xl;
+
+@screen-xs-max: (@screen-sm - 1);
+@screen-sm-max: (@screen-md - 1);
+@screen-md-max: (@screen-lg - 1);
+@screen-lg-max: (@screen-xl - 1);
+
+.responsive-invisibility() {
+  display: none !important;
+}
+
+.visible-xs-block,
+.visible-xs-inline,
+.visible-xs-inline-block,
+.visible-sm-block,
+.visible-sm-inline,
+.visible-sm-inline-block,
+.visible-md-block,
+.visible-md-inline,
+.visible-md-inline-block,
+.visible-lg-block,
+.visible-lg-inline,
+.visible-lg-inline-block,
+.visible-xl-block,
+.visible-xl-inline,
+.visible-xl-inline-block {
+  display: none !important;
+}
+
+.visible-xs-block {
+  @media (max-width: @screen-xs-max) {
+    display: block !important;
+  }
+}
+.visible-xs-inline {
+  @media (max-width: @screen-xs-max) {
+    display: inline !important;
+  }
+}
+.visible-xs-inline-block {
+  @media (max-width: @screen-xs-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-sm-block {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    display: block !important;
+  }
+}
+.visible-sm-inline {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    display: inline !important;
+  }
+}
+.visible-sm-inline-block {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-md-block {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    display: block !important;
+  }
+}
+.visible-md-inline {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    display: inline !important;
+  }
+}
+.visible-md-inline-block {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-lg-block {
+  @media (min-width: @screen-lg-min) {
+    display: block !important;
+  }
+}
+.visible-lg-inline {
+  @media (min-width: @screen-lg-min) {
+    display: inline !important;
+  }
+}
+.visible-lg-inline-block {
+  @media (min-width: @screen-lg-min) {
+    display: inline-block !important;
+  }
+}
+
+.visible-xl-block {
+  @media (min-width: @screen-xl-min) {
+    display: block !important;
+  }
+}
+.visible-xl-inline {
+  @media (min-width: @screen-xl-min) {
+    display: inline !important;
+  }
+}
+.visible-xl-inline-block {
+  @media (min-width: @screen-xl-min) {
+    display: inline-block !important;
+  }
+}
+
+.hidden-xs {
+  @media (max-width: @screen-xs-max) {
+    .responsive-invisibility();
+  }
+}
+.hidden-sm {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    .responsive-invisibility();
+  }
+}
+.hidden-md {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    .responsive-invisibility();
+  }
+}
+.hidden-lg {
+  @media (min-width: @screen-lg-min) {
+    .responsive-invisibility();
+  }
+}
+.hidden-xl {
+  @media (min-width: @screen-xl-min) {
+    .responsive-invisibility();
+  }
+}
--- a/resources/assets/less/spacing.less
+++ b/resources/assets/less/spacing.less
@@ -0,0 +1,88 @@
+@spacer-0: 0;
+@spacer-1: 0.25rem;
+@spacer-2: 0.5rem;
+@spacer-3: 0.75rem;
+@spacer-4: 1rem;
+@spacer-5: 1.5rem;
+@spacer-6: 2rem;
+@spacer-7: 3rem;
+@spacer-8: 4rem;
+@spacer-9: 6rem;
+
+@spacers: 0, 1, 2, 3, 4, 5, 6, 7, 8;
+
+// Margin
+.generate-margin-utilities(@screen; @i: 1) when (@i <= length(@spacers)) {
+
+    @n: extract(@spacers, @i);
+
+    .m-@{screen}-t-@{n} { margin-top: ~"@{spacer-@{n}}"; }
+    .m-@{screen}-r-@{n} { margin-right: ~"@{spacer-@{n}}"; }
+    .m-@{screen}-b-@{n} { margin-bottom: ~"@{spacer-@{n}}"; }
+    .m-@{screen}-l-@{n} { margin-left: ~"@{spacer-@{n}}"; }
+    .m-@{screen}-y-@{n} {
+        margin-top: ~"@{spacer-@{n}}";
+        margin-bottom: ~"@{spacer-@{n}}";
+    }
+    .m-@{screen}-x-@{n} {
+        margin-right: ~"@{spacer-@{n}}";
+        margin-left: ~"@{spacer-@{n}}";
+    }
+    .m-@{screen}-@{n} {
+        margin-top: ~"@{spacer-@{n}}";
+        margin-bottom: ~"@{spacer-@{n}}";
+        margin-right: ~"@{spacer-@{n}}";
+        margin-left: ~"@{spacer-@{n}}";
+    }
+
+    .generate-margin-utilities(@screen; (@i + 1));
+}
+
+.generate-margin-utilities(xs);
+
+@media (min-width: @screen-sm) { .generate-margin-utilities(sm); }
+@media (min-width: @screen-md) { .generate-margin-utilities(md); }
+@media (min-width: @screen-lg) { .generate-margin-utilities(lg); }
+@media (min-width: @screen-xl) { .generate-margin-utilities(xl); }
+
+// Horizontal centering helpers
+.m-xs-auto { margin-left: auto; margin-right: auto; }
+@media (min-width: @screen-sm) { .m-sm-auto { margin-left: auto; margin-right: auto; } }
+@media (min-width: @screen-md) { .m-md-auto { margin-left: auto; margin-right: auto; } }
+@media (min-width: @screen-lg) { .m-lg-auto { margin-left: auto; margin-right: auto; } }
+@media (min-width: @screen-xl) { .m-xl-auto { margin-left: auto; margin-right: auto; } }
+
+
+// Padding
+.generate-padding-utilities(@screen; @i: 1) when (@i <= length(@spacers)) {
+
+    @n: extract(@spacers, @i);
+
+    .p-@{screen}-t-@{n} { padding-top: ~"@{spacer-@{n}}"; }
+    .p-@{screen}-r-@{n} { padding-right: ~"@{spacer-@{n}}"; }
+    .p-@{screen}-b-@{n} { padding-bottom: ~"@{spacer-@{n}}"; }
+    .p-@{screen}-l-@{n} { padding-left: ~"@{spacer-@{n}}"; }
+    .p-@{screen}-y-@{n} {
+        padding-top: ~"@{spacer-@{n}}";
+        padding-bottom: ~"@{spacer-@{n}}";
+    }
+    .p-@{screen}-x-@{n} {
+        padding-right: ~"@{spacer-@{n}}";
+        padding-left: ~"@{spacer-@{n}}";
+    }
+    .p-@{screen}-@{n} {
+        padding-top: ~"@{spacer-@{n}}";
+        padding-bottom: ~"@{spacer-@{n}}";
+        padding-right: ~"@{spacer-@{n}}";
+        padding-left: ~"@{spacer-@{n}}";
+    }
+
+    .generate-padding-utilities(@screen; (@i + 1));
+}
+
+.generate-padding-utilities(xs);
+
+@media (min-width: @screen-sm) { .generate-padding-utilities(sm); }
+@media (min-width: @screen-md) { .generate-padding-utilities(md); }
+@media (min-width: @screen-lg) { .generate-padding-utilities(lg); }
+@media (min-width: @screen-xl) { .generate-padding-utilities(xl); }
--- a/resources/assets/less/subnav.less
+++ b/resources/assets/less/subnav.less
@@ -0,0 +1,29 @@
+@subnav-background: @color-white;
+@subnav-bottom-border: @color-gray-lighter;
+@subnav-active-border: @color-brand-primary;
+
+.subnav {
+    background: @subnav-background;
+    border-bottom: 1px solid @subnav-bottom-border;
+}
+
+.subnav-items {
+    display: flex;
+    align-items: flex-start;
+}
+
+.subnav-item {
+    padding-top: @spacer-4;
+    padding-bottom: @spacer-3;
+    padding-left: @spacer-2;
+    padding-right: @spacer-2;
+    margin-right: @spacer-6;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &.is-active {
+        border-bottom: @spacer-1 solid @subnav-active-border;
+    }
+}
--- a/resources/assets/less/typography.less
+++ b/resources/assets/less/typography.less
@@ -0,0 +1,2 @@
+@import "typography/base";
+@import "typography/headings";
--- a/resources/assets/less/typography/base.less
+++ b/resources/assets/less/typography/base.less
@@ -0,0 +1,34 @@
+@font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
+@line-height: 1.5;
+
+@font-size-xjumbo: (45rem / 18rem);     // 45px
+@font-size-jumbo: (36rem / 16rem);      // 36px
+@font-size-xxl: (30rem / 16rem);    // 30px
+@font-size-xl: (24rem / 16rem);     // 24px
+@font-size-lg: (20rem / 16rem);      // 20px
+@font-size-base: 1rem;                  // 16px
+@font-size-sm: (14rem / 16rem);      // 14px
+@font-size-xs: (12rem / 16rem);       // 12px
+
+@font-size-h1: @font-size-xxl;
+@font-size-h2: @font-size-xl;
+@font-size-h3: @font-size-lg;
+@font-size-h4: @font-size-base;
+
+@font-weight-light: 300;
+@font-weight-normal: 400;
+@font-weight-medium: 600;
+@font-weight-bold: 700;
+
+@text-light: rgb(255, 255, 255);
+@text-light-soft: fade(@text-light, 90%);
+@text-light-muted: fade(@text-light, 60%);
+@text-dark: hsl(@hue-brand-primary, 20%, 20%);
+@text-dark-soft: fade(@text-dark, 60%);
+@text-dark-muted: fade(@text-dark, 35%);
+@text-brand: hsv(@hue-brand-primary, 100%, 86%);
+
+
+small {
+    font-size: @font-size-sm;
+}
--- a/resources/assets/less/typography/headings.less
+++ b/resources/assets/less/typography/headings.less
@@ -0,0 +1,7 @@
+h1, h2, h3 { font-weight: @font-weight-light; }
+h4 { font-weight: @font-weight-bold; }
+
+h1 { font-size: @font-size-h1; }
+h2 { font-size: @font-size-h2; }
+h3 { font-size: @font-size-h3; }
+h4 { font-size: @font-size-h4; }
--- a/resources/assets/less/typography/utilities.less
+++ b/resources/assets/less/typography/utilities.less
@@ -0,0 +1,41 @@
+.text-xjumbo { font-size: @font-size-xjumbo !important; }
+.text-jumbo { font-size: @font-size-jumbo !important; }
+.text-xxl   { font-size: @font-size-xxl !important; }
+.text-xl    { font-size: @font-size-xl !important; }
+.text-lg    { font-size: @font-size-lg !important; }
+.text-base  { font-size: @font-size-base !important; }
+.text-sm    { font-size: @font-size-sm !important; }
+.text-xs    { font-size: @font-size-xs !important; }
+
+.h1 { font-size: @font-size-h1 !important; }
+.h2 { font-size: @font-size-h2 !important; }
+.h3 { font-size: @font-size-h3 !important; }
+.h4 { font-size: @font-size-h4 !important; }
+
+.text-light         { color: @text-light; }
+.text-light-soft    { color: @text-light-soft; }
+.text-light-muted   { color: @text-light-muted; }
+.text-dark          { color: @text-dark; }
+.text-dark-soft     { color: @text-dark-soft; }
+.text-dark-muted    { color: @text-dark-muted; }
+
+.text-em { font-style: italic; }
+
+.wt-light   { font-weight: @font-weight-light !important; }
+.wt-normal  { font-weight: @font-weight-normal !important; }
+.wt-medium  { font-weight: @font-weight-medium !important; }
+.wt-bold    { font-weight: @font-weight-bold !important; }
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.text-uppercase { text-transform: uppercase; }
+
+.text-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.text-break { white-space: pre-line; }
--- a/resources/assets/less/utilities.less
+++ b/resources/assets/less/utilities.less
@@ -0,0 +1,37 @@
+@import "typography/utilities";
+
+.box-shadow {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.tab-focus {
+  // Default
+  outline: thin dotted;
+  // WebKit
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+.full-height {
+    min-height: 100vh;
+}
+
+.full-width {
+    width: 100%;
+}
+
+.is-clickable {
+    cursor: pointer;
+}
+
+// Useful for hiding things like radio buttons without making them inaccessible
+// to the keyboard when navigating forms.
+.pseudo-hidden {
+    position: absolute;
+    opacity: 0;
+    z-index: -1;
+}
+
+// Display
+.block { display: block; }
+.inline-block { display: inline-block; }
--- a/resources/assets/less/vue.less
+++ b/resources/assets/less/vue.less
@@ -0,0 +1,6 @@
+[v-cloak] .v-cloak-block { display: block; }
+[v-cloak] .v-cloak-inline { display: inline; }
+[v-cloak] .v-cloak-inlineBlock { display: inline-block; }
+[v-cloak] .v-cloak-hidden { display: none; }
+[v-cloak] .v-cloak-invisible { visibility: hidden; }
+.v-cloak-block, .v-cloak-inline, .v-cloak-inlineBlock { display: none; }
--- a/resources/assets/less/z-index.less
+++ b/resources/assets/less/z-index.less
@@ -0,0 +1,10 @@
+@z-index-1:   100;
+@z-index-2:   200;
+@z-index-3:   300;
+@z-index-4:   400;
+@z-index-5:   500;
+@z-index-6:   600;
+@z-index-7:   700;
+@z-index-8:   800;
+@z-index-9:   900;
+@z-index-10: 1000;