wip new UI with spectre

master
Ondřej Hruška 3 years ago
parent 3997381748
commit 4a51f7d3c2
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 1
      Cargo.toml
  2. 19
      yopa-test/Cargo.toml
  3. 120
      yopa-test/src/main.rs
  4. 18
      yopa-web/resources/src/components/EditObjectForm.vue
  5. 58
      yopa-web/resources/src/components/EditPropertyField.vue
  6. 45
      yopa-web/resources/src/components/EditRelationForm.vue
  7. 4
      yopa-web/resources/src/components/PropertyField.vue
  8. 5
      yopa-web/resources/src/components/value/BooleanValue.vue
  9. 2
      yopa-web/resources/src/components/value/DecimalValue.vue
  10. 2
      yopa-web/resources/src/components/value/IntegerValue.vue
  11. 2
      yopa-web/resources/src/components/value/StringValue.vue
  12. 8
      yopa-web/resources/src/main.js
  13. 21
      yopa-web/resources/src/style/_icons-extra.scss
  14. 27
      yopa-web/resources/src/style/_spectre-patches.scss
  15. 15
      yopa-web/resources/src/style/app.scss
  16. 21
      yopa-web/resources/src/style/spectre/LICENSE
  17. 38
      yopa-web/resources/src/style/spectre/src/_accordions.scss
  18. 20
      yopa-web/resources/src/style/spectre/src/_animations.scss
  19. 43
      yopa-web/resources/src/style/spectre/src/_asian.scss
  20. 47
      yopa-web/resources/src/style/spectre/src/_autocomplete.scss
  21. 77
      yopa-web/resources/src/style/spectre/src/_avatars.scss
  22. 60
      yopa-web/resources/src/style/spectre/src/_badges.scss
  23. 71
      yopa-web/resources/src/style/spectre/src/_bars.scss
  24. 44
      yopa-web/resources/src/style/spectre/src/_base.scss
  25. 29
      yopa-web/resources/src/style/spectre/src/_breadcrumbs.scss
  26. 193
      yopa-web/resources/src/style/spectre/src/_buttons.scss
  27. 222
      yopa-web/resources/src/style/spectre/src/_calendars.scss
  28. 43
      yopa-web/resources/src/style/spectre/src/_cards.scss
  29. 136
      yopa-web/resources/src/style/spectre/src/_carousels.scss
  30. 33
      yopa-web/resources/src/style/spectre/src/_chips.scss
  31. 31
      yopa-web/resources/src/style/spectre/src/_codes.scss
  32. 116
      yopa-web/resources/src/style/spectre/src/_comparison-sliders.scss
  33. 36
      yopa-web/resources/src/style/spectre/src/_dropdowns.scss
  34. 21
      yopa-web/resources/src/style/spectre/src/_empty.scss
  35. 37
      yopa-web/resources/src/style/spectre/src/_filters.scss
  36. 555
      yopa-web/resources/src/style/spectre/src/_forms.scss
  37. 22
      yopa-web/resources/src/style/spectre/src/_hero.scss
  38. 5
      yopa-web/resources/src/style/spectre/src/_icons.scss
  39. 34
      yopa-web/resources/src/style/spectre/src/_labels.scss
  40. 446
      yopa-web/resources/src/style/spectre/src/_layout.scss
  41. 75
      yopa-web/resources/src/style/spectre/src/_media.scss
  42. 66
      yopa-web/resources/src/style/spectre/src/_menus.scss
  43. 57
      yopa-web/resources/src/style/spectre/src/_meters.scss
  44. 10
      yopa-web/resources/src/style/spectre/src/_mixins.scss
  45. 87
      yopa-web/resources/src/style/spectre/src/_modals.scss
  46. 28
      yopa-web/resources/src/style/spectre/src/_navbar.scss
  47. 34
      yopa-web/resources/src/style/spectre/src/_navs.scss
  48. 446
      yopa-web/resources/src/style/spectre/src/_normalize.scss
  49. 95
      yopa-web/resources/src/style/spectre/src/_off-canvas.scss
  50. 60
      yopa-web/resources/src/style/spectre/src/_pagination.scss
  51. 23
      yopa-web/resources/src/style/spectre/src/_panels.scss
  52. 135
      yopa-web/resources/src/style/spectre/src/_parallax.scss
  53. 65
      yopa-web/resources/src/style/spectre/src/_popovers.scss
  54. 45
      yopa-web/resources/src/style/spectre/src/_progress.scss
  55. 99
      yopa-web/resources/src/style/spectre/src/_sliders.scss
  56. 71
      yopa-web/resources/src/style/spectre/src/_steps.scss
  57. 57
      yopa-web/resources/src/style/spectre/src/_tables.scss
  58. 66
      yopa-web/resources/src/style/spectre/src/_tabs.scss
  59. 38
      yopa-web/resources/src/style/spectre/src/_tiles.scss
  60. 56
      yopa-web/resources/src/style/spectre/src/_timelines.scss
  61. 48
      yopa-web/resources/src/style/spectre/src/_toasts.scss
  62. 79
      yopa-web/resources/src/style/spectre/src/_tooltips.scss
  63. 129
      yopa-web/resources/src/style/spectre/src/_typography.scss
  64. 8
      yopa-web/resources/src/style/spectre/src/_utilities.scss
  65. 117
      yopa-web/resources/src/style/spectre/src/_variables.scss
  66. 34
      yopa-web/resources/src/style/spectre/src/_viewer-360.scss
  67. 315
      yopa-web/resources/src/style/spectre/src/icons/_icons-action.scss
  68. 54
      yopa-web/resources/src/style/spectre/src/icons/_icons-core.scss
  69. 128
      yopa-web/resources/src/style/spectre/src/icons/_icons-navigation.scss
  70. 161
      yopa-web/resources/src/style/spectre/src/icons/_icons-object.scss
  71. 6
      yopa-web/resources/src/style/spectre/src/mixins/_avatar.scss
  72. 54
      yopa-web/resources/src/style/spectre/src/mixins/_button.scss
  73. 8
      yopa-web/resources/src/style/spectre/src/mixins/_clearfix.scss
  74. 27
      yopa-web/resources/src/style/spectre/src/mixins/_color.scss
  75. 11
      yopa-web/resources/src/style/spectre/src/mixins/_label.scss
  76. 65
      yopa-web/resources/src/style/spectre/src/mixins/_position.scss
  77. 9
      yopa-web/resources/src/style/spectre/src/mixins/_shadow.scss
  78. 6
      yopa-web/resources/src/style/spectre/src/mixins/_text.scss
  79. 5
      yopa-web/resources/src/style/spectre/src/mixins/_toast.scss
  80. 18
      yopa-web/resources/src/style/spectre/src/spectre-exp.scss
  81. 10
      yopa-web/resources/src/style/spectre/src/spectre-icons.scss
  82. 49
      yopa-web/resources/src/style/spectre/src/spectre.scss
  83. 31
      yopa-web/resources/src/style/spectre/src/utilities/_colors.scss
  84. 24
      yopa-web/resources/src/style/spectre/src/utilities/_cursors.scss
  85. 44
      yopa-web/resources/src/style/spectre/src/utilities/_display.scss
  86. 50
      yopa-web/resources/src/style/spectre/src/utilities/_divider.scss
  87. 37
      yopa-web/resources/src/style/spectre/src/utilities/_loading.scss
  88. 54
      yopa-web/resources/src/style/spectre/src/utilities/_position.scss
  89. 8
      yopa-web/resources/src/style/spectre/src/utilities/_shapes.scss
  90. 76
      yopa-web/resources/src/style/spectre/src/utilities/_text.scss
  91. 10412
      yopa-web/resources/static/bundle.js
  92. 2
      yopa-web/resources/static/bundle.js.map
  93. 4241
      yopa-web/resources/static/style.css
  94. 270
      yopa-web/resources/static/test_form.html
  95. 286
      yopa-web/resources/test/edit_object.html

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

@ -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"

@ -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(())
}

@ -134,13 +134,21 @@ export default {
</script> </script>
<template> <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> <edit-property v-for="(property, pi) in properties" :model="property" :values="values[property.id]" :key="pi"></edit-property>
</table> </div>
<div v-if="haveRelations"> <div v-if="haveRelations">
<h3>Relations</h3> <h3>Relations</h3>

@ -19,7 +19,7 @@ export default {
}); });
Vue.nextTick(() => { Vue.nextTick(() => {
this.fieldRefs[this.values.length-1].focus(); this.fieldRefs[this.values.length - 1].focus();
}) })
}, },
removeValue(vi) { removeValue(vi) {
@ -38,25 +38,39 @@ export default {
</script> </script>
<template> <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> </template>

@ -104,22 +104,35 @@ export default {
</style> </style>
<template> <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> </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> </template>

@ -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> <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> <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> <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> </td>
</tr> </tr>
<tr v-if="values.length > 0 && model.multiple"> <tr v-if="values.length > 0 && model.multiple">
<td> <td>
<a href="#" @click="addValue">Add</a> <a class="button" @click="addValue">Add</a>
</td> </td>
</tr> </tr>
</template> </template>

@ -27,5 +27,8 @@ export default {
</script> </script>
<template> <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> </template>

@ -27,5 +27,5 @@ export default {
</script> </script>
<template> <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> </template>

@ -27,5 +27,5 @@ export default {
</script> </script>
<template> <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> </template>

@ -27,5 +27,5 @@ export default {
</script> </script>
<template> <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> </template>

@ -2,10 +2,10 @@ import * as Vue from "vue";
import './style/app.scss'; 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 PropertyField from "./components/PropertyField.vue";
import NewObjectForm from "./components/NewObjectForm.vue"; import NewObjectForm from "./components/NewObjectForm.vue";

@ -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;
}
}

@ -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%);
}
}

@ -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 { .EditForm th {
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
@ -8,3 +15,9 @@
label { label {
cursor: pointer; cursor: pointer;
} }
*/
//.navbar-brand {
// font-size: 120%;
// font-weight: bold;
//}

@ -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.

@ -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;
}
}

@ -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);
}
}

@ -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;
}
}

@ -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;
}
}
}

@ -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;
}
}

@ -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;
}
}
}

@ -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;
}
}
}

@ -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;
}
}

@ -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;
}
}
}
}

@ -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;
}
}
}

@ -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;
}
}
}

@ -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;
}
}
}
}

@ -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%);
}
}

@ -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);
}
}

@ -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%;
}
}

@ -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;
}
}

@ -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;
}
}
}

@ -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;
}
}

@ -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;
}
}
}
}

@ -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;
}

@ -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;
}
}

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

@ -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);
}
}

@ -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;
}
}

@ -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;
}
}

@ -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;
}
}
}

@ -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;
}
}

@ -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";

@ -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;
}
}

@ -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;
}
}

@ -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;
}
}

@ -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;
}

@ -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;
}
}
}
}

@ -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;
}
}
}

@ -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;
}
}

@ -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);
}
}
}
}

@ -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;
}
}

@ -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;
}
}

@ -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;
}
}

@ -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;
}
}
}
}
}
}

@ -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;
}
}

@ -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;
}
}
}

@ -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;
}
}
}

@ -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;
}
}
}
}
}

@ -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;
}
}
}

@ -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%);
}
}
}
}

@ -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;
}
}

@ -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";

@ -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;

@ -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;
}
}

@ -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;
}
}

@ -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%;
}
}

@ -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;
}
}

@ -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;
}
}

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

@ -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;
}
}
}

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

@ -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%);
}
}
}

@ -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;
}

@ -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;
}
}

@ -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);
}

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

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

@ -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";

@ -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";

@ -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";

@ -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);

@ -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;
}

@ -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;
}

@ -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%);
}
}

@ -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;
}
}
}

@ -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);

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

@ -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;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

@ -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>

@ -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>
Loading…
Cancel
Save