You are here

Home » API reference » Media Hero Slider 8.6

varbase-heroslider-media.component.css in Media Hero Slider 8.6

Same filename and directory in other branches
  1. 8.5 css/component/varbase-heroslider-media.component.css
/* Varbase Hero slider media style */
.varbase-heroslider-media .slick-slide .slide__caption {
  position: absolute;
  left: 0;
  bottom: 20%;
  top: auto;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
  transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
  transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
}
.varbase-heroslider-media .slick-slide .img-responsive {
  -webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}
.varbase-heroslider-media .slick-slide .unpublished {
  padding: 0;
  height: auto;
}
.varbase-heroslider-media .slick-active .slide__caption {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.varbase-heroslider-media .slick-active .img-responsive {
  webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.varbase-heroslider-media .node--type-varbase-heroslider-media.node--view-mode-full {
  position: relative;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {
  position: absolute;
  bottom: 7%;
  padding: 1.2em;
  z-index: 999;
  left: 0;
  right: 0;
  border: 0;
  display: flex;
  -webkit-flex: 1;
  /* Safari 6.1+ */
  -ms-flex: 1;
  /* IE 10 */
  flex-direction: row;
  align-items: center;
  align-content: left;
  justify-content: left;
  flex-flow: wrap;
}

File

css/component/varbase-heroslider-media.component.css
View source 
  1. /* Varbase Hero slider media style */

  2. .varbase-heroslider-media .slick-slide .slide__caption {

  3.   position: absolute;

  4.   left: 0;

  5.   bottom: 20%;

  6.   top: auto;

  7.   opacity: 0;

  8.   filter: alpha(opacity=0);

  9.   -webkit-transform: scale(0.95);

  10.   transform: scale(0.95);

  11.   -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  12.   transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  13.   transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  14.   transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  15. }

  16. .varbase-heroslider-media .slick-slide .img-responsive {

  17.   -webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  18.   transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  19.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  20.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  21.   -webkit-transform: scale(1.15);

  22.   transform: scale(1.15);

  23. }

  24. .varbase-heroslider-media .slick-slide .unpublished {

  25.   padding: 0;

  26.   height: auto;

  27. }

  28. .varbase-heroslider-media .slick-active .slide__caption {

  29.   opacity: 1;

  30.   filter: alpha(opacity=100);

  31.   -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  32.   transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  33.   transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  34.   transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  35.   -webkit-transform: scale(1);

  36.   transform: scale(1);

  37. }

  38. .varbase-heroslider-media .slick-active .img-responsive {

  39.   webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  40.   transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  41.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  42.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  43.   -webkit-transform: scale(1);

  44.   transform: scale(1);

  45. }

  46. .varbase-heroslider-media .node--type-varbase-heroslider-media.node--view-mode-full {

  47.   position: relative;

  48. }

  49. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {

  50.   position: absolute;

  51.   bottom: 7%;

  52.   padding: 1.2em;

  53.   z-index: 999;

  54.   left: 0;

  55.   right: 0;

  56.   border: 0;

  57.   display: flex;

  58.   -webkit-flex: 1;

  59.   /* Safari 6.1+ */

  60.   -ms-flex: 1;

  61.   /* IE 10 */

  62.   flex-direction: row;

  63.   align-items: center;

  64.   align-content: left;

  65.   justify-content: left;

  66.   flex-flow: wrap;

  67. }