update design example styles

nhsuk · May 1, 2024 · 6614859 · 6614859
1 parent 7e75b5c
commit 6614859
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 15 deletions.
diff --git a/docs/assets/css/_example.scss b/docs/assets/css/_example.scss
@@ -3,9 +3,13 @@
    ========================================================================== */
 
 .app-example {
-  background-color: $color_nhsuk-white;
   border: 1px solid $nhsuk-border-color;
+  padding-top: 30px;
   position: relative;
+
+  @include mq($from: desktop) {
+    padding-top: 34px;
+  }
 }
 
 .app-example__frame {
@@ -24,19 +28,19 @@
 
 .app-example__new-window {
   @include nhsuk-font($size: 14);
-  border: 1px solid $nhsuk-border-color;
+  border-bottom: 1px solid $nhsuk-border-color;
   position: absolute;
-  top: -1px;
-  left: -1px;
+  top: 0;
+  left: 0;
+  width: 100%;
 
   a,
   a:link,
   a:visited {
-    background-color: white;
     color: $color_nhsuk-blue;
     display: block;
     padding: 5px 10px;
-    text-decoration: none;
+    text-decoration: underline;
   }
 
   a:hover {
@@ -48,3 +52,33 @@
     background-color: $nhsuk-focus-color;
   }
 }
+
+:not(pre) > code[class*=language-], pre[class*=language-] {
+  background: $color_nhsuk-white;
+  margin: 0;
+}
+
+.app-copy__button {
+  background-color: $color_nhsuk-white;
+  border: 1px solid $color_nhsuk-green;
+  box-shadow: 0 2px 0 $color_nhsuk-green;
+  color: $color_nhsuk-green;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 2px 8px;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+
+  &:hover {
+    background-color: $color_nhsuk-green;
+    color: $color_nhsuk-white;
+  }
+
+  &:focus {
+    background-color: $nhsuk-focus-color;
+    border-color: $nhsuk-focus-color;
+    box-shadow: 0 -2px $nhsuk-focus-color, 0 4px $nhsuk-focus-text-color;
+    color: $nhsuk-focus-text-color;
+  }
+}
diff --git a/docs/assets/css/_tabs.scss b/docs/assets/css/_tabs.scss
@@ -7,7 +7,6 @@
 }
 
 .app-tabs__list {
-  background: $color_nhsuk-white;
   border: 1px solid $nhsuk-border-color;
   border-top: 0;
   list-style: none;
@@ -25,29 +24,33 @@
 }
 
 .app-tabs__tab {
-  @include nhsuk-font($size: 19, $weight: bold);
-  background-color: $color_nhsuk-white;
+  @include nhsuk-font($size: 19);
   color: $color_nhsuk-blue;
   display: block;
-  padding: 20px;
+  padding: 16px;
   position: relative;
-  text-decoration: none;
+  text-decoration: underline;
+
+  @include mq($from: desktop) {
+    padding: 16px 20px;
+  }
 
   &[aria-selected="true"] {
-    background-color: $color_nhsuk-grey-5;
+    background-color: $color_nhsuk-white;
     color: $color_nhsuk-black;
     margin-bottom: -1px;
     padding-bottom: 21px;
 
     &:focus {
       background-color: $nhsuk-focus-color;
+      box-shadow: 0 -2px $nhsuk-focus-color, inset 0 -4px $nhsuk-focus-text-color;
     }
   }
 }
 
 .app-tabs__panel {
   @include nhsuk-font($size: 16);
-  background-color: $color_nhsuk-grey-5;
+  background-color: $color_nhsuk-white;
   border: 1px solid $nhsuk-border-color;
   border-top: 0;
   position: relative;

diff --git a/docs/components/card-links.md b/docs/components/card-links.md
@@ -7,6 +7,8 @@ tags:
 
 <p class="nhsuk-body-l">Use card links to help users reach the next stage of their NHS App journey.</p>
 
+{% example "cards/card-link.njk" %}
+
 ## When to use
 
 Use card links to take users:
@@ -28,8 +30,6 @@ Use the variation below that fits best with the context.
 
 This is our preferred style. A concise phrase explains where the link goes. It can be read quickly because of the short amount of text.
 
-[embed short card link example]
-
 {% example "cards/card-link.njk" %}
 
 ### Card link with paragraph text