Skip to content

Instantly share code, notes, and snippets.

@diego3g
Created May 21, 2020 21:29
Show Gist options
  • Save diego3g/325d250596e923f6b6028576fcb684da to your computer and use it in GitHub Desktop.
Save diego3g/325d250596e923f6b6028576fcb684da to your computer and use it in GitHub Desktop.
.DayPicker {
background: #28262e;
border-radius: 10px;
}
.DayPicker-wrapper {
padding-bottom: 0;
}
.DayPicker,
.DayPicker-Month {
width: 100%;
}
.DayPicker-Month {
border-collapse: separate;
border-spacing: 8px;
margin: 16px;
}
.DayPicker-Day {
width: 40px;
height: 40px;
}
.DayPicker-Day--available:not(.DayPicker-Day--outside) {
background: #3e3b47;
border-radius: 10px;
color: #fff;
}
.DayPicker:not(.DayPicker--interactionDisabled)
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
background: ${shade(0.2, '#3e3b47')};
}
.DayPicker-Day--today {
font-weight: normal;
}
.DayPicker-Day--disabled {
color: #666360 !important;
background: transparent !important;
}
.DayPicker-Day--selected {
background: #ff9000 !important;
border-radius: 10px;
color: #232129 !important;
}
@guintoki
Copy link

guintoki commented Dec 8, 2020

Muito bom!!

@guiathayde
Copy link

@sethwololo @lorenasg1 @AdSoNaTuRaL
Muito bom pessoal valeu!

@luanrem
Copy link

luanrem commented Dec 12, 2020

Caraca, muito bom pessoal! Muito obrigado mesmo! Ficou TOP

@lucianolimafer
Copy link

A alterações ficaram muito massa!!

@adeonir
Copy link

adeonir commented Feb 7, 2021

Segue mais uma melhoria com alguns ajustes e incluindo o background do header, aproveitando o código já feito pelos colegas:

.DayPicker {
  border-radius: 10px;

  &-wrapper {
    padding-bottom: 0;
    background: #28262e;
    border-radius: 10px;
    z-index: 0;
  }

  &-NavBar {
    position: relative;

    ::before {
      content: '';
      width: 100%;
      height: 50px;
      position: absolute;
      background: #3e3b47;
      border-radius: 10px 10px 0 0;
      z-index: -1;
    }
  }

  &-NavButton {
    color: #999591 !important;
    margin-top: 0;
    top: 0;

    &--prev {
      background: url(${ArrowLeftIcon}) no-repeat center;
      margin-right: 0;
      left: 12px;
      width: 50px;
      height: 50px;
    }

    &--next {
      background: url(${ArrowRightIcon}) no-repeat center;
      right: 12px;
      width: 50px;
      height: 50px;
    }
  }

  &-Month {
    border-collapse: separate;
    border-spacing: 8px;
    margin: 0;
    padding: 0 10px 10px;
  }

  &-Caption {
    line-height: 50px;
    color: #f4ede8;

    > div {
      text-align: center;
    }
  }

  &-Weekday {
    color: #666360;
    font-size: 16px;
  }

  &-Day {
    width: 40px;
    height: 40px;
    transition: all 0.2s ease;
    border-radius: 10px;

    &--today {
      font-weight: normal;
      color: #fff;
    }

    &--available:not(.DayPicker-Day--outside) {
      background: #3e3b47;
      border-radius: 10px;
    }

    &--disabled {
      color: #666360;
      background: transparent !important;
    }

    &--selected:not(.DayPicker-Day--disabled) {
      background: #ff9000 !important;
      color: #232129 !important;
    }
  }

  &:not(.DayPicker--interactionDisabled)
    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
    background: ${shade(0.2, '#3e3b47')};
  }
}

@joaonew
Copy link

joaonew commented Feb 16, 2021

Mitaram!

@moluskorp
Copy link

Vocês são ninjas do css mesmo em.. kakaka, Show de bola pessoal , valeu demais !

@maxmillernunes
Copy link

Value pelas atualizações no css.
@sethwololo, @lorenasg1, @adeonir mitaram de verdade.

@flipdantas
Copy link

Ficou muito bom galera! Ficaram top as alterações

@gustavoroque
Copy link

Muito legal pessoal, parabéns pelo trampo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment