digital_nsw_template 0.0.1

data/assets/stylesheets/digital_nsw_template/layout/forms.scss

@@ -0,0 +1,385 @@
+label {
+  font-weight: 700;
+  margin-bottom: 0;
+}
+
+label ~ .form-control {
+  margin-top: .5rem;
+}
+
+fieldset {
+  margin: 1.5em 0;
+  padding-bottom: 1em;
+  border-bottom: 1px solid $grey-2a;
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+}
+
+small.form-text {
+  font-size: 100%;
+  line-height: 1.3;
+  margin: 0 0 0.6rem;
+}
+.form-group.radio_buttons, .multiple-choice-group {
+  > small.form-text {
+    margin-bottom: 1.5rem;
+  }
+}
+
+legend, .multiple-choice-group .form-group > label {
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 1.3rem;
+}
+legend.with-label {
+  margin-bottom: 0rem;
+}
+
+
+.multiple-choice-group .additional-fields {
+  border-left: 10px solid $grey-2;
+  margin: 1.5rem 0;
+  padding: .5rem 1rem;
+
+  .form-group > label {
+    margin-bottom: 0;
+  }
+
+  fieldset:first-of-type {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  fieldset:last-of-type {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+}
+
+.form-check {
+  padding-bottom: 1rem;
+
+  small {
+    margin: 0;
+    padding-left: 1.6rem;
+  }
+
+  label small {
+    padding-left: 0;
+  }
+}
+
+.expanding-list {
+  ol {
+    padding-left: 0;
+    margin-top: 0.75rem;
+
+    li {
+      list-style: none;
+    }
+    li.removed {
+      opacity: 0.8;
+      color: #666;
+
+      label {
+        text-decoration: line-through;
+      }
+
+      input {
+        text-decoration: line-through;
+      }
+    }
+  }
+
+  .delete-action a {
+    margin-top: 1rem;
+  }
+
+  &.with-inline-labels {
+    input[type=text] {
+      padding-left: 2.2rem;
+    }
+
+    li {
+      @include make-row();
+    }
+
+    .form-group {
+      @include make-col-ready();
+
+      @include media-breakpoint-up(md) {
+        @include make-col(8);
+      }
+
+      margin-top: 0.4rem;
+      margin-bottom: 0.4rem;
+    }
+
+    .form-group label {
+      position: absolute;
+      padding: 0.46rem 0 0 0.8rem;
+      z-index: 1;
+      font-size: 16px;
+
+      & + .form-control {
+        margin-top: 0;
+      }
+    }
+
+    li.removed .previous-value {
+      padding: 0.46rem 0 0 2.3rem;
+    }
+
+    .delete-action {
+      @include make-col-ready();
+
+      @include media-breakpoint-up(md) {
+        @include make-col(3);
+      }
+
+      a {
+        display: inline-block;
+      }
+    }
+  }
+
+  &.with-nested-blocks {
+    li {
+      border-left: 10px solid $grey-2;
+      margin: 1.5rem 0;
+      padding: 0 1rem;
+    }
+  }
+}
+
+/* Buttons */
+
+form .actions {
+  padding-top: 1rem;
+
+  &:first-of-type {
+    border-top: 1px solid $grey-2a;
+  }
+}
+
+/* Text boxes */
+
+textarea, input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=url], select {
+  &.form-control {
+    border-radius: 0px;
+    border: 2px solid $black;
+
+    &:focus {
+      box-shadow: none !important;
+      border-color: $black;
+      outline: 3px solid $focus-colour;
+      outline-offset: 0;
+    }
+
+    &.is-invalid {
+      border-color: $red;
+      border-width: 3px;
+    }
+  }
+}
+
+/* Checkboxes */
+
+input[type=checkbox], input[type=radio] {
+  position: absolute;
+  cursor: pointer;
+  left: 0;
+  top: 0;
+  width: 38px;
+  height: 38px;
+  z-index: 1;
+  margin: 0;
+  zoom: 1;
+  filter: alpha(opacity=0);
+  opacity: 0;
+
+  &:focus {
+    outline: 3px solid $focus-colour;
+    outline-offset: 0;
+  }
+}
+input[type=checkbox] + label, input[type=radio] + label {
+  padding: 6px 10px 0 25px;
+  font-weight: normal;
+  margin-bottom: 0;
+}
+input[type=checkbox]:checked + label, input[type=radio]:checked + label{
+  font-weight: 700;
+
+  strong {
+    font-weight: 700;
+  }
+}
+input[type=checkbox]:focus + label::before, input[type=radio]:focus + label::before {
+  box-shadow: 0 0 0 4px $focus-colour;
+}
+
+input[type=checkbox] + label::before {
+  content: "";
+  border: 2px solid;
+  background: transparent;
+  width: 34px;
+  height: 34px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+input[type=checkbox] + label::after {
+  content: "";
+  border: solid;
+  border-width: 0 0 4px 4px;
+  background: transparent;
+  border-top-color: transparent;
+  width: 19px;
+  height: 10px;
+  position: absolute;
+  top: 10px;
+  left: 8px;
+  -moz-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  zoom: 1;
+  filter: alpha(opacity=0);
+  opacity: 0;
+}
+input[type=checkbox]:checked + label::after {
+  zoom: 1;
+  filter: alpha(opacity=100);
+  opacity: 1;
+  font-weight: 500;
+}
+
+.form-check-input.is-invalid ~ .form-check-label {
+  color: $black;
+
+  &::before {
+    border-color: $black;
+  }
+}
+.form-check-input.is-invalid ~ .invalid-feedback {
+  padding-left: 1.6rem;
+}
+.form-check-input:disabled ~ .form-check-label {
+  &::before {
+    border-color: $grey-2;
+  }
+}
+
+/* Radio buttons */
+
+input[type=radio] + label::before {
+  content: "";
+  border: 2px solid;
+  background: transparent;
+  width: 34px;
+  height: 34px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+
+input[type=radio] + label::after {
+  content: "";
+  border: 10px solid;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 7px;
+  left: 7px;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  zoom: 1;
+  filter: alpha(opacity=0);
+  opacity: 0;
+}
+input[type=radio]:checked + label::after {
+  zoom: 1;
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+
+// Inline date fields
+
+.date-field {
+  padding-top: .5rem;
+
+  .form-group {
+    display: inline-block;
+    padding-right: 1em;
+    margin-bottom: .5rem;
+  }
+  legend {
+    margin-bottom: 0;
+  }
+
+  label {
+    display: block;
+    margin-bottom: .2rem;
+    font-weight: normal;
+
+    &.primary-label {
+      width: 100%;
+      font-weight: 700;
+      margin-bottom: .3rem;
+    }
+  }
+  .day, .month {
+    width: 3em;
+  }
+  .year {
+    width: 5em;
+  }
+
+  &.form-group-invalid {
+    input[type=text] {
+      border-color: $red;
+      border-width: 3px;
+    }
+  }
+}
+
+// Custom file input
+
+input[type=file]:focus, input[type=file]:focus + .custom-file-label {
+  outline: 3px solid $focus-colour;
+  outline-offset: 0;
+}
+
+.custom-file-label {
+  color: #888;
+}
+
+.custom-file-input.with-attached-file + .custom-file-label {
+  color: #000;
+}
+
+// Word count
+
+*[data-module=max-word-count] .form-group {
+  overflow: auto;
+}
+
+.word-count-label {
+  display: block;
+  padding: .6rem .3rem 0 3rem;
+
+  float: right;
+  text-align: right;
+
+  &.invalid {
+    color: $red;
+  }
+}

data/assets/stylesheets/digital_nsw_template/layout/grid.scss

@@ -0,0 +1,33 @@
+@mixin one-third($inside-row: false) {
+  @if $inside-row == true {
+    @include make-col-ready;
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(4);
+  }
+}
+
+@mixin two-thirds($inside-row: false) {
+  @if $inside-row == true {
+    @include make-col-ready;
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(8);
+  }
+}
+
+.one-third {
+  @include one-third;
+}
+.one-third-inside-row {
+  @include one-third($inside-row: true);
+}
+
+.two-thirds {
+  @include two-thirds;
+}
+.two-thirds-inside-row {
+  @include two-thirds($inside-row: true);
+}

data/assets/stylesheets/digital_nsw_template/layout/header.scss

@@ -0,0 +1,107 @@
+header.global {
+  background: $dark-blue;
+  color: #fff;
+
+  @include media-breakpoint-up(md) {
+    height: 100px;
+  }
+
+  h1 {
+    @include make-col-ready();
+
+    @include media-breakpoint-up(sm) {
+      @include make-col(5);
+    }
+
+    @include logo;
+
+    font-size: 1.4rem;
+    margin-bottom: 0;
+
+    /* TODO: Update this in the future to be consistent with email logo */
+
+    .logo-container {
+      height: 2.85em;
+      width: auto;
+      padding: .35em;
+    }
+
+    span.logo {
+      height: 2.14em;
+      width: 2em;
+    }
+    span.site-title {
+      margin-top: 1.25em;
+      margin-left: .8em;
+    }
+
+    @include media-breakpoint-up(md) {
+      font-size: 2.2rem;
+
+      span.site-title {
+        font-size: 1.8rem;
+        margin-top: 3.2rem;
+      }
+    }
+  }
+
+  aside {
+    @include make-col-ready();
+
+    font-size: .9rem;
+    background: $light-purple;
+    border-bottom: 1px solid darken($light-purple, 5%);
+    color: $black;
+    padding: .5rem 1rem;
+
+    @include media-breakpoint-up(sm) {
+      @include make-col(7);
+
+      background: transparent;
+      border-bottom: none;
+      color: $white;
+      text-align: right;
+      font-size: .8rem;
+      margin-top: 1rem;
+      padding: 0 15px;
+
+      a {
+        color: $white;
+        text-decoration: none;
+        font-weight: bold;
+
+        &:focus {
+          color: $black;
+        }
+      }
+    }
+
+    @include media-breakpoint-up(md) {
+      font-size: 1rem;
+      margin-top: 1.9rem;
+    }
+
+    p.signed-in-user {
+      display: block;
+      font-size: 1em;
+      margin-bottom: 0;
+      font-weight: 500;
+    }
+    ul {
+      padding-left: 0;
+      display: inline-block;
+      font-weight: 400;
+      margin-bottom: 0;
+    }
+    li {
+      display: inline-block;
+      list-style: none;
+      padding-right: 1em;
+
+      @include media-breakpoint-up(sm) {
+        padding-left: 1em;
+        padding-right: 0;
+      }
+    }
+  }
+}

data/assets/stylesheets/digital_nsw_template/layout/hidden.scss

@@ -0,0 +1,8 @@
+.visually-hidden {
+  position: absolute;
+  left: -9999em;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden
+}

data/assets/stylesheets/digital_nsw_template/layout/skip-link.scss

@@ -0,0 +1,32 @@
+/*
+  The styling for the skip link is based on the GOV.UK Template:
+    https://github.com/alphagov/govuk_template/blob/master/source/assets/stylesheets/_accessibility.scss
+*/
+
+#skip-link-container {
+  text-align: center;
+  background: $dark-blue;
+
+  div {
+    text-align: left;
+    margin: 0 auto;
+    max-width: 1020px;
+  }
+
+  .skip-link {
+    display: inline-block;
+    margin: 0.75em 0 0 30px;
+    position: absolute;
+    left: -9999em;
+
+    &:focus,
+    &:visited {
+      color: $black;
+    }
+
+    &:focus {
+      left: 0;
+      z-index: 1;
+    }
+  }
+}

data/assets/stylesheets/digital_nsw_template/layout/typography.scss

@@ -0,0 +1,37 @@
+body {
+  font-size: 17px;
+}
+
+h1, h2, h3, h4 {
+  font-weight: 700;
+  margin-bottom: 0.8em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.6rem;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+a {
+  color: $dark-blue;
+  text-decoration: underline;
+
+  &:hover {
+    color: darken($dark-blue, 10%);
+  }
+
+  &:focus {
+    background-color: $focus-colour;
+    outline: 3px solid $focus-colour;
+  }
+  &:link:focus {
+    color: $black;
+  }
+}

data/assets/stylesheets/digital_nsw_template/patterns/breadcrumbs.scss

@@ -0,0 +1,26 @@
+nav.breadcrumbs {
+  ol {
+    padding: 0;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+
+    li {
+      display: inline-block;
+      list-style: none;
+
+      &:not(:last-of-type)::after {
+        content: ">";
+
+        color: #888;
+        font-size: 1.3rem;
+        font-weight: 100;
+
+        vertical-align: middle;
+        display: inline-block;
+        margin-top: -.3rem;
+        padding: 0 0.1rem 0 .5rem;
+      }
+    }
+  }
+}

data/assets/stylesheets/digital_nsw_template/patterns/buttons.scss

@@ -0,0 +1,90 @@
+@mixin base-button {
+  border-radius: 0px;
+  border: none;
+  display: block;
+  color: $white;
+  font-size: 1.2rem;
+  font-weight: 600;
+  padding: 0.4em 1.2em;
+  text-align: center;
+  text-decoration: none;
+  transition: none;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 100%;
+
+  @include media-breakpoint-up(md) {
+    display: inline-block;
+    width: auto;
+  }
+
+  &:focus {
+    outline: 3px solid $focus-colour;
+    color: $white;
+  }
+
+  &.disabled,
+  &:disabled {
+    opacity: $btn-disabled-opacity;
+    @include box-shadow(none);
+  }
+
+  &:not(:disabled):not(.disabled) {
+    cursor: pointer;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    background-image: none;
+    @include box-shadow($btn-active-box-shadow);
+
+    &:focus {
+      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+    }
+  }
+}
+
+@mixin button-block {
+  @include media-breakpoint-up(md) {
+    display: block;
+  }
+}
+
+@mixin button-primary {
+  @include base-button;
+
+  background: $light-blue;
+
+  &:hover, &:focus {
+    background: darken($light-blue, 15%);
+    border-bottom-color: darken($light-blue, 20%);
+  }
+
+  border-bottom: 4px solid darken($light-blue, 8%);
+}
+
+@mixin button-danger {
+  @include base-button;
+
+  background: $red;
+
+  &:hover, &:focus {
+    background: darken($red, 15%);
+    border-bottom-color: darken($red, 20%);
+  }
+
+  border-bottom: 4px solid darken($red, 8%);
+}
+
+@mixin button {
+  @include button-primary;
+}
+
+.btn, a.btn:link, a.button, a.button:link, button, input[type=submit], .button, .btn-primary, .btn-secondary {
+  @include button-primary;
+}
+
+.btn-danger {
+  @include button-danger;
+}