init

public/js/main.js

@@ -0,0 +1,242 @@
+const gen_id = (length)=>{
+    var result           = '';
+    const characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const len = characters.length;
+    for (let i = 0; i < length; i++ ) {
+      result += characters.charAt(Math.floor(Math.random() * len));
+   }
+   return result;
+}
+
+const query_nominatim = (q,f)=>{
+    const ENDPOINT = 'https://nominatim.openstreetmap.org/';
+    const FORMAT = 'jsonv2';
+    return axios.get(ENDPOINT, {
+        params: {
+          format: FORMAT,
+          q:q,
+        },
+    }).then(res=>res.data).then(res=>res.filter(f));
+}
+
+const query_flight = (q)=>{
+    const ENDPOINT = '/api/flight/'+q;
+    const FORMAT = '-';
+    return axios.get(ENDPOINT).then(res=>res.data);
+}
+
+const is_restauration_type = (t)=>{
+    const arr = ["restaurant", "cafe", "pub", "bar", "fast_food", "food_court"];
+    return arr.indexOf(t)!=-1;
+}
+
+const is_attraction_type = (item)=>{
+    const arr = ["tourism"];
+    return arr.indexOf(item.category)!=-1;
+}
+
+const icon_type = (item)=>{
+    let t = item.type
+    const arr = ["restaurant", "cafe", "pub", "bar", "fast_food", "food_court"];
+    if(arr.indexOf(t)!=-1){
+        return 'utensils';
+    }else if(t=='hotel'){
+        return 'bed';
+    }else if(t=='museum'){
+        return 'landmark';
+    }else if(t=='peak'){
+        return 'mountain';
+    }else if(t=='parking'){
+        return 'parking';
+    }else if(t=='water' || t=='river'){
+        return 'water';
+    }else if(t=='community_centre'){
+        return 'building';
+    }else if(t=='attraction'){
+        return 'landmark';
+    }else if(t=='information'){
+        return 'landmark';
+    }else if(t=='bridge'){
+        return 'archway';
+    }else if(t=='a'){
+        return '';
+    }else if(t=='a'){
+        return '';
+    }else{
+        console.log(item.category, item.type);
+        return 'question';
+    }
+}
+
+
+Vue.component('l-map', window.Vue2Leaflet.LMap);
+Vue.component('l-tile-layer', window.Vue2Leaflet.LTileLayer);
+Vue.component('l-marker', window.Vue2Leaflet.LMarker);
+Vue.component('l-icon', window.Vue2Leaflet.LIcon);
+Vue.component('l-popup', window.Vue2Leaflet.LPopup);
+Vue.component('l-tooltip', window.Vue2Leaflet.LTooltip);
+Vue.component('l-control-scale', window.Vue2Leaflet.LControlScale);
+Vue.component('l-draggable', window.vuedraggable);
+Vue.use(window.VueTextareaAutosize.install)
+
+Vue.component('multiselect', window.VueMultiselect.default)
+
+const app = new Vue({
+    el: '#app',
+    data: {
+        journey_id : window.location.pathname.slice(1) || gen_id(16),
+        journey_step: window.location.hash.slice(1)==""?-1:parseInt(window.location.hash.slice(1)),
+        journey_step_data: {day:-1, section:-1},
+        journey_data : {
+            name: "New Journey",
+            main:[],
+            step_title:[],
+        },
+        query:{hotel:[],flight:[],nominatim:[]},
+        querying:{hotel:false,flight:false,place:false,food:false},
+        impexp:"",
+        activities_tmp:[],
+    },
+    methods: {
+        start_journey: function(event){
+            window.location.href = '/'+this.journey_id;
+        },
+        add_section: function(event){
+            if(this.journey_data.main===undefined) this.journey_data.main=[];
+            this.journey_data.main.push({map:{zoom:2}, hotel:{latlon:[0,0]},places:{restaurants:[],places:[]}});
+        },
+        next_step: function(){
+            this.journey_step+=1;
+            this.journey_step_data = this.step_convert(this.journey_step);
+            this.activities_tmp = this.journey_data.main[this.journey_step_data.section].places.activities.filter(e=>e.step==this.journey_step)
+            window.location.hash = '#' + this.journey_step;
+
+        },
+        first_step: function(){
+            this.journey_step=-1;
+            this.journey_step_data = {day:-1, section:-1};
+            this.activities_tmp = [];
+            window.location.hash = '';
+        },
+        step_convert: function(step){
+            let steps_left = step+1;
+            for(let e in this.journey_data.main){
+                if(this.journey_data.main[e].dateRange && (this.journey_data.main[e].dateRange[0]-(new Date(0))) != 0){
+                    let cd = (this.journey_data.main[e].dateRange[1]-this.journey_data.main[e].dateRange[0])/(1000*60*60*24);
+                    if(cd>=steps_left){
+                        return {day: steps_left, section:e,start: (steps_left==1), end: (steps_left==cd)};
+                    }else{
+                        steps_left -= cd;
+                    }
+                }else{
+                    steps_left -= 1;
+                }
+                if(steps_left==0){
+                        return {day:0,section:e, start:true,end:true};
+                }
+            }
+            return {day:-1, section:-1};
+        },
+        rm_section: function(idx){
+            this.journey_data.main.splice(idx,1);
+        },
+        search_nominatim: function(txt,f){
+            if(txt==""){
+                this.query.nominatim=[];
+                return Promise.resolve([]);
+            }
+            return query_nominatim(txt,f)
+            .then((results) =>{
+                results.forEach(r=>r.latlon=[parseFloat(r.lat),parseFloat(r.lon)])
+                this.query.nominatim=results;
+            });
+        },
+        search_flight: function(txt){
+            if(txt=="") return;
+            this.querying.flight=true;
+            query_flight(txt.replace(" ", ""))
+            .then((results) =>{
+                if(results.results==""){
+                    this.query.flight=[];this.querying.flight=false;return;
+                }
+                this.query.flight=results.results;
+                this.querying.flight=false;
+            });
+    
+        },
+        generate_icon: function(item){
+            return L.AwesomeMarkers.icon(
+                {icon: icon_type(item) || 'star',  prefix: 'fa',markerColor: item.color || 'blue'}
+            ).createIcon().outerHTML
+        },
+
+        save_data: function(){
+            this.impexp = window.btoa(JSON.stringify(this.journey_data));
+            axios.post('/api/'+this.journey_id, this.journey_data).then(response => {
+              console.log("Saved...")
+            }).catch(error => {
+              console.warn('Error! Could not reach the API.')
+            })
+        },
+        import_data:function(){
+            this.journey_data = JSON.parse(window.atob(this.impexp));
+        },
+        export_data:function(){
+            this.impexp = window.btoa(JSON.stringify(this.journey_data));
+        },
+        filter_selected:function(list,step){
+            return list.filter(e=>(step?(e.step==this.journey_step):(e.step>=0)))
+        },
+        filter_unselected:function(list){
+            return list.filter(e=>(e.step==undefined || e.step<0))
+        },
+        remove_item:function(list,idx){
+            list[idx].step=-1;
+            list.splice(idx, 1);
+        },
+        log:function(e){console.log(e)},
+    },
+    created: function () {
+        axios.get('/api/'+this.journey_id).then(response =>{
+            app.journey_data = response.data;
+            for(let e of app.journey_data.main){
+                if(e.dateRange && e.dateRange.length===2){
+                    e.dateRange[0]= new Date(e.dateRange[0]);
+                    e.dateRange[1]= new Date(e.dateRange[1]);
+                }
+            }
+            this.journey_step_data = this.step_convert(this.journey_step);
+            this.activities_tmp = this.journey_data.main[this.journey_step_data.section].places.activities.filter(e=>e.step==this.journey_step);
+        });
+        this.debounceSave = _.debounce(this.save_data, 500)
+        this.debounceSearch = {"hotel":_.debounce((q)=>{this.querying.hotel=true;this.search_nominatim(q,(r)=>(r.type=="hotel")).then((r)=>{this.querying.hotel=false});}, 500),
+                               "restaurants":_.debounce((q)=>{this.querying.food=true;this.search_nominatim(q,(r)=>(is_restauration_type(r.type))).then((r)=>{this.querying.food=false});}, 500),
+                               "places":_.debounce((q)=>{this.querying.place=true;this.search_nominatim(q,(r)=>(true)).then((r)=>{this.querying.place=false});}, 500),
+                               "other":_.debounce((q)=>{this.querying.any=true;this.search_nominatim(q,(r)=>(true)).then((r)=>{this.querying.any=false});}, 500),
+                               "flight":_.debounce((q)=>this.search_flight(q), 500)
+                           }
+    },
+    watch: {
+        journey_data: {
+            handler:function (ndata, odata){ 
+                this.debounceSave()
+                if(ndata.main.length == odata.main.length){
+                    for(let d in ndata.main){
+                        if(ndata.main[d].hotel != odata.main[d].hotel){
+                            if(ndata.main[d].hotel.latlon){
+                                this.journey_data.main[d].map.center=ndata.main[d].hotel.latlon;
+                            }
+                        }
+                    }
+                }
+            },
+            deep: true,
+        },
+        activities_tmp:{
+            handler:function (nd,od){
+                nd.forEach(e=>e.step=this.journey_step);
+            },
+            deep: false,
+        },
+    },
+})

public/scss/_settings.scss

@@ -0,0 +1,261 @@
+/**
+ *  SETTINGS
+ */
+
+$enable-grid-classes: true !default; // generate grid classes
+$enable-reset-defaults: true !default; // reset default browser values
+
+// colors
+$c-white: #fff !default;
+$c-black: #000 !default;
+$c-success: #4caf50 !default;
+$c-info: #5bc0de !default;
+$c-warning: #f0ad4e !default;
+$c-error: #e74c3c !default;
+$c-gray: #969da6 !default;
+$c-gray-light: #eceff1 !default;
+
+$c-primary: #03a9f4 !default;
+$c-secondary: #e91e63 !default;
+$c-dark: #18232f !default;
+$c-light: $c-gray-light !default;
+
+$c-text: #272727 !default;
+$c-link: $c-primary !default;
+$c-link-hover: rgba($c-primary, .8) !default;
+
+$bgc-body: $c-white !default;
+
+$c-map: (
+  'primary':              $c-primary,
+  'dark':                 $c-dark,
+  'secondary':            $c-secondary,
+  'white':                $c-white,
+  'success':              $c-success,
+  'info':                 $c-info,
+  'warning':              $c-warning,
+  'error':                $c-error,
+  'gray':                 $c-gray,
+  'gray-light':           $c-gray-light
+) !default;
+
+// Social colors
+$c-fb: rgb(59, 89, 182) !default;
+$c-tw: rgb(64, 153, 255) !default;
+$c-googleplus: rgb(215, 61, 50) !default;
+$c-pinterest: rgb(203, 32, 39) !default;
+$c-skype: rgb(18, 165, 244) !default;
+$c-spotify: rgb(129, 183, 26) !default;
+$c-instagram: #4e433c !default;
+$c-tumblr: #2b4964 !default;
+$c-vimeo: #86b32d !default;
+$c-soundcloud: #f76600 !default;
+$c-youtube: #ff3333 !default;
+$c-linkedin: #4875b4 !default;
+$c-flickr: #fe0883 !default;
+$c-foursquare: #8fd400 !default;
+
+// Shadows
+$bxsh-base:  0 0 5px rgba(0, 0, 0, .2) !default;
+$bxsh-medium:  $bxsh-base !default;
+
+// Typography
+$fw-light: 300 !default;
+$fw-normal: 400 !default;
+$fw-bold: 600 !default;
+$fw-headings: $fw-light !default;
+
+$ff-base: 'IBM Plex Sans', sans-serif !default;
+$fw-base: 400 !default;
+$fz-base: 16px !default;
+$lh-base: 1.5em !default;
+
+$fz-huge: 36px !default;
+$fz-big: 24px !default;
+$fz-medium: $fz-base !default;
+$fz-small: 12px !default;
+
+$lh-huge: 1.3em !default;
+$lh-big: 1.3em !default;
+$lh-medium: $lh-base !default;
+$lh-small: 1.3em !default;
+
+// Body
+$c-body: $c-text !default;
+$ff-body: $ff-base !default;
+$fz-body: $fz-base !default;
+$fw-body: $fw-base !default;
+$lh-body: $lh-base !default;
+
+// Border
+$bdc-base: #d5d9db !default;
+$bd-medium: 1px solid $bdc-base !default;
+$bdr-base: 3px !default;
+$bdr-medium: $bdr-base !default;
+$bdr-rounded-corners: 5px !default;
+
+// Defaults (HTML elements)
+$fw-strong: $fw-bold !default;
+$mb-p: 1.5em !default;
+$mb-ul: 1em !default;
+$mb-li: .5em !default;
+
+// Margin
+$m-xsmall: 4px !default;
+$m-small: 8px !default;
+$m-medium: 16px !default;
+$m-big: 36px !default;
+$m-huge: 48px !default;
+
+// Padding
+$p-small: 4px !default;
+$p-medium: 8px !default;
+$p-big: 16px !default;
+$p-huge: 36px !default;
+
+// Layout
+$bgc-container: transparent !default;
+$mwi-container: 1380px !default;
+$mwi-container-medium: 944px !default;
+$mwi-container-small: 400px !default;
+$w-gutter: 24px !default;
+
+// Grid
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+$grid-columns: 12 !default;
+$grid-gutter-width: $w-gutter !default;
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px
+) !default;
+
+/**
+ *  COMPONENTS
+ */
+
+// Badges
+$c-badge: $c-text !default;
+$c-badge-colored: $c-white !default;
+$bg-badge: $c-light !default;
+$bdr-badge: $bdr-medium !default;
+$lh-badge: 1.2em !default;
+$p-badge: $p-medium $p-big !default;
+$fz-badge-big: 1.3em !default;
+$fz-badge-small: .7em !default;
+$badges-color-map: (
+  primary:              $c-primary,
+  secondary:            $c-secondary,
+  dark:                 $c-dark,
+  light:                $c-gray,
+  success:              $c-success,
+  error:                $c-error,
+  warning:              $c-warning
+) !default;
+
+// Buttons
+$bg-button: $c-primary !default;
+$c-button: $c-white !default;
+$c-button-transparent: $c-primary !default;
+$c-button-outlined: $c-primary !default;
+$bdc-button: $bg-button !default;
+$bd-button: 1px solid $bdc-button !default;
+$bdr-button: 200px !default;
+$ff-button: $ff-body !default;
+$fz-button: $fz-medium !default;
+$fw-button: $fw-bold !default;
+$lh-button: $lh-body !default;
+$m-button: 0 $m-small $m-medium $m-small !default;
+$p-button: $p-medium $p-big !default;
+$tt-button: uppercase !default;
+
+$fz-button-big: $fz-big !default;
+$p-button-big: $p-big $p-huge !default;
+
+$fz-button-small: $fz-small !default;
+$p-button-small: $p-small $p-big !default;
+
+// Forms
+$bgc-form: $c-light !default;
+$c-form: $c-text !default;
+$bdr-form: $bdr-medium !default;
+$bd-form: $bd-medium !default;
+$fz-form: $fz-body !default;
+$bgc-form-focus: lighten($bgc-form, 5%) !default;
+$trs-form: background-color .2s ease-in-out !default;
+$c-form-placeholder: $c-gray !default;
+$mih-form-textarea: 120px !default;
+$p-form: $p-medium $p-big !default;
+$size-form-input-icon: 16px !default;
+$c-form-input-icon: $c-gray !default;
+$bd-form-error: 1px solid $c-error !default;
+$bgc-form-error: $bgc-form !default;
+
+// Loading bar
+$h-loading-bar: 6px !default;
+$w-loading-bar: 300px !default;
+$z-loading-bar: 1000 !default;
+
+// Loading spinner
+$bg-loading-spinner: $c-secondary !default;
+$size-loading-spinner-inner: 9px !default;
+$size-loading-spinner: 30px !default;
+$z-loading-spinner: 1000 !default;
+
+// Notification
+$bdr-notification: $bdr-medium !default;
+$c-notification: $c-white !default;
+$mb-notification: $m-big !default;
+$p-notification: $p-big !default;
+
+// Paginator
+$mr-paginator-item: $m-xsmall !default;
+$bdr-paginator-item: $bdr-medium !default;
+$bg-paginator-item: $c-light !default;
+$c-paginator-item: $c-text !default;
+$bg-paginator-item-active: $c-primary !default;
+$c-paginator-item-active: $c-white !default;
+$p-paginator-item: $p-medium $p-big !default;
+
+// Table
+$bgc-table-header: $bgc-body !default;
+$bgc-table: $c-light !default;
+$bd-table: $bd-medium !default;
+$c-table-heading: $c-gray !default;
+$c-table-text: $c-text !default;
+$fw-table-heading: normal !default;
+$mwi-table: 100% !default;
+$p-table-cell: $p-medium !default;
+$p-table-heading: $p-medium !default;
+$w-table: 100% !default;
+$fz-table-heading: $fz-small !default;
+
+// Tabs
+$bdb-tabs-item-selected: 3px solid $c-primary !default;
+$bdb-tabs-item: 3px solid transparent !default;
+$bdb-tabs: $bd-medium !default;
+$c-tabs-item-hover: $c-primary !default;
+$c-tabs-item-selected: $c-primary !default;
+$c-tabs-item: $c-gray !default;
+$m-tabs-item: 0 $m-medium 0 0 !default;
+$miw-tabs-item: 70px !default;
+$p-tabs-item: $p-big !default;
+
+// Tags
+$bg-tag-dot: $bgc-body !default;
+$bg-tag: $c-light !default;
+$bdr-tag: $bdr-medium 0 0 $bdr-medium !default;
+$c-tag: $c-text !default;
+$lh-tag: 16px !default;
+$m-tag: 0 $m-medium $m-medium 0 !default;
+$p-tag: $p-medium !default;
+$size-tag-dot: 5px !default;

public/scss/components/_badge.scss

@@ -0,0 +1,36 @@
+/**
+ *  BADGE
+ *
+ *  Markup:
+ *  -------
+ *
+ *  <ul>
+ *    <li class="badge badge--primary">Badge 1</li>
+ *    <li class="badge badge--secondary badge--big">Badge 1</li>
+ *  </ul>
+ *
+ */
+
+.badge {
+  background-color: $bg-badge;
+  border-radius:  $bdr-badge;
+  color: $c-badge;
+  display: inline-block;
+  line-height: $lh-badge;
+  padding: $p-badge;
+
+  &--big {
+    font-size:  $fz-badge-big;
+  }
+
+  &--small {
+    font-size:  $fz-badge-small;
+  }
+
+  @each $type, $color in $badges-color-map {
+    &--#{$type} {
+      background-color: $color;
+      color: $c-badge-colored;
+    }
+  }
+}

public/scss/components/_buttons.scss

@@ -0,0 +1,149 @@
+/**
+ *  BUTTON
+ *
+ *  Markup:
+ *  -------
+ *
+ *  <button class="button">Default</button>
+ *  <button class="button button--big">Button big</button>
+ *  <button class="button button--secondary">Button secondary</button>
+ *
+ */
+
+
+// reset default buttons
+button {
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.button {
+  background-color: $bg-button;
+  border: 0;
+  border-radius: $bdr-button;
+  color: $c-button;
+  display: inline-block;
+  font-family: $ff-button;
+  font-size: $fz-button;
+  font-weight: $fw-button;
+  line-height: $lh-button;
+  margin: $m-button;
+  padding: $p-button;
+  text-align: center;
+  text-decoration: none;
+  text-transform: $tt-button;
+  transition: opacity .2s ease-in-out;
+  white-space: nowrap;
+
+  &:focus,
+  &:hover,
+  &:active {
+    color: $c-button;
+  }
+
+  &:hover {
+    background-color: rgba($c-primary, .8);
+    color: $c-white;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  &:active {
+    opacity: 1;
+  }
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  // sizes
+  &--big {
+    font-size: $fz-button-big;
+    padding: $p-button-big;
+  }
+
+  &--small {
+    font-size: $fz-button-small;
+    padding: $p-button-small;
+  }
+
+  &--mobileFull {
+    @include media-breakpoint-down(md) {
+      margin-left: 0;
+      margin-right: 0;
+      width: 100%;
+    }
+  }
+
+  // colors
+  &--secondary {
+    background-color: $c-secondary;
+    color: $c-white;
+
+    &:hover {
+      background-color: rgba($c-secondary, .8);
+      color: $c-white;
+    }
+  }
+
+  &--white {
+    background-color: $c-white;
+    color: $c-primary;
+
+    &:hover {
+      background-color: rgba($c-white, .8);
+      color: rgba($c-primary, .8);
+    }
+  }
+
+  &--green {
+    background-color: $c-success;
+    color: $c-white;
+
+    &:hover {
+      background-color: rgba($c-success, .8);
+      color: $c-white;
+    }
+  }
+
+  &--red {
+    background-color: $c-error;
+    color: $c-white;
+
+    &:hover {
+      background-color: rgba($c-error, .8);
+      color: $c-white;
+    }
+  }
+
+  &--transparent {
+    background-color: transparent;
+    color: $c-button-transparent;
+
+    &:active,
+    &:hover,
+    &:focus {
+      background-color: transparent;
+      color: rgba($c-button-transparent, .8);
+      opacity: .8;
+    }
+  }
+
+  &--outlined {
+    background-color: transparent;
+    border: $bd-medium;
+    color: $c-button-outlined;
+
+    &:active,
+    &:hover,
+    &:focus {
+      background-color: transparent;
+      color: rgba($c-button-outlined, .8);
+      opacity: .8;
+    }
+  }
+}

public/scss/components/_forms.scss

@@ -0,0 +1,398 @@
+/**
+ *  FORMS
+ *
+ *  Markup:
+ *  ---------
+ *  <div class="input input-fullWidth">
+ *    <input id="#" placeholder="#" type="text">
+ *  </div>
+ *
+ *  <div class="select select-fullWidth">
+ *    <select name="#" id="#">
+ *      <option>Option 1</option>
+ *      <option>Option 2</option>
+ *    </select>
+ *  </div>
+ *
+ *  <div class="textarea">
+ *    <textarea id="#"></textarea>
+ *  </div>
+ *
+ *  <div class="radio">
+ *    <input id="#" name="#" type="radio" value="">
+ *    <label for="#">Radio button</label>
+ *  </div>
+ *
+ *  <div class="checkbox">
+ *    <input id="#" name="#" type="checkbox" value="">
+ *    <label for="#">Checkbox</label>
+ *  </div>
+ */
+
+
+// prevent input default appearence on webkit
+input,
+textarea {
+  appearance: none;
+}
+
+label {
+  display: block;
+  font-weight: normal;
+}
+
+// Disable webkit background color
+input:-webkit-autofill {
+  box-shadow: 0 0 0 1000px $bgc-form inset;
+}
+
+// Common styles
+.textarea,
+.input,
+.select {
+  border: $bd-form;
+  border-radius: $bdr-form;
+  box-shadow: none;
+  display: inline-block;
+  font-weight: normal;
+  margin-bottom: 20px;
+  overflow: hidden;
+
+  :focus {
+    outline: none;
+  }
+
+  &.has-error {
+    background: $bgc-form-error;
+    border: $bd-form-error;
+    margin-bottom: 0; // we should display an error message
+  }
+}
+
+.select {
+  background-color: $bgc-form;
+  display: inline-block;
+  margin-right: $m-medium;
+  position: relative;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &-fullWidth {
+    display: block;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+
+  select {
+    appearance: none;
+    background-color: transparent;
+    border: 0;
+    border-radius: 0;
+    color: $c-form;
+    display: block;
+    font-size: $fz-form;
+    line-height: $lh-medium;
+    margin: 0;
+    padding: $p-form;
+    padding-right: 30px;
+    transition: $trs-form;
+    width: 100%;
+
+    &:active,
+    &:focus {
+      background-color: $bgc-form-focus;
+      border: 0;
+      outline: none;
+    }
+
+    &::-ms-expand {
+      display: none;
+    }
+  }
+
+  &::after,
+  &::before {
+    background: $c-primary;
+    content: '';
+    display: block;
+    height: 2px;
+    margin-top: 2px;
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform-origin: 1px;
+    width: 10px;
+  }
+
+  &::after {
+    transform: rotate(-135deg);
+  }
+
+  &::before {
+    transform: rotate(-45deg);
+  }
+}
+
+// textarea
+.textarea {
+  background-color: $bgc-form;
+  padding: 0;
+
+  &-fullWidth {
+    display: block;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+
+  textarea {
+    background: transparent;
+    border: 0;
+    color: $c-form;
+    display: block;
+    font-family: $ff-body;
+    font-size: $fz-form;
+    line-height: $lh-medium;
+    margin: 0;
+    min-height: $mih-form-textarea;
+    padding: $p-form;
+    transition: $trs-form;
+    width: 100%;
+
+    &::placeholder {
+      color: $c-form-placeholder;
+    }
+
+    &:focus,
+    &:active {
+      background-color: $bgc-form-focus;
+      border: 0;
+      outline: none;
+    }
+  }
+}
+
+
+.checkbox {
+  margin-bottom: $m-small;
+  position: relative;
+
+  input[type='checkbox'] {
+    display: none;
+
+    &:checked + label::after {
+      animation: checkboxAndRadioAnimation .25s;
+      content: '';
+      transform: scale(1) rotate(45deg);
+    }
+
+    & + label {
+      display: block;
+      overflow: hidden;
+      padding-left: 30px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &::before {
+        background-color: $bgc-form;
+        border: $bd-form;
+        border-radius: $bdr-medium;
+        content: '';
+        display: inline-block;
+        height: 20px;
+        left: 0;
+        margin-top: -10px;
+        position: absolute;
+        top: 50%;
+        width: 20px;
+      }
+
+      &::after {
+        border-bottom: 3px solid $c-primary;
+        border-right: 3px solid $c-primary;
+        display: block;
+        height: 12px;
+        left: 11px;
+        margin-left: -4px;
+        margin-top: -7px;
+        position: absolute;
+        top: 50%;
+        width: 7px;
+        z-index: 1;
+      }
+    }
+  }
+}
+
+.radio {
+  margin-bottom: $m-small;
+  position: relative;
+
+  input[type='radio'] {
+    display: none;
+
+    &:checked + label::after {
+      animation: checkboxAndRadioAnimation .25s;
+      content: '';
+      transform: scale(1) rotate(45deg);
+    }
+
+    & + label {
+      display: block;
+      overflow: hidden;
+      padding-left: 30px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &::before {
+        background-color: $bgc-form;
+        border: $bd-form;
+        border-radius: 20px;
+        content: '';
+        display: inline-block;
+        height: 20px;
+        left: 0;
+        margin-top: -10px;
+        position: absolute;
+        top: 50%;
+        width: 20px;
+      }
+
+      &::after {
+        background-color: $c-primary;
+        border-radius: 20px;
+        display: block;
+        height: 10px;
+        left: 11px;
+        margin-left: -6px;
+        margin-top: -6px;
+        position: absolute;
+        top: 13px;
+        width: 10px;
+        z-index: 1;
+      }
+    }
+  }
+}
+
+@keyframes checkboxAndRadioAnimation {
+  0% {
+    transform: scale(0) rotate(45deg);
+  }
+
+  50% {
+    transform: scale(1.5) rotate(45deg);
+  }
+
+  100% {
+    transform: scale(1) rotate(45deg);
+  }
+}
+
+
+.input {
+  background-color: $bgc-form;
+  margin-right: 10px;
+  padding: 0;
+  position: relative;
+
+  :focus,
+  :active {
+    background-color: $bgc-form-focus;
+    border-radius: $bdr-form;
+  }
+
+  input {
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    color: $c-form;
+    font-size: $fz-form;
+    line-height: $lh-medium;
+    margin: 0;
+    outline: none;
+    padding: $p-form;
+    width: 100%;
+
+    &::placeholder {
+      color: $c-form-placeholder;
+    }
+  }
+
+  &-withIcon {
+    input {
+      padding-right: $size-form-input-icon * 2;
+    }
+  }
+
+  &-icon {
+    fill: $c-form-input-icon;
+    height: $size-form-input-icon;
+    margin-top: -$size-form-input-icon / 2;
+    position: absolute;
+    right: $m-medium;
+    top: 50%;
+    width: $size-form-input-icon;
+  }
+
+  // input variations
+  &-fullWidth {
+    display: block;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+
+/**
+ *  FORM COLLAPSED (items in row without gap between them)
+ *
+ *  Markup:
+ *  -------
+ *
+ *  <div class="formCollapsed">
+ *    <div class="input formCollapsed-item formCollapsed-itemPrimary">
+ *      <input id="name" placeholder="Klingon search" type="text" />
+ *    </div>
+ *    <div class="select formCollapsed-item">
+ *      <select name="country-code" id="country-code">
+ *        <option value="AO"> Angola</option>
+ *      </select>
+ *    </div>
+ *    <button class="formCollapsed-item button button-primary">
+ *      Search
+ *    </button>
+ *  </div>
+ **/
+
+.formCollapsed {
+  display: flex;
+  margin-bottom: 20px;
+
+  &-item {
+    border-radius: 0 !important;
+    margin: 0 !important;
+
+
+    &:first-child {
+      border-bottom-left-radius: $bdr-form !important;
+      border-top-left-radius: $bdr-form !important;
+    }
+
+    &:last-child {
+      border-bottom-right-radius: $bdr-form !important;
+      border-top-right-radius: $bdr-form !important;
+    }
+
+    &:not(:last-child) {
+      border-right: 0;
+    }
+
+    &Primary {
+      flex: 1;
+    }
+  }
+}

public/scss/components/_loading-bar.scss

@@ -0,0 +1,57 @@
+/**
+ *  LOADING BAR
+ *
+ *  Markup:
+ *  ---------
+ *  <div class="loadingBar"></div>
+ *
+ */
+
+.loadingBar {
+  height: $h-loading-bar;
+  left: 0;
+  overflow: hidden;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+  z-index: $z-loading-bar;
+
+  &::before {
+    animation: loading 2s linear infinite;
+    background-color: $c-primary;
+    content: '';
+    display: block;
+    height: $h-loading-bar;
+    left: -$w-loading-bar;
+    position: absolute;
+    width: $w-loading-bar;
+  }
+}
+
+@keyframes loading {
+  from {
+    left: -$w-loading-bar;
+    width: 30%;
+  }
+
+  50% {
+    width: 30%;
+  }
+
+  70% {
+    width: 70%;
+  }
+
+  80% {
+    left: 50%;
+  }
+
+  95% {
+    left: 120%;
+  }
+
+  to {
+    left: 100%;
+  }
+}

public/scss/components/_loading-spinner.scss

@@ -0,0 +1,139 @@
+/**
+ *  LOADING SPINNER
+ *
+ *  Markup:
+ *  ---------
+ *  <div class='loadingSpinner'>
+ *    <span class='loadingSpinner-inner'></span>
+ *    <span class='loadingSpinner-inner'></span>
+ *    <span class='loadingSpinner-inner'></span>
+ *    <span class='loadingSpinner-inner'></span>
+ *  </div>
+ *
+ */
+
+.loadingSpinner {
+  animation: rotateLoader 4s infinite;
+  animation-timing-function: ease-in-out;
+  display: block;
+  height: $size-loading-spinner;
+  left: 50%;
+  margin-left: -$size-loading-spinner / 2;
+  margin-top: -$size-loading-spinner / 2;
+  position: fixed;
+  top: 50%;
+  width: $size-loading-spinner;
+  z-index: $z-loading-spinner;
+
+  &-inner {
+    animation-timing-function: ease-in-out;
+    background-color: $bg-loading-spinner;
+    border-radius: 100%;
+    display: block;
+    height: $size-loading-spinner-inner;
+    position: absolute;
+    width: $size-loading-spinner-inner;
+
+    &:nth-child(1) {
+      animation: translateBall1 1s infinite;
+      left: 0;
+      top: 0;
+      transform: translate3d($size-loading-spinner-inner / 2, $size-loading-spinner-inner / 2, 0);
+    }
+
+    &:nth-child(2) {
+      animation: translateBall2 1s infinite;
+      right: 0;
+      top: 0;
+    }
+
+    &:nth-child(3) {
+      animation: translateBall3 1s infinite;
+      bottom: 0;
+      right: 0;
+    }
+
+    &:nth-child(4) {
+      animation: translateBall4 1s infinite;
+      bottom: 0;
+      left: 0;
+    }
+  }
+}
+
+@keyframes rotateLoader {
+  0% {
+    transform: rotate(0);
+  }
+
+  25% {
+    transform: rotate(90deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  75% {
+    transform: rotate(270deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes translateBall1 {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  50% {
+    transform: translate3d($size-loading-spinner-inner / 2, $size-loading-spinner-inner / 2, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes translateBall2 {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  50% {
+    transform: translate3d(-$size-loading-spinner-inner / 2, $size-loading-spinner-inner / 2, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes translateBall3 {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  50% {
+    transform: translate3d(-$size-loading-spinner-inner / 2, -$size-loading-spinner-inner / 2, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes translateBall4 {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  50% {
+    transform: translate3d($size-loading-spinner-inner / 2, -$size-loading-spinner-inner / 2, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}

public/scss/components/_notification.scss

@@ -0,0 +1,31 @@
+/**
+ *  NOTIFICATION
+ *
+ *  Markup:
+ *  -------
+ *
+ *  <div class="notification notification--sucess">Success notification</div>
+ *  <div class="notification notification--info">Success info</div>
+ *  <div class="notification notification--error">Success error</div>
+ *  <div class="notification notification--warning">Success warning</div>
+ *
+ */
+
+.notification {
+  border-radius: $bdr-notification;
+  color: $c-notification;
+  margin-bottom: $mb-notification;
+  padding: $p-notification;
+
+  p {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  @each $type, $color in $c-map {
+    &--#{$type} {
+      background-color: $color;
+    }
+  }
+}

public/scss/components/_paginator.scss

@@ -0,0 +1,45 @@
+/**
+ *  PAGINATOR
+ *
+ *  Markup:
+ *  -------
+ *
+ *  <ul class="paginator">
+ *    <li class="paginator-item">
+ *      <a href="#" class="paginator-itemLink">< Prev</a>
+ *    </li>
+ *    <li class="paginator-item">
+ *      <a href="#" class="paginator-itemLink">1</a>
+ *    </li>
+ *    <li class="paginator-item">
+ *      <a href="#" class="paginator-itemLink is-active">2</a>
+ *    </li>
+ *    <li class="paginator-item">
+ *      <a href="#" class="paginator-itemLink">3</a>
+ *    </li>
+ *    <li class="paginator-item">
+ *      <a href="#" class="paginator-itemLink">Next ></a>
+ *    </li>
+ *  </ul>
+ */
+
+.paginator {
+
+  &-item {
+    display: inline-block;
+    margin-right: $mr-paginator-item;
+
+    &Link {
+      background-color: $bg-paginator-item;
+      border-radius: $bdr-paginator-item;
+      display: block;
+      padding: $p-paginator-item;
+
+      &.is-active {
+        background-color: $bg-paginator-item-active;
+        color: $c-paginator-item-active;
+        cursor: default;
+      }
+    }
+  }
+}

public/scss/components/_table.scss

@@ -0,0 +1,123 @@
+/**
+ *  TABLE
+ *
+ *  Markup:
+ *  -------
+ *
+ *  <table class="table">
+ *    <tr>
+ *      <th>First column</th>
+ *      <th>Second column</th>
+ *      <th>Third column</th>
+ *    </tr>
+ *    <tr>
+ *      <td="First column">Blue</td>
+ *      <td="Second column">One</td>
+ *      <td="Third column">My life fades</td>
+ *    </tr>
+ *  </table>
+ *
+ */
+
+
+.table {
+  background-color: $bgc-table;
+  border: $bd-table;
+  border-collapse: collapse;
+  color: $c-table-text;
+  max-width: $mwi-table;
+  width: $w-table;
+
+  th,
+  td {
+    border-bottom: $bd-table;
+    padding:  $p-table-cell;
+    position: relative;
+  }
+
+  thead {
+    border-bottom: $bd-table;
+  }
+
+  th {
+    background-color: $bgc-table-header;
+    color: $c-table-heading;
+    font-size: $fz-table-heading;
+    font-weight: $fw-table-heading;
+    padding: $p-table-heading;
+    white-space: nowrap;
+  }
+}
+
+/**
+ *  TABLE RESPONSIVE
+ *
+ *  Markup:
+ *  -------
+ *
+ *  <table class="table table--responsive">
+ *    <tr>
+ *      <th>First column</th>
+ *      <th>Second column</th>
+ *      <th>Third column</th>
+ *    </tr>
+ *    <tr>
+ *      <td data-th="First column">Blue</td>
+ *      <td data-th="Second column">One</td>
+ *      <td data-th="Third column">My life fades</td>
+ *    </tr>
+ *    <tr>
+ *      <td data-th="First column">Green</td>
+ *      <td data-th="Second column">Two</td>
+ *      <td data-th="Third column">
+ *        when the world was powered by the black fuel... and the desert
+ *        sprouted great cities of pipe and steel.
+ *      </td>
+ *    </tr>
+ *    <tr>
+ *      <td data-th="First column">Yellow</td>
+ *      <td data-th="Second column">Three</td>
+ *      <td data-th="Third column">
+ *        A whirlwind of looting, a firestorm of fear.
+ *      </td>
+ *    </tr>
+ *  </table>
+ *
+ */
+
+.table--responsive {
+
+  th {
+    display: none;
+  }
+
+  td {
+    @include media-breakpoint-down(sm) {
+      border: 0;
+    }
+    display: block;
+
+    &::before {
+      @include media-breakpoint-up(sm) {
+        display: none;
+      }
+      color: $c-table-heading;
+      content: attr(data-th)': ';
+      display: block;
+      font-weight: normal;
+    }
+
+    &:first-child {
+      border-top: $bd-table;
+    }
+  }
+
+  th,
+  td {
+    @include media-breakpoint-up(sm) {
+      border-top: $bd-table;
+      display: table-cell;
+    }
+    text-align: left;
+  }
+}

public/scss/components/_tabs.scss

@@ -0,0 +1,37 @@
+/**
+ *  TABS
+ *
+ *  Markup:
+ *  -------
+ *
+ *  <div class="tabs">
+ *    <a href="#" title="#" class="tabs-item">[...]</a>
+ *    <a href="#" title="#" class="tabs-item is-selected">[...]</a>
+ *  </div>
+ *
+ */
+
+.tabs {
+  border-bottom: $bdb-tabs;
+  text-align: center;
+
+  &-item {
+    border-bottom: $bdb-tabs-item;
+    color: $c-tabs-item;
+    display: inline-block;
+    margin: $m-tabs-item;
+    min-width: $miw-tabs-item;
+    padding: $p-tabs-item;
+    position: relative;
+
+    &:hover {
+      color: $c-tabs-item-hover;
+      text-decoration: none;
+    }
+
+    &.is-selected {
+      border-bottom: $bdb-tabs-item-selected;
+      color: $c-tabs-item-selected;
+    }
+  }
+}

public/scss/components/_tag.scss

@@ -0,0 +1,62 @@
+/**
+ *  TAG
+ *
+ *  Markup:
+ *  -------
+ *
+ *  <ul>
+ *    <li class="tag">Fantasy</li>
+ *    <li class="tag">Fiction</li>
+ *    <li class="tag">Contemporary</li>
+ *  </ul>
+ *
+ *  <ul>
+ *    <li class="tag">
+ *      <a href="#">Fantasy</a>
+ *    </li>
+ *    <li class="tag">
+ *      <a href="#">Fiction</a>
+ *    </li>
+ *    <li class="tag">
+ *       <a href="#">Contemporary</a>
+ *    </li>
+ *  </ul>
+ *
+ */
+
+.tag {
+  background-color: $bg-tag;
+  border-radius: $bdr-tag;
+  color: $c-tag;
+  display: inline-block;
+  line-height: $lh-tag;
+  margin: $m-tag;
+  padding: $p-tag;
+  position: relative;
+
+  // triangle arrow
+  &::before {
+    border-bottom: ($lh-tag / 2) + $p-tag solid transparent;
+    border-left: $p-tag solid $bg-tag;
+    border-top: ($lh-tag / 2) + $p-tag solid transparent;
+    content: '';
+    height: 0;
+    position: absolute;
+    right: -$p-tag;
+    top: 0;
+    width: 0;
+  }
+
+  // dot
+  &::after {
+    background: $bg-tag-dot;
+    border-radius: 100%;
+    content: '';
+    height: $size-tag-dot;
+    margin-top: -$size-tag-dot / 2;
+    position: absolute;
+    right: -$size-tag-dot / 2;
+    top: 50%;
+    width: $size-tag-dot;
+  }
+}

public/scss/grid/_grid-framework.scss

@@ -0,0 +1,69 @@
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+  // Common properties for all breakpoints
+  %grid-column {
+    position: relative;
+    width: 100%;
+    min-height: 1px; // Prevent columns from collapsing when empty
+    padding-right: ($gutter / 2);
+    padding-left: ($gutter / 2);
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 1 through $columns {
+      .col#{$infix}-#{$i} {
+        @extend %grid-column;
+      }
+    }
+    .col#{$infix},
+    .col#{$infix}-auto {
+      @extend %grid-column;
+    }
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .col#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+      .col#{$infix}-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: none; // Reset earlier grid tiers
+      }
+
+      @for $i from 1 through $columns {
+        .col#{$infix}-#{$i} {
+          @include make-col($i, $columns);
+        }
+      }
+
+      .order#{$infix}-first {
+        order: -1;
+      }
+
+      @for $i from 1 through $columns {
+        .order#{$infix}-#{$i} {
+          order: $i;
+        }
+      }
+
+      // `$columns - 1` because offsetting by the width of an entire row isn't possible
+      @for $i from 0 through ($columns - 1) {
+        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+          .offset#{$infix}-#{$i} {
+            @include make-col-offset($i, $columns);
+          }
+        }
+      }
+    }
+  }
+}

public/scss/grid/_grid.scss

@@ -0,0 +1,52 @@
+/// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+@mixin make-container() {
+  width: 100%;
+  padding-right: ($grid-gutter-width / 2);
+  padding-left: ($grid-gutter-width / 2);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      max-width: $container-max-width;
+    }
+  }
+}
+
+@mixin make-row() {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: ($grid-gutter-width / -2);
+  margin-left: ($grid-gutter-width / -2);
+}
+
+@mixin make-col-ready() {
+  position: relative;
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  width: 100%;
+  min-height: 1px; // Prevent collapsing
+  padding-right: ($grid-gutter-width / 2);
+  padding-left: ($grid-gutter-width / 2);
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+  flex: 0 0 percentage($size / $columns);
+  // Add a `max-width` to ensure content within each column does not blow out
+  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+  // do not appear to require this.
+  max-width: percentage($size / $columns);
+}
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+  $num: $size / $columns;
+  margin-left: if($num == 0, 0, percentage($num));
+}

public/scss/index.scss

@@ -0,0 +1,34 @@
+@charset 'UTF-8';
+
+// Settings
+@import 'settings';
+@import 'custom';
+
+// Utils
+@import 'utils/breakpoints';
+@import 'utils/reset';
+@import 'utils/default';
+@import 'utils/background';
+@import 'utils/border';
+@import 'utils/aligner';
+@import 'utils/helpers';
+@import 'utils/layout';
+@import 'utils/typography';
+
+// Components
+@import 'components/badge';
+@import 'components/buttons';
+@import 'components/forms';
+@import 'components/loading-bar';
+@import 'components/loading-spinner';
+@import 'components/notification';
+@import 'components/paginator';
+@import 'components/table';
+@import 'components/tabs';
+@import 'components/tag';
+
+// Twitter bootstrap's grid v4.1.0
+// More info: https://getbootstrap.com/examples/grid/
+@import 'grid/grid-framework';
+@import 'grid/grid';
+@import 'utils/grid';

public/scss/utils/_aligner.scss

@@ -0,0 +1,48 @@
+/**
+ *  ALIGNERS
+ */
+
+// container
+.aligner {
+  display: flex;
+
+  &--spaceBetween {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &--spaceAround {
+    justify-content: space-around;
+    width: 100%;
+  }
+
+  &--centerVertical {
+    align-items: center;
+  }
+
+  &--centerHoritzontal {
+    justify-content: center;
+  }
+
+  &--contentStart {
+    justify-content: flex-start;
+  }
+
+  &--contentEnd {
+    justify-content: flex-end;
+  }
+}
+
+// item
+.aligner--itemTop {
+  align-self: flex-start;
+}
+
+.aligner--itemBottom {
+  align-self: flex-end;
+}
+
+.flex-grow, // deprecated
+.aligner--grow {
+  flex-grow: 1;
+}

public/scss/utils/_background.scss

@@ -0,0 +1,11 @@
+/**
+ *  BACKGROUND
+ */
+
+.bg {
+  @each $type, $color in $c-map {
+    &-#{$type} {
+      background-color: $color;
+    }
+  }
+}

public/scss/utils/_border.scss

@@ -0,0 +1,23 @@
+/**
+ *  BORDER
+ */
+
+.border {
+  border: $bd-medium;
+}
+
+.border-bottom {
+  border-bottom: $bd-medium;
+}
+
+.border-left {
+  border-left: $bd-medium;
+}
+
+.border-right {
+  border-right: $bd-medium;
+}
+
+.border-top {
+  border-top: $bd-medium;
+}

public/scss/utils/_breakpoints.scss

@@ -0,0 +1,119 @@
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.1.
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name) {
+      @content;
+    }
+  }
+}

public/scss/utils/_default.scss

@@ -0,0 +1,39 @@
+/**
+ *  MAIN RULES
+ */
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  outline: none;
+}
+
+body {
+  background-color: $bgc-body;
+  min-height: 100%;
+  overflow-x: hidden;
+  position: relative;
+}
+
+p {
+  font-weight: normal;
+  margin-bottom: $mb-p;
+}
+
+img {
+  max-width: 100%;
+}
+
+strong {
+  font-weight: $fw-strong;
+}
+
+ul {
+  margin-bottom: $mb-ul;
+}
+
+li {
+  list-style: none;
+  margin-bottom: $mb-li;
+}

public/scss/utils/_grid.scss

@@ -0,0 +1,52 @@
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+@if $enable-grid-classes {
+  .container {
+    @include make-container;
+    @include make-container-max-widths;
+  }
+}
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but with 100% width for
+// fluid, full width layouts.
+
+@if $enable-grid-classes {
+  .container-fluid {
+    @include make-container;
+  }
+}
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
+@if $enable-grid-classes {
+  .row {
+    @include make-row;
+  }
+
+  // Remove the negative margin from default .row, then the horizontal padding
+  // from all immediate children columns (to prevent runaway style inheritance).
+  .no-gutters {
+    margin-left: 0;
+    margin-right: 0;
+
+    > .col,
+    > [class*='col-'] {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@if $enable-grid-classes {
+  @include make-grid-columns;
+}

public/scss/utils/_helpers.scss

@@ -0,0 +1,126 @@
+/**
+ *  FLOATS
+ */
+
+.fleft {
+  float: left;
+}
+
+.fright {
+  float: right;
+}
+
+.clearfix {
+  ::after {
+    clear: both;
+    content: '';
+    display: table;
+  }
+}
+
+/**
+ *  MARGINS
+ */
+
+.m-xsmall {
+  margin: $m-xsmall;
+}
+
+.mb-xsmall {
+  margin-bottom: $m-xsmall;
+}
+
+.m-small {
+  margin: $m-small;
+}
+
+.mb-small {
+  margin-bottom: $m-small;
+}
+
+.m-medium {
+  margin: $m-medium;
+}
+
+.mb-medium {
+  margin-bottom: $m-medium;
+}
+
+.m-big {
+  margin: $m-big;
+}
+
+.mb-big {
+  margin-bottom: $m-big;
+}
+
+.m-huge {
+  margin: $m-huge;
+}
+
+.mb-huge {
+  margin-bottom: $m-huge;
+}
+
+.m-none {
+  margin: 0 !important;
+}
+
+/**
+ *  PADDINGS
+ */
+.p-small {
+  padding: $p-small;
+}
+
+.pb-small {
+  padding-bottom: $p-small;
+}
+
+.p-medium {
+  padding: $p-medium;
+}
+
+.pb-medium {
+  padding-bottom: $p-medium;
+}
+
+.p-big {
+  padding: $p-big;
+}
+
+.pb-big {
+  padding-bottom: $p-big;
+}
+
+.p-huge {
+  padding: $p-huge;
+}
+
+.pb-huge {
+  padding-bottom: $p-huge;
+}
+
+/**
+ *  OTHERS
+ */
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.opacity-low {
+  opacity: .5;
+}
+
+.rounded-corners {
+  border-radius: $bdr-rounded-corners;
+}
+
+.rounded {
+  border-radius: 100%;
+}

public/scss/utils/_layout.scss

@@ -0,0 +1,51 @@
+/**
+ * LAYOUT
+ */
+
+.section {
+  @include media-breakpoint-up(md) {
+    padding-bottom: $p-huge * 2;
+    padding-top: $p-huge * 2;
+  }
+  padding-bottom: $p-huge;
+  padding-top: $p-huge;
+
+  & + & {
+    padding-top: 0;
+  }
+}
+
+.container {
+  @include media-breakpoint-up(md) {
+    padding-left: $w-gutter;
+    padding-right: $w-gutter;
+  }
+  background-color: $bgc-container;
+  margin: 0 auto;
+  max-width: $mwi-container;
+  padding-left: $w-gutter / 2;
+  padding-right: $w-gutter / 2;
+  width: 100%;
+}
+
+.container-medium {
+  @include media-breakpoint-up(md) {
+    padding-left: $w-gutter;
+    padding-right: $w-gutter;
+  }
+  margin: 0 auto;
+  max-width: $mwi-container-medium;
+  padding-left: $w-gutter / 2;
+  padding-right: $w-gutter / 2;
+}
+
+.container-small {
+  @include media-breakpoint-up(md) {
+    padding-left: $w-gutter;
+    padding-right: $w-gutter;
+  }
+  margin: 0 auto;
+  max-width: $mwi-container-small;
+  padding-left: $w-gutter / 2;
+  padding-right: $w-gutter / 2;
+}

public/scss/utils/_reset.scss

@@ -0,0 +1,34 @@
+/**
+ * Reset
+ */
+
+@if $enable-reset-defaults {
+  html,body,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {
+    background: transparent;
+    border: 0;
+    font-size: 100%;
+    margin: 0;
+    outline: 0;
+    padding: 0;
+    vertical-align: baseline;
+  }
+
+  article,
+  aside,
+  figure,
+  footer,
+  header,
+  main,
+  nav,
+  section {
+    display: block;
+  }
+
+  * {
+    &,
+    &:before,
+    &:after {
+      box-sizing: border-box;
+    }
+  }
+}

public/scss/utils/_typography.scss

@@ -0,0 +1,124 @@
+/**
+ *  TYPOGRAPHY
+ */
+
+body {
+  color: $c-body;
+  font-family: $ff-body;
+  font-size: $fz-body;
+  font-weight: $fw-body;
+  line-height: $lh-body;
+}
+
+a {
+  color: $c-link;
+  text-decoration: none;
+
+  &:hover {
+    color: $c-link-hover;
+  }
+
+  &:focus {
+    color: $c-primary;
+  }
+}
+
+
+// Sizes
+.text {
+  &-huge, &-big, &-medium {
+    margin-bottom: 1em;
+  }
+
+  &-huge {
+    font-size: $fz-huge;
+    line-height: $lh-huge;
+  }
+
+  &-big {
+    font-size: $fz-big;
+    line-height: $lh-big;
+  }
+
+  &-medium {
+    font-size: $fz-medium;
+    line-height: $lh-medium;
+  }
+
+  &-small {
+    font-size: $fz-small;
+    line-height: $lh-small;
+  }
+
+  // set default font state.
+  &-body {
+    font-size: $fz-body;
+    line-height: $lh-body;
+  }
+}
+
+// Colors
+.text {
+  @each $type, $color in $c-map {
+    &-#{$type} {
+      color: $color;
+    }
+  }
+}
+
+// Styles
+.text-light {
+  font-weight: $fw-light;
+}
+
+.text-normal {
+  font-weight: $fw-normal;
+}
+
+.text-lineThrough {
+  text-decoration: line-through;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-underline {
+  text-decoration: underline;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+// titles after titles
+.text-withSubtitle {
+  margin-bottom: 0 !important;
+
+  + .text-huge,
+  + .text-big,
+  + .text-medium,
+  + .text-small, {
+    margin-top: .5em;
+  }
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-weight: $fw-headings;
+}
+
+// Aligners
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}