Skip to Content
0

design studio tile css class fiori

Jan 18, 2017 at 01:36 PM

385

avatar image

hello community,

I'd be very happy to get some help.

I want to develop a tile in ds 1.6 that looks and reacts exactly like a fiori tile. I do not have a Problem with the hover css, but with the - I think it's - box shadow css. At least I want the Tile to show the borders (.jpg!!!) just like in SAP Fiori when "highlighting" the Tile with the Hover Effect.

Please have a look at the attached Image. Thanks a lot.

Regards,

Sebastian

scn-18012017.jpg (19.9 kB)
10 |10000 characters needed characters left characters exceeded
Former Member

Sebastian,

This looks really cool. Is your tile a standard text component? Do you mind sharing your css hover code?

0

dear a. Lukas,

the tiles are just an example I took from

https://demo-fioritrial.dispatcher.hana.ondemand.com/sites

the hover code to "Highlight" the tiles is

hover {

transform:scale(1.02);

transform:translate(-120);

}
0
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Tammy Powlas
Jan 18, 2017 at 01:51 PM
0

Hi - there is a who series on Fiori CSS - have you seen this? https://blogs.sap.com/2015/01/03/css-for-fiori-launchpad/

Share
10 |10000 characters needed characters left characters exceeded
Sebastian Meise Jan 19, 2017 at 08:37 AM
0

Hi Tammy,

thank you for your prompt reply. Yes, I've seen this, but unfortunately it is not directly what I'm looking for. I'll try to get in contact with the author via "add Comment".

Greetings

Share
10 |10000 characters needed characters left characters exceeded
Koen Hesters Apr 10, 2017 at 02:04 PM
0

Hi,

try this

.myBackground{

background-color: #F5F5F5!important;

background-image: linear-gradient(tobottom,#DCDCDC,#F5F5F5);

border-radius:10px!important;}

.myBackground:hover{

box-shadow: 4px4px8pxblack;

margin-left: -2px;

margin-right: -2px;

margin-top: -2px;

margin-bottom: -2px;

}

Share
10 |10000 characters needed characters left characters exceeded