mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-12 16:14:37 +02:00
Merge branch 'CKGrafico-feature/sass' into sass
# Conflicts: # package.json # static/js/webslides.js # static/js/webslides.min.js
This commit is contained in:
Antonio Laguna
@@ -25,11 +25,8 @@
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
|
||||
|
||||
<!-- CSS Base -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="static/css/base.css">
|
||||
|
||||
<!-- CSS Colors -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="static/css/colors.css">
|
||||
<!-- CSS WebSlides -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
|
||||
|
||||
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
|
||||
|
||||
11
package.json
11
package.json
@@ -28,22 +28,29 @@
|
||||
},
|
||||
"homepage": "https://github.com/webslides/webslides#readme",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.7.7",
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-core": "^6.24.1",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-jest": "^19.0.0",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-preset-env": "^1.4.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"css-loader": "^0.28.0",
|
||||
"eslint": "^3.19.0",
|
||||
"eslint-loader": "^1.7.1",
|
||||
"eslint-plugin-jest": "^19.0.1",
|
||||
"extract-text-webpack-plugin": "^2.1.0",
|
||||
"jest": "^19.0.2",
|
||||
"node-sass": "^4.5.2",
|
||||
"npm-run-all": "^4.0.2",
|
||||
"postcss-loader": "^1.3.3",
|
||||
"rimraf": "^2.6.1",
|
||||
"sass-loader": "^6.0.3",
|
||||
"simulant": "^0.2.2",
|
||||
"smart-banner-webpack-plugin": "^3.0.1",
|
||||
"style-loader": "^0.16.1",
|
||||
"webpack": "^2.4.1",
|
||||
"webpack-dev-server": "^2.4.4"
|
||||
"webpack-dev-server": "^2.4.5"
|
||||
},
|
||||
"scripts": {
|
||||
"prebuild": "rimraf static/js/webslide*",
|
||||
|
||||
7
postcss.config.js
Normal file
7
postcss.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('autoprefixer')({
|
||||
browsers: ['last 2 versions'],
|
||||
})
|
||||
]
|
||||
};
|
||||
@@ -1,3 +1,4 @@
|
||||
import WebSlides from './modules/webslides';
|
||||
require('../scss/full.scss');
|
||||
|
||||
window.WebSlides = WebSlides;
|
||||
|
||||
3
src/scss/_base.scss
Normal file
3
src/scss/_base.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
0
src/scss/_colors.scss
Normal file
0
src/scss/_colors.scss
Normal file
2
src/scss/full.scss
Normal file
2
src/scss/full.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import 'base';
|
||||
@import 'colors';
|
||||
6870
static/css/base.css
6870
static/css/base.css
File diff suppressed because it is too large
Load Diff
@@ -1,937 +0,0 @@
|
||||
/*=========================================
|
||||
WebSlides - Colors
|
||||
=========================================== */
|
||||
|
||||
/* == Backgrounds == */
|
||||
|
||||
/* .bg-primary */
|
||||
/* .bg-secondary */
|
||||
/* .bg-light */
|
||||
|
||||
/* == General == */
|
||||
/* .bg-white */
|
||||
/* .bg-black */
|
||||
/* .bg-black-blue */
|
||||
/* .bg-brown */
|
||||
/* .bg-blue */
|
||||
/* .bg-gray */
|
||||
/* .bg-purple */
|
||||
/* .bg-red */
|
||||
|
||||
/* == Brands == */
|
||||
/* .bg-apple */
|
||||
/* .bg-facebook */
|
||||
|
||||
/* == Gradients == */
|
||||
/* .bg-gradient-r (radial) */
|
||||
/* .bg-gradient-h (horizontal) */
|
||||
/* .bg-gradient-v (vertical) */
|
||||
/* .bg-gradient-white */
|
||||
/* .bg-gradient-gray */
|
||||
|
||||
/* == Transparent/Opacity Black == */
|
||||
/* .bg-trans-dark */
|
||||
/* .bg-trans-light */
|
||||
/* .bg-trans-gradient */
|
||||
|
||||
|
||||
/*=========================================
|
||||
Base
|
||||
=========================================== */
|
||||
|
||||
body,
|
||||
/*index of slides: mini-slides same bg color as body */
|
||||
#webslides-zoomed.grid > .column > .wrap-zoom {
|
||||
color: #333;
|
||||
background-color: #f7f9fb;
|
||||
}
|
||||
:focus {
|
||||
box-shadow: 0 0 2px rgba(150, 187, 238, 1);
|
||||
}
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
[class*="bg-"] a,
|
||||
[class*="bg-gradient-"] a {
|
||||
color: #bce;
|
||||
}
|
||||
.bg-brown a {color: #c23;}
|
||||
|
||||
a,
|
||||
.bg-white a,
|
||||
.bg-light a,.bg-gradient-white a {
|
||||
color: #44d;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #3af;
|
||||
}
|
||||
.flexblock li>a,[class*="bg-"] li>a,
|
||||
[class*="bg-gradient-"] li>a,
|
||||
article header a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: rgba(0, 20, 80, 0.2);
|
||||
background: radial-gradient(ellipse at center, rgba(0, 20, 80, 0.2) 0, rgba(255, 255, 255, 0) 75%);
|
||||
}
|
||||
|
||||
hr:after {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
bbbr,
|
||||
acronym {
|
||||
border-bottom: 1px dotted #333;
|
||||
}
|
||||
|
||||
mark,
|
||||
ins {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
}
|
||||
|
||||
::-webkit-selection {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid rgba(0, 20, 80, 0.1);
|
||||
box-shadow: 0 8px 16px rgba(0,20,80,.04),0 4px 16px rgba(0,0,0,.08);
|
||||
background: #fff;
|
||||
|
||||
}
|
||||
pre:hover {
|
||||
box-shadow: 0 8px 16px rgba(0,40,160,.08),0 8px 24px rgba(0,0,0,.08);
|
||||
|
||||
}
|
||||
code,[class*="bg-"] pre {
|
||||
background-color: rgba(255, 255, 255, 0.09);
|
||||
}
|
||||
|
||||
.bg-white code{
|
||||
background: rgba(0, 20, 80, 0.03);
|
||||
}
|
||||
/*================================================
|
||||
Slides - Backgrounds <section class="bg-primary">
|
||||
================================================== */
|
||||
|
||||
/*3 Corp Colors*/
|
||||
|
||||
.bg-primary {
|
||||
background-color: #44d;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: #67d;
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: #edf2f7;
|
||||
}
|
||||
|
||||
/*General Colors*/
|
||||
|
||||
.bg-black {
|
||||
background-color: #111;
|
||||
}
|
||||
.bg-black-blue {
|
||||
background-color: #123;
|
||||
}
|
||||
.bg-blue {
|
||||
background-color: #346;
|
||||
}
|
||||
.bg-brown {
|
||||
background-color: #f8f8f9;
|
||||
}
|
||||
.bg-gray {
|
||||
background-color: #d5d9e2;
|
||||
}
|
||||
.bg-green {
|
||||
background-color: #077;
|
||||
}
|
||||
.bg-purple {
|
||||
background-color: #62b;
|
||||
}
|
||||
|
||||
.bg-red {
|
||||
background-color: #c23;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: #fff;
|
||||
}
|
||||
[class*="bg-"] .bg-white {
|
||||
text-shadow: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* BG Apple Keynote*/
|
||||
|
||||
.bg-apple {
|
||||
background: linear-gradient(to bottom, #000 0%, #1a2028 50%, #293845 100%);
|
||||
}
|
||||
|
||||
|
||||
/* BG Facebook */
|
||||
|
||||
.bg-facebook {
|
||||
background: #3b5998;
|
||||
}
|
||||
|
||||
|
||||
/*Font Color*/
|
||||
.bg-trans-dark,.bg-trans-gradient,
|
||||
.bg-primary,
|
||||
.bg-secondary,
|
||||
.bg-blue,
|
||||
.bg-green,.bg-purple,.bg-red,.bg-facebook,.bg-apple,[class*="bg-black"],[class*="bg-gradient-"] {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 #013;
|
||||
}
|
||||
|
||||
.bg-light p {
|
||||
color: #456;
|
||||
}
|
||||
/*.bg-white p,*/
|
||||
.bg-brown p{color: #666;
|
||||
}
|
||||
|
||||
/*Transparent/Opacity*/
|
||||
|
||||
.bg-trans-dark {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.bg-trans-light {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/*Covers/Longforms...*/
|
||||
.bg-trans-gradient{
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
|
||||
}
|
||||
|
||||
/*Horizontal Gradient*/
|
||||
|
||||
.bg-gradient-h {
|
||||
background: linear-gradient(134deg,#32b 0,#62b 100%);
|
||||
}
|
||||
|
||||
|
||||
/*Vertical Gradient*/
|
||||
|
||||
.bg-gradient-v {
|
||||
background: linear-gradient(to top, #62b 0%, #32b 100%);
|
||||
}
|
||||
|
||||
|
||||
/*Radial Gradient*/
|
||||
|
||||
.bg-gradient-r {
|
||||
background: radial-gradient(ellipse at center, #62b 0%, #32b 100%);
|
||||
}
|
||||
|
||||
/*White Gradient (vertical)*/
|
||||
.bg-gradient-white {
|
||||
background: linear-gradient(180deg,#f2f4f6 0,#fff 100%);
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*Gray Gradient (horizontal)*/
|
||||
.bg-gradient-gray{
|
||||
background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
}
|
||||
/*Border/Frame*/
|
||||
.frame {
|
||||
border: .8rem solid #fff;
|
||||
}
|
||||
|
||||
/*Layer/Box Shadow*/
|
||||
.shadow,.pre {
|
||||
position: relative;
|
||||
}
|
||||
.shadow:before,.shadow:after {
|
||||
box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
|
||||
}
|
||||
|
||||
/*============================
|
||||
TYPOGRAPHY
|
||||
============================== */
|
||||
|
||||
/* -- Horizontal separator -- */
|
||||
|
||||
.text-separator:before {
|
||||
background-color: rgba(170, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* -- Pull Quote (Right/Left) -- */
|
||||
|
||||
[class*="text-pull-"] {
|
||||
border-top: 4px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
img[class*="text-pull-"],figure[class*="text-pull-"] {
|
||||
border-top: none;
|
||||
}
|
||||
/* -- Context -- */
|
||||
|
||||
[class*="bg-"] .text-context:before {
|
||||
background-color: #fff;
|
||||
}
|
||||
.text-context:before,.bg-white .text-context:before{
|
||||
background-color: rgba(0, 20, 80, 0.2);
|
||||
}
|
||||
|
||||
/* -- Text shadow -- */
|
||||
.text-shadow {
|
||||
text-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* -- time, ampersands, prepositions (for, of...), symbols... -- */
|
||||
|
||||
[class*="card-"] time,
|
||||
h1 span {
|
||||
color: #abd;
|
||||
}
|
||||
|
||||
/* -- <pre> comment -- */
|
||||
.code-comment {
|
||||
color: rgba(70, 170, 130, 0.9);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*=========================================
|
||||
Header/Nav
|
||||
=========================================== */
|
||||
|
||||
header[role=banner] {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav[role=navigation] li a {
|
||||
background-color: rgba(50, 50, 50, .9);
|
||||
}
|
||||
|
||||
nav[role=navigation] li a:hover {
|
||||
background-color: rgba(50, 50, 50, .7);
|
||||
}
|
||||
|
||||
nav[role=navigation] li a,
|
||||
nav[role=navigation] li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
nav[role=navigation] li.active a {
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
nav li.twitter a:hover {
|
||||
background-color: #1da1f3;
|
||||
}
|
||||
nav li.facebook a:hover {
|
||||
background-color: #3b5998;
|
||||
}
|
||||
|
||||
nav li.linkedin a:hover {
|
||||
background-color: #1683bb;
|
||||
}
|
||||
|
||||
nav li.dribbble a:hover {
|
||||
background-color: #ea4c89;
|
||||
}
|
||||
|
||||
nav li.github a:hover {
|
||||
background-color: #60b044;
|
||||
}
|
||||
|
||||
nav li.email a:hover {
|
||||
background: #dd4b39;
|
||||
}
|
||||
|
||||
/*===================================================
|
||||
.flexblock li hover/active
|
||||
===================================================== */
|
||||
|
||||
.flexblock li.active a,
|
||||
.metrics li:hover,
|
||||
.specs li:hover,.reasons li:hover {
|
||||
background-color: rgba(0, 20, 80, 0.03);
|
||||
}
|
||||
|
||||
/*=========================================
|
||||
Features & Clients List
|
||||
=========================================== */
|
||||
|
||||
.features li,.clients li {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
[class*="bg-"] .features li,
|
||||
[class*="bg-"] .clients li {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.features li:hover,.clients li:hover {
|
||||
box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
|
||||
}
|
||||
/*.features li span,.features li svg{color: #44d;}*/
|
||||
|
||||
/*============================
|
||||
.flexblock with border
|
||||
============================== */
|
||||
|
||||
.border {
|
||||
border-right: 1px solid rgba(0, 20, 80, 0.1);
|
||||
border-bottom: 1px solid rgba(0, 20, 80, 0.1);
|
||||
}
|
||||
|
||||
.border li {
|
||||
border-top: 1px solid rgba(0, 20, 80, 0.1);
|
||||
border-left: 1px solid rgba(0, 20, 80, 0.1);
|
||||
}
|
||||
|
||||
.flexblock.border li li {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*===========================================
|
||||
flexblock.steps
|
||||
============================================= */
|
||||
|
||||
.steps li:nth-child(1) {
|
||||
background-color: #e8eef7;
|
||||
}
|
||||
|
||||
.steps li:nth-child(2) {
|
||||
background-color: #dde5f3;
|
||||
}
|
||||
|
||||
.steps li:nth-child(3) {
|
||||
background-color: #cdd8ec;
|
||||
}
|
||||
|
||||
.steps li:nth-child(4) {
|
||||
background-color: #bbcdec;
|
||||
}
|
||||
|
||||
.process {
|
||||
border-top: 15px solid transparent;
|
||||
border-bottom: 15px solid transparent;
|
||||
}
|
||||
|
||||
.steps li:hover,
|
||||
.steps.blink li:hover>a {
|
||||
background-color: #b8cef7;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.process.step-2 {
|
||||
border-left-color: #e8eef7;
|
||||
}
|
||||
.process.step-3 {
|
||||
border-left-color: #dde5f3;
|
||||
}
|
||||
.process.step-4 {
|
||||
border-left-color: #cdd8ec;
|
||||
}
|
||||
.steps li:hover + li [class*="step-"] {
|
||||
border-left-color: #b8cef7;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*=========================================================
|
||||
Items: You can use for settings, drag&drop, close/delete...
|
||||
=========================================================== */
|
||||
|
||||
.specs li:after {
|
||||
background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%);
|
||||
}
|
||||
|
||||
.specs li:last-child:after {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/*.specs li {background: rgba(255,255,255,0.2);}*/
|
||||
|
||||
/*=========================================================
|
||||
Why/Steps/Motivation/Reasons - Decimal/Numbers
|
||||
=========================================================== */
|
||||
|
||||
.reasons li:after {
|
||||
background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%);
|
||||
}
|
||||
|
||||
.reasons li:last-child:after {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/*=========================================
|
||||
Overlays
|
||||
=========================================== */
|
||||
|
||||
.overlay {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
/*background-color: rgba(255,255,255 , 0.9);*/
|
||||
/*border: 3px double #fff;*/
|
||||
}
|
||||
|
||||
li:hover .overlay {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.overlay,
|
||||
.overlay a {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 #111;
|
||||
}
|
||||
|
||||
|
||||
/*=========================================
|
||||
Gallery li+.overlay+image
|
||||
=========================================== */
|
||||
|
||||
.gallery li {
|
||||
background-color: rgba(0, 20, 80, 0.06);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.gallery li figcaption {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.flexblock.gallery li:hover {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.gallery li footer {
|
||||
border-top:1px solid rgba(0,20,80,0.1);
|
||||
}
|
||||
|
||||
.gallery li a {
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
}
|
||||
.flesblock.gallery li a footer{color: #aaa;}
|
||||
/*Arrow */
|
||||
|
||||
.gallery li figcaption:before {
|
||||
border: .8rem solid black;
|
||||
border-color: transparent transparent #fff #fff;
|
||||
/*box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*=========================================
|
||||
Plans / Pricing
|
||||
=========================================== */
|
||||
|
||||
.plans>li div,
|
||||
.flexblock.plans li:hover div {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.plans>li:hover,
|
||||
.plans>li:nth-child(2) {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.plans:hover li:nth-child(2):not(:hover) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.plans li h2 {
|
||||
background-color: rgba(0, 20, 80, 0.5);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.plans ul li {
|
||||
border-bottom: 1px solid rgba(0, 20, 80, 0.1);
|
||||
}
|
||||
|
||||
.plans ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.plans>li>a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.plans>li>a {
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/*============================
|
||||
Activity/CV/Timeline/News
|
||||
============================== */
|
||||
|
||||
.activity li {
|
||||
border-top: .1rem solid rgba(0, 20, 80, 0.1);
|
||||
}
|
||||
|
||||
.activity li:hover {
|
||||
background-color: rgba(0, 20, 80, 0.02);
|
||||
}
|
||||
|
||||
|
||||
/*=========================================
|
||||
Resume/Work/CV/Portfolio
|
||||
=========================================== */
|
||||
|
||||
.work-label,
|
||||
.work li a {
|
||||
border-bottom: 1px solid rgba(0, 20, 80, 0.1);
|
||||
}
|
||||
|
||||
.work li:nth-child(odd)>a {
|
||||
background-color: rgba(0, 20, 80, 0.03);
|
||||
}
|
||||
|
||||
.work li a:hover {
|
||||
background-color: rgba(0, 20, 80, 0.04);
|
||||
}
|
||||
|
||||
|
||||
/*===========================================
|
||||
Clients / Services / Logos...
|
||||
============================================= */
|
||||
|
||||
|
||||
.clients.border figcaption {border-top:1px solid rgba(0,20,80,0.1);
|
||||
}
|
||||
/*.clients>li {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
*/
|
||||
|
||||
/*====================
|
||||
LOGOS
|
||||
====================== */
|
||||
|
||||
img.blacklogo {
|
||||
background: none;
|
||||
/* --- Images (black logo/image) --- */
|
||||
-webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
|
||||
filter: grayscale(100%) brightness(10%) contrast(100%);
|
||||
}
|
||||
|
||||
|
||||
/* --- Images (gray logo/image) --- */
|
||||
|
||||
img.graylogo {
|
||||
-webkit-filter: grayscale(100%) brightness(10%) contrast(10%);
|
||||
filter: grayscale(100%) brightness(10%) contrast(10%);
|
||||
}
|
||||
|
||||
|
||||
/* --- Images (white Logo/Image) --- */
|
||||
|
||||
img.whitelogo {
|
||||
-webkit-filter: brightness(0) invert(1);
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
|
||||
/* --- Logo/Images Hover --- */
|
||||
|
||||
li:hover img.blacklogo,
|
||||
li:hover img.graylogo,
|
||||
img.blacklogo:hover,img.graylogo:hover {
|
||||
background: none;
|
||||
/*Images - Original Color*/
|
||||
filter: grayscale(0%);
|
||||
-webkit-filter: grayscale(0%);
|
||||
filter: none;
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
|
||||
/*=========================================================
|
||||
Cards
|
||||
=========================================================== */
|
||||
|
||||
[class*="card-"]>a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* --- card ul specs --- */
|
||||
|
||||
.description>li {
|
||||
border-bottom: 1px solid rgba(0, 20, 80, 0.1);
|
||||
}
|
||||
|
||||
.description>li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/*== Figure Background === */
|
||||
|
||||
[class*="card-"][class*="bg-"] figure {
|
||||
background-color: rgba(0, 20, 80, 0.06);
|
||||
}
|
||||
|
||||
/*== Ficaption Cards === */
|
||||
|
||||
[class*="card"] figcaption,
|
||||
[class*="card"] figcaption a {
|
||||
color: #fff;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/*===CTA (Call to Action - Numbers, Price, Promo...) ===== */
|
||||
.cta .benefit {
|
||||
border-left-width: 1px;
|
||||
border-style: solid;
|
||||
border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
|
||||
-webkit-border-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
|
||||
-moz-border-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*=========================================
|
||||
Tables
|
||||
=========================================== */
|
||||
|
||||
table td,
|
||||
th,
|
||||
thead {
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
thead {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
tr:nth-child(even)>td {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
tr>td {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
td:hover,
|
||||
tr:nth-child(even)>td:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
|
||||
/*============================
|
||||
Browser (Screenshots)
|
||||
============================== */
|
||||
|
||||
.browser {
|
||||
border: 1px solid rgba(0, 20, 80, 0.1);
|
||||
}
|
||||
|
||||
.browser:hover {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
/*=== Topbar === */
|
||||
|
||||
.browser:before {
|
||||
background-color: rgba(0, 20, 80, 0.1);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
border-bottom: 1px solid rgba(0, 20, 80, 0.2);
|
||||
}
|
||||
|
||||
.browser:hover:before {
|
||||
background-color: rgba(0, 20, 80, 0.12);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/*=========================================
|
||||
Forms
|
||||
=========================================== */
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background-color: #fafbfc;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
|
||||
}
|
||||
input:focus::-moz-placeholder {
|
||||
color: #ddd;
|
||||
}
|
||||
input:focus::-webkit-input-placeholder {
|
||||
color: #ddd;
|
||||
}
|
||||
a.button,[class*="badge-"]
|
||||
button[type="submit"],
|
||||
input {
|
||||
box-shadow: 0px 10px 16px -8px rgba(0, 20, 80, 0.3);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button[type="submit"],
|
||||
input[type="submit"],
|
||||
.button,.button:hover,
|
||||
button[type="submit"]:hover,
|
||||
input[type="submit"]:hover
|
||||
{
|
||||
border: 1px solid #44d;
|
||||
}
|
||||
|
||||
button[type="submit"],
|
||||
input[type="submit"],
|
||||
.button,.button:hover,button[type="submit"]:hover,input[type="submit"]:hover {
|
||||
color: #fff;
|
||||
background-color: #44d;
|
||||
text-shadow: 0 1px 0 #123;
|
||||
}
|
||||
.button:active,button[type="submit"]:active,input[type="submit"]:active {
|
||||
background-color: #17d;
|
||||
}
|
||||
.ghost,.ghost:hover {background: none;color: inherit;text-shadow: none;}
|
||||
.bg-primary select,
|
||||
.bg-primary textarea,
|
||||
.bg-primary .button,
|
||||
.bg-primary button,.bg-primary button:hover,
|
||||
.bg-primary input,
|
||||
[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost
|
||||
{
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
[class*="bg-"] a.button {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bg-white a.button.ghost,.bg-gradient-white a.button.ghost {color: #333;border: 1px solid #44d;}
|
||||
|
||||
:disabled,
|
||||
button:disabled:hover {
|
||||
background-color: #eee;
|
||||
border-color: #eee;
|
||||
color: #ccc;
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid #44d;
|
||||
background-color: rgba(0, 20, 80, 0.2)
|
||||
}
|
||||
|
||||
legend {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Inputs/Buttons - hover */
|
||||
|
||||
input:hover,
|
||||
select:hover {
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
/* App Store Badges */
|
||||
|
||||
[class*="badge-"] {
|
||||
border: 1px solid #345;
|
||||
background-color: #000;
|
||||
/* Transparent Button */
|
||||
/* background: none;*/
|
||||
}
|
||||
|
||||
|
||||
form .flexblock li:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/*============================
|
||||
Table of Contents
|
||||
============================== */
|
||||
|
||||
.toc,
|
||||
.toc ol>li:before,
|
||||
.chapter {
|
||||
background-color: #f7f9fb;
|
||||
}
|
||||
|
||||
.toc li .toc-page:before {
|
||||
border-bottom: 1px dotted rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
|
||||
/*============================
|
||||
Slides (Counter/Arrows)
|
||||
============================== */
|
||||
|
||||
|
||||
/*#navigation:hover {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
*/
|
||||
#counter,
|
||||
#navigation a {
|
||||
color: #abc;
|
||||
}
|
||||
|
||||
#webslides:hover #navigation a:hover {
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
/*============================
|
||||
Footer
|
||||
============================== */
|
||||
|
||||
footer[role=contentinfo] {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/*footer:hover {
|
||||
background-color:rgba(255,255,255 , 0.3);
|
||||
}
|
||||
*/
|
||||
|
||||
/*============================
|
||||
Slides Index
|
||||
============================== */
|
||||
|
||||
#webslides-zoomed.grid > .column > .wrap-zoom {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
#webslides-zoomed.grid > .column > .wrap-zoom:hover {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.text-slide-number {
|
||||
/*background-color: rgba(255, 255, 255, 0.1);*/
|
||||
color: #456;
|
||||
text-shadow: 0 1px 0 #fafafa;
|
||||
}
|
||||
11
static/css/webslides.css
Normal file
11
static/css/webslides.css
Normal file
@@ -0,0 +1,11 @@
|
||||
/*!
|
||||
* Name: WebSlides
|
||||
* Version: 1.3.1
|
||||
* Date: 2017-05-01
|
||||
* Description: Making HTML presentations easy
|
||||
* URL: https://github.com/webslides/webslides#readme
|
||||
* Credits: @jlantunez, @LuisSacristan, @Belelros
|
||||
*/
|
||||
a {
|
||||
display: -ms-flexbox;
|
||||
display: flex; }
|
||||
@@ -1,7 +1,7 @@
|
||||
/*!
|
||||
* Name: WebSlides
|
||||
* Version: 1.3.1
|
||||
* Date: 2017-04-29
|
||||
* Date: 2017-05-01
|
||||
* Description: Making HTML presentations easy
|
||||
* URL: https://github.com/webslides/webslides#readme
|
||||
* Credits: @jlantunez, @LuisSacristan, @Belelros
|
||||
@@ -71,7 +71,7 @@
|
||||
/******/ __webpack_require__.p = "/static/js/";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 5);
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 6);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
@@ -79,7 +79,7 @@
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(18);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(19);
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
@@ -238,8 +238,7 @@ var DOM = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the element is visible.This is only intended
|
||||
* to be used in conjunction with DOM.hide and DOM.show
|
||||
* Checks if the element is visible.
|
||||
* @param {Element} el Element to check.
|
||||
* @return {boolean}
|
||||
*/
|
||||
@@ -247,7 +246,7 @@ var DOM = function () {
|
||||
}, {
|
||||
key: 'isVisible',
|
||||
value: function isVisible(el) {
|
||||
return el.style.display == '';
|
||||
return el.offsetParent !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -304,9 +303,9 @@ var DOM = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the integer value of a style property
|
||||
* @param {string} prop CSS property value
|
||||
* @return {integer} The property without the units
|
||||
* Gets the integer value of a style property.
|
||||
* @param {string} prop CSS property value.
|
||||
* @return {Number} The property without the units.
|
||||
*/
|
||||
|
||||
}, {
|
||||
@@ -316,10 +315,10 @@ var DOM = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* Wraps a HTML structure arrond a element
|
||||
* @param {Element} elem the element to be wrapped
|
||||
* @param {string} tag the new element tag
|
||||
* @return {Element} the new element
|
||||
* Wraps a HTML structure around an element.
|
||||
* @param {Element} elem the element to be wrapped.
|
||||
* @param {string} tag the new element tag.
|
||||
* @return {Element} the new element.
|
||||
*/
|
||||
|
||||
}, {
|
||||
@@ -333,9 +332,9 @@ var DOM = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* Inserts and element after another element
|
||||
* @param {Element} elem the element to be inserted
|
||||
* @param {Element} target the element to be inserted after
|
||||
* Inserts and element after another element.
|
||||
* @param {Element} elem the element to be inserted.
|
||||
* @param {Element} target the element to be inserted after.
|
||||
*/
|
||||
|
||||
}, {
|
||||
@@ -343,7 +342,7 @@ var DOM = function () {
|
||||
value: function after(elem, target) {
|
||||
var parent = target.parentNode;
|
||||
|
||||
if (parent.lastChild == target) {
|
||||
if (parent.lastChild === target) {
|
||||
parent.appendChild(elem);
|
||||
} else {
|
||||
parent.insertBefore(elem, target.nextSibling);
|
||||
@@ -684,10 +683,10 @@ var MobileDetector = function () {
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(12);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(13);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__slide__ = __webpack_require__(1);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_dom__ = __webpack_require__(0);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(20);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(21);
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
@@ -1193,17 +1192,24 @@ var WebSlides = function () {
|
||||
|
||||
/***/ }),
|
||||
/* 5 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
// removed by extract-text-webpack-plugin
|
||||
|
||||
/***/ }),
|
||||
/* 6 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__modules_webslides__ = __webpack_require__(4);
|
||||
|
||||
__webpack_require__(5);
|
||||
|
||||
window.WebSlides = __WEBPACK_IMPORTED_MODULE_0__modules_webslides__["a" /* default */];
|
||||
|
||||
/***/ }),
|
||||
/* 6 */
|
||||
/* 7 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -1306,7 +1312,7 @@ var AutoSlide = function () {
|
||||
/* harmony default export */ __webpack_exports__["a"] = (AutoSlide);
|
||||
|
||||
/***/ }),
|
||||
/* 7 */
|
||||
/* 8 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -1362,7 +1368,7 @@ var ClickNav = function () {
|
||||
/* harmony default export */ __webpack_exports__["a"] = (ClickNav);
|
||||
|
||||
/***/ }),
|
||||
/* 8 */
|
||||
/* 9 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -1432,7 +1438,7 @@ var Grid = function () {
|
||||
/* harmony default export */ __webpack_exports__["a"] = (Grid);
|
||||
|
||||
/***/ }),
|
||||
/* 9 */
|
||||
/* 10 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -1539,7 +1545,7 @@ var Hash = function () {
|
||||
/* harmony default export */ __webpack_exports__["a"] = (Hash);
|
||||
|
||||
/***/ }),
|
||||
/* 10 */
|
||||
/* 11 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -1633,7 +1639,7 @@ var Keyboard = function () {
|
||||
/* harmony default export */ __webpack_exports__["a"] = (Keyboard);
|
||||
|
||||
/***/ }),
|
||||
/* 11 */
|
||||
/* 12 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -1809,21 +1815,21 @@ var Navigation = function () {
|
||||
/* harmony default export */ __webpack_exports__["a"] = (Navigation);
|
||||
|
||||
/***/ }),
|
||||
/* 12 */
|
||||
/* 13 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__autoslide__ = __webpack_require__(6);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__click_nav__ = __webpack_require__(7);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__grid__ = __webpack_require__(8);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__hash__ = __webpack_require__(9);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__keyboard__ = __webpack_require__(10);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__navigation__ = __webpack_require__(11);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__scroll__ = __webpack_require__(13);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__touch__ = __webpack_require__(14);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__video__ = __webpack_require__(15);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__youtube__ = __webpack_require__(16);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__zoom__ = __webpack_require__(17);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__autoslide__ = __webpack_require__(7);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__click_nav__ = __webpack_require__(8);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__grid__ = __webpack_require__(9);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__hash__ = __webpack_require__(10);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__keyboard__ = __webpack_require__(11);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__navigation__ = __webpack_require__(12);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__scroll__ = __webpack_require__(14);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__touch__ = __webpack_require__(15);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__video__ = __webpack_require__(16);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__youtube__ = __webpack_require__(17);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__zoom__ = __webpack_require__(18);
|
||||
|
||||
|
||||
|
||||
@@ -1851,7 +1857,7 @@ var Navigation = function () {
|
||||
});
|
||||
|
||||
/***/ }),
|
||||
/* 13 */
|
||||
/* 14 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -1991,7 +1997,7 @@ var Scroll = function () {
|
||||
/* harmony default export */ __webpack_exports__["a"] = (Scroll);
|
||||
|
||||
/***/ }),
|
||||
/* 14 */
|
||||
/* 15 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -2122,13 +2128,13 @@ var Touch = function () {
|
||||
|
||||
var info = Touch.normalizeEventInfo(event);
|
||||
|
||||
if (event.touches.length == 1) {
|
||||
if (event.touches.length === 1) {
|
||||
this.startX_ = info.x;
|
||||
this.startY_ = info.y;
|
||||
this.endX_ = info.x;
|
||||
this.endY_ = info.y;
|
||||
} else if (event.touches.length > 1) {
|
||||
this.startTouches = this.getTouchCoorinates(event);
|
||||
this.startTouches = Touch.getTouchCoordinates(event);
|
||||
this.endTouches = this.startTouches;
|
||||
this.isGesture = true;
|
||||
}
|
||||
@@ -2150,7 +2156,7 @@ var Touch = function () {
|
||||
var info = Touch.normalizeEventInfo(event);
|
||||
|
||||
if (this.isGesture) {
|
||||
this.endTouches = this.getTouchCoorinates(event);
|
||||
this.endTouches = Touch.getTouchCoordinates(event);
|
||||
} else {
|
||||
this.endX_ = info.x;
|
||||
this.endY_ = info.y;
|
||||
@@ -2193,15 +2199,21 @@ var Touch = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* Get X,Y coordinates from touchs pointers
|
||||
* Get X,Y coordinates from touch pointers.
|
||||
* @param {Event} event
|
||||
* @return {array}
|
||||
* @return {Object}
|
||||
*/
|
||||
|
||||
}], [{
|
||||
key: 'getTouchCoordinates',
|
||||
value: function getTouchCoordinates(event) {
|
||||
return [{
|
||||
x: event.touches[0].clientX,
|
||||
y: event.touches[0].clientY
|
||||
}, {
|
||||
key: 'getTouchCoorinates',
|
||||
value: function getTouchCoorinates(event) {
|
||||
return [{ x: event.touches[0].clientX, y: event.touches[0].clientY }, { x: event.touches[1].clientX, y: event.touches[1].clientY }];
|
||||
x: event.touches[1].clientX,
|
||||
y: event.touches[1].clientY
|
||||
}];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -2211,7 +2223,7 @@ var Touch = function () {
|
||||
* @return {Object} Normalised touch points.
|
||||
*/
|
||||
|
||||
}], [{
|
||||
}, {
|
||||
key: 'normalizeEventInfo',
|
||||
value: function normalizeEventInfo(event) {
|
||||
var touchEvent = { pageX: 0, pageY: 0 };
|
||||
@@ -2235,7 +2247,7 @@ var Touch = function () {
|
||||
/* harmony default export */ __webpack_exports__["a"] = (Touch);
|
||||
|
||||
/***/ }),
|
||||
/* 15 */
|
||||
/* 16 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -2322,7 +2334,7 @@ var Video = function () {
|
||||
/* harmony default export */ __webpack_exports__["a"] = (Video);
|
||||
|
||||
/***/ }),
|
||||
/* 16 */
|
||||
/* 17 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -2658,7 +2670,7 @@ var YouTube = function () {
|
||||
/* harmony default export */ __webpack_exports__["a"] = (YouTube);
|
||||
|
||||
/***/ }),
|
||||
/* 17 */
|
||||
/* 18 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -2718,7 +2730,7 @@ var Zoom = function () {
|
||||
|
||||
/**
|
||||
* On key down handler. Will decide if Zoom in or out
|
||||
* @param {Event} event Key down event
|
||||
* @param {Event} event Key down event.
|
||||
*/
|
||||
|
||||
|
||||
@@ -2727,14 +2739,14 @@ var Zoom = function () {
|
||||
value: function onKeyDown(event) {
|
||||
if (!this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].MINUS.includes(event.which)) {
|
||||
this.zoomIn();
|
||||
} else if (this.isZoomed_ && (__WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.includes(event.which) || event.which == __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].ESCAPE)) {
|
||||
} else if (this.isZoomed_ && (__WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.includes(event.which) || event.which === __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].ESCAPE)) {
|
||||
this.zoomOut();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepare zoom structure, scales the slides and uses a grid layout
|
||||
* to show them
|
||||
* to show them.
|
||||
*/
|
||||
|
||||
}, {
|
||||
@@ -2767,8 +2779,8 @@ var Zoom = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a block structure around the slide
|
||||
* @param {Element} elem slide element
|
||||
* Creates a block structure around the slide.
|
||||
* @param {Element} elem slide element.
|
||||
*/
|
||||
|
||||
}, {
|
||||
@@ -2783,7 +2795,7 @@ var Zoom = function () {
|
||||
var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div');
|
||||
div.className = CLASSES.DIV;
|
||||
// Adding some layer for controling click events
|
||||
var divLayer = document.createElement('div');
|
||||
var divLayer = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div');
|
||||
divLayer.className = 'zoom-layer';
|
||||
divLayer.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
@@ -2792,9 +2804,8 @@ var Zoom = function () {
|
||||
});
|
||||
wrap.appendChild(divLayer);
|
||||
// Slide number
|
||||
var slideNumber = document.createElement('p');
|
||||
var slideNumber = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('p', '', '' + (elem.i + 1));
|
||||
slideNumber.className = 'text-slide-number';
|
||||
slideNumber.textContent = '' + (elem.i + 1);
|
||||
div.appendChild(slideNumber);
|
||||
|
||||
this.setSizes_(div, wrap, elem);
|
||||
@@ -2817,12 +2828,12 @@ var Zoom = function () {
|
||||
|
||||
// Sets element size: window size - relative margins
|
||||
var scale = divCSS.width.includes('%') ? 100 / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width) : window.innerWidth / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width);
|
||||
if (scale == 1) {
|
||||
if (scale === 1) {
|
||||
// If the scale is 100% means it is mobile
|
||||
var wsW = this.ws_.el.clientWidth;
|
||||
elem.el.style.width = (wsW - marginW) * 2 + 'px';
|
||||
elem.el.style.height = (wsW - marginH) * 1.5 + 'px';
|
||||
elem.el.style.minHeight = scale == 1 ? 'auto' : '';
|
||||
elem.el.style.minHeight = scale === 1 ? 'auto' : '';
|
||||
// Because of flexbox, wrap height is required
|
||||
wrap.style.height = (wsW - marginH) * 1.5 / 2 + 'px';
|
||||
} else {
|
||||
@@ -2834,7 +2845,7 @@ var Zoom = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles zoom
|
||||
* Toggles zoom.
|
||||
*/
|
||||
|
||||
}, {
|
||||
@@ -2848,7 +2859,7 @@ var Zoom = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* Zoom In the slider, scales the slides and uses a grid layout to show them
|
||||
* Zoom In the slider, scales the slides and uses a grid layout to show them.
|
||||
*/
|
||||
|
||||
}, {
|
||||
@@ -2869,7 +2880,7 @@ var Zoom = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* Zoom Out the slider, remove scale from the slides
|
||||
* Zoom Out the slider, remove scale from the slides.
|
||||
*/
|
||||
|
||||
}, {
|
||||
@@ -2890,13 +2901,12 @@ var Zoom = function () {
|
||||
}
|
||||
|
||||
/**
|
||||
* When windows resize it is necessary to recalculate layers sizes
|
||||
* @param {Event} ev
|
||||
* When windows resize it is necessary to recalculate layers sizes.
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'onWindowResize',
|
||||
value: function onWindowResize(ev) {
|
||||
value: function onWindowResize() {
|
||||
var _this5 = this;
|
||||
|
||||
if (this.isZoomed_) this.zoomOut();
|
||||
@@ -2915,7 +2925,7 @@ var Zoom = function () {
|
||||
/* harmony default export */ __webpack_exports__["a"] = (Zoom);
|
||||
|
||||
/***/ }),
|
||||
/* 18 */
|
||||
/* 19 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -2963,7 +2973,7 @@ var WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent;
|
||||
/* harmony default export */ __webpack_exports__["a"] = (WSCustomEvent);
|
||||
|
||||
/***/ }),
|
||||
/* 19 */
|
||||
/* 20 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@@ -2988,11 +2998,11 @@ function linear(p) {
|
||||
/* harmony default export */ __webpack_exports__["a"] = ({ swing: swing, linear: linear });
|
||||
|
||||
/***/ }),
|
||||
/* 20 */
|
||||
/* 21 */
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(19);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(20);
|
||||
/* harmony export (immutable) */ __webpack_exports__["a"] = scrollTo;
|
||||
|
||||
|
||||
|
||||
4
static/js/webslides.min.js
vendored
4
static/js/webslides.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,5 +1,6 @@
|
||||
const SmartBannerPlugin = require('smart-banner-webpack-plugin');
|
||||
const path = require('path');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
|
||||
const src = path.join(__dirname, 'src');
|
||||
const pkg = require('./package.json');
|
||||
@@ -27,10 +28,19 @@ module.exports = {
|
||||
'eslint-loader',
|
||||
],
|
||||
include: src
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: 'css-loader?url=false!postcss-loader!sass-loader?sourceMap'
|
||||
}),
|
||||
include: src
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin('../css/webslides.css'),
|
||||
new SmartBannerPlugin({
|
||||
banner: `Name: WebSlides\nVersion: ${pkg.version}\nDate: ${new Date().toISOString().slice(0,10)}\nDescription: ${pkg.description}\nURL: ${pkg.homepage}\nCredits: @jlantunez, @LuisSacristan, @Belelros`,
|
||||
raw: false,
|
||||
Reference in New Issue
Block a user