fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(course-teaser): tweaked style for sorting pills

Browse Source
This commit is contained in:
Sarah Vaupel 2019-08-05 11:45:02 +02:00
parent d964e1f705
commit 4007b0400d
3 changed files with 35 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
templates/default-layout.lucius
View File

@ -658,32 +658,29 @@ TODO: move somewhere else?
padding-top: 20px;
padding-bottom: 20px;
a {
text-decoration: none;
}
.course-header-link {
color: white;
.course-header {
background-color: var(--color-dark);
position: relative;
font-size: 16px;
color: #fff;
line-height: 1.4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 35px;
font-weight: bold;
text-align: left;
border-radius: 20px 20px 20px 20px / 50% 50% 50% 50%;
margin-right: 30px;
&:hover {
color: inherit;
}
.course-header {
background-color: var(--color-dark);
position: relative;
font-size: 16px;
color: #fff;
line-height: 1.4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 25px;
.course-header-link {
color: white;
font-weight: bold;
text-align: left;
border-radius: 15px;
margin-right: 10px;
text-decoration: none;
&:hover {
color: inherit;
}
}
}
}

18
templates/table/course/colonnade.lucius
View File

@ -10,11 +10,11 @@
box-shadow: none!important;
}
.course-header.sortable::after,
.course-header.sortable::before {
.course-header::after,
.course-header::before {
content: '';
position: absolute;
right: 5px;
right: 10px;
top: 20px;
width: 0;
height: 0;
@ -23,23 +23,23 @@
border-bottom: 8px solid rgba(255, 255, 255, 0.4);
}
.course-header.sortable::before {
.course-header::before {
/* magic numbers to move arrow back in the right position after flipping it.
this allows us to use the same border for the up and the down arrow */
transform: translateY(150%) scale(1, -1);
transform-origin: top;
}
.course-header.sortable::after {
.course-header::after {
transform: translateY(-150%);
}
.course-header.sortable:hover::before,
.course-header.sortable:hover::after {
.course-header:hover::before,
.course-header:hover::after {
border-bottom-color: rgba(255, 255, 255, 0.7);
}
.course-header.sorted-asc::before,
.course-header.sorted-desc::after {
.sorted-asc::before,
.sorted-desc::after {
border-bottom-color: white !important;
}

13
templates/table/course/header.hamlet
View File

@ -1,13 +1,12 @@
$newline never
$maybe flag <- sortableKey
$case directions
$of [SortAsc]
<a .course-header-link rel=nofollow href=^{tblLink' $ setParams (wIdent "sorting") (map toPathPiece (SortingSetting flag SortDesc : piSorting'))}>
<span .course-header *{attrs} :isSortable:.sortable :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc>
<span .course-header *{attrs} :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc>
$case directions
$of [SortAsc]
<a .course-header-link rel=nofollow href=^{tblLink' $ setParams (wIdent "sorting") (map toPathPiece (SortingSetting flag SortDesc : piSorting'))}>
^{widget}
$of _
<a .course-header-link rel=nofollow href=^{tblLink' $ setParams (wIdent "sorting") (map toPathPiece (SortingSetting flag SortAsc : piSorting'))}>
<span .course-header *{attrs} :isSortable:.sortable :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc>
$of _
<a .course-header-link rel=nofollow href=^{tblLink' $ setParams (wIdent "sorting") (map toPathPiece (SortingSetting flag SortAsc : piSorting'))}>
^{widget}
$nothing