/* style for content area */
/* content header */
.contentHeader,
-.boxHeadline { // deprecated
+.boxHeadline {
+ // deprecated
color: $wcfContentHeadlineText;
-
+
.contentTitle,
- > h1 { // deprecated
+ > h1 {
+ // deprecated
@include wcfFontTitle;
-
+
.badge {
top: -2px;
-
+
@include wcfLineHeight;
}
-
+
a {
color: $wcfContentHeadlineLink;
-
+
&:hover {
color: $wcfContentHeadlineLinkActive;
}
color: $wcfContentDimmedText;
margin-top: 5px;
}
-
+
.contentHeaderMetaData {
color: $wcfContentDimmedText;
margin-top: 5px;
-
+
&.inlineList {
> li:not(:last-child) {
margin-right: 10px;
}
}
-
+
> li {
a,
a:hover,
}
}
}
-
+
.contentTitle + .inlineDataList {
margin-top: 5px;
}
-
+
.inlineDataList {
color: $wcfContentDimmedText;
}
-
+
@include screen-sm-down {
.contentHeaderIcon {
display: none;
}
}
-
+
@include screen-sm {
.contentHeaderNavigation > ul {
@include inlineList;
-
+
align-items: flex-start;
justify-content: flex-end;
margin-top: 20px;
}
}
-
+
@include screen-md-up {
display: flex;
align-items: flex-start;
-
+
.contentHeaderIcon {
flex: 0 0 64px;
- margin-right: 15px
+ margin-right: 15px;
}
-
+
.contentHeaderTitle {
flex: 1 1 0%;
}
-
+
.contentHeaderNavigation {
flex: 0 0 auto;
margin-left: 15px;
max-width: 50%;
-
+
> ul {
@include inlineList;
-
+
align-items: flex-start;
flex-wrap: wrap;
justify-content: flex-end;
margin-top: -5px;
-
+
> li {
margin-top: 5px;
-
+
&:not(:last-child) {
margin-right: 0;
}
-
+
&:not(:first-child) {
margin-left: 5px;
}
.boxHeadline.boxSubHeadline {
margin-top: 40px;
margin-bottom: 20px;
-
+
> h2 {
color: $wcfContentHeadlineText;
-
+
@include wcfFontSection;
-
+
a {
color: $wcfContentHeadlineLink;
-
+
&:hover {
color: $wcfContentHeadlineLinkActive;
}
}
-
+
.badge {
top: -2px;
}
/* content sections */
.section {
margin-top: 40px;
-
+
> :first-child {
margin-top: 0;
}
-
+
.sectionTitle {
color: $wcfContentHeadlineText;
-
+
@include wcfFontSection;
-
+
a {
color: $wcfContentHeadlineLink;
-
+
&:hover {
color: $wcfContentHeadlineLinkActive;
}
}
-
+
.badge {
top: -2px;
}
}
-
+
.sectionDescription {
color: $wcfContentDimmedText;
}
-
+
> .sectionHeader,
> .sectionTitle {
margin-bottom: 20px;
-
+
+ .section {
margin-top: 20px;
}
}
-
+
&:not(.sectionContainerList) {
> .sectionHeader,
> .sectionTitle {
padding-bottom: 10px;
}
}
-
+
&.sectionContainerList {
> .sectionHeader,
> .sectionTitle {
margin-bottom: 10px;
}
}
-
+
&.tabularBox {
> .sectionHeader,
> .sectionTitle {
margin-bottom: 0;
}
}
-
+
.section {
margin-top: 30px;
-
+
&:first-child {
margin-top: 20px;
}
-
+
.sectionTitle {
@include wcfFontHeadline;
}
-
+
> .sectionHeader,
> .sectionTitle {
margin-bottom: 15px;
/* fieldset styling (old sections / deprecated) */
fieldset {
margin-top: 40px;
-
+
> legend {
border-bottom: 1px solid $wcfContentBorderInner;
color: $wcfContentHeadlineText;
margin-bottom: 20px;
padding-bottom: 10px;
width: 100%;
-
+
@include wcfFontSection;
-
+
a {
color: $wcfContentHeadlineLink;
-
+
&:hover {
color: $wcfContentHeadlineLinkActive;
}
}
-
+
.badge {
top: -2px;
}
-
- &+ * {
+
+ & + * {
clear: left;
}
-
+
+ small {
color: $wcfContentDimmedText;
position: relative;
.section {
fieldset {
margin-top: 20px;
-
+
> legend {
margin-bottom: 15px;
-
+
@include wcfFontHeadline;
}
}
.containerHeadline {
> h3 {
@include wcfFontHeadline;
-
+
> .badge {
top: -2px;
}
}
-
+
~ .containerContent {
margin-top: 10px;
}
& + .section {
margin-top: 30px;
}
-
+
@include screen-sm-down {
ul {
margin-top: 30px;
-
+
> li {
> .button {
display: block;
}
}
}
-
+
> nav:not(.pagination) > ul > li + li {
margin-top: 10px;
}
}
-
+
@include screen-md-up {
align-items: center;
display: flex;
-
+
// align <nav> to the right side
justify-content: flex-end;
-
+
> nav {
flex: 0 0 auto;
margin-top: 30px;
order: 3;
-
+
&.pagination {
order: 1;
-
+
// use up maximum space, causing it to stick to the left while all other
// <nav> elements will still be aligned to the right side
flex: 1 1 auto;
}
-
+
&.jsClipboardEditor {
margin-right: 5px;
order: 2;
}
-
+
& + nav {
flex: 0 0 auto;
}
-
+
&:not(.pagination) {
text-align: right;
}
}
-
+
ul {
display: inline-flex;
-
+
> li {
flex: 0 0 auto;
-
+
&:not(:last-child) {
margin-right: 5px;
}
.paginationTop {
margin-top: 40px;
-
+
& + .section {
margin-top: 20px;
}
@include screen-xs {
> .contentFooterNavigation {
margin-top: 20px;
-
+
> ul > li {
&:not(:first-child) {
margin-top: 10px;
}
}
-
+
.button {
display: block;
padding: 7px 10px;
text-align: center;
-
+
&:not(:first-child) {
margin-top: 10px;
}
}
}
}
-
+
@include screen-sm-up {
display: flex;
-
+
> .paginationBottom {
flex: 0 0 auto;
}
-
+
> .contentFooterNavigation {
flex: 1 1 auto;
margin: 20px 0 0 20px;
text-align: right;
-
+
> ul {
@include inlineList;
-
+
display: inline-flex;
flex-wrap: nowrap;
}
@include screen-xs {
.contentHeader > .contentHeaderNavigation > ul {
margin-top: 30px;
-
+
> li {
&:not(:first-child) {
margin-top: 10px;
}
-
+
> .button {
display: block;
padding: 7px 10px;
text-align: center;
-
+
> .invisible {
display: inline;
}
body:not(.mobileShowPaginationTop) {
.paginationTop {
display: none;
-
+
& + .section {
margin-top: 30px;
}
}
}
-
+
/* DEPRECATED */
.contentNavigation > .pagination {
display: none;
}
-
+
/* DEPRECATED */
.section ~ .contentNavigation > .pagination {
display: block;
-
+
& + nav {
// gap between pagination and navigation buttons
margin-top: 10px;
.sidebar + .content:not(:last-child) {
.contentHeaderNavigation {
flex: 1 1 0%;
-
+
> ul {
flex-wrap: wrap !important;
justify-content: flex-end;