Calendar picker demo

Calendar picker kimera CSS

by Leonardo Quintana

HTML

<div class="container">
        <calendar>
            <input type="text" placeholder="24/03/2018">
            <calendar-picker>
                <calendar-controls>
                    <control>&lsaquo;</control>
                    <control>Marzo 2018</control>
                    <control>&rsaquo;</control>
                </calendar-controls>
                <calendar-grid>
                    <span class="calendar-grid-label">D</span>
                    <span class="calendar-grid-label">L</span>
                    <span class="calendar-grid-label">M</span>
                    <span class="calendar-grid-label">MI</span>
                    <span class="calendar-grid-label">J</span>
                    <span class="calendar-grid-label">V</span>
                    <span class="calendar-grid-label">S</span>
                    <button>1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                    <button>7</button>
                    <button>8</button>
                    <button>9</button>
                    <button>10</button>
                    <button>11</button>
                    <button>12</button>
                    <button>13</button>
                    <button>14</button>
                    <button>15</button>
                    <button>16</button>
                    <button>17</button>
                    <button>18</button>
                    <button>19</button>
                    <button>20</button>
                    <button>21</button>
                    <button class="is-active">22</button>
                    <button>23</button>
                    <button>24</button>
                    <button>25</button>
                    <button>26</button>
                    <button>27</button>
                    <button>28</button>
                    <button>29</button>
     ...

SCSS

*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.container {
    margin: 4rem auto;
    max-width: 800px;
}

calendar {
    display: inline-flex;
    position: relative;
    input {
        outline: none;
        border: none;
        padding: 0.5em 1em;
        border-bottom: 2px solid whitesmoke;
    }
    &-picker,
    &-info,
    .#{&}-grid-label,
    &-controls,
    &-controls control {
        display: flex;
        overflow: hidden;
    }
    &-picker {
        font-size: 0.75rem;
        flex-direction: column;
        position: absolute;
        top: 98%;
        z-index: 10;
        left: 0;
        max-width: 0;
        max-height: 0;
        opacity: 0;
        background-color: #fff;
        box-shadow: 0 -2px 10px -1px rgba(black, 0.1);
        border-top: 2px solid #22adff;
        border-radius: 0 0 .25rem .25rem;
        transition: all .2s ease-out;
        &.is-visible {
            max-width: 300px;
            max-height: 300px;
            opacity: 1;
        }
    }
    &-grid,
    button,
    control,
    .#{&}-grid-label,
    &-info {
        align-items: center;
        align-content: center;
        justify-content: center;
    }
    button,
    control {
        cursor: pointer;
    }
    &-controls {
        grid-column: span 7;
        justify-content: space-between;
        font-size: 1rem;
        control {
            opacity: 0.7;
            &:hover {
                opacity: 1;
                color: #22adff;
            }
            &:first-of-type,
            &:last-of-type {
                font-size: 1.5rem;
                width: 2.5rem;
                height: 2.5rem;
            }
        }
    }
    &-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(6, 1fr);
       ...

JavaScript

let calendar = document.querySelector('calendar input');
        calendar.addEventListener('focus', function() {
            calendar.nextElementSibling.classList.add('is-visible');
        }, false);

        calendar.addEventListener('blur', function() {
            calendar.nextElementSibling.classList.remove('is-visible');
        }, false);