diff --git a/css/app.css b/css/app.css index 27502f7d..042228b1 100644 --- a/css/app.css +++ b/css/app.css @@ -100,8 +100,22 @@ ul { color: #555; cursor: pointer; } -.uhk { - max-width: 100%; } +.keyboard-slider { + position: relative; + overflow: hidden; + width: 100%; + height: auto; } + .keyboard-slider .uhk__layer-wrapper { + width: 100%; + height: auto; + text-align: center; + position: absolute; + left: 100%; } + .keyboard-slider .uhk__layer-wrapper.current { + left: 0; } + .keyboard-slider .uhk__layer-wrapper .uhk { + max-width: 100%; + width: 98%; } .grip { position: relative; } @@ -116,14 +130,7 @@ ul { top: 50%; left: 7px; margin-top: -10px; } + .grip.btn-primary:before { + background-image: url(../images/grips/vertical.png); } .grip:hover:before { display: block; } - -.owl-carousel { - max-width: 991px; - margin: auto; } - -.owl-carousel .item img { - display: block; - width: 100%; - height: auto; } diff --git a/sass/app.scss b/sass/app.scss index bd79397b..8610fdef 100644 --- a/sass/app.scss +++ b/sass/app.scss @@ -167,8 +167,28 @@ ul { } } -.uhk { - max-width: 100%; +.keyboard-slider { + position: relative; + overflow: hidden; + width: 100%; + height: auto; + + .uhk__layer-wrapper { + width: 100%; + height: auto; + text-align: center; + position: absolute; + left: 100%; + + &.current { + left: 0; + } + + .uhk { + max-width: 100%; + width: 98%; + } + } } .grip { @@ -187,6 +207,12 @@ ul { margin-top: -10px; } + &.btn-primary { + &:before { + background-image: url(../images/grips/vertical.png); + } + } + &:hover { &:before { display: block;