Calendar Thumbnail

calendar.scss

.calendar
{
    display: table;

    width: 78px;
    height: 80px;

    text-align: center;

    border-radius: 14px;
    background-color: #dee6ef;
}

.calendar-row
{
    display: table-row;
}

.calendar-year
{
    font-size: 16px;
    font-weight: 600;

    display: table-cell;

    width: 100%;
    height: 29px;

    vertical-align: middle;
    text-transform: uppercase;

    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    background-color: #4a90e2;
    &-small
    {
        font-size: 8px;
    }
}

.calendar-month
{
    font-size: 13px;
    font-weight: 600;

    display: table-cell;

    width: 100%;

    vertical-align: middle;

    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
}