[ADD] theme 13.0
This commit is contained in:
Design
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,185 @@
|
||||
|
||||
@mixin s-latest-posts-js-get-posts-hook {
|
||||
.s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.effect-dexter .s_latest_posts_post {
|
||||
&::before {
|
||||
content: "";
|
||||
@include o-position-absolute(0, $grid-gutter-width/2, 0, $grid-gutter-width/2);
|
||||
background: linear-gradient(to bottom, darken(theme-color('beta'), 10%) 0%,darken(theme-color('beta'), 30%) 100%);
|
||||
}
|
||||
.thumb {
|
||||
transition: opacity 0.35s;
|
||||
}
|
||||
> div:not(.o_record_cover_container):not(.js-loading) {
|
||||
padding: 3em;
|
||||
text-align: left;
|
||||
&:after {
|
||||
@include o-position-absolute(auto, 2em, 2em, 2em);
|
||||
height: calc(50% - 2em);
|
||||
border: 2px solid #fff;
|
||||
content: "";
|
||||
transition: transform 0.35s;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
p {
|
||||
@include o-position-absolute(auto, 60px, 60px, 60px);
|
||||
opacity: 0;
|
||||
transition: e( "opacity 0.35s linear 0s, transform 0.35s linear 0s");
|
||||
-webkit-transform: translate3d(0,-100px,0);
|
||||
transform: translate3d(0,-100px,0);
|
||||
}
|
||||
&:hover {
|
||||
.thumb {
|
||||
opacity: 0.4!important;
|
||||
}
|
||||
> div:not(.o_record_cover_container):not(.js-loading)::after {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
p {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.effect-chico {
|
||||
.o_record_cover_image {
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
transform: scale(1.12);
|
||||
}
|
||||
.s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) {
|
||||
padding: 3em;
|
||||
&::before {
|
||||
@include o-position-absolute(7%, 7%, 7%, 7%);
|
||||
border: 1px solid #fff;
|
||||
content: "";
|
||||
transform: scale(1.1);
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
}
|
||||
}
|
||||
p {
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
margin: 10% auto 0 !important;
|
||||
max-width: 200px;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
h2 {
|
||||
padding: 0;
|
||||
}
|
||||
.s_latest_posts_post:hover {
|
||||
.o_record_cover_image {
|
||||
transform: scale(1);
|
||||
}
|
||||
> div:not(.o_record_cover_container):not(.js-loading)::before, p {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.effect-marley {
|
||||
.s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) {
|
||||
text-align: right;
|
||||
h2, p {
|
||||
@include o-position-absolute(auto, 30px, auto, 30px);
|
||||
padding: 10px 0;
|
||||
}
|
||||
p {
|
||||
bottom: 30px;
|
||||
line-height: 1.5;
|
||||
-webkit-transform: translate3d(0,100%,0);
|
||||
transform: translate3d(0,100%,0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
}
|
||||
h2 {
|
||||
top: 30px;
|
||||
-webkit-transition: -webkit-transform 0.35s;
|
||||
transition: transform 0.35s;
|
||||
-webkit-transform: translate3d(0,20px,0);
|
||||
transform: translate3d(0,20px,0);
|
||||
&:after {
|
||||
@include o-position-absolute(100%, auto, auto, 0);
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #fff;
|
||||
content: "";
|
||||
-webkit-transform: translate3d(0,40px,0);
|
||||
transform: translate3d(0,40px,0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.s_latest_posts_post:hover > div:not(.o_record_cover_container):not(.js-loading) {
|
||||
h2 {
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
h2::after, p {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.effect-steve .s_latest_posts_post {
|
||||
z-index: auto;
|
||||
&::before {
|
||||
content: "";
|
||||
@include o-position-absolute(0, $grid-gutter-width/2, 0, $grid-gutter-width/2);
|
||||
background: #000;
|
||||
}
|
||||
> div:not(.o_record_cover_container):not(.js-loading) {
|
||||
z-index: 1;
|
||||
}
|
||||
.thumb {
|
||||
opacity: 1;
|
||||
transition: transform 0.35s;
|
||||
transform: perspective(1000px) translate3d(0,0,0);
|
||||
}
|
||||
h2, p {
|
||||
background: #fff;
|
||||
color: #2d434e;
|
||||
}
|
||||
h2 {
|
||||
position: relative;
|
||||
margin-top: 0.1em;
|
||||
padding: 0.25em;
|
||||
&:before {
|
||||
box-shadow: 0 1px 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 1em !important;
|
||||
padding: 0.5em;
|
||||
font-weight: 800;
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
transform: scale3d(0.9,0.9,1);
|
||||
}
|
||||
&:hover {
|
||||
h2:before {
|
||||
opacity: 0;
|
||||
}
|
||||
.thumb {
|
||||
transform: perspective(1000px) translate3d(0,0,21px);
|
||||
}
|
||||
p {
|
||||
opacity: 1;
|
||||
transform: scale3d(1,1,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.first_is_big .s_latest_posts_post:first-child {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
// =============================
|
||||
// s_latest_posts_big_orizontal
|
||||
// =============================
|
||||
|
||||
.s_latest_posts_big_orizontal {
|
||||
.o_record_cover_container {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.js_get_posts {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
text-align: left;
|
||||
.s_latest_posts_post {
|
||||
//display: table-cell;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
figcaption:after {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
h4 {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding-right: 5%;
|
||||
&:before {
|
||||
content: "";
|
||||
z-index: 0;
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 20%;
|
||||
position: absolute;
|
||||
top: 49%;
|
||||
left: 0;
|
||||
border-bottom: 1px solid $body-color;
|
||||
}
|
||||
a {
|
||||
z-index: 1;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
padding-left: 25%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
padding-left: 24%;
|
||||
}
|
||||
> a {
|
||||
bottom: 0;
|
||||
display: block;
|
||||
background: theme-color('alpha');
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
> div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transform-origin: 50%;
|
||||
transition: all 400ms;
|
||||
backface-visibility: hidden;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: inline-block;
|
||||
margin-bottom: 2em;
|
||||
width: 50%;
|
||||
}
|
||||
@media only screen and (max-width : 480px) { // FIXME
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user