|
|
| Line 80: |
Line 80: |
| <div class="mw-collapsible" data-collapsetext="Collapse" data-expandtext="Expand"> | | <div class="mw-collapsible" data-collapsetext="Collapse" data-expandtext="Expand"> |
|
| |
|
| <div class="products-grid" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;"> | | <div class="products-grid"> |
|
| |
|
| <div class="product-item" style="text-align: center; width: 220px; vertical-align: top;"> | | <div class="product-item" style="text-align: center; width: 220px; display: inline-block; vertical-align: top;"> |
| [[File:Dissolved Oxygen.svg|center|frameless|106x106px|class=product-image|link=Dissolved Oxygen]]
| | [[File:Dissolved Oxygen.svg|center|frameless|106x106px|class=product-image|link=Dissolved Oxygen]] |
| <div style="margin-top: 10px;">'''[[Dissolved Oxygen]]'''</div>
| |
| <div class="mw-customtoggle-1 variations-toggle" style="cursor: pointer;">
| |
| <div style="display: flex; align-items: center; justify-content: center; font-weight: bold;">
| |
| Variations <span class="material-symbols-rounded arrow-icon">keyboard_arrow_down</span>
| |
| </div>
| |
| </div>
| |
| <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-1">
| |
| <div class="variations-list">
| |
| [[Dissolved Oxygen Probe AT-SB-PROBE-DO-P-C1|DO Probe C1]]<br>
| |
| [[Link_Pagina_2|DO Probe C2]]<br>
| |
| [[Link_Pagina_3|DO Probe C3]]
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
|
| <div class="product-item" style="text-align: center; width: 220px; vertical-align: top;"> | | <div style="margin-top: 10px;"> |
| [[File:Conductivity.svg|center|frameless|106x106px|class=product-image|link=Low Conductivity Probe AT-SB-PROBE-LC-P-C1]]
| | '''[[Dissolved Oxygen]]''' |
| <div style="margin-top: 10px;">'''[[ Conductivity]]''' </div> | |
| <div class="mw-customtoggle-2 variations-toggle" style="cursor: pointer;">
| |
| <div style="display: flex; align-items: center; justify-content: center; font-weight: bold;">
| |
| Variations <span class="material-symbols-rounded arrow-icon">keyboard_arrow_down</span>
| |
| </div>
| |
| </div>
| |
| <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-2">
| |
| <div class="variations-list">
| |
| [[Low Conductivity Probe AT-SB-PROBE-LC-P-C1|LC Probe C1]]<br>
| |
| [[Outra_Variacao|LC Probe C2]]
| |
| </div>
| |
| </div>
| |
| </div> | | </div> |
|
| |
|
| <div class="product-item" style="text-align: center; width: 220px; vertical-align: top;"> | | <div class="mw-customtoggle-1 variations-toggle"> |
| [[File:Multiparameter.svg|center|frameless|106x106px|class=product-image|link=Multiparameter Probe AT-SB-PROBE-MP-P-C1]]
| | <div style="display: flex; flex- direction: row;justify-content: center;"> |
| <div style="margin-top: 10px;">'''[[Multiparameter]]'''</div>
| | Variations |
| <div class="mw-customtoggle- 3 variations-toggle " style="cursor: pointer;"> | | <span class="material-symbols-rounded"> |
| <div style="display: flex; align- items: center; justify-content: center ; font-weight: bold;"> | | keyboard_arrow_down |
| Variations <span class="material-symbols-rounded arrow-icon">keyboard_arrow_down</span>
| | </span> |
| </div>
| |
| </div>
| |
| <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-3">
| |
| <div class="variations-list">
| |
| [[Multiparameter Probe AT-SB-PROBE-MP-P-C1|MP Probe C1]]
| |
| </div>
| |
| </div> | | </div> |
| </div> | | </div> |
|
| |
|
| <div class="product-item" style="text-align: center; width: 220px; vertical-align: top;"> | | <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-1" style="line-height: 1.8em; "> |
| [[File:NO3-.svg|center|frameless|106x106px|class=product-image|link=RS-485 Nitrates (NO3) Probe AT-SB-PROBENO3-P]]
| | <div class=" variations- list"> |
| <div style="margin-top: 10px;">'''[[Nitrates(NO3-)]]'''</div>
| | [[Dissolved Oxygen Probe AT-SB-PROBE-DO-P-C1|DO Probe C1]] |
| <div class="mw-customtoggle-4 variations-toggle" style="cursor: pointer;">
| | [[Link_Pagina_2|DO Probe C2]] |
| <div style="display: flex; align-items: center; justify-content: center; font-weight: bold;">
| | [[Link_Pagina_3|DO Probe C3]] |
| Variations <span class="material-symbols-rounded arrow-icon">keyboard_arrow_down</span>
| | </div> |
| </div>
| |
| </div>
| |
| <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible- 4" > | |
| <div class="variations-list">
| |
| [[RS-485 Nitrates (NO3) Probe AT-SB-PROBENO3-P|NO3 Probe]]
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| <div class=" product- item" style="text-align: center; width: 220px; vertical-align: top;"> | |
| [[File:PH.svg|center|frameless|106x106px|class=product-image|link=RS-485 pH Probe AT-SB-PROBE-pH-P]] | |
| <div style="margin-top: 10px;">'''[[pH Probe]]'''</div> | |
| <div class="mw-customtoggle-5 variations-toggle" style="cursor: pointer;">
| |
| <div style="display: flex; align-items: center; justify-content: center; font-weight: bold;">
| |
| Variations <span class="material-symbols-rounded arrow-icon">keyboard_arrow_down</span>
| |
| </div>
| |
| </div>
| |
| <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-5"> | |
| <div class="variations-list">
| |
| [[RS-485 pH Probe AT-SB-PROBE-pH-P|pH Probe P]]
| |
| </div>
| |
| </div>
| |
| </div> | | </div> |
| | </div> |
|
| |
|
| </div> </div> ``` | | <div class="product-item">[[File:Conductivity.svg|center|frameless|106x106px|class=product-image|link=Low Conductivity Probe AT-SB-PROBE-LC-P-C1]]'''[[Conductivity]]''' |
| | | <span class="product-subtitle">Probes</span> |
| ---
| | </div> |
|
| |
|
| ### 2. O CSS Final (Common.css)
| | <div class="product-item">[[File:Multiparameter.svg|center|frameless|106x106px|class=product-image|link=Multiparameter Probe AT-SB-PROBE-MP-P-C1]]'''[[Multiparameter]]''' |
| Para que a seta rode em todos os itens e o fundo cinzento desapareça de vez, usa este bloco:
| | <span class="product-subtitle">Probes</span> |
| | </div> |
|
| |
|
| ```css
| | <div class="product-item">[[File:NO3-.svg|center|frameless|106x106px|class=product-image|link=RS-485 Nitrates (NO3) Probe AT-SB-PROBENO3-P]]'''[[Nitrates(NO3-)]]''' |
| /* Limpeza de estilos padrão do MediaWiki */
| | <span class="product-subtitle">Probes</span> |
| .product-item .mw-collapsible,
| | </div> |
| .product-item .mw-collapsible-content { | |
| background: transparent !important;
| |
| border: none !important;
| |
| }
| |
|
| |
|
| /* Estilo da Seta */
| | <div class="product-item">[[File:PH.svg|center|frameless|106x106px|class=product-image|link=RS-485 pH Probe AT-SB-PROBE-pH-P |
| .arrow-icon {
| | ]]'''[[pH Probe]]''' |
| transition: transform 0.3s ease;
| | <span class="product-subtitle">Probes</span> |
| display: inline-block;
| | </div> |
| vertical-align: middle;
| |
| }
| |
|
| |
|
| /* Rotação da seta baseada no estado do toggle */ | | </div> |
| /* Este seletor atinge o toggle quando ele está "ativo" */
| |
| .variations-toggle.mw-collapsible-toggle-expanded .arrow-icon,
| |
| [aria-expanded="true"] .arrow-icon {
| |
| transform: rotate(180deg);
| |
| }
| |
|
| |
|
| /* Estilo opcional para os links da lista */ | | </div> |
| .variations-list {
| |
| padding-top: 5px;
| |
| font-size: 0.95em;
| |
| line-height: 1.6em;
| |
| }
| |
|
| |
|
| == Accessories == | | == Accessories == |
