katalyst-koi 4.18.1 → 5.0.0.alpha.1

data/app/assets/stylesheets/koi/base/_link.scss

@@ -1,26 +0,0 @@
-a[href]:not([class]) {
-  color: var(--site-link);
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    color: var(--site-link);
-    text-decoration: underline;
-    outline: none;
-  }
-
-  &.no-hover-link {
-    text-decoration: none;
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
-  }
-
-  &[disabled] {
-    color: var(--site-disabled);
-    pointer-events: none;
-    opacity: 0.45;
-  }
-}

data/app/assets/stylesheets/koi/base/_list.scss

@@ -1,11 +0,0 @@
-ol,
-ul {
-  margin: 0;
-  padding-left: 3ch;
-}
-
-ul.no-bullet {
-  padding-left: 0;
-  list-style-type: none;
-  max-width: none;
-}

data/app/assets/stylesheets/koi/base/_typography.scss

@@ -1,160 +0,0 @@
-$font-sizes: (
-  h1: 3.3125rem,
-  h2: 2rem,
-  h3: 1.5rem,
-  h4: 1.125rem,
-  h5: 1.125rem,
-  h6: 1rem,
-  paragraph: 1rem,
-  small: 0.875rem,
-) !default;
-
-$line-heights: (
-  h1: 1.03em,
-  h2: 1.09em,
-  h3: 1.04em,
-  h4: 1.11em,
-  h5: 1.11em,
-  // used for labels
-  h6: 1.5em,
-  paragraph: 1.14em,
-  small: 1.25em,
-) !default;
-
-@use "../utils/breakpoints";
-@use "../utils/typography" as * with (
-  $-font-sizes: $font-sizes,
-  $-line-heights: $line-heights
-);
-
-:root {
-  font-family: "Inter", sans-serif;
-  font-size: 100%; // defaults to 16px
-  color: var(--site-text-color);
-
-  /* Text-size styles */
-  /* base size: paragraph (16px) */
-  --heading--h1: #{font-size(h1)};
-  --heading--h2: #{font-size(h2)};
-  --heading--h3: #{font-size(h3)};
-  --heading--h4: #{font-size(h4)};
-  --heading--h5: #{font-size(h5)};
-  --heading--h6: #{font-size(h6)};
-  --paragraph: #{font-size(paragraph)};
-  --paragraph--strong: #{font-size(paragraph)};
-  --paragraph--em: #{font-size(paragraph)};
-  --paragraph--small: #{font-size(small)};
-  --text-width: 70ch;
-}
-
-@supports (font-variation-settings: normal) {
-  :root {
-    font-family: "Inter var", sans-serif;
-  }
-}
-
-h1,
-.heading-one {
-  font-size: var(--heading--h1);
-  font-weight: 400;
-  line-height: line-height(h1);
-  margin-bottom: 0.25em;
-  letter-spacing: -0.015em;
-  color: var(--site-text-color);
-}
-
-h2,
-.heading-two {
-  font-size: var(--heading--h2);
-  font-weight: 400;
-  line-height: line-height(h2);
-  margin-bottom: 0.25em;
-  letter-spacing: -0.015em;
-  color: var(--site-text-color);
-}
-
-h3,
-.heading-three {
-  font-size: var(--heading--h3);
-  font-weight: 400;
-  line-height: line-height(h3);
-  margin: 0 0 0.25em;
-  letter-spacing: -0.015em;
-  color: var(--site-text-color);
-}
-
-h4,
-.heading-four {
-  font-size: var(--heading--h4);
-  font-weight: 400;
-  line-height: line-height(h4);
-  margin: 0 0 0.25em;
-  letter-spacing: -0.015em;
-  color: var(--site-text-color);
-}
-
-h5,
-.heading-five {
-  font-size: var(--heading--h5);
-  font-weight: 400;
-  line-height: line-height(h5);
-  margin: 0 0 0.25em;
-  letter-spacing: -0.015em;
-  color: var(--site-text-color);
-}
-
-h6,
-.heading-six {
-  font-size: var(--heading--h6);
-  font-weight: 400; // Bold
-  line-height: line-height(h6);
-  margin: 0 0 0.25em;
-  letter-spacing: -0.015em;
-  color: var(--site-text-color);
-}
-
-label {
-  font-size: var(--heading-h6);
-  font-weight: 500; // Bold
-  line-height: line-height(h6);
-  margin-bottom: 0.125rem;
-  letter-spacing: 0.01em;
-  color: var(--site-text-color);
-}
-
-p,
-.body-one {
-  font-size: var(--paragraph);
-  line-height: line-height(paragraph);
-  letter-spacing: 0.01em;
-  color: var(--site-text-color);
-}
-
-small,
-em {
-  font-size: var(--paragraph--em);
-  line-height: line-height(paragraph);
-  letter-spacing: 0.01em;
-  font-weight: 300;
-  color: var(--site-text-color);
-}
-
-strong {
-  font-size: var(--paragraph--strong);
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  color: var(--site-text-color);
-}
-
-h1,
-h2,
-h3,
-h4,
-p,
-small,
-legend,
-label,
-input,
-textarea {
-  max-width: var(--text-width);
-}

data/app/assets/stylesheets/koi/components/_actions-group.scss

@@ -1,7 +0,0 @@
-.actions-group,
-.actions {
-  display: flex;
-  align-items: stretch;
-  flex-direction: row;
-  column-gap: 0.5rem;
-}

data/app/assets/stylesheets/koi/components/_image-field.scss

@@ -1,95 +0,0 @@
-.govuk-image-field {
-  display: grid;
-  grid-template-areas:
-    "label preview"
-    "hint preview"
-    "error preview"
-    "file preview"
-    "supplemental supplemental";
-  grid-template-columns: 1fr auto;
-  grid-template-rows: auto auto auto 1fr auto;
-  gap: 0 1rem;
-  max-width: var(--text-width);
-
-  label {
-    grid-area: label;
-  }
-
-  .govuk-hint {
-    grid-area: hint;
-  }
-
-  .govuk-error-message {
-    grid-area: error;
-  }
-
-  input {
-    grid-area: file;
-    align-self: start;
-  }
-
-  .govuk-file-upload {
-    margin-left: 0;
-    padding: 3px;
-  }
-
-  .preview-image {
-    grid-area: preview;
-    position: relative;
-    display: grid;
-    overflow: visible;
-    align-self: start;
-    align-items: center;
-    justify-items: center;
-    background-color: #f4f4f4;
-    border: 2px solid black;
-
-    min-width: calc(8rem + 4px);
-    min-height: calc(8rem + 4px);
-
-    .image-thumbnail {
-      max-width: 8rem;
-      max-height: 8rem;
-    }
-
-    .file-destroy {
-      appearance: none;
-      position: absolute;
-      background-color: rgba(0, 0, 0, 0.6);
-      color: white;
-      border-radius: 1rem;
-      border: none;
-      display: block;
-      padding: 0;
-      bottom: -10px;
-      right: 50%;
-      margin-right: -10px;
-
-      &::after {
-        content: "×";
-        display: block;
-        position: relative;
-        width: 21px;
-        line-height: 21px;
-        font-size: 21px;
-        top: -1px;
-      }
-    }
-  }
-
-  > div:last-child {
-    grid-area: supplemental;
-  }
-
-  .govuk-form-group {
-    margin-top: 30px;
-  }
-
-  .preview-image.hidden {
-    display: block !important;
-
-    .file-destroy {
-      display: none;
-    }
-  }
-}

data/app/assets/stylesheets/koi/components/_index.scss

@@ -1,9 +0,0 @@
-@use "actions-group";
-@use "clipboard";
-@use "document-field";
-@use "image-field";
-@use "index-actions";
-@use "pagy";
-@use "query";
-@use "summary-list";
-@use "toolbar";

data/app/assets/stylesheets/koi/components/_pagy.scss

@@ -1,29 +0,0 @@
-@use "../base/button" as *;
-
-.pagy.nav a {
-  @include button-text;
-  border: 2px solid transparent;
-
-  &[aria-disabled] {
-    pointer-events: none;
-    color: var(--site-disabled);
-    font-weight: 500;
-  }
-
-  &[aria-current] {
-    @include button-outline;
-    pointer-events: none;
-  }
-
-  &[href]:hover {
-    text-decoration: none;
-  }
-
-  &:first-child {
-    padding-left: 0;
-  }
-
-  &:last-child {
-    padding-right: 0;
-  }
-}

data/app/assets/stylesheets/koi/components/_summary-list.scss

@@ -1,40 +0,0 @@
-$grey: #f0ecf3 !default;
-
-$table-header-color: transparent !default;
-$row-border-color: $grey !default;
-$row-height: 48px !default;
-
-.summary-list {
-  --row-height: #{$row-height};
-  --table-header-color: #{$table-header-color};
-  --row-border-color: #{$row-border-color};
-}
-
-.summary-list {
-  display: grid;
-  margin: 1rem 0;
-  border-bottom: 1px solid var(--row-border-color);
-  grid-template-columns: 1fr 3fr;
-  grid-auto-flow: row;
-  grid-auto-rows: auto;
-
-  dt,
-  dd {
-    display: flex;
-    align-items: center;
-    border-top: 1px solid var(--row-border-color);
-    padding: 0.5rem 1rem;
-    min-height: var(--row-height);
-    line-height: 1.5rem;
-  }
-
-  dt {
-    font-weight: bold;
-    padding-left: 0;
-    grid-column-start: 1;
-  }
-
-  dd {
-    grid-column-start: 2;
-  }
-}

data/app/assets/stylesheets/koi/layouts/_banner.scss

@@ -1,7 +0,0 @@
-%banner {
-  line-height: 2rem;
-  text-align: center;
-  color: #eee;
-  background: #555;
-  box-shadow: inset 0 -1px 4px #333;
-}

data/app/assets/stylesheets/koi/layouts/_content.scss

@@ -1,40 +0,0 @@
-@use "header";
-@use "flash";
-
-$inset: 1rem !default;
-$space: 1rem !default;
-
-%content {
-  margin: $space $inset;
-  display: grid;
-  grid-template-columns: minmax(auto, 72rem);
-  grid-template-areas: "main";
-  grid-gap: $space;
-  max-width: 72rem;
-
-  > [role="main"] {
-    grid-area: main;
-  }
-
-  &.has-sidebar {
-    grid-template-columns: minmax(auto, 2fr) minmax(auto, 1fr);
-    grid-template-areas: "main sidebar";
-    max-width: (72rem + 36rem);
-
-    > [role="main"] {
-      grid-column: 1/2;
-    }
-  }
-
-  .page--sidebar {
-    grid-area: sidebar;
-    > * {
-      position: sticky;
-      top: $space;
-    }
-  }
-
-  #flash {
-    @include flash.flash;
-  }
-}

data/app/assets/stylesheets/koi/layouts/_flash.scss

@@ -1,41 +0,0 @@
-@mixin flash {
-  padding: 0;
-
-  li {
-    display: flex;
-    justify-content: space-between;
-    min-height: 3rem;
-    line-height: 3rem;
-    padding: 0 1.5rem;
-    list-style: none;
-    grid-area: status;
-    font-weight: bold;
-    border: 1px solid var(--flash-color);
-    color: var(--flash-color);
-  }
-
-  button {
-    display: inline;
-    background: white;
-    border: none;
-    color: var(--flash-color);
-    cursor: pointer;
-  }
-
-  .alert {
-    --flash-color: var(--site-alert);
-  }
-
-  .notice {
-    --flash-color: var(--site-notice);
-  }
-
-  .success {
-    --flash-color: var(--site-success);
-  }
-
-  .warning,
-  .error {
-    --flash-color: var(--site-warning);
-  }
-}

data/app/assets/stylesheets/koi/layouts/_header.scss

@@ -1,61 +0,0 @@
-$inset: 2rem !default;
-
-$title: 4rem;
-$breadcrumbs: 3rem;
-$actions: 3rem;
-$height: $title + $breadcrumbs + $actions;
-
-@mixin list($separator, $margin: 1em, $padding: 0.5em) {
-  display: flex;
-  align-items: center;
-  list-style-position: outside;
-  margin-inline: $inset;
-
-  > * {
-    display: list-item;
-    margin-inline-start: $margin;
-    padding-inline-start: $padding;
-  }
-
-  > *::marker {
-    content: $separator;
-    color: rgba(0, 0, 0, 0.4);
-  }
-
-  > *:first-child {
-    display: block;
-    margin-inline-start: 0;
-    padding-inline-start: 0;
-  }
-}
-
-%header {
-  border-bottom: 1px solid #ececec;
-  color: #b2b2b2;
-  background: #ececec;
-
-  display: grid;
-  grid-template-areas: "breadcrumbs" "title" "actions";
-  grid-template-rows: $breadcrumbs $title $actions;
-
-  .heading {
-    grid-area: title;
-    margin: 0 $inset;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .breadcrumbs {
-    grid-area: breadcrumbs;
-
-    @include list("›");
-  }
-
-  .actions {
-    grid-area: actions;
-    gap: 0;
-
-    @include list("|", $margin: 0.8em);
-  }
-}

data/app/assets/stylesheets/koi/layouts/_index.scss

@@ -1,48 +0,0 @@
-@use "navigation" as *;
-@use "main" as *;
-@use "banner" as *;
-@use "stack";
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-}
-
-body {
-  display: grid;
-  grid-template-areas: "banner banner" "navigation main";
-  grid-template-rows: auto 1fr;
-  grid-template-columns: auto 3fr;
-}
-
-body > header {
-  grid-area: banner;
-  height: 2rem;
-  overflow-y: auto;
-  @extend %banner;
-}
-
-body > nav {
-  grid-area: navigation;
-  height: 100%;
-  overflow-y: auto;
-  width: 2rem;
-  transition: width 0.25s;
-  @extend %navigation;
-
-  &[aria-expanded] {
-    width: 17rem;
-  }
-}
-
-.navigation-collapse {
-  grid-area: navigation;
-}
-
-body > main {
-  grid-area: main;
-  height: 100%;
-  overflow: clip auto;
-  @extend %main;
-}

data/app/assets/stylesheets/koi/layouts/_main.scss

@@ -1,23 +0,0 @@
-@use "header" as * with (
-  $inset: 2rem
-);
-@use "content" as * with (
-  $inset: 2rem,
-  $space: 2rem
-);
-
-%main {
-  display: grid;
-  grid-template-areas: "header" "content";
-  grid-template-rows: auto 1fr;
-
-  > header {
-    grid-area: header;
-    @extend %header;
-  }
-
-  > .page {
-    grid-area: content;
-    @extend %content;
-  }
-}