From: Radek Czajka Date: Tue, 19 Feb 2013 11:15:17 +0000 (+0100) Subject: change carousel layout X-Git-Url: https://git.mdrn.pl/edumed.git/commitdiff_plain/6aaefb7a6792715d2db6767b15d22f9c90337816?ds=sidebyside;hp=308d11aa1622eea40bfc572564f28be42e262944 change carousel layout --- diff --git a/catalogue/static/catalogue/css/carousel.css b/catalogue/static/catalogue/css/carousel.css index 49fe461..f5737ec 100644 --- a/catalogue/static/catalogue/css/carousel.css +++ b/catalogue/static/catalogue/css/carousel.css @@ -28,23 +28,27 @@ background: url(/static/catalogue/img/carousel-left.png) 100% 0 no-repeat; background-size: 4.375em 100%; } #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note { + position: relative; height: 100%; - margin-left: 50%; - background-color: black; color: white; - opacity: 0.6; - background-image: url(/static/catalogue/img/carousel-left.png); - background-position: 100% 0; - background-repeat: no-repeat; - background-size: 4.375em 100%; } + margin-top: 12em; } + #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p:before { + content: " "; + display: block; + position: absolute; + height: 100%; + width: 100%; + z-index: -1; + background-color: black; + opacity: 0.6; } #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p { - padding: 6em 2em 0 1.6em; margin: 0; } #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p em { - display: block; + margin: 0 .2em 0 .5em; font-style: normal; font-size: 1.5em; } #catalogue-carousel #catalogue-carousel-links li a .catalogue-carousel-note p strong { + margin-left: .5em; font-size: 2em; } #catalogue-carousel #catalogue-carousel-switcher { margin: 0; diff --git a/catalogue/static/catalogue/css/carousel.scss b/catalogue/static/catalogue/css/carousel.scss index aa69028..2885fac 100755 --- a/catalogue/static/catalogue/css/carousel.scss +++ b/catalogue/static/catalogue/css/carousel.scss @@ -37,25 +37,31 @@ $ciemny: #363a3e; background-size: 70*$px 100%; .catalogue-carousel-note { + position: relative; height: 100%; - margin-left: 50%; - background-color: black; color: white; - opacity: 0.6; - background-image: url(/static/catalogue/img/carousel-left.png); - background-position: 100% 0; - background-repeat: no-repeat; - background-size: 70*$px 100%; + margin-top: 12em; + + p:before { + content: " "; + display: block; + position: absolute; + height: 100%; + width: 100%; + z-index: -1; + background-color: black; + opacity: 0.6; + } p { - padding: 6em 2em 0 1.6em; margin: 0; em { - display: block; + margin: 0 .2em 0 .5em; font-style: normal; font-size: 1.5em; } strong { + margin-left: .5em; font-size: 2em; }