wip new UI with spectre

Cargo.toml

@@ -3,5 +3,4 @@
 members = [
     "yopa",
     "yopa-web",
-    #"yopa-test",
 ]

yopa-test/Cargo.toml

@@ -1,19 +0,0 @@
-[package]
-name = "yopa-test"
-version = "0.1.0"
-authors = ["Ondřej Hruška <ondra@ondrovo.com>"]
-edition = "2018"
-
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
-
-[dependencies]
-log = "0.4.13"
-simple-logging = "2.0.2"
-
-yopa = { path = "../yopa", features = [ "uuid-ids" ] }
-
-serde_json = "1.0.61"
-serde = { version = "1.0.120", features = ["derive"] }
-
-anyhow = "1.0.38"
-thiserror = "1.0.23"

yopa-test/src/main.rs

@@ -1,120 +0,0 @@
-#[macro_use] extern crate log;
-
-use log::LevelFilter;
-
-use yopa::{model, InMemoryStorage};
-use yopa::model::DataType;
-use yopa::insert::{InsertObj, InsertValue, InsertRel};
-use yopa::data::TypedValue;
-
-fn main() {
-    simple_logging::log_to_stderr(LevelFilter::Debug);
-
-    main_test_recipes().unwrap();
-}
-
-#[allow(non_snake_case)]
-fn main_test_recipes() -> anyhow::Result<()> {
-    simple_logging::log_to_stderr(LevelFilter::Debug);
-
-    let mut store = yopa::InMemoryStorage::new();
-
-    let Recipe = store.define_object(model::ObjectModel {
-        id: Default::default(),
-        name: "recipe".to_string(),
-        parent: None
-    })?;
-
-    let RecipeTitle = store.define_property(model::PropertyModel {
-        id: Default::default(),
-        object: Recipe,
-        name: "title".to_string(),
-        optional: false,
-        multiple: false,
-        data_type: DataType::String,
-        default: None
-    })?;
-
-    let _PrepHours = store.define_property(model::PropertyModel {
-        id: Default::default(),
-        object: Recipe,
-        name: "prep_hours".to_string(),
-        optional: true,
-        multiple: false,
-        data_type: DataType::Decimal,
-        default: None
-    })?;
-
-    let Book = store.define_object(model::ObjectModel {
-        id: Default::default(),
-        name: "book".to_string(),
-        parent: None
-    })?;
-
-    let BookName = store.define_property(model::PropertyModel {
-        id: Default::default(),
-        object: Book,
-        name: "name".to_string(),
-        optional: false,
-        multiple: false,
-        data_type: DataType::String,
-        default: None
-    })?;
-
-    let BookToRecipe = store.define_relation(model::RelationModel {
-        id: Default::default(),
-        object: Recipe,
-        name: "book reference".to_string(),
-        optional: true,
-        multiple: true,
-        related: Book
-    })?;
-
-    let BookToRecipePage = store.define_property(model::PropertyModel {
-        id: Default::default(),
-        object: BookToRecipe,
-        name: "page".to_string(),
-        optional: false,
-        multiple: false,
-        data_type: DataType::Integer,
-        default: None
-    })?;
-
-    debug!("{:#?}", store);
-
-    let MyBook1 = store.insert_object(InsertObj {
-        model_id: Book,
-        values: vec![
-            InsertValue::new(BookName, TypedValue::String("Recipe Book 1".into())),
-        ],
-        relations: vec![],
-    })?;
-
-    store.insert_object(InsertObj {
-        model_id: Recipe,
-        values: vec![
-            InsertValue::new(RecipeTitle, TypedValue::String("Pancakes".into())),
-        ],
-        relations: vec![
-            InsertRel {
-                model_id: BookToRecipe,
-                related_id: MyBook1,
-                values: vec![
-                    InsertValue::new(BookToRecipePage, TypedValue::Integer(123))
-                ]
-            }
-        ],
-    })?;
-
-    debug!("{:#?}", store);
-
-    let as_s = serde_json::to_string_pretty(&store).unwrap();
-
-    println!("{}", as_s);
-
-    let _back : InMemoryStorage = serde_json::from_str(&as_s)?;
-
-    debug!("After unpack: {:#?}", store);
-
-    Ok(())
-}

yopa-web/resources/src/components/EditObjectForm.vue

@@ -134,13 +134,21 @@ export default {
 </script>
 
 <template>
-  <h2>Edit {{ model.name }}</h2>
+  <div class="cols">
-
+    <div class="col-9">
-  <p><input type="button" value="Save" @click="trySave"></p>
+      <h2>Edit {{ model.name }}</h2>
+    </div>
+    <div class="col-3 text-right">
+      <button @click="trySave" class="btn btn-primary">
+        <i class="icon icon-check"></i>
+        Save
+      </button>
+    </div>
+  </div>
 
-  <table>
+  <div class="form-horizontal">
     <edit-property v-for="(property, pi) in properties" :model="property" :values="values[property.id]" :key="pi"></edit-property>
-  </table>
+  </div>
 
   <div v-if="haveRelations">
     <h3>Relations</h3>

yopa-web/resources/src/components/EditPropertyField.vue

@@ -19,7 +19,7 @@ export default {
       });
 
       Vue.nextTick(() => {
-        this.fieldRefs[this.values.length-1].focus();
+        this.fieldRefs[this.values.length - 1].focus();
       })
     },
     removeValue(vi) {
@@ -38,25 +38,39 @@ export default {
 </script>
 
 <template>
-  <tr v-if="values.length===0">
+  <div v-if="values.length===0" class="form-group">
-    <th @click="addValue">{{model.name}}</th>
+    <div class="col-3">
-    <td>
+      <label class="form-label" :for="widget_id">{{ model.name }}</label>
-      <a href="#" @click="addValue">Add</a>
+    </div>
-    </td>
+    <div class="col-9">
-  </tr>
+      <a class="btn" @click="addValue">
-  <tr v-else v-for="(instance, vi) in values" :key="vi">
+        <i class="icon icon-plus"></i>
-    <th :rowspan="values.length + model.multiple" v-if="vi == 0"><label :for="widget_id">{{model.name}}</label></th>
+        Add
-    <td>
+      </a>
-      <string-value  :ref="setFieldRef" :value="instance.value" :id="vi===0?widget_id:null" v-if="model.data_type==='String'"></string-value>
+    </div>
-      <integer-value :ref="setFieldRef" :value="instance.value" :id="vi===0?widget_id:null" v-if="model.data_type==='Integer'"></integer-value>
+  </div>
-      <decimal-value :ref="setFieldRef" :value="instance.value" :id="vi===0?widget_id:null" v-if="model.data_type==='Decimal'"></decimal-value>
+  <div v-if="values.length>0" class="form-group" v-for="(instance, vi) in values" :key="vi">
-      <boolean-value :ref="setFieldRef" :value="instance.value" :id="vi===0?widget_id:null" v-if="model.data_type==='Boolean'"></boolean-value>
+    <div class="col-3">
-      <a href="#" @click="removeValue(vi)" v-if="vi > 0 || model.optional" style="margin-left:5px">X</a>
+      <label class="form-label" :for="widget_id" v-if="vi===0">{{ model.name }}</label>
-    </td>
+    </div>
-  </tr>
+    <div class="col-9">
-  <tr v-if="values.length > 0 && model.multiple">
+      <string-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='String'"></string-value>
-    <td>
+      <integer-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Integer'"></integer-value>
-      <a href="#" @click="addValue">Add</a>
+      <decimal-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Decimal'"></decimal-value>
-    </td>
+      <boolean-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Boolean'"></boolean-value>
-  </tr>
+      <a class="btn btn-delete ml-1" @click="removeValue(vi)" v-if="values.length > 1 || model.optional">
+        <i class="icon icon-cross"></i>
+        Delete
+      </a>
+    </div>
+  </div>
+  <div v-if="values.length>0 && model.multiple" class="form-group">
+    <div class="col-3"></div>
+    <div class="col-9">
+      <a class="btn" @click="addValue">
+        <i class="icon icon-plus"></i>
+        Add
+      </a>
+    </div>
+  </div>
 </template>

yopa-web/resources/src/components/EditRelationForm.vue

@@ -104,22 +104,35 @@ export default {
 </style>
 
 <template>
-  <div class="new-relation" v-for="(instance, ri) in instances" :key="ri">
+  <div class="form-horizontal panel mt-1 mb-1 p-2" v-for="(instance, ri) in instances" :key="ri">
-    <b>{{ model.name }} -&gt; {{ related_model.name }}
+    <div class="form-group">
-      <select v-model="instance.related">
+      <div class="col-3">
-        <option v-for="(name, id) in object_names" :value="id">{{name}}</option>
+        <label class="form-label">{{ model.name }} -&gt; {{ related_model.name }}</label>
-      </select>
+      </div>
-    </b>
+      <div class="col-7">
-
+        <select class="form-select input-inline" v-model="instance.related">
-    <a href="#" v-if="model.multiple || model.optional && instances.length > 0"
+          <option v-for="(name, id) in object_names" :value="id">{{name}}</option>
-       style="margin-left: 5px"
+        </select>
-       @click="removeInstance(ri)">X</a>
+      </div>
-
+      <div class="col-2 text-right">
-    <table v-if="properties">
+        <a class="btn btn-delete" v-if="model.multiple || model.optional && instances.length > 0"
-      <edit-property v-for="(property, id) in properties" :model="property" :values="instance.values[id]" :key="id"></edit-property>
+           @click="removeInstance(ri)">
-    </table>
+          <i class="icon-cross icon"></i>
+          Delete
+        </a>
+      </div>
+    </div>
+
+    <edit-property v-for="(property, id) in properties"
+                   :model="property"
+                   :values="instance.values[id]" :key="id"></edit-property>
   </div>
 
-  <a href="#" v-if="model.multiple || model.optional && instances.length==0"
+  <div class="mt-2 mb-2">
-     @click="addInstance">Add {{ model.name }} -&gt; {{ related_model.name }}</a><br>
+    <a class="btn" v-if="model.multiple || model.optional && instances.length==0"
+       @click="addInstance">
+      <i class="icon icon-plus"></i>
+      Add {{ model.name }} -&gt; {{ related_model.name }}
+    </a>
+  </div>
 </template>

yopa-web/resources/src/components/PropertyField.vue

@@ -48,12 +48,12 @@ export default {
       <integer-value :ref="setFieldRef" :value="value" :id="vi===0?widget_id:null" v-if="model.data_type==='Integer'"></integer-value>
       <decimal-value :ref="setFieldRef" :value="value" :id="vi===0?widget_id:null" v-if="model.data_type==='Decimal'"></decimal-value>
       <boolean-value :ref="setFieldRef" :value="value" :id="vi===0?widget_id:null" v-if="model.data_type==='Boolean'"></boolean-value>
-      <a href="#" @click="removeValue(vi)" v-if="vi > 0 || model.optional" style="margin-left:5px">X</a>
+      <a class="button ml-2" @click="removeValue(vi)" v-if="vi > 0 || model.optional" style="margin-left:5px">Remove</a>
     </td>
   </tr>
   <tr v-if="values.length > 0 && model.multiple">
     <td>
-      <a href="#" @click="addValue">Add</a>
+      <a class="button" @click="addValue">Add</a>
     </td>
   </tr>
 </template>

yopa-web/resources/src/components/value/BooleanValue.vue

@@ -27,5 +27,8 @@ export default {
 </script>
 
 <template>
-  <input ref="input" type="checkbox" :id="id" value="true" v-model="inputValue">
+  <label class="form-switch input-inline">
+    <input ref="input" type="checkbox" :id="id" value="true" v-model="inputValue">
+    <i class="form-icon"></i>
+  </label>
 </template>

yopa-web/resources/src/components/value/DecimalValue.vue

@@ -27,5 +27,5 @@ export default {
 </script>
 
 <template>
-  <input ref="input" type="number" :id="id" step="any" v-model="inputValue">
+  <input ref="input" class="form-input input-inline" type="number" :id="id" step="any" v-model="inputValue">
 </template>

yopa-web/resources/src/components/value/IntegerValue.vue

@@ -27,5 +27,5 @@ export default {
 </script>
 
 <template>
-  <input ref="input" type="number" :id="id" step="1" v-model="inputValue">
+  <input ref="input" class="form-input input-inline" type="number" :id="id" step="1" v-model="inputValue">
 </template>

yopa-web/resources/src/components/value/StringValue.vue

@@ -27,5 +27,5 @@ export default {
 </script>
 
 <template>
-  <input ref="input" type="text" :id="id" v-model="inputValue">
+  <input ref="input" class="form-input input-inline" type="text" :id="id" v-model="inputValue">
 </template>

yopa-web/resources/src/main.js

@@ -2,10 +2,10 @@ import * as Vue from "vue";
 
 import './style/app.scss';
 
-import StringValue from "./components/StringValue.vue";
+import StringValue from "./components/value/StringValue.vue";
-import DecimalValue from "./components/DecimalValue.vue";
+import DecimalValue from "./components/value/DecimalValue.vue";
-import BooleanValue from "./components/BooleanValue.vue";
+import BooleanValue from "./components/value/BooleanValue.vue";
-import IntegerValue from "./components/IntegerValue.vue";
+import IntegerValue from "./components/value/IntegerValue.vue";
 import PropertyField from "./components/PropertyField.vue";
 
 import NewObjectForm from "./components/NewObjectForm.vue";

yopa-web/resources/src/style/_icons-extra.scss

@@ -0,0 +1,21 @@
+@import "spectre/src/variables";
+
+$icon-border-width: $border-width-lg;
+
+.icon-home {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    transform: translate(-50%, -40%) rotate(45deg);
+    width: .8em;
+    height: .8em;
+  }
+
+  &::after {
+    transform: translate(-50%, -50%);
+    border-bottom: $icon-border-width solid currentColor;
+    height: 1em;
+    width: .8em;
+  }
+}

yopa-web/resources/src/style/_spectre-patches.scss

@@ -0,0 +1,27 @@
+@import "spectre/src/variables";
+
+.form-select.input-inline {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+}
+
+$error-color-faint: lighten($error-color, 50%) !default;
+$error-color-dark: darken($error-color, 3%) !default;
+
+.btn.btn-delete {
+  color: $error-color;
+  border-color: $error-color;
+
+  &:focus,
+  &:hover {
+    background: $error-color-faint;
+    border-color: $error-color-dark;
+  }
+  &:active,
+  &.active {
+    color: $light-color;
+    background: $error-color;
+    border-color: darken($error-color-dark, 5%);
+  }
+}

yopa-web/resources/src/style/app.scss

@@ -1,5 +1,12 @@
-@import "common";
+//@import "common";
+//@import "bulma/bulma";
+@import "spectre/src/spectre";
+@import "spectre/src/spectre-exp";
+@import "spectre/src/spectre-icons";
+@import "icons-extra";
+@import "spectre-patches";
 
+/*
 .EditForm th {
 	text-align: left;
 	vertical-align: top;
@@ -8,3 +15,9 @@
 label {
 	cursor: pointer;
 }
+*/
+
+//.navbar-brand {
+//  font-size: 120%;
+//  font-weight: bold;
+//}

yopa-web/resources/src/style/spectre/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 - 2020 Yan Zhu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

yopa-web/resources/src/style/spectre/src/_accordions.scss

@@ -0,0 +1,38 @@
+// Accordions
+.accordion {
+  input:checked ~,
+  &[open] {
+    & .accordion-header > {
+      .icon:first-child {
+        transform: rotate(90deg);
+      }
+    }
+
+    & .accordion-body {
+      max-height: 50rem;
+    }
+  }
+
+  .accordion-header {
+    display: block;
+    padding: $unit-1 $unit-2;
+
+    .icon {
+      transition: transform .25s;
+    }
+  }
+
+  .accordion-body {
+    margin-bottom: $layout-spacing;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height .25s;
+  }
+}
+
+// Remove default details marker in Webkit
+summary.accordion-header {
+  &::-webkit-details-marker {
+    display: none;
+  }
+}

yopa-web/resources/src/style/spectre/src/_animations.scss

@@ -0,0 +1,20 @@
+// Animations
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-$unit-8);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

yopa-web/resources/src/style/spectre/src/_asian.scss

@@ -0,0 +1,43 @@
+// Optimized for East Asian CJK
+html:lang(zh),
+html:lang(zh-Hans),
+.lang-zh,
+.lang-zh-hans {
+  font-family: $cjk-zh-hans-font-family;
+}
+
+html:lang(zh-Hant),
+.lang-zh-hant {
+  font-family: $cjk-zh-hant-font-family;
+}
+
+html:lang(ja),
+.lang-ja {
+  font-family: $cjk-jp-font-family;
+}
+
+html:lang(ko),
+.lang-ko {
+  font-family: $cjk-ko-font-family;
+}
+
+:lang(zh),
+:lang(ja),
+.lang-cjk {
+  ins,
+  u {
+    border-bottom: $border-width solid;
+    text-decoration: none;
+  }
+
+  del + del,
+  del + s,
+  ins + ins,
+  ins + u,
+  s + del,
+  s + s,
+  u + ins,
+  u + u {
+    margin-left: .125em;
+  }
+}

yopa-web/resources/src/style/spectre/src/_autocomplete.scss

@@ -0,0 +1,47 @@
+// Autocomplete
+.form-autocomplete {
+  position: relative;
+
+  .form-autocomplete-input {
+    align-content: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    min-height: $unit-8;
+    padding: $unit-h;
+
+    &.is-focused {
+      @include control-shadow();
+      border-color: $primary-color;
+    }
+
+    .form-input {
+      border-color: transparent;
+      box-shadow: none;
+      display: inline-block;
+      flex: 1 0 auto;
+      height: $unit-6;
+      line-height: $unit-4;
+      margin: $unit-h;
+      width: auto;
+    }
+  }
+
+  .menu {
+    left: 0;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+  }
+
+  &.autocomplete-oneline {
+    .form-autocomplete-input {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+    }
+
+    .chip {
+      flex: 1 0 auto;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_avatars.scss

@@ -0,0 +1,77 @@
+// Avatars
+.avatar {
+  @include avatar-base();
+  background: $primary-color;
+  border-radius: 50%;
+  color: rgba($light-color, .85);
+  display: inline-block;
+  font-weight: 300;
+  line-height: 1.25;
+  margin: 0;
+  position: relative;
+  vertical-align: middle;
+
+  &.avatar-xs {
+    @include avatar-base($unit-4);
+  }
+  &.avatar-sm {
+    @include avatar-base($unit-6);
+  }
+  &.avatar-lg {
+    @include avatar-base($unit-12);
+  }
+  &.avatar-xl {
+    @include avatar-base($unit-16);
+  }
+
+  img {
+    border-radius: 50%;
+    height: 100%;
+    position: relative;
+    width: 100%;
+    z-index: $zindex-0;
+  }
+
+  .avatar-icon,
+  .avatar-presence {
+    background: $bg-color-light;
+    bottom: 14.64%;
+    height: 50%;
+    padding: $border-width-lg;
+    position: absolute;
+    right: 14.64%;
+    transform: translate(50%, 50%);
+    width: 50%;
+    z-index: $zindex-0 + 1;
+  }
+
+  .avatar-presence {
+    background: $gray-color;
+    box-shadow: 0 0 0 $border-width-lg $light-color;
+    border-radius: 50%;
+    height: .5em;
+    width: .5em;
+
+    &.online {
+      background: $success-color;
+    }
+
+    &.busy {
+      background: $error-color;
+    }
+
+    &.away {
+      background: $warning-color;
+    }
+  }
+
+  &[data-initial]::before {
+    color: currentColor;
+    content: attr(data-initial);
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: $zindex-0;
+  }
+}

yopa-web/resources/src/style/spectre/src/_badges.scss

@@ -0,0 +1,60 @@
+// Badges
+.badge {
+  position: relative;
+  white-space: nowrap;
+
+  &[data-badge],
+  &:not([data-badge]) {
+    &::after {
+      background: $primary-color;
+      background-clip: padding-box;
+      border-radius: .5rem;
+      box-shadow: 0 0 0 .1rem $bg-color-light;
+      color: $light-color;
+      content: attr(data-badge);
+      display: inline-block;
+      transform: translate(-.05rem, -.5rem);
+    }
+  }
+  &[data-badge] {
+    &::after {
+      font-size: $font-size-sm;
+      height: .9rem;
+      line-height: 1;
+      min-width: .9rem;
+      padding: .1rem .2rem;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+  &:not([data-badge]),
+  &[data-badge=""] {
+    &::after {
+      height: 6px;
+      min-width: 6px;
+      padding: 0;
+      width: 6px;
+    }
+  }
+
+  // Badges for Buttons
+  &.btn {
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+    }
+  }
+
+  // Badges for Avatars
+  &.avatar {
+    &::after {
+      position: absolute;
+      top: 14.64%;
+      right: 14.64%;
+      transform: translate(50%, -50%);
+      z-index: $zindex-1;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_bars.scss

@@ -0,0 +1,71 @@
+// Bars
+.bar {
+  background: $bg-color-dark;
+  border-radius: $border-radius;
+  display: flex;
+  flex-wrap: nowrap;
+  height: $unit-4;
+  width: 100%;
+
+  &.bar-sm {
+    height: $unit-1;
+  }
+
+  // TODO: attr() support
+  .bar-item {
+    background: $primary-color;
+    color: $light-color;
+    display: block;
+    font-size: $font-size-sm;
+    flex-shrink: 0;
+    line-height: $unit-4;
+    height: 100%;
+    position: relative;
+    text-align: center;
+    width: 0;
+
+    &:first-child {
+      border-bottom-left-radius: $border-radius;
+      border-top-left-radius: $border-radius;
+    }
+    &:last-child {
+      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+      flex-shrink: 1;
+    }
+  }
+}
+
+// Slider bar
+.bar-slider {
+  height: $border-width-lg;
+  margin: $layout-spacing 0;
+  position: relative;
+
+  .bar-item {
+    left: 0;
+    padding: 0;
+    position: absolute;
+    &:not(:last-child):first-child {
+      background: $bg-color-dark;
+      z-index: $zindex-0;
+    }
+  }
+
+  .bar-slider-btn {
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: $unit-3;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(50%, -50%);
+    width: $unit-3;
+
+    &:active {
+      box-shadow: 0 0 0 .1rem $primary-color;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_base.scss

@@ -0,0 +1,44 @@
+// Base
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: $html-font-size;
+  line-height: $html-line-height;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  background: $body-bg;
+  color: $body-font-color;
+  font-family: $body-font-family;
+  font-size: $font-size;
+  overflow-x: hidden;
+  text-rendering: optimizeLegibility;
+}
+
+a {
+  color: $link-color;
+  outline: none;
+  text-decoration: none;
+
+  &:focus {
+    @include control-shadow();
+  }
+
+  &:focus,
+  &:hover,
+  &:active,
+  &.active {
+    color: $link-color-dark;
+    text-decoration: underline;
+  }
+
+  &:visited {
+    color: $link-color-light;
+  }
+}

yopa-web/resources/src/style/spectre/src/_breadcrumbs.scss

@@ -0,0 +1,29 @@
+// Breadcrumbs
+.breadcrumb {
+  list-style: none;
+  margin: $unit-1 0;
+  padding: $unit-1 0;
+
+  .breadcrumb-item {
+    color: $gray-color-dark;
+    display: inline-block;
+    margin: 0;
+    padding: $unit-1 0;
+
+    &:not(:last-child) {
+      margin-right: $unit-1;
+
+      a {
+        color: $gray-color-dark;
+      }
+    }
+
+    &:not(:first-child) {
+      &::before {
+        color: $gray-color-dark;
+        content: "/";
+        padding-right: $unit-2;
+      }
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_buttons.scss

@@ -0,0 +1,193 @@
+// Buttons
+.btn {
+  appearance: none;
+  background: $bg-color-light;
+  border: $border-width solid $primary-color;
+  border-radius: $border-radius;
+  color: $primary-color;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
+  outline: none;
+  padding: $control-padding-y $control-padding-x;
+  text-align: center;
+  text-decoration: none;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  &:focus {
+    @include control-shadow();
+  }
+  &:focus,
+  &:hover {
+    background: $secondary-color;
+    border-color: $primary-color-dark;
+    text-decoration: none;
+  }
+  &:active,
+  &.active {
+    background: $primary-color-dark;
+    border-color: darken($primary-color-dark, 5%);
+    color: $light-color;
+    text-decoration: none;
+    &.loading {
+      &::after {
+        border-bottom-color: $light-color;
+        border-left-color: $light-color;
+      }
+    }
+  }
+  &[disabled],
+  &:disabled,
+  &.disabled {
+    cursor: default;
+    opacity: .5;
+    pointer-events: none;
+  }
+
+  // Button Primary
+  &.btn-primary {
+    background: $primary-color;
+    border-color: $primary-color-dark;
+    color: $light-color;
+    &:focus,
+    &:hover {
+      background: darken($primary-color-dark, 2%);
+      border-color: darken($primary-color-dark, 5%);
+      color: $light-color;
+    }
+    &:active,
+    &.active {
+      background: darken($primary-color-dark, 4%);
+      border-color: darken($primary-color-dark, 7%);
+      color: $light-color;
+    }
+    &.loading {
+      &::after {
+        border-bottom-color: $light-color;
+        border-left-color: $light-color;
+      }
+    }
+  }
+
+  // Button Colors
+  &.btn-success {
+    @include button-variant($success-color);
+  }
+
+  &.btn-error {
+    @include button-variant($error-color);
+  }
+
+  // Button Link
+  &.btn-link {
+    background: transparent;
+    border-color: transparent;
+    color: $link-color;
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      color: $link-color-dark;
+    }
+  }
+
+  // Button Sizes
+  &.btn-sm {
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-y-sm $control-padding-x-sm;
+  }
+
+  &.btn-lg {
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-y-lg $control-padding-x-lg;
+  }
+
+  // Button Block
+  &.btn-block {
+    display: block;
+    width: 100%;
+  }
+
+  // Button Action
+  &.btn-action {
+    width: $control-size;
+    padding-left: 0;
+    padding-right: 0;
+
+    &.btn-sm {
+      width: $control-size-sm;
+    }
+
+    &.btn-lg {
+      width: $control-size-lg;
+    }
+  }
+
+  // Button Clear
+  &.btn-clear {
+    background: transparent;
+    border: 0;
+    color: currentColor;
+    height: $unit-5;
+    line-height: $unit-4;
+    margin-left: $unit-1;
+    margin-right: -2px;
+    opacity: 1;
+    padding: $unit-h;
+    text-decoration: none;
+    width: $unit-5;
+
+    &:focus,
+    &:hover {
+      background: rgba($bg-color, .5);
+      opacity: .95;
+    }
+
+    &::before {
+      content: "\2715";
+    }
+  }
+}
+
+// Button groups
+.btn-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  .btn {
+    flex: 1 0 auto;
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+      margin-left: -$border-width;
+    }
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-left: -$border-width;
+    }
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      z-index: $zindex-0;
+    }
+  }
+
+  &.btn-group-block {
+    display: flex;
+
+    .btn {
+      flex: 1 0 0;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_calendars.scss

@@ -0,0 +1,222 @@
+// Calendars
+.calendar {
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: block;
+  min-width: 280px;
+
+  .calendar-nav {
+    align-items: center;
+    background: $bg-color;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    display: flex;
+    font-size: $font-size-lg;
+    padding: $layout-spacing;
+  }
+
+  .calendar-header,
+  .calendar-body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: $layout-spacing 0;
+
+    .calendar-date {
+      flex: 0 0 14.28%; // 7 calendar-items each row
+      max-width: 14.28%;
+    }
+  }
+
+  .calendar-header {
+    background: $bg-color;
+    border-bottom: $border-width solid $border-color;
+    color: $gray-color;
+    font-size: $font-size-sm;
+    text-align: center;
+  }
+
+  .calendar-body {
+    color: $gray-color-dark;
+  }
+
+  .calendar-date {
+    border: 0;
+    padding: $unit-1;
+
+    .date-item {
+      appearance: none;
+      background: transparent;
+      border: $border-width solid transparent;
+      border-radius: 50%;
+      color: $gray-color-dark;
+      cursor: pointer;
+      font-size: $font-size-sm;
+      height: $unit-7;
+      line-height: $unit-5;
+      outline: none;
+      padding: $unit-h;
+      position: relative;
+      text-align: center;
+      text-decoration: none;
+      transition: background .2s, border .2s, box-shadow .2s, color .2s;
+      vertical-align: middle;
+      white-space: nowrap;
+      width: $unit-7;
+
+      &.date-today {
+        border-color: $secondary-color-dark;
+        color: $primary-color;
+      }
+
+      &:focus {
+        @include control-shadow();
+      }
+
+      &:focus,
+      &:hover {
+        background: $secondary-color-light;
+        border-color: $secondary-color-dark;
+        color: $primary-color;
+        text-decoration: none;
+      }
+      &:active,
+      &.active {
+        background: $primary-color-dark;
+        border-color: darken($primary-color-dark, 5%);
+        color: $light-color;
+      }
+
+      // Calendar badge support
+      &.badge {
+        &::after {
+          position: absolute;
+          top: 3px;
+          right: 3px;
+          transform: translate(50%, -50%);
+        }
+      }
+    }
+
+    .date-item,
+    .calendar-event {
+      &:disabled,
+      &.disabled {
+        cursor: default;
+        opacity: .25;
+        pointer-events: none;
+      }
+    }
+
+    &.prev-month,
+    &.next-month {
+      .date-item,
+      .calendar-event {
+        opacity: .25;
+      }
+    }
+  }
+
+  .calendar-range {
+    position: relative;
+
+    &::before {
+      background: $secondary-color;
+      content: "";
+      height: $unit-7;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    &.range-start {
+      &::before {
+        left: 50%;
+      }
+    }
+    &.range-end {
+      &::before {
+        right: 50%;
+      }
+    }
+
+    &.range-start,
+    &.range-end {
+      .date-item {
+        background: $primary-color-dark;
+        border-color: darken($primary-color-dark, 5%);
+        color: $light-color;
+      }
+    }
+
+    .date-item {
+      color: $primary-color;
+    }
+  }
+
+  // Calendars size
+  &.calendar-lg {
+    .calendar-body {
+      padding: 0;
+
+      .calendar-date {
+        border-bottom: $border-width solid $border-color;
+        border-right: $border-width solid $border-color;
+        display: flex;
+        flex-direction: column;
+        height: 5.5rem;
+        padding: 0;
+
+        &:nth-child(7n) {
+          border-right: 0;
+        }
+        &:nth-last-child(-n+7) {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    .date-item {
+      align-self: flex-end;
+      height: $unit-7;
+      margin-right: $layout-spacing-sm;
+      margin-top: $layout-spacing-sm;
+    }
+
+    .calendar-range {
+      &::before {
+        top: 19px;
+      }
+      &.range-start {
+        &::before {
+          left: auto;
+          width: 19px;
+        }
+      }
+      &.range-end {
+        &::before {
+          right: 19px;
+        }
+      }
+    }
+
+    .calendar-events {
+      flex-grow: 1;
+      line-height: 1;
+      overflow-y: auto;
+      padding: $layout-spacing-sm;
+    }
+
+    .calendar-event {
+      border-radius: $border-radius;
+      font-size: $font-size-sm;
+      display: block;
+      margin: $unit-h auto;
+      overflow: hidden;
+      padding: 3px 4px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_cards.scss

@@ -0,0 +1,43 @@
+// Cards
+.card {
+  background: $bg-color-light;
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+
+  .card-header,
+  .card-body,
+  .card-footer {
+    padding: $layout-spacing-lg;
+    padding-bottom: 0;
+
+    &:last-child {
+      padding-bottom: $layout-spacing-lg;
+    }
+  }
+
+  .card-body {
+    flex: 1 1 auto;
+  }
+
+  .card-image {
+    padding-top: $layout-spacing-lg;
+
+    &:first-child {
+      padding-top: 0;
+
+      img {
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+    }
+
+    &:last-child {
+      img {
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_carousels.scss

@@ -0,0 +1,136 @@
+// Carousels
+// The number of carousel images
+$carousel-number: 8;
+
+%carousel-image-checked { 
+  animation: carousel-slidein .75s ease-in-out 1;
+  opacity: 1;
+  z-index: $zindex-1;
+}
+
+%carousel-nav-checked { 
+  color: $gray-color-light;
+}
+
+.carousel {
+  background: $bg-color;
+  display: block;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+  z-index: $zindex-0;
+
+  .carousel-container {
+    height: 100%;
+    left: 0;
+    position: relative;
+    &::before {
+      content: "";
+      display: block;
+      padding-bottom: 56.25%;
+    }
+
+    .carousel-item {
+      animation: carousel-slideout 1s ease-in-out 1;
+      height: 100%;
+      left: 0;
+      margin: 0;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+
+      &:hover {
+        .item-prev,
+        .item-next {
+          opacity: 1;
+        }
+      }
+    }
+
+    .item-prev,
+    .item-next {
+      background: rgba($gray-color-light, .25);
+      border-color: rgba($gray-color-light, .5);
+      color: $gray-color-light;
+      opacity: 0;
+      position: absolute;
+      top: 50%;
+      transition: all .4s;
+      transform: translateY(-50%);
+      z-index: $zindex-1;
+    }
+    .item-prev {
+      left: 1rem;
+    }
+    .item-next {
+      right: 1rem;
+    }
+  }
+
+  .carousel-locator {
+    @for $i from 1 through ($carousel-number) {
+      &:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
+        @extend %carousel-image-checked;
+      }
+    }
+
+    @for $i from 1 through ($carousel-number) {
+      &:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
+        @extend %carousel-nav-checked;
+      }
+    }
+  }
+
+  .carousel-nav {
+    bottom: $layout-spacing;
+    display: flex;
+    justify-content: center;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 10rem;
+    z-index: $zindex-1;
+
+    .nav-item {
+      color: rgba($gray-color-light, .5);
+      display: block;
+      flex: 1 0 auto;
+      height: $unit-8;
+      margin: $unit-1;
+      max-width: 2.5rem;
+      position: relative;
+
+      &::before {
+        background: currentColor;
+        content: "";
+        display: block;
+        height: $unit-h;
+        position: absolute;
+        top: .5rem;
+        width: 100%;
+      }
+    }
+  }
+}
+
+@keyframes carousel-slidein {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes carousel-slideout {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}

yopa-web/resources/src/style/spectre/src/_chips.scss

@@ -0,0 +1,33 @@
+// Chips
+.chip {
+  align-items: center;
+  background: $bg-color-dark;
+  border-radius: 5rem;
+  display: inline-flex;
+  font-size: 90%;
+  height: $unit-6;
+  line-height: $unit-4;
+  margin: $unit-h;
+  max-width: $control-width-sm;
+  overflow: hidden;
+  padding: $unit-1 $unit-2;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &.active {
+    background: $primary-color;
+    color: $light-color;
+  }
+
+  .avatar {
+    margin-left: -$unit-2;
+    margin-right: $unit-1;
+  }
+
+  .btn-clear {
+    border-radius: 50%;
+    transform: scale(.75);
+  }
+}

yopa-web/resources/src/style/spectre/src/_codes.scss

@@ -0,0 +1,31 @@
+// Codes
+code {
+  @include label-base();
+  @include label-variant($code-color, lighten($code-color, 42.5%));
+  font-size: 85%;
+}
+
+.code {
+  border-radius: $border-radius;
+  color: $body-font-color;
+  position: relative;
+
+  &::before {
+    color: $gray-color;
+    content: attr(data-lang);
+    font-size: $font-size-sm;
+    position: absolute;
+    right: $layout-spacing;
+    top: $unit-h;
+  }
+
+  code {
+    background: $bg-color;
+    color: inherit;
+    display: block;
+    line-height: 1.5;
+    overflow-x: auto;
+    padding: 1rem;
+    width: 100%;
+  }
+}

yopa-web/resources/src/style/spectre/src/_comparison-sliders.scss

@@ -0,0 +1,116 @@
+// Image comparison slider
+// Credit: http://codepen.io/solipsistacp/pen/Gpmaq
+.comparison-slider {
+  height: 50vh;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  -webkit-overflow-scrolling: touch;
+
+  .comparison-before,
+  .comparison-after {
+    height: 100%;
+    left: 0;
+    margin: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+
+    img {
+      height: 100%;
+      object-fit: cover;
+      object-position: left center;
+      position: absolute;
+      width: 100%;
+    }
+  }
+
+  .comparison-before {
+    width: 100%;
+    z-index: 1;
+
+    .comparison-label {
+      right: $unit-4;
+    }
+  }
+
+  .comparison-after {
+    max-width: 100%;
+    min-width: 0;
+    z-index: 2;
+
+    &::before {
+      background: transparent;
+      content: "";
+      cursor: default;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      right: $unit-4;
+      top: 0;
+      z-index: $zindex-0;
+    }
+
+    &::after {
+      background: currentColor;
+      border-radius: 50%;
+      box-shadow: 0 -5px, 0 5px;
+      color: $light-color;
+      content: "";
+      height: 3px;
+      pointer-events: none;
+      position: absolute;
+      right: $unit-2;
+      top: 50%;
+      transform: translate(50%, -50%);
+      width: 3px;
+    }
+
+    .comparison-label {
+      left: $unit-4;
+    }
+  }
+
+  .comparison-resizer {
+    animation: first-run 1.5s 1 ease-in-out;
+    cursor: ew-resize;
+    height: $unit-4;
+    left: 0;
+    max-width: 100%;
+    min-width: $unit-4;
+    opacity: 0;
+    outline: none;
+    position: relative;
+    resize: horizontal;
+    top: 50%;
+    transform: translateY(-50%) scaleY(30);
+    width: 0;
+  }
+
+  .comparison-label {
+    background: rgba($dark-color, .5);
+    bottom: $unit-4;
+    color: $light-color;
+    padding: $unit-1 $unit-2;
+    position: absolute;
+    user-select: none;
+  }
+}
+
+@keyframes first-run {
+  0% {
+    width: 0;
+  }
+  25% {
+    width: $unit-12;
+  }
+  50% {
+    width: $unit-4;
+  }
+  75% {
+    width: $unit-6;
+  }
+  100% {
+    width: 0;
+  }
+}

yopa-web/resources/src/style/spectre/src/_dropdowns.scss

@@ -0,0 +1,36 @@
+// Dropdown
+.dropdown {
+  display: inline-block;
+  position: relative;
+
+  .menu {
+    animation: slide-down .15s ease 1;
+    display: none;
+    left: 0;
+    max-height: 50vh;
+    overflow-y: auto;
+    position: absolute;
+    top: 100%;
+  }
+
+  &.dropdown-right {
+    .menu {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  &.active .menu,
+  .dropdown-toggle:focus + .menu,
+  .menu:hover {
+    display: block;
+  }
+
+  // Fix dropdown-toggle border radius in button groups
+  .btn-group {
+    .dropdown-toggle:nth-last-child(2) {
+      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_empty.scss

@@ -0,0 +1,21 @@
+// Empty states (or Blank slates)
+.empty {
+  background: $bg-color;
+  border-radius: $border-radius;
+  color: $gray-color-dark;
+  text-align: center;
+  padding: $unit-16 $unit-8;
+
+  .empty-icon {
+    margin-bottom: $layout-spacing-lg;
+  }
+
+  .empty-title,
+  .empty-subtitle {
+    margin: $layout-spacing auto;
+  }
+
+  .empty-action {
+    margin-top: $layout-spacing-lg;
+  }
+}

yopa-web/resources/src/style/spectre/src/_filters.scss

@@ -0,0 +1,37 @@
+// Filters 
+// The number of filter options 
+$filter-number: 8 !default;
+
+%filter-checked-nav { 
+  background: $primary-color;
+  color: $light-color;
+}
+
+%filter-checked-body { 
+  display: none;
+}
+
+.filter {
+  .filter-nav {
+    margin: $layout-spacing 0;
+  }
+
+  .filter-body {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .filter-tag {
+    @for $i from 0 through ($filter-number) {
+      &#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
+        @extend %filter-checked-nav;
+      }
+    }
+
+    @for $i from 1 through ($filter-number) {
+      &#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
+        @extend %filter-checked-body;
+      }
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_forms.scss

@@ -0,0 +1,555 @@
+// Forms
+.form-group {
+  &:not(:last-child) {
+    margin-bottom: $layout-spacing;
+  }
+}
+
+fieldset {
+  margin-bottom: $layout-spacing-lg;
+}
+
+legend {
+  font-size: $font-size-lg;
+  font-weight: 500;
+  margin-bottom: $layout-spacing-lg;
+}
+
+// Form element: Label
+.form-label {
+  display: block;
+  line-height: $line-height;
+  padding: $control-padding-y + $border-width 0;
+
+  &.label-sm {
+    font-size: $font-size-sm;
+    padding: $control-padding-y-sm + $border-width 0;
+  }
+
+  &.label-lg {
+    font-size: $font-size-lg;
+    padding: $control-padding-y-lg + $border-width 0;
+  }
+}
+
+// Form element: Input
+.form-input {
+  appearance: none;
+  background: $bg-color-light;
+  background-image: none;
+  border: $border-width solid $border-color-dark;
+  border-radius: $border-radius;
+  color: $body-font-color;
+  display: block;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
+  max-width: 100%;
+  outline: none;
+  padding: $control-padding-y $control-padding-x;
+  position: relative;
+  transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  width: 100%;
+  &:focus {
+    @include control-shadow();
+    border-color: $primary-color;
+  }
+  &::placeholder {
+    color: $gray-color;
+  }
+
+  // Input sizes
+  &.input-sm {
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-y-sm $control-padding-x-sm;
+  }
+
+  &.input-lg {
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-y-lg $control-padding-x-lg;
+  }
+
+  &.input-inline {
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  // Input types
+  &[type="file"] {
+    height: auto;
+  }
+}
+
+// Form element: Textarea
+textarea.form-input {
+  &,
+  &.input-lg,
+  &.input-sm {
+    height: auto;
+  }
+}
+
+// Form element: Input hint
+.form-input-hint {
+  color: $gray-color;
+  font-size: $font-size-sm;
+  margin-top: $unit-1;
+
+  .has-success &,
+  .is-success + & {
+    color: $success-color;
+  }
+
+  .has-error &,
+  .is-error + & {
+    color: $error-color;
+  }
+}
+
+// Form element: Select
+.form-select {
+  appearance: none;
+  border: $border-width solid $border-color-dark;
+  border-radius: $border-radius;
+  color: inherit;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
+  outline: none;
+  padding: $control-padding-y $control-padding-x;
+  vertical-align: middle;
+  width: 100%;
+  background: $bg-color-light; 
+  &:focus {
+    @include control-shadow();
+    border-color: $primary-color;
+  }
+  &::-ms-expand {
+    display: none;
+  }
+
+  // Select sizes
+  &.select-sm {
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
+  }
+
+  &.select-lg {
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
+  }
+
+  // Multiple select
+  &[size],
+  &[multiple] {
+    height: auto;
+    padding: $control-padding-y $control-padding-x;
+
+    option {
+      padding: $unit-h $unit-1;
+    }
+  }
+  &:not([multiple]):not([size]) {
+    background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
+    padding-right: $control-icon-size + $control-padding-x;
+  }
+}
+
+// Form Icons
+.has-icon-left,
+.has-icon-right {
+  position: relative;
+
+  .form-icon {
+    height: $control-icon-size;
+    margin: 0 $control-padding-y;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: $control-icon-size;
+    z-index: $zindex-0 + 1;
+  }
+}
+
+.has-icon-left {
+  .form-icon {
+    left: $border-width;
+  }
+
+  .form-input {
+    padding-left: $control-icon-size + $control-padding-y * 2;
+  }
+}
+
+.has-icon-right {
+  .form-icon {
+    right: $border-width;
+  }
+
+  .form-input {
+    padding-right: $control-icon-size + $control-padding-y * 2;
+  }
+}
+
+// Form element: Checkbox and Radio
+.form-checkbox,
+.form-radio,
+.form-switch {
+  display: block;
+  line-height: $line-height;
+  margin: ($control-size - $control-size-sm) / 2 0;
+  min-height: $control-size-sm;
+  padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
+  position: relative;
+
+  input {
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
+    &:focus + .form-icon {
+      @include control-shadow();
+      border-color: $primary-color;
+    }
+    &:checked + .form-icon {
+      background: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+
+  .form-icon {
+    border: $border-width solid $border-color-dark;
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    transition: background .2s, border .2s, box-shadow .2s, color .2s;
+  }
+
+  // Input checkbox, radio and switch sizes
+  &.input-sm {
+    font-size: $font-size-sm;
+    margin: 0;
+  }
+
+  &.input-lg {
+    font-size: $font-size-lg;
+    margin: ($control-size-lg - $control-size-sm) / 2 0;
+  }
+}
+
+.form-checkbox,
+.form-radio {
+  .form-icon {
+    background: $bg-color-light;
+    height: $control-icon-size;
+    left: 0;
+    top: ($control-size-sm - $control-icon-size) / 2;
+    width: $control-icon-size;
+  }
+
+  input {
+    &:active + .form-icon {
+      background: $bg-color-dark;
+    }
+  }
+}
+.form-checkbox {
+  .form-icon {
+    border-radius: $border-radius;
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        background-clip: padding-box;
+        border: $border-width-lg solid $light-color;
+        border-left-width: 0;
+        border-top-width: 0;
+        content: "";
+        height: 9px;
+        left: 50%;
+        margin-left: -3px;
+        margin-top: -6px;
+        position: absolute;
+        top: 50%;
+        transform: rotate(45deg);
+        width: 6px;
+      }
+    }
+    &:indeterminate + .form-icon {
+      background: $primary-color;
+      border-color: $primary-color;
+      &::before {
+        background: $bg-color-light;
+        content: "";
+        height: 2px;
+        left: 50%;
+        margin-left: -5px;
+        margin-top: -1px;
+        position: absolute;
+        top: 50%;
+        width: 10px;
+      }
+    }
+  }
+}
+.form-radio {
+  .form-icon {
+    border-radius: 50%;
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        background: $bg-color-light;
+        border-radius: 50%;
+        content: "";
+        height: 6px;
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 6px;
+      }
+    }
+  }
+}
+
+// Form element: Switch
+.form-switch {
+  padding-left: ($unit-8 + $control-padding-x);
+
+  .form-icon {
+    background: $gray-color;
+    background-clip: padding-box;
+    border-radius: $unit-2 + $border-width;
+    height: $unit-4 + $border-width * 2;
+    left: 0;
+    top: ($control-size-sm - $unit-4) / 2 - $border-width;
+    width: $unit-8;
+    &::before {
+      background: $bg-color-light;
+      border-radius: 50%;
+      content: "";
+      display: block;
+      height: $unit-4;
+      left: 0;
+      position: absolute;
+      top: 0;
+      transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
+      width: $unit-4;
+    }
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        left: 14px;
+      }
+    }
+    &:active + .form-icon {
+      &::before {
+        background: $bg-color;
+      }
+    }
+  }
+}
+
+// Form element: Input groups
+.input-group {
+  display: flex;
+
+  .input-group-addon {
+    background: $bg-color;
+    border: $border-width solid $border-color-dark;
+    border-radius: $border-radius;
+    line-height: $line-height;
+    padding: $control-padding-y $control-padding-x;
+    white-space: nowrap;
+
+    &.addon-sm {
+      font-size: $font-size-sm;
+      padding: $control-padding-y-sm $control-padding-x-sm;
+    }
+
+    &.addon-lg {
+      font-size: $font-size-lg;
+      padding: $control-padding-y-lg $control-padding-x-lg;
+    }
+  }
+
+  .form-input,
+  .form-select {
+    flex: 1 1 auto;
+    width: 1%;
+  }
+
+  .input-group-btn {
+    z-index: $zindex-0;
+  }
+
+  .form-input,
+  .form-select,
+  .input-group-addon,
+  .input-group-btn {
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+      margin-left: -$border-width;
+    }
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-left: -$border-width;
+    }
+    &:focus {
+      z-index: $zindex-0 + 1;
+    }
+  }
+
+  .form-select {
+    width: auto;
+  }
+
+  &.input-inline {
+    display: inline-flex;
+  }
+}
+
+// Form validation states
+.form-input,
+.form-select {
+  .has-success &,
+  &.is-success {
+    background: lighten($success-color, 53%);
+    border-color: $success-color;
+    &:focus {
+      @include control-shadow($success-color);
+    }
+  }
+
+  .has-error &,
+  &.is-error {
+    background: lighten($error-color, 53%);
+    border-color: $error-color;
+    &:focus {
+      @include control-shadow($error-color);
+    }
+  }
+}
+
+.form-checkbox,
+.form-radio,
+.form-switch {
+  .has-error &,
+  &.is-error {
+    .form-icon {
+      border-color: $error-color;
+    }
+
+    input {
+      &:checked + .form-icon {
+        background: $error-color;
+        border-color: $error-color;
+      }
+
+      &:focus + .form-icon {
+        @include control-shadow($error-color);
+        border-color: $error-color;
+      }
+    }
+  }
+}
+
+.form-checkbox {
+  .has-error &,
+  &.is-error {
+    input {
+      &:indeterminate + .form-icon {
+        background: $error-color;
+        border-color: $error-color;
+      }
+    }
+  }
+}
+
+// validation based on :placeholder-shown (Edge doesn't support it yet)
+.form-input {
+  &:not(:placeholder-shown) {
+    &:invalid {
+      border-color: $error-color;
+      &:focus {
+        @include control-shadow($error-color);
+        background: lighten($error-color, 53%);
+      }
+
+      & + .form-input-hint {
+        color: $error-color;
+      }
+    }
+  }
+}
+
+// Form disabled and readonly
+.form-input,
+.form-select {
+  &:disabled,
+  &.disabled {
+    background-color: $bg-color-dark;
+    cursor: not-allowed;
+    opacity: .5;
+  }
+}
+
+.form-input {
+  &[readonly] {
+    background-color: $bg-color;
+  }
+}
+
+input {
+  &:disabled,
+  &.disabled {
+    & + .form-icon {
+      background: $bg-color-dark;
+      cursor: not-allowed;
+      opacity: .5;
+    }
+  }
+}
+
+.form-switch {
+  input {
+    &:disabled,
+    &.disabled {
+      & + .form-icon::before {
+        background: $bg-color-light;
+      }
+    }
+  }
+}
+
+// Form horizontal
+.form-horizontal {
+  padding: $layout-spacing 0;
+
+  .form-group {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+// Form inline
+.form-inline {
+  display: inline-block;
+}

yopa-web/resources/src/style/spectre/src/_hero.scss

@@ -0,0 +1,22 @@
+// Hero
+.hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: 4rem;
+  padding-top: 4rem;
+
+  &.hero-sm {
+    padding-bottom: 2rem;
+    padding-top: 2rem;
+  }
+
+  &.hero-lg {
+    padding-bottom: 8rem;
+    padding-top: 8rem;
+  }
+
+  .hero-body {
+    padding: $layout-spacing;
+  }
+}

yopa-web/resources/src/style/spectre/src/_icons.scss

@@ -0,0 +1,5 @@
+// CSS Icons
+@import "icons/icons-core";
+@import "icons/icons-navigation";
+@import "icons/icons-action";
+@import "icons/icons-object";

yopa-web/resources/src/style/spectre/src/_labels.scss

@@ -0,0 +1,34 @@
+// Labels
+.label {
+  @include label-base();
+  @include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
+  display: inline-block;
+
+  // Label rounded
+  &.label-rounded {
+    border-radius: 5rem;
+    padding-left: .4rem;
+    padding-right: .4rem; 
+  }
+
+  // Label colors
+  &.label-primary {
+    @include label-variant($light-color, $primary-color);
+  }
+
+  &.label-secondary {
+    @include label-variant($primary-color, $secondary-color);
+  }
+
+  &.label-success {
+    @include label-variant($light-color, $success-color);
+  }
+
+  &.label-warning {
+    @include label-variant($light-color, $warning-color);
+  }
+
+  &.label-error {
+    @include label-variant($light-color, $error-color);
+  }
+}

yopa-web/resources/src/style/spectre/src/_layout.scss

@@ -0,0 +1,446 @@
+// Layout
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: $layout-spacing;
+  padding-right: $layout-spacing;
+  width: 100%;
+
+  $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
+
+  &.grid-xl {
+    max-width: $grid-spacing * 2 + $size-xl;
+  }
+
+  &.grid-lg {
+    max-width: $grid-spacing * 2 + $size-lg;
+  }
+
+  &.grid-md {
+    max-width: $grid-spacing * 2 + $size-md;
+  }
+
+  &.grid-sm {
+    max-width: $grid-spacing * 2 + $size-sm;
+  }
+
+  &.grid-xs {
+    max-width: $grid-spacing * 2 + $size-xs;
+  }
+}
+
+// Responsive breakpoint system
+.show-xs,
+.show-sm,
+.show-md,
+.show-lg,
+.show-xl {
+  display: none !important;
+}
+
+// Responsive grid system
+.cols,
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -$layout-spacing;
+  margin-right: -$layout-spacing;
+
+  &.col-gapless {
+    margin-left: 0;
+    margin-right: 0;
+
+    & > .column {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  &.col-oneline {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+}
+[class~="col-"],
+.column {
+  flex: 1;
+  max-width: 100%;
+  padding-left: $layout-spacing;
+  padding-right: $layout-spacing;
+
+  &.col-12,
+  &.col-11,
+  &.col-10,
+  &.col-9,
+  &.col-8,
+  &.col-7,
+  &.col-6,
+  &.col-5,
+  &.col-4,
+  &.col-3,
+  &.col-2,
+  &.col-1,
+  &.col-auto {
+    flex: none;
+  }
+}
+.col-12 {
+  width: 100%;
+}
+.col-11 {
+  width: 91.66666667%;
+}
+.col-10 {
+  width: 83.33333333%;
+}
+.col-9 {
+  width: 75%;
+}
+.col-8 {
+  width: 66.66666667%;
+}
+.col-7 {
+  width: 58.33333333%;
+}
+.col-6 {
+  width: 50%;
+}
+.col-5 {
+  width: 41.66666667%;
+}
+.col-4 {
+  width: 33.33333333%;
+}
+.col-3 {
+  width: 25%;
+}
+.col-2 {
+  width: 16.66666667%;
+}
+.col-1 {
+  width: 8.33333333%;
+}
+.col-auto {
+  flex: 0 0 auto;
+  max-width: none;
+  width: auto;
+}
+.col-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.col-ml-auto {
+  margin-left: auto;
+}
+.col-mr-auto {
+  margin-right: auto;
+}
+@media (max-width: $size-xl) {
+  .col-xl-12,
+  .col-xl-11,
+  .col-xl-10,
+  .col-xl-9,
+  .col-xl-8,
+  .col-xl-7,
+  .col-xl-6,
+  .col-xl-5,
+  .col-xl-4,
+  .col-xl-3,
+  .col-xl-2,
+  .col-xl-1,
+  .col-xl-auto {
+    flex: none;
+  }
+  .col-xl-12 {
+    width: 100%;
+  }
+  .col-xl-11 {
+    width: 91.66666667%;
+  }
+  .col-xl-10 {
+    width: 83.33333333%;
+  }
+  .col-xl-9 {
+    width: 75%;
+  }
+  .col-xl-8 {
+    width: 66.66666667%;
+  }
+  .col-xl-7 {
+    width: 58.33333333%;
+  }
+  .col-xl-6 {
+    width: 50%;
+  }
+  .col-xl-5 {
+    width: 41.66666667%;
+  }
+  .col-xl-4 {
+    width: 33.33333333%;
+  }
+  .col-xl-3 {
+    width: 25%;
+  }
+  .col-xl-2 {
+    width: 16.66666667%;
+  }
+  .col-xl-1 {
+    width: 8.33333333%;
+  }
+  .col-xl-auto {
+    width: auto;
+  }
+  .hide-xl {
+    display: none !important;
+  }
+  .show-xl {
+    display: block !important;
+  }
+}
+@media (max-width: $size-lg) {
+  .col-lg-12,
+  .col-lg-11,
+  .col-lg-10,
+  .col-lg-9,
+  .col-lg-8,
+  .col-lg-7,
+  .col-lg-6,
+  .col-lg-5,
+  .col-lg-4,
+  .col-lg-3,
+  .col-lg-2,
+  .col-lg-1,
+  .col-lg-auto {
+    flex: none;
+  }
+  .col-lg-12 {
+    width: 100%;
+  }
+  .col-lg-11 {
+    width: 91.66666667%;
+  }
+  .col-lg-10 {
+    width: 83.33333333%;
+  }
+  .col-lg-9 {
+    width: 75%;
+  }
+  .col-lg-8 {
+    width: 66.66666667%;
+  }
+  .col-lg-7 {
+    width: 58.33333333%;
+  }
+  .col-lg-6 {
+    width: 50%;
+  }
+  .col-lg-5 {
+    width: 41.66666667%;
+  }
+  .col-lg-4 {
+    width: 33.33333333%;
+  }
+  .col-lg-3 {
+    width: 25%;
+  }
+  .col-lg-2 {
+    width: 16.66666667%;
+  }
+  .col-lg-1 {
+    width: 8.33333333%;
+  }
+  .col-lg-auto {
+    width: auto;
+  }
+  .hide-lg {
+    display: none !important;
+  }
+  .show-lg {
+    display: block !important;
+  }
+}
+@media (max-width: $size-md) {
+  .col-md-12,
+  .col-md-11,
+  .col-md-10,
+  .col-md-9,
+  .col-md-8,
+  .col-md-7,
+  .col-md-6,
+  .col-md-5,
+  .col-md-4,
+  .col-md-3,
+  .col-md-2,
+  .col-md-1,
+  .col-md-auto {
+    flex: none;
+  }
+  .col-md-12 {
+    width: 100%;
+  }
+  .col-md-11 {
+    width: 91.66666667%;
+  }
+  .col-md-10 {
+    width: 83.33333333%;
+  }
+  .col-md-9 {
+    width: 75%;
+  }
+  .col-md-8 {
+    width: 66.66666667%;
+  }
+  .col-md-7 {
+    width: 58.33333333%;
+  }
+  .col-md-6 {
+    width: 50%;
+  }
+  .col-md-5 {
+    width: 41.66666667%;
+  }
+  .col-md-4 {
+    width: 33.33333333%;
+  }
+  .col-md-3 {
+    width: 25%;
+  }
+  .col-md-2 {
+    width: 16.66666667%;
+  }
+  .col-md-1 {
+    width: 8.33333333%;
+  }
+  .col-md-auto {
+    width: auto;
+  }
+  .hide-md {
+    display: none !important;
+  }
+  .show-md {
+    display: block !important;
+  }
+}
+@media (max-width: $size-sm) {
+  .col-sm-12,
+  .col-sm-11,
+  .col-sm-10,
+  .col-sm-9,
+  .col-sm-8,
+  .col-sm-7,
+  .col-sm-6,
+  .col-sm-5,
+  .col-sm-4,
+  .col-sm-3,
+  .col-sm-2,
+  .col-sm-1,
+  .col-sm-auto {
+    flex: none;
+  }
+  .col-sm-12 {
+    width: 100%;
+  }
+  .col-sm-11 {
+    width: 91.66666667%;
+  }
+  .col-sm-10 {
+    width: 83.33333333%;
+  }
+  .col-sm-9 {
+    width: 75%;
+  }
+  .col-sm-8 {
+    width: 66.66666667%;
+  }
+  .col-sm-7 {
+    width: 58.33333333%;
+  }
+  .col-sm-6 {
+    width: 50%;
+  }
+  .col-sm-5 {
+    width: 41.66666667%;
+  }
+  .col-sm-4 {
+    width: 33.33333333%;
+  }
+  .col-sm-3 {
+    width: 25%;
+  }
+  .col-sm-2 {
+    width: 16.66666667%;
+  }
+  .col-sm-1 {
+    width: 8.33333333%;
+  }
+  .col-sm-auto {
+    width: auto;
+  }
+  .hide-sm {
+    display: none !important;
+  }
+  .show-sm {
+    display: block !important;
+  }
+}
+@media (max-width: $size-xs) {
+  .col-xs-12,
+  .col-xs-11,
+  .col-xs-10,
+  .col-xs-9,
+  .col-xs-8,
+  .col-xs-7,
+  .col-xs-6,
+  .col-xs-5,
+  .col-xs-4,
+  .col-xs-3,
+  .col-xs-2,
+  .col-xs-1,
+  .col-xs-auto {
+    flex: none;
+  }
+  .col-xs-12 {
+    width: 100%;
+  }
+  .col-xs-11 {
+    width: 91.66666667%;
+  }
+  .col-xs-10 {
+    width: 83.33333333%;
+  }
+  .col-xs-9 {
+    width: 75%;
+  }
+  .col-xs-8 {
+    width: 66.66666667%;
+  }
+  .col-xs-7 {
+    width: 58.33333333%;
+  }
+  .col-xs-6 {
+    width: 50%;
+  }
+  .col-xs-5 {
+    width: 41.66666667%;
+  }
+  .col-xs-4 {
+    width: 33.33333333%;
+  }
+  .col-xs-3 {
+    width: 25%;
+  }
+  .col-xs-2 {
+    width: 16.66666667%;
+  }
+  .col-xs-1 {
+    width: 8.33333333%;
+  }
+  .col-xs-auto {
+    width: auto;
+  }
+  .hide-xs {
+    display: none !important;
+  }
+  .show-xs {
+    display: block !important;
+  }
+}

yopa-web/resources/src/style/spectre/src/_media.scss

@@ -0,0 +1,75 @@
+// Media
+// Image responsive
+.img-responsive {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+// object-fit support is coming to Microsoft Edge
+// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
+.img-fit-cover {
+  object-fit: cover;
+}
+
+.img-fit-contain {
+  object-fit: contain;
+}
+
+// Video responsive
+.video-responsive {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+  &::before {
+    content: "";
+    display: block;
+    padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
+  }
+
+  iframe,
+  object,
+  embed {
+    border: 0;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+  }
+}
+
+video.video-responsive {
+  height: auto;
+  max-width: 100%;
+
+  &::before {
+    content: none;
+  }
+}
+
+.video-responsive-4-3 {
+  &::before {
+    padding-bottom: 75%; // Ratio 4:3
+  }
+}
+
+.video-responsive-1-1 {
+  &::before {
+    padding-bottom: 100%; // Ratio 1:1
+  }
+}
+
+// Figure
+.figure {
+  margin: 0 0 $layout-spacing 0;
+
+  .figure-caption {
+    color: $gray-color-dark;
+    margin-top: $layout-spacing;
+  }
+}

yopa-web/resources/src/style/spectre/src/_menus.scss

@@ -0,0 +1,66 @@
+// Menus
+.menu {
+  @include shadow-variant(.05rem);
+  background: $bg-color-light;
+  border-radius: $border-radius;
+  list-style: none;
+  margin: 0;
+  min-width: $control-width-xs;
+  padding: $unit-2;
+  transform: translateY($layout-spacing-sm);
+  z-index: $zindex-3;
+
+  &.menu-nav {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .menu-item {
+    margin-top: 0;
+    padding: 0 $unit-2;
+    position: relative;
+    text-decoration: none;
+
+    & > a {
+      border-radius: $border-radius;
+      color: inherit;
+      display: block;
+      margin: 0 (-$unit-2);
+      padding: $unit-1 $unit-2;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        background: $secondary-color;
+        color: $primary-color;
+      }
+      &:active,
+      &.active {
+        background: $secondary-color;
+        color: $primary-color;
+      }
+    }
+
+    .form-checkbox,
+    .form-radio,
+    .form-switch {
+      margin: $unit-h 0;
+    }
+
+    & + .menu-item {
+      margin-top: $unit-1;
+    }
+  }
+
+  .menu-badge {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    .label {
+      margin-right: $unit-2;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_meters.scss

@@ -0,0 +1,57 @@
+// Meters
+// Credit: https://css-tricks.com/html5-meter-element/
+.meter {
+  appearance: none;
+  background: $bg-color;
+  border: 0;
+  border-radius: $border-radius;
+  display: block;
+  width: 100%;
+  height: $unit-4;
+
+  &::-webkit-meter-inner-element {
+    display: block;
+  }
+
+  &::-webkit-meter-bar,
+  &::-webkit-meter-optimum-value,
+  &::-webkit-meter-suboptimum-value,
+  &::-webkit-meter-even-less-good-value {
+    border-radius: $border-radius;
+  }
+
+  &::-webkit-meter-bar {
+    background: $bg-color;
+  }
+
+  &::-webkit-meter-optimum-value {
+    background: $success-color;
+  }
+
+  &::-webkit-meter-suboptimum-value {
+    background: $warning-color;
+  }
+
+  &::-webkit-meter-even-less-good-value {
+    background: $error-color;
+  }
+
+  &::-moz-meter-bar,
+  &:-moz-meter-optimum,
+  &:-moz-meter-sub-optimum,
+  &:-moz-meter-sub-sub-optimum {
+    border-radius: $border-radius;
+  }
+
+  &:-moz-meter-optimum::-moz-meter-bar {
+    background: $success-color;
+  }
+
+  &:-moz-meter-sub-optimum::-moz-meter-bar {
+    background: $warning-color;
+  }
+
+  &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: $error-color;
+  }
+}

yopa-web/resources/src/style/spectre/src/_mixins.scss

@@ -0,0 +1,10 @@
+// Mixins
+@import "mixins/avatar";
+@import "mixins/button";
+@import "mixins/clearfix";
+@import "mixins/color";
+@import "mixins/label";
+@import "mixins/position";
+@import "mixins/shadow";
+@import "mixins/text";
+@import "mixins/toast";

yopa-web/resources/src/style/spectre/src/_modals.scss

@@ -0,0 +1,87 @@
+// Modals
+.modal {
+  align-items: center;
+  bottom: 0;
+  display: none;
+  justify-content: center;
+  left: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: $layout-spacing;
+  position: fixed;
+  right: 0;
+  top: 0;
+
+  &:target,
+  &.active {
+    display: flex;
+    opacity: 1;
+    z-index: $zindex-4;
+
+    .modal-overlay {
+      background: rgba($bg-color, .75);
+      bottom: 0;
+      cursor: default;
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    .modal-container {
+      animation: slide-down .2s ease 1;
+      z-index: $zindex-0;
+    }
+  }
+
+  &.modal-sm {
+    .modal-container {
+      max-width: $control-width-sm;
+      padding: 0 $unit-2;
+    }
+  }
+
+  &.modal-lg {
+    .modal-overlay {
+      background: $bg-color-light;
+    }
+
+    .modal-container {
+      box-shadow: none;
+      max-width: $control-width-lg;
+    }
+  }
+}
+
+.modal-container {
+  @include shadow-variant(.2rem);
+  background: $bg-color-light;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+  max-height: 75vh;
+  max-width: $control-width-md;
+  padding: 0 $unit-4;
+  width: 100%;
+
+  &.modal-fullheight {
+    max-height: 100vh;
+  }
+
+  .modal-header {
+    color: $dark-color;
+    padding: $unit-4;
+  }
+
+  .modal-body {
+    overflow-y: auto;
+    padding: $unit-4;
+    position: relative;
+  }
+
+  .modal-footer {
+    padding: $unit-4;
+    text-align: right;
+  }
+}

yopa-web/resources/src/style/spectre/src/_navbar.scss

@@ -0,0 +1,28 @@
+// Navbar
+.navbar {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .navbar-section {
+    align-items: center;
+    display: flex;
+    flex: 1 0 0;
+
+    &:not(:first-child):last-child {
+      justify-content: flex-end;
+    }
+  }
+
+  .navbar-center {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+  }
+
+  .navbar-brand {
+    font-size: $font-size-lg;
+    text-decoration: none;
+  }
+}

yopa-web/resources/src/style/spectre/src/_navs.scss

@@ -0,0 +1,34 @@
+// Navs
+.nav {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: $unit-1 0;
+
+  .nav-item {
+    a {
+      color: $gray-color-dark;
+      padding: $unit-1 $unit-2;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $primary-color;
+      }
+    }
+    &.active {
+      & > a {
+        color: darken($gray-color-dark, 10%);
+        font-weight: bold;
+        &:focus,
+        &:hover {
+          color: $primary-color;
+        }
+      }
+    }
+  }
+
+  & .nav {
+    margin-bottom: $unit-2;
+    margin-left: $unit-4;
+  }
+}

yopa-web/resources/src/style/spectre/src/_normalize.scss

@@ -0,0 +1,446 @@
+/* Manually forked from Normalize.css */
+/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+/* Document
+   ========================================================================== */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 3 */
+  -webkit-text-size-adjust: 100%; /* 3 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8 (removed).
+ */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers. (removed)
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/**
+ * Modify default styling of address.
+ */
+
+address {
+  font-style: normal;
+}
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)
+ */
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: $mono-font-family; /* 1 (changed) */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-. (Removed)
+ */
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+  font-weight: 400; /* (added) */
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 (changed) */
+  font-size: inherit; /* 1 (changed) */
+  line-height: inherit; /* 1 (changed) */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule (removed).
+ */
+
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated) (changed).
+ */
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+  outline: none;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}

yopa-web/resources/src/style/spectre/src/_off-canvas.scss

@@ -0,0 +1,95 @@
+// Off canvas menus
+$off-canvas-breakpoint: $size-lg !default;
+
+.off-canvas {
+  display: flex;
+  flex-flow: nowrap;
+  height: 100%;
+  position: relative;
+  width: 100%;
+
+  .off-canvas-toggle {
+    display: block;
+    position: absolute;
+    top: $layout-spacing;
+    transition: none;
+    z-index: $zindex-0;
+    @if $rtl == true {
+      right: $layout-spacing;
+    } @else {
+      left: $layout-spacing;
+    }
+  }
+
+  .off-canvas-sidebar {
+    background: $bg-color;
+    bottom: 0;
+    min-width: 10rem;
+    overflow-y: auto;
+    position: fixed;
+    top: 0;
+    transition: transform .25s;
+    z-index: $zindex-2;
+    @if $rtl == true {
+      right: 0;
+      transform: translateX(100%);
+    } @else {
+      left: 0;
+      transform: translateX(-100%);
+    }
+  }
+
+  .off-canvas-content {
+    flex: 1 1 auto;
+    height: 100%;
+    padding: $layout-spacing $layout-spacing $layout-spacing 4rem;
+  }
+
+  .off-canvas-overlay {
+    background: rgba($dark-color, .1);
+    border-color: transparent;
+    border-radius: 0;
+    bottom: 0;
+    display: none;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+  }
+
+  .off-canvas-sidebar {
+    &:target,
+    &.active {
+      transform: translateX(0);
+    }
+
+    &:target ~ .off-canvas-overlay,
+    &.active ~ .off-canvas-overlay {
+      display: block;
+      z-index: $zindex-1;
+    }
+  }
+}
+
+// Responsive layout
+@media (min-width: $off-canvas-breakpoint) {
+  .off-canvas {
+    &.off-canvas-sidebar-show {
+      .off-canvas-toggle {
+        display: none;
+      }
+  
+      .off-canvas-sidebar {
+        flex: 0 0 auto;
+        position: relative;
+        transform: none;
+      }
+
+      .off-canvas-overlay {
+        display: none !important;
+      }
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_pagination.scss

@@ -0,0 +1,60 @@
+// Pagination
+.pagination {
+  display: flex;
+  list-style: none;
+  margin: $unit-1 0;
+  padding: $unit-1 0;
+
+  .page-item {
+    margin: $unit-1 $unit-o;
+
+    span {
+      display: inline-block;
+      padding: $unit-1 $unit-1;
+    }
+
+    a {
+      border-radius: $border-radius;
+      display: inline-block;
+      padding: $unit-1 $unit-2;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $primary-color;
+      }
+    }
+
+    &.disabled {
+      a {
+        cursor: default;
+        opacity: .5;
+        pointer-events: none;
+      }
+    }
+
+    &.active {
+      a {
+        background: $primary-color;
+        color: $light-color;
+      }
+    }
+
+    &.page-prev,
+    &.page-next {
+      flex: 1 0 50%;
+    }
+
+    &.page-next {
+      text-align: right;
+    }
+
+    .page-item-title {
+      margin: 0;
+    }
+
+    .page-item-subtitle {
+      margin: 0;
+      opacity: .5;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_panels.scss

@@ -0,0 +1,23 @@
+// Panels
+.panel {
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+
+  .panel-header,
+  .panel-footer {
+    flex: 0 0 auto;
+    padding: $layout-spacing-lg;
+  }
+
+  .panel-nav {
+    flex: 0 0 auto;
+  }
+
+  .panel-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 0 $layout-spacing-lg;
+  }
+}

yopa-web/resources/src/style/spectre/src/_parallax.scss

@@ -0,0 +1,135 @@
+// Parallax
+$parallax-deg: 3deg !default;
+$parallax-offset: 4.5px !default;
+$parallax-offset-z: 50px !default;
+$parallax-perspective: 1000px !default;
+$parallax-scale: .95 !default;
+$parallax-fade-color: rgba(255, 255, 255, .35) !default;
+
+// Mixin: Parallax direction
+@mixin parallax-dir() {
+  height: 50%;
+  outline: none;
+  position: absolute;
+  width: 50%;
+  z-index: $zindex-1;
+}
+
+.parallax {
+  display: block;
+  height: auto;
+  position: relative;
+  width: auto;
+
+  .parallax-content {
+    @include shadow-variant(1rem);
+    height: auto;
+    transform: perspective($parallax-perspective);
+    transform-style: preserve-3d;
+    transition: all .4s ease;
+    width: 100%;
+
+    &::before {
+      content: "";
+      display: block;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  .parallax-front {
+    align-items: center;
+    color: $light-color;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    text-shadow: 0 0 20px rgba($dark-color, .75);
+    top: 0;
+    transform: translateZ($parallax-offset-z) scale($parallax-scale);
+    transition: transform .4s;
+    width: 100%;
+    z-index: $zindex-0;
+  }
+
+  .parallax-top-left {
+    @include parallax-dir();
+    left: 0;
+    top: 0;
+
+    &:focus ~ .parallax-content,
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
+
+      &::before {
+        background: linear-gradient(135deg, $parallax-fade-color 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-top-right {
+    @include parallax-dir();
+    right: 0;
+    top: 0;
+
+    &:focus ~ .parallax-content,
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
+
+      &::before {
+        background: linear-gradient(-135deg, $parallax-fade-color 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-bottom-left {
+    @include parallax-dir();
+    bottom: 0;
+    left: 0;
+
+    &:focus ~ .parallax-content,
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
+
+      &::before {
+        background: linear-gradient(45deg, $parallax-fade-color 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-bottom-right {
+    @include parallax-dir();
+    bottom: 0;
+    right: 0;
+
+    &:focus ~ .parallax-content,
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
+
+      &::before {
+        background: linear-gradient(-45deg, $parallax-fade-color 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_popovers.scss

@@ -0,0 +1,65 @@
+// Popovers
+.popover {
+  display: inline-block;
+  position: relative;
+
+  .popover-container {
+    left: 50%;
+    opacity: 0;
+    padding: $layout-spacing;
+    position: absolute;
+    top: 0;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform .2s;
+    width: $control-width-sm;
+    z-index: $zindex-3;
+  }
+
+  *:focus + .popover-container,
+  &:hover .popover-container {
+    display: block;
+    opacity: 1;
+    transform: translate(-50%, -100%) scale(1);
+  }
+
+  &.popover-right {
+    .popover-container {
+      left: 100%;
+      top: 50%;
+    }
+
+    *:focus + .popover-container,
+    &:hover .popover-container {
+      transform: translate(0, -50%) scale(1);
+    }
+  }
+
+  &.popover-bottom {
+    .popover-container {
+      left: 50%;
+      top: 100%;
+    }
+
+    *:focus + .popover-container,
+    &:hover .popover-container {
+      transform: translate(-50%, 0) scale(1);
+    }
+  }
+
+  &.popover-left {
+    .popover-container {
+      left: 0;
+      top: 50%;
+    }
+
+    *:focus + .popover-container,
+    &:hover .popover-container {
+      transform: translate(-100%, -50%) scale(1);
+    }
+  }
+
+  .card {
+    @include shadow-variant(.2rem);
+    border: 0;
+  }
+}

yopa-web/resources/src/style/spectre/src/_progress.scss

@@ -0,0 +1,45 @@
+// Progress
+// Credit: https://css-tricks.com/html5-progress-element/
+.progress {
+  appearance: none;
+  background: $bg-color-dark;
+  border: 0;
+  border-radius: $border-radius;
+  color: $primary-color;
+  height: $unit-1;
+  position: relative;
+  width: 100%;
+
+  &::-webkit-progress-bar {
+    background: transparent;
+    border-radius: $border-radius;
+  }
+
+  &::-webkit-progress-value {
+    background: $primary-color;
+    border-radius: $border-radius;
+  }
+
+  &::-moz-progress-bar {
+    background: $primary-color;
+    border-radius: $border-radius;
+  }
+
+  &:indeterminate {
+    animation: progress-indeterminate 1.5s linear infinite;
+    background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat;
+
+    &::-moz-progress-bar {
+      background: transparent;
+    }
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}

yopa-web/resources/src/style/spectre/src/_sliders.scss

@@ -0,0 +1,99 @@
+// Sliders
+// Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
+.slider {
+  appearance: none;
+  background: transparent;
+  display: block;
+  width: 100%;
+  height: $unit-6;
+
+  &:focus {
+    @include control-shadow();
+    outline: none;
+  }
+
+  &.tooltip:not([data-tooltip]) {
+    &::after {
+      content: attr(value);
+    }
+  }
+
+  // Slider Thumb
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: $unit-3;
+    margin-top: -($unit-3 - $unit-h) / 2;
+    transition: transform .2s;
+    width: $unit-3;
+  }
+  &::-moz-range-thumb {
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: $unit-3;
+    transition: transform .2s;
+    width: $unit-3;
+  }
+  &::-ms-thumb {
+    background: $primary-color;
+    border: 0;
+    border-radius: 50%;
+    height: $unit-3;
+    transition: transform .2s;
+    width: $unit-3;
+  }
+
+  &:active {
+    &::-webkit-slider-thumb {
+      transform: scale(1.25);
+    }
+    &::-moz-range-thumb {
+      transform: scale(1.25);
+    }
+    &::-ms-thumb {
+      transform: scale(1.25);
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    &::-webkit-slider-thumb {
+      background: $gray-color-light;
+      transform: scale(1);
+    }
+    &::-moz-range-thumb {
+      background: $gray-color-light;
+      transform: scale(1);
+    }
+    &::-ms-thumb {
+      background: $gray-color-light;
+      transform: scale(1);
+    }
+  }
+
+  // Slider Track
+  &::-webkit-slider-runnable-track {
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
+    width: 100%;
+  }
+  &::-moz-range-track {
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
+    width: 100%;
+  }
+  &::-ms-track {
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
+    width: 100%;
+  }
+  &::-ms-fill-lower {
+    background: $primary-color;
+  }
+}

yopa-web/resources/src/style/spectre/src/_steps.scss

@@ -0,0 +1,71 @@
+// Steps
+.step {
+  display: flex;
+  flex-wrap: nowrap;
+  list-style: none;
+  margin: $unit-1 0;
+  width: 100%;
+
+  .step-item {
+    flex: 1 1 0;
+    margin-top: 0;
+    min-height: 1rem;
+    text-align: center;
+    position: relative;
+
+    &:not(:first-child)::before {
+      background: $primary-color;
+      content: "";
+      height: 2px;
+      left: -50%;
+      position: absolute;
+      top: 9px;
+      width: 100%;
+    }
+
+    a {
+      color: $primary-color;
+      display: inline-block;
+      padding: 20px 10px 0;
+      text-decoration: none;
+
+      &::before {
+        background: $primary-color;
+        border: $border-width-lg solid $light-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: $unit-3;
+        left: 50%;
+        position: absolute;
+        top: $unit-1;
+        transform: translateX(-50%);
+        width: $unit-3;
+        z-index: $zindex-0;
+      }
+    }
+
+    &.active {
+      a {
+        &::before {
+          background: $light-color;
+          border: $border-width-lg solid $primary-color;
+        }
+      }
+
+      & ~ .step-item {
+        &::before {
+          background: $border-color;
+        }
+
+        a {
+          color: $gray-color;
+
+          &::before {
+            background: $border-color;
+          }
+        }
+      }
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_tables.scss

@@ -0,0 +1,57 @@
+// Tables
+.table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  @if $rtl == true {
+    text-align: right;
+  } @else {
+    text-align: left;
+  }
+
+  &.table-striped {
+    tbody {
+      tr:nth-of-type(odd) {
+        background: $bg-color;
+      }
+    }
+  }
+
+  &,
+  &.table-striped {
+    tbody {
+      tr {
+        &.active {
+          background: $bg-color-dark;
+        }
+      }
+    }
+  }
+
+  &.table-hover {
+    tbody {
+      tr {
+        &:hover {
+          background: $bg-color-dark;
+        }
+      }
+    }
+  }
+
+  // Scollable tables
+  &.table-scroll {
+    display: block;
+    overflow-x: auto;
+    padding-bottom: .75rem;
+    white-space: nowrap;
+  }
+
+  td,
+  th {
+    border-bottom: $border-width solid $border-color;
+    padding: $unit-3 $unit-2;
+  }
+  th {
+    border-bottom-width: $border-width-lg;
+  }
+}

yopa-web/resources/src/style/spectre/src/_tabs.scss

@@ -0,0 +1,66 @@
+// Tabs
+.tab {
+  align-items: center;
+  border-bottom: $border-width solid $border-color;
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: $unit-1 0 ($unit-1 - $border-width) 0;
+
+  .tab-item {
+    margin-top: 0;
+
+    a {
+      border-bottom: $border-width-lg solid transparent;
+      color: inherit;
+      display: block;
+      margin: 0 $unit-2 0 0;
+      padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        color: $link-color;
+      }
+    }
+    &.active a,
+    a.active {
+      border-bottom-color: $primary-color;
+      color: $link-color;
+    }
+
+    &.tab-action {
+      flex: 1 0 auto;
+      text-align: right;
+    }
+
+    .btn-clear {
+      margin-top: -$unit-1;
+    }
+  }
+
+  &.tab-block {
+    .tab-item {
+      flex: 1 0 0;
+      text-align: center;
+
+      a {
+        margin: 0;
+      }
+
+      .badge {
+        &[data-badge]::after {
+          position: absolute;
+          right: $unit-h;
+          top: $unit-h;
+          transform: translate(0, 0);
+        }
+      }
+    }
+  }
+
+  &:not(.tab-block) {
+    .badge {
+      padding-right: 0;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_tiles.scss

@@ -0,0 +1,38 @@
+// Tiles
+.tile {
+  align-content: space-between;
+  align-items: flex-start;
+  display: flex;
+
+  .tile-icon,
+  .tile-action {
+    flex: 0 0 auto;
+  }
+  .tile-content {
+    flex: 1 1 auto;
+    &:not(:first-child) {
+      padding-left: $unit-2;
+    }
+    &:not(:last-child) {
+      padding-right: $unit-2;
+    }
+  }
+  .tile-title,
+  .tile-subtitle {
+    line-height: $line-height;
+  }
+
+  &.tile-centered {
+    align-items: center;
+
+    .tile-content {
+      overflow: hidden;
+    }
+
+    .tile-title,
+    .tile-subtitle {
+      @include text-ellipsis();
+      margin-bottom: 0;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_timelines.scss

@@ -0,0 +1,56 @@
+// Timelines
+.timeline {
+  .timeline-item {
+    display: flex;
+    margin-bottom: $unit-6;
+    position: relative;
+    &::before {
+      background: $border-color;
+      content: "";
+      height: 100%;
+      left: 11px;
+      position: absolute;
+      top: $unit-6;
+      width: 2px;
+    }
+
+    .timeline-left {
+      flex: 0 0 auto;
+    }
+
+    .timeline-content {
+      flex: 1 1 auto;
+      padding: 2px 0 2px $layout-spacing-lg;
+    }
+
+    .timeline-icon {
+      align-items: center;
+      border-radius: 50%;
+      color: $light-color;
+      display: flex;
+      height: $unit-6;
+      justify-content: center;
+      text-align: center;
+      width: $unit-6;
+      &::before {
+        border: $border-width-lg solid $primary-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: $unit-2;
+        left: $unit-2;
+        position: absolute;
+        top: $unit-2;
+        width: $unit-2;
+      }
+
+      &.icon-lg {
+        background: $primary-color;
+        line-height: $line-height;
+        &::before {
+          content: none;
+        }
+      }
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_toasts.scss

@@ -0,0 +1,48 @@
+// Toasts
+.toast {
+  @include toast-variant($dark-color);
+  border: $border-width solid $dark-color;
+  border-radius: $border-radius;
+  color: $light-color;
+  display: block;
+  padding: $layout-spacing;
+  width: 100%;
+
+  &.toast-primary {
+    @include toast-variant($primary-color);
+  }
+
+  &.toast-success {
+    @include toast-variant($success-color);
+  }
+
+  &.toast-warning {
+    @include toast-variant($warning-color);
+  }
+
+  &.toast-error {
+    @include toast-variant($error-color);
+  }
+
+  a {
+    color: $light-color;
+    text-decoration: underline;
+    
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      opacity: .75;
+    }
+  }
+
+  .btn-clear {
+    margin: $unit-h;
+  }
+
+  p {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_tooltips.scss

@@ -0,0 +1,79 @@
+// Tooltips
+.tooltip {
+  position: relative;
+  &::after {
+    background: rgba($dark-color, .95);
+    border-radius: $border-radius;
+    bottom: 100%;
+    color: $light-color;
+    content: attr(data-tooltip);
+    display: block;
+    font-size: $font-size-sm;
+    left: 50%;
+    max-width: $control-width-sm;
+    opacity: 0;
+    overflow: hidden;
+    padding: $unit-1 $unit-2;
+    pointer-events: none;
+    position: absolute;
+    text-overflow: ellipsis;
+    transform: translate(-50%, $unit-2);
+    transition: opacity .2s, transform .2s;
+    white-space: pre;
+    z-index: $zindex-3;
+  }
+  &:focus,
+  &:hover {
+    &::after {
+      opacity: 1;
+      transform: translate(-50%, -$unit-1);
+    }
+  }
+  &[disabled],
+  &.disabled {
+    pointer-events: auto;
+  }
+
+  &.tooltip-right {
+    &::after {
+      bottom: 50%;
+      left: 100%;
+      transform: translate(-$unit-1, 50%);
+    }
+    &:focus,
+    &:hover {
+      &::after {
+        transform: translate($unit-1, 50%);
+      }
+    }
+  }
+
+  &.tooltip-bottom {
+    &::after {
+      bottom: auto;
+      top: 100%;
+      transform: translate(-50%, -$unit-2);
+    }
+    &:focus,
+    &:hover {
+      &::after {
+        transform: translate(-50%, $unit-1);
+      }
+    }
+  }
+  
+  &.tooltip-left {
+    &::after {
+      bottom: 50%;
+      left: auto;
+      right: 100%;
+      transform: translate($unit-2, 50%);
+    }
+    &:focus,
+    &:hover {
+      &::after {
+        transform: translate(-$unit-1, 50%);
+      }
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/_typography.scss

@@ -0,0 +1,129 @@
+// Typography
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: inherit;
+  font-weight: 500;
+  line-height: 1.2;
+  margin-bottom: .5em;
+  margin-top: 0;
+}
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-weight: 500;
+}
+h1,
+.h1 {
+  font-size: 2rem;
+}
+h2,
+.h2 {
+  font-size: 1.6rem;
+}
+h3,
+.h3 {
+  font-size: 1.4rem;
+}
+h4,
+.h4 {
+  font-size: 1.2rem;
+}
+h5,
+.h5 {
+  font-size: 1rem;
+}
+h6,
+.h6 {
+  font-size: .8rem;
+}
+
+// Paragraphs
+p {
+  margin: 0 0 $line-height;
+}
+
+// Semantic text elements
+a,
+ins,
+u {
+  text-decoration-skip: ink edges;
+}
+
+abbr[title] {
+  border-bottom: $border-width dotted;
+  cursor: help;
+  text-decoration: none;
+}
+
+kbd {
+  @include label-base();
+  @include label-variant($light-color, $dark-color);
+  font-size: $font-size-sm;
+}
+
+mark {
+  @include label-variant($body-font-color, $highlight-color);
+  border-bottom: $unit-o solid darken($highlight-color, 15%);
+  border-radius: $border-radius;
+  padding: $unit-o $unit-h 0;
+}
+
+// Blockquote
+blockquote {
+  border-left: $border-width-lg solid $border-color;
+  margin-left: 0;
+  padding: $unit-2 $unit-4;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Lists
+ul,
+ol {
+  margin: $unit-4 0 $unit-4 $unit-4;
+  padding: 0;
+
+  ul,
+  ol {
+    margin: $unit-4 0 $unit-4 $unit-4;
+  }
+
+  li {
+    margin-top: $unit-2;
+  }
+}
+
+ul {
+  list-style: disc inside;
+
+  ul {
+    list-style-type: circle;
+  }
+}
+
+ol {
+  list-style: decimal inside;
+
+  ol {
+    list-style-type: lower-alpha;
+  }
+}
+
+dl {
+  dt {
+    font-weight: bold;
+  }
+  dd {
+    margin: $unit-2 0 $unit-4 0;
+  }
+}

yopa-web/resources/src/style/spectre/src/_utilities.scss

@@ -0,0 +1,8 @@
+@import "utilities/colors";
+@import "utilities/cursors";
+@import "utilities/display";
+@import "utilities/divider";
+@import "utilities/loading";
+@import "utilities/position";
+@import "utilities/shapes";
+@import "utilities/text";

yopa-web/resources/src/style/spectre/src/_variables.scss

@@ -0,0 +1,117 @@
+// Core variables
+$version: "0.5.9";
+
+// Core features
+$rtl: false !default;
+
+// Core colors
+$primary-color: #5755d9 !default;
+$primary-color-dark: darken($primary-color, 3%) !default;
+$primary-color-light: lighten($primary-color, 3%) !default;
+$secondary-color: lighten($primary-color, 37.5%) !default;
+$secondary-color-dark: darken($secondary-color, 3%) !default;
+$secondary-color-light: lighten($secondary-color, 3%) !default;
+
+// Gray colors
+$dark-color: #303742 !default;
+$light-color: #fff !default;
+$gray-color: lighten($dark-color, 55%) !default;
+$gray-color-dark: darken($gray-color, 30%) !default;
+$gray-color-light: lighten($gray-color, 20%) !default;
+
+$border-color: lighten($dark-color, 65%) !default;
+$border-color-dark: darken($border-color, 10%) !default;
+$border-color-light: lighten($border-color, 8%) !default;
+$bg-color: lighten($dark-color, 75%) !default;
+$bg-color-dark: darken($bg-color, 3%) !default;
+$bg-color-light: $light-color !default;
+
+// Control colors
+$success-color: #32b643 !default;
+$warning-color: #ffb700 !default;
+$error-color: #e85600 !default;
+
+// Other colors
+$code-color: #d73e48 !default;
+$highlight-color: #ffe9b3 !default;
+$body-bg: $bg-color-light !default;
+$body-font-color: lighten($dark-color, 5%) !default;
+$link-color: $primary-color !default;
+$link-color-dark: darken($link-color, 10%) !default;
+$link-color-light: lighten($link-color, 10%) !default;
+
+// Fonts
+// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto !default;
+$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default;
+$fallback-font-family: "Helvetica Neue", sans-serif !default;
+$cjk-zh-hans-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family !default;
+$cjk-zh-hant-font-family: $base-font-family, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", $fallback-font-family !default;
+$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family !default;
+$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family !default;
+$body-font-family: $base-font-family, $fallback-font-family !default;
+
+// Unit sizes
+$unit-o: .05rem !default;
+$unit-h: .1rem !default;
+$unit-1: .2rem !default;
+$unit-2: .4rem !default;
+$unit-3: .6rem !default;
+$unit-4: .8rem !default;
+$unit-5: 1rem !default;
+$unit-6: 1.2rem !default;
+$unit-7: 1.4rem !default;
+$unit-8: 1.6rem !default;
+$unit-9: 1.8rem !default;
+$unit-10: 2rem !default;
+$unit-12: 2.4rem !default;
+$unit-16: 3.2rem !default;
+
+// Font sizes
+$html-font-size: 20px !default;
+$html-line-height: 1.5 !default;
+$font-size: .8rem !default;
+$font-size-sm: .7rem !default;
+$font-size-lg: .9rem !default;
+$line-height: 1.2rem !default;
+
+// Sizes
+$layout-spacing: $unit-2 !default;
+$layout-spacing-sm: $unit-1 !default;
+$layout-spacing-lg: $unit-4 !default;
+$border-radius: $unit-h !default;
+$border-width: $unit-o !default;
+$border-width-lg: $unit-h !default;
+$control-size: $unit-9 !default;
+$control-size-sm: $unit-7 !default;
+$control-size-lg: $unit-10 !default;
+$control-padding-x: $unit-2 !default;
+$control-padding-x-sm: $unit-2 * .75 !default;
+$control-padding-x-lg: $unit-2 * 1.5 !default;
+$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
+$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
+$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
+$control-icon-size: .8rem !default;
+
+$control-width-xs: 180px !default;
+$control-width-sm: 320px !default;
+$control-width-md: 640px !default;
+$control-width-lg: 960px !default;
+$control-width-xl: 1280px !default;
+
+// Responsive breakpoints
+$size-xs: 480px !default;
+$size-sm: 600px !default;
+$size-md: 840px !default;
+$size-lg: 960px !default;
+$size-xl: 1280px !default;
+$size-2x: 1440px !default;
+
+$responsive-breakpoint: $size-xs !default;
+
+// Z-index
+$zindex-0: 1 !default;
+$zindex-1: 100 !default;
+$zindex-2: 200 !default;
+$zindex-3: 300 !default;
+$zindex-4: 400 !default;

yopa-web/resources/src/style/spectre/src/_viewer-360.scss

@@ -0,0 +1,34 @@
+// 360 Degree Viewer
+
+// Mixin: Viewer slider sizes
+@mixin viewer-slider-size($image-number: 36) {
+  @for $s from 1 through ($image-number) {
+    .viewer-slider[max='#{$image-number}'][value='#{$s}'] + .viewer-image {
+      background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
+    }
+  }
+}
+
+.viewer-360 {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  // Copy and add more numbers if you need
+  @include viewer-slider-size(36);
+
+  .viewer-slider {
+    cursor: ew-resize;
+    margin: 1rem;
+    order: 2;
+    width: 60%;
+  }
+
+  .viewer-image {
+    background-position-y: 0;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    max-width: 100%;
+    order: 1;
+  }
+}

yopa-web/resources/src/style/spectre/src/icons/_icons-action.scss

@@ -0,0 +1,315 @@
+// Icon resize
+.icon-resize-horiz,
+.icon-resize-vert {
+  &::before,
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    height: .45em;
+    width: .45em;
+  }
+  &::before {
+    transform: translate(-50%, -90%) rotate(45deg);
+  }
+  &::after {
+    transform: translate(-50%, -10%) rotate(225deg);
+  }
+}
+
+.icon-resize-horiz {
+  &::before {
+    transform: translate(-90%, -50%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-10%, -50%) rotate(135deg);
+  }
+}
+
+// Icon more
+.icon-more-horiz,
+.icon-more-vert {
+  &::before {
+    background: currentColor;
+    box-shadow: -.4em 0, .4em 0;
+    border-radius: 50%;
+    height: 3px;
+    width: 3px;
+  }
+}
+
+.icon-more-vert {
+  &::before {
+    box-shadow: 0 -.4em, 0 .4em;
+  }
+}
+
+// Icon plus, minus, cross
+.icon-plus,
+.icon-minus,
+.icon-cross {
+  &::before {
+    background: currentColor;
+    height: $icon-border-width;
+    width: 100%;
+  }
+}
+
+.icon-plus,
+.icon-cross {
+  &::after {
+    background: currentColor;
+    height: 100%;
+    width: $icon-border-width;
+  }
+}
+
+.icon-cross {
+  &::before {
+    width: 100%;
+  }
+  &::after {
+    height: 100%;
+  }
+  &::before,
+  &::after {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+// Icon check
+.icon-check {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-right: 0;
+    border-top: 0;
+    height: .5em;
+    width: .9em;
+    transform: translate(-50%, -75%) rotate(-45deg);
+  }
+}
+
+// Icon stop
+.icon-stop {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    background: currentColor;
+    height: $icon-border-width;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: 1em;
+  }
+}
+
+// Icon shutdown
+.icon-shutdown {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  border-top-color: transparent;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: .5em;
+    top: .1em;
+    width: $icon-border-width;
+  }
+}
+
+// Icon refresh
+.icon-refresh {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    border-right-color: transparent;
+    height: 1em;
+    width: 1em;
+  }
+  &::after {
+    border: .2em solid currentColor;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    height: 0;
+    left: 80%;
+    top: 20%;
+    width: 0;
+  }
+}
+
+// Icon search
+.icon-search {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    height: .75em;
+    left: 5%;
+    top: 5%;
+    transform: translate(0, 0) rotate(45deg);
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    height: $icon-border-width;
+    left: 80%;
+    top: 80%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: .4em;
+  }
+}
+
+// Icon edit
+.icon-edit {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    height: .4em;
+    transform: translate(-40%, -60%) rotate(-45deg);
+    width: .85em;
+  }
+  &::after {
+    border: .15em solid currentColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    height: 0;
+    left: 5%;
+    top: 95%;
+    transform: translate(0, -100%);
+    width: 0;
+  }
+}
+
+// Icon delete
+.icon-delete {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    border-top: 0;
+    height: .75em;
+    top: 60%;
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    box-shadow: -.25em .2em, .25em .2em;
+    height: $icon-border-width;
+    top: $icon-border-width/2;
+    width: .5em;
+  }
+}
+
+// Icon share
+.icon-share {
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
+  border-right: 0;
+  border-top: 0;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-left: 0;
+    border-top: 0;
+    height: .4em;
+    left: 100%;
+    top: .25em;
+    transform: translate(-125%, -50%) rotate(-45deg);
+    width: .4em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    border-radius: 75% 0;
+    height: .5em;
+    width: .6em;
+  }
+}
+
+// Icon flag
+.icon-flag {
+  &::before {
+    background: currentColor;
+    height: 1em;
+    left: 15%;
+    width: $icon-border-width;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom-right-radius: $border-radius;
+    border-left: 0;
+    border-top-right-radius: $border-radius;
+    height: .65em;
+    top: 35%;
+    left: 60%;
+    width: .8em;
+  }
+}
+
+// Icon bookmark
+.icon-bookmark {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    height: .9em;
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: $border-radius;
+    height: .5em;
+    transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
+    width: .5em;
+  }
+}
+
+// Icon download & upload
+.icon-download,
+.icon-upload {
+  border-bottom: $icon-border-width solid currentColor;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    height: .5em;
+    width: .5em;
+    transform: translate(-50%, -60%) rotate(-135deg);
+  }
+  &::after {
+    background: currentColor;
+    height: .6em;
+    top: 40%;
+    width: $icon-border-width;
+  }
+}
+
+.icon-upload {
+  &::before {
+    transform: translate(-50%, -60%) rotate(45deg);
+  }
+  &::after {
+    top: 50%;
+  }
+}
+
+// Icon copy
+.icon-copy {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    border-right: 0;
+    border-bottom: 0;
+    height: .8em;
+    left: 40%;
+    top: 35%;
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    height: .8em;
+    left: 60%;
+    top: 60%;
+    width: .8em;
+  }
+}

yopa-web/resources/src/style/spectre/src/icons/_icons-core.scss

@@ -0,0 +1,54 @@
+// Icon variables
+$icon-border-width: $border-width-lg;
+$icon-prefix: "icon";
+
+// Icon base style
+.#{$icon-prefix} {
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: inherit;
+  font-style: normal;
+  height: 1em;
+  position: relative;
+  text-indent: -9999px;
+  vertical-align: middle;
+  width: 1em;
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  // Icon sizes
+  &.icon-2x {
+    font-size: 1.6rem;
+  }
+
+  &.icon-3x {
+    font-size: 2.4rem;
+  }
+
+  &.icon-4x {
+    font-size: 3.2rem;
+  }
+}
+
+// Component icon support
+.accordion,
+.btn,
+.toast,
+.menu {
+  .#{$icon-prefix} {
+    vertical-align: -10%;
+  }
+}
+
+.btn-lg {
+  .#{$icon-prefix} {
+    vertical-align: -15%;
+  }
+}

yopa-web/resources/src/style/spectre/src/icons/_icons-navigation.scss

@@ -0,0 +1,128 @@
+// Icon arrows
+.icon-arrow-down,
+.icon-arrow-left,
+.icon-arrow-right,
+.icon-arrow-up,
+.icon-downward,
+.icon-back,
+.icon-forward,
+.icon-upward,
+.icon-home {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    height: .65em;
+    width: .65em;
+  }
+}
+
+.icon-arrow-down {
+  &::before {
+    transform: translate(-50%, -75%) rotate(225deg);
+  }
+}
+
+.icon-arrow-left {
+  &::before {
+    transform: translate(-25%, -50%) rotate(-45deg);
+  }
+}
+
+.icon-arrow-right {
+  &::before {
+    transform: translate(-75%, -50%) rotate(135deg);
+  }
+}
+
+.icon-arrow-up {
+  &::before {
+    transform: translate(-50%, -25%) rotate(45deg);
+  }
+}
+
+.icon-back,
+.icon-forward {
+  &::after {
+    background: currentColor;
+    height: $icon-border-width;
+    width: .8em;
+  }
+}
+
+.icon-downward,
+.icon-upward {
+  &::after {
+    background: currentColor;
+    height: .8em;
+    width: $icon-border-width;
+  }
+}
+
+.icon-back {
+  &::after {
+    left: 55%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+}
+
+.icon-downward {
+  &::after {
+    top: 45%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(-135deg);
+  }
+}
+
+.icon-forward {
+  &::after {
+    left: 45%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(135deg);
+  }
+}
+
+.icon-upward {
+  &::after {
+    top: 55%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+// Icon caret
+.icon-caret {
+  &::before {
+    border-top: .3em solid currentColor;
+    border-right: .3em solid transparent;
+    border-left: .3em solid transparent;
+    height: 0;
+    transform: translate(-50%, -25%);
+    width: 0;
+  }
+}
+
+// Icon menu
+.icon-menu {
+  &::before {
+    background: currentColor;
+    box-shadow: 0 -.35em, 0 .35em;
+    height: $icon-border-width;
+    width: 100%;
+  }
+}
+
+// Icon apps
+.icon-apps {
+  &::before {
+    background: currentColor;
+    box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
+    height: 3px;
+    width: 3px;
+  }
+}

yopa-web/resources/src/style/spectre/src/icons/_icons-object.scss

@@ -0,0 +1,161 @@
+// Icon time
+.icon-time {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    background: currentColor;
+    height: .4em;
+    transform: translate(-50%, -75%);
+    width: $icon-border-width;
+  }
+  &::after {
+    background: currentColor;
+    height: .3em;
+    transform: translate(-50%, -75%) rotate(90deg);
+    transform-origin: 50% 90%;
+    width: $icon-border-width;
+  }
+}
+
+// Icon mail
+.icon-mail {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    height: .8em;
+    width: 1em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-right: 0;
+    border-top: 0;
+    height: .5em;
+    transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
+    width: .5em;
+  }
+}
+
+// Icon people
+.icon-people {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    height: .45em;
+    top: 25%;
+    width: .45em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50% 50% 0 0;
+    height: .4em;
+    top: 75%;
+    width: .9em;
+  }
+}
+
+// Icon message
+.icon-message {
+  border: $icon-border-width solid currentColor;
+  border-bottom: 0;
+  border-radius: $border-radius;
+  border-right: 0;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom-right-radius: $border-radius;
+    border-left: 0;
+    border-top: 0;
+    height: .8em;
+    left: 65%;
+    top: 40%;
+    width: .7em;
+  }
+  &::after {
+    background: currentColor;
+    border-radius: $border-radius;
+    height: .3em;
+    left: 10%;
+    top: 100%;
+    transform: translate(0, -90%) rotate(45deg);
+    width: $icon-border-width;
+  }
+}
+
+// Icon photo
+.icon-photo {
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    height: .25em;
+    left: 35%;
+    top: 35%;
+    width: .25em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    height: .5em;
+    left: 60%;
+    transform: translate(-50%, 25%) rotate(-45deg);
+    width: .5em;
+  }
+}
+
+// Icon link
+.icon-link {
+  &::before,
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 5em 0 0 5em;
+    border-right: 0;
+    height: .5em;
+    width: .75em;
+  }
+  &::before {
+    transform: translate(-70%, -45%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-30%, -55%) rotate(135deg);
+  }
+}
+
+// Icon location
+.icon-location {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50% 50% 50% 0;
+    height: .8em;
+    transform: translate(-50%, -60%) rotate(-45deg);
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    height: .2em;
+    transform: translate(-50%, -80%);
+    width: .2em;
+  }
+}
+
+// Icon emoji
+.icon-emoji {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    border-radius: 50%;
+    box-shadow: -.17em -.1em, .17em -.1em;
+    height: .15em;
+    width: .15em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    border-right-color: transparent;
+    height: .5em;
+    transform: translate(-50%, -40%) rotate(-135deg);
+    width: .5em;
+  }
+}

yopa-web/resources/src/style/spectre/src/mixins/_avatar.scss

@@ -0,0 +1,6 @@
+// Avatar mixin
+@mixin avatar-base($size: $unit-8) {
+  font-size: $size / 2;
+  height: $size;
+  width: $size;
+}

yopa-web/resources/src/style/spectre/src/mixins/_button.scss

@@ -0,0 +1,54 @@
+// Button variant mixin
+@mixin button-variant($color: $primary-color) {
+  background: $color;
+  border-color: darken($color, 3%);
+  color: $light-color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: darken($color, 2%);
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &:active,
+  &.active {
+    background: darken($color, 7%);
+    border-color: darken($color, 10%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $light-color;
+      border-left-color: $light-color;
+    }
+  }
+}
+
+@mixin button-outline-variant($color: $primary-color) {
+  background: $light-color;
+  border-color: $color;
+  color: $color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: lighten($color, 50%);
+    border-color: darken($color, 2%);
+    color: $color;
+  }
+  &:active,
+  &.active {
+    background: $color;
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $color;
+      border-left-color: $color;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/mixins/_clearfix.scss

@@ -0,0 +1,8 @@
+// Clearfix mixin
+@mixin clearfix() {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}

yopa-web/resources/src/style/spectre/src/mixins/_color.scss

@@ -0,0 +1,27 @@
+// Background color utility mixin
+@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
+  #{$name} {
+    background: $color !important;
+
+    @if (lightness($color) < 60) {
+      color: $light-color;
+    }
+  }
+}
+
+// Text color utility mixin
+@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
+  #{$name} {
+    color: $color !important;
+  }
+
+  a#{$name} {
+    &:focus,
+    &:hover {
+      color: darken($color, 5%);
+    }
+    &:visited {
+      color: lighten($color, 5%);
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/mixins/_label.scss

@@ -0,0 +1,11 @@
+// Label base style
+@mixin label-base() {
+  border-radius: $border-radius;
+  line-height: 1.25;
+  padding: .1rem .2rem;
+}
+
+@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
+  background: $bg-color;
+  color: $color;
+}

yopa-web/resources/src/style/spectre/src/mixins/_position.scss

@@ -0,0 +1,65 @@
+// Margin utility mixin
+@mixin margin-variant($id: 1, $size: $unit-1) {
+  .m-#{$id} {
+    margin: $size !important;
+  }
+
+  .mb-#{$id} {
+    margin-bottom: $size !important;
+  }
+
+  .ml-#{$id} {
+    margin-left: $size !important;
+  }
+
+  .mr-#{$id} {
+    margin-right: $size !important;
+  }
+
+  .mt-#{$id} {
+    margin-top: $size !important;
+  }
+
+  .mx-#{$id} {
+    margin-left: $size !important;
+    margin-right: $size !important;
+  }
+
+  .my-#{$id} {
+    margin-bottom: $size !important;
+    margin-top: $size !important;
+  }
+}
+
+// Padding utility mixin
+@mixin padding-variant($id: 1, $size: $unit-1) {
+  .p-#{$id} {
+    padding: $size !important;
+  }
+
+  .pb-#{$id} {
+    padding-bottom: $size !important;
+  }
+
+  .pl-#{$id} {
+    padding-left: $size !important;
+  }
+
+  .pr-#{$id} {
+    padding-right: $size !important;
+  }
+
+  .pt-#{$id} {
+    padding-top: $size !important;
+  }
+
+  .px-#{$id} {
+    padding-left: $size !important;
+    padding-right: $size !important;
+  }
+  
+  .py-#{$id} {
+    padding-bottom: $size !important;
+    padding-top: $size !important;
+  }
+}

yopa-web/resources/src/style/spectre/src/mixins/_shadow.scss

@@ -0,0 +1,9 @@
+// Component focus shadow
+@mixin control-shadow($color: $primary-color) {
+  box-shadow: 0 0 0 .1rem rgba($color, .2);
+}
+
+// Shadow mixin
+@mixin shadow-variant($offset) {
+  box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
+}

yopa-web/resources/src/style/spectre/src/mixins/_text.scss

@@ -0,0 +1,6 @@
+// Text Ellipsis
+@mixin text-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

yopa-web/resources/src/style/spectre/src/mixins/_toast.scss

@@ -0,0 +1,5 @@
+// Toast variant mixin
+@mixin toast-variant($color: $dark-color) {
+  background: rgba($color, .95);
+  border-color: $color;
+}

yopa-web/resources/src/style/spectre/src/spectre-exp.scss

@@ -0,0 +1,18 @@
+// Variables and mixins
+@import "variables";
+@import "mixins";
+
+/*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
+// Experimentals
+@import "autocomplete";
+@import "calendars";
+@import "carousels";
+@import "comparison-sliders";
+@import "filters";
+@import "meters";
+@import "off-canvas";
+@import "parallax";
+@import "progress";
+@import "sliders";
+@import "timelines";
+@import "viewer-360";

yopa-web/resources/src/style/spectre/src/spectre-icons.scss

@@ -0,0 +1,10 @@
+// Variables and mixins
+@import "variables";
+@import "mixins";
+
+/*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
+// Icons
+@import "icons/icons-core";
+@import "icons/icons-navigation";
+@import "icons/icons-action";
+@import "icons/icons-object";

yopa-web/resources/src/style/spectre/src/spectre.scss

@@ -0,0 +1,49 @@
+// Variables and mixins
+@import "variables";
+@import "mixins";
+
+/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
+// Reset and dependencies
+@import "normalize";
+@import "base";
+
+// Elements
+@import "typography";
+@import "asian";
+@import "tables";
+@import "buttons";
+@import "forms";
+@import "labels";
+@import "codes";
+@import "media";
+
+// Layout
+@import "layout";
+@import "hero";
+@import "navbar";
+
+// Components
+@import "accordions";
+@import "avatars";
+@import "badges";
+@import "breadcrumbs";
+@import "bars";
+@import "cards";
+@import "chips";
+@import "dropdowns";
+@import "empty";
+@import "menus";
+@import "modals";
+@import "navs";
+@import "pagination";
+@import "panels";
+@import "popovers";
+@import "steps";
+@import "tabs";
+@import "tiles";
+@import "toasts";
+@import "tooltips";
+
+// Utility classes
+@import "animations";
+@import "utilities";

yopa-web/resources/src/style/spectre/src/utilities/_colors.scss

@@ -0,0 +1,31 @@
+// Text colors
+@include text-color-variant(".text-primary", $primary-color);
+
+@include text-color-variant(".text-secondary", $secondary-color-dark);
+
+@include text-color-variant(".text-gray", $gray-color);
+
+@include text-color-variant(".text-light", $light-color);
+
+@include text-color-variant(".text-dark", $body-font-color);
+
+@include text-color-variant(".text-success", $success-color);
+
+@include text-color-variant(".text-warning", $warning-color);
+
+@include text-color-variant(".text-error", $error-color);
+
+// Background colors
+@include bg-color-variant(".bg-primary", $primary-color);
+
+@include bg-color-variant(".bg-secondary", $secondary-color);
+
+@include bg-color-variant(".bg-dark", $dark-color);
+
+@include bg-color-variant(".bg-gray", $bg-color);
+
+@include bg-color-variant(".bg-success", $success-color);
+
+@include bg-color-variant(".bg-warning", $warning-color);
+
+@include bg-color-variant(".bg-error", $error-color);

yopa-web/resources/src/style/spectre/src/utilities/_cursors.scss

@@ -0,0 +1,24 @@
+// Cursors
+.c-hand {
+  cursor: pointer;
+}
+
+.c-move {
+  cursor: move;
+}
+
+.c-zoom-in {
+  cursor: zoom-in;
+}
+
+.c-zoom-out {
+  cursor: zoom-out;
+}
+
+.c-not-allowed {
+  cursor: not-allowed;
+}
+
+.c-auto {
+  cursor: auto;
+}

yopa-web/resources/src/style/spectre/src/utilities/_display.scss

@@ -0,0 +1,44 @@
+// Display
+.d-block {
+  display: block;
+}
+.d-inline {
+  display: inline;
+}
+.d-inline-block {
+  display: inline-block;
+}
+.d-flex {
+  display: flex;
+}
+.d-inline-flex {
+  display: inline-flex;
+}
+.d-none,
+.d-hide {
+  display: none !important;
+}
+.d-visible {
+  visibility: visible;
+}
+.d-invisible {
+  visibility: hidden;
+}
+.text-hide {
+  background: transparent;
+  border: 0;
+  color: transparent;
+  font-size: 0;
+  line-height: 0;
+  text-shadow: none;
+}
+.text-assistive {
+  border: 0;
+  clip: rect(0,0,0,0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

yopa-web/resources/src/style/spectre/src/utilities/_divider.scss

@@ -0,0 +1,50 @@
+// Divider
+.divider,
+.divider-vert {
+  display: block;
+  position: relative;
+
+  &[data-content]::after {
+    background: $bg-color-light;
+    color: $gray-color;
+    content: attr(data-content);
+    display: inline-block;
+    font-size: $font-size-sm;
+    padding: 0 $unit-2;
+    transform: translateY(-$font-size-sm + $border-width);
+  }
+}
+
+.divider {
+  border-top: $border-width solid $border-color-light;
+  height: $border-width;
+  margin: $unit-2 0;
+
+  &[data-content] {
+    margin: $unit-4 0;
+  }
+}
+
+.divider-vert {
+  display: block;
+  padding: $unit-4;
+
+  &::before {
+    border-left: $border-width solid $border-color;
+    bottom: $unit-2;
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: $unit-2;
+    transform: translateX(-50%);
+  }
+
+  &[data-content]::after {
+    left: 50%;
+    padding: $unit-1 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

yopa-web/resources/src/style/spectre/src/utilities/_loading.scss

@@ -0,0 +1,37 @@
+// Loading
+.loading {
+  color: transparent !important;
+  min-height: $unit-4;
+  pointer-events: none;
+  position: relative;
+  &::after {
+    animation: loading 500ms infinite linear;
+    background: transparent;
+    border: $border-width-lg solid $primary-color;
+    border-radius: 50%;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: $unit-4;
+    left: 50%;
+    margin-left: -$unit-2;
+    margin-top: -$unit-2;
+    opacity: 1;
+    padding: 0;
+    position: absolute;
+    top: 50%;
+    width: $unit-4;
+    z-index: $zindex-0;
+  }
+
+  &.loading-lg {
+    min-height: $unit-10;
+    &::after {
+      height: $unit-8;
+      margin-left: -$unit-4;
+      margin-top: -$unit-4;
+      width: $unit-8;
+    }
+  }
+}

yopa-web/resources/src/style/spectre/src/utilities/_position.scss

@@ -0,0 +1,54 @@
+// Position
+.clearfix {
+  @include clearfix();
+}
+
+.float-left {
+  float: left !important;
+}
+
+.float-right {
+  float: right !important;
+}
+
+.p-relative {
+  position: relative !important;
+}
+
+.p-absolute {
+  position: absolute !important;
+}
+
+.p-fixed {
+  position: fixed !important;
+}
+
+.p-sticky {
+  position: sticky !important;
+}
+
+.p-centered {
+  display: block;
+  float: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.flex-centered {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+// Spacing
+@include margin-variant(0, 0);
+
+@include margin-variant(1, $unit-1);
+
+@include margin-variant(2, $unit-2);
+
+@include padding-variant(0, 0);
+
+@include padding-variant(1, $unit-1);
+
+@include padding-variant(2, $unit-2);

yopa-web/resources/src/style/spectre/src/utilities/_shapes.scss

@@ -0,0 +1,8 @@
+// Shapes
+.s-rounded {
+  border-radius: $border-radius;
+}
+
+.s-circle {
+  border-radius: 50%;
+}

yopa-web/resources/src/style/spectre/src/utilities/_text.scss

@@ -0,0 +1,76 @@
+// Text
+// Text alignment utilities
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+// Text transform utilities
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+// Text style utilities
+.text-normal {
+  font-weight: normal;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-large {
+  font-size: 1.2em;
+}
+
+.text-small {
+  font-size: .9em;
+}
+
+.text-tiny {
+  font-size: .8em;
+}
+
+.text-muted {
+  opacity: .8;
+}
+
+// Text overflow utilities
+.text-ellipsis {
+  @include text-ellipsis();
+}
+
+.text-clip {
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+.text-break {
+  hyphens: auto;
+  word-break: break-word;
+  word-wrap: break-word;
+}

yopa-web/resources/static/test_form.html

@@ -1,270 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<title>Edit Recipe &bull; YOPA</title>
-	<script src="bundle.js"></script>
-	<link rel="stylesheet" href="style.css">
-</head>
-<body>
-<div class="content">
-	<div id="edit-object-form"></div>
-
-	<script>
-      onLoad(() => {
-        window.app = Yopa.editObjectForm({
-          "model_id": 0,
-          // this is objects that can be chosen as related
-          "objects": [
-            {
-              "id": 11,
-              "model": 2,
-              "name": "Lemon"
-            },
-            {
-              "id": 12,
-              "model": 2,
-              "name": "Custard"
-            }
-          ],
-          // schema, possibly restricted to the relevant entries
-          "schema": {
-            "obj_models": [
-              {
-                "id": 2,
-                "name": "Ingredient"
-              },
-              {
-                "id": 0,
-                "name": "Recipe"
-              },
-              {
-                "id": 1,
-                "name": "Book"
-              }
-            ],
-            "prop_models": [
-              {
-                "data_type": "Integer",
-                "default": {
-                  "Integer": 0
-                },
-                "id": 13,
-                "multiple": false,
-                "name": "Number",
-                "object": 0,
-                "optional": true
-              },
-              {
-                "data_type": "String",
-                "default": {
-                  "String": ""
-                },
-                "id": 17,
-                "multiple": true,
-                "name": "MultiString",
-                "object": 0,
-                "optional": false
-              },
-              {
-                "data_type": "Integer",
-                "default": {
-                  "Integer": 0
-                },
-                "id": 7,
-                "multiple": false,
-                "name": "page",
-                "object": 6,
-                "optional": true
-              },
-              {
-                "data_type": "String",
-                "default": {
-                  "String": ""
-                },
-                "id": 18,
-                "multiple": true,
-                "name": "OptiMultiString",
-                "object": 0,
-                "optional": true
-              },
-              {
-                "data_type": "Boolean",
-                "default": {
-                  "Boolean": false
-                },
-                "id": 14,
-                "multiple": false,
-                "name": "Bool",
-                "object": 0,
-                "optional": false
-              },
-              {
-                "data_type": "String",
-                "default": {
-                  "String": ""
-                },
-                "id": 15,
-                "multiple": false,
-                "name": "String",
-                "object": 0,
-                "optional": false
-              },
-              {
-                "data_type": "Decimal",
-                "default": {
-                  "Decimal": 0.0
-                },
-                "id": 16,
-                "multiple": false,
-                "name": "Float",
-                "object": 0,
-                "optional": false
-              },
-              {
-                "data_type": "String",
-                "default": {
-                  "String": ""
-                },
-                "id": 10,
-                "multiple": false,
-                "name": "qty",
-                "object": 9,
-                "optional": true
-              }
-            ],
-            "rel_models": [
-              {
-                "id": 6,
-                "multiple": true,
-                "name": "book reference",
-                "object": 0,
-                "optional": true,
-                "reciprocal_name": "recipes",
-                "related": 1
-              },
-              {
-                "id": 8,
-                "multiple": true,
-                "name": "related recipe",
-                "object": 0,
-                "optional": true,
-                "reciprocal_name": "related recipe",
-                "related": 0
-              },
-              {
-                "id": 9,
-                "multiple": true,
-                "name": "ingredient",
-                "object": 0,
-                "optional": true,
-                "reciprocal_name": "recipes",
-                "related": 2
-              }
-            ]
-          },
-
-          "object": {
-            "id": 19,
-            "model": 0,
-            "name": "Custard with lemon",
-            "values": {
-              "14": [{
-                "id": 25,
-                "object": 19,
-                "value": {
-                  "Boolean": true
-                }
-              }],
-              "17": [{
-                "id": 21,
-                "object": 19,
-                "value": {
-                  "String": "Bla"
-                }
-              }, {
-                "id": 22,
-                "object": 19,
-                "value": {
-                  "String": "Ble"
-                }
-              }, {
-                "id": 23,
-                "object": 19,
-                "value": {
-                  "String": "Bli"
-                }
-              }],
-              "15": [{
-                "id": 26,
-                "object": 19,
-                "value": {
-                  "String": "Bla"
-                }
-              }],
-              "16": [{
-                "id": 27,
-                "object": 19,
-                "value": {
-                  "Decimal": 15.6
-                }
-              }],
-              "13": [{
-                "id": 20,
-                "object": 19,
-                "value": {
-                  "Integer": 15
-                }
-              }],
-              "18": [{
-                "id": 24,
-                "object": 19,
-                "value": {
-                  "String": "sdfsfsdfsdf"
-                }
-              }]
-            },
-            "relations": {
-              "6": [],
-              "8": [],
-              "9": [
-                {
-                  "id": 28,
-                  "object": 19,
-                  "model": 9,
-                  "related": 11,
-                  "values": {
-                    "10": [{
-                      "id": 29,
-                      "object": 28,
-                      // model:10
-                      "value": {
-                        "String": "1"
-                      }
-                    }],
-                  }
-                }, {
-                  "id": 30,
-                  "object": 19,
-                  "model": 9,
-                  "related": 12,
-                  "values": {
-                    "10": [{
-                      "id": 31,
-                      "object": 30,
-                      // model:10
-                      "value": {
-                        "String": "2"
-                      }
-                    }],
-                  }
-                }
-              ],
-            },
-          }
-        })
-      });
-	</script>
-</div>
-</body>
-</html>

yopa-web/resources/test/edit_object.html

@@ -0,0 +1,286 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Edit Recipe &bull; YOPA</title>
+	<script src="../static/bundle.js"></script>
+	<link rel="stylesheet" href="../static/style.css">
+</head>
+<body class="container grid-lg">
+
+<header class="navbar">
+	<section class="navbar-section">
+		<a href="/" class="navbar-brand text-bold mr-2">
+			Yopa
+		</a>
+		<a href="/" class="btn btn-link">
+			<i class="icon icon-home"></i>
+			Home
+		</a>
+	</section>
+	<section class="navbar-section">
+		YOPA is the best
+	</section>
+</header>
+
+<div class="content">
+	<div id="edit-object-form"></div>
+</div>
+
+<script>
+  onLoad(() => {
+    window.app = Yopa.editObjectForm({
+      "model_id": 0,
+      // this is objects that can be chosen as related
+      "objects": [
+        {
+          "id": 11,
+          "model": 2,
+          "name": "Lemon"
+        },
+        {
+          "id": 12,
+          "model": 2,
+          "name": "Custard"
+        }
+      ],
+      // schema, possibly restricted to the relevant entries
+      "schema": {
+        "obj_models": [
+          {
+            "id": 2,
+            "name": "Ingredient"
+          },
+          {
+            "id": 0,
+            "name": "Recipe"
+          },
+          {
+            "id": 1,
+            "name": "Book"
+          }
+        ],
+        "prop_models": [
+          {
+            "data_type": "Integer",
+            "default": {
+              "Integer": 0
+            },
+            "id": 13,
+            "multiple": false,
+            "name": "Number",
+            "object": 0,
+            "optional": true
+          },
+          {
+            "data_type": "String",
+            "default": {
+              "String": ""
+            },
+            "id": 17,
+            "multiple": true,
+            "name": "MultiString",
+            "object": 0,
+            "optional": false
+          },
+          {
+            "data_type": "Integer",
+            "default": {
+              "Integer": 0
+            },
+            "id": 7,
+            "multiple": false,
+            "name": "page",
+            "object": 6,
+            "optional": true
+          },
+          {
+            "data_type": "String",
+            "default": {
+              "String": ""
+            },
+            "id": 18,
+            "multiple": true,
+            "name": "OptiMultiString",
+            "object": 0,
+            "optional": true
+          },
+          {
+            "data_type": "Boolean",
+            "default": {
+              "Boolean": false
+            },
+            "id": 14,
+            "multiple": false,
+            "name": "Bool",
+            "object": 0,
+            "optional": false
+          },
+          {
+            "data_type": "String",
+            "default": {
+              "String": ""
+            },
+            "id": 15,
+            "multiple": false,
+            "name": "String",
+            "object": 0,
+            "optional": false
+          },
+          {
+            "data_type": "Decimal",
+            "default": {
+              "Decimal": 0.0
+            },
+            "id": 16,
+            "multiple": false,
+            "name": "Float",
+            "object": 0,
+            "optional": false
+          },
+          {
+            "data_type": "String",
+            "default": {
+              "String": ""
+            },
+            "id": 10,
+            "multiple": false,
+            "name": "qty",
+            "object": 9,
+            "optional": true
+          }
+        ],
+        "rel_models": [
+          {
+            "id": 6,
+            "multiple": true,
+            "name": "book reference",
+            "object": 0,
+            "optional": true,
+            "reciprocal_name": "recipes",
+            "related": 1
+          },
+          {
+            "id": 8,
+            "multiple": true,
+            "name": "related recipe",
+            "object": 0,
+            "optional": true,
+            "reciprocal_name": "related recipe",
+            "related": 0
+          },
+          {
+            "id": 9,
+            "multiple": true,
+            "name": "ingredient",
+            "object": 0,
+            "optional": true,
+            "reciprocal_name": "recipes",
+            "related": 2
+          }
+        ]
+      },
+
+      "object": {
+        "id": 19,
+        "model": 0,
+        "name": "Custard with lemon",
+        "values": {
+          "14": [{
+            "id": 25,
+            "object": 19,
+            "value": {
+              "Boolean": true
+            }
+          }],
+          "17": [{
+            "id": 21,
+            "object": 19,
+            "value": {
+              "String": "Bla"
+            }
+          }, {
+            "id": 22,
+            "object": 19,
+            "value": {
+              "String": "Ble"
+            }
+          }, {
+            "id": 23,
+            "object": 19,
+            "value": {
+              "String": "Bli"
+            }
+          }],
+          "15": [{
+            "id": 26,
+            "object": 19,
+            "value": {
+              "String": "Bla"
+            }
+          }],
+          "16": [{
+            "id": 27,
+            "object": 19,
+            "value": {
+              "Decimal": 15.6
+            }
+          }],
+          "13": [{
+            "id": 20,
+            "object": 19,
+            "value": {
+              "Integer": 15
+            }
+          }],
+          "18": [{
+            "id": 24,
+            "object": 19,
+            "value": {
+              "String": "sdfsfsdfsdf"
+            }
+          }]
+        },
+        "relations": {
+          "6": [],
+          "8": [],
+          "9": [
+            {
+              "id": 28,
+              "object": 19,
+              "model": 9,
+              "related": 11,
+              "values": {
+                "10": [{
+                  "id": 29,
+                  "object": 28,
+                  // model:10
+                  "value": {
+                    "String": "1"
+                  }
+                }],
+              }
+            }, {
+              "id": 30,
+              "object": 19,
+              "model": 9,
+              "related": 12,
+              "values": {
+                "10": [{
+                  "id": 31,
+                  "object": 30,
+                  // model:10
+                  "value": {
+                    "String": "2"
+                  }
+                }],
+              }
+            }
+          ],
+        },
+      }
+    })
+  });
+</script>
+</body>
+</html>