mirror of
https://github.com/vale981/Vulcan
synced 2025-03-10 12:36:39 -04:00
448 lines
No EOL
6.8 KiB
SCSS
448 lines
No EOL
6.8 KiB
SCSS
// modules layout
|
|
.posts{
|
|
// display: table;
|
|
// border-collapse: collapse;
|
|
width: 100%;
|
|
position: relative;
|
|
.single-post &{
|
|
margin-bottom: 10px;
|
|
.post{
|
|
border-radius: 3px;
|
|
display: block;
|
|
@extend .has-shadow;
|
|
}
|
|
}
|
|
}
|
|
.post{
|
|
// display: table-row;
|
|
.modules-group{
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
.inner{
|
|
@include flex();
|
|
@include align-items(center);
|
|
}
|
|
.cell{
|
|
// display: table-cell;
|
|
// vertical-align: middle;
|
|
margin-right: $grid-margin;
|
|
@include medium-large{
|
|
@include flex-shrink(0);
|
|
}
|
|
}
|
|
}
|
|
.left-modules{
|
|
.inner{
|
|
margin-left: $grid-margin;
|
|
}
|
|
@include small{
|
|
.inner{
|
|
display: block;
|
|
}
|
|
margin-right: $grid-margin;
|
|
|
|
}
|
|
@include medium-large{
|
|
|
|
}
|
|
}
|
|
.center-modules{
|
|
width: 100%;
|
|
@include small{
|
|
.inner{
|
|
display: block;
|
|
}
|
|
}
|
|
.cell{
|
|
@include medium-large{
|
|
@include flex-shrink(1);
|
|
}
|
|
}
|
|
}
|
|
.right-modules{
|
|
@include small{
|
|
display: none;
|
|
background: #333;
|
|
padding: 10px;
|
|
&.visible{
|
|
display: block;
|
|
}
|
|
.inner{
|
|
@include justify-content(center);
|
|
}
|
|
.cell{
|
|
@include flex-grow(1);
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
}
|
|
@include medium-large{
|
|
.inner{
|
|
@include justify-content(flex-end);
|
|
}
|
|
}
|
|
.cell{
|
|
&:last-child{
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
}
|
|
.post-content{
|
|
@include small{
|
|
@include flex-grow(1);
|
|
flex: 1;
|
|
}
|
|
@include medium-large{
|
|
@include flex-shrink(1 !important);
|
|
}
|
|
}
|
|
// display: flex;
|
|
// display: -webkit-flex;
|
|
// display: -moz-flex;
|
|
// .leftmost{
|
|
// @include order(1);
|
|
// @include flex-grow(1);
|
|
// // width: 1px;
|
|
// }
|
|
// .left{
|
|
// @include order(2);
|
|
// @include flex-grow(1);
|
|
// // width: 1px;
|
|
// }
|
|
// .center{
|
|
// @include order(3);
|
|
// @include flex-grow(30);
|
|
// // width: 1px;
|
|
// }
|
|
// .right{
|
|
// @include order(4);
|
|
// @include flex-grow(1);
|
|
// // width: 1px;
|
|
// }
|
|
// .rightmost{
|
|
// @include order(5);
|
|
// @include flex-grow(1);
|
|
// // width: 1px;
|
|
// }
|
|
}
|
|
|
|
.post-actions{
|
|
display: none;
|
|
text-align: right;
|
|
@include flex-shrink(1);
|
|
padding-right: 5px;
|
|
@include small{
|
|
display: block;
|
|
}
|
|
a{
|
|
display: block;
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 6px;
|
|
span{
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 3px;
|
|
border: 1px solid rgba($red, 0.3);
|
|
color: rgba($red, 0.8);
|
|
text-align: center;
|
|
line-height: 10px;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.post-upvote{
|
|
.upvote-link{
|
|
position: relative;
|
|
// top: 17px;
|
|
// transform: translateY(-50%);
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 6px;
|
|
display: block;
|
|
text-align: center;
|
|
i{
|
|
display: block;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba($red, 0.3);
|
|
font-size:10px;
|
|
height:100%;
|
|
width:100%;
|
|
text-align:center;
|
|
// line-height:$grid-unit;
|
|
color:rgba($red, 0.8);
|
|
text-shadow:0px 1px 0px white;
|
|
line-height: 2.2;
|
|
&.icon-check{
|
|
display:none;
|
|
}
|
|
}
|
|
span{
|
|
display:none;
|
|
}
|
|
&.not-voted:hover{
|
|
i{
|
|
background: rgba($red, 0.1);
|
|
color:$red;
|
|
text-shadow:none;
|
|
}
|
|
}
|
|
&.voted{
|
|
cursor:default;
|
|
i.icon-up{
|
|
display:none;
|
|
}
|
|
i.icon-check{
|
|
border: 1px solid rgba($blue, 0.6);
|
|
display: block;
|
|
color:rgba($blue, 0.8);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-meta-item{
|
|
display: inline;
|
|
&:after{
|
|
content: ",";
|
|
}
|
|
&:last-child:after{
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
.empty-notice{
|
|
text-align:center;
|
|
padding:10px 0;
|
|
}
|
|
.posts-wrapper{
|
|
@extend .has-shadow;
|
|
border-radius: 3px;
|
|
}
|
|
.post{
|
|
position:relative;
|
|
width:100%;
|
|
background: white;
|
|
border-bottom:1px solid $lightest-grey;
|
|
&:first-child{
|
|
border-radius: 3px 3px 0px 0px;
|
|
}
|
|
&:last-child{
|
|
border: none;
|
|
}
|
|
&.animate{
|
|
@include single-transition(ease-out, top, 400ms, 0ms);
|
|
}
|
|
&.inactive{
|
|
.post-content{
|
|
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQYV2NkIALMnDlTkpGQOpCi9PT053gVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQC5OyXvW/4BHwAAAABJRU5ErkJggg==');
|
|
}
|
|
}
|
|
}
|
|
.post-rank{
|
|
position: relative;
|
|
span{
|
|
position:absolute;
|
|
top:0px;
|
|
left:-60px;
|
|
display:block;
|
|
height:36px;
|
|
line-height:36px;
|
|
width:30px;
|
|
text-align:right;
|
|
font-size:18px;
|
|
// font-weight:bold;
|
|
color:black(0.2);
|
|
}
|
|
}
|
|
.post-info{
|
|
padding:$grid-padding - 2px 0;
|
|
}
|
|
.post-content{
|
|
min-height:$grid-unit - 30px;
|
|
.post-sticky{
|
|
display:block;
|
|
position:absolute;
|
|
right:-40px;
|
|
top:16px;
|
|
font-size:24px;
|
|
i{
|
|
color:$light-text;
|
|
}
|
|
span{
|
|
display:none;
|
|
}
|
|
}
|
|
}
|
|
.post-heading{
|
|
margin-bottom:3px;
|
|
@include small{
|
|
line-height: 1.5;
|
|
}
|
|
.post-title{
|
|
@include small{
|
|
font-size: 15px;
|
|
}
|
|
@include medium-large{
|
|
font-size:18px;
|
|
}
|
|
color:$text;
|
|
font-weight:normal;
|
|
&:visited{
|
|
color:$grey;
|
|
}
|
|
&:hover{
|
|
color:$red;
|
|
}
|
|
}
|
|
.post-domain{
|
|
color:$light-text;
|
|
@include small{
|
|
font-size: 13px;
|
|
}
|
|
@include medium-large{
|
|
font-size:14px;
|
|
}
|
|
font-weight:normal;
|
|
}
|
|
}
|
|
.post-categories{
|
|
text-align: right;
|
|
|
|
}
|
|
.post-category{
|
|
display:inline-block;
|
|
font-size:11px;
|
|
@include border-radius(3px);
|
|
background:#eee;
|
|
padding:0px 6px;
|
|
text-transform:uppercase;
|
|
font-weight:normal;
|
|
vertical-align:middle;
|
|
&:hover{
|
|
background:$red;
|
|
color:white;
|
|
}
|
|
}
|
|
.post-meta{
|
|
font-size:12px;
|
|
color:$light-text;
|
|
line-height:1.5;
|
|
}
|
|
|
|
.post-share, .post-discuss{
|
|
position: relative;
|
|
>a{
|
|
position:relative;
|
|
display:inline-block;
|
|
padding:0;
|
|
width:$grid-unit;
|
|
height:$grid-unit;
|
|
line-height:$grid-unit;
|
|
vertical-align:baseline;
|
|
text-align:center;
|
|
color:$light-text;
|
|
font-size:36px;
|
|
line-height:50px;
|
|
&.edit-link{
|
|
color:$red;
|
|
}
|
|
&.share-link{
|
|
color:$blue;
|
|
color:$yellow;
|
|
}
|
|
&.discuss-link{
|
|
color:$green;
|
|
}
|
|
&.more-link{
|
|
color:$blue;
|
|
}
|
|
&:hover{
|
|
&, .action{
|
|
color:$red;
|
|
}
|
|
}
|
|
&.voted{
|
|
background:$highlight-color;
|
|
color:white;
|
|
cursor: default;
|
|
.action{
|
|
color: #fff;
|
|
}
|
|
}
|
|
.count{
|
|
position:absolute;
|
|
top:12px;
|
|
display:block;
|
|
width:100%;
|
|
height:20px;
|
|
line-height:20px;
|
|
font-size:11px;
|
|
}
|
|
.points{
|
|
display:block;
|
|
font-size:30px;
|
|
line-height:50px;
|
|
}
|
|
.action{
|
|
display:block;
|
|
height:20px;
|
|
width:100%;
|
|
line-height:20px;
|
|
position:absolute;
|
|
bottom:5px;
|
|
left:0px;
|
|
font-size:13px;
|
|
color:$light-text;
|
|
pointer-events:none;
|
|
// color:$red;
|
|
}
|
|
}
|
|
}
|
|
.post-body{
|
|
@extend .has-shadow;
|
|
border-radius: 3px;
|
|
margin-bottom: 10px;
|
|
background: white;
|
|
padding:20px;
|
|
font-size:16px;
|
|
.list &{
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
.post.sticky{
|
|
background:$light-yellow;
|
|
}
|
|
|
|
.more-button{
|
|
a{
|
|
display: block;
|
|
width:100%;
|
|
height:$grid-unit;
|
|
background:black(0.075);
|
|
text-align:center;
|
|
color:white;
|
|
line-height:$grid-unit;
|
|
font-size:18px;
|
|
border-radius: 0px 0px 3px 3px;
|
|
text-shadow: 0px 1px 1px 0px black(0.25);
|
|
&:hover{
|
|
background: black(0.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
.inner-table{
|
|
display: table;
|
|
height: 100%;
|
|
}
|
|
.inner-table-cell{
|
|
display: table-cell;
|
|
vertical-align:middle;
|
|
} |