siam-ui-utils 2.1.10 → 2.1.11

package/src/assets/css/sass/_mixins.scss

@@ -0,0 +1,118 @@
+// Mixin to prefix several properties at once
+// @author Hugo Giraudel
+// @param {Map} $declarations - Declarations to prefix
+// @param {List} $prefixes (()) - List of prefixes to print
+@mixin prefix($declarations, $prefixes: ()) {
+  @each $property, $value in $declarations {
+    @each $prefix in $prefixes {
+      #{'-' + $prefix + '-' + $property}: $value;
+    }
+    #{$property}: $value;
+  }
+}
+
+// Gives a card depth effect.
+// @param {Number} $depth - depth level (between 1 and 5)
+// @link http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design
+// @requires {function} top-shadow
+// @requires {function} bottom-shadow
+@mixin depth($depth) {
+  @if $depth < 1 {
+    box-shadow: none;
+  } @else if $depth > 5 {
+    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
+  } @else {
+    box-shadow: bottom-shadow($depth), top-shadow($depth);
+  }
+}
+
+// Computes a top-shadow for a card effect.
+// @param {Number} $depth - depth level
+// @return {List}
+
+@function top-shadow($depth) {
+  $primary-offset: nth($shadowOffsetsTop, $depth) * 1px;
+  $blur: nth($shadowBlursTop, $depth) * 4px;
+  $color: rgba(black, nth($shadowOpacitiesTop, $depth));
+
+  @return 0 $primary-offset $blur $color;
+}
+
+// Computes a bottom-shadow for a card effect.
+// @param {Number} $depth - depth level
+// @return {List}
+@function bottom-shadow($depth) {
+  $primary-offset: nth($shadowOffsetsBottom, $depth) * 1px;
+  $blur: nth($shadowBlursBottom, $depth) * 5px;
+  $color: rgba(black, nth($shadowOpacitiesBottom, $depth));
+  @return 0 $primary-offset $blur $color;
+}
+
+@mixin clearfix() {
+  &::after {
+    display: block;
+    content: "";
+    clear: both;
+  }
+}
+
+
+
+//Responsive Breakpoints
+
+$breakpoints: (
+  xxs: 420px,
+  xs: 576px,
+  sm: 768px,
+  md: 992px,
+  lg: 1200px,
+  xl: 1440px
+);
+
+
+@mixin respond-above($breakpoint) {
+  // If the breakpoint exists in the map.
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Get the breakpoint value.
+    $breakpoint-value: map-get(
+      $breakpoints,
+      $breakpoint
+    ); // Write the media query.
+    @media (min-width: ($breakpoint-value - 1)) {
+      @content;
+    }
+    // If the breakpoint doesn't exist in the map.
+  } @else {
+    // Log a warning.
+    @warn "Invalid breakpoint: #{$breakpoint}.";
+  }
+}
+
+
+@mixin respond-below($breakpoint) {
+  // If the breakpoint exists in the map.
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Get the breakpoint value.
+    $breakpoint-value: map-get(
+      $breakpoints,
+      $breakpoint
+    ); // Write the media query.
+    @media (max-width: ($breakpoint-value - 1)) {
+      @content;
+    }
+    // If the breakpoint doesn't exist in the map.
+  } @else {
+    // Log a warning.
+    @warn "Invalid breakpoint: #{$breakpoint}.";
+  }
+}
+
+@function encodecolor($string) {
+	@if type-of($string) == 'color' {
+        $hex: str-slice(ie-hex-str($string), 4);
+        $string:unquote("#{$hex}");
+    }
+    $string: '%23' + $string;
+	@return $string;
+}
+

package/src/assets/css/sass/_plugins.scss

@@ -0,0 +1 @@
+@import "./plugins/react-table.scss";

package/src/assets/css/sass/ampf_style.scss

@@ -0,0 +1,182 @@
+.modal-spinner {
+  position: absolute;
+  top: 15rem;
+  left: 10rem;
+  background: transparent;
+}
+
+.app-menu {
+  top: 10px !important;
+  height: 100% !important;
+}
+
+.table-icon {
+  font-size: 13px;
+  color: $theme-color-1;
+  margin-right: 5px;
+  line-height: inherit;
+  vertical-align: middle;
+}
+
+.card-icon {
+  font-size: 30px;
+  line-height: 90px;
+  color: $theme-color-1;
+}
+
+.logo-app {
+  width: 30%;
+  margin-left: 35%;
+}
+
+.login-label-siam {
+  font-size: 3rem;
+  color: #900604;
+}
+
+.usuario-session-label {
+  color: #cccc00;
+}
+
+.aplicacion-session-label {
+  color: #00cccc;
+}
+
+.delegacion-session-label {
+  color: #ff0033;
+}
+
+.btn-list {
+  background: transparent !important;
+  font-size: 1rem;
+
+  &:hover {
+    color: red;
+    cursor: pointer;
+  }
+}
+.btn-mov-pend {
+  margin-top: -1.75rem !important;
+}
+
+.container-label-mov-pend {
+  background-color: #dbdfd6 !important;
+  font-size: 1.6rem !important;
+  align-items: center !important;
+  font-weight: bold !important;
+  justify-content: center;
+  border-radius: 7px;
+  color: black;
+  display: flex;
+  padding: 0rem;
+  border: 1px solid grey;
+  width: 200px !important;
+}
+
+.infinte-table {
+  display: inline-block;
+  border-spacing: 0;
+
+  .th-head {
+    box-shadow: initial;
+    border: initial;
+    text-align: left;
+    font-weight: 700;
+    padding-top: 8px;
+    padding-bottom: 16px;
+    padding-left: 10px;
+
+    &.sorted-asc {
+      box-shadow: inset 0 3px 0 0 $theme-color-1;
+    }
+
+    &.sorted-desc {
+      box-shadow: inset 0 -3px 0 0 $theme-color-1;
+    }
+  }
+
+  .tr {
+    :last-child {
+      .td {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  .td {
+    margin: 0;
+    padding: 0.5rem;
+    border-bottom: 1px solid $separator-color-light;
+  }
+
+  .tbl-fs-xxs {
+    font-size: 10px;
+  }
+  .tbl-fs-xs {
+    font-size: 12px;
+  }
+}
+
+.check-btn-icon,
+.btn-icon-l {
+  border-radius: 10px;
+  padding: 0rem 0.2rem 0rem 0.2rem;
+
+  i {
+    color: $theme-color-1;
+  }
+}
+
+.check-btn-icon-2 {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+.check-btn-icon {
+  i {
+    font-size: 28px;
+  }
+}
+
+.btn-icon-l {
+  i {
+    font-size: 20px;
+  }
+}
+.card-margen {
+  border: solid 1px gray;
+  width: 25rem;
+  border-radius: 8px;
+}
+
+.label-margen {
+  font-size: 13px !important;
+}
+.label-periodo-margen {
+  font-size: 14px !important;
+  margin-left: 6rem;
+  font-weight: bold;
+}
+.label-fecha-margen {
+  font-size: 14px !important;
+  margin-left: 3rem;
+  font-weight: bold;
+}
+.label-margen-final {
+  background-color: #cccc00;
+  font-size: 20px !important;
+  font-weight: bold;
+}
+.dz-disable {
+  pointer-events: none;
+  cursor: default;
+}
+.dz-eneable {
+  pointer-events: visible;
+  cursor: default;
+}
+.version-label {
+  font-size: 0.75rem;
+  font-weight: bold;
+  color: #900604;
+  top: 5px;
+}

package/src/assets/css/sass/main.scss

@@ -0,0 +1,11 @@
+@import "./_mixins.scss";
+@import "./_gogo.style.scss";
+@import "./_plugins.scss";
+@import "./ampf_style.scss";
+/** your custom css code **/
+/* 
+html {
+    background-color: $theme-color-1 !important;
+}
+*/ 
+

package/src/assets/css/sass/plugins/react-table.scss

@@ -0,0 +1,311 @@
+/* 19.Datatable */
+.r-table {
+    border: initial;
+
+    .vuetable-body-wrapper {
+        scrollbar-width: thin;
+    }
+    .vuetable-body-wrapper::-webkit-scrollbar-track {
+        background-color: transparent !important;
+        border-radius: 5px;
+    }
+    .vuetable-body-wrapper:hover {
+        &::-webkit-scrollbar-thumb {
+            background-color: $separator-color !important;
+        }
+    }
+
+    .vuetable-body-wrapper::-webkit-scrollbar {
+        width: 5px;
+        background-color: transparent !important;
+    }
+
+    .vuetable-body-wrapper::-webkit-scrollbar-thumb {
+        border-radius: 6px;
+        background-color: transparent;
+    }
+
+    th.sortable:hover {
+        color: $theme-color-1 !important;
+    }
+
+    thead {
+        th {
+            box-shadow: initial;
+            border: initial;
+            text-align: left;
+            font-weight: 700;
+
+            &.sorted-asc {
+                box-shadow: inset 0 3px 0 0 $theme-color-1;
+            }
+
+            &.sorted-desc {
+                box-shadow: inset 0 -3px 0 0 $theme-color-1;
+            }
+        }
+    }
+
+    tr {
+        td,
+        th {
+            padding-top: 20px;
+            padding-bottom: 16px;
+            border: initial;
+        }
+
+        th {
+            padding-bottom: 20px;
+        }
+    }
+
+    tbody {
+        tr {
+            td {
+                border-bottom: 1px solid $separator-color-light;
+            }
+        }
+
+        tr:last-of-type {
+            td {
+                border-bottom: initial;
+            }
+        }
+    }
+}
+
+
+.table-divided {
+    border-collapse: separate;
+    border-spacing: 0px 0.6rem;
+    width: 100% !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    td {
+        padding-top: 20px;
+        padding-bottom: 20px;
+        border-bottom: 1px solid $separator-color-light;
+        outline: initial !important;
+        background: $foreground-color;
+    }
+
+    tr:last-of-type td {
+        border-bottom: initial;
+    }
+
+    p,
+    h6 {
+        margin-bottom: initial;
+    }
+
+    tbody {
+        > tr[role="row"] > td:first-child:before,
+        > tr[role="row"] > th:first-child:before {
+            top: unset;
+            box-shadow: initial;
+            background-color: $theme-color-1;
+            font-size: 12px;
+        }
+
+        tr {
+            @include depth(1);
+            &.selected {
+                @include depth(2);
+            }
+            &.child {
+                td {
+                    padding: 0.75rem 2rem;
+
+                    li {
+                        padding: 0 !important;
+                    }
+                }
+            }
+        }
+    }
+
+    td,
+    th {
+        padding: 1.5rem;
+        border: initial;
+    }
+
+    th.empty {
+        &:before,
+        &:after {
+            content: "";
+        }
+    }
+
+    .itemCheck {
+        text-align: right;
+        pointer-events: none;
+    }
+}
+
+.order-with-arrow {
+    thead {
+        th {
+            padding-top: 0.6em;
+            padding-bottom: 0.6em;
+            border: initial;
+            &.sorted-asc {
+                box-shadow: initial !important;
+            }
+
+            &.sorted-desc {
+                box-shadow: initial !important;
+            }
+
+            &.sortable {
+                // padding-left: 25px;
+            }
+        }
+
+        .sortable,
+        .sorted-asc,
+        .sorted-desc,
+        .sorted-asc_disabled,
+        .sorted-desc_disabled {
+            cursor: pointer;
+            position: relative;
+        }
+
+        .sortable:before,
+        .sortable:after,
+        .sorted-asc:before,
+        .sorted-asc:after,
+        .sorted-desc:before,
+        .sorted-desc:after,
+        .sorted-asc_disabled:before,
+        .sorted-asc_disabled:after,
+        .sorted-desc_disabled:before,
+        .sorted-desc_disabled:after {
+            position: absolute;
+            top: 0.4em;
+            display: block;
+            opacity: 0.3;
+        }
+        .sorted-asc:before,
+        .sorted-desc:after {
+            opacity: 1;
+        }
+
+        .sortable:before,
+        .sorted-asc:before,
+        .sorted-desc:before,
+        .sorted-asc_disabled:before,
+        .sorted-desc_disabled:before {
+            right:  1em;
+            content: "\2191";
+        }
+        .sortable:after,
+        .sorted-asc:after,
+        .sorted-desc:after,
+        .sorted-asc_disabled:after,
+        .sorted-desc_disabled:after {
+            right:  0.5em;
+            content: "\2193";
+        }
+    }
+}
+
+.rounded {
+    .table-divided {
+        tr {
+            border-radius: $border-radius-rounded;
+        }
+        td {
+            border-radius: initial;
+            &:first-child {
+                border-top-left-radius: $border-radius-rounded;
+                border-bottom-left-radius: $border-radius-rounded;
+            }
+
+            &:last-child {
+                border-top-right-radius: $border-radius-rounded;
+                border-bottom-right-radius: $border-radius-rounded;
+            }
+        }
+    }
+}
+.rtl {
+    .rounded {
+        .table-divided {
+            &table {
+                td {
+                    border-radius: initial;
+                    &:first-child {
+                        border-top-right-radius: $border-radius-rounded;
+                        border-bottom-right-radius: $border-radius-rounded;
+                    }
+
+                    &:last-child {
+                        border-top-left-radius: $border-radius-rounded;
+                        border-bottom-left-radius: $border-radius-rounded;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+.responsive-table{
+    @media only screen and (max-width: 800px) {
+	
+        /* Force table to not be like tables anymore */
+        table, 
+        thead, 
+        tbody, 
+        th, 
+        td, 
+        tr { 
+            display: block; 
+        }
+     
+        /* Hide table headers (but not display: none;, for accessibility) */
+        thead tr { 
+            position: absolute;
+            top: -9999px;
+            left: -9999px;
+        }
+     
+        tr { border: 1px solid #ccc; }
+     
+        td { 
+            /* Behave  like a "row" */
+            border: none;
+            border-bottom: 1px solid #eee; 
+            position: relative;
+            padding-left: 50%; 
+            white-space: normal;
+            text-align:left;
+        }
+     
+        td:before { 
+            /* Now like a table header */
+            position: absolute;
+            /* Top/left values mimic padding */
+            top: 6px;
+            left: 6px;
+            width: 45%; 
+            padding-right: 10px; 
+            white-space: nowrap;
+            text-align:left;
+            font-weight: bold;
+        }
+     
+        /*
+        Label the data
+        */
+        td:before { content: attr(data-title); }
+    }
+}

package/src/assets/css/sass/themes/gogo.light.redruby.scss

@@ -0,0 +1,40 @@
+$separator-color-light: #e2cdcd;
+$separator-color: #d7d7d7;
+$background-color: white;
+$foreground-color : white;
+$input-background: white;
+
+$dark-btn-background: #131113;
+$light-btn-background: #ececec;
+
+$button-text-color: #fff;
+
+$theme-color-1: #900604;
+$theme-color-2: #e7284a;
+$theme-color-3: #c06b62;
+$theme-color-4: #843a47;
+$theme-color-5: #d8667a;
+$theme-color-6: #f69682;
+
+$primary-color: #3a3a3a;
+$secondary-color: #8f8f8f;
+$muted-color: #909090;
+
+$gradient-color-1 : #992235;
+$gradient-color-2 : #790503;
+$gradient-color-3 : #900604;
+
+$shadowOffsetsTop : 1 3 10 14 19;
+$shadowBlursTop: 1.5 5 10 14 19;
+$shadowOpacitiesTop: 0.04 0.1 0.19 0.25 0.3;
+
+$shadowOffsetsBottom : 1 3 6 10 15;
+$shadowBlursBottom: 3 6 6 5 6;
+$shadowOpacitiesBottom: 0.04 0.1 0.2 0.22 0.22;
+
+// $logoPath: "/assets/img/logo-black.svg";
+$logoPath: '';
+// $logoPathMobile: "/assets/img/logo-mobile.svg";
+$logoPathMobile: '';
+
+@import "../main.scss";

package/src/bridges/index.js

@@ -0,0 +1 @@
+export * from './with-router-bridge'

package/src/bridges/{index.jsx → with-router-bridge.jsx}

@@ -8,3 +8,5 @@ export const withRouter = (Component) => {
   };
   return Wrapper;
 };
+
+export default withRouter;

package/src/constants.js

@@ -5,12 +5,3 @@ export const TAKE_PHOTO = {
 		'La carga de una foto Selfie de frente junto a tu DNI solo es accesible desde su teléfono',
 	TAKE_PHOTO_MESSAGE: 'Hacer Foto',
 }
-
-
-export const LABEL_BUTTONS = {
-    TOMAR_FOTO_CELULAR: 'Tomar Foto CELULAR',
-    TOMAR_FOTO_WEB: 'Tomar Foto WEB',
-    SUBIR_ARCHIVO_MAX_3: 'Subir archivos (maximo 3)',
-    SUBIR_ARCHIVO_MAX_7: 'Subir archivos (maximo 7)'
-    
-}

package/src/iconos/icon-button-svg.jsx

@@ -46,4 +46,5 @@ const IconButtonSvg = (props) => {
   );
 };
 IconButtonSvg.defaultProps = { theme: {} };
-export default withTheme(IconButtonSvg);
+const _t=withTheme(IconButtonSvg);
+export {_t as IconButtonSvg}

package/src/iconos/index.js

@@ -1,3 +1,2 @@
-import IconButtonSvg from "./icon-button-svg";
-export { IconButtonSvg };
-export * from "./styled-icon";
+export * from "./constants-svg";
+export * from "./icon-button-svg";

package/src/iconos/styled-icon.jsx

@@ -22,4 +22,4 @@ export const Icon = styled(IconDiv)`
     display: ${(props) => props.display || 'none'};
   }
 `;
-export default Icon;
+