@openui5/sap.m/src/sap/m/themes/base/ActionTile.less

OpenUI5 UI Library sap.m

/* ================================== */
/* CSS for control sap.m/ActionTile  */
/* Base theme                         */
/* ================================== */

.sapMAT{
    width: 20rem;
    height: 21.875rem;
    position: relative;
    padding: 1rem;
    box-shadow: @sapContent_Shadow0;
    background-color: @sapTile_Background;
    display: inline-block;
    box-sizing: border-box;
    user-select: none;
    vertical-align: top;
    .sapMGTHdrContent {
        padding: 0;
        height: 3rem;
        overflow: hidden;
        .sapMText{
            font-size: 1rem;
            font-weight: 700;
            color: @sapTile_TitleTextColor !important;
            line-height: 1.5rem;
            cursor: pointer;
        }
    }
}

.sapMAT.sapMATHideActionButton {
    height: 19.625rem;
 }

.sapMAT:hover {
    background-color: @sapTile_Hover_Background;
    box-shadow:  @sapContent_Shadow2;
}

.sapMAT:active {
    background-color: @sapTile_Active_Background;
    box-shadow: none;
    outline: 0.0625rem solid @sapTile_Interactive_BorderColor;
}

.sapMAT:focus-visible {
    outline: none;
}

.sapMAT.sapMATAutoPointer {
    .sapMText {
        cursor: auto !important;
    }
}
// ToDo card Styles

.sapMAT.sapMToDoCard {
    border-radius: 1rem;
    .sapMGTHdrContent {
        margin-bottom: 0.75rem;
    }
    .sapMATC {
    height: 14.375rem;
     overflow: hidden;
     .sapMTilePriorityValue {
         font-size: 0.875rem;
         font-weight: 400;
         margin-bottom: 0.75rem;
         &.High {
             color: @sapNegativeTextColor;
             }
         &.Medium {
                 color: @sapCriticalTextColor;
             }
         &.Low {
             color: @sapPositiveTextColor;
             }
         &.VeryHigh {
                 color: @sapIndicationColor_1_BorderColor;
             }
     }
     .sapMContainer {
             display: flex;
             flex-direction: column;
             gap: 1rem;
         .sapMElementWrapper {
             display: flex;
             flex-direction: column;
             gap: 0.25rem;
             font-weight: 400;
             font-size: 0.875rem;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             .sapMATCLabel {
                 color: @sapContent_LabelColor;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 font-size: 14px;
                    font-weight: 400;
                    line-height: 1rem;
             }
             .sapMATCValue {
                 color: @sapTextColor;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 font-size: 14px;
                    font-weight: 400;
                    line-height: 1rem;
             }
         }
     }
    }
    .sapMATActionModeContainer {
     position: absolute;
     bottom: 0.9rem;
     right: 1rem;
    }
    &.sapMATHideActionButton {
        .sapMATActionModeContainer {
            display: none;
        }
    }
 }

 .sapMAT:focus {
    .sapMATFocusDiv{
        position: absolute;
        border: 2px solid @sapContent_FocusColor;
        border-radius:  1rem;
        inset: 0px;
        pointer-events: none;
    }
 }

// Situation Card Styles

.sapMAT.sapMATSituationCard{
    border-radius: 1.25rem;
    overflow: hidden;
    .sapMGTHdrContent {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        height: 2.75rem;
        .sapMGTHdrIconImage.Neutral {
            color:  @sapUiNeutralText;
        }
        .sapMGTHdrIconImage.Good {
            color: @sapUiPositiveText;
        }
        .sapMGTHdrIconImage.Critical {
            color: @sapUiCriticalElement;
        }
        .sapMGTHdrIconImage.Error {
            color: @sapUiNegativeText;
        }
        .sapMGTHdrIconImage.None {
            color: @sapUiTileIconColor
        }
        .sapMGTHdrIconImage.sapUiIcon{
            &::before {
                height: 2.75rem;
                font-weight: 400;
                font-size: 2.25rem;
                line-height: 2.4375rem;
                display: flex;
                align-items: end;
                text-align: center;
            }
        }
    }
    .sapMGTContent {
        height: 17.4rem;
        overflow: visible;
        .sapMTileCnt{
            display: flex;
            flex-direction: column;
            height: inherit;
            .sapMTileCntContent{
                margin-top: 0;
                padding: 0;
                .sapMFT{
                    height: inherit;
                    span{
                        color: @sapTextColor;
                        white-space: initial;
                        word-break: break-all;
                        display: -webkit-box;
                        -webkit-line-clamp: 16;
                        -webkit-box-orient: vertical;
                        height: fit-content;
                        line-height: 1rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-weight: 400;
                        font-size: 0.875rem;
                        margin-bottom: 0.75rem;
                        max-height: 16rem;
                    }
                    p + span {
                        margin-bottom: 1rem;
                        -webkit-line-clamp: 14;
                        max-height: 14rem;
                    }
                    p {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        color: @sapTextColor;
                        font-weight: 400;
                        font-size: 0.875rem;
                        margin: 0 0 1rem 0;
                        line-height: 1.125rem;
                    }
                    p.sapMbrPresent::first-line {
                        color: @sapContent_LabelColor;
                    }
                    p:not(.sapMbrPresent) {
                        margin-bottom: 0.75rem;
                        white-space: initial;
                        word-break: break-all;
                    }
                }
            }
            .sapMTileFtrCnt {
                position: absolute;
                bottom: 1rem;
                right: 0rem;
            }
        }
    }
    &.sapMATHideActionButton {
        .sapMTileCntContent {
            .sapMFT {
                span {
                    -webkit-line-clamp: 14 !important;
                }
                p + span {
                    -webkit-line-clamp: 12 !important;
                }
            }
        }
        .sapMGTActionModeContainer {
            display: none;
        }
    }
}

.sapMAT.sapMATSituationCard:focus {
    .sapMGTFocusDiv{
        position: absolute;
        border: 2px solid @sapContent_FocusColor;
        border-radius:  1.25rem;
        inset: 0px;
        pointer-events: none;
    }
    .sapMATFocusDiv{
        border-radius:  1.25rem;
    }
 }

//Loading State Styles

.sapMAT.sapMATStateLoading {
    .sapMGTContentShimmerPlaceholderItem {
        padding: 0;
        height: 20rem;
        align-items: initial;
        flex-direction: column;
        justify-content: space-around;
        .sapMGTContentShimmerPlaceholderRows {
            flex-grow: 0;
        }
    }
}

.sapMAT.sapMATStateLoading.sapMATHideActionButton {
    .sapMGTContentShimmerPlaceholderItem {
        height: 17.5rem;
        justify-content: space-evenly;
        padding: 0px;
        .sapMGTContentShimmerPlaceholderRows {
                .sapMGTContentShimmerPlaceholderItemHeader,.sapMGTContentShimmerPlaceholderItemText {
                    margin-top: 0;
                }
                .sapMGTContentShimmerPlaceholderItemText {
                    margin-bottom: 0;
                }
            }
        }
    }