totole/mpsfun
1
0
Fork 0
mirror of https://github.com/derron1/mpsfun.git synced 2026-01-12 02:05:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

second commit

Browse Source
This commit is contained in:
Derron carr
2017-06-07 19:48:16 +01:00
parent 16e0481c71
commit 335e3e09c8
64 changed files with 2595 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/App.vue Executable file
View File

@@ -0,0 +1,86 @@
<template>
<div id="app">
<!-- <div class="off-canvas position-right" id="offCanvas" data-off-canvas>
<ul class="sidebar-menu" data-close="offCanvas">
<li><router-link to="/" exact>Home</router-link></li>
<li><router-link to="/reveal" exact>Reveal</router-link></li>
<li><router-link to="/slider" exact>Slider</router-link></li>
<li><router-link to="/tooltip" exact>Tooltip</router-link></li>
<li><router-link to="/dropdown-menu" exact>Dropdown Menu</router-link></li>
<li><router-link to="/drilldown-menu" exact>Drilldown Menu</router-link></li>
<li><router-link to="/accordion-menu" exact>Accordion Menu</router-link></li>
<li><router-link to="/magellan" exact>Magellan</router-link></li>
<li><router-link to="/accordion" exact>Accordion</router-link></li>
<li><router-link to="/dropdown" exact>Dropdown</router-link></li>
<li><router-link to="/tabs" exact>Tabs</router-link></li>
<li><router-link to="/orbit" exact>Orbit</router-link></li>
</ul>
</div> -->
<div class="off-canvas-content" data-off-canvas-content>
<!-- <div class="top-bar">
<ul class="menu expanded">
<li class="logo">
<router-link to="/">Vue-Foundation</router-link>
</li>
<li><a class="button small menu-button" data-toggle="offCanvas">Menu</a></li>
</ul>
</div> -->
<div class="content-wrapper">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
};
</script>
<style lang="scss">
@import './styles/global';
// Chrome Reset
a:focus {
outline: none;
}
.logo, .logo a {
color: $white;
font-weight: normal;
}
li a.menu-button {
border-radius: 20px;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
float: right;
}
.content-wrapper {
padding: 0.75rem 0;
}
.sidebar-menu {
@include menu-base();
@include menu-direction(vertical);
a {
color: $secondary-color;
font-weight: normal;
}
a.active {
font-weight: 600;
color: $primary-color;
}
}
body {
background: #15151B;
}
</style>

22
src/assets/fonts/config.json Executable file
View File

@@ -0,0 +1,22 @@
{
"name": "",
"css_prefix_text": "icon-",
"css_use_suffix": false,
"hinting": true,
"units_per_em": 1000,
"ascent": 850,
"glyphs": [
{
"uid": "0f6a2573a7b6df911ed199bb63717e27",
"css": "github-circled",
"code": 61595,
"src": "fontawesome"
},
{
"uid": "5f0f183e241d15cbe486bff88b188dff",
"css": "puzzle",
"code": 61742,
"src": "fontawesome"
}
]
}

BIN
src/assets/fonts/fontello.eot Executable file
View File

Binary file not shown.

14
src/assets/fonts/fontello.svg Executable file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2017 by original authors @ fontello.com</metadata>
<defs>
<font id="fontello" horiz-adv-x="1000" >
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="github-circled" unicode="&#xf09b;" d="M429 779q116 0 215-58t156-156 57-215q0-140-82-252t-211-155q-15-3-22 4t-7 17q0 1 0 43t0 75q0 54-29 79 32 3 57 10t53 22 45 37 30 58 11 84q0 67-44 115 21 51-4 114-16 5-46-6t-51-25l-21-13q-52 15-107 15t-108-15q-8 6-23 15t-47 22-47 7q-25-63-5-114-44-48-44-115 0-47 12-83t29-59 45-37 52-22 57-10q-21-20-27-58-12-5-25-8t-32-3-36 12-31 35q-11 18-27 29t-28 14l-11 1q-12 0-16-2t-3-7 5-8 7-6l4-3q12-6 24-21t18-29l6-13q7-21 24-34t37-17 39-3 31 1l13 3q0-22 0-50t1-30q0-10-8-17t-22-4q-129 43-211 155t-82 252q0 117 58 215t155 156 216 58z m-267-616q2 4-3 7-6 1-8-1-1-4 4-7 5-3 7 1z m18-19q4 3-1 9-6 5-9 2-4-3 1-9 5-6 9-2z m16-25q6 4 0 11-4 7-9 3-5-3 0-10t9-4z m24-23q4 4-2 10-7 7-11 2-5-5 2-11 6-6 11-1z m32-14q1 6-8 9-8 2-10-4t7-9q8-3 11 4z m35-3q0 7-10 6-9 0-9-6 0-7 10-6 9 0 9 6z m32 5q-1 7-10 5-9-1-8-8t10-4 8 7z" horiz-adv-x="857.1" />
<glyph glyph-name="puzzle" unicode="&#xf12e;" d="M929 237q0-45-25-75t-69-30q-23 0-43 10t-33 21-32 21-39 10q-62 0-62-69 0-22 9-65t8-64v-3q-12 0-18 0-19-2-54-7t-65-7-54-3q-35 0-58 15t-23 47q0 20 9 39t22 32 21 33 10 43q0 44-31 69t-75 25q-47 0-80-26t-33-71q0-24 9-46t18-36 19-30 8-28q0-25-25-50-21-19-65-19-54 0-137 13-5 1-16 2t-15 3l-7 1q-1 0-2 0-1 0-1 1v571q1 0 10-2t19-2 12-2q83-14 137-14 44 0 65 20 25 24 25 49 0 13-8 29t-19 29-18 36-9 47q0 45 33 71t81 25q44 0 74-25t31-69q0-23-10-43t-21-33-22-31-9-40q0-32 23-47t58-14q35 0 100 8t91 9v-1q-1-1-2-9t-3-19-2-12q-13-84-13-137 0-45 19-65 25-26 50-26 12 0 28 8t30 19 36 19 46 8q46 0 71-33t26-80z" horiz-adv-x="928.6" />
</font>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/fonts/fontello.ttf Executable file
View File

Binary file not shown.

BIN
src/assets/fonts/fontello.woff Executable file
View File

Binary file not shown.

BIN
src/assets/fonts/fontello.woff2 Executable file
View File

Binary file not shown.

BIN
src/assets/img/fun1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
src/assets/img/mps-glasses.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
src/assets/img/orbit/01.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

BIN
src/assets/img/orbit/02.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
src/assets/img/orbit/03.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
src/assets/img/orbit/04.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
src/assets/img/vue-yeti.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

45
src/components/Accordion.vue Executable file
View File

@@ -0,0 +1,45 @@
<template>
<div class="row">
<div class="medium-10 medium-offset-1 columns">
<h1>{{ msg }}</h1>
<ul id="accordion" class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
If you init Foundation in the component, this will work fine.
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
I need to be clicked, in order to show up.
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'accordion',
mounted() {
this.accordion = new Foundation.Accordion($('#accordion'), {
// These options can be declarative using the data attributes
slideSpeed: 500,
multiExpand: true,
});
},
data() {
return {
msg: 'Accordion',
};
},
destroyed() {
this.accordion.destroy();
},
};
</script>
<style lang="scss" scoped>
</style>

41
src/components/AccordionMenu.vue Executable file
View File

@@ -0,0 +1,41 @@
<template>
<div class="row">
<div class="medium-10 medium-offset-1 columns">
<h1>{{ msg }}</h1>
<ul id="accordion-menu" class="vertical menu" data-accordion-menu>
<li>
<a>Item 1</a>
<ul class="menu vertical nested">
<li><a>Item 1A</a></li>
<li><a>Item 1B</a></li>
</ul>
</li>
<li><a>Item 2</a></li>
</ul>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.accordionMenu = new Foundation.AccordionMenu($('#accordion-menu'), {
// These options can be declarative using the data attributes
slideSpeed: 500,
multiOpen: true,
});
},
name: 'accordion-menu',
data() {
return {
msg: 'Accordion Menu',
};
},
destroyed() {
this.accordionMenu.destroy();
},
};
</script>
<style lang="scss" scoped>
</style>

40
src/components/DrilldownMenu.vue Executable file
View File

@@ -0,0 +1,40 @@
<template>
<div class="row">
<div class="medium-10 medium-offset-1 columns">
<h1>{{ msg }}</h1>
<ul id="drilldown" class="vertical menu" data-drilldown>
<li>
<a>Item 1</a>
<ul class="vertical menu">
<li><a>Item 1A</a></li>
<!-- ... -->
</ul>
</li>
<li><a>Item 2</a></li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'drilldown',
mounted() {
this.drilldown = new Foundation.Drilldown($('#drilldown'), {
// These options can be declarative using the data attributes
animationDuration: 500,
});
},
data() {
return {
msg: 'Drilldown Menu',
};
},
destroyed() {
this.drilldown.destroy();
},
};
</script>
<style lang="scss" scoped>
</style>

56
src/components/Dropdown.vue Executable file
View File

@@ -0,0 +1,56 @@
<template>
<div class="row">
<div class="medium-10 medium-offset-1 columns">
<h1>{{ msg }}</h1>
<button class="button" type="button" data-toggle="dropdown1">Toggle Dropdown</button>
<div class="dropdown-pane" id="dropdown1" data-dropdown data-auto-focus="true">
Example form in a dropdown.
<form>
<div class="row">
<div class="medium-6 columns">
<label>Name
<input type="text" placeholder="Kirk, James T.">
</label>
</div>
<div class="medium-6 columns">
<label>Rank
<input type="text" placeholder="Captain">
</label>
</div>
</div>
</form>
</div>
<button class="button" type="button" data-toggle="dropdown2">Hoverable Dropdown</button>
<div class="dropdown-pane" id="dropdown2" data-dropdown data-hover="true" data-hover-pane="true">
v-foundation directive doesn't work here
</div>
</div>
</div>
</template>
<script>
export default {
name: 'dropdown',
mounted() {
this.dropdown1 = new Foundation.Dropdown($('#dropdown1'), {
// These options can be declarative using the data attributes
vOffset: 20,
});
this.dropdown2 = new Foundation.Dropdown($('#dropdown2'), {
hover: true,
});
},
data() {
return {
msg: 'Dropdown',
};
},
destroyed() {
this.dropdown1.destroy();
this.dropdown2.destroy();
},
};
</script>
<style lang="scss" scoped>
</style>

42
src/components/DropdownMenu.vue Executable file
View File

@@ -0,0 +1,42 @@
<template>
<div class="row">
<div class="medium-10 medium-offset-1 columns">
<h1>{{ msg }}</h1>
<ul id="dropdown-menu" class="dropdown menu" data-dropdown-menu>
<li>
<a>Item 1</a>
<ul class="menu">
<li><a>Item 1A</a></li>
<!-- ... -->
</ul>
</li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'dropdown-menu',
mounted() {
this.dropdownMenu = new Foundation.DropdownMenu($('#dropdown-menu'), {
// These options can be declarative using the data attributes
hoverDelay: 300,
});
},
data() {
return {
msg: 'Dropdown Menu',
};
},
destroyed() {
this.dropdownMenu.destroy();
},
};
</script>
<style lang="scss" scoped>
</style>

137
src/components/Home.vue Executable file
View File

@@ -0,0 +1,137 @@
<template>
<div id="">
<div class="row align-center first_window">
<div class="column small-12">
<div class="intro_text ">
<div class="row column text-center">
<img class="company_logo" src="../assets/img/logo.png" alt="motion picture solutions logo">
</div>
<div class="company_name">Motion Picture Solutions</div>
<div class="first_title">Welcome</div>
<div class="first_second">to</div>
<div class="first_third">MPS.Fun</div>
<div class="slogan"><p class="text-center">Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p></div>
<br>
<div class="row column text-center">
<button class="hollow button">PLAY NOW</button>
</div>
</div>
</div>
<img class="shades" src="../assets/img/mps-glasses.png" alt="">
</div>
<div class="row align-middle card_info_one">
<div class="columns">
<h2>Direct KDM Automation</h2>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
<div class="large-6 columns">
<img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
</div>
</div>
<div class="row align-middle card_info_two">
<div class="large-6 columns">
<img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
</div>
<div class="columns">
<h2>Direct KDM Automation</h2>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
</div>
<div class="row align-middle card_info_three">
<div class="columns">
<h2>Direct KDM Automation</h2>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
<div class="large-6 columns">
<img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
</div>
</div>
<div class="row align-middle card_info_four">
<div class="large-6 columns">
<img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
</div>
<div class="columns">
<h2>Direct KDM Automation</h2>
<p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.image {
margin-top: 0.75rem;
margin-bottom: 1.5rem;
}
.company_logo {
padding-bottom: 10px;
}
.company_name {
text-align:center;
letter-spacing: 16px;
text-transform:uppercase;
}
.first_window {
min-height:1060px;
}
.intro_text {
padding-top:rem-calc(250);
font-family: 'Lato', sans-serif;
color:#fff;
.first_title,
.first_third {
font-weight:bolder;
font-size:rem-calc(120);
text-transform:uppercase;
text-align:center;
line-height:1;
}
.first_title {
}
.first_second {
text-align:center;
font-weight:bolder;
line-height:0;
}
}
.call-button {
border-radius: 20px;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-weight: 600;
text-transform: uppercase;
}
.shades {
position:absolute;
bottom:-10;
}
</style>
<script>
export default {
name: 'hello',
data() {
return {
msg: 'Vue + Foundation',
};
},
mounted() {
// const height = $(window).innerHeight();
// document.getElementById('first_window').style.height = height;
// console.log(height);
},
};
</script>

53
src/components/Magellan.vue Executable file
View File

@@ -0,0 +1,53 @@
<template>
<div class="row">
<div class="medium-10 medium-offset-1 columns">
<h1>{{ msg }}</h1>
<ul id="magellan" class="horizontal menu" data-magellan>
<li><a href="#first">First</a></li>
<li><a href="#second">Second</a></li>
<li><a href="#third">Third</a></li>
</ul>
<div class="sections">
<section id="first" data-magellan-target="first"><span>First Section</span></section>
<section id="second" data-magellan-target="second"><span>Second Section</span></section>
<section id="third" data-magellan-target="third"><span>Third Section</span></section>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'magellan',
mounted() {
this.magellan = new Foundation.Magellan($('#magellan'), {
// These options can be declarative using the data attributes
animationEasing: 'swing',
});
},
data() {
return {
msg: 'Magellan',
};
},
destroyed() {
this.magellan.destroy();
},
};
</script>
<style lang="scss" scoped>
section {
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem;
background: $light-gray;
}
span {
font-size: 2rem;
font-weight: 300;
}
</style>

302
src/components/MpsGame.vue Normal file
View File

@@ -0,0 +1,302 @@
<template>
<div id="game">
<div class="modal-overlay">
<div class="modal">
<h2 class="winner">Well Done!</h2>
<button @click="restart" class="restart">Play Again?</button>
<p class="share-text">Share it?</p>
<ul class="social">
<li></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'game',
mounted() {
},
created() {
},
data() {
return {
msg: 'Game',
game: '',
modal: '',
overlay: '',
// restartButton:'',
cardsArray: '',
shuffleCards: '',
card: [
{
name: 'mpsOne' ,
img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
id: 1,
},
{
name: 'mpsTwo' ,
img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
id: 2,
},
{
name: 'mpsThree',
img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
id: 3,
},
{
name: 'mpsFour',
img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
id: 4,
},
],
};
},
destroyed() {
this.accordion.destroy();
},
};
</script>
<style lang='scss' scoped>
@import url(http://weloveiconfonts.com/api/?family=brandico);
/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: black;
min-height: 100%;
font-family: "Arial", sans-serif;
}
.wrap {
position: relative;
height: 100%;
min-height: 500px;
padding-bottom: 20px;
}
.game {
transform-style: preserve-3d;
perspective: 500px;
min-height: 100%;
height: 100%;
}
@mixin width($max){
@media (max-width: $max){
@content;
}
}
@keyframes matchAnim {
0% {
background: #bcffcc;
}
100% {
background: white;
}
}
.card {
float: left;
width: 16.66666%;
height: 25%;
padding: 5px;
text-align: center;
display: block;
perspective: 500px;
position: relative;
cursor: pointer;
z-index: 50;
-webkit-tap-highlight-color: rgba(0,0,0,0);
@include width(800px){
width: 25%;
height: 16.666%;
}
.inside {
width: 100%;
height: 100%;
display: block;
transform-style: preserve-3d;
transition: .4s ease-in-out;
background: white;
&.picked, &.matched {
transform: rotateY(180deg);
}
&.matched {
animation: 1s matchAnim ease-in-out;
animation-delay: .4s;
}
}
.front, .back {
border: 1px solid black;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
img {
max-width: 100%;
display: block;
margin: 0 auto;
max-height: 100%;
}
}
.front {
transform: rotateY(-180deg);
@include width(800px){
padding: 5px;
}
}
.back{
@include width(800px){
padding: 10px;
}
}
}
.modal-overlay {
display: none;
background: rgba(0,0,0,.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal {
display: none;
position: relative;
width: 500px;
height: 400px;
max-height: 90%;
max-width: 90%;
min-height: 380px;
margin: 0 auto;
background: white;
top: 50%;
transform: translateY(-50%);
padding: 30px 10px;
.winner {
font-size: 80px;
text-align: center;
font-family: "Anton", sans-serif;
color: #4d4d4d;
text-shadow: 0px 3px 0 black;
@include width(480px){
font-size: 60px;
}
}
.restart {
font-family: "Anton", sans-serif;
margin: 30px auto;
padding: 20px 30px;
display: block;
font-size: 30px;
border: none;
background: #4d4d4d;
background: linear-gradient(#4d4d4d, #222);
border: 1px solid #222;
border-radius: 5px;
color: white;
text-shadow: 0px 1px 0 black;
cursor: pointer;
&:hover {
background: linear-gradient(#222, black);
}
}
.message {
text-align: center;
a {
text-decoration: none;
color: #28afe6;
font-weight: bold;
&:hover {
$c: lighten(#28afe6, 10%);
color: $c;
border-bottom: 1px dotted $c;
}
}
}
.share-text {
text-align: center;
margin: 10px auto;
}
.social {
margin: 20px auto;
text-align: center;
li {
display: inline-block;
height: 50px;
width: 50px;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
a {
display: block;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
border-radius: 5px;
&.facebook {
background: #3b5998;
&:hover {
background: lighten(#3b5998, 10%);
}
}
&.google {
background: #D34836;
&:hover {
background: lighten(#D34836, 10%);
}
}
&.twitter {
background: #4099FF;
&:hover {
background: lighten(#4099FF, 10%);
}
}
}
}
}
}
footer {
height: 20px;
position: absolute;
bottom: 0;
width: 100%;
z-index: 0;
.disclaimer {
line-height: 20px;
font-size: 12px;
color: #727272;
text-align: center;
@include width(767px){
font-size: 8px;
}
}
}
</style>

58
src/components/Orbit.vue Executable file
View File

@@ -0,0 +1,58 @@
<template>
<div class="row">
<div class="medium-10 medium-offset-1 columns">
<h1>{{ msg }}</h1>
<div id="orbit" class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
<li class="is-active orbit-slide">
<img class="orbit-image" src="../assets/img/orbit/01.jpg" alt="Space">
<figcaption class="orbit-caption">Space, the final frontier.</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="../assets/img/orbit/02.jpg" alt="Space">
<figcaption class="orbit-caption">Lets Rocket!</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="../assets/img/orbit/03.jpg" alt="Space">
<figcaption class="orbit-caption">Encapsulating</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="../assets/img/orbit/04.jpg" alt="Space">
<figcaption class="orbit-caption">Outta This World</figcaption>
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'orbit',
mounted() {
this.orbit = new Foundation.Orbit($('#orbit'), {
// These options can be declarative using the data attributes
timerDelay: 2000,
});
},
data() {
return {
msg: 'Orbit',
};
},
destroyed() {
this.orbit.destroy();
},
};
</script>
<style lang="scss" scoped>
</style>

48
src/components/Reveal.vue Executable file
View File

@@ -0,0 +1,48 @@
<template>
<div class="row">
<div class="medium-10 medium-offset-1 columns">
<h1>{{ msg }}</h1>
<div id="reveal-dialog" class="reveal" data-reveal>
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">&times;</span>
</button>
</div>
<p><a v-on:click="openReveal()">Click me for a modal</a></p>
</div>
</div>
</template>
<script>
export default {
name: 'reveal',
mounted() {
this.reveal = new Foundation.Reveal($('#reveal-dialog'), {
// These options can be declarative using the data attributes
animationIn: 'scale-in-up',
});
},
data() {
return {
msg: 'Reveal',
};
},
methods: {
// Added the below openReveal method for two reasons:
// 1) There was a bug preventing the reveal from working once
// you navigated away and back to the reveal component.
// 2) Most dialogs will need to be opened using code.
openReveal() {
this.reveal.open();
},
},
destroyed() {
this.reveal.destroy();
},
};
</script>
<style lang="scss" scoped>
</style>

43
src/components/Slider.vue Executable file
View File

@@ -0,0 +1,43 @@
<template>
<div class="row">
<div class="medium-10 medium-offset-1 columns">
<h1>{{ msg }}</h1>
<div id="slider" class="slider" data-slider v-bind:data-initial-start="this.dataValue" v-bind:data-end="this.dataEnd">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden" class="slider-input">
</div>
<p>Value: {{ dataValue }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'slider',
mounted() {
this.slider = new Foundation.Slider($('#slider'), {
// These options can be declarative using the data attributes
step: 10,
});
this.slider.$element.on('moved.zf.slider', () => {
this.dataValue = this.slider.inputs.val();
});
},
data() {
return {
msg: 'Slider',
dataValue: 50,
dataEnd: 200,
};
},
destroyed() {
this.slider.destroy();
},
};
</script>
<style lang="scss" scoped>
</style>

47
src/components/Tabs.vue Executable file
View File

@@ -0,0 +1,47 @@
<template>
<div class="row">
<div class="medium-10 medium-offset-1 columns">
<h1>{{ msg }}</h1>
<ul id="tabs" class="tabs" data-tabs>
<li class="tabs-title is-active"><a href="#panel1d" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2d">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3d">Tab 3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="tabs">
<div class="tabs-panel is-active" id="panel1d">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tabs-panel" id="panel2d">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
<div class="tabs-panel" id="panel3d">
<p>Curabitur sit amet dolor vitae justo vulputate semper in quis ipsum. Proin dignissim, eros vitae aliquet pellentesque, tortor odio molestie felis, in tempor lectus metus nec lacus.</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'tabs',
mounted() {
this.tabs = new Foundation.Tabs($('#tabs'), {
// These options can be declarative using the data attributes
matchHeight: false,
});
},
data() {
return {
msg: 'Tabs',
};
},
destroyed() {
this.tabs.destroy();
},
};
</script>
<style lang="scss" scoped>
</style>

40
src/components/Tooltip.vue Executable file
View File

@@ -0,0 +1,40 @@
<template>
<div class="row">
<div class="medium-10 medium-offset-1 columns">
<h1>{{ msg }}</h1>
<p>
The <span data-tooltip aria-haspopup="true" class="has-tip" tabindex="1" title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
</p>
</div>
</div>
</template>
<script>
export default {
name: 'tooltip',
mounted() {
// The following code works however only if showOn: 'all' is set.
// This is a known bug: https://github.com/zurb/foundation-sites/issues/7554
// Until this bug is fixed, Use the selector method
// this.tooltip = new Foundation.Tooltip($('.has-tip'), {
// // These options can be declarative using the data attributes
// showOn: 'all',
// });
// Selector method
this.tooltip = $('.has-tip').foundation();
},
data() {
return {
msg: 'Tooltip',
};
},
destroyed() {
// Due to Selector Method destroy is disabled
// this.tooltip.destroy();
},
};
</script>
<style lang="scss" scoped>
</style>

21
src/main.js Executable file
View File

@@ -0,0 +1,21 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import jQuery from 'jquery';
import Vue from 'vue';
import App from './App';
import router from './router';
window.jQuery = jQuery;
window.$ = jQuery;
require('motion-ui');
require('what-input');
require('foundation-sites');
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
});

37
src/router/index.js Executable file
View File

@@ -0,0 +1,37 @@
import Vue from 'vue';
import Router from 'vue-router';
// Components
import Home from '@/components/Home';
import Reveal from '@/components/Reveal';
import Slider from '@/components/Slider';
import Tooltip from '@/components/Tooltip';
import DropdownMenu from '@/components/DropdownMenu';
import DrilldownMenu from '@/components/DrilldownMenu';
import AccordionMenu from '@/components/AccordionMenu';
import Magellan from '@/components/Magellan';
import Accordion from '@/components/Accordion';
import Dropdown from '@/components/Dropdown';
import Tabs from '@/components/Tabs';
import Orbit from '@/components/Orbit';
Vue.use(Router);
export default new Router({
linkActiveClass: 'active',
routes: [
// routes
{ name: 'home', path: '/', component: Home },
{ name: 'reveal', path: '/reveal', component: Reveal },
{ name: 'slider', path: '/slider', component: Slider },
{ name: 'tooltip', path: '/tooltip', component: Tooltip },
{ name: 'dropdown-menu', path: '/dropdown-menu', component: DropdownMenu },
{ name: 'drilldown-menu', path: '/drilldown-menu', component: DrilldownMenu },
{ name: 'accordion-menu', path: '/accordion-menu', component: AccordionMenu },
{ name: 'magellan', path: '/magellan', component: Magellan },
{ name: 'accordion', path: '/accordion', component: Accordion },
{ name: 'dropdown', path: '/dropdown', component: Dropdown },
{ name: 'tabs', path: '/tabs', component: Tabs },
{ name: 'orbit', path: '/orbit', component: Orbit },
],
});

60
src/styles/_icons.scss Executable file
View File

@@ -0,0 +1,60 @@
@font-face {
font-family: 'fontello';
src: url('./assets/fonts/fontello.eot?11465456');
src: url('./assets/fonts/fontello.eot?11465456#iefix') format('embedded-opentype'),
url('./assets/fonts/fontello.woff2?11465456') format('woff2'),
url('./assets/fonts/fontello.woff?11465456') format('woff'),
url('./assets/fonts/fontello.ttf?11465456') format('truetype'),
url('./assets/fonts/fontello.svg?11465456#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?21286189#fontello') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-github-circled:before { content: '\f09b'; } /* '' */
.icon-puzzle:before { content: '\f12e'; } /* '' */

625
src/styles/_settings.scss Executable file
View File

@@ -0,0 +1,625 @@
// Foundation for Sites Settings
// -----------------------------
//
// Table of Contents:
//
// 1. Global
// 2. Breakpoints
// 3. The Grid
// 4. Base Typography
// 5. Typography Helpers
// 6. Abide
// 7. Accordion
// 8. Accordion Menu
// 9. Badge
// 10. Breadcrumbs
// 11. Button
// 12. Button Group
// 13. Callout
// 14. Card
// 15. Close Button
// 16. Drilldown
// 17. Dropdown
// 18. Dropdown Menu
// 19. Forms
// 20. Label
// 21. Media Object
// 22. Menu
// 23. Meter
// 24. Off-canvas
// 25. Orbit
// 26. Pagination
// 27. Progress Bar
// 28. Responsive Embed
// 29. Reveal
// 30. Slider
// 31. Switch
// 32. Table
// 33. Tabs
// 34. Thumbnail
// 35. Title Bar
// 36. Tooltip
// 37. Top Bar
// [Vue-Foundation] This doesn't work here
// @import 'util/util';
// [Vue-Foundation] This does
@import '~foundation-sites/scss/util/util';
// 1. Global
// ---------
$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$foundation-palette: (
primary: #FBDC00,
secondary: #34495e,
success: #4fc08d,
warning: #FCB738,
alert: #DA5961,
);
$light-gray: #f8f8f8;
$medium-gray: #cacaca;
$dark-gray: #727f80;
$black: #2c3e50;
$white: #ffffff;
$body-background: $white;
$body-font-color: $black;
$body-font-family: 'Source Sans Pro', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
$global-text-direction: ltr;
$global-flexbox: false;
$print-transparent-backgrounds: true;
@include add-foundation-colors;
// 2. Breakpoints
// --------------
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
$print-breakpoint: large;
$breakpoint-classes: (small medium large);
// 3. The Grid
// -----------
$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
small: 20px,
medium: 30px,
);
$grid-column-align-edge: true;
$block-grid-max: 8;
// 4. Base Typography
// ------------------
$header-font-family: $body-font-family;
$header-font-weight: 300;
$header-font-style: normal;
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
$header-color: inherit;
$header-lineheight: 1.4;
$header-margin-bottom: 0.5rem;
$header-styles: (
small: (
'h1': ('font-size': 24),
'h2': ('font-size': 20),
'h3': ('font-size': 19),
'h4': ('font-size': 18),
'h5': ('font-size': 17),
'h6': ('font-size': 16),
),
medium: (
'h1': ('font-size': 48),
'h2': ('font-size': 40),
'h3': ('font-size': 31),
'h4': ('font-size': 25),
'h5': ('font-size': 20),
'h6': ('font-size': 16),
),
);
$header-text-rendering: optimizeLegibility;
$small-font-size: 80%;
$header-small-font-color: $medium-gray;
$paragraph-lineheight: 1.6;
$paragraph-margin-bottom: 1rem;
$paragraph-text-rendering: optimizeLegibility;
$code-color: $black;
$code-font-family: $font-family-monospace;
$code-font-weight: $global-weight-normal;
$code-background: $light-gray;
$code-border: 1px solid $medium-gray;
$code-padding: rem-calc(2 5 1);
$anchor-color: $primary-color;
$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
$anchor-text-decoration: none;
$anchor-text-decoration-hover: none;
$hr-width: $global-width;
$hr-border: 1px solid $medium-gray;
$hr-margin: rem-calc(20) auto;
$list-lineheight: $paragraph-lineheight;
$list-margin-bottom: $paragraph-margin-bottom;
$list-style-type: disc;
$list-style-position: outside;
$list-side-margin: 1.25rem;
$list-nested-side-margin: 1.25rem;
$defnlist-margin-bottom: 1rem;
$defnlist-term-weight: $global-weight-bold;
$defnlist-term-margin-bottom: 0.3rem;
$blockquote-color: $dark-gray;
$blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid $medium-gray;
$cite-font-size: rem-calc(13);
$cite-color: $dark-gray;
$cite-pseudo-content: '\2014 \0020';
$keystroke-font: $font-family-monospace;
$keystroke-color: $black;
$keystroke-background: $light-gray;
$keystroke-padding: rem-calc(2 4 0);
$keystroke-radius: $global-radius;
$abbr-underline: 1px dotted $black;
// 5. Typography Helpers
// ---------------------
$lead-font-size: $global-font-size * 1.25;
$lead-lineheight: 1.6;
$subheader-lineheight: 1.4;
$subheader-color: $dark-gray;
$subheader-font-weight: $global-weight-normal;
$subheader-margin-top: 0.2rem;
$subheader-margin-bottom: 0.5rem;
$stat-font-size: 2.5rem;
// 6. Abide
// --------
$abide-inputs: true;
$abide-labels: true;
$input-background-invalid: get-color(alert);
$form-label-color-invalid: get-color(alert);
$input-error-color: get-color(alert);
$input-error-font-size: rem-calc(12);
$input-error-font-weight: $global-weight-bold;
// 7. Accordion
// ------------
$accordion-background: $white;
$accordion-plusminus: true;
$accordion-title-font-size: rem-calc(12);
$accordion-item-color: $primary-color;
$accordion-item-background-hover: $light-gray;
$accordion-item-padding: 1.25rem 1rem;
$accordion-content-background: $white;
$accordion-content-border: 1px solid $light-gray;
$accordion-content-color: $body-font-color;
$accordion-content-padding: 1rem;
// 8. Accordion Menu
// -----------------
$accordionmenu-arrows: true;
$accordionmenu-arrow-color: $primary-color;
$accordionmenu-arrow-size: 6px;
// 9. Badge
// --------
$badge-background: $primary-color;
$badge-color: $white;
$badge-color-alt: $black;
$badge-palette: $foundation-palette;
$badge-padding: 0.3em;
$badge-minwidth: 2.1em;
$badge-font-size: 0.6rem;
// 10. Breadcrumbs
// ---------------
$breadcrumbs-margin: 0 0 $global-margin 0;
$breadcrumbs-item-font-size: rem-calc(11);
$breadcrumbs-item-color: $primary-color;
$breadcrumbs-item-color-current: $black;
$breadcrumbs-item-color-disabled: $medium-gray;
$breadcrumbs-item-margin: 0.75rem;
$breadcrumbs-item-uppercase: true;
$breadcrumbs-item-slash: true;
// 11. Button
// ----------
$button-padding: 0.85em 1em;
$button-margin: 0 0 $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: $white;
$button-color-alt: $black;
$button-radius: $global-radius;
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
);
$button-palette: $foundation-palette;
$button-opacity-disabled: 0.25;
$button-background-hover-lightness: -20%;
$button-hollow-hover-lightness: -50%;
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
// 12. Button Group
// ----------------
$buttongroup-margin: 1rem;
$buttongroup-spacing: 1px;
$buttongroup-child-selector: '.button';
$buttongroup-expand-max: 6;
$buttongroup-radius-on-each: true;
// 13. Callout
// -----------
$callout-background: $white;
$callout-background-fade: 85%;
$callout-border: 1px solid rgba($black, 0.25);
$callout-margin: 0 0 1rem 0;
$callout-padding: 1rem;
$callout-font-color: $body-font-color;
$callout-font-color-alt: $body-background;
$callout-radius: $global-radius;
$callout-link-tint: 30%;
// 14. Card
// --------
$card-background: $white;
$card-font-color: $body-font-color;
$card-divider-background: $light-gray;
$card-border: 1px solid $light-gray;
$card-shadow: none;
$card-border-radius: $global-radius;
$card-padding: $global-padding;
$card-margin: $global-margin;
// 15. Close Button
// ----------------
$closebutton-position: right top;
$closebutton-offset-horizontal: (
small: 0.66rem,
medium: 1rem,
);
$closebutton-offset-vertical: (
small: 0.33em,
medium: 0.5rem,
);
$closebutton-size: (
small: 1.5em,
medium: 2em,
);
$closebutton-lineheight: 1;
$closebutton-color: $dark-gray;
$closebutton-color-hover: $black;
// 16. Drilldown
// -------------
$drilldown-transition: transform 0.15s linear;
$drilldown-arrows: true;
$drilldown-arrow-color: $primary-color;
$drilldown-arrow-size: 6px;
$drilldown-background: $white;
// 17. Dropdown
// ------------
$dropdown-padding: 1rem;
$dropdown-background: $body-background;
$dropdown-border: 1px solid $medium-gray;
$dropdown-font-size: 1rem;
$dropdown-width: 300px;
$dropdown-radius: $global-radius;
$dropdown-sizes: (
tiny: 100px,
small: 200px,
large: 400px,
);
// 18. Dropdown Menu
// -----------------
$dropdownmenu-arrows: true;
$dropdownmenu-arrow-color: $anchor-color;
$dropdownmenu-arrow-size: 6px;
$dropdownmenu-min-width: 200px;
$dropdownmenu-background: $white;
$dropdownmenu-border: 1px solid $medium-gray;
// 19. Forms
// ---------
$fieldset-border: 1px solid $medium-gray;
$fieldset-padding: rem-calc(20);
$fieldset-margin: rem-calc(18 0);
$legend-padding: rem-calc(0 3);
$form-spacing: rem-calc(16);
$helptext-color: $black;
$helptext-font-size: rem-calc(13);
$helptext-font-style: italic;
$input-prefix-color: $black;
$input-prefix-background: $light-gray;
$input-prefix-border: 1px solid $medium-gray;
$input-prefix-padding: 1rem;
$form-label-color: $black;
$form-label-font-size: rem-calc(14);
$form-label-font-weight: $global-weight-normal;
$form-label-line-height: 1.8;
$select-background: $white;
$select-triangle-color: $dark-gray;
$select-radius: $global-radius;
$input-color: $black;
$input-placeholder-color: $medium-gray;
$input-font-family: inherit;
$input-font-size: rem-calc(16);
$input-font-weight: $global-weight-normal;
$input-background: $white;
$input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray;
$input-border-focus: 1px solid $dark-gray;
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
$input-cursor-disabled: not-allowed;
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
$input-number-spinners: true;
$input-radius: $global-radius;
$form-button-radius: $global-radius;
// 20. Label
// ---------
$label-background: $primary-color;
$label-color: $white;
$label-color-alt: $black;
$label-palette: $foundation-palette;
$label-font-size: 0.8rem;
$label-padding: 0.33333rem 0.5rem;
$label-radius: $global-radius;
// 21. Media Object
// ----------------
$mediaobject-margin-bottom: $global-margin;
$mediaobject-section-padding: $global-padding;
$mediaobject-image-width-stacked: 100%;
// 22. Menu
// --------
$menu-margin: 0;
$menu-margin-nested: 1rem;
$menu-item-padding: 0.7rem 1rem;
$menu-item-color-active: $white;
$menu-item-background-active: get-color(primary);
$menu-icon-spacing: 0.25rem;
$menu-item-background-hover: $light-gray;
$menu-border: $light-gray;
// 23. Meter
// ---------
$meter-height: 1rem;
$meter-radius: $global-radius;
$meter-background: $medium-gray;
$meter-fill-good: $success-color;
$meter-fill-medium: $warning-color;
$meter-fill-bad: $alert-color;
// 24. Off-canvas
// --------------
$offcanvas-size: 250px;
$offcanvas-vertical-size: 250px;
$offcanvas-background: $light-gray;
$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
$offcanvas-push-zindex: 1;
$offcanvas-overlap-zindex: 10;
$offcanvas-reveal-zindex: 1;
$offcanvas-transition-length: 0.5s;
$offcanvas-transition-timing: ease;
$offcanvas-fixed-reveal: true;
$offcanvas-exit-background: rgba($white, 0.25);
$maincontent-class: 'off-canvas-content';
// 25. Orbit
// ---------
$orbit-bullet-background: $medium-gray;
$orbit-bullet-background-active: $dark-gray;
$orbit-bullet-diameter: 1.2rem;
$orbit-bullet-margin: 0.1rem;
$orbit-bullet-margin-top: 0.8rem;
$orbit-bullet-margin-bottom: 0.8rem;
$orbit-caption-background: rgba($black, 0.5);
$orbit-caption-padding: 1rem;
$orbit-control-background-hover: rgba($black, 0.5);
$orbit-control-padding: 1rem;
$orbit-control-zindex: 10;
// 26. Pagination
// --------------
$pagination-font-size: rem-calc(14);
$pagination-margin-bottom: $global-margin;
$pagination-item-color: $black;
$pagination-item-padding: rem-calc(3 10);
$pagination-item-spacing: rem-calc(1);
$pagination-radius: $global-radius;
$pagination-item-background-hover: $light-gray;
$pagination-item-background-current: $primary-color;
$pagination-item-color-current: $white;
$pagination-item-color-disabled: $medium-gray;
$pagination-ellipsis-color: $black;
$pagination-mobile-items: false;
$pagination-mobile-current-item: false;
$pagination-arrows: true;
// 27. Progress Bar
// ----------------
$progress-height: 1rem;
$progress-background: $medium-gray;
$progress-margin-bottom: $global-margin;
$progress-meter-background: $primary-color;
$progress-radius: $global-radius;
// 28. Responsive Embed
// --------------------
$responsive-embed-margin-bottom: rem-calc(16);
$responsive-embed-ratios: (
default: 4 by 3,
widescreen: 16 by 9,
);
// 29. Reveal
// ----------
$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
// 30. Slider
// ----------
$slider-width-vertical: 0.5rem;
$slider-transition: all 0.2s ease-in-out;
$slider-height: 0.5rem;
$slider-background: $light-gray;
$slider-fill-background: $medium-gray;
$slider-handle-height: 1.4rem;
$slider-handle-width: 1.4rem;
$slider-handle-background: $primary-color;
$slider-opacity-disabled: 0.25;
$slider-radius: $global-radius;
// 31. Switch
// ----------
$switch-background: $medium-gray;
$switch-background-active: $primary-color;
$switch-height: 2rem;
$switch-height-tiny: 1.5rem;
$switch-height-small: 1.75rem;
$switch-height-large: 2.5rem;
$switch-radius: $global-radius;
$switch-margin: $global-margin;
$switch-paddle-background: $white;
$switch-paddle-offset: 0.25rem;
$switch-paddle-radius: $global-radius;
$switch-paddle-transition: all 0.25s ease-out;
// 32. Table
// ---------
$table-background: $white;
$table-color-scale: 5%;
$table-border: 1px solid smart-scale($table-background, $table-color-scale);
$table-padding: rem-calc(8 10 10);
$table-hover-scale: 2%;
$table-row-hover: darken($table-background, $table-hover-scale);
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
$table-is-striped: true;
$table-striped-background: smart-scale($table-background, $table-color-scale);
$table-stripe: even;
$table-head-background: smart-scale($table-background, $table-color-scale / 2);
$table-head-row-hover: darken($table-head-background, $table-hover-scale);
$table-foot-background: smart-scale($table-background, $table-color-scale);
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
$table-head-font-color: $body-font-color;
$table-foot-font-color: $body-font-color;
$show-header-for-stacked: false;
// 33. Tabs
// --------
$tab-margin: 0;
$tab-background: $white;
$tab-color: $primary-color;
$tab-background-active: $light-gray;
$tab-active-color: $primary-color;
$tab-item-font-size: rem-calc(12);
$tab-item-background-hover: $white;
$tab-item-padding: 1.25rem 1.5rem;
$tab-expand-max: 6;
$tab-content-background: $white;
$tab-content-border: $light-gray;
$tab-content-color: $body-font-color;
$tab-content-padding: 1rem;
// 34. Thumbnail
// -------------
$thumbnail-border: solid 4px $white;
$thumbnail-margin-bottom: $global-margin;
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;
// 35. Title Bar
// -------------
$titlebar-background: $black;
$titlebar-color: $white;
$titlebar-padding: 0.5rem;
$titlebar-text-font-weight: bold;
$titlebar-icon-color: $white;
$titlebar-icon-color-hover: $medium-gray;
$titlebar-icon-spacing: 0.25rem;
// 36. Tooltip
// -----------
$has-tip-font-weight: $global-weight-bold;
$has-tip-border-bottom: dotted 1px $dark-gray;
$tooltip-background-color: $black;
$tooltip-color: $white;
$tooltip-padding: 0.75rem;
$tooltip-font-size: $small-font-size;
$tooltip-pip-width: 0.75rem;
$tooltip-pip-height: $tooltip-pip-width * 0.866;
$tooltip-radius: $global-radius;
// 37. Top Bar
// -----------
$topbar-padding: 0.5rem;
$topbar-background: $secondary-color;
$topbar-submenu-background: $topbar-background;
$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
$topbar-input-width: 200px;
$topbar-unstack-breakpoint: medium;

7
src/styles/app.scss Executable file
View File

@@ -0,0 +1,7 @@
// This file gets imported in every component by the scss cssLoader (see build/utils.js)
// https://github.com/vuejs/vue-loader/issues/328
// Load custom Foundation variables
@import "./settings";
// Load Foundation
@import "~foundation-sites/scss/foundation";

8
src/styles/global.scss Executable file
View File

@@ -0,0 +1,8 @@
// Source Sans Pro font
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600');
// Init Foundation
@include foundation-everything(true);
// Load icon fonts
@import './icons';
// Import Motion UI
@import '~motion-ui/dist/motion-ui';