@net7/components 4.2.1 → 4.2.3-rc4

package/src/lib/styles/components/_text-viewer.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable */
 /**
  * TEXT-VIEWER
  *
@@ -9,16 +10,16 @@
 \* ------------------------------------ */
 .n7-text-viewer {
     pb-page {
-        --pb-base-font-family: "Roboto", "Noto", sans-serif;
+        --pb-base-font-family: 'Roboto', 'Noto', sans-serif;
         --pb-base-font-size: 16px;
         --pb-base-line-height: 1.42857143;
         --pb-base-font-weight: 300;
         --pb-base-font: var(--pb-base-font-weight) var(--pb-base-font-size) /
-        var(--pb-base-line-height) var(--pb-base-font-family);
-        --pb-serif-font-family: "Junicode", Georgia, "Times New Roman", serif;
+            var(--pb-base-line-height) var(--pb-base-font-family);
+        --pb-serif-font-family: 'Junicode', georgia, 'Times New Roman', serif;
         --pb-content-font-family: var(--pb-serif-font-family);
         --pb-content-font-size: 20px;
-        --pb-heading-font-family: "Oswald", Verdana, "Helvetica", sans-serif;
+        --pb-heading-font-family: 'Oswald', verdana, 'Helvetica', sans-serif;
         --pb-heading-font-weight: 400 !important;
         --pb-heading-line-height: 1.2;
         --pb-breadcrumbs-font-size: 18px;
@@ -40,12 +41,12 @@
         --pb-footnote-font-weight: var(--pb-content-font-weight);
         --pb-footnote-color: #303030;
         --pb-footnote-padding: 0 0 0 0.25em;
-        --pb-popover-theme: "light-border";
+        --pb-popover-theme: 'light-border';
         --pb-popover-max-width: 480px;
         --pb-popover-font-size: 16px;
         --pb-popover-line-height: 1.2;
-        --pb-popover-placement: "bottom";
-        --pb-popover-fallback-placement: "top right left";
+        --pb-popover-placement: 'bottom';
+        --pb-popover-fallback-placement: 'top right left';
         --pb-lang-input-color: var(--pb-color-inverse);
         --pb-lang-label-color: var(--pb-color-inverse);
         --pb-link-color: black;
@@ -53,27 +54,22 @@
         --pb-highlight-color: #f9e976;
         --paper-input-container-focus-color: var(--pb-color-focus);
         --pb-view-max-width: 920px;
+
         font: var(--pb-base-font);
         color: var(--pb-color-primary);
         margin: 0;
-
         main {
             pb-view {
                 font-size: 16px;
             }
         }
     }
-
     *:focus {
         outline: none;
     }
-
     .splash {
         position: fixed;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        inset: 0;
         visibility: hidden;
         opacity: 0;
         background-image: var(--pb-splash-image);
@@ -83,76 +79,64 @@
         background-repeat: no-repeat;
         transition: visibility 0s linear 300ms, opacity 300ms;
     }
-
     pb-page[unresolved] ~ .splash {
         visibility: visible;
         opacity: 1;
         transition: visibility 0s linear 0s, opacity 300ms;
     }
-
     app-header {
         background-image: var(--pb-header-background-image);
     }
-
     app-toolbar {
         --app-toolbar-font-size: 16px;
+
         display: flex;
     }
-
     app-toolbar pb-search {
         --pb-search-label-color: var(--pb-color-inverse);
         --pb-search-input-color: var(--pb-color-inverse);
         --pb-search-focus-color: var(--paper-orange-500);
+
         padding-left: 20px;
     }
-
     app-drawer {
         --pb-lang-item-color: black;
         --pb-lang-input-color: black;
         --pb-lang-label-color: var(--paper-grey-600);
     }
-
     .drawer-content {
         overflow: auto;
         height: 100%;
         padding: 8px 10px;
         text-align: left;
     }
-
     .drawer-content pb-collapse h3 {
         margin-bottom: 0;
         margin-top: 0;
     }
-
     .drawer-content paper-listbox {
         margin: 0;
     }
-
     app-drawer .settings,
     app-drawer pb-collapse {
         display: flex;
         flex-direction: column;
     }
-
     app-drawer paper-listbox {
         width: 100%;
     }
-
     app-drawer a,
     app-drawer a:link {
         text-decoration: none;
         color: inherit;
     }
-
     .toggle {
         color: inherit;
         font-weight: inherit;
     }
-
     app-drawer-layout:not([narrow]) [drawer-toggle] {
         display: none;
     }
-
     .caveat-content {
         overflow: auto;
         height: 100%;
@@ -160,16 +144,15 @@
         text-align: left;
         font-size: smaller;
     }
-
     .toolbar {
         display: flex;
         position: relative;
+
         // flex-flow: row wrap;
         justify-content: space-between; //center
         background-image: var(--pb-toolbar-background-image);
         background-color: var(--pb-toolbar-background-color);
         color: var(--pb-toolbar-color);
-
         .n7-text-viewer__toolbar-container-flex:nth-child(1) {
             flex: 0 0 10%;
         }
@@ -195,29 +178,25 @@
             flex: 0 0 11.1%;
             text-align: left;
         }
-        
         paper-button {
             font-size: 14px;
         }
     }
-
     [drawer-toggle] {
         padding-right: 0;
     }
-
     .menubar {
         justify-content: space-between;
         background-image: var(--pb-menubar-background-image);
         background-color: var(--pb-menubar-background-color);
         color: var(--pb-menubar-color);
+
         --pb-search-suggestions-color: var(--pb-color-primary);
         --pb-search-suggestions-background: white;
     }
-
     .menubar pb-media-query {
         flex: 1 0;
     }
-
     .menubar a,
     .menubar paper-menu-button {
         margin: auto 8px;
@@ -225,94 +204,80 @@
         color: white;
         text-decoration: none;
     }
-
     .menubar .logo {
         margin: 0 16px 0 0;
     }
-
     .menubar .gitlab {
         margin-left: 16px;
         margin-right: 16px;
     }
-
     .menubar .gitlab img {
         height: 32px;
     }
-
     .hidden {
         display: none;
     }
 
     // .menubar pb-login {}
-
     .menubar pb-lang {
         text-align: right;
         flex: 1 0;
+
         --pb-lang-item-color: white;
     }
-
     .menubar paper-item a {
         color: black;
         margin: 0;
     }
-
     [main-title] {
         display: inline-block;
     }
-
     .logo img {
         width: 140px;
         height: 60px;
         background-size: 100% 100%;
         cursor: pointer;
     }
-
     pb-progress {
         width: 100%;
     }
-
     pb-view-type {
         font-size: 0.75em;
     }
 
-    @media (max-width: 768px) {
+    @media (width <=768px) {
         #downloadDialog {
             width: 100%;
         }
     }
 
-    @media (min-width: 769px) {
+    @media (width >=769px) {
         #downloadDialog {
             width: 50%;
         }
     }
-
     .breadcrumbs {
         margin: 10px 0 0 20px;
     }
-
     pb-view {
         font-family: var(--pb-content-font-family);
         font-size: var(--pb-content-font-size);
         margin: 0 16px;
     }
-
     .breadcrumbs pb-view {
         font-weight: 400;
         font-size: var(--pb-breadcrumbs-font-size);
         max-width: none;
     }
 
-    @media (min-width: 769px) {
+    @media (width >=769px) {
         pb-view {
             max-width: var(--pb-view-max-width);
         }
     }
-
     pb-popover {
         text-align: left !important;
     }
-
     h1,
     h2,
     h3,
@@ -323,55 +288,44 @@
         font-weight: var(--pb-heading-font-weight);
         line-height: var(--pb-heading-line-height);
     }
-
     pb-drawer {
         // top: 231px;
         background-color: var(--pb-drawer-background-color);
         overflow: auto;
         height: calc(100vh - 217px);
     }
-
     pb-drawer a {
         color: var(--pb-link-color);
         text-decoration: var(--pb-link-text-decoration);
     }
-
     .toc ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
     }
-
     .toc ul ul {
         margin-left: 28px;
     }
-
     .toc li {
         margin-bottom: 0.5em;
     }
-
     .toc li:first-child {
         margin-top: 0.5em;
     }
-
     .toc pb-link {
         display: block;
     }
-
     .toc li > pb-link {
         margin-left: 28px;
     }
-
     .toc pb-link {
         font-family: var(--pb-link-font-family);
         padding: 4px 8px;
     }
-
     .toc pb-link a {
         color: var(--pb-link-color);
         text-decoration: var(--pb-link-text-decoration);
     }
-
     .toc h1,
     .toc h2,
     .toc h3,
@@ -379,66 +333,59 @@
     .toc h5 {
         font-family: var(--pb-link-font-family);
     }
-
-    .toc [slot="collapse-trigger"] pb-link {
-        margin-left: 0px;
+    .toc [slot='collapse-trigger'] pb-link {
+        margin-left: 0;
     }
-
     .version {
         text-align: right;
         font-size: 0.85em;
         padding: 1em;
         color: var(--pb-color-lighter);
     }
-
     .version span {
-        font-weight: bold;
+        font-weight: 700;
     }
 
     //
 
-    @import url("https://fonts.googleapis.com/css?family=Oswald|Roboto&display=swap");
-
+    @import 'https://fonts.googleapis.com/css?family=Oswald|Roboto&display=swap';
     pb-page {
         //   margin: 10px 20px;
         font-size: 16px;
-        font-family: "Roboto", "Noto", sans - serif;
+        font-family: Roboto, Noto, 'sans - serif';
         line-height: 1.42857;
         font-weight: 300;
         color: #333333;
 
         --paper-tooltip-delay-in: 200;
     }
-
     main {
         height: 70vh; //70vh
         overflow: auto;
         display: flex;
         justify-content: space-between;
     }
-
     pb-view {
         flex: 1 0;
     }
-
     pb-facsimile {
         flex: 1 1;
         max-width: 50vw;
+
         --pb-facsimile-height: 100%;
+
         margin-right: 20px;
         background-color: #333333;
+
         // position: static;
     }
-
     pb-navigation[disabled] {
         display: block;
         visibility: hidden;
     }
-
-    pb-navigation[direction="forward"] {
+    pb-navigation[direction='forward'] {
         float: right;
     }
-
     pb-view {
         flex: 1 1;
         max-width: 60vw;
@@ -448,7 +395,6 @@
     }
 
     //
-
     .content-body {
         position: relative;
         display: flex;
@@ -456,23 +402,22 @@
         padding: 0 20px;
         z-index: -1;
     }
-
     .content-body pb-navigation {
         position: fixed;
         bottom: 45%;
+
         --paper-fab-background: #35424b;
+
         color: white;
     }
-
-    .content-body pb-navigation[direction="backward"] {
+    .content-body pb-navigation[direction='backward'] {
         left: 20px;
     }
-
-    .content-body pb-navigation[direction="forward"] {
+    .content-body pb-navigation[direction='forward'] {
         right: 20px;
     }
 
-    @media (max-width: 769px) {
+    @media (width <=769px) {
         .content-body pb-navigation {
             display: none;
         }
@@ -492,5 +437,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

package/src/lib/styles/components/_timeline.scss

@@ -3,7 +3,7 @@
  *
  * Brief description of the component here.
  */
- 
+
 /* ------------------------------------ *\
    #TIMELINE
 \* ------------------------------------ */
@@ -11,7 +11,6 @@
     // TODO
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -25,5 +24,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

package/src/lib/styles/components/_toast.scss

@@ -3,15 +3,14 @@
  *
  * Component used to display alerts on the bottom left of the application.
  */
- 
+
 /* ------------------------------------ *\
    #TOAST
 \* ------------------------------------ */
 .n7-toast {
     position: fixed;
-    bottom: $space*2;
-    left: $space*2;
-
+    bottom: $space * 2;
+    left: $space * 2;
     &__box {
         display: flex;
         column-gap: $space;
@@ -21,14 +20,12 @@
         background-color: $toast-background-color;
         border: $toast-border-size solid $toast-border-color;
     }
-
     &__title {
         display: block;
         padding-bottom: $space;
         font-size: $font-size-m;
         color: $toast-title-color;
     }
-
     &__text {
         display: block;
         padding-bottom: $space;
@@ -37,18 +34,17 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #WITH-ACTIONS
 \* ------------------------------------ */
 .n7-toast__box.has-actions {
     position: relative;
     display: flex;
+
     // display: grid;
     // grid-template-columns: auto minmax(20px, auto);
     // grid-column-gap: $space;
 }
-
 .n7-toast__actions {
     display: flex;
     align-items: center;
@@ -56,34 +52,28 @@
     flex: 1 0 auto;
     min-width: 20px;
 }
-
 .n7-toast__action-content {
     flex: 1;
     margin-right: $space;
-
     .n7-toast__action-button {
-        margin-left: calc($space/2);
+        margin-left: calc($space / 2);
     }
-    
     &:first-child {
         .n7-toast__action-button {
             margin-left: 0;
         }
     }
 }
-
 .n7-toast__closeIcon {
     position: absolute;
     top: $space;
     right: $space;
     cursor: pointer;
-
     &:hover {
         color: $color-text-link;
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -97,5 +87,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

package/src/lib/styles/components/_tooltip-content.scss

@@ -3,7 +3,7 @@
  *
  * Brief description of the component here.
  */
- 
+
 /* ------------------------------------ *\
    #TOOLTIP-CONTENT
 \* ------------------------------------ */
@@ -11,7 +11,6 @@
     // TODO
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -25,5 +24,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}