michael/web-html5-scripts
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add new engineered stuff

Browse Source
This commit is contained in:
Michael Reber 2020-01-05 00:24:18 +01:00
parent ce4cfa4944
commit d97a0d3ac0
19 changed files with 2304 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
modal-bootstrap-close-current-open-new/README.md Normal file
View File

@ -0,0 +1,3 @@
# Bootstrap modal: close current, open new
A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this [question on stackoverflow](http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new)

130
modal-bootstrap-close-current-open-new/index.html Normal file
View File

@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Bootstrap modal: close current, open new</title>
<link href='https://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<h1>Bootstrap modal: close current, open new</h1>
<p class="text-muted">
A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this
<a href="http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new">question on stackoverflow</a>
</p>
<hr />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1">Launch Modal #1</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2">Launch Modal #2</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3">Launch Modal #3</button>
<!-- [ Modal #1 ] -->
<div class="modal fade" id="demo-1" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title caps"><strong>Demo Modal #1</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Input Placeholder..." />
<span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
</div>
</div>
</div>
</div>
<!-- [ Modal #2 ] -->
<div class="modal fade" id="demo-2" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title caps"><strong>Demo Modal #2</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Input Placeholder..." />
<span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
</div>
</div>
</div>
</div>
<!-- [ Modal #3 ] -->
<div class="modal fade" id="demo-3" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title caps"><strong>Demo Modal #3</strong></h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Input Placeholder..." />
<span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
</div>
</div>
</div>
</div>
<hr />
<h3 class="caps">Usage:</h3>
<pre class="prettyprint">&lt;!-- Button trigger modal --&gt;
&lt;ANY data-toggle="modal" data-target="TARGET"&gt;...&lt;/ANY&gt;
&lt;div class="modal fade" id="SELECTOR" tabindex="-1"&gt;
&lt;div class="modal-dialog"&gt;
&lt;div class="modal-content"&gt;
&lt;div class="modal-body"&gt; ... &lt;/div&gt;
&lt;div class="modal-footer"&gt; &lt;!-- ↓ --&gt; &lt;!-- ↓ --&gt;
&lt;ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal"&gt;...&lt;/ANY&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div> <!-- end .container -->
<hr />
<footer class="text-center"><a href="#">@2019</a></footer>
<br />
<br />
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js'></script>
</body>
</html>

54
modal-bootstrap-close-current-open-new/style.css Normal file
View File

@ -0,0 +1,54 @@
body {
font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Advent Pro', sans-serif;
}
.btn {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.btn.btn-primary {
border-color: #008aff;
background-color: #008aff;
}
.caps {
text-transform: uppercase;
}
pre.prettyprint {
padding: 15px !important;
border: 0 !important;
font-family: consolas;
font-size: 14px;
background-color: #2e2c34 !important;
-moz-border-radius: 2px !important;
-webkit-border-radius: 2px;
border-radius: 2px !important;
}
.callout-demo pre.prettyprint {
max-height: 415px;
}
pre.prettyprint span.com {
color: #5E5E5E;
}
pre.prettyprint span.pln {
color: #395063;
}
pre.prettyprint span.tag {
color: #B5C6DF;
}
pre.prettyprint span.atv {
color: #70B8AF;
}
pre.prettyprint span.pun, pre.prettyprint span.opn, pre.prettyprint span.clo {
color: #B9947B;
}
pre.prettyprint span.atn {
color: #B5A8B8;
}

5
modal-dialogs-angularjs-bootstrap-3/README.md Normal file
View File

@ -0,0 +1,5 @@
# Modal Dialogs - AngularJS BootStrap 3
A dialog/modal service written in AngularJS, creates predefined easy to use dialogs (error,wait,notify,confirm,create) with Angular UI and Bootstrap 3

59
modal-dialogs-angularjs-bootstrap-3/index.html Normal file
View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Modal Dialogs - AngularJS BootStrap 3</title>
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<html ng-app="modalTest">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script src="https://m-e-conroy.github.io/angular-dialog-service/javascripts/dialogs.min.js" type="text/javascript"></script>
</head>
<body ng-controller="dialogServiceTest" class="pad">
<h2>Bootstrap 3 & AngularJS Dialog/Modals</h2><br />
<p>
Demostration of an Angular-Dialog-Service module. Which can be found on Github: <a href="https://github.com/m-e-conroy/angular-dialog-service">https://github.com/m-e-conroy/angular-dialog-service</a><br />
</p>
<div class="row">
<div class="col-md-12">
<button class="btn btn-danger" ng-click="launch('error')">Error Dialog</button>
<button class="btn btn-primary" ng-click="launch('wait')">Wait Dialog</button>
<button class="btn btn-default" ng-click="launch('notify')">Notify Dialog</button>
<button class="btn btn-success" ng-click="launch('confirm')">Confirm Dialog</button>
<button class="btn btn-warning" ng-click="launch('create')">Custom Dialog</button>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<p>
<span class="text-info">From Confirm Dialog</span>: {{confirmed}}
</p>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<p>
<span class="text-info">Your Name</span>: {{name}}
</p>
</div>
</div>
<br />
</body>
</html>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>

90
modal-dialogs-angularjs-bootstrap-3/script.js Normal file
View File

@ -0,0 +1,90 @@
angular.module('modalTest',['ui.bootstrap','dialogs'])
.controller('dialogServiceTest',function($scope,$rootScope,$timeout,$dialogs){
$scope.confirmed = 'You have yet to be confirmed!';
$scope.name = '"Your name here."';
$scope.launch = function(which){
var dlg = null;
switch(which){
// Error Dialog
case 'error':
dlg = $dialogs.error('This is my error message');
break;
// Wait / Progress Dialog
case 'wait':
dlg = $dialogs.wait(msgs[i++],progress);
fakeProgress();
break;
// Notify Dialog
case 'notify':
dlg = $dialogs.notify('Something Happened!','Something happened that I need to tell you.');
break;
// Confirm Dialog
case 'confirm':
dlg = $dialogs.confirm('Please Confirm','Is this awesome or what?');
dlg.result.then(function(btn){
$scope.confirmed = 'You thought this quite awesome!';
},function(btn){
$scope.confirmed = 'Shame on you for not thinking this is awesome!';
});
break;
// Create Your Own Dialog
case 'create':
dlg = $dialogs.create('/dialogs/whatsyourname.html','whatsYourNameCtrl',{},{key: false,back: 'static'});
dlg.result.then(function(name){
$scope.name = name;
},function(){
$scope.name = 'You decided not to enter in your name, that makes me sad.';
});
break;
}; // end switch
}; // end launch
// for faking the progress bar in the wait dialog
var progress = 25;
var msgs = [
'Hey! I\'m waiting here...',
'About half way done...',
'Almost there?',
'Woo Hoo! I made it!'
];
var i = 0;
var fakeProgress = function(){
$timeout(function(){
if(progress < 100){
progress += 25;
$rootScope.$broadcast('dialogs.wait.progress',{msg: msgs[i++],'progress': progress});
fakeProgress();
}else{
$rootScope.$broadcast('dialogs.wait.complete');
}
},1000);
}; // end fakeProgress
}) // end dialogsServiceTest
.controller('whatsYourNameCtrl',function($scope,$modalInstance,data){
$scope.user = {name : ''};
$scope.cancel = function(){
$modalInstance.dismiss('canceled');
}; // end cancel
$scope.save = function(){
$modalInstance.close($scope.user.name);
}; // end save
$scope.hitEnter = function(evt){
if(angular.equals(evt.keyCode,13) && !(angular.equals($scope.name,null) || angular.equals($scope.name,'')))
$scope.save();
}; // end hitEnter
}) // end whatsYourNameCtrl
.run(['$templateCache',function($templateCache){
$templateCache.put('/dialogs/whatsyourname.html','<div class="modal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title"><span class="glyphicon glyphicon-star"></span> User\'s Name</h4></div><div class="modal-body"><ng-form name="nameDialog" novalidate role="form"><div class="form-group input-group-lg" ng-class="{true: \'has-error\'}[nameDialog.username.$dirty && nameDialog.username.$invalid]"><label class="control-label" for="username">Name:</label><input type="text" class="form-control" name="username" id="username" ng-model="user.name" ng-keyup="hitEnter($event)" required><span class="help-block">Enter your full name, first &amp; last.</span></div></ng-form></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(nameDialog.$dirty && nameDialog.$invalid) || nameDialog.$pristine">Save</button></div></div></div></div>');
}]); // end run / module

19
modal-dialogs-angularjs-bootstrap-3/style.css Normal file
View File

@ -0,0 +1,19 @@
/* Fix for Bootstrap 3 with Angular UI Bootstrap */
.modal {
display: block;
}
/* Custom dialog/modal headers */
.dialog-header-error { background-color: #d2322d; }
.dialog-header-wait { background-color: #428bca; }
.dialog-header-notify { background-color: #eeeeee; }
.dialog-header-confirm { background-color: #333333; }
.dialog-header-error span, .dialog-header-error h4,
.dialog-header-wait span, .dialog-header-wait h4,
.dialog-header-confirm span, .dialog-header-confirm h4 { color: #ffffff; }
/* Ease Display */
.pad { padding: 25px; }

2
modal-pure-css/README.md Normal file
View File

@ -0,0 +1,2 @@
# Pure css popup box modal

BIN
modal-pure-css/image.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

28
modal-pure-css/index.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Pure css popup box</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">&times;</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<!-- partial -->
</body>
</html>

96
modal-pure-css/style.css Normal file
View File

@ -0,0 +1,96 @@
body {
font-family: Arial, sans-serif;
background: url(./image.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}

4
modal-responsive-design/README.md Normal file
View File

@ -0,0 +1,4 @@
# Responsive Modal Design
Material Design inspired modals. No jQuery required. Responsive.

85
modal-responsive-design/index.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Responsive Modal Design</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta name="viewport" content="width=device-width"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="demo-btns">
<header>
<h1>Material Design Modals</h1>
</header>
<div class="info">
<div class="buttons">
<p>
<a href="" data-modal="#modal" class="modal__trigger">Modal 1</a>
<a href="" data-modal="#modal2" class="modal__trigger">Modal 2</a>
<a href="" data-modal="#modal3" class="modal__trigger">Modal 3</a>
</p>
</div>
<p>Click a button to activate a modal.</p>
</div>
</div>
<!-- Modal -->
<div id="modal" class="modal modal__bg" role="dialog" aria-hidden="true">
<div class="modal__dialog">
<div class="modal__content">
<h1>Modal</h1>
<p>Church-key American Apparel trust fund, cardigan mlkshk small batch Godard mustache pickled bespoke meh seitan. Wes Anderson farm-to-table vegan, kitsch Carles 8-bit gastropub paleo YOLO jean shorts health goth lo-fi. Normcore chambray locavore Banksy, YOLO meditation master cleanse readymade Bushwick.</p>
<!-- modal close button -->
<a href="" class="modal__close demo-close">
<svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg>
</a>
</div>
</div>
</div>
<div id="modal2" class="modal modal--align-top modal__bg" role="dialog" aria-hidden="true">
<div class="modal__dialog">
<div class="modal__content">
<h1>Big Modal</h1>
<h3>This modal is pretty tall.</h3>
<p>Selfies normcore four dollar toast four loko listicle artisan. Hoodie Marfa authentic, wayfarers church-key tofu Banksy pop-up Kickstarter Brooklyn heirloom swag synth. Echo Park cray synth mixtape. Tofu gastropub squid readymade, trust fund Wes Anderson DIY PBR 8-bit try-hard +1 Shoreditch lo-fi tote bag.</p>
<p><img src="http://unsplash.it/600/300" alt="" /></p>
<p>Mumblecore cred selfies fingerstache. Tousled skateboard plaid lo-fi shabby chic salvia, swag Odd Future Etsy art party Austin cronut. Crucifix whatever Pinterest food truck, pickled viral cray 90's DIY chambray keffiyeh biodiesel Vice blog. Cred meh yr tofu.</p>
<p>Mumblecore cred selfies fingerstache. Tousled skateboard plaid lo-fi shabby chic salvia, swag Odd Future Etsy art party Austin cronut. Crucifix whatever Pinterest food truck, pickled viral cray 90's DIY chambray keffiyeh biodiesel Vice blog. Cred meh yr tofu.</p>
<!-- modal close button -->
<a href="" class="modal__close demo-close">
<svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg>
</a>
</div>
</div>
</div>
<div id="modal3" class="modal modal__bg" role="dialog" aria-hidden="true">
<div class="modal__dialog">
<div class="modal__content">
<h1>Modal 3</h1>
<p>Church-key American Apparel trust fund, cardigan mlkshk small batch Godard mustache pickled bespoke meh seitan. Wes Anderson farm-to-table vegan, kitsch Carles 8-bit gastropub paleo YOLO jean shorts health goth lo-fi.</p>
<!-- modal close button -->
<a href="" class="modal__close demo-close">
<svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/><path d="M0 0h24v24h-24z" fill="none"/></svg>
</a>
</div>
</div>
</div>
<!-- Ettrics -->
<a href="#" class="logo" target="_blank">
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" />
</a>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>

191
modal-responsive-design/script.js Normal file
View File

@ -0,0 +1,191 @@
var Modal = (function() {
var trigger = $qsa('.modal__trigger'); // what you click to activate the modal
var modals = $qsa('.modal'); // the entire modal (takes up entire window)
var modalsbg = $qsa('.modal__bg'); // the entire modal (takes up entire window)
var content = $qsa('.modal__content'); // the inner content of the modal
var closers = $qsa('.modal__close'); // an element used to close the modal
var w = window;
var isOpen = false;
var contentDelay = 400; // duration after you click the button and wait for the content to show
var len = trigger.length;
// make it easier for yourself by not having to type as much to select an element
function $qsa(el) {
return document.querySelectorAll(el);
}
var getId = function(event) {
event.preventDefault();
var self = this;
// get the value of the data-modal attribute from the button
var modalId = self.dataset.modal;
var len = modalId.length;
// remove the '#' from the string
var modalIdTrimmed = modalId.substring(1, len);
// select the modal we want to activate
var modal = document.getElementById(modalIdTrimmed);
// execute function that creates the temporary expanding div
makeDiv(self, modal);
};
var makeDiv = function(self, modal) {
var fakediv = document.getElementById('modal__temp');
/**
* if there isn't a 'fakediv', create one and append it to the button that was
* clicked. after that execute the function 'moveTrig' which handles the animations.
*/
if (fakediv === null) {
var div = document.createElement('div');
div.id = 'modal__temp';
self.appendChild(div);
moveTrig(self, modal, div);
}
};
var moveTrig = function(trig, modal, div) {
var trigProps = trig.getBoundingClientRect();
var m = modal;
var mProps = m.querySelector('.modal__content').getBoundingClientRect();
var transX, transY, scaleX, scaleY;
var xc = w.innerWidth / 2;
var yc = w.innerHeight / 2;
// this class increases z-index value so the button goes overtop the other buttons
trig.classList.add('modal__trigger--active');
// these values are used for scale the temporary div to the same size as the modal
scaleX = mProps.width / trigProps.width;
scaleY = mProps.height / trigProps.height;
scaleX = scaleX.toFixed(3); // round to 3 decimal places
scaleY = scaleY.toFixed(3);
// these values are used to move the button to the center of the window
transX = Math.round(xc - trigProps.left - trigProps.width / 2);
transY = Math.round(yc - trigProps.top - trigProps.height / 2);
// if the modal is aligned to the top then move the button to the center-y of the modal instead of the window
if (m.classList.contains('modal--align-top')) {
transY = Math.round(mProps.height / 2 + mProps.top - trigProps.top - trigProps.height / 2);
}
// translate button to center of screen
trig.style.transform = 'translate(' + transX + 'px, ' + transY + 'px)';
trig.style.webkitTransform = 'translate(' + transX + 'px, ' + transY + 'px)';
// expand temporary div to the same size as the modal
div.style.transform = 'scale(' + scaleX + ',' + scaleY + ')';
div.style.webkitTransform = 'scale(' + scaleX + ',' + scaleY + ')';
window.setTimeout(function() {
window.requestAnimationFrame(function() {
open(m, div);
});
}, contentDelay);
};
var open = function(m, div) {
if (!isOpen) {
// select the content inside the modal
var content = m.querySelector('.modal__content');
// reveal the modal
m.classList.add('modal--active');
// reveal the modal content
content.classList.add('modal__content--active');
/**
* when the modal content is finished transitioning, fadeout the temporary
* expanding div so when the window resizes it isn't visible ( it doesn't
* move with the window).
*/
content.addEventListener('transitionend', hideDiv, false);
isOpen = true;
}
function hideDiv() {
// fadeout div so that it can't be seen when the window is resized
div.style.opacity = '0';
content.removeEventListener('transitionend', hideDiv, false);
}
};
var close = function(event) {
event.preventDefault();
event.stopImmediatePropagation();
var target = event.target;
var div = document.getElementById('modal__temp');
/**
* make sure the modal__bg or modal__close was clicked, we don't want to be able to click
* inside the modal and have it close.
*/
if (isOpen && target.classList.contains('modal__bg') || target.classList.contains('modal__close')) {
// make the hidden div visible again and remove the transforms so it scales back to its original size
div.style.opacity = '1';
div.removeAttribute('style');
/**
* iterate through the modals and modal contents and triggers to remove their active classes.
* remove the inline css from the trigger to move it back into its original position.
*/
for (var i = 0; i < len; i++) {
modals[i].classList.remove('modal--active');
content[i].classList.remove('modal__content--active');
trigger[i].style.transform = 'none';
trigger[i].style.webkitTransform = 'none';
trigger[i].classList.remove('modal__trigger--active');
}
// when the temporary div is opacity:1 again, we want to remove it from the dom
div.addEventListener('transitionend', removeDiv, false);
isOpen = false;
}
function removeDiv() {
setTimeout(function() {
window.requestAnimationFrame(function() {
// remove the temp div from the dom with a slight delay so the animation looks good
div.remove();
});
}, contentDelay - 50);
}
};
var bindActions = function() {
for (var i = 0; i < len; i++) {
trigger[i].addEventListener('click', getId, false);
closers[i].addEventListener('click', close, false);
modalsbg[i].addEventListener('click', close, false);
}
};
var init = function() {
bindActions();
};
return {
init: init
};
}());
Modal.init();

195
modal-responsive-design/style.css Normal file
View File

@ -0,0 +1,195 @@
* {
box-sizing: border-box;
}
body {
line-height: 1.5;
font-family: 'Lato';
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1,
h2,
h3,
p {
font-weight: 300;
margin: 0 0 2.4rem 0;
}
h1,
h2,
h3 {
line-height: 1.3;
}
a {
text-decoration: none;
color: inherit;
font-weight: 400;
}
/**
* Material Modal CSS
*/
.modal {
will-change: visibility, opacity;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition-delay: $modal-delay;
}
.modal--active {
visibility: visible;
opacity: 1;
}
.modal--align-top {
align-items: flex-start;
}
.modal__bg {
background: transparent;
}
.modal__dialog {
max-width: 600px;
padding: 1.2rem;
}
.modal__content {
will-change: transform, opacity;
position: relative;
padding: 2.4rem;
background: #ffebee;
background-clip: padding-box;
box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25);
opacity: 0;
transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__content--active {
opacity: 1;
}
.modal__close {
z-index: 1100;
cursor: pointer;
}
.modal__trigger {
position: relative;
display: inline-block;
padding: 1.2rem 2.4rem;
color: rgba(0,0,0,0.7);
line-height: 1;
cursor: pointer;
background: #ffebee;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__trigger--active {
z-index: 10;
}
.modal__trigger:hover {
background: #e5d3d6;
}
#modal__temp {
will-change: transform, opacity;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ffebee;
-webkit-transform: none;
transform: none;
opacity: 1;
transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
/**
* Demo specific CSS
*/
body {
height: 100vh;
background: #f44336;
}
img {
max-width: 100%;
}
.demo-btns header {
padding: 7vh 10vw;
background: #ffebee;
display: flex;
align-items: center;
}
.demo-btns header h1 {
margin: 0;
color: rgba(0,0,0,0.54);
font-weight: 300;
}
.demo-btns .info {
background: #f44336;
padding: 3vh 10vw;
height: 70vh;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column wrap;
}
.demo-btns p {
text-align: center;
color: #fff;
}
.demo-btns .link {
font-size: 20px;
}
.demo-btns .modal__trigger {
margin-right: 3px;
}
@media (max-width: 640px) {
.demo-btns .modal__trigger {
margin-bottom: 0.8rem;
}
}
.demo-close {
position: absolute;
top: 0;
right: 0;
margin: 1.2rem;
padding: 0.6rem;
background: rgba(0,0,0,0.3);
border-radius: 50%;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.demo-close svg {
width: 24px;
fill: #fff;
pointer-events: none;
vertical-align: top;
}
.demo-close:hover {
background: rgba(0,0,0,0.6);
}
.logo {
position: fixed;
bottom: 3vh;
right: 3vw;
z-index: 2;
}
.logo img {
width: 45px;
-webkit-transform: rotate(0);
transform: rotate(0);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.logo img:hover {
-webkit-transform: rotate(180deg) scale(1.1);
transform: rotate(180deg) scale(1.1);
}

3
template-product-powered-by-bootstrap/README.md Normal file
View File

@ -0,0 +1,3 @@
# Product Template powered by Bootstrap
Product template with accordion, powered with some bootstrap and customized CSS and a little bit of jQuery.

245
template-product-powered-by-bootstrap/index.html Normal file
View File

@ -0,0 +1,245 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Product Template powered by Bootstrap</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="site-outer">
<nav class="navbar navbar-fixed-top">
<section class="container-fluid">
<div class="row">
<div class="container-menu">
<nav class="menu" id="hb">
<div></div>
<div></div>
<div></div>
</nav>
<div class="logotype">
<div class="big">Ki</div>
</div>
<div class="checkout">
<h3><a href="#"><i class="fa fa-shopping-cart red"></i> To Checkout <span class="badge badge-red">0</span></a></h3>
</div>
</div>
</div>
</section>
</nav>
<div class="site-inner">
<section class="container-fluid">
<!-- ACCORDION ROW -->
<div class="row">
<ul class="accordion-group" id="accordion">
<li style="background-image: url('https://images.unsplash.com/photo-1556912172-45b7abe8b7e1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');">
<div class="accordion-overlay"></div>
<h3>Rustic</h3>
<section class="hidden-xs">
<article>
<p>Rual and rustic</p>
</article>
</section>
</li>
<li class="out" style="background-image: url('https://images.unsplash.com/photo-1484154218962-a197022b5858?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1953&q=80');">
<div class="accordion-overlay"></div>
<h3>Clean</h3>
<section class="hidden-xs">
<article>
<p>For the single or couple
</p>
</article>
</section>
</li>
<li style="background-image: url('https://images.unsplash.com/photo-1507089947368-19c1da9775ae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1955&q=80');">
<div class="accordion-overlay"></div>
<h3>Stylish</h3>
<section class="hidden-xs">
<article>
<p>When people want it cosy but stylish</p>
</article>
</section>
</li>
<li style="background-image: url('https://images.unsplash.com/photo-1495433324511-bf8e92934d90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');">
<div class="accordion-overlay"></div>
<h3>Family</h3>
<section class="hidden-xs">
<article>
<p>For the family dinner</p>
</article>
</section>
</li>
</ul>
</div>
<!-- BEGIN NEW ROW AFTER ACCORDION -->
<div class="row mg">
<!-- FIRST ROW -->
<div class="container">
<h1 class="text-center head red">Quality</h1>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="product-box">
<h3 class="text-center">High quality</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="product-box">
<h3 class="text-center">Smart design</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="product-box">
<h3 class="text-center">Modern or retro</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="footer">
<footer class="footer-inner">
<div class="container">
<div class="row">
<div class="col-md-3">
<h3 class="h3">About us</h3>
<ul class="footer-list">
<li><a href="#">Our story</a></li>
<li><a href="#">Venue</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
<div class="col-md-3">
<h3 class="h3">Partners</h3>
<ul class="footer-list">
<li><a href="#">IKEA</a></li>
<li><a href="#">MIO</a></li>
<li><a href="#">BAUHAUS</a></li>
</ul>
</div>
<div class="col-md-3">
<h3 class="h3">Customer support</h3>
<ul class="footer-list">
<li><a href="#">Chat with us</a></li>
<li><a href="#">+46(0)2453 352</a></li>
<li><a href="#">E-mail us</a></li>
</ul>
</div>
<div class="col-md-3">
<h3 class="h3">Socials</h3>
<ul class="footer-list footer-list-inline">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<!-- NAVIGATION -->
<div class="navigation">
<button class="navigation-login">
<i class="fa fa-shopping-cart"></i> To Checkout <span class="badge badge-white">0</span>
</button>
<div class="navigation-search">
<div id="search">
<input type="text" name="input" class="input" placeholder="Search" />
<button type="reset" class="search" id="search-button"></button>
</div>
</div>
<div class="navigation-content">
<h3>Menu</h3>
<ul class="navigation-menu">
<li><a href="#" class="active">Home</a></li>
<li><a href="#"><i class="red fa fa-circle"></i> White goods</a></li>
<li><a href="#"><i class="beige fa fa-circle"></i> Kitchen cabinets</a></li>
<li><a href="#"><i class="orange fa fa-circle"></i> Counters</a></li>
<li><a href="#"><i class="blue fa fa-circle"></i> Other</a></li>
</ul>
<h3>More</h3>
<ul class="navigation-menu">
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Collaboration</a></li>
<li><a href="#">Customer Service</a></li>
</ul>
</div>
</div>
<!-- CHECKOUT -->
<aside class="to-checkout">
<div class="to-checkout-inner">
<h3>Product list</h3>
<ul class="to-checkout-list">
<li><i class="fa fa-check"></i> Kitchens <a href="#" class="remove">Remove</a></li>
</ul>
</div>
</aside>
<!-- MODAL -->
<aside id="modal" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-header-gradient"></div>
<div class="row">
<h2 class="white text-center">Choose size and color</h2>
<p data-modal-id class="text-center white"></p>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-12">
<form id="modal-form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-plus"></i></span>
<select>
<option value="">Choose size</option>
<option value="1">XS</option>
<option value="2">S</option>
<option value="3">M</option>
<option value="4">L</option>
<option value="5">XL</option>
<option value="6">XXL</option>
</select>
<div class="input-group-addon-holder">
<select class="select-sibling">
<option value="">Choose color</option>
<option value="1">Blue</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<p>
<button class="button button-red" id="add-item" data-dismiss="modal">Add to basket</button>
</p>
<p>
<button type="reset" class="button button-transparent" data-dismiss="modal" id="cancel">Cancel</button>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script><script src="./script.js"></script>
</body>
</html>

151
template-product-powered-by-bootstrap/script.js Normal file
View File

@ -0,0 +1,151 @@
(function () {
var expand;
expand = function () {
var $input, $search;
$search = $('.search');
$input = $('.input');
if ($search.hasClass('close')) {
$search.removeClass('close');
$input.removeClass('square');
} else {
$search.addClass('close');
$input.addClass('square');
}
if ($search.hasClass('close')) {
$input.focus();
} else {
$input.blur();
}
};
$(function () {
var $accordion, $wideScreen;
$accordion = $('#accordion').children('li');
$wideScreen = $(window).width() > 767;
if ($wideScreen) {
$accordion.on('mouseenter click', function (e) {
var $this;
e.stopPropagation();
$this = $(this);
if ($this.hasClass('out')) {
$this.addClass('out');
} else {
$this.addClass('out');
$this.siblings().removeClass('out');
}
});
} else {
$accordion.on('touchstart touchend', function (e) {
var $this;
e.stopPropagation();
$this = $(this);
if ($this.hasClass('out')) {
$this.addClass('out');
} else {
$this.addClass('out');
$this.siblings().removeClass('out');
}
});
}
});
$(function () {
var $container, $menu, $menubtn, $navbar;
$menubtn = $('#hb');
$navbar = $('.navbar');
$menu = $('.navigation');
$container = $('.site-inner');
$menubtn.on('click', function (e) {
if ($menubtn.hasClass('active')) {
$menubtn.removeClass('active');
$menu.removeClass('slide-right');
$container.removeClass('slide-right');
$navbar.removeClass('slide-right');
} else {
$menubtn.addClass('active');
$menu.addClass('slide-right');
$container.addClass('slide-right');
$navbar.addClass('slide-right');
}
});
});
$(function () {
var $button, clickOrTouch;
clickOrTouch = 'click touchstart';
$button = $('#search-button');
$button.on(clickOrTouch, expand);
});
$(function () {
var $box;
$box = $('.sm-box');
$box.on('click', function (e) {
e.preventDefault();
var $this;
$this = $(this);
if ($this.hasClass('active')) {
$this.removeClass('active');
} else {
$this.addClass('active');
}
});
});
}.call(this));
$("select").each(function() {
var $this = $(this),
$options = $(this).children("option").length;
$this.addClass("select-hidden");
$this.wrap("<div class='select'></div>");
$this.after("<div class='select-styled'></div>");
var $styledSelect = $this.next("div.select-styled");
$styledSelect.text($this.children("option").eq(0).text());
var $list = $("<ul />", {
"class": "select-options"
}).insertAfter($styledSelect);
for (var i = 0; i < $options; i++) {
$("<li />", {
text: $this.children("option").eq(i).text(),
rel: $this.children("option").eq(i).val()
}).appendTo($list);
}
var $listItems = $list.children("li");
$styledSelect.on("click", function(e) {
e.stopPropagation();
$("div.select-styled.active").each(function() {
$(this).removeClass("active").next("ul.select-options").hide();
});
$(this).toggleClass("active").next("ul.select-options").toggle();
});
$listItems.on("click", function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass("active");
$this.val($(this).attr("rel"));
$list.hide();
});
$(document).on("click", function() {
$styledSelect.removeClass("active");
$list.hide();
});
$(".select-sibling").next(".select-styled").css({
"border-top": "0px"
});
});
(function () {
var $addItem = $("#add-item");
var $badge = $(".badge");
var $count = 1;
$addItem.on("click", function(e) {
e.preventDefault();
$badge.html($count++);
});
}.call(this));

944
template-product-powered-by-bootstrap/style.css Normal file
View File

@ -0,0 +1,944 @@
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzc.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc9.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');
}
.accordion-group li:nth-child(4) .accordion-overlay {
background-color: #333;
opacity: 0.8;
}
.accordion-group li:nth-child(4).out .accordion-overlay {
background-color: #333;
opacity: 0;
}
.accordion-group li:nth-child(3) .accordion-overlay {
background-color: #9d9d9d;
opacity: 0.8;
}
.accordion-group li:nth-child(3).out .accordion-overlay {
background-color: #9d9d9d;
opacity: 0;
}
.accordion-group li:nth-child(2) .accordion-overlay {
background-color: #ca9964;
opacity: 0.8;
}
.accordion-group li:nth-child(2).out .accordion-overlay {
background-color: #ca9964;
opacity: 0;
}
.accordion-group li:nth-child(1) .accordion-overlay {
background-color: #a87339;
opacity: 0.8;
}
.accordion-group li:nth-child(1).out .accordion-overlay {
background-color: #a87339;
opacity: 0;
}
a {
color: inherit;
}
a.active,
a:active,
a:focus,
a:hover {
color: inherit;
text-decoration: none;
}
.red {
color: #ca9964;
}
.orange {
color: #e06014;
}
.blue {
color: #5aaed6;
}
.beige {
color: #d6ccad;
}
body {
font-family: "Roboto", sans-serif;
background: #fff;
}
.mg {
margin: 7rem 0 4rem 0;
}
.big {
color: #333;
font-size: 4.5rem;
font-weight: 700;
margin: 1rem;
}
.head {
color: #ca9964;
font-size: 4.8rem;
font-weight: 200;
margin: 1rem;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.site-outer {
overflow: hidden;
}
.site-outer .navbar {
background-color: #fff;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.site-outer .navbar.slide-right {
-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
transform: translate3d(250px, 0, 0);
}
.site-outer .site-inner {
position: relative;
margin: 0;
padding: 0;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.site-outer .site-inner.slide-right {
-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
transform: translate3d(250px, 0, 0);
}
.container-menu {
margin: 0 auto;
}
.container-menu:before,
.container-menu:after {
content: "";
display: block;
zoom: 1;
}
.container-menu:after {
clear: both;
}
.container-menu .menu {
float: left;
padding: 3rem 1.5rem;
cursor: pointer;
position: relative;
display: inline-block;
width: 8rem;
}
.container-menu .menu div {
width: 5rem;
height: 0.4rem;
background-color: #333;
margin-bottom: 0.4rem;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
transition: all 500ms ease;
position: absolute;
}
.container-menu .menu div:nth-child(1) {
left: 1.5rem;
top: 2rem;
}
.container-menu .menu div:nth-child(2) {
left: 1.5rem;
top: 2.8rem;
}
.container-menu .menu div:nth-child(2):after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 5rem;
height: 0.4rem;
background-color: #333;
-webkit-transition: all 350ms ease;
-moz-transition: all 350ms ease;
transition: all 350ms ease;
}
.container-menu .menu div:nth-child(3) {
right: 1.5rem;
top: 3.6rem;
}
.container-menu .menu.active div:nth-child(1),
.container-menu .menu.active div:nth-child(3) {
width: 0;
}
.container-menu .menu.active div:nth-child(2) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.container-menu .menu.active div:nth-child(2):after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.container-menu .logotype {
cursor: pointer;
float: left;
}
.container-menu .logotype div {
margin: 0;
}
.container-menu .checkout {
float: right;
padding: 0.8rem 1.2rem 0;
}
.container-menu .checkout h3 {
font-size: 1.8rem;
font-weight: 300;
text-transform: uppercase;
}
.accordion-group {
overflow: hidden;
margin: 0 auto;
padding: 0;
list-style: none;
width: 100%;
height: 700px;
display: flex;
align-items: center;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;
}
.accordion-group li {
cursor: pointer;
position: relative;
display: flex;
overflow: hidden;
margin: 0;
padding: 1.6em;
list-style: none;
width: 16.66666667%;
height: inherit;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.accordion-group li h3 {
position: relative;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.15rem;
padding: 0;
font-weight: 300;
margin: 6.5rem 0 0;
}
.accordion-group li .accordion-overlay {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.accordion-group li section {
display: flex;
align-items: center;
width: 75%;
height: 100%;
}
.accordion-group li section.big-section {
width: 100%;
}
.accordion-group li section article {
display: table-cell;
vertical-align: middle;
padding: 4rem;
position: relative;
right: -200%;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.accordion-group li section article p {
background-color: rgba(255, 255, 255, 0.8);
padding: 1.6rem;
color: #333;
font-size: 1.6rem;
letter-spacing: 0.15rem;
}
.accordion-group li section article p:before,
.accordion-group li section article p:after {
content: "";
display: block;
height: 1px;
}
.accordion-group li.out {
width: 50%;
}
.accordion-group li.out section article {
right: 0;
}
.navigation {
background-color: #fff;
overflow: auto;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
width: 250px;
height: 100%;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
-webkit-transform: translate3d(-250px, 0, 0);
-moz-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0);
}
.navigation:before,
.navigation:after {
content: "";
display: block;
zoom: 1;
}
.navigation:after {
clear: both;
}
.navigation.slide-right {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.navigation-login {
padding: 2rem;
line-height: 2;
border: none;
width: 100%;
border-radius: 0;
font-size: 1.8rem;
background-color: #ca9964;
font-weight: 100;
color: #fff;
text-transform: uppercase;
}
.navigation-search {
padding: 2rem 2rem 0;
}
.navigation-content {
padding: 0 2rem;
}
.navigation-content h3 {
color: #ca9964;
text-transform: uppercase;
letter-spacing: 0.15rem;
padding: 0;
font-weight: 300;
}
.navigation-content .navigation-menu {
list-style: none;
padding: 0;
}
.navigation-content .navigation-menu li {
display: block;
padding: 0.8rem 0;
margin: 1rem 0;
}
.navigation-content .navigation-menu li a {
color: #333;
text-transform: uppercase;
font-size: 1.3rem;
}
.navigation-content .navigation-menu li a.active,
.navigation-content .navigation-menu li a:active,
.navigation-content .navigation-menu li a:hover,
.navigation-content .navigation-menu li a:focus {
color: #ca9964;
text-decoration: none;
}
.to-checkout {
position: fixed;
top: 0;
right: 0;
width: 450px;
height: 100%;
background-color: #ca9964;
z-index: 10001;
-webkit-transform: translate3d(450px, 0, 0);
-moz-transform: translate3d(450px, 0, 0);
transform: translate3d(450px, 0, 0);
}
.to-checkout-inner {
padding: 2.5rem;
color: #fff;
}
.to-checkout-list {
padding: 0;
margin: 0;
display: block;
list-style: none;
}
.to-checkout-list li a {
color: #5aaed6;
}
#search {
height: 35px;
width: 100%;
position: relative;
}
@media (max-width: 767px) {
#search {
width: auto;
}
}
#search input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 35px;
height: 35px;
border: 1px solid #333;
border-radius: 100%;
background: transparent;
color: #ca9964;
font-size: 16px;
font-weight: 400;
outline: none;
-webkit-transition: width 100ms ease-in-out;
-moz-transition: width 100ms ease-in-out;
transition: width 100ms ease-in-out;
}
#search input::-webkit-input-placeholder {
color: transparent;
}
#search input:-moz-placeholder {
color: transparent;
}
#search input::-moz-placeholder {
color: transparent;
}
#search input:-ms-input-placeholder {
color: transparent;
}
#search .search {
background-color: transparent;
position: absolute;
top: 0;
left: 0;
height: 35px;
width: 35px;
padding: 0;
border-radius: 100%;
outline: none;
border: 0;
color: #333;
cursor: pointer;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#search .search:before,
#search .search:after {
content: "";
position: absolute;
width: 1rem;
height: 0.1rem;
background-color: #333;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
top: 3.3rem;
left: 3rem;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#search .close {
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
right: 0;
left: inherit;
}
#search .close:before {
content: "";
position: absolute;
top: 1.7rem;
left: 1.5rem;
width: 27px;
height: 4px;
margin-top: -1px;
margin-left: -13px;
background-color: #ca9964;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
#search .close:after {
content: "";
position: absolute;
top: 1.7rem;
left: 1.5rem;
width: 27px;
height: 4px;
margin-top: -1px;
margin-left: -13px;
background-color: #ca9964;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
#search .square {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 4rem 0 1rem;
width: 100%;
height: 35px;
border: 1px solid #333;
border-radius: 0;
color: #333;
background-color: transparent;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#search .square::-webkit-input-placeholder {
color: #ca9964;
}
#search .square:-moz-placeholder {
color: #ca9964;
}
#search .square::-moz-placeholder {
color: #ca9964;
}
#search .square:-ms-input-placeholder {
color: #ca9964;
}
#search .square.active #search .square:hover,
#search .square:focus,
#search .square:active {
border-color: #ca9964;
}
.sm-box {
padding: 1.5rem;
height: 18rem;
color: #fff;
background-color: #fff;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
position: relative;
overflow: hidden;
display: table;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.35);
}
.sm-box-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: none;
z-index: 998;
-webkit-transition: all 250ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
-moz-transition: all 250ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
transition: all 250ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
.sm-box-basket {
display: table-cell;
position: relative;
margin: 0 auto;
vertical-align: middle;
line-height: 135px;
z-index: 999;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.sm-box-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4rem;
width: 100%;
color: #ca9964;
z-index: 999;
padding: 1rem 2rem;
background-color: #fff;
line-height: 1.5;
-webkit-transition: all 250ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
-moz-transition: all 250ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
transition: all 250ms cubic-bezier(0.17, 0.67, 0.83, 0.67);
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.sm-box.active,
.sm-box:hover {
box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.35);
}
.sm-box.active .sm-box-content,
.sm-box:hover .sm-box-content {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sm-box.active .sm-box-content > i,
.sm-box:hover .sm-box-content > i {
-webkit-animation: rotate 500ms ease;
-moz-animation: rotate 500ms ease;
animation: rotate 500ms ease;
}
.sm-box.active .sm-box-basket,
.sm-box:hover .sm-box-basket {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.sm-box.active .sm-box-overlay,
.sm-box:hover .sm-box-overlay {
background-color: rgba(0, 0, 0, 0.6);
}
.product-box h2 {
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
}
.product-box:hover h2 {
color: #ca9964;
}
.button {
outline: none;
border: 2px solid #fff;
padding: 1.2rem 2rem;
margin-bottom: 1rem;
width: 100%;
white-space: nowrap;
font-size: 12px;
text-transform: uppercase;
font-weight: 400;
vertical-align: middle;
line-height: 18px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
color: #ca9964;
background-color: #fff;
border-radius: 2rem;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
display: inline-block;
}
.button.active,
.button:active,
.button:focus,
.button:hover {
text-decoration: none;
color: #fff;
outline: none;
}
.button-red {
background-color: #ca9964;
color: #fff;
border-color: #ca9964;
}
.button-red.active,
.button-red:active,
.button-red:focus,
.button-red:hover {
background-color: #d0a677;
border-color: #d0a677;
}
.button-transparent {
background-color: #fff;
color: #ca9964;
border-color: #ca9964;
}
.button-transparent.active,
.button-transparent:active,
.button-transparent:focus,
.button-transparent:hover {
background-color: #fff;
color: #ca9964;
border-color: #ca9964;
}
.modal-content {
border-radius: 0px;
}
.modal-header {
background-color: #ca9964;
color: #fff;
}
.badge-red {
background-color: #ca9964;
color: #fff;
}
.badge-white {
background-color: #fff;
color: #ca9964;
}
.input-group-addon-holder {
position: relative;
}
.input-group-addon-holder .number-icon {
position: absolute;
top: 16px;
right: 15px;
}
.input-group-addon-holder .number-icon > i {
display: none;
color: #5aaed6;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
}
.input-group-addon-holder .cvv-icon {
position: absolute;
top: 66px;
right: 15px;
}
.input-group-addon-holder .cvv-icon > i {
display: none;
color: #5aaed6;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
}
.input-group-addon {
color: #333;
border-color: #333;
background-color: #fff;
border-radius: 0;
}
.select-hidden {
display: none;
visibility: hidden;
padding-right: 1rem;
}
.select {
cursor: pointer;
display: inline-block;
position: relative;
font-size: 16px;
color: #333;
width: 100%;
height: 50px;
}
.form-control {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 50px;
border: 1px solid #333;
border-radius: 0;
background: transparent;
color: #333;
font-size: 16px;
font-weight: 400;
outline: none;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.form-control::-webkit-input-placeholder {
color: #333;
}
.form-control:-moz-placeholder {
color: #333;
}
.form-control::-moz-placeholder {
color: #333;
}
.form-control:-ms-input-placeholder {
color: #333;
}
.form-control-sibling {
border-top: 1px solid transparent;
}
.form-control.active .form-control:hover,
.form-control:focus,
.form-control:active {
border-color: #ca9964;
}
.select-styled {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 50px;
border: 1px solid #333;
border-radius: 0;
background: transparent;
padding: 1.3rem;
color: #333;
font-size: 16px;
font-weight: 400;
outline: none;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.select-styled:hover,
.select-styled.active {
border-color: #ca9964;
}
.select-options {
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 9999;
margin: 0;
padding: 0;
background-color: #fff;
border-left: 1px solid #ca9964;
border-right: 1px solid #ca9964;
border-bottom: 1px solid #ca9964;
}
.select-options li {
margin: 0;
height: 50px;
padding: 1.3rem;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
}
.select-options li:first-child {
display: none;
}
.select-options li:hover {
background-color: #d7b28a;
color: #fff;
}
.footer {
background-color: #333;
padding: 2rem 0;
}
.footer-inner h3 {
color: #595959;
}
.footer-inner .footer-list {
padding: 0;
margin: 0;
display: block;
}
.footer-inner .footer-list li {
display: block;
color: #fff;
margin-bottom: 0.8rem;
}
.footer-inner .footer-list li a:hover {
text-decoration: underline;
}
.footer-inner .footer-list-inline {
display: block;
}
.footer-inner .footer-list-inline li {
display: inline-block;
margin-right: 1.8rem;
}
@media (max-width: 767px) {
.accordion-group {
height: 360px;
}
.accordion-group li {
display: flex;
align-items: center;
justify-content: center;
}
.accordion-group li.out h3 {
opacity: 0;
}
.accordion-group li h3 {
opacity: 1;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
width: 2.5rem;
padding: 0;
margin: 10rem 0;
}
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}