onion/sass/ascribe_accordion_list.scss

$ascribe-accordion-list-item-height: 100px;

.ascribe-accordion-list {
    padding-left: 15px;
    padding-right: 15px;
}

.ascribe-accordion-list-placeholder {
    margin-top: 1em;
}

.ascribe-accordion-list-item {
    background-color: white;
    border: 1px solid black;
    height: $ascribe-accordion-list-item-height + 2px;

    padding-left: 0;
    padding-right: 0;
    margin-top: 1.2em;
    overflow: hidden;

    border-radius: 1px;
    border-left: .1em solid rgba(0, 0, 0, .2);
    border-right: .1em solid rgba(0, 0, 0, .2);
    border-top: .1em solid rgba(0, 0, 0, .2);
    border-bottom: .1em solid rgba(0, 0, 0, .2);

    &::first-child {
        margin-top: 0;
    }

    .wrapper {
        height: 100%;
        width: 100%;

        &:hover {
            background-color: rgba(2, 182, 163, .05);
        }

        // ToDo: Include media queries for thumbnail
        .thumbnail-wrapper {
            background-color: #EEEEEE;
            margin-right: 2em;
            width: $ascribe-accordion-list-item-height;
            height: $ascribe-accordion-list-item-height;
            cursor: pointer;
            padding: 0;
            text-align: center;

            img {
                max-height: 100%;
                max-width: 100%;
            }

            div {
                display: inline-block;
                width: 100px;
                height: 100px;
                background-position: center center;
                background-size: cover;
            }

            .ascribe-logo-circle {
                border: 6px solid #F6F6F6;
                border-radius: 10em;
                position: relative;
                top: 10%;
                left: 10%;

                display: block;
                width: 80%;
                height: 80%;

                > span {
                    color: #F6F6F6;
                    position: absolute;
                    top: -.29em;
                    left: .16em;

                    font-size: 5em;
                    font-weight: normal;
                }
            }

            .ascribe-thumbnail-placeholder {
                color: #F6F6F6;
                font-size: 5em;
                font-weight: normal;
            }

            //&::before {
            //    content: ' ';
            //    display: inline-block;
            //    height: 100%;
            //    vertical-align: middle; // vertical alignment of the inline element
            //}
        }

        h1 {
            cursor: pointer;
            font-size: 2.2em;
            margin: .1em 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        h3 {
            cursor: pointer;
            font-size: 1.3em;
            margin: .2em 0 .3em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        a {
            text-decoration: none
        };

    }
}

.accordion-list-item-header {
    margin-top: 0;
    padding: 0.5em 0;

    h1 {
        font-size: 1.9em;
    }
    h3 {
        font-size: 1.1em;
        margin-top: 0.4em;
    }


}

.accordion-list-item-buttons {
    position: absolute;
    right: 1em;
    bottom: 1em;
    @media (max-width: 400px) {
        right: 0;
        bottom: 0;
    }
}

.ascribe-accordion-list-loading img {
    display: block;
    margin: auto;
}

.ascribe-accordion-list-item-table {
    background-color: white;
    border-bottom: .1em solid rgba(0, 0, 0, .15);
    border-left: .1em solid rgba(0, 0, 0, .2);
    border-right: .1em solid rgba(0, 0, 0, .2);
    font-size: .9em;
    padding: 0;
    text-align: center;

    thead:first-child {
        border-bottom: 1px solid rgba(0, 0, 0, .05);
        border-left: 3px solid rgba(0, 0, 0, 0);

        tr:first-child {
            border: none !important;
            th {
                border: none !important;
                padding-left: 10px;
            }
        }
    }

    tbody {
        tr {
            border-bottom: 1px solid rgba(0, 0, 0, .03);
            border-left: 3px solid rgba(0, 0, 0, 0);
            padding: 1em;

            &:hover {
                background-color: rgba(2, 182, 163, 0.05);
                border-left: 3px solid rgba(2, 182, 163, 0.4);
            }

            td {
                border: none !important;
                a {
                    color: #222;
                }
            }
        }

        tr {
            td:first-child {
                margin-left: 10px;
            }
        }
    }
}

.ascribe-accordion-list-table-toggle {
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

    &:hover {
        color: $ascribe-dark-blue;
        cursor: pointer;
    }
}

.ascribe-accordion-list-table-list {
    margin-bottom: .5em;

    th,
    td {
        font-size: .85em;
        text-align: center;
    }
}

.request-action-badge {
    color: $ascribe-dark-blue;
    font-size: 1.2em;
    padding: .8em;
    position: absolute;
    right: 0;
    top: 0;
}

.ascribe-accordion-list-item-edition-widget {
    cursor: pointer;

    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

    .glyphicon {
        font-size: .8em;
        top: 1px !important;
    }
}