diff options
Diffstat (limited to 'theme_common/static')
63 files changed, 6379 insertions, 0 deletions
diff --git a/theme_common/static/lib/YTPlayer/jquery.mb.YTPlayer.js b/theme_common/static/lib/YTPlayer/jquery.mb.YTPlayer.js new file mode 100644 index 0000000..6952c9a --- /dev/null +++ b/theme_common/static/lib/YTPlayer/jquery.mb.YTPlayer.js @@ -0,0 +1,1543 @@ +/*___________________________________________________________________________________________________________________________________________________ + _ jquery.mb.components _ + _ _ + _ file: jquery.mb.YTPlayer.src.js _ + _ last modified: 01/07/15 19.35 _ + _ _ + _ Open Lab s.r.l., Florence - Italy _ + _ _ + _ email: matteo@open-lab.com _ + _ site: http://pupunzi.com _ + _ http://open-lab.com _ + _ blog: http://pupunzi.open-lab.com _ + _ Q&A: http://jquery.pupunzi.com _ + _ _ + _ Licences: MIT, GPL _ + _ http://www.opensource.org/licenses/mit-license.php _ + _ http://www.gnu.org/licenses/gpl.html _ + _ _ + _ Copyright (c) 2001-2015. Matteo Bicocchi (Pupunzi); _ + ___________________________________________________________________________________________________________________________________________________*/ +var ytp = ytp || {}; + +function onYouTubeIframeAPIReady() { + if( ytp.YTAPIReady ) return; + ytp.YTAPIReady = true; + jQuery( document ).trigger( "YTAPIReady" ); +} + +var getYTPVideoID = function( url ) { + var videoID, playlistID; + if( url.indexOf( "youtu.be" ) > 0 ) { + videoID = url.substr( url.lastIndexOf( "/" ) + 1, url.length ); + playlistID = videoID.indexOf( "?list=" ) > 0 ? videoID.substr( videoID.lastIndexOf( "=" ), videoID.length ) : null; + videoID = playlistID ? videoID.substr( 0, videoID.lastIndexOf( "?" ) ) : videoID; + } else if( url.indexOf( "http" ) > -1 ) { + videoID = url.match( /[\\?&]v=([^&#]*)/ )[ 1 ]; + playlistID = url.indexOf( "list=" ) > 0 ? url.match( /[\\?&]list=([^&#]*)/ )[ 1 ] : null; + } else { + videoID = url.length > 15 ? null : url; + playlistID = videoID ? null : url; + } + return { + videoID: videoID, + playlistID: playlistID + }; +}; + +( function( jQuery, ytp ) { + + jQuery.mbYTPlayer = { + name: "jquery.mb.YTPlayer", + version: "2.9.4", + build: "{{ build }}", + author: "Matteo Bicocchi", + apiKey: "", + defaults: { + containment: "body", + ratio: "auto", // "auto", "16/9", "4/3" + videoURL: null, + playlistURL: null, + startAt: 0, + stopAt: 0, + autoPlay: true, + vol: 50, // 1 to 100 + addRaster: false, + opacity: 1, + quality: "default", //or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres” + mute: false, + loop: true, + showControls: true, + showAnnotations: false, + showYTLogo: true, + stopMovieOnBlur: true, + realfullscreen: true, + gaTrack: true, + optimizeDisplay: true, + onReady: function( player ) {} + }, + /* @fontface icons */ + controls: { + play: "P", + pause: "p", + mute: "M", + unmute: "A", + onlyYT: "O", + showSite: "R", + ytLogo: "Y" + }, + locationProtocol: "https:", + /** + * + * @param options + * @returns [players] + */ + buildPlayer: function( options ) { + return this.each( function() { + var YTPlayer = this; + var $YTPlayer = jQuery( YTPlayer ); + YTPlayer.loop = 0; + YTPlayer.opt = {}; + YTPlayer.state = {}; + YTPlayer.filtersEnabled = true; + YTPlayer.filters = { + grayscale: { + value: 0, + unit: "%" + }, + hue_rotate: { + value: 0, + unit: "deg" + }, + invert: { + value: 0, + unit: "%" + }, + opacity: { + value: 0, + unit: "%" + }, + saturate: { + value: 0, + unit: "%" + }, + sepia: { + value: 0, + unit: "%" + }, + brightness: { + value: 0, + unit: "%" + }, + contrast: { + value: 0, + unit: "%" + }, + blur: { + value: 0, + unit: "px" + } + }; + $YTPlayer.addClass( "mb_YTPlayer" ); + var property = $YTPlayer.data( "property" ) && typeof $YTPlayer.data( "property" ) == "string" ? eval( '(' + $YTPlayer.data( "property" ) + ')' ) : $YTPlayer.data( "property" ); + if( typeof property != "undefined" && typeof property.vol != "undefined" ) property.vol = property.vol === 0 ? property.vol = 1 : property.vol; + jQuery.extend( YTPlayer.opt, jQuery.mbYTPlayer.defaults, options, property ); + if( !YTPlayer.hasChanged ) { + YTPlayer.defaultOpt = {}; + jQuery.extend( YTPlayer.defaultOpt, jQuery.mbYTPlayer.defaults, options, property ); + } + YTPlayer.isRetina = ( window.retina || window.devicePixelRatio > 1 ); + var isIframe = function() { + var isIfr = false; + try { + if( self.location.href != top.location.href ) isIfr = true; + } catch( e ) { + isIfr = true; + } + return isIfr; + }; + YTPlayer.canGoFullScreen = !( jQuery.browser.msie || jQuery.browser.opera || isIframe() ); + if( !YTPlayer.canGoFullScreen ) YTPlayer.opt.realfullscreen = false; + if( !$YTPlayer.attr( "id" ) ) $YTPlayer.attr( "id", "video_" + new Date().getTime() ); + var playerID = "mbYTP_" + YTPlayer.id; + YTPlayer.isAlone = false; + YTPlayer.hasFocus = true; + var videoID = this.opt.videoURL ? getYTPVideoID( this.opt.videoURL ).videoID : $YTPlayer.attr( "href" ) ? getYTPVideoID( $YTPlayer.attr( "href" ) ).videoID : false; + var playlistID = this.opt.videoURL ? getYTPVideoID( this.opt.videoURL ).playlistID : $YTPlayer.attr( "href" ) ? getYTPVideoID( $YTPlayer.attr( "href" ) ).playlistID : false; + YTPlayer.videoID = videoID; + YTPlayer.playlistID = playlistID; + YTPlayer.opt.showAnnotations = ( YTPlayer.opt.showAnnotations ) ? '0' : '3'; + var playerVars = { + 'autoplay': 0, + 'modestbranding': 1, + 'controls': 0, + 'showinfo': 0, + 'rel': 0, + 'enablejsapi': 1, + 'version': 3, + 'playerapiid': playerID, + 'origin': '*', + 'allowfullscreen': true, + 'wmode': 'transparent', + 'iv_load_policy': YTPlayer.opt.showAnnotations + }; + if( document.createElement( 'video' ).canPlayType ) jQuery.extend( playerVars, { + 'html5': 1 + } ); + if( jQuery.browser.msie && jQuery.browser.version < 9 ) this.opt.opacity = 1; + var playerBox = jQuery( "<div/>" ).attr( "id", playerID ).addClass( "playerBox" ); + var overlay = jQuery( "<div/>" ).css( { + position: "absolute", + top: 0, + left: 0, + width: "100%", + height: "100%" + } ).addClass( "YTPOverlay" ); + YTPlayer.isSelf = YTPlayer.opt.containment == "self"; + YTPlayer.defaultOpt.containment = YTPlayer.opt.containment = YTPlayer.opt.containment == "self" ? jQuery( this ) : jQuery( YTPlayer.opt.containment ); + YTPlayer.isBackground = YTPlayer.opt.containment.get( 0 ).tagName.toLowerCase() == "body"; + if( YTPlayer.isBackground && ytp.backgroundIsInited ) return; + var isPlayer = YTPlayer.opt.containment.is( jQuery( this ) ); + YTPlayer.canPlayOnMobile = isPlayer && jQuery( this ).children().length === 0; + if( !isPlayer ) { + $YTPlayer.hide(); + } else { + YTPlayer.isPlayer = true; + } + if( jQuery.browser.mobile && !YTPlayer.canPlayOnMobile ) { + $YTPlayer.remove(); + return; + } + var wrapper = jQuery( "<div/>" ).addClass( "mbYTP_wrapper" ).attr( "id", "wrapper_" + playerID ); + wrapper.css( { + position: "absolute", + zIndex: 0, + minWidth: "100%", + minHeight: "100%", + left: 0, + top: 0, + overflow: "hidden", + opacity: 0 + } ); + playerBox.css( { + position: "absolute", + zIndex: 0, + width: "100%", + height: "100%", + top: 0, + left: 0, + overflow: "hidden" + } ); + wrapper.append( playerBox ); + YTPlayer.opt.containment.children().not( "script, style" ).each( function() { + if( jQuery( this ).css( "position" ) == "static" ) jQuery( this ).css( "position", "relative" ); + } ); + if( YTPlayer.isBackground ) { + jQuery( "body" ).css( { + boxSizing: "border-box" + } ); + wrapper.css( { + position: "fixed", + top: 0, + left: 0, + zIndex: 0 + } ); + $YTPlayer.hide(); + } else if( YTPlayer.opt.containment.css( "position" ) == "static" ) YTPlayer.opt.containment.css( { + position: "relative" + } ); + YTPlayer.opt.containment.prepend( wrapper ); + YTPlayer.wrapper = wrapper; + playerBox.css( { + opacity: 1 + } ); + if( !jQuery.browser.mobile ) { + playerBox.after( overlay ); + YTPlayer.overlay = overlay; + } + if( !YTPlayer.isBackground ) { + overlay.on( "mouseenter", function() { + if( YTPlayer.controlBar ) YTPlayer.controlBar.addClass( "visible" ); + } ).on( "mouseleave", function() { + if( YTPlayer.controlBar ) YTPlayer.controlBar.removeClass( "visible" ); + } ) + } + if( !ytp.YTAPIReady ) { + jQuery( "#YTAPI" ).remove(); + var tag = jQuery( "<script></script>" ).attr( { + "src": jQuery.mbYTPlayer.locationProtocol + "//www.youtube.com/iframe_api?v=" + jQuery.mbYTPlayer.version, + "id": "YTAPI" + } ); + jQuery( "head" ).prepend( tag ); + } else { + setTimeout( function() { + jQuery( document ).trigger( "YTAPIReady" ); + }, 100 ) + } + jQuery( document ).on( "YTAPIReady", function() { + if( ( YTPlayer.isBackground && ytp.backgroundIsInited ) || YTPlayer.isInit ) return; + if( YTPlayer.isBackground ) { + ytp.backgroundIsInited = true; + } + YTPlayer.opt.autoPlay = typeof YTPlayer.opt.autoPlay == "undefined" ? ( YTPlayer.isBackground ? true : false ) : YTPlayer.opt.autoPlay; + YTPlayer.opt.vol = YTPlayer.opt.vol ? YTPlayer.opt.vol : 100; + jQuery.mbYTPlayer.getDataFromAPI( YTPlayer ); + jQuery( YTPlayer ).on( "YTPChanged", function() { + if( YTPlayer.isInit ) return; + YTPlayer.isInit = true; + //if is mobile && isPlayer fallback to the default YT player + if( jQuery.browser.mobile && YTPlayer.canPlayOnMobile ) { + // Try to adjust the player dimention + if( YTPlayer.opt.containment.outerWidth() > jQuery( window ).width() ) { + YTPlayer.opt.containment.css( { + maxWidth: "100%" + } ); + var h = YTPlayer.opt.containment.outerWidth() * .6; + YTPlayer.opt.containment.css( { + maxHeight: h + } ); + } + new YT.Player( playerID, { + videoId: YTPlayer.videoID.toString(), + height: '100%', + width: '100%', + events: { + 'onReady': function( event ) { + YTPlayer.player = event.target; + playerBox.css( { + opacity: 1 + } ); + YTPlayer.wrapper.css( { + opacity: 1 + } ); + } + } + } ); + return; + } + new YT.Player( playerID, { + videoId: YTPlayer.videoID.toString(), + playerVars: playerVars, + events: { + 'onReady': function( event ) { + YTPlayer.player = event.target; + if( YTPlayer.isReady ) return; + YTPlayer.isReady = YTPlayer.isPlayer && !YTPlayer.opt.autoPlay ? false : true; + YTPlayer.playerEl = YTPlayer.player.getIframe(); + $YTPlayer.optimizeDisplay(); + YTPlayer.videoID = videoID; + jQuery( window ).on( "resize.YTP", function() { + $YTPlayer.optimizeDisplay(); + } ); + jQuery.mbYTPlayer.checkForState( YTPlayer ); + // Trigger state events + var YTPEvent = jQuery.Event( "YTPUnstarted" ); + YTPEvent.time = YTPlayer.player.time; + if( YTPlayer.canTrigger ) jQuery( YTPlayer ).trigger( YTPEvent ); + }, + /** + * + * @param event + * + * -1 (unstarted) + * 0 (ended) + * 1 (playing) + * 2 (paused) + * 3 (buffering) + * 5 (video cued). + * + * + */ + 'onStateChange': function( event ) { + if( typeof event.target.getPlayerState != "function" ) return; + var state = event.target.getPlayerState(); + if( YTPlayer.state == state ) return; + YTPlayer.state = state; + var eventType; + switch( state ) { + case -1: //------------------------------------------------ unstarted + eventType = "YTPUnstarted"; + break; + case 0: //------------------------------------------------ ended + eventType = "YTPEnd"; + break; + case 1: //------------------------------------------------ play + eventType = "YTPStart"; + if( YTPlayer.controlBar ) YTPlayer.controlBar.find( ".mb_YTPPlaypause" ).html( jQuery.mbYTPlayer.controls.pause ); + if( typeof _gaq != "undefined" && eval( YTPlayer.opt.gaTrack ) ) _gaq.push( [ '_trackEvent', 'YTPlayer', 'Play', ( YTPlayer.hasData ? YTPlayer.videoData.title : YTPlayer.videoID.toString() ) ] ); + if( typeof ga != "undefined" && eval( YTPlayer.opt.gaTrack ) ) ga( 'send', 'event', 'YTPlayer', 'play', ( YTPlayer.hasData ? YTPlayer.videoData.title : YTPlayer.videoID.toString() ) ); + break; + case 2: //------------------------------------------------ pause + eventType = "YTPPause"; + if( YTPlayer.controlBar ) YTPlayer.controlBar.find( ".mb_YTPPlaypause" ).html( jQuery.mbYTPlayer.controls.play ); + break; + case 3: //------------------------------------------------ buffer + YTPlayer.player.setPlaybackQuality( YTPlayer.opt.quality ); + eventType = "YTPBuffering"; + if( YTPlayer.controlBar ) YTPlayer.controlBar.find( ".mb_YTPPlaypause" ).html( jQuery.mbYTPlayer.controls.play ); + break; + case 5: //------------------------------------------------ cued + eventType = "YTPCued"; + break; + default: + break; + } + // Trigger state events + var YTPEvent = jQuery.Event( eventType ); + YTPEvent.time = YTPlayer.player.time; + if( YTPlayer.canTrigger ) jQuery( YTPlayer ).trigger( YTPEvent ); + }, + /** + * + * @param e + */ + 'onPlaybackQualityChange': function( e ) { + var quality = e.target.getPlaybackQuality(); + var YTPQualityChange = jQuery.Event( "YTPQualityChange" ); + YTPQualityChange.quality = quality; + jQuery( YTPlayer ).trigger( YTPQualityChange ); + }, + /** + * + * @param err + */ + 'onError': function( err ) { + if( err.data == 150 ) { + console.log( "Embedding this video is restricted by Youtube." ); + if( YTPlayer.isPlayList ) jQuery( YTPlayer ).playNext(); + } + if( err.data == 2 && YTPlayer.isPlayList ) jQuery( YTPlayer ).playNext(); + if( typeof YTPlayer.opt.onError == "function" ) YTPlayer.opt.onError( $YTPlayer, err ); + } + } + } ); + } ); + } ) + } ); + }, + /** + * + * @param YTPlayer + */ + getDataFromAPI: function( YTPlayer ) { + YTPlayer.videoData = jQuery.mbStorage.get( "YYTPlayer_data_" + YTPlayer.videoID ); + jQuery( YTPlayer ).off( "YTPData.YTPlayer" ).on( "YTPData.YTPlayer", function() { + if( YTPlayer.hasData ) { + + if( YTPlayer.isPlayer && !YTPlayer.opt.autoPlay ) { + var bgndURL = YTPlayer.videoData.thumb_max || YTPlayer.videoData.thumb_high || YTPlayer.videoData.thumb_medium; + YTPlayer.opt.containment.css( { + background: "rgba(0,0,0,0.5) url(" + bgndURL + ") center center", + backgroundSize: "cover" + } ); + YTPlayer.opt.backgroundUrl = bgndURL; + } + } + } ); + + if( YTPlayer.videoData ) { + + setTimeout( function() { + YTPlayer.opt.ratio = YTPlayer.opt.ratio == "auto" ? "16/9" : YTPlayer.opt.ratio; + YTPlayer.dataReceived = true; + jQuery( YTPlayer ).trigger( "YTPChanged" ); + var YTPData = jQuery.Event( "YTPData" ); + YTPData.prop = {}; + for( var x in YTPlayer.videoData ) YTPData.prop[ x ] = YTPlayer.videoData[ x ]; + jQuery( YTPlayer ).trigger( YTPData ); + }, 500 ); + + YTPlayer.hasData = true; + } else if( jQuery.mbYTPlayer.apiKey ) { + // Get video info from API3 (needs api key) + // snippet,player,contentDetails,statistics,status + jQuery.getJSON( jQuery.mbYTPlayer.locationProtocol + "//www.googleapis.com/youtube/v3/videos?id=" + YTPlayer.videoID + "&key=" + jQuery.mbYTPlayer.apiKey + "&part=snippet", function( data ) { + YTPlayer.dataReceived = true; + jQuery( YTPlayer ).trigger( "YTPChanged" ); + + function parseYTPlayer_data( data ) { + YTPlayer.videoData = {}; + YTPlayer.videoData.id = YTPlayer.videoID; + YTPlayer.videoData.channelTitle = data.channelTitle; + YTPlayer.videoData.title = data.title; + YTPlayer.videoData.description = data.description.length < 400 ? data.description : data.description.substring( 0, 400 ) + " ..."; + YTPlayer.videoData.aspectratio = YTPlayer.opt.ratio == "auto" ? "16/9" : YTPlayer.opt.ratio; + YTPlayer.opt.ratio = YTPlayer.videoData.aspectratio; + YTPlayer.videoData.thumb_max = data.thumbnails.maxres ? data.thumbnails.maxres.url : null; + YTPlayer.videoData.thumb_high = data.thumbnails.high ? data.thumbnails.high.url : null; + YTPlayer.videoData.thumb_medium = data.thumbnails.medium ? data.thumbnails.medium.url : null; + jQuery.mbStorage.set( "YYTPlayer_data_" + YTPlayer.videoID, YTPlayer.videoData ); + } + parseYTPlayer_data( data.items[ 0 ].snippet ); + YTPlayer.hasData = true; + var YTPData = jQuery.Event( "YTPData" ); + YTPData.prop = {}; + for( var x in YTPlayer.videoData ) YTPData.prop[ x ] = YTPlayer.videoData[ x ]; + jQuery( YTPlayer ).trigger( YTPData ); + } ); + } else { + setTimeout( function() { + jQuery( YTPlayer ).trigger( "YTPChanged" ); + }, 50 ); + if( YTPlayer.isPlayer && !YTPlayer.opt.autoPlay ) { + var bgndURL = jQuery.mbYTPlayer.locationProtocol + "//i.ytimg.com/vi/" + YTPlayer.videoID + "/hqdefault.jpg"; + YTPlayer.opt.containment.css( { + background: "rgba(0,0,0,0.5) url(" + bgndURL + ") center center", + backgroundSize: "cover" + } ); + YTPlayer.opt.backgroundUrl = bgndURL; + } + YTPlayer.videoData = null; + YTPlayer.opt.ratio = YTPlayer.opt.ratio == "auto" ? "16/9" : YTPlayer.opt.ratio; + } + if( YTPlayer.isPlayer && !YTPlayer.opt.autoPlay ) { + YTPlayer.loading = jQuery( "<div/>" ).addClass( "loading" ).html( "Loading" ).hide(); + jQuery( YTPlayer ).append( YTPlayer.loading ); + YTPlayer.loading.fadeIn(); + } + }, + /** + * + */ + removeStoredData: function() { + jQuery.mbStorage.remove(); + }, + /** + * + * @returns {*|YTPlayer.videoData} + */ + getVideoData: function() { + var YTPlayer = this.get( 0 ); + return YTPlayer.videoData; + }, + /** + * + * @returns {*|YTPlayer.videoID|boolean} + */ + getVideoID: function() { + var YTPlayer = this.get( 0 ); + return YTPlayer.videoID || false; + }, + /** + * + * @param quality + */ + setVideoQuality: function( quality ) { + var YTPlayer = this.get( 0 ); + if( !jQuery.browser.chrome ) YTPlayer.player.setPlaybackQuality( quality ); + }, + /** + * @param videos + * @param shuffle + * @param callback + * @returns {jQuery.mbYTPlayer} + */ + playlist: function( videos, shuffle, callback ) { + var $YTPlayer = this; + var YTPlayer = $YTPlayer.get( 0 ); + YTPlayer.isPlayList = true; + if( shuffle ) videos = jQuery.shuffle( videos ); + if( !YTPlayer.videoID ) { + YTPlayer.videos = videos; + YTPlayer.videoCounter = 0; + YTPlayer.videoLength = videos.length; + jQuery( YTPlayer ).data( "property", videos[ 0 ] ); + jQuery( YTPlayer ).mb_YTPlayer(); + } + if( typeof callback == "function" ) jQuery( YTPlayer ).on( "YTPChanged", function() { + callback( YTPlayer ); + } ); + jQuery( YTPlayer ).on( "YTPEnd", function() { + jQuery( YTPlayer ).playNext(); + } ); + return $YTPlayer; + }, + /** + * + * @returns {jQuery.mbYTPlayer} + */ + playNext: function() { + var YTPlayer = this.get( 0 ); + YTPlayer.videoCounter++; + if( YTPlayer.videoCounter >= YTPlayer.videoLength ) YTPlayer.videoCounter = 0; + jQuery( YTPlayer ).changeMovie( YTPlayer.videos[ YTPlayer.videoCounter ] ); + return this; + }, + /** + * + * @returns {jQuery.mbYTPlayer} + */ + playPrev: function() { + var YTPlayer = this.get( 0 ); + YTPlayer.videoCounter--; + if( YTPlayer.videoCounter < 0 ) YTPlayer.videoCounter = YTPlayer.videoLength - 1; + jQuery( YTPlayer ).changeMovie( YTPlayer.videos[ YTPlayer.videoCounter ] ); + return this; + }, + /** + * + * @param opt + */ + changeMovie: function( opt ) { + var YTPlayer = this.get( 0 ); + YTPlayer.opt.startAt = 0; + YTPlayer.opt.stopAt = 0; + YTPlayer.opt.mute = true; + YTPlayer.hasData = false; + YTPlayer.hasChanged = true; + if( opt ) jQuery.extend( YTPlayer.opt, YTPlayer.defaultOpt, opt ); + YTPlayer.videoID = getYTPVideoID( YTPlayer.opt.videoURL ).videoID; + jQuery( YTPlayer.playerEl ).CSSAnimate( { + opacity: 0 + }, 200, function() { + jQuery( YTPlayer ).YTPGetPlayer().cueVideoByUrl( encodeURI( jQuery.mbYTPlayer.locationProtocol + "//www.youtube.com/v/" + YTPlayer.videoID ), 1, YTPlayer.opt.quality ); + jQuery.mbYTPlayer.checkForState( YTPlayer ); + jQuery( YTPlayer ).optimizeDisplay(); + jQuery.mbYTPlayer.getDataFromAPI( YTPlayer ); + return this; + } ); + }, + /** + * + * @returns {player} + */ + getPlayer: function() { + return jQuery( this ).get( 0 ).player; + }, + playerDestroy: function() { + var YTPlayer = this.get( 0 ); + ytp.YTAPIReady = false; + ytp.backgroundIsInited = false; + YTPlayer.isInit = false; + YTPlayer.videoID = null; + var playerBox = YTPlayer.wrapper; + playerBox.remove(); + jQuery( "#controlBar_" + YTPlayer.id ).remove(); + clearInterval( YTPlayer.checkForStartAt ); + clearInterval( YTPlayer.getState ); + return this; + }, + /** + * + * @param real + * @returns {jQuery.mbYTPlayer} + */ + fullscreen: function( real ) { + var YTPlayer = this.get( 0 ); + if( typeof real == "undefined" ) real = YTPlayer.opt.realfullscreen; + real = eval( real ); + var controls = jQuery( "#controlBar_" + YTPlayer.id ); + var fullScreenBtn = controls.find( ".mb_OnlyYT" ); + var videoWrapper = YTPlayer.isSelf ? YTPlayer.opt.containment : YTPlayer.wrapper; + //var videoWrapper = YTPlayer.wrapper; + if( real ) { + var fullscreenchange = jQuery.browser.mozilla ? "mozfullscreenchange" : jQuery.browser.webkit ? "webkitfullscreenchange" : "fullscreenchange"; + jQuery( document ).off( fullscreenchange ).on( fullscreenchange, function() { + var isFullScreen = RunPrefixMethod( document, "IsFullScreen" ) || RunPrefixMethod( document, "FullScreen" ); + if( !isFullScreen ) { + YTPlayer.isAlone = false; + fullScreenBtn.html( jQuery.mbYTPlayer.controls.onlyYT ); + jQuery( YTPlayer ).YTPSetVideoQuality( YTPlayer.opt.quality ); + videoWrapper.removeClass( "fullscreen" ); + videoWrapper.CSSAnimate( { + opacity: YTPlayer.opt.opacity + }, 500 ); + videoWrapper.css( { + zIndex: 0 + } ); + if( YTPlayer.isBackground ) { + jQuery( "body" ).after( controls ); + } else { + YTPlayer.wrapper.before( controls ); + } + jQuery( window ).resize(); + jQuery( YTPlayer ).trigger( "YTPFullScreenEnd" ); + } else { + jQuery( YTPlayer ).YTPSetVideoQuality( "default" ); + jQuery( YTPlayer ).trigger( "YTPFullScreenStart" ); + } + } ); + } + if( !YTPlayer.isAlone ) { + function hideMouse() { + YTPlayer.overlay.css( { + cursor: "none" + } ); + } + jQuery( document ).on( "mousemove.YTPlayer", function( e ) { + YTPlayer.overlay.css( { + cursor: "auto" + } ); + clearTimeout( YTPlayer.hideCursor ); + if( !jQuery( e.target ).parents().is( ".mb_YTPBar" ) ) YTPlayer.hideCursor = setTimeout( hideMouse, 3000 ); + } ); + hideMouse(); + if( real ) { + videoWrapper.css( { + opacity: 0 + } ); + videoWrapper.addClass( "fullscreen" ); + launchFullscreen( videoWrapper.get( 0 ) ); + setTimeout( function() { + videoWrapper.CSSAnimate( { + opacity: 1 + }, 1000 ); + YTPlayer.wrapper.append( controls ); + jQuery( YTPlayer ).optimizeDisplay(); + YTPlayer.player.seekTo( YTPlayer.player.getCurrentTime() + .1, true ); + }, 500 ) + } else videoWrapper.css( { + zIndex: 10000 + } ).CSSAnimate( { + opacity: 1 + }, 1000 ); + fullScreenBtn.html( jQuery.mbYTPlayer.controls.showSite ); + YTPlayer.isAlone = true; + } else { + jQuery( document ).off( "mousemove.YTPlayer" ); + YTPlayer.overlay.css( { + cursor: "auto" + } ); + if( real ) { + cancelFullscreen(); + } else { + videoWrapper.CSSAnimate( { + opacity: YTPlayer.opt.opacity + }, 500 ); + videoWrapper.css( { + zIndex: 0 + } ); + } + fullScreenBtn.html( jQuery.mbYTPlayer.controls.onlyYT ); + YTPlayer.isAlone = false; + } + + function RunPrefixMethod( obj, method ) { + var pfx = [ "webkit", "moz", "ms", "o", "" ]; + var p = 0, + m, t; + while( p < pfx.length && !obj[ m ] ) { + m = method; + if( pfx[ p ] == "" ) { + m = m.substr( 0, 1 ).toLowerCase() + m.substr( 1 ); + } + m = pfx[ p ] + m; + t = typeof obj[ m ]; + if( t != "undefined" ) { + pfx = [ pfx[ p ] ]; + return( t == "function" ? obj[ m ]() : obj[ m ] ); + } + p++; + } + } + + function launchFullscreen( element ) { + RunPrefixMethod( element, "RequestFullScreen" ); + } + + function cancelFullscreen() { + if( RunPrefixMethod( document, "FullScreen" ) || RunPrefixMethod( document, "IsFullScreen" ) ) { + RunPrefixMethod( document, "CancelFullScreen" ); + } + } + return this; + }, + /** + * + * @returns {jQuery.mbYTPlayer} + */ + toggleLoops: function() { + var YTPlayer = this.get( 0 ); + var data = YTPlayer.opt; + if( data.loop == 1 ) { + data.loop = 0; + } else { + if( data.startAt ) { + YTPlayer.player.seekTo( data.startAt ); + } else { + YTPlayer.player.playVideo(); + } + data.loop = 1; + } + return this; + }, + /** + * + * @returns {jQuery.mbYTPlayer} + */ + play: function() { + var YTPlayer = this.get( 0 ); + if( !YTPlayer.isReady ) return; + var controls = jQuery( "#controlBar_" + YTPlayer.id ); + var playBtn = controls.find( ".mb_YTPPlaypause" ); + playBtn.html( jQuery.mbYTPlayer.controls.pause ); + YTPlayer.player.playVideo(); + YTPlayer.wrapper.CSSAnimate( { + opacity: YTPlayer.isAlone ? 1 : YTPlayer.opt.opacity + }, 2000 ); + jQuery( YTPlayer.playerEl ).CSSAnimate( { + opacity: 1 + }, 1000 ); + jQuery( YTPlayer ).css( "background-image", "none" ); + return this; + }, + /** + * + * @param callback + * @returns {jQuery.mbYTPlayer} + */ + togglePlay: function( callback ) { + var YTPlayer = this.get( 0 ); + if( YTPlayer.state == 1 ) this.YTPPause(); + else this.YTPPlay(); + if( typeof callback == "function" ) { + callback( YTPlayer.state ); + } + return this; + }, + /** + * + * @returns {jQuery.mbYTPlayer} + */ + stop: function() { + var YTPlayer = this.get( 0 ); + var controls = jQuery( "#controlBar_" + YTPlayer.id ); + var playBtn = controls.find( ".mb_YTPPlaypause" ); + playBtn.html( jQuery.mbYTPlayer.controls.play ); + YTPlayer.player.stopVideo(); + return this; + }, + /** + * + * @returns {jQuery.mbYTPlayer} + */ + pause: function() { + var YTPlayer = this.get( 0 ); + var controls = jQuery( "#controlBar_" + YTPlayer.id ); + var playBtn = controls.find( ".mb_YTPPlaypause" ); + playBtn.html( jQuery.mbYTPlayer.controls.play ); + YTPlayer.player.pauseVideo(); + return this; + }, + /** + * + * @param val + * @returns {jQuery.mbYTPlayer} + */ + seekTo: function( val ) { + var YTPlayer = this.get( 0 ); + YTPlayer.player.seekTo( val, true ); + return this; + }, + /** + * + * @param val + * @returns {jQuery.mbYTPlayer} + */ + setVolume: function( val ) { + var YTPlayer = this.get( 0 ); + if( !val && !YTPlayer.opt.vol && YTPlayer.player.getVolume() == 0 ) jQuery( YTPlayer ).YTPUnmute(); + else if( ( !val && YTPlayer.player.getVolume() > 0 ) || ( val && YTPlayer.opt.vol == val ) ) { + if( !YTPlayer.isMute ) jQuery( YTPlayer ).YTPMute(); + else jQuery( YTPlayer ).YTPUnmute(); + } else { + YTPlayer.opt.vol = val; + YTPlayer.player.setVolume( YTPlayer.opt.vol ); + if( YTPlayer.volumeBar && YTPlayer.volumeBar.length ) YTPlayer.volumeBar.updateSliderVal( val ) + } + return this; + }, + /** + * + * @returns {jQuery.mbYTPlayer} + */ + mute: function() { + var YTPlayer = this.get( 0 ); + if( YTPlayer.isMute ) return; + YTPlayer.player.mute(); + YTPlayer.isMute = true; + YTPlayer.player.setVolume( 0 ); + if( YTPlayer.volumeBar && YTPlayer.volumeBar.length && YTPlayer.volumeBar.width() > 10 ) { + YTPlayer.volumeBar.updateSliderVal( 0 ); + } + var controls = jQuery( "#controlBar_" + YTPlayer.id ); + var muteBtn = controls.find( ".mb_YTPMuteUnmute" ); + muteBtn.html( jQuery.mbYTPlayer.controls.unmute ); + jQuery( YTPlayer ).addClass( "isMuted" ); + if( YTPlayer.volumeBar && YTPlayer.volumeBar.length ) YTPlayer.volumeBar.addClass( "muted" ); + var YTPEvent = jQuery.Event( "YTPMuted" ); + YTPEvent.time = YTPlayer.player.time; + if( YTPlayer.canTrigger ) jQuery( YTPlayer ).trigger( YTPEvent ); + return this; + }, + /** + * + * @returns {jQuery.mbYTPlayer} + */ + unmute: function() { + var YTPlayer = this.get( 0 ); + if( !YTPlayer.isMute ) return; + YTPlayer.player.unMute(); + YTPlayer.isMute = false; + YTPlayer.player.setVolume( YTPlayer.opt.vol ); + if( YTPlayer.volumeBar && YTPlayer.volumeBar.length ) YTPlayer.volumeBar.updateSliderVal( YTPlayer.opt.vol > 10 ? YTPlayer.opt.vol : 10 ); + var controls = jQuery( "#controlBar_" + YTPlayer.id ); + var muteBtn = controls.find( ".mb_YTPMuteUnmute" ); + muteBtn.html( jQuery.mbYTPlayer.controls.mute ); + jQuery( YTPlayer ).removeClass( "isMuted" ); + if( YTPlayer.volumeBar && YTPlayer.volumeBar.length ) YTPlayer.volumeBar.removeClass( "muted" ); + var YTPEvent = jQuery.Event( "YTPUnmuted" ); + YTPEvent.time = YTPlayer.player.time; + if( YTPlayer.canTrigger ) jQuery( YTPlayer ).trigger( YTPEvent ); + return this; + }, + /** + * + * @param filter + * @param value + * @returns {jQuery.mbYTPlayer} + */ + applyFilter: function( filter, value ) { + var YTPlayer = this.get( 0 ); + YTPlayer.filters[ filter ].value = value; + if( YTPlayer.filtersEnabled ) this.YTPEnableFilters(); + return this; + }, + /** + * + * @param filters + * @returns {jQuery.mbYTPlayer} + */ + applyFilters: function( filters ) { + var YTPlayer = this.get( 0 ); + this.on( "YTPReady", function() { + for( var key in filters ) { + YTPlayer.filters[ key ].value = filters[ key ]; + jQuery( YTPlayer ).YTPApplyFilter( key, filters[ key ] ); + } + jQuery( YTPlayer ).trigger( "YTPFiltersApplied" ); + } ); + return this; + }, + /** + * + * @param filter + * @param value + * @returns {*} + */ + toggleFilter: function( filter, value ) { + return this.each( function() { + var YTPlayer = this; + if( !YTPlayer.filters[ filter ].value ) YTPlayer.filters[ filter ].value = value; + else YTPlayer.filters[ filter ].value = 0; + if( YTPlayer.filtersEnabled ) jQuery( this ).YTPEnableFilters(); + } ) + return this; + }, + /** + * + * @param callback + * @returns {*} + */ + toggleFilters: function( callback ) { + return this.each( function() { + var YTPlayer = this; + if( YTPlayer.filtersEnabled ) { + jQuery( YTPlayer ).trigger( "YTPDisableFilters" ); + jQuery( YTPlayer ).YTPDisableFilters(); + } else { + jQuery( YTPlayer ).YTPEnableFilters(); + jQuery( YTPlayer ).trigger( "YTPEnableFilters" ); + } + if( typeof callback == "function" ) callback( YTPlayer.filtersEnabled ); + } ) + }, + /** + * + * @returns {*} + */ + disableFilters: function() { + return this.each( function() { + var YTPlayer = this; + var iframe = jQuery( YTPlayer.playerEl ); + iframe.css( "-webkit-filter", "" ); + iframe.css( "filter", "" ); + YTPlayer.filtersEnabled = false; + } ) + }, + /** + * + * @returns {*} + */ + enableFilters: function() { + return this.each( function() { + var YTPlayer = this; + var iframe = jQuery( YTPlayer.playerEl ); + var filterStyle = ""; + for( var key in YTPlayer.filters ) { + if( YTPlayer.filters[ key ].value ) filterStyle += key.replace( "_", "-" ) + "(" + YTPlayer.filters[ key ].value + YTPlayer.filters[ key ].unit + ") "; + } + iframe.css( "-webkit-filter", filterStyle ); + iframe.css( "filter", filterStyle ); + YTPlayer.filtersEnabled = true; + } ) + return this; + }, + /** + * + * @param filter + * @param callback + * @returns {*} + */ + removeFilter: function( filter, callback ) { + return this.each( function() { + if( typeof filter == "function" ) { + callback = filter; + filter = null; + } + var YTPlayer = this; + if( !filter ) + for( var key in YTPlayer.filters ) { + jQuery( this ).YTPApplyFilter( key, 0 ); + if( typeof callback == "function" ) callback( key ); + } else { + jQuery( this ).YTPApplyFilter( filter, 0 ); + if( typeof callback == "function" ) callback( filter ); + } + } ); + return this; + }, + /** + * + * @returns {{totalTime: number, currentTime: number}} + */ + manageProgress: function() { + var YTPlayer = this.get( 0 ); + var controls = jQuery( "#controlBar_" + YTPlayer.id ); + var progressBar = controls.find( ".mb_YTPProgress" ); + var loadedBar = controls.find( ".mb_YTPLoaded" ); + var timeBar = controls.find( ".mb_YTPseekbar" ); + var totW = progressBar.outerWidth(); + var currentTime = Math.floor( YTPlayer.player.getCurrentTime() ); + var totalTime = Math.floor( YTPlayer.player.getDuration() ); + var timeW = ( currentTime * totW ) / totalTime; + var startLeft = 0; + var loadedW = YTPlayer.player.getVideoLoadedFraction() * 100; + loadedBar.css( { + left: startLeft, + width: loadedW + "%" + } ); + timeBar.css( { + left: 0, + width: timeW + } ); + return { + totalTime: totalTime, + currentTime: currentTime + }; + }, + /** + * + * @param YTPlayer + */ + buildControls: function( YTPlayer ) { + var data = YTPlayer.opt; + // @data.printUrl: is deprecated; use data.showYTLogo + data.showYTLogo = data.showYTLogo || data.printUrl; + if( jQuery( "#controlBar_" + YTPlayer.id ).length ) return; + YTPlayer.controlBar = jQuery( "<span/>" ).attr( "id", "controlBar_" + YTPlayer.id ).addClass( "mb_YTPBar" ).css( { + whiteSpace: "noWrap", + position: YTPlayer.isBackground ? "fixed" : "absolute", + zIndex: YTPlayer.isBackground ? 10000 : 1000 + } ).hide(); + var buttonBar = jQuery( "<div/>" ).addClass( "buttonBar" ); + /* play/pause button*/ + var playpause = jQuery( "<span>" + jQuery.mbYTPlayer.controls.play + "</span>" ).addClass( "mb_YTPPlaypause ytpicon" ).click( function() { + if( YTPlayer.player.getPlayerState() == 1 ) jQuery( YTPlayer ).YTPPause(); + else jQuery( YTPlayer ).YTPPlay(); + } ); + /* mute/unmute button*/ + var MuteUnmute = jQuery( "<span>" + jQuery.mbYTPlayer.controls.mute + "</span>" ).addClass( "mb_YTPMuteUnmute ytpicon" ).click( function() { + if( YTPlayer.player.getVolume() == 0 ) { + jQuery( YTPlayer ).YTPUnmute(); + } else { + jQuery( YTPlayer ).YTPMute(); + } + } ); + /* volume bar*/ + var volumeBar = jQuery( "<div/>" ).addClass( "mb_YTPVolumeBar" ).css( { + display: "inline-block" + } ); + YTPlayer.volumeBar = volumeBar; + /* time elapsed */ + var idx = jQuery( "<span/>" ).addClass( "mb_YTPTime" ); + var vURL = data.videoURL ? data.videoURL : ""; + if( vURL.indexOf( "http" ) < 0 ) vURL = jQuery.mbYTPlayer.locationProtocol + "//www.youtube.com/watch?v=" + data.videoURL; + var movieUrl = jQuery( "<span/>" ).html( jQuery.mbYTPlayer.controls.ytLogo ).addClass( "mb_YTPUrl ytpicon" ).attr( "title", "view on YouTube" ).on( "click", function() { + window.open( vURL, "viewOnYT" ) + } ); + var onlyVideo = jQuery( "<span/>" ).html( jQuery.mbYTPlayer.controls.onlyYT ).addClass( "mb_OnlyYT ytpicon" ).on( "click", function() { + jQuery( YTPlayer ).YTPFullscreen( data.realfullscreen ); + } ); + var progressBar = jQuery( "<div/>" ).addClass( "mb_YTPProgress" ).css( "position", "absolute" ).click( function( e ) { + timeBar.css( { + width: ( e.clientX - timeBar.offset().left ) + } ); + YTPlayer.timeW = e.clientX - timeBar.offset().left; + YTPlayer.controlBar.find( ".mb_YTPLoaded" ).css( { + width: 0 + } ); + var totalTime = Math.floor( YTPlayer.player.getDuration() ); + YTPlayer.goto = ( timeBar.outerWidth() * totalTime ) / progressBar.outerWidth(); + YTPlayer.player.seekTo( parseFloat( YTPlayer.goto ), true ); + YTPlayer.controlBar.find( ".mb_YTPLoaded" ).css( { + width: 0 + } ); + } ); + var loadedBar = jQuery( "<div/>" ).addClass( "mb_YTPLoaded" ).css( "position", "absolute" ); + var timeBar = jQuery( "<div/>" ).addClass( "mb_YTPseekbar" ).css( "position", "absolute" ); + progressBar.append( loadedBar ).append( timeBar ); + buttonBar.append( playpause ).append( MuteUnmute ).append( volumeBar ).append( idx ); + if( data.showYTLogo ) { + buttonBar.append( movieUrl ); + } + if( YTPlayer.isBackground || ( eval( YTPlayer.opt.realfullscreen ) && !YTPlayer.isBackground ) ) buttonBar.append( onlyVideo ); + YTPlayer.controlBar.append( buttonBar ).append( progressBar ); + if( !YTPlayer.isBackground ) { + YTPlayer.controlBar.addClass( "inlinePlayer" ); + YTPlayer.wrapper.before( YTPlayer.controlBar ); + } else { + jQuery( "body" ).after( YTPlayer.controlBar ); + } + volumeBar.simpleSlider( { + initialval: YTPlayer.opt.vol, + scale: 100, + orientation: "h", + callback: function( el ) { + if( el.value == 0 ) { + jQuery( YTPlayer ).YTPMute(); + } else { + jQuery( YTPlayer ).YTPUnmute(); + } + YTPlayer.player.setVolume( el.value ); + if( !YTPlayer.isMute ) YTPlayer.opt.vol = el.value; + } + } ); + }, + /** + * + * + * */ + checkForState: function( YTPlayer ) { + var interval = YTPlayer.opt.showControls ? 100 : 700; + clearInterval( YTPlayer.getState ); + //Checking if player has been removed from scene + if( !jQuery.contains( document, YTPlayer ) ) { + jQuery( YTPlayer ).YTPPlayerDestroy(); + clearInterval( YTPlayer.getState ); + clearInterval( YTPlayer.checkForStartAt ); + return; + } + jQuery.mbYTPlayer.checkForStart( YTPlayer ); + YTPlayer.getState = setInterval( function() { + var prog = jQuery( YTPlayer ).YTPManageProgress(); + var $YTPlayer = jQuery( YTPlayer ); + var data = YTPlayer.opt; + var startAt = YTPlayer.opt.startAt ? YTPlayer.opt.startAt : 0; + var stopAt = YTPlayer.opt.stopAt > YTPlayer.opt.startAt ? YTPlayer.opt.stopAt : 0; + stopAt = stopAt < YTPlayer.player.getDuration() ? stopAt : 0; + if( YTPlayer.player.time != prog.currentTime ) { + var YTPEvent = jQuery.Event( "YTPTime" ); + YTPEvent.time = YTPlayer.player.time; + jQuery( YTPlayer ).trigger( YTPEvent ); + } + YTPlayer.player.time = prog.currentTime; + if( YTPlayer.player.getVolume() == 0 ) $YTPlayer.addClass( "isMuted" ); + else $YTPlayer.removeClass( "isMuted" ); + if( YTPlayer.opt.showControls ) + if( prog.totalTime ) { + YTPlayer.controlBar.find( ".mb_YTPTime" ).html( jQuery.mbYTPlayer.formatTime( prog.currentTime ) + " / " + jQuery.mbYTPlayer.formatTime( prog.totalTime ) ); + } else { + YTPlayer.controlBar.find( ".mb_YTPTime" ).html( "-- : -- / -- : --" ); + } + if( eval( YTPlayer.opt.stopMovieOnBlur ) ) + if( !document.hasFocus() ) { + if( YTPlayer.state == 1 ) { + YTPlayer.hasFocus = false; + $YTPlayer.YTPPause(); + } + } else if( document.hasFocus() && !YTPlayer.hasFocus && !( YTPlayer.state == -1 || YTPlayer.state == 0 ) ) { + YTPlayer.hasFocus = true; + $YTPlayer.YTPPlay(); + } + if( YTPlayer.controlBar && YTPlayer.controlBar.outerWidth() <= 400 && !YTPlayer.isCompact ) { + YTPlayer.controlBar.addClass( "compact" ); + YTPlayer.isCompact = true; + if( !YTPlayer.isMute && YTPlayer.volumeBar ) YTPlayer.volumeBar.updateSliderVal( YTPlayer.opt.vol ); + } else if( YTPlayer.controlBar && YTPlayer.controlBar.outerWidth() > 400 && YTPlayer.isCompact ) { + YTPlayer.controlBar.removeClass( "compact" ); + YTPlayer.isCompact = false; + if( !YTPlayer.isMute && YTPlayer.volumeBar ) YTPlayer.volumeBar.updateSliderVal( YTPlayer.opt.vol ); + } + if( YTPlayer.player.getPlayerState() == 1 && ( parseFloat( YTPlayer.player.getDuration() - 1.5 ) < YTPlayer.player.getCurrentTime() || ( stopAt > 0 && parseFloat( YTPlayer.player.getCurrentTime() ) > stopAt ) ) ) { + if( YTPlayer.isEnded ) return; + YTPlayer.isEnded = true; + setTimeout( function() { + YTPlayer.isEnded = false + }, 1000 ); + if( YTPlayer.isPlayList ) { + clearInterval( YTPlayer.getState ); + var YTPEnd = jQuery.Event( "YTPEnd" ); + YTPEnd.time = YTPlayer.player.time; + jQuery( YTPlayer ).trigger( YTPEnd ); + return; + } else if( !data.loop ) { + YTPlayer.player.pauseVideo(); + YTPlayer.wrapper.CSSAnimate( { + opacity: 0 + }, 1000, function() { + var YTPEnd = jQuery.Event( "YTPEnd" ); + YTPEnd.time = YTPlayer.player.time; + jQuery( YTPlayer ).trigger( YTPEnd ); + YTPlayer.player.seekTo( startAt, true ); + if( !YTPlayer.isBackground ) { + YTPlayer.opt.containment.css( { + background: "rgba(0,0,0,0.5) url(" + YTPlayer.opt.backgroundUrl + ") center center", + backgroundSize: "cover" + } ); + } + } ); + } else { + + startAt = startAt || 1; + + YTPlayer.player.pauseVideo(); + YTPlayer.player.seekTo( startAt, true ); + $YTPlayer.YTPPlay(); + + } + } + }, interval ); + }, + /** + * + * */ + checkForStart: function( YTPlayer ) { + var $YTPlayer = jQuery( YTPlayer ); + //Checking if player has been removed from scene + if( !jQuery.contains( document, YTPlayer ) ) { + jQuery( YTPlayer ).YTPPlayerDestroy(); + return + } + if( jQuery.browser.chrome ) YTPlayer.opt.quality = "default"; + YTPlayer.player.pauseVideo(); + jQuery( YTPlayer ).muteYTPVolume(); + jQuery( "#controlBar_" + YTPlayer.id ).remove(); + if( YTPlayer.opt.showControls ) jQuery.mbYTPlayer.buildControls( YTPlayer ); + if( YTPlayer.opt.addRaster ) { + var classN = YTPlayer.opt.addRaster == "dot" ? "raster-dot" : "raster"; + YTPlayer.overlay.addClass( YTPlayer.isRetina ? classN + " retina" : classN ); + } else { + YTPlayer.overlay.removeClass( function( index, classNames ) { + // change the list into an array + var current_classes = classNames.split( " " ), + // array of classes which are to be removed + classes_to_remove = []; + jQuery.each( current_classes, function( index, class_name ) { + // if the classname begins with bg add it to the classes_to_remove array + if( /raster.*/.test( class_name ) ) { + classes_to_remove.push( class_name ); + } + } ); + classes_to_remove.push( "retina" ); + // turn the array back into a string + return classes_to_remove.join( " " ); + } ) + } + YTPlayer.checkForStartAt = setInterval( function() { + jQuery( YTPlayer ).YTPMute(); + var startAt = YTPlayer.opt.startAt ? YTPlayer.opt.startAt : 1; + var canPlayVideo = ( YTPlayer.player.getVideoLoadedFraction() > startAt / YTPlayer.player.getDuration() ); + if( YTPlayer.player.getDuration() > 0 && YTPlayer.player.getCurrentTime() >= startAt && canPlayVideo ) { + clearInterval( YTPlayer.checkForStartAt ); + YTPlayer.isReady = true; + if( typeof YTPlayer.opt.onReady == "function" ) YTPlayer.opt.onReady( YTPlayer ); + var YTPready = jQuery.Event( "YTPReady" ); + jQuery( YTPlayer ).trigger( YTPready ); + YTPlayer.player.pauseVideo(); + if( !YTPlayer.opt.mute ) jQuery( YTPlayer ).YTPUnmute(); + YTPlayer.canTrigger = true; + if( YTPlayer.opt.autoPlay ) { + $YTPlayer.YTPPlay(); + $YTPlayer.css( "background-image", "none" ); + jQuery( YTPlayer.playerEl ).CSSAnimate( { + opacity: 1 + }, 1000 ); + YTPlayer.wrapper.CSSAnimate( { + opacity: YTPlayer.isAlone ? 1 : YTPlayer.opt.opacity + }, 1000 ); + } else { + YTPlayer.player.pauseVideo(); + if( !YTPlayer.isPlayer ) { + jQuery( YTPlayer.playerEl ).CSSAnimate( { + opacity: 1 + }, 1000 ); + YTPlayer.wrapper.CSSAnimate( { + opacity: YTPlayer.isAlone ? 1 : YTPlayer.opt.opacity + }, 1000 ); + } + } + if( YTPlayer.isPlayer && !YTPlayer.opt.autoPlay ) { + YTPlayer.loading.html( "Ready" ); + setTimeout( function() { + YTPlayer.loading.fadeOut(); + + + }, 100 ) + } + if( YTPlayer.controlBar ) YTPlayer.controlBar.slideDown( 1000 ); + } else { + //YTPlayer.player.playVideo(); + if( startAt >= 0 ) YTPlayer.player.seekTo( startAt, true ); + } + }, 1000 ); + }, + /** + * + * @param s + * @returns {string} + */ + formatTime: function( s ) { + var min = Math.floor( s / 60 ); + var sec = Math.floor( s - ( 60 * min ) ); + return( min <= 9 ? "0" + min : min ) + " : " + ( sec <= 9 ? "0" + sec : sec ); + } + }; + /** + * + * @returns {boolean} + */ + jQuery.fn.toggleVolume = function() { + var YTPlayer = this.get( 0 ); + if( !YTPlayer ) return; + if( YTPlayer.player.isMuted() ) { + jQuery( YTPlayer ).YTPUnmute(); + return true; + } else { + jQuery( YTPlayer ).YTPMute(); + return false; + } + }; + /** + * + */ + jQuery.fn.optimizeDisplay = function() { + var YTPlayer = this.get( 0 ); + var data = YTPlayer.opt; + var playerBox = jQuery( YTPlayer.playerEl ); + var win = {}; + var el = YTPlayer.wrapper; + win.width = el.outerWidth(); + win.height = el.outerHeight(); + var margin = 24; + var overprint = 100; + var vid = {}; + if( data.optimizeDisplay ) { + vid.width = win.width + ( ( win.width * margin ) / 100 ); + vid.height = data.ratio == "16/9" ? Math.ceil( ( 9 * win.width ) / 16 ) : Math.ceil( ( 3 * win.width ) / 4 ); + vid.marginTop = -( ( vid.height - win.height ) / 2 ); + vid.marginLeft = -( ( win.width * ( margin / 2 ) ) / 100 ); + if( vid.height < win.height ) { + vid.height = win.height + ( ( win.height * margin ) / 100 ); + vid.width = data.ratio == "16/9" ? Math.floor( ( 16 * win.height ) / 9 ) : Math.floor( ( 4 * win.height ) / 3 ); + vid.marginTop = -( ( win.height * ( margin / 2 ) ) / 100 ); + vid.marginLeft = -( ( vid.width - win.width ) / 2 ); + } + vid.width += overprint; + vid.height += overprint; + vid.marginTop -= overprint / 2; + vid.marginLeft -= overprint / 2; + } else { + vid.width = "100%"; + vid.height = "100%"; + vid.marginTop = 0; + vid.marginLeft = 0; + } + playerBox.css( { + width: vid.width, + height: vid.height, + marginTop: vid.marginTop, + marginLeft: vid.marginLeft + } ); + }; + /** + * + * @param arr + * @returns {Array|string|Blob|*} + * + */ + jQuery.shuffle = function( arr ) { + var newArray = arr.slice(); + var len = newArray.length; + var i = len; + while( i-- ) { + var p = parseInt( Math.random() * len ); + var t = newArray[ i ]; + newArray[ i ] = newArray[ p ]; + newArray[ p ] = t; + } + return newArray; + }; + + /* Exposed public method */ + jQuery.fn.YTPlayer = jQuery.mbYTPlayer.buildPlayer; + jQuery.fn.YTPGetPlayer = jQuery.mbYTPlayer.getPlayer; + jQuery.fn.YTPGetVideoID = jQuery.mbYTPlayer.getVideoID; + jQuery.fn.YTPChangeMovie = jQuery.mbYTPlayer.changeMovie; + jQuery.fn.YTPPlayerDestroy = jQuery.mbYTPlayer.playerDestroy; + + jQuery.fn.YTPPlay = jQuery.mbYTPlayer.play; + jQuery.fn.YTPTogglePlay = jQuery.mbYTPlayer.togglePlay; + jQuery.fn.YTPStop = jQuery.mbYTPlayer.stop; + jQuery.fn.YTPPause = jQuery.mbYTPlayer.pause; + jQuery.fn.YTPSeekTo = jQuery.mbYTPlayer.seekTo; + + jQuery.fn.YTPlaylist = jQuery.mbYTPlayer.playlist; + jQuery.fn.YTPPlayNext = jQuery.mbYTPlayer.playNext; + jQuery.fn.YTPPlayPrev = jQuery.mbYTPlayer.playPrev; + + jQuery.fn.YTPMute = jQuery.mbYTPlayer.mute; + jQuery.fn.YTPUnmute = jQuery.mbYTPlayer.unmute; + jQuery.fn.YTPToggleVolume = jQuery.mbYTPlayer.toggleVolume; + jQuery.fn.YTPSetVolume = jQuery.mbYTPlayer.setVolume; + + jQuery.fn.YTPGetVideoData = jQuery.mbYTPlayer.getVideoData; + jQuery.fn.YTPFullscreen = jQuery.mbYTPlayer.fullscreen; + jQuery.fn.YTPToggleLoops = jQuery.mbYTPlayer.toggleLoops; + jQuery.fn.YTPSetVideoQuality = jQuery.mbYTPlayer.setVideoQuality; + jQuery.fn.YTPManageProgress = jQuery.mbYTPlayer.manageProgress; + + jQuery.fn.YTPApplyFilter = jQuery.mbYTPlayer.applyFilter; + jQuery.fn.YTPApplyFilters = jQuery.mbYTPlayer.applyFilters; + jQuery.fn.YTPToggleFilter = jQuery.mbYTPlayer.toggleFilter; + jQuery.fn.YTPToggleFilters = jQuery.mbYTPlayer.toggleFilters; + jQuery.fn.YTPRemoveFilter = jQuery.mbYTPlayer.removeFilter; + jQuery.fn.YTPDisableFilters = jQuery.mbYTPlayer.disableFilters; + jQuery.fn.YTPEnableFilters = jQuery.mbYTPlayer.enableFilters; + + + /** + * + * @deprecated + * + **/ + jQuery.fn.mb_YTPlayer = jQuery.mbYTPlayer.buildPlayer; + jQuery.fn.playNext = jQuery.mbYTPlayer.playNext; + jQuery.fn.playPrev = jQuery.mbYTPlayer.playPrev; + jQuery.fn.changeMovie = jQuery.mbYTPlayer.changeMovie; + jQuery.fn.getVideoID = jQuery.mbYTPlayer.getVideoID; + jQuery.fn.getPlayer = jQuery.mbYTPlayer.getPlayer; + jQuery.fn.playerDestroy = jQuery.mbYTPlayer.playerDestroy; + jQuery.fn.fullscreen = jQuery.mbYTPlayer.fullscreen; + jQuery.fn.buildYTPControls = jQuery.mbYTPlayer.buildControls; + jQuery.fn.playYTP = jQuery.mbYTPlayer.play; + jQuery.fn.toggleLoops = jQuery.mbYTPlayer.toggleLoops; + jQuery.fn.stopYTP = jQuery.mbYTPlayer.stop; + jQuery.fn.pauseYTP = jQuery.mbYTPlayer.pause; + jQuery.fn.seekToYTP = jQuery.mbYTPlayer.seekTo; + jQuery.fn.muteYTPVolume = jQuery.mbYTPlayer.mute; + jQuery.fn.unmuteYTPVolume = jQuery.mbYTPlayer.unmute; + jQuery.fn.setYTPVolume = jQuery.mbYTPlayer.setVolume; + jQuery.fn.setVideoQuality = jQuery.mbYTPlayer.setVideoQuality; + jQuery.fn.manageYTPProgress = jQuery.mbYTPlayer.manageProgress; + jQuery.fn.YTPGetDataFromFeed = jQuery.mbYTPlayer.getVideoData; + + +} )( jQuery, ytp ); +; +/* + * ****************************************************************************** + * jquery.mb.components + * file: jquery.mb.CSSAnimate.min.js + * + * Copyright (c) 2001-2014. Matteo Bicocchi (Pupunzi); + * Open lab srl, Firenze - Italy + * email: matteo@open-lab.com + * site: http://pupunzi.com + * blog: http://pupunzi.open-lab.com + * http://open-lab.com + * + * Licences: MIT, GPL + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + * last modified: 26/03/14 21.40 + * ***************************************************************************** + */ + +function uncamel(a){return a.replace(/([A-Z])/g,function(a){return"-"+a.toLowerCase()})}function setUnit(a,b){return"string"!=typeof a||a.match(/^[\-0-9\.]+jQuery/)?""+a+b:a}function setFilter(a,b,c){var d=uncamel(b),e=jQuery.browser.mozilla?"":jQuery.CSS.sfx;a[e+"filter"]=a[e+"filter"]||"",c=setUnit(c>jQuery.CSS.filters[b].max?jQuery.CSS.filters[b].max:c,jQuery.CSS.filters[b].unit),a[e+"filter"]+=d+"("+c+") ",delete a[b]}jQuery.support.CSStransition=function(){var a=document.body||document.documentElement,b=a.style;return void 0!==b.transition||void 0!==b.WebkitTransition||void 0!==b.MozTransition||void 0!==b.MsTransition||void 0!==b.OTransition}(),jQuery.CSS={name:"mb.CSSAnimate",author:"Matteo Bicocchi",version:"2.0.0",transitionEnd:"transitionEnd",sfx:"",filters:{blur:{min:0,max:100,unit:"px"},brightness:{min:0,max:400,unit:"%"},contrast:{min:0,max:400,unit:"%"},grayscale:{min:0,max:100,unit:"%"},hueRotate:{min:0,max:360,unit:"deg"},invert:{min:0,max:100,unit:"%"},saturate:{min:0,max:400,unit:"%"},sepia:{min:0,max:100,unit:"%"}},normalizeCss:function(a){var b=jQuery.extend(!0,{},a);jQuery.browser.webkit||jQuery.browser.opera?jQuery.CSS.sfx="-webkit-":jQuery.browser.mozilla?jQuery.CSS.sfx="-moz-":jQuery.browser.msie&&(jQuery.CSS.sfx="-ms-");for(var c in b){"transform"===c&&(b[jQuery.CSS.sfx+"transform"]=b[c],delete b[c]),"transform-origin"===c&&(b[jQuery.CSS.sfx+"transform-origin"]=a[c],delete b[c]),"filter"!==c||jQuery.browser.mozilla||(b[jQuery.CSS.sfx+"filter"]=a[c],delete b[c]),"blur"===c&&setFilter(b,"blur",a[c]),"brightness"===c&&setFilter(b,"brightness",a[c]),"contrast"===c&&setFilter(b,"contrast",a[c]),"grayscale"===c&&setFilter(b,"grayscale",a[c]),"hueRotate"===c&&setFilter(b,"hueRotate",a[c]),"invert"===c&&setFilter(b,"invert",a[c]),"saturate"===c&&setFilter(b,"saturate",a[c]),"sepia"===c&&setFilter(b,"sepia",a[c]);var d="";"x"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" translateX("+setUnit(a[c],"px")+")",delete b[c]),"y"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" translateY("+setUnit(a[c],"px")+")",delete b[c]),"z"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" translateZ("+setUnit(a[c],"px")+")",delete b[c]),"rotate"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" rotate("+setUnit(a[c],"deg")+")",delete b[c]),"rotateX"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" rotateX("+setUnit(a[c],"deg")+")",delete b[c]),"rotateY"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" rotateY("+setUnit(a[c],"deg")+")",delete b[c]),"rotateZ"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" rotateZ("+setUnit(a[c],"deg")+")",delete b[c]),"scale"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" scale("+setUnit(a[c],"")+")",delete b[c]),"scaleX"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" scaleX("+setUnit(a[c],"")+")",delete b[c]),"scaleY"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" scaleY("+setUnit(a[c],"")+")",delete b[c]),"scaleZ"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" scaleZ("+setUnit(a[c],"")+")",delete b[c]),"skew"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" skew("+setUnit(a[c],"deg")+")",delete b[c]),"skewX"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" skewX("+setUnit(a[c],"deg")+")",delete b[c]),"skewY"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" skewY("+setUnit(a[c],"deg")+")",delete b[c]),"perspective"===c&&(d=jQuery.CSS.sfx+"transform",b[d]=b[d]||"",b[d]+=" perspective("+setUnit(a[c],"px")+")",delete b[c])}return b},getProp:function(a){var b=[];for(var c in a)b.indexOf(c)<0&&b.push(uncamel(c));return b.join(",")},animate:function(a,b,c,d,e){return this.each(function(){function o(){f.called=!0,f.CSSAIsRunning=!1,g.off(jQuery.CSS.transitionEnd+"."+f.id),clearTimeout(f.timeout),g.css(jQuery.CSS.sfx+"transition",""),"function"==typeof e&&e.apply(f),"function"==typeof f.CSSqueue&&(f.CSSqueue(),f.CSSqueue=null)}var f=this,g=jQuery(this);f.id=f.id||"CSSA_"+(new Date).getTime();var h=h||{type:"noEvent"};if(f.CSSAIsRunning&&f.eventType==h.type&&!jQuery.browser.msie&&jQuery.browser.version<=9)return f.CSSqueue=function(){g.CSSAnimate(a,b,c,d,e)},void 0;if(f.CSSqueue=null,f.eventType=h.type,0!==g.length&&a){if(a=jQuery.normalizeCss(a),f.CSSAIsRunning=!0,"function"==typeof b&&(e=b,b=jQuery.fx.speeds._default),"function"==typeof c&&(d=c,c=0),"string"==typeof c&&(e=c,c=0),"function"==typeof d&&(e=d,d="cubic-bezier(0.65,0.03,0.36,0.72)"),"string"==typeof b)for(var i in jQuery.fx.speeds){if(b==i){b=jQuery.fx.speeds[i];break}b=jQuery.fx.speeds._default}if(b||(b=jQuery.fx.speeds._default),"string"==typeof e&&(d=e,e=null),!jQuery.support.CSStransition){for(var j in a){if("transform"===j&&delete a[j],"filter"===j&&delete a[j],"transform-origin"===j&&delete a[j],"auto"===a[j]&&delete a[j],"x"===j){var k=a[j],l="left";a[l]=k,delete a[j]}if("y"===j){var k=a[j],l="top";a[l]=k,delete a[j]}("-ms-transform"===j||"-ms-filter"===j)&&delete a[j]}return g.delay(c).animate(a,b,e),void 0}var m={"default":"ease","in":"ease-in",out:"ease-out","in-out":"ease-in-out",snap:"cubic-bezier(0,1,.5,1)",easeOutCubic:"cubic-bezier(.215,.61,.355,1)",easeInOutCubic:"cubic-bezier(.645,.045,.355,1)",easeInCirc:"cubic-bezier(.6,.04,.98,.335)",easeOutCirc:"cubic-bezier(.075,.82,.165,1)",easeInOutCirc:"cubic-bezier(.785,.135,.15,.86)",easeInExpo:"cubic-bezier(.95,.05,.795,.035)",easeOutExpo:"cubic-bezier(.19,1,.22,1)",easeInOutExpo:"cubic-bezier(1,0,0,1)",easeInQuad:"cubic-bezier(.55,.085,.68,.53)",easeOutQuad:"cubic-bezier(.25,.46,.45,.94)",easeInOutQuad:"cubic-bezier(.455,.03,.515,.955)",easeInQuart:"cubic-bezier(.895,.03,.685,.22)",easeOutQuart:"cubic-bezier(.165,.84,.44,1)",easeInOutQuart:"cubic-bezier(.77,0,.175,1)",easeInQuint:"cubic-bezier(.755,.05,.855,.06)",easeOutQuint:"cubic-bezier(.23,1,.32,1)",easeInOutQuint:"cubic-bezier(.86,0,.07,1)",easeInSine:"cubic-bezier(.47,0,.745,.715)",easeOutSine:"cubic-bezier(.39,.575,.565,1)",easeInOutSine:"cubic-bezier(.445,.05,.55,.95)",easeInBack:"cubic-bezier(.6,-.28,.735,.045)",easeOutBack:"cubic-bezier(.175, .885,.32,1.275)",easeInOutBack:"cubic-bezier(.68,-.55,.265,1.55)"};m[d]&&(d=m[d]),g.off(jQuery.CSS.transitionEnd+"."+f.id);var n=jQuery.CSS.getProp(a),p={};jQuery.extend(p,a),p[jQuery.CSS.sfx+"transition-property"]=n,p[jQuery.CSS.sfx+"transition-duration"]=b+"ms",p[jQuery.CSS.sfx+"transition-delay"]=c+"ms",p[jQuery.CSS.sfx+"transition-timing-function"]=d,setTimeout(function(){g.one(jQuery.CSS.transitionEnd+"."+f.id,o),g.css(p)},1),f.timeout=setTimeout(function(){return f.called||!e?(f.called=!1,f.CSSAIsRunning=!1,void 0):(g.css(jQuery.CSS.sfx+"transition",""),e.apply(f),f.CSSAIsRunning=!1,"function"==typeof f.CSSqueue&&(f.CSSqueue(),f.CSSqueue=null),void 0)},b+c+10)}})}},jQuery.fn.CSSAnimate=jQuery.CSS.animate,jQuery.normalizeCss=jQuery.CSS.normalizeCss,jQuery.fn.css3=function(a){return this.each(function(){var b=jQuery(this),c=jQuery.normalizeCss(a);b.css(c)})}; +;/* + * ****************************************************************************** + * jquery.mb.components + * file: jquery.mb.browser.min.js + * + * Copyright (c) 2001-2014. Matteo Bicocchi (Pupunzi); + * Open lab srl, Firenze - Italy + * email: matteo@open-lab.com + * site: http://pupunzi.com + * blog: http://pupunzi.open-lab.com + * http://open-lab.com + * + * Licences: MIT, GPL + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + * last modified: 26/03/14 21.43 + * ***************************************************************************** + */ + +var nAgt=navigator.userAgent;if(!jQuery.browser){jQuery.browser={},jQuery.browser.mozilla=!1,jQuery.browser.webkit=!1,jQuery.browser.opera=!1,jQuery.browser.safari=!1,jQuery.browser.chrome=!1,jQuery.browser.msie=!1,jQuery.browser.ua=nAgt,jQuery.browser.name=navigator.appName,jQuery.browser.fullVersion=""+parseFloat(navigator.appVersion),jQuery.browser.majorVersion=parseInt(navigator.appVersion,10);var nameOffset,verOffset,ix;if(-1!=(verOffset=nAgt.indexOf("Opera")))jQuery.browser.opera=!0,jQuery.browser.name="Opera",jQuery.browser.fullVersion=nAgt.substring(verOffset+6),-1!=(verOffset=nAgt.indexOf("Version"))&&(jQuery.browser.fullVersion=nAgt.substring(verOffset+8));else if(-1!=(verOffset=nAgt.indexOf("OPR")))jQuery.browser.opera=!0,jQuery.browser.name="Opera",jQuery.browser.fullVersion=nAgt.substring(verOffset+4);else if(-1!=(verOffset=nAgt.indexOf("MSIE")))jQuery.browser.msie=!0,jQuery.browser.name="Microsoft Internet Explorer",jQuery.browser.fullVersion=nAgt.substring(verOffset+5);else if(-1!=nAgt.indexOf("Trident")){jQuery.browser.msie=!0,jQuery.browser.name="Microsoft Internet Explorer";var start=nAgt.indexOf("rv:")+3,end=start+4;jQuery.browser.fullVersion=nAgt.substring(start,end)}else-1!=(verOffset=nAgt.indexOf("Chrome"))?(jQuery.browser.webkit=!0,jQuery.browser.chrome=!0,jQuery.browser.name="Chrome",jQuery.browser.fullVersion=nAgt.substring(verOffset+7)):-1!=(verOffset=nAgt.indexOf("Safari"))?(jQuery.browser.webkit=!0,jQuery.browser.safari=!0,jQuery.browser.name="Safari",jQuery.browser.fullVersion=nAgt.substring(verOffset+7),-1!=(verOffset=nAgt.indexOf("Version"))&&(jQuery.browser.fullVersion=nAgt.substring(verOffset+8))):-1!=(verOffset=nAgt.indexOf("AppleWebkit"))?(jQuery.browser.webkit=!0,jQuery.browser.name="Safari",jQuery.browser.fullVersion=nAgt.substring(verOffset+7),-1!=(verOffset=nAgt.indexOf("Version"))&&(jQuery.browser.fullVersion=nAgt.substring(verOffset+8))):-1!=(verOffset=nAgt.indexOf("Firefox"))?(jQuery.browser.mozilla=!0,jQuery.browser.name="Firefox",jQuery.browser.fullVersion=nAgt.substring(verOffset+8)):(nameOffset=nAgt.lastIndexOf(" ")+1)<(verOffset=nAgt.lastIndexOf("/"))&&(jQuery.browser.name=nAgt.substring(nameOffset,verOffset),jQuery.browser.fullVersion=nAgt.substring(verOffset+1),jQuery.browser.name.toLowerCase()==jQuery.browser.name.toUpperCase()&&(jQuery.browser.name=navigator.appName));-1!=(ix=jQuery.browser.fullVersion.indexOf(";"))&&(jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix)),-1!=(ix=jQuery.browser.fullVersion.indexOf(" "))&&(jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix)),jQuery.browser.majorVersion=parseInt(""+jQuery.browser.fullVersion,10),isNaN(jQuery.browser.majorVersion)&&(jQuery.browser.fullVersion=""+parseFloat(navigator.appVersion),jQuery.browser.majorVersion=parseInt(navigator.appVersion,10)),jQuery.browser.version=jQuery.browser.majorVersion}jQuery.browser.android=/Android/i.test(nAgt),jQuery.browser.blackberry=/BlackBerry|BB|PlayBook/i.test(nAgt),jQuery.browser.ios=/iPhone|iPad|iPod|webOS/i.test(nAgt),jQuery.browser.operaMobile=/Opera Mini/i.test(nAgt),jQuery.browser.windowsMobile=/IEMobile|Windows Phone/i.test(nAgt),jQuery.browser.kindle=/Kindle|Silk/i.test(nAgt),jQuery.browser.mobile=jQuery.browser.android||jQuery.browser.blackberry||jQuery.browser.ios||jQuery.browser.windowsMobile||jQuery.browser.operaMobile||jQuery.browser.kindle,jQuery.isMobile=jQuery.browser.mobile,jQuery.isTablet=jQuery.browser.mobile&&jQuery(window).width()>765,jQuery.isAndroidDefault=jQuery.browser.android&&!/chrome/i.test(nAgt); +;/*___________________________________________________________________________________________________________________________________________________ + _ jquery.mb.components _ + _ _ + _ file: jquery.mb.simpleSlider.min.js _ + _ last modified: 16/05/15 23.45 _ + _ _ + _ Open Lab s.r.l., Florence - Italy _ + _ _ + _ email: matteo@open-lab.com _ + _ site: http://pupunzi.com _ + _ http://open-lab.com _ + _ blog: http://pupunzi.open-lab.com _ + _ Q&A: http://jquery.pupunzi.com _ + _ _ + _ Licences: MIT, GPL _ + _ http://www.opensource.org/licenses/mit-license.php _ + _ http://www.gnu.org/licenses/gpl.html _ + _ _ + _ Copyright (c) 2001-2015. Matteo Bicocchi (Pupunzi); _ + ___________________________________________________________________________________________________________________________________________________*/ + +!function(a){/iphone|ipod|ipad|android|ie|blackberry|fennec/.test(navigator.userAgent.toLowerCase());var c="ontouchstart"in window||window.navigator&&window.navigator.msPointerEnabled&&window.MSGesture||window.DocumentTouch&&document instanceof DocumentTouch||!1;a.simpleSlider={defaults:{initialval:0,scale:100,orientation:"h",readonly:!1,callback:!1},events:{start:c?"touchstart":"mousedown",end:c?"touchend":"mouseup",move:c?"touchmove":"mousemove"},init:function(b){return this.each(function(){var d=this,e=a(d);e.addClass("simpleSlider"),d.opt={},a.extend(d.opt,a.simpleSlider.defaults,b),a.extend(d.opt,e.data());var f="h"==d.opt.orientation?"horizontal":"vertical",g=a("<div/>").addClass("level").addClass(f);e.prepend(g),d.level=g,e.css({cursor:"default"}),"auto"==d.opt.scale&&(d.opt.scale=a(d).outerWidth()),e.updateSliderVal(),d.opt.readonly||(e.on(a.simpleSlider.events.start,function(a){c&&(a=a.changedTouches[0]),d.canSlide=!0,e.updateSliderVal(a),e.css({cursor:"col-resize"}),a.preventDefault(),a.stopPropagation()}),a(document).on(a.simpleSlider.events.move,function(b){c&&(b=b.changedTouches[0]),d.canSlide&&(a(document).css({cursor:"default"}),e.updateSliderVal(b),b.preventDefault(),b.stopPropagation())}).on(a.simpleSlider.events.end,function(){a(document).css({cursor:"auto"}),d.canSlide=!1,e.css({cursor:"auto"})}))})},updateSliderVal:function(b){function g(a,b){return Math.floor(100*a/b)}var c=this,d=c.get(0);d.opt.initialval="number"==typeof d.opt.initialval?d.opt.initialval:d.opt.initialval(d);var e=a(d).outerWidth(),f=a(d).outerHeight();d.x="object"==typeof b?b.clientX+document.body.scrollLeft-c.offset().left:"number"==typeof b?b*e/d.opt.scale:d.opt.initialval*e/d.opt.scale,d.y="object"==typeof b?b.clientY+document.body.scrollTop-c.offset().top:"number"==typeof b?(d.opt.scale-d.opt.initialval-b)*f/d.opt.scale:d.opt.initialval*f/d.opt.scale,d.y=c.outerHeight()-d.y,d.scaleX=d.x*d.opt.scale/e,d.scaleY=d.y*d.opt.scale/f,d.outOfRangeX=d.scaleX>d.opt.scale?d.scaleX-d.opt.scale:d.scaleX<0?d.scaleX:0,d.outOfRangeY=d.scaleY>d.opt.scale?d.scaleY-d.opt.scale:d.scaleY<0?d.scaleY:0,d.outOfRange="h"==d.opt.orientation?d.outOfRangeX:d.outOfRangeY,d.value="undefined"!=typeof b?"h"==d.opt.orientation?d.x>=c.outerWidth()?d.opt.scale:d.x<=0?0:d.scaleX:d.y>=c.outerHeight()?d.opt.scale:d.y<=0?0:d.scaleY:"h"==d.opt.orientation?d.scaleX:d.scaleY,"h"==d.opt.orientation?d.level.width(g(d.x,e)+"%"):d.level.height(g(d.y,f)),"function"==typeof d.opt.callback&&d.opt.callback(d)}},a.fn.simpleSlider=a.simpleSlider.init,a.fn.updateSliderVal=a.simpleSlider.updateSliderVal}(jQuery); +;/*___________________________________________________________________________________________________________________________________________________ + _ jquery.mb.components _ + _ _ + _ file: jquery.mb.storage.min.js _ + _ last modified: 24/05/15 16.08 _ + _ _ + _ Open Lab s.r.l., Florence - Italy _ + _ _ + _ email: matteo@open-lab.com _ + _ site: http://pupunzi.com _ + _ http://open-lab.com _ + _ blog: http://pupunzi.open-lab.com _ + _ Q&A: http://jquery.pupunzi.com _ + _ _ + _ Licences: MIT, GPL _ + _ http://www.opensource.org/licenses/mit-license.php _ + _ http://www.gnu.org/licenses/gpl.html _ + _ _ + _ Copyright (c) 2001-2015. Matteo Bicocchi (Pupunzi); _ + ___________________________________________________________________________________________________________________________________________________*/ + +!function(a){a.mbCookie={set:function(a,b,c,d){b=JSON.stringify(b),c||(c=7),d=d?"; domain="+d:"";var f,e=new Date;e.setTime(e.getTime()+1e3*60*60*24*c),f="; expires="+e.toGMTString(),document.cookie=a+"="+b+f+"; path=/"+d},get:function(a){for(var b=a+"=",c=document.cookie.split(";"),d=0;d<c.length;d++){for(var e=c[d];" "==e.charAt(0);)e=e.substring(1,e.length);if(0==e.indexOf(b))return JSON.parse(e.substring(b.length,e.length))}return null},remove:function(b){a.mbCookie.set(b,"",-1)}},a.mbStorage={set:function(a,b){b=JSON.stringify(b),localStorage.setItem(a,b)},get:function(a){return localStorage[a]?JSON.parse(localStorage[a]):null},remove:function(a){a?localStorage.removeItem(a):localStorage.clear()}}}(jQuery); diff --git a/theme_common/static/src/js/compatibility_editor.js b/theme_common/static/src/js/compatibility_editor.js new file mode 100644 index 0000000..0f3aeb3 --- /dev/null +++ b/theme_common/static/src/js/compatibility_editor.js @@ -0,0 +1,19 @@ +odoo.define('theme_common.compatibility_editor', function (require) { +'use strict'; + +var sOptions = require('web_editor.snippets.options'); + +sOptions.registry.BackgroundImage.include({ + /** + * @override + */ + background: function (previewMode, widgetValue, params) { + this._super.apply(this, arguments); + + var customClass = this.$target.attr('class').match(/\b(bg-img-\d+)\b/); + if (customClass) { + this.$target.removeClass(customClass[1]); + } + }, +}); +}); diff --git a/theme_common/static/src/js/preheader.js b/theme_common/static/src/js/preheader.js new file mode 100644 index 0000000..7c1e8e2 --- /dev/null +++ b/theme_common/static/src/js/preheader.js @@ -0,0 +1,115 @@ +odoo.define('theme_common.preheader', function (require) { +'use strict'; + +var publicWidget = require('web.public.widget'); +require('website.content.menu'); + +publicWidget.registry.StandardAffixedHeader.include({ + /** + * @override + */ + start: function () { + this.$preheader = this.$el.find('#o_theme_preheader'); + this.preheaderVisible = this.$preheader.css('display') !== 'none'; + return this._super.apply(this, arguments); + }, + /** + * @override + */ + destroy: function () { + this.$el.find('#o_theme_preheader').show(); + return this._super.apply(this, arguments); + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @override + */ + _updateHeaderOnScroll: function (scrollTop) { + var def = this._super.apply(this, arguments); + if (this.preheaderVisible) { + if (this.$el.hasClass('o_header_is_scrolled')) { + this.$el.find('#o_theme_preheader').hide(); + } else { + this.$el.find('#o_theme_preheader').show(200); + } + } + return def; + } +}); +publicWidget.registry.FixedHeader.include({ + /** + * @override + */ + start: function () { + this.$preheader = this.$el.find('#o_theme_preheader'); + this.preheaderVisible = this.$preheader.css('display') !== 'none'; + return this._super.apply(this, arguments); + }, + /** + * @override + */ + destroy: function () { + this.$el.css('transform', ''); + return this._super.apply(this, arguments); + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @override + */ + _updateHeaderOnScroll: function (scrollTop) { + var def = this._super.apply(this, arguments); + if (this.preheaderVisible) { + if (this.$el.hasClass('o_header_is_scrolled')) { + if (!this.$el.hasClass('o_header_disappears') && !this.$el.hasClass('o_header_fade_out')) { + const preheaderHeight = this.$el.find('#o_theme_preheader').outerHeight(); + this.$el.css('transform', 'translate(0, -' + preheaderHeight + 'px)'); + } + } else { + this.$el.css('transform', ''); + } + } + return def; + } +}); + +const BaseDisappearingPreheader = { + /** + * @override + */ + start: function () { + this.$preheader = this.$el.find('#o_theme_preheader'); + this.preheaderVisible = this.$preheader.css('display') !== 'none'; + return this._super.apply(this, arguments); + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @override + */ + _showHeader: function () { + var def = this._super.apply(this, arguments); + if (this.preheaderVisible) { + const preheaderHeight = this.$preheader.outerHeight(); + if (this.$el.hasClass('o_header_is_scrolled')) { + this.$el.css('transform', 'translate(0, -' + preheaderHeight + 'px)'); + } + } + return def; + } +}; + +publicWidget.registry.DisappearingHeader.include(BaseDisappearingPreheader); +publicWidget.registry.FadeOutHeader.include(BaseDisappearingPreheader); + +}); diff --git a/theme_common/static/src/old_snippets/s_animated_boxes/000.js b/theme_common/static/src/old_snippets/s_animated_boxes/000.js new file mode 100644 index 0000000..ec39eab --- /dev/null +++ b/theme_common/static/src/old_snippets/s_animated_boxes/000.js @@ -0,0 +1,15 @@ +odoo.define('theme_common.s_animated_boxes_frontend', function (require) { + 'use strict'; + +var publicWidget = require('web.public.widget'); + +/** + * This is a fix for some apple devices. + * The slide of animated boxes widget is shown on hover or click on mobile + * devices, but iOS only activates :hover if the element targeted is + * clickable. + */ +publicWidget.registry._fixAnimatedBoxesAppleClick = publicWidget.registry._fixAppleCollapse.extend({ + selector: '.s_animated_boxes .item', +}); +}); diff --git a/theme_common/static/src/old_snippets/s_animated_boxes/000.scss b/theme_common/static/src/old_snippets/s_animated_boxes/000.scss new file mode 100644 index 0000000..00bc21b --- /dev/null +++ b/theme_common/static/src/old_snippets/s_animated_boxes/000.scss @@ -0,0 +1,77 @@ + +#wrapwrap .s_animated_boxes{ + margin: 0; + width: 100%; + overflow: hidden; + + .item { + height: 200px; + background-size: cover; + overflow: hidden; + text-align: center; + + > * { + z-index: 0; + position: relative; + padding-top: $grid-gutter-width/2; + padding-bottom: $grid-gutter-width/2; + } + .slide { + z-index: 1; + position: absolute; + width: 100%; + height: 100%; + background-size: cover; + left: 0; + top: 0; + opacity: 0; + padding: $grid-gutter-width/2; + transition: opacity 400ms; + + &.visible{ + opacity: 1; + } + } + &:hover .slide{ + opacity: 1; + transition: opacity 100ms; + } + + @include media-breakpoint-down(sm) { + height: auto; + min-height: 200px; + + &::before { + content: ""; + display: inline-block; + height: 100%; + min-height: 200px; + vertical-align: middle; + } + + .v-align { + display: inline-block; + width: 98%; + vertical-align: middle; + + top: auto; + transform: translate(0, 0); + } + } + } +} + +// Used in editing mode +body.editor_enable .s_animated_boxes { + .item:hover .slide { + display: none; + opacity: 0; + } + + .item.showSlide .slide, .item.showSlide:hover .slide { + display: block; + opacity: 1; + transform: translateY(0%)!important; + transform: translateX(0%)!important; + } +} diff --git a/theme_common/static/src/old_snippets/s_banner_parallax/000.scss b/theme_common/static/src/old_snippets/s_banner_parallax/000.scss new file mode 100644 index 0000000..b651dbc --- /dev/null +++ b/theme_common/static/src/old_snippets/s_banner_parallax/000.scss @@ -0,0 +1,55 @@ +$s-banner-parallax-text-color: o-color('alpha') !default; + +#wrapwrap .s_banner_parallax { + margin-bottom: 0px !important; + + @include media-breakpoint-down(sm) { + background-position: $s-banner-parallax-bg-position; + } + @include s-banner-parallax-height-hook; + + .container-fluid { + + .row { + height: $s-banner-parallax-height; + @include s-banner-parallax-row-hook; + + .hero-bg { + padding-left: $s-banner-parallax-padding; + color: $s-banner-parallax-text-color; + @include s-banner-parallax-hero-bg-hook; + + @include media-breakpoint-down(sm) { + text-align: center; + padding-left: 15px; + } + + h1 { + font-size: $s-banner-parallax-h1-size; + text-shadow: $s-banner-parallax-text-shadow; + + @media screen and (max-width: 360px) { // FIXME + font-size: 50px; + } + } + + h2 { + font-size: 40px; + text-shadow: $s-banner-parallax-text-shadow; + + @media screen and (max-width: 360px) { // FIXME + font-size: 30px; + } + } + + img { + max-height: $s-banner-parallax-img-height; + + @media screen and (max-width: 360px) { // FIXME + max-height: 200px; + } + } + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_banner_parallax/000_variables.scss b/theme_common/static/src/old_snippets/s_banner_parallax/000_variables.scss new file mode 100644 index 0000000..1515989 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_banner_parallax/000_variables.scss @@ -0,0 +1,11 @@ +$s-banner-parallax-height: 500px; +$s-banner-parallax-padding: 130px; +$s-banner-parallax-img-height: 200px; +$s-banner-parallax-text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86); +$s-banner-parallax-text-color: null; +$s-banner-parallax-bg-position: center !important; +$s-banner-parallax-h1-size: 80px; + +@mixin s-banner-parallax-row-hook {} +@mixin s-banner-parallax-height-hook {} +@mixin s-banner-parallax-hero-bg-hook {} diff --git a/theme_common/static/src/old_snippets/s_big_icons/000.scss b/theme_common/static/src/old_snippets/s_big_icons/000.scss new file mode 100644 index 0000000..b1e5fc4 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_big_icons/000.scss @@ -0,0 +1,42 @@ +.s_big_icons { + text-align: center; + @include s-big-icon-circle-height-hook; + //fix -- without this in mobile view the circles go to the top and so they hide the h2 and h3 above it. + .col-lg-12 { + float: none; + } +} + +.s_big_icons_box { + text-align: center; + width: 150px; + margin: 0 auto; + .fa { + color: #fff; + font-size: 40px; + @include s-big-icon-circle-fa-hook; + } +} + +.s_big_icons_icon { + width: $s-big-icon-circle-icon-size; + height: $s-big-icon-circle-icon-size; + text-align: center; + padding: 40px 0; + transition: all 0.3s ease-in-out; + border-radius: 80px; + margin: 0px auto; + h5 { + margin-top: 48px; + } +} + +.s_big_icons_box:hover .s_big_icons_icon { + transition: all 0.3s ease-in-out; + background-color: o-color('gamma'); +} + +.s_big_icons_box:hover .s_big_icons_content h4 { + transition: all 0.3s ease-in-out; + color: o-color('gamma'); +} diff --git a/theme_common/static/src/old_snippets/s_big_icons/000_variables.scss b/theme_common/static/src/old_snippets/s_big_icons/000_variables.scss new file mode 100644 index 0000000..828f6a4 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_big_icons/000_variables.scss @@ -0,0 +1,23 @@ +$s-big-icon-circle-icon-size: 120px; + +@mixin s-big-icon-circle-height-hook {} +@mixin s-big-icon-circle-fa-hook {} + +@mixin o-theme-chd-big-icons-classes($border, $font-color) { + .s_big_icons_box { + .s_big_icons_icon { + border: $border; + color: #fff; + .fa { + color: o-color('alpha') !important; + } + h5.o_default_snippet_text { + color: $font-color; + margin-top: 20px; + } + } + &:hover .s_big_icons_icon { + @include o-theme-chd-big-icons-styles($h5-color: o-color('alpha')); + } + } +} diff --git a/theme_common/static/src/old_snippets/s_big_image/000.scss b/theme_common/static/src/old_snippets/s_big_image/000.scss new file mode 100644 index 0000000..01244e8 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_big_image/000.scss @@ -0,0 +1,13 @@ +#wrapwrap .s_big_image { + height: 760px; + background-size: cover; +} + +#wrapwrap .s_big_image_content { + z-index: 999; + h1 { + color: white; + font-size: 60px; + + } +} diff --git a/theme_common/static/src/old_snippets/s_big_image_parallax/000.scss b/theme_common/static/src/old_snippets/s_big_image_parallax/000.scss new file mode 100644 index 0000000..f97c5c3 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_big_image_parallax/000.scss @@ -0,0 +1,12 @@ +#wrapwrap .s_big_image_parallax { + min-height: 780px; + padding-top: 80px; +} + +#wrapwrap .s_big_image_parallax_content { + z-index: 999; + h1 { + color: white; + font-size: 60px; + } +} diff --git a/theme_common/static/src/old_snippets/s_clonable_boxes/000.scss b/theme_common/static/src/old_snippets/s_clonable_boxes/000.scss new file mode 100644 index 0000000..b1dbcaf --- /dev/null +++ b/theme_common/static/src/old_snippets/s_clonable_boxes/000.scss @@ -0,0 +1,34 @@ + +#wrapwrap .s_clonable_boxes { + width: 100%; + height: auto!important; // Force height to avoid overlaps + + .row { + display: flex; + flex-flow: row wrap; + + > div { + display: flex; + flex-flow: column wrap; + justify-content: center; + text-align: center; + padding-top: $grid-gutter-width/2; + padding-bottom: $grid-gutter-width/2; + + @include media-breakpoint-down(md) { + width: 100%; + } + } + } +} + +html[data-no-flex] .s_clonable_boxes { + width: 100%; + overflow: hidden; + + .item { + height: 200px; + overflow: hidden; + text-align: center; + } +} diff --git a/theme_common/static/src/old_snippets/s_color_blocks_4/000.scss b/theme_common/static/src/old_snippets/s_color_blocks_4/000.scss new file mode 100644 index 0000000..5075141 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_color_blocks_4/000.scss @@ -0,0 +1,25 @@ +#wrapwrap .s_color_blocks_4 { + .row { + display: flex; + flex-flow: row wrap; + + // Fix for safari browser as it 'supports' flex but not with the right + // behavior + &::before, &::after { + width: 0; + } + } + [class*="col-lg-"] { + padding: 64px 20px; + } + @include media-breakpoint-down(md) { + [class*="col-lg-"] { + flex: 1 1 100%; + } + } + + img { + max-width: 100%; + height: auto; + } +} diff --git a/theme_common/static/src/old_snippets/s_color_blocks_img/000.scss b/theme_common/static/src/old_snippets/s_color_blocks_img/000.scss new file mode 100644 index 0000000..011f7e4 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_color_blocks_img/000.scss @@ -0,0 +1,13 @@ + +#wrapwrap .s_color_blocks_img_title { + margin-bottom: 0px; + h5 { + padding-top: 32px; + } +} + +#wrapwrap .s_color_blocks_img_img img { + max-width: 100%; + height: auto; + +} diff --git a/theme_common/static/src/old_snippets/s_compact_menu/000.scss b/theme_common/static/src/old_snippets/s_compact_menu/000.scss new file mode 100644 index 0000000..68eea85 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_compact_menu/000.scss @@ -0,0 +1,37 @@ +#wrapwrap .s_compact_menu { + overflow: hidden; + + .container-fluid .menu-container { + overflow: hidden; + + > div { + &.s_compact_menu_row_title { + h4 { + font-size: 20px; + } + .fa { + margin: 20px 0px; + } + } + + > .row { + min-height: 150px; + height: auto; + border-left: 3px solid gray('200'); + + > .menublock { + margin: 0 0 0 20px; + padding: 0 20px 0 0; + border-bottom: 1px solid gray('200'); + float: left; + h4 { + font-weight: bold; + } + span { + list-style: none; + } + } + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_css_slider/000.js b/theme_common/static/src/old_snippets/s_css_slider/000.js new file mode 100644 index 0000000..99d225c --- /dev/null +++ b/theme_common/static/src/old_snippets/s_css_slider/000.js @@ -0,0 +1,122 @@ +odoo.define('theme_common.s_css_slider_frontend', function (require) { + 'use strict'; + + var publicWidget = require('web.public.widget'); + + publicWidget.registry.s_css_slider = publicWidget.Widget.extend({ + selector: ".s_css_slider", + disabledInEditableMode: false, + + start: function () { + var self = this; + var $container = self.$target; + $container.find(".s_css_slider_pagination").remove(); + // create slider pagination + var sliderPagination = self.createSliderPagination($container); + self.bindEvents($container, sliderPagination); + $(window).on("resize", function () { + self.resizeImgs($container); + }).trigger("resize"); + return this._super.apply(this, arguments); + }, + + bindEvents: function ($container, sliderPagination) { + var self = this, + $next_btn = $container.find('.next'), + $prev_btn = $container.find('.prev'); + + $next_btn.on('click.s_css', function (e) { + self.nextSlide($container, sliderPagination); + }); + + $prev_btn.on('click.s_css', function (e) { + self.prevSlide($container, sliderPagination); + }); + + if ($container.hasClass("autoplay") && this.editableMode !== true) { + var interval; + var autoplay = function () { + interval = setInterval(function () { + if (!$next_btn.hasClass("inactive")) { + self.nextSlide($container, sliderPagination); + } else { + self.prevSlide($container, sliderPagination, 0); + } + }, 3000); + }; + autoplay(); + $container.hover(function () { clearInterval(interval); }); + $container.mouseleave(function () { autoplay(); }); + } + + sliderPagination.on('click.s_css', function () { + var selectedDot = $(this); + if (!selectedDot.hasClass('selected')) { + var selectedPosition = selectedDot.index(), + activePosition = $container.find('.slider .selected').index(); + if ( activePosition < selectedPosition) { + self.nextSlide($container, sliderPagination, selectedPosition); + } else { + self.prevSlide($container, sliderPagination, selectedPosition); + } + } + }); + }, + + resizeImgs: function ($container) { + var cont_h = $container.height(), + imgs = $container.find(".slide img"); + + imgs.each(function () { + var $img = $(this), + img_h = $img.height(); + if (img_h > cont_h) { + $img.css("width", "100%"); + $img.css("margin-top", (cont_h - img_h)/2); + } + }); + }, + + createSliderPagination: function ($container) { + var wrapper = $('<ul class="s_css_slider_pagination"></ul>').insertAfter($container.find('.navigation')); + $container.find('.slider .slide').each(function (index) { + var dotWrapper = (index === 0) ? $('<li class="selected"></li>') : $('<li></li>'), + dot = $('<a href="#0"></a>').appendTo(dotWrapper); + dotWrapper.appendTo(wrapper); + dot.text(index+1); + }); + return wrapper.children('li'); + }, + + nextSlide: function ($container, $pagination, $n) { + var self = this, + visibleSlide = $container.find('.slider .selected'), + navigationDot = $container.find('.s_css_slider_pagination .selected'); + + if (typeof $n === 'undefined') $n = visibleSlide.index() + 1; + visibleSlide.removeClass('selected'); + $container.find('.slider .slide').eq($n).addClass('selected').prevAll().addClass('move-left'); + navigationDot.removeClass('selected'); + $pagination.eq($n).addClass('selected'); + self.updateNavigation($container, $container.find('.slider .slide').eq($n)); + }, + + prevSlide: function ($container, $pagination, $n) { + var self = this, + visibleSlide = $container.find('.slider .selected'), + navigationDot = $container.find('.s_css_slider_pagination .selected'); + + if (typeof $n === 'undefined') $n = visibleSlide.index() - 1; + visibleSlide.removeClass('selected'); + $container.find('.slider .slide').eq($n).addClass('selected').removeClass('move-left').nextAll().removeClass('move-left'); + navigationDot.removeClass('selected'); + $pagination.eq($n).addClass('selected'); + self.updateNavigation($container, $container.find('.slider .slide').eq($n)); + }, + + updateNavigation: function ($container, $active) { + $container.find('.prev').toggleClass('inactive', $active.is(':first-child')); + $container.find('.next').toggleClass('inactive', $active.is(':last-child')); + }, + }); +}); diff --git a/theme_common/static/src/old_snippets/s_css_slider/000.scss b/theme_common/static/src/old_snippets/s_css_slider/000.scss new file mode 100644 index 0000000..3fdc00f --- /dev/null +++ b/theme_common/static/src/old_snippets/s_css_slider/000.scss @@ -0,0 +1,153 @@ + +#wrapwrap .s_css_slider { + position: relative; + min-height: 150px; + + .wrapper { + height: 100%; + position: relative; + z-index: 10; + transition: width 400ms; + /* Force Hardware Acceleration */ + transform: translateZ(0); + backface-visibility: hidden; + + @include s-css-slider-wrapper-hook; + } + + .slider{ + padding: 0; + height: 100%; + position: relative; + z-index: 10; + overflow: hidden; + @include s-css-slider-slider-hook; + } + + .slider .slide { + position: absolute; + list-style: none; + overflow: hidden; + top:0; + left:0; + margin: 0; + z-index: 10; + height: 100%; + width: 100%; + transform: translate(100%, 0); + transition: transform 300ms linear; + .info { + position: relative; + margin: 0; + + &:not([class*=bg-]) { + color : $s-css-slider-info-text-color; + background-color : $s-css-slider-info-bg-color; + } + + @include media-breakpoint-up(md) { + padding: $grid-gutter-width; + padding-top: $grid-gutter-width*0.5; + @include o-position-absolute(30%, $left: 60px); + max-width: 60%; + } + } + img { + display:block; + width:100%; + + // Fix the image size on some devices (e.g. iPhone X) + @media screen and (max-width: 400px) { + // The image height was greater than the container height + height: 100%; + + // Necessary if we don't want images of different sizes + // see resizeImgs() in s_css_slider_frontend.js + margin-top: 0 !important; + } + } + &.selected { + position:relative; + z-index:12; + transform: translate(0, 0); + } + &.move-left { + transform: translate(-100%, 0); + } + } + .navigation li { + position:absolute; + z-index:12; + top:50%; + list-style:none; + bottom:auto; + transform: translate(0, -50%); + + span { + display: block; + width: 48px; + height: 48px; + overflow: hidden; + font-size: 1.6em; + color: $s-css-slider-navigation-color; + text-shadow: $s-css-slider-navigation-text-shadow; + white-space: nowrap; + transition: e("opacity 200ms, visibility 0s"); + + @include s-css-slider-navigation-buttons-hook; + + &.inactive { + opacity:0; + visibility:hidden; + transition: e("opacity 200ms 0s, visibility 0s 200ms"); + } + &:hover { + opacity:.7; + } + } + &:first-of-type { + left:10px; + } + &:last-of-type { + right:10px; + } + + @include s-css-slider-navigation-hook; + } + + .s_css_slider_pagination { + position:absolute; + padding: 0; + z-index: 12; + bottom: 30px; + left: 50%; + right:auto; + transform: translate(-50%, 0); + + li { + display:inline-block; + float:left; + margin:0 5px; + } + li.selected a { + background:#f5f4f3; + } + a { + display:block; + height:12px; + width:12px; + border-radius:50%; + box-shadow: 0 1px 0 #333; + border:1px solid #f5f4f3; + background-color:rgba(255,255,255,0); + overflow:hidden; + text-indent:100%; + white-space:nowrap; + } + &:after { + content:""; + display:table; + clear:both; + } + } +} diff --git a/theme_common/static/src/old_snippets/s_css_slider/000_variables.scss b/theme_common/static/src/old_snippets/s_css_slider/000_variables.scss new file mode 100644 index 0000000..aa8ae79 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_css_slider/000_variables.scss @@ -0,0 +1,10 @@ +$s-css-slider-navigation-color: white; +$s-css-slider-navigation-text-shadow: 0 1px 0 #333; +$s-css-slider-info-bg-color: #fff; +$s-css-slider-info-text-color: #333; + +@mixin s-css-slider-wrapper-hook {} +@mixin s-css-slider-slider-hook {} +@mixin s-css-slider-slider-hover-hook {} +@mixin s-css-slider-navigation-hook {} +@mixin s-css-slider-navigation-buttons-hook {} diff --git a/theme_common/static/src/old_snippets/s_discount/000.scss b/theme_common/static/src/old_snippets/s_discount/000.scss new file mode 100644 index 0000000..b50b1e1 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_discount/000.scss @@ -0,0 +1,99 @@ + +#wrapwrap .s_discount_box { + background: white; + padding: 30px 0; + border-radius: $s-discount-box-border-radius; + position: relative; + box-shadow: 0px 0px 5px 0px rgba(gray('700'), 0.5); + word-wrap: break-word; + + &:before { + content: " "; + height: 20px; + width: 20px; + background: white; + border-radius: 20px; + position: absolute; + left: 50%; + top: 20px; + margin-left: -10px; + } + + @include s-discount-box-hook; +} + +#wrapwrap .s_discount_brand { + text-transform: uppercase; + letter-spacing: $s-discount-brand-letter-spacing; + padding: 10px 15px; + margin-top: 10px; + text-align: center; + min-height: 100px; + @include s-discount-brand-hook; +} + +#wrapwrap .s_discount_amount { + min-height: 100px; + position: relative; + font-size: $s-discount-amount-size; + text-align: center; + font-weight: bold; + padding: 20px 15px; + text-shadow: 1px 1px 2px 0px white; + color: white; + + &:after { + content: " "; + border-right: 20px solid rgba(0, 0, 0, 0); + border-left: 20px solid rgba(0, 0, 0, 0); + position: absolute; + bottom: -20px; + left: 20%; + } + +} + +#wrapwrap .s_discount_type { + font-size: 20px; + + letter-spacing: 1px; + text-transform: uppercase; +} + +#wrapwrap .s_discount_descr { + text-align: center; + font-size: 13px; + color: gray('800'); + margin-top: 10px; + padding: 20px 25px; + @include s-discount-descr-hook; +} + +#wrapwrap .s_discount_ends { + padding: 0 25px; + margin-bottom: 10px; +} + +#wrapwrap .s_discount_coupon { + min-height: 50px; + text-align: center; + text-transform: uppercase; + font-weight: bold; + font-size: 18px; + padding: 20px 15px; + + a { + color: $s-discount-coupon-color; + } +} + +#wrapwrap .s_discount_code { + letter-spacing: 1px; + border-radius: 4px; + margin-top: 10px; + background: #f0f0f0; + color: gray('800'); + .code { + padding: 10px 15px; + } +} diff --git a/theme_common/static/src/old_snippets/s_discount/000_variables.scss b/theme_common/static/src/old_snippets/s_discount/000_variables.scss new file mode 100644 index 0000000..02c65f2 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_discount/000_variables.scss @@ -0,0 +1,8 @@ +$s-discount-box-border-radius: 20px; +$s-discount-brand-letter-spacing: 3px; +$s-discount-coupon-color: white; +$s-discount-amount-size: 80px; + +@mixin s-discount-brand-hook {} +@mixin s-discount-descr-hook {} +@mixin s-discount-box-hook {} diff --git a/theme_common/static/src/old_snippets/s_event_list/000.scss b/theme_common/static/src/old_snippets/s_event_list/000.scss new file mode 100644 index 0000000..33b47b2 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_event_list/000.scss @@ -0,0 +1,188 @@ + +#wrapwrap .s_event_list_item { + @include clearfix; + box-shadow: 0px 0px 5px rgba(black, 0.25); + margin: 0px 0px 20px; + + > time { + display: block; + padding: 5px; + text-align: center; + text-transform: uppercase; + div { + display: none; + } + .s_event_list_day, .s_event_list_month, .s_event_list_time { + display: block; + line-height: 1; + } + .s_event_list_day { + font-size: 50px; + padding-top: 10px; + } + .s_event_list_month { + font-size: 30px; + } + .s_event_list_time { + font-size: 16px; + font-weight: 200; + padding-bottom: 10px; + } + } + > .s_event_list_icon { + text-align: center; + } + + > .s_event_list_info, + > .s_event_list_social { + > ul { + list-style: none; + margin: 0; + padding: 0; + text-align: center; + > li { + float: left; + color: gray('800'); + font-size: 11px; + font-weight: 300; + + &:hover { + color: gray('800'); + background-color: gray('200'); + } + + > a { + display: block; + width: 100%; + height: 100%; + } + } + } + } + > .s_event_list_info { + padding-top: 5px; + text-align: center; + > .s_event_list_title { + margin: 5px 0 0; + @include o-text-overflow; + } + > .s_event_list_desc { + font-size: 14px; + font-weight: 300; + margin: 8px 0 0; + word-wrap: break-word; + overflow: hidden; + text-overflow: ellipsis; + max-height: 2.2em; + line-height: 1.1em; + .fa { + color: white; + } + } + + > ul { + margin-top: 10px; + > li { + width: 50%; + > a { + display: block; + width: 100%; + color: gray('800'); + text-decoration: none; + } + } + } + } + > .s_event_list_social > ul { + > li { + width: 33.3333%; + padding: 0px; + > a { + padding: 9px 0px 3px; + } + + &:hover > a { + color: white!important; + } + } + } + + .s_event_list_facebook a { + color: $color-facebook!important; + } + .s_event_list_twitter a { + color: $color-twitter!important; + } + .s_event_list_google_plus a { + color: $color-google!important; + } + .s_event_list_facebook:hover a { + background-color: $color-facebook !important; + } + .s_event_list_twitter:hover a { + background-color: $color-twitter !important; + } + .s_event_list_google_plus:hover a { + background-color: $color-google !important; + } +} + +@include media-breakpoint-up(md) { + #wrapwrap .s_event_list_item { + display: flex; + position: relative; + > .s_event_list_icon { + width: $s-event-list-main-size; + height: $s-event-list-main-size; + float: left; + text-align: center; + .fa { + line-height: $s-event-list-main-size; + } + } + > img { + height: $s-event-list-main-size; + } + > time { + max-width: $s-event-list-main-size; + } + > time, > img { + flex: 1 1 auto; + min-height: $s-event-list-main-size; + min-width: $s-event-list-main-size; + margin: 0px; + padding: 0px; + float: left; + } + > .s_event_list_info { + flex: 1 1 auto; + position: relative; + overflow: hidden; + min-height: $s-event-list-main-size; + padding-right: 40px; + text-align: left; + > .s_event_list_title, .s_event_list_desc { + padding: 0px 10px; + } + > ul { + @include o-position-absolute($left: 0, $bottom: 0, $right: 40px); + } + } + > .s_event_list_social { + flex: 1 1 auto; + @include o-position-absolute($top: 0, $right: 0, $bottom: 0); + width: 40px; + > ul { + height: 100%; + border-left: 1px solid lighten(gray('200'), 10%); + > li { + width: 100%; + height: 33.333%; + > a { + padding: 9px 0px; + } + } + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_event_list/000_variables.scss b/theme_common/static/src/old_snippets/s_event_list/000_variables.scss new file mode 100644 index 0000000..b60bbd1 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_event_list/000_variables.scss @@ -0,0 +1,4 @@ +$color-facebook: #4b6ea8; +$color-twitter: #4fd5f8; +$color-google: #dd4b39; +$s-event-list-main-size: 120px; diff --git a/theme_common/static/src/old_snippets/s_event_slide/000.scss b/theme_common/static/src/old_snippets/s_event_slide/000.scss new file mode 100644 index 0000000..ee803f6 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_event_slide/000.scss @@ -0,0 +1,51 @@ +#wrapwrap .s_event_slide { + overflow: hidden; + .row { + text-align: center; + overflow: hidden; + box-shadow: inset 0px -7px 9px -6px rgba(0,0,0,0.45); + .s_event_slide_title{ + float: left; + @media screen and (max-width: 640px) { // FIXME + padding-bottom: 0; + margin-bottom: 0; + } + } + .s_event_slide_list { + float: right; + border-left: 4px solid o-color('epsilon'); + .header-border { + width: 20%; + height: 5px; + margin-bottom: 15px; + border-radius: 10px; + background-color: o-color('epsilon'); + } + > .row > div { + border-right: 1px solid gray('200'); + border-bottom: 1px solid gray('200'); + text-align: left; + h4 { + text-align: center; + } + } + .event { + height: 400px; + overflow: hidden; + overflow-y: scroll; + padding-top: 40px; + @include media-breakpoint-down(sm) { + overflow: visible; + height: auto; + } + img { + width: 100%; + } + } + } + } + .fa { + display: inline-block; + margin-top: 50px; + } +} diff --git a/theme_common/static/src/old_snippets/s_features_carousel/000.scss b/theme_common/static/src/old_snippets/s_features_carousel/000.scss new file mode 100644 index 0000000..6ed4489 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_features_carousel/000.scss @@ -0,0 +1,69 @@ + +#wrapwrap .s_features_carousel { + //height: 650px; + @include s-features-carousel-inner-hook; + [class*="col-lg-"] img { + max-height: 400px; + } + + .circle { + position: relative; + height: 250px; + width: 250px; + @media only screen and (max-width : 360px) { // FIXME + width: 165px; + height: 165px; + } + } + .mask { + display: inline-flex; + flex-direction: column; + justify-content: center; + width: 250px; + height: 250px; + padding: 40px; + border-radius: 50%; + font-size: 20px; + line-height: 20px; + text-align: center; + text-transform: uppercase; + @include s-features-carousel-mask-hook; + @media only screen and (max-width : 360px) { // FIXME + font-size: 15px; + line-height: 15px; + padding: 15px; + height: auto; + } + } + + h2 { + border-bottom: { + width: $s-features-carousel-border-width; + style: $s-features-carousel-border-style; + color: if(s-features-carousel-border-color != null, $s-features-carousel-border-color, gray('600')); + } + text-align: center; + padding-bottom: 30px; + } + .carousel-indicators { + border-top: 1px dotted gray('600'); + padding-top: 32px; + visibility: $s-features-carousel-indicators-visible; + li { + border: 1px solid gray('200'); + } + } + .carousel-indicators .active { + border: 1px solid o-color('gamma') !important; + } + .carousel-control-prev, + .carousel-control-next { + opacity: 1; + cursor: pointer; + } + @include media-breakpoint-down(sm) { + [class*="col-lg-"] > p { + padding: 0 30px; + } + } +} diff --git a/theme_common/static/src/old_snippets/s_features_carousel/000_variables.scss b/theme_common/static/src/old_snippets/s_features_carousel/000_variables.scss new file mode 100644 index 0000000..44c3246 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_features_carousel/000_variables.scss @@ -0,0 +1,7 @@ +$s-features-carousel-border-width: 1px; +$s-features-carousel-border-style: dotted; +$s-features-carousel-border-color: null; // (default to a BS color) +$s-features-carousel-indicators-visible: hidden; + +@mixin s-features-carousel-inner-hook {} +@mixin s-features-carousel-mask-hook {} diff --git a/theme_common/static/src/old_snippets/s_full_menu/000.scss b/theme_common/static/src/old_snippets/s_full_menu/000.scss new file mode 100644 index 0000000..ed86269 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_full_menu/000.scss @@ -0,0 +1,46 @@ +#wrapwrap .s_full_menu { + overflow: hidden; + .container-fluid { + h2 { + text-align: center; + } + h4 { + font-size: 20px; + } + .menu-container > .s_full_menu_content { + border-left: 3px solid gray('200'); + .row { + .s_full_menu_content_description { + border-bottom: 1px solid gray('200'); + padding-bottom: 15px; + line-height: 1; + span { + text-transform: uppercase; + list-style: none; + } + @media screen and (max-width: 1024px) { // FIXME + font-size: 12px; + } + @media screen and (max-width: 360px) { // FIXME + top: 0px; + } + } + img { + max-width: 200px; + } + } + } + } + .price { + font-size: 2vw; + @media screen and (max-width: 360px) { // FIXME + font-size: 6.5vw; + } + } + .slash { + font-size: 2vw; + @media screen and (max-width: 360px) { // FIXME + font-size: 6.5vw; + } + } +} diff --git a/theme_common/static/src/old_snippets/s_header_text_big_picture/000.scss b/theme_common/static/src/old_snippets/s_header_text_big_picture/000.scss new file mode 100644 index 0000000..bdd5b35 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_header_text_big_picture/000.scss @@ -0,0 +1,11 @@ +#wrapwrap .s_header_text_big_picture { + .s_header_text_big_picture_picturecol { + padding: 0; + img { + width: 100%; + } + } + [class*="col-lg-"] p { + padding: 0 25px; + } +} diff --git a/theme_common/static/src/old_snippets/s_icon_box/000.scss b/theme_common/static/src/old_snippets/s_icon_box/000.scss new file mode 100644 index 0000000..2ddec1f --- /dev/null +++ b/theme_common/static/src/old_snippets/s_icon_box/000.scss @@ -0,0 +1,12 @@ +#wrapwrap .s_icon_box { + .fa { + margin: 10px 20px; + &:hover { + transition: all 0.3s ease-in-out; + color: o-color('gamma'); + } + } + .icon_box_content { + overflow: hidden; + } +} diff --git a/theme_common/static/src/old_snippets/s_images_carousel/000.scss b/theme_common/static/src/old_snippets/s_images_carousel/000.scss new file mode 100644 index 0000000..5007997 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_images_carousel/000.scss @@ -0,0 +1,26 @@ +.s_images_carousel { + height: 400px; + &.carousel { + @include media-breakpoint-down(md) { + height: auto !important; + } + .carousel-inner, + .carousel-item { + height: 100%; + } + } + @include media-breakpoint-up(lg) { + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + } + } + .carousel-caption { + background-color: #fff; + color: $body-color; + padding: 5px 0; + bottom: 55px; + } +} diff --git a/theme_common/static/src/old_snippets/s_images_row/000.scss b/theme_common/static/src/old_snippets/s_images_row/000.scss new file mode 100644 index 0000000..a059e1d --- /dev/null +++ b/theme_common/static/src/old_snippets/s_images_row/000.scss @@ -0,0 +1,15 @@ +.s_images_row { + .s_images_row_overlay { + min-height: 250px; + &:after { + content: ''; + display: block; + } + } + .s_images_row_body { + // @include o-position-absolute($spacer,$spacer,$spacer,$spacer); + background-color: #fff; + padding: $spacer/2 $spacer; + display: inline-block; + } +} diff --git a/theme_common/static/src/old_snippets/s_menu_three_columns/000.scss b/theme_common/static/src/old_snippets/s_menu_three_columns/000.scss new file mode 100644 index 0000000..38568fe --- /dev/null +++ b/theme_common/static/src/old_snippets/s_menu_three_columns/000.scss @@ -0,0 +1,39 @@ +#wrapwrap .s_menu_three_columns { + .three-column { + width: 100%; + position: relative; + z-index: 800; + .big-menu { + height: 150px; + position: relative; + padding: 0; + @include media-breakpoint-down(sm) { + height: 100px; + } + @media only screen and (max-width : 360px) { // FIXME + height: 80px; + } + a { + text-decoration: none; + display: block; + &:hover, &:focus { + text-decoration: none; + background-color: $white; + transition: all 200ms ease; + } + } + h2 { + line-height: 150px; + margin-top: 0; + @include media-breakpoint-down(sm) { + line-height: 100px; + line-height: 100px; + } + @media only screen and (max-width : 360px) { // FIXME + height: 80px; + line-height: 80px; + } + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_mini_nav_bar/000.js b/theme_common/static/src/old_snippets/s_mini_nav_bar/000.js new file mode 100644 index 0000000..e9cedec --- /dev/null +++ b/theme_common/static/src/old_snippets/s_mini_nav_bar/000.js @@ -0,0 +1,31 @@ +odoo.define('theme_common.s_mini_nav_bar', function (require) { +'use strict'; + +const dom = require('web.dom'); +var publicWidget = require('web.public.widget'); + +publicWidget.registry.miniNavbarScroll = publicWidget.Widget.extend({ + selector: '.s_mini_nav_bar a[href*="#"]:not([href="#"])', + events: { + 'click': '_onClick', + }, + + //---------------------------------------------------------------------- + // Handlers + //---------------------------------------------------------------------- + + /** + * Called on click on the mini navbar link -> scroll to the section. + * + * @private + */ + _onClick: function (ev) { + var index = $(this).parent().index(); + var target = $('.o_scroll_nav').get(index); + if (target) { + ev.preventDefault(); + dom.scrollTo(target); + } + }, +}); +}); diff --git a/theme_common/static/src/old_snippets/s_mini_nav_bar/000.scss b/theme_common/static/src/old_snippets/s_mini_nav_bar/000.scss new file mode 100644 index 0000000..06893cc --- /dev/null +++ b/theme_common/static/src/old_snippets/s_mini_nav_bar/000.scss @@ -0,0 +1,27 @@ + +#wrapwrap .s_mini_nav_bar_nav { + position: relative; + top: -50px; + height: 82px; + padding: 0px; + .btn { + font-family: $font-family-sans-serif; + text-align: center; + width: 82px; + height: 82px; + line-height: 1.33; + border-radius: 48px; + border: 0px; + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); + } +} + +#wrapwrap .s_mini_nav_bar_content h1 { + color: white; + font-size: 60px; +} + +#wrapwrap .s_mini_nav_bar_item { + margin: 0 20px; + min-height: 100px; +} diff --git a/theme_common/static/src/old_snippets/s_news_carousel/000.scss b/theme_common/static/src/old_snippets/s_news_carousel/000.scss new file mode 100644 index 0000000..a06afae --- /dev/null +++ b/theme_common/static/src/old_snippets/s_news_carousel/000.scss @@ -0,0 +1,27 @@ +.s_news_carousel { + .carousel-inner { + width: 80%; + margin: 0 auto; + } + + .s_news_carousel_date { + display: flex; + flex-direction: column; + justify-content: center; + padding: $grid-gutter-width; + } + + .s_news_carousel_day { + line-height: 1; + font-weight: 300; + } + + .s_news_carousel_month { + margin-bottom: 10px; + text-transform: uppercase; + } + .s_news_carousel_content { + padding: $grid-gutter-width; + background-color: #fff; + } +} diff --git a/theme_common/static/src/old_snippets/s_pricing/000.scss b/theme_common/static/src/old_snippets/s_pricing/000.scss new file mode 100644 index 0000000..f475e53 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_pricing/000.scss @@ -0,0 +1,31 @@ +#wrapwrap .s_pricing strong { + font-weight: 700; + color: gray('800'); +} + +#wrapwrap .s_pricing_footer { + height: 32px; +} +#wrapwrap .s_pricing_box { + box-shadow: 0px 2px 5px 0px rgba(black, 0.1); + border: 1px solid lighten(gray('200'), 10%); +} + +#wrapwrap .s_pricing_header { + padding: 24px 12px; + min-height: 180px; + + h2 { + font-weight: 700; + } + h3 { + font-weight: 500; + } +} + +#wrapwrap .s_pricing_features { + padding: 15px 10px 15px 10px; + text-align: center; + line-height: 20px; + font-size: 14px; +} diff --git a/theme_common/static/src/old_snippets/s_products_carousel/000.scss b/theme_common/static/src/old_snippets/s_products_carousel/000.scss new file mode 100644 index 0000000..fc90b51 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_products_carousel/000.scss @@ -0,0 +1,91 @@ + +#wrapwrap .s_products_carousel { + + .carousel-inner { + height: $s-products-carousel-carousel-height; + .carousel-item { + height: 100% + } + } + + .carousel-indicators { + visibility: $s-products-carousel-indicators-visible; + bottom: $s-products-carousel-indicators-position; + } + + .carousel-control-prev, + .carousel-control-next { + cursor: pointer; + opacity: 1; + width: 70px; + } + + .carousel-control-prev-icon, + .carousel-control-next-icon { + width: 30px; + height: 30px; + } + + .row { + margin: 0; + } + + .container-fluid { + padding: 0; + overflow: hidden; + + .product-widget { + position: absolute; + bottom: 0; + text-align: center; + + @media screen and (max-width: 360px) { + height: auto; + } + } + + .widget{ + display: inline-block; + overflow: hidden; + + @media screen and (max-width: 360px) { + transform: none; + padding-bottom: 10px; + } + + img { + max-height: 120px; + &:hover { + opacity: 0.7; + } + } + } + + .hero-bg { + padding: $s-products-carousel-hero-bg-padding; + color: o-color('alpha'); + text-align: center; + + @include media-breakpoint-down(sm) { + padding-top: 20px; + text-align: center; + } + + @media screen and (max-width: 360px) { + padding: 0; + } + + h2 { + font-size: 85px; + text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86); + + @include media-breakpoint-down(sm) { + font-size: 65px; + } + @media screen and (max-width: 360px) { + font-size: 35px; + } + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_products_carousel/000_variables.scss b/theme_common/static/src/old_snippets/s_products_carousel/000_variables.scss new file mode 100644 index 0000000..7d0238f --- /dev/null +++ b/theme_common/static/src/old_snippets/s_products_carousel/000_variables.scss @@ -0,0 +1,6 @@ +$s-products-carousel-carousel-height: 500px; +$s-products-carousel-indicators-position: 0; +$s-products-carousel-indicators-visible: hidden; +$s-products-carousel-hero-bg-padding: 60px 90px 0 90px; + +@mixin s-products-carousel-hook {} diff --git a/theme_common/static/src/old_snippets/s_profile/000.scss b/theme_common/static/src/old_snippets/s_profile/000.scss new file mode 100644 index 0000000..33b358e --- /dev/null +++ b/theme_common/static/src/old_snippets/s_profile/000.scss @@ -0,0 +1,34 @@ +#wrapwrap .s_profile_box { + min-height: 450px; + color: gray('800'); + + @include media-breakpoint-down(md) { + text-align: center; + } + + h2 { + color: gray('800'); + } + + span.tags + { + background: gray('700'); + border-radius: 2px; + color: white; + padding: 2px 4px; + } + +} + +#wrapwrap .s_profile_box_divider { + border-top: 1px solid lighten(gray('600'), 15%); +} + +#wrapwrap .s_profile_box_emphasis:hover { + transition: all 0.3s ease-in-out; + background-color: lighten(gray('200'), 10%); +} + +#wrapwrap .s_profile .card p, #wrapwrap .s_profile .card h2 { + color: gray('800'); +} diff --git a/theme_common/static/src/old_snippets/s_progress/000.scss b/theme_common/static/src/old_snippets/s_progress/000.scss new file mode 100644 index 0000000..25dbb88 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_progress/000.scss @@ -0,0 +1,73 @@ +#wrapwrap .s_progress { + > div > .row > div { + border-left-width: 1px; + border-left-style: solid; + @include media-breakpoint-down(sm) { + border-bottom-width: 1px; + border-bottom-style: solid; + border-left-width: 0; + } + + &:first-child { + border-left-width: 0; + } + + &:last-child .process { + color: rgba(0, 0, 0, 0); + } + } + + .fa { + font-size: 60px; + } + .icon-container { + max-width: 250px; + } + .progress-iconset { + padding: 10px; + text-align: center; + min-height: 230px; + @include media-breakpoint-down(sm) { + min-height: 50px; + } + + &:after, &:before { + content: " "; + display: block; + width: 50%; + height: 50px; + border-right: 1px solid silver; + margin: 10px 0; + } + &:before { + display: none; + } + } + .progress-content ~ .progress-iconset { + &:after { + display: none; + } + &:before { + display: block; + } + } + .process { + font-size: 25px; + height: 25px; + text-align: right; + width: 100%; + @include media-breakpoint-down(sm) { + display: none; + } + } + .progress-content { + padding: 10px 25px; + min-height: 230px; + @include media-breakpoint-down(sm) { + min-height: 50px; + } + h1 { + margin-top: 0; + } + } +} diff --git a/theme_common/static/src/old_snippets/s_separator_nav/000.scss b/theme_common/static/src/old_snippets/s_separator_nav/000.scss new file mode 100644 index 0000000..66e8559 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_separator_nav/000.scss @@ -0,0 +1,24 @@ + +#wrapwrap .s_separator_nav { + position: relative; + top: -50px; + height: 82px; + padding: 0px; + .btn { + font-family: $font-family-sans-serif; + text-align: center; + width: 82px; + height: 82px; + padding-top: 24px; + font-size: 26px; + line-height: 1.33; + border-radius: 48px; + border: 0px; + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); + } +} + +#wrapwrap .s_separator_nav_item { + margin: 0 20px; + min-height: 100px; +} diff --git a/theme_common/static/src/old_snippets/s_showcase_image/000.scss b/theme_common/static/src/old_snippets/s_showcase_image/000.scss new file mode 100644 index 0000000..0cf49dd --- /dev/null +++ b/theme_common/static/src/old_snippets/s_showcase_image/000.scss @@ -0,0 +1,106 @@ + +#wrapwrap .s_showcase_image { + height: auto; + text-align: left; + .info { + margin-bottom: 1.5em; + } + > .row { + height: 100%; + } + figure { + background-size : cover; + position : relative; + height : 200px; + + // Layout Options + // ======================= + &.tl figcaption { + top : 0; + left : 0; + bottom : auto; + right : auto; + margin-left : 14px; + text-align: right; + } + &.tr figcaption { + top : 0; + left : auto; + bottom : auto; + right : 0; + } + &.bl figcaption { + top : auto; + left : 0; + bottom : 0; + margin-left : 14px; + right : auto; + text-align: right; + } + } + figcaption { + position : absolute; + bottom : 0; + width : 100%; + text-shadow : $s-showcase-image-caption-text-shadow; + font-size : $s-showcase-image-caption-font-size-mobile; + padding : $s-showcase-image-caption-padding; + + &:not([class*=bg-]) { + color : $s-showcase-image-caption-color; + background : $s-showcase-image-caption-bg; + } + + h6 { + margin-top: 0; + } + } + + @include media-breakpoint-up(lg) { + height: 350px; + .info { + height: 100%; + margin-bottom: 0; + display: flex; + flex-flow: column nowrap; + justify-content: center; + } + figure { + height: 100%; + } + figcaption { + position : absolute; + bottom : 0; + right : 0; + width : 50%; + font-size : $s-showcase-image-caption-font-size-desktop; + padding : $s-showcase-image-caption-padding; + } + } + + &.s_right { + text-align: right; + figure { + float: right; + + // Layout Options + // ======================= + &.tl figcaption { + margin-left: 0; + } + &.tr figcaption { + margin-right : 14px; + } + &.bl figcaption { + margin-left: 0; + } + } + + @include media-breakpoint-up(lg) { + figcaption { + margin-right : 14px; + text-align : left; + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_showcase_image/000_variables.scss b/theme_common/static/src/old_snippets/s_showcase_image/000_variables.scss new file mode 100644 index 0000000..46eb944 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_showcase_image/000_variables.scss @@ -0,0 +1,6 @@ +$s-showcase-image-caption-bg : white; +$s-showcase-image-caption-color : #333; +$s-showcase-image-caption-padding : 1em; +$s-showcase-image-caption-font-size-mobile : 1em; +$s-showcase-image-caption-font-size-desktop : .8em; +$s-showcase-image-caption-text-shadow : none; diff --git a/theme_common/static/src/old_snippets/s_showcase_slider/000.js b/theme_common/static/src/old_snippets/s_showcase_slider/000.js new file mode 100644 index 0000000..cbdb73a --- /dev/null +++ b/theme_common/static/src/old_snippets/s_showcase_slider/000.js @@ -0,0 +1,132 @@ +odoo.define("theme_common.s_showcase_slider_frontend", function (require) { + "use strict"; + + const dom = require('web.dom'); + var publicWidget = require('web.public.widget'); + + publicWidget.registry.s_showcase_slider = publicWidget.Widget.extend({ + selector: ".s_showcase_slider", + + start: function () { + _.defer(this.bindEvents.bind(this)); // FIXME delayed to counter a web_editor bug which off all click event + this.createPagination(); + return this._super.apply(this, arguments); + }, + + destroy: function () { + this._super.apply(this, arguments); + _.defer(this.unbindEvents.bind(this)); // FIXME delayed to counter a web_editor bug which off all click event + this.destroyPagination(); + this.$target.removeClass("active"); + }, + + bindEvents: function () { + // Enlarge image on click if not already enlarged + this.$target.on("click.s_showcase_slider", ".s_ss_slider", (function (e) { + if (this.$target.hasClass("active")) return; + + this.$target + .addClass("active") + .one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", (function () { + dom.scrollTo(this.$target[0], { + duration: 200, + extraOffset: 70, + }); + this.$target.trigger("transitionIsFinished"); + }).bind(this)); + }).bind(this)); + + // Close the enlarged image on close icon click + this.$target.on("click.s_showcase_slider", ".s_ss_close", (function (e) { + this.$target.removeClass("active"); + }).bind(this)); + + // Handle click navigation + this.$target.on("click.s_showcase_slider", ".s_ss_prev", this.prevSlide.bind(this)); + this.$target.on("click.s_showcase_slider", ".s_ss_next", this.nextSlide.bind(this)); + this.$target.on("click.s_showcase_slider", ".s_ss_slider_pagination > li > a", (function (e) { + e.preventDefault(); + var $selectedDot = $(e.currentTarget).parent(); + if ($selectedDot.hasClass("selected")) return; + this.changeSlide($selectedDot.index()); + }).bind(this)); + + // Keyboard slider navigation + $(document).on("keyup.s_showcase_slider", (function (e) { + if (!this.$target.hasClass("active")) return; + + switch (e.which) { + case $.ui.keyCode.LEFT: + this.prevSlide(); + break; + case $.ui.keyCode.RIGHT: + this.nextSlide(); + break; + case $.ui.keyCode.ESCAPE: + this.$target.removeClass("active"); + break; + } + }).bind(this)); + }, + + unbindEvents: function () { + this.$target.off(".s_showcase_slider"); + $(document).off(".s_showcase_slider"); + }, + + createPagination: function () { // FIXME pagination should be saved with editor but keep this for compatibility + this.$target.find(".s_ss_slider_pagination").remove(); // Remove saved-with-editor pagination + + this.$pagination = $("<ul/>", {class: "s_ss_slider_pagination"}); + this.$pagination.insertAfter(this.$target.find(".s_ss_slider_navigation")); + + var nbSlides = this.$target.find(".s_ss_slider").children().length; + for (var i = 0 ; i < nbSlides ; i++) { + this.$pagination.append("<li><a href=\"#\"></a></li>"); + } + + this.$pagination.children().eq(this.getCurrentIndex()).addClass("selected"); + }, + + destroyPagination: function () { + if (this.$pagination) { + this.$pagination.remove(); + this.$pagination = null; + } + }, + + prevSlide: function () { + var nbSlides = this.$target.find(".s_ss_slider").children().length; + var currentIndex = this.getCurrentIndex(); + this.changeSlide(currentIndex > 0 ? (currentIndex - 1) : (nbSlides - 1)); + }, + + nextSlide: function () { + var nbSlides = this.$target.find(".s_ss_slider").children().length; + var currentIndex = this.getCurrentIndex(); + this.changeSlide((currentIndex + 1) % nbSlides); + }, + + getCurrentIndex: function () { + return this.$target.find(".s_ss_slider > .selected").index(); + }, + + changeSlide: function (n) { + var $slides = this.$target.find(".s_ss_slider > li").removeClass("selected"); + this.$target.find(".s_ss_slider_pagination > li").removeClass("selected"); + + var $slide = $slides.eq(n).addClass("selected"); + $slides.removeClass("move-left"); + $slide.prevAll().addClass("move-left"); + + this.$pagination.children().eq(n).addClass("selected"); + this.updateNavigation(); + }, + + updateNavigation: function () { + var $active = this.$target.find(".s_ss_slider > .selected"); + this.$target.find(".s_ss_prev").toggleClass("inactive", $active.is(":first-child")); + this.$target.find(".s_ss_next").toggleClass("inactive", $active.is(":last-child")); + }, + }); +}); diff --git a/theme_common/static/src/old_snippets/s_showcase_slider/000.scss b/theme_common/static/src/old_snippets/s_showcase_slider/000.scss new file mode 100644 index 0000000..62a0cdb --- /dev/null +++ b/theme_common/static/src/old_snippets/s_showcase_slider/000.scss @@ -0,0 +1,241 @@ + +#wrapwrap .s_showcase_slider { + position: relative; + + .s_ss_slider_wrapper { + position: relative; + z-index: 10; + transition: width 400ms; + /* Force Hardware Acceleration */ + transform: translateZ(0); + backface-visibility: hidden; + + @include s-showcase-slider-wrapper-hook; + + .s_ss_close { + display: none; + @include o-position-absolute(30px, 30px); + z-index: 12; + width: 48px; + height: 48px; + overflow: hidden; + white-space: nowrap; + visibility: hidden; + opacity: 0; + font-size: 1.6em; + text-align: right; + color: $s-ss-slider-navigation-color; + text-shadow: $s-ss-slider-navigation-text-shadow; + transition: transform 0.3s 0s, visibility 0s 0.4s; + + &:hover { + transform: scale(1.2); + } + + @include s-showcase-slider-close-hook; + } + + ul { + margin: 0; + } + } + + .s_ss_slider { + padding: 0; + position: relative; + z-index: 10; + overflow: hidden; + &:before { /* never visible - this is used by javascript to check the current window size */ + content: 'mobile'; + display: none; + } + @include s-showcase-slider-slider-hook; + + li { + @include o-position-absolute($top: 0, $left: 0); + list-style: none; + z-index: 10; + width: 100%; + height: 100%; + transform: translate(100%, 0); + transition: transform 300ms linear; + img { + display:block; + width:100%; + } + &.selected { + position:relative; + z-index:12; + transform: translate(0, 0); + } + &.move-left { + transform: translate(-100%, 0); + } + } + } + + .s_ss_slider_navigation li { + @include o-position-absolute($top: 50%); + z-index:12; + list-style:none; + transform: translate(0, -50%); + + span { + display: block; + width: 48px; + height: 48px; + overflow: hidden; + font-size: 1.6em; + color: $s-ss-slider-navigation-color; + text-shadow: $s-ss-slider-navigation-text-shadow; + white-space: nowrap; + transition: e("opacity 200ms, visibility 0s"); + + @include s-showcase-slider-navigation-buttons-hook; + + &.inactive { + opacity: 0; + visibility: hidden; + transition: e("opacity 200ms 0s, visibility 0s 200ms"); + } + &:hover { + opacity: 0.7; + } + } + &:first-of-type { + left: 10px; + } + &:last-of-type { + right: 10px; + } + + @include s-showcase-slider-navigation-hook; + } + + .s_ss_slider_pagination { + @include o-position-absolute($left: 50%, $bottom: 30px); + z-index: 12; + transform: translate(-50%, 0); + visibility: hidden; + li { + display: inline-block; + float: left; + margin: 0 5px; + } + li.selected a { + background: #f5f4f3; + } + a { + display: block; + height: 12px; + width: 12px; + border-radius: 50%; + box-shadow: 0 1px 0 #333; + border: 1px solid #f5f4f3; + background-color: rgba(255,255,255,0); + overflow: hidden; + text-indent: 100%; + white-space: nowrap; + } + &:after { + content: ""; + display: table; + clear: both; + } + } + + .s_ss_item_info { + padding: 50px 5%; + + @include s-showcase-slider-info-hook; + } + + // ================ READABLE + &.readable { + font-size: 100%; + .s_ss_item_info { + padding: 0 20px; + } + } + + // ================ SLIDER ACTIVE + &.active .s_ss_slider_wrapper .s_ss_close { + visibility: visible; + opacity: 1; + transition: transform 0.3s 0s, visibility 0s 0s, opacity .4s .4s; + } +} + +@include media-breakpoint-up(lg) { + #wrapwrap .s_showcase_slider { + .s_ss_slider { + cursor: pointer; + &:before { content: 'desktop'; } + &:after { + content: ''; + display: block; + @include o-position-absolute($top: 0, $left: 0); + width: 100%; + height: 100%; + pointer-events: none; + background: rgba(255, 255, 255, 0.4); + background-size: 48px; + opacity: 0; + z-index: 14; + transition: opacity 200ms; + } + &:hover::after { + opacity: 1; + } + @include s-showcase-slider-slider-hover-hook; + } + + .s_ss_item_info { + @include o-position-absolute(0, 0); + width: 50%; + padding: 60px 60px 0; + margin: 0; + } + + .s_ss_slider_wrapper { + width: 50%; + .s_ss_close { + display: block; + } + } + .s_ss_slider_navigation li, + .s_ss_slider_pagination { + opacity: 0; + visibility: hidden; + transition: opacity 0.4s 0s, visibility 0s .4s; + } + + .s_ss_slider_navigation li { + &:first-child { + left: 30px; + } + li:last-child { + right: 30px; + } + } + // ================ SLIDER ACTIVE + &.active { + .s_ss_slider { + cursor: auto; + &:after { + display: none; + } + } + .s_ss_slider_wrapper { + width: 100%; + z-index: 10; + } + .s_ss_slider_navigation li, + .s_ss_slider_pagination { + opacity: 1; + visibility: visible; + transition: opacity 0.4s .4s, visibility 0s .4s; + } + } + } +} diff --git a/theme_common/static/src/old_snippets/s_showcase_slider/000_variables.scss b/theme_common/static/src/old_snippets/s_showcase_slider/000_variables.scss new file mode 100644 index 0000000..a70b265 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_showcase_slider/000_variables.scss @@ -0,0 +1,10 @@ +$s-ss-slider-navigation-color : white; +$s-ss-slider-navigation-text-shadow : 0 1px 0 #333; + +@mixin s-showcase-slider-wrapper-hook {} +@mixin s-showcase-slider-slider-hook {} +@mixin s-showcase-slider-slider-hover-hook {} +@mixin s-showcase-slider-navigation-hook {} +@mixin s-showcase-slider-navigation-buttons-hook {} +@mixin s-showcase-slider-close-hook {} +@mixin s-showcase-slider-info-hook {} diff --git a/theme_common/static/src/old_snippets/s_team_profiles/000.scss b/theme_common/static/src/old_snippets/s_team_profiles/000.scss new file mode 100644 index 0000000..7e78c16 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_team_profiles/000.scss @@ -0,0 +1,5 @@ +.s_team_profiles { + [class*="col-"] { + color: initial; + } +} diff --git a/theme_common/static/src/old_snippets/s_text_picture_text/000.scss b/theme_common/static/src/old_snippets/s_text_picture_text/000.scss new file mode 100644 index 0000000..7eb09a5 --- /dev/null +++ b/theme_common/static/src/old_snippets/s_text_picture_text/000.scss @@ -0,0 +1,10 @@ +#wrapwrap .s_text_picture_text { + h3 { + padding-bottom: 30px; + } + + .row div:nth-child(2) img { + margin-bottom: 20px; + width: 100%; + } +} diff --git a/theme_common/static/src/old_snippets/s_two_columns/000.scss b/theme_common/static/src/old_snippets/s_two_columns/000.scss new file mode 100644 index 0000000..169e2ff --- /dev/null +++ b/theme_common/static/src/old_snippets/s_two_columns/000.scss @@ -0,0 +1,5 @@ +#wrapwrap .s_two_columns { + [class*="col-lg-"] > img { + margin: 0 auto; + } +} diff --git a/theme_common/static/src/scss/compatibility-saas-10-1.scss b/theme_common/static/src/scss/compatibility-saas-10-1.scss new file mode 100644 index 0000000..4c1066a --- /dev/null +++ b/theme_common/static/src/scss/compatibility-saas-10-1.scss @@ -0,0 +1,17 @@ +// This file is for compatibility since saas-10 web_editor refactoring. +// As a fix to work properly in the editor, some classes have been renamed. +// To allow a smooth transition, old classes alias are created here. + +@mixin bg-compatibility-mixin($bg, $color) { + background-color: $bg; + color: $color; + .text-muted { + color: rgba($color, 0.4); + } +} + +.black { @include bg-compatibility-mixin($black, gray('600')); } +.darkgray { @include bg-compatibility-mixin(gray('800'), $white); } +.gray { @include bg-compatibility-mixin(gray('700'), $white); } +.lightgray { @include bg-compatibility-mixin(gray('200'), gray('700')); } +.white { @include bg-compatibility-mixin($white, gray('700')); } diff --git a/theme_common/static/src/scss/compatibility-saas-10-2.scss b/theme_common/static/src/scss/compatibility-saas-10-2.scss new file mode 100644 index 0000000..41f2709 --- /dev/null +++ b/theme_common/static/src/scss/compatibility-saas-10-2.scss @@ -0,0 +1,28 @@ +// This file is for compatibility since saas-10 web_editor refactoring. +// As a fix to work properly in the editor, some classes have been renamed. +// To allow a smooth transition, old classes alias are created here. + +// Define new theme variables in case the user changes its theme +$gray-light-light: gray('200'); +$gray-light-dark: gray('600'); +$gray-dark-light: gray('700'); +$gray-dark-dark: gray('900'); +$gray-darkest: gray('900'); + +body .color-black { color: $black; } +body .color-white { color: $white; } +body .color-gray-lighter { color: gray('200'); } +body .color-gray-light-light { color: $gray-light-light; } +body .color-gray-light { color: gray('600'); } +body .color-gray-light-dark { color: $gray-light-dark; } +body .color-gray { color: gray('700'); } +body .color-gray-dark-light { color: $gray-dark-light; } +body .color-gray-dark { color: gray('900'); } +body .color-gray-dark-dark { color: $gray-dark-dark; } +body .color-gray-darker { color: gray('900'); } +body .color-gray-darkest { color: $gray-darkest; } +body .color-alpha { color: o-color('alpha'); } +body .color-beta { color: o-color('beta'); } +body .color-gamma { color: o-color('gamma'); } +body .color-delta { color: o-color('delta'); } +body .color-epsilon { color: o-color('epsilon'); } diff --git a/theme_common/static/src/scss/compatibility-saas-11.4-variables.scss b/theme_common/static/src/scss/compatibility-saas-11.4-variables.scss new file mode 100644 index 0000000..ca460c6 --- /dev/null +++ b/theme_common/static/src/scss/compatibility-saas-11.4-variables.scss @@ -0,0 +1,62 @@ + +@mixin carousel-indicators($bottom, $bottom-sm) { + bottom: $bottom; + li { + width: 12px; + height: 12px; + border-color: gray('900'); + margin: 0; + &:hover { + border-color: o-color('alpha'); + } + &.active { + background-color: o-color('alpha'); + border-color: o-color('alpha'); + margin: 0; + } + } + @include media-breakpoint-down(md) { + bottom: $bottom-sm; + } +} + +$s-banner-2-background-position: 50% 50%; +$s-banner-2-content-margin: 0; + +$s-banner-3-carosel-control-color: rgba(0, 0, 0, 0); +$s-banner-3-carosel-control-height: 100%; +$s-banner-3-padding: 130px; +$s-banner-3-fa-color: o-color('gamma'); +$s-banner-3-carousel-height: 500px; +$s-banner-3-text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86); +$s-banner-3-hero-bg-color: o-color('alpha'); +$s-banner-3-indicators-visible: hidden; +$s-banner-3-h1-size: 80px; +$s-banner-3-h2-size: 40px; +$s-banner-3-h1-mobile-font-size: 50px; + +@mixin s-banner-3-col-center-hook {}; +@mixin s-banner-3-row-hook {}; +@mixin s-banner-3-carousel-control-hook {}; +@mixin s-banner-3-carousel-control-right-hook {}; +@mixin s-banner-3-carousel-control-left-hook {}; + +$s-text-big-picture-padding: 50px 0; +$s-text-big-picture-text-align: left; + +@mixin s-text-big-picture-hero-hook {}; +@mixin s-big-picture-text-hero-hook {}; + +$s-big-picture-text-padding: 50px 0; +$s-big-picture-text-align: left; + +@mixin s-big-picture-text-hero-hook {}; +@mixin s-big-picture-row-hook {}; + +$s-cubes-big-cube-min-height: 600px; + +$s-products-carousel-carousel-control-color: rgba(0, 0, 0, 0); +$s-products-carousel-carousel-icon-color: o-color('gamma') !default; + +$s-timeline-company-color: null; +$s-timeline-color: if(variable-exists(color-wind), $color-wind, #F7F7F7); diff --git a/theme_common/static/src/scss/compatibility-saas-11.4.scss b/theme_common/static/src/scss/compatibility-saas-11.4.scss new file mode 100644 index 0000000..a313523 --- /dev/null +++ b/theme_common/static/src/scss/compatibility-saas-11.4.scss @@ -0,0 +1,1276 @@ + +// This file is for compatibility before 12.0 website snippets refactoring. +// As a fix to work properly in the editor, some classes have been renamed. +// To allow a smoother transition, old classes alias are created here. + +.s_1_column_text, +.s_2_column_text, +.s_3_column_text, +.s_4_column_text { + padding: 30px 0px; +} + +.s_logo_bar { + min-height: 192px; + color: white; + padding: 48px 0; + img { + max-height: 80px; + } + @include media-breakpoint-down(sm) { + [class*="col-lg-"] { + padding-bottom: 15px; + } + } +} + +#wrapwrap .s_banner_2.carousel { + margin-top: 0; + margin-bottom: 0; + .row.content { + margin: $s-banner-2-content-margin; + outline: 0; + } + .carousel-box-content { + padding: 15px 30px; + } + .carousel-box-image { + padding: 0; + } + .carousel-inner .item { + background-position: $s-banner-2-background-position; + } + .carousel-control { + @include carousel-control(15px, 0, 2px); + } + .carousel-indicators { + @include carousel-indicators(10px, 10px); + } +} + +.s_banner_3 { + .fa { + color: $s-banner-3-fa-color; + font-size: 35px; + transition: all 0.3s ease 0s; + position: relative; + top: 50%; + transform: translateY(-50%); + &:hover { + color: o-color('beta'); + } + } + .carousel-inner { + height: $s-banner-3-carousel-height; + } + .carousel-control { + opacity: 1; + top: 205px; + width: 70px; + height: 70px; + text-shadow: none; + &.left, &.right { + @include s-banner-3-carousel-control-hook; + background-color: $s-banner-3-carosel-control-color; + background-image: none; + height: $s-banner-3-carosel-control-height; + top: 0px; + } + &.left { + left: 0px; + @include s-banner-3-carousel-control-left-hook; + .fa-chevron-left { + right: 39%; + top: 50%; + } + } + &.right { + right: 0px; + @include s-banner-3-carousel-control-right-hook; + .fa-chevron-right { + left: 39%; + top: 50%; + } + } + } + .carousel-indicators { + bottom: 0px; + visibility: $s-banner-3-indicators-visible; + } + .carousel .carousel-control.left *, .carousel .carousel-control.right * { + position: relative; + top: 19px; + z-index: 5; + } + .container-fluid { + padding: 0; + overflow: hidden; + @include s-banner-3-row-hook; + .row .hero-bg { + @include s-banner-3-col-center-hook; + padding-left: $s-banner-3-padding; + color: $s-banner-3-hero-bg-color; + @include media-breakpoint-down(sm) { + top: 0px; + text-align: center; + padding-left: 0px; + } + @media screen and (max-width: 360px) { // FIXME + padding-left: 15px; + } + h1 { + font-size: $s-banner-3-h1-size; + text-shadow: $s-banner-3-text-shadow; + @media screen and (max-width: 360px) { // FIXME + font-size: 50px; + } + } + h2 { + font-size: $s-banner-3-h2-size; + text-shadow: $s-banner-3-text-shadow; + @media screen and (max-width: 360px) { // FIXME + font-size: 30px; + } + } + img { + max-height: 200px; + @media screen and (max-width: 360px) { // FIXME + max-width: 250px; + } + } + } + } +} + +.s_slide_banner { + min-height: 480px; + &.carousel { + overflow: hidden; + .carousel-content { + background: none; + margin-top: 75px; + color: $body-color; + } + .carousel-inner { + height: 100%; + .item { + height: 100%; + background-size: cover; + } + } + .carousel-control { + width: 10%; + cursor: pointer; + span { + @include o-position-absolute($top: 50%); + margin-top: -8px; + } + &.left { + left: -10px; + * { + @include o-position-absolute(50%, 50%); + } + } + &.right { + right: -10px; + * { + @include o-position-absolute($top: 50%); + } + } + } + } +} + +#wrapwrap .s_carousel_boxed .carousel { + .carousel-inner { + border-radius: $border-radius; + } + .carousel-control { + width: 10%; + @include carousel-control(15px, 20px, 3px); + @include fa-size-generator(15px); + .fa { + top: auto; + bottom: 30px; + } + } + .carousel-indicators { + display: none; + } + .carousel-caption { + bottom: 15px; + border-radius: ($border-radius-lg * 3); + min-height: 35px; + padding: 5px 0; + p { + margin: 0; + } + } +} + +.s_text_big_picture { + padding: $s-text-big-picture-padding; + .row { + @include s-big-picture-row-hook; + } + .hero-paragraph { + padding: 0px 40px; + text-align: $s-text-big-picture-text-align; + h1 { + font-weight: 900; + @include s-text-big-picture-hero-hook; + @media only screen and (max-width : 1024px) { + font-size: 25px; + font-weight: 900; + } + } + h2 { + @media only screen and (max-width : 1024px) { + font-size: 20px; + } + } + p { + font-size: 16px; + @media only screen and (max-width : 1024px) { + font-size: 14px; + } + } + } + .hero-image { + padding-left: 0px; + padding-right: 0px; + float: right; + img { + width: 100%; + } + } +} + +.s_big_picture_text { + padding: $s-big-picture-text-padding; + .row { + @include s-big-picture-row-hook; + } + .hero-paragraph { + padding: 0px 40px; + text-align: $s-big-picture-text-align; + h1 { + font-weight: 900; + @include s-big-picture-text-hero-hook; + @media only screen and (max-width : 1024px) { // FIXME + font-size: 25px; + font-weight: 900; + } + } + h2 { + @media only screen and (max-width : 1024px) { // FIXME + font-size: 20px; + } + } + p { + font-size: 16px; + @media only screen and (max-width : 1024px) { // FIXME + font-size: 14px; + } + } + } + .hero-image { + padding-left: 0px; + padding-right: 0px; + img { + width: 100%; + } + } +} + +.s_separator_color hr { + height: 12px; + background-color: $secondary !important; + border-radius: 0px; +} + +#wrapwrap .s_separator_block { + min-height: 1px; +} + +#wrapwrap .s_separator_color hr { + height: 2px; + border-top: 0; + background-color: o-color('beta'); + border-radius: 5px; +} + +#wrapwrap .s_separator_multicolor_fw div { + padding: 0px; + margin: 0; + height: 14px; + + hr { + height: 14px; + border-top: 0; + padding: 0px; + margin: 0; + background: linear-gradient(to right, o-color('beta') 0%, o-color('beta') 30%, o-color('delta') 30%, o-color('delta') 80%, o-color('gamma') 80%); + } +} + +#wrapwrap .s_separator_shade hr { + height: 2px; + border-top: 0; + background: gray('700'); + border-radius: 5px; +} + +#wrapwrap .s_separator_multicolor hr { + height: 12px; + border-top: 0; + background: linear-gradient(to right, o-color('beta') 0%, o-color('beta') 30%, o-color('delta') 30%, o-color('delta') 80%, o-color('gamma') 80%); +} + +.s_separator { + border-color: inherit; + border-top: 0; + padding: 8px 0; + margin: 0 0 16px 0; + height: 1px; + display: inline-block; + width: 100%; + border-style: solid; + border-bottom-width: 1px; + &.hr-small { + width: 20%; + } + &.hr-half { + width: 50%; + } + &.hr-full { + width: 100%; + } + &.hr-dashed { + border-style: dashed; + } + &.hr-dotted { + border-style: dotted; + } + &.hr-double { + border-style: double; + } + &.hr-solid { + border-style: solid; + } + @mixin hr-thickness($n) { + @for $i from 1 through $n { + &.hr-#{$i}{ + border-bottom-width: ($i * 1); + } + } + } + @include hr-thickness(5); +} + +.s_testimonial_slider { + &.carousel { + .carousel-inner { + .item { + opacity: 0; + -webkit-transition-property: opacity; + -ms-transition-property: opacity; + transition-property: opacity; + } + .active { + opacity: 1; + -webkit-transition-property: opacity; + -ms-transition-property: opacity; + transition-property: opacity; + } + } + .carousel-indicators { + bottom: 10px; + > li { + background-color: $primary; + border: none; + } + } + } + blockquote { + text-align: center; + border: none; + font-size: 28px; + font-weight: 300; + } + .row > div > img { + @include media-breakpoint-down(sm) { + max-height: 100px; + } + } +} + +.s_lead_bar { + min-height: 192px; + overflow: hidden; + color: white; + padding-top: 32px; + p { + color: gray('800'); + font-size: 16px; + } +} + +#wrapwrap .s_features_circle { + @include fa-size-generator(20px); +} + +#wrapwrap .s_features_grid_circle { + @include fa-size-generator(20px); + .feature-text { + overflow: hidden; + margin: 0 0 12px 0; + padding: 0 0 0 10px; + } +} + +#wrapwrap .s_quotes_slider_2 { + blockquote{ + padding: 0 20px; + } + &.quotecarousel { + padding: 0; + } + @include blockquote-layout(#fff, gray('900')); + .carousel-indicators { + @include carousel-indicators(5px, -5px); + } +} + +#wrapwrap .s_three_columns { + [class*="bg-"] { + border: 10px solid rgba(0, 0, 0, 0); + padding: 20px; + background-clip: padding-box; + > .carousel [class*="bg-"]{ + border: 0; + } + } + .bg-none { + padding: 0; + } + .carousel-control { + @include carousel-control(0, 0, 2px); + } +} + +#wrapwrap .s_icon_box_square { + .fa { + margin: 0 20px; + &:hover { + transition: all 0.3s ease-in-out; + background-color: o-color('gamma'); + } + } + @include fa-size-generator(25px); + .icon_box_content { + overflow: hidden; + } +} + +#wrapwrap .s_icon_box_circle { + .fa { + margin: 0 20px; + &:hover { + transition: all 0.3s ease-in-out; + background-color: o-color('gamma'); + } + } + @include fa-size-generator(25px); + .icon_box_content { + overflow: hidden; + } +} + +#wrapwrap .s_big_icon_square { + text-align: center!important; +} + +#wrapwrap .s_big_icon_square_box { + text-align: center!important; + min-height: 180px; + width: 150px; + margin: 0 auto; + + .fa { + color:white; + font-size: 40px; + } +} + +#wrapwrap .s_big_icon_square_icon { + width:120px; + height:110px; + text-align:center!important; + color:#fff; + padding: 36px 0; + transition: all 0.3s ease-in-out; + background-color: o-color('alpha'); + h5 { + margin-top: 48px; + color: o-color('alpha'); + } +} + +#wrapwrap .s_big_icon_square_box:hover .s_big_icon_square_icon { + transition: all 0.3s ease-in-out; + background-color: o-color('gamma'); +} + +#wrapwrap .s_big_icon_square_box:hover .s_big_icon_square_content h4 { + transition: all 0.3s ease-in-out; + color: o-color('gamma'); +} + +#wrapwrap .s_big_icons { + text-align: center!important; + @include s-big-icon-circle-height-hook; + //fix -- without this in mobile view the circles go to the top and so they hide the h2 and h3 above it. + .col-lg-12 { + float: none; + } +} + +#wrapwrap .s_big_icons_box { + text-align: center!important; + width: 150px; + margin: 0 auto; + + .fa { + color:white; + font-size: 40px; + @include s-big-icon-circle-fa-hook; + } +} + +#wrapwrap .s_big_icons_icon { + width: $s-big-icon-circle-icon-size; + height: $s-big-icon-circle-icon-size; + text-align:center!important; + padding: 40px 0; + transition: all 0.3s ease-in-out; + border-radius: 80px; + margin: 0px auto; + h5 { + margin-top: 48px; + } +} + +#wrapwrap .s_big_icons_box:hover .s_big_icons_icon { + transition: all 0.3s ease-in-out; + background-color: o-color('gamma'); +} + +#wrapwrap .s_big_icons_box:hover .s_big_icons_content h4 { + transition: all 0.3s ease-in-out; + color: o-color('gamma'); +} + +#wrapwrap .s_color_blocks_slider { + width: 100%; + + .s_color_blocks_slider_img { + padding: 0; + } + + .s_color_blocks_slider_content { + padding: 8% 5%; + height: auto; + .fa { + color: white; + } + img { + max-width: 100%; + height: auto; + } + } +} + +#wrapwrap .s_timeline_ul { + list-style: none; + padding: 20px 0 20px; + position: relative; + + &:before { + top: 0; + bottom: 0; + position: absolute; + content: " "; + width: 3px; + background-color: gray('200'); + left: 50%; + margin-left: -1.5px; + } + + > li { + margin-bottom: 20px; + position: relative; + + &:before, + &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } + + &:before, + &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } + + > .s_timeline_panel { + width: 50%; + position: relative; + float: left; + padding: 0 44px 0 0; + + @include media-breakpoint-down(sm) { + width: 100%; + padding: 0; + } + + > div { + background-color: $s-timeline-color; + width: 100%; + float: left; + border: 1px solid #d4d4d4; + border-radius: 2px; + padding: 20px; + position: relative; + -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); + + &:before { + position: absolute; + top: 26px; + right: -15px; + display: inline-block; + border-top: 15px solid rgba(0, 0, 0, 0); + border-left: 15px solid #ccc; + border-right: 0 solid #ccc; + border-bottom: 15px solid rgba(0, 0, 0, 0); + content: " "; + @include media-breakpoint-down(sm) { + display: none; + } + } + + &:after { + position: absolute; + top: 27px; + right: -14px; + display: inline-block; + border-top: 14px solid rgba(0, 0, 0, 0); + border-left: 14px solid $s-timeline-color; + border-right: 0 solid $s-timeline-color; + border-bottom: 14px solid rgba(0, 0, 0, 0); + content: " "; + @include media-breakpoint-down(sm) { + display: none; + } + } + } + } + + > .s_timeline_badge { + color: #fff; + width: 50px; + height: 50px; + line-height: 50px; + font-size: 1.4em; + text-align: center; + position: absolute; + top: 16px; + left: 50%; + margin-left: -25px; + background-color: #999999; + z-index: 100; + border-top-right-radius: 50%; + border-top-left-radius: 50%; + border-bottom-right-radius: 50%; + border-bottom-left-radius: 50%; + + @include media-breakpoint-down(sm) { + display: none; + } + } + + &:not(.s_timeline_inverted) > .s_timeline_panel:nth-child(2n+1) { + float: right; + padding: 0 0 0 44px; + + @include media-breakpoint-down(sm) { + padding: 0; + margin-top: 20px; + } + + > div { + float: right; + + &:before { + border-left-width: 0; + border-right-width: 15px; + left: -15px; + right: auto; + } + + &:after { + border-left-width: 0; + border-right-width: 14px; + left: -14px; + right: auto; + } + } + } + + &.s_timeline_inverted > .s_timeline_panel:nth-child(2n) { + float: right; + padding: 0 0 0 44px; + + @include media-breakpoint-down(sm) { + padding: 0; + } + + > div { + float: right; + + &:before { + border-left-width: 0; + border-right-width: 15px; + left: -15px; + right: auto; + } + + &:after { + border-left-width: 0; + border-right-width: 14px; + left: -14px; + right: auto; + } + } + } + } +} + +#wrapwrap .s_timeline_badge.primary { + background-color: o-color('alpha') !important; +} + +#wrapwrap .s_timeline_badge.success { + background-color: o-color('beta') !important; +} + +#wrapwrap .s_timeline_badge.warning { + background-color: o-color('delta') !important; +} + +#wrapwrap .s_timeline_badge.danger { + background-color: o-color('epsilon') !important; +} + +#wrapwrap .s_timeline_badge.info { + background-color: o-color('gamma') !important; +} + +#wrapwrap .s_timeline_title { + margin-top: 0; + color: gray('800'); +} + +#wrapwrap .s_timeline_info { + margin-top: 0; + color: gray('700'); +} + +#wrapwrap .s_timeline_date { + margin-top: 0; + color: gray('800'); +} + +$s-timeline-company-color: o-color('alpha') !default; + +#wrapwrap .s_timeline_company { + margin-top: 0; + color: $s-timeline-company-color; +} + +#wrapwrap .s_timeline_heading { + color: gray('800'); +} + +#wrapwrap .s_timeline_body > p, +#wrapwrap .s_timeline_body > ul { + margin-bottom: 0; + color: gray('800'); +} + +#wrapwrap .s_timeline_body > p + p { + margin-top: 5px; +} + +@include media-breakpoint-down(sm) { + #wrapwrap ul.timeline:before { + display: none; + } + + #wrapwrap ul.timeline > li { + margin-bottom: 0; + > .s_timeline_panel { + float: right; + width: 100%; + padding: 0 !important; + margin-bottom: 20px; + > .s_timeline_panel_content { + &:before, &:after { + display: none; + } + } + } + > .s_timeline_badge { + display: none; + } + } +} + +#wrapwrap .s_timeline_icons ul.timeline { + list-style: none; + padding: 0; + &:before { + content: ''; + position: absolute; + width: 1px; + top: 10px; + bottom: 10px; + left: 50%; + background-color: gray('700'); + } + + li { + position: relative; + margin-bottom: 15px; + &:before, + &:after { + content: ''; + display: table; + } + &:after { + clear: both; + } + + /* Left & Right */ + .timeline-content, + .timeline-content-double { + position: relative; + width: 50%; + color: gray('900'); + &:after { + content: ''; + position: absolute; + top: 10px; + right: 30px; + display: inline-block; + border-top: 5px solid rgba(0, 0, 0, 0); + border-left: 5px solid gray('900'); + border-right: 0 solid gray('900'); + border-bottom: 5px solid rgba(0, 0, 0, 0); + } + + /* Text */ + .timeline-text { + overflow: hidden; + min-height: 50px; + padding: 3px 10px; + p, ul{ + margin: 0; + + p{ + margin-top: 5px; + } + } + } + + /* Badge */ + .fa { + margin: -5px 0 0 0; + color: #fff; + text-align: center; + } + + /* Icons size */ + @include fa-size-generator(20px); + + } + + /* Date */ + .timeline-date { + position: absolute; + left: 50%; + width: 60px; + height: 30px; + line-height: 30px; + margin-left: -40px; + background-color: #fff; + color: gray('900'); + font-weight: 700; + text-align: center; + z-index: $zindex-navbar; + } + + /* Left */ + &:not(.timeline-inverted) .timeline-content, + &.timeline-inverted .timeline-content-double { + float: left; + padding: 0 45px 0 0; + text-align: right; + .fa { + float: right; + margin-left: 10px; + } + } + + /* Right */ + &.timeline-inverted .timeline-content, + &:not(.timeline-inverted) .timeline-content-double { + float: right; + padding: 0 0 0 45px; + &:after { + border-left-width: 0; + border-right-width: 5px; + left: 30px; + right: auto; + } + .fa { + float: left; + margin-right: 10px; + } + } + } +} + +@include media-breakpoint-down(sm) { + #wrapwrap .s_timeline_icons ul.timeline { + text-align: center; + &:before{ + display: none; + } + + li { + border-bottom: 1px solid gray('200'); + &:last-child{ + border-bottom: 0; + } + &.timeline-inverted .timeline-content, + &.timeline-inverted .timeline-content-double, + &:not(.timeline-inverted) .timeline-content, + &:not(.timeline-inverted) .timeline-content-double { + width: 100%; + padding: 0; + text-align: center; + &:after{ + display: none; + } + + .fa { + float: none; + margin: 10px 0 0 0; + } + + .timeline-text{ + padding: 10px 0 20px 0; + min-height: 0; + } + } + + .timeline-date{ + position: relative; + left: auto; + margin: 0; + background-color: rgba(0, 0, 0, 0); + } + } + } +} + +#wrapwrap .s_images_captions_fw [class*="col-"] { + padding: 0; + p { + display: inline-block; + margin: 0; + padding: 5px 15px; + } +} + +#wrapwrap .s_team_profile_box { + margin: 0.32em; + padding: 32px 24px; + box-shadow: 0px 1px 8px rgba(black, 0.15); + background-color: rgba(white, 0.05); + border: 1px solid rgba(white, 0.05); + img { + border: 4px solid white; + width: 160px; + box-shadow: 1px 1px 8px rgba(black, 0.1); + } + +} + +#wrapwrap .s_team_profile_share { + margin: 24px 0; + .fa { + color: o-color('alpha'); + padding: 0 2px; + } +} + +#wrapwrap .s_team_profiles_2 { + .profile-body { + padding: 30px; + img { + display: inline-block; + margin: 30px 0 0 0; + max-width: 50%; + } + } + .profile-options { + font-size: $font-size-sm; + margin: 0; + div { + border-bottom: 1px solid #fff; + border-right: 1px solid #fff; + padding: 0; + + &:last-child { + border-right: none; + } + } + a { + display: block; + padding: 8px 0; + } + p { + display: block; + padding: 8px 0; + margin-bottom: 0; + + } + .fa { + padding: 16px 0 0 0; + display: block; + } + } +} + +#wrapwrap .s_cubes { + .cube { + min-height: 200px; + + h3 { + text-align: center; + } + h4 { + padding-bottom: 20px; + } + + .cube-heading { + position: relative; + top: 25%; + } + > .row { + height: 50%; + } + } + + .cube-big { + height: 600px; + @media screen and (max-width: 640px) { // FIXME + height: auto; + } + + .cube-heading { + position: relative; + top: 25%; + } + &:first-child { + min-height: $s-cubes-big-cube-min-height; + } + } + + .cube-small, .cube-text { + height: 300px; + } +} + +#wrapwrap .s_news_carousel { + .container { + height: 100%; + .row { + height: 100%; + > div { + height: 100%; + @include media-breakpoint-down(md) { + height: auto !important; + } + } + } + } + .carousel-inner { + width: 80%; + margin: 0 10%; + @include media-breakpoint-down(md) { + width: 100%; + margin: 0; + } + .item { + padding: 0 15px; + } + } + .news-carousel-time { + padding: 32px 0; + .day { + display: block; + margin-left: auto; + margin-right: auto; + width: ($h2-font-size * 2); + height: ($h2-font-size * 2); + line-height: ($h2-font-size * 2); + font-size: $h2-font-size; + } + .month { + display: block; + margin-left: auto; + margin-right: auto; + font-size: $h6-font-size; + margin-top: 6px; + } + .year { + display: block; + margin-left: auto; + margin-right: auto; + font-size: $h6-font-size; + } + } + .news-carousel-content { + padding: 32px; + } + .carousel-control { + @include carousel-control(15px, 0, 2px); + .fa { + margin-top: -21px; + @include media-breakpoint-down(md) { + top: 65px; + margin-top: 0; + } + } + } +} + +#wrapwrap .s_references_2 { + @include blockquote-layout(gray('200'), gray('900')); + .carousel-indicators { + @include carousel-indicators(-15px, -10px); + } +} + +#wrapwrap .s_medias_list { + background-color: if($s-medias-list-bg-color-main != null, $s-medias-list-bg-color-main, gray('200')); + .media { + @include media-breakpoint-down(md) { + height: auto !important; + } + > .row { + margin: 16px 0; + background-color: #fff; + > [class*="col-"] { + padding: 0; + &.media-content{ + padding: 30px; + } + } + .media-options { + height: 100%; + background-color: gray('200'); + > .row { + margin: 0; + [class*="col-"]{ + padding: 0; + margin-bottom: 1px; + p { + margin: 0; + font-size: $font-size-sm; + display: inline-block; + } + @include fa-size-generator(10px); + .fa { + margin-right: 10px; + } + } + } + } + } + } +} + +#wrapwrap .s_products_carousel { + .fa { + color: $s-products-carousel-carousel-icon-color; + font-size: 35px; + transition: all 0.3s ease 0s; + position: relative; + top: 50%; + transform: translateY(-50%); + &:hover { + color: o-color('beta'); + } + } + + .carousel-control { + opacity: 1; + top: 205px; + width: 70px; + height: 70px; + text-shadow: none; + } + + .carousel-control.left, .carousel-control.right { + @include s-products-carousel-hook; + background-color: $s-products-carousel-carousel-control-color; + background-image: none; + height: 100%; + top: 0; + } + + .carousel-control.left { + left: 0; + .fa-chevron-left { + right: 39%; + top: 50%; + } + } + + .carousel-control.right { + right: 0; + .fa-chevron-right { + left: 39%; + top: 50%; + } + } + + .carousel .carousel-control.left *, + .carousel .carousel-control.right * { + position: relative; + top: 19px; + z-index: 5; + } +} diff --git a/theme_common/static/src/scss/fonts.scss b/theme_common/static/src/scss/fonts.scss new file mode 100644 index 0000000..8195f75 --- /dev/null +++ b/theme_common/static/src/scss/fonts.scss @@ -0,0 +1,9 @@ +/** + * Fonts which are not google fonts and thus need to be served by Odoo directly. + * Ideally, using google fonts is always better ! + * + * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + * ! Please triple check Licence before to add new font ! + * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + */ + diff --git a/theme_common/static/src/scss/mixins.scss b/theme_common/static/src/scss/mixins.scss new file mode 100644 index 0000000..8f5ae18 --- /dev/null +++ b/theme_common/static/src/scss/mixins.scss @@ -0,0 +1,1205 @@ +@function o-theme-common-add-color-variations($from, $to, $variations: ('light': 10%, 'dark': -10%)) { + $color-variations: (); + @each $color-name in ('alpha', 'beta', 'gamma', 'delta', 'epsilon') { + $color: map-get($from, $color-name); + @if $color != null { + @each $variation-name, $amount in $variations { + $color-variations: map-merge($color-variations, ( + '#{$color-name}-#{$variation-name}': adjust-color($color, $lightness: $amount), + )); + } + } + } + @return map-merge($color-variations, $to); +} + +@mixin fa-size-generator($base-size) { + .fa { + text-align: center; + display: inline-block; + vertical-align: middle; + } + .fa, + .fa.fa-1x { + width: ($base-size + 20px); + height: ($base-size + 20px); + line-height: ($base-size + 20px); + } + .fa.fa-2x { + width: ($base-size + 40px); + height: ($base-size + 40px); + line-height: ($base-size + 40px); + } + .fa.fa-3x { + width: ($base-size + 60px); + height: ($base-size + 60px); + line-height: ($base-size + 60px); + } + .fa.fa-4x { + width: ($base-size + 80px); + height: ($base-size + 80px); + line-height: ($base-size + 80px); + } + .fa.fa-5x { + width: ($base-size + 100px); + height: ($base-size + 100px); + line-height: ($base-size + 100px); + } +} + +@mixin blockquote-layout($bg-color, $color) { + blockquote { + font-style: italic; + margin: 0 0 12px 0; + padding: 0; + border: 0; + > .fa, + > span .fa { + float: left; + } + @include fa-size-generator(20px); + img { + display: inline-block; + max-width: 40px; + max-height: 40px; + } + small { + display: inline-block; + } + .blockquote-text { + overflow: hidden; + font-size: $font-size-base; + text-align: left; + &:focus{ + outline: none; + } + } + p { + padding: 24px; + } + } +} + +@mixin carousel-control($position, $fa-position, $fa-padding) { + opacity: 1; + text-shadow: none; + color: gray('900'); + font-size: inherit; + width: 5%; + .fa { + top: 50%; + background-color: #fff; + &:hover { + color: theme-color('primary'); + } + @include media-breakpoint-down(sm) { + top: auto; + bottom: 0; + } + } + @include fa-size-generator(20px); + &.left { + background-image: none; + left: $position; + .fa { + left: $fa-position; + right: auto; + padding-right: $fa-padding; + } + } + &.right { + background-image: none; + right: $position; + .fa { + right: $fa-position; + left: auto; + padding-left: $fa-padding; + } + } +} + +@mixin PlaceholderStyle($color) { + ::-webkit-input-placeholder { /* WebKit browsers */ + color: $color; + } + :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ + color: $color; + opacity: 1; + } + ::-moz-placeholder { /* Mozilla Firefox 19+ */ + color: $color; + opacity: 1; + } + :-ms-input-placeholder { /* Internet Explorer 10+ */ + color: $color; + } +} + +//------------------------------------------------------------------------------ +// Themes specific style. +// +// This was introduced as a post-stable-12.0 review. The goal is to regroup +// similar block of scss code (accross different theme) in theme_common +// mixins which are then simply called in the related themes. This will ease +// stable fixes and master refactorings. +//------------------------------------------------------------------------------ + +@mixin o-theme-responsive-spacing-classes($lg, $md, $sm, $xs) { + @include media-breakpoint-down(lg) { + @include o-spacing-all($lg); + } + @include media-breakpoint-down(md) { + @include o-spacing-all($md); + } + @include media-breakpoint-down(sm) { + @include o-spacing-all($sm); + } + @include media-breakpoint-down(xs) { + @include o-spacing-all($xs); + } +} + +@mixin o-theme-cfa-bg-img-classes( + $bg1: $o-theme-bg-img-01, $bg2: $o-theme-bg-img-02, $bg3: $o-theme-bg-img-03, + $bg4: $o-theme-bg-img-04, $bg5: $o-theme-bg-img-05, $bg6: $o-theme-bg-img-06, + $bg7: $o-theme-bg-img-07) { + %cfa-bg-img { + background-size: cover; + background-position: center center; + } + .bg-img-01 { + @extend %cfa-bg-img; + background-image: $bg1; + } + .bg-img-02 { + @extend %cfa-bg-img; + background-image: $bg2; + } + .bg-img-03 { + @extend %cfa-bg-img; + background-image: $bg3; + } + .bg-img-04 { + @extend %cfa-bg-img; + background-image: $bg4; + } + .bg-img-05 { + @extend %cfa-bg-img; + background-image: $bg5; + } + .bg-img-06 { + @extend %cfa-bg-img; + background-image: $bg6; + } + .bg-img-07 { + @extend %cfa-bg-img; + background-image: $bg7; + } +} + +// This is probably to deprecate +@mixin o-theme-cfa-px-classes() { + .px14 { + font-size: 14px !important; + line-height: 25px; + } + .px16 { + font-size: 16px !important; + line-height: 28px; + } + .px18 { + font-size: 18px !important; + line-height: 30px; + } + .px22 { + font-size: 22px !important; + line-height: 32px; + } + .px30 { + font-size: 30px !important; + line-height: 30px; + } + .px36 { + font-size: 36px !important; + line-height: 36px; + } + .px42 { + font-size: 42px !important; + line-height: 42px; + } + .px50 { + font-size: 50px !important; + line-height: 50px; + } + .px60 { + font-size: 60px !important; + line-height: 60px; + } +} + +@mixin o-theme-cfa-btn-main-style() { + .btn { + transition: all 0.3s ease-out; + } +} + +@mixin o-theme-cfa-btn-style() { + @include o-theme-cfa-btn-main-style(); + + @if ($o-support-13-0-color-system) { + .btn { + // TODO this is not very consistent but this was how the theme was + // designed... should we keep this ? + @each $color, $alias in ('success': 'epsilon', 'info': 'gamma', 'warning': 'delta') { + &.btn-#{$color} { + @include button-variant(theme-color($alias), theme-color($alias)); + } + &.btn-outline-#{$color} { + @include button-outline-variant(theme-color($alias)); + } + } + &.btn-danger { + @include button-variant(gray('black'), gray('black')); + } + &.btn-outline-danger { + @include button-outline-variant(gray('black'), gray('black')); + } + } + } +} + +@mixin o-theme-cfa-header-responsive-sizes() { + @include media-breakpoint-down(sm) { + h1 { + font-size: 30px; + } + h2 { + font-size: 26px; + } + h3 { + font-size: 22px; + } + } +} + +@mixin o-theme-cfa-custom-form-control($with-color: true, $with-focus-border-width: true) { + border-top-width: 0px; + border-left-width: 0px; + border-right-width: 0px; + border-radius: 0px; + @if $with-color { + color: gray('700'); + } + + &:focus { + border-bottom-color: o-color('primary'); + @if $with-focus-border-width { + border-bottom-width: 2px; + } + } + + + .input-group-append { + margin-left: 1em; + } +} + +@mixin o-theme-cfa-full-width-styles() { + #wrapwrap { + #wrap { + width: 100%; + max-width: 100%; + margin: auto; + } + .navbar > .container { + max-width: 100%; + } + } + #footer { + width: 100%; + } +} + +@mixin o-theme-cfa-card-classes($font-size: $h4-font-size) { + .card-header { + background-color: inherit; + border: none; + font-size: $font-size; + } + .card-footer { + background: inherit; + } + .card { + text-align: center; + box-shadow: none; + border-radius: 0px; + } +} + +@mixin o-theme-cfa-top-menu-style($padding: 0, $display: flex, $margin: 0, $media-padding: 0, + $bg-color: white, $top: auto, $font-size: inherit, $dropdown-item-color: o-color('delta'), + $dropdown-item-hover-bg-color: rgba(0, 0, 0, 0), $dropdown-item-hover-color: o-color('epsilon'), + $nav-link-color: rgba(0, 0, 0, 0.5), $font-weight: normal, $text-transform: none, + $transition: all 0s ease 0s) { + + padding: $padding; + margin: $margin; + @include media-breakpoint-up(md) { + display: $display; + } + @include media-breakpoint-down(sm) { + padding: $media-padding; + } + .divider { + display: none; + } + .nav-link { + font-weight: $font-weight; + text-transform: $text-transform; + transition: $transition; + + &.active { + font-weight: bolder; + } + } + .dropdown-menu, .navbar-collapse { // FIXME navbar should be removed ? (https://github.com/odoo/design-themes/commit/d20298fe41fdee5324c7e32f78e89d26edc71896#diff-042ad6434fc37ef55af3ca7db63906b8L259) + border-radius: 0px; + box-shadow: none; + top: $top; + .dropdown-item, .nav-link { + font-size: $font-size; + } + .dropdown-divider, .divider { + margin: 0; + } + } +} + +@mixin o-theme-cfa-footer-style($font-size: 14px, $container-padding: 8px 65px 32px, $padding: 0, $border-top: 0, $margin-right: 50px, $h4-padding: 0 0 0 20px, $text-transform: uppercase) { + + .container { + .js_language_selector .dropdown-toggle { + padding: 6px 20px; + } + p, .list-unstyled { + font-size: $font-size; + } + h4 { + margin-right: $margin-right; + padding: $h4-padding; + text-transform: $text-transform; + } + } + .o_footer_copyright { + border-top: $border-top; + padding: $padding; + } +} + +@mixin o-theme-cfa-ecommerce-classes( + $nav-link-color: o-color('epsilon'), $nav-link-hover-color: o-color('beta'), $nav-link-hover-bg-color: gray('800'), + $nav-link-active-bg-color: rgba(0, 0, 0, 0), $nav-link-active-color: o-color('epsilon'), + $js-attributes-padding: 0px 15px 15px 15px, $js-attributes-strong-color: o-color('gamma'), $js-attributes-label-color: gray('700'), + $h6-padding-y: 10px, $h6-font-size: 13px, $h6-text-align: left, $h6-border-top: 0, $h6-border-bottom: 0, $h6-color: o-color('delta'), + $price-font-size: 12px, $product-price-padding: 0, $product-price-align: left, $btn-secondary-padding: 5px 10px, + $right-column-border-bottom: 1px solid gray('700'), $right-column-color: gray('700'), $right-column-font-weight: bold, + $add-cart-bg-color: gray('700'), $add-cart-color: white, $add-cart-width: auto, $price-h4: 25px) { + + .breadcrumb { + padding-top: 20px; + font-size: 15px; + } + .form-inline .input-group { + .form-control { + width: 100%; + box-shadow: none; + &:focus { + box-shadow: none; + } + } + .input-group-btn { + width: 50px; + .btn { + line-height: 2.5; + } + .btn-secondary { + border-radius: 0px; + height: 50px; + width: 50px; + } + } + } + .js_add_cart_variants { + li strong { + font-size: 20px; + } + } + .oe_product { + .btn.btn-danger { + @include button-variant(theme-color('danger'), theme-color('danger')); + } + .text-danger { + color: theme-color('danger') !important; + } + .o_wsale_product_information { + padding: 0px 15px; + h6 { + border-top: $h6-border-top; + border-bottom: $h6-border-bottom; + font-size: $h6-font-size; + margin: 0px; + padding: $h6-padding-y 0px; + text-align: $h6-text-align; + } + .oe_subdescription { + text-align: left; + } + .product_price { + font-size: $price-font-size; + padding: $product-price-padding; + position: relative; + text-align: $product-price-align; + } + } + + .o_wsale_product_btn { + @include o-position-absolute(auto, map-get($spacers, 2), map-get($spacers, 2), auto); + padding: 0; + + .btn { + padding: $btn-padding-y-sm $btn-padding-x-sm; + transform: scale(1); + } + } + } + .oe_product_cart { + &:not(:hover) { + border-color: transparent; + } + } + + #products_grid { + &.o_wsale_layout_list { + .oe_product_cart { + border-bottom: $card-border-width solid $card-border-color; + + .o_wsale_product_information { + padding-right: 0px !important; + + h6 { + text-align: left !important; + font-size: 24px !important; + border-bottom: none !important; + } + .product_price { + display: inline-block; + font-size: 18px !important; + } + .oe_subdescription { + max-width: 70%; + } + } + .o_wsale_product_btn { + position: static; + display: inline-block; + width: auto; + padding: 0; + background: transparent; + + > .btn { + padding: $btn-padding-y $btn-padding-x; + } + } + } + } + } + + /* =================== Categories =================== */ + #products_grid_before { + + .card, .card-body { + border: none !important; + padding: 0 !important; + background-color: transparent !important; + box-shadow: none !important; + text-align: left !important + } + + .js_attributes { + padding: $js-attributes-padding; + + .css_attribute_color.active { + border: 5px ridge o-color('primary'); + } + li > ul { + display: block; + padding-left: 15px; + } + strong { + display: block; + padding-left: 10px; + margin-bottom: 10px; + margin-top: 10px; + text-transform: uppercase; + } + } + } + .list-unstyled .css_attribute_color.active { + border: 3px solid; + } + #website_sale_recommended_products { + padding: 30px; + h3 { + text-align: center; + border-bottom: 5px solid; + padding-bottom: 20px; + } + .row { + padding: 0 15px; + } + .col-lg-2 { + margin-top: 10px; + min-height: 160px; + } + } + .oe_cart { + .btn { + @include media-breakpoint-down(sm) { + padding: 10px; + } + } + .card { + background-color: rgba(0, 0, 0, 0); + } + strong { + color: gray('700'); + } + #cart_products img { + max-width: 100px; + } + .a-submit { + padding: 20px 0px; + min-width: 150px; + } + } + #modal_optional_products { + .modal-title { + background: rgba(0, 0, 0, 0); + } + .input-group { + border-collapse: inherit; + } + } + .product-description { + text-align: center; + font-size: 18px; + } + #right_column { + color: gray('700'); + a { + color: red; + } + .btn { + border-radius: 0px; + border: none; + } + .input-group-btn { + padding-left: 5px; + } + h4 { + border-bottom: $right-column-border-bottom; + color: $right-column-color; + font-size: 22px; + font-weight: $right-column-font-weight; + } + .fa { + padding-right: 5px; + } + } + .wizard { + box-shadow: none; + @include media-breakpoint-down(sm) { + padding-right: 0px; + li { + padding-left: 7px; + } + } + } + .oe_sale_acquirer_button .btn { + min-width: 150px !important; + text-transform: uppercase; + font-size: 20px; + margin-bottom: 20px; + } +} + +@mixin o-theme-chd-bg-img-classes( + $bg1: $o-theme-bg-img-01, $bg2: $o-theme-bg-img-02, $bg3: $o-theme-bg-img-03, + $bg4: $o-theme-bg-img-04, $bg5: $o-theme-bg-img-05, $bg6: $o-theme-bg-img-06, + $bg7: $o-theme-bg-img-07, $bg8: $o-theme-bg-img-08, $bg9: $o-theme-bg-img-09, + $bg10: $o-theme-bg-img-10, $bg11: $o-theme-bg-img-11, $bg12: $o-theme-bg-img-12, + $font-color: white) { + %chd-bg-img { + background-size: cover; + } + .bg-img-01 { + @extend %chd-bg-img; + background-image: $bg1; + } + .bg-img-02 { + @extend %chd-bg-img; + background-image: $bg2; + } + .bg-img-03 { + @extend %chd-bg-img; + background-image: $bg3; + } + .bg-img-04 { + @extend %chd-bg-img; + background-image: $bg4; + } + .bg-img-05 { + @extend %chd-bg-img; + background-image: $bg5; + } + .bg-img-06 { + @extend %chd-bg-img; + background-image: $bg6; + } + .bg-img-07 { + @extend %chd-bg-img; + background-image: $bg7; + } + .bg-img-08 { + @extend %chd-bg-img; + background-image: $bg8; + } + .bg-img-09 { + @extend %chd-bg-img; + background-image: $bg9; + } + .bg-img-10 { + @extend %chd-bg-img; + background-image: $bg10; + } + .bg-img-11 { + @extend %chd-bg-img; + background-image: $bg11; + } + .bg-img-12 { + @extend %chd-bg-img; + background-image: $bg12; + } +} + +@mixin o-theme-chd-bg-pattern-classes($o-theme-bg-patterns) { + @for $i from 1 through length($o-theme-bg-patterns) { + .bg-pattern-0#{$i} { + background-image: nth($o-theme-bg-patterns, $i); + } + } +} + +@mixin o-theme-chd-bg-gradient-classes() { + .bg_gradient_primary_down { + background-image: linear-gradient( rgba(theme-color('primary'), 0), rgba(theme-color('primary'), 1) ),; + } + .bg_gradient_primary_up { + background-image: linear-gradient( rgba(theme-color('primary'), 1), rgba(theme-color('primary'), 0) ),; + } + .bg_gradient_white_down_thumb { + background-image: linear-gradient( rgba(#ccc, 1), rgba(white, 0.5) ),; + } + .bg_gradient_white_down { + background-image: linear-gradient( rgba(white, 0), rgba(white, 0.5) ),; + } + .bg_gradient_white_up_thumb { + background-image: linear-gradient( rgba(white, 0.5), rgba(#ccc, 1) ),; + } + .bg_gradient_white_up { + background-image: linear-gradient( rgba(white, 0.5), rgba(white, 0) ),; + } + .bg_gradient_black_up { + background-image: linear-gradient( rgba(black, 0.5), rgba(black, 0) ),; + } + .bg_gradient_black_down { + background-image: linear-gradient( rgba(black, 0), rgba(black, 0.5) ),; + } +} + +@mixin o-theme-chd-bg-option-menu-styles() { + .bg_option_menu_img, .bg_option_menu_gradient { + height: 25px; + width: 120px; + border: 1px solid #ccc; + } +} + +@mixin o-theme-chd-padding-l-r-classes() { + // Note: To be removed. + // Kept for back-compatibility only. + .padding-l-r-8 { + @extend .px-2; + } + .padding-l-r-16 { + @extend .px-3; + } + .padding-l-r-32 { + @extend .px-4; + } +} + +@mixin o-theme-chd-footer-styles() { + p { + text-align: justify; + } +} + +@mixin o-theme-chd-ecommerce-classes() { + #products_grid .oe_product section { + padding: 4px 15px 24px 10px; + border-top: 1px dotted; + background-color: rgba(o-color('primary'), 0.2); + h5 a { + font-weight: 300; + } + &:hover { + background-color: rgba(o-color('primary'), 0.4); + transition: all 0.3s ease-in-out; + } + } + #products_grid_before .nav-pills { + font-size: 15px; + .nav-link { + font-size: 16px; + margin: 1px 0px; + + &.active, &:focus, &:hover { + transition: all 0.3s ease-in-out; + padding: 6px 6px; + } + } + } +} + +@mixin o-theme-chd-big-icons-styles($bg-color: o-color('alpha'), $border-color: o-color('alpha'), + $transform: scale(1.1, 1.1), $fa-color: white, $h5-color: white) { + + background-color: $bg-color !important; + border-color: $border-color; + transform: $transform; + .fa { + color: $fa-color !important; + } + h5.o_default_snippet_text { + color: $h5-color !important; + } +} + +@mixin o-theme-sri-bg-effects-styles( + $opacity: 1, $border-top: 2px solid #fff, $border-bottom: 2px solid #848484, + $background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(241, 241, 241, 0.5) 50%, rgba(225, 225, 225, 0.5) 51%, rgba(246, 246, 246, 0.5) 100%)) { + + position: relative; + opacity: 0.999; // Force stacking context creation + &:before { + content: ""; + z-index: -1; + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + display: block; + opacity: $opacity; + background: $background; + border-top: $border-top; + border-bottom: $border-bottom; + } +} + +@mixin o-theme-sri-bg-effects-classes() { + // TODO: remove these classes in a future version (kept for compatibility) + .glossy { + @include o-theme-sri-bg-effects-styles($border-top: 2px solid rgba(255, 255, 255, 0.73), $border-bottom: 1px solid rgba(155, 155, 155, 0.73)); + } + .glossy-medium { + @include o-theme-sri-bg-effects-styles($opacity: 0.7); + } + .glossy-soft { + @include o-theme-sri-bg-effects-styles($opacity: 0.3); + } + .insetShadow { + @include o-theme-sri-bg-effects-styles( + $background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%), + $border-top: 0, $border-bottom: 0); + } + .insetShadowBig { + @include o-theme-sri-bg-effects-styles( + $background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0.4) 100%), + $border-top: 0, $border-bottom: 0); + } +} + +@mixin o-theme-sri-bg-styles($std-url, $x, $y, $body-color, $url-2x) { + background-image: $std-url!important; + background-position: $x $y; + background-repeat: no-repeat; + background-size: cover; + color: $body-color; + + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and ( min--moz-device-pixel-ratio: 2), + only screen and ( -o-min-device-pixel-ratio: 2/1), + only screen and ( min-device-pixel-ratio: 2), + only screen and ( min-resolution: 192dpi), + only screen and ( min-resolution: 2dppx) { + background-image: $url-2x!important; + } +} + +@mixin o-theme-sri-bg-image-styles($img, $body-color: white, $shadow-color : rgba(255, 0, 0, 0), $x: 50%, $y: 50%) { + @include o-theme-sri-bg-styles(url("/#{$o-theme-img-base-url}#{$img}"), $x, $y, $body-color, url("/#{$o-theme-img-base-url}#{$o-theme-pattern-2x-prefix}#{$img}")); + text-shadow: 0 1px 1px transparentize($shadow-color, 0.4); +} + +@mixin o-theme-sri-bg-pattern-styles($img, $body-color: white, $x: 50%, $y: 50%) { + @include o-theme-sri-bg-styles(url("/#{$o-theme-pattern-base-url}#{$img}"), $x, $y, $body-color, url("/#{$o-theme-pattern-base-url}#{$o-theme-img-2x-prefix}#{$img}")); +} + +@mixin o-theme-sri-bg-img-thumb-classes($backgrounds) { + @each $name, $image in $backgrounds { + .#{$name}-thumb { + background-image: url("/#{$o-theme-thumb-base-url}#{$image}") !important; + background-position: center center; + background-size: cover; + } + } +} + +@mixin o-theme-sri-ecommerce-classes() { + // GENERAL + .oe_website_sale .wizard { + font-weight: bold; + } + // PRODUCTS' LIST + #products_grid { + div.oe_product { + padding-bottom: 15px; + padding-top: 10px; + + &:nth-child(odd) { + background: rgba(black, 0.015); + } + &:first-child { + border-top: 1px solid rgba(black, 0.1); + } + } + td.oe_product, div.oe_product .oe_product_image { + padding: 5px; + } + } + // PPRODUCTS CATEGORIES + #products_grid_before > ul > li { + &:first-child { + margin-bottom: 10px; + } + > a { + font-weight: bold; + margin-top: 5px; + } + } + // PPRODUCT PAGE + #product_detail { + > .row:first-of-type{ + margin-bottom: 36px; + } + form .form-control, form .input-group .btn { + height: 36px; + } + #product_details { + position: relative; + + &:before { + content: ""; + width: 1px; + background-color: gray('200'); + height: 100%; + @include o-position-absolute(0, auto, 0, -10%); + } + > h1 { + margin: 0 0 20px; + } + hr:first-of-type{ + display: none; + } + // LIST VIEW OF VARIANTS + .js_product > label > input{ + position: relative; + margin: 0 10px 0 0; + } + // PRODUCTS'S VARIANTS + ul.js_add_cart_variants { + margin-bottom: 20px; + display: table; + width: 100%; + + > li { + display: block; + > strong { + font-size: 0.9em; + display: block; + opacity: 0.7; + padding: 0; + margin-top: 20px; + } + > ul { + display: block; + padding-left: 0; + margin-left: 0; + + &.list-unstyled > label { + margin: 0!important; + } + &.list-inline { + li { + padding-left: 0; + } + label.css_attribute_color { + opacity: 0.8; + cursor: pointer; + border: 1px solid gray('600'); + box-shadow: inset 0 0 0 2px #fff; + border-radius: 2px; + + input { + cursor: pointer; + margin: 1px; + width: 18px; + } + &.active { + opacity: 1; + border: 2px solid #55e58e; + } + &:hover { + opacity: 1; + } + } + } + } + } + } + @include media-breakpoint-up(md) { + .css_quantity { + float: left; + } + #add_to_cart { + margin-top: 0!important; + margin-left: 10px; + } + ul.js_add_cart_variants > li { + display: table-row; + > strong, > ul { + display: table-cell; + } + } + } + .product_price h4 { + border-top: 1px solid #eee; + font-size: 35px; + margin-top: 25px; + padding-top: 10px; + } + } + } +} + +@mixin o-theme-sri-header-styles($name, $text-transform, $font-weight) { + ##{$name}_header { + font-family: $headings-font-family; + .navbar { + padding: 20px 0 20px; + + .navbar-nav { + > li > a { + text-transform: $text-transform; + font-weight: $font-weight; + } + .navbar-toggle { + margin: 0; + } + } + } + } + #wrapwrap { + .o_header_affixed:not(.o_header_fixed) { + .navbar { + padding: 2px 20px; + } + } + &.o_header_overlay { + > main, > footer { + opacity: 0.999; // hack to create a stacking context allowing to place top_content on top of background but behind everything else + } + .move_to_top { + z-index: -1; + width: 100%; + @include o-position-absolute($top: 0, $left: 0); + } + } + } +} + +@mixin o-theme-sri-ripple-animation-styles($name) { + .preserve3d, %preserve3d { + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + transform-style: preserve-3d; + } + + .btn { + z-index: 2; + @extend %preserve3d; + } + + @keyframes ripple { + 100% { opacity: 0; transform: scale(2.5); } + } + + .#{$name}-ripple { + display: block; + position: absolute; + border-radius: 100%; + opacity: 0.3; + z-index: -1; + background: currentColor; + pointer-events: none; + transform: scale(0); + + &.#{$name}-ripple-animated { + animation: ripple 0.35s ease-in; + } + } +} + +@mixin o-theme-sri-v-align-class() { + .v-align { + position: relative; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + + @media only screen and (max-width : 480px) { + top: auto; + transform: translate(0, 0); + } + > *:first-child { + margin-top: 0; + } + } +} + +@mixin o-theme-nmi-website-forum-classes($border-radius, $navbar-brand-color, $padding, + $hover-bg-color, $hover-color, $active-bg-color) { + .o_wforum_navbar_container { + .navbar { + padding-top: 0; + padding-bottom: 0; + border-radius: $border-radius; + .navbar-brand { + padding: 18px; + font-weight: $font-weight-bold; + color: $navbar-brand-color; + } + .navbar-nav .nav-link { + &:hover { + background-color: $hover-bg-color; + color: $hover-color; + } + &.active, &:focus { + background-color: $active-bg-color; + color: $hover-bg-color; + } + } + } + .input-group .form-control { + height: auto; + padding: $padding; + color: gray('900'); + @include border-left-radius(20px); + + + .input-group-append button { + padding: 6px 20px; + } + } + } + .website_forum #wrap { + // Ask a question - Button + .btn-group .btn { + padding: 6px 12px; + @include border-right-radius(0); + &.dropdown-toggle { + @include border-left-radius(0); + @include border-right-radius(20px); + } + } + // Ask a question - Editor icons + .btn-toolbar .btn { + background-color: rgba(0, 0, 0, 0); + color: #000; + border-radius: 0; + &.dropdown-toggle { + border-radius: 0; + } + } + } +} + +@mixin o-theme-nmi-bg-pattern-classes($o-theme-bg-patterns) { + @for $i from 1 through length($o-theme-bg-patterns) { + .bg-pattern-0#{$i}{ + background-image: nth($o-theme-bg-patterns, $i); + background-repeat: repeat !important; + background-size: inherit !important; + } + } +} + +@mixin o-theme-nmi-bg-image-classes($o-theme-bg-imgs, $bg-size) { + @for $i from 1 through length($o-theme-bg-imgs) { + $j: $i; + @if $i < 10 { $j: 0#{$i}; } + .bg-img-#{$j}{ + background: nth($o-theme-bg-imgs, $i); + background-repeat: no-repeat !important; + background-size: $bg-size !important; + } + } +} + +@mixin o-theme-nmi-wrapwrap-styles($shadow-class, $border-radius) { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + background-color: rgba(0, 0, 0, 0); + + p:not(.s_share) a:not(.btn) { + text-decoration: underline; + } + .readable { + padding: 0 30px; + .container { + width: auto; + } + } + .text-underline { + text-decoration: underline; + } + .text-boxed { + border: 1px solid; + border-color: inherit; + padding: 20px; + border-radius: $border-radius; + } +} diff --git a/theme_common/static/src/scss/options/colors/option_colors_02_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_02_variables.scss new file mode 100644 index 0000000..2823f13 --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_02_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 2; +$o-theme-color-palette-number: 2; +$o-gray-color-palette-number: 2; diff --git a/theme_common/static/src/scss/options/colors/option_colors_03_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_03_variables.scss new file mode 100644 index 0000000..9bdce54 --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_03_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 3; +$o-theme-color-palette-number: 3; +$o-gray-color-palette-number: 3; diff --git a/theme_common/static/src/scss/options/colors/option_colors_04_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_04_variables.scss new file mode 100644 index 0000000..9150d43 --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_04_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 4; +$o-theme-color-palette-number: 4; +$o-gray-color-palette-number: 4; diff --git a/theme_common/static/src/scss/options/colors/option_colors_05_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_05_variables.scss new file mode 100644 index 0000000..58021de --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_05_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 5; +$o-theme-color-palette-number: 5; +$o-gray-color-palette-number: 5; diff --git a/theme_common/static/src/scss/options/colors/option_colors_06_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_06_variables.scss new file mode 100644 index 0000000..bd9a2b5 --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_06_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 6; +$o-theme-color-palette-number: 6; +$o-gray-color-palette-number: 6; diff --git a/theme_common/static/src/scss/options/colors/option_colors_07_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_07_variables.scss new file mode 100644 index 0000000..464ff4a --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_07_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 7; +$o-theme-color-palette-number: 7; +$o-gray-color-palette-number: 7; diff --git a/theme_common/static/src/scss/options/colors/option_colors_08_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_08_variables.scss new file mode 100644 index 0000000..6fa642a --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_08_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 8; +$o-theme-color-palette-number: 8; +$o-gray-color-palette-number: 8; diff --git a/theme_common/static/src/scss/options/colors/option_colors_09_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_09_variables.scss new file mode 100644 index 0000000..da879d2 --- /dev/null +++ b/theme_common/static/src/scss/options/colors/option_colors_09_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 9; +$o-theme-color-palette-number: 9; +$o-gray-color-palette-number: 9; diff --git a/theme_common/static/src/scss/primary_variables.scss b/theme_common/static/src/scss/primary_variables.scss new file mode 100644 index 0000000..72feaa2 --- /dev/null +++ b/theme_common/static/src/scss/primary_variables.scss @@ -0,0 +1,5 @@ +//------------------------------------------------------------------------------ +// s_medias_list +//------------------------------------------------------------------------------ + +$s-medias-list-bg-color-main: null; // Default to BS color |