nnp-shared-styles 1.1.6

package/dist/index.min.css

@@ -0,0 +1 @@
+:root{--font-family-special: Verdana, sans-serif;--font-family-header: "Helvetica";--font-family-body: "Helvetica";--font-size-md: 0.98rem;--font-size-nm: 0.85rem;--font-size-xs: 0.70rem;--font-size-sm: 0.78rem;--font-size-lg: 1.115rem;--font-size-xl: 1.25rem;--font-size-xxl: 2rem;--font-light: 200;--font-normal: 400;--font-bold: 600;--fold-bolder: 800;--radius-small: 0.15rem;--radius-medium: 0.25rem;--radius-large: 0.75rem;--border-color: #999999;--modal-box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);--base-color-primary: #E8E8E8;--base-color-secondary: #000000;--base-color-tertiary: #444444;--component-color-primary: #666666;--component-color-secondary: #fffbfb;--component-color-tertiary: #cccccc;--component-color-highlight: #0099cc;--component-color-blue: #336699;--component-color-grey: #939498;--text-color-primary: #000000;--text-color-secondary: #ffffff;--text-color-tertiary: #0099cc;--text-color-quaternary: #7e7e7e;--text-color-link: #0099cc;--text-color-disabled: #f44336;--top-header-background-color: #000000;--bottom-footer-background-color: #000000;--nnp-padding-small: 0.5rem;--nnp-padding-medium: 1rem;--nnp-padding-large: 2rem;--component-height-small: 30px;--component-height-medium: 50px;--component-height-large: 150px;--nav-width: 260px;--nnp-date-formate: "DD/MM/YYYY";--nnp-time-formate: "HH:mm:ss";--grid-odd-row-color: #E3E2D6;--grid-even-row-color: #f9f9f9;--grid-header-color: #0099CC;--grid-header-text-color: #dddddd}html.dark,body.dark-theme{--base-color-primary: #3D3D3D;--base-color-secondary: #1e1e1e;--base-color-tertiary: #444444;--component-color-primary: #666666;--component-color-secondary: #1e1e1e;--component-color-tertiary: #2f2f2f;--component-color-highlight: #0099cc;--component-color-blue: #336699;--component-color-grey: #939498;--text-color-primary: #ffffff;--text-color-secondary: #ffffff;--text-color-tertiary: #b0bec5;--text-color-quaternary: #a6a6a6;--text-color-link: #84DEF1;--text-color-disabled: #f44336;--top-header-background-color: #121212;--bottom-footer-background-color: #1e1e1e}.flex-center-center{display:flex;justify-content:center;align-items:center}.flex-center-top{display:flex;justify-content:center;align-items:top}.flex-space-center{display:flex;justify-content:space-between;align-items:center}.flex-start-center{display:flex;justify-content:start;align-items:center}.flex-column{display:flex;flex-direction:column}.flex-row{display:flex;flex-direction:row}.full-height{height:100%}.full-width{width:100%}.fixed-top{position:fixed;top:0;left:0}.max-height,.nnp-modal-container{height:100vh}.max-width,.nnp-modal-container{width:100vw}.cursor-pointer,.nnp-btn{cursor:pointer}.page-padding-large{padding:var(--nnp-padding-large)}.page-padding-medium{padding:var(--nnp-padding-medium)}.page-margin-small{margin:var(--nnp-padding-small)}.medium-margin-bottom{margin-bottom:var(--nnp-padding-medium)}.large-margin-bottom{margin-bottom:var(--nnp-padding-large)}.header-font,.nnp-title,.nnp-header,.nnp-btn{font-family:var(--font-family-header);font-size:var(--font-size-md)}.header-font-smaller,.nnp-header-mb{font-family:var(--font-family-header);font-size:var(--font-size-sm)}.body-font{font-family:var(--font-family-body);font-size:var(--font-size-sm)}.special-font,.nnp-top-header,.nnp-side-nav{font-family:var(--font-family-special);font-size:var(--font-size-sm)}.nnp-border{border:1px solid var(--border-color)}.nnp-border-bottom{border-bottom:1px solid var(--border-color)}.font-md{font-size:var(--font-size-md)}.font-xs{font-size:var(--font-size-xs)}.font-sm{font-size:var(--font-size-sm)}.font-lg{font-size:var(--font-size-lg)}.font-xl{font-size:var(--font-size-xl)}.font-xxl{font-size:var(--font-size-xxl)}.textLink{color:var(--text-color-link);cursor:pointer}.textLink:hover{text-decoration:underline}.font-md{font-size:var(--font-size-md)}.font-nm{font-size:var(--font-size-nm)}.font-xs{font-size:var(--font-size-xs)}.font-sm{font-size:var(--font-size-sm)}.font-lg{font-size:var(--font-size-lg)}.font-xl{font-size:var(--font-size-xl)}.font-xxl{font-size:var(--font-size-xxl)}.font-thin{font-weight:var(--font-light)}.font-normal{font-weight:var(--font-normal)}.font-bold{font-weight:var(--font-bold)}.font-bolder{font-weight:var(--font-bolder)}.special-font-family{font-family:var(--font-family-special)}.header-font-family{font-family:var(--font-family-header)}.body-font-family{font-family:var(--font-family-body)}.nnp-layout-container{display:flex;flex-direction:column;min-height:100vh;position:relative;overflow:hidden}.nnp-main-container{padding-top:var(--component-height-medium);flex-grow:1;overflow-y:auto}.nnp-main-content{position:relative;height:100%;display:flex;flex-direction:column}.nnp-top-header{width:100%;height:var(--component-height-medium);background-color:var(--base-color-secondary);color:var(--text-color-secondary);font-size:.85rem;display:flex;justify-content:space-between;align-items:center}.nnp-menu-item{display:flex;align-items:center;justify-content:center;padding:0 var(--nnp-padding-medium);height:100%;cursor:pointer}.nnp-menu-item:hover{background-color:#06b9f5;color:var(--text-color-secondary)}.nnp-menu-item.active{background-color:var(--component-color-highlight);color:var(--text-color-secondary)}.nnp-body-content{height:calc(100% - var(--component-height-medium))}.nnp-logo-panel{display:flex;justify-content:center;align-items:center;background-color:var(--base-color-secondary);height:var(--component-height-large)}.nnp-logo-panel img{height:90%}.nnp-bottom-footer{background-color:var(--base-color-secondary);color:var(--text-color-secondary);height:var(--component-height-large);gap:1rem;display:flex;flex-direction:column;display:flex;justify-content:center;align-items:center}.nnp-title{padding-bottom:var(--nnp-padding-medium)}.nnp-header{height:var(--component-height-medium);min-height:var(--component-height-medium) !important;padding:0 var(--nnp-padding-medium)}.nnp-header-mb{height:var(--component-height-medium);min-height:var(--component-height-medium) !important;padding:0 var(--nnp-padding-medium)}.nnp-header-body{height:calc(100% - var(--component-height-medium))}.nnp-header-primary{background-color:var(--component-color-primary);color:var(--text-color-secondary)}.nnp-header-secondary{background-color:var(--component-color-secondary);color:var(--text-color-primary)}.nnp-header-highlight{background-color:var(--component-color-highlight);color:var(--text-color-secondary)}.nnp-body-minus-header{height:calc(100% - var(--component-height-medium))}.nnp-btn{height:var(--component-height-small);min-height:var(--component-height-small) !important;padding:0 var(--nnp-padding-small);display:flex;justify-content:center;align-items:center;border-radius:var(--radius-medium);padding:0 var(--nnp-padding-medium)}.nnp-btn-primary{background-color:var(--component-color-highlight);color:var(--text-color-secondary)}.nnp-btn-primary:hover{background-color:var(--component-color-tertiary)}.nnp-btn-secondary{background-color:var(--component-color-primary);color:var(--text-color-secondary)}.nnp-btn-secondary:hover{background-color:var(--component-color-tertiary)}.nnp-btn-tertiary{background-color:var(--base-color-primary);color:var(--text-color-secondary)}.nnp-btn-tertiary:hover{background-color:var(--component-color-tertiary);color:var(--text-color-primary)}.nnp-btn-disabled{background-color:var(--component-color-secondary);color:var(--text-color-secondary);cursor:not-allowed !important}.nnp-btn-disabled:hover{background-color:var(--component-color-secondary);color:var(--text-color-secondary)}.nnp-modal-container{position:absolute;inset:0;backdrop-filter:blur(2px);z-index:100;display:flex;justify-content:center;align-items:center}.nnp-modal-content{background-color:var(--base-color-primary);border:1px solid #ccc !important;box-shadow:var(--modal-box-shadow);margin:20px 0;display:flex;flex-direction:column}.nnp-modal-content .nnp-modal-body{padding:var(--nnp-padding-medium);flex-grow:1;overflow:auto}.nnp-side-layout-container{height:calc(100vh - var(--component-height-medium));overflow:hidden}.nnp-side-main-container{display:flex;flex-direction:row;height:100%}.nnp-side-main-content{width:calc(100vw - var(--nav-width));height:calc(100% - var(--nnp-padding-large));padding:var(--nnp-padding-medium) var(--nnp-padding-large);overflow-y:auto}.nnp-side-main-content-full{width:100vw;height:calc(100% - var(--nnp-padding-large));padding:var(--nnp-padding-medium) var(--nnp-padding-large);overflow-y:auto}.nnp-side-nav{display:flex;flex-direction:column;width:var(--nav-width);background-color:var(--component-color-secondary);color:var(--text-color-primary);border-right:1px solid var(--border-color);transition:width .3s ease;height:100%;overflow-y:auto}.nnp-side-nav .nnp-side-menu-item{display:flex;flex-direction:column}.nnp-side-nav .nnp-side-menu-header{display:flex;justify-content:space-between;align-items:center;height:var(--component-height-medium);cursor:pointer;padding:0 var(--nnp-padding-small)}.nnp-side-nav .nnp-side-menu-header:hover{background-color:var(--component-color-tertiary)}.nnp-side-nav .nnp-side-menu-header .nnp-side-menu-arrow{font-size:var(--font-size-md)}.nnp-side-nav .nnp-side-menu-header .nnp-side-menu-children{font-size:var(--font-size-xs)}.nnp-side-nav .nnp-side-menu-header.selected{background-color:var(--component-color-primary) !important;color:var(--text-color-secondary) !important}.nnp-side-nav .nnp-side-menu-header.active{background-color:var(--component-color-tertiary)}.nnp-side-nav.collapsed{width:0}.nnp-side-menu-children{max-height:0;transition:max-height 1s ease-out;overflow:hidden}.nnp-side-menu-children.open{max-height:300vh;transition:max-height 1s ease-in}.nnp-accordian-component-primary{background-color:var(--component-color-primary) !important}.nnp-accordian-component-secondary{background-color:var(--component-color-primary) !important}html.dark,body.dark-theme{background-color:var(--base-color-primary);color:var(--text-color-primary)}html.dark input,html.dark textarea,html.dark select,body.dark-theme input,body.dark-theme textarea,body.dark-theme select{border-color:#424242;color:#ccc !important}html.dark label,body.dark-theme label{color:#ccc !important}html.dark .nnp-main-container,body.dark-theme .nnp-main-container{background-color:var(--base-color-primary)}html.dark .MuiDataGrid-root,body.dark-theme .MuiDataGrid-root{background-color:#1e1e1e !important;color:#fff !important}html.dark .MuiDataGrid-root .MuiDataGrid-row,body.dark-theme .MuiDataGrid-root .MuiDataGrid-row{background-color:#1e1e1e !important;color:#d1d1d1 !important}html.dark .MuiDataGrid-root .MuiDataGrid-row:hover,body.dark-theme .MuiDataGrid-root .MuiDataGrid-row:hover{background-color:#333 !important}html.dark .MuiDataGrid-root .MuiDataGrid-cell,body.dark-theme .MuiDataGrid-root .MuiDataGrid-cell{border-color:#5e5e5e !important}html.dark .MuiDataGrid-root .MuiDataGrid-columnHeaders,body.dark-theme .MuiDataGrid-root .MuiDataGrid-columnHeaders{background-color:#5e5e5e !important}html.dark .nnp-modal-content .nnp-header-primary,body.dark-theme .nnp-modal-content .nnp-header-primary{background-color:#373b42 !important}.nnp-accordion{border:1px solid #444;border-bottom:1px solid #444;background:rgba(0,0,0,0);height:100%;display:flex;flex-direction:column}.nnp-accordion .MuiCollapse-root{flex-grow:1;display:flex;flex-direction:column}.nnp-accordion .MuiCollapse-wrapper,.nnp-accordion .MuiCollapse-wrapperInner,.nnp-accordion .MuiAccordionDetails-root{flex-grow:1;display:flex;flex-direction:column;height:100%;position:relative}.nnp-accordion-summary{min-height:42px !important;letter-spacing:.02em;font-size:.86rem;font-weight:600;text-transform:uppercase;padding-right:.75rem !important;border-bottom:1px solid #444;background-color:#b8b8b8 !important;color:#000 !important}html.dark .nnp-accordion-summary,body.dark-theme .nnp-accordion-summary{background-color:#2e2e2e !important;color:#2799cc !important}.nnp-accordion-summary .MuiAccordionSummary-content{margin:.45rem 0 !important}html.dark .nnp-accordion,body.dark-theme .nnp-accordion{border-color:var(--border-color)}html.dark .nnp-accordion-summary,body.dark-theme .nnp-accordion-summary{border-bottom-color:var(--border-color)}.nnp-accordion-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem;border:1px solid currentColor;border-radius:2px;font-size:1rem;line-height:1;flex-shrink:0}.nnp-feature-icon-container{position:absolute;top:16px;right:24px;width:35px;height:35px;display:flex;align-items:center;justify-content:center;pointer-events:none}.nnp-feature-icon{width:100%;height:100%;object-fit:contain}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text !important;-webkit-text-fill-color:var(--text-color-primary) !important;transition:background-color 5000s ease-in-out 0s !important}*{scrollbar-width:thin;scrollbar-color:var(--text-color-tertiary) rgba(0,0,0,0)}*::-webkit-scrollbar{width:2px;height:2px;background:rgba(0,0,0,0)}*::-webkit-scrollbar-thumb{background-color:var(--text-color-tertiary);border-radius:4px}*::-webkit-scrollbar-thumb:hover{background-color:var(--text-color-quaternary)}*::-webkit-scrollbar-track{background:rgba(0,0,0,0)}

package/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "nnp-shared-styles",
+    "version": "1.1.6",
+    "description": "Shared SCSS styling library providing design tokens, themes, layout utilities, and reusable component styles.",
+    "main": "src/index.scss",
+    "style": "dist/index.css",
+    "sass": "src/index.scss",
+    "files": [
+        "src/",
+        "dist/"
+    ],
+    "scripts": {
+        "build": "sass src/index.scss dist/index.css --no-source-map",
+        "build:min": "sass src/index.scss dist/index.min.css --style=compressed --no-source-map",
+        "build:all": "npm run build && npm run build:min",
+        "watch": "sass --watch src/index.scss dist/index.css",
+        "prepare": "npm run build:all"
+    },
+    "keywords": [
+        "scss",
+        "css",
+        "design-system",
+        "theme",
+        "shared-styles",
+        "tokens",
+        "ui"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Nubo-Native-Platform/PICC-PC-NNP-Shared-Styles.git"
+    },
+    "bugs": {
+        "url": "https://github.com/Nubo-Native-Platform/PICC-PC-NNP-Shared-Styles/issues"
+    },
+    "homepage": "https://github.com/Nubo-Native-Platform/PICC-PC-NNP-Shared-Styles#readme",
+    "author": "Nubo Native Platform",
+    "license": "MIT",
+    "devDependencies": {
+        "sass": "^1.89.2"
+    }
+}

package/src/index.scss

@@ -0,0 +1,43 @@
+@use './shared/nnp-variables.scss';
+@use './shared/nnp-mixins.scss';
+@use './shared/nnp-base-styles.scss';
+@use './shared/nnp-component-styles.scss';
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: var(--text-color-primary) !important;
+    transition: background-color 5000s ease-in-out 0s !important;
+}
+
+/* Global Scrollbar Styles */
+* {
+    scrollbar-width: thin;
+    /* For Firefox */
+    scrollbar-color: var(--text-color-tertiary) transparent;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+    width: 2px;
+    height: 2px;
+    /* optional: for horizontal scrollbars */
+    background: transparent;
+    /* transparent background */
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: var(--text-color-tertiary);
+    border-radius: 4px;
+    /* optional for smoothness */
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background-color: var(--text-color-quaternary);
+}
+
+*::-webkit-scrollbar-track {
+    background: transparent;
+}

package/src/shared/nnp-base-styles.scss

@@ -0,0 +1,190 @@
+@use './nnp-mixins.scss' as mixins;
+
+.flex-center-center {
+    @include mixins.justify(center, center);
+}
+
+.flex-center-top {
+    @include mixins.justify(center, top);
+}
+
+.flex-space-center {
+    @include mixins.justify(space-between, center);
+}
+
+.flex-start-center {
+    @include mixins.justify(start, center);
+}
+
+.flex-column {
+    @include mixins.flex-direction(column);
+}
+
+.flex-row {
+    @include mixins.flex-direction(row);
+}
+
+.full-height {
+    height: 100%;
+}
+
+.full-width {
+    width: 100%;
+}
+
+.fixed-top {
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
+.max-height {
+    height: 100vh;
+}
+
+.max-width {
+    width: 100vw;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.page-padding-large {
+    padding: var(--nnp-padding-large);
+}
+
+.page-padding-medium {
+    padding: var(--nnp-padding-medium);
+}
+
+.page-margin-small {
+    margin: var(--nnp-padding-small);
+}
+
+.medium-margin-bottom {
+    margin-bottom: var(--nnp-padding-medium);
+}
+
+.large-margin-bottom {
+    margin-bottom: var(--nnp-padding-large);
+}
+
+.header-font {
+    font-family: var(--font-family-header);
+    font-size: var(--font-size-md);
+}
+
+.header-font-smaller {
+    font-family: var(--font-family-header);
+    font-size: var(--font-size-sm);
+}
+
+.body-font {
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-sm);
+}
+
+.special-font {
+    font-family: var(--font-family-special);
+    font-size: var(--font-size-sm);
+}
+
+.nnp-border {
+    border: 1px solid var(--border-color);
+}
+
+.nnp-border-bottom {
+    border-bottom: 1px solid var(--border-color);
+}
+
+
+.font-md {
+    font-size: var(--font-size-md);
+}
+
+.font-xs {
+    font-size: var(--font-size-xs);
+}
+
+.font-sm {
+    font-size: var(--font-size-sm);
+}
+
+.font-lg {
+    font-size: var(--font-size-lg);
+}
+
+.font-xl {
+    font-size: var(--font-size-xl);
+}
+
+.font-xxl {
+    font-size: var(--font-size-xxl);
+}
+
+.textLink {
+    color: var(--text-color-link);
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.font-md {
+    font-size: var(--font-size-md);
+}
+
+.font-nm {
+    font-size: var(--font-size-nm);
+}
+
+.font-xs {
+    font-size: var(--font-size-xs);
+}
+
+
+.font-sm {
+    font-size: var(--font-size-sm);
+}
+
+.font-lg {
+    font-size: var(--font-size-lg);
+}
+
+.font-xl {
+    font-size: var(--font-size-xl);
+}
+
+.font-xxl {
+    font-size: var(--font-size-xxl);
+}
+
+.font-thin {
+    font-weight: var(--font-light);
+}
+
+.font-normal {
+    font-weight: var(--font-normal);
+}
+
+.font-bold {
+    font-weight: var(--font-bold);
+}
+
+.font-bolder {
+    font-weight: var(--font-bolder);
+}
+
+.special-font-family {
+    font-family: var(--font-family-special);
+}
+
+.header-font-family {
+    font-family: var(--font-family-header);
+}
+
+.body-font-family {
+    font-family: var(--font-family-body);
+}