react-jam-ui/components/InputCalendar/styles.styl

React JAM UI components

.input-calendar {
    //border: 1px solid #21BAFA;
    //cursor: pointer;
    font-weight: 400;
    position: relative;

    .icon {
        color: #21BAFA;
        vertical-align: middle;
        position: absolute;
        right: 15px;
        top: 11px;
        z-index: 3;
    }

    .input-container { 
        cursor: pointer;       
        .input {
            padding: 0 35px 0 15px;
        }
    }

    .DayPicker {
        position: absolute;
        top: 100%;
        left: 0;
        margin: 5px 0 0;
        z-index: 20;
    }

    &-backface {
        position: fixed;
        z-index: 2;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }

    &.show {
        .icon {
            z-index: 7;
        }
        .input-container {
            z-index 6;
        }
        .input-calendar-backface {
            z-index: 5;
        }
    }

    &.error {
        .input-container.input-default .input {
            border-color: red;
        }
    }

    .calendar-day {
        &.active {
            background: green;
        }
        &.disabled {
            background: #ededed;    
            color: #656565;
            cursor: default;
        }
    }
}