diego3g/calendar.css

  .DayPicker {
    border-radius: 0.6rem;
  }

  .DayPicker-wrapper {
    padding-bottom: 0;
    background: #3e3b47;
    border-radius: 0.6rem;
  }

  .DayPicker,
  .DayPicker-Month {
    width: 100%;
  }

  .DayPicker-NavButton {
    color: #999591 !important;
  }

  .DayPicker-NavButton--prev {
    background: url(${ArrowLeftIcon}) no-repeat center;
    right: auto;
    left: 1.5em;
    margin-right: 0;
  }

  .DayPicker-NavButton--next {
    background: url(${ArrowRightIcon}) no-repeat center;
  }

  .DayPicker-Month {
    border-collapse: separate;
    border-spacing: 8px;
    margin: 1rem 0 0 0;
    padding: 16px;
    background-color: #28262e;
    border-radius: 0 0 10px 10px;
  }

  .DayPicker-Caption {
    margin-bottom: 1rem;
    padding: 0 1rem;
    color: #f4ede8;

    > div {
      text-align: center;
    }
  }

  .DayPicker-Weekday {
    color: #666360;
  }

  .DayPicker-Day {
    width: 2.5rem;
    height: 2.5rem;
  }

  .DayPicker-Day--available:not(.DayPicker-Day--outside) {
    background: #3e3b47;
    border-radius: 0.6rem;
  }

  .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;
    color: #fff;
  }

  .DayPicker-Day--disabled {
    color: #666360;
    background: transparent !important;
  }

  .DayPicker-Day--selected {
    background: #ff9000 !important;
    border-radius: 0.6rem;
    color: #232129 !important;
  }

fnoquiq · 2020-10-01T17:11:13Z

Atualizando a melhoria do @sethwololo:

Substituí a seta padrão pela do layout do figma e alterei a cor dos dias da semana pra ficar igual a dos dias desabilitados.

@lorenasg1 faltou os import das setas

AdSoNaTuRaL · 2020-10-15T10:06:46Z

Atualizando a resposta da @lorenasg1.
Para baixar os SVG (import que estão faltando, basta ir no Figma do GoBarber e exportar as setas em formato SVG e por o mesmo nome dos imports do código dela).
Para baixar diretamente basta clicar aqui e extrair os svg's.

Depois de baixado, basta colocar os svg's na pasta de assets e fazer os imports no css.

import ArrowLeftIcon from '../../assets/ArrowLeftIcon.svg'; import ArrowRightIcon from '../../assets/ArrowRightIcon.svg';

haryelramalho · 2020-10-21T15:09:14Z

Boa galera, que demais!

lucasengel · 2020-10-22T02:02:18Z

Como tá tudo em EM, só faltou colocar um font-size: 16px no .DayPicker. Aí fica show.

.DayPicker {
    border-radius: 10px;
    font-size: 16px;
}

conradoalexsander · 2020-10-25T11:29:52Z

Valeu galera, ficou top!

euguilhermegirardi · 2020-10-31T11:13:11Z

Boaaaa!

piqueno43 · 2020-11-17T11:50:28Z

Valeu d+++!

cabrazil · 2020-11-26T21:11:54Z

Muito bom!

arianeborges · 2020-12-04T09:01:21Z

Arrasaram!

guintoki · 2020-12-08T01:33:28Z

Muito bom!!

guiathayde · 2020-12-10T00:44:24Z

@sethwololo @lorenasg1 @AdSoNaTuRaL
Muito bom pessoal valeu!

luanrem · 2020-12-12T13:26:44Z

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

lucianolimafer · 2021-01-16T18:39:39Z

A alterações ficaram muito massa!!

adeonir · 2021-02-07T19:09:03Z

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 · 2021-02-16T01:30:32Z

Mitaram!

moluskorp · 2021-02-24T14:58:47Z

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

maxmillernunes · 2021-03-21T20:01:24Z

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

flipdantas · 2021-04-30T20:45:57Z

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

gustavoroque · 2021-06-04T16:40:06Z

Muito legal pessoal, parabéns pelo trampo

Lucascfsb · 2024-11-30T14:46:18Z

Cor do dia de hoje: O dia de hoje é destacado com a cor #ff9000 no texto do número do dia.
Dia desabilitado e dia de hoje desabilitado: Para o dia de hoje, quando ele estiver desabilitado, a cor do número do dia será laranja e o fundo ficará transparente.
Seleção de dia: Quando um dia for selecionado, a cor de fundo será definida pela variável --rdp-accent-color, e o texto será alterado para uma cor mais escura (#232129).
Estilo para os dias desabilitados: Para os outros dias desabilitados, a cor do texto será cinza (#a0a0a0) e o fundo será transparente.
Outros ajustes de estilo: Configuração da altura e largura dos dias, borda arredondada dos botões, cores de fundo, e estilo dos ícones de navegação (setas).

.rdp-root {
  --rdp-accent-color: #ff9000 !important;
  --rdp-today-color: #ff9000 !important;
  --rdp-day-height: 40px;
  --rdp-day-width: 40px;
  --rdp-day_button-border-radius: 10px;
  --rdp-day_button-width: 45px;

  .rdp-day_button {
    background: #3e3b47;
    padding: 0;
    margin: 4px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .rdp-today {
    color: var(--rdp-today-color) !important;
  }

  .rdp-disabled.rdp-today .rdp-day_button {
    color: var(--rdp-today-color) !important;
    background: transparent !important;
  }

  .rdp-selected .rdp-day_button {
    background: var(--rdp-accent-color);
    color: #232129 !important;
    border: none;
    border-radius: 10px;
  }

  .rdp-disabled .rdp-day_button {
    color: #a0a0a0 !important;
    background: transparent !important;
  }

  .rdp-month {
    background: #28262e;
    padding: 24px;
  }

  .rdp-nav {
    inset-block-start: 24px;
    inset-inline-end: 0;
  }

  .rdp-chevron {
    fill: #f0f0ff;
  }
}

diego3g/calendar.css

brunocsouto commented Aug 29, 2020

ErickssonDrozda commented Sep 8, 2020

rafael6g commented Sep 9, 2020

danielschuabramos commented Sep 12, 2020

joaovitormarquim commented Sep 15, 2020

jpcmf commented Sep 16, 2020

josuegimenes commented Sep 21, 2020

italosnunes commented Sep 28, 2020

lorenasg1 commented Sep 28, 2020 •

edited

Loading

fnoquiq commented Oct 1, 2020 •

edited

Loading

AdSoNaTuRaL commented Oct 15, 2020

haryelramalho commented Oct 21, 2020

lucasengel commented Oct 22, 2020 •

edited

Loading

conradoalexsander commented Oct 25, 2020

euguilhermegirardi commented Oct 31, 2020

piqueno43 commented Nov 17, 2020

cabrazil commented Nov 26, 2020 •

edited

Loading

arianeborges commented Dec 4, 2020

guintoki commented Dec 8, 2020

guiathayde commented Dec 10, 2020

luanrem commented Dec 12, 2020

lucianolimafer commented Jan 16, 2021

adeonir commented Feb 7, 2021

joaonew commented Feb 16, 2021

moluskorp commented Feb 24, 2021

maxmillernunes commented Mar 21, 2021

flipdantas commented Apr 30, 2021

gustavoroque commented Jun 4, 2021

Lucascfsb commented Nov 30, 2024

	.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;
	}

diego3g/calendar.css

brunocsouto commented Aug 29, 2020

ErickssonDrozda commented Sep 8, 2020

rafael6g commented Sep 9, 2020

danielschuabramos commented Sep 12, 2020

joaovitormarquim commented Sep 15, 2020

jpcmf commented Sep 16, 2020

josuegimenes commented Sep 21, 2020

italosnunes commented Sep 28, 2020

lorenasg1 commented Sep 28, 2020 • edited Loading

fnoquiq commented Oct 1, 2020 • edited Loading

AdSoNaTuRaL commented Oct 15, 2020

haryelramalho commented Oct 21, 2020

lucasengel commented Oct 22, 2020 • edited Loading

conradoalexsander commented Oct 25, 2020

euguilhermegirardi commented Oct 31, 2020

piqueno43 commented Nov 17, 2020

cabrazil commented Nov 26, 2020 • edited Loading

arianeborges commented Dec 4, 2020

guintoki commented Dec 8, 2020

guiathayde commented Dec 10, 2020

luanrem commented Dec 12, 2020

lucianolimafer commented Jan 16, 2021

adeonir commented Feb 7, 2021

joaonew commented Feb 16, 2021

moluskorp commented Feb 24, 2021

maxmillernunes commented Mar 21, 2021

flipdantas commented Apr 30, 2021

gustavoroque commented Jun 4, 2021

Lucascfsb commented Nov 30, 2024

lorenasg1 commented Sep 28, 2020 •

edited

Loading

fnoquiq commented Oct 1, 2020 •

edited

Loading

lucasengel commented Oct 22, 2020 •

edited

Loading

cabrazil commented Nov 26, 2020 •

edited

Loading