ng2-ui-kit/styles/css/calendar.css

Angular2 UI Kit

.ui-kit-calendar-container {
  position: relative;
  width: 170px;
  margin: 0 10px 0 0;
  display: block;
  float: left;
  z-index: 99;
  position: relative;
  width: 170px;
  margin: 0 10px 0 0;
  display: block;
  float: left;
  z-index: 99; }
  .ui-kit-calendar-container .ui-kit-calendar-input {
    border: 1px solid #aec9de;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 40px;
    background: #fcfcff;
    cursor: pointer;
    text-align: center;
    font-size: 0;
    transition: all 300ms ease; }
    .ui-kit-calendar-container .ui-kit-calendar-input i {
      color: #505b71;
      font-size: 20px; }
    .ui-kit-calendar-container .ui-kit-calendar-input.opened {
      width: 170px;
      border: 1px solid #44c8f9;
      color: #44c8f9;
      background: rgba(68, 200, 249, 0.15);
      font-size: 12px; }
      .ui-kit-calendar-container .ui-kit-calendar-input.opened i {
        color: #44c8f9; }
    .ui-kit-calendar-container .ui-kit-calendar-input span {
      display: none; }
      .ui-kit-calendar-container .ui-kit-calendar-input span.opened {
        display: inline;
        margin-right: 10px; }
  .ui-kit-calendar-container .ui-kit-calendar-cal-container {
    position: absolute;
    top: 55px;
    right: 0;
    color: #fff;
    background: #44c8f9;
    display: inline-block;
    width: 300px;
    border-radius: 3px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 300ms linear 300ms; }
    .ui-kit-calendar-container .ui-kit-calendar-cal-container.opened {
      visibility: visible;
      opacity: 1; }
    .ui-kit-calendar-container .ui-kit-calendar-cal-container:after {
      position: absolute;
      top: -15px;
      right: 28px;
      content: "";
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 15px solid #44c8f9;
      transform: rotate(-90deg); }
    .ui-kit-calendar-container .ui-kit-calendar-cal-container .ui-kit-calendar-cal-top {
      width: 100%;
      height: 40px;
      line-height: 40px; }
      .ui-kit-calendar-container .ui-kit-calendar-cal-container .ui-kit-calendar-cal-top i {
        display: block;
        float: left;
        font-size: 16px;
        width: 40px;
        height: 40px;
        text-align: center;
        cursor: pointer; }
      .ui-kit-calendar-container .ui-kit-calendar-cal-container .ui-kit-calendar-cal-top span {
        display: block;
        float: left;
        width: 220px;
        height: 40px;
        font-size: 14px;
        text-align: center; }
    .ui-kit-calendar-container .ui-kit-calendar-cal-container .ui-kit-calendar-day-names {
      width: 100%;
      height: 23px;
      background: #35b1e2; }
      .ui-kit-calendar-container .ui-kit-calendar-cal-container .ui-kit-calendar-day-names span {
        font-size: 10px;
        line-height: 23px;
        text-align: center;
        display: block;
        float: left;
        width: calc(100% / 7);
        height: 23px; }
    .ui-kit-calendar-container .ui-kit-calendar-cal-container .ui-kit-calendar-days {
      width: 100%;
      padding: 5px 0;
      margin-bottom: 15px; }
      .ui-kit-calendar-container .ui-kit-calendar-cal-container .ui-kit-calendar-days span {
        font-size: 12px;
        display: block;
        float: left;
        text-align: center;
        height: 40px;
        line-height: 40px;
        width: calc(100% / 7);
        cursor: pointer;
        border-radius: 50%; }
        .ui-kit-calendar-container .ui-kit-calendar-cal-container .ui-kit-calendar-days span.today {
          border: 1px solid #fff; }
        .ui-kit-calendar-container .ui-kit-calendar-cal-container .ui-kit-calendar-days span:hover, .ui-kit-calendar-container .ui-kit-calendar-cal-container .ui-kit-calendar-days span.is-active {
          background: #fff;
          color: #44c8f9; }
  .ui-kit-calendar-container .ui-kit-calendar-input {
    border: 1px solid #aec9de;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 40px;
    background: #fcfcff;
    cursor: pointer;
    text-align: center;
    font-size: 0;
    transition: all 300ms ease; }
    .ui-kit-calendar-container .ui-kit-calendar-input i {
      color: #505b71;
      font-size: 20px; }
    .ui-kit-calendar-container .ui-kit-calendar-input.opened {
      width: 170px;
      border: 1px solid #44c8f9;
      color: #44c8f9;
      background: rgba(68, 200, 249, 0.15);
      font-size: 12px; }
      .ui-kit-calendar-container .ui-kit-calendar-input.opened i {
        color: #44c8f9; }
    .ui-kit-calendar-container .ui-kit-calendar-input span {
      display: none; }
      .ui-kit-calendar-container .ui-kit-calendar-input span.opened {
        display: inline;
        margin-right: 10px; }
  .ui-kit-calendar-container.danger .ui-kit-calendar-input.opened {
    color: #e2747e;
    background: rgba(226, 116, 126, 0.15);
    border: 1px solid #e2747e; }
    .ui-kit-calendar-container.danger .ui-kit-calendar-input.opened i {
      color: #e2747e; }
  .ui-kit-calendar-container.danger .ui-kit-calendar-cal-container {
    background: #e2747e; }
    .ui-kit-calendar-container.danger .ui-kit-calendar-cal-container:after {
      border-left: 15px solid #e2747e; }
    .ui-kit-calendar-container.danger .ui-kit-calendar-cal-container .ui-kit-calendar-day-names {
      background: #c72938; }
    .ui-kit-calendar-container.danger .ui-kit-calendar-cal-container .ui-kit-calendar-days span:hover, .ui-kit-calendar-container.danger .ui-kit-calendar-cal-container .ui-kit-calendar-days span.is-active {
      color: #e2747e; }
  .ui-kit-calendar-container.warning .ui-kit-calendar-input.opened {
    color: #f4bf4d;
    background: rgba(244, 191, 77, 0.15);
    border: 1px solid #f4bf4d; }
    .ui-kit-calendar-container.warning .ui-kit-calendar-input.opened i {
      color: #f4bf4d; }
  .ui-kit-calendar-container.warning .ui-kit-calendar-cal-container {
    background: #f4bf4d; }
    .ui-kit-calendar-container.warning .ui-kit-calendar-cal-container:after {
      border-left: 15px solid #f4bf4d; }
    .ui-kit-calendar-container.warning .ui-kit-calendar-cal-container .ui-kit-calendar-day-names {
      background: #ce910d; }
    .ui-kit-calendar-container.warning .ui-kit-calendar-cal-container .ui-kit-calendar-days span:hover, .ui-kit-calendar-container.warning .ui-kit-calendar-cal-container .ui-kit-calendar-days span.is-active {
      color: #f4bf4d; }
  .ui-kit-calendar-container.success .ui-kit-calendar-input.opened {
    color: #3fc59d;
    background: rgba(63, 197, 157, 0.15);
    border: 1px solid #3fc59d; }
    .ui-kit-calendar-container.success .ui-kit-calendar-input.opened i {
      color: #3fc59d; }
  .ui-kit-calendar-container.success .ui-kit-calendar-cal-container {
    background: #3fc59d; }
    .ui-kit-calendar-container.success .ui-kit-calendar-cal-container:after {
      border-left: 15px solid #3fc59d; }
    .ui-kit-calendar-container.success .ui-kit-calendar-cal-container .ui-kit-calendar-day-names {
      background: #257960; }
    .ui-kit-calendar-container.success .ui-kit-calendar-cal-container .ui-kit-calendar-days span:hover, .ui-kit-calendar-container.success .ui-kit-calendar-cal-container .ui-kit-calendar-days span.is-active {
      color: #3fc59d; }