dgrcorrientes-modulos 1.0.0

package/src/sass/bulma/extensions/steps/index.sass

@@ -0,0 +1,421 @@
+@import "/src/sass/utilities/_variables.scss"
+
+// ------------------------------------------ STEPPER VARIABLES ------------------------------------------
+$steps-default-color: $muted-300 !default
+$steps-completed-color: $success-600 !default
+$steps-active-color: $primary-600 !default
+$steps-horizontal-min-width: 10em !default
+$steps-vertical-min-height: 4em !default
+$steps-marker-size: 2 !default
+$steps-divider-size: .2em !default
+$steps-gap-size: .3rem !default
+$steps-hollow-border-size: .3em !default
+$steps-thin-divider-size: 1px !default
+$steps-thin-marker-size: .8em !default
+
+=steps-horizontal
+  +tablet
+    &:not(.is-vertical)
+      @content
+  &.is-horizontal
+    @content
+
+=steps-vertical
+  +mobile
+    &:not(.is-horizontal)
+      @content
+  &.is-vertical
+    @content
+
+=steps-all-segments
+  &.steps .steps-segment
+    @content
+
+=steps-active-segment
+  &.steps .steps-segment.is-active
+    @content
+
+=steps-inactive-segments
+  &.steps .steps-segment.is-active ~ .steps-segment
+    @content
+
+.steps
+  +block
+
+  .steps-segment
+    position: relative
+    &:not(:last-child):after
+      // This will contain the horizontal or vertical divider
+      content: " "
+      display: block
+      position: absolute
+
+  +steps-vertical
+    .steps-segment
+      display: block
+      &:not(:last-child)
+        min-height: $steps-vertical-min-height
+    &.is-short
+      .steps-segment
+        flex-grow: 0
+        &:not(:last-child)
+          //this is commented because text would be running perpendicular to the line, so we won't need as much room
+          // min-height: $steps-horizontal-min-width
+
+    &.is-short.is-centered
+      justify-content: center
+
+    &.is-short.is-bottom
+      justify-content: flex-end
+
+    &:not(.is-short)
+      height: 100%
+      display: flex
+      flex-direction: column
+      .steps-segment:not(:last-child)
+        flex-grow: 1
+
+  +steps-horizontal
+    display: flex
+    .steps-segment:not(:last-child)
+      flex-basis: 1rem
+      flex-grow: 1
+      flex-shrink: 1
+
+    &.is-narrow
+      .steps-segment
+        flex-grow: 0
+        &:not(:last-child)
+          min-width: $steps-horizontal-min-width
+
+    &.is-narrow.is-centered
+      justify-content: center
+
+    &.is-narrow.is-right
+      justify-content: flex-end
+
+    &.has-content-centered
+      text-align: center
+
+    &.is-balanced, &.has-content-centered
+      .steps-segment:last-child
+        flex-basis: 1rem
+        flex-grow: 1
+        flex-shrink: 1
+
+    &.is-narrow.has-content-centered
+      .steps-segment:last-child
+        flex-grow: 0
+        min-width: $steps-horizontal-min-width
+
+    .steps-content.is-divider-content
+      text-align: center
+
+  // Marker style
+  .steps-marker
+    align-items: center
+    display: flex
+    border-radius: 50%
+    font-weight: $weight-bold
+    justify-content: center
+    // Position & z-index are needed to put it above the divider
+    position: relative
+    z-index: 5
+
+// Use a mixin to define all ratios in the same spot
+=steps-size($size)
+  font-size: $size
+
+  .steps-marker
+    height: $size * $steps-marker-size
+    width: $size * $steps-marker-size
+    overflow: hidden
+
+  +steps-vertical
+    // Draw a vertical divider
+    display: flex
+    flex-direction: column
+
+    .steps-segment:not(:last-child):after
+      // top and bottom position is almost touching the inner side of a hollow border marker
+      bottom: -$steps-gap-size * 0.8
+      left: calc(#{$size * (calc($steps-marker-size / 2))} - (#{calc($steps-divider-size / 2)}))
+      top: ($size * $steps-marker-size) - ($steps-gap-size * 0.8)
+      width: $steps-divider-size
+
+    // Align the content with the marker
+    .steps-content
+      margin-left: calc(#{$size * calc($steps-marker-size / 2)} + .5em)
+      margin-top: -$size * $steps-marker-size
+      padding-left: 1em
+      padding-bottom: 1em
+
+    .steps-content.is-divider-content
+      margin-top: 0
+      padding-bottom: 0
+
+    &.has-content-centered
+      .steps-content
+        padding-top: calc(#{$size * calc($steps-marker-size / 2)} - .5em)
+
+    &:not(.is-thin)
+      &.has-gaps .steps-segment, .steps-segment.has-gaps
+        &:not(:last-child):after
+          top: ($size * $steps-marker-size) + $steps-gap-size
+          bottom: $steps-gap-size
+
+  +steps-horizontal
+    // Draw a horizontal divider
+    .steps-segment:not(:last-child):after
+      height: $steps-divider-size
+      // top and bottom position is almost touching the inner side of a hollow border marker
+      left: ($size * $steps-marker-size) - ($steps-gap-size * 0.8)
+      right: -$steps-gap-size * 0.8
+      top: calc(#{$size * (calc($steps-marker-size / 2))} - (#{calc($steps-divider-size / 2)}))
+
+    &.has-content-above .steps-segment:not(:last-child)::after
+      bottom: calc(#{$size * calc($steps-marker-size / 2)} - (#{calc($steps-divider-size / 2)}))
+      top: auto
+
+    // extra data
+    .extra-data
+      left: calc(50% + #{($size * calc($steps-marker-size / 2)) + $steps-gap-size})
+      right: calc(-50% + #{($size * calc($steps-marker-size / 2)) + $steps-gap-size})
+      bottom: 100%
+      position: absolute
+
+      &.has-overflow-right
+        overflow: visible
+        right: auto
+        white-space: nowrap
+        min-width: calc(100% - #{$size * calc($steps-marker-size / 2)} - (#{calc($steps-divider-size / 2)}))
+
+      &.has-overflow-left
+        overflow: visible
+        left: auto
+        white-space: nowrap
+        min-width: calc(100% - #{$size * calc($steps-marker-size / 2)} - (#{calc($steps-divider-size / 2)}))
+
+      &.has-overflow-centered
+        overflow: visible
+        left: auto
+        white-space: nowrap
+        min-width: calc(100% - #{$size * calc($steps-marker-size / 2)} - (#{calc($steps-divider-size / 2)}))
+
+    &.has-content-above .extra-data
+      top: 100%
+      bottom: auto
+
+    // Align the content with the marker
+    .steps-content
+      margin-left: $size * calc($steps-marker-size / 2)
+      &:not(:last-child)
+        margin-right: -$size * calc($steps-marker-size / 2)
+
+      &.is-divider-content
+        margin-right: -$size * calc($steps-marker-size / 2)
+        padding-left: 2em
+        padding-right: 2em
+
+    &.has-content-centered
+      .steps-segment:not(:last-child):after
+        left: 50%
+        right: -50%
+      .steps-marker
+        position: absolute
+        left: calc(50% - #{$size * calc($steps-marker-size / 2)})
+      .steps-content
+        margin-top: $size * $steps-marker-size
+        margin-left: .5em
+        margin-right: .5em
+        padding-top: .2em
+
+    &.has-content-above.has-content-centered .steps-content
+      margin-bottom: $size * $steps-marker-size
+      padding-bottom: .2em
+
+    &:not(.is-thin)
+      &.has-gaps .steps-segment, .steps-segment.has-gaps
+        &:not(:last-child):after
+          left: ($size * $steps-marker-size) + $steps-gap-size
+          right: $steps-gap-size
+
+      &.has-content-centered
+        &.has-gaps .steps-segment, .steps-segment.has-gaps
+          &:not(:last-child):after
+            left: calc(50% + #{($size * calc($steps-marker-size / 2)) + $steps-gap-size})
+            right: calc(-50% + #{($size * calc($steps-marker-size / 2)) + $steps-gap-size})
+
+.steps
+  +steps-size($size-normal)
+
+.steps.is-small
+  +steps-size($size-small)
+
+.steps.is-medium
+  +steps-size($size-medium)
+
+.steps.is-large
+  +steps-size($size-large)
+
+// Divider Default Colors
+.steps-segment
+  &:after
+    background-color: $steps-completed-color
+
+  &.is-active
+    &:after
+      background-color: $steps-default-color
+
+  &.is-active ~ .steps-segment
+    &:after
+      background-color: $steps-default-color
+
+// Marker Default Colors
+.steps:not(.is-hollow)
+  .steps-marker:not(.is-hollow)
+    background-color: $steps-completed-color
+    color: findColorInvert($steps-completed-color)
+
+  .steps-segment.is-active
+    .steps-marker:not(.is-hollow)
+      background-color: $steps-active-color
+      color: findColorInvert($steps-active-color)
+
+  .steps-segment.is-active
+    & ~ .steps-segment .steps-marker:not(.is-hollow)
+      background-color: $steps-default-color
+      color: findColorInvert($steps-default-color)
+
+// Hollow style
+.steps.is-hollow .steps-marker,
+.steps-marker.is-hollow
+  border: $steps-hollow-border-size solid $steps-completed-color
+
+.steps.is-hollow .is-active .steps-marker,
+.steps .is-active .steps-marker.is-hollow
+  border-color: $steps-active-color
+
+.steps.is-hollow .steps-segment.is-active ~ .steps-segment .steps-marker,
+.steps-segment.is-active ~ .steps-segment .steps-marker.is-hollow
+  border-color: $steps-default-color
+
+// Override marker color per step
+@each $name, $pair in $colors
+  $color: nth($pair, 1)
+  $color-invert: nth($pair, 2)
+  .steps:not(.is-hollow) .steps-marker:not(.is-hollow)
+    &.is-#{$name}
+      background-color: $color !important
+      color: $color-invert !important
+
+  .steps.is-hollow .steps-marker,
+  .steps .steps-marker.is-hollow
+    &.is-#{$name}
+      border-color: $color !important
+
+// Divider dashed style
+=steps-divider-background($angle, $color, $size)
+  background: repeating-linear-gradient($angle, $color, $color $size, transparent $size, transparent #{$size * 2})
+.steps
+  +steps-vertical
+    &.is-dashed .steps-segment, .steps-segment.is-dashed
+      &:after
+        +steps-divider-background(0deg, $steps-completed-color, 5px)
+
+    &.is-dashed .steps-segment.is-active,
+    &.is-dashed .steps-segment.is-active ~ .steps-segment,
+    .steps-segment.is-active.is-dashed,
+    .steps-segment.is-active ~ .steps-segment.is-dashed
+      &:after
+        +steps-divider-background(0deg, $steps-default-color, 5px)
+
+  +steps-horizontal
+    &.is-dashed .steps-segment,
+    .steps-segment.is-dashed
+      &:after
+        +steps-divider-background(90deg, $steps-completed-color, 10px)
+
+    // the active segment and any subsequent segment get the default colot
+    &.is-dashed .steps-segment.is-active,
+    &.is-dashed .steps-segment.is-active ~ .steps-segment,
+    .steps-segment.is-active.is-dashed,
+    .steps-segment.is-active ~ .steps-segment.is-dashed
+      &:after
+        +steps-divider-background(90deg, $steps-default-color, 10px)
+
+// Thin modifier
+.steps.is-thin
+  .steps-marker
+    width: $steps-thin-marker-size
+    height: $steps-thin-marker-size
+  &.is-hollow .steps-marker,
+  .steps-marker.is-hollow
+    border-width: $steps-thin-divider-size
+    height: calc(#{$steps-thin-marker-size} + #{$steps-thin-divider-size})
+    width: calc(#{$steps-thin-marker-size} + #{$steps-thin-divider-size})
+
+  +steps-vertical
+    .steps-segment
+      &:not(:last-child):after
+        bottom: 0
+        left: calc(#{calc($steps-thin-marker-size / 2)} - #{calc($steps-thin-divider-size / 2)})
+        top: $steps-thin-marker-size
+        width: $steps-thin-divider-size
+
+    .steps-content
+      margin-top: -$steps-thin-marker-size * 1.5
+      margin-left: $steps-thin-marker-size
+
+    &.has-gaps .steps-segment, .steps-segment.has-gaps
+      &:not(:last-child):after
+        bottom: calc($steps-thin-marker-size / 2)
+        top: $steps-thin-marker-size * 1.5
+
+    &.has-content-centered
+      .steps-content
+        padding-top: $steps-thin-marker-size * 2
+
+  +steps-horizontal
+    .steps-segment
+      &:not(:last-child):after
+        left: $steps-thin-marker-size
+        right: 0
+        top: calc(#{calc($steps-thin-marker-size / 2)} - #{calc($steps-thin-divider-size / 2)})
+        height: $steps-thin-divider-size
+    &.has-content-above .steps-segment:not(:last-child)::after
+      bottom: calc(#{calc($steps-thin-marker-size / 2)} - #{calc($steps-thin-divider-size / 2)})
+      top: auto
+    .steps-content
+      margin-top: $steps-thin-marker-size
+
+    &.has-content-centered
+      .steps-segment
+        &:not(:last-child):after
+          left: calc(50% + #{calc($steps-thin-marker-size / 2)})
+          right: calc(-50% + #{calc($steps-thin-marker-size / 2)})
+      .steps-marker
+        position: absolute
+        left: calc(50% - #{calc($steps-thin-marker-size / 2)})
+
+    &.has-gaps .steps-segment, .steps-segment.has-gaps
+      &:not(:last-child):after
+        left: $steps-thin-marker-size * 1.5
+        right: calc($steps-thin-marker-size / 2)
+
+    &.has-content-centered.has-gaps .steps-segment, &.has-content-centered .steps-segment.has-gaps
+      &:not(:last-child):after
+        left: calc(50% + #{(calc($steps-thin-marker-size / 2)) + (calc($steps-thin-marker-size / 2))})
+        right: calc(-50% + #{(calc($steps-thin-marker-size / 2)) + (calc($steps-thin-marker-size / 2))})
+
+//.has-content-above
+.steps:not(.is-vertical).has-content-above
+  .steps-segment
+    display: flex
+    flex-direction: column-reverse
+
+    .steps-content
+      margin-top: 0
+      padding-top: 0
+      display: flex
+      flex-direction: column-reverse

package/src/sass/bulma/variables/_variables-bulma.sass

@@ -0,0 +1,16 @@
+@import "/src/sass/utilities/_variables.scss"
+@import "/node_modules/bulma/sass/utilities/controls"
+@import "/node_modules/bulma/sass/utilities/mixins"
+
+// ======================== IMPORTS VARIABLES / COMPONENTS ============================
+@import "/src/sass/bulma/variables/components/tabs.sass"
+@import "/src/sass/bulma/variables/components/card.sass"
+@import "/src/sass/bulma/variables/components/navbar.sass"
+
+// ======================== IMPORTS VARIABLES / GRID ============================
+@import "/src/sass/bulma/variables/grid/column.sass"
+
+// ======================== IMPORTS VARIABLES / ELEMENTS ============================
+@import "/src/sass/bulma/variables/elements/title.sass"
+@import "/src/sass/bulma/variables/elements/notification.sass"
+@import "/src/sass/bulma/variables/elements/button.sass"

package/src/sass/bulma/variables/components/card.sass

@@ -0,0 +1,20 @@
+//================================ CARD ================================
+$card-color: $text !default
+$card-background-color: $scheme-main !default
+$card-shadow: $shadow !default
+$card-radius: 16px !default
+
+$card-header-background-color: transparent !default
+$card-header-color: $text-strong !default
+$card-header-padding: 0.75rem 1rem !default
+$card-header-shadow: none
+$card-header-weight: $weight-bold !default
+
+$card-content-background-color: transparent !default
+$card-content-padding: 1.5rem !default
+
+$card-footer-background-color: transparent !default
+$card-footer-border-top: 0px
+$card-footer-padding: 0.75rem !default
+
+$card-media-margin: $block-spacing !default

package/src/sass/bulma/variables/components/navbar.sass

@@ -0,0 +1,50 @@
+//================================ NAVBAR ================================
+$navbar-background-color: $scheme-main !default
+$navbar-box-shadow-size: 0 2px 0 0 !default
+$navbar-box-shadow-color: $background !default
+$navbar-height: 3.25rem !default
+$navbar-padding-vertical: 1rem !default
+$navbar-padding-horizontal: 2rem !default
+$navbar-z: 30 !default
+$navbar-fixed-z: 30 !default
+
+$navbar-item-color: $primary-600 !default
+$navbar-item-hover-color: $primary-600 !default
+$navbar-item-hover-background-color: $primary-100 !default
+$navbar-item-active-color: $scheme-invert !default
+$navbar-item-active-background-color: transparent !default
+$navbar-item-img-max-height: 5rem !default
+
+$navbar-burger-color: $navbar-item-color !default
+
+$navbar-tab-hover-background-color: transparent !default
+$navbar-tab-hover-border-bottom-color: $link !default
+$navbar-tab-active-color: $link !default
+$navbar-tab-active-background-color: transparent !default
+$navbar-tab-active-border-bottom-color: $link !default
+$navbar-tab-active-border-bottom-style: solid !default
+$navbar-tab-active-border-bottom-width: 3px !default
+
+$navbar-dropdown-background-color: $scheme-main !default
+$navbar-dropdown-border-top: 2px solid $border !default
+$navbar-dropdown-offset: -4px !default
+$navbar-dropdown-arrow: $link !default
+$navbar-dropdown-radius: $radius-large !default
+$navbar-dropdown-z: 20 !default
+
+$navbar-dropdown-boxed-radius: $radius-large !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
+
+$navbar-dropdown-item-hover-color: $scheme-invert !default
+$navbar-dropdown-item-hover-background-color: $background !default
+$navbar-dropdown-item-active-color: $link !default
+$navbar-dropdown-item-active-background-color: $background !default
+
+$navbar-divider-background-color: $background !default
+$navbar-divider-height: 2px !default
+
+$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
+
+$navbar-breakpoint: $breakpoint_header3_burger !default
+
+$navbar-colors: $colors !default

package/src/sass/bulma/variables/components/tabs.sass

@@ -0,0 +1,28 @@
+//================================ TABS ================================
+$tabs-border-bottom-color: transparent !default
+$tabs-border-bottom-style: solid !default
+$tabs-border-bottom-width: 3px !default
+$tabs-link-color: $text-800 !default
+$tabs-link-hover-border-bottom-color: $primary-600 !default
+$tabs-link-hover-color: $primary-600 !default
+$tabs-link-active-border-bottom-color: $primary-600 !default
+$tabs-link-active-color: $primary-600 !default
+$tabs-link-padding: 0.5em 1em !default
+
+$tabs-boxed-link-radius: $radius !default
+$tabs-boxed-link-hover-background-color: $background !default
+$tabs-boxed-link-hover-border-bottom-color: $border !default
+
+$tabs-boxed-link-active-background-color: $scheme-main !default
+$tabs-boxed-link-active-border-color: $border !default
+$tabs-boxed-link-active-border-bottom-color: transparent !default
+
+$tabs-toggle-link-border-color: $border !default
+$tabs-toggle-link-border-style: solid !default
+$tabs-toggle-link-border-width: 1px !default
+$tabs-toggle-link-hover-background-color: $background !default
+$tabs-toggle-link-hover-border-color: $border-hover !default
+$tabs-toggle-link-radius: $radius !default
+$tabs-toggle-link-active-background-color: $link !default
+$tabs-toggle-link-active-border-color: $link !default
+$tabs-toggle-link-active-color: $link-invert !default

package/src/sass/bulma/variables/elements/button.sass

@@ -0,0 +1,46 @@
+@import "/src/sass/utilities/_variables.scss"
+
+$button-color: $text-strong !default
+$button-background-color: $scheme-main !default
+$button-family: 'SF UI Text', sans-serif !default //EDITADO
+
+$button-border-color: $border !default
+$button-border-width: $control-border-width !default
+
+$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default //EDITADO
+$button-padding-horizontal: 1em !default
+
+$button-hover-color: $link-hover !default
+$button-hover-border-color: $link-hover-border !default
+
+$button-focus-color: $link-focus !default
+$button-focus-border-color: $primary-600 !default //EDITADO
+$button-focus-box-shadow-size: 0 0 0 0.125em !default
+$button-focus-box-shadow-color: bulmaRgba($primary-600, 0.25) !default //EDITADO
+
+$button-active-color: $link-active !default
+$button-active-border-color: $primary-600 !default //EDITADO
+
+$button-text-color: $text !default
+$button-text-decoration: underline !default
+$button-text-hover-background-color: $background !default
+$button-text-hover-color: $text-strong !default
+
+$button-ghost-background: none !default
+$button-ghost-border-color: transparent !default
+$button-ghost-color: $link !default
+$button-ghost-decoration: none !default
+$button-ghost-hover-color: $link !default
+$button-ghost-hover-decoration: underline !default
+
+$button-disabled-background-color: $scheme-main !default
+$button-disabled-border-color: $border !default
+$button-disabled-shadow: none !default
+$button-disabled-opacity: 0.5 !default
+
+$button-static-color: $text-light !default
+$button-static-background-color: $scheme-main-ter !default
+$button-static-border-color: $border !default
+
+$button-colors: $colors !default
+$button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": ($size-small * 0.875), "medium": $size-small, "large": $size-normal), "tablet-only": ("small": ($size-small * 0.875), "normal": ($size-small), "medium": $size-normal, "large": $size-medium)) !default

package/src/sass/bulma/variables/elements/notification.sass

@@ -0,0 +1,8 @@
+$notification-background-color: $background !default
+$notification-code-background-color: $scheme-main !default
+$notification-radius: $radius !default
+$notification-padding: 0px !default
+$notification-padding-ltr: 0px !default
+$notification-padding-rtl: 0px !default
+
+$notification-colors: $colors !default

package/src/sass/bulma/variables/elements/title.sass

@@ -0,0 +1,20 @@
+@import "/src/sass/utilities/_variables.scss"
+
+$title-color: $text-strong !default
+$title-family: false !default
+$title-size: $size-3 !default
+$title-weight: $fw-semibold !default
+$title-line-height: 150% !default
+$title-strong-color: inherit !default
+$title-strong-weight: inherit !default
+$title-sub-size: 0.75em !default
+$title-sup-size: 0.75em !default
+
+$subtitle-color: $text !default
+$subtitle-family: false !default
+$subtitle-size: $size-5 !default
+$subtitle-weight: $weight-normal !default
+$subtitle-line-height: 1.25 !default
+$subtitle-strong-color: $text-strong !default
+$subtitle-strong-weight: $weight-semibold !default
+$subtitle-negative-margin: -1.25rem !default

package/src/sass/bulma/variables/grid/column.sass

@@ -0,0 +1,2 @@
+//================================ COLUMNS ================================
+$column-gap: 0rem !default

package/src/sass/main.sass

@@ -0,0 +1,16 @@
+.elv-component
+	// BULMA IMPORTS -----------------------------
+	//Base
+	@import "./utilities/bulma-variables.sass"
+	@import 'bulma/bulma.sass'
+
+	//EXTENSIONS
+	@import "./bulma/extensions/extensions"
+	@import '/src/sass/utilities/_helpers.scss'
+
+// ICONS -----------------------------
+@import '@fortawesome/fontawesome-free/css/all.css'
+
+// base -----------------------------
+@import './base/_typo'
+@import './base/_base.scss'

package/src/sass/utilities/_bulma-variables.sass

@@ -0,0 +1,20 @@
+@import "/src/sass/utilities/_variables.scss"
+@import "/src/sass/utilities/_derived-variables"
+@import "/node_modules/bulma/sass/utilities/controls"
+@import "/node_modules/bulma/sass/utilities/mixins"
+
+// ======================== IMPORTS VARIABLES / COMPONENTS ============================
+@import "/src/sass/bulma/variables/components/tabs.sass"
+@import "/src/sass/bulma/variables/components/card.sass"
+@import "/src/sass/bulma/variables/components/navbar.sass"
+
+// ======================== IMPORTS VARIABLES / GRID ============================
+@import "/src/sass/bulma/variables/grid/column.sass"
+
+// ======================== IMPORTS VARIABLES / ELEMENTS ============================
+@import "/src/sass/bulma/variables/elements/title.sass"
+@import "/src/sass/bulma/variables/elements/notification.sass"
+@import "/src/sass/bulma/variables/elements/button.sass"
+
+// ======================== IMPORTS VARIABLES / FORMS ============================
+@import "/src/stories/Form/Input/InputVar.sass"