// 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 flex-shrink(0); } } .left-modules{ .inner{ margin-left: $grid-margin; } } .center-modules{ width: 100%; .cell{ @include flex-shrink(1); } } .right-modules{ .inner{ @include justify-content(flex-end); } } .post-content, .post-categories{ @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; // } } .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-upvote{ .upvote-link{ position: relative; // top: 17px; // transform: translateY(-50%); width: 24px; height: 24px; 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-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; .post-title{ font-size:18px; color:$text; font-weight:normal; line-height:1; &:visited{ color:$grey; } &:hover{ color:$red; } } .post-domain{ color:$light-text; 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: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; }