Implement group support (we call ’em circles)

This commit is contained in:
Jonas Schäfer
2021-01-18 17:36:43 +01:00
parent 006fea97a6
commit 17efe53106
20 changed files with 1165 additions and 233 deletions

View File

@@ -250,3 +250,4 @@ $h-sizes: [200.0%, 174.11011266%, 151.57165665%, 131.95079108%, 114.8698355%, 10
*/
$h-small-sizes: [150.0%, 138.31618672%, 127.54245006%, 117.60790225%, 108.44717712%, 100.0%];
$small-screen-threshold: 40rem;
$medium-screen-threshold: 60rem;

View File

@@ -805,6 +805,22 @@ table {
}
}
div.elevated {
margin: $w-l1;
padding: $w-l1;
background-color: white;
}
div.elevated > *:first-child {
margin-top: 0;
margin-bottom: 0;
}
div.elevated > *:last-child {
margin-top: 0;
margin-bottom: 0;
}
.long-url-link {
display: block;
overflow: hidden;
@@ -820,15 +836,47 @@ table {
display: none;
}
ul.inline {
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
> li {
display: inline-block;
padding: 0;
margin: 0;
}
> li:before {
content: ', ';
}
> li:first-child:before {
content: '';
}
}
.nowrap {
white-space: nowrap;
}
/* linearisation / responsive stuff */
@media screen and (max-width: $small-screen-threshold) {
main > .form.layout-expanded {
@media screen and (max-width: $medium-screen-threshold) {
.form.layout-expanded {
margin-left: 0;
margin-right: 0;
}
div.elevated {
margin-left: 0;
margin-right: 0;
}
}
@media screen and (max-width: $small-screen-threshold) {
.form.layout-expanded .box {
margin-left: 0;
margin-right: 0;