@hmcts/media-viewer 4.2.42-CME-776-dart-angular-20 → 4.2.42

package/README.md

@@ -495,14 +495,14 @@ Add these styles to your component.scss if you need them.
 If you're writing your own toolbar styles then do not import those
 
 ```
-// Load GOV.UK Frontend
-@use "govuk-frontend/govuk/all" as *;
-// Load Media Viewer Styles
-@use "media-viewer/src/assets/all"; // use this to load all the styles
+// Import GOV.UK Frontend
+@import "~govuk-frontend/govuk/all";
+// Import Media Viewer Styles
+@import "~media-viewer/src/assets/all"; // use this to import all the styles 
 ```
 Alternatively, it is possible to import file by file as required from ```assets/sass``` directory 
 
-eg. ```media-viewer/assets/sass/toolbar/main```
+eg. ```~media-viewer/assets/sass/toolbar/main```
 
 ## Customisations
 ### Toolbar

package/assets/all.scss

@@ -1,34 +1,36 @@
 // CDK overlays require a small set of structural styles to work correctly
 // As the component is not yet using Angular Material we have to include the style ourself
 // see https://material.angular.io/cdk/overlay/overview
-@use '@angular/cdk/overlay-prebuilt';
+@import 'node_modules/@angular/cdk/overlay-prebuilt';
 
-@use 'sass/annotation-set';
-@use 'sass/bookmarks';
-@use 'sass/box-highlight';
-@use 'sass/comment';
-@use 'sass/comment-search';
-@use 'sass/comment-set-header';
-@use 'sass/comment-set-panel';
-@use 'sass/comment-set-toggle';
-@use 'sass/comments-summary-dialog';
-@use 'sass/confirm-action-dialog';
-@use 'sass/document';
-@use 'sass/image-viewer';
-@use 'sass/media-viewer';
-@use 'sass/outline-attachment';
-@use 'sass/participants-list';
-@use 'sass/pdf-viewer';
-@use 'sass/popup-toolbar';
-@use 'sass/rectangle';
-@use 'sass/tags';
-@use 'sass/toolbar/main';
-@use 'sass/tabs';
-@use 'sass/tooltip';
-@use 'sass/comment-filter';
-@use 'sass/angular-tree-component';
-@use 'sass/redaction';
-@use 'pdfjs/pdf_viewer';
+@import 'sass/settings';
+@import "sass/annotation-set";
+@import 'sass/bookmarks.scss';
+@import "sass/box-highlight";
+@import "sass/bookmarks";
+@import "sass/comment";
+@import "sass/comment-search";
+@import "sass/comment-set-header";
+@import "sass/comment-set-panel";
+@import "sass/comment-set-toggle";
+@import "sass/comments-summary-dialog";
+@import "sass/confirm-action-dialog";
+@import 'sass/document';
+@import "sass/image-viewer";
+@import 'sass/media-viewer';
+@import 'sass/outline-attachment';
+@import 'sass/participants-list';
+@import "sass/pdf-viewer";
+@import "sass/popup-toolbar";
+@import "sass/rectangle";
+@import "sass/tags";
+@import "sass/toolbar/main";
+@import 'sass/tabs';
+@import 'sass/tooltip';
+@import 'sass/comment-filter';
+@import 'sass/angular-tree-component';
+@import 'sass/redaction';
+@import 'pdfjs/pdf_viewer';
 div.govuk-prose-scope, p {
   white-space: pre-wrap;
 }

package/assets/sass/comment-filter.scss

@@ -1,5 +1,3 @@
-@use "govuk-frontend/govuk/base" as *;
-
 .comment-filter {
   border: none;
   margin-bottom: 20px;
@@ -74,10 +72,8 @@
   font-weight: bold;
   position: relative;
   @include govuk-font($size: 19);
-  & {
-    color: govuk-colour("blue");
-    cursor: pointer;
-  }
+  color: govuk-colour("blue");
+  cursor: pointer;
 
 }
 

package/assets/sass/comment-search.scss

@@ -1,5 +1,3 @@
-@use "govuk-frontend/govuk/base" as *;
-
 a.disabledLink {
   pointer-events: none;
   cursor: default;

package/assets/sass/comment-set-header.scss

@@ -1,5 +1,3 @@
-@use "govuk-frontend/govuk/base" as *;
-
 .commentSummaryHeader {
   .has-scroll-bar & {
     right: 14px

package/assets/sass/comment.scss

@@ -1,5 +1,3 @@
-@use "govuk-frontend/govuk/base" as *;
-
 mv-anno-comment {
   .aui-comment {
     width: 85%;
@@ -102,18 +100,14 @@ mv-anno-comment {
 
   .aui-comment__author {
     @include govuk-font($size: 19);
-    & {
-      display: block;
-      font-weight: bold;
-    }
+    display: block;
+    font-weight: bold;
   }
 
 
   .aui-comment__meta {
     @include govuk-font($size: 16);
-    & {
-      color: $govuk-secondary-text-colour;
-    }
+    color: $govuk-secondary-text-colour;
   }
 
   .aui-comment__footer {

package/assets/sass/comments-summary-dialog.scss

@@ -33,11 +33,11 @@
 mv-confirm-action,
 mv-comments-summary {
   .dates {
-    overflow: hidden;
-    clear: both;
     * {
       font-size: 16px;
     }
+    overflow: hidden;
+    clear: both;
     .dates__from, .dates__to, .dates__tags {
       float: left;
     }

package/assets/sass/document.scss

@@ -1,6 +1,3 @@
-@use "govuk-frontend/govuk/base" as *;
-@use "settings" as *;
-
 .aui {
 
   &--show-comments {
@@ -60,32 +57,28 @@
 
 .aui__toolbar-container {
   @include aui-width-container;
-  & {
-    border-left:1px solid govuk-colour("light-grey");
-    border-right: 1px solid govuk-colour("light-grey");
-    height: 100%;
-    position: relative;
-    left: 0; top: 0;
-    z-index: 1;
-  }
+  border-left:1px solid govuk-colour("light-grey");
+  border-right: 1px solid govuk-colour("light-grey");
+  height: 100%;
+  position: relative;
+  left: 0; top: 0;
+  z-index: 1;
 }
 
 
 .aui__toolbar-button {
   @include govuk-font($size: 19);
-  & {
-    background-color: govuk-colour("white");
-    border: 0 none;
-    border: 1px solid #f00;
-    color: govuk-colour("black");
-    cursor: pointer;
-    float: left;
-    height: 50px;
-    margin: 0;
-    padding-left: 15px;
-    padding-right: 15px;
-    position: relative;
-  }
+  background-color: govuk-colour("white");
+  border: 0 none;
+  border: 1px solid #f00;
+  color: govuk-colour("black");
+  cursor: pointer;
+  float: left;
+  height: 50px;
+  margin: 0;
+  padding-left: 15px;
+  padding-right: 15px;
+  position: relative;
   &:first-child {
     &::after {
       background-color: #DEE0E2;
@@ -168,9 +161,7 @@
 .aui__window-container {
   @include aui-width-container;
   @include govuk-clearfix;
-  & {
-    position: relative;
-  }
+  position: relative;
 }
 
 
@@ -199,9 +190,7 @@
 
 .aui__document-page {
   @include aspect-ratio(1,1.414); // True A4 aspect ratio
-  & {
-    margin-top: govuk-spacing(4);
-  }
+  margin-top: govuk-spacing(4);
 
   &:first-child {
     margin-top: 0;
@@ -209,13 +198,11 @@
 
   &[data-page]::after {
     @include govuk-font(16);
-    & {
-      color: $govuk-secondary-text-colour;
-      content: attr(data-page);
-      line-height: 1;
-      position: absolute; right: govuk-spacing(4);
-      bottom: govuk-spacing(4);
-    }
+    color: $govuk-secondary-text-colour;
+    content: attr(data-page);
+    line-height: 1;
+    position: absolute; right: govuk-spacing(4);
+    bottom: govuk-spacing(4);
   }
 
   img {
@@ -252,3 +239,4 @@
   }
 
 }
+

package/assets/sass/participants-list.scss

@@ -1,5 +1,3 @@
-@use "govuk-frontend/govuk/base" as *;
-
 mv-participants-list {
 
   .participant__card {
@@ -23,10 +21,8 @@ mv-participants-list {
     border-bottom: 1px solid #ddd;
     margin-bottom: govuk-spacing(1);
     @include govuk-font($size: 16);
-    & {
-      display: block;
-      font-weight: bold;
-    }
+    display: block;
+    font-weight: bold;
   }
 
   .participant__name {

package/assets/sass/settings.scss

@@ -2,23 +2,15 @@
    #GENERAL CONFIGURATIONS
    ========================================================================== */
 
-@use "sass:math";
-@use "govuk-frontend/govuk/base" as *;
-
 $aui-page-width: 1220px;
 $aui-gutter: govuk-spacing(6);
-$aui-gutter-half: math.div($govuk-gutter, 2);
+$aui-gutter-half: $govuk-gutter / 2;
 
 // Assets path
 $aui-assets-path : "/public/images/";
 
 @mixin aspect-ratio($ratio-or-width, $height: null) {
-  $padding: null;
-  @if $height {
-    $padding: math.percentage(math.div($height, $ratio-or-width));
-  } @else {
-    $padding: math.percentage(math.div(1, $ratio-or-width));
-  }
+  $padding: if($height, percentage($height/$ratio-or-width), percentage(1/$ratio-or-width));
   &:before { content:''; float: left; padding-bottom: $padding;  }
   &:after  { content:''; display: table; clear: both;  }
 }

package/assets/sass/tabs.scss

@@ -1,5 +1,3 @@
-@use "govuk-frontend/govuk/base" as *;
-
 .govuk-tabs {
   p{
     @include govuk-font($size: 16);

package/assets/sass/tags.scss

@@ -1,6 +1,3 @@
-@use "sass:color";
-@use "node_modules/ngx-chips/core/styles/core/core" as *;
-
 .tags {
   margin-bottom: 10px;
   &__renderer {
@@ -21,8 +18,10 @@
 }
 
 
+@import "node_modules/ngx-chips/core/styles/core/core";
+
 $foundation-primary: #1779ba;
-$foundation-primary-dark: color.adjust($foundation-primary, $lightness: -10%);
+$foundation-primary-dark: darken($foundation-primary, 10%);
 
 $foundation-theme: (
   container-border-bottom: 1px solid $foundation-primary
@@ -85,3 +84,4 @@ button {
 
   }
 }
+

package/assets/sass/toolbar/main.scss

@@ -1,18 +1,18 @@
-@use "buttons";
-@use "side-bar";
-@use "search-bar";
-@use "sub-toolbar";
-@use "thumbnail";
-@use "dialog-overlay";
-@use "field-label";
-@use "loading-bar";
-@use "debugging";
-@use "text-selection";
-@use "media";
-@use "redaction-toolbar";
-@use "icp-buttons";
-@use "icp-toolbar";
-@use "main-toolbar";
+@import "buttons";
+@import "side-bar";
+@import "search-bar";
+@import "sub-toolbar";
+@import "thumbnail";
+@import "dialog-overlay";
+@import "field-label";
+@import "loading-bar";
+@import "debugging";
+@import "text-selection";
+@import "media";
+@import "redaction-toolbar";
+@import "icp-buttons";
+@import "icp-toolbar";
+@import "main-toolbar";
 
 .hidden {
   display: none !important;

package/assets/sass/toolbar/search-bar.scss

@@ -1,5 +1,3 @@
-@use "govuk-frontend/govuk/base" as *;
-
 .searchbar {
   z-index: 100;
   position: absolute;
@@ -16,10 +14,8 @@
   }
   span {
     @include govuk-font($size: 16);
-    & {
-      color: $govuk-secondary-text-colour;
-      min-width: 110px;
-    }
+    color: $govuk-secondary-text-colour;
+    min-width: 110px;
   }
 }