Histórico da Página
| HTML |
|---|
<div>
<img src="https://tdn.totvs.com/download/attachments/731904073/CAPA4.png?version=1&modificationDate=1673616255015&api=v2" alt=""> </div> |
| HTML |
|---|
<style>
img {
max-width: 100%;
}
</style> |
| HTML |
|---|
<p class="texto">¿QUÉ HAY DE NUEVO? </p> |
| HTML |
|---|
<style>
#title-text {
display: none !important;}
.grid {
margin-top: 60px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.texto {
position: relative;
text-align: center;
color: #353535;
font-size: 30px;
font-family: "lato", serif;
font-weight: 800;
}
h3 {
margin-right: 20px;
background-color: #fff;
border: 2px solid #0397e9;
padding: 15px;
margin: 0px;
border-radius: 40px;
text-align: center;
font-family: LATO;
color: #0397e9;
font-size: 16px;
box-shadow: 2px #636363;
cursor: pointer;
text-decoration: none; }
a {
text-decoration: none;
}
</style> |
| HTML |
|---|
<div id="cd-timeline" class="cd-container">
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-melhoria">
<img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="NOVO RECURSO">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2> Borrado lógico (Actividades)</h2>
<br>
<span class="badge badge-melhoria">MEJORA</span>
<p align="justify">Obtenga más control y organización sobre su lista de actividades. Con el nuevo recurso de borrado de lógica, ahora usted puede borrar de su lista aquellas actividades innecesarias. ¡Haga la prueba y sienta la diferencia! </p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733191298'> <button class="button-2">MÁS INFORMACIÓN</button></a>
</div>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-melhoria">
<img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="NUEVO RECURSO">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Importación de datos en masa para forecastt</h2>
<br>
<span class="badge badge-melhoria">MEJORA</span>
<p>Est¿Está cansado de incluir datos manualmente en el módulo de Planificación? No se preocupe más, ¡tenemos una novedad que le ayudará y optimizará el proceso! A partir de ahora, tiene la opción de importar datos por medio de archivos CSV, dejando el registro de datos a larga escala mucho más rápido y eficiente.</p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733190747'> <button class="button-2">MÁS INFORMACIÓN</button></a>
</div>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-melhoria">
<img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v" alt="NUEVO RECURSO">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>TOTVS CRM WhatsApp Extension: envío de audios al CRM </h2>
<br>
<span class="badge badge-melhoria">MEJORA</span>
<p>¿Y si pudiera tener todos los audios de sus clientes grabados y organizados en su CRM? ¡Con la extensión del TOTVS CRM esto es posible! Ahora, con el TOTVS CRM WhatsApp Extension, usted puede adjuntar audios y enviar al CRM. Y lo mejor, ¡todo dentro del contexto! Por medio de este recurso, será posible acompañar la fecha de envío del registro y reproducirlo sin necesidad de hacer el download. Increíble ¿verdad? </p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733191420'> <button class="button-2">MÁS INFORMACIÓN</button></a>
</div>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-melhoria">
<img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="NUEVO RECURSO">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Reglas con multiniveles de ocultación y edición condicionales en la pantalla de Actividades</h2>
<br>
<span class="badge badge-melhoria">MEJORA</span>
<p>¡Con el nuevo recurso de reglas con multiniveles, usted tiene total control sobre su formulario de actividades! Ahora es posible mostrar, ocultar, marcar como solamente lectura o definir los elementos del formulario de actividades utilizando la regla condicional. </p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733191203'> <button class="button-2">MÁS INFORMACIÓN</button></a>
</div>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-melhoria">
<img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MEJORA">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Desactivar/Activar las etapas ganadas, perdidas y descartadas del pipeline de oportunidades </h2>
<br>
<span class="badge badge-melhoria">MEJORA</span>
<p>M¡Más flexibilidad para adaptar los pipelines a las necesidades específicas de su negocio! Ahora, por medio del constructor de pipelines, usted puede activar o desactivar las etapas: ganadas, perdidas y descartadas. Esta mejora permitirá la configuración de las etapas de finalización, para que los pipelines sean adherentes a cualquier jornada del cliente. </p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=732674154'> <button class="button-2">MÁS INFORMACIÓN</button></a>
</div>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-melhoria">
<img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MELHORIA">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Inclusión de la Unidad de medida en la Orden de venta (Mobile)</h2>
<br>
<span class="badge badge-melhoria">MEJORA</span>
<p>¡Basta de confusión a la hora de incluir productos en la Orden de venta! La mejora permite que la sigla de la unidad de medida del producto se visualice en los campos “Stock” y “Precio de venta”, concediendo al vendedor la claridad necesaria para hacer la mejor negociación.</p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=732664978'> <button class="button-2">MÁS INFORMACIÓN</button></a>
</div>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-melhoria">
<img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MEJORA">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Integración de Leads: reformulación de la integración DataHub </h2>
<br>
<span class="badge badge-melhoria">MEJORA</span>
<p> Si desea importar leads de otras herramientas para el TOTVS CRM, entonces, ¡esta es la novedad que estaba esperando! En esta versión, reestructuramos y repensamos la integración DataHub para aprovechar todos los recursos disponibles en la plataforma: validaciones de duplicación y el mapeo de campos personalizados. También renombramos el DataHub como "Integración de Leads" y lo transformamos en un generador de token para que herramientas terceras puedan autenticarse en nuestras API. Increíble, ¿verdad? </p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733190964'> <button class="button-2">SAIBA>MÁS MAIS<INFORMACIÓN</button></a>
</div>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-melhoria">
<img src="https://tdn.totvs.com/download/attachments/731904073/melhoria.png?version=3&modificationDate=1673216497826&api=v2" alt="MEJORA">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Reflejar en la aplicación móvil, reglas de exhibición a partir de campos personalizados </h2>
<br>
<span class="badge badge-melhoria">MEJORA</span>
<p>Estamos muy entusiasmados en poder ofrecer más facilidad a su día a día. Así como en el entorno web, ahora el entorno mobile refleja reglas de exhibición a partir de campos personalizados. Estas reglas definidas previamente por el administrador, condicionan el estatus de los campos, dejándolo: ocultos, visibles, editables o solamente lectura. Con esta mejora, usted tendrá más movilidad y eficiencia en la gestión del CRM.CRM.</p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733188343'> <button class="button-2">MÁS INFORMACIÓN</button></a>
</div>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-manutencao">
<img src="https://tdn.totvs.com/download/attachments/731904073/manutencao.png?version=1&modificationDate=1673215850828&api=v2" alt="MANTENIMIENTO">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2> Exportación de datos con filtros activados </h2>
<br>
<span class="badge badge-manutencao">MANTENIMIENTO</span>
<p>Ajustamos el mecanismo de exportación para que los filtros aplicados en las columnas de visualización de indicadores se consideren en la generación de los archivos csv y xlsx. </p>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-manutencao">
<img src="https://tdn.totvs.com/download/attachments/731904073/manutencao.png?version=1&modificationDate=1673215850828&api=v2" alt="MANTENIMIENTO">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>No se permite grabar un contacto si la cuenta está inactiva</h2>
<br>
<span class="badge badge-manutencao">MANTENIMIENTO</span>
<p> Modificamos la lógica de validaciones del formulario, permitiendo editar contactos de cuentas inactivas.</p>
</div> <!-- cd-timeline-content -->
</div> <!-- cd-timeline-block -->
</div> <!-- cd-timeline --> |
| HTML |
|---|
<style> #title-text {
display: none !important;} body {
font-size: 100%;
font-family: "lato", serif;
color: #363636;
background-color: #ffffff;
}
a {
color: #acb7c0;
text-decoration: none;
font-family: "lato";
font-size: 16px;
}
img {
max-width: 100%;
}
p {
text-align:justify;
font-family: "Lato", sans-serif;
}
h2
h5 {
font-family: "lato", sans-serif;
font-size: 90px ;
font-weight: bold;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
.cd-container::after {
/* clearfix */
content: "";
display: table;
clear: both;
}
/* --------------------------------
xnugget info
-------------------------------- */
.cd-nugget-info {
text-align: center;
position: absolute;
width: 100%;
height: 50px;
line-height: 50px;
top: 0;
left: 0;
}
.cd-nugget-info a {
position: relative;
font-size: 14px;
color: #718ca1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-nugget-info a:hover {
opacity: 0.8;
}
.cd-nugget-info span {
vertical-align: middle;
display: inline-block;
}
.cd-nugget-info span svg {
display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
fill: #718ca1;
}
/* --------------------------------
Main components
-------------------------------- */
#cd-timeline {
position: relative;
padding: 2em 0;
margin-top: 2em;
margin-bottom: 2em;
}
#cd-timeline::before {
/* this is the vertical line */
content: "";
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 4px;
background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
#cd-timeline {
margin-top: 3em;
margin-bottom: 3em;
}
#cd-timeline::before {
left: 50%;
margin-left: -2px;
}
}
.cd-timeline-block {
position: relative;
margin: 2em 0;
}
.cd-timeline-block:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-block {
margin: 4em 0;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
}
.cd-timeline-img {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08),
0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
display: block;
width: 32px;
height: 32px;
position: relative;
left: 50%;
top: 50%;
margin-left: -16px;
margin-top: -16px;
}
.cd-timeline-img.cd-novo {
background: #363636;
}
.cd-timeline-img.cd-melhoria {
background: #363636;
}
.cd-timeline-img.cd-manutencao {
background: #363636;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
}
.cssanimations .cd-timeline-img.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-img.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-1 0.6s;
-moz-animation: cd-bounce-1 0.6s;
animation: cd-bounce-1 0.6s;
}
}
@-webkit-keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes cd-bounce-1 {
0% {
opacity: 0;
-moz-transform: scale(0.5);
}
60% {
opacity: 1;
-moz-transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
}
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.cd-timeline-content {
position: relative;
margin-left: 50px;
background: #f5f5fa;
border-radius: 0.25em;
max-width: 400px;
padding: 1em;
box-shadow: 0 3px 0 #363636;
}
.cd-timeline-content:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-content h2 {
color: #363636;
font-weight: bold;
}
.cd-timeline-content p,
.cd-timeline-content .cd-date {
font-size: 13px;
font-size: 0.8125rem;
}
.cd-timeline-content .cd-date {
display: inline-block;
}
.cd-timeline-content p {
margin: 1em 0;
line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
float: right;
padding: 0.8em 1em;
background: #5596e6;
color: white;
border-radius: 0.25em;
text-decoration: none;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #ffffff;
}
.cd-timeline-content .cd-date {
float: left;
padding: 0.8em 0;
opacity: 0.7;
}
.cd-timeline-content::before {
content: "";
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid #bfcdd6;
}
@media only screen and (min-width: 768px) {
.cd-timeline-content h2 {
font-size: 20px;
font-size: 1.25rem;
font-weight: bold ;
}
.cd-timeline-content p {
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-content .cd-read-more,
.cd-timeline-content .cd-date {
font-size: 14px;
font-size: 0.875rem;
}
}
@media only screen and (min-width: 1170px) {
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 45%;
}
.cd-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: #d7e4ed;
}
.cd-timeline-content .cd-read-more {
float: left;
}
.cd-timeline-content .cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: #d7e4ed;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
left: auto;
right: 122%;
text-align: right;
}
.button-2 {
padding: 8px 9px;
font-size: 12px;
color: #fff;
background-color: #FDAB0E;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-2:hover {
background-color: #0897E9;
}
.button-2:active {
background-color: #FDAB0E;
}
#wrapper {
display: flex;
flex-direction: column;
gap: 20px;
position: absolute;
inset: 0;
justify-content: center;
align-items: center;
margin: 0;
}
.flexWrap {
display: flex;
gap: 2px;
width: 50px;
}
#disclaimer {
font-family: Tahoma;
color: #333333;
position: fixed;
top: 5%;
right: 5%;
width: 5%;
}
.button-2 {
padding: 8px 9px;
font-size: 12px;
color: #fff;
background-color: #363636;
border: none;
border-radius: 6px;
cursor: pointer;
}
.button-2:hover {
background-color: #feac0e;
}
.button-2:active {
background-color: #feac0e;
}
#wrapper {
display: flex;
flex-direction: column;
gap: 2px;
position: absolute;
inset: 0;
justify-content: center;
align-items: center;
}
.flexWrap {
display: flex;
gap: 2px;
width: 110px;
}
#disclaimer {
font-family: sans-serif;
color: #333333;
position: fixed;
top: 5%;
right: 5%;
width: 5%;
}
.badge-primary {
color: #8686FF;
background-color: #F3F3FF;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold }
.badge-secondary{
color: #ebeef0;
background-color: #2abe74;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold
}
.badge-novo {
color: #fff;
background-color: #20d691;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold }
.badge-danger{
color: #ebeef0;
background-color: #e93e9c;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold }
.badge-manutencao {
color: #FFF;
background-color: #FEAC0E;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold;
}
.badge-melhoria {
color: #FFF;
background-color: #6f60f6;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold;
}
.badge-light {
color: #8686FF;
background-color: #F3F3FF
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold;
}
.badge-dark {
color: #ebeef0;
background-color: #064118;
border-radius: 10px;
padding: 6px 7px;
font-size: 9px;
font-weight: bold }
</style> |
| HTML |
|---|
<div id="faq">
<h1>RESPUESTAS A LAS PREGUNTAS MÁS FRECUENTES</h1>
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2>¿Qué es Release Notes?</h2>
<p>Es el documento que agrupa y detalla todas las actualizaciones de un producto a lo largo de una versión o período.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i> <h2>¿Cómo identificar la nomenclatura de los releases?</h2>
<p align="justify">La versión semántica es un conjunto de reglas sobre cómo los números de los releases/versiones se atribuyen e incrementan, con el objetivo de mantener la compatibilidad e integridad en nuevas liberaciones. Para cada registro se debe tener un número único de liberación (release/versión) y, después de registrarlo, el código de esta liberación ya no puede modificarse. Cualquier necesidad de modificación en la solución, debe registrarse con un nuevo número de liberación. La estandarización de la nomenclatura de releases/versión de los productos de la marca TOTVS tiene como propósito facilitar el entendimiento del ciclo de vida de los releases por nuestros clientes y equipos internos, alineado con las mejores prácticas de mercado. El estándar de nomenclatura de los productos TOTVS seguirá este ejemplo: 12.1 (versión). 2301 (Año y mes). 0001 (Numeración secuencial opcional en la nomenclatura utilizada cuando exista una liberación con correcciones y modificaciones legales en el release actual).</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>¿Cómo registro sugerencias de mejoras?</h2>
<p> Su idea podrá compartirse por medio del canal Central de colaboración. Esta área se creó para que usted pueda sugerir nuevas funcionalidades para el TOTVS CRM - Gestión de clientes. Las sugerencias de mejoras serán monitoreadas por nuestro equipo de innovación, que evaluará la probabilidad de una futura implementación.</p>
</li>
</ul>
</div> |
| HTML |
|---|
<style>
body {
background: #f4f4f4;
display: flex;
}
#faq {
max-width: 700px;
margin: auto;
padding: 0 15px;
text-align: center;
}
section.faq {
padding-top: 2em;
padding-bottom: 3em;
}
#faq ul {
text-align: left;
}
.transition, p, ul li i:before, ul li i:after {
transition: all 0.3s;
}
#faq .no-select, #faq h2 {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
}
#faq h1 {
color: #393939;
margin-bottom: 20px;
margin-top: 0;
font-size: 25px; }
#faq h2 {
color: #5596E6;
font-family: Tahoma, sans-serif;
font-size: 16px;
line-height: 34px;
text-align: left;
padding: 15px 15px 0;
text-transform: none;
font-weight: 300;
letter-spacing: 1px;
display: block;
margin: 0;
cursor: pointer;
transition: .2s;
}
#faq p {
color: #333;
text-align: justify-all;
font-family: 'hm_light', sans-serif;
font-size: 14px;
line-height: 1.45;
position: relative;
overflow: hidden;
max-height: 250px;
will-change: max-height;
contain: layout;
display: inline-block;
opacity: 1;
transform: translate(0, 0);
margin-top: 5px;
margin-bottom: 15px;
padding: 0 50px 0 15px;
transition: .3s opacity, .6s max-height;
hyphens: auto;
z-index: 2;
}
#faq ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}
#faq ul li {
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
/*padding-bottom: 4px;*/
/*padding-top: 18px;*/
background: #fff;
box-shadow: 1px 2px 10px -2px rgba(114,114,158, 21%);
-webkit-tap-highlight-color: transparent;
}
#faq ul li + li {
margin-top: 15px;
}
#faq ul li:last-of-type {
padding-bottom: 0;
}
#faq ul li i {
position: absolute;
transform: translate(-6px, 0);
margin-top: 28px;
right: 15px;
}
#faq ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #5596E6;
width: 3px;
height: 9px;
}
#faq ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
}
#faq ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
}
#faq ul li input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
touch-action: manipulation;
}
#faq ul li input[type=checkbox]:checked ~ h2 {
color: #393939;
}
#faq ul li input[type=checkbox]:checked ~ p {
/*margin-top: 0;*/
max-height: 0;
transition: .3s;
opacity: 0;
/*transform: translate(0, 50%);*/
}
#faq ul li input[type=checkbox]:checked ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
#faq ul li input[type=checkbox]:checked ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
a,
a:visited,
a:focus,
a:active,
a:link {
text-decoration: none;
outline: 0;
}
a {
color: currentColor;
transition: .2s ease-in-out;
}
h1, h2, h3, h4 {
margin: .3em 0;
}
ul {
padding: 0;
list-style: none;
}
</style> |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas