initial commit

2021-06-28 16:36:49 +01:00
parent 992d88a6c8
commit c712d41599
103 changed files with 44862 additions and 0 deletions
@@ -0,0 +1,210 @@
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card {
+  flex-grow: 0;
+  flex-basis: 100%;
+  margin-bottom: 2em;
+}
+
+@media screen and (min-width: 600px) and (max-width: 900px) {
+  .card {
+    flex-basis: 45.99%;
+    // Every card in the first row needs horizontal margin
+    &:nth-child(2n-1) {
+      margin-right: 3%;
+    }
+    // Every card in the second row needs horizontal margin
+    &:nth-child(2n-2) {
+      margin-left: 3%;
+    }
+
+    &.card-3 {
+      flex-basis: 44%;
+      min-height: 300px;
+
+      // &:nth-child(3n-1) {
+      //   margin-left: 3%;
+      //   margin-right: 3%;
+      // }
+    }
+  }
+}
+
+@media screen and (min-width: 900px) {
+  .card {
+    flex-basis: 46%;
+
+    &:nth-child(2n-2) {
+      margin-left: 3%;
+    }
+    &.card-3 {
+      flex-basis: 31%;
+      min-height: 300px;
+
+      &:nth-child(2n-2) {
+        margin-left: 0%;
+      }
+
+      &:nth-child(3n-1) {
+        margin-left: 3%;
+        margin-right: 3%;
+      }
+    }
+  }
+}
+
+html[data-useragent*="MSIE 10.0"] .flex-container {
+  .card {
+    flex-basis: 46%;
+    margin: 3%;
+
+    &.card-3 {
+      flex-basis: 31%;
+    }
+  }
+}
+
+.card {
+  border: 1px solid $govuk-border-colour; //$panel-colour;
+  font-size: 16px;
+  background-color: govuk-colour("light-grey", $legacy: "grey-4");
+
+  &.inactive {
+    color: $govuk-secondary-text-colour;
+  }
+
+  .card-heading {
+    margin-top: 0;
+  }
+
+  .card-body {
+    //border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
+    padding: 12px;
+
+    *:last-child {
+      margin-bottom: 0;
+    }
+
+    &.active {
+      background-color: govuk-colour("light-grey", $legacy: "grey-4");
+      transition: 0.1s ease-in-out;
+
+      .card-heading a {
+        color: $govuk-link-colour;
+        margin-top: 0;
+        &:focus {
+          color: govuk-colour("black", $legacy: "black");
+          outline: 3px solid transparent;
+          box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+        }
+      }
+    }
+
+    .detail-large {
+      color: $govuk-secondary-text-colour;
+      font-size: 32px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .detail {
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+  }
+
+  .card-action {
+    border-top: 0;
+    padding: 12px;
+
+    a {
+      display: inline;
+      border-bottom: 1px solid #c7dceb;
+      color: $govuk-link-colour;
+      line-height: 1.5em;
+
+      &:link,
+      &:visited {
+        color: $govuk-link-colour;
+      }
+
+      &:hover {
+        text-decoration: none;
+        border-bottom: 1px solid $govuk-link-colour;
+        color: #2e8aca;
+      }
+
+      &:focus {
+        color: govuk-colour("black", $legacy: "black");
+        outline: 3px solid transparent;
+        box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+      }
+    }
+
+    ul {
+      margin: 0;
+
+      li {
+        margin: 0 0 1em;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+  &.clear {
+    background-color: govuk-colour("white", $legacy: "white");
+    border: none;
+  }
+}
+
+.js {
+  .card-body.active {
+    &:hover {
+      //background-color: $govuk-link-colour;
+      color: $govuk-link-colour;
+      cursor: pointer;
+      transition: 0.1s ease-in-out;
+      transition-delay: 0.25s;
+
+      .card-heading,
+      p {
+        color: $govuk-link-colour;
+        transition: 0.1s ease-in-out;
+        transition-delay: 0.25s;
+      }
+
+      .card-heading a {
+        color: $govuk-link-colour;
+        transition-delay: 0.25s;
+      }
+
+      .detail-large {
+        color: $govuk-link-colour;
+        transition-delay: 0.25s;
+      }
+    }
+
+    a {
+      text-decoration: none;
+    }
+  }
+}
+
+#inspectorate-card .card-body {
+  padding-top: 20%;
+}
+
+.card-3 .card-body {
+  display: inline-flex;
+  flex-direction: column;
+  min-height: 30vh;
+
+  .cardVieAll {
+    margin-top: auto;
+  }
+}