Seção do componente da guia - CSS puro

< div class = "tabComponent {{section.settings.tab_design}} " > 
{ % se seção. configurações . Título da seção ! = em branco % }
 < h1 class = "infoTitle" > { { seção. configurações . seção_título } } < / h1 > 
{ % fim se % }
 < div class = "tabContainer" >
 { % para bloco na seção. blocos % } 
< input class = "inputTab" name = "tabComponent" type = "radio" id = "tab-- {{ forloop.index }} " 
{ % se forloop. primeiro % } verificado = "verificado" { % endif % } > 
< label class = "labelTab" for = "tab-- {{ forloop.index }} " style = "background: {{block.settings.label_bg}} ;" >
 { % se bloco. configurações . img_icon ! = em branco % } 
< img src = " {{block.settings.img_icon | img_url: '50x50'}} "
 alt = " {{block.settings.img_icon.alt}} " >
 { % fim se % }
 <h4> { { bloco . configurações . tab_title } } < / h4 > 
< / etiqueta >
 < div class = "infoTab" >
 { % se bloco. configurações . info_title ! = em branco % } 
< h1 class = "infoTitle" > { { bloco. configurações . info_title } } < / h1 >
 { % fim se % } 
{ % se bloco. configurações . info_title ! = em branco % } 
< div class = "infoDescription" > { { bloco. configurações . info_descrição } } < / div >
 { % fim se % } 
< div > { { bloco. configurações . página . conteúdo } } < / div >
 < / div >
 { % fim para % } 
< / div >
 < / div >
 <estilo> _
 : raiz {
 --tab - bg : { { seção. configurações . tab_bg } } ; 
-- tab - ativo : { { seção. configurações . tab_active } } ;
 --tab - hover : { { seção. configurações . tab_hover } } ; 
--border - color : { { seção. configurações . Cor da borda } } ;
 }

 . tabComponent {
 exibição : flexível ;
 flex - direction : coluna ;
 margem : 5 % ; 
dimensionamento da caixa : caixa de borda ;
 posição : relativa ;
 }

 . tabContainer {
 exibição : flexível ;
 flex - wrap : wrap ;
 }

 . entradaTab {
 posição : absoluta ;
 opacidade : 0 ; 
plano de fundo : var ( -tab - bg ) ;
 }

 . etiquetaTab {
 largura : calc ( 100 % / { { seção.blocos.tamanho } } ) ; 
altura : braçadeira ( 30px, 4vw, 100px ) ;
 margem : automática ;
 preenchimento : 0,5 % ;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 lacuna : 2 % ; 
altura da linha : 1,2 ;
 cursor : ponteiro ;
 intensidade da fonte : Negrito ;
 tamanho da fonte : braçadeira ( 12px, 1,5vw, 24px ) ;
 transição : todos .3s ;
 alinhamento de texto : centro ;
 espaço em branco : nowrap ; 
estouro : oculto ;
 }

 . etiquetaTab img {
 largura : braçadeira ( 20px, 2,5vw, 50px ) ;
 proporção de aspecto : 1 ;
 }
 . etiquetaTab h4 {
 tamanho da fonte : braçadeira ( 14px, 1,5vw, 25px ) ; 
margem : automática ;
 display : bloco embutido ;
 alinhamento vertical : topo ;
 }

 . infoTab {
 Mostrar nenhum ;
 largura : 100 % ;
 preenchimento : 4 % ; 
ordem : 999 ;
 plano de fundo : var ( -tab - bg ) ;
 }

 . inputTab : verificado + . etiquetaTab + . infoTab {
 exibição : bloco ;
 }

 . infoTítulo { 
tamanho da fonte : braçadeira ( 16px, 2vw, 24px ) ;
 }

 . infoDescrição > * {
 tamanho da fonte : braçadeira ( 13px, 1,7vw, 20px ) ;
 }

 /*==== design da guia ====*/
 . delimitado . etiquetaTab { 
raio da borda : 10px 10px 0 0 ;
 preenchimento : 1 % ;
 }

 . delimitado . labelTab : pairar {
 background : var ( -tab - hover ) ! importante ;
 }
 
. delimitado . inputTab : verificado + . etiquetaTab {
 plano de fundo : var ( -tab - bg ) ! importante ;
 border - top : sólido 2px var ( -border - color ) ; 
border - left : sólido 2px var ( -border - color ) ;
 border - right : sólido 2px var ( -border - color ) ;
 border - bottom : nenhum ;
 }
 . delimitado . infoTab { 
plano de fundo : var ( -tab - bg ) ;
 border - bottom : solid 2px var ( -border - color ) ;
 border - left : sólido 2px var ( -border - color ) ; 
border - right : sólido 2px var ( -border - color ) ;
 }

 . sem fronteira . etiquetaTab {
 borda - inferior : sólido 2px #e6e6e6;
 }

 . sem fronteira . labelTab : ativo { 
border - bottom : solid 4px var ( -border - color ) ;
 background : var ( -tab - active ) ! importante ;
 }
 . sem fronteira . labelTab : pairar { 
background : var ( -tab - hover ) ! importante ;
 }
 . sem fronteira . inputTab : verificado + . etiquetaTab {
 border - bottom : solid 4px var ( -border - color ) ; 
background : var ( -tab - active ) ! importante ;
 }

 @media ( largura mínima : 600px ) {
 . delimitado . etiquetaTab {
 raio da borda : 10px 10px 0 0 ; 
border - bottom : solid 2px var ( -border - color ) ;
 }
 }

 @media ( largura máxima : 600px ) {
 . etiquetaTab {
 display : bloco embutido ;
 margem : automática ; 
largura : conteúdo máximo ;
 }
 . delimitado . etiquetaTab {
 raio da borda : 5px ;
 }
 . inputTab : verificado + . etiquetaTab + . infoTab { 
borda : sólido 2px var ( -border - color ) ;
 }

 . delimitado . inputTab : verificado + . etiquetaTab {
 plano de fundo : var ( -tab - bg ) ; 
cor : var ( -border - color ) ;
 borda : sólido 2px var ( -border - color ) ;
 }
 }

 < / estilo >
 { % esquema % }
 { 
"nome" : "Componente da guia" ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "seção_título" ,
 "label" : "Título da Seção"
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "tab_design" ,
 "default" : "bordeado" ,
 "label" : "Design de componente de guia" ,
 "opções" : [
 {
 "valor" : "bordeado" ,
 "rótulo" : "com borda"
 } ,
 { 
"valor" : "sem fronteira" ,
 "label" : "sem fronteiras"
 }
 ]
 } ,
 {
 "tipo" : "cor" ,
 "id" : "tab_bg" ,
 "label" : "Fundo da seção" ,
 "padrão" : "#e5e5e5"
 } ,
 { 
"tipo" : "cor" ,
 "id" : "tab_hover" ,
 "label" : "Guia flutuante" ,
 "padrão" : "#d8d8d8"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "border_color" ,
 "label" : "Cor da borda" , 
"padrão" : "transparente"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "tab_active" ,
 "label" : "Tab Active(somente sem borda)" ,
 "padrão" : "#ccc"
 }
 ] ,
 "blocos" : [
 { 
"tipo" : "guia" ,
 "nome" : "Aba" ,
 "configurações" : [
 {
 "tipo" : "cor" ,
 "id" : "label_bg" ,
 "label" : "Cor de fundo da etiqueta" ,
 "padrão" : "#fff"
 } ,
 { 
"type" : "image_picker" ,
 "id" : "img_icon" ,
 "label" : "Ícone da imagem"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "tab_title" ,
 "label" : "Título da guia"
 } ,
 { 
"tipo" : "texto" ,
 "id" : "info_title" ,
 "label" : "Título da informação"
 } ,
 {
 "type" : "richtext" ,
 "id" : "info_descrição" ,
 "label" : "Título da guia" , 
"default" : "<p>Escreva mais informações aqui!</p>"
 } ,
 {
 "tipo" : "página" ,
 "id" : "página" ,
 "label" : "Página a mostrar"
 }
 ]
 }
 ] ,
 "max_blocks" : 10 , 
"predefinições" : [
 {
 "name" : "Componente da guia"
 }
 ]
 }
 { % termina o esquema % }