scss/toolkit/components/showcase.scss in titon-toolkit-1.2.2 vs scss/toolkit/components/showcase.scss in titon-toolkit-1.3.0
- old
+ new
@@ -17,23 +17,23 @@
z-index: $showcase-zindex;
opacity: 0;
visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
- @include transform(translateX(-50%) translateY(-50%));
- @include transition(opacity $showcase-transition, visibility $showcase-transition);
+ transform: translate(-50%, -50%);
+ transition: opacity $showcase-transition, visibility $showcase-transition;
- &.#{$state-is-prefix}loading,
- &.#{$state-is-prefix}single {
+ &.is-loading,
+ &.is-single {
.#{$vendor-prefix}showcase-prev,
.#{$vendor-prefix}showcase-next,
.#{$vendor-prefix}showcase-tabs {
display: none !important;
}
}
- &.#{$state-is-prefix}loading {
+ &.is-loading {
.#{$vendor-prefix}showcase-close {
display: none !important;
}
}
}
@@ -58,18 +58,18 @@
width: 100px;
height: 100px;
max-width: 1024px;
position: relative;
overflow: hidden;
- @include transition(width $showcase-transition, height $showcase-transition);
+ transition: width $showcase-transition, height $showcase-transition;
> li {
position: absolute;
top: 0;
left: 0;
opacity: 0;
- @include transition(opacity $showcase-transition);
+ transition: opacity $showcase-transition;
> img {
max-width: 100%;
width: 100%;
height: auto;
@@ -108,11 +108,11 @@
height: auto;
z-index: 5;
top: 50%;
background: none;
border: 0;
- @include transform(translateY(-50%)); // move up 50% of their height
+ transform: translateY(-50%); // move up 50% of their height
&:focus { outline: none; }
}
.#{$vendor-prefix}showcase-prev { left: $padding; }
@@ -120,7 +120,7 @@
.#{$vendor-prefix}showcase-tabs {
position: absolute;
top: ($padding * 2);
left: 50%;
- @include transform(translateX(-50%)); // move left 50% of their width
+ transform: translateX(-50%); // move left 50% of their width
}
\ No newline at end of file