| <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">£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> £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="#">«</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="#">»</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <hr /> | |
| </div> | |
| </div> | |
| </div> |
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.
| /* | |
| 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);} | |
| } |