diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
index 2f88a8d6ca2ce756184d5b027b07f963d7481f96..2b9b422fa4e9794720f58931977a833ce190a7d1 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.html
@@ -53,9 +53,14 @@
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>{{ selectedFormat.name }}</span>
- <span class="icon is-small">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <svg xmlns="http://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ </svg>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
@@ -86,9 +91,14 @@
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>{{ getProjectionLabel(selectedProjection.name) }}</span>
- <span class="icon is-small">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <svg xmlns="http://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ </svg>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
@@ -117,9 +127,14 @@
<span
*ngIf="selectedInsee">{{ selectedInsee ? selectedInsee.commune + ' - ' + selectedInsee.insee : ''}}</span>
<span *ngIf="!selectedInsee" i18n="@@dataset.resources.commune">Municipality</span>
- <span class="icon is-small">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <svg xmlns="http://www.w3.org/2000/svg" id="chevron" viewBox="0 0 15 9">
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ </svg>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
diff --git a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
index 4acbc9d414e0b61c4ffaf9ecfa167c77fa93ee04..8bbedd26ca48a97740cfbb2739edd8a7a66f7505 100644
--- a/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
+++ b/src/app/dataset-detail/components/dataset-api/resources-queryable/resource-queryable/resource-queryable.component.scss
@@ -150,15 +150,6 @@
word-break: break-all;
}
-.create-request-icon {
- svg {
- margin-right: 1.2rem;
- width: 16px;
- fill: grey;
- transform: rotate(-90deg);
- }
-}
-
.resource-download-icon {
padding: 0.5rem 0.4rem;
border: 1px solid $grey-super-light-color;
@@ -268,6 +259,11 @@ h3 {
/* stylelint-disable-next-line */
.dropdown-trigger .button {
justify-content: space-between;
+
+ svg {
+ width: 1rem;
+ height: 0.6rem;
+ }
}
.resource-title {
@@ -335,7 +331,8 @@ h3 {
.dropdown-trigger button,
.dropdown-menu,
.dropdown-content {
- width: unset;
+ // width: unset;
+ max-width: 350px;
}
}
diff --git a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html
index 9650d321eafa35c82458a94458892f80427bbf5c..486df2fd76214c1cb7f7f835b2c68556b4e1721a 100644
--- a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html
+++ b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.html
@@ -31,8 +31,15 @@
*ngIf="aggregation.subAggregations.length > 1 && aggregation.key !== 'ATMO Auvergne-Rhône-Alpes'">
<span class="icon is-small icon-toggle-sub"
(click)="subAreOpen[aggregation.key] = !subAreOpen[aggregation.key]">
- <i class="fas fa-angle-right" aria-hidden="true" *ngIf="!subAreOpen[aggregation.key]"></i>
- <i class="fas fa-angle-down" aria-hidden="true" *ngIf="subAreOpen[aggregation.key]"></i>
+ <svg [ngClass]="{'is-active': subAreOpen[aggregation.key]}" xmlns=" http://www.w3.org/2000/svg" id="chevron"
+ viewBox="0 0 15 9">
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ <path
+ d="M7.5 7.5c-.1 0-.3-.1-.4-.1l-6-6C1 1.1 1 .8 1.1.6s.5-.2.7 0l5.6 5.6L13 .6c.2-.2.5-.2.7 0s.2.5 0 .7l-6 6c.1.1-.1.2-.2.2z"
+ class="brandcolor" />
+ </svg>
</span>
<div class="field">
<input type="checkbox" (click)="changeFilter(aggregation)"
diff --git a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss
index fb15b48b9a20f9b4fc037619009401efc53d269d..51385c8d9ee1d7688a5eb81d57b808f7f080782b 100644
--- a/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss
+++ b/src/app/datasets/components/filter-list/filter-detail/filter-detail.component.scss
@@ -82,10 +82,19 @@ aside.is-active {
display: inline-block;
}
+
.icon-toggle-sub {
cursor: pointer;
- padding-right: 0.5rem;
- padding-left: 0.5rem;
+
+ svg {
+ width: 0.8rem;
+ height: 0.6rem;
+ transform: rotate(-90deg);
+ }
+
+ svg.is-active {
+ transform: rotate(0deg);
+ }
}
.no-sub {