UnknownObject
/
quaggaJS
mirror of https://github.com/serratus/quaggaJS.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

examples: CSS cleanup

Browse Source
pull/132/merge
Christoph Oberhofer 8 years ago
parent 620292c509
commit ddc385641a
15 changed files with 96 additions and 495 deletions
Show Stats Download Patch File Download Diff File

202
example/css/styles.css
Unescape Escape View File

@ -1,79 +1,109 @@
@charset "UTF-8"; @charset "UTF-8";
/* usual styles */
/* LESS - http://lesscss.org style sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */
/* Feel free to copy&paste color codes to your application */
/* MIXINS */
/* As hex codes */
/* Main Primary color */
/* Main Secondary color (1) */
/* Main Secondary color (2) */
/* As RGBa codes */
/* Main Primary color */
/* Main Secondary color (1) */
/* Main Secondary color (2) */
/* Generated by Paletton.com ├é┬® 2002-2014 */
/* http://paletton.com */
@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600"); @import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
/* line 1, ../sass/_viewport.scss */
body {
background-color: #FFF;
margin: 0px;
font-family: Ubuntu, sans-serif;
color: #1e1e1e;
font-weight: normal;
padding-top: 0;
}
h1, h2, h3, h4 {
font-family: "Cabin Condensed", sans-serif;
}
header {
background: #FFC600;
padding: 1em;
}
header .headline {
max-width: 640px;
margin: 0 auto;
}
header .headline h1 {
color: #FFDD69;
font-size: 3em;
margin-bottom: 0;
}
header .headline h2 {
margin-top: 0.2em;
}
footer {
background: #0A4DB7;
color: #6C9CE8;
padding: 1em 2em 2em;
}
#container {
width: 640px;
margin: 20px auto;
padding: 10px;
}
#interactive.viewport { #interactive.viewport {
width: 640px; width: 640px;
height: 480px; height: 480px;
} }
/* line 6, ../sass/_viewport.scss */
#interactive.viewport canvas, video { #interactive.viewport canvas, video {
float: left; float: left;
width: 640px; width: 640px;
height: 480px; height: 480px;
} }
/* line 10, ../sass/_viewport.scss */
#interactive.viewport canvas.drawingBuffer, video.drawingBuffer { #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
margin-left: -640px; margin-left: -640px;
} }
/* line 16, ../sass/_viewport.scss */
.controls fieldset { .controls fieldset {
border: none; border: none;
margin: 0;
padding: 0;
} }
/* line 19, ../sass/_viewport.scss */
.controls .input-group { .controls .input-group {
float: left; float: left;
} }
/* line 21, ../sass/_viewport.scss */
.controls .input-group input, .controls .input-group button { .controls .input-group input, .controls .input-group button {
display: block; display: block;
} }
/* line 25, ../sass/_viewport.scss */
.controls .reader-config-group { .controls .reader-config-group {
float: right; float: right;
} }
/* line 28, ../sass/_viewport.scss */
.controls .reader-config-group label { .controls .reader-config-group label {
display: block; display: block;
} }
/* line 30, ../sass/_viewport.scss */
.controls .reader-config-group label span { .controls .reader-config-group label span {
width: 11rem; width: 9rem;
display: inline-block; display: inline-block;
text-align: right; text-align: right;
} }
/* line 37, ../sass/_viewport.scss */
.controls:after { .controls:after {
content: ''; content: '';
display: block; display: block;
clear: both; clear: both;
} }
/* line 44, ../sass/_viewport.scss */
#result_strip { #result_strip {
margin: 10px 0; margin: 10px 0;
border-top: 1px solid #EEE; border-top: 1px solid #EEE;
border-bottom: 1px solid #EEE; border-bottom: 1px solid #EEE;
padding: 10px 0; padding: 10px 0;
} }
/* line 50, ../sass/_viewport.scss */
#result_strip > ul { #result_strip > ul {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -83,41 +113,41 @@
overflow-y: hidden; overflow-y: hidden;
white-space: nowrap; white-space: nowrap;
} }
/* line 59, ../sass/_viewport.scss */
#result_strip > ul > li { #result_strip > ul > li {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 160px; width: 160px;
} }
/* line 63, ../sass/_viewport.scss */
#result_strip > ul > li .thumbnail { #result_strip > ul > li .thumbnail {
padding: 5px; padding: 5px;
margin: 4px; margin: 4px;
border: 1px dashed #CCC; border: 1px dashed #CCC;
} }
/* line 68, ../sass/_viewport.scss */
#result_strip > ul > li .thumbnail img { #result_strip > ul > li .thumbnail img {
max-width: 140px; max-width: 140px;
} }
/* line 71, ../sass/_viewport.scss */
#result_strip > ul > li .thumbnail .caption { #result_strip > ul > li .thumbnail .caption {
white-space: normal; white-space: normal;
} }
/* line 73, ../sass/_viewport.scss */
#result_strip > ul > li .thumbnail .caption h4 { #result_strip > ul > li .thumbnail .caption h4 {
text-align: center; text-align: center;
word-wrap: break-word; word-wrap: break-word;
height: 40px; height: 40px;
margin: 0px; margin: 0px;
} }
/* line 83, ../sass/_viewport.scss */
#result_strip > ul:after { #result_strip > ul:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
} }
/* line 7, ../sass/_overlay.scss */
.scanner-overlay { .scanner-overlay {
display: none; display: none;
width: 640px; width: 640px;
@ -133,21 +163,21 @@
-webkit-box-shadow: #333333 0px 4px 10px; -webkit-box-shadow: #333333 0px 4px 10px;
box-shadow: #333333 0px 4px 10px; box-shadow: #333333 0px 4px 10px;
} }
/* line 20, ../sass/_overlay.scss */
.scanner-overlay > .header { .scanner-overlay > .header {
position: relative; position: relative;
margin-bottom: 14px; margin-bottom: 14px;
} }
/* line 23, ../sass/_overlay.scss */
.scanner-overlay > .header h4, .scanner-overlay > .header .close { .scanner-overlay > .header h4, .scanner-overlay > .header .close {
line-height: 16px; line-height: 16px;
} }
/* line 26, ../sass/_overlay.scss */
.scanner-overlay > .header h4 { .scanner-overlay > .header h4 {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
/* line 30, ../sass/_overlay.scss */
.scanner-overlay > .header .close { .scanner-overlay > .header .close {
position: absolute; position: absolute;
right: 0px; right: 0px;
@ -160,7 +190,7 @@
cursor: pointer; cursor: pointer;
} }
/* line 1, ../sass/_icons.scss */
i.icon-24-scan { i.icon-24-scan {
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -172,11 +202,8 @@ i.icon-24-scan {
vertical-align: text-top; vertical-align: text-top;
} }
@media (min-width: 604px) and (max-width: 1024px) {
/* tablet styles */
}
@media (max-width: 603px) { @media (max-width: 603px) {
/* line 2, ../sass/phone/_core.scss */
#container { #container {
width: 300px; width: 300px;
margin: 10px auto; margin: 10px auto;
@ -184,46 +211,58 @@ i.icon-24-scan {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
/* line 9, ../sass/phone/_core.scss */
#container form.voucher-form input.voucher-code { #container form.voucher-form input.voucher-code {
width: 180px; width: 180px;
} }
} }
@media (max-width: 603px) { @media (max-width: 603px) {
/* line 5, ../sass/phone/_viewport.scss */
.reader-config-group {
width: 100%;
}
.reader-config-group label > span {
width: 50%;
}
.reader-config-group label > select, .reader-config-group label > input {
max-width: calc(50% - 2px);
}
#interactive.viewport { #interactive.viewport {
width: 300px; width: 300px;
height: 300px; height: 300px;
overflow: hidden; overflow: hidden;
} }
/* line 11, ../sass/phone/_viewport.scss */
#interactive.viewport canvas, video { #interactive.viewport canvas, video {
margin-top: -50px; margin-top: -50px;
width: 300px; width: 300px;
height: 400px; height: 400px;
} }
/* line 15, ../sass/phone/_viewport.scss */
#interactive.viewport canvas.drawingBuffer, video.drawingBuffer { #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
margin-left: -300px; margin-left: -300px;
} }
/* line 20, ../sass/phone/_viewport.scss */
#result_strip { #result_strip {
margin-top: 5px; margin-top: 5px;
padding-top: 5px; padding-top: 5px;
} }
/* line 24, ../sass/phone/_viewport.scss */
#result_strip ul.thumbnails > li { #result_strip ul.thumbnails > li {
width: 150px; width: 150px;
} }
/* line 27, ../sass/phone/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail .imgWrapper { #result_strip ul.thumbnails > li .thumbnail .imgWrapper {
width: 130px; width: 130px;
height: 130px; height: 130px;
overflow: hidden; overflow: hidden;
} }
/* line 31, ../sass/phone/_viewport.scss */
#result_strip ul.thumbnails > li .thumbnail .imgWrapper img { #result_strip ul.thumbnails > li .thumbnail .imgWrapper img {
margin-top: -25px; margin-top: -25px;
width: 130px; width: 130px;
@ -231,7 +270,7 @@ i.icon-24-scan {
} }
} }
@media (max-width: 603px) { @media (max-width: 603px) {
/* line 8, ../sass/phone/_overlay.scss */
.overlay.scanner { .overlay.scanner {
width: 640px; width: 640px;
height: 510px; height: 510px;
@ -243,66 +282,17 @@ i.icon-24-scan {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
/* line 17, ../sass/phone/_overlay.scss */
.overlay.scanner > .header { .overlay.scanner > .header {
margin-bottom: 14px; margin-bottom: 14px;
} }
/* line 19, ../sass/phone/_overlay.scss */
.overlay.scanner > .header h4, .overlay.scanner > .header .close { .overlay.scanner > .header h4, .overlay.scanner > .header .close {
line-height: 16px; line-height: 16px;
} }
/* line 22, ../sass/phone/_overlay.scss */
.overlay.scanner > .header .close { .overlay.scanner > .header .close {
height: 16px; height: 16px;
width: 16px; width: 16px;
} }
} }
/* line 15, ../sass/styles.scss */
body {
background-color: #FFF;
margin: 0px;
font-family: Ubuntu, sans-serif;
color: #1e1e1e;
font-weight: normal;
padding-top: 0;
}
/* line 24, ../sass/styles.scss */
h1, h2, h3, h4 {
font-family: "Cabin Condensed", sans-serif;
}
/* line 28, ../sass/styles.scss */
header {
background: #FFC600;
padding: 1em;
}
/* line 31, ../sass/styles.scss */
header .headline {
width: 640px;
margin: 0 auto;
}
/* line 34, ../sass/styles.scss */
header .headline h1 {
color: #FFDD69;
font-size: 3em;
margin-bottom: 0;
}
/* line 39, ../sass/styles.scss */
header .headline h2 {
margin-top: 0.2em;
}
/* line 45, ../sass/styles.scss */
footer {
background: #0A4DB7;
color: #6C9CE8;
padding: 1em 2em 2em;
}
/* line 51, ../sass/styles.scss */
#container {
width: 640px;
margin: 20px auto;
padding: 10px;
}

10
example/sass/_icons.scss
Unescape Escape View File

@ -1,10 +0,0 @@
i.icon-24-scan{
width: 24px;
height: 24px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzFFMjMzNTBFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzFFMjMzNTFFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMUUyMzM0RUU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMUUyMzM0RkU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtQr90wAAAUuSURBVHjanFVLbFRVGP7ua97T9DGPthbamAYYBNSMVbBpjCliWWGIEBMWsnDJxkh8RDeEDW5MDGticMmGBWnSlRSCwgLFNkqmmrRIqzjTznTazkxn5s7c6/efzm0G0Jhwkj/nP+d/nv91tIWFBTQaDQWapkGW67p4ltUub5qmAi0UCqF/a/U2m81tpmddotwwDGSz2dzi4uKSaOucnJycGhsbe1XXdQiIIcdxEAgEtgXq9brySHCht79UXi/8QheawN27d385fPjwuEl6XyKR6LdtW7t06RLK5TKOHj2K/fv3Q87Dw8OYn5/HiRMnMDs7i5mZGQwODiqlPp8PuVwO6XRaOXb16lXl1OnTp5FMJvtosF8M+MWLarWqGJaWlpBKpRRcu3YN4+PjmJ6exsTEhDJw5coVjI6OKgPhcBiZTAbxeBx+vx+XL19Gd3c3Tp48Ka9zqDYgBlTQxYNgMIhIJKLCILkQb+TZsgvdsiyFi+feWRR7oRNZyanQtvW2V4DEUUBiK2eJpeDirSyhCe7F2QPh8fiEp72i9PbsC5G52DbiKZA771yr1dTuGfJ4PQNPFoAyQNR1aNEmsS5eyB3PgjeooMZd2AWvNmzYci/Gea7TeFOcI93jV/K67noGmi4vdRI9gPSDeMLSdKUBZZczlWm1rTtHjLZ24d+WER2tc8N1m+Y+ID74wx0zGYvhg9UNrJdtHJyZRdQfwPsrq9g99xsGlgsYmr6BNzO/IVwsYfjBQ6XYz6JI/72MV366B5/lw0elOkJWGUM3bmKtWjXSLuLaBWhnPnnp0FfoiFi4+TMfVAb2poBkDLjO845uYLEAjL4ALGWBP5YAOsP4AJYBFDaB1HOSVWD2PuV95H2RdV93Lv74/cf6p6Zxq/h6OofeOPJBC39JtONdwOAAViOs4p4OFGTf0Uc8iiyrr9YdQrUnDLsngrVOC0jQib44HlF2RafRZBz1Qy+vfhgK3NJZBlrm+LEm9qWwzFgLU7Ozg0JxZP06jQSRpQ7EerAWDSt6PuhHPmChEAog56fCLvJT5hHTm3OZkz3DyLx7XNWTGEA1GkV14gjWgwbW0ESVjYRwCOuai03L5E7OUBAV4kXSS4auoGIaKOma4m8EA5R1sMEGLh95C+XuLph0WJWpxepYYLtfT0RRgY1KgNODY6BoaChRuEhDCIZQYseuki5KN6hcQHiq7OZNv4/Zq2O6P4Lfkwn46vZjjaYZrIpvWbpzjLErrc4xUGE4avRedpYJalRcIl5hQius/SrPm9xrNOQYJhao6BvNUeWqtY8KaWuNjHOFAr7mM9f4NA4UbKysoUJ8PV9UzVOx6wxDDWUOxnK1pmCD07fOMAvtIsM3l89Dl3HRGhVma9AZMqjOnz2LQqWCxs6dqr3T7x1DTzKJaG8SekcHhg4cgI/56uKdlKnBV/WndqN3YAB/7tyBd3oT6GBIOzs7kc/nDfFdDFT5bS73cp06dQoaPa/Rw/rtO/resTHxxE2m9rCrbSR27UJCcMf1BpiA5rAAGgdfc868fUR1sMwj0cm9Iu9IctweisViB3hhKTHDcHc5jv/LspbyaZrR1OD82/fIlOkuB9LnEWRmDX2TsddUPg3D5gvuc0je0rZaD5EW6G3yjS+A3eeBEWq3XW/Abw1HhUspXADufQb86oW7tZytkYCN//3hHwBvDALPi8EnSOYK8DAOfCc2h4aGcO7cuafkzampqf9UripH12/DtOZbx8ciVGzYy5OO40o25ascGRl5Ssc/AgwAjW3JwqIUjSYAAAAASUVORK5CYII=");
display: inline-block;
background-repeat: no-repeat;
line-height: 24px;
margin-top: 1px;
vertical-align: text-top;
}

48
example/sass/_overlay.scss
Unescape Escape View File

@ -1,48 +0,0 @@
$overlayWidth: $videoWidth;
$overlayHeadline: 16px;
$overlayHeadlineMargin: 14px;
$overlayPadding: 20px;
$overlayHeight: $videoHeight + $overlayHeadlineMargin + $overlayHeadline;
.scanner-overlay {
display: none;
width: $overlayWidth;
height: $overlayHeight;
position: absolute;
padding: $overlayPadding;
top: 50%;
margin-top: -($overlayHeight)/2 - $overlayPadding;
left: 50%;
margin-left: -($overlayWidth + 2*$overlayPadding)/2;
background-color: $overlayBackground;
@include box-shadow(#333333 0px 4px 10px);
& > .header{
position: relative;
margin-bottom: $overlayHeadlineMargin;
h4, .close{
line-height: $overlayHeadline;
}
h4{
margin: 0px;
padding: 0px;
}
.close{
position: absolute;
right: 0px;
top: 0px;
height: $overlayHeadline;
width: $overlayHeadline;
text-align: center;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
}
& > .body{
}
}

3
example/sass/_phone.scss
Unescape Escape View File

@ -1,3 +0,0 @@
@import "phone/core";
@import "phone/viewport";
@import "phone/overlay";

4
example/sass/_tablet.scss
Unescape Escape View File

@ -1,4 +0,0 @@
@include tablet {
/* tablet styles */
}

17
example/sass/_utility.scss
Unescape Escape View File

@ -1,17 +0,0 @@
$tablet_upper: 1024px;
$phone_upper: 603px;
@mixin phone {
@media (max-width: $phone_upper) {
@content;
}
} // @mixin phone
@mixin tablet {
@media (min-width: $phone_upper+1) and (max-width: $tablet_upper) {
@content;
}
} // @mixin tablet

7
example/sass/_variables.scss
Unescape Escape View File

@ -1,7 +0,0 @@
$background_color: #FFF;
$overlayBackground: #FFF;
$videoWidth: 640px;
$videoHeight: 480px;
$text-font: Ubuntu, sans-serif;
$header-font: 'Cabin Condensed', sans-serif;

89
example/sass/_viewport.scss
Unescape Escape View File

@ -1,89 +0,0 @@
#interactive.viewport{
width: $videoWidth;
height: $videoHeight;
}
#interactive.viewport canvas, video{
float: left;
width: $videoWidth;
height: $videoHeight;
&.drawingBuffer{
margin-left: -$videoWidth;
}
}
.controls {
fieldset {
border: none;
}
.input-group {
float: left;
input, button {
display: block;
}
}
.reader-config-group {
float: right;
label {
display: block;
span {
width: 11rem;
display: inline-block;
text-align: right;
}
}
}
&:after {
content:'';
display: block;
clear: both;
}
}
#result_strip{
margin: 10px 0;
border-top: 1px solid #EEE;
border-bottom: 1px solid #EEE;
padding: 10px 0;
& > ul {
padding: 0;
margin: 0;
list-style-type: none;
width: auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
& > li{
display: inline-block;
vertical-align: middle;
width: $videoWidth/4;
.thumbnail{
padding: 5px;
margin: 4px;
border: 1px dashed #CCC;
img{
max-width: $videoWidth/4 - 20px;
}
.caption{
white-space: normal;
h4{
text-align: center;
word-wrap: break-word;
height: 40px;
margin: 0px;
}
}
}
}
&:after{
content: "";
display: table;
clear: both;
}
}
}

55
example/sass/colors.scss
Unescape Escape View File

@ -1,55 +0,0 @@
/* LESS - http://lesscss.org style sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */
/* Feel free to copy&paste color codes to your application */
/* MIXINS */
/* As hex codes */
$color-primary-0: #FFC600; /* Main Primary color */
$color-primary-1: #FFDD69;
$color-primary-2: #FFCE22;
$color-primary-3: #B78E00;
$color-primary-4: #513F00;
$color-secondary-1-0: #0A4DB7; /* Main Secondary color (1) */
$color-secondary-1-1: #6C9CE8;
$color-secondary-1-2: #2E6FD6;
$color-secondary-1-3: #073379;
$color-secondary-1-4: #021636;
$color-secondary-2-0: #5809BB; /* Main Secondary color (2) */
$color-secondary-2-1: #A36BE9;
$color-secondary-2-2: #782DD8;
$color-secondary-2-3: #3A077C;
$color-secondary-2-4: #190237;
/* As RGBa codes */
$rgba-primary-0: rgba(255,198, 0,1); /* Main Primary color */
$rgba-primary-1: rgba(255,221,105,1);
$rgba-primary-2: rgba(255,206, 34,1);
$rgba-primary-3: rgba(183,142, 0,1);
$rgba-primary-4: rgba( 81, 63, 0,1);
$rgba-secondary-1-0: rgba( 10, 77,183,1); /* Main Secondary color (1) */
$rgba-secondary-1-1: rgba(108,156,232,1);
$rgba-secondary-1-2: rgba( 46,111,214,1);
$rgba-secondary-1-3: rgba( 7, 51,121,1);
$rgba-secondary-1-4: rgba( 2, 22, 54,1);
$rgba-secondary-2-0: rgba( 88, 9,187,1); /* Main Secondary color (2) */
$rgba-secondary-2-1: rgba(163,107,233,1);
$rgba-secondary-2-2: rgba(120, 45,216,1);
$rgba-secondary-2-3: rgba( 58, 7,124,1);
$rgba-secondary-2-4: rgba( 25, 2, 55,1);
/* Generated by Paletton.com © 2002-2014 */
/* http://paletton.com */

1
example/sass/fonts.scss
Unescape Escape View File

@ -1 +0,0 @@
@import url('http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600');

15
example/sass/phone/_core.scss
Unescape Escape View File

@ -1,15 +0,0 @@
@include phone {
#container{
width: 300px;
margin: 10px auto;
@include box-shadow(none);
form.voucher-form{
input{
&.voucher-code{
width: 180px;
}
}
}
}
}

28
example/sass/phone/_overlay.scss
Unescape Escape View File

@ -1,28 +0,0 @@
@include phone {
$overlayWidth: $videoWidth;
$overlayHeadline: 16px;
$overlayHeadlineMargin: 14px;
$overlayPadding: 20px;
$overlayHeight: $videoHeight + $overlayHeadlineMargin + $overlayHeadline;
.overlay.scanner {
width: $overlayWidth;
height: $overlayHeight;
padding: $overlayPadding;
margin-top: -($overlayHeight)/2 - $overlayPadding;
margin-left: -($overlayWidth + 2*$overlayPadding)/2;
background-color: $overlayBackground;
@include box-shadow(none);
& > .header{
margin-bottom: $overlayHeadlineMargin;
h4, .close{
line-height: $overlayHeadline;
}
.close{
height: $overlayHeadline;
width: $overlayHeadline;
}
}
}
}

42
example/sass/phone/_viewport.scss
Unescape Escape View File

@ -1,42 +0,0 @@
@include phone {
$videoWidth: 300px;
$videoHeight: 400px;
#interactive.viewport{
width: $videoWidth;
height: $videoWidth;
overflow: hidden;
}
#interactive.viewport canvas, video{
margin-top: ($videoWidth - $videoHeight)/2;
width: $videoWidth;
height: $videoHeight;
&.drawingBuffer{
margin-left: -$videoWidth;
}
}
#result_strip{
margin-top: 5px;
padding-top: 5px;
ul.thumbnails{
& > li{
width: $videoWidth/2;
.thumbnail{
.imgWrapper{
width: $videoWidth/2 - 20px;
height: $videoWidth/2 - 20px;
overflow: hidden;
img{
margin-top: (($videoWidth/2 - 20px) - ($videoHeight/2 - 20px))/2;
width: $videoWidth/2 - 20px;
height: $videoHeight/2 - 20px;
}
}
}
}
}
}
}

14
example/sass/scanner.scss
Unescape Escape View File

@ -1,14 +0,0 @@
@import "compass/css3";
@import "variables";
@import "utility";
/* usual styles */
@import "fonts";
@import "viewport";
@import "overlay";
@import "icons";
@import "tablet";
@import "phone";

56
example/sass/styles.scss
Unescape Escape View File

@ -1,56 +0,0 @@
@import "compass/css3";
@import "variables";
@import "utility";
/* usual styles */
@import "colors";
@import "fonts";
@import "viewport";
@import "overlay";
@import "icons";
@import "tablet";
@import "phone";
body{
background-color: #FFF;
margin: 0px;
font-family: $text-font;
color: #1e1e1e;
font-weight: normal;
padding-top: 0;
}
h1,h2,h3,h4 {
font-family: $header-font;
}
header {
background: $color-primary-0;
padding: 1em;
.headline {
width: 640px;
margin: 0 auto;
h1 {
color: $color-primary-1;
font-size: 3em;
margin-bottom: 0;
}
h2 {
margin-top: 0.2em;
}
}
}
footer {
background: $color-secondary-1-0;
color: $color-secondary-1-1;
padding: 1em 2em 2em;
}
#container{
width: 640px;
margin: 20px auto;
padding: 10px;
}
Write Preview
Loading…
Cancel
Save