Na figura acima, temos a aplicação CSSFlexible rodando no browse Google Chrome. Clique na área de título para o container expandir.

Então como disse antes, até agora nada demais.

O widget Accordion é padrão, utiliza o CSS padrão do BaseTheme da OutSystemsUiWeb, se comportando de forma padrão quanto ao estilo e à funcionalidade.

1) Clique em MainFlow. A seguir, com o botão direito do mouse clique em Add Web Block;

Atenção: Eu optei por criar o WebBlock nesta pasta, mas você pode criar em outra pasta ou mesmo criar a sua pasta própria para WebBlock.

2) Agora, com o WebBlock criado dê dois cliques com o botão esquerdo do mouse sobre ele;

3) Agora arraste três Widgets Container para dentro do WebBlock, um dentro do outro;

4) Clique no segundo Container e digite “text-orange” na propriedade Style Classes;

5) Clique no terceiro Container e digite “over” na propriedade Style Classes;

Observação: Aqui começa o segredo para isolar as definições de classe, pois ao declarar classes abaixo desta hierarquia, estas definições apenas valem a partir deste identificador de classe.

Exemplo: . over .accordion { background-color: transparent; }

Explicando: Na definição de classe accordion para background transparente só vale para widgets criados abaixo de um elemento que utilizar a classe over (em um container/div, por exemplo).

6) Arraste e solte um widget Accordion para dentro do Container over, novamente exclua dois AccordionItem;

7) Arraste e solte um widget Container dentro da área Title do AccordionItem e defina a propriedade Style Classes como “text-orange”;

8) Depois clique na aba Styles defina o Width e Height:

9) Arraste e solte um widget Icon dentro da Container na área Title do AccordionItem;

10) Clique no Icon e informe;

11) Arraste e solte um widget Container dentro da área Content do AccordionItem, depois clique na aba Styles e informe Width e Height;

12) Agora arraste solte um widget Text para dentro do container

Pode ser o nosso famoso texto de testes ”lorem ipsum dolor…”

É isso mesmo! Lembrando que a nossa história de usuário diz para usarmos o widget Accordion padrão, mas que:

• Seu comportamento seja diferente do padrão;
• Qualquer alteração seja isolada do padrão, ou seja, que não afete o layout anterior;
• Mas que tenha um funcionamento completamente do padrão.

Até agora é um comportamento padrão, e minha proposta é fazermos isso apenas com CSS.

1) Clique no WebBlock1 que criamos;

2) Clique no CSS deste WebBlock1

3) Cole a folha de estilos abaixo

. over .accordion { background-color: transparent; }
.over .accordion-item {
    border: 0;
}

 .over .accordion-item:first-child {
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

.over .accordion-item:last-child {
    border-bottom-width: var(--border-size-s);
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
}

.over .accordion-item.is--open {
    border-top: 0;
}

.over .accordion-item .accordion-item-header {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: var(--font-size-s);
    padding: 0px !important;
    padding-left: 3px;
    padding-right: 3px;
}

.over .accordion-item.is--open .accordion-item-header {
    font-weight: var(--font-semi-bold);
}

.over .accordion-item .accordion-item-content.is--animating.is--expanded {
    overflow: hidden;
    z-index: 9;
    overflow: float;
    position: absolute;
    background-color: var(--color-neutral-2) !important;
    border: var(--border-size-m) solid var(--color-black) !important;    
    padding: 5px;
}
 
.over .accordion-item .accordion-item-content.is--expanded {
    overflow: visible;
    z-index: 9;    
    overflow: float;
    position: absolute;
    background-color: var(--color-neutral-2) !important;
    border: var(--border-size-m) solid var(--color-black) !important;
    padding: 5px;
}
 
.over .accordion-item .accordion-item-content,
.accordion-item .accordion-item-content.is--collapsed {
    height: 0;
    padding: var(--space-none) var(--space-m);
    visibility: hidden;
}
 
.over .accordion-item .accordion-item-content.is--expanded {
   height: auto;
   padding: var(--space-none) var(--space-m) var(--space-m) !important;
   visibility: visible;
   background-color: var(--color-neutral-2) !important;
   border: var(--border-size-m) solid var(--color-black) !important;   
   padding: 5px;
}
 
.over .accordion-item .accordion-item-content.is--animating {
   -webkit-transition: all 300ms ease-in-out;
           transition: all 300ms ease-in-out;
}
 
.over .accordion-item-icon {
    color: transparent;
    width: 10px;
    height: 2px;
}
 
.over .accordion-item-icon .fa {
    color: transparent;    
    width: 10px;
    height: 2px;
}
 
.over .accordion-item.is--open .accordion-item-icon {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

4) Agora vá até sua WebScreen1 e dê dois Cliques com o mouse;

5) Clique em Widget Tree;

6) Clique na área Title do formulário e sobre ela clique botão direito no mouse;

7) Clique em Insert WebBlock e depois em WebBlock;

8) Localize o WebBlock1, contendo a redefinição de Accordion que criamos e clique nele;

9) Clique em Deploy e depois em Open in Browser;

Pessoal, além da longa “receita de bolo” compartilho com vocês o projeto CSSFlexiblle.OML

A funcionalidade criada é abstrata, mas pode conter uma seleção, configuração, filtros para listagens e relatórios ou até mesmo um cadastro rápido.

Este artigo não tem a pretensão de te ensinar CSS, mas dar uma luz no que pode ser feito antes de você desperdiçar esforço e horas de desenvolvimento, refazendo o que na verdade não precisa.

Assim como a inserção de código nativo (javascript ou C#), podem dar um gás a nível de performance em sua aplicação, um bom CSS é capaz de dar um sentido funcional completamente diferente.

Espero que estas tenham sido dicas úteis!