File: /var/www/html/wpprm_old/wp-content/themes/ronneby/assets/less.lib/components/read-more-styles.less
/* Read More styles */
.dfd-module-readmore {
display: inline-block;
line-height: 1.3;
span, a {
display: inline-block;
}
.read-more-01,
.read-more-08,
.read-more-09 {
.box-name();
font-size: @box-name-font-size - 2;
text-transform: uppercase;
.transition(all .3s ease);
}
.read-more-01 {
color: @box-name-color;
padding-left: 0;
border-left: 0 solid transparent;
.transition(~"padding-left .3s ease, border-left-width .3s ease, border-left-color .3s ease");
&:hover {
padding-left: 15px;
border-left-width: 3px;
border-left-color: @third-site-light-color;
}
}
.read-more-02 {
@s: 20px;
.rel();
font-size: 0;
margin: 0;
width: 72px;
height: 15px;
span {
.abs();
top: 50%;
.block();
width: @s;
height: 2px;
background: @box-name-color;
.transform-origin(100% 0%);
.transition(all .3s ease);
&:nth-child(1) {
left: 0;
}
&:nth-child(2) {
left: 50%;
margin-left: -@s/2;
}
&:nth-child(3) {
right: 0;
}
}
&:hover {
span {
&:nth-child(1) {
left: 50%;
margin-left: -@s/2;
}
&:nth-child(2) {
width: @s/2;
margin-left: 0;
.rotate(45deg);
}
&:nth-child(3) {
width: @s/2;
right: 50%;
margin-right: -@s/2;
.rotate(-45deg);
}
}
}
}
.read-more-03 {
font-size: 0;
margin: 12px -4px 0 -4px;
span {
width: 8px;
height: 8px;
margin: 0 4px;
border-radius: 100%;
background: @box-name-color;
.transform(translateY(0));
&:nth-child(1) {
-webkit-transition: background .3s ease, -webkit-transform .3s ease 0s, transform .3s ease 0s;
-moz-transition: background .3s ease, -moz-transform .3s ease 0s;
-ms-transition: background .3s ease, -ms-transform .3s ease 0s;
-o-transition: background .3s ease, -o-transform .3s ease 0s;
transition: background .3s ease, transform .3s ease 0s;
}
&:nth-child(2) {
-webkit-transition: background .3s ease, -webkit-transform .3s ease .15s, transform .3s ease .15s;
-moz-transition: background .3s ease, -moz-transform .3s ease .15s;
-ms-transition: background .3s ease, -ms-transform .3s ease .15s;
-o-transition: background .3s ease, -o-transform .3s ease .15s;
transition: background .3s ease, transform .3s ease .15s;
}
&:nth-child(3) {
-webkit-transition: background .3s ease, -webkit-transform .3s ease .3s, transform .3s ease .3s;
-moz-transition: background .3s ease, -moz-transform .3s ease .3s;
-ms-transition: background .3s ease, -ms-transform .3s ease .3s;
-o-transition: background .3s ease, -o-transform .3s ease .3s;
transition: background .3s ease, transform .3s ease .3s;
}
}
&:hover {
span {
background: @third-site-light-color;
&:nth-child(1) {
.transform(translateY(-4px));
}
&:nth-child(2) {
.transform(translateY(-4px));
}
&:nth-child(3) {
.transform(translateY(-4px));
}
}
}
}
.read-more-04 {
overflow: hidden;
padding: 0 7px;
span {
.rel();
width: 4px;
height: 12px;
margin-left: 5px;
left: 0;
background: @third-site-dark-color;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
.transition(~"left .3s ease, background .3s ease");
}
&:hover {
span {
background: @third-site-light-color;
&:nth-child(1) {
left: -2px;
}
&:nth-child(2) {
}
&:nth-child(3) {
left: 2px;
}
}
}
}
.read-more-05 {
.rel();
overflow: hidden;
white-space: nowrap;
span {
.link-style();
.link-decoration();
top: -5px;
&:hover {
color: @link-color;
}
}
i {
font-size: 20px;
.transition(margin .3s ease);
&:first-child {
margin-left: 0;
margin-right: 10px;
}
&:last-child {
margin-left: 10px;
margin-right: -22px;
}
}
&:hover {
i {
&:first-child {
margin-left: -22px;
}
&:last-child {
margin-right: 0;
}
}
}
}
.read-more-06 {
overflow: hidden;
i {
font-size: 26px;
color: transparent;
text-shadow: -30px 0 0 @third-site-light-color, 0 0 0 @box-name-color;
.transition(text-shadow .3s ease);
}
&:hover {
i {
text-shadow: 0 0 0 @third-site-light-color, 30px 0 0 @box-name-color;
}
}
}
.read-more-07 {
width: 38px;
height: 38px;
line-height: 38px;
text-align: center;
border-radius: 100%;
i {
position: relative;
right: -1px;
color: @box-name-color;
font-size: 12px;
text-shadow: 0 0 0 transparent, 0 0 0 transparent;
.transition(~"right .3s ease, text-shadow .3s ease");
}
&:hover {
i {
right: -11px;
text-shadow: -10px 0 0 @box-name-color, -20px 0 0 @box-name-color;
}
}
}
.read-more-08 {
.default-button();
}
.read-more-09 {
&:hover {
color: @third-site-light-color;
}
}
.read-more-10 {
.block();
width: 40px;
height: 7px;
.rel();
margin-top: -20px;
> span {
display: block;
width: 10px;
height: 1px;
.abs();
top: 3px;
left: 50%;
margin-left: -5px;
background: transparent;
&:before,
&:after {
content: "";
.block();
width: 10px;
height: 1px;
.abs();
top: 0;
left: 0;
.transform(rotate(0deg));
}
&:before {
background: rgba(40,38,43,0.3);
-webkit-transition: -webkit-transform .3s ease, background .3s linear;
-moz-transition: -moz-transform .3s ease, background .3s linear;
-o-transition: -o-transform .3s ease, background .3s linear;
transition: transform .3s ease, background .3s linear;
}
&:after {
background: transparent;
-webkit-transition: -webkit-transform .3s ease, background .3s linear .2s;
-moz-transition: -moz-transform .3s ease, background .3s linear .2s;
-o-transition: -o-transform .3s ease, background .3s linear .2s;
transition: transform .3s ease, background .3s linear .2s;
}
&:first-child {
left: 0;
margin-left: 0;
}
&:last-child {
left: auto;
right: 0;
margin-left: 0;
}
}
&:hover {
> span {
&:before {
.transform(rotate(-45deg));
}
&:after {
background: rgba(40,38,43,0.3);
.transform(rotate(45deg));
-webkit-transition: -webkit-transform .3s ease, background 0s linear .05s;
-moz-transition: -moz-transform .3s ease, background 0s linear .05s;
-o-transition: -o-transform .3s ease, background 0s linear .05s;
transition: transform .3s ease, background 0s linear .05s;
}
}
}
}
}
/* Hover styles */
.more-hover {
.dfd-module-readmore {
> * {
opacity: 0;
.transform(translateY(110%));
.transition(~"all .3s ease");
}
}
&:hover {
.dfd-module-readmore {
> * {
.opacity(1);
.transform(translateY(0));
}
}
}
}