@net7/components 3.0.2-rc.2

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

@@ -0,0 +1,446 @@
+/**
+ * TEXT-VIEWER
+ *
+ * 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-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;
+        --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-weight: 400 !important;
+        --pb-heading-line-height: 1.2;
+        --pb-breadcrumbs-font-size: 18px;
+        --pb-color-primary: #303030;
+        --pb-color-inverse: #f0f0f0;
+        --pb-color-lighter: #35424b;
+        --pb-color-focus: #f6a623;
+        --pb-header-background-image: none;
+        --pb-drawer-background-color: var(--pb-color-inverse);
+        --pb-menubar-background-color: #35424b;
+        --pb-menubar-background-image: none;
+        --pb-menubar-color: var(--pb-color-inverse);
+        --pb-toolbar-background-color: #d1dae0;
+        --pb-toolbar-background-image: none;
+        --pb-toolbar-color: var(--pb-color-primary);
+        --paper-tooltip-delay-in: 200;
+        --pb-footnote-font-size: 13px;
+        --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-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-lang-input-color: var(--pb-color-inverse);
+        --pb-lang-label-color: var(--pb-color-inverse);
+        --pb-link-color: black;
+        --pb-link-font-family: var(--pb-serif-font-family);
+        --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;
+    }
+   
+    *:focus {
+        outline: none;
+    }
+   
+    .splash {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        visibility: hidden;
+        opacity: 0;
+        background-image: var(--pb-splash-image);
+        background-color: #ffffff;
+        background-position: center center;
+        background-size: var(--pb-splash-image-size);
+        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;
+    }
+   
+    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%;
+        padding: 8px 10px;
+        text-align: left;
+        font-size: smaller;
+    }
+   
+    .toolbar {
+        justify-content: space-between;
+        background-image: var(--pb-toolbar-background-image);
+        background-color: var(--pb-toolbar-background-color);
+        color: var(--pb-toolbar-color);
+    }
+   
+    [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;
+        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-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;
+    }
+   
+    @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 {
+        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;
+    }
+   
+    .toc li:first-child {
+        margin-top: .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, .toc h4, .toc h5 {
+        font-family: var(--pb-link-font-family);
+    }
+   
+    .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;
+        font-family: "Roboto", "Noto", sans - serif;
+        line-height: 1.42857;
+        font-weight: 300;
+        color: #333333;
+   
+        --paper-tooltip-delay-in: 200;
+    }
+   
+    main {
+        height: 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"] {
+        float: right;
+    }
+   
+    pb-view {
+        flex: 1 1;
+        max-width: 60vw;
+        margin: 0 16px;
+        max-height: var(--pb-view-height);
+        overflow: auto;
+    }
+   
+    // 
+   
+   
+   
+    .content-body {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        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] {
+        left: 20px;
+    }
+   
+    .content-body pb-navigation[direction=forward] {
+        right: 20px;
+    }
+   
+    @media (max-width: 769px) {
+        .content-body pb-navigation {
+            display: none;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

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

@@ -0,0 +1,29 @@
+/**
+ * TIMELINE
+ *
+ * Brief description of the component here.
+ */
+ 
+/* ------------------------------------ *\
+   #TIMELINE
+\* ------------------------------------ */
+.n7-timeline {
+    // TODO
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

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

@@ -0,0 +1,99 @@
+/**
+ * TOAST
+ *
+ * Component used to display alerts on the bottom left of the application.
+ */
+ 
+/* ------------------------------------ *\
+   #TOAST
+\* ------------------------------------ */
+.n7-toast {
+    position: fixed;
+    bottom: $space*2;
+    left: $space*2;
+
+    &__box {
+        max-width: $toast-max-width;
+        padding: $space $space 0 $space;
+        margin-top: $space;
+        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;
+        font-size: $font-size-s;
+        color: $toast-text-color;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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;
+    justify-content: flex-end;
+    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);
+    }
+    
+    &: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
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

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

@@ -0,0 +1,29 @@
+/**
+ * TOOLTIP-CONTENT
+ *
+ * Brief description of the component here.
+ */
+ 
+/* ------------------------------------ *\
+   #TOOLTIP-CONTENT
+\* ------------------------------------ */
+.n7-tooltip-content {
+    // TODO
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}