247 lines
5.3 KiB
Sass
247 lines
5.3 KiB
Sass
[uw-course-teaser]
|
|
--course-border-color: var(--color-grey)
|
|
--course-padding-hori: 10px
|
|
--course-padding-vert: 12px
|
|
display: grid
|
|
position: relative
|
|
grid-gap: 5px 7px
|
|
grid-template-columns: 130px 30px 1fr 60px
|
|
grid-template-areas: 'shrthnd . title chevron' 'shrthnd smstr school chevron' '. . rgstrd . ' 'tutor tutor name . ' 'duedate duedate date . ' 'dscrptn dscrptn dscrptn dscrptn'
|
|
padding: var(--course-padding-vert) var(--course-padding-hori)
|
|
transition: background-color .1s ease-out
|
|
cursor: pointer
|
|
|
|
&:hover
|
|
background-color: var(--course-bg-color)
|
|
|
|
+ [uw-course-teaser]
|
|
border-top: 1px solid var(--course-border-color)
|
|
|
|
@media (max-width: 768px)
|
|
grid-template-columns: 140px 1fr 30px
|
|
grid-template-areas: 'shrthnd title chevron' 'shrthnd title . ' 'smstr school school ' '. rgstrd rgstrd ' 'tutor name name ' 'duedate date date ' 'dscrptn dscrptn dscrptn'
|
|
|
|
@media (max-width: 426px)
|
|
grid-template-columns: 1fr
|
|
grid-template-areas: 'shrthnd' 'title' 'smstr' 'school' 'rgstrd' 'tutor' 'name' 'duedate' 'date' 'dscrptnlbl' 'dscrptn' 'chevron'
|
|
|
|
.course-teaser__not-expandable
|
|
cursor: initial
|
|
|
|
// chevron
|
|
.course-teaser__chevron
|
|
position: relative
|
|
padding: 10px
|
|
grid-area: chevron
|
|
justify-self: center
|
|
align-self: center
|
|
width: 100%
|
|
height: 100%
|
|
cursor: pointer
|
|
|
|
&::before
|
|
content: ''
|
|
position: absolute
|
|
display: block
|
|
margin-top: -7.35px
|
|
margin-left: -7.35px
|
|
|
|
// visually centered
|
|
border-width: 0 3px 3px 0
|
|
width: 8px
|
|
height: 8px
|
|
top: 50%
|
|
left: 50%
|
|
border-color: var(--color-fontsec)
|
|
border-style: solid
|
|
transform: rotate(135deg)
|
|
transform-origin: 7.25px 7.25px
|
|
|
|
// rotate about visual center
|
|
transition: all .2s ease-out
|
|
|
|
&:hover::before
|
|
transform: scale(1.4) rotate(45deg)
|
|
|
|
@media (max-width: 768px)
|
|
justify-self: end
|
|
width: auto
|
|
|
|
&::before
|
|
position: initial
|
|
|
|
@media (max-width: 426px)
|
|
&::before
|
|
transform: rotate(45deg)
|
|
margin-left: -7.35px
|
|
|
|
&:hover::before
|
|
transform: scale(1.4) rotate(45deg)
|
|
|
|
// semester
|
|
.course-teaser__semester
|
|
grid-area: smstr
|
|
justify-self: end
|
|
|
|
a
|
|
color: var(--color-fontsec)
|
|
|
|
@media (max-width: 768px)
|
|
justify-self: initial
|
|
|
|
// shorthand
|
|
.course-teaser__shorthand
|
|
position: relative
|
|
grid-area: shrthnd
|
|
font-size: 2rem
|
|
line-height: 1.25
|
|
min-height: calc(2rem * 1.25)
|
|
|
|
> a
|
|
position: absolute
|
|
height: 100%
|
|
width: 100%
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
white-space: nowrap
|
|
word-break: break-any
|
|
text-decoration: none !important
|
|
|
|
// sry.
|
|
font-weight: 600
|
|
color: var(--color-grey-medium)
|
|
|
|
// @media (max-width: 768px) {
|
|
position: initial;
|
|
}
|
|
|
|
// title
|
|
.course-teaser__title
|
|
grid-area: title
|
|
font-size: 1.2rem
|
|
align-self: baseline
|
|
|
|
// registration
|
|
.course-teaser__registration
|
|
grid-area: rgstrd
|
|
color: var(--color-fontsec)
|
|
font-weight: bold
|
|
|
|
// school
|
|
.course-teaser__school
|
|
grid-area: school
|
|
|
|
a
|
|
color: var(--color-fontsec)
|
|
|
|
// duedate
|
|
.course-teaser__duedate
|
|
grid-area: date
|
|
|
|
// lecturer
|
|
.course-teaser__lecturer
|
|
grid-area: name
|
|
|
|
// description
|
|
.course-teaser__description
|
|
grid-area: dscrptn
|
|
max-height: 75vh
|
|
overflow: auto
|
|
|
|
// show description only as dots (overflow text-overflow) and only show when expanded. No "hidden fiddling"
|
|
|
|
// labels
|
|
.course-teaser__lecturer-label
|
|
grid-area: tutor
|
|
|
|
.course-teaser__duedate-label
|
|
grid-area: duedate
|
|
|
|
.course-teaser__description-label
|
|
grid-area: dscrptnlbl
|
|
|
|
.course-teaser__lecturer-label,
|
|
.course-teaser__description-label,
|
|
.course-teaser__duedate-label
|
|
justify-self: end
|
|
color: var(--color-fontsec)
|
|
font-style: italic
|
|
|
|
@media (max-width: 768px)
|
|
justify-self: initial
|
|
|
|
@media (max-width: 426px)
|
|
margin-top: 7px
|
|
font-weight: bold
|
|
font-style: initial
|
|
|
|
// hidden in closed state
|
|
.course-teaser__description,
|
|
.course-teaser__description-label
|
|
display: none
|
|
|
|
// expanded courses
|
|
.course-teaser__expanded
|
|
cursor: initial
|
|
|
|
.course-teaser__chevron
|
|
&::before
|
|
transform: rotate(45deg)
|
|
|
|
&:hover::before
|
|
transform: scale(1.4) rotate(135deg)
|
|
|
|
@media (max-width: 426px)
|
|
&::before
|
|
transform: rotate(225deg)
|
|
|
|
&:hover::before
|
|
transform: scale(1.4) rotate(225deg)
|
|
|
|
.course-teaser__school-label,
|
|
.course-teaser__school,
|
|
.course-teaser__duedate-label,
|
|
.course-teaser__duedate,
|
|
.course-teaser__description
|
|
display: block
|
|
|
|
@media (max-width: 426px)
|
|
.course-teaser__description-label
|
|
display: block
|
|
|
|
// course teaser: header styling
|
|
.course-teaser-header
|
|
padding-top: 10px
|
|
padding-bottom: 20px
|
|
line-height: 1.4
|
|
max-width: 85vw
|
|
|
|
.course-header
|
|
float: left
|
|
background-color: var(--color-dark)
|
|
position: relative
|
|
font-size: 16px
|
|
color: #fff
|
|
padding-top: 10px
|
|
padding-bottom: 10px
|
|
padding-left: 10px
|
|
padding-right: 35px
|
|
margin-bottom: 10px
|
|
font-weight: bold
|
|
text-align: left
|
|
border-radius: 20px 20px 20px 20px / 50% 50% 50% 50%
|
|
margin-right: 30px
|
|
|
|
.course-header-link
|
|
color: white
|
|
font-weight: bold
|
|
text-decoration: none
|
|
|
|
&:hover
|
|
color: inherit
|
|
|
|
.course-teaser-header:after
|
|
content: ""
|
|
display: table
|
|
clear: both
|