LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Cleanup

Browse source
This commit is contained in:
ポール ウェッブ 2018-05-29 11:27:21 -05:00
parent 5dfb01e2ef
commit 8d2172f013
2 changed files with 79 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
.vuepress/components/FeatureLinks.vue
View file

@ -19,6 +19,83 @@
<style lang="scss"> <style lang="scss">
@import "../scss/init/colors"; @import "../scss/init/colors";
@import "../scss/init/mixins";
@import "../scss/components/feature-links"; .feature-links {
list-style-type: none;
padding-top: 0.5rem;
}
.feature-link {
width: 320px; min-height: 135px;
background-color: $white;
border: 1px solid rgba($black, 0.1);
border-radius: 3px;
display: inline-block;
margin-bottom: 1rem;
position: relative;
transition: box-shadow 0.2s;
vertical-align: top;
> div:first-of-type {
top: 85px; left: 5%;
position: relative;
text-align: center;
width: 90%;
z-index: 1;
}
&:not(:hover) {
.feature-link__background {
filter: brightness(0.5);
}
}
&:hover {
box-shadow: 0 0 15px rgba($black, 0.15);
.feature-link__title {
color: $teal;
}
}
&:not(:last-of-type) {
margin-right: 1rem;
}
}
.feature-link__title {
background-color: $white;
border: 1px solid rgba(gray, 0.1);
box-shadow: 0 2px 5px rgba($black, 0.025);
border-radius: 3px;
box-decoration-break: clone;
display: inline;
font-size: 1rem;
line-height: 1.7;
padding: 0.25rem 0.5rem;
transition: color 0.2s;
position: relative;
}
.feature-link__background {
width: calc(100% + 2px); height: 100px;
top: -1px; left: -1px;
background-color: $teal;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
transition: filter 0.2s;
overflow: hidden;
position: absolute;
z-index: 0;
img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
}
}
</style> </style>

79
.vuepress/scss/components/_feature-links.scss
View file

@ -1,79 +0,0 @@
.feature-links {
list-style-type: none;
padding-top: 0.5rem;
}
.feature-link {
width: 320px; min-height: 135px;
background-color: $white;
border: 1px solid rgba($black, 0.1);
border-radius: 3px;
display: inline-block;
margin-bottom: 1rem;
position: relative;
transition: box-shadow 0.2s;
vertical-align: top;
> div:first-of-type {
top: 85px; left: 5%;
position: relative;
text-align: center;
width: 90%;
z-index: 1;
}
&:not(:hover) {
.feature-link__background {
// filter: grayscale(50%);
filter: brightness(0.5);
}
}
&:hover {
box-shadow: 0 0 15px rgba($black, 0.15);
.feature-link__title {
color: $teal;
}
}
&:not(:last-of-type) {
margin-right: 1rem;
}
}
.feature-link__title {
background-color: $white;
border: 1px solid rgba(gray, 0.1);
box-shadow: 0 2px 5px rgba($black, 0.025);
border-radius: 3px;
box-decoration-break: clone;
display: inline;
font-size: 1rem;
line-height: 1.7;
padding: 0.25rem 0.5rem;
transition: color 0.2s;
position: relative;
}
.feature-link__background {
width: calc(100% + 2px); height: 100px;
top: -1px; left: -1px;
background-color: $teal;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
transition: filter 0.2s;
overflow: hidden;
position: absolute;
z-index: 0;
img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
}
}