@net7/components 3.5.0 → 3.6.1-rc.1

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

@@ -3,17 +3,18 @@
  *
  * Brief description of the component here.
  */
- 
+
 /* ------------------------------------ *\
    #WEB COMPONENTS STYLING
 \* ------------------------------------ */
 .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-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;
         --pb-content-font-family: var(--pb-serif-font-family);
         --pb-content-font-size: 20px;
@@ -38,7 +39,7 @@
         --pb-footnote-font-family: var(--pb-content-font-family);
         --pb-footnote-font-weight: var(--pb-content-font-weight);
         --pb-footnote-color: #303030;
-        --pb-footnote-padding: 0 0 0 .25em;
+        --pb-footnote-padding: 0 0 0 0.25em;
         --pb-popover-theme: "light-border";
         --pb-popover-max-width: 480px;
         --pb-popover-font-size: 16px;
@@ -55,18 +56,18 @@
         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;
@@ -82,60 +83,63 @@
         background-repeat: no-repeat;
         transition: visibility 0s linear 300ms, opacity 300ms;
     }
-   
-    pb-page[unresolved]~.splash {
+
+    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 {
+
+    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 {
+
+    app-drawer a,
+    app-drawer a:link {
         text-decoration: none;
         color: inherit;
     }
@@ -144,11 +148,11 @@
         color: inherit;
         font-weight: inherit;
     }
-   
+
     app-drawer-layout:not([narrow]) [drawer-toggle] {
         display: none;
     }
-   
+
     .caveat-content {
         overflow: auto;
         height: 100%;
@@ -156,18 +160,51 @@
         text-align: left;
         font-size: smaller;
     }
-   
+
     .toolbar {
-        justify-content: space-between;
+        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%;
+        }
+        .n7-text-viewer__toolbar-container-flex:nth-child(2) {
+            flex: 0 0 10%;
+        }
+        .n7-text-viewer__toolbar-container-flex:nth-child(3) {
+            flex: 0 0 10%;
+        }
+        .n7-text-viewer__toolbar-container-flex:nth-child(4) {
+            text-align: center;
+            padding: 0 2.3vw;
+            flex: 0 0 33.3%;
+        }
+        .n7-text-viewer__toolbar-container-flex:nth-child(5) {
+            flex: 0 0 11.1%;
+        }
+        .n7-text-viewer__toolbar-container-flex:nth-child(6) {
+            flex: 0 0 11.1%;
+            text-align: center;
+        }
+        .n7-text-viewer__toolbar-container-flex:nth-child(7) {
+            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);
@@ -176,182 +213,192 @@
         --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 {
+
+    .menubar a,
+    .menubar paper-menu-button {
         margin: auto 8px;
         display: block;
         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-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: .75em;
+        font-size: 0.75em;
     }
-   
+
     @media (max-width: 768px) {
         #downloadDialog {
             width: 100%;
         }
     }
-   
+
     @media (min-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) {
         pb-view {
             max-width: var(--pb-view-max-width);
         }
     }
-   
+
     pb-popover {
         text-align: left !important;
     }
-   
-    h1, h2, h3, h4, h5, h6 {
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         font-family: var(--pb-heading-font-family);
         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: .5em;
+        margin-bottom: 0.5em;
     }
-   
+
     .toc li:first-child {
-        margin-top: .5em;
+        margin-top: 0.5em;
     }
-   
+
     .toc pb-link {
         display: block;
     }
-   
-    .toc li>pb-link {
+
+    .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, .toc h4, .toc h5 {
+
+    .toc h1,
+    .toc h2,
+    .toc h3,
+    .toc h4,
+    .toc h5 {
         font-family: var(--pb-link-font-family);
     }
-   
-    .toc [slot=collapse-trigger] pb-link {
+
+    .toc [slot="collapse-trigger"] pb-link {
         margin-left: 0px;
     }
-   
+
     .version {
         text-align: right;
         font-size: 0.85em;
         padding: 1em;
         color: var(--pb-color-lighter);
     }
-   
+
     .version span {
         font-weight: bold;
     }
-   
+
     //
-   
+
     @import url("https://fonts.googleapis.com/css?family=Oswald|Roboto&display=swap");
-   
+
     pb-page {
         //   margin: 10px 20px;
         font-size: 16px;
@@ -359,21 +406,21 @@
         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;
@@ -382,16 +429,16 @@
         background-color: #333333;
         // position: static;
     }
-   
+
     pb-navigation[disabled] {
         display: block;
         visibility: hidden;
     }
-   
+
     pb-navigation[direction="forward"] {
         float: right;
     }
-   
+
     pb-view {
         flex: 1 1;
         max-width: 60vw;
@@ -399,11 +446,9 @@
         max-height: var(--pb-view-height);
         overflow: auto;
     }
-   
-    // 
-   
-   
-   
+
+    //
+
     .content-body {
         position: relative;
         display: flex;
@@ -411,22 +456,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) {
         .content-body pb-navigation {
             display: none;
@@ -434,7 +479,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -449,4 +493,4 @@
 
 /* Retina */
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+}