hiro/Vulcan
1
0
Fork 0
mirror of https://github.com/vale981/Vulcan synced 2025-03-08 19:11:38 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update _posts.scss

Browse source
This commit is contained in:
Kiko Beats 2015-02-07 19:59:06 +01:00
parent 594eb2f998
commit a774b5b2e4
1 changed files with 244 additions and 268 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

512
packages/telescope-theme-hubble/lib/client/scss/modules/_posts.scss
View file

@ -1,90 +1,85 @@
// ------------------------------------ posts ------------------------------------ // // ------------------------------------ posts ------------------------------------ //
.posts-wrapper{ .posts-wrapper {
padding: 0; padding: 0;
margin-bottom: 20px; margin-bottom: 20px;
} }
.single-post .posts {
.single-post .posts{
margin-bottom: 10px; margin-bottom: 10px;
.post{ .post {
border-radius: 3px; border-radius: 3px;
@extend .has-shadow; @extend .has-shadow;
} }
} }
// ------------------------------------ post ------------------------------------ // // ------------------------------------ post ------------------------------------ //
.post{ .post {
padding: 10px 0px 10px 10px; padding: 10px 0px 10px 10px;
border-radius: 0px; border-radius: 0px;
margin-bottom: 0px; margin-bottom: 0px;
border-bottom:1px solid $lightest-grey; border-bottom: 1px solid $lightest-grey;
display: flex; display: flex;
align-items: center; align-items: center;
position:relative; position: relative;
width:100%; width: 100%;
background: white; background: white;
&:first-child{ &:first-child {
border-radius: 3px 3px 0px 0px; border-radius: 3px 3px 0px 0px;
} }
&:last-child{ &:last-child {
border-radius: 0px 0px 3px 3px; border-radius: 0px 0px 3px 3px;
} }
&.animate{ &.animate {
transition: ease-out, top, 400ms, 0ms; transition: ease-out, top, 400ms, 0ms;
} }
&.inactive{ &.inactive {
.post-content{ .post-content {
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYV2NkIALMnDlTkpGQOpCi9PT053gVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQC5OyXvW/4BHwAAAABJRU5ErkJggg=='); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYV2NkIALMnDlTkpGQOpCi9PT053gVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQC5OyXvW/4BHwAAAABJRU5ErkJggg==');
} }
} }
} }
// ------------------------------ posts-list layout ------------------------------ // // ------------------------------ posts-list layout ------------------------------ //
.posts-list{ .posts-list {
.post-module{ .post-module {
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
margin-right: 10px; margin-right: 10px;
} }
.post-rank{ .post-rank {
@include small{ @include small {
display: none; display: none;
} }
.post-rank-inner{ .post-rank-inner {
height: 25px; height: 25px;
position: relative; position: relative;
} }
span{ span {
position:absolute; position: absolute;
top:0px; top: 0px;
left:-60px; left: -60px;
display:block; display: block;
height:25px; height: 25px;
line-height:25px; line-height: 25px;
width:30px; width: 30px;
text-align:right; text-align: right;
font-size:18px; font-size: 18px;
// font-weight:bold; // font-weight: bold;
color:black(0.2); color: black(0.2);
} }
} }
.post-upvote{ .post-upvote {
order: 1; order: 1;
@include small{ @include small {
display: none; display: none;
} }
} }
.post-content{ .post-content {
order: 2; order: 2;
width: 100%; width: 100%;
// can shrink on mobile or desktop // can shrink on mobile or desktop
flex-shrink: 1; flex-shrink: 1;
@include medium-large{ @include medium-large {
// but can only grow on desktop // but can only grow on desktop
flex-grow: 1; flex-grow: 1;
// only be a flex container on desktop // only be a flex container on desktop
@ -92,66 +87,68 @@
} }
align-items: center; align-items: center;
} }
.post-info{ .post-info {
flex-grow: 1; flex-grow: 1;
} }
.post-share{ .post-share {
order: 3; order: 3;
} }
.post-discuss{ .post-discuss {
order: 7; order: 7;
padding-top: 6px; padding-top: 6px;
@include small{ @include small {
display: none; display: none;
} }
} }
.post-share, .post-discuss{ .post-share,
.post-discuss {
// width: 60px; // width: 60px;
text-align: center; text-align: center;
// height: 60px; // height: 60px;
// position: relative; // position: relative;
// top: -5px; // top: -5px;
} }
.post-actions{ .post-actions {
order: 8; order: 8;
@include small{ @include small {
display: block; display: block;
} }
} }
.post-avatars{ .post-avatars {
order: 6; order: 6;
@include small{ @include small {
display: none;
}
}
.show-actions{
.post-content{
display: none; display: none;
} }
.post-share, .post-discuss, .post-upvote{ }
.show-actions {
.post-content {
display: none;
}
.post-share,
.post-discuss,
.post-upvote {
flex-grow: 1; flex-grow: 1;
display: block; display: block;
} }
} }
.action-label{ .action-label {
@include small{ @include small {
display: block; display: block;
} }
} }
} }
// ------------------------------ posts-grid layout ------------------------------ // // ------------------------------ posts-grid layout ------------------------------ //
.posts-grid{ .posts-grid {
@include medium-large{ @include medium-large {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.post{ .post {
@include medium-large{ @include medium-large {
width: calc((100% - 20px)/3); width: calc((100% - 20px)/3);
margin-right: 10px; margin-right: 10px;
&:nth-of-type(3n){ &:nth-of-type(3n) {
margin-right: 0; margin-right: 0;
} }
} }
@ -160,7 +157,7 @@
padding: 0; padding: 0;
position: relative; position: relative;
padding-bottom: 40px; padding-bottom: 40px;
&:after{ &:after {
content: " "; content: " ";
display: block; display: block;
position: absolute; position: absolute;
@ -170,8 +167,8 @@
border-bottom: 1px solid $lightest-grey; border-bottom: 1px solid $lightest-grey;
} }
} }
.post-rank{ .post-rank {
span{ span {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
@ -188,142 +185,139 @@
// box-shadow: 0px 0px 2px white(0.5); // box-shadow: 0px 0px 2px white(0.5);
} }
} }
.post-upvote{ .post-upvote {
position: absolute; position: absolute;
left: 3px; left: 3px;
bottom: 3px; bottom: 3px;
} }
.post-content{ .post-content {
display: block; display: block;
} }
.post-thumbnail{ .post-thumbnail {
margin-right: 0px; margin-right: 0px;
a{ a {
width: 100%; width: 100%;
} }
} }
.post-info{ .post-info {
padding: 10px; padding: 10px;
} }
.no-thumbnail .post-info{ .no-thumbnail .post-info {
padding-right: 35px; padding-right: 35px;
} }
.post-avatars{ .post-avatars {
position: absolute; position: absolute;
right: 48px; right: 48px;
bottom: 0px; bottom: 0px;
padding: 8px 0px; padding: 8px 0px;
} }
.post-discuss{ .post-discuss {
position: absolute; position: absolute;
right: 8px; right: 8px;
bottom: 0px; bottom: 0px;
padding: 8px 0px 2px 0px; padding: 8px 0px 2px 0px;
} }
} }
// -------------------------------- post modules --------------------------------- // // -------------------------------- post modules --------------------------------- //
.post-module.post-rank{ .post-module.post-rank {
margin: 0; margin: 0;
} }
.post-upvote {
.post-upvote{ .upvote-link {
.upvote-link{
position: relative; position: relative;
// top: 17px; // top: 17px;
// transform: translateY(-50%); // transform: translateY(-50%);
display: block; display: block;
text-align: center; text-align: center;
i{ i {
opacity: 0.4; opacity: 0.4;
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
border: 1px solid rgba($red, 0.3); border: 1px solid rgba($red,
font-size:10px; 0.3);
font-size: 10px;
width: 24px; width: 24px;
height: 24px; height: 24px;
text-align:center; text-align: center;
// line-height:$grid-unit; // line-height: $grid-unit;
color:rgba($red, 0.8); color: rgba($red,
text-shadow:0px 1px 0px white; 0.8);
text-shadow: 0px 1px 0px white;
line-height: 2.3; line-height: 2.3;
margin: 5px; margin: 5px;
&:before{ &:before {
top: 0px; top: 0px;
} }
&.icon-check{ &.icon-check {
display:none; display: none;
} }
} }
.action-label{ .action-label {
display:none; display: none;
} }
&.not-voted:hover{ &.not-voted:hover {
i{ i{opacity: 1;
opacity: 1; text-shadow: none;
text-shadow:none;
} }
} }
&.voted{ &.voted {
cursor:default; cursor: default;
i.icon-up{ i.icon-up {
display:none; display: none;
} }
i.icon-check{ i.icon-check {
border: 1px solid rgba($blue, 0.6); border: 1px solid rgba($blue, 0.6);
display: inline-block; display: inline-block;
color:rgba($blue, 0.8); color: rgba($blue, 0.8);
opacity: 0.5; opacity: 0.5;
} }
} }
} }
} }
.post-content {
.post-content{
min-height: $grid-unit - 30px; min-height: $grid-unit - 30px;
.post-sticky{ .post-sticky {
display: block; display: block;
position: absolute; position: absolute;
right: -40px; right: -40px;
top: 16px; top: 16px;
font-size: 24px; font-size: 24px;
i{ i {
color: $light-text; color: $light-text;
} }
span{ span {
display: none; display: none;
} }
} }
} }
.post-avatars {
.post-avatars{ display: inline-block;
display: inline-block; display: flex;
display: flex; .author-avatar {
.author-avatar{ display: block;
display: block; }
} .post-commenters {
.post-commenters{ display: block;
display: block; border-left: 1px solid black(0.2);
border-left: 1px solid black(0.2); padding-left: 5px;
padding-left: 5px; }
} .avatar-link {
.avatar-link{ display: inline-block;
display: inline-block; margin-right: 5px;
margin-right: 5px; &:last-child {
&:last-child{ margin-right: 0px;
margin-right: 0px; }
} }
} .avatar {
.avatar{ display: inline-block;
display: inline-block; height: 24px;
height: 24px; width: 24px;
width: 24px; vertical-align: middle;
vertical-align: middle; }
}
} }
.post-author{ .post-author {
.avatar{ .avatar {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -331,22 +325,20 @@
margin-right: 5px; margin-right: 5px;
} }
} }
.post-discuss {
.post-discuss{ .action-label {
.action-label{
display: none; display: none;
} }
} }
.post-actions {
.post-actions{
display: none; display: none;
text-align: right; text-align: right;
a{ a {
display: block; display: block;
width: 36px; width: 36px;
height: 36px; height: 36px;
padding: 6px; padding: 6px;
span{ span {
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -360,126 +352,122 @@
} }
} }
} }
.post-share {
.post-share{
display: none; display: none;
} }
// -------------------------------- post content --------------------------------- // // -------------------------------- post content --------------------------------- //
.post-heading{ .post-heading {
margin-bottom: 3px; margin-bottom: 3px;
line-height: 1.2; line-height: 1.2;
.post-title{ .post-title {
@include small{ @include small {
font-size: 15px; font-size: 15px;
} }
@include medium-large{ @include medium-large {
font-size:18px; font-size: 18px;
} }
font-weight:normal; font-weight: normal;
&:visited{ &:visited {
color:$grey; color: $grey;
} }
} }
.post-domain{ .post-domain {
color:$light-text; color: $light-text;
@include small{ @include small {
font-size: 13px; font-size: 13px;
} }
@include medium-large{ @include medium-large {
font-size:14px; font-size: 14px;
} }
font-weight:normal; font-weight: normal;
} }
} }
.post-meta {
.post-meta{ font-size: 13px;
font-size:13px; color: $light-text;
color:$light-text; line-height: 1.5;
line-height:1.5; @include small {
@include small{
font-size: 11px; font-size: 11px;
line-height: 1.7; line-height: 1.7;
} }
a{ a {
&:link, &:visited, &:active{ &:link,
color:$medium-text; &:visited,
&:active {
color: $medium-text;
} }
&:hover{ &:hover {
color: $red; color: $red;
} }
} }
} }
.post-meta-item{ .post-meta-item {
display: inline-block; display: inline-block;
} }
.post-body {
.post-body{
@extend .has-shadow; @extend .has-shadow;
border-radius: 3px; border-radius: 3px;
margin-bottom: 10px; margin-bottom: 10px;
background: white; background: white;
padding:20px; padding: 20px;
font-size:16px; font-size: 16px;
.list &{ .list & {
display:none; display: none;
} }
} }
.post.sticky {
.post.sticky{ background: $light-yellow;
background:$light-yellow;
} }
// -------------------------------- mobile view --------------------------------- // // -------------------------------- mobile view --------------------------------- //
@include small { @include small {
.posts{ .posts {
padding:0; padding: 0;
.post-rank{ .post-rank {
display:none; display: none;
} }
} }
.post{ .post {
.post-content{ .post-content {
margin-right:50px; margin-right: 50px;
margin-right:0px; margin-right: 0px;
// min-height:90px; // min-height: 90px;
.upvote-link{ .upvote-link {
width:30px; width: 30px;
} }
.post-info{ .post-info {
// margin-left:30px; // margin-left: 30px;
padding:13px 0; padding: 13px 0;
} }
.post-heading{ .post-heading {
.post-title{ .post-title {
display:block; display: block;
margin-bottom:4px; margin-bottom: 4px;
} }
.post-domain{ .post-domain {
display:block; display: block;
margin-bottom:4px; margin-bottom: 4px;
font-size:13px; font-size: 13px;
} }
} }
.post-meta{ .post-meta {
font-size:11px; font-size: 11px;
.unit{ .unit {
font-size:0; font-size: 0;
&:after{ &:after {
font-size:12px; font-size: 12px;
content:"pts "; content: "pts ";
} }
} }
} }
} }
} }
} }
// -------------------------------- other --------------------------------- // // -------------------------------- other --------------------------------- //
.no-posts{ .no-posts {
padding: 20px; padding: 20px;
border: 1px solid black(0.1); border: 1px solid black(0.1);
font-size: 14px; font-size: 14px;
@ -488,65 +476,53 @@
margin-bottom: 10px; margin-bottom: 10px;
color: black(0.5); color: black(0.5);
} }
.empty-notice {
.empty-notice{ text-align: center;
text-align:center; padding: 10px 0;
padding:10px 0; &.edit-link {
} color: $red;
.action{
position:relative;
display:block;
padding:0;
text-align:center;
color:$light-text;
&.edit-link{
color:$red;
} }
&.share-link{ &.share-link {
color:$light-text; color: $light-text;
} }
&.discuss-link{ &.discuss-link {
color:$light-text; color: $light-text;
} }
&.more-link{ &.more-link {
color:$blue; color: $blue;
} }
&:hover{ &:hover {
&, .action{ &,
color:$red; .action {
color: $red;
} }
} }
&.voted{ &.voted {
color:white; color: white;
cursor: default; cursor: default;
} }
.points {
.points{ display: block;
display:block; font-size: 30px;
font-size:30px; line-height: 50px;
line-height:50px;
} }
} }
.more-button {
.more-button{
display: block; display: block;
width:100%; width: 100%;
height:$grid-unit; height: $grid-unit;
background:black(0.05); background: black(0.05);
text-align:center; text-align: center;
color:white; color: white;
line-height:$grid-unit; line-height: $grid-unit;
font-size:18px; font-size: 18px;
border-radius: 0px 0px 3px 3px; border-radius: 0px 0px 3px 3px;
text-shadow: 0px 1px 1px 0px black(0.25); text-shadow: 0px 1px 1px 0px black(0.25);
padding: 0px; padding: 0px;
&:hover{ &:hover {
background: black(0.15); background: black(0.15);
} }
} }
.module {
.module{
border-radius: 3px; border-radius: 3px;
} }