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">O QUE HÁ DE NOVO? </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> Exclusão lógica (Atividades)</h2>
<br>
<span class="badge badge-melhoria">MELHORIA</span>
<p align="justify">Que>Obtenha talmais darcontrole adeuse aoorganização caossobre ea começarsua alista organizar suasde atividades. com mais facilidade? Com o novo recurso de exclusão de lógica, agora você pode deletar da sua lista, aquelas atividades desnecessárias. Experimente hoje e sinta a diferença! </p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733191298'> <button class="button-2">SAIBA MAIS</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="NOVO RECURSO">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Importação de dados em massa para forecast</h2>
<br>
<span class="badge badge-melhoria">MELHORIA</span>
<p>Está cansado de inserir dados manualmente no módulo de Planejamento? Não se preocupe mais, temos uma novidade que o ajudará e otimizará o processo! A partir de agora, você tem a opção de importar dados através de arquivos CSV, tornando o lançamento de dados em larga escala muito mais rápido e eficiente.</p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733190747'> <button class="button-2">SAIBA MAIS</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="NOVO RECURSO">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>TOTVS CRM WhatsApp Extension: envio de áudios para o CRM </h2>
<br>
<span class="badge badge-melhoria">MELHORIA</span>
<p>E se <p>Está cansado de procurar conversas de áudio no WhatsApp?você pudesse ter todos os áudios dos seus clientes, salvos e organizados no seu CRM? Com a extensão do TOTVS CRM, isso é possível! Agora, com o TOTVS CRM WhatsApp Extension, évocê possívelpode enviar áudios como anexo para o CRM. E o melhor, tudo dentro do contexto! ComAtravés odesse enviorecurso, deserá áudiopossível paraacompanhar oa seu CRM, será possível acompanhar a data data do envio do registro e reproduzi-lo sem a necessidade de fazer o download. Incrível, né? </p>
<div class="flexWrap">
<a href='https://wwwtdn.totvs.com/pages/viewpage.action?pageId=733191420'> <button class="button-2">SAIBA MAIS</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="NOVO RECURSO">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Regras com multiníveis de ocultação e edição condicionais na tela de Atividades</h2>
<br>
<span class="badge badge-melhoria">MELHORIA</span>
<p>Com o novo recurso de regras com múltiníveis, você tem total controle sobre o seu formulário de atividades! Agora é possível exibir, ocultar, marcar como somente leitura ou definir os elementos do formulário de atividades usando regra condicional. </p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733191203'> <button class="button-2">SAIBA MAIS</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>Desativar/Ativar as etapas de ganhas, perdidas e descartadas do pipeline de oportunidades </h2>
<br>
<span class="badge badge-melhoria">MELHORIA</span>
<p>Mais flexibilidade para adaptar os pipelines às necessidades específicas do seu negócio! Agora, através do construtor de pipelines, você pode ativar ou desativar as etapas: ganhas, perdidas e descartadas.
Essa melhoria permitirá a configuração das etapas de encerramento, para que os pipelines sejam aderentes a qualquer jornada do cliente. </p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=732674154'> <button class="button-2">SAIBA MAIS</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>Inclusão da Unidade de Medida na Ordem de Venda (Mobile)</h2>
<br>
<span class="badge badge-melhoria">MELHORIA</span>
<p>Chega de confusão na hora de incluir produtos na Ordem de Venda! A melhoria permite que a sigla da unidade de medida do produto, seja visualizada nos campos “Estoque” e “Preço de Venda”, concedendo ao vendedor, a clareza necessária para fazer a melhor negociação.</p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=732664978'> <button class="button-2">SAIBA MAIS</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>Integração de Leads: reformulação da integração DataHub </h2>
<br>
<span class="badge badge-melhoria">MELHORIA</span>
<p> Se você quer importar leads de outras ferramentas para o TOTVS CRM, então esta é a novidade que você esperava! Nesta versão, reestruturamos e repensamos a integração DataHub para explorar todos os recursos disponíveis na plataforma: validações de duplicidade e o mapeamento de campos personalizados. Renomeamos também o DataHub para "Integração de Leads" e o transformamos em um gerador de token para que ferramentas terceiras possam se autenticar em nossas APIs. Incrível, não é? </p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733190964'> <button class="button-2">SAIBA MAIS</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>Refletir no aplicativo móvel, regras de exibição a partir de campos personalizados </h2>
<br>
<span class="badge badge-melhoria">MELHORIA</span>
<p>Estamos empolgados em trazer mais facilidade para o seu dia a dia. Assim como no ambiente web, agora o ambiente mobile reflete regras de exibição a partir de campos personalizados. Essas regras pré-definidas pelo administrador, condicionam o estado dos campos, tornando-os: ocultos, visíveis, editáveis ou somente leitura. Com essa melhoria, você terá mais mobilidade e eficiência na gestão do CRM.</p>
<div class="flexWrap">
<a href='https://tdn.totvs.com/pages/viewpage.action?pageId=733188343'> <button class="button-2">SAIBA MAIS</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="MANUTENÇÃO">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Filtros<h2> aplicadosExportação nasde colunasdados dacom visãofiltros não são aplicados ao exportar para csv e xlsx<ativados </h2>
<br>
<span class="badge badge-manutencao">MANUTENÇÃO</span>
<p>Ajustamos o mecanismo de exportação para que os filtros aplicados nas colunas de visualização de indicadores, sejam considerados na geração dos arquivos csv e xlsx. </p>
<div class="flexWrap">
<a href='https://www.totvs.com/'> <button class="button-2">SAIBA MAIS</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="MANUTENÇÃO">
</div> <!-- cd-timeline-img -->
<div class="cd-timeline-content">
<h2>Não permite salvar um contato se a conta está inativa</h2>
<br>
<span class="badge badge-manutencao">MANUTENÇÃO</span>
<p>This<p> isAlteramos thea contentlógica ofde thevalidações last section</p>
<div class="flexWrap">
<a href='https://www.totvs.com/'> <button class="button-2">SAIBA MAIS</button></a>do formulário, permitindo editar contatos de contas inativas.</p>
</div>
</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>RESPOSTAS ÀS PERGUNTAS
MAIS FREQUENTES</h1>
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2>O que é Release Notes?</h2>
<p>É o documento que agrupa e detalha todas as atualizações de um produto ao longo de uma versão ou período.</p>
</li>
<li>
<input type="checkbox" checked>
<i></i> <h2>Como identificar a nomenclatura dos releases?</h2>
<p align="justify">O versionamento semântico é um conjunto de regras de como os números dos releases/versões são atribuídos e incrementados, com objetivo de manter a compatibilidade e integridade em novas liberações. Para cada lançamento deve ter um número único de liberação (release/versão) e, uma vez lançado, o código dessa liberação não pode mais ser alterado. Qualquer necessidade de alteração na solução, deverá ser lançado com um novo número de liberação. A padronização da nomenclatura de releases/versão dos produtos da marca TOTVS tem o propósito de facilitar a compreensão do ciclo de vida dos releases pelos nossos clientes e equipes internas, alinhado às melhores práticas de mercado. O padrão de nomenclatura dos produtos TOTVS seguirá o exemplo: 12.1 (versão). 2301 (Ano e mês). 0001 (Numeração sequencial opcional na nomenclatura utilizado quando houver uma liberação com correções e alterações legais no release corrente).</p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2>Como faço para registrar sugestões de melhorias?</h2>
<p> Sua ideia poderá ser compartilhada através do canal <a href="https://centraldeatendimento.totvs.com/hc/pt-br/community/topics">Central Colaborativa</a>. Esta área foi criada para você sugerir novas funcionalidades para o TOTVS CRM - Gestão de Clientes. As sugestões de melhorias serão monitoradas pelo nosso time de inovação e avaliada a viabilidade para uma futura implementação.</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