Innqube/ngx-iq-datepicker

View on GitHub
src/app/component-wrapper/src/app/iq-calendar/iq-calendar.component.css

Summary

Maintainability
Test Coverage
.calendar-container {
    background: #ddd;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-top: 10px;
    position: absolute;
    padding: 1px;
    right: 0;
    width: 280px;
    z-index: 1040;
}

.calendar-container input,
.calendar-container select {
    border-left: 0;
    border-right: 0;
    box-shadow: none;
    padding: 2px;
}

.calendar-container.horizontal {
    margin-right: 15px;
}

.iq-calendar {
    background: #fff;
    border-radius: 2px;
    padding: 5px;
    margin-top: 5px;
}

.iq-calendar table {
    margin-top: 10px;
    margin-bottom: 0;
}

.iq-calendar table tr td {
    border-top: none;
    padding: 0;
}

.iq-calendar table tr td a {
    padding: 6px;
    min-width: 24px;
    display: inline-block;
}

.date-value {
    color: #aaa;
}

.current-date {
    position: relative;
}

.current-date a.date-value {
    border: 1px solid #cee5f3;
    border-radius: 3px;
}

.current-date a.date-value::before {
    content: "";
    display: inline-block;
    border: solid transparent;
    border-width: 0 0 10px 10px;
    border-bottom-color: #337ab7;
    border-top-color: rgba(0,0,0,.2);
    position: absolute;
    bottom: 1px;
    right: 6px;
}

.iq-calendar table tr td a.date-value:hover {
    background: #666;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.current-month .date-value {
    color: #000;
}

.input-group-btn > .btn.btn-chevron {
    color: #666;
    padding: 5px 2px
}

.calendar-container::before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #441010;
    border-bottom-color: rgba(0,0,0,.2);
    top: -8px;
    right: 14px;
    content: "";
    position: absolute;
}

.calendar-container.sm::before {
    right: 10px;
}

.calendar-container.sm::after {
    right: 11px;
}

.calendar-container.lg::before {
    right: 19px;
}

.calendar-container.lg::after {
    right: 20px;
}

.calendar-container::after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    top: -7px;
    right: 15px;
    content: "";
    position: absolute;
}

.date-selector-row {
    padding: 3px 1px 0px;
}

.btn-left {
    border-right: none;
}

.btn-right {
    border-left: none;
}

.selected-date a {
    background: #d1edff;
    border-radius: 3px;
    color: #fff;
}