androiddrew
/
vuejs-playground
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial commit

Browse Source
master
androiddrew 7 years ago
commit a0dd0cd892
10 changed files with 11346 additions and 0 deletions
Show Stats Download Patch File Download Diff File

1
.gitignore vendored
Unescape Escape View File

@ -0,0 +1 @@
bower_components

43
README.md
Unescape Escape View File

@ -0,0 +1,43 @@
Topic: `<meta http-equiv="x-ua-compatible" content="ie=edge">`
Description:
The x-ua-compatible tag allows you to chose what version of
Intenet Explorer the page should be rendered as. This has changed in
modern browsers, so if you are not targeting IE 9 or 8 you can consider
removing this all together. Foundation has this because it supports older
browsers which is why it is included.
If you are using this tag you want it to be at the top of your head.
Topic: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
Description:
YOU SHOULD ALWAYS INCLUDE THIS!
This ultimately sets us up so that our users do not have to scroll horizontally
to view content. It is a big part of responsive design, and the user experience
on a site.
The viewport is the user's visible area of a web page. This of course changes
with the device, for example it will be smaller on a mobile device. So in HTML5
The meta tag received supoort for tracking the viewport.
This tag gives the browser instructions on how to control the page dimensions
and scaling.
The `width=device-width` part sets the width of the page to follow the screen
width of the device
The `initial-scale=1.0` part sets the initial zoom level when the page is first
loaded by the browser
THINGS TO REMEMBER:
Do NOT use large fixed width elements
DO NOT let content rely on a particular viewport width to render well
DO use CSS Media queries to apply different styling for small and large screens
-you still shouldn't be using fixed widths. consider using relative widths
such as `width: 100%`

3
css/.gitignore vendored
Unescape Escape View File

@ -0,0 +1,3 @@
*.css
*.map
!vendor/*.css

447
css/vendor/normalize.css vendored
Unescape Escape View File

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

74
index.html
Unescape Escape View File

@ -0,0 +1,74 @@
<!Doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A vuejs playground">
<title>Vuejs Basics</title>
<link href="https://fonts.googleapis.com/css?family=Martel+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://unpkg.com/vue-resource@1.3.4"></script>
</head>
<body>
<header></header>
<nav></nav>
<main>
<h1>Vue JS Experiments</h1>
<div id="app">
${message}
</div>
<div id="app2">
<span v-bind:title="message">
Hover your mouse over this element to see that the attribute title displays as your message for app2
</span>
</div>
<div id="app3">
<p v-if="seen">This will be displayed if the seen data attribute of the Vue app evaluates to true</p>
<button v-on:click="seen = !seen">Toggle</button>
</div>
<div id="app4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<div id="app5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">Reverse</button>
</div>
<div id="app6">
<p>{{message}}</p>
<input v-model="message" type="text">
</div>
<div id="app7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
<div id="form-wrapper">
<form action="get">
<label for="email">Email:
<input type="email" name="email" placeholder="dirp@email.com">
</label>
<input type="submit" value="Sign me up">
</form>
<legend>
</div>
<div>
<img src="http://placehold.it/320x240" alt="placeholder">
</div>
<div id="app8">
<h3><a href="https://github.com/pagekit/vue-resource">Vue-resource Example:</a></h3>
<ul>
<li v-for="user in users">{{user.name}}</li>
</ul>
</div>
</main>
<footer></footer>
<!--<script type="application/javascript" src="js/vue.js"></script>-->
<script type="application/javascript" src="js/app.js"></script>
</body>
</html>

129
js/app.js
Unescape Escape View File

@ -0,0 +1,129 @@
var app = new Vue(
{
//name only really helps for debugging but it is useful
name: "App One",
//The DOM element that the Vue instance will replace
el: '#app',
//Change the plain text interpolation delimiters.
delimiters: ['${', '}'],
//Here are examples of lifecycle hooks
//All lifecycle hooks are called with their 'this'
// context pointing to the Vue instance invoking it.
// Remember there are no controlers in Vue. Lifecycles fill this function:
// https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
//Full list of hooks can be found:
//https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
beforeCreate: function(){console.log("Before create hook called on " + this.$options.name)}, // Here we are accessing the other non-data properitoes of the Vue instance.
beforeMount: function(){console.log("Before mount hook called")},
mounted: function(){console.log("Mounted hook called")},
beforeUpdate: function(){console.log("Before Update hook called")},
updated: function(){console.log("Updated hook called")},
activated: function(){console.log("activated hook called")},
//Each Vue instance proxies all the properties found in its data object:
data: {
message: "Hello Vue!"
}
}
);
//Here is an example of a callback that fires when the 'message' property changes
app.$watch('message', function(newVal, oldVal){
console.log("The value of message changed from " + oldVal + ' to ' + newVal);
});
var app2 = new Vue(
{
el: "#app2",
data:{
message: 'You loaded this page on ' + new Date()
}
}
);
var app3 = new Vue(
{
el:"#app3",
data: {
seen: true
}
}
);
var app4 = new Vue(
{
el:"#app4",
data:{
todos: [
{text: "Learn Javasript"},
{text: "Learn Vue"},
{text: "Build Something awesome!"},
]
}
}
);
var app5 = new Vue({
el: '#app5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
var app6 = new Vue({
el: "#app6",
data:{
message: "Enter a message"
}
});
//defining a new component called todo-item
//Declaration order matters, None of the previous apps can access this component
Vue.component(
"todo-item",
{
// The todo-item component now accepts a
// "prop", which is like a custom attribute.
// This prop is called todo
props:["todo"],
template: "<li>{{ todo.text }}</li>"
}
);
var app7 = new Vue(
{
el: "#app7",
data:{
groceryList: [
{id: 1, text: "Banana"},
{id: 2, text: "Cheese"},
{id: 3, text: "Tomatoes"},
{id: 4, text: "Cucumbers"},
]
}
}
);
var app8 = new Vue(
{
name: "AJAX Test",
el: "#app8",
data:{
users:[]
},
//Here we are using vue-resource to call an external service and load our component with data
mounted: function(){
this.$http.get('http://jsonplaceholder.typicode.com/users').then(
response => { this.users = response.body;},
response => {console.log('Uh oh hit an error');}
);
},
}
);

10057
js/vendor/vue.js vendored
View File

File diff suppressed because it is too large Load Diff

1
scss/.gitignore vendored
Unescape Escape View File

@ -0,0 +1 @@
.sass-cache

551
scss/_settings.scss
Unescape Escape View File

@ -0,0 +1,551 @@
//_settings.scss
// 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. Close Button
// 15. Drilldown
// 16. Dropdown
// 17. Dropdown Menu
// 18. Flex Video
// 19. Forms
// 20. Label
// 21. Media Object
// 22. Menu
// 23. Off-canvas
// 24. Orbit
// 25. Pagination
// 26. Progress Bar
// 27. Reveal
// 28. Slider
// 29. Switch
// 30. Table
// 31. Tabs
// 32. Thumbnail
// 33. Title Bar
// 34. Tooltip
// 35. Top Bar
//@import 'util/util';
// 1. Global
// ---------
$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$primary-color: #2199e8;
$secondary-color: #777;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #ec5840;
$light-gray: #f7f7f7; //#e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$body-font-family: 'Martel Sans', 'Helvetica Neue', 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;
// 2. Breakpoints
// --------------
/*
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
$breakpoint-classes: (small medium large);
*/
// 3. The Grid
// -----------
/*
$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-responsive-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: $global-weight-normal;
$header-font-style: normal;
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
$header-sizes: (
small: (
'h1': 24,
'h2': 20,
'h3': 19,
'h4': 18,
'h5': 17,
'h6': 16,
),
medium: (
'h1': 48,
'h2': 40,
'h3': 31,
'h4': 25,
'h5': 20,
'h6': 16,
),
);
$header-color: inherit;
$header-lineheight: 1.4;
$header-margin-bottom: 0.5rem;
$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;
$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: $alert-color;
$form-label-color-invalid: $alert-color;
$input-error-color: $alert-color;
$input-error-font-size: rem-calc(12);
$input-error-font-weight: $global-weight-bold;
*/
// 7. Accordion
// ------------
/*
$accordion-background: $white;
$accordion-plusminus: true;
$accordion-item-color: foreground($accordion-background, $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: foreground($accordion-background, $primary-color);
$accordion-content-padding: 1rem;
*/
// 8. Accordion Menu
// -----------------
/*
$accordionmenu-arrows: true;
$accordionmenu-arrow-color: $primary-color;
*/
// 9. Badge
// --------
/*
$badge-background: $primary-color;
$badge-color: foreground($badge-background);
$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: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
);
$button-opacity-disabled: 0.25;
*/
// 12. Button Group
// ----------------
/*
$buttongroup-margin: 1rem;
$buttongroup-spacing: 1px;
$buttongroup-child-selector: '.button';
$buttongroup-expand-max: 6;
*/
// 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. Close Button
// ----------------
/*
$closebutton-position: right top;
$closebutton-offset-horizontal: 1rem;
$closebutton-offset-vertical: 0.5rem;
$closebutton-size: 2em;
$closebutton-lineheight: 1;
$closebutton-color: $dark-gray;
$closebutton-color-hover: $black;
*/
// 15. Drilldown
// -------------
/*
$drilldown-transition: transform 0.15s linear;
$drilldown-arrows: true;
$drilldown-arrow-color: $primary-color;
$drilldown-background: $white;
*/
// 16. Dropdown
// ------------
/*
$dropdown-padding: 1rem;
$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,
);
*/
// 17. Dropdown Menu
// -----------------
/*
$dropdownmenu-arrows: true;
$dropdownmenu-arrow-color: $anchor-color;
$dropdownmenu-min-width: 200px;
$dropdownmenu-background: $white;
$dropdownmenu-border: 1px solid $medium-gray;
*/
// 18. Flex Video
// --------------
/*
$flexvideo-margin-bottom: rem-calc(16);
$flexvideo-ratio: 4 by 3;
$flexvideo-ratio-widescreen: 16 by 9;
*/
// 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: #333;
$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: #333;
$select-radius: $global-radius;
$input-color: $black;
$input-font-family: inherit;
$input-font-size: rem-calc(16);
$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: default;
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
$input-number-spinners: true;
$input-radius: $global-radius;
*/
// 20. Label
// ---------
/*
$label-background: $primary-color;
$label-color: foreground($label-background);
$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-icon-spacing: 0.25rem;
$menu-expand-max: 6;
*/
// 23. Off-canvas
// --------------
/*
$offcanvas-size: 250px;
$offcanvas-background: $light-gray;
$offcanvas-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';
$maincontent-shadow: 0 0 10px rgba($black, 0.5);
*/
// 24. 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;
*/
// 25. 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: foreground($pagination-item-background-current);
$pagination-item-color-disabled: $medium-gray;
$pagination-ellipsis-color: $black;
$pagination-mobile-items: false;
$pagination-arrows: true;
*/
// 26. Progress Bar
// ----------------
/*
$progress-height: 1rem;
$progress-background: $medium-gray;
$progress-margin-bottom: $global-margin;
$progress-meter-background: $primary-color;
$progress-radius: $global-radius;
*/
// 27. Reveal
// ----------
/*
$reveal-background: $white;
$reveal-width: 600px;
$reveal-max-width: $global-width;
$reveal-offset: rem-calc(100);
$reveal-padding: $global-padding;
$reveal-border: 1px solid $medium-gray;
$reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
*/
// 28. Slider
// ----------
/*
$slider-height: 0.5rem;
$slider-width-vertical: $slider-height;
$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;
$slider-transition: all 0.2s ease-in-out;
*/
// 29. 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;
*/
// 30. 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-striped-background: smart-scale($table-background, $table-color-scale);
$table-stripe: even;
$table-head-background: smart-scale($table-background, $table-color-scale / 2);
$table-foot-background: smart-scale($table-background, $table-color-scale);
$table-head-font-color: $body-font-color;
$show-header-for-stacked: false;
*/
// 31. Tabs
// --------
/*
$tab-margin: 0;
$tab-background: $white;
$tab-background-active: $light-gray;
$tab-border: $light-gray;
$tab-item-color: foreground($tab-background, $primary-color);
$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: foreground($tab-background, $primary-color);
$tab-content-padding: 1rem;
*/
// 32. 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;
*/
// 33. 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;
*/
// 34. 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-pip-offset: 1.25rem;
$tooltip-radius: $global-radius;
*/
// 35. Top Bar
// -----------
/*
$topbar-padding: 0.5rem;
$topbar-background: $light-gray;
$topbar-title-spacing: 1rem;
$topbar-input-width: 200px;
*/

40
scss/app.scss
Unescape Escape View File

@ -0,0 +1,40 @@
@import url(../css/normalize.css);
@import '_settings';
h1 {
margin: .67em;
}
body {
font-family: $body-font-family;
background: $light-gray;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
div {
background: #ffffff;
border-left: 5px solid $primary-color;
padding: 15px 15px 15px 15px;
margin: 10px 10px 10px 10px;
box-shadow: 0 1px 1px 0 rgba(50,50,50,0.15);
}
input {
display: block;
margin-bottom: .67em;
padding-left: .67em;
}
select {
margin-bottom: .67em;
}
Write Preview
Loading…
Cancel
Save