Calendar

October 2019

Mon
Thu
Wed
Thu
Fri
Sat
Sun
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    <div class="calendar">
      <p class="calendar__title">October 2019</p>
      <div class="calendar__wrapper">
        <div class="calendar__container">
          <div class="calendar__cell calendar__cell_header">Mon</div>
          <div class="calendar__cell calendar__cell_header">Thu</div>
          <div class="calendar__cell calendar__cell_header">Wed</div>
          <div class="calendar__cell calendar__cell_header">Thu</div>
          <div class="calendar__cell calendar__cell_header">Fri</div>
          <div class="calendar__cell calendar__cell_header">Sat</div>
          <div class="calendar__cell calendar__cell_header">Sun</div>
          <div class="calendar__cell"></div>
          <div class="calendar__cell"></div>
          <div class="calendar__cell"></div>
          <div class="calendar__cell"></div>
          <div class="calendar__cell"></div>
          <div class="calendar__cell">1</div>
          <div class="calendar__cell">2</div>
          <div class="calendar__cell">3</div>
          <div class="calendar__cell">4</div>
          <div class="calendar__cell">5</div>
          <div class="calendar__cell">6</div>
          <div class="calendar__cell">7</div>
          <div class="calendar__cell">8</div>
          <div class="calendar__cell">9</div>
          <div class="calendar__cell">10</div>
          <div class="calendar__cell">11</div>
          <div class="calendar__cell">12</div>
          <div class="calendar__cell">13</div>
          <div class="calendar__cell">14</div>
          <div class="calendar__cell">15</div>
          <div class="calendar__cell">16</div>
          <div class="calendar__cell">17</div>
          <div class="calendar__cell calendar__cell_extreme_value">18</div>
          <div class="calendar__cell calendar__cell_range">19</div>
          <div class="calendar__cell calendar__cell_range">20</div>
          <div class="calendar__cell calendar__cell_range">21</div>
          <div class="calendar__cell calendar__cell_range">22</div>
          <div class="calendar__cell calendar__cell_extreme_value">23</div>
          <div class="calendar__cell">24</div>
          <div class="calendar__cell">25</div>
          <div class="calendar__cell">26</div>
          <div class="calendar__cell">27</div>
          <div class="calendar__cell">28</div>
          <div class="calendar__cell">29</div>
          <div class="calendar__cell">30</div>
          <div class="calendar__cell">31</div>
        </div>
      </div>
    </div>
.calendar {
  border: 1px solid var(--grey-3);
  border-radius: 8px;
  padding: 28px 26px 32px 26px;

  min-width: 150px;
}

.calendar__title {
  color: var(--calendarText);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  margin: 0;
  margin-bottom: 24px;
}

.calendar__wrapper {
  padding-bottom: 100%;
  position: relative;
}

.calendar__container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  display: grid;
  grid-template: repeat(7, 1fr) / repeat(7, 1fr);
}

.calendar__cell {
  display: flex;
  justify-content: center;
  align-items: center;

  color: var(--calendarText);
  font-family: 'source-sans-pro', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
/* модификаторы */
.calendar__cell_header {
  color: var(--calendarCellHeader);
  font-family: Inter;
  font-size: 14px;
  margin-bottom: 8px;
}
.calendar__cell_extreme_value {
  background: var(--primary);
  color: var(--white);
}
.calendar__cell_range {
  background: var(--calendarCellRange);
}

.calendar_preview {
  width: 50%;
}

.calendar_page {
  min-width: 50%;
  align-self: center;
}