Dph #61 onsite dashboard template

README.md

@@ -50,10 +50,21 @@ https://cdn.fromdoppler.com/doppler-style-guide/documentation/pr-551/storybook/?
 
 ```
 https://cdn.fromdoppler.com/doppler-style-guide/documentation/main/index.html
+
 ```
 
 # URL Storybook
 
 ```
 https://cdn.fromdoppler.com/doppler-style-guide/documentation/pr-530/storybook/?path=/story/example-introduction--page
+
+```
+
+# Consideraciones
+
+```
+
+Dentro de los estilos se encuentra una hoja llamada "_classes.scss" en este archivo se encuentran muchos fix que son para doppler viejo.
+En el resto de la aplicación NO deberían utilizar "!important" esto les va a dificultar la reutilización de los componentes
+
 ```

src/assets/scss/core/_reset.scss

@@ -47,6 +47,10 @@ body {
   color: colors.$dp-color-grey;
   font-family: settings.$dp-font-family;
   min-height: 100%;
+
+  &.dp-onsite-bg {
+    background-color: colors.$dp-color-onsite-gray;
+  }
 }
 
 /* =======================================================================*/

src/assets/scss/helpers/_colors.scss

@@ -109,6 +109,9 @@ $dp-violet-tabs: #c9a9d5;
 
 $dp-color-iconcm: #ef9c70;
 
+/// Color background for Onsite
+$dp-color-onsite-gray: #fafafafa;
+
 ///
 /// Class Colors Style Guides
 ///
@@ -261,4 +264,8 @@ $dp-color-iconcm: #ef9c70;
   .dp-bg-verysoft-gray {
     background-color: $dp-color-verysoft-gray;
   }
+
+  .dp-bg-onsite-gray {
+    background-color: $dp-color-onsite-gray;
+  }
 }

src/assets/scss/modules/_buttons.scss

@@ -46,25 +46,24 @@
     }
 
     &.button--loading {
-      @include preload.dp-preloader(colors.$dp-color-white, 1.5em);
       padding-left: 3em;
       position: relative;
       display: flex;
       align-items: center;
+      @include preload.dp-preloader(colors.$dp-color-white, 1.5em);
 
       &:after {
         left: 1em;
       }
     }
 
     &.button--centered-loading {
-      @include preload.dp-preloader(colors.$dp-color-white, 1.5em);
-
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       height: 30px;
+      @include preload.dp-preloader(colors.$dp-color-white, 1.5em);
 
       &:after {
         left: 0;
@@ -190,11 +189,11 @@
         }
 
         &.button--loading {
-          @include preload.dp-preloader(colors.$dp-color-silver, 1.5em);
           padding-left: 3em;
           position: relative;
           display: flex;
           align-items: center;
+          @include preload.dp-preloader(colors.$dp-color-silver, 1.5em);
 
           &:after {
             left: 1em;
@@ -598,6 +597,7 @@
     position: absolute;
     pointer-events: none;
     -webkit-appearance: none;
+    appearance: none;
     z-index: 3;
     height: 28px;
     top: -12px;
@@ -611,6 +611,7 @@
 
   div[slider] > input[type="range"]::-ms-track {
     -webkit-appearance: none;
+    appearance: none;
     background: transparent;
     color: transparent;
   }

src/assets/scss/modules/_forms.scss

@@ -415,8 +415,8 @@
     &.dp-error {
       //TODO: DE-470 - https://makingsense.atlassian.net/browse/DE-470
       //@extend .dp-message-box;
-      @include dp-message(colors.$dp-color-red, var.$dp-sizing--lvl3);
       background-image: url("assets/img/error-message.svg");
+      @include dp-message(colors.$dp-color-red, var.$dp-sizing--lvl3);
 
       a,
       button {
@@ -427,8 +427,8 @@
     &.dp-ok-message {
       //TODO: DE-470 - https://makingsense.atlassian.net/browse/DE-470
       //@extend .dp-message-box;
-      @include dp-message(colors.$dp-color-green, var.$dp-sizing--lvl3);
       background-image: url("assets/img/ok-message.svg");
+      @include dp-message(colors.$dp-color-green, var.$dp-sizing--lvl3);
 
       .forgot-link {
         margin: var.$dp-spaces--lv4 var.$dp-spaces--lv0;
@@ -438,8 +438,8 @@
     &.dp-warning-message {
       //TODO: DE-470 - https://makingsense.atlassian.net/browse/DE-470
       //@extend .dp-message-box;
-      @include dp-message(colors.$dp-color-darkgrey, var.$dp-sizing--lvl3);
       background-image: url("assets/img/warning-icon.svg");
+      @include dp-message(colors.$dp-color-darkgrey, var.$dp-sizing--lvl3);
     }
 
     .error {
@@ -470,22 +470,22 @@
     .complete-message {
       margin-right: var.$dp-spaces--lv4;
       color: colors.$dp-color-lightgrey;
-      @include circle(colors.$dp-color-lightgrey);
       display: inline-block;
+      @include circle(colors.$dp-color-lightgrey);
     }
     /* Class to indicate that this validation is complete */
     .waiting-message {
       margin-right: var.$dp-spaces--lv4;
       color: colors.$dp-color-grey;
-      @include circle(colors.$dp-color-yellow);
       display: inline-block;
+      @include circle(colors.$dp-color-yellow);
     }
     /* Class for waiting complete the password */
     .lack-message {
       margin-right: var.$dp-spaces--lv4;
       color: colors.$dp-color-red;
-      @include circle(colors.$dp-color-red);
       display: inline-block;
+      @include circle(colors.$dp-color-red);
     }
     /* Class for lack digit in the password */
     .secure-message {
@@ -708,10 +708,10 @@
     }
 
     .dp-button.button--loading:after {
-      @include preload.dp-preloader(colors.$dp-color-grey, 1.5em);
       border-color: rgba(204, 204, 204, 0.3);
       border-top-color: colors.$dp-color-silver;
       left: 9px;
+      @include preload.dp-preloader(colors.$dp-color-grey, 1.5em);
     }
   }
 

src/assets/scss/templates/_index.scss

@@ -16,3 +16,4 @@
 @use "reportes";
 @use "signup";
 @use "subscriber-history";
+@use "onsite-dashboard";

src/assets/scss/templates/_onsite-dashboard.scss

@@ -0,0 +1,41 @@
+@use "helpers/colors";
+@use "helpers/mixins";
+@use "core/variables";
+@use "core/typography";
+@use "core/settings";
+@use "modules/box";
+
+.dp-library {
+  .dp-onsite-kpi {
+    .kpi-ul {
+      justify-items: center;
+      gap: 12px;
+
+      li {
+        width: 20%;
+        margin: 0px !important;
+
+        .dp-kpi-card-widgets {
+          padding: 20px 16px !important;
+
+          .dpicon-onsite-kpi {
+            width: 50px;
+            height: 50px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          h3 {
+            font-size: 24px;
+            line-height: 30px;
+          }
+
+          span {
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+}

src/assets/scss/templates/_reportes.scss

@@ -100,6 +100,10 @@
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: space-between;
+
+    &.border {
+      border: 1px solid #e7e5dc;
+    }
   }
 
   .form-filters .filter {