Skip to Content

design studio tile css class fiori

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Jan 18, 2017 at 01:51 PM

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

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 19, 2017 at 08:37 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 10, 2017 at 02:04 PM

    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;

    }

    Add comment
    10|10000 characters needed characters exceeded