grenoble-metropole: fix forms categories display (#30078)
This commit is contained in:
parent
a9a0947f1b
commit
24ddddcaf2
|
|
@ -291,87 +291,85 @@ div.menucell ul > li, div.links-list ul > li {
|
|||
width: 100%;
|
||||
margin: 1.3ex 0;
|
||||
@each $category in (administration, dechets, eau_potable, eaux_usees, economie, logement, rh, solidarite, urbanisme, voirie, autres-questions, deplacements, environnement, participation, proxi-communes) {
|
||||
&.#{$category} > div > div {
|
||||
&.on h2:first-child {
|
||||
color: $primary-color;
|
||||
&::before {
|
||||
background-image: url("img/#{$category}-hover.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0.5rem center;
|
||||
background-size: 1.8rem;
|
||||
&.#{$category} {
|
||||
&.foldable {
|
||||
> div h2:first-child {
|
||||
padding-left: 3rem;
|
||||
@include vendor-prefix(transform, scaleX(1));
|
||||
color: $primary-color;
|
||||
&::before {
|
||||
background-image: url("img/#{$category}-hover.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0.5rem center;
|
||||
background-size: 1.8rem;
|
||||
@include vendor-prefix(transform, scaleX(1));
|
||||
}
|
||||
@extend %hover-animation;
|
||||
}
|
||||
}
|
||||
h2:first-child {
|
||||
background-image: url("img/#{$category}.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0.5rem center;
|
||||
background-size: 1.8rem;
|
||||
padding-left: 3rem;
|
||||
&:hover::before {
|
||||
background-image: url("img/#{$category}-hover.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0.5rem center;
|
||||
background-size: 1.8rem;
|
||||
padding-left: 3rem;
|
||||
&.folded {
|
||||
> div h2:first-child {
|
||||
background-image: url("img/#{$category}.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0.5rem center;
|
||||
background-size: 1.8rem;
|
||||
padding-left: 3rem;
|
||||
&::before {
|
||||
background-image: url("img/#{$category}-hover.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0.5rem center;
|
||||
background-size: 1.8rem;
|
||||
}
|
||||
@extend %hover-animation;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> div {
|
||||
&.foldable {
|
||||
> div {
|
||||
h2:first-child {
|
||||
font-family: Roboto !important;
|
||||
font-size: 1.1rem;
|
||||
font-weight: normal;
|
||||
background-color: $primary-color;
|
||||
box-shadow: 0px 0px 10px #888888;
|
||||
color: #000;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
background-color: #000000;
|
||||
color: $primary-color;
|
||||
&::before {
|
||||
@include vendor-prefix(transform, scaleX(1));
|
||||
}
|
||||
@extend %hover-animation;
|
||||
&:after {
|
||||
}
|
||||
> div {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
&.folded {
|
||||
> div h2:first-child {
|
||||
&::after {
|
||||
content: '\f105'; /* chevron-right */
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
position: absolute;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
position: relative;
|
||||
}
|
||||
z-index: 10;
|
||||
background: white;
|
||||
width: 100%;
|
||||
box-shadow: 0px 0px 5px #888888;
|
||||
left: 0;
|
||||
top: 0;
|
||||
li a {
|
||||
text-decoration: none;
|
||||
border-color: #edece7;
|
||||
padding-left: 1.5em;
|
||||
&:hover {
|
||||
background: #f2f2f0;
|
||||
}
|
||||
&::after {
|
||||
content: '\f105'; /* fa-angle-right */
|
||||
font-family: FontAwesome;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
position: relative;
|
||||
}
|
||||
z-index: 10;
|
||||
background: white;
|
||||
width: 100%;
|
||||
box-shadow: 0px 0px 5px #888888;
|
||||
li a {
|
||||
text-decoration: none;
|
||||
border-color: #edece7;
|
||||
padding-left: 1.5em;
|
||||
&:hover {
|
||||
background: #f2f2f0;
|
||||
}
|
||||
&::after {
|
||||
content: '\f105'; /* fa-angle-right */
|
||||
font-family: FontAwesome;
|
||||
position: absolute;
|
||||
left: 0.7em;
|
||||
top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.on {
|
||||
h2:first-child {
|
||||
&:after {
|
||||
content: '\f107';
|
||||
}
|
||||
}
|
||||
ul {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0.7em;
|
||||
top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
$(function() {
|
||||
$('#main-content-wrapper').delegate('div.wcsformsofcategorycell h2', 'click', function() {
|
||||
var parent_classes = $(this).parent().attr('class').split(' ');
|
||||
var parent_classes_selector = parent_classes.join('.');
|
||||
$('div.wcsformsofcategorycell div div:not(".' + parent_classes_selector + '")').removeClass('on');
|
||||
$(this).parent().toggleClass('on');
|
||||
return false;
|
||||
});
|
||||
// mark "Services" link as selected
|
||||
$("a[title='Services']").parents().addClass("selected");
|
||||
if (document.body.attributes['data-picture']) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue