Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 19:04:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add article image

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-29 14:38:45 +01:00
parent 93b7fb2fd4
commit 13d6def032
8 changed files with 259 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
docs/css/bulma-docs.css
View File

@@ -8432,6 +8432,121 @@ html.route-index #carbon {
border-bottom-color: #00d1b2;
}
.article-image {
background-color: #00d1b2;
display: block;
height: 240px;
margin-left: auto;
margin-right: auto;
width: 320px;
position: relative;
text-align: center;
}
.article-image.is-white {
background-color: white;
}
.article-image.is-black {
background-color: #0a0a0a;
}
.article-image.is-light {
background-color: whitesmoke;
}
.article-image.is-dark {
background-color: #363636;
}
.article-image.is-primary {
background-color: #00d1b2;
}
.article-image.is-info {
background-color: #3273dc;
}
.article-image.is-success {
background-color: #23d160;
}
.article-image.is-warning {
background-color: #ffdd57;
}
.article-image.is-danger {
background-color: #ff3860;
}
.article-image:hover .article-overlay {
opacity: 0.25;
}
.article-image:hover .article-icon {
transform: scale(1.1);
}
.article-image:hover .article-title {
transform: scale(0.9);
}
.article-image.is-single {
margin-bottom: 2rem;
width: 100%;
}
@media screen and (max-width: 768px) {
.article-image {
height: 180px;
width: 240px;
}
}
.article-overlay {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
background-color: #0a0a0a;
opacity: 0;
transition-duration: 86ms;
transition-property: opacity;
transition-timing-function: ease-out;
}
.article-icon,
.article-title {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
align-items: center;
display: flex;
justify-content: center;
transition-duration: 86ms;
transition-property: transform;
transition-timing-function: ease-out;
}
.article-icon {
color: #0a0a0a;
opacity: 0.25;
}
.article-icon .fa {
font-size: 56px;
}
.article-title {
color: white;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.25;
}
.example,
.structure {
border: 1px solid #ffdd57;