From d2e532bf2589649d4c3b3d3d9ab549c44f7b7773 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alex=20Arag=C3=B3n?= Date: Tue, 6 Nov 2018 12:07:02 -0500 Subject: [PATCH] new accordion design - refs #2681 --- assets/css/base.css | 9 +- assets/css/scss/_base.scss | 95 +++++++++++++++++-- assets/css/scss/_variables.scss | 4 +- .../themes/chamilo/images/logo_chamilo.svg | 14 +-- .../default/course_home/activity.html.twig | 10 +- 5 files changed, 106 insertions(+), 26 deletions(-) diff --git a/assets/css/base.css b/assets/css/base.css index b555ea554a..a49e7ffc8f 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -10,7 +10,10 @@ Version: 1.0 */ -/*------------------------------*/ + + + + .admin-block-version { font-size: 12px; padding: 5%; @@ -4547,13 +4550,9 @@ i.size-32.icon-new-work { .top-mediapost .msg-content p, .sub-mediapost .rep-post .msg-content p { - /* border-top:1px solid #ECF0F1; */ - /* padding-top: 10px; */ - /* padding-bottom: 20px; */ margin-top: 5px; margin-bottom: 20px; line-height: 22px; - /* padding-left: 10px; */ padding-right: 10px; color: #666666; } diff --git a/assets/css/scss/_base.scss b/assets/css/scss/_base.scss index 27b18a621e..05a03ade77 100644 --- a/assets/css/scss/_base.scss +++ b/assets/css/scss/_base.scss @@ -424,6 +424,9 @@ footer { border-radius: 2px; .card-body{ padding: 1.88rem 1.81rem; + @include landscape($breakpoint-sm) { + padding: 0; + } } } /* CATEGORY CLASSIC */ @@ -614,17 +617,90 @@ footer { } } } +/******************* Accordion B4 *****************/ -.course-accordion{ - .card-header{ +.accordion-b4 { + .card { + border: 0 none; + box-shadow: none; + } + .card-header { padding: 0; - background-color: $default-white; - .btn-link{ - display: inline-block; - width: 100%; + background: #fff; + border: none; + } + .card-title a { + display: block; + position: relative; + background: transparent; + color: $menu-background; + font-size: 14px; + font-weight: bolder; + text-transform: uppercase; + margin-bottom: 15px; + padding: 15px 50px; + border-bottom: 2px solid $menu-background; + border-radius: 0 15px 0 15px; + transition: all 0.10s linear 0s; + cursor: pointer; + &.collapsed { + color: #808080; + border-bottom: 1px solid #d3d3d3; + margin: 0; + } + i { + color: $menu-background; + position: absolute; + top: 15px; + left: 20px; + font-size: 20px; + } + &:before { + content: ""; + position: absolute; + bottom: -15px; + left: 36px; + border: 7px solid transparent; + border-top: 7px solid $menu-background; + } + &.collapsed { + &:before { + content: ""; + position: absolute; + bottom: -15px; + left: 36px; + border: 0 none; + } + &:hover { + color: #6a6060; + } + } + &:after { + content: "\f106"; + font-family: "Font Awesome 5 Free", serif; + font-weight: 900; + color: $menu-secondary; + font-size: 20px; + line-height: 20px; + position: absolute; + top: 18px; + right: 25px; + } + &.collapsed:after { + font-family: "Font Awesome 5 Free", serif; + font-weight: 900; + font-size: 20px; + line-height: 20px; + position: absolute; + top: 18px; + right: 25px; + content: "\f107"; + color: #808080; } } - .card-body{ + .card-body { + border-top: 0 none; + color: #808080; .tools{ width: 160px; height: 160px; @@ -640,7 +716,7 @@ footer { height: 84px; top: 40%; margin-top: -50px; - left: 40%; + left: 44%; margin-left: -32px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.125) ; @@ -649,7 +725,7 @@ footer { img{ transition: transform .2s ease-in; &:hover{ - transform: scale(0.85); + transform: scale(1.15); } } a{ @@ -668,3 +744,4 @@ footer { } } } + diff --git a/assets/css/scss/_variables.scss b/assets/css/scss/_variables.scss index b67b3cda7b..738809c03b 100644 --- a/assets/css/scss/_variables.scss +++ b/assets/css/scss/_variables.scss @@ -43,9 +43,11 @@ $default-link : rgb(0, 153, 255); // --------------------------------------------------------- // COLORS PAGE // --------------------------------------------------------- +// linear-gradient(120deg, #00a5e4, #4a71d0); $page-background : #ffffff; -$menu-background :linear-gradient(120deg, #00a5e4, #4a71d0); +$menu-background : #4a71d0; +$menu-secondary : #ff3c7e; $sidebar-link : #54667A; $sidebar-bg : #FFFFFF; $sidebar-focus : rgba(0, 0, 0, 0.07); diff --git a/assets/css/themes/chamilo/images/logo_chamilo.svg b/assets/css/themes/chamilo/images/logo_chamilo.svg index 35418f8c04..d99fec7d77 100644 --- a/assets/css/themes/chamilo/images/logo_chamilo.svg +++ b/assets/css/themes/chamilo/images/logo_chamilo.svg @@ -9,7 +9,7 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="190" + width="205" height="64" id="svg3034" version="1.1" @@ -25,14 +25,14 @@ inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="3.3976798" - inkscape:cx="82.614165" + inkscape:cx="90.266446" inkscape:cy="10.778402" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" - inkscape:window-width="1319" + inkscape:window-width="1366" inkscape:window-height="713" - inkscape:window-x="47" + inkscape:window-x="0" inkscape:window-y="27" inkscape:window-maximized="1" showguides="false" /> @@ -44,7 +44,7 @@ image/svg+xml - + @@ -62,7 +62,7 @@ y="988.36218" /> + transform="matrix(0.20546527,0,0,0.20546527,-15.452839,848.85023)"> -
+
{% for block in blocks %}
{% if block.title %} - +
+ + {{ block.title }} + +
{% endif %}