editable-grid/less/datepicker.less

Bootstrap grid with CRUD functionality.

@color_table_header_row: #ecf5ec;
@color_table_row_hover: #F5F7D3;
@color_font_light: gray;
@color_background_color: #fff;
@z_index: 1000;

[data-toggle='date-selector'] {
  cursor: pointer;

  &:hover {
    .glyphicon-calendar {
      font-weight: bold;
    }
  }
}

#date-selector {
  z-index: @z_index;
  background-color: @color_background_color;
  .selected() {
    font-weight: bold;
    background-color: @color_table_row_hover;
  }

  margin-top: 5px;
  position: absolute;
  width: 250px;
  border: #ccc 1px solid;
  padding: 10px;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;

  -webkit-box-shadow: 0px 0px 8px 1px rgba(204, 204, 204, 1);
  -moz-box-shadow: 0px 0px 8px 1px rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 8px 1px rgba(204, 204, 204, 1);

  table {
    margin-bottom: 0px;
  }

  th {
    background-color: @color_table_header_row;
  }

  th, td {
    text-align: center;
  }

  .selected-day {
    .selected();
  }

  .not-current-month {
    color: @color_font_light;
  }

  td:hover:not(.not-current-month) {
    cursor: pointer;
    .selected();
  }

  .today {
    color: white;
    background-color: lightslategrey;
    font-weight: bold;
  }

  .control-bar {
    margin-bottom: 10px;
    font-weight: bold;

    button {
      width: 25px;
      height: 25px;
    }

    .previous-buttons {
      float: left;
      width: 75px;

      button:last-child {
        margin-left: 5px;

        span {
          margin-left: -2px;
        }
      }
    }

    .next-buttons {
      float: right;
      width: 75px;

      button {
        float: right;

        &:last-child {
          margin-right: 5px;
          span {
            margin-left: 2px;
          }
        }
      }
    }

    .center-text {
      margin: 0 auto;
      width: 150px;
      text-align: center;
    }
  }

}