Wikiviajes

Diferencia entre revisiones de «Usuario:Jorge Abellán/common.css»

Explorar historial interactivamente
← Ir a diferencia anteriorEdición siguiente →
Contenido eliminado Contenido añadido
mSin resumen de edición
mSin resumen de edición
Línea 104:
**************************************************/
 
/* body {
//variables
font-family: 'Poppins', sans-serif;
$slider-height: 500px;
font-weight: 400;
$text-block-width: 400px;
font-size: 17px;
 
$dark-font- color: #212121;
line-height: 1.4;
$accent-font-color: #CA9CE1;
} */
$light-font-color: #fff;
.container {
$text-overlay-color: #000;
width: 1100px;
$text-overlay-opacity: 0.6;
margin: 50px auto 0;
$slide-overlay-color: #fff;
$slide-overlay-opacity: 0.6;
 
//transitions and mixins
 
//transitions mixin
@mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
transition-property: $property;
transition-duration: $duration;
transition-timing-function: $timing;
transition-delay: $delay;
}
.container h1 {
 
font-size: 25px;
//position absolute mixin
text-align: center;
@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
position: absolute;
top: $top;
left: $left;
right: $right;
bottom: $bottom;
}
.container h1 span {
 
position: relative;
/*common styles !!!YOU DON'T NEED THEM */
font-family: 'Merienda', cursive;
body {
color: #ca9ce1;
font: {
family: 'Poppins', sans-serif;
weight: 400;
size: 17px;
}
color: $dark-font-color;
line-height: 1.4;
}
.container h1 span:after {
 
position: absolute;
.container {
widthleft: 1100px0;
bottom: -10px;
margin: 50px auto 0;
content: "~";
width: 100%;
h1 {
text-align: center;
font: {
size: 25px;
}
text-align: center;
span {
position: relative;
font: {
family: 'Merienda', cursive;
}
color: $accent-font-color;
&:after {
@include position-absolute($bottom: -10px, $left: 0);
content: "~";
width: 100%;
text-align: center;
}
}
}
.subheader {
text-align: center;
margin-top: 15px;
}
}
.container .subheader {
 
text-align: center;
.link {
displaymargin-top: flex15px;
justify-content: center;
width: 800px;
margin: 30px auto 0;
a {
@include transition-mix;
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 40px;
color: inherit;
font: {
size: inherit;
}
text-decoration: none;
&:hover {
color: $accent-font-color;
}
&:last-child {
margin-right: 0;
}
 
i {
color: $accent-font-color;
margin-right: 9px;
font-size: 30px;
}
}
}
 
.slider-containers {
width: 100%;
margin-top: 60px;
}
.link {
 
display: flex;
.slider-container {
justify-content: center;
margin-bottom: 60px;
width: 800px;
margin: 30px auto 0;
h2 {
text-align: center;
}
}
.link a {
 
transition-property: all;
.flexbox-slider {
transition-duration: 0.2s;
margin-top: 50px;
transition-timing-function: linear;
transition-delay: 0s;
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 40px;
color: inherit;
font-size: inherit;
text-decoration: none;
}
.link a:hover {
color: #ca9ce1;
}
.link a:last-child {
margin-right: 0;
}
.link a i {
color: #ca9ce1;
margin-right: 9px;
font-size: 30px;
}
.slider-containers {
width: 100%;
margin-top: 60px;
}
.slider-container {
margin-bottom: 60px;
}
.slider-container h2 {
text-align: center;
}
.flexbox-slider {
margin-top: 50px;
}
 
/*slide styles !!!YOU NEED THEM */
.flexbox-slider {
display: flex;
width: 100%;
height: $slider-height500px;
visibility: hidden;
}
.flexbox-slider .flexbox-slide {
@include transition-mix($durationproperty: .3s)all;
transition-duration: 0.3s;
transition-timing-function: linear;
width: 20%;
transition-delay: 0s;
height: 100%;
width: 20%;
position: relative;
height: 100%;
overflow: hidden;
position: relative;
cursor: pointer;
overflow: hidden;
visibility: visible;
cursor: pointer;
visibility: visible;
//overlay
}
&:after {
.flexbox-slider .flexbox-slide:after {
@include position-absolute($top: 0, $left: 0);
position: absolute;
content: "";
top: 0;
display: block;
widthleft: 100%0;
content: "";
height: 100%;
display: block;
background-color: rgba($slide-overlay-color, $slide-overlay-opacity);
width: 100%;
z-index: 2;
height: 100%;
background-color: rgba(255, 255, 255, 0.6);
opacity: 0;
z-index: 2;
}
opacity: 0;
}
img {
.flexbox-slider .flexbox-slide img {
@include position-absolute($top: 50%, $left: 50%);
position: absolute;
height: auto;
widthtop: auto50%;
min-widthleft: 10050%;
min-height: 100%auto;
width: auto;
transform: translate(-50%, -50%);
zmin-indexwidth: 1100%;
min-height: 100%;
}
transform: translate(-50%, -50%);
z-index: 1;
.text-block {
}
@include position-absolute($bottom: 30px, $left: 30px);
.flexbox-slider max.flexbox-width:slide $.text-block-width; {
position: absolute;
padding: 20px;
left: 30px;
border-radius: 5px;
bottom: 30px;
background-color: rgba($text-overlay-color, $text-overlay-opacity);
max-width: 400px;
color: $light-font-color;
padding: 20px;
zborder-indexradius: 45px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
visibility: hidden;
opacityz-index: 04;
visibility: hidden;
opacity: 0;
h3 {
}
font: {
.flexbox-slider .flexbox-slide .text-block h3 {
size: 20px;
font-size: 20px;
weight: 700;
font-weight: 700;
}
}
}
.flexbox-slider:hover .flexbox-slide:hover {
}
flex-shrink: 0;
}
width: 80%;
&:hover {
.flexbox-slide:hover {
flex-shrink: 0;
width: 80%;
}
}
}
 
/* effect 1 styles */
.flexbox-slider.flexbox-slider-1 .flexbox-slide .text-block {
bottom: 60px;
}
.flexbox-slide {
.flexbox-slider.flexbox-slider-1:hover .flexbox-slide:hover .text-block {
transition-property: all;
.text-block {
transition-duration: 0.2s;
bottom: 60px;
transition-timing-function: linear;
}
transition-delay: 0.5s;
}
bottom: 30px;
opacity: 1;
&:hover {
visibility: visible;
.flexbox-slide:hover {
.text-block {
@include transition-mix($delay: .5s);
bottom: 30px;
opacity: 1;
visibility: visible;
}
}
}
}
 
/* effect 2 styles */
.flexbox-slider.flexbox-slider-2 .flexbox-slide .text-block {
left: -60px;
}
.flexbox-slide {
.flexbox-slider.flexbox-slider-2:hover .flexbox-slide:not(:hover):after {
transition-property: all;
.text-block {
transition-duration: 0.2s;
left: -60px;
transition-timing-function: linear;
}
transition-delay: 0s;
}
opacity: 1;
}
&:hover {
.flexbox-slider.flexbox-slider-2:hover .flexbox-slide:hover .text-block {
transition-property: all;
.flexbox-slide:not(:hover) {
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0, 0, 0, 1.82);
transition-delay: 0.5s;
&:after {
left: 30px;
@include transition-mix;
opacity: 1;
visibility: visible;
}
}
.flexbox-slide:hover {
.text-block {
@include transition-mix($delay: .5s, $timing: cubic-bezier(0, 0, 0, 1.82), $duration: .3s);
left: 30px;
opacity: 1;
visibility: visible;
}
}
}
}
 
/* effect 3 styles */
.flexbox-slider.flexbox-slider-3 .flexbox-slide:after {
transform: scale(0.5);
transform-origin: center center;
.flexbox-slide {
}
.flexbox-slider.flexbox-slider-3 .flexbox-slide .text-block {
&:after {
transform: scalerotate(.5-20deg);
}
transform-origin: center center;
.flexbox-slider.flexbox-slider-3:hover .flexbox-slide:hover:after {
}
transition-property: all;
transition-duration: 0.2s;
.text-block {
transition-timing-function: linear;
transform: rotate(-20deg);
transition-delay: 0.4s;
}
transform: scale(1);
}
opacity: 1;
visibility: visible;
&:hover {
}
.flexbox-slider.flexbox-slider-3:hover .flexbox-slide:hover .text-block {
transition-property: all;
transition-duration: 0.2s;
&:after {
@include transition-mix($delaytiming-function: .4s)linear;
transition-delay: 0.6s;
transform: scale(1);
transform: rotate(0deg);
opacity: 1;
opacity: 1;
visibility: visible;
visibility: visible;
}
.text-block {
@include transition-mix($delay: .6s);
transform: rotate(0deg);
opacity: 1;
visibility: visible;
}
}
}
}
 
/* effect 4 styles */
.flexbox-slider.flexbox-slider-4 .flexbox-slide:after {
top: -100%;
}
.flexbox-slide {
.flexbox-slider.flexbox-slider-4 .flexbox-slide .text-block {
transform: scale(1.2);
&:after {
}
top: -100%;
.flexbox-slider.flexbox-slider-4:hover .flexbox-slide:not(:hover):after {
}
transition-property: all;
transition-duration: 0.2s;
.text-block {
transition-timing-function: linear;
transform: scale(1.2);
transition-delay: 0s;
}
top: }0;
opacity: 1;
visibility: visible;
&:hover {
}
.flexbox-slider.flexbox-slider-4:hover .flexbox-slide:not(:hover) .text-block {
transition-property: all;
transition-duration: 0.2s;
&:after {
@include transition-mixtiming-function: linear;
transition-delay: 0.5s;
top: 0;
transform: scale(1);
opacity: 1;
opacity: 1;
visibility: visible;
visibility: visible;
}
}
.flexbox-slide:hover {
.text-block {
@include transition-mix($delay: .5s);
transform: scale(1);
opacity: 1;
visibility: visible;
}
}
}
}
 
/* effect 5 styles */
.flexbox-slider.flexbox-slider-5 .flexbox-slide .text-block {
transform: scale(0.85);
}
.flexbox-slide {
.flexbox-slider.flexbox-slider-5:hover .flexbox-slide:hover .text-block {
transition-property: all;
.text-block {
transition-duration: 0.2s;
transform: scale(.85);
transition-timing-function: linear;
}
transition-delay: 0.7s;
}
transform: scale(1);
opacity: 1;
&:hover {
visibility: visible;
}
.flexbox-slide:hover {
.flexbox-slider.flexbox-slider-5:hover .flexbox-slide:hover:after {
transition-property: all;
.text-block {
@include transition-mix($delayduration: 0.7s)2s;
transition-timing-function: linear;
transform: scale(1);
transition-delay: 0.4s;
opacity: 1;
opacity: 1;
visibility: visible;
visibility: visible;
}
&:after {
@include transition-mix($delay: .4s);
opacity: 1;
visibility: visible;
}
}
}
}
Obtenido de «https://es.wikivoyage.org/wiki/Usuario:Jorge_Abellán/common.css»