diff --git a/nginx-staging.conf b/nginx-staging.conf
index 1871ae0bee1cc80894eeea201695355e62d705bc..ddabb09b2a76c5c1c62d44ce14c410f0d26b7af8 100644
--- a/nginx-staging.conf
+++ b/nginx-staging.conf
@@ -42,4 +42,21 @@ server {
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
+ location /wordpress/ {
+ #proxy_pass https://elastic2.recette.data.grandlyon.com/elastic/;
+ sub_filter 'http:\/\/192.168.62.15:8000\/' 'https:\/\/data-reloaded-rec.datalab.erasme.org\/wordpress\/';
+ sub_filter_once off;
+ sub_filter_types *;
+ proxy_pass http://192.168.62.15:8000/;
+ # proxy_set_header X-Real-IP $remote_addr;
+ # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ #proxy_set_header Host $http_host;
+ # proxy_set_header Host elastic.datalab.erasme.org;
+ # add_header 'Access-Control-Allow-Origin' '*';
+ # add_header 'Access-Control-Allow-Credentials' 'true';
+ # add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
+ # add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
+ }
+
+
}
diff --git a/webapp/.angular-cli.json b/webapp/.angular-cli.json
index 8310aa96c05fa2afd99b235933f74649a667ee41..862071be9ffc02a136894ecaed8fe4050f4c44fe 100644
--- a/webapp/.angular-cli.json
+++ b/webapp/.angular-cli.json
@@ -19,8 +19,7 @@
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
- "styles.scss",
- "theme.scss"
+ "styles.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 9557202aea1d40f8bcd875253179ff220a9cfd18..c1a489d6c1e492faed77b993cf74a4c39ebe5feb 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -1518,6 +1518,11 @@
"integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
"dev": true
},
+ "bulma": {
+ "version": "0.7.1",
+ "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.1.tgz",
+ "integrity": "sha512-wRSO2LXB+qI9Pyz2id+uZr4quz5aftSN7Ay1ysr1+krzVp3utD+Ci4CeKuZdrYGc800t65b7heXBL6qw2Wo/lQ=="
+ },
"bytes": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 2c81d58b4d1d0e68ab28ddc619f215b8ff5e7d7b..492ba6e7a439097974850e91f4067fc88a3cf99b 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -31,6 +31,7 @@
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
+ "bulma": "^0.7.1",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
diff --git a/webapp/src/app/_app-theme.component.scss b/webapp/src/app/_app-theme.component.scss
deleted file mode 100644
index 8dca1cc885387ac3e747efa12cf8ee548080e03c..0000000000000000000000000000000000000000
--- a/webapp/src/app/_app-theme.component.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import '~@angular/material/theming';
-
-@mixin app-app-theme($theme) {
- $primary: map-get($theme, primary);
- $foreground: map-get($theme, foreground);
- $warn: map-get($theme, warn);
-
- a {
- color: mat-color($warn, default);
- text-decoration: none;
- }
- a:hover, .active-link {
- color: mat-color($primary, default);
- }
-}
\ No newline at end of file
diff --git a/webapp/src/app/app.component.scss b/webapp/src/app/app.component.scss
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/webapp/src/app/app.component.ts b/webapp/src/app/app.component.ts
index 9a8db0f2fca323a5f868abb611301e0ce28de294..ead0de4491ac51c7a45cbf97c9f487cc61acc19e 100644
--- a/webapp/src/app/app.component.ts
+++ b/webapp/src/app/app.component.ts
@@ -2,8 +2,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss']
+ templateUrl: './app.component.html'
})
export class AppComponent {
}
diff --git a/webapp/src/app/core/components/footer/_footer-theme.component.scss b/webapp/src/app/core/components/footer/_footer-theme.component.scss
deleted file mode 100644
index 708152d7e3834c494d74d557cbbbaac361885b10..0000000000000000000000000000000000000000
--- a/webapp/src/app/core/components/footer/_footer-theme.component.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@mixin app-footer-theme($theme) {
- $primary: map-get($theme, primary);
- $foreground: map-get($theme, foreground);
- $warn: map-get($theme, warn);
-
- .footer {
- .row {
- background-color: black;
- }
-
- a {
- color: white;
- }
- }
-
-}
\ No newline at end of file
diff --git a/webapp/src/app/core/components/footer/footer.component.html b/webapp/src/app/core/components/footer/footer.component.html
index 389745ccdfdbcc5862c8ae0f71a41e62ce3e4338..0bb3ca506f1ba786cefe3d9538cea7140d023e42 100644
--- a/webapp/src/app/core/components/footer/footer.component.html
+++ b/webapp/src/app/core/components/footer/footer.component.html
@@ -1,10 +1,12 @@
-<div class="container footer no-margins-container">
- <div class="row justify-content-center align-items-center">
- <div class="col-auto">
- <a class="accessibility-link" routerLink="/accessibilite" i18n="@@footer.accessibility">Accessibility</a>
- <a class="left-border site-map-link" routerLink="/plan-du-site" i18n="@@footer.sitemap">Site Map</a>
- <a class="left-border legal-mentions-link" routerLink="/mentions-legales" i18n="@@footer.notices">Legal Notices</a>
- <a class="left-border" routerLink="/" i18n="@@footer.contactus">Contact Us</a>
+<footer class="footer">
+ <div class="container">
+ <div class="content">
+ <div class="columns">
+ <a class="column is-offset-2 is-2 accessibility-link" routerLink="/accessibilite" i18n="@@footer.accessibility">Accessibility</a>
+ <a class="column is-2 site-map-link" routerLink="/plan-du-site" i18n="@@footer.sitemap">Site Map</a>
+ <a class="column is-2 legal-mentions-link" routerLink="/mentions-legales" i18n="@@footer.notices">Legal Notices</a>
+ <a class="column" routerLink="/" i18n="@@footer.contactus">Contact Us</a>
+ </div>
+ </div>
</div>
- </div>
-</div>
\ No newline at end of file
+ </footer>
\ No newline at end of file
diff --git a/webapp/src/app/core/components/footer/footer.component.scss b/webapp/src/app/core/components/footer/footer.component.scss
index 5c570790ff82bf128c4c0c034e7fc49008a1f7e9..b30ce67f112f48fce5bbfccad79684828e7e8842 100644
--- a/webapp/src/app/core/components/footer/footer.component.scss
+++ b/webapp/src/app/core/components/footer/footer.component.scss
@@ -1,15 +1,10 @@
-@import '~@angular/material/theming';
-
.footer {
- margin-top: 20px;
-
- .row {
- padding: 5px;
+ padding-top: 1em;
+ padding-bottom: 1em;
+ margin-top: 1em;
+ a {
+ color: white;
}
}
-.left-border {
- padding-left: 10px;
- margin-left: 5px;
-}
diff --git a/webapp/src/app/core/components/header/_header-theme.component.scss b/webapp/src/app/core/components/header/_header-theme.component.scss
deleted file mode 100644
index 3c784c9f7fb323a41f3676927c176f7c9982f15b..0000000000000000000000000000000000000000
--- a/webapp/src/app/core/components/header/_header-theme.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@mixin app-header-theme($theme) {
- $primary: map-get($theme, primary);
- $foreground: map-get($theme, foreground);
- $warn: map-get($theme, warn);
-
- .header-navbar {
- background-color: white;
- border-bottom: 1px solid lightgray;
- padding-bottom: 10px;
- }
-
- .header-logo {
- background-color: white;
- img {
- margin: 10px 0;
- }
- }
-}
\ No newline at end of file
diff --git a/webapp/src/app/core/components/header/header.component.html b/webapp/src/app/core/components/header/header.component.html
index 943593e0038742c71d82f0f4e99887e63364301e..ed4a3234f060029999446db9c9ca05c7844bfc2f 100644
--- a/webapp/src/app/core/components/header/header.component.html
+++ b/webapp/src/app/core/components/header/header.component.html
@@ -1,29 +1,37 @@
-<div class="container no-margins-container">
- <div class="row justify-content-between header-logo">
- <div class="col-auto">
- <a routerLink="/recherche">
+<nav class="navbar">
+ <div class="navbar-brand">
+ <a class="navbar-item" routerLink="/accueil">
<img class="logo-smart-data-grand-lyon" src="./assets/img/logo-smart-data-grand-lyon.png">
</a>
- </div>
- <div class="col-auto">
+ <div class="navbar-item">
<img class="logo-smart-data-grand-lyon" src="./assets/img/logo-grand-lyon.png">
</div>
+ <div role="button" class="navbar-burger" aria-label="menu" (click)="burgerActive = !burgerActive">
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ </div>
</div>
- <div class="row justify-content-between header-navbar">
- <div class="col-auto">
- <a class="header-links home-link" routerLink="/accueil" routerLinkActive="active-link" i18n="@@header.home">
+ <div class="navbar-menu" [ngClass]="{'is-active': burgerActive === true}">
+ <div class="navbar-start">
+
+ <a class="navbar-item home-link" routerLink="/accueil" routerLinkActive="active-link" i18n="@@header.home">
Home
</a>
- <a class="header-links research-link" routerLink="/recherche" routerLinkActive="active-link" i18n="@@header.data">
+ <a class="navbar-item research-link" routerLink="/recherche" routerLinkActive="active-link" i18n="@@header.data">
Data
</a>
- <a class="header-links approach-link" routerLink="/demarche" routerLinkActive="active-link" i18n="@@header.approach">
+ <a class="navbar-item approach-link" routerLink="/demarche" routerLinkActive="active-link" i18n="@@header.approach">
Approach
</a>
</div>
- <div class="col-auto">
- <img class="flag-logo" src="./assets/img/uk-flag.png" title="English" i18n-title="@@header.logoEnglish" (click)="changeLanguage('en')">
- <img class="flag-logo" src="./assets/img/france-flag.png" title="French" i18n-title="@@header.logoFrench" (click)="changeLanguage('fr')">
+ <div class="navbar-end">
+ <div class="navbar-item">
+ <img class="flag-logo " src="./assets/img/uk-flag.png" title="English" i18n-title="@@header.logoEnglish" (click)="changeLanguage('en')">
+ <img class="flag-logo" src="./assets/img/france-flag.png" title="French" i18n-title="@@header.logoFrench" (click)="changeLanguage('fr')">
+ </div>
+
</div>
</div>
-</div>
\ No newline at end of file
+
+</nav>
diff --git a/webapp/src/app/core/components/header/header.component.scss b/webapp/src/app/core/components/header/header.component.scss
index d2f70566383409b4ab0eabe7a38db18b989ef828..5c6ea7d8785308229d2f2ee2da52f71483e28e02 100644
--- a/webapp/src/app/core/components/header/header.component.scss
+++ b/webapp/src/app/core/components/header/header.component.scss
@@ -1,26 +1,23 @@
-.link {
- margin-left: 20px;
-
-}
-
-.row {
- padding-right: 30px;
- padding-left: 30px;
-}
-
-.logo-smart-data-grand-lyon {
- height: 50px;
-}
-
.flag-logo {
width: 20px;
cursor: pointer;
+ margin-right: 5px;
}
-.header-links {
- margin-right: 10px;
+.navbar-brand {
+ width: 100%;
}
-
-.header-links:last-of-type {
- margin-right: 0px;
+.navbar {
+ flex-wrap: wrap;
+}
+.navbar-item img {
+ max-height: 3rem;
+ margin: 0.5rem;
+}
+.navbar-brand {
+ justify-content: space-between;
+ background-color: #F3F5F7;
+}
+.navbar-menu {
+ padding: 0.5rem 2rem;
}
\ No newline at end of file
diff --git a/webapp/src/app/core/components/header/header.component.ts b/webapp/src/app/core/components/header/header.component.ts
index 7a7cb338cb041b4e941d843fca09b6a421acf5a5..8828c1624949052ad5d827d02f1fd358239c61ad 100644
--- a/webapp/src/app/core/components/header/header.component.ts
+++ b/webapp/src/app/core/components/header/header.component.ts
@@ -8,9 +8,12 @@ import { environment } from '../../../../environments/environment';
})
export class HeaderComponent implements OnInit {
+ burgerActive: boolean;
+
constructor() { }
ngOnInit() {
+ this.burgerActive = false;
}
changeLanguage(lang: string) {
diff --git a/webapp/src/app/editorialisation/components/home/home.component.html b/webapp/src/app/editorialisation/components/home/home.component.html
index cd04da97eeee77573a13e5278efdfbfcb41c45ea..d24e3d45f62094489b7ffdf76832b322a83c932a 100644
--- a/webapp/src/app/editorialisation/components/home/home.component.html
+++ b/webapp/src/app/editorialisation/components/home/home.component.html
@@ -1,10 +1,10 @@
-<div class="container">
- <section>
+
+ <section class="section">
<app-wordpress-posts-list [posts]="posts"></app-wordpress-posts-list>
</section>
- <section style="text-align: center;">
+ <section class="video-post">
<div [innerHTML]='videoPost.content | keepHtml'></div>
</section>
-</div>
+
diff --git a/webapp/src/app/editorialisation/components/home/home.component.scss b/webapp/src/app/editorialisation/components/home/home.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..20383a87ee0be2a1e26f285667bc3dd45eaf9b0c 100644
--- a/webapp/src/app/editorialisation/components/home/home.component.scss
+++ b/webapp/src/app/editorialisation/components/home/home.component.scss
@@ -0,0 +1,3 @@
+.video-post {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/webapp/src/app/editorialisation/components/wordpress-posts-list/wordpress-posts-list-tile/wordpress-posts-list-tile.component.html b/webapp/src/app/editorialisation/components/wordpress-posts-list/wordpress-posts-list-tile/wordpress-posts-list-tile.component.html
index a0556473a93285c4e663501a88b9941f271ed3d0..747c091d519c3f3f637305451520e390ca70f389 100644
--- a/webapp/src/app/editorialisation/components/wordpress-posts-list/wordpress-posts-list-tile/wordpress-posts-list-tile.component.html
+++ b/webapp/src/app/editorialisation/components/wordpress-posts-list/wordpress-posts-list-tile/wordpress-posts-list-tile.component.html
@@ -1,11 +1,11 @@
-<div style="border: 1px solid black;background-color: white;padding: 10px;">
+<article class="tile is-child notification box"
+ [ngClass]="classColor">
<p>
- <span *ngIf="post.categories">{{ post.categories.join(' ') | uppercase }} </span>
+ <span class="is-size-7" *ngIf="post.categories">{{ post.categories.join(' ') | uppercase }} </span>
</p>
<a routerLink="/articles/{{post.id}}">
- <h3 [innerHTML]="post.title"></h3>
+ <p class="subtitle" [innerHTML]="post.title"></p>
</a>
- <img src="{{post.mediaUrl}}" alt="" width="300" height="150">
- <p [innerHtml]="post.excerpt"></p>
-</div>
+ <div class="content" [innerHtml]="post.excerpt"></div>
+</article>
\ No newline at end of file
diff --git a/webapp/src/app/editorialisation/components/wordpress-posts-list/wordpress-posts-list-tile/wordpress-posts-list-tile.component.ts b/webapp/src/app/editorialisation/components/wordpress-posts-list/wordpress-posts-list-tile/wordpress-posts-list-tile.component.ts
index fc177c7d10974ba55caf72f95566c69fb9fe87ba..189b9b96d141cb5d104aebc73b940fd8b7203060 100644
--- a/webapp/src/app/editorialisation/components/wordpress-posts-list/wordpress-posts-list-tile/wordpress-posts-list-tile.component.ts
+++ b/webapp/src/app/editorialisation/components/wordpress-posts-list/wordpress-posts-list-tile/wordpress-posts-list-tile.component.ts
@@ -9,9 +9,26 @@ import { WordpressPost } from '../../../models/wordpress-post.model';
export class WordpressPostsListTileComponent implements OnInit {
@Input() post: WordpressPost;
+
+ classColor: string;
constructor() { }
ngOnInit() {
+ this.getRandomInt();
+ }
+
+ getRandomInt() {
+ let classTile = '';
+ this.post.categories.forEach(category => {
+ });
+ if (this.post.categories.includes('applications')) {
+ classTile = 'is-warning';
+ } else if (this.post.categories.includes('ma carte')) {
+ classTile = 'is-info';
+ } else if (this.post.categories.includes('découvrir')) {
+ classTile = 'is-success';
+ }
+ this.classColor = classTile;
}
}
diff --git a/webapp/src/app/editorialisation/components/wordpress-posts-list/wordpress-posts-list.component.html b/webapp/src/app/editorialisation/components/wordpress-posts-list/wordpress-posts-list.component.html
index a4aab822684b84dcd2f36a6ecde9e5462ff7485b..28cc6f7d150f94f6b4e62fddf247a10c354a39d4 100644
--- a/webapp/src/app/editorialisation/components/wordpress-posts-list/wordpress-posts-list.component.html
+++ b/webapp/src/app/editorialisation/components/wordpress-posts-list/wordpress-posts-list.component.html
@@ -1,8 +1,7 @@
-<div *ngIf="posts">
- <div class="row">
- <div class="col-md-4" *ngFor="let post of posts" style="margin-top: 20px;">
- <app-wordpress-posts-list-tile [post]='post'>
- </app-wordpress-posts-list-tile>
- </div>
- </div>
+<div class="tile is-ancestor" *ngIf="posts">
+ <ng-container *ngFor="let post of posts">
+ <app-wordpress-posts-list-tile class="tile is-parent" [post]='post'>
+ </app-wordpress-posts-list-tile>
+</ng-container>
+
</div>
diff --git a/webapp/src/app/editorialisation/services/editorialisation.service.ts b/webapp/src/app/editorialisation/services/editorialisation.service.ts
index 60fe13769141d3228b2bee67fc577192927c5358..89df881cc382c7cc22e8bee50ba52428d6c8e026 100644
--- a/webapp/src/app/editorialisation/services/editorialisation.service.ts
+++ b/webapp/src/app/editorialisation/services/editorialisation.service.ts
@@ -1,4 +1,5 @@
-import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/observable/forkJoin';
+import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { environment } from '../../../environments/environment';
import { HttpClient } from '@angular/common/http';
@@ -31,46 +32,61 @@ export class EditorialisationService {
getPostsList(): Observable<WordpressPost[]> {
const url = environment.wordpressUrl + 'posts';
const postsList: WordpressPost[] = [];
- // Call the /posts api
- return this._http.get<IWordpressPost[]>(url).map(response => {
- response.map(post => {
- if (! post.categories.includes(environment.wordpressContent.categoryIdUniqueContent)) {
- const wp_post = new WordpressPost(post);
- postsList.push(wp_post);
- // For each post get the media url
- if (post.featured_media !== 0) {
- this._getMediaUrl(post.featured_media).subscribe((res) => {
- wp_post.mediaUrl = res;
- });
- }
- // For each category get its name by calling /categories api
- post.categories.forEach(categoryId => {
- this._getCategory(categoryId).subscribe(category => {
- wp_post.categories.push(category);
- });
+
+ return Observable.forkJoin([
+ this._http.get<IWordpressCategory[]>(environment.wordpressUrl + 'categories').map(categories => categories),
+ this._http.get<IWordpressPost[]>(url).map(posts => posts)
+ ])
+ .map(([categories, posts]) => {
+ posts.map(post => {
+ if (!post.categories.includes(environment.wordpressContent.categoryIdUniqueContent)) {
+ const wp_post = new WordpressPost(post);
+ // Set the categories
+ post.categories.forEach(categoryId => {
+ const category = categories.find(element => {
+ return element.id === categoryId;
+ });
+ wp_post.categories.push(category.name);
+ });
+
+ postsList.push(wp_post);
+
+ // For each post get the media url
+ if (post.featured_media !== 0) {
+ this._getMediaUrl(post.featured_media).subscribe((res) => {
+ wp_post.mediaUrl = res;
+ });
+ }
+ }
});
- }
+ return postsList;
});
- return postsList;
- });
+
}
getPostById(id: string): Observable<WordpressPost> {
const url = environment.wordpressUrl + 'posts/' + id;
- return this._http.get<IWordpressPost>(url).map(post => {
- const wp_post = new WordpressPost(post);
- // For each post get the media url
- if (post.featured_media !== 0) {
- this._getMediaUrl(post.featured_media).subscribe((res) => {
- wp_post.mediaUrl = res;
- });
- }
- // For each category get its name by calling /categories api
- post.categories.forEach(categoryId => {
- this._getCategory(categoryId).subscribe(category => {
- wp_post.categories.push(category);
- });
+
+ return Observable.forkJoin([
+ this._http.get<IWordpressCategory[]>(environment.wordpressUrl + 'categories').map(categories => categories),
+ this._http.get<IWordpressPost[]>(url).map(posts => posts)
+ ])
+ .map(([categories, post]) => {
+ const wp_post = new WordpressPost(post);
+ // For each post get the media url
+ if (post.featured_media !== 0) {
+ this._getMediaUrl(post.featured_media).subscribe((res) => {
+ wp_post.mediaUrl = res;
});
+ }
+
+ // Set the categories
+ post.categories.forEach(categoryId => {
+ const category = categories.find(element => {
+ return element.id === categoryId;
+ });
+ wp_post.categories.push(category.name);
+ });
return wp_post;
});
}
@@ -92,11 +108,4 @@ export class EditorialisationService {
});
}
- _getCategory(id: number): Observable<string> {
- const url = environment.wordpressUrl + 'categories/' + id;
- return this._http.get<IWordpressCategory>(url).map(category => {
- return category.name;
- });
- }
-
}
diff --git a/webapp/src/app/geosource/_geosource-theme.component.scss b/webapp/src/app/geosource/_geosource-theme.component.scss
deleted file mode 100644
index 2baecc368d3665055cf6f18c5bbc679a6bd99187..0000000000000000000000000000000000000000
--- a/webapp/src/app/geosource/_geosource-theme.component.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import '~@angular/material/theming';
-
-@mixin app-geosource-theme($theme) {
- $primary: map-get($theme, primary);
- $foreground: map-get($theme, foreground);
- $warn: map-get($theme, warn);
-
- .mat-icon.action-icon {
- cursor: pointer;
- }
-
- .search-bar {
- margin-bottom: 10px;
- background: linear-gradient(to right,#fcfdfe, #3783b2);
- }
-
- .toggle-button {
- margin-top: 5px;
- color: darkblue;
- text-align: center;
- cursor: pointer;
- &:hover {
- text-decoration: underline;
- }
- }
-
- .filter-category {
- font-size: 13px;
- strong {
- color: mat-color($primary, default);
- font-size: 16px;
- }
- .filter-item {
- color: mat-color($warn, default);
- text-decoration: none;
- }
- .filter-item:hover {
- color: mat-color($primary, 300);
- cursor: pointer;
- }
- }
-}
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/filter-list/filter-detail/filter-detail.component.html b/webapp/src/app/geosource/components/filter-list/filter-detail/filter-detail.component.html
index d3132315f92098778456a29783b747ee816909a8..f9bdce59cf3e92098cd84a7a88c8d4515dd22652 100644
--- a/webapp/src/app/geosource/components/filter-list/filter-detail/filter-detail.component.html
+++ b/webapp/src/app/geosource/components/filter-list/filter-detail/filter-detail.component.html
@@ -1,21 +1,25 @@
-<mat-card *ngIf="filter.aggregations.length > 0">
- <div class="filter-category">
- <strong>{{ getLabel()}}</strong>
- <ng-container *ngFor="let aggregation of filter.aggregations; let i=index">
- <div
- class="row filter-item justify-content-between"
- [ngClass]="{'is-hidden': ((i > 2) && (showList == false)), 'active': (aggregation.isActive == true) }">
- <div class="col-sm-9" (click)="changeFilter(filter.field, aggregation)">
- <input type="checkbox" [checked]="aggregation.isActive">
- {{ (filter.type === 'date') ? (aggregation.key | date: 'yyyy') : aggregation.key }}
+<aside class="menu" *ngIf="filter.aggregations.length > 0">
+ <p class="menu-label is-size-7">
+ {{ getLabel()}}
+ </p>
+ <ul class="menu-list">
+ <li *ngFor="let aggregation of filter.aggregations; let i=index" [ngClass]="{'is-hidden': ((i > 2) && (showList == false)), 'active': (aggregation.isActive == true) }">
+ <a>
+ <div class="columns filter-item justify-content-between">
+ <div class="column is-9 " (click)="changeFilter(filter.field, aggregation)">
+ <input type="checkbox" [checked]="aggregation.isActive"><!-- Used to remove manually text space nodes inside browser.
+ --><span style="margin-left: 7px">
+ {{ (filter.type === 'date') ? (aggregation.key | date: 'yyyy') : aggregation.key }}
+ </span>
+ </div>
+ <div class='column is-3' style="text-align: right;">
+ ({{ aggregation.count_per_metadata}})
+ </div>
</div>
- <div class='col-sm-3' style="text-align: right;">
- ({{ aggregation.count_per_metadata}})
- </div>
- </div>
- </ng-container>
- <div class="toggle-button" (click)="toggleDisplay()" *ngIf="filter.aggregations.length > 3">
- {{ getButtonName() }}
+ </a>
+ </li>
+ <div class="toggle-button has-text-danger has-text-centered" (click)="toggleDisplay()" *ngIf="filter.aggregations.length > 3">
+ {{ getButtonName() }}
</div>
- </div>
-</mat-card>
+ </ul>
+</aside>
diff --git a/webapp/src/app/geosource/components/filter-list/filter-detail/filter-detail.component.scss b/webapp/src/app/geosource/components/filter-list/filter-detail/filter-detail.component.scss
index fc87fca5143acd36e89725a1b52b8ff565345774..9400ae5a9fdd9552fd738517de0fb3c4bba3ca4b 100644
--- a/webapp/src/app/geosource/components/filter-list/filter-detail/filter-detail.component.scss
+++ b/webapp/src/app/geosource/components/filter-list/filter-detail/filter-detail.component.scss
@@ -2,8 +2,8 @@
display: none;
}
-.mat-card {
- margin-bottom: 10px;
+.filter-category {
+ padding: 5px;
}
.active {
@@ -15,10 +15,25 @@ input[type=checkbox] {
cursor: pointer;
}
+.toggle-button {
+ cursor: pointer;
+ padding-bottom: 10px;
+ padding-top: 5px;
+}
+
.filter-item {
> div:first-of-type {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
+}
+
+.menu-list {
+ background-color: white;
+ box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+}
+
+.menu-label:not(:last-child) {
+ margin-bottom: 0.5em;
}
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/filter-list/filter-list.component.html b/webapp/src/app/geosource/components/filter-list/filter-list.component.html
index 56f8612252b7f6785feabc3f79c2f1246b4169dc..4c07cb757782c99be5685367240cf0529c6efb5e 100644
--- a/webapp/src/app/geosource/components/filter-list/filter-list.component.html
+++ b/webapp/src/app/geosource/components/filter-list/filter-list.component.html
@@ -1,29 +1,6 @@
<ng-container *ngIf="filters">
- <!-- <mat-card>
- <div class="filter-category">
- <strong i18n="@@filter.activeFilters">Active filters</strong>
- <div>
- <ng-container *ngFor="let filter of filters">
- <div class="filter-item row justify-content-between"
- *ngFor="let activeFilter of filter.activeFilters"
- (click)="removeFilter(filter.field, activeFilter)">
-
- <div class=col-sm-10>
- {{ (filter.type === 'date') ?
- (activeFilter.key | date: 'yyyy') : activeFilter.key }} ({{ activeFilter.count_per_metadata}})
- </div>
- <div class="col-sm-2">
- <mat-icon class="action-icon">clear</mat-icon>
- </div>
- </div>
- </ng-container>
- </div>
- </div>
- </mat-card> -->
-
- <ng-container>
- <app-filter-detail *ngFor="let filter of filters" [filter]="filter">
+ <div class="filter-detail" *ngFor="let filter of filters">
+ <app-filter-detail [filter]="filter">
</app-filter-detail>
- </ng-container>
-
+ </div>
</ng-container>
diff --git a/webapp/src/app/geosource/components/filter-list/filter-list.component.scss b/webapp/src/app/geosource/components/filter-list/filter-list.component.scss
index 006ce2924280afc6144be507ba0fe065b355fdf5..74485522548e3757de360b8d89757868f65c6db1 100644
--- a/webapp/src/app/geosource/components/filter-list/filter-list.component.scss
+++ b/webapp/src/app/geosource/components/filter-list/filter-list.component.scss
@@ -1,4 +1,3 @@
-
-.mat-card {
+.filter-detail {
margin-bottom: 10px;
}
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/index.ts b/webapp/src/app/geosource/components/index.ts
index 69d57eef7002c848152269be2a236087a32a00e1..1652c1c8ba611043d64bb398700efde28429d315 100644
--- a/webapp/src/app/geosource/components/index.ts
+++ b/webapp/src/app/geosource/components/index.ts
@@ -1,7 +1,6 @@
import { MetadataListComponent } from './metadata-list/metadata-list.component';
import { MetadataDetailComponent } from './metadata-detail/metadata-detail.component';
import { SearchBarComponent } from './search-bar/search-bar.component';
-import { SearchInputComponent } from './search-bar/search-input/search-input.component';
import { ResearchComponent } from './research/research.component';
import { SortComponent } from './sort/sort.component';
import { FilterListComponent } from './filter-list/filter-list.component';
@@ -12,7 +11,6 @@ export * from './metadata-detail/metadata-detail.component';
export * from './metadata-list/metadata-list.component';
export * from './filter-list/filter-list.component';
export * from './search-bar/search-bar.component';
-export * from './search-bar/search-input/search-input.component';
export * from './research/research.component';
export * from './sort/sort.component';
export * from './suggestion/suggestion.component';
@@ -21,7 +19,6 @@ export const GeosourceComponents = [
MetadataDetailComponent,
MetadataListComponent,
SearchBarComponent,
- SearchInputComponent,
ResearchComponent,
SortComponent,
FilterListComponent,
diff --git a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html
index 16baef6c947a6d2d262776e013eae3422021b18a..bed3ecb231f3ad39a528c1e8107dea4dd9d544cd 100644
--- a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html
+++ b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html
@@ -1,78 +1,109 @@
-<div class="row">
- <div class="col-sm-3">
- <mat-progress-bar mode="indeterminate" [ngStyle]="{'visibility': showProgressBar == true ? 'visible' : 'hidden'}">
- </mat-progress-bar>
- </div>
-</div>
-<div class="row">
- <div class="col-sm-3" i18n="@@global.resultsFound">
+<div class="columns">
+ <div class="column is-3 has-text-danger" i18n="@@global.resultsFound">
{{ metadata_total }} results found
</div>
- <div class="col-sm-9">
+ <div class="column is-9">
<app-suggestion></app-suggestion>
</div>
</div>
-<div class="row">
- <div class="col-sm-3">
- <app-sort></app-sort>
+<div class="columns">
+ <div class="column is-3">
+ <div class="sort-container">
+ <app-sort></app-sort>
+ </div>
+ <div>
<app-filter-list></app-filter-list>
+ </div>
</div>
- <div class="col-sm-9">
- <div class="row" *ngFor="let dataset of datasetList">
- <div class="col-sm-12">
- <mat-card>
- <div class="row">
- <div class="col-sm-9">
- <mat-card-title>
- <a [routerLink]="[dataset.dataset_id]">{{ dataset.metadata.title }}</a>
- </mat-card-title>
- <mat-card-subtitle>
- <p>Nombre de documents: {{ dataset.metadata.total_documents}}</p>
- <span class="category" *ngFor="let topic of dataset.metadata.topic_category">{{ topic }}</span>
- </mat-card-subtitle>
- <mat-card-content>
- <p [innerHTML]="dataset.highlights.highlightedAbstract != null ? dataset.highlights.highlightedAbstract : dataset.metadata.abstract"></p>
- <p class="protocol-list">
- <mat-icon sty>insert_drive_file</mat-icon> {{ dataset.metadata.uri ? formatProtocols(dataset.metadata.uri) : '-' }}</p>
- <p>
- <u i18n="@@global.keywords">Keywords :</u> {{ dataset.metadata.keyword ? dataset.metadata.keyword.join(', ') : '-'}}</p>
- </mat-card-content>
+ <div class="column is-9">
+ <div class="columns" *ngFor="let dataset of datasetList">
+ <div class="column is-12">
+ <div class="card">
+ <div class="columns">
+ <div class="column is-9">
+ <header class="header">
+ <p class="card-header-title is-size-4">
+ <a [routerLink]="[dataset.dataset_id]">{{ dataset.metadata.title }}</a>
+ </p>
+ <p style="padding-left:1.5em;">
+ <span>Occurences trouvées: {{ dataset.metadata.total_documents}}</span>
+ <br>
+ <strong class="category has-text-warning is-size-6" *ngFor="let topic of dataset.metadata.topic_category">
+ {{ topic }}
+ </strong>
+ </p>
+ </header>
+ <div class="card-content">
+ <div class="content">
+ <p class="block-with-text"
+ [innerHTML]="dataset.highlights.highlightedAbstract != null ? dataset.highlights.highlightedAbstract : dataset.metadata.abstract"></p>
+ <p class="protocol-list">
+ <strong class="is-size-7">
+ FORMATS:
+ </strong>
+ <span>{{ dataset.metadata.uri ? formatProtocols(dataset.metadata.uri) : '-' }}</span>
+ </p>
+ <p>
+ <u i18n="@@global.keywords">Keywords :</u> {{ dataset.metadata.keyword ? dataset.metadata.keyword.join(', ') : '-'}}</p>
+ </div>
+ </div>
</div>
- <div class="col-sm-3">
- <mat-card-content>
+ <div class="column is-3">
+ <div class="content">
<p *ngIf="dataset.metadata.contact && dataset.metadata.contact.length > 0">
- <mat-icon color="primary">perm_identity</mat-icon> {{ dataset.metadata.contact ? dataset.metadata.contact[0].organization : '-' }} </p>
+ <span class="icon">
+ <i class="material-icons">perm_identity</i>
+ </span>
+ {{ dataset.metadata.contact ? dataset.metadata.contact[0].organization : '-' }}
+ </p>
<p>
- <mat-icon color="primary">copyright</mat-icon> {{ dataset.metadata.use_limitation ? dataset.metadata.use_limitation[0] : '-' }} </p>
+ <span class="icon">
+ <i class="material-icons">copyright</i>
+ </span>
+ {{ dataset.metadata.use_limitation ? dataset.metadata.use_limitation[0] : '-' }}
+ </p>
<p>
- <mat-icon color="primary">update</mat-icon> {{ dataset.metadata.date_publication | date: 'dd MMMM yyyy' }} </p>
+ <span class="icon">
+ <i class="material-icons">update</i>
+ </span>
+ {{ dataset.metadata.date_publication | date: 'dd MMMM yyyy' }}
+ </p>
<p>
- <mat-icon color="primary">autorenew</mat-icon> - </p>
+ <span class="icon">
+ <i class="material-icons">autorenew</i>
+ </span>
+ -
+ </p>
<p>
- <mat-icon color="primary">visibility</mat-icon> - </p>
- </mat-card-content>
+ <span class="icon">
+ <i class="material-icons">visibility</i>
+ </span>
+ -
+ </p>
+ </div>
</div>
</div>
- <div class="row" *ngIf="dataset.highlights.metadata.length > 0 || dataset.highlights.data.length > 0">
- <div class="col">
- <mat-card-content>
+ <div class="columns" *ngIf="dataset.highlights.metadata.length > 0 || dataset.highlights.data.length > 0"
+ style="padding-left: 1.5em; ">
+ <div class="column">
+ <div class="content">
<ng-container *ngIf="dataset.highlights.metadata.length > 0">
- <h4 i18n>
+ <strong i18n>
{dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in metadata
- </h4>
+ </strong>
<span class="item-found" *ngFor="let e of dataset.highlights.metadata" [innerHTML]="formatFoundItem(e)"></span>
</ng-container>
<ng-container *ngIf="dataset.highlights.data.length > 0">
- <h4 i18n>
+ <strong i18n>
{dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in data
- </h4>
+ </strong>
<span class="item-found" *ngFor="let e of dataset.highlights.data" [innerHTML]="formatFoundItem(e)"></span>
</ng-container>
- </mat-card-content>
+ </div>
</div>
</div>
- </mat-card>
+ </div>
</div>
</div>
<mat-paginator color="primary" #paginator [length]="metadata_total" [pageSize]="paginator.pageSize" [pageIndex]="paginator.pageIndex"
diff --git a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.scss b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.scss
index 1f168edae0b81f17a2dc9167ab2e321cc59b555e..5fabaecf98d8998cf8b6c63de8b66b2c2b89f295 100644
--- a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.scss
+++ b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.scss
@@ -1,18 +1,14 @@
-.row {
- margin-bottom: 10px;
+.sort-container {
+ margin-bottom: 20px;
}
-.mat-icon {
+.icon {
vertical-align: middle;
}
.category{
- color: white;
- background-color: #c6c3c3;
margin-right: 5px;
padding: 3px 3px 3px 3px;
- font-size: 12px;
- font-weight: 100;
}
span.item-found {
@@ -22,8 +18,48 @@ span.item-found {
overflow-wrap: break-word;
}
-mat-card-content {
- h4:first-of-type {
- margin-top: 0px;
- }
+.card {
+ margin-bottom: 10px;
+}
+
+
+.block-with-text {
+ /* hide text if it more than N lines */
+ overflow: hidden;
+ /* for set '...' in absolute position */
+ position: relative;
+ /* use this value to count block height */
+ line-height: 1.2em;
+ /* max-height = line-height (1.2) * lines max number (3) */
+ max-height: 3.6em;
+ /* fix problem when last visible word doesn't adjoin right side */
+ text-align: justify;
+ /* place for '...' */
+ margin-right: -1em;
+ padding-right: 1em;
+}
+/* create the ... */
+.block-with-text:before {
+ /* points in the end */
+ content: '...';
+ /* absolute position */
+ position: absolute;
+ /* set position to right bottom corner of block */
+ right: 0;
+ bottom: 0;
}
+/* hide ... if we have text, which is less than or equal to max lines */
+.block-with-text:after {
+ /* points in the end */
+ content: '';
+ /* absolute position */
+ position: absolute;
+ /* set position to right bottom corner of text */
+ right: 0;
+ /* set width and height */
+ width: 1em;
+ height: 1em;
+ margin-top: 0.2em;
+ /* bg color = bg color under block */
+ background: white;
+}
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/research/research.component.html b/webapp/src/app/geosource/components/research/research.component.html
index f8d505e467774e6ca2505e043bad59130c86b00a..c1f49304558520b1fb218e1effac518683e3e70d 100644
--- a/webapp/src/app/geosource/components/research/research.component.html
+++ b/webapp/src/app/geosource/components/research/research.component.html
@@ -1,5 +1,14 @@
-<app-search-bar></app-search-bar>
+<section class="hero searchbar">
+ <div class="hero-body">
+ <div class="container">
+ <app-search-bar></app-search-bar>
+ </div>
+ </div>
+</section>
-<div class="container">
- <router-outlet></router-outlet>
-</div>
\ No newline at end of file
+
+<section>
+ <div class="container">
+ <router-outlet></router-outlet>
+ </div>
+</section>
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/research/research.component.scss b/webapp/src/app/geosource/components/research/research.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..5d1b42768ffe07cb2bf901227b426387e7443804 100644
--- a/webapp/src/app/geosource/components/research/research.component.scss
+++ b/webapp/src/app/geosource/components/research/research.component.scss
@@ -0,0 +1,3 @@
+section.searchbar {
+ background-color: #DEE6EE;
+}
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/search-bar/search-bar.component.html b/webapp/src/app/geosource/components/search-bar/search-bar.component.html
index a57c668d051824fc2287c9bca2cef41590ab284e..f679120a7c53a45184682f7878f81dd0070eb6b6 100644
--- a/webapp/src/app/geosource/components/search-bar/search-bar.component.html
+++ b/webapp/src/app/geosource/components/search-bar/search-bar.component.html
@@ -1,13 +1,22 @@
-<div class="container no-margins-container">
- <div class="row justify-content-between align-items-center search-bar">
- <div class="col-sm-auto col-md-3">
- <app-search-input></app-search-input>
+<div class="columns">
+ <div class="column is-4 is-offset-4">
+ <div class=" is-vcentered">
+ <div class="field has-addons">
+ <p class="control">
+ <input type="text" class="input is-medium" [(ngModel)]="searchValue" placeholder="Research one dataset" i18n-placeholder="@@research.dataset"
+ (keyup)="searchChanged($event.key)" list="keywords" />
+ <datalist id="keywords" >
+ <option *ngFor="let option of options_autocomplete" [value]="option.text">{{ option.text }}</option>
+ </datalist>
+ </p>
+ <p class="control button-research">
+ <button class="button is-medium is-danger" (click)="searchChanged('Enter')">
+ <span class="icon">
+ <i class="material-icons">search</i>
+ </span>
+ </button>
+ </p>
+ </div>
</div>
- <!-- <div class="col-sm-auto">
- <button class="iconBtn" mat-raised-button>
- <mat-icon aria-hidden="true">add</mat-icon>
- </button>
- <button class="contributeBtn" mat-raised-button>CONTRIBUER</button>
- </div> -->
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/webapp/src/app/geosource/components/search-bar/search-bar.component.scss b/webapp/src/app/geosource/components/search-bar/search-bar.component.scss
index 9694eba62d9a27754925c62240bfcc420fd8db70..dfe3ff2b79c1972ff3fd91991551b1251bd8fb72 100644
--- a/webapp/src/app/geosource/components/search-bar/search-bar.component.scss
+++ b/webapp/src/app/geosource/components/search-bar/search-bar.component.scss
@@ -1,3 +1,5 @@
+@import "./src/scss/mystyles.scss";
+
.iconBtn {
min-width: unset;
padding: 0 5px;
@@ -10,4 +12,11 @@
.row {
padding-right: 30px;
padding-left: 30px;
+}
+
+.button-research {
+
+ i {
+ color: white;
+ }
}
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/search-bar/search-bar.component.spec.ts b/webapp/src/app/geosource/components/search-bar/search-bar.component.spec.ts
index 554dbc38111d9d35437247e78a85f45f06525091..3486f8ce81c1801a2b8d413fbf17185046d661ba 100644
--- a/webapp/src/app/geosource/components/search-bar/search-bar.component.spec.ts
+++ b/webapp/src/app/geosource/components/search-bar/search-bar.component.spec.ts
@@ -1,8 +1,12 @@
+import {ElasticsearchService} from '../../services/elasticsearch.service';
+import {MetadataService} from '../../services/metadata.service';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SearchBarComponent } from './search-bar.component';
import { MockComponent } from 'ng2-mock-component';
import { AppMaterialModule } from '../../../app.material.module';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
describe('SearchBarComponent', () => {
let component: SearchBarComponent;
@@ -11,11 +15,17 @@ describe('SearchBarComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
- AppMaterialModule
+ AppMaterialModule,
+ FormsModule,
+ HttpClientModule
],
declarations: [
SearchBarComponent,
MockComponent({ selector: 'app-search-input' }),
+ ],
+ providers: [
+ MetadataService,
+ ElasticsearchService
]
})
.compileComponents();
diff --git a/webapp/src/app/geosource/components/search-bar/search-bar.component.ts b/webapp/src/app/geosource/components/search-bar/search-bar.component.ts
index f5e391be2baf9572163366a30204fbbb4036194e..1d9aef7e2d5cf9ca727d011c70f9e72f4dd28a8c 100644
--- a/webapp/src/app/geosource/components/search-bar/search-bar.component.ts
+++ b/webapp/src/app/geosource/components/search-bar/search-bar.component.ts
@@ -1,4 +1,7 @@
import { Component, OnInit } from '@angular/core';
+import { MetadataService, ElasticsearchService } from '../../services';
+import { MatAutocompleteSelectedEvent } from '@angular/material';
+import { SearchCompletion } from '../../models';
@Component({
selector: 'app-search-bar',
@@ -7,9 +10,64 @@ import { Component, OnInit } from '@angular/core';
})
export class SearchBarComponent implements OnInit {
- constructor() { }
+ searchValue: string;
+ options_autocomplete: Array<SearchCompletion>;
+
+ constructor(
+ private _metadataService: MetadataService,
+ private _elasticSearchService: ElasticsearchService,
+ ) {
+ this.options_autocomplete = [];
+ }
ngOnInit() {
+ this.searchValue = this._metadataService.searchString;
+ this._metadataService.searchChange$.subscribe(
+ () => {
+ this.searchValue = this._metadataService.searchString;
+ }
+ );
+ }
+
+ searchChanged(key) {
+ // This function is triggered when:
+ // - the click on reset button, press key Enter, select option with the mouse:
+ // we make a search query & clean the completion list
+ // - any keyup in the search bar: we make the autocomplete query
+ switch (key) {
+ case 'ArrowDown':
+ case 'ArrowUp':
+ break;
+ case 'Enter':
+ case 'optionSelected':
+ case 'reset':
+ this._metadataService.searchChanged(this.searchValue);
+ this.options_autocomplete = [];
+ break;
+ default:
+ this._elasticSearchService.getAutoComplete(this.searchValue).subscribe(
+ res => {
+ this.options_autocomplete = res;
+ }
+ );
+ break;
+ }
+
+ }
+
+ displayAutoComplete(option): string | undefined {
+ const value = option ? option : undefined;
+ return value;
}
+ onSelectionChanged(event: MatAutocompleteSelectedEvent) {
+ this.searchChanged('optionSelected');
+ }
+
+ resetSearchValue() {
+ this.searchValue = '';
+ this.searchChanged('reset');
+ }
+
+
}
diff --git a/webapp/src/app/geosource/components/search-bar/search-input/search-input.component.html b/webapp/src/app/geosource/components/search-bar/search-input/search-input.component.html
deleted file mode 100644
index 45aae437a9b611ebacf57846bb4ea6eea8ff9bdb..0000000000000000000000000000000000000000
--- a/webapp/src/app/geosource/components/search-bar/search-input/search-input.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<div class="row align-items-center no-gutters">
- <div class="col-md-auto">
- <mat-icon color="warn" (click)="searchChanged('')">search</mat-icon>
- </div>
- <div class="col-md-10">
- <mat-form-field class="full-width" style="padding-left: 5px;" color="warn">
- <input type="text"
- matInput
- [(ngModel)]="searchValue"
- placeholder="Research one dataset"
- i18n-placeholder="@@research.dataset"
- (keyup)="searchChanged($event.key)"
- [matAutocomplete]="auto"
- />
- <button mat-button *ngIf="searchValue" matSuffix mat-icon-button aria-label="Clear" (click)="resetSearchValue()">
- <mat-icon>close</mat-icon>
- </button>
- </mat-form-field>
-
- <mat-autocomplete #auto="matAutocomplete"
- (optionSelected)="onSelectionChanged($event)">
- <mat-option *ngFor="let option of options_autocomplete" [value]="option.text">
- {{ option.text }}
- </mat-option>
- </mat-autocomplete>
- </div>
-</div>
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/search-bar/search-input/search-input.component.scss b/webapp/src/app/geosource/components/search-bar/search-input/search-input.component.scss
deleted file mode 100644
index 7a507bda170f51392d6643548555795e24b95c0f..0000000000000000000000000000000000000000
--- a/webapp/src/app/geosource/components/search-bar/search-input/search-input.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.full-width {
- width: 100%;
- padding: 5px 0;
-}
-
-.mat-icon {
- cursor: pointer;
-}
\ No newline at end of file
diff --git a/webapp/src/app/geosource/components/search-bar/search-input/search-input.component.spec.ts b/webapp/src/app/geosource/components/search-bar/search-input/search-input.component.spec.ts
deleted file mode 100644
index f8afeae9784d2a453c0ca8fee6236f7a72784ac1..0000000000000000000000000000000000000000
--- a/webapp/src/app/geosource/components/search-bar/search-input/search-input.component.spec.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SearchInputComponent } from './search-input.component';
-import { AppMaterialModule } from '../../../../app.material.module';
-import { Observable } from 'rxjs/Observable';
-import { MetadataService, ElasticsearchService } from '../../../services';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
-import { SearchCompletion } from '../../../models';
-
-describe('SearchInputComponent', () => {
- let component: SearchInputComponent;
- let fixture: ComponentFixture<SearchInputComponent>;
- let metadataService: MetadataService;
- let elasticsearchService: ElasticsearchService;
- const searchResult: SearchCompletion[] = [{
- text: 'test',
- _index: 'aaaaaa',
- _score: 0.01
- }];
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- imports: [
- AppMaterialModule,
- BrowserAnimationsModule,
- FormsModule,
- HttpClientModule
- ],
- declarations: [SearchInputComponent],
- providers: [
- MetadataService,
- ElasticsearchService
- ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(SearchInputComponent);
- component = fixture.componentInstance;
- metadataService = TestBed.get(MetadataService);
- elasticsearchService = TestBed.get(ElasticsearchService);
-
- fixture.detectChanges();
- });
- describe('Component creation', () => {
- it('should create', () => {
- expect(component).toBeTruthy();
- });
- });
-
- describe('SearchChanged', () => {
- beforeEach(() => {
- spyOn(metadataService, 'searchChanged');
- spyOn(elasticsearchService, 'getAutoComplete').and.returnValue(Observable.of(searchResult));
- });
-
- it('should call searchChanged method from MetadataService', () => {
- // When
- component.searchChanged('reset');
- // Then
- expect(metadataService.searchChanged).toHaveBeenCalled();
- });
-
- it('should call searchChanged method from MetadataService', () => {
- // When
- component.searchChanged('optionSelected');
- // Then
- expect(metadataService.searchChanged).toHaveBeenCalled();
- });
-
- it('should call searchChanged method from MetadataService', () => {
- // When
- component.searchChanged('Enter');
- // Then
- expect(metadataService.searchChanged).toHaveBeenCalled();
- });
-
- it('should call searchChanged method from MetadataService', () => {
- // When
- component.searchChanged('');
- // Then
- expect(elasticsearchService.getAutoComplete).toHaveBeenCalled();
- });
- });
-});
diff --git a/webapp/src/app/geosource/components/search-bar/search-input/search-input.component.ts b/webapp/src/app/geosource/components/search-bar/search-input/search-input.component.ts
deleted file mode 100644
index 337b7ae354842c03a99b8ff7761068210f0a0187..0000000000000000000000000000000000000000
--- a/webapp/src/app/geosource/components/search-bar/search-input/search-input.component.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { MetadataService, ElasticsearchService } from '../../../services';
-import { MatAutocompleteSelectedEvent } from '@angular/material';
-import { SearchCompletion } from '../../../models';
-
-@Component({
- selector: 'app-search-input',
- templateUrl: './search-input.component.html',
- styleUrls: ['./search-input.component.scss']
-})
-export class SearchInputComponent implements OnInit {
-
- searchValue: string;
- options_autocomplete: Array<SearchCompletion>;
-
- constructor(
- private _metadataService: MetadataService,
- private _elasticSearchService: ElasticsearchService,
- ) {
- this.options_autocomplete = [];
- }
-
- ngOnInit() {
- this.searchValue = this._metadataService.searchString;
- this._metadataService.searchChange$.subscribe(
- () => {
- this.searchValue = this._metadataService.searchString;
- }
- );
- }
-
- searchChanged(key) {
- // This function is triggered when:
- // - the click on reset button, press key Enter, select option with the mouse:
- // we make a search query & clean the completion list
- // - any keyup in the search bar: we make the autocomplete query
- switch (key) {
- case 'ArrowDown':
- case 'ArrowUp':
- break;
- case 'Enter':
- case 'optionSelected':
- case 'reset':
- this._metadataService.searchChanged(this.searchValue);
- this.options_autocomplete = [];
- break;
- default:
- this._elasticSearchService.getAutoComplete(this.searchValue).subscribe(
- res => {
- this.options_autocomplete = res;
- }
- );
- break;
- }
-
- }
-
- displayAutoComplete(option): string | undefined {
- const value = option ? option : undefined;
- return value;
- }
-
- onSelectionChanged(event: MatAutocompleteSelectedEvent) {
- this.searchChanged('optionSelected');
- }
-
- resetSearchValue() {
- this.searchValue = '';
- this.searchChanged('reset');
- }
-
-}
diff --git a/webapp/src/app/geosource/components/sort/sort.component.html b/webapp/src/app/geosource/components/sort/sort.component.html
index f196400cf3c3609a8b55e07b8398e4850848b7e3..dd85b469b1b6754f3110f8883ec200b89727c463 100644
--- a/webapp/src/app/geosource/components/sort/sort.component.html
+++ b/webapp/src/app/geosource/components/sort/sort.component.html
@@ -1,24 +1,30 @@
-<mat-card>
- <div class="row align-items-center">
- <div class="col-sm-8">
- <mat-form-field class="sort-dropdown">
- <mat-select
- placeholder="Sort by"
- i18n-placeholder="@@global.sort"
- [(value)]="selectedOption.value"
- (change)="sortValueChanged()">
- <mat-option *ngFor="let option of options" [value]="option.value">
+<div>
+ <div class="columns is-vcentered">
+ <div class="column">
+ <span class="is-size-6" i18n="@@global.sort">Sort by</span>
+ </div>
+ <div class="column">
+ <div class="select is-info is-small">
+ <select [(value)]="selectedOption.value" (change)="sortValueChanged($event.target.value)">
+ <option *ngFor="let option of options" [value]="option.value">
{{ option.label }}
- </mat-option>
- </mat-select>
- </mat-form-field>
+ </option>
+ </select>
+ </div>
+
</div>
- <div class="col-sm-4">
+ <div class="column">
<div class="order-toggle" (click)="toggleOrder()">
- <mat-icon *ngIf="selectedOption.order === 'desc'; else downArrow">arrow_downward</mat-icon>
- <ng-template #downArrow><mat-icon>arrow_upward</mat-icon></ng-template>
+ <span *ngIf="selectedOption.order === 'desc'; else downArrow" class="icon">
+ <i class="material-icons">arrow_downward</i>
+ </span>
+ <ng-template #downArrow>
+ <span class="icon">
+ <i class="material-icons">arrow_upward</i>
+ </span>
+ </ng-template>
</div>
</div>
</div>
-</mat-card>
\ No newline at end of file
+</div>
diff --git a/webapp/src/app/geosource/components/sort/sort.component.scss b/webapp/src/app/geosource/components/sort/sort.component.scss
index c1f88ab3e35bf91dbba635b15ea5b7233335cf27..b9256ea22f46426f8732fc00b2dd57369b2f07c3 100644
--- a/webapp/src/app/geosource/components/sort/sort.component.scss
+++ b/webapp/src/app/geosource/components/sort/sort.component.scss
@@ -10,6 +10,6 @@
cursor: pointer;
}
-.mat-card {
- margin-bottom: 10px;
-}
\ No newline at end of file
+.icon {
+ vertical-align: middle;
+}
diff --git a/webapp/src/app/geosource/components/sort/sort.component.ts b/webapp/src/app/geosource/components/sort/sort.component.ts
index 4ca174e4c278d9150bcab1e4894b36605cea64bf..f03918a7ace3184ba15937fa96b07cab69f04e23 100644
--- a/webapp/src/app/geosource/components/sort/sort.component.ts
+++ b/webapp/src/app/geosource/components/sort/sort.component.ts
@@ -42,8 +42,9 @@ export class SortComponent implements OnInit {
this.selectedOption = this._metadataService.sortOptions;
}
- sortValueChanged() {
- this._metadataService.sortChanged(this.selectedOption.value);
+ sortValueChanged(value) {
+ this.selectedOption.value = value;
+ this._metadataService.sortChanged(value);
}
toggleOrder() {
diff --git a/webapp/src/index.html b/webapp/src/index.html
index c92af36f146d15e89d671e1a38b86cd1c657630d..0db9763af1e9fb8edd6c5c78a19468c20403583b 100644
--- a/webapp/src/index.html
+++ b/webapp/src/index.html
@@ -8,17 +8,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
- rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
+ <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+
</head>
<body>
<app-root>
<section class="AppLoader">
- <img src="assets/img/logo.svg" alt="Grand Lyon, la métropole">
-
+ <img src="assets/img/logo.svg" alt="Grand Lyon, la métropole">
+
</section>
</app-root>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/webapp/src/scss/_functions.scss b/webapp/src/scss/_functions.scss
deleted file mode 100644
index 1266d34bd9029922e92809b52827b479c7d9e8f9..0000000000000000000000000000000000000000
--- a/webapp/src/scss/_functions.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-// Bootstrap functions
-//
-// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
-
-// Ascending
-// Used to evaluate Sass maps like our grid breakpoints.
-@mixin _assert-ascending($map, $map-name) {
- $prev-key: null;
- $prev-num: null;
- @each $key, $num in $map {
- @if $prev-num == null {
- // Do nothing
- } @else if not comparable($prev-num, $num) {
- @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
- } @else if $prev-num >= $num {
- @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
- }
- $prev-key: $key;
- $prev-num: $num;
- }
-}
-
-// Starts at zero
-// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map) {
- $values: map-values($map);
- $first-value: nth($values, 1);
- @if $first-value != 0 {
- @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
- }
-}
-
-// Replace `$search` with `$replace` in `$string`
-// Used on our SVG icon backgrounds for custom forms.
-//
-// @author Hugo Giraudel
-// @param {String} $string - Initial string
-// @param {String} $search - Substring to replace
-// @param {String} $replace ('') - New value
-// @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
- $index: str-index($string, $search);
-
- @if $index {
- @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
- }
-
- @return $string;
-}
-
-// Color contrast
-@function color-yiq($color) {
- $r: red($color);
- $g: green($color);
- $b: blue($color);
-
- $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
-
- @if ($yiq >= $yiq-contrasted-threshold) {
- @return $yiq-text-dark;
- } @else {
- @return $yiq-text-light;
- }
-}
-
-// Retrieve color Sass maps
-@function color($key: "blue") {
- @return map-get($colors, $key);
-}
-
-@function theme-color($key: "primary") {
- @return map-get($theme-colors, $key);
-}
-
-@function gray($key: "100") {
- @return map-get($grays, $key);
-}
-
-// Request a theme color level
-@function theme-color-level($color-name: "primary", $level: 0) {
- $color: theme-color($color-name);
- $color-base: if($level > 0, #000, #fff);
- $level: abs($level);
-
- @return mix($color-base, $color, $level * $theme-color-interval);
-}
diff --git a/webapp/src/scss/_grid.scss b/webapp/src/scss/_grid.scss
deleted file mode 100644
index a227515379c4bd9979039bc0e86ca3626123b96b..0000000000000000000000000000000000000000
--- a/webapp/src/scss/_grid.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-// Container widths
-//
-// Set the container width, and override it for fixed navbars in media queries.
-
-@if $enable-grid-classes {
- .container {
- @include make-container();
- @include make-container-max-widths();
- }
-}
-
-// Fluid container
-//
-// Utilizes the mixin meant for fixed width containers, but with 100% width for
-// fluid, full width layouts.
-
-@if $enable-grid-classes {
- .container-fluid {
- @include make-container();
- }
-}
-
-// Row
-//
-// Rows contain and clear the floats of your columns.
-
-@if $enable-grid-classes {
- .row {
- @include make-row();
- }
-
- // Remove the negative margin from default .row, then the horizontal padding
- // from all immediate children columns (to prevent runaway style inheritance).
- .no-gutters {
- margin-right: 0;
- margin-left: 0;
-
- > .col,
- > [class*="col-"] {
- padding-right: 0;
- padding-left: 0;
- }
- }
-}
-
-// Columns
-//
-// Common styles for small and large grid columns
-
-@if $enable-grid-classes {
- @include make-grid-columns();
-}
diff --git a/webapp/src/scss/_variables.scss b/webapp/src/scss/_variables.scss
deleted file mode 100644
index be580deb334db623fe68d885df0823f6df945b87..0000000000000000000000000000000000000000
--- a/webapp/src/scss/_variables.scss
+++ /dev/null
@@ -1,894 +0,0 @@
-// Variables
-//
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-
-//
-// Color system
-//
-
-// stylelint-disable
-$white: #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black: #000 !default;
-
-$grays: () !default;
-$grays: map-merge((
- "100": $gray-100,
- "200": $gray-200,
- "300": $gray-300,
- "400": $gray-400,
- "500": $gray-500,
- "600": $gray-600,
- "700": $gray-700,
- "800": $gray-800,
- "900": $gray-900
-), $grays);
-
-$blue: #007bff !default;
-$indigo: #6610f2 !default;
-$purple: #6f42c1 !default;
-$pink: #e83e8c !default;
-$red: #dc3545 !default;
-$orange: #fd7e14 !default;
-$yellow: #ffc107 !default;
-$green: #28a745 !default;
-$teal: #20c997 !default;
-$cyan: #17a2b8 !default;
-
-$colors: () !default;
-$colors: map-merge((
- "blue": $blue,
- "indigo": $indigo,
- "purple": $purple,
- "pink": $pink,
- "red": $red,
- "orange": $orange,
- "yellow": $yellow,
- "green": $green,
- "teal": $teal,
- "cyan": $cyan,
- "white": $white,
- "gray": $gray-600,
- "gray-dark": $gray-800
-), $colors);
-
-$primary: $blue !default;
-$secondary: $gray-600 !default;
-$success: $green !default;
-$info: $cyan !default;
-$warning: $yellow !default;
-$danger: $red !default;
-$light: $gray-100 !default;
-$dark: $gray-800 !default;
-
-$theme-colors: () !default;
-$theme-colors: map-merge((
- "primary": $primary,
- "secondary": $secondary,
- "success": $success,
- "info": $info,
- "warning": $warning,
- "danger": $danger,
- "light": $light,
- "dark": $dark
-), $theme-colors);
-// stylelint-enable
-
-// Set a specific jump point for requesting color jumps
-$theme-color-interval: 8% !default;
-
-// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-$yiq-contrasted-threshold: 150 !default;
-
-// Customize the light and dark text colors for use in our YIQ color contrast function.
-$yiq-text-dark: $gray-900 !default;
-$yiq-text-light: $white !default;
-
-// Options
-//
-// Quickly modify global styling by enabling or disabling optional features.
-
-$enable-caret: true !default;
-$enable-rounded: true !default;
-$enable-shadows: false !default;
-$enable-gradients: false !default;
-$enable-transitions: true !default;
-$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
-$enable-grid-classes: true !default;
-$enable-print-styles: true !default;
-
-
-// Spacing
-//
-// Control the default styling of most Bootstrap elements by modifying these
-// variables. Mostly focused on spacing.
-// You can add more entries to the $spacers map, should you need more variation.
-
-// stylelint-disable
-$spacer: 1rem !default;
-$spacers: () !default;
-$spacers: map-merge((
- 0: 0,
- 1: ($spacer * .25),
- 2: ($spacer * .5),
- 3: $spacer,
- 4: ($spacer * 1.5),
- 5: ($spacer * 3)
-), $spacers);
-
-// This variable affects the `.h-*` and `.w-*` classes.
-$sizes: () !default;
-$sizes: map-merge((
- 25: 25%,
- 50: 50%,
- 75: 75%,
- 100: 100%
-), $sizes);
-// stylelint-enable
-
-// Body
-//
-// Settings for the `<body>` element.
-
-$body-bg: $white !default;
-$body-color: $gray-900 !default;
-
-// Links
-//
-// Style anchor elements.
-
-$link-color: theme-color("primary") !default;
-$link-decoration: none !default;
-$link-hover-color: darken($link-color, 15%) !default;
-$link-hover-decoration: underline !default;
-
-// Paragraphs
-//
-// Style p element.
-
-$paragraph-margin-bottom: 1rem !default;
-
-
-// Grid breakpoints
-//
-// Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
-
-$grid-breakpoints: (
- xs: 0,
- sm: 576px,
- md: 768px,
- lg: 992px,
- xl: 1200px
-) !default;
-
-@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints);
-
-
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
-
-$container-max-widths: (
- sm: 540px,
- md: 720px,
- lg: 960px,
- xl: 1140px
-) !default;
-
-@include _assert-ascending($container-max-widths, "$container-max-widths");
-
-
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
-
-$grid-columns: 12 !default;
-$grid-gutter-width: 30px !default;
-
-// Components
-//
-// Define common padding and border radius sizes and more.
-
-$line-height-lg: 1.5 !default;
-$line-height-sm: 1.5 !default;
-
-$border-width: 1px !default;
-$border-color: $gray-300 !default;
-
-$border-radius: .25rem !default;
-$border-radius-lg: .3rem !default;
-$border-radius-sm: .2rem !default;
-
-$component-active-color: $white !default;
-$component-active-bg: theme-color("primary") !default;
-
-$caret-width: .3em !default;
-
-$transition-base: all .2s ease-in-out !default;
-$transition-fade: opacity .15s linear !default;
-$transition-collapse: height .35s ease !default;
-
-
-// Fonts
-//
-// Font, line-height, and color for body text, headings, and more.
-
-// stylelint-disable value-keyword-case
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-$font-family-base: $font-family-sans-serif !default;
-// stylelint-enable value-keyword-case
-
-$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
-$font-size-lg: ($font-size-base * 1.25) !default;
-$font-size-sm: ($font-size-base * .875) !default;
-
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-bold: 700 !default;
-
-$font-weight-base: $font-weight-normal !default;
-$line-height-base: 1.5 !default;
-
-$h1-font-size: $font-size-base * 2.5 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.75 !default;
-$h4-font-size: $font-size-base * 1.5 !default;
-$h5-font-size: $font-size-base * 1.25 !default;
-$h6-font-size: $font-size-base !default;
-
-$headings-margin-bottom: ($spacer / 2) !default;
-$headings-font-family: inherit !default;
-$headings-font-weight: 500 !default;
-$headings-line-height: 1.2 !default;
-$headings-color: inherit !default;
-
-$display1-size: 6rem !default;
-$display2-size: 5.5rem !default;
-$display3-size: 4.5rem !default;
-$display4-size: 3.5rem !default;
-
-$display1-weight: 300 !default;
-$display2-weight: 300 !default;
-$display3-weight: 300 !default;
-$display4-weight: 300 !default;
-$display-line-height: $headings-line-height !default;
-
-$lead-font-size: ($font-size-base * 1.25) !default;
-$lead-font-weight: 300 !default;
-
-$small-font-size: 80% !default;
-
-$text-muted: $gray-600 !default;
-
-$blockquote-small-color: $gray-600 !default;
-$blockquote-font-size: ($font-size-base * 1.25) !default;
-
-$hr-border-color: rgba($black, .1) !default;
-$hr-border-width: $border-width !default;
-
-$mark-padding: .2em !default;
-
-$dt-font-weight: $font-weight-bold !default;
-
-$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;
-$nested-kbd-font-weight: $font-weight-bold !default;
-
-$list-inline-padding: .5rem !default;
-
-$mark-bg: #fcf8e3 !default;
-
-$hr-margin-y: $spacer !default;
-
-
-// Tables
-//
-// Customizes the `.table` component with basic values, each used across all table variations.
-
-$table-cell-padding: .75rem !default;
-$table-cell-padding-sm: .3rem !default;
-
-$table-bg: transparent !default;
-$table-accent-bg: rgba($black, .05) !default;
-$table-hover-bg: rgba($black, .075) !default;
-$table-active-bg: $table-hover-bg !default;
-
-$table-border-width: $border-width !default;
-$table-border-color: $gray-300 !default;
-
-$table-head-bg: $gray-200 !default;
-$table-head-color: $gray-700 !default;
-
-$table-dark-bg: $gray-900 !default;
-$table-dark-accent-bg: rgba($white, .05) !default;
-$table-dark-hover-bg: rgba($white, .075) !default;
-$table-dark-border-color: lighten($gray-900, 7.5%) !default;
-$table-dark-color: $body-bg !default;
-
-
-// Buttons + Forms
-//
-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
-
-$input-btn-padding-y: .375rem !default;
-$input-btn-padding-x: .75rem !default;
-$input-btn-line-height: $line-height-base !default;
-
-$input-btn-focus-width: .2rem !default;
-$input-btn-focus-color: rgba($component-active-bg, .25) !default;
-$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
-
-$input-btn-padding-y-sm: .25rem !default;
-$input-btn-padding-x-sm: .5rem !default;
-$input-btn-line-height-sm: $line-height-sm !default;
-
-$input-btn-padding-y-lg: .5rem !default;
-$input-btn-padding-x-lg: 1rem !default;
-$input-btn-line-height-lg: $line-height-lg !default;
-
-$input-btn-border-width: $border-width !default;
-
-
-// Buttons
-//
-// For each of Bootstrap's buttons, define text, background, and border color.
-
-$btn-padding-y: $input-btn-padding-y !default;
-$btn-padding-x: $input-btn-padding-x !default;
-$btn-line-height: $input-btn-line-height !default;
-
-$btn-padding-y-sm: $input-btn-padding-y-sm !default;
-$btn-padding-x-sm: $input-btn-padding-x-sm !default;
-$btn-line-height-sm: $input-btn-line-height-sm !default;
-
-$btn-padding-y-lg: $input-btn-padding-y-lg !default;
-$btn-padding-x-lg: $input-btn-padding-x-lg !default;
-$btn-line-height-lg: $input-btn-line-height-lg !default;
-
-$btn-border-width: $input-btn-border-width !default;
-
-$btn-font-weight: $font-weight-normal !default;
-$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
-$btn-focus-width: $input-btn-focus-width !default;
-$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$btn-disabled-opacity: .65 !default;
-$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
-
-$btn-link-disabled-color: $gray-600 !default;
-
-$btn-block-spacing-y: .5rem !default;
-
-// Allows for customizing button radius independently from global border radius
-$btn-border-radius: $border-radius !default;
-$btn-border-radius-lg: $border-radius-lg !default;
-$btn-border-radius-sm: $border-radius-sm !default;
-
-$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-
-// Forms
-
-$input-padding-y: $input-btn-padding-y !default;
-$input-padding-x: $input-btn-padding-x !default;
-$input-line-height: $input-btn-line-height !default;
-
-$input-padding-y-sm: $input-btn-padding-y-sm !default;
-$input-padding-x-sm: $input-btn-padding-x-sm !default;
-$input-line-height-sm: $input-btn-line-height-sm !default;
-
-$input-padding-y-lg: $input-btn-padding-y-lg !default;
-$input-padding-x-lg: $input-btn-padding-x-lg !default;
-$input-line-height-lg: $input-btn-line-height-lg !default;
-
-$input-bg: $white !default;
-$input-disabled-bg: $gray-200 !default;
-
-$input-color: $gray-700 !default;
-$input-border-color: $gray-400 !default;
-$input-border-width: $input-btn-border-width !default;
-$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;
-
-$input-border-radius: $border-radius !default;
-$input-border-radius-lg: $border-radius-lg !default;
-$input-border-radius-sm: $border-radius-sm !default;
-
-$input-focus-bg: $input-bg !default;
-$input-focus-border-color: lighten($component-active-bg, 25%) !default;
-$input-focus-color: $input-color !default;
-$input-focus-width: $input-btn-focus-width !default;
-$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
-
-$input-placeholder-color: $gray-600 !default;
-
-$input-height-border: $input-border-width * 2 !default;
-
-$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
-$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
-
-$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
-$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
-
-$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
-$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
-
-$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$form-text-margin-top: .25rem !default;
-
-$form-check-input-gutter: 1.25rem !default;
-$form-check-input-margin-y: .3rem !default;
-$form-check-input-margin-x: .25rem !default;
-
-$form-check-inline-margin-x: .75rem !default;
-$form-check-inline-input-margin-x: .3125rem !default;
-
-$form-group-margin-bottom: 1rem !default;
-
-$input-group-addon-color: $input-color !default;
-$input-group-addon-bg: $gray-200 !default;
-$input-group-addon-border-color: $input-border-color !default;
-
-$custom-control-gutter: 1.5rem !default;
-$custom-control-spacer-x: 1rem !default;
-
-$custom-control-indicator-size: 1rem !default;
-$custom-control-indicator-bg: $gray-300 !default;
-$custom-control-indicator-bg-size: 50% 50% !default;
-$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
-
-$custom-control-indicator-disabled-bg: $gray-200 !default;
-$custom-control-label-disabled-color: $gray-600 !default;
-
-$custom-control-indicator-checked-color: $component-active-color !default;
-$custom-control-indicator-checked-bg: $component-active-bg !default;
-$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
-$custom-control-indicator-checked-box-shadow: none !default;
-
-$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
-
-$custom-control-indicator-active-color: $component-active-color !default;
-$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;
-$custom-control-indicator-active-box-shadow: none !default;
-
-$custom-checkbox-indicator-border-radius: $border-radius !default;
-$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
-
-$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
-$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
-$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
-$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
-
-$custom-radio-indicator-border-radius: 50% !default;
-$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
-
-$custom-select-padding-y: .375rem !default;
-$custom-select-padding-x: .75rem !default;
-$custom-select-height: $input-height !default;
-$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
-$custom-select-line-height: $input-btn-line-height !default;
-$custom-select-color: $input-color !default;
-$custom-select-disabled-color: $gray-600 !default;
-$custom-select-bg: $white !default;
-$custom-select-disabled-bg: $gray-200 !default;
-$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
-$custom-select-indicator-color: $gray-800 !default;
-$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
-$custom-select-border-width: $input-btn-border-width !default;
-$custom-select-border-color: $input-border-color !default;
-$custom-select-border-radius: $border-radius !default;
-
-$custom-select-focus-border-color: $input-focus-border-color !default;
-$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
-
-$custom-select-font-size-sm: 75% !default;
-$custom-select-height-sm: $input-height-sm !default;
-
-$custom-select-font-size-lg: 125% !default;
-$custom-select-height-lg: $input-height-lg !default;
-
-$custom-file-height: $input-height !default;
-$custom-file-focus-border-color: $input-focus-border-color !default;
-$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;
-
-$custom-file-padding-y: $input-btn-padding-y !default;
-$custom-file-padding-x: $input-btn-padding-x !default;
-$custom-file-line-height: $input-btn-line-height !default;
-$custom-file-color: $input-color !default;
-$custom-file-bg: $input-bg !default;
-$custom-file-border-width: $input-btn-border-width !default;
-$custom-file-border-color: $input-border-color !default;
-$custom-file-border-radius: $input-border-radius !default;
-$custom-file-box-shadow: $input-box-shadow !default;
-$custom-file-button-color: $custom-file-color !default;
-$custom-file-button-bg: $input-group-addon-bg !default;
-$custom-file-text: (
- en: "Browse"
-) !default;
-
-
-// Form validation
-$form-feedback-margin-top: $form-text-margin-top !default;
-$form-feedback-font-size: $small-font-size !default;
-$form-feedback-valid-color: theme-color("success") !default;
-$form-feedback-invalid-color: theme-color("danger") !default;
-
-
-// Dropdowns
-//
-// Dropdown menu container and contents.
-
-$dropdown-min-width: 10rem !default;
-$dropdown-padding-y: .5rem !default;
-$dropdown-spacer: .125rem !default;
-$dropdown-bg: $white !default;
-$dropdown-border-color: rgba($black, .15) !default;
-$dropdown-border-radius: $border-radius !default;
-$dropdown-border-width: $border-width !default;
-$dropdown-divider-bg: $gray-200 !default;
-$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
-
-$dropdown-link-color: $gray-900 !default;
-$dropdown-link-hover-color: darken($gray-900, 5%) !default;
-$dropdown-link-hover-bg: $gray-100 !default;
-
-$dropdown-link-active-color: $component-active-color !default;
-$dropdown-link-active-bg: $component-active-bg !default;
-
-$dropdown-link-disabled-color: $gray-600 !default;
-
-$dropdown-item-padding-y: .25rem !default;
-$dropdown-item-padding-x: 1.5rem !default;
-
-$dropdown-header-color: $gray-600 !default;
-
-
-// Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-
-$zindex-dropdown: 1000 !default;
-$zindex-sticky: 1020 !default;
-$zindex-fixed: 1030 !default;
-$zindex-modal-backdrop: 1040 !default;
-$zindex-modal: 1050 !default;
-$zindex-popover: 1060 !default;
-$zindex-tooltip: 1070 !default;
-
-// Navs
-
-$nav-link-padding-y: .5rem !default;
-$nav-link-padding-x: 1rem !default;
-$nav-link-disabled-color: $gray-600 !default;
-
-$nav-tabs-border-color: $gray-300 !default;
-$nav-tabs-border-width: $border-width !default;
-$nav-tabs-border-radius: $border-radius !default;
-$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
-$nav-tabs-link-active-color: $gray-700 !default;
-$nav-tabs-link-active-bg: $body-bg !default;
-$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
-
-$nav-pills-border-radius: $border-radius !default;
-$nav-pills-link-active-color: $component-active-color !default;
-$nav-pills-link-active-bg: $component-active-bg !default;
-
-// Navbar
-
-$navbar-padding-y: ($spacer / 2) !default;
-$navbar-padding-x: $spacer !default;
-
-$navbar-nav-link-padding-x: .5rem !default;
-
-$navbar-brand-font-size: $font-size-lg !default;
-// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
-$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
-
-$navbar-toggler-padding-y: .25rem !default;
-$navbar-toggler-padding-x: .75rem !default;
-$navbar-toggler-font-size: $font-size-lg !default;
-$navbar-toggler-border-radius: $btn-border-radius !default;
-
-$navbar-dark-color: rgba($white, .5) !default;
-$navbar-dark-hover-color: rgba($white, .75) !default;
-$navbar-dark-active-color: $white !default;
-$navbar-dark-disabled-color: rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
-$navbar-dark-toggler-border-color: rgba($white, .1) !default;
-
-$navbar-light-color: rgba($black, .5) !default;
-$navbar-light-hover-color: rgba($black, .7) !default;
-$navbar-light-active-color: rgba($black, .9) !default;
-$navbar-light-disabled-color: rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
-$navbar-light-toggler-border-color: rgba($black, .1) !default;
-
-// Pagination
-
-$pagination-padding-y: .5rem !default;
-$pagination-padding-x: .75rem !default;
-$pagination-padding-y-sm: .25rem !default;
-$pagination-padding-x-sm: .5rem !default;
-$pagination-padding-y-lg: .75rem !default;
-$pagination-padding-x-lg: 1.5rem !default;
-$pagination-line-height: 1.25 !default;
-
-$pagination-color: $link-color !default;
-$pagination-bg: $white !default;
-$pagination-border-width: $border-width !default;
-$pagination-border-color: $gray-300 !default;
-
-$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
-
-$pagination-hover-color: $link-hover-color !default;
-$pagination-hover-bg: $gray-200 !default;
-$pagination-hover-border-color: $gray-300 !default;
-
-$pagination-active-color: $component-active-color !default;
-$pagination-active-bg: $component-active-bg !default;
-$pagination-active-border-color: $pagination-active-bg !default;
-
-$pagination-disabled-color: $gray-600 !default;
-$pagination-disabled-bg: $white !default;
-$pagination-disabled-border-color: $gray-300 !default;
-
-
-// Jumbotron
-
-$jumbotron-padding: 2rem !default;
-$jumbotron-bg: $gray-200 !default;
-
-
-// Cards
-
-$card-spacer-y: .75rem !default;
-$card-spacer-x: 1.25rem !default;
-$card-border-width: $border-width !default;
-$card-border-radius: $border-radius !default;
-$card-border-color: rgba($black, .125) !default;
-$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
-$card-cap-bg: rgba($black, .03) !default;
-$card-bg: $white !default;
-
-$card-img-overlay-padding: 1.25rem !default;
-
-$card-group-margin: ($grid-gutter-width / 2) !default;
-$card-deck-margin: $card-group-margin !default;
-
-$card-columns-count: 3 !default;
-$card-columns-gap: 1.25rem !default;
-$card-columns-margin: $card-spacer-y !default;
-
-
-// Tooltips
-
-$tooltip-font-size: $font-size-sm !default;
-$tooltip-max-width: 200px !default;
-$tooltip-color: $white !default;
-$tooltip-bg: $black !default;
-$tooltip-border-radius: $border-radius !default;
-$tooltip-opacity: .9 !default;
-$tooltip-padding-y: .25rem !default;
-$tooltip-padding-x: .5rem !default;
-$tooltip-margin: 0 !default;
-
-$tooltip-arrow-width: .8rem !default;
-$tooltip-arrow-height: .4rem !default;
-$tooltip-arrow-color: $tooltip-bg !default;
-
-
-// Popovers
-
-$popover-font-size: $font-size-sm !default;
-$popover-bg: $white !default;
-$popover-max-width: 276px !default;
-$popover-border-width: $border-width !default;
-$popover-border-color: rgba($black, .2) !default;
-$popover-border-radius: $border-radius-lg !default;
-$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
-
-$popover-header-bg: darken($popover-bg, 3%) !default;
-$popover-header-color: $headings-color !default;
-$popover-header-padding-y: .5rem !default;
-$popover-header-padding-x: .75rem !default;
-
-$popover-body-color: $body-color !default;
-$popover-body-padding-y: $popover-header-padding-y !default;
-$popover-body-padding-x: $popover-header-padding-x !default;
-
-$popover-arrow-width: 1rem !default;
-$popover-arrow-height: .5rem !default;
-$popover-arrow-color: $popover-bg !default;
-
-$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
-
-
-// Badges
-
-$badge-font-size: 75% !default;
-$badge-font-weight: $font-weight-bold !default;
-$badge-padding-y: .25em !default;
-$badge-padding-x: .4em !default;
-$badge-border-radius: $border-radius !default;
-
-$badge-pill-padding-x: .6em !default;
-// Use a higher than normal value to ensure completely rounded edges when
-// customizing padding or font-size on labels.
-$badge-pill-border-radius: 10rem !default;
-
-
-// Modals
-
-// Padding applied to the modal body
-$modal-inner-padding: 1rem !default;
-
-$modal-dialog-margin: .5rem !default;
-$modal-dialog-margin-y-sm-up: 1.75rem !default;
-
-$modal-title-line-height: $line-height-base !default;
-
-$modal-content-bg: $white !default;
-$modal-content-border-color: rgba($black, .2) !default;
-$modal-content-border-width: $border-width !default;
-$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
-$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
-
-$modal-backdrop-bg: $black !default;
-$modal-backdrop-opacity: .5 !default;
-$modal-header-border-color: $gray-200 !default;
-$modal-footer-border-color: $modal-header-border-color !default;
-$modal-header-border-width: $modal-content-border-width !default;
-$modal-footer-border-width: $modal-header-border-width !default;
-$modal-header-padding: 1rem !default;
-
-$modal-lg: 800px !default;
-$modal-md: 500px !default;
-$modal-sm: 300px !default;
-
-$modal-transition: transform .3s ease-out !default;
-
-
-// Alerts
-//
-// Define alert colors, border radius, and padding.
-
-$alert-padding-y: .75rem !default;
-$alert-padding-x: 1.25rem !default;
-$alert-margin-bottom: 1rem !default;
-$alert-border-radius: $border-radius !default;
-$alert-link-font-weight: $font-weight-bold !default;
-$alert-border-width: $border-width !default;
-
-$alert-bg-level: -10 !default;
-$alert-border-level: -9 !default;
-$alert-color-level: 6 !default;
-
-
-// Progress bars
-
-$progress-height: 1rem !default;
-$progress-font-size: ($font-size-base * .75) !default;
-$progress-bg: $gray-200 !default;
-$progress-border-radius: $border-radius !default;
-$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
-$progress-bar-color: $white !default;
-$progress-bar-bg: theme-color("primary") !default;
-$progress-bar-animation-timing: 1s linear infinite !default;
-$progress-bar-transition: width .6s ease !default;
-
-// List group
-
-$list-group-bg: $white !default;
-$list-group-border-color: rgba($black, .125) !default;
-$list-group-border-width: $border-width !default;
-$list-group-border-radius: $border-radius !default;
-
-$list-group-item-padding-y: .75rem !default;
-$list-group-item-padding-x: 1.25rem !default;
-
-$list-group-hover-bg: $gray-100 !default;
-$list-group-active-color: $component-active-color !default;
-$list-group-active-bg: $component-active-bg !default;
-$list-group-active-border-color: $list-group-active-bg !default;
-
-$list-group-disabled-color: $gray-600 !default;
-$list-group-disabled-bg: $list-group-bg !default;
-
-$list-group-action-color: $gray-700 !default;
-$list-group-action-hover-color: $list-group-action-color !default;
-
-$list-group-action-active-color: $body-color !default;
-$list-group-action-active-bg: $gray-200 !default;
-
-
-// Image thumbnails
-
-$thumbnail-padding: .25rem !default;
-$thumbnail-bg: $body-bg !default;
-$thumbnail-border-width: $border-width !default;
-$thumbnail-border-color: $gray-300 !default;
-$thumbnail-border-radius: $border-radius !default;
-$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
-
-
-// Figures
-
-$figure-caption-font-size: 90% !default;
-$figure-caption-color: $gray-600 !default;
-
-
-// Breadcrumbs
-
-$breadcrumb-padding-y: .75rem !default;
-$breadcrumb-padding-x: 1rem !default;
-$breadcrumb-item-padding: .5rem !default;
-
-$breadcrumb-margin-bottom: 1rem !default;
-
-$breadcrumb-bg: $gray-200 !default;
-$breadcrumb-divider-color: $gray-600 !default;
-$breadcrumb-active-color: $gray-600 !default;
-$breadcrumb-divider: "/" !default;
-
-
-// Carousel
-
-$carousel-control-color: $white !default;
-$carousel-control-width: 15% !default;
-$carousel-control-opacity: .5 !default;
-
-$carousel-indicator-width: 30px !default;
-$carousel-indicator-height: 3px !default;
-$carousel-indicator-spacer: 3px !default;
-$carousel-indicator-active-bg: $white !default;
-
-$carousel-caption-width: 70% !default;
-$carousel-caption-color: $white !default;
-
-$carousel-control-icon-width: 20px !default;
-
-$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
-$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
-
-$carousel-transition: transform .6s ease !default;
-
-
-// Close
-
-$close-font-size: $font-size-base * 1.5 !default;
-$close-font-weight: $font-weight-bold !default;
-$close-color: $black !default;
-$close-text-shadow: 0 1px 0 $white !default;
-
-// Code
-
-$code-font-size: 87.5% !default;
-$code-color: $pink !default;
-
-$kbd-padding-y: .2rem !default;
-$kbd-padding-x: .4rem !default;
-$kbd-font-size: $code-font-size !default;
-$kbd-color: $white !default;
-$kbd-bg: $gray-900 !default;
-
-$pre-color: $gray-900 !default;
-$pre-scrollable-max-height: 340px !default;
-
-
-// Printing
-$print-page-size: a3 !default;
-$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
diff --git a/webapp/src/scss/bootstrap-grid.scss b/webapp/src/scss/bootstrap-grid.scss
deleted file mode 100644
index 26c0dc89c284609ece9e6f9f14a53ba3d708107e..0000000000000000000000000000000000000000
--- a/webapp/src/scss/bootstrap-grid.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-/*!
- * Bootstrap Grid v4.0.0 (https://getbootstrap.com)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-@at-root {
- @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
-}
-
-html {
- box-sizing: border-box;
- -ms-overflow-style: scrollbar;
-}
-
-*,
-*::before,
-*::after {
- box-sizing: inherit;
-}
-
-@import "functions";
-@import "variables";
-
-@import "mixins/breakpoints";
-@import "mixins/grid-framework";
-@import "mixins/grid";
-
-@import "grid";
-@import "utilities/display";
-@import "utilities/flex";
diff --git a/webapp/src/scss/mixins/_breakpoints.scss b/webapp/src/scss/mixins/_breakpoints.scss
deleted file mode 100644
index d1ad684cc76e58d07333a38e0d6e0451b8f47de8..0000000000000000000000000000000000000000
--- a/webapp/src/scss/mixins/_breakpoints.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-// Breakpoint viewport sizes and media queries.
-//
-// Breakpoints are defined as a map of (name: minimum width), order from small to large:
-//
-// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
-//
-// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
-
-// Name of the next breakpoint, or null for the last breakpoint.
-//
-// >> breakpoint-next(sm)
-// md
-// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-// md
-// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
-// md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
- $n: index($breakpoint-names, $name);
- @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
-}
-
-// Minimum breakpoint width. Null for the smallest (first) breakpoint.
-//
-// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-// 576px
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
- $min: map-get($breakpoints, $name);
- @return if($min != 0, $min, null);
-}
-
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.02px
-// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
-// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
-// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
-// See https://bugs.webkit.org/show_bug.cgi?id=178261
-//
-// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-// 767.98px
-@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
- $next: breakpoint-next($name, $breakpoints);
- @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
-}
-
-// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
-// Useful for making responsive utilities.
-//
-// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-// "" (Returns a blank string)
-// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-// "-sm"
-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
- @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
-}
-
-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-// Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
- $min: breakpoint-min($name, $breakpoints);
- @if $min {
- @media (min-width: $min) {
- @content;
- }
- } @else {
- @content;
- }
-}
-
-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-// Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
- $max: breakpoint-max($name, $breakpoints);
- @if $max {
- @media (max-width: $max) {
- @content;
- }
- } @else {
- @content;
- }
-}
-
-// Media that spans multiple breakpoint widths.
-// Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
- $min: breakpoint-min($lower, $breakpoints);
- $max: breakpoint-max($upper, $breakpoints);
-
- @if $min != null and $max != null {
- @media (min-width: $min) and (max-width: $max) {
- @content;
- }
- } @else if $max == null {
- @include media-breakpoint-up($lower, $breakpoints) {
- @content;
- }
- } @else if $min == null {
- @include media-breakpoint-down($upper, $breakpoints) {
- @content;
- }
- }
-}
-
-// Media between the breakpoint's minimum and maximum widths.
-// No minimum for the smallest breakpoint, and no maximum for the largest one.
-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
- $min: breakpoint-min($name, $breakpoints);
- $max: breakpoint-max($name, $breakpoints);
-
- @if $min != null and $max != null {
- @media (min-width: $min) and (max-width: $max) {
- @content;
- }
- } @else if $max == null {
- @include media-breakpoint-up($name, $breakpoints) {
- @content;
- }
- } @else if $min == null {
- @include media-breakpoint-down($name, $breakpoints) {
- @content;
- }
- }
-}
diff --git a/webapp/src/scss/mixins/_grid-framework.scss b/webapp/src/scss/mixins/_grid-framework.scss
deleted file mode 100644
index 7b37f868f198be0b678dda85a84bc058c247efeb..0000000000000000000000000000000000000000
--- a/webapp/src/scss/mixins/_grid-framework.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-// Framework grid generation
-//
-// Used only by Bootstrap to generate the correct number of grid classes given
-// any value of `$grid-columns`.
-
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
- // Common properties for all breakpoints
- %grid-column {
- position: relative;
- width: 100%;
- min-height: 1px; // Prevent columns from collapsing when empty
- padding-right: ($gutter / 2);
- padding-left: ($gutter / 2);
- }
-
- @each $breakpoint in map-keys($breakpoints) {
- $infix: breakpoint-infix($breakpoint, $breakpoints);
-
- // Allow columns to stretch full width below their breakpoints
- @for $i from 1 through $columns {
- .col#{$infix}-#{$i} {
- @extend %grid-column;
- }
- }
- .col#{$infix},
- .col#{$infix}-auto {
- @extend %grid-column;
- }
-
- @include media-breakpoint-up($breakpoint, $breakpoints) {
- // Provide basic `.col-{bp}` classes for equal-width flexbox columns
- .col#{$infix} {
- flex-basis: 0;
- flex-grow: 1;
- max-width: 100%;
- }
- .col#{$infix}-auto {
- flex: 0 0 auto;
- width: auto;
- max-width: none; // Reset earlier grid tiers
- }
-
- @for $i from 1 through $columns {
- .col#{$infix}-#{$i} {
- @include make-col($i, $columns);
- }
- }
-
- .order#{$infix}-first { order: -1; }
-
- .order#{$infix}-last { order: $columns + 1; }
-
- @for $i from 0 through $columns {
- .order#{$infix}-#{$i} { order: $i; }
- }
-
- // `$columns - 1` because offsetting by the width of an entire row isn't possible
- @for $i from 0 through ($columns - 1) {
- @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
- .offset#{$infix}-#{$i} {
- @include make-col-offset($i, $columns);
- }
- }
- }
- }
- }
-}
diff --git a/webapp/src/scss/mixins/_grid.scss b/webapp/src/scss/mixins/_grid.scss
deleted file mode 100644
index b75ebcbca0ceec5d315ec319b7cd1a5907c49f19..0000000000000000000000000000000000000000
--- a/webapp/src/scss/mixins/_grid.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-/// Grid system
-//
-// Generate semantic grid columns with these mixins.
-
-@mixin make-container() {
- width: 100%;
- padding-right: ($grid-gutter-width / 2);
- padding-left: ($grid-gutter-width / 2);
- margin-right: auto;
- margin-left: auto;
-}
-
-
-// For each breakpoint, define the maximum width of the container in a media query
-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
- @each $breakpoint, $container-max-width in $max-widths {
- @include media-breakpoint-up($breakpoint, $breakpoints) {
- max-width: $container-max-width;
- }
- }
-}
-
-@mixin make-row() {
- display: flex;
- flex-wrap: wrap;
- margin-right: ($grid-gutter-width / -2);
- margin-left: ($grid-gutter-width / -2);
-}
-
-@mixin make-col-ready() {
- position: relative;
- // Prevent columns from becoming too narrow when at smaller grid tiers by
- // always setting `width: 100%;`. This works because we use `flex` values
- // later on to override this initial width.
- width: 100%;
- min-height: 1px; // Prevent collapsing
- padding-right: ($grid-gutter-width / 2);
- padding-left: ($grid-gutter-width / 2);
-}
-
-@mixin make-col($size, $columns: $grid-columns) {
- flex: 0 0 percentage($size / $columns);
- // Add a `max-width` to ensure content within each column does not blow out
- // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
- // do not appear to require this.
- max-width: percentage($size / $columns);
-}
-
-@mixin make-col-offset($size, $columns: $grid-columns) {
- $num: $size / $columns;
- margin-left: if($num == 0, 0, percentage($num));
-}
diff --git a/webapp/src/scss/mystyles.scss b/webapp/src/scss/mystyles.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b42b1cdf621cfe80a4f8dd2318365a968e4a4390
--- /dev/null
+++ b/webapp/src/scss/mystyles.scss
@@ -0,0 +1,38 @@
+// 1. Import the initial variables
+@import "./sass/utilities/initial-variables";
+@import "./sass/utilities/functions";
+
+// 2. Set your own initial variables
+// Update blue
+$main: #17252b;
+// Add pink and its invert
+// $link: #ff2d2d;
+$red: #ff2d2d;
+$yellow: #ffaa00;
+// Add a serif family
+$family-sans-serif: "Lato";
+$footer-background-color: black;
+$title-font: 'Open Sans';
+
+// Font size setting
+$size-1: 3rem;
+$size-2: 2.5rem;
+$size-3: 2rem;
+$size-4: 1.25rem;
+$size-5: 1rem;
+$size-6: 0.875rem;
+$size-7: 0.75rem ;
+
+// 3. Set the derived variables
+// Use the new pink as the primary color
+$primary: $main;
+// Use the new serif family
+$family-primary: $family-sans-serif;
+
+// 6. Import the rest of Bulma
+@import "sass/utilities/_all";
+@import "sass/base/_all";
+@import "sass/elements/_all";
+@import "sass/components/_all";
+@import "sass/grid/_all";
+@import "sass/layout/_all";
\ No newline at end of file
diff --git a/webapp/src/scss/sass/base/_all.sass b/webapp/src/scss/sass/base/_all.sass
new file mode 100644
index 0000000000000000000000000000000000000000..e913d6ba394b4ce729fa230596c09360b9c4fd24
--- /dev/null
+++ b/webapp/src/scss/sass/base/_all.sass
@@ -0,0 +1,5 @@
+@charset "utf-8"
+
+@import "minireset.sass"
+@import "generic.sass"
+@import "helpers.sass"
diff --git a/webapp/src/scss/sass/base/generic.sass b/webapp/src/scss/sass/base/generic.sass
new file mode 100644
index 0000000000000000000000000000000000000000..bb0e37af383aff55fd503d652a95d12dec4e9f43
--- /dev/null
+++ b/webapp/src/scss/sass/base/generic.sass
@@ -0,0 +1,127 @@
+$body-background-color: $white !default
+$body-size: 16px !default
+$body-rendering: optimizeLegibility !default
+$body-family: $family-primary !default
+$body-color: $text !default
+$body-weight: $weight-normal !default
+$body-line-height: 1.5 !default
+
+$code-family: $family-code !default
+$code-padding: 0.25em 0.5em 0.25em !default
+$code-weight: normal !default
+$code-size: 0.875em !default
+
+$hr-background-color: $background !default
+$hr-height: 2px !default
+$hr-margin: 1.5rem 0 !default
+
+$strong-color: $text-strong !default
+$strong-weight: $weight-bold !default
+
+html
+ background-color: $body-background-color
+ font-size: $body-size
+ -moz-osx-font-smoothing: grayscale
+ -webkit-font-smoothing: antialiased
+ min-width: 300px
+ overflow-x: hidden
+ overflow-y: scroll
+ text-rendering: $body-rendering
+ text-size-adjust: 100%
+
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+section
+ display: block
+
+body,
+button,
+input,
+select,
+textarea
+ font-family: $body-family
+
+code,
+pre
+ -moz-osx-font-smoothing: auto
+ -webkit-font-smoothing: auto
+ font-family: $code-family
+
+body
+ color: $body-color
+ font-size: 1rem
+ font-weight: $body-weight
+ line-height: $body-line-height
+
+// Inline
+
+a
+ color: $link
+ cursor: pointer
+ text-decoration: none
+ strong
+ color: currentColor
+ &:hover
+ color: $link-hover
+
+code
+ background-color: $code-background
+ color: $code
+ font-size: $code-size
+ font-weight: $code-weight
+ padding: $code-padding
+
+hr
+ background-color: $hr-background-color
+ border: none
+ display: block
+ height: $hr-height
+ margin: $hr-margin
+
+img
+ height: auto
+ max-width: 100%
+
+input[type="checkbox"],
+input[type="radio"]
+ vertical-align: baseline
+
+small
+ font-size: 0.875em
+
+span
+ font-style: inherit
+ font-weight: inherit
+
+strong
+ color: $strong-color
+ font-weight: $strong-weight
+
+// Block
+
+pre
+ +overflow-touch
+ background-color: $pre-background
+ color: $pre
+ font-size: 0.875em
+ overflow-x: auto
+ padding: 1.25rem 1.5rem
+ white-space: pre
+ word-wrap: normal
+ code
+ background-color: transparent
+ color: currentColor
+ font-size: 1em
+ padding: 0
+
+table
+ td,
+ th
+ text-align: left
+ vertical-align: top
+ th
+ color: $text-strong
diff --git a/webapp/src/scss/sass/base/helpers.sass b/webapp/src/scss/sass/base/helpers.sass
new file mode 100644
index 0000000000000000000000000000000000000000..32cafa4f7eb04e329e5e34214a19ffd7af098e63
--- /dev/null
+++ b/webapp/src/scss/sass/base/helpers.sass
@@ -0,0 +1,251 @@
+// Float
+
+.is-clearfix
+ +clearfix
+
+.is-pulled-left
+ float: left !important
+
+.is-pulled-right
+ float: right !important
+
+// Overflow
+
+.is-clipped
+ overflow: hidden !important
+
+// Overlay
+
+.is-overlay
+ +overlay
+
+// Typography
+
+=typography-size($target:'')
+ @each $size in $sizes
+ $i: index($sizes, $size)
+ .is-size-#{$i}#{if($target == '', '', '-' + $target)}
+ font-size: $size !important
+
++typography-size()
+
++mobile
+ +typography-size('mobile')
+
++tablet
+ +typography-size('tablet')
+
++touch
+ +typography-size('touch')
+
++desktop
+ +typography-size('desktop')
+
++widescreen
+ +typography-size('widescreen')
+
++fullhd
+ +typography-size('fullhd')
+
+$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
+
+@each $alignment, $text-align in $alignments
+ .has-text-#{$alignment}
+ text-align: #{$text-align} !important
+
+@each $alignment, $text-align in $alignments
+ +mobile
+ .has-text-#{$alignment}-mobile
+ text-align: #{$text-align} !important
+ +tablet
+ .has-text-#{$alignment}-tablet
+ text-align: #{$text-align} !important
+ +tablet-only
+ .has-text-#{$alignment}-tablet-only
+ text-align: #{$text-align} !important
+ +touch
+ .has-text-#{$alignment}-touch
+ text-align: #{$text-align} !important
+ +desktop
+ .has-text-#{$alignment}-desktop
+ text-align: #{$text-align} !important
+ +desktop-only
+ .has-text-#{$alignment}-desktop-only
+ text-align: #{$text-align} !important
+ +widescreen
+ .has-text-#{$alignment}-widescreen
+ text-align: #{$text-align} !important
+ +widescreen-only
+ .has-text-#{$alignment}-widescreen-only
+ text-align: #{$text-align} !important
+ +fullhd
+ .has-text-#{$alignment}-fullhd
+ text-align: #{$text-align} !important
+
+.is-capitalized
+ text-transform: capitalize !important
+
+.is-lowercase
+ text-transform: lowercase !important
+
+.is-uppercase
+ text-transform: uppercase !important
+
+.is-italic
+ font-style: italic !important
+
+@each $name, $pair in $colors
+ $color: nth($pair, 1)
+ .has-text-#{$name}
+ color: $color !important
+ a.has-text-#{$name}
+ &:hover,
+ &:focus
+ color: darken($color, 10%) !important
+ .has-background-#{$name}
+ background-color: $color !important
+
+@each $name, $shade in $shades
+ .has-text-#{$name}
+ color: $shade !important
+ .has-background-#{$name}
+ background-color: $shade !important
+
+.has-text-weight-light
+ font-weight: $weight-light !important
+.has-text-weight-normal
+ font-weight: $weight-normal !important
+.has-text-weight-semibold
+ font-weight: $weight-semibold !important
+.has-text-weight-bold
+ font-weight: $weight-bold !important
+
+// Visibility
+
+$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
+
+@each $display in $displays
+ .is-#{$display}
+ display: #{$display} !important
+ +mobile
+ .is-#{$display}-mobile
+ display: #{$display} !important
+ +tablet
+ .is-#{$display}-tablet
+ display: #{$display} !important
+ +tablet-only
+ .is-#{$display}-tablet-only
+ display: #{$display} !important
+ +touch
+ .is-#{$display}-touch
+ display: #{$display} !important
+ +desktop
+ .is-#{$display}-desktop
+ display: #{$display} !important
+ +desktop-only
+ .is-#{$display}-desktop-only
+ display: #{$display} !important
+ +widescreen
+ .is-#{$display}-widescreen
+ display: #{$display} !important
+ +widescreen-only
+ .is-#{$display}-widescreen-only
+ display: #{$display} !important
+ +fullhd
+ .is-#{$display}-fullhd
+ display: #{$display} !important
+
+.is-hidden
+ display: none !important
+
++mobile
+ .is-hidden-mobile
+ display: none !important
+
++tablet
+ .is-hidden-tablet
+ display: none !important
+
++tablet-only
+ .is-hidden-tablet-only
+ display: none !important
+
++touch
+ .is-hidden-touch
+ display: none !important
+
++desktop
+ .is-hidden-desktop
+ display: none !important
+
++desktop-only
+ .is-hidden-desktop-only
+ display: none !important
+
++widescreen
+ .is-hidden-widescreen
+ display: none !important
+
++widescreen-only
+ .is-hidden-widescreen-only
+ display: none !important
+
++fullhd
+ .is-hidden-fullhd
+ display: none !important
+
+.is-invisible
+ visibility: hidden !important
+
++mobile
+ .is-invisible-mobile
+ visibility: hidden !important
+
++tablet
+ .is-invisible-tablet
+ visibility: hidden !important
+
++tablet-only
+ .is-invisible-tablet-only
+ visibility: hidden !important
+
++touch
+ .is-invisible-touch
+ visibility: hidden !important
+
++desktop
+ .is-invisible-desktop
+ visibility: hidden !important
+
++desktop-only
+ .is-invisible-desktop-only
+ visibility: hidden !important
+
++widescreen
+ .is-invisible-widescreen
+ visibility: hidden !important
+
++widescreen-only
+ .is-invisible-widescreen-only
+ visibility: hidden !important
+
++fullhd
+ .is-invisible-fullhd
+ visibility: hidden !important
+
+// Other
+
+.is-marginless
+ margin: 0 !important
+
+.is-paddingless
+ padding: 0 !important
+
+.is-radiusless
+ border-radius: 0 !important
+
+.is-shadowless
+ box-shadow: none !important
+
+.is-unselectable
+ +unselectable
diff --git a/webapp/src/scss/sass/base/minireset.sass b/webapp/src/scss/sass/base/minireset.sass
new file mode 100644
index 0000000000000000000000000000000000000000..e99311cf1fb7d5b8013203aaac7a01da0f5b21c1
--- /dev/null
+++ b/webapp/src/scss/sass/base/minireset.sass
@@ -0,0 +1,79 @@
+/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
+// Blocks
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+ margin: 0
+ padding: 0
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+ font-size: 100%
+ font-weight: normal
+
+// List
+ul
+ list-style: none
+
+// Form
+button,
+input,
+select,
+textarea
+ margin: 0
+
+// Box sizing
+html
+ box-sizing: border-box
+
+*
+ &,
+ &::before,
+ &::after
+ box-sizing: inherit
+
+// Media
+img,
+audio,
+video
+ height: auto
+ max-width: 100%
+
+// Iframe
+iframe
+ border: 0
+
+// Table
+table
+ border-collapse: collapse
+ border-spacing: 0
+
+td,
+th
+ padding: 0
+ text-align: left
diff --git a/webapp/src/scss/sass/components/_all.sass b/webapp/src/scss/sass/components/_all.sass
new file mode 100644
index 0000000000000000000000000000000000000000..1de2c214ed00a9f759688f65c5a8c258b55f415f
--- /dev/null
+++ b/webapp/src/scss/sass/components/_all.sass
@@ -0,0 +1,14 @@
+@charset "utf-8"
+
+@import "breadcrumb.sass"
+@import "card.sass"
+@import "dropdown.sass"
+@import "level.sass"
+@import "media.sass"
+@import "menu.sass"
+@import "message.sass"
+@import "modal.sass"
+@import "navbar.sass"
+@import "pagination.sass"
+@import "panel.sass"
+@import "tabs.sass"
diff --git a/webapp/src/scss/sass/components/breadcrumb.sass b/webapp/src/scss/sass/components/breadcrumb.sass
new file mode 100644
index 0000000000000000000000000000000000000000..acc9c3a82a5141fac495b966e6c1e2ae375af282
--- /dev/null
+++ b/webapp/src/scss/sass/components/breadcrumb.sass
@@ -0,0 +1,75 @@
+$breadcrumb-item-color: $link !default
+$breadcrumb-item-hover-color: $link-hover !default
+$breadcrumb-item-active-color: $text-strong !default
+
+$breadcrumb-item-padding-vertical: 0 !default
+$breadcrumb-item-padding-horizontal: 0.75em !default
+
+$breadcrumb-item-separator-color: $grey-light !default
+
+.breadcrumb
+ +block
+ +unselectable
+ font-size: $size-normal
+ white-space: nowrap
+ a
+ align-items: center
+ color: $breadcrumb-item-color
+ display: flex
+ justify-content: center
+ padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
+ &:hover
+ color: $breadcrumb-item-hover-color
+ li
+ align-items: center
+ display: flex
+ &:first-child a
+ padding-left: 0
+ &.is-active
+ a
+ color: $breadcrumb-item-active-color
+ cursor: default
+ pointer-events: none
+ & + li::before
+ color: $breadcrumb-item-separator-color
+ content: "\0002f"
+ ul,
+ ol
+ align-items: flex-start
+ display: flex
+ flex-wrap: wrap
+ justify-content: flex-start
+ .icon
+ &:first-child
+ margin-right: 0.5em
+ &:last-child
+ margin-left: 0.5em
+ // Alignment
+ &.is-centered
+ ol,
+ ul
+ justify-content: center
+ &.is-right
+ ol,
+ ul
+ justify-content: flex-end
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ &.is-large
+ font-size: $size-large
+ // Styles
+ &.has-arrow-separator
+ li + li::before
+ content: "\02192"
+ &.has-bullet-separator
+ li + li::before
+ content: "\02022"
+ &.has-dot-separator
+ li + li::before
+ content: "\000b7"
+ &.has-succeeds-separator
+ li + li::before
+ content: "\0227B"
diff --git a/webapp/src/scss/sass/components/card.sass b/webapp/src/scss/sass/components/card.sass
new file mode 100644
index 0000000000000000000000000000000000000000..14d2dad1e23380e6ab9029e430ade695790600f0
--- /dev/null
+++ b/webapp/src/scss/sass/components/card.sass
@@ -0,0 +1,74 @@
+$card-color: $text !default
+$card-background-color: $white !default
+$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+
+$card-header-background-color: none !default
+$card-header-color: $text-strong !default
+$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
+$card-header-weight: $weight-bold !default
+
+$card-content-background-color: none !default
+
+$card-footer-background-color: none !default
+$card-footer-border-top: 1px solid $border !default
+
+.card
+ background-color: $card-background-color
+ box-shadow: $card-shadow
+ color: $card-color
+ max-width: 100%
+ position: relative
+
+.card-header
+ background-color: $card-header-background-color
+ align-items: stretch
+ box-shadow: $card-header-shadow
+ display: flex
+
+.card-header-title
+ align-items: center
+ color: $card-header-color
+ display: flex
+ flex-grow: 1
+ font-weight: $card-header-weight
+ padding: 0.75rem
+ &.is-centered
+ justify-content: center
+
+.card-header-icon
+ align-items: center
+ cursor: pointer
+ display: flex
+ justify-content: center
+ padding: 0.75rem
+
+.card-image
+ display: block
+ position: relative
+
+.card-content
+ background-color: $card-content-background-color
+ padding: 1.5rem
+
+.card-footer
+ background-color: $card-footer-background-color
+ border-top: $card-footer-border-top
+ align-items: stretch
+ display: flex
+
+.card-footer-item
+ align-items: center
+ display: flex
+ flex-basis: 0
+ flex-grow: 1
+ flex-shrink: 0
+ justify-content: center
+ padding: 0.75rem
+ &:not(:last-child)
+ border-right: $card-footer-border-top
+
+// Combinations
+
+.card
+ .media:not(:last-child)
+ margin-bottom: 0.75rem
diff --git a/webapp/src/scss/sass/components/dropdown.sass b/webapp/src/scss/sass/components/dropdown.sass
new file mode 100644
index 0000000000000000000000000000000000000000..6a0eaeb7a27cbe628a0246b0389434727c2c1ae6
--- /dev/null
+++ b/webapp/src/scss/sass/components/dropdown.sass
@@ -0,0 +1,74 @@
+$dropdown-content-background-color: $white !default
+$dropdown-content-arrow: $link !default
+$dropdown-content-offset: 4px !default
+$dropdown-content-radius: $radius !default
+$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$dropdown-content-z: 20 !default
+
+$dropdown-item-color: $grey-dark !default
+$dropdown-item-hover-color: $black !default
+$dropdown-item-hover-background-color: $background !default
+$dropdown-item-active-color: $link-invert !default
+$dropdown-item-active-background-color: $link !default
+
+$dropdown-divider-background-color: $border !default
+
+.dropdown
+ display: inline-flex
+ position: relative
+ vertical-align: top
+ &.is-active,
+ &.is-hoverable:hover
+ .dropdown-menu
+ display: block
+ &.is-right
+ .dropdown-menu
+ left: auto
+ right: 0
+ &.is-up
+ .dropdown-menu
+ bottom: 100%
+ padding-bottom: $dropdown-content-offset
+ padding-top: initial
+ top: auto
+
+.dropdown-menu
+ display: none
+ left: 0
+ min-width: 12rem
+ padding-top: $dropdown-content-offset
+ position: absolute
+ top: 100%
+ z-index: $dropdown-content-z
+
+.dropdown-content
+ background-color: $dropdown-content-background-color
+ border-radius: $dropdown-content-radius
+ box-shadow: $dropdown-content-shadow
+ padding-bottom: 0.5rem
+ padding-top: 0.5rem
+
+.dropdown-item
+ color: $dropdown-item-color
+ display: block
+ font-size: 0.875rem
+ line-height: 1.5
+ padding: 0.375rem 1rem
+ position: relative
+
+a.dropdown-item
+ padding-right: 3rem
+ white-space: nowrap
+ &:hover
+ background-color: $dropdown-item-hover-background-color
+ color: $dropdown-item-hover-color
+ &.is-active
+ background-color: $dropdown-item-active-background-color
+ color: $dropdown-item-active-color
+
+.dropdown-divider
+ background-color: $dropdown-divider-background-color
+ border: none
+ display: block
+ height: 1px
+ margin: 0.5rem 0
diff --git a/webapp/src/scss/sass/components/level.sass b/webapp/src/scss/sass/components/level.sass
new file mode 100644
index 0000000000000000000000000000000000000000..332841092817095bd4f7d85c9202fc2fa8c66faa
--- /dev/null
+++ b/webapp/src/scss/sass/components/level.sass
@@ -0,0 +1,75 @@
+.level
+ +block
+ align-items: center
+ justify-content: space-between
+ code
+ border-radius: $radius
+ img
+ display: inline-block
+ vertical-align: top
+ // Modifiers
+ &.is-mobile
+ display: flex
+ .level-left,
+ .level-right
+ display: flex
+ .level-left + .level-right
+ margin-top: 0
+ .level-item
+ &:not(:last-child)
+ margin-bottom: 0
+ &:not(.is-narrow)
+ flex-grow: 1
+ margin-right: 0.75rem
+ // Responsiveness
+ +tablet
+ display: flex
+ & > .level-item
+ &:not(.is-narrow)
+ flex-grow: 1
+
+.level-item
+ align-items: center
+ display: flex
+ flex-basis: auto
+ flex-grow: 0
+ flex-shrink: 0
+ justify-content: center
+ .title,
+ .subtitle
+ margin-bottom: 0
+ // Responsiveness
+ +mobile
+ &:not(:last-child)
+ margin-bottom: 0.75rem
+
+.level-left,
+.level-right
+ flex-basis: auto
+ flex-grow: 0
+ flex-shrink: 0
+ .level-item
+ // Modifiers
+ &.is-flexible
+ flex-grow: 1
+ // Responsiveness
+ +tablet
+ &:not(:last-child)
+ margin-right: 0.75rem
+
+.level-left
+ align-items: center
+ justify-content: flex-start
+ // Responsiveness
+ +mobile
+ & + .level-right
+ margin-top: 1.5rem
+ +tablet
+ display: flex
+
+.level-right
+ align-items: center
+ justify-content: flex-end
+ // Responsiveness
+ +tablet
+ display: flex
diff --git a/webapp/src/scss/sass/components/media.sass b/webapp/src/scss/sass/components/media.sass
new file mode 100644
index 0000000000000000000000000000000000000000..cb5df08be540a658910d04c312c4b5b7b3956ed5
--- /dev/null
+++ b/webapp/src/scss/sass/components/media.sass
@@ -0,0 +1,44 @@
+.media
+ align-items: flex-start
+ display: flex
+ text-align: left
+ .content:not(:last-child)
+ margin-bottom: 0.75rem
+ .media
+ border-top: 1px solid rgba($border, 0.5)
+ display: flex
+ padding-top: 0.75rem
+ .content:not(:last-child),
+ .control:not(:last-child)
+ margin-bottom: 0.5rem
+ .media
+ padding-top: 0.5rem
+ & + .media
+ margin-top: 0.5rem
+ & + .media
+ border-top: 1px solid rgba($border, 0.5)
+ margin-top: 1rem
+ padding-top: 1rem
+ // Sizes
+ &.is-large
+ & + .media
+ margin-top: 1.5rem
+ padding-top: 1.5rem
+
+.media-left,
+.media-right
+ flex-basis: auto
+ flex-grow: 0
+ flex-shrink: 0
+
+.media-left
+ margin-right: 1rem
+
+.media-right
+ margin-left: 1rem
+
+.media-content
+ flex-basis: auto
+ flex-grow: 1
+ flex-shrink: 1
+ text-align: left
diff --git a/webapp/src/scss/sass/components/menu.sass b/webapp/src/scss/sass/components/menu.sass
new file mode 100644
index 0000000000000000000000000000000000000000..727df36077a2898e4ac000ced5de8b1cf4a9bb6a
--- /dev/null
+++ b/webapp/src/scss/sass/components/menu.sass
@@ -0,0 +1,50 @@
+$menu-item-color: $text !default
+$menu-item-radius: $radius-small !default
+$menu-item-hover-color: $text-strong !default
+$menu-item-hover-background-color: $background !default
+$menu-item-active-color: $link-invert !default
+$menu-item-active-background-color: $link !default
+
+$menu-list-border-left: 1px solid $border !default
+
+$menu-label-color: $text-light !default
+
+.menu
+ font-size: $size-normal
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ &.is-large
+ font-size: $size-large
+
+.menu-list
+ line-height: 1.25
+ a
+ border-radius: $menu-item-radius
+ color: $menu-item-color
+ display: block
+ padding: 0.5em 0.75em
+ &:hover
+ background-color: $menu-item-hover-background-color
+ color: $menu-item-hover-color
+ // Modifiers
+ &.is-active
+ background-color: $menu-item-active-background-color
+ color: $menu-item-active-color
+ li
+ ul
+ border-left: $menu-list-border-left
+ margin: 0.75em
+ padding-left: 0.75em
+
+.menu-label
+ color: $menu-label-color
+ font-size: 0.75em
+ letter-spacing: 0.1em
+ text-transform: uppercase
+ &:not(:first-child)
+ margin-top: 1em
+ &:not(:last-child)
+ margin-bottom: 1em
diff --git a/webapp/src/scss/sass/components/message.sass b/webapp/src/scss/sass/components/message.sass
new file mode 100644
index 0000000000000000000000000000000000000000..a17f75316b8b5224c3d19499175af2b65d4200be
--- /dev/null
+++ b/webapp/src/scss/sass/components/message.sass
@@ -0,0 +1,86 @@
+$message-background-color: $background !default
+$message-radius: $radius !default
+
+$message-header-background-color: $text !default
+$message-header-color: $text-invert !default
+$message-header-weight: $weight-bold !default
+$message-header-padding: 0.75em 1em !default
+$message-header-radius: $radius !default
+
+$message-body-border-color: $border !default
+$message-body-border-width: 0 0 0 4px !default
+$message-body-color: $text !default
+$message-body-padding: 1.25em 1.5em !default
+$message-body-radius: $radius !default
+
+$message-body-pre-background-color: $white !default
+$message-body-pre-code-background-color: transparent !default
+
+$message-header-body-border-width: 0 !default
+
+.message
+ +block
+ background-color: $message-background-color
+ border-radius: $message-radius
+ font-size: $size-normal
+ strong
+ color: currentColor
+ a:not(.button):not(.tag)
+ color: currentColor
+ text-decoration: underline
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ &.is-large
+ font-size: $size-large
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+ $color-luminance: colorLuminance($color)
+ $darken-percentage: $color-luminance * 70%
+ $desaturate-percentage: $color-luminance * 30%
+ &.is-#{$name}
+ background-color: lighten($color, $color-lightning)
+ .message-header
+ background-color: $color
+ color: $color-invert
+ .message-body
+ border-color: $color
+ color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+
+.message-header
+ align-items: center
+ background-color: $message-header-background-color
+ border-radius: $message-header-radius $message-header-radius 0 0
+ color: $message-header-color
+ display: flex
+ font-weight: $message-header-weight
+ justify-content: space-between
+ line-height: 1.25
+ padding: $message-header-padding
+ position: relative
+ .delete
+ flex-grow: 0
+ flex-shrink: 0
+ margin-left: 0.75em
+ & + .message-body
+ border-width: $message-header-body-border-width
+ border-top-left-radius: 0
+ border-top-right-radius: 0
+
+.message-body
+ border-color: $message-body-border-color
+ border-radius: $message-body-radius
+ border-style: solid
+ border-width: $message-body-border-width
+ color: $message-body-color
+ padding: $message-body-padding
+ code,
+ pre
+ background-color: $message-body-pre-background-color
+ pre code
+ background-color: $message-body-pre-code-background-color
diff --git a/webapp/src/scss/sass/components/modal.sass b/webapp/src/scss/sass/components/modal.sass
new file mode 100644
index 0000000000000000000000000000000000000000..65597c4e952c7e02f6d9d311c10c262743325630
--- /dev/null
+++ b/webapp/src/scss/sass/components/modal.sass
@@ -0,0 +1,111 @@
+$modal-z: 40 !default
+
+$modal-background-background-color: rgba($black, 0.86) !default
+
+$modal-content-width: 640px !default
+$modal-content-margin-mobile: 20px !default
+$modal-content-spacing-mobile: 160px !default
+$modal-content-spacing-tablet: 40px !default
+
+$modal-close-dimensions: 40px !default
+$modal-close-right: 20px !default
+$modal-close-top: 20px !default
+
+$modal-card-spacing: 40px !default
+
+$modal-card-head-background-color: $background !default
+$modal-card-head-border-bottom: 1px solid $border !default
+$modal-card-head-padding: 20px !default
+$modal-card-head-radius: $radius-large !default
+
+$modal-card-title-color: $text-strong !default
+$modal-card-title-line-height: 1 !default
+$modal-card-title-size: $size-4 !default
+
+$modal-card-foot-radius: $radius-large !default
+$modal-card-foot-border-top: 1px solid $border !default
+
+$modal-card-body-background-color: $white !default
+$modal-card-body-padding: 20px !default
+
+.modal
+ +overlay
+ align-items: center
+ display: none
+ justify-content: center
+ overflow: hidden
+ position: fixed
+ z-index: $modal-z
+ // Modifiers
+ &.is-active
+ display: flex
+
+.modal-background
+ +overlay
+ background-color: $modal-background-background-color
+
+.modal-content,
+.modal-card
+ margin: 0 $modal-content-margin-mobile
+ max-height: calc(100vh - #{$modal-content-spacing-mobile})
+ overflow: auto
+ position: relative
+ width: 100%
+ // Responsiveness
+ +tablet
+ margin: 0 auto
+ max-height: calc(100vh - #{$modal-content-spacing-tablet})
+ width: $modal-content-width
+
+.modal-close
+ +delete
+ background: none
+ height: $modal-close-dimensions
+ position: fixed
+ right: $modal-close-right
+ top: $modal-close-top
+ width: $modal-close-dimensions
+
+.modal-card
+ display: flex
+ flex-direction: column
+ max-height: calc(100vh - #{$modal-card-spacing})
+ overflow: hidden
+
+.modal-card-head,
+.modal-card-foot
+ align-items: center
+ background-color: $modal-card-head-background-color
+ display: flex
+ flex-shrink: 0
+ justify-content: flex-start
+ padding: $modal-card-head-padding
+ position: relative
+
+.modal-card-head
+ border-bottom: $modal-card-head-border-bottom
+ border-top-left-radius: $modal-card-head-radius
+ border-top-right-radius: $modal-card-head-radius
+
+.modal-card-title
+ color: $modal-card-title-color
+ flex-grow: 1
+ flex-shrink: 0
+ font-size: $modal-card-title-size
+ line-height: $modal-card-title-line-height
+
+.modal-card-foot
+ border-bottom-left-radius: $modal-card-foot-radius
+ border-bottom-right-radius: $modal-card-foot-radius
+ border-top: $modal-card-foot-border-top
+ .button
+ &:not(:last-child)
+ margin-right: 10px
+
+.modal-card-body
+ +overflow-touch
+ background-color: $modal-card-body-background-color
+ flex-grow: 1
+ flex-shrink: 1
+ overflow: auto
+ padding: $modal-card-body-padding
diff --git a/webapp/src/scss/sass/components/navbar.sass b/webapp/src/scss/sass/components/navbar.sass
new file mode 100644
index 0000000000000000000000000000000000000000..5412c75d0072d3bd54ad5ea3ab8f91f71dfe3040
--- /dev/null
+++ b/webapp/src/scss/sass/components/navbar.sass
@@ -0,0 +1,414 @@
+$navbar-background-color: $white !default
+$navbar-box-shadow-size: 0 2px 0 0 !default
+$navbar-box-shadow-color: $background !default
+$navbar-height: 3.25rem !default
+$navbar-padding-vertical: 1rem !default
+$navbar-padding-horizontal: 2rem !default
+$navbar-z: 30 !default
+$navbar-fixed-z: 30 !default
+
+$navbar-item-color: $grey-dark !default
+$navbar-item-hover-color: $link !default
+$navbar-item-hover-background-color: $white-bis !default
+$navbar-item-active-color: $black !default
+$navbar-item-active-background-color: transparent !default
+$navbar-item-img-max-height: 1.75rem !default
+
+$navbar-tab-hover-background-color: transparent !default
+$navbar-tab-hover-border-bottom-color: $link !default
+$navbar-tab-active-color: $link !default
+$navbar-tab-active-background-color: transparent !default
+$navbar-tab-active-border-bottom-color: $link !default
+$navbar-tab-active-border-bottom-style: solid !default
+$navbar-tab-active-border-bottom-width: 3px !default
+
+$navbar-dropdown-background-color: $white !default
+$navbar-dropdown-border-top: 2px solid $border !default
+$navbar-dropdown-offset: -4px !default
+$navbar-dropdown-arrow: $link !default
+$navbar-dropdown-radius: $radius-large !default
+$navbar-dropdown-z: 20 !default
+
+$navbar-dropdown-boxed-radius: $radius-large !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+
+$navbar-dropdown-item-hover-color: $black !default
+$navbar-dropdown-item-hover-background-color: $background !default
+$navbar-dropdown-item-active-color: $link !default
+$navbar-dropdown-item-active-background-color: $background !default
+
+$navbar-divider-background-color: $background !default
+$navbar-divider-height: 2px !default
+
+$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
+
+=navbar-fixed
+ left: 0
+ position: fixed
+ right: 0
+ z-index: $navbar-fixed-z
+
+.navbar
+ background-color: $navbar-background-color
+ min-height: $navbar-height
+ position: relative
+ z-index: $navbar-z
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ background-color: $color
+ color: $color-invert
+ .navbar-brand
+ & > .navbar-item,
+ .navbar-link
+ color: $color-invert
+ & > a.navbar-item,
+ .navbar-link
+ &:hover,
+ &.is-active
+ background-color: darken($color, 5%)
+ color: $color-invert
+ .navbar-link
+ &::after
+ border-color: $color-invert
+ +desktop
+ .navbar-start,
+ .navbar-end
+ & > .navbar-item,
+ .navbar-link
+ color: $color-invert
+ & > a.navbar-item,
+ .navbar-link
+ &:hover,
+ &.is-active
+ background-color: darken($color, 5%)
+ color: $color-invert
+ .navbar-link
+ &::after
+ border-color: $color-invert
+ .navbar-item.has-dropdown:hover .navbar-link,
+ .navbar-item.has-dropdown.is-active .navbar-link
+ background-color: darken($color, 5%)
+ color: $color-invert
+ .navbar-dropdown
+ a.navbar-item
+ &.is-active
+ background-color: $color
+ color: $color-invert
+ & > .container
+ align-items: stretch
+ display: flex
+ min-height: $navbar-height
+ width: 100%
+ &.has-shadow
+ box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
+ &.is-fixed-bottom,
+ &.is-fixed-top
+ +navbar-fixed
+ &.is-fixed-bottom
+ bottom: 0
+ &.has-shadow
+ box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
+ &.is-fixed-top
+ top: 0
+
+html,
+body
+ &.has-navbar-fixed-top
+ padding-top: $navbar-height
+ &.has-navbar-fixed-bottom
+ padding-bottom: $navbar-height
+
+.navbar-brand,
+.navbar-tabs
+ align-items: stretch
+ display: flex
+ flex-shrink: 0
+ min-height: $navbar-height
+
+.navbar-brand
+ a.navbar-item
+ &:hover
+ background-color: transparent
+
+.navbar-tabs
+ +overflow-touch
+ max-width: 100vw
+ overflow-x: auto
+ overflow-y: hidden
+
+.navbar-burger
+ +hamburger($navbar-height)
+ margin-left: auto
+
+.navbar-menu
+ display: none
+
+.navbar-item,
+.navbar-link
+ color: $navbar-item-color
+ display: block
+ line-height: 1.5
+ padding: 0.5rem 0.75rem
+ position: relative
+ .icon
+ &:only-child
+ margin-left: -0.25rem
+ margin-right: -0.25rem
+
+a.navbar-item,
+.navbar-link
+ cursor: pointer
+ &:hover,
+ &.is-active
+ background-color: $navbar-item-hover-background-color
+ color: $navbar-item-hover-color
+
+.navbar-item
+ display: block
+ flex-grow: 0
+ flex-shrink: 0
+ img
+ max-height: $navbar-item-img-max-height
+ &.has-dropdown
+ padding: 0
+ &.is-expanded
+ flex-grow: 1
+ flex-shrink: 1
+ &.is-tab
+ border-bottom: 1px solid transparent
+ min-height: $navbar-height
+ padding-bottom: calc(0.5rem - 1px)
+ &:hover
+ background-color: $navbar-tab-hover-background-color
+ border-bottom-color: $navbar-tab-hover-border-bottom-color
+ &.is-active
+ background-color: $navbar-tab-active-background-color
+ border-bottom-color: $navbar-tab-active-border-bottom-color
+ border-bottom-style: $navbar-tab-active-border-bottom-style
+ border-bottom-width: $navbar-tab-active-border-bottom-width
+ color: $navbar-tab-active-color
+ padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
+
+.navbar-content
+ flex-grow: 1
+ flex-shrink: 1
+
+.navbar-link
+ padding-right: 2.5em
+ &::after
+ +arrow($navbar-dropdown-arrow)
+ margin-top: -0.375em
+ right: 1.125em
+
+.navbar-dropdown
+ font-size: 0.875rem
+ padding-bottom: 0.5rem
+ padding-top: 0.5rem
+ .navbar-item
+ padding-left: 1.5rem
+ padding-right: 1.5rem
+
+.navbar-divider
+ background-color: $navbar-divider-background-color
+ border: none
+ display: none
+ height: $navbar-divider-height
+ margin: 0.5rem 0
+
++touch
+ .navbar > .container
+ display: block
+ .navbar-brand,
+ .navbar-tabs
+ .navbar-item
+ align-items: center
+ display: flex
+ .navbar-link
+ &::after
+ display: none
+ .navbar-menu
+ background-color: $navbar-background-color
+ box-shadow: 0 8px 16px rgba($black, 0.1)
+ padding: 0.5rem 0
+ &.is-active
+ display: block
+ // Fixed navbar
+ .navbar
+ &.is-fixed-bottom-touch,
+ &.is-fixed-top-touch
+ +navbar-fixed
+ &.is-fixed-bottom-touch
+ bottom: 0
+ &.has-shadow
+ box-shadow: 0 -2px 3px rgba($black, 0.1)
+ &.is-fixed-top-touch
+ top: 0
+ &.is-fixed-top,
+ &.is-fixed-top-touch
+ .navbar-menu
+ +overflow-touch
+ max-height: calc(100vh - #{$navbar-height})
+ overflow: auto
+ html,
+ body
+ &.has-navbar-fixed-top-touch
+ padding-top: $navbar-height
+ &.has-navbar-fixed-bottom-touch
+ padding-bottom: $navbar-height
+
++desktop
+ .navbar,
+ .navbar-menu,
+ .navbar-start,
+ .navbar-end
+ align-items: stretch
+ display: flex
+ .navbar
+ min-height: $navbar-height
+ &.is-spaced
+ padding: $navbar-padding-vertical $navbar-padding-horizontal
+ .navbar-start,
+ .navbar-end
+ align-items: center
+ a.navbar-item,
+ .navbar-link
+ border-radius: $radius
+ &.is-transparent
+ a.navbar-item,
+ .navbar-link
+ &:hover,
+ &.is-active
+ background-color: transparent !important
+ .navbar-item.has-dropdown
+ &.is-active,
+ &.is-hoverable:hover
+ .navbar-link
+ background-color: transparent !important
+ .navbar-dropdown
+ a.navbar-item
+ &:hover
+ background-color: $navbar-dropdown-item-hover-background-color
+ color: $navbar-dropdown-item-hover-color
+ &.is-active
+ background-color: $navbar-dropdown-item-active-background-color
+ color: $navbar-dropdown-item-active-color
+ .navbar-burger
+ display: none
+ .navbar-item,
+ .navbar-link
+ align-items: center
+ display: flex
+ .navbar-item
+ display: flex
+ &.has-dropdown
+ align-items: stretch
+ &.has-dropdown-up
+ .navbar-link::after
+ transform: rotate(135deg) translate(0.25em, -0.25em)
+ .navbar-dropdown
+ border-bottom: $navbar-dropdown-border-top
+ border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
+ border-top: none
+ bottom: 100%
+ box-shadow: 0 -8px 8px rgba($black, 0.1)
+ top: auto
+ &.is-active,
+ &.is-hoverable:hover
+ .navbar-dropdown
+ display: block
+ .navbar.is-spaced &,
+ &.is-boxed
+ opacity: 1
+ pointer-events: auto
+ transform: translateY(0)
+ .navbar-menu
+ flex-grow: 1
+ flex-shrink: 0
+ .navbar-start
+ justify-content: flex-start
+ margin-right: auto
+ .navbar-end
+ justify-content: flex-end
+ margin-left: auto
+ .navbar-dropdown
+ background-color: $navbar-dropdown-background-color
+ border-bottom-left-radius: $navbar-dropdown-radius
+ border-bottom-right-radius: $navbar-dropdown-radius
+ border-top: $navbar-dropdown-border-top
+ box-shadow: 0 8px 8px rgba($black, 0.1)
+ display: none
+ font-size: 0.875rem
+ left: 0
+ min-width: 100%
+ position: absolute
+ top: 100%
+ z-index: $navbar-dropdown-z
+ .navbar-item
+ padding: 0.375rem 1rem
+ white-space: nowrap
+ a.navbar-item
+ padding-right: 3rem
+ &:hover
+ background-color: $navbar-dropdown-item-hover-background-color
+ color: $navbar-dropdown-item-hover-color
+ &.is-active
+ background-color: $navbar-dropdown-item-active-background-color
+ color: $navbar-dropdown-item-active-color
+ .navbar.is-spaced &,
+ &.is-boxed
+ border-radius: $navbar-dropdown-boxed-radius
+ border-top: none
+ box-shadow: $navbar-dropdown-boxed-shadow
+ display: block
+ opacity: 0
+ pointer-events: none
+ top: calc(100% + (#{$navbar-dropdown-offset}))
+ transform: translateY(-5px)
+ transition-duration: $speed
+ transition-property: opacity, transform
+ &.is-right
+ left: auto
+ right: 0
+ .navbar-divider
+ display: block
+ .navbar > .container,
+ .container > .navbar
+ .navbar-brand
+ margin-left: -1rem
+ .navbar-menu
+ margin-right: -1rem
+ // Fixed navbar
+ .navbar
+ &.is-fixed-bottom-desktop,
+ &.is-fixed-top-desktop
+ +navbar-fixed
+ &.is-fixed-bottom-desktop
+ bottom: 0
+ &.has-shadow
+ box-shadow: 0 -2px 3px rgba($black, 0.1)
+ &.is-fixed-top-desktop
+ top: 0
+ html,
+ body
+ &.has-navbar-fixed-top-desktop
+ padding-top: $navbar-height
+ &.has-navbar-fixed-bottom-desktop
+ padding-bottom: $navbar-height
+ &.has-spaced-navbar-fixed-top
+ padding-top: $navbar-height + ($navbar-padding-vertical * 2)
+ &.has-spaced-navbar-fixed-bottom
+ padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
+ // Hover/Active states
+ a.navbar-item,
+ .navbar-link
+ &.is-active
+ color: $navbar-item-active-color
+ &.is-active:not(:hover)
+ background-color: $navbar-item-active-background-color
+ .navbar-item.has-dropdown
+ &:hover,
+ &.is-active
+ .navbar-link
+ background-color: $navbar-item-hover-background-color
diff --git a/webapp/src/scss/sass/components/pagination.sass b/webapp/src/scss/sass/components/pagination.sass
new file mode 100644
index 0000000000000000000000000000000000000000..34dd59d8754dbff3e100716aaf4dc519a3403d3f
--- /dev/null
+++ b/webapp/src/scss/sass/components/pagination.sass
@@ -0,0 +1,143 @@
+$pagination-color: $grey-darker !default
+$pagination-border-color: $grey-lighter !default
+$pagination-margin: -0.25rem !default
+
+$pagination-hover-color: $link-hover !default
+$pagination-hover-border-color: $link-hover-border !default
+
+$pagination-focus-color: $link-focus !default
+$pagination-focus-border-color: $link-focus-border !default
+
+$pagination-active-color: $link-active !default
+$pagination-active-border-color: $link-active-border !default
+
+$pagination-disabled-color: $grey !default
+$pagination-disabled-background-color: $grey-lighter !default
+$pagination-disabled-border-color: $grey-lighter !default
+
+$pagination-current-color: $link-invert !default
+$pagination-current-background-color: $link !default
+$pagination-current-border-color: $link !default
+
+$pagination-ellipsis-color: $grey-light !default
+
+$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
+
+.pagination
+ font-size: $size-normal
+ margin: $pagination-margin
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ &.is-large
+ font-size: $size-large
+ &.is-rounded
+ .pagination-previous,
+ .pagination-next
+ padding-left: 1em
+ padding-right: 1em
+ border-radius: $radius-rounded
+ .pagination-link
+ border-radius: $radius-rounded
+
+.pagination,
+.pagination-list
+ align-items: center
+ display: flex
+ justify-content: center
+ text-align: center
+
+.pagination-previous,
+.pagination-next,
+.pagination-link,
+.pagination-ellipsis
+ +control
+ +unselectable
+ font-size: 1em
+ padding-left: 0.5em
+ padding-right: 0.5em
+ justify-content: center
+ margin: 0.25rem
+ text-align: center
+
+.pagination-previous,
+.pagination-next,
+.pagination-link
+ border-color: $pagination-border-color
+ color: $pagination-color
+ min-width: 2.25em
+ &:hover
+ border-color: $pagination-hover-border-color
+ color: $pagination-hover-color
+ &:focus
+ border-color: $pagination-focus-border-color
+ &:active
+ box-shadow: $pagination-shadow-inset
+ &[disabled]
+ background-color: $pagination-disabled-background-color
+ border-color: $pagination-disabled-border-color
+ box-shadow: none
+ color: $pagination-disabled-color
+ opacity: 0.5
+
+.pagination-previous,
+.pagination-next
+ padding-left: 0.75em
+ padding-right: 0.75em
+ white-space: nowrap
+
+.pagination-link
+ &.is-current
+ background-color: $pagination-current-background-color
+ border-color: $pagination-current-border-color
+ color: $pagination-current-color
+
+.pagination-ellipsis
+ color: $pagination-ellipsis-color
+ pointer-events: none
+
+.pagination-list
+ flex-wrap: wrap
+
++mobile
+ .pagination
+ flex-wrap: wrap
+ .pagination-previous,
+ .pagination-next
+ flex-grow: 1
+ flex-shrink: 1
+ .pagination-list
+ li
+ flex-grow: 1
+ flex-shrink: 1
+
++tablet
+ .pagination-list
+ flex-grow: 1
+ flex-shrink: 1
+ justify-content: flex-start
+ order: 1
+ .pagination-previous
+ order: 2
+ .pagination-next
+ order: 3
+ .pagination
+ justify-content: space-between
+ &.is-centered
+ .pagination-previous
+ order: 1
+ .pagination-list
+ justify-content: center
+ order: 2
+ .pagination-next
+ order: 3
+ &.is-right
+ .pagination-previous
+ order: 1
+ .pagination-next
+ order: 2
+ .pagination-list
+ justify-content: flex-end
+ order: 3
diff --git a/webapp/src/scss/sass/components/panel.sass b/webapp/src/scss/sass/components/panel.sass
new file mode 100644
index 0000000000000000000000000000000000000000..b9d339ee9a072a2fedd0fb5bb9febc82de184756
--- /dev/null
+++ b/webapp/src/scss/sass/components/panel.sass
@@ -0,0 +1,101 @@
+$panel-item-border: 1px solid $border !default
+
+$panel-heading-background-color: $background !default
+$panel-heading-color: $text-strong !default
+$panel-heading-line-height: 1.25 !default
+$panel-heading-padding: 0.5em 0.75em !default
+$panel-heading-radius: $radius !default
+$panel-heading-size: 1.25em !default
+$panel-heading-weight: $weight-light !default
+
+$panel-tab-border-bottom: 1px solid $border !default
+$panel-tab-active-border-bottom-color: $link-active-border !default
+$panel-tab-active-color: $link-active !default
+
+$panel-list-item-color: $text !default
+$panel-list-item-hover-color: $link !default
+
+$panel-block-color: $text-strong !default
+$panel-block-hover-background-color: $background !default
+$panel-block-active-border-left-color: $link !default
+$panel-block-active-color: $link-active !default
+$panel-block-active-icon-color: $link !default
+
+$panel-icon-color: $text-light !default
+
+.panel
+ font-size: $size-normal
+ &:not(:last-child)
+ margin-bottom: 1.5rem
+
+.panel-heading,
+.panel-tabs,
+.panel-block
+ border-bottom: $panel-item-border
+ border-left: $panel-item-border
+ border-right: $panel-item-border
+ &:first-child
+ border-top: $panel-item-border
+
+.panel-heading
+ background-color: $panel-heading-background-color
+ border-radius: $panel-heading-radius $panel-heading-radius 0 0
+ color: $panel-heading-color
+ font-size: $panel-heading-size
+ font-weight: $panel-heading-weight
+ line-height: $panel-heading-line-height
+ padding: $panel-heading-padding
+
+.panel-tabs
+ align-items: flex-end
+ display: flex
+ font-size: 0.875em
+ justify-content: center
+ a
+ border-bottom: $panel-tab-border-bottom
+ margin-bottom: -1px
+ padding: 0.5em
+ // Modifiers
+ &.is-active
+ border-bottom-color: $panel-tab-active-border-bottom-color
+ color: $panel-tab-active-color
+
+.panel-list
+ a
+ color: $panel-list-item-color
+ &:hover
+ color: $panel-list-item-hover-color
+
+.panel-block
+ align-items: center
+ color: $panel-block-color
+ display: flex
+ justify-content: flex-start
+ padding: 0.5em 0.75em
+ input[type="checkbox"]
+ margin-right: 0.75em
+ & > .control
+ flex-grow: 1
+ flex-shrink: 1
+ width: 100%
+ &.is-wrapped
+ flex-wrap: wrap
+ &.is-active
+ border-left-color: $panel-block-active-border-left-color
+ color: $panel-block-active-color
+ .panel-icon
+ color: $panel-block-active-icon-color
+
+a.panel-block,
+label.panel-block
+ cursor: pointer
+ &:hover
+ background-color: $panel-block-hover-background-color
+
+.panel-icon
+ +fa(14px, 1em)
+ color: $panel-icon-color
+ margin-right: 0.75em
+ .fa
+ font-size: inherit
+ line-height: inherit
diff --git a/webapp/src/scss/sass/components/tabs.sass b/webapp/src/scss/sass/components/tabs.sass
new file mode 100644
index 0000000000000000000000000000000000000000..ccbf6797337f84b61e0654c40b8101f9fb5f25b6
--- /dev/null
+++ b/webapp/src/scss/sass/components/tabs.sass
@@ -0,0 +1,151 @@
+$tabs-border-bottom-color: $border !default
+$tabs-border-bottom-style: solid !default
+$tabs-border-bottom-width: 1px !default
+$tabs-link-color: $text !default
+$tabs-link-hover-border-bottom-color: $text-strong !default
+$tabs-link-hover-color: $text-strong !default
+$tabs-link-active-border-bottom-color: $link !default
+$tabs-link-active-color: $link !default
+$tabs-link-padding: 0.5em 1em !default
+
+$tabs-boxed-link-radius: $radius !default
+$tabs-boxed-link-hover-background-color: $background !default
+$tabs-boxed-link-hover-border-bottom-color: $border !default
+
+$tabs-boxed-link-active-background-color: $white !default
+$tabs-boxed-link-active-border-color: $border !default
+$tabs-boxed-link-active-border-bottom-color: transparent !default
+
+$tabs-toggle-link-border-color: $border !default
+$tabs-toggle-link-border-style: solid !default
+$tabs-toggle-link-border-width: 1px !default
+$tabs-toggle-link-hover-background-color: $background !default
+$tabs-toggle-link-hover-border-color: $border-hover !default
+$tabs-toggle-link-radius: $radius !default
+$tabs-toggle-link-active-background-color: $link !default
+$tabs-toggle-link-active-border-color: $link !default
+$tabs-toggle-link-active-color: $link-invert !default
+
+.tabs
+ +block
+ +overflow-touch
+ +unselectable
+ align-items: stretch
+ display: flex
+ font-size: $size-normal
+ justify-content: space-between
+ overflow: hidden
+ overflow-x: auto
+ white-space: nowrap
+ a
+ align-items: center
+ border-bottom-color: $tabs-border-bottom-color
+ border-bottom-style: $tabs-border-bottom-style
+ border-bottom-width: $tabs-border-bottom-width
+ color: $tabs-link-color
+ display: flex
+ justify-content: center
+ margin-bottom: -#{$tabs-border-bottom-width}
+ padding: $tabs-link-padding
+ vertical-align: top
+ &:hover
+ border-bottom-color: $tabs-link-hover-border-bottom-color
+ color: $tabs-link-hover-color
+ li
+ display: block
+ &.is-active
+ a
+ border-bottom-color: $tabs-link-active-border-bottom-color
+ color: $tabs-link-active-color
+ ul
+ align-items: center
+ border-bottom-color: $tabs-border-bottom-color
+ border-bottom-style: $tabs-border-bottom-style
+ border-bottom-width: $tabs-border-bottom-width
+ display: flex
+ flex-grow: 1
+ flex-shrink: 0
+ justify-content: flex-start
+ &.is-left
+ padding-right: 0.75em
+ &.is-center
+ flex: none
+ justify-content: center
+ padding-left: 0.75em
+ padding-right: 0.75em
+ &.is-right
+ justify-content: flex-end
+ padding-left: 0.75em
+ .icon
+ &:first-child
+ margin-right: 0.5em
+ &:last-child
+ margin-left: 0.5em
+ // Alignment
+ &.is-centered
+ ul
+ justify-content: center
+ &.is-right
+ ul
+ justify-content: flex-end
+ // Styles
+ &.is-boxed
+ a
+ border: 1px solid transparent
+ border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
+ &:hover
+ background-color: $tabs-boxed-link-hover-background-color
+ border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
+ li
+ &.is-active
+ a
+ background-color: $tabs-boxed-link-active-background-color
+ border-color: $tabs-boxed-link-active-border-color
+ border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
+ &.is-fullwidth
+ li
+ flex-grow: 1
+ flex-shrink: 0
+ &.is-toggle
+ a
+ border-color: $tabs-toggle-link-border-color
+ border-style: $tabs-toggle-link-border-style
+ border-width: $tabs-toggle-link-border-width
+ margin-bottom: 0
+ position: relative
+ &:hover
+ background-color: $tabs-toggle-link-hover-background-color
+ border-color: $tabs-toggle-link-hover-border-color
+ z-index: 2
+ li
+ & + li
+ margin-left: -#{$tabs-toggle-link-border-width}
+ &:first-child a
+ border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
+ &:last-child a
+ border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
+ &.is-active
+ a
+ background-color: $tabs-toggle-link-active-background-color
+ border-color: $tabs-toggle-link-active-border-color
+ color: $tabs-toggle-link-active-color
+ z-index: 1
+ ul
+ border-bottom: none
+ &.is-toggle-rounded
+ li
+ &:first-child a
+ border-bottom-left-radius: $radius-rounded
+ border-top-left-radius: $radius-rounded
+ padding-left: 1.25em
+ &:last-child a
+ border-bottom-right-radius: $radius-rounded
+ border-top-right-radius: $radius-rounded
+ padding-right: 1.25em
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ &.is-large
+ font-size: $size-large
diff --git a/webapp/src/scss/sass/elements/_all.sass b/webapp/src/scss/sass/elements/_all.sass
new file mode 100644
index 0000000000000000000000000000000000000000..2234322ab5645290def4b9c04ad8c66a23d9ee52
--- /dev/null
+++ b/webapp/src/scss/sass/elements/_all.sass
@@ -0,0 +1,16 @@
+@charset "utf-8"
+
+@import "box.sass"
+@import "button.sass"
+@import "container.sass"
+@import "content.sass"
+@import "form.sass"
+@import "icon.sass"
+@import "image.sass"
+@import "notification.sass"
+@import "progress.sass"
+@import "table.sass"
+@import "tag.sass"
+@import "title.sass"
+
+@import "other.sass"
diff --git a/webapp/src/scss/sass/elements/box.sass b/webapp/src/scss/sass/elements/box.sass
new file mode 100644
index 0000000000000000000000000000000000000000..df185428ad40fbfc44cab8d49df69c482aad0e1a
--- /dev/null
+++ b/webapp/src/scss/sass/elements/box.sass
@@ -0,0 +1,24 @@
+$box-color: $text !default
+$box-background-color: $white !default
+$box-radius: $radius-large !default
+$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$box-padding: 1.25rem !default
+
+$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
+$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
+
+.box
+ +block
+ background-color: $box-background-color
+ border-radius: $box-radius
+ box-shadow: $box-shadow
+ color: $box-color
+ display: block
+ padding: $box-padding
+
+a.box
+ &:hover,
+ &:focus
+ box-shadow: $box-link-hover-shadow
+ &:active
+ box-shadow: $box-link-active-shadow
diff --git a/webapp/src/scss/sass/elements/button.sass b/webapp/src/scss/sass/elements/button.sass
new file mode 100644
index 0000000000000000000000000000000000000000..9331216a7c7a31e479940622d4745dfbf5fe85f6
--- /dev/null
+++ b/webapp/src/scss/sass/elements/button.sass
@@ -0,0 +1,255 @@
+$button-color: $grey-darker !default
+$button-background-color: $white !default
+
+$button-border-color: $grey-lighter !default
+$button-border-width: $control-border-width !default
+
+$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
+$button-padding-horizontal: 0.75em !default
+
+$button-hover-color: $link-hover !default
+$button-hover-border-color: $link-hover-border !default
+
+$button-focus-color: $link-focus !default
+$button-focus-border-color: $link-focus-border !default
+$button-focus-box-shadow-size: 0 0 0 0.125em !default
+$button-focus-box-shadow-color: rgba($link, 0.25) !default
+
+$button-active-color: $link-active !default
+$button-active-border-color: $link-active-border !default
+
+$button-text-color: $text !default
+$button-text-hover-background-color: $background !default
+$button-text-hover-color: $text-strong !default
+
+$button-disabled-background-color: $white !default
+$button-disabled-border-color: $grey-lighter !default
+$button-disabled-shadow: none !default
+$button-disabled-opacity: 0.5 !default
+
+$button-static-color: $grey !default
+$button-static-background-color: $white-ter !default
+$button-static-border-color: $grey-lighter !default
+
+// The button sizes use mixins so they can be used at different breakpoints
+=button-small
+ border-radius: $radius-small
+ font-size: $size-small
+=button-medium
+ font-size: $size-medium
+=button-large
+ font-size: $size-large
+
+.button
+ +control
+ +unselectable
+ background-color: $button-background-color
+ border-color: $button-border-color
+ border-width: $button-border-width
+ color: $button-color
+ cursor: pointer
+ justify-content: center
+ padding-bottom: $button-padding-vertical
+ padding-left: $button-padding-horizontal
+ padding-right: $button-padding-horizontal
+ padding-top: $button-padding-vertical
+ text-align: center
+ white-space: nowrap
+ strong
+ color: inherit
+ .icon
+ &,
+ &.is-small,
+ &.is-medium,
+ &.is-large
+ height: 1.5em
+ width: 1.5em
+ &:first-child:not(:last-child)
+ margin-left: calc(-0.375em - #{$button-border-width})
+ margin-right: 0.1875em
+ &:last-child:not(:first-child)
+ margin-left: 0.1875em
+ margin-right: calc(-0.375em - #{$button-border-width})
+ &:first-child:last-child
+ margin-left: calc(-0.375em - #{$button-border-width})
+ margin-right: calc(-0.375em - #{$button-border-width})
+ // States
+ &:hover,
+ &.is-hovered
+ border-color: $button-hover-border-color
+ color: $button-hover-color
+ &:focus,
+ &.is-focused
+ border-color: $button-focus-border-color
+ color: $button-focus-color
+ &:not(:active)
+ box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
+ &:active,
+ &.is-active
+ border-color: $button-active-border-color
+ color: $button-active-color
+ // Colors
+ &.is-text
+ background-color: transparent
+ border-color: transparent
+ color: $button-text-color
+ text-decoration: underline
+ &:hover,
+ &.is-hovered,
+ &:focus,
+ &.is-focused
+ background-color: $button-text-hover-background-color
+ color: $button-text-hover-color
+ &:active,
+ &.is-active
+ background-color: darken($button-text-hover-background-color, 5%)
+ color: $button-text-hover-color
+ &[disabled]
+ background-color: transparent
+ border-color: transparent
+ box-shadow: none
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ background-color: $color
+ border-color: transparent
+ color: $color-invert
+ &:hover,
+ &.is-hovered
+ background-color: darken($color, 2.5%)
+ border-color: transparent
+ color: $color-invert
+ &:focus,
+ &.is-focused
+ border-color: transparent
+ color: $color-invert
+ &:not(:active)
+ box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
+ &:active,
+ &.is-active
+ background-color: darken($color, 5%)
+ border-color: transparent
+ color: $color-invert
+ &[disabled]
+ background-color: $color
+ border-color: transparent
+ box-shadow: none
+ &.is-inverted
+ background-color: $color-invert
+ color: $color
+ &:hover
+ background-color: darken($color-invert, 5%)
+ &[disabled]
+ background-color: $color-invert
+ border-color: transparent
+ box-shadow: none
+ color: $color
+ &.is-loading
+ &::after
+ border-color: transparent transparent $color-invert $color-invert !important
+ &.is-outlined
+ background-color: transparent
+ border-color: $color
+ color: $color
+ &:hover,
+ &:focus
+ background-color: $color
+ border-color: $color
+ color: $color-invert
+ &.is-loading
+ &::after
+ border-color: transparent transparent $color $color !important
+ &[disabled]
+ background-color: transparent
+ border-color: $color
+ box-shadow: none
+ color: $color
+ &.is-inverted.is-outlined
+ background-color: transparent
+ border-color: $color-invert
+ color: $color-invert
+ &:hover,
+ &:focus
+ background-color: $color-invert
+ color: $color
+ &[disabled]
+ background-color: transparent
+ border-color: $color-invert
+ box-shadow: none
+ color: $color-invert
+ // Sizes
+ &.is-small
+ +button-small
+ &.is-medium
+ +button-medium
+ &.is-large
+ +button-large
+ // Modifiers
+ &[disabled]
+ background-color: $button-disabled-background-color
+ border-color: $button-disabled-border-color
+ box-shadow: $button-disabled-shadow
+ opacity: $button-disabled-opacity
+ &.is-fullwidth
+ display: flex
+ width: 100%
+ &.is-loading
+ color: transparent !important
+ pointer-events: none
+ &::after
+ +loader
+ +center(1em)
+ position: absolute !important
+ &.is-static
+ background-color: $button-static-background-color
+ border-color: $button-static-border-color
+ color: $button-static-color
+ box-shadow: none
+ pointer-events: none
+ &.is-rounded
+ border-radius: $radius-rounded
+ padding-left: 1em
+ padding-right: 1em
+
+.buttons
+ align-items: center
+ display: flex
+ flex-wrap: wrap
+ justify-content: flex-start
+ .button
+ margin-bottom: 0.5rem
+ &:not(:last-child)
+ margin-right: 0.5rem
+ &:last-child
+ margin-bottom: -0.5rem
+ &:not(:last-child)
+ margin-bottom: 1rem
+ &.has-addons
+ .button
+ &:not(:first-child)
+ border-bottom-left-radius: 0
+ border-top-left-radius: 0
+ &:not(:last-child)
+ border-bottom-right-radius: 0
+ border-top-right-radius: 0
+ margin-right: -1px
+ &:last-child
+ margin-right: 0
+ &:hover,
+ &.is-hovered
+ z-index: 2
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active,
+ &.is-selected
+ z-index: 3
+ &:hover
+ z-index: 4
+ &.is-expanded
+ flex-grow: 1
+ &.is-centered
+ justify-content: center
+ &.is-right
+ justify-content: flex-end
diff --git a/webapp/src/scss/sass/elements/container.sass b/webapp/src/scss/sass/elements/container.sass
new file mode 100644
index 0000000000000000000000000000000000000000..2aaf591aec594e6a8e0faf3484a119a44365cb41
--- /dev/null
+++ b/webapp/src/scss/sass/elements/container.sass
@@ -0,0 +1,25 @@
+.container
+ margin: 0 auto
+ position: relative
+ +desktop
+ max-width: $desktop - (2 * $gap)
+ width: $desktop - (2 * $gap)
+ &.is-fluid
+ margin-left: $gap
+ margin-right: $gap
+ max-width: none
+ width: auto
+ +until-widescreen
+ &.is-widescreen
+ max-width: $widescreen - (2 * $gap)
+ width: auto
+ +until-fullhd
+ &.is-fullhd
+ max-width: $fullhd - (2 * $gap)
+ width: auto
+ +widescreen
+ max-width: $widescreen - (2 * $gap)
+ width: $widescreen - (2 * $gap)
+ +fullhd
+ max-width: $fullhd - (2 * $gap)
+ width: $fullhd - (2 * $gap)
diff --git a/webapp/src/scss/sass/elements/content.sass b/webapp/src/scss/sass/elements/content.sass
new file mode 100644
index 0000000000000000000000000000000000000000..8951a824f94600f6ee34a9fe78502961296b6900
--- /dev/null
+++ b/webapp/src/scss/sass/elements/content.sass
@@ -0,0 +1,141 @@
+$content-heading-color: $text-strong !default
+$content-heading-weight: $weight-semibold !default
+$content-heading-line-height: 1.125 !default
+
+$content-blockquote-background-color: $background !default
+$content-blockquote-border-left: 5px solid $border !default
+$content-blockquote-padding: 1.25em 1.5em !default
+
+$content-pre-padding: 1.25em 1.5em !default
+
+$content-table-cell-border: 1px solid $border !default
+$content-table-cell-border-width: 0 0 1px !default
+$content-table-cell-padding: 0.5em 0.75em !default
+$content-table-cell-heading-color: $text-strong !default
+$content-table-head-cell-border-width: 0 0 2px !default
+$content-table-head-cell-color: $text-strong !default
+$content-table-foot-cell-border-width: 2px 0 0 !default
+$content-table-foot-cell-color: $text-strong !default
+
+.content
+ +block
+ // Inline
+ li + li
+ margin-top: 0.25em
+ // Block
+ p,
+ dl,
+ ol,
+ ul,
+ blockquote,
+ pre,
+ table
+ &:not(:last-child)
+ margin-bottom: 1em
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6
+ color: $content-heading-color
+ font-weight: $content-heading-weight
+ line-height: $content-heading-line-height
+ h1
+ font-size: 2em
+ margin-bottom: 0.5em
+ &:not(:first-child)
+ margin-top: 1em
+ h2
+ font-size: 1.75em
+ margin-bottom: 0.5714em
+ &:not(:first-child)
+ margin-top: 1.1428em
+ h3
+ font-size: 1.5em
+ margin-bottom: 0.6666em
+ &:not(:first-child)
+ margin-top: 1.3333em
+ h4
+ font-size: 1.25em
+ margin-bottom: 0.8em
+ h5
+ font-size: 1.125em
+ margin-bottom: 0.8888em
+ h6
+ font-size: 1em
+ margin-bottom: 1em
+ blockquote
+ background-color: $content-blockquote-background-color
+ border-left: $content-blockquote-border-left
+ padding: $content-blockquote-padding
+ ol
+ list-style: decimal outside
+ margin-left: 2em
+ margin-top: 1em
+ ul
+ list-style: disc outside
+ margin-left: 2em
+ margin-top: 1em
+ ul
+ list-style-type: circle
+ margin-top: 0.5em
+ ul
+ list-style-type: square
+ dd
+ margin-left: 2em
+ figure
+ margin-left: 2em
+ margin-right: 2em
+ text-align: center
+ &:not(:first-child)
+ margin-top: 2em
+ &:not(:last-child)
+ margin-bottom: 2em
+ img
+ display: inline-block
+ figcaption
+ font-style: italic
+ pre
+ +overflow-touch
+ overflow-x: auto
+ padding: $content-pre-padding
+ white-space: pre
+ word-wrap: normal
+ sup,
+ sub
+ font-size: 75%
+ table
+ width: 100%
+ td,
+ th
+ border: $content-table-cell-border
+ border-width: $content-table-cell-border-width
+ padding: $content-table-cell-padding
+ vertical-align: top
+ th
+ color: $content-table-cell-heading-color
+ text-align: left
+ thead
+ td,
+ th
+ border-width: $content-table-head-cell-border-width
+ color: $content-table-head-cell-color
+ tfoot
+ td,
+ th
+ border-width: $content-table-foot-cell-border-width
+ color: $content-table-foot-cell-color
+ tbody
+ tr
+ &:last-child
+ td,
+ th
+ border-bottom-width: 0
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ &.is-large
+ font-size: $size-large
diff --git a/webapp/src/scss/sass/elements/form.sass b/webapp/src/scss/sass/elements/form.sass
new file mode 100644
index 0000000000000000000000000000000000000000..49ae691f759c2a44790526a9059e700bb7056a49
--- /dev/null
+++ b/webapp/src/scss/sass/elements/form.sass
@@ -0,0 +1,625 @@
+$input-color: $grey-darker !default
+$input-background-color: $white !default
+$input-border-color: $grey-lighter !default
+$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
+
+$input-hover-color: $grey-darker !default
+$input-hover-border-color: $grey-light !default
+
+$input-focus-color: $grey-darker !default
+$input-focus-border-color: $link !default
+$input-focus-box-shadow-size: 0 0 0 0.125em !default
+$input-focus-box-shadow-color: rgba($link, 0.25) !default
+
+$input-disabled-color: $text-light !default
+$input-disabled-background-color: $background !default
+$input-disabled-border-color: $background !default
+
+$input-arrow: $link !default
+
+$input-icon-color: $grey-lighter !default
+$input-icon-active-color: $grey !default
+
+$input-radius: $radius !default
+
+$file-border-color: $border !default
+$file-radius: $radius !default
+
+$file-cta-background-color: $white-ter !default
+$file-cta-color: $grey-dark !default
+$file-cta-hover-color: $grey-darker !default
+$file-cta-active-color: $grey-darker !default
+
+$file-name-border-color: $border !default
+$file-name-border-style: solid !default
+$file-name-border-width: 1px 1px 1px 0 !default
+$file-name-max-width: 16em !default
+
+$label-color: $grey-darker !default
+$label-weight: $weight-bold !default
+
+$help-size: $size-small !default
+
+=input
+ +control
+ background-color: $input-background-color
+ border-color: $input-border-color
+ color: $input-color
+ +placeholder
+ color: rgba($input-color, 0.3)
+ &:hover,
+ &.is-hovered
+ border-color: $input-hover-border-color
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active
+ border-color: $input-focus-border-color
+ box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
+ &[disabled]
+ background-color: $input-disabled-background-color
+ border-color: $input-disabled-border-color
+ box-shadow: none
+ color: $input-disabled-color
+ +placeholder
+ color: rgba($input-disabled-color, 0.3)
+
+.input,
+.textarea
+ +input
+ box-shadow: $input-shadow
+ max-width: 100%
+ width: 100%
+ &[readonly]
+ box-shadow: none
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ &.is-#{$name}
+ border-color: $color
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active
+ box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+ // Sizes
+ &.is-small
+ +control-small
+ &.is-medium
+ +control-medium
+ &.is-large
+ +control-large
+ // Modifiers
+ &.is-fullwidth
+ display: block
+ width: 100%
+ &.is-inline
+ display: inline
+ width: auto
+
+.input
+ &.is-rounded
+ border-radius: $radius-rounded
+ padding-left: 1em
+ padding-right: 1em
+ &.is-static
+ background-color: transparent
+ border-color: transparent
+ box-shadow: none
+ padding-left: 0
+ padding-right: 0
+
+.textarea
+ display: block
+ max-width: 100%
+ min-width: 100%
+ padding: 0.625em
+ resize: vertical
+ &:not([rows])
+ max-height: 600px
+ min-height: 120px
+ &[rows]
+ height: initial
+ // Modifiers
+ &.has-fixed-size
+ resize: none
+
+.checkbox,
+.radio
+ cursor: pointer
+ display: inline-block
+ line-height: 1.25
+ position: relative
+ input
+ cursor: pointer
+ &:hover
+ color: $input-hover-color
+ &[disabled]
+ color: $input-disabled-color
+ cursor: not-allowed
+
+.radio
+ & + .radio
+ margin-left: 0.5em
+
+.select
+ display: inline-block
+ max-width: 100%
+ position: relative
+ vertical-align: top
+ &:not(.is-multiple)
+ height: 2.25em
+ &:not(.is-multiple):not(.is-loading)
+ &::after
+ +arrow($input-arrow)
+ right: 1.125em
+ z-index: 4
+ &.is-rounded
+ select
+ border-radius: $radius-rounded
+ padding-left: 1em
+ select
+ +input
+ cursor: pointer
+ display: block
+ font-size: 1em
+ max-width: 100%
+ outline: none
+ &::-ms-expand
+ display: none
+ &[disabled]:hover
+ border-color: $input-disabled-border-color
+ &:not([multiple])
+ padding-right: 2.5em
+ &[multiple]
+ height: initial
+ padding: 0
+ option
+ padding: 0.5em 1em
+ // States
+ &:not(.is-multiple):not(.is-loading):hover
+ &::after
+ border-color: $input-hover-color
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ &.is-#{$name}
+ &:not(:hover)::after
+ border-color: $color
+ select
+ border-color: $color
+ &:hover,
+ &.is-hovered
+ border-color: darken($color, 5%)
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active
+ box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+ // Sizes
+ &.is-small
+ +control-small
+ &.is-medium
+ +control-medium
+ &.is-large
+ +control-large
+ // Modifiers
+ &.is-disabled
+ &::after
+ border-color: $input-disabled-color
+ &.is-fullwidth
+ width: 100%
+ select
+ width: 100%
+ &.is-loading
+ &::after
+ +loader
+ margin-top: 0
+ position: absolute
+ right: 0.625em
+ top: 0.625em
+ transform: none
+ &.is-small:after
+ font-size: $size-small
+ &.is-medium:after
+ font-size: $size-medium
+ &.is-large:after
+ font-size: $size-large
+
+.file
+ +unselectable
+ align-items: stretch
+ display: flex
+ justify-content: flex-start
+ position: relative
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ .file-cta
+ background-color: $color
+ border-color: transparent
+ color: $color-invert
+ &:hover,
+ &.is-hovered
+ .file-cta
+ background-color: darken($color, 2.5%)
+ border-color: transparent
+ color: $color-invert
+ &:focus,
+ &.is-focused
+ .file-cta
+ border-color: transparent
+ box-shadow: 0 0 0.5em rgba($color, 0.25)
+ color: $color-invert
+ &:active,
+ &.is-active
+ .file-cta
+ background-color: darken($color, 5%)
+ border-color: transparent
+ color: $color-invert
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ .file-icon
+ .fa
+ font-size: 21px
+ &.is-large
+ font-size: $size-large
+ .file-icon
+ .fa
+ font-size: 28px
+ // Modifiers
+ &.has-name
+ .file-cta
+ border-bottom-right-radius: 0
+ border-top-right-radius: 0
+ .file-name
+ border-bottom-left-radius: 0
+ border-top-left-radius: 0
+ &.is-empty
+ .file-cta
+ border-radius: $file-radius
+ .file-name
+ display: none
+ &.is-boxed
+ .file-label
+ flex-direction: column
+ .file-cta
+ flex-direction: column
+ height: auto
+ padding: 1em 3em
+ .file-name
+ border-width: 0 1px 1px
+ .file-icon
+ height: 1.5em
+ width: 1.5em
+ .fa
+ font-size: 21px
+ &.is-small
+ .file-icon .fa
+ font-size: 14px
+ &.is-medium
+ .file-icon .fa
+ font-size: 28px
+ &.is-large
+ .file-icon .fa
+ font-size: 35px
+ &.has-name
+ .file-cta
+ border-radius: $file-radius $file-radius 0 0
+ .file-name
+ border-radius: 0 0 $file-radius $file-radius
+ border-width: 0 1px 1px
+ &.is-centered
+ justify-content: center
+ &.is-fullwidth
+ .file-label
+ width: 100%
+ .file-name
+ flex-grow: 1
+ max-width: none
+ &.is-right
+ justify-content: flex-end
+ .file-cta
+ border-radius: 0 $file-radius $file-radius 0
+ .file-name
+ border-radius: $file-radius 0 0 $file-radius
+ border-width: 1px 0 1px 1px
+ order: -1
+
+.file-label
+ align-items: stretch
+ display: flex
+ cursor: pointer
+ justify-content: flex-start
+ overflow: hidden
+ position: relative
+ &:hover
+ .file-cta
+ background-color: darken($file-cta-background-color, 2.5%)
+ color: $file-cta-hover-color
+ .file-name
+ border-color: darken($file-name-border-color, 2.5%)
+ &:active
+ .file-cta
+ background-color: darken($file-cta-background-color, 5%)
+ color: $file-cta-active-color
+ .file-name
+ border-color: darken($file-name-border-color, 5%)
+
+.file-input
+ height: 0.01em
+ left: 0
+ outline: none
+ position: absolute
+ top: 0
+ width: 0.01em
+
+.file-cta,
+.file-name
+ +control
+ border-color: $file-border-color
+ border-radius: $file-radius
+ font-size: 1em
+ padding-left: 1em
+ padding-right: 1em
+ white-space: nowrap
+
+.file-cta
+ background-color: $file-cta-background-color
+ color: $file-cta-color
+
+.file-name
+ border-color: $file-name-border-color
+ border-style: $file-name-border-style
+ border-width: $file-name-border-width
+ display: block
+ max-width: $file-name-max-width
+ overflow: hidden
+ text-align: left
+ text-overflow: ellipsis
+
+.file-icon
+ align-items: center
+ display: flex
+ height: 1em
+ justify-content: center
+ margin-right: 0.5em
+ width: 1em
+ .fa
+ font-size: 14px
+
+.label
+ color: $label-color
+ display: block
+ font-size: $size-normal
+ font-weight: $label-weight
+ &:not(:last-child)
+ margin-bottom: 0.5em
+ // Sizes
+ &.is-small
+ font-size: $size-small
+ &.is-medium
+ font-size: $size-medium
+ &.is-large
+ font-size: $size-large
+
+.help
+ display: block
+ font-size: $help-size
+ margin-top: 0.25rem
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ &.is-#{$name}
+ color: $color
+
+// Containers
+
+.field
+ &:not(:last-child)
+ margin-bottom: 0.75rem
+ // Modifiers
+ &.has-addons
+ display: flex
+ justify-content: flex-start
+ .control
+ &:not(:last-child)
+ margin-right: -1px
+ &:not(:first-child):not(:last-child)
+ .button,
+ .input,
+ .select select
+ border-radius: 0
+ &:first-child
+ .button,
+ .input,
+ .select select
+ border-bottom-right-radius: 0
+ border-top-right-radius: 0
+ &:last-child
+ .button,
+ .input,
+ .select select
+ border-bottom-left-radius: 0
+ border-top-left-radius: 0
+ .button,
+ .input,
+ .select select
+ &:hover,
+ &.is-hovered
+ z-index: 2
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active
+ z-index: 3
+ &:hover
+ z-index: 4
+ &.is-expanded
+ flex-grow: 1
+ &.has-addons-centered
+ justify-content: center
+ &.has-addons-right
+ justify-content: flex-end
+ &.has-addons-fullwidth
+ .control
+ flex-grow: 1
+ flex-shrink: 0
+ &.is-grouped
+ display: flex
+ justify-content: flex-start
+ & > .control
+ flex-shrink: 0
+ &:not(:last-child)
+ margin-bottom: 0
+ margin-right: 0.75rem
+ &.is-expanded
+ flex-grow: 1
+ flex-shrink: 1
+ &.is-grouped-centered
+ justify-content: center
+ &.is-grouped-right
+ justify-content: flex-end
+ &.is-grouped-multiline
+ flex-wrap: wrap
+ & > .control
+ &:last-child,
+ &:not(:last-child)
+ margin-bottom: 0.75rem
+ &:last-child
+ margin-bottom: -0.75rem
+ &:not(:last-child)
+ margin-bottom: 0
+
+ &.is-horizontal
+ +tablet
+ display: flex
+
+.field-label
+ .label
+ font-size: inherit
+ +mobile
+ margin-bottom: 0.5rem
+ +tablet
+ flex-basis: 0
+ flex-grow: 1
+ flex-shrink: 0
+ margin-right: 1.5rem
+ text-align: right
+ &.is-small
+ font-size: $size-small
+ padding-top: 0.375em
+ &.is-normal
+ padding-top: 0.375em
+ &.is-medium
+ font-size: $size-medium
+ padding-top: 0.375em
+ &.is-large
+ font-size: $size-large
+ padding-top: 0.375em
+
+.field-body
+ .field .field
+ margin-bottom: 0
+ +tablet
+ display: flex
+ flex-basis: 0
+ flex-grow: 5
+ flex-shrink: 1
+ .field
+ margin-bottom: 0
+ & > .field
+ flex-shrink: 1
+ &:not(.is-narrow)
+ flex-grow: 1
+ &:not(:last-child)
+ margin-right: 0.75rem
+
+.control
+ font-size: $size-normal
+ position: relative
+ text-align: left
+ // Modifiers
+ // DEPRECATED
+ &.has-icon
+ .icon
+ color: $input-icon-color
+ height: 2.25em
+ pointer-events: none
+ position: absolute
+ top: 0
+ width: 2.25em
+ z-index: 4
+ .input
+ &:focus
+ & + .icon
+ color: $input-icon-active-color
+ &.is-small
+ & + .icon
+ font-size: $size-small
+ &.is-medium
+ & + .icon
+ font-size: $size-medium
+ &.is-large
+ & + .icon
+ font-size: $size-large
+ &:not(.has-icon-right)
+ .icon
+ left: 0
+ .input
+ padding-left: 2.25em
+ &.has-icon-right
+ .icon
+ right: 0
+ .input
+ padding-right: 2.25em
+ &.has-icons-left,
+ &.has-icons-right
+ .input,
+ .select
+ &:focus
+ & ~ .icon
+ color: $input-icon-active-color
+ &.is-small ~ .icon
+ font-size: $size-small
+ &.is-medium ~ .icon
+ font-size: $size-medium
+ &.is-large ~ .icon
+ font-size: $size-large
+ .icon
+ color: $input-icon-color
+ height: 2.25em
+ pointer-events: none
+ position: absolute
+ top: 0
+ width: 2.25em
+ z-index: 4
+ &.has-icons-left
+ .input,
+ .select select
+ padding-left: 2.25em
+ .icon.is-left
+ left: 0
+ &.has-icons-right
+ .input,
+ .select select
+ padding-right: 2.25em
+ .icon.is-right
+ right: 0
+ &.is-loading
+ &::after
+ +loader
+ position: absolute !important
+ right: 0.625em
+ top: 0.625em
+ z-index: 4
+ &.is-small:after
+ font-size: $size-small
+ &.is-medium:after
+ font-size: $size-medium
+ &.is-large:after
+ font-size: $size-large
diff --git a/webapp/src/scss/sass/elements/icon.sass b/webapp/src/scss/sass/elements/icon.sass
new file mode 100644
index 0000000000000000000000000000000000000000..988546c7fc2d24b1d38e81afec65e655366009fc
--- /dev/null
+++ b/webapp/src/scss/sass/elements/icon.sass
@@ -0,0 +1,21 @@
+$icon-dimensions: 1.5rem !default
+$icon-dimensions-small: 1rem !default
+$icon-dimensions-medium: 2rem !default
+$icon-dimensions-large: 3rem !default
+
+.icon
+ align-items: center
+ display: inline-flex
+ justify-content: center
+ height: $icon-dimensions
+ width: $icon-dimensions
+ // Sizes
+ &.is-small
+ height: $icon-dimensions-small
+ width: $icon-dimensions-small
+ &.is-medium
+ height: $icon-dimensions-medium
+ width: $icon-dimensions-medium
+ &.is-large
+ height: $icon-dimensions-large
+ width: $icon-dimensions-large
diff --git a/webapp/src/scss/sass/elements/image.sass b/webapp/src/scss/sass/elements/image.sass
new file mode 100644
index 0000000000000000000000000000000000000000..10bad209f11882a6e94b2023aef3ea07688ce497
--- /dev/null
+++ b/webapp/src/scss/sass/elements/image.sass
@@ -0,0 +1,68 @@
+$dimensions: 16 24 32 48 64 96 128 !default
+
+.image
+ display: block
+ position: relative
+ img
+ display: block
+ height: auto
+ width: 100%
+ &.is-rounded
+ border-radius: $radius-rounded
+ // Ratio
+ &.is-square,
+ &.is-1by1,
+ &.is-5by4,
+ &.is-4by3,
+ &.is-3by2,
+ &.is-5by3,
+ &.is-16by9,
+ &.is-2by1,
+ &.is-3by1,
+ &.is-4by5,
+ &.is-3by4,
+ &.is-2by3,
+ &.is-3by5,
+ &.is-9by16,
+ &.is-1by2,
+ &.is-1by3
+ img
+ +overlay
+ height: 100%
+ width: 100%
+ &.is-square,
+ &.is-1by1
+ padding-top: 100%
+ &.is-5by4
+ padding-top: 80%
+ &.is-4by3
+ padding-top: 75%
+ &.is-3by2
+ padding-top: 66.6666%
+ &.is-5by3
+ padding-top: 60%
+ &.is-16by9
+ padding-top: 56.25%
+ &.is-2by1
+ padding-top: 50%
+ &.is-3by1
+ padding-top: 33.3333%
+ &.is-4by5
+ padding-top: 125%
+ &.is-3by4
+ padding-top: 133.3333%
+ &.is-2by3
+ padding-top: 150%
+ &.is-3by5
+ padding-top: 166.6666%
+ &.is-9by16
+ padding-top: 177.7777%
+ &.is-1by2
+ padding-top: 200%
+ &.is-1by3
+ padding-top: 300%
+ // Sizes
+ @each $dimension in $dimensions
+ &.is-#{$dimension}x#{$dimension}
+ height: $dimension * 1px
+ width: $dimension * 1px
diff --git a/webapp/src/scss/sass/elements/notification.sass b/webapp/src/scss/sass/elements/notification.sass
new file mode 100644
index 0000000000000000000000000000000000000000..8daccaad16425bcc787c9e2a3153fc8b22b919e3
--- /dev/null
+++ b/webapp/src/scss/sass/elements/notification.sass
@@ -0,0 +1,35 @@
+$notification-background-color: $background !default
+$notification-radius: $radius !default
+$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
+
+.notification
+ +block
+ background-color: $notification-background-color
+ border-radius: $notification-radius
+ padding: $notification-padding
+ position: relative
+ a:not(.button)
+ color: currentColor
+ text-decoration: underline
+ strong
+ color: currentColor
+ code,
+ pre
+ background: $white
+ pre code
+ background: transparent
+ & > .delete
+ position: absolute
+ right: 0.5rem
+ top: 0.5rem
+ .title,
+ .subtitle,
+ .content
+ color: currentColor
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ background-color: $color
+ color: $color-invert
diff --git a/webapp/src/scss/sass/elements/other.sass b/webapp/src/scss/sass/elements/other.sass
new file mode 100644
index 0000000000000000000000000000000000000000..b10d1fa348738798e634292bd0b0b3fe79e12eef
--- /dev/null
+++ b/webapp/src/scss/sass/elements/other.sass
@@ -0,0 +1,39 @@
+.block
+ +block
+
+.delete
+ +delete
+
+.heading
+ display: block
+ font-size: 11px
+ letter-spacing: 1px
+ margin-bottom: 5px
+ text-transform: uppercase
+
+.highlight
+ +block
+ font-weight: $weight-normal
+ max-width: 100%
+ overflow: hidden
+ padding: 0
+ pre
+ overflow: auto
+ max-width: 100%
+
+.loader
+ +loader
+
+.number
+ align-items: center
+ background-color: $background
+ border-radius: $radius-rounded
+ display: inline-flex
+ font-size: $size-medium
+ height: 2em
+ justify-content: center
+ margin-right: 1.5rem
+ min-width: 2.5em
+ padding: 0.25rem 0.5rem
+ text-align: center
+ vertical-align: top
diff --git a/webapp/src/scss/sass/elements/progress.sass b/webapp/src/scss/sass/elements/progress.sass
new file mode 100644
index 0000000000000000000000000000000000000000..f6e8de37aaeff026888227ff27f42a65fe0d385c
--- /dev/null
+++ b/webapp/src/scss/sass/elements/progress.sass
@@ -0,0 +1,40 @@
+$progress-bar-background-color: $border !default
+$progress-value-background-color: $text !default
+
+.progress
+ +block
+ -moz-appearance: none
+ -webkit-appearance: none
+ border: none
+ border-radius: $radius-rounded
+ display: block
+ height: $size-normal
+ overflow: hidden
+ padding: 0
+ width: 100%
+ &::-webkit-progress-bar
+ background-color: $progress-bar-background-color
+ &::-webkit-progress-value
+ background-color: $progress-value-background-color
+ &::-moz-progress-bar
+ background-color: $progress-value-background-color
+ &::-ms-fill
+ background-color: $progress-value-background-color
+ border: none
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ &.is-#{$name}
+ &::-webkit-progress-value
+ background-color: $color
+ &::-moz-progress-bar
+ background-color: $color
+ &::-ms-fill
+ background-color: $color
+ // Sizes
+ &.is-small
+ height: $size-small
+ &.is-medium
+ height: $size-medium
+ &.is-large
+ height: $size-large
diff --git a/webapp/src/scss/sass/elements/table.sass b/webapp/src/scss/sass/elements/table.sass
new file mode 100644
index 0000000000000000000000000000000000000000..d0e94e561696db692afd73bb5a1c5f98ecc880b9
--- /dev/null
+++ b/webapp/src/scss/sass/elements/table.sass
@@ -0,0 +1,117 @@
+$table-color: $grey-darker !default
+$table-background-color: $white !default
+
+$table-cell-border: 1px solid $grey-lighter !default
+$table-cell-border-width: 0 0 1px !default
+$table-cell-padding: 0.5em 0.75em !default
+$table-cell-heading-color: $text-strong !default
+
+$table-head-cell-border-width: 0 0 2px !default
+$table-head-cell-color: $text-strong !default
+$table-foot-cell-border-width: 2px 0 0 !default
+$table-foot-cell-color: $text-strong !default
+
+$table-row-hover-background-color: $white-bis !default
+
+$table-row-active-background-color: $primary !default
+$table-row-active-color: $primary-invert !default
+
+$table-striped-row-even-background-color: $white-bis !default
+$table-striped-row-even-hover-background-color: $white-ter !default
+
+.table
+ +block
+ background-color: $table-background-color
+ color: $table-color
+ td,
+ th
+ border: $table-cell-border
+ border-width: $table-cell-border-width
+ padding: $table-cell-padding
+ vertical-align: top
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ background-color: $color
+ border-color: $color
+ color: $color-invert
+ // Modifiers
+ &.is-narrow
+ white-space: nowrap
+ width: 1%
+ &.is-selected
+ background-color: $table-row-active-background-color
+ color: $table-row-active-color
+ a,
+ strong
+ color: currentColor
+ th
+ color: $table-cell-heading-color
+ text-align: left
+ tr
+ &.is-selected
+ background-color: $table-row-active-background-color
+ color: $table-row-active-color
+ a,
+ strong
+ color: currentColor
+ td,
+ th
+ border-color: $table-row-active-color
+ color: currentColor
+ thead
+ td,
+ th
+ border-width: $table-head-cell-border-width
+ color: $table-head-cell-color
+ tfoot
+ td,
+ th
+ border-width: $table-foot-cell-border-width
+ color: $table-foot-cell-color
+ tbody
+ tr
+ &:last-child
+ td,
+ th
+ border-bottom-width: 0
+ // Modifiers
+ &.is-bordered
+ td,
+ th
+ border-width: 1px
+ tr
+ &:last-child
+ td,
+ th
+ border-bottom-width: 1px
+ &.is-fullwidth
+ width: 100%
+ &.is-hoverable
+ tbody
+ tr:not(.is-selected)
+ &:hover
+ background-color: $table-row-hover-background-color
+ &.is-striped
+ tbody
+ tr:not(.is-selected)
+ &:hover
+ background-color: $table-striped-row-even-hover-background-color
+ &.is-narrow
+ td,
+ th
+ padding: 0.25em 0.5em
+ &.is-striped
+ tbody
+ tr:not(.is-selected)
+ &:nth-child(even)
+ background-color: $table-striped-row-even-background-color
+
+.table-container
+ +block
+ +overflow-touch
+ overflow: auto
+ overflow-y: hidden
+ max-width: 100%
diff --git a/webapp/src/scss/sass/elements/tag.sass b/webapp/src/scss/sass/elements/tag.sass
new file mode 100644
index 0000000000000000000000000000000000000000..7c250546158a3bda79a400136bb57fee98fc67e9
--- /dev/null
+++ b/webapp/src/scss/sass/elements/tag.sass
@@ -0,0 +1,111 @@
+$tag-background-color: $background !default
+$tag-color: $text !default
+$tag-radius: $radius !default
+$tag-delete-margin: 1px !default
+
+.tags
+ align-items: center
+ display: flex
+ flex-wrap: wrap
+ justify-content: flex-start
+ .tag
+ margin-bottom: 0.5rem
+ &:not(:last-child)
+ margin-right: 0.5rem
+ &:last-child
+ margin-bottom: -0.5rem
+ &:not(:last-child)
+ margin-bottom: 1rem
+ &.has-addons
+ .tag
+ margin-right: 0
+ &:not(:first-child)
+ border-bottom-left-radius: 0
+ border-top-left-radius: 0
+ &:not(:last-child)
+ border-bottom-right-radius: 0
+ border-top-right-radius: 0
+ &.is-centered
+ justify-content: center
+ .tag
+ margin-right: 0.25rem
+ margin-left: 0.25rem
+ &.is-right
+ justify-content: flex-end
+ .tag
+ &:not(:first-child)
+ margin-left: 0.5rem
+ &:not(:last-child)
+ margin-right: 0
+
+.tag:not(body)
+ align-items: center
+ background-color: $tag-background-color
+ border-radius: $tag-radius
+ color: $tag-color
+ display: inline-flex
+ font-size: $size-small
+ height: 2em
+ justify-content: center
+ line-height: 1.5
+ padding-left: 0.75em
+ padding-right: 0.75em
+ white-space: nowrap
+ .delete
+ margin-left: 0.25rem
+ margin-right: -0.375rem
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ background-color: $color
+ color: $color-invert
+ // Sizes
+ &.is-medium
+ font-size: $size-normal
+ &.is-large
+ font-size: $size-medium
+ .icon
+ &:first-child:not(:last-child)
+ margin-left: -0.375em
+ margin-right: 0.1875em
+ &:last-child:not(:first-child)
+ margin-left: 0.1875em
+ margin-right: -0.375em
+ &:first-child:last-child
+ margin-left: -0.375em
+ margin-right: -0.375em
+ // Modifiers
+ &.is-delete
+ margin-left: $tag-delete-margin
+ padding: 0
+ position: relative
+ width: 2em
+ &::before,
+ &::after
+ background-color: currentColor
+ content: ""
+ display: block
+ left: 50%
+ position: absolute
+ top: 50%
+ transform: translateX(-50%) translateY(-50%) rotate(45deg)
+ transform-origin: center center
+ &::before
+ height: 1px
+ width: 50%
+ &::after
+ height: 50%
+ width: 1px
+ &:hover,
+ &:focus
+ background-color: darken($tag-background-color, 5%)
+ &:active
+ background-color: darken($tag-background-color, 10%)
+ &.is-rounded
+ border-radius: $radius-rounded
+
+a.tag
+ &:hover
+ text-decoration: underline
diff --git a/webapp/src/scss/sass/elements/title.sass b/webapp/src/scss/sass/elements/title.sass
new file mode 100644
index 0000000000000000000000000000000000000000..46f66680206e1d2425af2a5c3afd4e3110dd13fb
--- /dev/null
+++ b/webapp/src/scss/sass/elements/title.sass
@@ -0,0 +1,64 @@
+$title-color: $grey-darker !default
+$title-size: $size-3 !default
+$title-weight: $weight-semibold !default
+$title-line-height: 1.125 !default
+$title-strong-color: inherit !default
+$title-strong-weight: inherit !default
+$title-sub-size: 0.75em !default
+$title-sup-size: 0.75em !default
+
+$subtitle-color: $grey-dark !default
+$subtitle-size: $size-5 !default
+$subtitle-weight: $weight-normal !default
+$subtitle-line-height: 1.25 !default
+$subtitle-strong-color: $grey-darker !default
+$subtitle-strong-weight: $weight-semibold !default
+$subtitle-negative-margin: -1.25rem !default
+
+.title,
+.subtitle
+ +block
+ word-break: break-word
+ em,
+ span
+ font-weight: inherit
+ sub
+ font-size: $title-sub-size
+ sup
+ font-size: $title-sup-size
+ .tag
+ vertical-align: middle
+
+.title
+ color: $title-color
+ font-size: $title-size
+ font-weight: $title-weight
+ line-height: $title-line-height
+ strong
+ color: $title-strong-color
+ font-weight: $title-strong-weight
+ & + .highlight
+ margin-top: -0.75rem
+ &:not(.is-spaced) + .subtitle
+ margin-top: $subtitle-negative-margin
+ // Sizes
+ @each $size in $sizes
+ $i: index($sizes, $size)
+ &.is-#{$i}
+ font-size: $size
+
+.subtitle
+ color: $subtitle-color
+ font-size: $subtitle-size
+ font-weight: $subtitle-weight
+ line-height: $subtitle-line-height
+ strong
+ color: $subtitle-strong-color
+ font-weight: $subtitle-strong-weight
+ &:not(.is-spaced) + .title
+ margin-top: $subtitle-negative-margin
+ // Sizes
+ @each $size in $sizes
+ $i: index($sizes, $size)
+ &.is-#{$i}
+ font-size: $size
diff --git a/webapp/src/scss/sass/grid/_all.sass b/webapp/src/scss/sass/grid/_all.sass
new file mode 100644
index 0000000000000000000000000000000000000000..e53070f6c32c6c3cca390dd596b5a373f737112a
--- /dev/null
+++ b/webapp/src/scss/sass/grid/_all.sass
@@ -0,0 +1,4 @@
+@charset "utf-8"
+
+@import "columns.sass"
+@import "tiles.sass"
diff --git a/webapp/src/scss/sass/grid/columns.sass b/webapp/src/scss/sass/grid/columns.sass
new file mode 100644
index 0000000000000000000000000000000000000000..0b5d4de9d3652161c2d700bff00bd07c2687ea85
--- /dev/null
+++ b/webapp/src/scss/sass/grid/columns.sass
@@ -0,0 +1,477 @@
+$column-gap: 0.75rem !default
+
+.column
+ display: block
+ flex-basis: 0
+ flex-grow: 1
+ flex-shrink: 1
+ padding: $column-gap
+ .columns.is-mobile > &.is-narrow
+ flex: none
+ .columns.is-mobile > &.is-full
+ flex: none
+ width: 100%
+ .columns.is-mobile > &.is-three-quarters
+ flex: none
+ width: 75%
+ .columns.is-mobile > &.is-two-thirds
+ flex: none
+ width: 66.6666%
+ .columns.is-mobile > &.is-half
+ flex: none
+ width: 50%
+ .columns.is-mobile > &.is-one-third
+ flex: none
+ width: 33.3333%
+ .columns.is-mobile > &.is-one-quarter
+ flex: none
+ width: 25%
+ .columns.is-mobile > &.is-one-fifth
+ flex: none
+ width: 20%
+ .columns.is-mobile > &.is-two-fifths
+ flex: none
+ width: 40%
+ .columns.is-mobile > &.is-three-fifths
+ flex: none
+ width: 60%
+ .columns.is-mobile > &.is-four-fifths
+ flex: none
+ width: 80%
+ .columns.is-mobile > &.is-offset-three-quarters
+ margin-left: 75%
+ .columns.is-mobile > &.is-offset-two-thirds
+ margin-left: 66.6666%
+ .columns.is-mobile > &.is-offset-half
+ margin-left: 50%
+ .columns.is-mobile > &.is-offset-one-third
+ margin-left: 33.3333%
+ .columns.is-mobile > &.is-offset-one-quarter
+ margin-left: 25%
+ .columns.is-mobile > &.is-offset-one-fifth
+ margin-left: 20%
+ .columns.is-mobile > &.is-offset-two-fifths
+ margin-left: 40%
+ .columns.is-mobile > &.is-offset-three-fifths
+ margin-left: 60%
+ .columns.is-mobile > &.is-offset-four-fifths
+ margin-left: 80%
+ @for $i from 1 through 12
+ .columns.is-mobile > &.is-#{$i}
+ flex: none
+ width: percentage($i / 12)
+ .columns.is-mobile > &.is-offset-#{$i}
+ margin-left: percentage($i / 12)
+ +mobile
+ &.is-narrow-mobile
+ flex: none
+ &.is-full-mobile
+ flex: none
+ width: 100%
+ &.is-three-quarters-mobile
+ flex: none
+ width: 75%
+ &.is-two-thirds-mobile
+ flex: none
+ width: 66.6666%
+ &.is-half-mobile
+ flex: none
+ width: 50%
+ &.is-one-third-mobile
+ flex: none
+ width: 33.3333%
+ &.is-one-quarter-mobile
+ flex: none
+ width: 25%
+ &.is-one-fifth-mobile
+ flex: none
+ width: 20%
+ &.is-two-fifths-mobile
+ flex: none
+ width: 40%
+ &.is-three-fifths-mobile
+ flex: none
+ width: 60%
+ &.is-four-fifths-mobile
+ flex: none
+ width: 80%
+ &.is-offset-three-quarters-mobile
+ margin-left: 75%
+ &.is-offset-two-thirds-mobile
+ margin-left: 66.6666%
+ &.is-offset-half-mobile
+ margin-left: 50%
+ &.is-offset-one-third-mobile
+ margin-left: 33.3333%
+ &.is-offset-one-quarter-mobile
+ margin-left: 25%
+ &.is-offset-one-fifth-mobile
+ margin-left: 20%
+ &.is-offset-two-fifths-mobile
+ margin-left: 40%
+ &.is-offset-three-fifths-mobile
+ margin-left: 60%
+ &.is-offset-four-fifths-mobile
+ margin-left: 80%
+ @for $i from 1 through 12
+ &.is-#{$i}-mobile
+ flex: none
+ width: percentage($i / 12)
+ &.is-offset-#{$i}-mobile
+ margin-left: percentage($i / 12)
+ +tablet
+ &.is-narrow,
+ &.is-narrow-tablet
+ flex: none
+ &.is-full,
+ &.is-full-tablet
+ flex: none
+ width: 100%
+ &.is-three-quarters,
+ &.is-three-quarters-tablet
+ flex: none
+ width: 75%
+ &.is-two-thirds,
+ &.is-two-thirds-tablet
+ flex: none
+ width: 66.6666%
+ &.is-half,
+ &.is-half-tablet
+ flex: none
+ width: 50%
+ &.is-one-third,
+ &.is-one-third-tablet
+ flex: none
+ width: 33.3333%
+ &.is-one-quarter,
+ &.is-one-quarter-tablet
+ flex: none
+ width: 25%
+ &.is-one-fifth,
+ &.is-one-fifth-tablet
+ flex: none
+ width: 20%
+ &.is-two-fifths,
+ &.is-two-fifths-tablet
+ flex: none
+ width: 40%
+ &.is-three-fifths,
+ &.is-three-fifths-tablet
+ flex: none
+ width: 60%
+ &.is-four-fifths,
+ &.is-four-fifths-tablet
+ flex: none
+ width: 80%
+ &.is-offset-three-quarters,
+ &.is-offset-three-quarters-tablet
+ margin-left: 75%
+ &.is-offset-two-thirds,
+ &.is-offset-two-thirds-tablet
+ margin-left: 66.6666%
+ &.is-offset-half,
+ &.is-offset-half-tablet
+ margin-left: 50%
+ &.is-offset-one-third,
+ &.is-offset-one-third-tablet
+ margin-left: 33.3333%
+ &.is-offset-one-quarter,
+ &.is-offset-one-quarter-tablet
+ margin-left: 25%
+ &.is-offset-one-fifth,
+ &.is-offset-one-fifth-tablet
+ margin-left: 20%
+ &.is-offset-two-fifths,
+ &.is-offset-two-fifths-tablet
+ margin-left: 40%
+ &.is-offset-three-fifths,
+ &.is-offset-three-fifths-tablet
+ margin-left: 60%
+ &.is-offset-four-fifths,
+ &.is-offset-four-fifths-tablet
+ margin-left: 80%
+ @for $i from 1 through 12
+ &.is-#{$i},
+ &.is-#{$i}-tablet
+ flex: none
+ width: percentage($i / 12)
+ &.is-offset-#{$i},
+ &.is-offset-#{$i}-tablet
+ margin-left: percentage($i / 12)
+ +touch
+ &.is-narrow-touch
+ flex: none
+ &.is-full-touch
+ flex: none
+ width: 100%
+ &.is-three-quarters-touch
+ flex: none
+ width: 75%
+ &.is-two-thirds-touch
+ flex: none
+ width: 66.6666%
+ &.is-half-touch
+ flex: none
+ width: 50%
+ &.is-one-third-touch
+ flex: none
+ width: 33.3333%
+ &.is-one-quarter-touch
+ flex: none
+ width: 25%
+ &.is-one-fifth-touch
+ flex: none
+ width: 20%
+ &.is-two-fifths-touch
+ flex: none
+ width: 40%
+ &.is-three-fifths-touch
+ flex: none
+ width: 60%
+ &.is-four-fifths-touch
+ flex: none
+ width: 80%
+ &.is-offset-three-quarters-touch
+ margin-left: 75%
+ &.is-offset-two-thirds-touch
+ margin-left: 66.6666%
+ &.is-offset-half-touch
+ margin-left: 50%
+ &.is-offset-one-third-touch
+ margin-left: 33.3333%
+ &.is-offset-one-quarter-touch
+ margin-left: 25%
+ &.is-offset-one-fifth-touch
+ margin-left: 20%
+ &.is-offset-two-fifths-touch
+ margin-left: 40%
+ &.is-offset-three-fifths-touch
+ margin-left: 60%
+ &.is-offset-four-fifths-touch
+ margin-left: 80%
+ @for $i from 1 through 12
+ &.is-#{$i}-touch
+ flex: none
+ width: percentage($i / 12)
+ &.is-offset-#{$i}-touch
+ margin-left: percentage($i / 12)
+ +desktop
+ &.is-narrow-desktop
+ flex: none
+ &.is-full-desktop
+ flex: none
+ width: 100%
+ &.is-three-quarters-desktop
+ flex: none
+ width: 75%
+ &.is-two-thirds-desktop
+ flex: none
+ width: 66.6666%
+ &.is-half-desktop
+ flex: none
+ width: 50%
+ &.is-one-third-desktop
+ flex: none
+ width: 33.3333%
+ &.is-one-quarter-desktop
+ flex: none
+ width: 25%
+ &.is-one-fifth-desktop
+ flex: none
+ width: 20%
+ &.is-two-fifths-desktop
+ flex: none
+ width: 40%
+ &.is-three-fifths-desktop
+ flex: none
+ width: 60%
+ &.is-four-fifths-desktop
+ flex: none
+ width: 80%
+ &.is-offset-three-quarters-desktop
+ margin-left: 75%
+ &.is-offset-two-thirds-desktop
+ margin-left: 66.6666%
+ &.is-offset-half-desktop
+ margin-left: 50%
+ &.is-offset-one-third-desktop
+ margin-left: 33.3333%
+ &.is-offset-one-quarter-desktop
+ margin-left: 25%
+ &.is-offset-one-fifth-desktop
+ margin-left: 20%
+ &.is-offset-two-fifths-desktop
+ margin-left: 40%
+ &.is-offset-three-fifths-desktop
+ margin-left: 60%
+ &.is-offset-four-fifths-desktop
+ margin-left: 80%
+ @for $i from 1 through 12
+ &.is-#{$i}-desktop
+ flex: none
+ width: percentage($i / 12)
+ &.is-offset-#{$i}-desktop
+ margin-left: percentage($i / 12)
+ +widescreen
+ &.is-narrow-widescreen
+ flex: none
+ &.is-full-widescreen
+ flex: none
+ width: 100%
+ &.is-three-quarters-widescreen
+ flex: none
+ width: 75%
+ &.is-two-thirds-widescreen
+ flex: none
+ width: 66.6666%
+ &.is-half-widescreen
+ flex: none
+ width: 50%
+ &.is-one-third-widescreen
+ flex: none
+ width: 33.3333%
+ &.is-one-quarter-widescreen
+ flex: none
+ width: 25%
+ &.is-one-fifth-widescreen
+ flex: none
+ width: 20%
+ &.is-two-fifths-widescreen
+ flex: none
+ width: 40%
+ &.is-three-fifths-widescreen
+ flex: none
+ width: 60%
+ &.is-four-fifths-widescreen
+ flex: none
+ width: 80%
+ &.is-offset-three-quarters-widescreen
+ margin-left: 75%
+ &.is-offset-two-thirds-widescreen
+ margin-left: 66.6666%
+ &.is-offset-half-widescreen
+ margin-left: 50%
+ &.is-offset-one-third-widescreen
+ margin-left: 33.3333%
+ &.is-offset-one-quarter-widescreen
+ margin-left: 25%
+ &.is-offset-one-fifth-widescreen
+ margin-left: 20%
+ &.is-offset-two-fifths-widescreen
+ margin-left: 40%
+ &.is-offset-three-fifths-widescreen
+ margin-left: 60%
+ &.is-offset-four-fifths-widescreen
+ margin-left: 80%
+ @for $i from 1 through 12
+ &.is-#{$i}-widescreen
+ flex: none
+ width: percentage($i / 12)
+ &.is-offset-#{$i}-widescreen
+ margin-left: percentage($i / 12)
+ +fullhd
+ &.is-narrow-fullhd
+ flex: none
+ &.is-full-fullhd
+ flex: none
+ width: 100%
+ &.is-three-quarters-fullhd
+ flex: none
+ width: 75%
+ &.is-two-thirds-fullhd
+ flex: none
+ width: 66.6666%
+ &.is-half-fullhd
+ flex: none
+ width: 50%
+ &.is-one-third-fullhd
+ flex: none
+ width: 33.3333%
+ &.is-one-quarter-fullhd
+ flex: none
+ width: 25%
+ &.is-one-fifth-fullhd
+ flex: none
+ width: 20%
+ &.is-two-fifths-fullhd
+ flex: none
+ width: 40%
+ &.is-three-fifths-fullhd
+ flex: none
+ width: 60%
+ &.is-four-fifths-fullhd
+ flex: none
+ width: 80%
+ &.is-offset-three-quarters-fullhd
+ margin-left: 75%
+ &.is-offset-two-thirds-fullhd
+ margin-left: 66.6666%
+ &.is-offset-half-fullhd
+ margin-left: 50%
+ &.is-offset-one-third-fullhd
+ margin-left: 33.3333%
+ &.is-offset-one-quarter-fullhd
+ margin-left: 25%
+ &.is-offset-one-fifth-fullhd
+ margin-left: 20%
+ &.is-offset-two-fifths-fullhd
+ margin-left: 40%
+ &.is-offset-three-fifths-fullhd
+ margin-left: 60%
+ &.is-offset-four-fifths-fullhd
+ margin-left: 80%
+ @for $i from 1 through 12
+ &.is-#{$i}-fullhd
+ flex: none
+ width: percentage($i / 12)
+ &.is-offset-#{$i}-fullhd
+ margin-left: percentage($i / 12)
+
+.columns
+ margin-left: (-$column-gap)
+ margin-right: (-$column-gap)
+ margin-top: (-$column-gap)
+ &:last-child
+ margin-bottom: (-$column-gap)
+ &:not(:last-child)
+ margin-bottom: calc(1.5rem - #{$column-gap})
+ // Modifiers
+ &.is-centered
+ justify-content: center
+ &.is-gapless
+ margin-left: 0
+ margin-right: 0
+ margin-top: 0
+ & > .column
+ margin: 0
+ padding: 0 !important
+ &:not(:last-child)
+ margin-bottom: 1.5rem
+ &:last-child
+ margin-bottom: 0
+ &.is-mobile
+ display: flex
+ &.is-multiline
+ flex-wrap: wrap
+ &.is-vcentered
+ align-items: center
+ // Responsiveness
+ +tablet
+ &:not(.is-desktop)
+ display: flex
+ +desktop
+ // Modifiers
+ &.is-desktop
+ display: flex
+
+@if $variable-columns
+ .columns.is-variable
+ --columnGap: 0.75rem
+ margin-left: calc(-1 * var(--columnGap))
+ margin-right: calc(-1 * var(--columnGap))
+ .column
+ padding-left: var(--columnGap)
+ padding-right: var(--columnGap)
+ @for $i from 0 through 8
+ &.is-#{$i}
+ --columnGap: #{$i * 0.25rem}
diff --git a/webapp/src/scss/sass/grid/tiles.sass b/webapp/src/scss/sass/grid/tiles.sass
new file mode 100644
index 0000000000000000000000000000000000000000..1f6a626fc6b9df4d8c14b771ab4a696b4683e37d
--- /dev/null
+++ b/webapp/src/scss/sass/grid/tiles.sass
@@ -0,0 +1,32 @@
+.tile
+ align-items: stretch
+ display: block
+ flex-basis: 0
+ flex-grow: 1
+ flex-shrink: 1
+ min-height: min-content
+ // Modifiers
+ &.is-ancestor
+ margin-left: -0.75rem
+ margin-right: -0.75rem
+ margin-top: -0.75rem
+ &:last-child
+ margin-bottom: -0.75rem
+ &:not(:last-child)
+ margin-bottom: 0.75rem
+ &.is-child
+ margin: 0 !important
+ &.is-parent
+ padding: 0.75rem
+ &.is-vertical
+ flex-direction: column
+ & > .tile.is-child:not(:last-child)
+ margin-bottom: 1.5rem !important
+ // Responsiveness
+ +tablet
+ &:not(.is-child)
+ display: flex
+ @for $i from 1 through 12
+ &.is-#{$i}
+ flex: none
+ width: ($i / 12) * 100%
diff --git a/webapp/src/scss/sass/layout/_all.sass b/webapp/src/scss/sass/layout/_all.sass
new file mode 100644
index 0000000000000000000000000000000000000000..143ada35be8f297e3bf9d70ec415fabd8291254e
--- /dev/null
+++ b/webapp/src/scss/sass/layout/_all.sass
@@ -0,0 +1,5 @@
+@charset "utf-8"
+
+@import "hero.sass"
+@import "section.sass"
+@import "footer.sass"
diff --git a/webapp/src/scss/sass/layout/footer.sass b/webapp/src/scss/sass/layout/footer.sass
new file mode 100644
index 0000000000000000000000000000000000000000..6688482ab1d161f53547fd12e353331874361903
--- /dev/null
+++ b/webapp/src/scss/sass/layout/footer.sass
@@ -0,0 +1,5 @@
+$footer-background-color: $white-bis !default
+
+.footer
+ background-color: $footer-background-color
+ padding: 3rem 1.5rem 6rem
diff --git a/webapp/src/scss/sass/layout/hero.sass b/webapp/src/scss/sass/layout/hero.sass
new file mode 100644
index 0000000000000000000000000000000000000000..be7a9d7bcff2828391a7e8d910efe0a513c7620a
--- /dev/null
+++ b/webapp/src/scss/sass/layout/hero.sass
@@ -0,0 +1,155 @@
+// Main container
+
+.hero
+ align-items: stretch
+ display: flex
+ flex-direction: column
+ justify-content: space-between
+ .navbar
+ background: none
+ .tabs
+ ul
+ border-bottom: none
+ // Colors
+ @each $name, $pair in $colors
+ $color: nth($pair, 1)
+ $color-invert: nth($pair, 2)
+ &.is-#{$name}
+ background-color: $color
+ color: $color-invert
+ a:not(.button):not(.dropdown-item):not(.tag),
+ strong
+ color: inherit
+ .title
+ color: $color-invert
+ .subtitle
+ color: rgba($color-invert, 0.9)
+ a:not(.button),
+ strong
+ color: $color-invert
+ .navbar-menu
+ +touch
+ background-color: $color
+ .navbar-item,
+ .navbar-link
+ color: rgba($color-invert, 0.7)
+ a.navbar-item,
+ .navbar-link
+ &:hover,
+ &.is-active
+ background-color: darken($color, 5%)
+ color: $color-invert
+ .tabs
+ a
+ color: $color-invert
+ opacity: 0.9
+ &:hover
+ opacity: 1
+ li
+ &.is-active a
+ opacity: 1
+ &.is-boxed,
+ &.is-toggle
+ a
+ color: $color-invert
+ &:hover
+ background-color: rgba($black, 0.1)
+ li.is-active a
+ &,
+ &:hover
+ background-color: $color-invert
+ border-color: $color-invert
+ color: $color
+ // Modifiers
+ &.is-bold
+ $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
+ $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
+ background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+ +mobile
+ .navbar-menu
+ background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+ // Responsiveness
+ // +mobile
+ // .nav-toggle
+ // span
+ // background-color: $color-invert
+ // &:hover
+ // background-color: rgba($black, 0.1)
+ // &.is-active
+ // span
+ // background-color: $color-invert
+ // .nav-menu
+ // .nav-item
+ // border-top-color: rgba($color-invert, 0.2)
+ // Sizes
+ &.is-small
+ .hero-body
+ padding-bottom: 1.5rem
+ padding-top: 1.5rem
+ &.is-medium
+ +tablet
+ .hero-body
+ padding-bottom: 9rem
+ padding-top: 9rem
+ &.is-large
+ +tablet
+ .hero-body
+ padding-bottom: 18rem
+ padding-top: 18rem
+ &.is-halfheight,
+ &.is-fullheight
+ .hero-body
+ align-items: center
+ display: flex
+ & > .container
+ flex-grow: 1
+ flex-shrink: 1
+ &.is-halfheight
+ min-height: 50vh
+ &.is-fullheight
+ min-height: 100vh
+
+// Components
+
+.hero-video
+ +overlay
+ overflow: hidden
+ video
+ left: 50%
+ min-height: 100%
+ min-width: 100%
+ position: absolute
+ top: 50%
+ transform: translate3d(-50%, -50%, 0)
+ // Modifiers
+ &.is-transparent
+ opacity: 0.3
+ // Responsiveness
+ +mobile
+ display: none
+
+.hero-buttons
+ margin-top: 1.5rem
+ // Responsiveness
+ +mobile
+ .button
+ display: flex
+ &:not(:last-child)
+ margin-bottom: 0.75rem
+ +tablet
+ display: flex
+ justify-content: center
+ .button:not(:last-child)
+ margin-right: 1.5rem
+
+// Containers
+
+.hero-head,
+.hero-foot
+ flex-grow: 0
+ flex-shrink: 0
+
+.hero-body
+ flex-grow: 1
+ flex-shrink: 0
+ padding: 3rem 1.5rem
diff --git a/webapp/src/scss/sass/layout/section.sass b/webapp/src/scss/sass/layout/section.sass
new file mode 100644
index 0000000000000000000000000000000000000000..6f2d35231f155964b86b5ca24475792d92cdc894
--- /dev/null
+++ b/webapp/src/scss/sass/layout/section.sass
@@ -0,0 +1,13 @@
+$section-padding: 3rem 1.5rem !default
+$section-padding-medium: 9rem 1.5rem !default
+$section-padding-large: 18rem 1.5rem !default
+
+.section
+ padding: $section-padding
+ // Responsiveness
+ +desktop
+ // Sizes
+ &.is-medium
+ padding: $section-padding-medium
+ &.is-large
+ padding: $section-padding-large
diff --git a/webapp/src/scss/sass/utilities/_all.sass b/webapp/src/scss/sass/utilities/_all.sass
new file mode 100644
index 0000000000000000000000000000000000000000..bf4ecfe3585810c5ad3b6c89bf208d8a0aa983e2
--- /dev/null
+++ b/webapp/src/scss/sass/utilities/_all.sass
@@ -0,0 +1,8 @@
+@charset "utf-8"
+
+@import "initial-variables.sass"
+@import "functions.sass"
+@import "derived-variables.sass"
+@import "animations.sass"
+@import "mixins.sass"
+@import "controls.sass"
diff --git a/webapp/src/scss/sass/utilities/animations.sass b/webapp/src/scss/sass/utilities/animations.sass
new file mode 100644
index 0000000000000000000000000000000000000000..a14525d75ec4664ff6c8a09fb27fadd214ad4390
--- /dev/null
+++ b/webapp/src/scss/sass/utilities/animations.sass
@@ -0,0 +1,5 @@
+@keyframes spinAround
+ from
+ transform: rotate(0deg)
+ to
+ transform: rotate(359deg)
diff --git a/webapp/src/scss/sass/utilities/controls.sass b/webapp/src/scss/sass/utilities/controls.sass
new file mode 100644
index 0000000000000000000000000000000000000000..8dc3a619a536c69bd41c69e968774cfc86d0ec9f
--- /dev/null
+++ b/webapp/src/scss/sass/utilities/controls.sass
@@ -0,0 +1,46 @@
+$control-radius: $radius !default
+$control-radius-small: $radius-small !default
+
+$control-border-width: 1px !default
+
+$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
+$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
+
+%control
+ -moz-appearance: none
+ -webkit-appearance: none
+ align-items: center
+ border: $control-border-width solid transparent
+ border-radius: $control-radius
+ box-shadow: none
+ display: inline-flex
+ font-size: $size-normal
+ height: 2.25em
+ justify-content: flex-start
+ line-height: 1.5
+ padding-bottom: $control-padding-vertical
+ padding-left: $control-padding-horizontal
+ padding-right: $control-padding-horizontal
+ padding-top: $control-padding-vertical
+ position: relative
+ vertical-align: top
+ // States
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active
+ outline: none
+ &[disabled]
+ cursor: not-allowed
+
+=control
+ @extend %control
+
+// The controls sizes use mixins so they can be used at different breakpoints
+=control-small
+ border-radius: $control-radius-small
+ font-size: $size-small
+=control-medium
+ font-size: $size-medium
+=control-large
+ font-size: $size-large
diff --git a/webapp/src/scss/sass/utilities/derived-variables.sass b/webapp/src/scss/sass/utilities/derived-variables.sass
new file mode 100644
index 0000000000000000000000000000000000000000..aa912813a411611c7f49a1867d9a3c882e27a67c
--- /dev/null
+++ b/webapp/src/scss/sass/utilities/derived-variables.sass
@@ -0,0 +1,84 @@
+$primary: $turquoise !default
+
+$info: $cyan !default
+$success: $green !default
+$warning: $yellow !default
+$danger: $red !default
+
+$light: $white-ter !default
+$dark: $grey-darker !default
+
+// Invert colors
+
+$orange-invert: findColorInvert($orange) !default
+$yellow-invert: findColorInvert($yellow) !default
+$green-invert: findColorInvert($green) !default
+$turquoise-invert: findColorInvert($turquoise) !default
+$cyan-invert: findColorInvert($cyan) !default
+$blue-invert: findColorInvert($blue) !default
+$purple-invert: findColorInvert($purple) !default
+$red-invert: findColorInvert($red) !default
+
+$primary-invert: $turquoise-invert !default
+$info-invert: $cyan-invert !default
+$success-invert: $green-invert !default
+$warning-invert: $yellow-invert !default
+$danger-invert: $red-invert !default
+$light-invert: $dark !default
+$dark-invert: $light !default
+
+// General colors
+
+$background: $white-ter !default
+
+$border: $grey-lighter !default
+$border-hover: $grey-light !default
+
+// Text colors
+
+$text: $grey-dark !default
+$text-invert: findColorInvert($text) !default
+$text-light: $grey !default
+$text-strong: $grey-darker !default
+
+// Code colors
+
+$code: $red !default
+$code-background: $background !default
+
+$pre: $text !default
+$pre-background: $background !default
+
+// Link colors
+
+$link: $blue !default
+$link-invert: $blue-invert !default
+$link-visited: $purple !default
+
+$link-hover: $grey-darker !default
+$link-hover-border: $grey-light !default
+
+$link-focus: $grey-darker !default
+$link-focus-border: $blue !default
+
+$link-active: $grey-darker !default
+$link-active-border: $grey-dark !default
+
+// Typography
+
+$family-primary: $family-sans-serif !default
+$family-code: $family-monospace !default
+
+$size-small: $size-7 !default
+$size-normal: $size-6 !default
+$size-medium: $size-5 !default
+$size-large: $size-4 !default
+
+// Lists and maps
+$custom-colors: null !default
+$custom-shades: null !default
+
+$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
+$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
+
+$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
diff --git a/webapp/src/scss/sass/utilities/functions.sass b/webapp/src/scss/sass/utilities/functions.sass
new file mode 100644
index 0000000000000000000000000000000000000000..acd3e839cf2649304479509f9107ad7e3df584dd
--- /dev/null
+++ b/webapp/src/scss/sass/utilities/functions.sass
@@ -0,0 +1,62 @@
+@function mergeColorMaps($bulma-colors, $custom-colors)
+ // we return at least bulma hardcoded colors
+ $merged-colors: $bulma-colors
+
+ // we want a map as input
+ @if type-of($custom-colors) == 'map'
+ @each $name, $components in $custom-colors
+ // color name should be a string and colors pair a list with at least one element
+ @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
+ $color-base: null
+
+ // the param can either be a single color
+ // or a list of 2 colors
+ @if type-of($components) == 'color'
+ $color-base: $components
+ @else if type-of($components) == 'list'
+ $color-base: nth($components, 1)
+
+ $color-invert: null
+ // is an inverted color provided in the list
+ @if length($components) > 1
+ $color-invert: nth($components, 2)
+
+ // we only want a color as base color
+ @if type-of($color-base) == 'color'
+ // if inverted color is not provided or is not a color we compute it
+ @if type-of($color-invert) != 'color'
+ $color-invert: findColorInvert($color-base)
+
+ // we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
+ $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)))
+
+ @return $merged-colors
+
+@function powerNumber($number, $exp)
+ $value: 1
+ @if $exp > 0
+ @for $i from 1 through $exp
+ $value: $value * $number
+ @else if $exp < 0
+ @for $i from 1 through -$exp
+ $value: $value / $number
+ @return $value
+
+@function colorLuminance($color)
+ $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
+ @each $name, $value in $color-rgb
+ $adjusted: 0
+ $value: $value / 255
+ @if $value < 0.03928
+ $value: $value / 12.92
+ @else
+ $value: ($value + .055) / 1.055
+ $value: powerNumber($value, 2)
+ $color-rgb: map-merge($color-rgb, ($name: $value))
+ @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
+
+@function findColorInvert($color)
+ @if (colorLuminance($color) > 0.55)
+ @return rgba(#000, 0.7)
+ @else
+ @return #fff
diff --git a/webapp/src/scss/sass/utilities/initial-variables.sass b/webapp/src/scss/sass/utilities/initial-variables.sass
new file mode 100644
index 0000000000000000000000000000000000000000..421bd3d5489dd54256535fd74c89e33e6bd42753
--- /dev/null
+++ b/webapp/src/scss/sass/utilities/initial-variables.sass
@@ -0,0 +1,72 @@
+// Colors
+
+$black: hsl(0, 0%, 4%) !default
+$black-bis: hsl(0, 0%, 7%) !default
+$black-ter: hsl(0, 0%, 14%) !default
+
+$grey-darker: hsl(0, 0%, 21%) !default
+$grey-dark: hsl(0, 0%, 29%) !default
+$grey: hsl(0, 0%, 48%) !default
+$grey-light: hsl(0, 0%, 71%) !default
+$grey-lighter: hsl(0, 0%, 86%) !default
+
+$white-ter: hsl(0, 0%, 96%) !default
+$white-bis: hsl(0, 0%, 98%) !default
+$white: hsl(0, 0%, 100%) !default
+
+$orange: hsl(14, 100%, 53%) !default
+$yellow: hsl(48, 100%, 67%) !default
+$green: hsl(141, 71%, 48%) !default
+$turquoise: hsl(171, 100%, 41%) !default
+$cyan: hsl(204, 86%, 53%) !default
+$blue: hsl(217, 71%, 53%) !default
+$purple: hsl(271, 100%, 71%) !default
+$red: hsl(348, 100%, 61%) !default
+
+// Typography
+
+$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+$family-monospace: monospace !default
+$render-mode: optimizeLegibility !default
+
+$size-1: 3rem !default
+$size-2: 2.5rem !default
+$size-3: 2rem !default
+$size-4: 1.5rem !default
+$size-5: 1.25rem !default
+$size-6: 1rem !default
+$size-7: 0.75rem !default
+
+$weight-light: 300 !default
+$weight-normal: 400 !default
+$weight-medium: 500 !default
+$weight-semibold: 600 !default
+$weight-bold: 700 !default
+
+// Responsiveness
+
+// The container horizontal gap, which acts as the offset for breakpoints
+$gap: 64px !default
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+$tablet: 769px !default
+// 960px container + 4rem
+$desktop: 960px + (2 * $gap) !default
+// 1152px container + 4rem
+$widescreen: 1152px + (2 * $gap) !default
+$widescreen-enabled: true !default
+// 1344px container + 4rem
+$fullhd: 1344px + (2 * $gap) !default
+$fullhd-enabled: true !default
+
+// Miscellaneous
+
+$easing: ease-out !default
+$radius-small: 2px !default
+$radius: 4px !default
+$radius-large: 6px !default
+$radius-rounded: 290486px !default
+$speed: 86ms !default
+
+// Flags
+
+$variable-columns: true !default
diff --git a/webapp/src/scss/sass/utilities/mixins.sass b/webapp/src/scss/sass/utilities/mixins.sass
new file mode 100644
index 0000000000000000000000000000000000000000..097c2c1277cfab239e25830250d18417a2c39c5b
--- /dev/null
+++ b/webapp/src/scss/sass/utilities/mixins.sass
@@ -0,0 +1,266 @@
+@import "initial-variables"
+
+=clearfix
+ &::after
+ clear: both
+ content: " "
+ display: table
+
+=center($width, $height: 0)
+ position: absolute
+ @if $height != 0
+ left: calc(50% - (#{$width} / 2))
+ top: calc(50% - (#{$height} / 2))
+ @else
+ left: calc(50% - (#{$width} / 2))
+ top: calc(50% - (#{$width} / 2))
+
+=fa($size, $dimensions)
+ display: inline-block
+ font-size: $size
+ height: $dimensions
+ line-height: $dimensions
+ text-align: center
+ vertical-align: top
+ width: $dimensions
+
+=hamburger($dimensions)
+ cursor: pointer
+ display: block
+ height: $dimensions
+ position: relative
+ width: $dimensions
+ span
+ background-color: currentColor
+ display: block
+ height: 1px
+ left: calc(50% - 8px)
+ position: absolute
+ transform-origin: center
+ transition-duration: $speed
+ transition-property: background-color, opacity, transform
+ transition-timing-function: $easing
+ width: 16px
+ &:nth-child(1)
+ top: calc(50% - 6px)
+ &:nth-child(2)
+ top: calc(50% - 1px)
+ &:nth-child(3)
+ top: calc(50% + 4px)
+ &:hover
+ background-color: rgba(black, 0.05)
+ // Modifers
+ &.is-active
+ span
+ &:nth-child(1)
+ transform: translateY(5px) rotate(45deg)
+ &:nth-child(2)
+ opacity: 0
+ &:nth-child(3)
+ transform: translateY(-5px) rotate(-45deg)
+
+=overflow-touch
+ -webkit-overflow-scrolling: touch
+
+=placeholder
+ $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
+ @each $placeholder in $placeholders
+ &:#{$placeholder}-placeholder
+ @content
+
+// Responsiveness
+
+=from($device)
+ @media screen and (min-width: $device)
+ @content
+
+=until($device)
+ @media screen and (max-width: $device - 1px)
+ @content
+
+=mobile
+ @media screen and (max-width: $tablet - 1px)
+ @content
+
+=tablet
+ @media screen and (min-width: $tablet), print
+ @content
+
+=tablet-only
+ @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
+ @content
+
+=touch
+ @media screen and (max-width: $desktop - 1px)
+ @content
+
+=desktop
+ @media screen and (min-width: $desktop)
+ @content
+
+=desktop-only
+ @if $widescreen-enabled
+ @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
+ @content
+
+=until-widescreen
+ @if $widescreen-enabled
+ @media screen and (max-width: $widescreen - 1px)
+ @content
+
+=widescreen
+ @if $widescreen-enabled
+ @media screen and (min-width: $widescreen)
+ @content
+
+=widescreen-only
+ @if $widescreen-enabled and $fullhd-enabled
+ @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
+ @content
+
+=until-fullhd
+ @if $fullhd-enabled
+ @media screen and (max-width: $fullhd - 1px)
+ @content
+
+=fullhd
+ @if $fullhd-enabled
+ @media screen and (min-width: $fullhd)
+ @content
+
+// Placeholders
+
+%unselectable
+ -webkit-touch-callout: none
+ -webkit-user-select: none
+ -moz-user-select: none
+ -ms-user-select: none
+ user-select: none
+
+=unselectable
+ @extend %unselectable
+
+%arrow
+ border: 3px solid transparent
+ border-radius: 2px
+ border-right: 0
+ border-top: 0
+ content: " "
+ display: block
+ height: 0.625em
+ margin-top: -0.4375em
+ pointer-events: none
+ position: absolute
+ top: 50%
+ transform: rotate(-45deg)
+ transform-origin: center
+ width: 0.625em
+
+=arrow($color)
+ @extend %arrow
+ border-color: $color
+
+%block
+ &:not(:last-child)
+ margin-bottom: 1.5rem
+
+=block
+ @extend %block
+
+%delete
+ @extend %unselectable
+ -moz-appearance: none
+ -webkit-appearance: none
+ background-color: rgba($black, 0.2)
+ border: none
+ border-radius: $radius-rounded
+ cursor: pointer
+ display: inline-block
+ flex-grow: 0
+ flex-shrink: 0
+ font-size: 0
+ height: 20px
+ max-height: 20px
+ max-width: 20px
+ min-height: 20px
+ min-width: 20px
+ outline: none
+ position: relative
+ vertical-align: top
+ width: 20px
+ &::before,
+ &::after
+ background-color: $white
+ content: ""
+ display: block
+ left: 50%
+ position: absolute
+ top: 50%
+ transform: translateX(-50%) translateY(-50%) rotate(45deg)
+ transform-origin: center center
+ &::before
+ height: 2px
+ width: 50%
+ &::after
+ height: 50%
+ width: 2px
+ &:hover,
+ &:focus
+ background-color: rgba($black, 0.3)
+ &:active
+ background-color: rgba($black, 0.4)
+ // Sizes
+ &.is-small
+ height: 16px
+ max-height: 16px
+ max-width: 16px
+ min-height: 16px
+ min-width: 16px
+ width: 16px
+ &.is-medium
+ height: 24px
+ max-height: 24px
+ max-width: 24px
+ min-height: 24px
+ min-width: 24px
+ width: 24px
+ &.is-large
+ height: 32px
+ max-height: 32px
+ max-width: 32px
+ min-height: 32px
+ min-width: 32px
+ width: 32px
+
+=delete
+ @extend %delete
+
+%loader
+ animation: spinAround 500ms infinite linear
+ border: 2px solid $border
+ border-radius: $radius-rounded
+ border-right-color: transparent
+ border-top-color: transparent
+ content: ""
+ display: block
+ height: 1em
+ position: relative
+ width: 1em
+
+=loader
+ @extend %loader
+
+%overlay
+ bottom: 0
+ left: 0
+ position: absolute
+ right: 0
+ top: 0
+
+=overlay($offset: 0)
+ @extend %overlay
+ @if $offset != 0
+ bottom: $offset
+ left: $offset
+ right: $offset
+ top: $offset
diff --git a/webapp/src/scss/utilities/_display.scss b/webapp/src/scss/utilities/_display.scss
deleted file mode 100644
index 20aeeb5f3e7586bba0fe69bff02057b15b2309f3..0000000000000000000000000000000000000000
--- a/webapp/src/scss/utilities/_display.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-// stylelint-disable declaration-no-important
-
-//
-// Utilities for common `display` values
-//
-
-@each $breakpoint in map-keys($grid-breakpoints) {
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
- .d#{$infix}-none { display: none !important; }
- .d#{$infix}-inline { display: inline !important; }
- .d#{$infix}-inline-block { display: inline-block !important; }
- .d#{$infix}-block { display: block !important; }
- .d#{$infix}-table { display: table !important; }
- .d#{$infix}-table-row { display: table-row !important; }
- .d#{$infix}-table-cell { display: table-cell !important; }
- .d#{$infix}-flex { display: flex !important; }
- .d#{$infix}-inline-flex { display: inline-flex !important; }
- }
-}
-
-
-//
-// Utilities for toggling `display` in print
-//
-
-@media print {
- .d-print-none { display: none !important; }
- .d-print-inline { display: inline !important; }
- .d-print-inline-block { display: inline-block !important; }
- .d-print-block { display: block !important; }
- .d-print-table { display: table !important; }
- .d-print-table-row { display: table-row !important; }
- .d-print-table-cell { display: table-cell !important; }
- .d-print-flex { display: flex !important; }
- .d-print-inline-flex { display: inline-flex !important; }
-}
diff --git a/webapp/src/scss/utilities/_flex.scss b/webapp/src/scss/utilities/_flex.scss
deleted file mode 100644
index 8e470384362f4d46c1b27e743f03e4eaed80324f..0000000000000000000000000000000000000000
--- a/webapp/src/scss/utilities/_flex.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-// stylelint-disable declaration-no-important
-
-// Flex variation
-//
-// Custom styles for additional flex alignment options.
-
-@each $breakpoint in map-keys($grid-breakpoints) {
- @include media-breakpoint-up($breakpoint) {
- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
- .flex#{$infix}-row { flex-direction: row !important; }
- .flex#{$infix}-column { flex-direction: column !important; }
- .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
- .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
-
- .flex#{$infix}-wrap { flex-wrap: wrap !important; }
- .flex#{$infix}-nowrap { flex-wrap: nowrap !important; }
- .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
-
- .justify-content#{$infix}-start { justify-content: flex-start !important; }
- .justify-content#{$infix}-end { justify-content: flex-end !important; }
- .justify-content#{$infix}-center { justify-content: center !important; }
- .justify-content#{$infix}-between { justify-content: space-between !important; }
- .justify-content#{$infix}-around { justify-content: space-around !important; }
-
- .align-items#{$infix}-start { align-items: flex-start !important; }
- .align-items#{$infix}-end { align-items: flex-end !important; }
- .align-items#{$infix}-center { align-items: center !important; }
- .align-items#{$infix}-baseline { align-items: baseline !important; }
- .align-items#{$infix}-stretch { align-items: stretch !important; }
-
- .align-content#{$infix}-start { align-content: flex-start !important; }
- .align-content#{$infix}-end { align-content: flex-end !important; }
- .align-content#{$infix}-center { align-content: center !important; }
- .align-content#{$infix}-between { align-content: space-between !important; }
- .align-content#{$infix}-around { align-content: space-around !important; }
- .align-content#{$infix}-stretch { align-content: stretch !important; }
-
- .align-self#{$infix}-auto { align-self: auto !important; }
- .align-self#{$infix}-start { align-self: flex-start !important; }
- .align-self#{$infix}-end { align-self: flex-end !important; }
- .align-self#{$infix}-center { align-self: center !important; }
- .align-self#{$infix}-baseline { align-self: baseline !important; }
- .align-self#{$infix}-stretch { align-self: stretch !important; }
- }
-}
diff --git a/webapp/src/styles.scss b/webapp/src/styles.scss
index 3e4e0f5c0dfc69c31ff1df174a188a210325271b..7eaabdc42648c3d556a7e384ea6351d991c445ed 100644
--- a/webapp/src/styles.scss
+++ b/webapp/src/styles.scss
@@ -1,39 +1,51 @@
/* You can add global styles to this file, and also import other style files */
-@import '~scss/bootstrap-grid.scss';
+@import '~scss/mystyles.scss';
html,
body {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 1em;
- margin: 0;
- padding: 0;
height: 100%;
background-color: #F2F2F2;
- line-height: 1.375em;
+
}
-@import "~theming/shared/loader";
-
-
-.highlighted {
- color: red;
- font-weight: bold;
+h1, h2, h3, h4, h5, h6, .card-header-title, .navbar {
+ font-family: $title-font;
}
+.navbar {
+ font-size: $size-6;
+}
+span, p, select, input {
+ font-size: $size-6;
+}
-.no-margins-container {
- margin-right: 0;
- margin-left: 0;
- max-width: unset;
+.highlighted {
+ color: $red;
+ font-weight: bold;
}
a {
+ color: $primary;
outline-style:none;
+ text-decoration: none;
+ &:hover {
+ text-decoration: underline;
+ }
+}
+a:hover {
+ color: $red;
+}
+.active-link {
+ color: $red;
+}
+
+.notification a:not(.button) {
+ text-decoration: none;
}
.alignleft {
float: left;
margin-right: 1.5em;
-}
\ No newline at end of file
+}
diff --git a/webapp/src/theme.scss b/webapp/src/theme.scss
deleted file mode 100644
index 9feaf1a174397fd34508d3b221d7d46e1239cba6..0000000000000000000000000000000000000000
--- a/webapp/src/theme.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-// Charger les outils Material Design
-@import '~@angular/material/theming';
-
-// Charger les mixins de theming des composants
-@import 'theming/all-theme';
-
-// Charger le thème principal
-@import 'theming/grandlyon/grandlyon';
-
-// Le mixin `mat-core()` ne doit être appélé qu'une seule fois puisqu'il génère
-// des styles CSS.
-// TODO: passer en argument la configuration typographique.
-@include mat-core();
-
-@include angular-material-theme($gl-theme);
-@include app-theme($gl-theme);
-
diff --git a/webapp/src/theming/_all-theme.scss b/webapp/src/theming/_all-theme.scss
deleted file mode 100644
index f2abd3be54835b3b3142a915f5d3470539a3f2e5..0000000000000000000000000000000000000000
--- a/webapp/src/theming/_all-theme.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@mixin app-theme($theme) {
- @include app-shared-theme($theme);
- @include app-components-theme($theme);
-}
-
-// Theming des éléments transverses
-
-// @import "shared/form-theme";
-@import "shared/loader-theme";
-// @import "shared/table-theme";
-
-@mixin app-shared-theme($theme) {
-// @include app-shared-form-theme($theme);
- @include app-shared-loader-theme($theme);
-// @include app-shared-table-theme($theme);
-}
-
-// // Theming des composants Angular
-
- @import "~app/app-theme.component";
- @import "~app/geosource/geosource-theme.component";
- @import "~app/core/components/header/header-theme.component";
- @import "~app/core/components/footer/footer-theme.component";
-
-
- @mixin app-components-theme($theme) {
- @include app-app-theme($theme);
- @include app-geosource-theme($theme);
- @include app-header-theme($theme);
- @include app-footer-theme($theme);
- }
diff --git a/webapp/src/theming/_theming.scss b/webapp/src/theming/_theming.scss
deleted file mode 100644
index b09f09c57fa6a1b565890b3d74517a6d3bde9097..0000000000000000000000000000000000000000
--- a/webapp/src/theming/_theming.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import "~sass-recursive-map-merge/recursive-map-merge";
-
-@function app-override-theme($mat-theme, $foreground: null, $background: null) {
- $theme: (
- foreground: $foreground,
- background: $background,
- );
-
- @return recursive-map-merge($mat-theme, $theme);
-}
-
diff --git a/webapp/src/theming/grandlyon/config/_palette.scss b/webapp/src/theming/grandlyon/config/_palette.scss
deleted file mode 100644
index eb2416e0684178388d861e60dbcacc20f322bdcc..0000000000000000000000000000000000000000
--- a/webapp/src/theming/grandlyon/config/_palette.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-// Color palettes for Grand Lyon, la Métropole
-//
-// Generator:
-// http://mcg.mbitson.com/#!?vermilion=%23e10000&woodsmoke=%23050707&themename=grandlyon
-
-$gl-dark-primary-text: black;
-$gl-light-primary-text: white;
-
-$gl-vermilion: (
- 50: #ffebeb,
- 100: #ff9f9f,
- 200: #ff6767,
- 300: #ff1f1f,
- 400: #ff0101,
- 500: #e10000,
- 600: #c20000,
- 700: #a40000,
- 800: #850000,
- 900: #670000,
- A100: #ffe1e1,
- A200: #ff7b7b,
- A400: #ff1515,
- A700: #fa0000,
- contrast: (
- 50: $gl-dark-primary-text,
- 100: $gl-dark-primary-text,
- 200: $gl-dark-primary-text,
- 300: $gl-light-primary-text,
- 400: $gl-light-primary-text,
- 500: $gl-light-primary-text,
- 600: $gl-light-primary-text,
- 700: $gl-light-primary-text,
- 800: $gl-light-primary-text,
- 900: $gl-light-primary-text,
- A100: $gl-dark-primary-text,
- A200: $gl-dark-primary-text,
- A400: $gl-light-primary-text,
- A700: $gl-light-primary-text,
- )
-);
-
-$gl-woodsmoke: (
- 50: #e1e1e1,
- 100: #b4b5b5,
- 200: #828383,
- 300: #505151,
- 400: #2b2c2c,
- 500: #050707,
- 600: #040606,
- 700: #040505,
- 800: #030404,
- 900: #010202,
- A100: #a6a6a6,
- A200: #8c8c8c,
- A400: #737373,
- A700: #666666,
- contrast: (
- 50: $gl-dark-primary-text,
- 100: $gl-dark-primary-text,
- 200: $gl-dark-primary-text,
- 300: $gl-light-primary-text,
- 400: $gl-light-primary-text,
- 500: $gl-light-primary-text,
- 600: $gl-light-primary-text,
- 700: $gl-light-primary-text,
- 800: $gl-light-primary-text,
- 900: $gl-light-primary-text,
- A100: $gl-dark-primary-text,
- A200: $gl-dark-primary-text,
- A400: $gl-light-primary-text,
- A700: $gl-light-primary-text,
- )
-);
-
-// Palette des couleurs d'arrière plan spécifique au thème clair.
-$gl-light-theme-background: (
- // spécifiques
- actived-navigation: #f0f0f0,
- form: rgba(220, 220, 220, 0.4),
- table-header: #d3d3d3,
-);
-
-// Palette des couleurs de premier plan spécifique au thème clair.
-$gl-light-theme-foreground: (
- // spécifiques
- valid: #4caf50,
- invalid: #d32f2f,
-);
-
diff --git a/webapp/src/theming/grandlyon/config/_variables.scss b/webapp/src/theming/grandlyon/config/_variables.scss
deleted file mode 100644
index 2ac14af97461419e2f758924aeddaf66f16d1341..0000000000000000000000000000000000000000
--- a/webapp/src/theming/grandlyon/config/_variables.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "palette";
-
-// Palettes
-// --------
-
-$gl-theme-primary: mat-palette($gl-vermilion);
-$gl-theme-accent: mat-palette($gl-woodsmoke);
-$gl-theme-warn: mat-palette($gl-woodsmoke);
-
diff --git a/webapp/src/theming/grandlyon/grandlyon.scss b/webapp/src/theming/grandlyon/grandlyon.scss
deleted file mode 100644
index 73837988d9dfb56153cfb79fe56e02f8e0ca8f0b..0000000000000000000000000000000000000000
--- a/webapp/src/theming/grandlyon/grandlyon.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import '../theming';
-
-@import "config/variables";
-
-$gl-theme: app-override-theme(
- mat-light-theme($gl-theme-primary, $gl-theme-accent, $gl-theme-warn),
- $foreground: $gl-light-theme-foreground,
- $background: $gl-light-theme-background
-);
-
diff --git a/webapp/src/theming/shared/_loader-theme.scss b/webapp/src/theming/shared/_loader-theme.scss
deleted file mode 100644
index 51e5fa01628bb7f46206e990d1d5bc76be165740..0000000000000000000000000000000000000000
--- a/webapp/src/theming/shared/_loader-theme.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import '~@angular/material/theming';
-
-@mixin app-shared-loader-theme($theme) {
- $background: map-get($theme, background);
-
- .AppLoader {
- background: mat-color($background, background);
- }
-}
-
diff --git a/webapp/src/theming/shared/_loader.scss b/webapp/src/theming/shared/_loader.scss
deleted file mode 100644
index f0256fc74891949eb590fae68f9bc81567344f3d..0000000000000000000000000000000000000000
--- a/webapp/src/theming/shared/_loader.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.AppLoader {
- display:flex;
- align-items: center;
- justify-content: center;
- height:100vh;
- img {
- margin-left: 0px;
- width: 70%;
- text-align: center;
- }
-}
-