Responsive Flat UI Kit

Developer
Matt Litherland
Size
17,612 Kb
Views
48,576
  1. Responsive Flat UI Kit Previews
  2. Responsive Flat UI Kit HTML Codes
  3. Responsive Flat UI Kit CSS Codes
  4. Responsive Flat UI Kit JS Codes

How do I make an responsive flat ui kit?

A custom UI set built to work with and sit next to Bootstrap 3. Custom select boxes by @catalinred. 3D Scroll effects inspired by @chriscoyier's slide in when scroll down pen. The kit is also responsive!. What is a responsive flat ui kit? How do you make a responsive flat ui kit? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.

Responsive Flat UI Kit Previews
IQ Test

Responsive Flat UI Kit - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Flat UI Kit</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="padding"> <div class="row"> <div class="col-lg-12"> <h1>Responsive Flat UI</h1> <p class="lead hidden-xs hidden-sm">I've built these UI elements to both integrate and sit side by side with the latest version of Bootstrap. Everything is my own except for the custom select boxes, written by <a href="http://codepen.io/catalinred">Catalin Rosu</a>.</p> <hr> </div> </div> <div class="row"> <div class="col-lg-12"> <!-- Basket --> <div class="basket-wrap"> <div class="basket-control"> <span class="basket-block"><span class="icon-basket"></span></span> <span class="basket-trigger"> <a href="#" id="basket-controller"> <span class="basket-title">Basket</span> <span class="basket-content">&pound;89.99</span> <span class="basket-items">(1)</span> </a> <!-- Basket Preview --> <div class="basket-preview"> <!-- Product Carousel --> <div class="pslider-wrapper"> <div class="pslider-inside"> <ul id="pslider" class="pslider"> <li id="pslide1" data-slide="1" class="pslide active">Slide 1</li> <li id="pslide2" data-slide="2" class="pslide">Slide 2</li> <li id="pslide3" data-slide="3" class="pslide">Slide 3</li> <li id="pslide4" data-slide="4" class="pslide">Slide 4</li> <li id="pslide5" data-slide="5" class="pslide">Slide 5</li> <li id="pslide6" data-slide="6" class="pslide">Slide 6</li> <li id="pslide7" data-slide="7" class="pslide">Slide 7</li> </ul> </div> <div class="pslider-controls"> <span class="pslide-prev"> <a href="#" class="prev btn btn-icon"> <span class="icon-arrow-left"></span> </a> </span> <span class="pslide-label">Label</span> <span class="pslide-next"> <a href="#" class="next btn btn-icon"> <span class="icon-arrow-right"></span> </a> </span> </div> </div> <!-- Basket Summary --> <div class="basket-summary"> <span class="total"><b>Total</b> &pound;89.99</span> </div> <!-- Basket Actions --> <div class="basket-actions"> <div class="row"> <div class="col-xs-6"> <a href="#" class="btn btn-primary">Bag</a> </div> <div class="col-xs-6"> <a href="#" class="btn btn-warning">Pay Now</a> </div> </div> </div> </div> </span> </div> <!-- Prompt --> <span class="basket-prompt">What's in your basket <span class="icon-arrow-right2"></span></span> </div> </div> </div> <div class="row"> <hr> </div> <div class="row"> <div class="col-xs-6"> <form role="form"> <input type="checkbox" id="check-black" class="black" /> <label for="check-black"><span></span></label> <input type="checkbox" id="check-blue" class="blue" /> <label for="check-blue"><span></span></label> <input type="checkbox" id="check-orange" class="orange" /> <label for="check-orange"><span></span></label> <input type="checkbox" id="check-pink" class="pink" /> <label for="check-pink"><span></span></label> <input type="checkbox" id="check-red" class="red" /> <label for="check-red"><span></span></label> <input type="checkbox" id="check-yellow" class="yellow" /> <label for="check-yellow"><span></span></label> </form> </div> <div class="col-xs-6"> <form role="form"> <input type="checkbox" id="check-size-s" class="size" disabled /> <label for="check-size-s"><span>S</span></label> <input type="checkbox" id="check-size-m" class="size" /> <label for="check-size-m"><span>M</span></label> <input type="checkbox" id="check-size-l" class="size" /> <label for="check-size-l"><span>L</span></label> <input type="checkbox" id="check-size-xl" class="size" /> <label for="check-size-xl"><span>XL</span></label> </form> </div> </div> <div class="row"> <hr /> <div class="col-xs-6"> <div class="menu-group"> <form id="form1" role="form" class="radio-colors"> <span class="menu-block radio-display" data-color="black"></span> <a href="" class="menu-trigger"><span class="icon-arrow-down"></span></a> <nav class="menu-dropdown menu-dropdown1 closed" role="navigation"> <ul class="menu-colors"> <li><span class="dropdown-label">Colours</span></li> <li class="divider"></li> <li class="menu-sub-color"> <ul> <li class="color-black"> <input type="radio" data-set="radio-color-set" name="radio-color-set1" id="radio-color-set1-black" class="black" /> <label for="radio-color-set1-black"><span>Black</span></label> </li> <li class="color-blue"> <input type="radio" data-set="radio-color-set" name="radio-color-set1" id="radio-color-set1-blue" class="blue" /> <label for="radio-color-set1-blue"><span>Blue</span></label> </li> <li class="color-orange"> <input type="radio" data-set="radio-color-set" name="radio-color-set1" id="radio-color-set1-orange" class="orange" /> <label for="radio-color-set1-orange"><span>Orange</span></label> </li> <li class="color-pink"> <input type="radio" data-set="radio-color-set" name="radio-color-set1" id="radio-color-set1-pink" class="pink" /> <label for="radio-color-set1-pink"><span>Pink</span></label> </li> <li class="color-red"> <input type="radio" data-set="radio-color-set" name="radio-color-set1" id="radio-color-set1-red" class="red" /> <label for="radio-color-set1-red"><span>Red</span></label> </li> <li class="color-yellow"> <input type="radio" data-set="radio-color-set" name="radio-color-set1" id="radio-color-set1-yellow" class="yellow" /> <label for="radio-color-set1-yellow"><span>Yellow</span></label> </li> </ul> </li> </ul> </nav> </form> </div> </div> <div class="col-xs-6"> <div class="menu-group"> <form id="form2" role="form" class="radio-sizes"> <span class="menu-block radio-display" data-size="medium"></span> <a href="" class="menu-trigger"><span class="icon-arrow-down"></span></a> <nav class="menu-dropdown menu-dropdown1 closed" role="navigation"> <ul class="menu-sizes"> <li>Sizes</li> <li class="divider"></li> <li> <input type="radio" data-set="radio-size-set" name="radio-size-set1" id="radio-size-set1-small" class="small" /> <label for="radio-size-set1-small"><span>Small</span></label> </li> <li> <input type="radio" data-set="radio-size-set" name="radio-size-set1" id="radio-size-set1-medium" class="medium" /> <label for="radio-size-set1-medium"><span>Medium</span></label> </li> <li> <input type="radio" data-set="radio-size-set" name="radio-size-set1" id="radio-size-set1-large" class="large" /> <label for="radio-size-set1-large"><span>Large</span></label> </li> <li> <input type="radio" data-set="radio-size-set" name="radio-size-set1" id="radio-size-set1-extra-large" class="extra-large" /> <label for="radio-size-set1-extra-large"><span>Extra Large</span></label> </li> </ul> </nav> </form> </div> </div> </div> <div class="row"> <hr /> <div class="col-md-12"> <p> <a href="" class="btn btn-primary btn-lg">Default button</a> <a href="" class="btn btn-default btn-lg">Default button</a> <a href="" class="btn btn-success btn-lg">Default button</a> </p> <p> <a href="" class="btn btn-primary">Default button</a> <a href="" class="btn btn-default">Default button</a> <a href="" class="btn btn-success">Default button</a> </p> </div> </div> <div class="row"> <hr /> <div class="col-xs-6"> <div class="wishlist-container"> <span class="wishlist toggled"><span class="icon-heart"></span></span> <span class="wish-add"><a href="#">Wishlist</a></span> </div> </div> <div class="col-xs-6"> <!-- Empty --> </div> </div> <div class="row"> <hr /> <div class="col-lg-12"> <a href="#" class="btn btn-icon"><span class="icon-tags"></span></a> <a href="#" class="btn btn-icon"><span class="icon-clock"></span></a> <a href="#" class="btn btn-icon"><span class="icon-bubble"></span></a> <a href="#" class="btn btn-icon"><span class="icon-spinner"></span></a> <a href="#" class="btn btn-icon"><span class="icon-user"></span></a> <a href="#" class="btn btn-icon"><span class="icon-spinner2"></span></a> <a href="#" class="btn btn-icon"><span class="icon-settings"></span></a> <a href="#" class="btn btn-icon"><span class="icon-stats-down"></span></a> <a href="#" class="btn btn-icon"><span class="icon-earth"></span></a> <a href="#" class="btn btn-icon"><span class="icon-star"></span></a> <a href="#" class="btn btn-icon"><span class="icon-star2"></span></a> <a href="#" class="btn btn-icon"><span class="icon-star3"></span></a> <a href="#" class="btn btn-icon"><span class="icon-heart"></span></a> <a href="#" class="btn btn-icon"><span class="icon-arrow-up"></span></a> <a href="#" class="btn btn-icon"><span class="icon-arrow-right"></span></a> <a href="#" class="btn btn-icon"><span class="icon-arrow-down"></span></a> <a href="#" class="btn btn-icon"><span class="icon-arrow-left"></span></a> <a href="#" class="btn btn-icon"><span class="icon-checkmark"></span></a> <a href="#" class="btn btn-icon"><span class="icon-share"></span></a> <a href="#" class="btn btn-icon"><span class="icon-spin"></span></a> <a href="#" class="btn btn-icon"><span class="icon-bicycle"></span></a> <a href="#" class="btn btn-icon"><span class="icon-motorcycle"></span></a> <a href="#" class="btn btn-icon"><span class="icon-outdoor"></span></a> <a href="#" class="btn btn-icon"><span class="icon-running"></span></a> <a href="#" class="btn btn-icon"><span class="icon-horse"></span></a> <a href="#" class="btn btn-icon"><span class="icon-child"></span></a> <a href="#" class="btn btn-icon"><span class="icon-proviz"></span></a> <a href="#" class="btn btn-icon"><span class="icon-tag"></span></a> <a href="#" class="btn btn-icon"><span class="icon-basket"></span></a> <a href="#" class="btn btn-icon"><span class="icon-cancel"></span></a> <a href="#" class="btn btn-icon"><span class="icon-checkmark2"></span></a> <a href="#" class="btn btn-icon"><span class="icon-chronometer"></span></a> <a href="#" class="btn btn-icon"><span class="icon-alarm-clock"></span></a> <a href="#" class="btn btn-icon"><span class="icon-list"></span></a> <a href="#" class="btn btn-icon"><span class="icon-grid"></span></a> <a href="#" class="btn btn-icon"><span class="icon-grid2"></span></a> <a href="#" class="btn btn-icon"><span class="icon-truck"></span></a> <a href="#" class="btn btn-icon"><span class="icon-male"></span></a> <a href="#" class="btn btn-icon"><span class="icon-female"></span></a> </div> </div> <div class="row"> <hr /> <div class="col-lg-12"> <a href="#" class="btn btn-icon btn-lg" title="Cycling"><span class="icon-bicycle"></span></a> <a href="#" class="btn btn-icon btn-lg" title="Motor Cycling"><span class="icon-motorcycle"></span></a> <a href="#" class="btn btn-icon btn-lg" title="Outdoors"><span class="icon-outdoor"></span></a> <a href="#" class="btn btn-icon btn-lg" title="Running"><span class="icon-running"></span></a> <a href="#" class="btn btn-icon btn-lg" title="Horse Riding"><span class="icon-horse"></span></a> <a href="#" class="btn btn-icon btn-lg" title="Child"><span class="icon-child"></span></a> <a href="#" class="btn btn-icon btn-lg" title="Proviz"><span class="icon-proviz"></span></a> </div> </div> <div class="row"> <hr /> <div class="col-lg-12"> <span class="cti-dropdown"> <select class="cti-dropdown-select"> <option>Proviz Select</option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> </select> </span> </div> </div> <div class="row"> <hr /> <div class="col-lg-12"> <article class="module"> <div class="inside-module"> <div class="bar-full"> <span class="bar"></span> <div class="bar-box"> <span class="bar-flip"><span class="icon-star"></span> Awesome Flip!</span> </div> </div> <div class="pad"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div> </article> <article class="module"> <div class="inside-module"> <div class="bar-full"> <span class="bar"></span> <div class="bar-box"> <span class="bar-flip"><span class="icon-star"></span> Awesome Flip!</span> </div> </div> <div class="pad"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div> </article> <article class="module"> <div class="inside-module"> <div class="bar-full"> <span class="bar"></span> <div class="bar-box"> <span class="bar-flip"><span class="icon-star"></span> Awesome Flip!</span> </div> </div> <div class="pad"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div> </article> </div> </div> <div class="row"> <hr /> <div class="col-lg-12"> <ul class="pagination"> <li class="disabled"><a href="#">&laquo;</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">&raquo;</a></li> </ul> </div> </div> <div class="row"> <hr /> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Flat UI Kit - Script Codes CSS Codes

/* Presentation Styles
*/
html, body { height: auto; width: 100%; margin: 0; padding: 0;
}
body { height: auto; padding: 20px; margin: 0; background: #3d3166; background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #3d3166), color-stop(100%, #5c2589)); background: -webkit-linear-gradient(-45deg, #3d3166 0%, #5c2589 100%); background: -moz-linear-gradient(-45deg, #3d3166 0%, #5c2589 100%); background: -ms-linear-gradient(-45deg, #3d3166 0%, #5c2589 100%); background: -o-linear-gradient(-45deg, #3d3166 0%, #5c2589 100%); background: linear-gradient(135deg, #3d3166 0%, #5c2589 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3166', endColorstr='#5c2589',GradientType=1 );
}
h1 { font-family: "Roboto", sans-serif;
}
.padding,
.pad { padding: 30px 20px 20px 20px;
}
.container { background: #fff;
}
/* UI Color Variables
*/
/* UI Styles: Font Icons
*/
@font-face { font-family: 'proviz'; src: url("http://cl.ly/3o243B2v0f35/proviz.eot"); src: url("http://cl.ly/3o243B2v0f35/proviz.eot?#iefix") format("embedded-opentype"), url("http://cl.ly/371D431x1M2E/proviz.ttf") format("truetype"), url("http://cl.ly/0q1u101a3u1C/proviz.woff") format("woff"), url("http://cl.ly/29280f431m36/proviz.svg#proviz") format("svg"); font-weight: normal; font-style: normal;
}
[class^="icon-"], [class*=" icon-"] { font-family: 'proviz'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.icon-globe:before { content: "\e600";
}
.icon-forrst:before { content: "\e601";
}
.icon-tags:before { content: "\e079";
}
.icon-clock:before { content: "\e0b0";
}
.icon-bubble:before { content: "\e0e2";
}
.icon-spinner:before { content: "\e126";
}
.icon-user:before { content: "\e10a";
}
.icon-spinner2:before { content: "\e125";
}
.icon-settings:before { content: "\e140";
}
.icon-stats-down:before { content: "\e160";
}
.icon-earth:before { content: "\e1da";
}
.icon-star:before { content: "\e20b";
}
.icon-star2:before { content: "\e20a";
}
.icon-star3:before { content: "\e209";
}
.icon-heart:before { content: "\e212";
}
.icon-arrow-up:before { content: "\e29a";
}
.icon-arrow-right:before { content: "\e29b";
}
.icon-arrow-right2:before { content: "\e2bd";
}
.icon-arrow-down:before { content: "\e29c";
}
.icon-arrow-left:before { content: "\e29d";
}
.icon-checkmark:before { content: "\e25a";
}
.icon-share:before { content: "\e318";
}
.icon-spin:before { content: "\e602";
}
.icon-bicycle:before { content: "\e603";
}
.icon-motorcycle:before { content: "\e604";
}
.icon-outdoor:before { content: "\e605";
}
.icon-running:before { content: "\e606";
}
.icon-horse:before { content: "\e607";
}
.icon-child:before { content: "\e608";
}
.icon-proviz:before { content: "\e609";
}
.icon-tag:before { content: "\e60a";
}
.icon-basket:before { content: "\e60b";
}
.icon-cancel:before { content: "\e60c";
}
.icon-checkmark2:before { content: "\e60d";
}
.icon-chronometer:before { content: "\e60e";
}
.icon-alarm-clock:before { content: "\e60f";
}
.icon-list:before { content: "\e610";
}
.icon-grid:before { content: "\e611";
}
.icon-grid2:before { content: "\e612";
}
.icon-truck:before { content: "\e613";
}
.icon-male:before { content: "\e614";
}
.icon-female:before { content: "\e615";
}
/* UI Styles: Pagination
*/
.pagination > li > a,
.pagination > li > span { border: none; font-family: "Open Sans", sans-serif; font-weight: 600; color: #76828f;
}
.pagination > li > a:hover,
.pagination > li > span:hover { background: transparent; color: #4976a4;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > span:focus { background-color: #f5f5f5; border-radius: 3px; box-shadow: 0 2px 0 #e3e3e3; color: #76828f; font-weight: 700;
}
/* UI Styles: Basket
*/
.basket-wrap { display: block; position: relative; width: auto; background: #222729; padding: 20px; height: 80px; border-radius: 4px;
}
.basket-control { display: inline-block; float: right; margin: 0; padding: 0 0 2px 0;
}
.basket-control:hover .basket-block > span[class*="icon-"] { color: #fefd29; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; -o-transition: color 0.5s ease; transition: color 0.5s ease;
}
.basket-block { float: left; display: inline; position: relative; margin: 0; width: 40px; height: 40px; text-align: center; background: #3f454d; border-right: 1px solid #2a2d31; border-radius: 4px 0 0 4px;
}
.basket-block > span[class*="icon-"] { display: block; width: 40px; height: 40px; text-align: center; color: #69727e; font-size: 18px; line-height: 40px; -webkit-transition: color 0.25s ease; -moz-transition: color 0.25s ease; -ms-transition: color 0.25s ease; -o-transition: color 0.25s ease; transition: color 0.25s ease;
}
.basket-trigger { float: left; display: inline; position: relative; margin: 0; height: 40px; line-height: 40px; font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: 500; padding: 0 15px; background: #34393f; border-radius: 0 4px 4px 0;
}
.basket-trigger a { display: block; text-decoration: none;
}
.basket-title { color: #fefd29; margin-right: 10px;
}
.basket-content { color: #fff;
}
.basket-items { color: #6c7a8d;
}
.basket-prompt { float: right; display: none; text-align: right; font-family: "Open Sans", sans-serif; font-weight: 500; font-size: 14px; color: #6c7a8d; padding: 0; margin-right: 20px; line-height: 40px;
}
.basket-prompt.show { display: inline-block; -webkit-animation: fly-out 0.5s 1 ease; -moz-animation: fly-out 0.5s 1 ease; -o-animation: fly-out 0.5s 1 ease; animation: fly-out 0.5s 1 ease;
}
.basket-prompt span { font-size: 16px; color: #fff;
}
@-webkit-keyframes fly-out { 0% { opacity: 0; -webkit-transform: translate3d(20px, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes fly-out { 0% { opacity: 0; -moz-transform: translate3d(20px, 0, 0); } 100% { opacity: 1; -moz-transform: translate3d(0, 0, 0); }
}
@-o-keyframes fly-out { 0% { opacity: 0; -o-transform: translate3d(20px, 0, 0); } 100% { opacity: 1; -o-transform: translate3d(0, 0, 0); }
}
@keyframes fly-out { 0% { opacity: 0; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
.basket-preview { display: none; position: absolute; right: 0; top: 100%; margin-top: 2px; background: #fff; width: 245px; padding: 15px; border: 1px solid #c6c6c6; border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); z-index: 2000;
}
.basket-preview.show { display: block; -webkit-animation: fly-down 0.5s 1 ease; -moz-animation: fly-down 0.5s 1 ease; -o-animation: fly-down 0.5s 1 ease; animation: fly-down 0.5s 1 ease;
}
@-webkit-keyframes fly-down { 0% { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes fly-down { 0% { opacity: 0; -moz-transform: translate3d(0, 10px, 0); } 100% { opacity: 1; -moz-transform: translate3d(0, 0, 0); }
}
@-o-keyframes fly-down { 0% { opacity: 0; -o-transform: translate3d(0, 10px, 0); } 100% { opacity: 1; -o-transform: translate3d(0, 0, 0); }
}
@keyframes fly-down { 0% { opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
.basket-preview.hide { display: none;
}
.basket-summary { float: left; clear: both; width: 100%; padding: 5px 0; border-bottom: 2px solid #f4f4f4; text-align: right; font-weight: bold; font-size: 14px;
}
.basket-summary b { color: #9facba;
}
.basket-actions { float: left; clear: both; width: 100%; padding: 10px 0 0 0;
}
/* UI Styles: Product Slider
*/
.pslider-wrapper { float: left; width: 100%; overflow: hidden;
}
.pslider-controls { float: left; clear: both; width: 100%; padding: 5px 0; border-bottom: 2px solid #f4f4f4;
}
.pslider-controls > span { float: left; display: inline; width: 33%;
}
.pslider-controls > span.pslide-label { color: #9facba; font-size: 13px; text-align: center;
}
.pslider-controls > span.pslide-next a { float: right; margin-right: 0;
}
.pslider-controls > span.pslide-prev a { margin-left: 0;
}
.pslider-inside { width: 213px; height: 94px; white-space: nowrap;
}
.pslider { margin: 0; padding: 0; display: block; overflow: hidden;
}
.pslider li { float: left; display: inline; width: 213px; height: 94px; background: #f5f5f5;
}
.pslider li:nth-child(even) { background: #eee;
}
/* UI Styles: Checkbox Core
*/
input[type="checkbox"],
input[type="checkbox"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:checked { display: none;
}
input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled + label span { cursor: not-allowed;
}
input[type="checkbox"] + label span { display: inline-block; width: 32px; height: 30px; background: #454545; border-radius: 4px; cursor: pointer; position: relative; padding: 0; margin: 5px; border: none; -webkit-backface-visibility: hidden; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -webkit-transition: .075s; -moz-transition: .075s; -ms-transition: .075s; -o-transition: .075s; transition: .075s; box-shadow: 0 2px 0 #000;
}
input[type="checkbox"]:checked + label span:after { cursor: pointer; display: block; position: absolute; top: -4px; left: -4px; width: 40px; height: 40px; box-shadow: inset 0 0 0 2px #d0d0d0; border-radius: 4px; line-height: 40px; font-size: 16px; text-align: center; font-family: "proviz"; content: "\e25a"; color: rgba(255, 255, 255, 0.3); -webkit-backface-visibility: hidden; -webkit-transition: .045s; -moz-transition: .045s; -ms-transition: .075s; -o-transition: .045s; transition: .045s;
}
input[type="checkbox"]:checked + label span:active::after { height: 38px;
}
/* UI Styles: Checkbox Colors
*/
input[type="checkbox"].black + label span { background: #454545; box-shadow: 0 2px 0 #000000;
}
input[type="checkbox"].black + label span:active { top: 2px; box-shadow: 0 0px 0 #000000;
}
input[type="checkbox"].blue + label span { background: #2aa9e0; box-shadow: 0 2px 0 #1a7aa4;
}
input[type="checkbox"].blue + label span:active { top: 2px; box-shadow: 0 0px 0 #1a7aa4;
}
input[type="checkbox"].orange + label span { background: #eb8046; box-shadow: 0 2px 0 #d3672d;
}
input[type="checkbox"].orange + label span:active { top: 2px; box-shadow: 0 0px 0 #d3672d;
}
input[type="checkbox"].pink + label span { background: #db4286; box-shadow: 0 2px 0 #bc3671;
}
input[type="checkbox"].pink + label span:active { top: 2px; box-shadow: 0 0px 0 #bc3671;
}
input[type="checkbox"].red + label span { background: #d94134; box-shadow: 0 2px 0 #ab3329;
}
input[type="checkbox"].red + label span:active { top: 2px; box-shadow: 0 0px 0 #ab3329;
}
input[type="checkbox"].yellow + label span { background: #f2d54c; box-shadow: 0 2px 0 #dcb84b;
}
input[type="checkbox"].yellow + label span:active { top: 2px; box-shadow: 0 0px 0 #dcb84b;
}
/* UI Styles: Checkbox Sizes
*/
input[type="checkbox"].size + label span { background: #b9d9f5; box-shadow: 0 2px 0 #94bfe4; text-align: center; font-family: "Open Sans", sans-serif; line-height: 32px; font-size: 16px; color: #fff;
}
input[type="checkbox"].size + label span:hover { background: #7db3e1; box-shadow: 0 2px 0 #6495be;
}
input[type="checkbox"].size + label span:active { top: 2px; box-shadow: 0 0px 0 #94bfe4;
}
input[type="checkbox"]:checked.size + label span { content: ""; color: #fff; background: #7db3e1; box-shadow: 0 2px 0 #6495be;
}
input[type="checkbox"]:checked.size + label span:after { content: ""; color: rgba(255, 255, 255, 0.3);
}
input[type="checkbox"]:disabled.size + label span { opacity: 0.4;
}
input[type="checkbox"]:disabled.size + label span:hover { background: #b9d9f5; box-shadow: 0 2px 0 #94bfe4;
}
input[type="checkbox"]:disabled.size + label span:active { top: 0; box-shadow: 0 2px 0 #94bfe4;
}
/* UI Styles: Menu Groups
*/
.menu-group { display: inline-block; position: relative; height: 30px; width: 65px; margin: 5px;
}
.menu-block,
.menu-trigger { float: left; display: inline; position: relative; width: 32px; height: 30px; background: #454545; border-radius: 4px 0 0 4px; cursor: pointer; padding: 0; margin: 0; border: none; outline: none; box-shadow: 0 2px 0 #000; text-align: center; line-height: 34px; color: #fff; color: rgba(255, 255, 255, 0.5); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}
.menu-block { cursor: auto;
}
.menu-trigger { border-radius: 0 4px 4px 0; box-shadow: 0 2px 0 #000, inset 1px 0 0 rgba(0, 0, 0, 0.2);
}
.menu-trigger:hover { text-decoration: none; color: #fff;
}
.menu-trigger:active, .menu-trigger.active { color: #ccc; background: #323232; height: 32px; box-shadow: 0 0 0 #000, inset 0 2px 0 black, inset 1px 0 0 rgba(0, 0, 0, 0.2); line-height: 32px; -webkit-backface-visibility: hidden; -webkit-transition: .045s; -moz-transition: .045s; -ms-transition: .045s; -o-transition: .045s; transition: .045s;
}
.menu-dropdown { position: absolute; z-index: 1000; top: 35px; left: 0px; float: left; min-width: 170px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.5); box-shadow: 0 5px 5px black; background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box;
}
.menu-dropdown.closed { display: none;
}
.menu-dropdown.open { display: block;
}
ul.menu-colors,
ul.menu-sizes,
ul.menu-colors li,
ul.menu-sizes li { list-style-type: none; margin: 0; padding: 0;
}
ul.menu-colors,
ul.menu-sizes { padding: 5px 0;
}
ul.menu-colors li,
ul.menu-sizes li { display: list-item; text-align: -webkit-match-parent;
}
ul.menu-colors li input[type="radio"],
ul.menu-sizes li input[type="radio"] { display: none;
}
ul.menu-colors li label,
ul.menu-sizes li label { display: block; width: 100%; height: 100%; text-indent: -9999px; cursor: pointer;
}
ul.menu-sizes li { padding: 3px 20px;
}
ul.menu-sizes li:hover { background: #f5f5f5;
}
ul.menu-sizes li label { text-indent: 0px; font-weight: normal; margin: 0;
}
ul.menu-colors li.divider,
ul.menu-sizes li.divider { height: 1px; margin: 9px 0; padding: 0; overflow: hidden; background-color: #e5e5e5;
}
ul.menu-colors li > ul,
ul.menu-sizes li > ul { margin: 0; padding: 0 20px;
}
ul.menu-colors li > span.dropdown-label,
ul.menu-sizes li > span.dropdown-label { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: nowrap;
}
ul.menu-colors li[class*="color-"] { float: left; display: inline; position: relative; width: 26px; height: 26px; background: #454545; border-radius: 3px; cursor: pointer; padding: 0; margin: 0 5px 5px 0; border: none; outline: none;
}
ul.menu-colors li.color-black { background: #454545;
}
ul.menu-colors li.color-blue { background: #2aa9e0;
}
ul.menu-colors li.color-orange { background: #eb8046;
}
ul.menu-colors li.color-pink { background: #db4286;
}
ul.menu-colors li.color-red { background: #d94134;
}
ul.menu-colors li.color-yellow { background: #f2d54c;
}
/* UI Styles: Buttons
*/
.btn-default { color: #ffffff; background-color: #b9d9f5; border-color: transparent; box-shadow: 0 2px 0 #94bfe4;
}
.btn-primary { color: #ffffff; background-color: #4976a4; border-color: transparent; box-shadow: 0 2px 0 #395d82;
}
.btn-success { color: #ffffff; background-color: #67b96f; border-color: transparent; box-shadow: 0 2px 0 #4b9b53;
}
.btn-warning { color: #ffffff; background-color: #f5b159; border-color: transparent; box-shadow: 0 2px 0 #df9c44;
}
.btn { position: relative; top: 0; border: none; padding: 0 15px; margin: 5px; height: 30px; line-height: 30px; outline: none; border-radius: 4px; font-family: "Open Sans", sans-serif; font-weight: 400; -webkit-backface-visibility: hidden;
}
.btn.btn-lg { border-radius: 4px; padding: 0 20px; height: 44px; line-height: 44px;
}
.btn.btn-icon { font-size: 18px; height: 29px; width: 32px; line-height: 32px; padding: 0; text-align: center; color: #fff; background: #b9d9f5; margin: 5px; box-shadow: 0 2px 0 #94bfe4;
}
.btn.btn-icon:hover { background: #7db3e1; box-shadow: 0 2px 0 #6495be;
}
.btn.btn-icon.btn-lg { width: auto; font-size: 32px; height: 44px; line-height: 44px; padding: 0 25px;
}
.btn:active,
.btn.active { top: 2px; outline: 0; -webkit-backface-visibility: hidden; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: .075s; -moz-transition: .075s; -ms-transition: .075s; -o-transition: .075s; transition: .075s;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.open .dropdown-toggle.btn { color: #ffffff; background-color: #b0d3f1; border-color: transparent;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary { color: #ffffff; background-color: #406e9c; border-color: transparent;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success { color: #ffffff; background-color: #5db265; border-color: transparent;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning { color: #ffffff; background-color: #f3a643; border-color: transparent;
}
/* UI Styles: Select Boxes
*/
.cti-dropdown-select { font-size: inherit; /* inherit size from .custom-dropdown */ padding: .5em; /* add some space*/ margin: 0; /* remove default margins */ background-color: #f5f5f5; box-shadow: 0 2px 0 #e3e3e3; font-family: "Open Sans", sans-serif; font-weight: 600; color: #76828f;
}
@supports (pointer-events: none) and ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) { .cti-dropdown { position: relative; display: inline-block; vertical-align: middle; } .cti-dropdown-select { padding-right: 2.5em; border: 0; border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .cti-dropdown::before, .cti-dropdown::after { content: ""; position: absolute; pointer-events: none; } .cti-dropdown::after { /* Proviz dropdown arrow */ font-family: "proviz", sans-serif; content: "\e29c"; height: 1em; font-size: 16px; line-height: 1; right: 7px; top: 50%; margin-top: -.5em; color: #76828f; } .cti-dropdown::before { /* Proviz dropdown arrow cover */ width: 2em; right: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; background-color: #f5f5f5; box-shadow: 0 2px 0 #e3e3e3; } .cti-dropdown-select[disabled] { color: rgba(0, 0, 0, 0.3); } .cti-dropdown::after { color: rgba(0, 0, 0, 0.4); } /* FF only temporary & ugly fixes */ /* the "appearance: none" applied on select still shows a dropdown arrow on Firefox */ /* https://bugzilla.mozilla.org/show_bug.cgi?id=649849 */ @-moz-document url-prefix() { .cti-dropdown-select { padding-right: 0.9em; } }
}
/* UI Styles: Add to Wishlist
*/
.wishlist-container { display: inline-block;
}
.wishlist-container .icon-heart { background: #fff; height: 24px; width: 24px; float: left; display: block; border-radius: 50%; color: #a5b2bf; line-height: 24px; text-align: center; padding: 0;
}
.wishlist.animate span.icon-heart { color: #fff; background: #ee8b94; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg);
}
.wishlist.toggled span.icon-heart { color: #a5b2bf; background: #fff; -webkit-transition: all 0.65s ease; transition: all 0.65s ease; -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg);
}
.wishlist { display: inline-block; width: 24px; height: 24px; -webkit-transition: all 0.25s ease; transition: all 0.25s ease;
}
.wishlist,
.wishlist span,
.wishlist a { color: #a5b2bf;
}
.wish-add { position: relative; display: inline-block; width: auto; overflow: hidden;
}
.wish-add a { position: relative; display: inline-block; width: 100%; font-family: "Open Sans", sans-serif; line-height: 24px; white-space: nowrap; color: #a5b2bf; -webkit-transition: all 0.15s ease; transition: all 0.15s ease;
}
.wish-add a.added { color: #ee8b94; -webkit-transition: all 0.25s ease; transition: all 0.25s ease;
}
.wish-add.mini a { width: 0%; -webkit-transition: all 0.25s ease; transition: all 0.25s ease;
}
/* UI Styles: Radio Sizes
*/
.radio-sizes .radio-display,
.radio-sizes .menu-trigger { color: #fff; background: #b9d9f5; box-shadow: 0 2px 0 #94bfe4;
}
.radio-sizes .radio-display + .menu-trigger,
.radio-sizes .menu-trigger + .menu-trigger { box-shadow: 0 2px 0 #94bfe4, inset 1px 0 0 rgba(60, 110, 160, 0.3);
}
.radio-sizes .radio-display + .menu-trigger:active, .radio-sizes .radio-display + .menu-trigger.active,
.radio-sizes .menu-trigger + .menu-trigger:active,
.radio-sizes .menu-trigger + .menu-trigger.active { color: #fff; background: #94bfe4; box-shadow: 0 0 0 #000, inset 0 2px 0 rgba(60, 110, 160, 0.3), inset 1px 0 0 rgba(60, 110, 160, 0.3);
}
.radio-sizes .radio-display + .menu-trigger:hover,
.radio-sizes .menu-trigger + .menu-trigger:hover { background: #b9d9f5;
}
.radio-sizes .radio-display[data-size] { text-align: center; text-indent: 0px; font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: bold; line-height: 32px;
}
.radio-sizes .radio-display[data-size="small"]:before { content: "S";
}
.radio-sizes .radio-display[data-size="medium"]:before { content: "M";
}
.radio-sizes .radio-display[data-size="large"]:before { content: "L";
}
.radio-sizes .radio-display[data-size="extra-large"]:before { content: "XL";
}
/* UI Styles: Radio Colors
*/
.radio-colors,
.radio-sizes { display: inline-block; position: relative; height: 30px; width: 65px; margin: 0px;
}
.radio-display[data-color="black"] { background: #454545; box-shadow: 0 2px 0 #000000;
}
.radio-display[data-color="blue"] { background: #2aa9e0; box-shadow: 0 2px 0 #1a7aa4;
}
.radio-display[data-color="blue"] + .menu-trigger { background: #2aa9e0; box-shadow: 0 2px 0 #1a7aa4, inset 1px 0 0 rgba(0, 0, 0, 0.1);
}
.radio-display[data-color="blue"] + .menu-trigger:hover { color: #fff; background: #259ed2;
}
.radio-display[data-color="blue"] + .menu-trigger:active, .radio-display[data-color="blue"] + .menu-trigger.active { color: #fff; background: #1a7aa4; box-shadow: 0 0 0 #000, inset 0 2px 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(0, 0, 0, 0.2);
}
.radio-display[data-color="orange"] { background: #eb8046; box-shadow: 0 2px 0 #d3672d;
}
.radio-display[data-color="orange"] + .menu-trigger { background: #eb8046; box-shadow: 0 2px 0 #d3672d, inset 1px 0 0 rgba(0, 0, 0, 0.1);
}
.radio-display[data-color="orange"] + .menu-trigger:hover { color: #fff; background: #e4783d;
}
.radio-display[data-color="orange"] + .menu-trigger:active, .radio-display[data-color="orange"] + .menu-trigger.active { color: #fff; background: #d3672d; box-shadow: 0 0 0 #000, inset 0 2px 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(0, 0, 0, 0.2);
}
.radio-display[data-color="pink"] { background: #db4286; box-shadow: 0 2px 0 #bc3671;
}
.radio-display[data-color="pink"] + .menu-trigger { background: #db4286; box-shadow: 0 2px 0 #bc3671, inset 1px 0 0 rgba(0, 0, 0, 0.1);
}
.radio-display[data-color="pink"] + .menu-trigger:hover { color: #fff; background: #d23e80;
}
.radio-display[data-color="pink"] + .menu-trigger:active, .radio-display[data-color="pink"] + .menu-trigger.active { color: #fff; background: #bc3671; box-shadow: 0 0 0 #000, inset 0 2px 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(0, 0, 0, 0.2);
}
.radio-display[data-color="red"] { background: #d94134; box-shadow: 0 2px 0 #ab3329;
}
.radio-display[data-color="red"] + .menu-trigger { background: #d94134; box-shadow: 0 2px 0 #ab3329, inset 1px 0 0 rgba(0, 0, 0, 0.1);
}
.radio-display[data-color="red"] + .menu-trigger:hover { color: #fff; background: #cd392c;
}
.radio-display[data-color="red"] + .menu-trigger:active, .radio-display[data-color="red"] + .menu-trigger.active { color: #fff; background: #ab3329; box-shadow: 0 0 0 #000, inset 0 2px 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(0, 0, 0, 0.2);
}
.radio-display[data-color="yellow"] { background: #f2d54c; box-shadow: 0 2px 0 #dcb84b;
}
.radio-display[data-color="yellow"] + .menu-trigger { background: #f2d54c; box-shadow: 0 2px 0 #dcb84b, inset 1px 0 0 rgba(0, 0, 0, 0.1);
}
.radio-display[data-color="yellow"] + .menu-trigger:hover { color: #fff; background: #e8cc48;
}
.radio-display[data-color="yellow"] + .menu-trigger:active, .radio-display[data-color="yellow"] + .menu-trigger.active { color: #fff; background: #dcb84b; box-shadow: 0 0 0 #000, inset 0 2px 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(0, 0, 0, 0.2);
}
/* UI Styles: Letterbox Load
*/
.module { float: left; position: relative; clear: both; width: 100%; margin-bottom: 15px; display: block; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
.module p { font-family: "Open Sans", sans-serif; font-size: 16px; color: #444;
}
.inside-module { display: block; position: relative; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
article .bar-full { float: left; position: relative; width: 100%; height: 10px; background: #f7f7f6;
}
article .bar { display: block; width: 50px; height: 10px; position: absolute; top: 0; left: 0; background: #769ff4;
}
article .bar-box { display: none; position: absolute; top: 10px; width: 160px; height: 30px;
}
article .bar-box .bar-flip { display: block; position: absolute; top: 0px; width: 160px; height: 30px; padding: 0 20px; background: #6589d4; font-family: "Open Sans", Arial, sans-serif; font-weight: 600; color: #fff; line-height: 30px; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: perspective(250px) rotateX(-90deg); -moz-transform: perspective(250px) rotateX(-90deg); -ms-transform: perspective(250px) rotateX(-90deg); -o-transform: perspective(250px) rotateX(-90deg); transform: perspective(250px) rotateX(-90deg); -webkit-transition: 0.2s linear 0.2s; -moz-transition: 0.2s linear 0.2s; -ms-transition: 0.2s linear 0.2s; -o-transition: 0.2s linear 0.2s; transition: 0.2s linear 0.2s;
}
article:hover .bar-flip { -webkit-transform: perspective(350px) rotateX(0deg); -moz-transform: perspective(350px) rotateX(0deg); -ms-transform: perspective(350px) rotateX(0deg); -o-transform: perspective(350px) rotateX(0deg); transform: perspective(350px) rotateX(0deg); -webkit-transition: 0.2s linear 0s; -moz-transition: 0.2s linear 0s; -ms-transition: 0.2s linear 0s; -o-transition: 0.2s linear 0s; transition: 0.2s linear 0s;
}
.come-in .bar,
.already-visible .bar { width: 160px; -webkit-transition: width 0.35s ease-in; -moz-transition: width 0.35s ease-in; -ms-transition: width 0.35s ease-in; -o-transition: width 0.35s ease-in; transition: width 0.35s ease-in;
}
.come-in .bar-box,
.already-visible .bar-box { display: block;
}
.module.come-in { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-animation: google 0.4s ease forwards; -moz-animation: google 0.4s ease forwards; -o-animation: google 0.4s ease forwards; animation: google 0.4s ease forwards;
}
.module,
.module.already-visible { -webkit-transform: translateY(0px) perspective(200px) rotatex(0deg); transform: translateY(0px) perspective(200px) rotatex(0deg); -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none;
}
@-webkit-keyframes google { 0% { -webkit-transform: translateY(100px) perspective(200px) rotatex(30deg); } 100% { -webkit-transform: translateY(0px) perspective(200px) rotatex(0deg); }
}
@-moz-keyframes google { 0% { -moz-transform: translateY(100px) perspective(200px) rotatex(30deg); } 100% { -moz-transform: translateY(0px) perspective(200px) rotatex(0deg); }
}
@-o-keyframes google { 0% { -o-transform: translateY(100px) perspective(200px) rotatex(30deg); } 100% { -o-transform: translateY(0px) perspective(200px) rotatex(0deg); }
}
@keyframes google { 0% { -webkit-transform: translateY(100px) perspective(200px) rotatex(30deg); transform: translateY(100px) perspective(200px) rotatex(30deg); } 100% { -webkit-transform: translateY(0px) perspective(200px) rotatex(0deg); transform: translateY(0px) perspective(200px) rotatex(0deg); }
}

Responsive Flat UI Kit - Script Codes JS Codes

/* UI Styles: Menu Groups
*/
function menuGroup(){ $('html').click(function() { if ($(".menu-trigger").hasClass("active")){ $(".menu-trigger").removeClass("active"); } if ($(".menu-dropdown").hasClass("open")){ $(".menu-dropdown").removeClass("open").addClass("closed"); } }); // Open menu $(".menu-trigger").click(function(event) { event.preventDefault(); event.stopPropagation(); $(this).toggleClass("active"); if($(this).next('.menu-dropdown').hasClass("closed")){ $(this).next(".menu-dropdown").removeClass("closed").addClass("open"); } $("input[name*=radio-color-set").change(function(){ var parent = $(this).parent(".radio-colors"); var selected = $(" input[type=radio]:checked", parent); $(".radio-display", parent).attr("data-color", selected.attr("class")); }); });
}
/* UI Styles: Bootstrap Tooltips
*/
function bsTooltips(){ $('.btn').tooltip();
}
/* UI Styles: Dropdown Basket
*/
function dropBasket(){ $(".basket-control").hover(function(event){ event.preventDefault(); $(".basket-prompt").toggleClass("show"); }); $("#basket-controller").click(function(event){ event.preventDefault(); $(".basket-preview").toggleClass("show"); });
}
/* UI Styles: Product Slider
*/
function pSlider(){ // Calculate Width var sum = 0; $("#pslider li.pslide").each(function(){ sum += ($(this).width()); }); $("#pslider").width(sum); // First Slide var startSlide = $("#pslider li.active").next().attr("id"); // Total Items var totalItems = $('#pslider li').length; // Settings $(".pslide-label").html("1 of " + totalItems); $(".prev").addClass("disabled"); $(".next").removeClass("disabled"); // Slider Control: Next var slide = 0; $(".next").click(function(event){ event.preventDefault(); // Enable Prev if disabled $(".prev").removeClass("disabled"); // Active Slides (prev/next) var $targetItem = $("#pslider li.active").next(); $targetItem.addClass("active"); var $prevItem = $("#pslider li.active").prev("li"); $prevItem.removeClass("active"); // Current Item var $currentItem = $("#pslider li.active"); var currentSlide = $currentItem.attr("data-slide"); // Next Slide Number var nextSlide = $targetItem.attr("data-slide"); // label if (currentSlide == totalItems) { $(".pslide-label").html(currentSlide + " of " + totalItems); $(this).addClass("disabled"); } else { $(".pslide-label").html(nextSlide + " of " + totalItems); } // Slide if (sum !== (slide+213)) { slide += 213; } $(".pslider li").css({ 'transform': 'translate3d(-' + slide + 'px,0,0)', 'transition': 'all 0.35s ease-out' }); }); // Slider Control: Prev $(".prev").click(function(event){ event.preventDefault(); // Active Slides (prev/next) var $targetItem = $("#pslider li.active").prev(); $targetItem.addClass("active"); var $prevItem = $("#pslider li.active").next("li"); $prevItem.removeClass("active"); // Current Item var $currentItem = $("#pslider li.active"); var currentSlide = $currentItem.attr("data-slide"); // Next Slide Number var nextSlide = $targetItem.attr("data-slide"); // label if (currentSlide == "1") { $(".pslide-label").html(currentSlide + " of " + totalItems); $(this).addClass("disabled"); } else { $(".pslide-label").html(nextSlide + " of " + totalItems); } // alert("Sum: " + sum + " - Slide Pos: " + slide); if (sum !== (slide+213)) { slide -= 213; } else if (slide == (sum-213)) { slide -= 213; $(".next").removeClass("disabled"); } else { slide = 0; } $(".pslider li").css({ 'transform': 'translate3d(-' + slide + 'px,0,0)', 'transition': 'all 0.35s ease-out' }); });
}
/* UI Styles: Wishlist
*/
function wishlist(){ $('.wish-add').bind('click', function(event) { event.preventDefault(); event.stopPropagation(); $('.wish-add a').toggleClass('added'); $('.wishlist').toggleClass('toggled animate'); });
}
/* UI Styles: Radio Sizes
*/
function radioSizes(){ $("input").attr("data-set","radio-size-set").change(function(){ // Just use a data-attribute var parent = $(this).closest("form"); var selected = $(" input[type=radio]:checked", parent); $(".radio-display", parent).attr("data-size", selected.attr("class")); });
}
/* UI Styles: Radio Colors
*/
function radioColor(){ $("input").attr("data-set","radio-color-set").change(function(){ var parent = $(this).closest("form"); var selected = $(" input[type=radio]:checked", parent); $(".radio-display", parent).attr("data-color", selected.attr("class")); });
}
/* UI Styles: Visible Elements
*/
function visibleElements(){ $.fn.visible = function(partial) { var $t = $(this), $w = $(window), viewTop = $w.scrollTop(), viewBottom = viewTop + $w.height(), _top = $t.offset().top, _bottom = _top + $t.height(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom; return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); };
}
function visibleStuff(){ var win = $(window); var allMods = $(".module"); allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("already-visible"); } }); win.scroll(function(event) { allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("come-in"); } }); });
}
jQuery(document).ready(function(){ bsTooltips(); radioSizes(); radioColor(); dropBasket(); wishlist(); pSlider(); menuGroup(); visibleElements(); visibleStuff();
});
Responsive Flat UI Kit - Script Codes
Responsive Flat UI Kit - Script Codes
Home Page Home
Developer Matt Litherland
Username mattsince87
Uploaded August 03, 2022
Rating 4.5
Size 17,612 Kb
Views 48,576
Do you need developer help for Responsive Flat UI Kit?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Litherland (mattsince87) Script Codes
Name
Cool Hidden Drawer
Gradient over Google Maps
Slick Two Part Form
Vertical Align Images - Explained
Wishlist Toggle Button
Responsive Flot Chart
Subtle CSS3 Heart Beat
Animated Resposnive SVG Path
Node Waves
Smooth Anchor Scrolling
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!