/*** Project loader CSS ***/ /* Import project loader START */ /*** Project mixins ***/ /* mixins START */ /* mixins END */ /*** Project mixins css3 ***/ /* https://github.com/matthieua/sass-css3-mixins */ /* ------------------------------------------------------------- Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets List of CSS3 Sass Mixins File to be @imported and @included as you need The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER ENDING css files note: All CSS3 Properties are being supported by Safari 5 more info: http://www.findmebyip.com/litmus/#css3-properties Mixins available: - css3-prefix - arguments: Property, Value - background-gradient - arguments: Start Color: #3C3C3C, End Color: #999999 - background-radial - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% - background-size - arguments: Width: 100%, Height: 100% - background-opacity - arguments: Color: #000, Opacity: .85 - border-radius - arguments: Radius: 5px - border-radius-separate - arguments: Top Left: 5px, Top Left: 5px, Bottom Left: 5px, Bottom Right: 5px - box - arguments: Orientation: horizontal, Pack: center, Align: center - box-rgba - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C - box-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - box-sizing - arguments: Type: border-box - columns - arguments: Count: 3, Gap: 10 - double-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0 - flex - arguments: Value: 1 - flip - arguments: ScaleX: -1 - font-face - arguments: Font Family: myFont, File Name: myFont - opacity - arguments: Opacity: 0.5 - outline radius - arguments: Radius: 5px - placeholder - arguments: Color: #666666 - resize - arguments: Direction: both - rotate - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html - text-shadow - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) - transform - arguments: Parameters: null - transform-style - arguments: Style: preserve-3d - transition - arguments: What: all, Length: 1s, Easing: ease-in-out - triple-borders - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 - keyframes - arguments: Animation name - content: Animation css - animation - arguments: name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) ------------------------------------------------------------- */ /*** Project variables ***/ /* variables START */ /*** Project variables defaults ***/ /* variables START */ /* ---- setup DEFAULTS START */ /* ---- setup DEFAULTS END */ /* ---- create a LIST FROM DEAFULT COLORS START */ /* ---- create a LIST FROM DEAFULT COLORS END */ /* ---- create a LIST FROM DEAFULT COLORS START */ /* ---- setup loader START */ /* ---- setup loader END */ /* ---- setup TYPOGRAPHY START */ /* ---- setup TYPOGRAPHY END */ /* ---- setup TABLES START */ /* ---- setup TABLES END */ /* ---- setup ALERTS START */ /* ---- setup ALERTS END */ /* ---- setup BUTTONS START */ /* ---- setup BUTTONS END */ /* ---- setup FORM ELEMENTS START */ /* form group */ /* form controls (input, select, textarea) */ /* select skin */ /* checkbox skin + radio button skin */ /* labels */ /* for form controls */ /* for checkbox + radio button */ /* help block */ /* ---- setup FORM ELEMENTS END */ /* ---- setup PAGINATION START */ /* ---- setup PAGINATION END */ /* ---- setup MARGINS START */ /* ---- setup MARGINS END */ /* ---- setup PADDINGS START */ /* ---- setup PADDINGS END */ /* ---- setup EMBED RESPONSIVE LAYER START */ /* ---- setup EMBED RESPONSIVE LAYER END */ /* ---- setup EMBED RESPONSIVE LAYER YOUTUBE START */ /* ---- setup EMBED RESPONSIVE LAYER YOUTUBE END */ /* ---- setup cookie-bar START */ /* ---- setup cookie-bar END */ /* ---- setup fake position START */ /* ---- setup fake position END */ /* variables END */ /*** Project loader ***/ /* loader START */ .loader:before, .loader:after { -webkit-transform: translate3d(0, 0, 100px); -khtml-transform: translate3d(0, 0, 100px); -moz-transform: translate3d(0, 0, 100px); -ms-transform: translate3d(0, 0, 100px); -o-transform: translate3d(0, 0, 100px); transform: translate3d(0, 0, 100px); background-color: white; bottom: 0; content: ''; display: block; position: fixed; top: 0; z-index: 100; } .loaded .loader:before, .loaded .loader:after { -webkit-transition: all 0.25s 0.25s ease-out; -khtml-transition: all 0.25s 0.25s ease-out; -moz-transition: all 0.25s 0.25s ease-out; -ms-transition: all 0.25s 0.25s ease-out; -o-transition: all 0.25s 0.25s ease-out; transition: all 0.25s 0.25s ease-out; visibility: hidden; } .no-js .loader:before, .no-js .loader:after { display: none; } .loader:before { left: 0; right: 50%; } .loaded .loader:before { -webkit-transform: translateX(-100%); -khtml-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .loader:after { left: 50%; right: 0; } .loaded .loader:after { -webkit-transform: translateX(100%); -khtml-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .loader [class^="loader-"], .loader [class*=" loader-"] { filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; -webkit-transform: translate3d(0, 0, 101px); -khtml-transform: translate3d(0, 0, 101px); -moz-transform: translate3d(0, 0, 101px); -ms-transform: translate3d(0, 0, 101px); -o-transform: translate3d(0, 0, 101px); transform: translate3d(0, 0, 101px); display: block; left: 50%; height: 100px; line-height: 100px; margin-left: -100px; margin-top: -50px; position: fixed; text-align: center; top: 50%; vertical-align: top; width: 200px; z-index: 101; } .loaded .loader [class^="loader-"], .loaded .loader [class*=" loader-"] { -webkit-transition: all 0.25s 0s ease-out; -khtml-transition: all 0.25s 0s ease-out; -moz-transition: all 0.25s 0s ease-out; -ms-transition: all 0.25s 0s ease-out; -o-transition: all 0.25s 0s ease-out; transition: all 0.25s 0s ease-out; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-opacity: 0; -o-opacity: 0; opacity: 0; visibility: hidden; } .no-js .loader [class^="loader-"], .no-js .loader [class*=" loader-"] { display: none; } /* based on https://connoratherton.com/loadersloaders */ /*** logo ***/ /* HTML: */ @-webkit-keyframes loader-logo { 0% { left: -400px; } 100% { left: 200px; } } @-moz-keyframes loader-logo { 0% { left: -400px; } 100% { left: 200px; } } @-ms-keyframes loader-logo { 0% { left: -400px; } 100% { left: 200px; } } @-o-keyframes loader-logo { 0% { left: -400px; } 100% { left: 200px; } } @keyframes loader-logo { 0% { left: -400px; } 100% { left: 200px; } } .loader .loader-logo { height: 200px; line-height: 200px; margin-left: -100px; margin-top: -100px; width: 200px; } .loader .loader-logo div { bottom: 0; position: absolute; top: 0; } .loader .loader-logo div:first-child { -webkit-background-size: 100% auto; -khtml-background-size: 100% auto; -moz-background-size: 100% auto; -ms-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; background-color: transparent; background-image: url("../img/base/logo.png"); background-position: center center; background-repeat: no-repeat; left: 0; right: 0; } .loader .loader-logo div:last-child { -webkit-animation: loader-logo 1.5s 0s infinite linear; -khtml-animation: loader-logo 1.5s 0s infinite linear; -moz-animation: loader-logo 1.5s 0s infinite linear; -ms-animation: loader-logo 1.5s 0s infinite linear; -o-animation: loader-logo 1.5s 0s infinite linear; animation: loader-logo 1.5s 0s infinite linear; background-color: rgba(255, 255, 255, 0); background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, white), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='white', GradientType=1 ); left: -400px; width: 400px; } /* Import project loader END */ /*# sourceMappingURL=loader.css.map */