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