@ecored-sena/base-kit 0.0.2 → 0.0.3

package/dist/downloads/t1/Listas2.txt

@@ -0,0 +1,81 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row.mb-5
+      .col-sm.mb-5.mb-sm-0
+        h4 Listado no ordenado básico
+        ul.lista-ul
+          li 
+            i.lista-ul__vineta
+            | Item lista no ordenada
+          li
+            ul
+              li 
+                i.lista-ul__vineta
+                | Item lista no ordenada
+              li 
+                i.lista-ul__vineta
+                | Item lista no ordenada
+          li 
+            i.lista-ul__vineta
+            | Item lista no ordenada
+          li 
+            i.lista-ul__vineta
+            | Item lista no ordenada 
+      .col-sm.mb-5.mb-sm-0
+        h4 Listado no ordenado color
+        ul.lista-ul--color
+          li 
+            i.fas.fa-brain
+            | Item lista no ordenada
+          li
+            ul
+              li 
+                i.fas.fa-bug
+                | Item lista no ordenada
+              li 
+                i.fas.fa-car-side
+                | Item lista no ordenada
+          li 
+            i.fas.fa-compass
+            | Item lista no ordenada
+          li 
+            i.fas.fa-eye
+            | Item lista no ordenada 
+
+      .col-sm
+        h4 Listado no ordenado color + separadores
+        ul.lista-ul--color.lista-ul--separador
+          li 
+            i.fas.fa-feather
+            | Item lista no ordenada
+          li.pb-0
+            ul
+              li 
+                i.fas.fa-cookie
+                | Item lista no ordenada
+          li 
+            i.fas.fa-hippo
+            | Item lista no ordenada
+          li 
+            i.fas.fa-kiwi-bird
+            | Item lista no ordenada        
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t1/Llamado_accion_simplificado.txt

@@ -0,0 +1,66 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row
+      .col-lg-6
+        a.anexo.mb-4(:href="obtenerLink('/downloads/prueba.pdf')" target="_blank")
+          .anexo__icono
+            img(src="@/assets/template/icono-pdf.svg")
+          .anexo__texto
+            p Anexo. Consideraciones generales de tratamiento clínico del paciente con COVID-19 en el servicio de urgencias
+          
+        a.anexo.mb-4(:href="obtenerLink('/downloads/prueba.pdf')" target="_blank")
+          .anexo__icono
+            img(src="@/assets/template/icono-doc.svg")
+          .anexo__texto
+            p Anexo. Consideraciones generales de tratamiento clínico del paciente con COVID-19 en el servicio de urgencias
+          
+        a.anexo.mb-4(:href="obtenerLink('/downloads/prueba.pdf')" target="_blank")
+          .anexo__icono
+            img(src="@/assets/template/icono-xls.svg")
+          .anexo__texto
+            p Anexo. Consideraciones generales de tratamiento clínico del paciente con COVID-19 en el servicio de urgencias
+          
+        a.anexo.mb-4.mb-lg-0(href="https://en.wikipedia.org/wiki/Main_Page" target="_blank")
+          .anexo__icono
+            img(src="@/assets/template/icono-link.svg")
+          .anexo__texto
+            p Anexo. Consideraciones generales de tratamiento clínico del paciente con COVID-19 en el servicio de urgencias
+          
+      .col-lg-6
+        a.anexo.mb-4(:href="obtenerLink('/downloads/prueba.pdf')" target="_blank")
+          .anexo__icono
+            img(src="@/assets/template/icono-zip.svg")
+          .anexo__texto
+            p Anexo. Consideraciones generales de tratamiento clínico del paciente con COVID-19 en el servicio de urgencias
+          
+        a.anexo.mb-4(:href="obtenerLink('/downloads/prueba.pdf')" target="_blank")
+          .anexo__icono
+            img(src="@/assets/template/icono-ppt.svg")
+          .anexo__texto
+            p Anexo. Consideraciones generales de tratamiento clínico del paciente con COVID-19 en el servicio de urgencias
+          
+        a.anexo(:href="obtenerLink('/downloads/prueba.pdf')" target="_blank")
+          .anexo__icono
+            img(src="@/assets/template/icono-xml.svg")
+          .anexo__texto
+            p Anexo. Consideraciones generales de tratamiento clínico del paciente con COVID-19 en el servicio de urgencias
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t1/Modal.txt

@@ -0,0 +1,45 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row
+      .col-auto
+        a.boton.color-acento-botones.indicador__container(@click="modal1 = true")
+          span Abrir modal
+          .indicador--click(v-if="mostrarIndicador")
+      .col
+        p moment. Abandon the shelter of insecurity. Be bold. Greatness isn’t 
+          a.lnk(@click="modal1 = true") Abrir modal 
+          |the height of your stature, it’s the heft of your spirit.
+    
+    ModalA(:abrir-modal.sync="modal1")
+      .row.align-items-center
+        .col-md-6.mb-4.mb-md-0
+          h4 Modal 1
+          p This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+      
+        .col-md-6
+          figure
+            img(src='@/assets/template/img-placeholder.svg', alt='Texto que describa la imagen')
+            figcaption Leyenda de la imagen
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    mostrarIndicador: true,
+    modal1: false,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t1/Parrafos.txt

@@ -0,0 +1,30 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    p.mb-5 Los párrafos mantienen un tamaño regular de 16 pt con interlineado base de 24 pt, sin embargo, existe excepciones para resaltar contenido donde se puede hacer uso de pesos 
+      span.text-thin THIN, 
+      span.text-bold BOLD, 
+      | y 
+      span.text-black BLACK 
+      | o 
+      span.etiqueta etiquetas
+      | de color (según paleta del programa). Así mismo, el ancho de los cajones textos permite variación en las doce (12) columnas. 
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t1/Tabla1.txt

@@ -0,0 +1,51 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .tabla-a.color-acento-botones 
+      table
+        caption Leyenda de la tabla
+        thead
+          tr
+            th Encabezado 1
+            th Encabezado 2
+            th Encabezado 3
+            th Encabezado 4
+            th Encabezado 5
+        tbody
+          tr
+            td Celda 1
+            td Celda 2
+            td Celda 3
+            td Celda 4
+            td Celda 5
+          tr
+            td Celda 1
+            td Celda 2
+            td Celda 3
+            td Celda 4
+            td Celda 5
+          tr
+            td Celda 1
+            td Celda 2
+            td Celda 3
+            td Celda 4
+            td Celda 5
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t1/Tabla2.txt

@@ -0,0 +1,42 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .tabla-b.color-acento-contenido
+      .tabla-b__header
+        h4.mb-0 Niveles del lenguaje
+      table
+        caption Leyenda de la tabla
+        tr
+          th Vulgar
+          td Get back to work. Learn from criticism. Creativity is a work-ethic. Design as if your life depended on it. Keep going. It isn’t what you are.
+        tr
+          th Coloquial
+          td It isn’t what you are, but what you’re going to become. Don’t censor yourself.  Sterility leads to susceptibility.It is, in effect, conditioned to prefer bad design.
+        tr
+          th Convencional o estándar
+          td Paul Rand once said, “The public is more familiar with bad design than good design. leassuring. You are not your work. Don’t fucking lie to yourself. Life depended on it. Keep going
+        tr
+          th Técnico
+          td The new becomes threatening, the old reassuring.” You are not your work. Don’t lie to yourself. Never, never assume that what Respect your craft. Widows and orphans are terrible.
+        tr
+          th Formal
+          td Design as if your life depended on it. Keep going. It isn’t what you are, but what you’re going to become. Don’t censor yourself. 
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t1/Tabla3.txt

@@ -0,0 +1,80 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .tabla-c
+      table
+        caption Leyenda de la tabla
+        tr
+          th 03 de marzo
+          td 
+            p.text-small Donec mattis libero quis nisi euismod, a sodales magna porttitor. Morbi nunc elit, feugiat a nisl eu, venenatis ultrices dui. Suspendisse at sodales est
+          td
+            .h6.mb-0 $12.500.200
+          td
+            .h6.mb-0 $12.500.200
+            span.text-small Textos pequeños
+          td
+            .h6 FDSD33
+        tr
+          th 03 de marzo
+          td 
+            p.text-small Donec mattis libero quis nisi euismod, a sodales magna porttitor. Morbi nunc elit, feugiat a nisl eu, venenatis ultrices dui. Suspendisse at sodales est
+          td
+            .h6.mb-0 $12.500.200
+          td
+            .h6.mb-0 $12.500.200
+            span.text-small Textos pequeños
+          td
+            .h6 FDSD33
+        tr
+          th 03 de marzo
+          td 
+            p.text-small Donec mattis libero quis nisi euismod, a sodales magna porttitor. Morbi nunc elit, feugiat a nisl eu, venenatis ultrices dui. Suspendisse at sodales est
+          td
+            .h6.mb-0 $12.500.200
+          td
+            .h6.mb-0 $12.500.200
+            span.text-small Textos pequeños
+          td
+            .h6 FDSD33
+        tr
+          th 03 de marzo
+          td 
+            p.text-small Donec mattis libero quis nisi euismod, a sodales magna porttitor. Morbi nunc elit, feugiat a nisl eu, venenatis ultrices dui. Suspendisse at sodales est
+          td
+            .h6.mb-0 $12.500.200
+          td
+            .h6.mb-0 $12.500.200
+            span.text-small Textos pequeños
+          td
+            .h6 FDSD33
+        tr
+          th 03 de marzo
+          td 
+            p.text-small Donec mattis libero quis nisi euismod, a sodales magna porttitor. Morbi nunc elit, feugiat a nisl eu, venenatis ultrices dui. Suspendisse at sodales est
+          td
+            .h6.mb-0 $12.500.200
+          td
+            .h6.mb-0 $12.500.200
+            span.text-small Textos pequeños
+          td
+            .h6 FDSD33    
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t1/Video.txt

@@ -0,0 +1,26 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    figure
+      .video
+        iframe(width="560" height="315" src="https://www.youtube.com/embed/2L91WMqw96A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen)
+      figcaption Video: Leyenda del video
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t10/Tarjetas_animadas.txt

@@ -0,0 +1,57 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row
+      .col-sm-6.col-xl-3.mb-4.mb-xl-0
+        .tarjeta.tarjeta-slide.arriba.color-primario(@mouseover="indicadorTarjetaSlide = false")
+          .indicador--hover(v-if="indicadorTarjetaSlide")
+          .tarjeta-slide__contenedor
+            .tarjeta-slide__contenido.p-4.p-xl-5
+              h1 John Doe
+              p Lorem ipsum dolor sit amet, 
+            .tarjeta-slide__img(:style="{'background-image': `url(${require('@/assets/curso/temas/tarjetas/avatar.svg')})`}")
+
+      .col-sm-6.col-xl-3.mb-4.mb-xl-0
+        .tarjeta.tarjeta-slide.abajo.color-secundario
+          .tarjeta-slide__contenedor
+            .tarjeta-slide__img(:style="{'background-image': `url(${require('@/assets/curso/temas/tarjetas/avatar.svg')})`}")
+            .tarjeta-slide__contenido.p-4.p-xl-5
+              h1 John Doe
+              p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus id, vulputate turpis.
+
+      .col-sm-6.col-xl-3.mb-4.mb-sm-0
+        .tarjeta.tarjeta-slide.derecha.color-acento-contenido
+          .tarjeta-slide__contenedor
+            .tarjeta-slide__img(:style="{'background-image': `url(${require('@/assets/curso/temas/tarjetas/avatar.svg')})`}")
+            .tarjeta-slide__contenido.p-4.p-xl-5
+              h1 John Doe
+              p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus id, vulputate turpis.
+
+      .col-sm-6.col-xl-3
+        .tarjeta.tarjeta-slide.izquierda.color-acento-botones(@mouseover="indicadorTarjetaSlide = false")
+          .tarjeta-slide__contenedor
+            .tarjeta-slide__img(:style="{'background-image': `url(${require('@/assets/curso/temas/tarjetas/avatar.svg')})`}")
+            .tarjeta-slide__contenido.p-4.p-xl-5
+              h1 John Doe
+              p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus id, vulputate turpis.
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    indicadorTarjetaSlide: true,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t10/Tarjetas_animadas2.txt

@@ -0,0 +1,57 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row.mb-4
+      .col-sm-6.col-xl-3.mb-4.mb-xl-0
+        .tarjeta.tarjeta-flip.color-primario
+          .tarjeta-flip__contenedor
+            .tarjeta-flip__img(:style="{'background-image': `url(${require('@/assets/curso/temas/tarjetas/avatar.svg')})`}")
+            .tarjeta-flip__contenido.p-4
+              h4 John Doe
+              p.mb-0 Lorem ipsum dolor sit amet, 
+
+      .col-sm-6.col-xl-3.mb-4.mb-xl-0
+        .tarjeta.tarjeta-flip.color-secundario(@mouseover="indicadorTarjetaFlip = false")
+          .indicador--hover(v-if="indicadorTarjetaFlip")
+          .tarjeta-flip__contenedor
+            .tarjeta-flip__img(:style="{'background-image': `url(${require('@/assets/curso/temas/tarjetas/avatar.svg')})`}")
+            .tarjeta-flip__contenido.p-4
+              h4 John Doe
+              p.mb-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus id, vulputate turpis.
+
+      .col-sm-6.col-xl-3.mb-4.mb-sm-0
+        .tarjeta.tarjeta-flip.color-acento-contenido
+          .tarjeta-flip__contenedor
+            .tarjeta-flip__img(:style="{'background-image': `url(${require('@/assets/curso/temas/tarjetas/avatar.svg')})`}")
+            .tarjeta-flip__contenido.p-4
+              h4 John Doe
+              p.mb-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus id, vulputate turpis.
+
+      .col-sm-6.col-xl-3
+        .tarjeta.tarjeta-flip.color-acento-botones
+          .tarjeta-flip__contenedor
+            .tarjeta-flip__img(:style="{'background-image': `url(${require('@/assets/curso/temas/tarjetas/avatar.svg')})`}")
+            .tarjeta-flip__contenido.p-4
+              h4 John Doe
+              p.mb-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus id, vulputate turpis.
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    indicadorTarjetaFlip: true,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t10/Tarjetas_avatar.txt

@@ -0,0 +1,62 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row
+      .col-sm-6.col-lg-3.mb-4.mb-lg-0
+        .tarjeta--boton.color-primario.p-4
+          .row.justify-content-center.mb-3
+            .col-7
+              figure
+                img(src='@/assets/componentes/ej-05.svg', alt='Texto que describa la imagen')
+          h3.text-center Intuition important
+          p.text-small.mb-0 Sed ut perspiciatis unde omnis iste natus error sit vtatem accusa ntium dol.
+
+      .col-sm-6.col-lg-3.mb-4.mb-lg-0
+        .tarjeta--boton.color-secundario.p-4
+          .row.justify-content-center.mb-3
+            .col-7
+              figure
+                img(src='@/assets/componentes/ej-05.svg', alt='Texto que describa la imagen')
+          h3.text-center Intuition important
+          p.text-small.mb-0 Sed ut perspiciatis unde omnis iste natus error sit vtatem accusa ntium dol.
+
+      .col-sm-6.col-lg-3.mb-4.mb-sm-0
+        .tarjeta--boton.color-acento-contenido.text-white--hover.p-4
+          .row.justify-content-center.mb-3
+            .col-7
+              figure
+                img(src='@/assets/componentes/ej-05.svg', alt='Texto que describa la imagen')
+          h3.text-center Intuition important
+          p.text-small.mb-0 Sed ut perspiciatis unde omnis iste natus error sit vtatem accusa ntium dol.
+
+      .col-sm-6.col-lg-3
+        .tarjeta--boton.color-acento-botones.p-4
+          .row.justify-content-center.mb-3
+            .col-7
+              figure
+                img(src='@/assets/componentes/ej-05.svg', alt='Texto que describa la imagen')
+          h3.text-center Intuition important
+          p.text-small.mb-0 Sed ut perspiciatis unde omnis iste natus error sit vtatem accusa ntium dol.
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>
+<style>
+.no-pointer .tarjeta--boton
+  cursor: initial !important
+</style>

package/dist/downloads/t10/Tarjetas_avatar2.txt

@@ -0,0 +1,45 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    //- .tarjeta debe ir acompañado de una de una de estas clases => 
+    //- .color-primario, .color-secundario, .color-acento-contenido, .color-acento-botones
+    //- estas clases tambien tienen un modificador --borde
+    .row
+      .col-lg-6
+        .tarjeta-avatar-b.mb-5
+          .tarjeta-avatar-b__img
+            img(src='@/assets/componentes/ej-05.svg' alt='')
+          .tarjeta.tarjeta--azul
+            .p-4
+              h4 John Doe
+              p moment. Abandon the shelter of insecurity. Be bold. Greatness isn’t the height of your stature, it’s the heft of your spirit.
+
+      .col-lg-6
+        .tarjeta-avatar-b.mb-5
+          .tarjeta-avatar-b__img
+            img(src='@/assets/componentes/ej-05.svg' alt='')          
+          .tarjeta.color-acento-botones
+            .p-4
+              h4 John Doe
+              p moment. Abandon the shelter of insecurity. Be bold. Greatness isn’t the height of your stature, it’s the heft of your spirit.
+
+
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>