logitude-dashboard-library 1.2.13 → 1.2.16

package/dist/{assets/styles/components-style.scss → styles/dl-dashboard.scss}

@@ -6,6 +6,122 @@ $yellow: #FBC445;
 $red: #F74E49;
 $dark-grey: #717585;
 
+.dl-dashboard-body {
+    background: $bg-color;
+    height: 100%;
+    padding: 2px;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    border-radius: 12px;
+    box-shadow: -1px 1px 24px -2px rgba(94, 94, 94, 0.84);
+    -webkit-box-shadow: -1px 1px 24px -2px rgba(94, 94, 94, 0.84);
+    -moz-box-shadow: -1px 1px 24px -2px rgba(94, 94, 94, 0.84);
+}
+
+
+.dl-dashboard-header {
+    display: flex;
+    justify-content: space-between;
+
+}
+
+.dl-heder-row{
+    width: 100%;
+    display: flex;
+    padding: 0px 11px;
+    flex-direction: row-reverse;
+}
+
+.dl-full-hight{
+    height: 100%;
+}
+
+.dl-grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+    height: fit-content;
+    padding: 10px;
+
+    >div {
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
+
+}
+.dl-grid-container {
+    position: relative;
+
+    .react-grid-layout {
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+}
+.dl-relativ-container{
+    
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+}
+.dl-scroll-container{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+}
+
+.dl-flex-stretch{
+    height: 100%;
+    flex-direction: row;
+    box-sizing: border-box;
+    display: flex;
+    place-content: stretch;
+    align-items: stretch;
+    max-height: 100%;
+}
+
+.dl-box {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+  }
+  
+  .dl-box .dl-row {
+    border: 1px dotted grey;
+  }
+  
+  .dl-box .dl-row.dl-header {
+    flex: 0 1 auto;
+    /* The above is shorthand for:
+    flex-grow: 0,
+    flex-shrink: 1,
+    flex-basis: auto
+    */
+  }
+  
+  .dl-box .dl-row.dl-content {
+    flex: 1 1 auto;
+    overflow-y: scroll;
+  }
+  
+  .dl-box .dl-row.dl-footer {
+    flex: 0 1 40px;
+  }
+
+
+
+
+
+
 .form-field {
     display: flex;
     align-items: baseline;
@@ -39,44 +155,12 @@ $dark-grey: #717585;
     height: 100%;
 }
 
-.dashboard-body {
-    background: $bg-color;
-    height: 100%;
-
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-        sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
 
-}
 
 .App {
     margin: 0 50px;
 }
 
-.dashboard-header {
-    display: flex;
-    justify-content: space-between;
-
-    >div {
-        align-items: center;
-        display: flex;
-    }
-
-    >div>* {
-        margin-right: 15px;
-    }
-
-    .p-button-icon,
-    i {
-        font-size: 28px !important;
-        color: black;
-    }
-
-}
-
 
 
 .App-link {
@@ -142,36 +226,15 @@ $dark-grey: #717585;
 }
 
 
-.grid-container {
-    position: relative;
 
-    .react-grid-layout {
-        position: absolute;
-        top: 0;
-        width: 100%;
-    }
-}
 
-.grid {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-column-gap: 10px;
-    grid-row-gap: 10px;
-    height: fit-content;
-    padding: 10px;
 
-    >div {
-        box-sizing: border-box;
-        border-radius: 7px;
-    }
-
-}
 
-.grid--bordered>div {
+.dl-grid--bordered>div {
     border: 2px dotted #d0d0d0;
 }
 
-.grid--boxes>div {
+.dl-grid--boxes>div {
     background: #00000008;
 }
 

package/dist/styles/fonts.scss

@@ -1 +1,4 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&family=Roboto+Flex:opsz@8..144&display=swap');
+*{
+    font-family: 'Roboto Flex';
+}

package/dist/styles/global.scss

@@ -6,10 +6,10 @@
   box-shadow: 0px 0px 3px 1px #6273842b;
 }
 
-* {
-  // change ReactPrime component default size
-  font-size: 15px;
-}
+// * {
+//   // change ReactPrime component default size
+//   font-size: 15px;
+// }
 
 .container{
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "logitude-dashboard-library",
-  "version": "1.2.13",
+  "version": "1.2.16",
   "description": "Made with create-react-library",
   "author": "logitude",
   "license": "MIT",

package/dist/styles/components-style.scss

@@ -1,190 +0,0 @@
-$blue: #2C99F7;
-$bg-color: #F5F6FB;
-$gray: #F5F6FB;
-$green: #22D792;
-$yellow: #FBC445; 
-$red: #F74E49; 
-$dark-grey: #717585;
-
-.form-field{
-    display: flex;
-    align-items: baseline;
-    margin-bottom: 5px;
-    >label{
-        margin-right: 15px;
-        width: 100px;
-    }
-    .p-inputtext{
-        width: 250px;
-    }
-}
-.dialog-footer{
-    display: flex;
-    justify-content: flex-end;
-    button{
-        margin-left: 10px;
-    }
-}
-.dialog-wrapper{
-    min-height: 400px;
-    
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-}
-
-
-
-.App {
-    margin: 0 50px;
-}
-
-.dashboard-header {
-    display: flex;
-    justify-content: space-between;
-
-    >div {
-        align-items: center;
-        display: flex;
-    }
-
-    >div>* {
-        margin-right: 15px;
-    }
-
-    .p-button-icon,
-    i {
-        font-size: 28px !important;
-        color: black;
-    }
-
-}
-
-
-
-.App-link {
-    color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-
-#container {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-}
-
-
-.react-grid-item {
-    background-color: lightblue;
-}
-
-.panel {
-    background: white !important;
-    border-radius: 7px;
-    box-shadow: 0px 0px 3px 1px #6273842b;
-    padding: 20px;
-    box-sizing: border-box;
-    position: relative;
-    height: 100%;
-
-    header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        i {
-            font-size: 18px;
-            // color: colors.$red;
-            cursor: pointer;
-        }
-    }
-
-    h1 {
-        text-transform: capitalize;
-        font-size: 15px;
-        font-family: 'Roboto Flex';
-        color: #061436;
-    }
-}
-
-
-#container {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-}
-
-
-.grid-container {
-    position: relative;
-
-    .react-grid-layout {
-        position: absolute;
-        top: 0;
-        width: 100%;
-    }
-}
-
-.grid {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-column-gap: 10px;
-    grid-row-gap: 10px;
-    height: fit-content;
-    padding: 10px;
-
-    >div {
-        box-sizing: border-box;
-        border-radius: 7px;
-    }
-
-}
-
-.grid--bordered>div {
-    border: 2px dotted #d0d0d0;
-}
-
-.grid--boxes>div {
-    background: #00000008;
-}
-
-
-.dashboard-widget {
-    height: calc(100% - 40px);
-    box-sizing: border-box;
-}
-
-.filter-label {
-    font-size: 12px;
-    color: $dark-grey;
-}
-
-.buttons-overlay .p-overlaypanel-content {
-    padding: 0 !important;
-}
-
-.buttons-list>div {
-    padding: 15px;
-    width: 150px;
-    cursor: pointer;
-    user-select: none;
-
-    &:hover {
-        background: $bg-color;
-    }
-}
-
-.hidden {
-    display: none;
-}