sass.n2o.components.Card.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!

.n2o-card-wrap {
    flex-flow: row wrap;
    justify-content: space-around;
    display: flex;
}

.card-body {
    max-width: 100%;
}

.n2o-card {
    width: $card-colunm-mode-width;
    border-top: $card-border-top;
    border-right: $card-border-right;
    border-bottom: $card-border-bottom;
    border-left: $card-border-left;
    background-color: $card-background-color;
    // border: 1px solid transparent;
    margin: 20px;

    &:hover {
        box-shadow: $card-box-shadow-hover;
    }

    > .card-body {
        padding: 10px 20px;
    }

    &.linear img {
        max-height: $card-line-mode-height;
        width: auto;
    }

    &.circle {
        .card-image {
            display: inline-block;
            position: relative;
            width: $card-colunm-mode-width - 30px;
            height: $card-colunm-mode-width - 30px;
            overflow: hidden;
            border-radius: 50%;
            margin: 15px;

            > img {
                width: auto;
                height: 100%;
            }
        }
    }

    &.linear {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-content: center;
        height: $card-line-mode-height;
        margin: 0;

        .card-image {
            width: $card-image-liner-width;
        }

        &.circle {
            .card-image {
                max-width: $card-line-mode-height - 6px;
                min-width: $card-line-mode-height - 6px;
                height: $card-line-mode-height - 6px;
                margin: 3px;
            }
        }

        > .card-body {
            display: flex;
            align-items: center;

            > * {
                margin: 0;
            }

            > .text {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 300px;
            }
        }
    }
}