Hi Maria Jose, many changes were done in TabBar in the past weeks. Now TabBar can use layout beads to be layout horizontal and vertical, and the renderers are much more flexible where the indicator is decoupled from the content so we can apply Paddings beads and also make the indicator be located up or down, and left or right. I posted some examples about it.
You should check the *_tabbar.sass* files in *Jewel* and *JewelTheme*. Or if you are working directyl with css check *default.css* in both projects and search for ".tabbarbutton" to see all occurrences and see what change and compare with your code to adapt to it. Sorry for the inconveniences but this kind of changes in styles are necessary to be able to update the components to reach the final goals and make them more flexible. Thanks El dom., 13 sept. 2020 a las 14:36, Maria Jose Esteve (<[email protected]>) escribió: > Hi, > About a month ago, I created a Ribbon in my project with a Jewel TabBar > control that I applied CSS to to give it a "hover" effect. > Since the changes that were made in September it seems that it does not > apply and I don't know why ... > > My TabBar has a custom itemRenderer ... > > <j:TabBar id="tabbarApp" selectedIndex="-1" > sameWidths="true" > className="tabbarAppItemRenderer" > change="selectedChart()" > dataProvider="{appModel.tabBarAppData}"> > </j:TabBar> > > ..., where I have a Jewel Card "cardThumbnail" > > <j:Card id="cardThumbnail"> > <j:beads> > <j:ToolTip localId="tt" toolTip="{dataThumb.description}"/> > </j:beads> > <j:CardHeader> > <j:Label text="{dataThumb.label}" className="primary" > style="font-size: 0.75em;"/> > </j:CardHeader> > <j:CardExpandedContent itemsHorizontalAlign="itemsCenter" > itemsVerticalAlign="itemsCenter"> > <j:Image localId="img" src="{dataThumb.thumbnail}" height="50"> > <j:beads> > <j:ResponsiveSize phoneWidth="35"/> > <js:ErrorImage emptyIsError="true"/> > </j:beads> > </j:Image> > > </j:CardExpandedContent> > </j:Card> > > My CSS: > > > .tabbarAppItemRenderer > { > IItemRenderer: > ClassReference("com.proj.example.itemRenderers.TabBarThumbnailItemRenderer"); > } > > #cardThumbnail{ > background: white; > padding: 10px; > margin: 10px; > text-transform: none; > box-shadow: 0 1px 2px rgba(0,0,0,0.15); > transition: all 0.3s ease-in-out; > } > > #cardThumbnail::after { > content: ""; > position: absolute; > z-index: -1; > top: 0; > left: 0; > width: 100%; > height: 100%; > opacity: 0; > box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); > transition: opacity 0.3s ease-in-out; > } > > #cardThumbnail:hover { > transform: scale(1.1, 1.1); > box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.3); > } > > #cardThumbnail:hover::after { > opacity: 1; > } > > #cardThumbnail .card-header{ > border-bottom: 0px transparent; > padding-left: 0px; > padding-top: 0px; > padding-right: 0px; > padding-bottom: 10px; > font-weight: bold; > } > /* Since the beginning of September it does not work: > #tabbarApp .indicator>.indicatorContent{*/ > #tabbarApp .indicator-content{ > background-color: white; > } > > Could someone give me a clue of the error? Before the changes it worked > fine, when we were on the tab it produced a very cool shadow effect, but > now the only CSS that is applied is the "#tabbarApp .indicator-content" > > Any ideas? > > Thx. > Hiedra. > -- Carlos Rovira http://about.me/carlosrovira
