-
\ No newline at end of file
diff --git a/app/styles/app.scss b/app/styles/app.scss
index e50418d251..85676ce3f9 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -181,7 +181,8 @@ $icon-font-location: '/fonts/'; // overrides the default location for flanders-i
@import 'custom-application/loader';
// Components (from npm package)
-@import "node_modules/@kanselarij-vlaanderen/au-kaleidos-css/auk-standalone";
+// @import "node_modules/@kanselarij-vlaanderen/au-kaleidos-css/auk-standalone";
+@import "au-kaleidos-css/auk-standalone";
// Styleguide
@import "custom-application/styleguide/_br-prototype-wrapper";
diff --git a/app/styles/au-kaleidos-css/_auk-accordion.scss b/app/styles/au-kaleidos-css/_auk-accordion.scss
new file mode 100644
index 0000000000..73745e557b
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-accordion.scss
@@ -0,0 +1,12 @@
+/* ==========================================================================
+ auk-accordion
+ ========================================================================== */
+
+.auk-accordion__content {
+ display: none;
+ transition: max-height 0.3s cubiauk-bezier(0, 1.05, 0, 1), overflow 0s 0s;
+}
+
+.auk-accordion--is-active .auk-accordion__content {
+ display: block;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-alert-stack.scss b/app/styles/au-kaleidos-css/_auk-alert-stack.scss
new file mode 100644
index 0000000000..792811c585
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-alert-stack.scss
@@ -0,0 +1,18 @@
+/* ==========================================================================
+ auk-alert-stack
+ ---
+ Create a global stack for alerts. You can add an element to the stack.
+ ========================================================================== */
+
+.auk-alert-stack {
+ position: fixed;
+ right: 2.4rem;
+ bottom: 2.4rem;
+ display: flex;
+ flex-direction: column-reverse;
+
+ .auk-alert {
+ min-width: 40rem;
+ box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-alert.scss b/app/styles/au-kaleidos-css/_auk-alert.scss
new file mode 100644
index 0000000000..8da83fb484
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-alert.scss
@@ -0,0 +1,61 @@
+/* ==========================================================================
+ auk-alert
+ ========================================================================== */
+
+.auk-alert {
+ padding: 1.6rem;
+ margin: 0 0 1.6rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.auk-alert {
+ .auk-badge {
+ flex-shrink: 0;
+ }
+}
+
+.auk-alert__body {
+ display: flex;
+ align-items: center;
+ & > *:not(:last-child) {
+ margin-right: 2rem;
+ }
+}
+
+.auk-alert__text {
+ .auk-alert__title {
+ font-weight: 500;
+ margin-bottom: .2rem;
+ }
+ .auk-alert__message {
+ margin-bottom: 0;
+ }
+}
+
+/* Skins
+ ========================================================================== */
+
+.auk-alert--default {
+ background: $au-gray-100;
+ .auk-badge--default {
+ background-color: #FFFFFF;
+ }
+}
+
+.auk-alert--success {
+ background: $au-green-100;
+}
+
+.auk-alert--error {
+ background: $au-red-100;
+}
+
+.auk-alert--warning {
+ background: $au-yellow-100;
+}
+
+.auk-alert--loading {
+ background: $au-gray-100;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-app-title.scss b/app/styles/au-kaleidos-css/_auk-app-title.scss
new file mode 100644
index 0000000000..76e6b05f76
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-app-title.scss
@@ -0,0 +1,8 @@
+/* ==========================================================================
+ auk-app-title
+ ========================================================================== */
+
+.auk-app-title {
+ font-size: 1.7rem;
+ font-weight: 500;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-badge.scss b/app/styles/au-kaleidos-css/_auk-badge.scss
new file mode 100644
index 0000000000..e41e9b560d
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-badge.scss
@@ -0,0 +1,54 @@
+/* ==========================================================================
+ auk-badge
+ (Avatar)
+ ========================================================================== */
+
+.auk-badge {
+ width: 4rem;
+ height: 4rem;
+ border-radius: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 auto;
+}
+
+/* Sizes
+ ========================================================================== */
+
+.auk-badge--small {
+ width: 2rem;
+ height: 2rem;
+ .auk-icon {
+ width: 1.2rem;
+ height: 1.2rem;
+ }
+}
+
+/* Skins
+ ========================================================================== */
+
+.auk-badge--default {
+ background: $au-gray-200;
+ color: #666;
+}
+
+.auk-badge--white {
+ background: #FFF;
+ color: #666;
+}
+
+.auk-badge--success {
+ background: $au-green-500;
+ color: #FFF;
+}
+
+.auk-badge--error {
+ background: #DB3434;
+ color: #FFF;
+}
+
+.auk-badge--warning {
+ background: $au-yellow-400;
+ color: #000;
+}
\ No newline at end of file
diff --git a/app/styles/au-kaleidos-css/_auk-box.scss b/app/styles/au-kaleidos-css/_auk-box.scss
new file mode 100644
index 0000000000..c53725ac3e
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-box.scss
@@ -0,0 +1,8 @@
+/* ==========================================================================
+ auk-box
+ ========================================================================== */
+
+.auk-box {
+ background-color: $au-gray-100;
+ padding: 1.2rem;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-brand.scss b/app/styles/au-kaleidos-css/_auk-brand.scss
new file mode 100644
index 0000000000..bd8f220d9a
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-brand.scss
@@ -0,0 +1,65 @@
+/* ==========================================================================
+ auk-brand
+ ========================================================================== */
+
+.auk-brand {
+ display: inline-flex;
+ align-items: center;
+ text-decoration: none;
+ position: relative;
+ top: 0.3rem;
+}
+
+.auk-brand--link {
+ &:focus {
+ outline: none;
+ }
+}
+
+.auk-brand__logo {
+ position: relative;
+ width: 4.9rem;
+ height: 4.9rem;
+ padding-left: .75rem;
+ overflow: hidden;
+ background-color: $au-yellow-300;
+
+ svg {
+ height: 100%;
+ width: 56%;
+ }
+
+ &::before {
+ content: "";
+ display: block;
+ position: absolute;
+ right: -.1rem;
+ bottom: -.3rem;
+ border-top: 9rem solid #FFF;
+ border-left: 3.07818rem solid
+ transparent;
+ }
+
+ /* Gray border
+ &::after {
+ content: "";
+ top: -.2rem;
+ right: 17%;
+ transform: rotate(-19deg);
+ width: .1rem;
+ height: calc(100% + .4rem);
+ background-color: $au-gray-300;
+ display: block;
+ position: absolute;
+ }*/
+}
+
+.auk-brand__logotype {
+ font-size: 2.1rem;
+ line-height: 1;
+ position: relative;
+ font-weight: 500;
+ color: $au-gray-1000;
+ margin-left: .6rem;
+ transition: color 125ms cubiauk-bezier(.19,1,.22,1);
+}
\ No newline at end of file
diff --git a/app/styles/au-kaleidos-css/_auk-breadcrumb.scss b/app/styles/au-kaleidos-css/_auk-breadcrumb.scss
new file mode 100644
index 0000000000..567b4e1b7b
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-breadcrumb.scss
@@ -0,0 +1,12 @@
+/* ==========================================================================
+ auk-breadcrumb
+ ========================================================================== */
+
+.auk-breadcrumb {
+ color: $au-gray-600;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-button-link.scss b/app/styles/au-kaleidos-css/_auk-button-link.scss
new file mode 100644
index 0000000000..175c83e211
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-button-link.scss
@@ -0,0 +1,78 @@
+/* ==========================================================================
+ auk-button-link
+ ========================================================================== */
+
+.auk-button-link {
+ // Reset default button
+ appearance: none;
+ border: none;
+ background: none;
+ padding: 0;
+
+ // Reset default link
+ text-decoration: none;
+
+ // Build styles
+ font-family: flanders-sans, sans-serif;
+ font-size: 1.6rem;
+ color: $au-blue-700;
+ display: flex;
+ &:hover,
+ &:active {
+ color: $au-blue-600;
+ }
+ &:focus {
+ outline: 0;
+ border-color: $au-yellow-400;
+ box-shadow: inset 0 0 0 0.2rem $au-yellow-400;
+ }
+}
+
+.auk-button-link[disabled] {
+ color: $au-gray-400;
+ text-decoration: none;
+ &:hover,
+ &:active,
+ &:focus {
+ text-decoration: none;
+ }
+}
+
+.auk-button-link--muted {
+ color: $au-gray-600;
+ &:hover,
+ &:active {
+ color: $au-gray-800;
+ }
+}
+
+.auk-button-link--block {
+ display: flex;
+ width: 100%;
+}
+
+.auk-button-link--padded-y {
+ padding: 0.6rem 0;
+}
+
+.auk-button-link--padded {
+ padding: 0.6rem;
+}
+
+.auk-button-link {
+ .auk-icon + .auk-button__label,
+ .auk-button__label + .auk-icon {
+ margin-left: .5rem;
+ }
+}
+
+.auk-button-link--icon {
+ padding: .8rem;
+}
+
+.auk-button-link .auk-icon {
+ width: 1.8rem;
+ height: 1.8rem;
+ position: relative;
+ line-height: 0;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-button-loading.scss b/app/styles/au-kaleidos-css/_auk-button-loading.scss
new file mode 100644
index 0000000000..c75ae01284
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-button-loading.scss
@@ -0,0 +1,20 @@
+/* ==========================================================================
+ auk-button-loading
+ ========================================================================== */
+
+.auk-button-loading {
+ font-family: flanders-sans, sans-serif;
+ background: $au-gray-200;
+ font-size: 1.6rem;
+ border: none;
+ appearance: none;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ vertical-align: top;
+ padding: 1rem 1.2rem;
+}
+
+.auk-button-loading svg path {
+ fill: currentColor;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-button-toolbar.scss b/app/styles/au-kaleidos-css/_auk-button-toolbar.scss
new file mode 100644
index 0000000000..aa72868adf
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-button-toolbar.scss
@@ -0,0 +1,14 @@
+/* ==========================================================================
+ auk-button-toolbar
+ ========================================================================== */
+
+.auk-button-toolbar {
+ display: flex;
+ align-items: center;
+}
+
+.auk-button-toolbar {
+ .auk-button + .auk-button {
+ margin-left: 1rem;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-button.scss b/app/styles/au-kaleidos-css/_auk-button.scss
new file mode 100644
index 0000000000..e421ae18d6
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-button.scss
@@ -0,0 +1,135 @@
+/* ==========================================================================
+ auk-button
+ ========================================================================== */
+
+/* Mixins
+ ========================================================================== */
+
+@mixin button-focus {
+ &:focus {
+ outline: 0;
+ border-color: $au-yellow-400;
+ box-shadow: inset 0 0 0 0.1rem $au-yellow-400;
+ }
+}
+
+/* Component
+ ========================================================================== */
+
+.auk-button {
+ font-family: flanders-sans, sans-serif;
+ font-size: 1.6rem;
+ border: none;
+ appearance: none;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ vertical-align: top;
+ padding: 0.75rem 1.2rem;
+ background-color: transparent;
+ white-space: nowrap;
+ @include button-focus;
+}
+
+.auk-button__label {
+ font-size: 1.6rem;
+}
+
+.auk-button {
+ .auk-icon + .auk-button__label,
+ .auk-button__label + .auk-icon {
+ margin-left: 0.6rem;
+ }
+}
+
+.auk-button--icon {
+ padding: 0.75rem 0.85rem;
+}
+
+.auk-button--block {
+ width: 100%;
+ text-align: center;
+ justify-content: center;
+}
+
+.auk-button--icon img {
+ display: block;
+}
+
+/* Skins
+ ========================================================================== */
+
+.auk-button--primary {
+ background: $au-blue-600;
+ color: #fff;
+ &:hover,
+ &:active {
+ background: $au-blue-700;
+ }
+}
+
+.auk-button--secondary {
+ box-shadow: inset 0 0 0 0.2rem $au-blue-600;
+ color: $au-blue-700;
+ background: none;
+ transition: box-shadow 0.2s;
+ &:hover,
+ &:active {
+ box-shadow: inset 0 0 0 0.3rem $au-blue-700;
+ }
+}
+
+.auk-button--tertiary {
+ box-shadow: inset 0 0 0 0.1rem $au-gray-300;
+ color: $au-blue-700;
+ background: none;
+ &:hover,
+ &:active {
+ color: $au-blue-600;
+ }
+}
+
+.auk-button--borderless {
+ color: $au-blue-700;
+ background: none;
+ &:hover,
+ &:active {
+ color: $au-blue-600;
+ }
+}
+
+.auk-button--danger-primary {
+ color: #fff;
+ background: $au-red-600;
+ &:hover,
+ &:active {
+ background: $au-red-500;
+ }
+}
+
+.auk-button--danger-hover {
+ box-shadow: inset 0 0 0 0.1rem $au-gray-600;
+ color: $au-gray-700;
+ background: none;
+ &:hover,
+ &:active {
+ color: $au-red-500;
+ border-color: $au-red-500;
+ }
+}
+
+.auk-button--disabled {
+ color: $au-gray-500;
+ background-color: none;
+
+ &:hover {
+ cursor: default;
+ }
+}
+
+/* Sizes
+ ========================================================================== */
+
+.auk-button--size-s {
+ font-size: 1.3rem;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-checkbox.scss b/app/styles/au-kaleidos-css/_auk-checkbox.scss
new file mode 100644
index 0000000000..5625d89b25
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-checkbox.scss
@@ -0,0 +1,81 @@
+/* ==========================================================================
+ auk-checkbox
+ ========================================================================== */
+
+.auk-checkbox {
+ display: block;
+ position: relative;
+ padding: .5rem 0 .5rem 2.8rem;
+ height: 3rem;
+}
+
+.auk-checkbox__table{
+ display: block;
+ position: relative;
+ height: 3rem;
+}
+
+.auk-checkbox--flipped {
+ padding: .5rem 2.8rem .5rem 0;
+ .auk-checkbox__box {
+ right: 0;
+ left: auto;
+ }
+}
+
+.auk-checkbox__toggle {
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ height: 0;
+ width: 0;
+}
+
+.auk-checkbox__box {
+ position: absolute;
+ top: .6rem;
+ left: 0;
+ height: 1.8rem;
+ width: 1.8rem;
+ border: .1rem solid $au-gray-300;
+ background: #FFF;
+}
+
+/* When the checkbox is checked, add a blue background */
+.auk-checkbox input:checked ~ .auk-checkbox__box {
+ background-color: $au-blue-700;
+ border: .1rem solid $au-blue-700;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.auk-checkbox__box:after {
+ content: "";
+ position: absolute;
+ display: none;
+}
+
+/* Show the checkmark when checked */
+.auk-checkbox input:checked ~ .auk-checkbox__box:after {
+ display: block;
+ left: .5rem;
+ top: 0;
+ width: .6rem;
+ height: 1.2rem;
+ border: solid white;
+ border-width: 0 .2rem .2rem 0;
+ transform: rotate(45deg);
+}
+
+.auk-checkbox input[type='checkbox']:focus ~ .auk-checkbox__box,
+.auk-checkbox input[type='checkbox']:active ~ .auk-checkbox__box {
+ border-color: $au-yellow-400;
+ box-shadow: inset 0 0 0 0.1rem $au-yellow-400;
+}
+
+.auk-checkbox-list--inline {
+ display: flex;
+ align-items: center;
+ .auk-checkbox:not(:last-of-type) {
+ margin-right: 2rem;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-code.scss b/app/styles/au-kaleidos-css/_auk-code.scss
new file mode 100644
index 0000000000..5d72052e2b
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-code.scss
@@ -0,0 +1,31 @@
+/* ==========================================================================
+ auk-code
+ ========================================================================== */
+
+.auk-code {
+ background-color: #EEE;
+ color: #905;
+ padding: .2rem .4rem;
+}
+
+.auk-code, .auk-pre {
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ font-size: 1.3rem;
+}
+
+.auk-pre {
+ text-align: left;
+ white-space: pre-wrap;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+ tab-size: 4;
+ hyphens: none;
+ background: #EEE;
+ padding: 1.5rem;
+}
+
+.auk-pre > .auk-code {
+ background: none;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-columns.scss b/app/styles/au-kaleidos-css/_auk-columns.scss
new file mode 100644
index 0000000000..3c6093ab0a
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-columns.scss
@@ -0,0 +1,20 @@
+/* ==========================================================================
+ auk-columns
+ ========================================================================== */
+
+.auk-columns {
+ display: flex;
+}
+
+.auk-columns__column {
+ flex: 1 1 auto;
+ margin-right: 2.4rem;
+}
+
+.auk-columns__column:first-child {
+ width: 24rem;
+}
+
+.auk-columns__column:last-child {
+ margin-right: 0;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-container.scss b/app/styles/au-kaleidos-css/_auk-container.scss
new file mode 100644
index 0000000000..532417028b
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-container.scss
@@ -0,0 +1,11 @@
+/* ==========================================================================
+ auk-container
+ ========================================================================== */
+
+.auk-container {
+ max-width: 90rem;
+}
+
+.auk-container--center {
+ margin: 0 auto;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-content.scss b/app/styles/au-kaleidos-css/_auk-content.scss
new file mode 100644
index 0000000000..eb8334c636
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-content.scss
@@ -0,0 +1,53 @@
+/* ==========================================================================
+ auk-content
+ ========================================================================== */
+
+.auk-content p {
+ font-size: 1.6rem;
+ margin: 0 0 1.5rem;
+ line-height: 1.6;
+ color: $au-gray-700;
+}
+
+.auk-content strong {
+ color: $au-black;
+}
+
+.auk-content h1, .auk-h1,
+.auk-content h2, .auk-h2,
+.auk-content h3, .auk-h3,
+.auk-content h4, .auk-h4 {
+ color: $au-gray-900;
+}
+
+.auk-content h1, .auk-h1 {
+ font-size: 3.2rem;
+ margin: 0 0 3.2rem;
+ font-weight: 500;
+}
+
+.auk-content h2, .auk-h2 {
+ font-size: 2.6rem;
+ margin: 0 0 2.6rem;
+ font-weight: 500;
+}
+
+.auk-content h3, .auk-h3 {
+ font-size: 2rem;
+ margin: 0 0 1.5rem;
+ font-weight: 500;
+}
+
+.auk-content h4, .auk-h4 {
+ font-size: 1.6rem;
+ margin: 0 0 1.6rem;
+ font-weight: 500;
+}
+
+.auk-content p small, .auk-body-2 {
+ font-size: 1.3rem;
+}
+
+.auk-content ul, .auk-ul {
+ list-style: inside;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-empty-state.scss b/app/styles/au-kaleidos-css/_auk-empty-state.scss
new file mode 100644
index 0000000000..58044148c1
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-empty-state.scss
@@ -0,0 +1,18 @@
+/* ==========================================================================
+ auk-empty-state
+ ========================================================================== */
+
+.auk-empty-state {
+ display: flex;
+ align-items: center;
+}
+
+.auk-empty-state {
+ .auk-badge {
+ margin-right: 2rem;
+ }
+}
+
+.auk-empty-state__content {
+ color: $au-gray-600;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-file-upload.scss b/app/styles/au-kaleidos-css/_auk-file-upload.scss
new file mode 100644
index 0000000000..b28e0b6b41
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-file-upload.scss
@@ -0,0 +1,67 @@
+/* ==========================================================================
+ auk-file-upload
+ ========================================================================== */
+
+.auk-file-upload {
+ background: transparent;
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+}
+
+.auk-file-upload--full-height {
+ height: 100%;
+}
+
+.auk-file-upload--full-height {
+
+ .auk-file-upload__content {
+ flex: 1 1 auto;
+ }
+}
+
+.auk-file-upload__content {
+ border: 0.2rem dashed $au-gray-300;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+
+ .auk-file-upload--text {
+ color: $au-gray-800;
+ }
+}
+
+.auk-file-upload__content--label {
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ display: flex;
+ padding: 3rem;
+ cursor: pointer;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.auk-file-upload__link {
+ margin: 0 0 .5rem;
+ display: inline-flex;
+ align-items: center;
+
+ span {
+ color: $au-blue-700;
+ text-decoration: underline;
+ }
+
+ .auk-icon {
+ margin-right: 0.5rem;
+ color: $au-gray-500;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-form-group.scss b/app/styles/au-kaleidos-css/_auk-form-group.scss
new file mode 100644
index 0000000000..a89cd0e44b
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-form-group.scss
@@ -0,0 +1,60 @@
+/* ==========================================================================
+ auk-form-group
+ ========================================================================== */
+
+.auk-form-group {
+ margin: 0 0 1.8rem;
+}
+
+.auk-form-group:last-child {
+ margin: 0;
+}
+
+.auk-form-group-layout--horizontal {
+
+ .auk-form-group {
+ display: flex;
+ }
+
+ .auk-label {
+ width: 45%;
+ max-width: 22rem;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ align-self: center;
+ }
+
+ select,
+ input,
+ textarea {
+ flex: 1 1 auto;
+ }
+
+}
+
+.auk-form-group--error {
+
+ label {
+ color: $au-red-700;
+ }
+
+ input, textarea {
+ border-color: $au-red-700;
+ }
+
+}
+
+.auk-form-group--grid {
+ display: grid;
+ grid-gap: 1rem;
+
+ div {
+ &:first-child {
+ grid-column-start: 1;
+ }
+ &:nth-child(2){
+ grid-column-start: 2;
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/styles/au-kaleidos-css/_auk-form-help-text.scss b/app/styles/au-kaleidos-css/_auk-form-help-text.scss
new file mode 100644
index 0000000000..36bfd021f0
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-form-help-text.scss
@@ -0,0 +1,44 @@
+/* ==========================================================================
+ auk-form-help-text
+ ---
+ Help text + Errors on forms
+ ========================================================================== */
+
+.auk-form-help-text {
+ color: $au-gray-600;
+ display: flex;
+ align-items: center;
+ font-size: 1.3rem;
+ .auk-input + &,
+ .auk-input-with-icon + & {
+ margin-top: 0.5rem;
+ }
+ .auk-icon {
+ margin-right: 0.5rem;
+ }
+}
+
+.auk-form-help-text--danger {
+ color: $au-red-700;
+ .auk-icon {
+ color: $au-red-500;
+ }
+}
+
+.auk-form-help-text--success {
+ color: $au-green-700;
+ .auk-icon {
+ color: $au-green-500;
+ }
+}
+
+.auk-form-help-text--warning {
+ color: $au-yellow-600;
+ .auk-icon {
+ color: $au-yellow-400;
+ }
+}
+
+.auk-form-help-text + .auk-form-help-text {
+ margin-top: 0.5rem;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-hr.scss b/app/styles/au-kaleidos-css/_auk-hr.scss
new file mode 100644
index 0000000000..a4e7e8b75a
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-hr.scss
@@ -0,0 +1,11 @@
+/* ==========================================================================
+ auk-hr
+ ========================================================================== */
+
+.auk-hr {
+ margin: 2.4rem 0;
+ border-bottom: .1rem solid $au-gray-200;
+ hr {
+ display: none;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-icon.scss b/app/styles/au-kaleidos-css/_auk-icon.scss
new file mode 100644
index 0000000000..ce0cc2b4f4
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-icon.scss
@@ -0,0 +1,52 @@
+/* ==========================================================================
+ auk-icon
+ ========================================================================== */
+
+.auk-icon {
+ display: inline-flex;
+ vertical-align: middle;
+ align-content: center;
+ justify-content: center;
+
+ .ki {
+ width: 100%;
+ height: 100%;
+ line-height: 1;
+ }
+}
+
+.auk-icon--default {
+ font-size: 1.8rem;
+}
+
+.auk-icon--light {
+ color: #8c8c8c;
+}
+
+.auk-icon--large {
+ font-size: 2.4rem;
+}
+
+.auk-icon--small {
+ font-size: 1.2rem;
+}
+
+.auk-icon--muted {
+ color: $au-gray-600;
+}
+
+.auk-icon--warning {
+ color: $au-yellow-400;
+}
+
+.auk-icon--primary {
+ color: $au-blue-600;
+}
+
+.auk-icon--success {
+ color: $au-green-500;
+}
+
+.auk-icon--danger {
+ color: $au-red-600;
+}
\ No newline at end of file
diff --git a/app/styles/au-kaleidos-css/_auk-input.scss b/app/styles/au-kaleidos-css/_auk-input.scss
new file mode 100644
index 0000000000..8456c6e510
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-input.scss
@@ -0,0 +1,58 @@
+/* ==========================================================================
+ auk-input
+ ========================================================================== */
+
+.auk-input {
+ border: 0.1rem solid $au-gray-300;
+ padding: .7rem;
+ font-family: flanders-sans, sans-serif;
+ font-size: 1.5rem;
+ color: $au-gray-800;
+}
+
+.auk-input::placeholder {
+ color: $au-gray-500;
+}
+
+.auk-input:focus {
+ outline: 0;
+ border-color: $au-yellow-400;
+ box-shadow: inset 0 0 0 0.1rem $au-yellow-400;
+}
+
+.auk-input--block {
+ display: block;
+ width: 100%;
+}
+
+.auk-input--error {
+ border: .1rem solid $au-red-500;
+}
+
+.auk-input-with-icon {
+ display: block;
+ position: relative;
+ width: 100%;
+
+ .auk-input {
+ padding-left: 3rem;
+ }
+
+ .auk-icon {
+ left: 0.8rem;
+ opacity: 0.75;
+ position: absolute;
+ top: 0.9rem;
+ width: 1.8rem;
+ height: 1.8rem;
+ }
+}
+
+.auk-input--max-width {
+ max-width: 30%;
+}
+
+// Widths
+.auk-input--w-small { width: 15rem; }
+.auk-input--w-medium { width: 30rem; }
+.auk-input--w-large { width: 40rem; }
\ No newline at end of file
diff --git a/app/styles/au-kaleidos-css/_auk-intro.scss b/app/styles/au-kaleidos-css/_auk-intro.scss
new file mode 100644
index 0000000000..793a63a4af
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-intro.scss
@@ -0,0 +1,10 @@
+/* ==========================================================================
+ auk-intro
+ ---
+ A text style for intro paragraphs
+ ========================================================================== */
+
+.auk-intro {
+ font-size: 132%;
+ margin: 0 0 2.4rem;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-key-value.scss b/app/styles/au-kaleidos-css/_auk-key-value.scss
new file mode 100644
index 0000000000..cda8311f0b
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-key-value.scss
@@ -0,0 +1,25 @@
+/* ==========================================================================
+ auk-key-value
+ ========================================================================== */
+
+.auk-key-value-item__label {
+ color: $au-gray-700;
+ font-weight: 500;
+ max-width: 22rem;
+ margin-bottom: .5rem;
+}
+
+.auk-key-value-item {
+ margin-bottom: 1rem;
+}
+
+.auk-key-value-item--horizontal {
+ display: flex;
+ align-items: center;
+ height: 3.5rem;
+
+ .auk-key-value-item__label {
+ width: 45%;
+ margin-bottom: 0;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-label-error.scss b/app/styles/au-kaleidos-css/_auk-label-error.scss
new file mode 100644
index 0000000000..76ea16e312
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-label-error.scss
@@ -0,0 +1,10 @@
+/* ==========================================================================
+ auk-label-error
+ ========================================================================== */
+
+
+.auk-label-error {
+ color: #DB3434;
+ font-family: 'flanders-sans', sans-serif;
+ font-size: 1.4rem;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-label.scss b/app/styles/au-kaleidos-css/_auk-label.scss
new file mode 100644
index 0000000000..4aad3b5d4c
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-label.scss
@@ -0,0 +1,18 @@
+/* ==========================================================================
+ auk-label
+ ========================================================================== */
+
+.auk-label {
+ font-weight: 500;
+ color: $au-gray-700;
+ display: block;
+ padding-bottom: .6rem;
+}
+
+.auk-label--error {
+ color: $au-red-700;
+}
+
+.auk-label abbr {
+ opacity: 0.5;
+ }
\ No newline at end of file
diff --git a/app/styles/au-kaleidos-css/_auk-list.scss b/app/styles/au-kaleidos-css/_auk-list.scss
new file mode 100644
index 0000000000..1903b23482
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-list.scss
@@ -0,0 +1,31 @@
+/* ==========================================================================
+ auk-list
+ ========================================================================== */
+
+.auk-list__item {
+ margin: 1.5rem 0;
+ display: flex;
+ align-items: center;
+}
+
+.auk-list__item {
+ .auk-button-toolbar {
+ margin-left: auto;
+ }
+}
+
+.auk-list--bordered {
+ .auk-list__item {
+ border-bottom: 0.1rem solid $au-gray-300;
+ padding: 1.2rem 1rem;
+ margin: 0;
+
+ &:last-child {
+ border: none;
+ }
+ }
+}
+
+.auk-list__item--gray-100 {
+ background: $au-gray-100;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-loader.scss b/app/styles/au-kaleidos-css/_auk-loader.scss
new file mode 100644
index 0000000000..19b80561e9
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-loader.scss
@@ -0,0 +1,75 @@
+/* ==========================================================================
+ auk-loader
+ ========================================================================== */
+
+.auk-loader-wrapper {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 6rem 0;
+ .auk-loader {
+ margin-bottom: 0.5rem;
+ }
+}
+
+.auk-loader-wrapper--small {
+ padding: 0;
+}
+
+.auk-loader {
+ display: inline-block;
+ position: relative;
+ width: 3rem;
+ height: 1.6rem;
+
+ &:before {
+ animation: loader-wave infinite 1s linear;
+ position: absolute;
+ display: block;
+ content: "";
+ width: 0.4rem;
+ height: 0.4rem;
+ box-shadow: 1rem 0 #666, 2rem 0 #666, 3rem 0 #666;
+ border-radius: 50%;
+ margin-top: -0.2rem;
+ margin-left: -2.2rem;
+ top: 50%;
+ left: 50%;
+ }
+}
+
+@keyframes #{loader-wave} {
+ 0% {
+ box-shadow: 1rem -0 #666, 2rem -0 #666, 3rem 0 #666;
+ }
+
+ 10% {
+ box-shadow: 1rem -0.3rem #666, 2rem -0 #666, 3rem -0 #666;
+ }
+
+ 20% {
+ box-shadow: 1rem -0.6rem #666, 2rem -0.3rem #666, 3rem -0 #666;
+ }
+
+ 30% {
+ box-shadow: 1rem -0.3rem #666, 2rem -0.6rem #666, 3rem -0.3rem #666;
+ }
+
+ 40% {
+ box-shadow: 1rem -0 #666, 2rem -0.3rem #666, 3rem -0.6rem #666;
+ }
+
+ 50% {
+ box-shadow: 1rem -0 #666, 2rem -0 #666, 3rem -0.3rem #666;
+ }
+
+ 60% {
+ box-shadow: 1rem -0 #666, 2rem -0 #666, 3rem -0 #666;
+ }
+
+ 100% {
+ box-shadow: 1rem -0 #666, 2rem -0 #666, 3rem -0 #666;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-menu.scss b/app/styles/au-kaleidos-css/_auk-menu.scss
new file mode 100644
index 0000000000..9fa7be97b6
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-menu.scss
@@ -0,0 +1,38 @@
+/* ==========================================================================
+ Component: Menu
+ ---
+ Dropdown menu
+ ========================================================================== */
+
+.auk-menu {
+ background: #FFF;
+ min-width: 22rem;
+ padding: 1rem 0;
+}
+
+.auk-menu__item {
+ color: $au-blue-700;
+ text-decoration: none;
+ display: flex;
+ padding: 0.8rem 1.6rem;
+
+ &:hover {
+ background-color: $au-gray-100;
+ color: $au-blue-600;
+ }
+}
+
+.auk-menu__item--danger {
+ color: $au-red-600;
+ &:hover {
+ color: $au-red-500;
+ }
+}
+
+.auk-menu__divider {
+ border-top: .1rem solid $au-gray-300;
+ display: block;
+ margin-top: .4rem;
+ padding-top: .4rem;
+}
+
diff --git a/app/styles/au-kaleidos-css/_auk-modal.scss b/app/styles/au-kaleidos-css/_auk-modal.scss
new file mode 100644
index 0000000000..6914af7e82
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-modal.scss
@@ -0,0 +1,105 @@
+/* ==========================================================================
+ auk-modal
+ ========================================================================== */
+
+.auk-modal {
+ z-index: $z-index-modal;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+ height: 100%;
+ filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.2));
+}
+
+/* Parts
+ ========================================================================== */
+
+// We use a specific logic of divs to make sure the modal flexes correctly
+.auk-modal__push {
+ flex: 1 0 auto;
+}
+
+.auk-modal__header {
+ padding: 0 2rem;
+}
+
+.auk-modal__header--bordered {
+ border-bottom: 0.1rem solid $au-gray-300;
+}
+
+.auk-modal__footer {
+ padding: 0 2rem;
+}
+
+.auk-modal__footer--bordered {
+ border-top: 0.1rem solid $au-gray-300;
+}
+
+.auk-modal__header,
+.auk-modal__content,
+.auk-modal__footer {
+ background: #fff;
+}
+
+.auk-modal__header,
+.auk-modal__footer {
+ flex: 0 0 auto;
+}
+
+.auk-modal__content {
+ padding: 2rem;
+ overflow: auto;
+ max-height: calc(100vh - 4rem);
+}
+
+/* Sizes
+ ========================================================================== */
+
+.auk-modal--large {
+ width: 90rem;
+}
+
+.auk-modal--medium {
+ width: 70rem;
+}
+
+.auk-modal--small {
+ width: 50rem;
+}
+
+.auk-modal--xsmall {
+ width: 30rem;
+}
+
+.auk-modal--full-screen {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ .auk-modal__content {
+ height: 100%;
+ flex: 1 1 auto;
+ }
+ .auk-modal__push {
+ display: none;
+ }
+}
+
+/* Backdrop
+ ========================================================================== */
+
+.auk-modal-backdrop {
+ background: rgba(0, 0, 0, 0.2);
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+ z-index: $z-index-modal-backdrop;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-navbar.scss b/app/styles/au-kaleidos-css/_auk-navbar.scss
new file mode 100644
index 0000000000..9a03a2a65a
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-navbar.scss
@@ -0,0 +1,55 @@
+/* ==========================================================================
+ Component: navbar
+ ---
+ A container for navigational elements
+ ========================================================================== */
+
+.auk-navbar {
+ display: flex;
+ align-items: center;
+ padding: 0 2rem;
+ min-height: 5rem;
+}
+
+.auk-navbar > .auk-toolbar {
+ flex: 1 0 auto;
+}
+
+.auk-navbar--auto {
+ height: auto;
+ min-height: auto;
+}
+
+.auk-navbar--white {
+ background: #FFF;
+}
+
+.auk-navbar--no-pad {
+ padding: 0;
+}
+
+.auk-navbar--gray-100 {
+ background: $au-gray-100;
+}
+
+.auk-navbar--gray-200 {
+ background: $au-gray-200;
+}
+
+/* Bordered equivalents
+ ========================================================================== */
+
+.auk-navbar--bordered-top {
+ border-top: .1rem solid $au-gray-300;
+}
+
+.auk-navbar--bordered-bottom {
+ border-bottom: .1rem solid $au-gray-300;
+}
+
+/* Sizes
+ ========================================================================== */
+
+.auk-navbar--large {
+ min-height: 6rem;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-o-grid.scss b/app/styles/au-kaleidos-css/_auk-o-grid.scss
new file mode 100644
index 0000000000..260fe73a80
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-o-grid.scss
@@ -0,0 +1,124 @@
+/* ==========================================================================
+ Grid
+ ---
+ Basic flex-based grid system
+ Based on flexbox and calc()
+ Support:
+ * IE10 and up
+ * Edge, Chrome, Safari, Firefox (except very old versions)
+ ========================================================================== */
+
+$auk-o-grid-columns: 12 !default;
+$auk-o-grid-column-gap: 1.6rem !default;
+
+$auk-o-grid-bp1: 400px;
+$auk-o-grid-bp2: 768px;
+$auk-o-grid-bp3: 992px;
+$auk-o-grid-bp4: 1200px;
+
+.auk-o-grid {
+ display: flex;
+ flex-wrap: wrap;
+ margin-left: -($auk-o-grid-column-gap / 2);
+ margin-right: -($auk-o-grid-column-gap / 2);
+}
+
+/* Grid columns (default)
+ ========================================================================== */
+
+[class*='auk-o-grid-col'] {
+ flex: 1 0 auto;
+ min-width: 0;
+ margin-left: $auk-o-grid-column-gap / 2;
+ margin-right: $auk-o-grid-column-gap / 2;
+}
+
+// Activate columns regardless of breakpoint
+$i: 0;
+
+@while($i < $auk-o-grid-columns) {
+ .auk-o-grid-col-#{$i + 1} {
+ width: calc(#{( ( $i + 1 ) / $auk-o-grid-columns ) * 100}% - #{$auk-o-grid-column-gap});
+ flex: 1 1 auto;
+ }
+ $i: $i + 1;
+}
+
+// Activate columns only from breakpoint 1
+$i: 0;
+
+@media (min-width: $auk-o-grid-bp1) {
+
+ [class*='auk-o-grid-col-bp1-'] {
+ flex: 1 1 auto;
+ }
+
+ @while($i < $auk-o-grid-columns) {
+ .auk-o-grid-col-bp1-#{$i + 1} {
+ width: calc(#{( ( $i + 1 ) / $auk-o-grid-columns ) * 100}% - #{$auk-o-grid-column-gap});
+ }
+ $i: $i + 1;
+ }
+}
+
+// Activate columns only from breakpoint 2
+$i: 0;
+
+@media (min-width: $auk-o-grid-bp2) {
+
+ [class*='auk-o-grid-col-bp2-'] {
+ flex: 1 1 auto;
+ }
+
+ @while($i < $auk-o-grid-columns) {
+ .auk-o-grid-col-bp2-#{$i + 1} {
+ width: calc(#{( ( $i + 1 ) / $auk-o-grid-columns ) * 100}% - #{$auk-o-grid-column-gap});
+ }
+ $i: $i + 1;
+ }
+}
+
+$i: 0;
+
+// Activate columns only from breakpoint 3
+@media (min-width: $auk-o-grid-bp3) {
+
+ [class*='auk-o-grid-col-bp3-'] {
+ flex: 1 1 auto;
+ }
+
+ @while($i < $auk-o-grid-columns) {
+ .auk-o-grid-col-bp3-#{$i + 1} {
+ width: calc(#{( ( $i + 1 ) / $auk-o-grid-columns ) * 100}% - #{$auk-o-grid-column-gap});
+ }
+ $i: $i + 1;
+ }
+}
+
+/* Grid columns (modifiers)
+ ========================================================================== */
+
+.auk-o-grid--no-wrap {
+ flex-wrap: nowrap;
+}
+
+.auk-o-grid-col-static {
+ flex: none;
+}
+
+.auk-o-grid-col-flex {
+ flex: 1 1 auto;
+}
+
+.auk-o-grid--reverse {
+ flex-direction: row-reverse;
+}
+
+.auk-o-grid--no-gutter {
+ margin: 0;
+
+ [class*='auk-o-grid-col'] {
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-overline.scss b/app/styles/au-kaleidos-css/_auk-overline.scss
new file mode 100644
index 0000000000..e3f7c38943
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-overline.scss
@@ -0,0 +1,11 @@
+/* ==========================================================================
+ Overline
+ ========================================================================== */
+
+.auk-overline {
+ text-transform: uppercase;
+ font-weight: 500;
+ color: $au-gray-700;
+ letter-spacing: 0.1rem;
+ font-size: 1.3rem;
+}
\ No newline at end of file
diff --git a/app/styles/au-kaleidos-css/_auk-pagination.scss b/app/styles/au-kaleidos-css/_auk-pagination.scss
new file mode 100644
index 0000000000..c731117d2b
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-pagination.scss
@@ -0,0 +1,23 @@
+/* ==========================================================================
+ auk-pagination
+ ========================================================================== */
+
+.auk-pagination {
+ display: inline-flex;
+ align-items: center;
+ width: 100%;
+ margin: 2rem 0;
+}
+
+.auk-pagination__element {
+ padding: 0 0.5rem;
+}
+
+.auk-pagination__list {
+ display: flex;
+ align-items: center;
+}
+
+.auk-pagination__element-link--active {
+ font-weight: 500;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-panel-layout.scss b/app/styles/au-kaleidos-css/_auk-panel-layout.scss
new file mode 100644
index 0000000000..d25e44a9bf
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-panel-layout.scss
@@ -0,0 +1,48 @@
+/* ==========================================================================
+ auk-panel-layout
+ ========================================================================== */
+
+.auk-panel-layout {
+ display: flex;
+ height: 100%;
+ min-height: 0;
+}
+
+.auk-panel-layout__main-content {
+ flex: 1;
+ height: 100%;
+ min-width: 0;
+}
+
+.auk-panel-layout__sidebar {
+ position: relative;
+ flex: 0 0 auto;
+ height: 100%;
+}
+
+/* Agenda items
+ ========================================================================== */
+
+.auk-panel-layout__agenda-items {
+ width: 32rem;
+ height: 100%;
+
+ @media (min-width: 128rem) {
+ width: 40rem;
+ }
+ @media (min-width: 1440px) {
+ width: 48rem;
+ }
+ // If there is a history panel, the agenda panel is 40px smaller
+ .auk-panel-layout__agenda-history + & {
+ width: 28rem;
+
+ @media (min-width: 1280px) {
+ width: 36rem;
+ }
+
+ @media (min-width: 1440px) {
+ width: 44rem;
+ }
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-panel.scss b/app/styles/au-kaleidos-css/_auk-panel.scss
new file mode 100644
index 0000000000..ba15af4106
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-panel.scss
@@ -0,0 +1,72 @@
+/* ==========================================================================
+ auk-panel
+ ========================================================================== */
+
+.auk-panel {
+ background: #FFF;
+ border: .1rem solid #C6CDD3;
+}
+
+.auk-panel__header {
+ padding: 0 2rem;
+ height: 5.5rem;
+ border-bottom: .1rem solid #C6CDD3;
+ display: flex;
+ align-items: center;
+
+ .auk-panel__title {
+ font-weight: 500;
+ font-size: 2rem;
+ margin: 0;
+ }
+}
+
+.auk-panel__header--borderless {
+ border: none;
+}
+
+.auk-panel__body {
+ padding: 2rem;
+
+ > p:only-child {
+ margin: 0;
+ }
+
+ + .auk-panel__body {
+ border-top: .1rem solid #C6CDD3;
+ }
+
+ // Padding for tables inside of panels
+ > .auk-table tr td:first-child,
+ > .auk-table tr th:first-child {
+ padding-left: 2rem;
+ }
+ > .auk-table tr td:last-child,
+ > .auk-table tr th:last-child {
+ padding-right: 2rem;
+ }
+
+ // Border styles for document cards inside of panels
+ .auk-document-card {
+ border: none;
+ &:not(:last-of-type) {
+ border-bottom: .1rem solid $au-gray-300;
+ }
+ }
+}
+
+.auk-panel__body--no-pad {
+ padding: 0;
+}
+
+.auk-panel__footer {
+ padding: 0 2rem;
+ height: 5.5rem;
+ border-top: .1rem solid #C6CDD3;
+ display: flex;
+ align-items: center;
+}
+
+.auk-panel--editing {
+ background: #F3F5F6;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-pill-list.scss b/app/styles/au-kaleidos-css/_auk-pill-list.scss
new file mode 100644
index 0000000000..8e4573d335
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-pill-list.scss
@@ -0,0 +1,12 @@
+/* ==========================================================================
+ auk-pill-list
+ ========================================================================== */
+
+.auk-pill-list {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ .auk-pill:not(:first-of-type) {
+ margin-left: .5rem;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-pill.scss b/app/styles/au-kaleidos-css/_auk-pill.scss
new file mode 100644
index 0000000000..37db8a181a
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-pill.scss
@@ -0,0 +1,54 @@
+/* ==========================================================================
+ auk-pill
+ ========================================================================== */
+
+.auk-pill {
+ font-size: 1.3rem;
+ font-weight: 500;
+ display: inline-flex;
+ align-items: center;
+ padding: 0 .6rem;
+ border-radius: .6rem;
+ height: 2.4rem;
+}
+
+.auk-pill .auk-icon {
+ width: 1.8rem;
+ height: 1.8rem;
+ margin-right: .5rem;
+}
+
+.auk-pill--icon-only {
+ padding: 0 .3rem;
+ .auk-icon {
+ margin: 0;
+ }
+}
+
+.auk-pill--icon-right {
+ .auk-icon {
+ margin-left: .6rem;
+ margin-right: 0;
+ }
+}
+
+.auk-pill--default {
+ color: $au-gray-600;
+ background: $au-gray-100;
+ border: .1rem solid $au-gray-300;
+}
+
+.auk-pill--success {
+ color: #FFF;
+ background: $au-green-700;
+}
+
+.auk-pill--danger {
+ color: #FFF;
+ background: $au-red-600;
+}
+
+.auk-pill--warning {
+ color: #000;
+ background: $au-yellow-400;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-popover.scss b/app/styles/au-kaleidos-css/_auk-popover.scss
new file mode 100644
index 0000000000..490c04acf0
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-popover.scss
@@ -0,0 +1,60 @@
+/* ==========================================================================
+ auk-popover
+ ========================================================================== */
+
+.auk-popover {
+ background: #FFF;
+ border: .1rem solid $au-gray-300;
+ box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
+ max-width: 45rem;
+ min-width: 20rem;
+}
+
+.auk-popover__header {
+ border-bottom: .1rem solid $au-gray-300;
+ padding: 0 2rem;
+ height: 5rem;
+}
+
+.auk-popover__body {
+ padding: 1.2rem;
+}
+
+.ember-popover {
+ margin-bottom: 10px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ user-select: none;
+ pointer-events: none;
+ position: absolute;
+ z-index: 2;
+ font-family: inherit;
+ border-radius: 3px;
+}
+
+.ember-popover {
+ color: #000;
+ background-color: #fff;
+ border: 1px solid #ccc;
+}
+
+.ember-popover[aria-hidden="false"] {
+ pointer-events: auto;
+ cursor: initial;
+ -webkit-touch-callout: auto;
+ -webkit-user-select: auto;
+ user-select: auto;
+}
+
+.ember-popover {
+ opacity: 0;
+ -webkit-transition: opacity ease-out, margin ease-out;
+ transition: opacity ease-out, margin ease-out;
+ transition-duration: 200ms;
+}
+
+
+.ember-popover.ember-tooltip-effect-none,
+.ember-popover.ember-tooltip-show {
+ opacity: 1;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-progress-bar.scss b/app/styles/au-kaleidos-css/_auk-progress-bar.scss
new file mode 100644
index 0000000000..f2c48cd079
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-progress-bar.scss
@@ -0,0 +1,23 @@
+/* ==========================================================================
+ auk-progress-bar
+ ========================================================================== */
+
+.auk-progress-bar {
+ width: 100%;
+ background-color: $au-gray-300;
+}
+
+.auk-progress-bar__progress {
+ height: .4rem;
+ background-color: $au-blue-600;
+ animation: fill 1s linear 1;
+}
+
+@keyframes fill {
+ 0% {
+ width: 0%;
+ }
+ 100% {
+ width: 100%;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-radio.scss b/app/styles/au-kaleidos-css/_auk-radio.scss
new file mode 100644
index 0000000000..1db98873d6
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-radio.scss
@@ -0,0 +1,56 @@
+/* ==========================================================================
+ auk-radio
+ ========================================================================== */
+
+.auk-radio {
+ display: block;
+ position: relative;
+ padding: .5rem 0 .5rem 2.4rem;
+}
+
+.auk-radio__toggle {
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ height: 0;
+ width: 0;
+}
+
+.auk-radio__box {
+ position: absolute;
+ top: .7rem;
+ left: 0;
+ height: 1.8rem;
+ width: 1.8rem;
+ border-radius: 100%;
+ border: .1rem solid $au-gray-300;
+}
+
+.auk-radio input[type='radio']:checked ~ .auk-radio__box {
+ background: $au-blue-700;
+ border-color: $au-blue-700;
+ &:before {
+ content: "";
+ background-color: $au-gray-100;
+ position: absolute;
+ height: .8rem;
+ width: .8rem;
+ top: (.8rem) / 2;
+ left: (.8rem) / 2;
+ border-radius: 100%;
+ }
+}
+
+.auk-radio-list--inline {
+ display: flex;
+ align-items: center;
+ .auk-radio:not(:last-of-type) {
+ margin-right: 2rem;
+ }
+}
+
+.auk-radio input[type='radio']:focus ~ .auk-radio__box,
+.auk-radio input[type='radio']:active ~ .auk-radio__box {
+ border-color: $au-yellow-400;
+ box-shadow: 0 0 0 0.1rem $au-yellow-400;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-scroll-wrapper.scss b/app/styles/au-kaleidos-css/_auk-scroll-wrapper.scss
new file mode 100644
index 0000000000..830880fdd0
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-scroll-wrapper.scss
@@ -0,0 +1,16 @@
+/* ==========================================================================
+ auk-scroll-wrapper
+ ========================================================================== */
+
+.auk-scroll-wrapper {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.auk-scroll-wrapper__body {
+ margin-bottom: 5rem;
+ overflow: scroll;
+ flex: 1;
+ height: 100%;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-search-results-list.scss b/app/styles/au-kaleidos-css/_auk-search-results-list.scss
new file mode 100644
index 0000000000..b4a5212e25
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-search-results-list.scss
@@ -0,0 +1,26 @@
+/* ==========================================================================
+ Component: search-results-list
+ ========================================================================== */
+
+.auk-search-results-list {
+ background: #fff;
+ min-width: 32rem;
+ padding: 1rem 0;
+}
+
+.auk-search-results-list__item a {
+ color: $au-gray-700;
+ text-decoration: none;
+ display: flex;
+ flex-direction: column;
+ padding: 0.8rem 1.6rem;
+
+ &:hover {
+ background-color: $au-gray-100;
+ color: $au-blue-600;
+ }
+}
+
+.auk-search-results-list__item:not(:last-of-type) {
+ border-bottom: 0.1rem solid $au-gray-200;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-select.scss b/app/styles/au-kaleidos-css/_auk-select.scss
new file mode 100644
index 0000000000..9a07b1a798
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-select.scss
@@ -0,0 +1,29 @@
+/* ==========================================================================
+ auk-input
+ ========================================================================== */
+
+.auk-select {
+ border: 0.1rem solid $au-gray-300;
+ padding: .7rem 3rem .7rem .7rem;
+ appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg width='9' height='5' viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5L0 0H9L4.5 5Z' fill='%23666666'/%3E%3C/svg%3E%0A");
+ background-repeat: no-repeat, repeat;
+ background-position: right 1.2rem top 50%, 0 0;
+ font-family: flanders-sans, sans-serif;
+ font-size: 1.5rem;
+}
+
+.auk-select:focus {
+ outline: 0;
+ border-color: $au-yellow-400;
+ box-shadow: inset 0 0 0 0.1rem $au-yellow-400;
+}
+
+.auk-select--block {
+ display: block;
+ width: 100%;
+}
+
+.auk-select--error {
+ border: .1rem solid $au-red-500;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-sidebar.scss b/app/styles/au-kaleidos-css/_auk-sidebar.scss
new file mode 100644
index 0000000000..1eda545292
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-sidebar.scss
@@ -0,0 +1,77 @@
+/* ==========================================================================
+ Component: sidebar
+ ========================================================================== */
+
+.auk-sidebar {
+ width: 24rem;
+ height: 100%;
+ background: $au-gray-100;
+}
+
+.auk-sidebar--auto {
+ width: auto;
+}
+
+.auk-sidebar--gray-100 {
+ background: $au-gray-100;
+}
+
+.auk-sidebar--gray-200 {
+ background: $au-gray-200;
+}
+
+.auk-sidebar--white {
+ background: #fff;
+}
+
+.auk-sidebar--left {
+ border-right: 0.1rem solid $au-gray-300;
+}
+
+.auk-sidebar--right {
+ border-left: 0.1rem solid $au-gray-300;
+}
+
+.auk-sidebar--large {
+ width: 35rem;
+}
+
+.auk-sidebar--small {
+ width: 20rem;
+}
+
+.auk-sidebar--collapsed {
+ width: 5.9rem;
+}
+
+/* Sidebar items
+ ========================================================================== */
+
+.auk-sidebar__item a {
+ display: block;
+ text-decoration: none;
+ padding: 1.5rem 2rem;
+ color: $au-gray-600;
+}
+.auk-sidebar__item a.active {
+ background: $au-gray-200;
+ color: $au-gray-800;
+}
+
+/* Responsive panel layout
+ ========================================================================== */
+
+.auk-sidebar--responsive.auk-sidebar:not(.auk-sidebar--collapsed) {
+ position: absolute;
+ top: 0;
+ right: 0;
+ box-shadow: -8px 15px 10px rgba(0, 0, 0, 0.14),
+ -3px 15px 14px rgba(0, 0, 0, 0.12), -4px 15px 5px rgba(0, 0, 0, 0.2);
+}
+
+@media (min-width: 1680px) {
+ .auk-sidebar--responsive.auk-sidebar:not(.auk-sidebar--collapsed) {
+ position: initial;
+ box-shadow: none;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-status-pill.scss b/app/styles/au-kaleidos-css/_auk-status-pill.scss
new file mode 100644
index 0000000000..c8820cf7bc
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-status-pill.scss
@@ -0,0 +1,52 @@
+/* ==========================================================================
+ auk-status-pill
+ ========================================================================== */
+
+.auk-status-pill {
+ border: 0.1rem solid $au-gray-300;
+ border-radius: 0.5rem;
+ padding: 0.35rem 0.6rem;
+ white-space: nowrap;
+ font-size: 1.5rem;
+ font-weight: 400;
+}
+
+.auk-status-pill__label {
+ padding-left: 0.4rem;
+}
+
+.auk-status-pill--in-progress {
+ background-color: $au-yellow-200;
+ border: 0.1rem solid $au-yellow-200;
+ color: $au-yellow-600;
+ .auk-icon {
+ color: $au-yellow-600;
+ }
+}
+
+.auk-status-pill--done {
+ background-color: $au-green-200;
+ border: 0.1rem solid $au-green-200;
+ color: $au-green-700;
+ .auk-icon {
+ color: $au-green-700;
+ }
+}
+
+.auk-status-pill--not-started {
+ background-color: $au-blue-200;
+ border: 0.1rem solid $au-blue-200;
+ color: $au-blue-700;
+ .auk-icon {
+ color: $au-blue-700;
+ }
+}
+
+.auk-status-pill--error {
+ background-color: $au-red-200;
+ border: 0.1rem solid $au-red-200;
+ color: $au-red-700;
+ .auk-icon {
+ color: $au-red-700;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-table.scss b/app/styles/au-kaleidos-css/_auk-table.scss
new file mode 100644
index 0000000000..25342fa2e8
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-table.scss
@@ -0,0 +1,119 @@
+/* ==========================================================================
+ auk-table
+ ========================================================================== */
+
+.auk-table {
+ border: none;
+ border-collapse: collapse;
+ width: 100%;
+}
+
+.auk-table td,
+.auk-table th {
+ vertical-align: middle;
+ padding: 1.2rem 1rem;
+ border-bottom: 0.1rem solid $au-gray-300;
+}
+
+.auk-table tr td:first-child,
+.auk-table tr th:first-child {
+ padding-left: 1.2rem;
+}
+
+.auk-table tr td:last-child,
+.auk-table tr th:last-child {
+ padding-right: 1.2rem;
+}
+
+.auk-table th {
+ border-bottom-width: 0.2rem;
+ text-align: left;
+ font-weight: 500;
+ color: $au-gray-600;
+}
+
+.auk-table--striped tr:nth-child(odd) td {
+ background: $au-gray-100;
+}
+
+.auk-table tr:last-child td {
+ border-bottom-width: 0;
+}
+
+.auk-table__header--actions,
+.auk-table__cell--actions {
+ width: 3rem;
+}
+
+.auk-table__cell--actions > button {
+ float: right;
+}
+
+.auk-table__row--collapsed-content td {
+ background: $au-gray-100;
+}
+
+.auk-table {
+ // If button toolbar appears in first column
+ tr td:first-child .auk-button-toolbar {
+ justify-content: flex-start;
+ }
+ .auk-button-toolbar {
+ justify-content: flex-end;
+ }
+}
+
+.auk-table code {
+ background-color: #eee;
+ color: #905;
+ padding: 0.2rem 0.4rem;
+ font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+ font-size: 1.3rem;
+}
+
+.auk-table .auk-table--vertical-align-top {
+ vertical-align: top;
+}
+
+.auk-table--advanced {
+ th {
+ color: $au-gray-900;
+ }
+
+ .auk-table__cell--accent {
+ background-color: $au-gray-100;
+ }
+}
+
+.auk-table tr .auk-table__cell--gray-100 {
+ background: $au-gray-100;
+}
+
+/* Status cells
+ ========================================================================== */
+
+.auk-table tr .auk-table__cell--success {
+ background: $au-green-200;
+ color: $au-green-700;
+ text-align: center;
+}
+
+.auk-table tr .auk-table__cell--warning {
+ background: $au-yellow-200;
+ color: $au-yellow-600;
+ text-align: center;
+}
+
+/* Table columns
+ ========================================================================== */
+
+$tableColCount: 12;
+$i: 1;
+
+@while $i < $tableColCount {
+ .auk-table__col--#{$i} {
+ width: #{$i / $tableColCount * 100%};
+ }
+
+ $i: $i + 1;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-tabs.scss b/app/styles/au-kaleidos-css/_auk-tabs.scss
new file mode 100644
index 0000000000..85341c1371
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-tabs.scss
@@ -0,0 +1,92 @@
+/* ==========================================================================
+ auk-tabs
+ ========================================================================== */
+
+.auk-tabs {
+ display: flex;
+ // overflow: hidden;
+ // overflow-x: scroll; disable scrollbar on tabs
+}
+
+.auk-tabs--reversed {
+ border-top: .1rem solid $au-gray-300;
+ margin-top: 1.2rem;
+}
+
+.auk-tabs a {
+ color: $au-blue-600;
+ font-weight: 500;
+ height: 5rem;
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ border-bottom: .3rem solid transparent;
+ white-space: nowrap;
+ &:hover {
+ background: $au-gray-100;
+ }
+ &:focus {
+ outline: 0;
+ border-color: $au-yellow-400;
+ box-shadow: inset 0 0 0 0.1rem $au-yellow-400;
+ }
+}
+
+.auk-tabs__tab-inner {
+ border-right: .1rem solid #CCC;
+ padding: 0 1rem;
+ position: relative;
+ display: flex;
+ align-items: center;
+ top: .15rem;
+ .auk-tabs__tab:last-child & {
+ border-right: none;
+ }
+}
+
+.auk-tabs a.active {
+ color: $au-gray-900;
+ border-bottom: .3rem solid $au-gray-900;
+}
+
+.auk-tabs--reversed a {
+ border-top: .3rem solid transparent;
+ border-bottom: none;
+}
+
+.auk-tabs--reversed .auk-tabs__tab-inner {
+ bottom: .15rem;
+}
+
+.auk-tabs--reversed a.active {
+ color: $au-gray-900;
+ border-top: .3rem solid $au-gray-900;
+ border-bottom: none;
+}
+
+.auk-tabs__divider {
+ width: .1rem;
+ height: 1.8rem;
+ background-color: $au-gray-300;
+ margin-left: 1rem;
+}
+
+.auk-tabs__tab:last-child {
+ .auk-tabs__divider {
+ display: none;
+ }
+}
+
+.auk-tabs svg path {
+ fill: currentColor;
+}
+
+.auk-icon + .auk-tabs__label,
+.auk-tabs__label + .auk-icon {
+ margin: 0 .6rem;
+}
+
+.auk-tabs__hierarchical-back a.active{
+ color: $au-blue-600;
+ border: none;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-textarea-alt.scss b/app/styles/au-kaleidos-css/_auk-textarea-alt.scss
new file mode 100644
index 0000000000..e3e6edc160
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-textarea-alt.scss
@@ -0,0 +1,46 @@
+// @todo find out where this is being used and why it exists as is
+
+$textarea-alt-page-bg: #FFF;
+$textarea-alt-base-font: flanders-sans, sans-serif;
+$textarea-alt-form-font-size: 1.4rem;
+$textarea-alt-text-color: #333332;
+$textarea-alt-outline-color: $au-yellow-400; // au=yellow-400
+$textarea-alt-placeholder-color: #666;
+$textarea-alt-border-color: $au-gray-300;
+
+.auk-textarea-alt {
+ display: inline-block;
+ background: $textarea-alt-page-bg;
+ font-family: $textarea-alt-base-font;
+ font-size: $textarea-alt-form-font-size;
+ color: $textarea-alt-text-color;
+ max-width: 100%;
+ height: auto;
+ line-height: normal;
+ border-radius: 0;
+ border: 0.1rem solid $textarea-alt-border-color;
+ -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+ padding: 0.5rem 1rem;
+
+ &:hover {
+ box-shadow: none;
+ }
+
+ &:focus,
+ &--focus {
+ outline: none;
+ border-color: $textarea-alt-outline-color;
+ box-shadow: inset 0 0 0 0.1rem $textarea-alt-outline-color;
+ }
+
+ &::placeholder {
+ color: $textarea-alt-placeholder-color;
+ }
+
+ // Textarea block modifier
+ &--block {
+ display: block;
+ width: 100%;
+ box-sizing: border-box;
+ }
+}
diff --git a/app/styles/au-kaleidos-css/_auk-textarea.scss b/app/styles/au-kaleidos-css/_auk-textarea.scss
new file mode 100644
index 0000000000..6d56661dcb
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-textarea.scss
@@ -0,0 +1,22 @@
+/* ==========================================================================
+ auk-textarea
+ ========================================================================== */
+
+.auk-textarea {
+ border: 0.1rem solid $au-gray-300;
+ padding: .6rem;
+ width: 100%;
+ font-family: flanders-sans, sans-serif;
+ font-size: 1.5rem;
+ color: $au-gray-800;
+}
+
+.auk-textarea:focus {
+ outline: 0;
+ border-color: $au-yellow-400;
+ box-shadow: inset 0 0 0 0.1rem $au-yellow-400;
+}
+
+.auk-textarea--resize-vertical {
+ resize: vertical;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-toolbar-complex.scss b/app/styles/au-kaleidos-css/_auk-toolbar-complex.scss
new file mode 100644
index 0000000000..6376a97ff5
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-toolbar-complex.scss
@@ -0,0 +1,74 @@
+/* ==========================================================================
+ auk-toolbar-complex (complex variant)
+ ========================================================================== */
+
+.auk-toolbar-complex {
+ min-height: 5rem;
+ width: 100%;
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.auk-toolbar-complex__title {
+ font-size: 2rem;
+ font-weight: 500;
+ margin: 0;
+ display: inline;
+ padding-right: 0.6rem;
+}
+
+.auk-toolbar-complex__title--long {
+ font-size: 1.5rem;
+ font-weight: 400;
+ margin: 0 0 1.5rem;
+ line-height: 1.6;
+ color: $au-gray-800;
+}
+
+.auk-toolbar-complex__title--small {
+ font-size: 1.5rem;
+ font-weight: 500;
+ margin: 0;
+ display: inline;
+}
+
+.auk-toolbar-complex--auto {
+ min-height: auto;
+ height: auto;
+}
+
+.auk-toolbar-complex__left,
+.auk-toolbar-complex__right {
+ flex: 1 1 auto;
+ display: flex;
+ align-items: center;
+ max-width: 100%;
+}
+
+.auk-toolbar-complex__left {
+ justify-content: flex-start;
+}
+
+.auk-toolbar-complex__left .auk-toolbar-complex__item {
+ margin-right: 1rem;
+ max-width: 100%;
+}
+
+.auk-toolbar-complex__left .auk-toolbar-complex__item:only-child {
+ margin: 0;
+}
+
+.auk-toolbar-complex__right {
+ justify-content: flex-end;
+}
+
+.auk-toolbar-complex__right .auk-toolbar-complex__item {
+ margin-left: 1rem;
+ max-width: 100%;
+}
+
+.auk-toolbar-complex__right .auk-toolbar-complex__item:only-child {
+ margin: 0;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-toolbar.scss b/app/styles/au-kaleidos-css/_auk-toolbar.scss
new file mode 100644
index 0000000000..56ba04886d
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-toolbar.scss
@@ -0,0 +1,26 @@
+/* ==========================================================================
+ auk-toolbar (simple variant)
+ ========================================================================== */
+
+.auk-toolbar {
+ display: flex;
+ align-items: center;
+}
+
+.auk-toolbar__title {
+ font-size: 1.8rem;
+ font-weight: 500;
+ margin: 0;
+}
+
+.auk-toolbar__title--long {
+ font-size: 1.5rem;
+ font-weight: 400;
+ margin: 0 0 1.5rem;
+ line-height: 1.6;
+ color: $au-gray-800;
+}
+
+.auk-toolbar__spacer {
+ flex: 1 1 auto;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-tooltip.scss b/app/styles/au-kaleidos-css/_auk-tooltip.scss
new file mode 100644
index 0000000000..9c959aa524
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-tooltip.scss
@@ -0,0 +1,104 @@
+/* ==========================================================================
+ auk-tooltip
+ ========================================================================== */
+
+.ember-tooltip-base {
+ display: none;
+ height: 0;
+ width: 0;
+ position: absolute;
+}
+
+.ember-tooltip {
+ margin-bottom: 10px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ user-select: none;
+ pointer-events: none;
+ position: absolute;
+ z-index: 2;
+
+ font-size: 14px;
+ font-family: inherit;
+ border-radius: 3px;
+ font-weight: initial;
+}
+
+.ember-tooltip {
+ max-width: 250px;
+ padding: 6px 10px;
+ color: #fff;
+ background: #3a3c47;
+ text-shadow: -1px -1px 0 rgba(0,0,0,0.2);
+ white-space: normal; /* IE doesnt support initial so fall back to normal */
+ white-space: initial;
+}
+
+.ember-tooltip-arrow {
+ width: 0;
+ height: 0;
+ border-style: solid;
+ position: absolute;
+ margin: 5px;
+ border: 5px solid transparent;
+}
+
+.ember-tooltip {
+ opacity: 0;
+ -webkit-transition: opacity ease-out, margin ease-out;
+ transition: opacity ease-out, margin ease-out;
+ transition-duration: 200ms;
+}
+
+.ember-tooltip.ember-tooltip-effect-none,
+.ember-tooltip.ember-tooltip-show {
+ opacity: 1;
+}
+
+.ember-tooltip[x-placement^="top"] .ember-tooltip-arrow {
+ border-bottom-width: 0;
+ bottom: -5px;
+ left: calc(50% - 5px);
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.ember-tooltip[x-placement^="top"] .ember-tooltip-arrow {
+ border-top-color: #3a3c47;
+}
+
+.ember-tooltip[x-placement^="right"] .ember-tooltip-arrow {
+ border-left-width: 0;
+ left: -5px;
+ top: calc(50% - 5px);
+ margin-right: 0;
+ margin-left: 0;
+}
+
+.ember-tooltip[x-placement^="right"] .ember-tooltip-arrow {
+ border-right-color: #3a3c47;
+}
+
+.ember-tooltip[x-placement^="bottom"] .ember-tooltip-arrow {
+ border-top-width: 0;
+ top: -5px;
+ left: calc(50% - 5px);
+ margin-bottom: 0;
+ margin-top: 0;
+}
+
+.ember-tooltip[x-placement^="bottom"] .ember-tooltip-arrow {
+ border-bottom-color: #3a3c47;
+}
+
+.ember-tooltip[x-placement^="left"] .ember-tooltip-arrow {
+ border-right-width: 0;
+ right: -5px;
+ top: calc(50% - 5px);
+ margin-left: 0;
+ margin-right: 0;
+}
+
+.ember-tooltip[x-placement^="left"] .ember-tooltip-arrow {
+ border-left-color: #3a3c47;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-u-cursors.scss b/app/styles/au-kaleidos-css/_auk-u-cursors.scss
new file mode 100644
index 0000000000..ef07b869dc
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-u-cursors.scss
@@ -0,0 +1,15 @@
+.auk-u-cursor-grab {
+ cursor: grab !important;
+}
+
+.auk-u-cursor-grab:active {
+ cursor: grabbing !important;
+}
+
+.auk-u-cursor-pointer {
+ cursor: pointer !important;
+}
+
+.auk-u-cursor-default {
+ cursor: default !important;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-u-flex.scss b/app/styles/au-kaleidos-css/_auk-u-flex.scss
new file mode 100644
index 0000000000..507383afa3
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-u-flex.scss
@@ -0,0 +1,89 @@
+/* ==========================================================================
+ Object: Flex
+ ---
+ Object to make a container use flexbox
+ ========================================================================== */
+
+/* Variables
+ ========================================================================== */
+
+$auk-u-flex-gutter-width: 0.8rem !default;
+
+/* Utility classes
+ ========================================================================== */
+
+.auk-u-flex {
+ display: flex !important;
+}
+
+.auk-u-flex--inline {
+ display: inline-flex !important;
+}
+
+.auk-u-flex--vertical {
+ flex-direction: column !important;
+}
+
+.auk-u-flex--vertical-center {
+ align-items: center !important;
+}
+
+.auk-u-flex--horizontal-center {
+ justify-content: center !important;
+}
+
+.auk-u-flex--center {
+ justify-content: center !important;
+ align-items: center !important;
+}
+
+.auk-u-flex--justify-between {
+ justify-content: space-between !important;
+}
+
+.auk-u-flex--justify-around {
+ justify-content: space-around !important;
+}
+
+.auk-u-flex--justify-end {
+ justify-content: flex-end !important;
+}
+
+.auk-u-flex--align-start {
+ align-items: flex-start !important;
+}
+
+.auk-u-flex--align-end {
+ align-items: flex-end !important;
+}
+
+.auk-u-flex--align-baseline {
+ align-items: baseline !important;
+}
+
+.auk-u-flex--wrap {
+ flex-wrap: wrap !important;
+}
+
+.auk-u-flex--align-self-start {
+ align-self: flex-start !important;
+}
+
+.auk-u-flex--spaced > *:not(:last-child) {
+ margin-right: $auk-u-flex-gutter-width !important;
+}
+
+.auk-u-flex--spaced-wide > *:not(:last-child) {
+ margin-right: $auk-u-flex-gutter-width * 2 !important;
+}
+
+/* Flexible items
+ ========================================================================== */
+
+.auk-u-flex__item {
+ flex: 1 !important;
+}
+
+.auk-u-flex__item--shrink {
+ flex: 0 1 0 !important;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-u-generic.scss b/app/styles/au-kaleidos-css/_auk-u-generic.scss
new file mode 100644
index 0000000000..025101aac9
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-u-generic.scss
@@ -0,0 +1,41 @@
+
+/* ==========================================================================
+ Utilities: generic (no category)
+ ========================================================================== */
+
+.auk-u-maximize-width {
+ width: 100% !important;
+}
+
+.auk-u-maximize-height {
+ height: 100% !important;
+}
+
+.auk-u-block {
+ display: block !important;
+}
+
+.auk-u-inline {
+ display: inline !important;
+}
+
+.auk-u-align-middle {
+ vertical-align: middle !important;
+}
+
+.auk-u-sr-only {
+ position: absolute !important;
+ left: -10000px !important;
+ top: auto !important;
+ width: 1px !important;
+ height: 1px !important;
+ overflow: hidden !important;
+}
+
+.auk-u-overflow-hidden {
+ overflow: hidden !important;
+}
+
+.auk-u-bg-alt {
+ background-color: $au-gray-100 !important;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-u-scroll.scss b/app/styles/au-kaleidos-css/_auk-u-scroll.scss
new file mode 100644
index 0000000000..d6a5863835
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-u-scroll.scss
@@ -0,0 +1,13 @@
+
+/* ==========================================================================
+ Utilities: Scroll
+ ========================================================================== */
+
+.auk-u-scroll-scrollable {
+ overflow: auto !important;
+ -webkit-overflow-scrolling: touch !important;
+}
+
+.auk-u-scroll-no-overflow { // Same as existing .vl-u-no-overflow with !important
+ overflow: hidden !important;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-u-spacer.scss b/app/styles/au-kaleidos-css/_auk-u-spacer.scss
new file mode 100644
index 0000000000..34786b211b
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-u-spacer.scss
@@ -0,0 +1,195 @@
+/* ==========================================================================
+ Spacing utitilities
+ ========================================================================== */
+
+/* Margin utilities
+ ========================================================================== */
+
+// All sides
+
+.auk-u-m-0 {
+ margin: 0 !important;
+}
+
+.auk-u-m {
+ margin: .5rem !important;
+}
+
+.auk-u-m-2 {
+ margin: 1rem !important;
+}
+
+.auk-u-m-3 {
+ margin: 1.5rem !important;
+}
+
+.auk-u-m-4 {
+ margin: 2rem !important;
+}
+
+.auk-u-m-8 {
+ margin: 4rem !important;
+}
+
+// Bottom
+
+.auk-u-mb {
+ margin-bottom: .5rem !important;
+}
+
+.auk-u-mb-2 {
+ margin-bottom: 1rem !important;
+}
+
+.auk-u-mb-3 {
+ margin-bottom: 1.5rem !important;
+}
+
+.auk-u-mb-4 {
+ margin-bottom: 2rem !important;
+}
+
+.auk-u-mb-6 {
+ margin-bottom: 3rem !important;
+}
+
+.auk-u-mb-8 {
+ margin-bottom: 4rem !important;
+}
+
+// Top
+
+.auk-u-mt {
+ margin-top: .5rem !important;
+}
+
+.auk-u-mt-2 {
+ margin-top: 1rem !important;
+}
+
+.auk-u-mt-3 {
+ margin-top: 1.5rem !important;
+}
+
+.auk-u-mt-4 {
+ margin-top: 2rem !important;
+}
+
+.auk-u-mt-8 {
+ margin-top: 4rem !important;
+}
+
+
+// Right
+
+.auk-u-mr {
+ margin-right: .5rem !important;
+}
+
+.auk-u-mr-2 {
+ margin-right: 1rem !important;
+}
+
+.auk-u-mr-3 {
+ margin-right: 1.5rem !important;
+}
+
+.auk-u-mr-4 {
+ margin-right: 2rem !important;
+}
+
+// Left
+
+.auk-u-ml {
+ margin-left: .5rem !important;
+}
+
+.auk-u-ml-2 {
+ margin-left: 1rem !important;
+}
+
+.auk-u-ml-3 {
+ margin-left: 1.5rem !important;
+}
+
+// Margin both horizontal sides
+.auk-u-mx {
+ margin: 0 .5rem !important;
+}
+
+.auk-u-mx-2 {
+ margin: 0 1rem !important;
+}
+
+.auk-u-mx-3 {
+ margin: 0 1.5rem !important;
+}
+
+.auk-u-mx-4 {
+ margin: 0 2rem !important;
+}
+
+// Margin both vertical sides
+.auk-u-my {
+ margin: .5rem 0 !important;
+}
+
+.auk-u-my-2 {
+ margin: 1rem 0 !important;
+}
+
+.auk-u-my-3 {
+ margin: 1.5rem 0 !important;
+}
+
+.auk-u-my-4 {
+ margin: 2rem 0 !important;
+}
+
+/* Padding utilities
+ ========================================================================== */
+
+// Reset
+.auk-u-p-0 {
+ padding: 0 !important;
+}
+
+// All sides
+
+.auk-u-p {
+ padding: 0.5rem !important;
+}
+
+.auk-u-p-2 {
+ padding: 1rem !important;
+}
+
+.auk-u-p-3 {
+ padding: 1.5rem !important;
+}
+
+.auk-u-p-4 {
+ padding: 2rem !important;
+}
+
+.auk-u-p-8 {
+ padding: 4rem !important;
+}
+
+// Bottom
+
+.auk-u-pb {
+ padding: 0 0 .5rem !important;
+}
+
+.auk-u-pb-2 {
+ padding: 0 0 1rem !important;
+}
+
+.auk-u-pb-3 {
+ padding: 0 0 1.5rem !important;
+}
+
+.auk-u-pb-4 {
+ padding: 0 0 2rem !important;
+}
diff --git a/app/styles/au-kaleidos-css/_auk-u-text.scss b/app/styles/au-kaleidos-css/_auk-u-text.scss
new file mode 100644
index 0000000000..95a9390c6b
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_auk-u-text.scss
@@ -0,0 +1,51 @@
+/* ==========================================================================
+ Text utilities
+ ========================================================================== */
+
+.auk-u-muted {
+ color: $au-gray-600 !important;
+}
+
+.auk-u-italic {
+ font-style: italic !important;
+}
+
+.auk-u-text-small {
+ font-size: 1.3rem !important;
+}
+
+.auk-u-text-bold {
+ font-weight: 500 !important;
+}
+
+.auk-u-text-normal {
+ font-weight: normal !important;
+}
+
+.auk-u-text-nowrap {
+ white-space: nowrap !important;
+}
+
+.auk-u-text-prewrap {
+ white-space: pre-wrap !important;
+}
+
+.auk-u-text-align--right {
+ text-align: right !important;
+}
+
+.auk-u-text-align--center {
+ text-align: center !important;
+}
+
+.auk-u-text-pre {
+ white-space: pre !important;
+}
+
+.auk-u-text-pre-line {
+ white-space: pre-line !important;
+}
+
+.auk-u-text-decoration-underline {
+ text-decoration: underline !important;
+}
diff --git a/app/styles/au-kaleidos-css/_e-base.scss b/app/styles/au-kaleidos-css/_e-base.scss
new file mode 100644
index 0000000000..d768669b3c
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_e-base.scss
@@ -0,0 +1,40 @@
+/* ==========================================================================
+ e-base
+ ========================================================================== */
+
+*, *:after, *:before {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 62.5%;
+}
+
+body {
+ color: $au-gray-800;
+ line-height: 1.375;
+ font-family: flanders-sans, sans-serif;
+ font-size: 1.5rem;
+}
+
+a {
+ color: $au-blue-700;
+}
+
+strong {
+ font-weight: 500;
+}
+
+i, em {
+ font-style: italic;
+}
+
+hr {
+ border: none;
+ border-top: .1rem solid $au-gray-300;
+}
+
+abbr[title] {
+ text-decoration: none;
+ opacity: 0.5;
+}
diff --git a/app/styles/au-kaleidos-css/_g-font.scss b/app/styles/au-kaleidos-css/_g-font.scss
new file mode 100644
index 0000000000..78b0d09a92
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_g-font.scss
@@ -0,0 +1,87 @@
+/* ==========================================================================
+ Font
+ ========================================================================== */
+
+/* Variables
+ ========================================================================== */
+
+$font-location : "fonts" !default;
+$font-serif-path: "flanders-serif" !default;
+$font-sans-path: "flanders-sans" !default;
+$font-serif-name: "flanders-serif" !default;
+$font-sans-name: "flanders-sans" !default;
+
+/* Content
+ ========================================================================== */
+
+@font-face {
+ font-family: #{$font-serif-name};
+ src: url(#{$font-location}/#{$font-serif-path}-light.woff2) format("woff2"),
+ url(#{$font-location}/#{$font-serif-path}-light.woff) format("woff");
+ font-weight: 300;
+ font-style: normal;
+ font-display: fallback;
+}
+
+@font-face {
+ font-family: #{$font-serif-name};
+ src: url(#{$font-location}/#{$font-serif-path}-regular.woff2) format("woff2"),
+ url(#{$font-location}/#{$font-serif-path}-regular.woff) format("woff");
+ font-weight: 400;
+ font-style: normal;
+ font-display: fallback;
+}
+
+@font-face {
+ font-family: #{$font-serif-name};
+ src: url(#{$font-location}/#{$font-serif-path}-medium.woff2) format("woff2"),
+ url(#{$font-location}/#{$font-serif-path}-medium.woff) format("woff");
+ font-weight: 500;
+ font-style: normal;
+ font-display: fallback;
+}
+
+@font-face {
+ font-family: #{$font-serif-name};
+ src: url(#{$font-location}/#{$font-serif-path}-bold.woff2) format("woff2"),
+ url(#{$font-location}/#{$font-serif-path}-bold.woff) format("woff");
+ font-weight: 700;
+ font-style: normal;
+ font-display: fallback;
+}
+
+@font-face {
+ font-family: #{$font-sans-name};
+ src: url(#{$font-location}/#{$font-sans-path}-light.woff2) format("woff2"),
+ url(#{$font-location}/#{$font-sans-path}-light.woff) format("woff");
+ font-weight: 300;
+ font-style: normal;
+ font-display: fallback;
+}
+
+@font-face {
+ font-family: #{$font-sans-name};
+ src: url(#{$font-location}/#{$font-sans-path}-regular.woff2) format("woff2"),
+ url(#{$font-location}/#{$font-sans-path}-regular.woff) format("woff");
+ font-weight: 400;
+ font-style: normal;
+ font-display: fallback;
+}
+
+@font-face {
+ font-family: #{$font-sans-name};
+ src: url(#{$font-location}/#{$font-sans-path}-medium.woff2) format("woff2"),
+ url(#{$font-location}/#{$font-sans-path}-medium.woff) format("woff");
+ font-weight: 500;
+ font-style: normal;
+ font-display: fallback;
+}
+
+@font-face {
+ font-family: #{$font-sans-name};
+ src: url(#{$font-location}/#{$font-sans-path}-bold.woff2) format("woff2"),
+ url(#{$font-location}/#{$font-sans-path}-bold.woff) format("woff");
+ font-weight: 700;
+ font-style: normal;
+ font-display: fallback;
+}
diff --git a/app/styles/au-kaleidos-css/_reset.scss b/app/styles/au-kaleidos-css/_reset.scss
new file mode 100644
index 0000000000..0c62591d9a
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_reset.scss
@@ -0,0 +1,53 @@
+/* ==========================================================================
+ reset
+ ========================================================================== */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+
+body {
+ line-height: 1;
+}
+
+ol, ul {
+ list-style: none;
+}
+
+blockquote, q {
+ quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
diff --git a/app/styles/au-kaleidos-css/_s-colors.scss b/app/styles/au-kaleidos-css/_s-colors.scss
new file mode 100644
index 0000000000..9578edf039
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_s-colors.scss
@@ -0,0 +1,58 @@
+/* ==========================================================================
+ Colors
+ ========================================================================== */
+
+// Tint & shade helper functions
+// ---
+// Makes a color lighter
+@function tint($color, $percent) {
+ @return mix(#fff, $color, $percent);
+}
+
+// Makes a color darker
+@function shade($color, $percent) {
+ @return mix(#000, $color, $percent);
+}
+
+// Color palette
+$au-white : #FFFFFF;
+$au-black : #000000;
+
+$au-gray-100 : #F4F5F6;
+$au-gray-200 : #E6E8EB;
+$au-gray-300 : #CCD1D9;
+$au-gray-400 : #A1ABBA;
+$au-gray-500 : #8E98A6;
+$au-gray-600 : #69717C;
+$au-gray-700 : #545961;
+$au-gray-800 : #2A2D31;
+$au-gray-900 : #212326;
+$au-gray-1000 : #000000;
+
+$au-blue-100 : #EDF6FF;
+$au-blue-200 : #DCECFD;
+$au-blue-300 : #C1DDFB;
+$au-blue-600 : #0F6FD7;
+$au-blue-700 : #0E5EB8;
+$au-blue-900 : #073261;
+
+$au-yellow-100 : #FFF9D5;
+$au-yellow-200 : #FFF29B;
+$au-yellow-300 : #FEE539;
+$au-yellow-400 : #FFC515;
+$au-yellow-600 : #7F6E3B;
+$au-yellow-900 : #473D21;
+
+$au-red-100 : #FCF3F3;
+$au-red-200 : #F7E3E3;
+$au-red-500 : #FF4141;
+$au-red-600 : #D92626;
+$au-red-700 : #AB1F1F;
+$au-red-900 : #470000;
+
+$au-green-100 : #F7FAE5;
+$au-green-200 : #ECF2CD;
+$au-green-400 : #B3E000;
+$au-green-500 : #8BAE00;
+$au-green-700 : #5F750B;
+$au-green-900 : #323D08;
diff --git a/app/styles/au-kaleidos-css/_s-z-index.scss b/app/styles/au-kaleidos-css/_s-z-index.scss
new file mode 100644
index 0000000000..510c5a8d04
--- /dev/null
+++ b/app/styles/au-kaleidos-css/_s-z-index.scss
@@ -0,0 +1,6 @@
+/* ==========================================================================
+ Z-index
+ ========================================================================== */
+
+$z-index-modal: 3400;
+$z-index-modal-backdrop: 3300;
diff --git a/app/styles/au-kaleidos-css/auk-base.scss b/app/styles/au-kaleidos-css/auk-base.scss
new file mode 100644
index 0000000000..b24e488f46
--- /dev/null
+++ b/app/styles/au-kaleidos-css/auk-base.scss
@@ -0,0 +1,8 @@
+// Settings
+@import 's-colors';
+@import 's-z-index';
+@import 'g-font';
+
+// Build up styles...
+@import '_reset';
+@import '_e-base';
\ No newline at end of file
diff --git a/app/styles/au-kaleidos-css/auk-components.scss b/app/styles/au-kaleidos-css/auk-components.scss
new file mode 100644
index 0000000000..9382869dd0
--- /dev/null
+++ b/app/styles/au-kaleidos-css/auk-components.scss
@@ -0,0 +1,70 @@
+/* ==========================================================================
+ Stylesheet for Kaleidos
+ ========================================================================== */
+
+// Components
+@import 'auk-accordion';
+@import 'auk-alert';
+@import 'auk-alert-stack';
+@import 'auk-app-title';
+@import 'auk-badge';
+@import 'auk-box';
+@import 'auk-brand';
+@import 'auk-breadcrumb';
+@import 'auk-button-link';
+@import 'auk-button-loading';
+@import 'auk-button-toolbar';
+@import 'auk-button';
+@import 'auk-checkbox';
+@import 'auk-code';
+@import 'auk-columns';
+@import 'auk-container';
+@import 'auk-content';
+@import 'auk-empty-state';
+@import 'auk-file-upload';
+@import 'auk-form-group';
+@import 'auk-form-help-text';
+@import 'auk-hr';
+@import 'auk-icon';
+@import 'auk-input';
+@import 'auk-intro';
+@import 'auk-key-value';
+@import 'auk-label-error';
+@import 'auk-label';
+@import 'auk-list';
+@import 'auk-loader';
+@import 'auk-menu';
+@import 'auk-modal';
+@import 'auk-navbar';
+@import 'auk-overline';
+@import 'auk-pagination';
+@import 'auk-panel-layout';
+@import 'auk-panel';
+@import 'auk-pill-list';
+@import 'auk-pill';
+@import 'auk-popover';
+@import 'auk-progress-bar';
+@import 'auk-radio';
+@import 'auk-scroll-wrapper';
+@import 'auk-search-results-list';
+@import 'auk-select';
+@import 'auk-sidebar';
+@import 'auk-status-pill';
+@import 'auk-table';
+@import 'auk-tabs';
+@import 'auk-textarea-alt';
+@import 'auk-textarea';
+@import 'auk-toolbar-complex';
+@import 'auk-toolbar';
+@import 'auk-tooltip';
+
+// Objects
+@import 'auk-o-grid';
+
+// Utilities
+@import 'auk-u-cursors';
+@import 'auk-u-flex';
+@import 'auk-u-generic';
+@import 'auk-u-scroll';
+@import 'auk-u-spacer';
+@import 'auk-u-text';
diff --git a/app/styles/au-kaleidos-css/auk-standalone.scss b/app/styles/au-kaleidos-css/auk-standalone.scss
new file mode 100644
index 0000000000..34c6533178
--- /dev/null
+++ b/app/styles/au-kaleidos-css/auk-standalone.scss
@@ -0,0 +1,6 @@
+// Global variables
+@import '_s-colors';
+@import '_s-z-index';
+
+// Components
+@import 'auk-components';
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-sans-bold.woff b/app/styles/au-kaleidos-css/fonts/flanders-sans-bold.woff
new file mode 100755
index 0000000000..7805b513a6
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-sans-bold.woff differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-sans-bold.woff2 b/app/styles/au-kaleidos-css/fonts/flanders-sans-bold.woff2
new file mode 100755
index 0000000000..912da0640a
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-sans-bold.woff2 differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-sans-light.woff b/app/styles/au-kaleidos-css/fonts/flanders-sans-light.woff
new file mode 100755
index 0000000000..2dbe70c6b6
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-sans-light.woff differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-sans-light.woff2 b/app/styles/au-kaleidos-css/fonts/flanders-sans-light.woff2
new file mode 100755
index 0000000000..b0b3ef7b5e
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-sans-light.woff2 differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-sans-medium.woff b/app/styles/au-kaleidos-css/fonts/flanders-sans-medium.woff
new file mode 100755
index 0000000000..19c10d6337
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-sans-medium.woff differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-sans-medium.woff2 b/app/styles/au-kaleidos-css/fonts/flanders-sans-medium.woff2
new file mode 100755
index 0000000000..5c00fa363e
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-sans-medium.woff2 differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-sans-regular.woff b/app/styles/au-kaleidos-css/fonts/flanders-sans-regular.woff
new file mode 100755
index 0000000000..dd1d7da382
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-sans-regular.woff differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-sans-regular.woff2 b/app/styles/au-kaleidos-css/fonts/flanders-sans-regular.woff2
new file mode 100755
index 0000000000..dde59d5621
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-sans-regular.woff2 differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-serif-bold.woff b/app/styles/au-kaleidos-css/fonts/flanders-serif-bold.woff
new file mode 100755
index 0000000000..aa907f2f4a
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-serif-bold.woff differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-serif-bold.woff2 b/app/styles/au-kaleidos-css/fonts/flanders-serif-bold.woff2
new file mode 100755
index 0000000000..301e526723
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-serif-bold.woff2 differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-serif-light.woff b/app/styles/au-kaleidos-css/fonts/flanders-serif-light.woff
new file mode 100755
index 0000000000..b649eb6f4a
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-serif-light.woff differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-serif-light.woff2 b/app/styles/au-kaleidos-css/fonts/flanders-serif-light.woff2
new file mode 100755
index 0000000000..f3f9e26189
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-serif-light.woff2 differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-serif-medium.woff b/app/styles/au-kaleidos-css/fonts/flanders-serif-medium.woff
new file mode 100755
index 0000000000..3654dfbb8e
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-serif-medium.woff differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-serif-medium.woff2 b/app/styles/au-kaleidos-css/fonts/flanders-serif-medium.woff2
new file mode 100755
index 0000000000..7267766fc4
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-serif-medium.woff2 differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-serif-regular.woff b/app/styles/au-kaleidos-css/fonts/flanders-serif-regular.woff
new file mode 100755
index 0000000000..05ae39770c
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-serif-regular.woff differ
diff --git a/app/styles/au-kaleidos-css/fonts/flanders-serif-regular.woff2 b/app/styles/au-kaleidos-css/fonts/flanders-serif-regular.woff2
new file mode 100755
index 0000000000..0ae3d99e00
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flanders-serif-regular.woff2 differ
diff --git a/app/styles/au-kaleidos-css/fonts/flandersartserif-regular.woff b/app/styles/au-kaleidos-css/fonts/flandersartserif-regular.woff
new file mode 100644
index 0000000000..23c8efa90e
Binary files /dev/null and b/app/styles/au-kaleidos-css/fonts/flandersartserif-regular.woff differ
diff --git a/app/styles/custom-application/extra-fonts.scss b/app/styles/custom-application/extra-fonts.scss
index 4190c1a59f..38cc86c847 100644
--- a/app/styles/custom-application/extra-fonts.scss
+++ b/app/styles/custom-application/extra-fonts.scss
@@ -10,17 +10,13 @@
font-weight: 500;
}
-.vl-typography {
-
+.auk-content {
&--definite {
font-family: 'Flanders Art Serif' !important;
+
h4 {
font-family: 'Flanders Art Serif' !important;
- margin:0 !important;
- font-weight: bold;
- }
- strong {
- font-weight: bold;
+ margin: 0 !important;
}
}
}
diff --git a/app/styles/fixes/_fix-pre.scss b/app/styles/fixes/_fix-pre.scss
index e2271027d1..a7be4ca5c2 100644
--- a/app/styles/fixes/_fix-pre.scss
+++ b/app/styles/fixes/_fix-pre.scss
@@ -1,8 +1,7 @@
// Hotfix for pre styles (code styles)
// See https://github.com/mono-company/digikan/issues/24
-.vl-typography {
-
+.auk-content {
code,
kdb,
samp {
@@ -19,7 +18,6 @@
color: #FFF;
background: none;
}
-
}
pre {
diff --git a/app/styles/govflanders/additions/_typography.scss b/app/styles/govflanders/additions/_typography.scss
index ba9785586d..d3666c344b 100644
--- a/app/styles/govflanders/additions/_typography.scss
+++ b/app/styles/govflanders/additions/_typography.scss
@@ -1,15 +1,3 @@
/* ==========================================================================
Additions
========================================================================== */
-
-// Add utility for muted/secondary text
-.vl-u-text--muted {
- color: $blue-gray-dark
-}
-
-// h4 spacing
-.vl-typography.vl-typography {
- h4 {
- margin: 2rem 0;
- }
-}
diff --git a/app/styles/govflanders/components/_titles.scss b/app/styles/govflanders/components/_titles.scss
index 588e4ece7f..6a1a2e91c9 100644
--- a/app/styles/govflanders/components/_titles.scss
+++ b/app/styles/govflanders/components/_titles.scss
@@ -20,14 +20,3 @@
}
}
}
-
-// apply the same styling for WYSIWYG elements
-@each $level, $settings in $headers-typo {
- .vl-typography h#{$level} { // sass-lint:disable-line force-element-nesting
- @include title($level);
-
- &:not(:first-child) {
- margin-top: 2 * map-get($settings, space);
- }
- }
-}
diff --git a/app/styles/govflanders/components/_typography.scss b/app/styles/govflanders/components/_typography.scss
index 15666aa2b2..ce21161203 100644
--- a/app/styles/govflanders/components/_typography.scss
+++ b/app/styles/govflanders/components/_typography.scss
@@ -1,133 +1,87 @@
// sass-lint:disable force-element-nesting placeholder-in-extend
-.vl-typography ul,
-.ul {
- list-style-type: disc;
-}
-
-.vl-typography ol,
-.ol {
- list-style-type: decimal;
-}
-
-.vl-typography ol,
-.ol,
-.vl-typography ul,
-.ul {
- display: block;
- margin: 1.8rem 0 2rem 1rem;
- padding-left: 2rem;
-
- li {
- display: list-item;
- margin-bottom: 0.5em;
- }
-
- ul {
- list-style-type: circle;
- }
-
- ol {
- list-style-type: decimal;
- }
-
- ul,
- ol {
- margin: 0.5em 0 0.5rem 1.5em;
- }
-}
-
-.vl-typography p,
-.p {
- margin-bottom: 1.8rem;
-
- &:last-child {
- margin-bottom: 0;
- }
-}
-
// styling for all WYSIWYG tags out there
-.vl-typography {
- strong,
- b {
- font-weight: 500;
- }
-
- em,
- i {
- font-style: italic;
- }
-
- strike,
- s {
- text-decoration: line-through;
- }
-
- hr {
- display: block;
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
- margin-left: auto;
- margin-right: auto;
- border: 0;
- border-top: 1px solid $border-color;
- }
-
- table {
- @include data-table;
- margin-bottom: 2rem;
- }
-
- blockquote {
- position: relative;
- padding-left: 9rem;
- font-size: 3.4rem;
- font-weight: 400;
- margin-bottom: 2rem;
- line-height: 1.5;
-
- &::before {
- position: absolute;
- content: "\201C";
- font-size: 9rem;
- left: 0;
- top: 0;
- padding-top: 1rem;
- padding-left: 1rem;
- width: 7rem;
- height: 6rem;
- line-height: 1;
- color: $text-color;
- background: linear-gradient(-110deg, transparent 20px, $accent-color 20px);
- }
- }
-
- pre {
- padding: 1.5rem;
- background-color: $mine-shaft;
- display: block;
- white-space: pre;
- overflow-x: scroll;
- tab-size: 2;
- word-break: normal;
- hyphens: none;
- }
-
- code,
- kdb,
- samp {
- font-family: "monospace";
- background: $athens-gray;
- padding: .2rem;
- }
-
- a {
- text-decoration: underline;
-
- &:hover,
- &:focus {
- text-decoration: none;
- }
- }
-}
+// .vl-typography {
+// strong,
+// b {
+// font-weight: 500;
+// }
+
+// em,
+// i {
+// font-style: italic;
+// }
+
+// strike,
+// s {
+// text-decoration: line-through;
+// }
+
+// hr {
+// display: block;
+// margin-top: 0.5rem;
+// margin-bottom: 0.5rem;
+// margin-left: auto;
+// margin-right: auto;
+// border: 0;
+// border-top: 1px solid $border-color;
+// }
+
+// table {
+// @include data-table;
+// margin-bottom: 2rem;
+// }
+
+// blockquote {
+// position: relative;
+// padding-left: 9rem;
+// font-size: 3.4rem;
+// font-weight: 400;
+// margin-bottom: 2rem;
+// line-height: 1.5;
+
+// &::before {
+// position: absolute;
+// content: "\201C";
+// font-size: 9rem;
+// left: 0;
+// top: 0;
+// padding-top: 1rem;
+// padding-left: 1rem;
+// width: 7rem;
+// height: 6rem;
+// line-height: 1;
+// color: $text-color;
+// background: linear-gradient(-110deg, transparent 20px, $accent-color 20px);
+// }
+// }
+
+// pre {
+// padding: 1.5rem;
+// background-color: $mine-shaft;
+// display: block;
+// white-space: pre;
+// overflow-x: scroll;
+// tab-size: 2;
+// word-break: normal;
+// hyphens: none;
+// }
+
+// code,
+// kdb,
+// samp {
+// font-family: "monospace";
+// background: $athens-gray;
+// padding: .2rem;
+// }
+
+// a {
+// text-decoration: underline;
+
+// &:hover,
+// &:focus {
+// text-decoration: none;
+// }
+// }
+// }