Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-09 15:05:44 +01:00
Code Issues Packages Projects Releases Activity

Specify card-columns to select css properties more clearly

Browse Source
This commit is contained in:
Florian Scholdei
2019-10-29 14:35:23 +01:00
parent 37b8a50e98
commit cd4874f4d3
2 changed files with 16 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scm-ui/ui-components/src/CardColumnGroup.tsx
View File

@@ -70,7 +70,7 @@ export default class CardColumnGroup extends React.Component<Props, State> {
</span> </span>
</h2> </h2>
<hr /> <hr />
<Wrapper className={classNames("columns", "is-multiline")}>{content}</Wrapper> <Wrapper className={classNames("columns", "card-columns", "is-multiline")}>{content}</Wrapper>
<div className="is-clearfix" /> <div className="is-clearfix" />
</Container> </Container>
); );

32
scm-ui/ui-styles/src/scm.scss
View File

@@ -443,8 +443,8 @@ ul.is-separated {
} }
} }
// columns // card columns for repo and plugins overview
.columns.is-multiline { .card-columns {
.column { .column {
height: 120px; height: 120px;
@@ -457,35 +457,33 @@ ul.is-separated {
.column.is-half { .column.is-half {
width: calc(50% - 0.75rem); width: calc(50% - 0.75rem);
@media screen and (max-width: 768px) {
width: 100%;
}
&:nth-child(odd) { &:nth-child(odd) {
margin-right: 1.5rem; margin-right: 1.5rem;
@media screen and (max-width: 768px) {
margin-right: 0;
}
} }
.overlay-column { .overlay-column {
width: calc(50% - 3rem); width: calc(50% - 3rem);
@media screen and (max-width: 768px) {
width: calc(100% - 1.5rem);
}
} }
} }
.column.is-full .overlay-column { .column.is-full .overlay-column {
width: calc(100% - 1.5rem); width: calc(100% - 1.5rem);
} }
@media screen and (max-width: 768px) {
.column.is-half {
width: 100%;
&:nth-child(odd) {
margin-right: 0;
}
.overlay-column {
width: calc(100% - 1.5rem);
}
}
}
} }
.content.is-plugin-page { .content.is-plugin-page {
.columns.is-multiline { .card-columns {
.column.is-half .overlay-column { .column.is-half .overlay-column {
width: calc(37.5% - 1.5rem); width: calc(37.5% - 1.5rem);
} }