sidebar.scss 1.65 KB
Newer Older
Mattias J Duffy's avatar
Mattias J Duffy committed
1 2 3
@import '../_variables.scss';
@import '../_mixins.scss';

Andrew Hrdy's avatar
Andrew Hrdy committed
4
.sidebar-label-row {
5 6
  display: flex;
}
Andrew Hrdy's avatar
Andrew Hrdy committed
7 8

.sidebar-label-holder {
Mattias J Duffy's avatar
Mattias J Duffy committed
9 10 11
  margin-left: 16px;
  margin-right: 16px;
}
12 13 14

.sidebar-label-holder > * {
  margin-bottom: 16px;
15
}
Andrew Hrdy's avatar
Andrew Hrdy committed
16 17

.sidebar-open {
18
  transform: translateX(0px);
19
}
Andrew Hrdy's avatar
Andrew Hrdy committed
20 21

.sidebar-closed {
22
  transform: translateX(400px);
23
}
Andrew Hrdy's avatar
Andrew Hrdy committed
24 25 26 27 28

.sidebar-root {
  overflow: hidden;
  display: block;
  box-sizing: border-box;
29
  position: absolute;
30 31 32
  right: 0;
  height: calc(100% - 64px);
  width: 400px;
33 34 35

  @include transition(300ms cubic-bezier(0.820, 0.165, 0.340, 0.930));
}
Mattias J Duffy's avatar
Mattias J Duffy committed
36

Andrew Hrdy's avatar
Andrew Hrdy committed
37 38 39 40 41 42 43 44
.sidebar-close-btn {
  position: absolute !important;
  width: 24px !important;
  height: 24px !important;
  top: 5px;
  right: 5px;
}

Mattias J Duffy's avatar
Mattias J Duffy committed
45
.sidebar-root::-webkit-scrollbar {
46
  display: none;
Mattias J Duffy's avatar
Mattias J Duffy committed
47 48
}

49 50
.card-container-offset-open {
  flex: 1 0 400px;
Andrew Hrdy's avatar
Andrew Hrdy committed
51

52
}
53 54 55

.card-container-offset-closed {
  flex: 1 0 0;
56 57

}
58 59 60

.card-container-offset {
  transition-delay: 100ms;
61
}
Andrew Hrdy's avatar
Andrew Hrdy committed
62 63

.sidebar-divider {
Mattias J Duffy's avatar
Mattias J Duffy committed
64
  margin: 16px !important;
65
}
Andrew Hrdy's avatar
Andrew Hrdy committed
66 67 68 69

.sidebar-row1 {
  display: flex;
  padding: 8px;
70
}
Andrew Hrdy's avatar
Andrew Hrdy committed
71 72 73 74

.sidebar-avatar {
  width: 100px !important;
  height: 100px !important;
75 76 77
  border-radius: 0 !important;

  & > img {
Mattias J Duffy's avatar
Mattias J Duffy committed
78
    object-fit: contain !important;
79 80
    border-radius: 0 !important;
  }
Mattias J Duffy's avatar
Mattias J Duffy committed
81
}
82

Andrew Hrdy's avatar
Andrew Hrdy committed
83 84 85 86 87
.sidebar-title {
  height: 100px;
  margin-left: 8px;
  display: flex;
  align-items: center;
88
}
Andrew Hrdy's avatar
Andrew Hrdy committed
89 90 91 92 93

.sidebar-row2 {
  position: absolute;
  bottom: 0;
  width: 100%;
94
}
Andrew Hrdy's avatar
Andrew Hrdy committed
95 96 97 98

.sidebar-toggle-map-btn {
  width: 100%;
}
99 100 101

.sidebar-scroll {
  height: calc(100% - 220px - 116px - 32px) !important;
Andrew Hrdy's avatar
Andrew Hrdy committed
102
  overflow-y: auto;
103
}
Andrew Hrdy's avatar
Andrew Hrdy committed
104

Andrew Hrdy's avatar
Andrew Hrdy committed
105
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
Andrew Hrdy's avatar
Andrew Hrdy committed
106 107
  .sidebar-root {
    display: none !important;
108
  }
109 110 111

  .card-container-offset {
    display: none !important;
112
  }
Andrew Hrdy's avatar
Andrew Hrdy committed
113
}