|
1 | 1 | .program-page-wrapper {
|
2 |
| - padding-top: 100px; |
3 |
| - |
4 | 2 | h3.page-title {
|
| 3 | + padding-top: 100px; |
5 | 4 | text-align: center;
|
6 | 5 | font-size: 32px;
|
7 | 6 | font-weight: 700;
|
8 | 7 | line-height: 38px;
|
9 | 8 | margin-bottom: 15px
|
10 | 9 | }
|
11 | 10 |
|
12 |
| -.bg-track-1 { background-color: $bg-track-1 ; } |
13 |
| -.bg-track-2 { background-color: $bg-track-2 ; } |
14 |
| -.bg-track-3 { background-color: $bg-track-3 ; } |
15 |
| -.bg-track-4 { background-color: $bg-track-4 ; } |
16 |
| -.bg-track-5 { background-color: $bg-track-5 ; } |
17 |
| -.bg-track-6 { background-color: $bg-track-6 ; } |
18 |
| -.bg-track-7 { background-color: $bg-track-7 ; } |
19 |
| -.bg-track-8 { background-color: $bg-track-8 ; } |
20 |
| -.bg-track-9 { background-color: $bg-track-9 ; } |
21 |
| -.bg-track-10 { background-color: $bg-track-10 ; } |
22 |
| -.bg-track-11 { background-color: $bg-track-11 ; } |
23 |
| -.bg-track-12 { background-color: $bg-track-12 ; } |
24 |
| -.default-accent { background-color: $grey-light; } |
| 11 | + .bg-track-1 { background-color: $bg-track-1; } |
| 12 | + .bg-track-2 { background-color: $bg-track-2; } |
| 13 | + .bg-track-3 { background-color: $bg-track-3; } |
| 14 | + .bg-track-4 { background-color: $bg-track-4; } |
| 15 | + .bg-track-5 { background-color: $bg-track-5; } |
| 16 | + .bg-track-6 { background-color: $bg-track-6; } |
| 17 | + .bg-track-7 { background-color: $bg-track-7; } |
| 18 | + .bg-track-8 { background-color: $bg-track-8; } |
| 19 | + .bg-track-9 { background-color: $bg-track-9; } |
| 20 | + .bg-track-10 { background-color: $bg-track-10; } |
| 21 | + .bg-track-11 { background-color: $bg-track-11; } |
| 22 | + .bg-track-12 { background-color: $bg-track-12; } |
| 23 | + |
| 24 | + .session-format-bg-1 { background-color: $session-format-tag-1;} |
| 25 | + .session-format-bg-2 { background-color: $session-format-tag-2;} |
| 26 | + .session-format-bg-3 { background-color: $session-format-tag-3;} |
| 27 | + .session-format-bg-4 { background-color: $session-format-tag-4;} |
| 28 | + .session-format-bg-5 { background-color: $session-format-tag-5;} |
| 29 | +} |
| 30 | + |
| 31 | +.session-format-tag { |
| 32 | + padding: 8px 10px 8px 50px; |
| 33 | + border: 1px solid $divider-light; |
| 34 | + border-radius: 100px; |
| 35 | + font-size: 12px; |
| 36 | + margin-right: 8px; |
| 37 | + position: relative; |
| 38 | + |
| 39 | + &::before { |
| 40 | + content: ''; |
| 41 | + position: absolute; |
| 42 | + top: 50%; |
| 43 | + left: 26px; |
| 44 | + transform: translate(-50%, -50%); |
| 45 | + height: 12px; |
| 46 | + width: 24px; |
| 47 | + border-radius: 150px 150px 0 0; |
| 48 | + } |
| 49 | + &.session-format-tag-1::before { background-color: $session-format-tag-1;} |
| 50 | + &.session-format-tag-2::before { background-color: $session-format-tag-2;} |
| 51 | + &.session-format-tag-3::before { background-color: $session-format-tag-3;} |
| 52 | + &.session-format-tag-4::before { background-color: $session-format-tag-4;} |
| 53 | + &.session-format-tag-5::before { background-color: $session-format-tag-5;} |
| 54 | +} |
| 55 | + |
| 56 | +.track-tag { |
| 57 | + font-size: 12px; |
| 58 | + padding: 7px 10px; |
| 59 | + border-radius: 20px; |
| 60 | + border: 1px solid $divider-light; |
| 61 | + |
| 62 | + .track-dot{ |
| 63 | + height: 16px; |
| 64 | + width: 16px; |
| 65 | + display: inline-block; |
| 66 | + position: relative; |
| 67 | + top: 3px; |
| 68 | + border-radius: 50%; |
| 69 | + margin-right: 4px; |
| 70 | + } |
25 | 71 | }
|
26 | 72 |
|
27 | 73 | .program-filter-pane {
|
|
130 | 176 | margin-bottom: 12px;
|
131 | 177 | }
|
132 | 178 |
|
133 |
| - .session-format-tag { |
134 |
| - font-family: var(--secondary-body-font); |
135 |
| - padding: 8px 10px 8px 50px; |
136 |
| - border: 1px solid $divider-light; |
137 |
| - border-radius: 100px; |
138 |
| - font-size: 12px; |
139 |
| - margin-right: 8px; |
140 |
| - position: relative; |
141 |
| - |
142 |
| - &::before { |
143 |
| - content: ''; |
144 |
| - position: absolute; |
145 |
| - top: 50%; |
146 |
| - left: 26px; |
147 |
| - transform: translate(-50%, -50%); |
148 |
| - height: 12px; |
149 |
| - width: 24px; |
150 |
| - border-radius: 150px 150px 0 0; |
151 |
| - } |
152 |
| - &.session-format-tag-1::before { background-color: $session-format-tag-1;} |
153 |
| - &.session-format-tag-2::before { background-color: $session-format-tag-2;} |
154 |
| - &.session-format-tag-3::before { background-color: $session-format-tag-3;} |
155 |
| - &.session-format-tag-4::before { background-color: $session-format-tag-4;} |
156 |
| - &.session-format-tag-5::before { background-color: $session-format-tag-5;} |
157 |
| - } |
158 |
| - |
159 |
| - .track-tag { |
160 |
| - font-family: var(--secondary-body-font); |
161 |
| - font-size: 12px; |
162 |
| - padding: 7px 10px; |
163 |
| - border-radius: 20px; |
164 |
| - border: 1px solid $divider-light; |
165 |
| - |
166 |
| - .track-dot{ |
167 |
| - height: 16px; |
168 |
| - width: 16px; |
169 |
| - display: inline-block; |
170 |
| - position: relative; |
171 |
| - top: 3px; |
172 |
| - border-radius: 50%; |
173 |
| - margin-right: 4px; |
174 |
| - } |
175 |
| - } |
176 |
| - |
177 | 179 | .session-accent {
|
178 | 180 | width: 100%;
|
179 | 181 | height: .5rem;
|
|
184 | 186 | }
|
185 | 187 | }
|
186 | 188 |
|
| 189 | +.fly-out-wrapper { |
| 190 | + position: fixed; |
| 191 | + top: 0; |
| 192 | + bottom: 0; |
| 193 | + padding-top: 160px; |
| 194 | + width: 40%; |
| 195 | + height: 100%; |
| 196 | + z-index: 10; |
| 197 | + background-color: $white; |
| 198 | + border: 1px solid black; |
| 199 | + transition: all 1s; |
| 200 | + overflow: scroll; |
| 201 | + |
| 202 | + |
| 203 | + &.open { |
| 204 | + right: 0; |
| 205 | + |
| 206 | + } |
| 207 | + |
| 208 | + &.closed { |
| 209 | + right: -40%; |
| 210 | + } |
| 211 | + |
| 212 | + .close-icon { |
| 213 | + position: absolute; |
| 214 | + right: 40px; |
| 215 | + top: 140px; |
| 216 | + } |
| 217 | + |
| 218 | + .program-session-detail { |
| 219 | + margin: 0 40px 50px 30px; |
| 220 | + overflow: scroll; |
| 221 | + |
| 222 | + .program-session-title { |
| 223 | + font-size: 21px; |
| 224 | + font-weight: 700; |
| 225 | + margin-bottom: 15px; |
| 226 | + } |
| 227 | + |
| 228 | + .program-session-tags { |
| 229 | + display: flex; |
| 230 | + flex-wrap: wrap; |
| 231 | + margin-bottom: 25px; |
| 232 | + } |
| 233 | + |
| 234 | + .program-session-about { |
| 235 | + border-top: 1px solid #D1D1D1; |
| 236 | + font-family: var(--secondary-body-font); |
| 237 | + padding-top: 25px; |
| 238 | + width: 100%; |
| 239 | + font-weight: 400; |
| 240 | + font-size: 16px; |
| 241 | + line-height: 25px; |
| 242 | + margin-bottom: 25px; |
| 243 | + |
| 244 | + |
| 245 | + span { |
| 246 | + font-family: var(--sans-serif-font); |
| 247 | + font-weight: 700; |
| 248 | + font-size: 16px; |
| 249 | + margin-bottom: 6px; |
| 250 | + display: block; |
| 251 | + } |
| 252 | + } |
| 253 | + |
| 254 | + .program-session-authors { |
| 255 | + .speaker-name { |
| 256 | + font-weight: 700; |
| 257 | + font-size: 16px; |
| 258 | + margin-bottom: 6px; |
| 259 | + } |
| 260 | + |
| 261 | + .speaker-bio { |
| 262 | + font-family: var(--secondary-body-font); |
| 263 | + margin-bottom: 15px; |
| 264 | + font-weight: 400; |
| 265 | + font-size: 16px; |
| 266 | + line-height: 25px; |
| 267 | + } |
| 268 | + } |
| 269 | + } |
| 270 | +} |
| 271 | + |
187 | 272 | @media screen and (max-width: 1200px) and (orientation: portrait),
|
188 | 273 | (max-width: 1123px) and (orientation: landscape) {
|
189 | 274 | .program-sessions-wrapper {
|
|
192 | 277 | .session {
|
193 | 278 | width: 40%;
|
194 | 279 | }
|
| 280 | + |
| 281 | + .fly-out-wrapper { |
| 282 | + width: 70%; |
| 283 | + &.open { right: 0 } |
| 284 | + &.closed { right: -70%; } |
| 285 | + } |
195 | 286 | }
|
196 | 287 |
|
197 | 288 |
|
| 289 | + |
| 290 | + |
198 | 291 | @media screen and (max-width: 900px) and (orientation: portrait),
|
199 | 292 | (max-width: 823px) and (orientation: landscape) {
|
200 | 293 | .program-sessions-wrapper {
|
|
204 | 297 | .session {
|
205 | 298 | width: 100%;
|
206 | 299 | }
|
| 300 | + |
| 301 | + .fly-out-wrapper { |
| 302 | + width: 100%; |
| 303 | + &.open { right: 0; } |
| 304 | + &.closed { right: -100%; } |
| 305 | + } |
207 | 306 | }
|
0 commit comments