AccourseWork list : design title

This commit is contained in:
2021-08-21 19:06:47 +02:00
parent d11c493e2d
commit 4ad6786bf2
4 changed files with 161 additions and 140 deletions

View File

@@ -1,28 +1,41 @@
.chill-entity__social-action {
.badge-primary {
background-color: var(--chill-green);
}
}
div.accompanying_course_work-list {
.item {
margin-bottom: 1.5rem;
padding: 1rem;
border: 1px solid gray;
// ?? howto calculate border:groove generated from $orange ??
// see mixin badge_social_action
$groove-border-color-connect: #965028;
.title_label {
display: block;
margin: 0;
h2.title {
display: flex;
flex-direction: row;
width: 100%;
color: $dark;
height: 40px;
font-variant-caps: small-caps;
+ * {
margin-top: 0;
}
span.title_label {
border-radius: 0.35rem 0 0 0.35rem;
background-color: $groove-border-color-connect;
color: $white;
font-size: 80%;
padding: 0.5em;
padding-right: 0;
}
span.action_title {
flex-grow: 1;
margin: 0 0 0 auto;
border-radius: 0 0.35rem 0.35rem 0;
background-color: $light;
padding: 0.2em 0.7em;
@include badge_social_action;
}
}
/*
.objective_results {
display: grid;
grid-template-areas:
@@ -61,51 +74,54 @@ div.accompanying_course_work-list {
}
}
*/
.updatedBy {
margin-top: 1rem;
text-align: right;
font-size: 0.8rem;
font-size: 0.9rem;
font-style: italic;
}
}
ul.timeline {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
list-style-type: none;
ul.timeline {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
list-style-type: none;
> li {
min-width: 210px;
> li {
min-width: 210px;
div.date {
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
div.label {
display: flex;
flex-direction: column;
align-items: center;
div.date {
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
div.label {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 40px;
border-top: 3px solid var(--bs-chill-green);
padding: 0 40px;
border-top: 3px solid var(--bs-chill-green);
&:before {
content: '';
display: inline-block;
position: relative;
width: 12px;
height: 12px;
&:before {
content: '';
display: inline-block;
position: relative;
width: 12px;
height: 12px;
background-color: white;
border-radius: 12px;
border: 2px solid var(--bs-chill-green);
background-color: white;
border-radius: 12px;
border: 2px solid var(--bs-chill-green);
top: -9px;
top: -9px;
}
}
}
}
}