Skip to content

Instantly share code, notes, and snippets.

@ajaypatelaj
Created July 19, 2014 06:07
Show Gist options
  • Save ajaypatelaj/8318f3c9307ae1e62b4b to your computer and use it in GitHub Desktop.
Save ajaypatelaj/8318f3c9307ae1e62b4b to your computer and use it in GitHub Desktop.
A Pen by Matt Litherland.
<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>

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!

Try clicking & hovering everything.

Feel free to fork, heart and share!

A Pen by Matt Litherland on CodePen.

License.

/*
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();
});
/*
Presentation Styles
*/
html, body {
height: auto;
width: 100%;
margin: 0;
padding: 0;}
body {
height: auto; // Fixes bottom padding bug
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;}
// Helpers
.padding,
.pad {
padding: 30px 20px 20px 20px;}
.container {
background: #fff;}
/*
UI Color Variables
*/
$default-flat: #b9d9f5;
$default-shadow: #94bfe4;
$default-highlight:#7db3e1;
$default-shadow2: #6495be;
$black-flat: #454545;
$black-shadow: #000000;
$black-highlight: #404040;
$blue-flat: #2aa9e0;
$blue-shadow: #1a7aa4;
$blue-highlight: #259ed2;
$orange-flat: #eb8046;
$orange-shadow: #d3672d;
$orange-highlight: #e4783d;
$pink-flat: #db4286;
$pink-shadow: #bc3671;
$pink-highlight: #d23e80;
$red-flat: #d94134;
$red-shadow: #ab3329;
$red-highlight: #cd392c;
$yellow-flat: #f2d54c;
$yellow-shadow: #dcb84b;
$yellow-highlight: #e8cc48;
/*
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;
// Better Font Rendering
-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;
&: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;
// Demo Purposes Only
background: #222729;
padding: 20px;
height: 80px;
border-radius: 4px;}
.basket-control {
display: inline-block;
float: right;
margin: 0;
padding: 0 0 2px 0;
&: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;
& > 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;}
// Prompt
.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;
&.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;}
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); // Chrome Fix
transform: translate3d(20px,0,0);}
100% {
opacity: 1;
-webkit-transform: translate3d(0,0,0); // Chrome Fix
transform: translate3d(0,0,0);}
}
// Basket Preview Styles
.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); // Chrome Fix
transform: translate3d(0,10px,0);}
100% {
opacity: 1;
-webkit-transform: translate3d(0,0,0); // Chrome Fix
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;
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%;
&.pslide-label {
color: #9facba;
font-size: 13px;
text-align: center;}
&.pslide-next a {
float: right;
margin-right: 0;}
&.pslide-prev a {
margin-left: 0;}
}
.pslider-inside {
width: 213px;
height: 94px;
white-space: nowrap;}
.pslider {
margin: 0;
padding: 0;
display: block;
// overflow-x: scroll; // Fallback for IE
overflow: hidden;
li {
float: left;
display: inline;
width: 213px;
height: 94px;
background: #f5f5f5;
&: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; // Chrome Flicker Fix
-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; // Just in case!
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; // Chrome Flicker Fix
-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: $black-flat;
box-shadow: 0 2px 0 $black-shadow;
&:active {
top: 2px;
box-shadow: 0 0px 0 $black-shadow;}
}
input[type="checkbox"].blue + label span {
background: $blue-flat;
box-shadow: 0 2px 0 $blue-shadow;
&:active {
top: 2px;
box-shadow: 0 0px 0 $blue-shadow;}
}
input[type="checkbox"].orange + label span {
background: $orange-flat;
box-shadow: 0 2px 0 $orange-shadow;
&:active {
top: 2px;
box-shadow: 0 0px 0 $orange-shadow;}
}
input[type="checkbox"].pink + label span {
background: $pink-flat;
box-shadow: 0 2px 0 $pink-shadow;
&:active {
top: 2px;
box-shadow: 0 0px 0 $pink-shadow;}
}
input[type="checkbox"].red + label span {
background: $red-flat;
box-shadow: 0 2px 0 $red-shadow;
&:active {
top: 2px;
box-shadow: 0 0px 0 $red-shadow;}
}
input[type="checkbox"].yellow + label span {
background: $yellow-flat;
box-shadow: 0 2px 0 $yellow-shadow;
&:active {
top: 2px;
box-shadow: 0 0px 0 $yellow-shadow;}
}
/*
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;
&:hover {
background: #7db3e1;
box-shadow: 0 2px 0 #6495be;}
&: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);
}
// Disabled
input[type="checkbox"]:disabled.size + label span {
opacity: 0.4;
&:hover {
background: #b9d9f5;
box-shadow: 0 2px 0 #94bfe4;}
&: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);
&:hover {
text-decoration: none;
color: #fff;}
&:active,&.active {
color: #ccc;
background: #323232;
height: 32px;
box-shadow:
0 0 0 #000, // Remove Bottom Shadow
inset 0 2px 0 rgba(0,0,0,1), // Add Top Shadow
inset 1px 0 0 rgba(0,0,0,0.2); // Keep Left Shadow
line-height: 32px;
-webkit-backface-visibility: hidden; // Chrome Flicker Fix
-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 rgba(0,0,0,1);
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;
&.closed {
display: none;}
&.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;
input[type="radio"] {
display: none;}
label {
display: block;
width: 100%;
height: 100%;
text-indent: -9999px;
cursor: pointer;}
}
ul.menu-sizes li {
padding: 3px 20px;
&:hover {
background: #f5f5f5;}
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;}
// Color Overrides
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;}
// Colors
ul.menu-colors li.color-black {
background: $black-flat;}
ul.menu-colors li.color-blue {
background: $blue-flat;}
ul.menu-colors li.color-orange {
background: $orange-flat;}
ul.menu-colors li.color-pink {
background: $pink-flat;}
ul.menu-colors li.color-red {
background: $red-flat;}
ul.menu-colors li.color-yellow {
background: $yellow-flat;}
/*
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; // Chrome Flicker Fix
&.btn-lg {
border-radius: 4px;
padding: 0 20px;
height: 44px;
line-height: 44px;}
&.btn-icon {
font-size: 18px;
height: 29px;
width: 32px;
line-height: 32px;
padding: 0;
text-align: center;
color: #fff;
background: $default-flat;
margin: 5px;
box-shadow: 0 2px 0 $default-shadow;
&:hover {
background: $default-highlight;
box-shadow: 0 2px 0 $default-shadow2;}
&.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; // Chrome Flicker Fix
-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,.3);}
.cti-dropdown::after {
color: rgba(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: .9em }
}
}
/*
UI Styles: Add to Wishlist
*/
.wishlist-container {
display: inline-block;
.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;
&.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: $default-flat;
box-shadow: 0 2px 0 $default-shadow;
+ .menu-trigger {
box-shadow: 0 2px 0 $default-shadow, inset 1px 0 0 rgba(60,110,160,0.3);
&:active,
&.active {
color: #fff;
background: $default-shadow;
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)}
&: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;}
// Small
&[data-size="small"]:before {
content: "S";}
// Medium
&[data-size="medium"]:before {
content: "M";}
// Large
&[data-size="large"]:before {
content: "L";}
// Extra Large
&[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 {
// Black
&[data-color="black"] {
background: $black-flat;
box-shadow: 0 2px 0 $black-shadow;}
// Blue
&[data-color="blue"] {
background: $blue-flat;
box-shadow: 0 2px 0 $blue-shadow;
+ .menu-trigger {
background: $blue-flat;
box-shadow: 0 2px 0 $blue-shadow, inset 1px 0 0 rgba(0,0,0,0.1);
&:hover {
color: #fff;
background: $blue-highlight;}
&:active,
&.active {
color: #fff;
background: $blue-shadow;
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);}
}
}
// Orange
&[data-color="orange"] {
background: $orange-flat;
box-shadow: 0 2px 0 $orange-shadow;
+ .menu-trigger {
background: $orange-flat;
box-shadow: 0 2px 0 $orange-shadow, inset 1px 0 0 rgba(0,0,0,0.1);
&:hover {
color: #fff;
background: $orange-highlight;}
&:active,
&.active {
color: #fff;
background: $orange-shadow;
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);}
}
}
// Pink
&[data-color="pink"] {
background: $pink-flat;
box-shadow: 0 2px 0 $pink-shadow;
+ .menu-trigger {
background: $pink-flat;
box-shadow: 0 2px 0 $pink-shadow, inset 1px 0 0 rgba(0,0,0,0.1);
&:hover {
color: #fff;
background: $pink-highlight;}
&:active,
&.active {
color: #fff;
background: $pink-shadow;
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);}
}
}
// Red
&[data-color="red"] {
background: $red-flat;
box-shadow: 0 2px 0 $red-shadow;
+ .menu-trigger {
background: $red-flat;
box-shadow: 0 2px 0 $red-shadow, inset 1px 0 0 rgba(0,0,0,0.1);
&:hover {
color: #fff;
background: $red-highlight;}
&:active,
&.active {
color: #fff;
background: $red-shadow;
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);}
}
}
// Yellow
&[data-color="yellow"] {
background: $yellow-flat;
box-shadow: 0 2px 0 $yellow-shadow;
+ .menu-trigger {
background: $yellow-flat;
box-shadow: 0 2px 0 $yellow-shadow, inset 1px 0 0 rgba(0,0,0,0.1);
&:hover {
color: #fff;
background: $yellow-highlight;}
&:active,
&.active {
color: #fff;
background: $yellow-shadow;
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;}
// Safety
.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);}
// Top Bars
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;}
// Trigger Animations
.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;}
// Animate
@-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); // Chrome Fix
transform: translateY(100px) perspective(200px) rotatex(30deg);}
100% {
-webkit-transform: translateY(0px) perspective(200px) rotatex(0deg); // Chrome Fix
transform: translateY(0px) perspective(200px) rotatex(0deg);}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment