Skip to content

valencia
valencia
Commit 2fcda1ed authored by Mattia Migliorini's avatar Mattia Migliorini
Browse files
Options

Update vanilla framework, remove yui-min.js

parent dbb51318
Hide whitespace changes
Inline Side-by-side
Showing with 4276 additions and 4153 deletions
js/core.js
View file @ 2fcda1ed
/*jslint regexp: true */
/*global YUI, core, browser, window, Modernizr, localStorage */
/** /**
* Ubuntu Core Front-End Framework * Ubuntu Core Front-End Framework
* *
...@@ -5,274 +8,224 @@ ...@@ -5,274 +8,224 @@
* *
* This file containes the classes required by ubuntu.com to interact. * This file containes the classes required by ubuntu.com to interact.
* *
* @project Ubuntu Core Front-End Framework * @project Ubuntu Core Front-End Framework
* @author Web Team at Canonical Ltd * @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd * @copyright 2012 Canonical Ltd
*
*/
/**
* Table of contents
*
* Core
* - setEqualHeight
* - hashBang
* - getPullQuotes
* - setupTooltips
* *
*/ */
if(!core){ var core = {}; } if (!core) { var core = {}; }
YUI().use('node', 'anim','event-resize', function(Y) { YUI().use('node', 'anim', 'event-resize', function (Y) {
core.setEqualHeight = function($className) { core.setEqualHeight = function ($className) {
var maxHeight = 0; var maxHeight = 0,
var heightArray = Array(); collection = Y.all('.' + $className);
var collection = Y.all('.'+$className);
collection.each(function(node) { collection.each(function (node) {
node.all(' > div, > ul li').each(function(node) { node.all(' > div, > ul li').each(function (node) {
if(node.get('clientHeight') > maxHeight){ if (node.get('clientHeight') > maxHeight) {
maxHeight = node.get('clientHeight'); maxHeight = node.get('clientHeight');
} }
}); });
node.all('> div, > ul li').setStyle('height', maxHeight); node.all('> div, > ul li').setStyle('height', maxHeight);
maxHeight = 0; maxHeight = 0;
}); });
}; };
core.hashBang = function() { core.hashSlide = function () {
Y.all('#main-content a').each(function (node) { Y.all('#main-content a').each(function (node) {
var hrefValue = node.get('href'); if (node.get('hash') !== '') {
if( hrefValue.indexOf("#") != -1 ) { var targetURL = node.get('origin') + node.get('pathname');
var cleanTarget = core.qualifyURL(hrefValue.substr(0,hrefValue.indexOf('#'))); if (window.location.href === targetURL) {
var hashValue = hrefValue.substr(hrefValue.indexOf('#')+1); node.on("click", function (e) {
var cleanURL = window.location.href; e.preventDefault();
node.setAttribute('data-hash',hashValue); if (!this.hasClass('slideless')) {
node.set('href',hrefValue.substr(0,hrefValue.indexOf('#'))); core.slideToAnchor(node.get('hash'));
if(cleanURL == cleanTarget){ }
node.on("click", function (e) { });
e.preventDefault(); }
window.name = null; }
if(!this.hasClass('slideless')) { });
core.slideToAnchor(this.getAttribute('data-hash')); };
}
}); core.slideToAnchor = function ($name) {
}else{ if ($name !== '') {
node.on("click", function (e) { var destination = Y.one($name).getXY()[1] - 20,
window.name = '¬'+node.getAttribute('data-hash'); webkitAnim = new Y.Anim({
}); node: Y.one('html'),
} to: { scroll: [0, destination]},
}else{ easing: 'easeOut',
node.on("click", function (e) { duration: 1
window.name = null; }),
}); ffAnim = new Y.Anim({
} node: Y.one('body'),
}); to: { scroll: [0, destination]},
core.checkForSession(); easing: 'easeOut',
}; duration: 1
});
core.qualifyURL = function($url) { webkitAnim.run(1000);
var img = document.createElement('img'); ffAnim.run(1000);
img.src = $url; }
$url = img.src; };
img = null;
return $url; core.getPullQuotes = function () {
}; Y.all('span.pullquote').each(function (node) {
var item = Y.Node.create('<div class="pull-quote js">&ldquo;' + node.getContent() + '&rdquo;</div>');
core.checkForSession = function() { node.get('parentNode').get('parentNode').get('parentNode').append(item);
var session = window.name; });
if(session){ };
if(session.charAt(0) == '¬'){
core.jumpToAnchor(session.substring(1)); core.setupTooltips = function () {
} if (Y.one('.tooltip') !== null) {
} Y.all('.tooltip').each(function (node) {
}; node.get('parentNode').prepend('<p class="tooltip-label">' + node.get('title') + '</p>');
var title = this.get('title');
core.slideToAnchor = function($name) { node.on('mouseover', function () {
var target; this.set('title', '');
var destination = 0; this.get('parentNode').one('.tooltip-label').setStyle('display', 'inline');
if($name !== ''){ });
destination = Y.one('#'+$name).getXY()[1] - 20; node.on('mouseout', function () {
} this.set('title', title);
var webkitAnim = new Y.Anim({ this.get('parentNode').one('.tooltip-label').setStyle('display', 'none');
node: Y.one('html'), });
to: { scroll: [0, destination]}, });
easing: 'easeOut', }
duration: 1, };
});
var ffAnim = new Y.Anim({ core.sectionTabs = function () {
node: Y.one('body'),
to: { scroll: [0, destination]}, if (Y.one('.tabbed-content')) {
easing: 'easeOut', Y.one('.tabbed-menu').append('<img src="//assets.ubuntu.com/sites/ubuntu/latest/u/img/patterns/tabbed-nav-arrow.png" class="arrow" height="6" width="12" alt="">');
duration: 1,
}); var p = Y.one('.tabbed-menu a.active'),
webkitAnim.run(1000); s = p.get('href').split('#')[1],
ffAnim.run(1000); a = Y.one('.arrow'),
}; w = (p.get('clientWidth') / 2) - 7,
x = (p.get('parentNode').getXY()[0] - p.get('parentNode').get('parentNode').getXY()[0]) + w;
core.jumpToAnchor = function($name) { Y.all('.tabbed-content').each(function () {
if(document.getElementById($name)){ if (this.get('id') !== s) {
document.getElementById($name).scrollIntoView(); this.setStyle('opacity', '0');
}else{ }
window.name = null; });
} a.setStyle('left', x + 'px').setStyle('display', 'inline');
}; Y.all('.tabbed-menu a').on('click', function (e) {
e.preventDefault();
core.getPullQuotes = function() { Y.all('.tabbed-menu a').removeClass('active');
Y.all('span.pullquote').each(function (node) { e.currentTarget.addClass('active');
var item = Y.Node.create('<div class="pull-quote js">&ldquo;'+node.getContent()+'&rdquo;</div>'); Y.all('.tabbed-content').addClass('hide').setStyle('opacity', '0');
node.get('parentNode').get('parentNode').get('parentNode').append(item); s = e.currentTarget.get('hash');
}); Y.one(s).removeClass('hide');
}; new Y.Anim({ node: s, to: { opacity: 1 } }).run();
x = (e.currentTarget.get('parentNode').getXY()[0] - e.currentTarget.get('parentNode').get('parentNode').getXY()[0]) + w;
core.setupTooltips = function() { new Y.Anim({ node: a, to: { left: x + 'px' } }).run();
if(Y.one('.tooltip') !== null) { });
Y.all('.tooltip').each(function (node) { }
node.get('parentNode').prepend('<p class="tooltip-label">'+node.get('title')+'</p>'); };
var title = this.get('title');
node.on('mouseover', function(e){ core.tabbedContent = function () {
this.set('title',''); Y.all('.tabbed-content .accordion-button').on('click', function (e) {
this.get('parentNode').one('.tooltip-label').setStyle('display', 'inline'); e.preventDefault();
}); e.target.get('parentNode').toggleClass('open');
node.on('mouseout', function(e){ });
this.set('title',title); };
this.get('parentNode').one('.tooltip-label').setStyle('display', 'none');
}); core.svgFallback = function () {
}); if (typeof Modernizr === "object") {
} if (!Modernizr.svg || !Modernizr.backgroundsize) {
}; Y.all("img[src$='.svg']").each(function (node) {
node.setAttribute("src", node.getAttribute('src').toString().match(/.*\/(.+?)\./)[0] + 'png'); // jslint acceptable
core.sectionTabs = function() { });
}
if(Y.one('.tabbed-content')) { }
Y.one('.tabbed-menu').append('<img src="//assets.ubuntu.com/sites/ubuntu/latest/u/img/patterns/tabbed-nav-arrow.png" class="arrow" height="6" width="12" alt="">'); };
var p = Y.one('.tabbed-menu a.active'); core.resourceHubBoxes = function () {
var s = p.get('href').split('#')[1]; Y.all(".resource").on('click', function (e) {
var a = Y.one('.arrow'); e.preventDefault();
var w = (p.get('clientWidth') / 2) - 7; e.stopPropagation();
var x = (p.get('parentNode').getXY()[0] - p.get('parentNode').get('parentNode').getXY()[0]) + w; if (e.currentTarget.one('a') !== null) {
Y.all('.tabbed-content').each(function() { window.location = e.currentTarget.one('a').get("href");
if(this.get('id') != s){ }
this.setStyle('opacity', '0'); });
} };
}
); core.mobileNav = function () {
a.setStyle('left',x+'px').setStyle('display', 'inline'); if (Y.one('.header-search')) {
Y.all('.tabbed-menu a').on('click',function(e) { Y.one('.nav-primary').insert('<a class="search-toggle"></a><a id="menu" class="nav-toggle">menu</a>', 'before');
e.preventDefault(); } else {
Y.all('.tabbed-menu a').removeClass('active'); Y.one('.nav-primary').insert('</a><a id="menu" class="nav-toggle">menu</a>', 'before');
e.currentTarget.addClass('active'); }
Y.all('.tabbed-content').addClass('hide').setStyle('opacity','0');
s = e.currentTarget.getAttribute('data-hash'); Y.all('.nav-toggle').on('click', function (e) {
Y.one('#'+s).removeClass('hide'); e.preventDefault();
new Y.Anim({ node: '#'+s, to: { opacity: 1 } }).run(); if (Y.one('.header-search')) {
x = (e.currentTarget.get('parentNode').getXY()[0] - e.currentTarget.get('parentNode').get('parentNode').getXY()[0]) + w; Y.one('.header-search').removeClass('active');
new Y.Anim({ node: a, to: { left: x+'px' } }).run(); }
});
} Y.all('.nav-toggle').toggleClass('active');
} Y.all('header nav ul').toggleClass('active');
Y.all('.nav-primary').toggleClass('active');
core.tabbedContent = function() { });
Y.all('.tabbed-content .accordion-button').on('click', function(e){
e.preventDefault(); if (Y.one('.header-search')) {
e.target.get('parentNode').toggleClass('open'); Y.one('.search-toggle').on('click', function (e) {
}); e.preventDefault();
};
Y.all('.nav-toggle').removeClass('active');
core.svgFallback = function() { Y.all('header nav ul').removeClass('active');
if(Modernizr){ Y.all('.nav-primary').removeClass('active');
if (!Modernizr.svg || !Modernizr.backgroundsize) {
Y.all("img[src$='.svg']").each(function(node) { Y.one('.header-search').toggleClass('active');
node.setAttribute("src", node.getAttribute('src').toString().match(/.*\/(.+?)\./)[0]+'png'); Y.one('.header-search .form-text').focus();
}); });
} }
}
}; if (Y.one('.breadcrumb li a')) {
Y.one('.breadcrumb > li a').insert('<span class="after"></span>');
core.resourceHubBoxes = function() { Y.one('.breadcrumb li a .after').on('click', function (e) {
Y.all(".resource").on('click',function(e) { e.preventDefault();
e.preventDefault(); Y.one('.nav-secondary').toggleClass('open');
e.stopPropagation(); core.setLocalStorage('onboard');
if(e.currentTarget.one('a') !== null) { });
window.location = e.currentTarget.one('a').get("href"); }
}
}); };
};
core.navOnboarding = function () {
core.mobileNav = function() { var key = 'ubuntu',
if(Y.one('.header-search')) { nav_secondary = Y.one('.nav-secondary'),
Y.one('.nav-primary').insert('<a class="search-toggle"></a><a id="menu" class="nav-toggle">menu</a>','before'); ls;
} else {
Y.one('.nav-primary').insert('</a><a id="menu" class="nav-toggle">menu</a>','before'); if (nav_secondary && !nav_secondary.test(':empty')) {
} if (Y.one('html').hasClass('localstorage')) {
if (localStorage.getItem(key) === null) {
Y.all('.nav-toggle').on('click', function(e) { nav_secondary.addClass('open');
e.preventDefault(); } else {
if(Y.one('.header-search')) { ls = JSON.parse(localStorage.getItem(key));
Y.one('.header-search').removeClass('active'); if (ls.navigation !== 'onboard') {
} nav_secondary.addClass('open');
}
Y.all('.nav-toggle').toggleClass('active'); }
Y.all('header nav ul').toggleClass('active'); }
Y.all('.nav-primary').toggleClass('active'); }
}); };
if(Y.one('.header-search')) {
Y.one('.search-toggle').on('click', function(e) { core.setLocalStorage = function ($value) {
e.preventDefault(); var key = 'ubuntu',
value = $value,
Y.all('.nav-toggle').removeClass('active'); ubuntu = {};
Y.all('header nav ul').removeClass('active');
Y.all('.nav-primary').removeClass('active'); ubuntu.navigation = value;
localStorage.setItem(key, JSON.stringify(ubuntu));
Y.one('.header-search').toggleClass('active'); };
Y.one('.header-search .form-text').focus();
}); core.sectionTabs();
} core.tabbedContent();
if(Y.one('.breadcrumb li a')) { core.setEqualHeight('equal-height');
Y.one('.breadcrumb > li a').insert('<span class="after"></span>'); core.getPullQuotes();
Y.one('.breadcrumb li a .after').on('click', function(e) { core.setupTooltips();
e.preventDefault(); core.svgFallback();
Y.one('.nav-secondary').toggleClass('open'); core.resourceHubBoxes();
core.setLocalStorage('onboard'); core.mobileNav();
}); core.navOnboarding();
} core.hashSlide();
});
};
core.navOnboarding = function() {
var key = 'ubuntu';
var nav_secondary = Y.one('.nav-secondary');
if(nav_secondary && !nav_secondary.test(':empty')) {
if(Y.one('html').hasClass('localstorage')) {
if(localStorage.getItem(key) === null) {
nav_secondary.addClass('open');
}else{
ls = JSON.parse(localStorage.getItem( key ));
if(ls.navigation !== 'onboard') {
nav_secondary.addClass('open');
}
}
}
}
};
core.setLocalStorage = function($value) {
var key = 'ubuntu';
var value = $value;
var ubuntu = {};
var nav_secondary = Y.one('.nav-secondary');
ubuntu.navigation = value;
localStorage.setItem(key,JSON.stringify(ubuntu));
};
core.sectionTabs();
core.tabbedContent();
core.hashBang();
core.setEqualHeight('equal-height');
core.getPullQuotes();
core.setupTooltips();
core.svgFallback();
core.resourceHubBoxes();
core.mobileNav();
core.navOnboarding();
});
\ No newline at end of file
js/yui-min.js deleted 100644 → 0
View file @ dbb51318
/*
YUI 3.4.1 (build 4118)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
if(typeof YUI!="undefined"){YUI._YUI=YUI;}var YUI=function(){var c=0,f=this,b=arguments,a=b.length,e=function(h,g){return(h&&h.hasOwnProperty&&(h instanceof g));},d=(typeof YUI_config!=="undefined")&&YUI_config;if(!(e(f,YUI))){f=new YUI();}else{f._init();if(YUI.GlobalConfig){f.applyConfig(YUI.GlobalConfig);}if(d){f.applyConfig(d);}if(!a){f._setup();}}if(a){for(;c<a;c++){f.applyConfig(b[c]);}f._setup();}f.instanceOf=e;return f;};(function(){var p,b,q="3.4.1",h=".",n="http://yui.yahooapis.com/",t="yui3-js-enabled",l=function(){},g=Array.prototype.slice,r={"io.xdrReady":1,"io.xdrResponse":1,"SWF.eventHandler":1},f=(typeof window!="undefined"),e=(f)?window:null,v=(f)?e.document:null,d=v&&v.documentElement,a=d&&d.className,c={},i=new Date().getTime(),m=function(z,y,x,w){if(z&&z.addEventListener){z.addEventListener(y,x,w);}else{if(z&&z.attachEvent){z.attachEvent("on"+y,x);}}},u=function(A,z,y,w){if(A&&A.removeEventListener){try{A.removeEventListener(z,y,w);}catch(x){}}else{if(A&&A.detachEvent){A.detachEvent("on"+z,y);}}},s=function(){YUI.Env.windowLoaded=true;YUI.Env.DOMReady=true;if(f){u(window,"load",s);}},j=function(y,x){var w=y.Env._loader;if(w){w.ignoreRegistered=false;w.onEnd=null;w.data=null;w.required=[];w.loadType=null;}else{w=new y.Loader(y.config);y.Env._loader=w;}YUI.Env.core=y.Array.dedupe([].concat(YUI.Env.core,["loader-base","loader-rollup","loader-yui3"]));return w;},o=function(y,x){for(var w in x){if(x.hasOwnProperty(w)){y[w]=x[w];}}},k={success:true};if(d&&a.indexOf(t)==-1){if(a){a+=" ";}a+=t;d.className=a;}if(q.indexOf("@")>-1){q="3.3.0";}p={applyConfig:function(D){D=D||l;var y,A,z=this.config,B=z.modules,x=z.groups,C=z.rls,w=this.Env._loader;for(A in D){if(D.hasOwnProperty(A)){y=D[A];if(B&&A=="modules"){o(B,y);}else{if(x&&A=="groups"){o(x,y);}else{if(C&&A=="rls"){o(C,y);}else{if(A=="win"){z[A]=y.contentWindow||y;z.doc=z[A].document;}else{if(A=="_yuid"){}else{z[A]=y;}}}}}}}if(w){w._config(D);}},_config:function(w){this.applyConfig(w);},_init:function(){var y,z=this,w=YUI.Env,x=z.Env,A;z.version=q;if(!x){z.Env={core:["get","features","intl-base","yui-log","yui-later","loader-base","loader-rollup","loader-yui3"],mods:{},versions:{},base:n,cdn:n+q+"/build/",_idx:0,_used:{},_attached:{},_missed:[],_yidx:0,_uidx:0,_guidp:"y",_loaded:{},_BASE_RE:/(?:\?(?:[^&]*&)*([^&]*))?\b(simpleyui|yui(?:-\w+)?)\/\2(?:-(min|debug))?\.js/,parseBasePath:function(F,D){var B=F.match(D),E,C;if(B){E=RegExp.leftContext||F.slice(0,F.indexOf(B[0]));C=B[3];if(B[1]){E+="?"+B[1];}E={filter:C,path:E};}return E;},getBase:w&&w.getBase||function(F){var D=(v&&v.getElementsByTagName("script"))||[],G=x.cdn,C,E,B,H;for(E=0,B=D.length;E<B;++E){H=D[E].src;if(H){C=z.Env.parseBasePath(H,F);if(C){y=C.filter;G=C.path;break;}}}return G;}};x=z.Env;x._loaded[q]={};if(w&&z!==YUI){x._yidx=++w._yidx;x._guidp=("yui_"+q+"_"+x._yidx+"_"+i).replace(/\./g,"_");}else{if(YUI._YUI){w=YUI._YUI.Env;x._yidx+=w._yidx;x._uidx+=w._uidx;for(A in w){if(!(A in x)){x[A]=w[A];}}delete YUI._YUI;}}z.id=z.stamp(z);c[z.id]=z;}z.constructor=YUI;z.config=z.config||{win:e,doc:v,debug:true,useBrowserConsole:true,throwFail:true,bootstrap:true,cacheUse:true,fetchCSS:true,use_rls:false,rls_timeout:2000};if(YUI.Env.rls_disabled){z.config.use_rls=false;}z.config.lang=z.config.lang||"en-US";z.config.base=YUI.config.base||z.Env.getBase(z.Env._BASE_RE);if(!y||(!("mindebug").indexOf(y))){y="min";}y=(y)?"-"+y:y;z.config.loaderPath=YUI.config.loaderPath||"loader/loader"+y+".js";},_setup:function(B){var x,A=this,w=[],z=YUI.Env.mods,y=A.config.core||[].concat(YUI.Env.core);for(x=0;x<y.length;x++){if(z[y[x]]){w.push(y[x]);}}A._attach(["yui-base"]);A._attach(w);if(A.Loader){j(A);}},applyTo:function(C,B,y){if(!(B in r)){this.log(B+": applyTo not allowed","warn","yui");return null;}var x=c[C],A,w,z;if(x){A=B.split(".");w=x;for(z=0;z<A.length;z=z+1){w=w[A[z]];if(!w){this.log("applyTo not found: "+B,"warn","yui");}}return w.apply(x,y);}return null;},add:function(x,C,B,w){w=w||{};var A=YUI.Env,D={name:x,fn:C,version:B,details:w},E,z,y=A.versions;A.mods[x]=D;y[B]=y[B]||{};y[B][x]=D;for(z in c){if(c.hasOwnProperty(z)){E=c[z].Env._loader;if(E){if(!E.moduleInfo[x]){E.addModule(w,x);}}}}return this;},_attach:function(B,M){var F,N,L,I,w,D,y,z=YUI.Env.mods,G=YUI.Env.aliases,x=this,E,A=x.Env._loader,C=x.Env._attached,H=B.length,A,K=[];for(F=0;F<H;F++){N=B[F];L=z[N];K.push(N);if(A&&A.conditions[N]){x.Object.each(A.conditions[N],function(P){var O=P&&((P.ua&&x.UA[P.ua])||(P.test&&P.test(x)));if(O){K.push(P.name);}});}}B=K;H=B.length;for(F=0;F<H;F++){if(!C[B[F]]){N=B[F];L=z[N];if(G&&G[N]){x._attach(G[N]);continue;}if(!L){if(A&&A.moduleInfo[N]){L=A.moduleInfo[N];M=true;}if(!M){if((N.indexOf("skin-")===-1)&&(N.indexOf("css")===-1)){x.Env._missed.push(N);x.Env._missed=x.Array.dedupe(x.Env._missed);x.message("NOT loaded: "+N,"warn","yui");}}}else{C[N]=true;for(E=0;E<x.Env._missed.length;E++){if(x.Env._missed[E]===N){x.message("Found: "+N+" (was reported as missing earlier)","warn","yui");x.Env._missed.splice(E,1);}}I=L.details;w=I.requires;D=I.use;y=I.after;if(w){for(E=0;E<w.length;E++){if(!C[w[E]]){if(!x._attach(w)){return false;}break;}}}if(y){for(E=0;E<y.length;E++){if(!C[y[E]]){if(!x._attach(y,true)){return false;}break;}}}if(L.fn){try{L.fn(x,N);}catch(J){x.error("Attach error: "+N,J,N);return false;}}if(D){for(E=0;E<D.length;E++){if(!C[D[E]]){if(!x._attach(D)){return false;}break;}}}}}}return true;},use:function(){var y=g.call(arguments,0),C=y[y.length-1],B=this,A=0,x,w=B.Env,z=true;if(B.Lang.isFunction(C)){y.pop();}else{C=null;}if(B.Lang.isArray(y[0])){y=y[0];}if(B.config.cacheUse){while((x=y[A++])){if(!w._attached[x]){z=false;break;}}if(z){if(y.length){}B._notify(C,k,y);return B;}}if(B._loading){B._useQueue=B._useQueue||new B.Queue();B._useQueue.add([y,C]);}else{B._use(y,function(E,D){E._notify(C,D,y);});}return B;},_notify:function(z,w,x){if(!w.success&&this.config.loadErrorFn){this.config.loadErrorFn.call(this,this,z,w,x);}else{if(z){try{z(this,w);}catch(y){this.error("use callback error",y,x);
}}}},_use:function(y,A){if(!this.Array){this._attach(["yui-base"]);}var M,F,N,K,x=this,O=YUI.Env,z=O.mods,w=x.Env,C=w._used,J=O._loaderQueue,R=y[0],E=x.Array,P=x.config,D=P.bootstrap,L=[],H=[],Q=true,B=P.fetchCSS,I=function(T,S){if(!T.length){return;}E.each(T,function(W){if(!S){H.push(W);}if(C[W]){return;}var U=z[W],X,V;if(U){C[W]=true;X=U.details.requires;V=U.details.use;}else{if(!O._loaded[q][W]){L.push(W);}else{C[W]=true;}}if(X&&X.length){I(X);}if(V&&V.length){I(V,1);}});},G=function(W){var U=W||{success:true,msg:"not dynamic"},T,S,V=true,X=U.data;x._loading=false;if(X){S=L;L=[];H=[];I(X);T=L.length;if(T){if(L.sort().join()==S.sort().join()){T=false;}}}if(T&&X){x._loading=false;x._use(y,function(){if(x._attach(X)){x._notify(A,U,X);}});}else{if(X){V=x._attach(X);}if(V){x._notify(A,U,y);}}if(x._useQueue&&x._useQueue.size()&&!x._loading){x._use.apply(x,x._useQueue.next());}};if(R==="*"){Q=x._attach(x.Object.keys(z));if(Q){G();}return x;}if(D&&x.Loader&&y.length){F=j(x);F.require(y);F.ignoreRegistered=true;F.calculate(null,(B)?null:"js");y=F.sorted;}I(y);M=L.length;if(M){L=x.Object.keys(E.hash(L));M=L.length;}if(D&&M&&x.Loader){x._loading=true;F=j(x);F.onEnd=G;F.context=x;F.data=y;F.ignoreRegistered=false;F.require(y);F.insert(null,(B)?null:"js");}else{if(M&&x.config.use_rls&&!YUI.Env.rls_enabled){O._rls_queue=O._rls_queue||new x.Queue();K=function(S,U){var T=function(W){G(W);S.rls_advance();},V=S._rls(U);if(V){S.rls_oncomplete(function(W){T(W);});S.Get.script(V,{data:U,timeout:S.config.rls_timeout,onFailure:S.rls_handleFailure,onTimeout:S.rls_handleTimeout});}else{T({success:true,data:U});}};O._rls_queue.add(function(){O._rls_in_progress=true;x.rls_callback=A;x.rls_locals(x,y,K);});if(!O._rls_in_progress&&O._rls_queue.size()){O._rls_queue.next()();}}else{if(D&&M&&x.Get&&!w.bootstrapped){x._loading=true;N=function(){x._loading=false;J.running=false;w.bootstrapped=true;O._bootstrapping=false;if(x._attach(["loader"])){x._use(y,A);}};if(O._bootstrapping){J.add(N);}else{O._bootstrapping=true;x.Get.script(P.base+P.loaderPath,{onEnd:N});}}else{Q=x._attach(y);if(Q){G();}}}}return x;},namespace:function(){var x=arguments,B=this,z=0,y,A,w;for(;z<x.length;z++){w=x[z];if(w.indexOf(h)){A=w.split(h);for(y=(A[0]=="YAHOO")?1:0;y<A.length;y++){B[A[y]]=B[A[y]]||{};B=B[A[y]];}}else{B[w]=B[w]||{};}}return B;},log:l,message:l,dump:function(w){return""+w;},error:function(A,y,x){var z=this,w;if(z.config.errorFn){w=z.config.errorFn.apply(z,arguments);}if(z.config.throwFail&&!w){throw (y||new Error(A));}else{z.message(A,"error");}return z;},guid:function(w){var x=this.Env._guidp+"_"+(++this.Env._uidx);return(w)?(w+x):x;},stamp:function(y,z){var w;if(!y){return y;}if(y.uniqueID&&y.nodeType&&y.nodeType!==9){w=y.uniqueID;}else{w=(typeof y==="string")?y:y._yuid;}if(!w){w=this.guid();if(!z){try{y._yuid=w;}catch(x){w=null;}}}return w;},destroy:function(){var w=this;if(w.Event){w.Event._unload();}delete c[w.id];delete w.Env;delete w.config;}};YUI.prototype=p;for(b in p){if(p.hasOwnProperty(b)){YUI[b]=p[b];}}YUI._init();if(f){m(window,"load",s);}else{s();}YUI.Env.add=m;YUI.Env.remove=u;if(typeof exports=="object"){exports.YUI=YUI;}}());YUI.add("yui-base",function(b){var i=b.Lang||(b.Lang={}),n=String.prototype,k=Object.prototype.toString,a={"undefined":"undefined","number":"number","boolean":"boolean","string":"string","[object Function]":"function","[object RegExp]":"regexp","[object Array]":"array","[object Date]":"date","[object Error]":"error"},c=/\{\s*([^|}]+?)\s*(?:\|([^}]*))?\s*\}/g,s=/^\s+|\s+$/g,e=b.config.win,o=e&&!!(e.MooTools||e.Prototype);i.isArray=(!o&&Array.isArray)||function(w){return i.type(w)==="array";};i.isBoolean=function(w){return typeof w==="boolean";};i.isFunction=function(w){return i.type(w)==="function";};i.isDate=function(w){return i.type(w)==="date"&&w.toString()!=="Invalid Date"&&!isNaN(w);};i.isNull=function(w){return w===null;};i.isNumber=function(w){return typeof w==="number"&&isFinite(w);};i.isObject=function(y,x){var w=typeof y;return(y&&(w==="object"||(!x&&(w==="function"||i.isFunction(y)))))||false;};i.isString=function(w){return typeof w==="string";};i.isUndefined=function(w){return typeof w==="undefined";};i.trim=n.trim?function(w){return w&&w.trim?w.trim():w;}:function(w){try{return w.replace(s,"");}catch(x){return w;}};i.trimLeft=n.trimLeft?function(w){return w.trimLeft();}:function(w){return w.replace(/^\s+/,"");};i.trimRight=n.trimRight?function(w){return w.trimRight();}:function(w){return w.replace(/\s+$/,"");};i.isValue=function(x){var w=i.type(x);switch(w){case"number":return isFinite(x);case"null":case"undefined":return false;default:return !!w;}};i.type=function(w){return a[typeof w]||a[k.call(w)]||(w?"object":"null");};i.sub=function(w,x){return w.replace?w.replace(c,function(y,z){return i.isUndefined(x[z])?y:x[z];}):w;};i.now=Date.now||function(){return new Date().getTime();};var f=b.Lang,r=Array.prototype,p=Object.prototype.hasOwnProperty;function j(y,B,A){var x,w;B||(B=0);if(A||j.test(y)){try{return r.slice.call(y,B);}catch(z){w=[];for(x=y.length;B<x;++B){w.push(y[B]);}return w;}}return[y];}b.Array=j;j.dedupe=function(B){var A={},y=[],x,z,w;for(x=0,w=B.length;x<w;++x){z=B[x];if(!p.call(A,z)){A[z]=1;y.push(z);}}return y;};j.each=j.forEach=r.forEach?function(y,w,x){r.forEach.call(y||[],w,x||b);return b;}:function(A,y,z){for(var x=0,w=(A&&A.length)||0;x<w;++x){if(x in A){y.call(z||b,A[x],x,A);}}return b;};j.hash=function(z,x){var A={},B=(x&&x.length)||0,y,w;for(y=0,w=z.length;y<w;++y){if(y in z){A[z[y]]=B>y&&y in x?x[y]:true;}}return A;};j.indexOf=r.indexOf?function(x,w){return r.indexOf.call(x,w);}:function(z,y){for(var x=0,w=z.length;x<w;++x){if(x in z&&z[x]===y){return x;}}return -1;};j.numericSort=function(x,w){return x-w;};j.some=r.some?function(y,w,x){return r.some.call(y,w,x);}:function(A,y,z){for(var x=0,w=A.length;x<w;++x){if(x in A&&y.call(z,A[x],x,A)){return true;}}return false;};j.test=function(y){var w=0;if(f.isArray(y)){w=1;}else{if(f.isObject(y)){try{if("length" in y&&!y.tagName&&!y.alert&&!y.apply){w=2;
}}catch(x){}}}return w;};function u(){this._init();this.add.apply(this,arguments);}u.prototype={_init:function(){this._q=[];},next:function(){return this._q.shift();},last:function(){return this._q.pop();},add:function(){this._q.push.apply(this._q,arguments);return this;},size:function(){return this._q.length;}};b.Queue=u;YUI.Env._loaderQueue=YUI.Env._loaderQueue||new u();var m="__",p=Object.prototype.hasOwnProperty,l=b.Lang.isObject;b.cached=function(y,w,x){w||(w={});return function(z){var A=arguments.length>1?Array.prototype.join.call(arguments,m):String(z);if(!(A in w)||(x&&w[A]==x)){w[A]=y.apply(y,arguments);}return w[A];};};b.merge=function(){var y=arguments,z=0,x=y.length,w={};for(;z<x;++z){b.mix(w,y[z],true);}return w;};b.mix=function(w,x,D,y,A,E){var B,H,G,z,I,C,F;if(!w||!x){return w||b;}if(A){if(A===2){b.mix(w.prototype,x.prototype,D,y,0,E);}G=A===1||A===3?x.prototype:x;F=A===1||A===4?w.prototype:w;if(!G||!F){return w;}}else{G=x;F=w;}B=D&&!E;if(y){for(z=0,C=y.length;z<C;++z){I=y[z];if(!p.call(G,I)){continue;}H=B?false:I in F;if(E&&H&&l(F[I],true)&&l(G[I],true)){b.mix(F[I],G[I],D,null,0,E);}else{if(D||!H){F[I]=G[I];}}}}else{for(I in G){if(!p.call(G,I)){continue;}H=B?false:I in F;if(E&&H&&l(F[I],true)&&l(G[I],true)){b.mix(F[I],G[I],D,null,0,E);}else{if(D||!H){F[I]=G[I];}}}if(b.Object._hasEnumBug){b.mix(F,G,D,b.Object._forceEnum,A,E);}}return w;};var p=Object.prototype.hasOwnProperty,e=b.config.win,o=e&&!!(e.MooTools||e.Prototype),v,g=b.Object=(!o&&Object.create)?function(w){return Object.create(w);}:(function(){function w(){}return function(x){w.prototype=x;return new w();};}()),d=g._forceEnum=["hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toString","toLocaleString","valueOf"],t=g._hasEnumBug=!{valueOf:0}.propertyIsEnumerable("valueOf"),q=g._hasProtoEnumBug=(function(){}).propertyIsEnumerable("prototype"),h=g.owns=function(x,w){return !!x&&p.call(x,w);};g.hasKey=h;g.keys=(!o&&Object.keys)||function(A){if(!b.Lang.isObject(A)){throw new TypeError("Object.keys called on a non-object");}var z=[],y,x,w;if(q&&typeof A==="function"){for(x in A){if(h(A,x)&&x!=="prototype"){z.push(x);}}}else{for(x in A){if(h(A,x)){z.push(x);}}}if(t){for(y=0,w=d.length;y<w;++y){x=d[y];if(h(A,x)){z.push(x);}}}return z;};g.values=function(A){var z=g.keys(A),y=0,w=z.length,x=[];for(;y<w;++y){x.push(A[z[y]]);}return x;};g.size=function(x){try{return g.keys(x).length;}catch(w){return 0;}};g.hasValue=function(x,w){return b.Array.indexOf(g.values(x),w)>-1;};g.each=function(z,x,A,y){var w;for(w in z){if(y||h(z,w)){x.call(A||b,z[w],w,z);}}return b;};g.some=function(z,x,A,y){var w;for(w in z){if(y||h(z,w)){if(x.call(A||b,z[w],w,z)){return true;}}}return false;};g.getValue=function(A,z){if(!b.Lang.isObject(A)){return v;}var x,y=b.Array(z),w=y.length;for(x=0;A!==v&&x<w;x++){A=A[y[x]];}return A;};g.setValue=function(C,A,B){var w,z=b.Array(A),y=z.length-1,x=C;if(y>=0){for(w=0;x!==v&&w<y;w++){x=x[z[w]];}if(x!==v){x[z[w]]=B;}else{return v;}}return C;};g.isEmpty=function(w){return !g.keys(w).length;};YUI.Env.parseUA=function(C){var B=function(F){var G=0;return parseFloat(F.replace(/\./g,function(){return(G++==1)?"":".";}));},E=b.config.win,w=E&&E.navigator,z={ie:0,opera:0,gecko:0,webkit:0,safari:0,chrome:0,mobile:null,air:0,ipad:0,iphone:0,ipod:0,ios:null,android:0,webos:0,caja:w&&w.cajaVersion,secure:false,os:null},x=C||w&&w.userAgent,D=E&&E.location,y=D&&D.href,A;z.userAgent=x;z.secure=y&&(y.toLowerCase().indexOf("https")===0);if(x){if((/windows|win32/i).test(x)){z.os="windows";}else{if((/macintosh/i).test(x)){z.os="macintosh";}else{if((/rhino/i).test(x)){z.os="rhino";}}}if((/KHTML/).test(x)){z.webkit=1;}A=x.match(/AppleWebKit\/([^\s]*)/);if(A&&A[1]){z.webkit=B(A[1]);z.safari=z.webkit;if(/ Mobile\//.test(x)){z.mobile="Apple";A=x.match(/OS ([^\s]*)/);if(A&&A[1]){A=B(A[1].replace("_","."));}z.ios=A;z.ipad=z.ipod=z.iphone=0;A=x.match(/iPad|iPod|iPhone/);if(A&&A[0]){z[A[0].toLowerCase()]=z.ios;}}else{A=x.match(/NokiaN[^\/]*|webOS\/\d\.\d/);if(A){z.mobile=A[0];}if(/webOS/.test(x)){z.mobile="WebOS";A=x.match(/webOS\/([^\s]*);/);if(A&&A[1]){z.webos=B(A[1]);}}if(/ Android/.test(x)){if(/Mobile/.test(x)){z.mobile="Android";}A=x.match(/Android ([^\s]*);/);if(A&&A[1]){z.android=B(A[1]);}}}A=x.match(/Chrome\/([^\s]*)/);if(A&&A[1]){z.chrome=B(A[1]);z.safari=0;}else{A=x.match(/AdobeAIR\/([^\s]*)/);if(A){z.air=A[0];}}}if(!z.webkit){A=x.match(/Opera[\s\/]([^\s]*)/);if(A&&A[1]){z.opera=B(A[1]);A=x.match(/Version\/([^\s]*)/);if(A&&A[1]){z.opera=B(A[1]);}A=x.match(/Opera Mini[^;]*/);if(A){z.mobile=A[0];}}else{A=x.match(/MSIE\s([^;]*)/);if(A&&A[1]){z.ie=B(A[1]);}else{A=x.match(/Gecko\/([^\s]*)/);if(A){z.gecko=1;A=x.match(/rv:([^\s\)]*)/);if(A&&A[1]){z.gecko=B(A[1]);}}}}}}if(!C){YUI.Env.UA=z;}return z;};b.UA=YUI.Env.UA||YUI.Env.parseUA();YUI.Env.aliases={"anim":["anim-base","anim-color","anim-curve","anim-easing","anim-node-plugin","anim-scroll","anim-xy"],"app":["controller","model","model-list","view"],"attribute":["attribute-base","attribute-complex"],"autocomplete":["autocomplete-base","autocomplete-sources","autocomplete-list","autocomplete-plugin"],"base":["base-base","base-pluginhost","base-build"],"cache":["cache-base","cache-offline","cache-plugin"],"collection":["array-extras","arraylist","arraylist-add","arraylist-filter","array-invoke"],"dataschema":["dataschema-base","dataschema-json","dataschema-xml","dataschema-array","dataschema-text"],"datasource":["datasource-local","datasource-io","datasource-get","datasource-function","datasource-cache","datasource-jsonschema","datasource-xmlschema","datasource-arrayschema","datasource-textschema","datasource-polling"],"datatable":["datatable-base","datatable-datasource","datatable-sort","datatable-scroll"],"datatype":["datatype-number","datatype-date","datatype-xml"],"datatype-date":["datatype-date-parse","datatype-date-format"],"datatype-number":["datatype-number-parse","datatype-number-format"],"datatype-xml":["datatype-xml-parse","datatype-xml-format"],"dd":["dd-ddm-base","dd-ddm","dd-ddm-drop","dd-drag","dd-proxy","dd-constrain","dd-drop","dd-scroll","dd-delegate"],"dom":["dom-base","dom-screen","dom-style","selector-native","selector"],"editor":["frame","selection","exec-command","editor-base","editor-para","editor-br","editor-bidi","editor-tab","createlink-base"],"event":["event-base","event-delegate","event-synthetic","event-mousewheel","event-mouseenter","event-key","event-focus","event-resize","event-hover","event-outside"],"event-custom":["event-custom-base","event-custom-complex"],"event-gestures":["event-flick","event-move"],"highlight":["highlight-base","highlight-accentfold"],"history":["history-base","history-hash","history-hash-ie","history-html5"],"io":["io-base","io-xdr","io-form","io-upload-iframe","io-queue"],"json":["json-parse","json-stringify"],"loader":["loader-base","loader-rollup","loader-yui3"],"node":["node-base","node-event-delegate","node-pluginhost","node-screen","node-style"],"pluginhost":["pluginhost-base","pluginhost-config"],"querystring":["querystring-parse","querystring-stringify"],"recordset":["recordset-base","recordset-sort","recordset-filter","recordset-indexer"],"resize":["resize-base","resize-proxy","resize-constrain"],"slider":["slider-base","slider-value-range","clickable-rail","range-slider"],"text":["text-accentfold","text-wordbreak"],"widget":["widget-base","widget-htmlparser","widget-uievents","widget-skin"]};
},"3.4.1");YUI.add("get",function(e){var B=e.UA,p=e.Lang,b="text/javascript",v="text/css",I="stylesheet",s="script",q="autopurge",A="utf-8",w="link",C="async",h=true,l={script:h,css:!(B.webkit||B.gecko)},z={},r=0,g,u=function(J){var K=J.timer;if(K){clearTimeout(K);J.timer=null;}},m=function(M,J,P,N){var K=N||e.config.win,O=K.document,Q=O.createElement(M),L;if(P){e.mix(J,P);}for(L in J){if(J[L]&&J.hasOwnProperty(L)){Q.setAttribute(L,J[L]);}}return Q;},k=function(K,L,J){return m(w,{id:e.guid(),type:v,rel:I,href:K},J,L);},E=function(K,L,J){return m(s,{id:e.guid(),type:b,src:K},J,L);},a=function(K,L,J){return{tId:K.tId,win:K.win,data:K.data,nodes:K.nodes,msg:L,statusText:J,purge:function(){d(this.tId);}};},o=function(N,M,J){var L=z[N],K=L&&L.onEnd;L.finished=true;if(K){K.call(L.context,a(L,M,J));}},F=function(M,L){var K=z[M],J=K.onFailure;u(K);if(J){J.call(K.context,a(K,L));}o(M,L,"failure");},y=function(J){F(J,"transaction "+J+" was aborted");},x=function(L){var J=z[L],K=J.onSuccess;u(J);if(J.aborted){y(L);}else{if(K){K.call(J.context,a(J));}o(L,undefined,"OK");}},H=function(J,M){var K=z[M],L=(p.isString(J))?K.win.document.getElementById(J):J;if(!L){F(M,"target node not found: "+J);}return L;},d=function(O){var K,R,S,T,L,Q,P,N,M,J=z[O];if(J){K=J.nodes;M=K.length;for(N=0;N<M;N++){L=K[N];S=L.parentNode;if(L.clearAttributes){L.clearAttributes();}else{for(Q in L){if(L.hasOwnProperty(Q)){delete L[Q];}}}S.removeChild(L);}}J.nodes=[];},t=function(N,J){var K=z[N],L=K.onProgress,M;if(L){M=a(K);M.url=J;L.call(K.context,M);}},D=function(L){var J=z[L],K=J.onTimeout;if(K){K.call(J.context,a(J));}o(L,"timeout","timeout");},f=function(M,J){var L=z[M],K=(L&&!L.async);if(!L){return;}if(K){u(L);}t(M,J);if(!L.finished){if(L.aborted){y(M);}else{if((--L.remaining)===0){x(M);}else{if(K){i(M);}}}}},c=function(K,M,L,J){if(B.ie){M.onreadystatechange=function(){var N=this.readyState;if("loaded"===N||"complete"===N){M.onreadystatechange=null;f(L,J);}};}else{if(B.webkit){if(K===s){M.addEventListener("load",function(){f(L,J);},false);}}else{M.onload=function(){f(L,J);};M.onerror=function(N){F(L,N+": "+J);};}}},G=function(L,P,O){var M=z[P],N=O.document,J=M.insertBefore||N.getElementsByTagName("base")[0],K;if(J){K=H(J,P);if(K){K.parentNode.insertBefore(L,K);}}else{N.getElementsByTagName("head")[0].appendChild(L);}},i=function(Q){var O=z[Q],L=O.type,K=O.attributes,P=O.win,N=O.timeout,M,J;if(O.url.length>0){J=O.url.shift();if(N&&!O.timer){O.timer=setTimeout(function(){D(Q);},N);}if(L===s){M=E(J,P,K);}else{M=k(J,P,K);}O.nodes.push(M);c(L,M,Q,J);G(M,Q,P);if(!l[L]){f(Q,J);}if(O.async){i(Q);}}},n=function(){if(g){return;}g=true;var J,K;for(J in z){if(z.hasOwnProperty(J)){K=z[J];if(K.autopurge&&K.finished){d(K.tId);delete z[J];}}}g=false;},j=function(K,J,L){L=L||{};var O="q"+(r++),N=L.purgethreshold||e.Get.PURGE_THRESH,M;if(r%N===0){n();}M=z[O]=e.merge(L);M.tId=O;M.type=K;M.url=J;M.finished=false;M.nodes=[];M.win=M.win||e.config.win;M.context=M.context||M;M.autopurge=(q in M)?M.autopurge:(K===s)?true:false;M.attributes=M.attributes||{};M.attributes.charset=L.charset||M.attributes.charset||A;if(C in M&&K===s){M.attributes.async=M.async;}M.url=(p.isString(M.url))?[M.url]:M.url;if(!M.url[0]){M.url.shift();}M.remaining=M.url.length;i(O);return{tId:O};};e.Get={PURGE_THRESH:20,abort:function(K){var L=(p.isString(K))?K:K.tId,J=z[L];if(J){J.aborted=true;}},script:function(J,K){return j(s,J,K);},css:function(J,K){return j("css",J,K);}};},"3.4.1",{requires:["yui-base"]});YUI.add("features",function(b){var c={};b.mix(b.namespace("Features"),{tests:c,add:function(d,e,f){c[d]=c[d]||{};c[d][e]=f;},all:function(e,f){var g=c[e],d=[];if(g){b.Object.each(g,function(i,h){d.push(h+":"+(b.Features.test(e,h,f)?1:0));});}return(d.length)?d.join(";"):"";},test:function(e,g,f){f=f||[];var d,i,k,j=c[e],h=j&&j[g];if(!h){}else{d=h.result;if(b.Lang.isUndefined(d)){i=h.ua;if(i){d=(b.UA[i]);}k=h.test;if(k&&((!i)||d)){d=k.apply(b,f);}h.result=d;}}return d;}});var a=b.Features.add;a("load","0",{"name":"graphics-canvas-default","test":function(f){var e=f.config.doc,d=e&&e.createElement("canvas");return(e&&!e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")&&(d&&d.getContext&&d.getContext("2d")));},"trigger":"graphics"});a("load","1",{"name":"autocomplete-list-keys","test":function(d){return !(d.UA.ios||d.UA.android);},"trigger":"autocomplete-list"});a("load","2",{"name":"graphics-svg","test":function(e){var d=e.config.doc;return(d&&d.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1"));},"trigger":"graphics"});a("load","3",{"name":"history-hash-ie","test":function(e){var d=e.config.doc&&e.config.doc.documentMode;return e.UA.ie&&(!("onhashchange" in e.config.win)||!d||d<8);},"trigger":"history-hash"});a("load","4",{"name":"graphics-vml-default","test":function(f){var e=f.config.doc,d=e&&e.createElement("canvas");return(e&&!e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")&&(!d||!d.getContext||!d.getContext("2d")));},"trigger":"graphics"});a("load","5",{"name":"graphics-svg-default","test":function(e){var d=e.config.doc;return(d&&d.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1"));},"trigger":"graphics"});a("load","6",{"name":"widget-base-ie","trigger":"widget-base","ua":"ie"});a("load","7",{"name":"transition-timer","test":function(g){var f=g.config.doc,e=(f)?f.documentElement:null,d=true;if(e&&e.style){d=!("MozTransition" in e.style||"WebkitTransition" in e.style);}return d;},"trigger":"transition"});a("load","8",{"name":"dom-style-ie","test":function(j){var h=j.Features.test,i=j.Features.add,f=j.config.win,g=j.config.doc,d="documentElement",e=false;i("style","computedStyle",{test:function(){return f&&"getComputedStyle" in f;}});i("style","opacity",{test:function(){return g&&"opacity" in g[d].style;}});e=(!h("style","opacity")&&!h("style","computedStyle"));return e;},"trigger":"dom-style"});a("load","9",{"name":"selector-css2","test":function(f){var e=f.config.doc,d=e&&!("querySelectorAll" in e);
return d;},"trigger":"selector"});a("load","10",{"name":"event-base-ie","test":function(e){var d=e.config.doc&&e.config.doc.implementation;return(d&&(!d.hasFeature("Events","2.0")));},"trigger":"node-base"});a("load","11",{"name":"dd-gestures","test":function(d){return(d.config.win&&("ontouchstart" in d.config.win&&!d.UA.chrome));},"trigger":"dd-drag"});a("load","12",{"name":"scrollview-base-ie","trigger":"scrollview-base","ua":"ie"});a("load","13",{"name":"graphics-canvas","test":function(f){var e=f.config.doc,d=e&&e.createElement("canvas");return(e&&!e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")&&(d&&d.getContext&&d.getContext("2d")));},"trigger":"graphics"});a("load","14",{"name":"graphics-vml","test":function(f){var e=f.config.doc,d=e&&e.createElement("canvas");return(e&&!e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")&&(!d||!d.getContext||!d.getContext("2d")));},"trigger":"graphics"});},"3.4.1",{requires:["yui-base"]});YUI.add("intl-base",function(b){var a=/[, ]/;b.mix(b.namespace("Intl"),{lookupBestLang:function(g,h){var f,j,c,e;function d(l){var k;for(k=0;k<h.length;k+=1){if(l.toLowerCase()===h[k].toLowerCase()){return h[k];}}}if(b.Lang.isString(g)){g=g.split(a);}for(f=0;f<g.length;f+=1){j=g[f];if(!j||j==="*"){continue;}while(j.length>0){c=d(j);if(c){return c;}else{e=j.lastIndexOf("-");if(e>=0){j=j.substring(0,e);if(e>=2&&j.charAt(e-2)==="-"){j=j.substring(0,e-2);}}else{break;}}}}return"";}});},"3.4.1",{requires:["yui-base"]});YUI.add("yui-log",function(d){var c=d,e="yui:log",a="undefined",b={debug:1,info:1,warn:1,error:1};c.log=function(j,s,g,q){var l,p,n,k,o,i=c,r=i.config,h=(i.fire)?i:YUI.Env.globalEvents;if(r.debug){if(g){p=r.logExclude;n=r.logInclude;if(n&&!(g in n)){l=1;}else{if(n&&(g in n)){l=!n[g];}else{if(p&&(g in p)){l=p[g];}}}}if(!l){if(r.useBrowserConsole){k=(g)?g+": "+j:j;if(i.Lang.isFunction(r.logFn)){r.logFn.call(i,j,s,g);}else{if(typeof console!=a&&console.log){o=(s&&console[s]&&(s in b))?s:"log";console[o](k);}else{if(typeof opera!=a){opera.postError(k);}}}}if(h&&!q){if(h==i&&(!h.getEvent(e))){h.publish(e,{broadcast:2});}h.fire(e,{msg:j,cat:s,src:g});}}}return i;};c.message=function(){return c.log.apply(c,arguments);};},"3.4.1",{requires:["yui-base"]});YUI.add("yui-later",function(b){var a=[];b.later=function(j,f,k,g,h){j=j||0;g=(!b.Lang.isUndefined(g))?b.Array(g):a;f=f||b.config.win||b;var i=false,c=(f&&b.Lang.isString(k))?f[k]:k,d=function(){if(!i){if(!c.apply){c(g[0],g[1],g[2],g[3]);}else{c.apply(f,g||a);}}},e=(h)?setInterval(d,j):setTimeout(d,j);return{id:e,interval:h,cancel:function(){i=true;if(this.interval){clearInterval(e);}else{clearTimeout(e);}}};};b.Lang.later=b.later;},"3.4.1",{requires:["yui-base"]});YUI.add("loader-base",function(d){if(!YUI.Env[d.version]){(function(){var I=d.version,E="/build/",F=I+E,D=d.Env.base,A="gallery-2011.09.14-20-40",C="2in3",B="4",z="2.9.0",G=D+"combo?",H={version:I,root:F,base:d.Env.base,comboBase:G,skin:{defaultSkin:"sam",base:"assets/skins/",path:"skin.css",after:["cssreset","cssfonts","cssgrids","cssbase","cssreset-context","cssfonts-context"]},groups:{},patterns:{}},y=H.groups,x=function(K,L){var J=C+"."+(K||B)+"/"+(L||z)+E;y.yui2.base=D+J;y.yui2.root=J;},w=function(J){var K=(J||A)+E;y.gallery.base=D+K;y.gallery.root=K;};y[I]={};y.gallery={ext:false,combine:true,comboBase:G,update:w,patterns:{"gallery-":{},"lang/gallery-":{},"gallerycss-":{type:"css"}}};y.yui2={combine:true,ext:false,comboBase:G,update:x,patterns:{"yui2-":{configFn:function(J){if(/-skin|reset|fonts|grids|base/.test(J.name)){J.type="css";J.path=J.path.replace(/\.js/,".css");J.path=J.path.replace(/\/yui2-skin/,"/assets/skins/sam/yui2-skin");}}}}};w();x();YUI.Env[I]=H;}());}var f={},c=[],m=2048,a=YUI.Env,p=a._loaded,q="css",k="js",v="intl",s=d.version,u="",e=d.Object,r=e.each,j=d.Array,h=a._loaderQueue,t=a[s],b="skin-",i=d.Lang,n=a.mods,l,o,g=function(x,y,z,w){var A=x+"/"+y;if(!w){A+="-min";}A+="."+(z||q);return A;};if(YUI.Env.aliases){YUI.Env.aliases={};}d.Env.meta=t;d.Loader=function(A){var z=t.modules,x=this;l=t.md5;x.context=d;x.base=d.Env.meta.base+d.Env.meta.root;x.comboBase=d.Env.meta.comboBase;x.combine=A.base&&(A.base.indexOf(x.comboBase.substr(0,20))>-1);x.comboSep="&";x.maxURLLength=m;x.root=d.Env.meta.root;x.timeout=0;x.forceMap={};x.allowRollup=false;x.filters={};x.required={};x.patterns={};x.moduleInfo={};x.groups=d.merge(d.Env.meta.groups);x.skin=d.merge(d.Env.meta.skin);x.conditions={};x.config=A;x._internal=true;o=a._renderedMods;if(o){r(o,function y(C,B){x.moduleInfo[B]=C;});o=a._conditions;r(o,function w(C,B){x.conditions[B]=C;});}else{r(z,x.addModule,x);}if(!a._renderedMods){a._renderedMods=x.moduleInfo;a._conditions=x.conditions;}x._inspectPage();x._internal=false;x._config(A);x.testresults=null;if(d.config.tests){x.testresults=d.config.tests;}x.sorted=[];x.loaded=p[s];x.dirty=true;x.inserted={};x.skipped={};x.tested={};};d.Loader.prototype={FILTER_DEFS:{RAW:{"searchExp":"-min\\.js","replaceStr":".js"},DEBUG:{"searchExp":"-min\\.js","replaceStr":"-debug.js"}},_inspectPage:function(){r(n,function(y,x){if(y.details){var w=this.moduleInfo[x],A=y.details.requires,z=w&&w.requires;if(w){if(!w._inspected&&A&&z.length!=A.length){delete w.expanded;}}else{w=this.addModule(y.details,x);}w._inspected=true;}},this);},_requires:function(C,B){var y,A,D,E,w=this.moduleInfo,x=w[C],z=w[B];if(!x||!z){return false;}A=x.expanded_map;D=x.after_map;if(D&&(B in D)){return true;}D=z.after_map;if(D&&(C in D)){return false;}E=w[B]&&w[B].supersedes;if(E){for(y=0;y<E.length;y++){if(this._requires(C,E[y])){return true;}}}E=w[C]&&w[C].supersedes;if(E){for(y=0;y<E.length;y++){if(this._requires(B,E[y])){return false;}}}if(A&&(B in A)){return true;}if(x.ext&&x.type==q&&!z.ext&&z.type==q){return true;}return false;},_config:function(C){var y,x,B,z,A,D,w=this;if(C){for(y in C){if(C.hasOwnProperty(y)){B=C[y];if(y=="require"){w.require(B);}else{if(y=="skin"){d.mix(w.skin,C[y],true);
}else{if(y=="groups"){for(x in B){if(B.hasOwnProperty(x)){D=x;A=B[x];w.addGroup(A,D);}}}else{if(y=="modules"){r(B,w.addModule,w);}else{if(y=="gallery"){this.groups.gallery.update(B);}else{if(y=="yui2"||y=="2in3"){this.groups.yui2.update(C["2in3"],C.yui2);}else{if(y=="maxURLLength"){w[y]=Math.min(m,B);}else{w[y]=B;}}}}}}}}}}z=w.filter;if(i.isString(z)){z=z.toUpperCase();w.filterName=z;w.filter=w.FILTER_DEFS[z];if(z=="DEBUG"){w.require("yui-log","dump");}}if(w.lang){w.require("intl-base","intl");}},formatSkin:function(y,w){var x=b+y;if(w){x=x+"-"+w;}return x;},_addSkin:function(F,D,E){var C,B,x,w,A=this.moduleInfo,y=this.skin,z=A[D]&&A[D].ext;if(D){x=this.formatSkin(F,D);if(!A[x]){C=A[D];B=C.pkg||D;w={name:x,group:C.group,type:"css",after:y.after,path:(E||B)+"/"+y.base+F+"/"+D+".css",ext:z};if(C.base){w.base=C.base;}if(C.configFn){w.configFn=C.configFn;}this.addModule(w,x);}}return x;},addGroup:function(z,x){var y=z.modules,w=this;x=x||z.name;z.name=x;w.groups[x]=z;if(z.patterns){r(z.patterns,function(B,A){B.group=x;w.patterns[A]=B;});}if(y){r(y,function(B,A){B.group=x;w.addModule(B,A);},w);}},addModule:function(M,T){T=T||M.name;if(this.moduleInfo[T]&&this.moduleInfo[T].temp){M=d.merge(this.moduleInfo[T],M);}M.name=T;if(!M||!M.name){return null;}if(!M.type){M.type=k;}if(!M.path&&!M.fullpath){M.path=g(T,T,M.type);}M.supersedes=M.supersedes||M.use;M.ext=("ext" in M)?M.ext:(this._internal)?false:true;M.requires=this.filterRequires(M.requires)||[];var Q=M.submodules,P,N,H,w,I,y,L,x,O,J,F,C,A,z,S,R,G,B,D,E=this.conditions,K;this.moduleInfo[T]=M;if(!M.langPack&&M.lang){J=j(M.lang);for(O=0;O<J.length;O++){S=J[O];F=this.getLangPackName(S,T);y=this.moduleInfo[F];if(!y){y=this._addLangPack(S,M,F);}}}if(Q){w=M.supersedes||[];N=0;for(P in Q){if(Q.hasOwnProperty(P)){I=Q[P];I.path=I.path||g(T,P,M.type);I.pkg=T;I.group=M.group;if(I.supersedes){w=w.concat(I.supersedes);}y=this.addModule(I,P);w.push(P);if(y.skinnable){M.skinnable=true;G=this.skin.overrides;if(G&&G[P]){for(O=0;O<G[P].length;O++){B=this._addSkin(G[P][O],P,T);w.push(B);}}B=this._addSkin(this.skin.defaultSkin,P,T);w.push(B);}if(I.lang&&I.lang.length){J=j(I.lang);for(O=0;O<J.length;O++){S=J[O];F=this.getLangPackName(S,T);C=this.getLangPackName(S,P);y=this.moduleInfo[F];if(!y){y=this._addLangPack(S,M,F);}A=A||j.hash(y.supersedes);if(!(C in A)){y.supersedes.push(C);}M.lang=M.lang||[];z=z||j.hash(M.lang);if(!(S in z)){M.lang.push(S);}F=this.getLangPackName(u,T);C=this.getLangPackName(u,P);y=this.moduleInfo[F];if(!y){y=this._addLangPack(S,M,F);}if(!(C in A)){y.supersedes.push(C);}}}N++;}}M.supersedes=j.dedupe(w);if(this.allowRollup){M.rollup=(N<4)?N:Math.min(N-1,4);}}L=M.plugins;if(L){for(P in L){if(L.hasOwnProperty(P)){x=L[P];x.pkg=T;x.path=x.path||g(T,P,M.type);x.requires=x.requires||[];x.group=M.group;this.addModule(x,P);if(M.skinnable){this._addSkin(this.skin.defaultSkin,P,T);}}}}if(M.condition){H=M.condition.trigger;if(YUI.Env.aliases[H]){H=YUI.Env.aliases[H];}if(!d.Lang.isArray(H)){H=[H];}for(P=0;P<H.length;P++){K=H[P];D=M.condition.when;E[K]=E[K]||{};E[K][T]=M.condition;if(D&&D!="after"){if(D=="instead"){M.supersedes=M.supersedes||[];M.supersedes.push(K);}else{}}else{M.after=M.after||[];M.after.push(K);}}}if(M.after){M.after_map=j.hash(M.after);}if(M.configFn){R=M.configFn(M);if(R===false){delete this.moduleInfo[T];M=null;}}return M;},require:function(x){var w=(typeof x==="string")?j(arguments):x;this.dirty=true;this.required=d.merge(this.required,j.hash(this.filterRequires(w)));this._explodeRollups();},_explodeRollups:function(){var x=this,w,y=x.required;if(!x.allowRollup){r(y,function(z,A){w=x.getModule(A);if(w&&w.use){j.each(w.use,function(B){w=x.getModule(B);if(w&&w.use){j.each(w.use,function(C){y[C]=true;});}else{y[B]=true;}});}});x.required=y;}},filterRequires:function(z){if(z){if(!d.Lang.isArray(z)){z=[z];}z=d.Array(z);var B=[],y,x,A,w;for(y=0;y<z.length;y++){x=this.getModule(z[y]);if(x&&x.use){for(A=0;A<x.use.length;A++){w=this.getModule(x.use[A]);if(w&&w.use){B=d.Array.dedupe([].concat(B,this.filterRequires(w.use)));}else{B.push(x.use[A]);}}}else{B.push(z[y]);}}z=B;}return z;},getRequires:function(S){if(!S||S._parsed){return c;}var M,H,L,D,C,U,A=this.testresults,V=S.name,B,I,T=n[V]&&n[V].details,O,J,w,E,P,F,z,Q,R,y,G=S.lang||S.intl,N=this.moduleInfo,K=d.Features&&d.Features.tests.load,x;if(S.temp&&T){P=S;S=this.addModule(T,V);S.group=P.group;S.pkg=P.pkg;delete S.expanded;}if(S.expanded&&(!this.lang||S.langCache===this.lang)){return S.expanded;}O=[];x={};E=this.filterRequires(S.requires);if(S.lang){O.unshift("intl");E.unshift("intl");G=true;}F=this.filterRequires(S.optional);S._parsed=true;S.langCache=this.lang;for(M=0;M<E.length;M++){if(!x[E[M]]){O.push(E[M]);x[E[M]]=true;H=this.getModule(E[M]);if(H){D=this.getRequires(H);G=G||(H.expanded_map&&(v in H.expanded_map));for(L=0;L<D.length;L++){O.push(D[L]);}}}}E=this.filterRequires(S.supersedes);if(E){for(M=0;M<E.length;M++){if(!x[E[M]]){if(S.submodules){O.push(E[M]);}x[E[M]]=true;H=this.getModule(E[M]);if(H){D=this.getRequires(H);G=G||(H.expanded_map&&(v in H.expanded_map));for(L=0;L<D.length;L++){O.push(D[L]);}}}}}if(F&&this.loadOptional){for(M=0;M<F.length;M++){if(!x[F[M]]){O.push(F[M]);x[F[M]]=true;H=N[F[M]];if(H){D=this.getRequires(H);G=G||(H.expanded_map&&(v in H.expanded_map));for(L=0;L<D.length;L++){O.push(D[L]);}}}}}B=this.conditions[V];if(B){if(A&&K){r(A,function(W,Y){var X=K[Y].name;if(!x[X]&&K[Y].trigger==V){if(W&&K[Y]){x[X]=true;O.push(X);}}});}else{r(B,function(X,W){if(!x[W]){I=X&&((X.ua&&d.UA[X.ua])||(X.test&&X.test(d,E)));if(I){x[W]=true;O.push(W);H=this.getModule(W);if(H){D=this.getRequires(H);for(L=0;L<D.length;L++){O.push(D[L]);}}}}},this);}}if(S.skinnable){Q=this.skin.overrides;r(YUI.Env.aliases,function(W,X){if(d.Array.indexOf(W,V)>-1){R=X;}});if(Q&&(Q[V]||(R&&Q[R]))){y=V;if(Q[R]){y=R;}for(M=0;M<Q[y].length;M++){z=this._addSkin(Q[y][M],V);O.push(z);}}else{z=this._addSkin(this.skin.defaultSkin,V);O.push(z);}}S._parsed=false;if(G){if(S.lang&&!S.langPack&&d.Intl){U=d.Intl.lookupBestLang(this.lang||u,S.lang);
C=this.getLangPackName(U,V);if(C){O.unshift(C);}}O.unshift(v);}S.expanded_map=j.hash(O);S.expanded=e.keys(S.expanded_map);return S.expanded;},getProvides:function(x){var w=this.getModule(x),z,y;if(!w){return f;}if(w&&!w.provides){z={};y=w.supersedes;if(y){j.each(y,function(A){d.mix(z,this.getProvides(A));},this);}z[x]=true;w.provides=z;}return w.provides;},calculate:function(x,w){if(x||w||this.dirty){if(x){this._config(x);}if(!this._init){this._setup();}this._explode();if(this.allowRollup){this._rollup();}else{this._explodeRollups();}this._reduce();this._sort();}},_addLangPack:function(B,w,A){var y=w.name,x,z=this.moduleInfo[A];if(!z){x=g((w.pkg||y),A,k,true);this.addModule({path:x,intl:true,langPack:true,ext:w.ext,group:w.group,supersedes:[]},A);if(B){d.Env.lang=d.Env.lang||{};d.Env.lang[B]=d.Env.lang[B]||{};d.Env.lang[B][y]=true;}}return this.moduleInfo[A];},_setup:function(){var C=this.moduleInfo,z,A,y,w,x,B;for(z in C){if(C.hasOwnProperty(z)){w=C[z];if(w){w.requires=j.dedupe(w.requires);if(w.lang&&w.lang.length){B=this.getLangPackName(u,z);this._addLangPack(null,w,B);}}}}x={};if(!this.ignoreRegistered){d.mix(x,a.mods);}if(this.ignore){d.mix(x,j.hash(this.ignore));}for(y in x){if(x.hasOwnProperty(y)){d.mix(x,this.getProvides(y));}}if(this.force){for(A=0;A<this.force.length;A++){if(this.force[A] in x){delete x[this.force[A]];}}}d.mix(this.loaded,x);this._init=true;},getLangPackName:function(x,w){return("lang/"+w+((x)?"_"+x:""));},_explode:function(){var A=this.required,w,z,x={},y=this;y.dirty=false;y._explodeRollups();A=y.required;r(A,function(B,C){if(!x[C]){x[C]=true;w=y.getModule(C);if(w){var D=w.expound;if(D){A[D]=y.getModule(D);z=y.getRequires(A[D]);d.mix(A,j.hash(z));}z=y.getRequires(w);d.mix(A,j.hash(z));}}});},getModule:function(B){if(!B){return null;}var A,z,x,w=this.moduleInfo[B],y=this.patterns;if(!w){for(x in y){if(y.hasOwnProperty(x)){A=y[x];if(B.indexOf(x)>-1){z=A;break;}}}if(z){if(A.action){A.action.call(this,B,x);}else{w=this.addModule(d.merge(z),B);w.temp=true;}}}return w;},_rollup:function(){},_reduce:function(B){B=B||this.required;var y,x,A,w,z=this.loadType,C=this.ignore?j.hash(this.ignore):false;for(y in B){if(B.hasOwnProperty(y)){w=this.getModule(y);if(((this.loaded[y]||n[y])&&!this.forceMap[y]&&!this.ignoreRegistered)||(z&&w&&w.type!=z)){delete B[y];}if(C&&C[y]){delete B[y];}A=w&&w.supersedes;if(A){for(x=0;x<A.length;x++){if(A[x] in B){delete B[A[x]];}}}}}return B;},_finish:function(y,x){h.running=false;var w=this.onEnd;if(w){w.call(this.context,{msg:y,data:this.data,success:x});}this._continue();},_onSuccess:function(){var y=this,x=d.merge(y.skipped),A,w=[],z=y.requireRegistration,C,B;r(x,function(D){delete y.inserted[D];});y.skipped={};r(y.inserted,function(E,D){var F=y.getModule(D);if(F&&z&&F.type==k&&!(D in YUI.Env.mods)){w.push(D);}else{d.mix(y.loaded,y.getProvides(D));}});A=y.onSuccess;B=(w.length)?"notregistered":"success";C=!(w.length);if(A){A.call(y.context,{msg:B,data:y.data,success:C,failed:w,skipped:x});}y._finish(B,C);},_onFailure:function(y){var w=this.onFailure,x="failure: "+y.msg;if(w){w.call(this.context,{msg:x,data:this.data,success:false});}this._finish(x,false);},_onTimeout:function(){var w=this.onTimeout;if(w){w.call(this.context,{msg:"timeout",data:this.data,success:false});}this._finish("timeout",false);},_sort:function(){var F=e.keys(this.required),B={},w=0,y,E,D,A,z,C,x;for(;;){y=F.length;C=false;for(A=w;A<y;A++){E=F[A];for(z=A+1;z<y;z++){x=E+F[z];if(!B[x]&&this._requires(E,F[z])){D=F.splice(z,1);F.splice(A,0,D[0]);B[x]=true;C=true;break;}}if(C){break;}else{w++;}}if(!C){break;}}this.sorted=F;},partial:function(w,y,x){this.sorted=w;this.insert(y,x,true);},_insert:function(z,A,y,x){if(z){this._config(z);}if(!x){this.calculate(A);}this.loadType=y;if(!y){var w=this;this._internalCallback=function(){var C=w.onCSS,E,D,B;if(this.insertBefore&&d.UA.ie){E=d.config.doc.getElementById(this.insertBefore);D=E.parentNode;B=E.nextSibling;D.removeChild(E);if(B){D.insertBefore(E,B);}else{D.appendChild(E);}}if(C){C.call(w.context,d);}w._internalCallback=null;w._insert(null,null,k);};this._insert(null,null,q);return;}this._loading=true;this._combineComplete={};this.loadNext();},_continue:function(){if(!(h.running)&&h.size()>0){h.running=true;h.next()();}},insert:function(z,x,y){var w=this,A=d.merge(this);delete A.require;delete A.dirty;h.add(function(){w._insert(A,z,x,y);});this._continue();},loadNext:function(A){if(!this._loading){return;}var H,P,O,M,z,E,B,L,D,G,N,w,C,K,y,F,Q,R,J=this,x=J.loadType,S=function(T){J.loadNext(T.data);},I=function(V){J._combineComplete[x]=true;var U,T=F.length;for(U=0;U<T;U++){J.inserted[F[U]]=true;}S(V);};if(J.combine&&(!J._combineComplete[x])){F=[];J._combining=F;H=J.sorted;P=H.length;R=J.comboBase;z=R;Q=[];K={};for(O=0;O<P;O++){C=R;M=J.getModule(H[O]);G=M&&M.group;if(G){D=J.groups[G];if(!D.combine){M.combine=false;continue;}M.combine=true;if(D.comboBase){C=D.comboBase;}if("root" in D&&i.isValue(D.root)){M.root=D.root;}}K[C]=K[C]||[];K[C].push(M);}for(N in K){if(K.hasOwnProperty(N)){z=N;y=K[N];P=y.length;for(O=0;O<P;O++){M=y[O];if(M&&(M.type===x)&&(M.combine||!M.ext)){w=((i.isValue(M.root))?M.root:J.root)+M.path;w=J._filter(w,M.name);if((z!==N)&&(O<=(P-1))&&((w.length+z.length)>J.maxURLLength)){if(z.substr(z.length-1,1)===J.comboSep){z=z.substr(0,(z.length-1));}Q.push(J._filter(z));z=N;}z+=w;if(O<(P-1)){z+=J.comboSep;}F.push(M.name);}}if(F.length&&(z!=N)){if(z.substr(z.length-1,1)===J.comboSep){z=z.substr(0,(z.length-1));}Q.push(J._filter(z));}}}if(F.length){if(x===q){E=d.Get.css;L=J.cssAttributes;}else{E=d.Get.script;L=J.jsAttributes;}E(Q,{data:J._loading,onSuccess:I,onFailure:J._onFailure,onTimeout:J._onTimeout,insertBefore:J.insertBefore,charset:J.charset,attributes:L,timeout:J.timeout,autopurge:false,context:J});return;}else{J._combineComplete[x]=true;}}if(A){if(A!==J._loading){return;}J.inserted[A]=true;if(J.onProgress){J.onProgress.call(J.context,{name:A,data:J.data});}}H=J.sorted;P=H.length;for(O=0;O<P;O=O+1){if(H[O] in J.inserted){continue;
}if(H[O]===J._loading){return;}M=J.getModule(H[O]);if(!M){if(!J.skipped[H[O]]){B="Undefined module "+H[O]+" skipped";J.skipped[H[O]]=true;}continue;}D=(M.group&&J.groups[M.group])||f;if(!x||x===M.type){J._loading=H[O];if(M.type===q){E=d.Get.css;L=J.cssAttributes;}else{E=d.Get.script;L=J.jsAttributes;}z=(M.fullpath)?J._filter(M.fullpath,H[O]):J._url(M.path,H[O],D.base||M.base);E(z,{data:H[O],onSuccess:S,insertBefore:J.insertBefore,charset:J.charset,attributes:L,onFailure:J._onFailure,onTimeout:J._onTimeout,timeout:J.timeout,autopurge:false,context:J});return;}}J._loading=null;E=J._internalCallback;if(E){J._internalCallback=null;E.call(J);}else{J._onSuccess();}},_filter:function(y,x){var A=this.filter,w=x&&(x in this.filters),z=w&&this.filters[x],B=this.moduleInfo[x]?this.moduleInfo[x].group:null;if(B&&this.groups[B].filter){z=this.groups[B].filter;w=true;}if(y){if(w){A=(i.isString(z))?this.FILTER_DEFS[z.toUpperCase()]||null:z;}if(A){y=y.replace(new RegExp(A.searchExp,"g"),A.replaceStr);}}return y;},_url:function(y,w,x){return this._filter((x||this.base||"")+y,w);},resolve:function(A,C){var x=this,B,w,z,y={js:[],css:[]};if(A){x.calculate();}C=C||x.sorted;for(B=0;B<C.length;B++){w=x.getModule(C[B]);if(w){if(x.combine){z=x._filter((x.root+w.path),w.name,x.root);}else{z=x._filter(w.fullpath,w.name,"")||x._url(w.path,w.name);}y[w.type].push(z);}}if(x.combine){y.js=[x.comboBase+y.js.join(x.comboSep)];y.css=[x.comboBase+y.css.join(x.comboSep)];}return y;},hash:function(A,C){var x=this,B,w,z,y={js:{},css:{}};if(A){x.calculate();}C=C||x.sorted;for(B=0;B<C.length;B++){w=x.getModule(C[B]);if(w){z=x._filter(w.fullpath,w.name,"")||x._url(w.path,w.name);y[w.type][w.name]=z;}}return y;}};},"3.4.1",{requires:["get"]});YUI.add("loader-rollup",function(a){a.Loader.prototype._rollup=function(){var k,h,g,o,b=this.required,e,f=this.moduleInfo,d,l,n;if(this.dirty||!this.rollups){this.rollups={};for(k in f){if(f.hasOwnProperty(k)){g=this.getModule(k);if(g&&g.rollup){this.rollups[k]=g;}}}this.forceMap=(this.force)?a.Array.hash(this.force):{};}for(;;){d=false;for(k in this.rollups){if(this.rollups.hasOwnProperty(k)){if(!b[k]&&((!this.loaded[k])||this.forceMap[k])){g=this.getModule(k);o=g.supersedes||[];e=false;if(!g.rollup){continue;}l=0;for(h=0;h<o.length;h++){n=f[o[h]];if(this.loaded[o[h]]&&!this.forceMap[o[h]]){e=false;break;}else{if(b[o[h]]&&g.type==n.type){l++;e=(l>=g.rollup);if(e){break;}}}}if(e){b[k]=true;d=true;this.getRequires(g);}}}}if(!d){break;}}};},"3.4.1",{requires:["loader-base"]});YUI.add("loader-yui3",function(a){YUI.Env[a.version].modules=YUI.Env[a.version].modules||{"align-plugin":{"requires":["node-screen","node-pluginhost"]},"anim":{"use":["anim-base","anim-color","anim-curve","anim-easing","anim-node-plugin","anim-scroll","anim-xy"]},"anim-base":{"requires":["base-base","node-style"]},"anim-color":{"requires":["anim-base"]},"anim-curve":{"requires":["anim-xy"]},"anim-easing":{"requires":["anim-base"]},"anim-node-plugin":{"requires":["node-pluginhost","anim-base"]},"anim-scroll":{"requires":["anim-base"]},"anim-xy":{"requires":["anim-base","node-screen"]},"app":{"use":["controller","model","model-list","view"]},"array-extras":{"requires":["yui-base"]},"array-invoke":{"requires":["yui-base"]},"arraylist":{"requires":["yui-base"]},"arraylist-add":{"requires":["arraylist"]},"arraylist-filter":{"requires":["arraylist"]},"arraysort":{"requires":["yui-base"]},"async-queue":{"requires":["event-custom"]},"attribute":{"use":["attribute-base","attribute-complex"]},"attribute-base":{"requires":["event-custom"]},"attribute-complex":{"requires":["attribute-base"]},"autocomplete":{"use":["autocomplete-base","autocomplete-sources","autocomplete-list","autocomplete-plugin"]},"autocomplete-base":{"optional":["autocomplete-sources"],"requires":["array-extras","base-build","escape","event-valuechange","node-base"]},"autocomplete-filters":{"requires":["array-extras","text-wordbreak"]},"autocomplete-filters-accentfold":{"requires":["array-extras","text-accentfold","text-wordbreak"]},"autocomplete-highlighters":{"requires":["array-extras","highlight-base"]},"autocomplete-highlighters-accentfold":{"requires":["array-extras","highlight-accentfold"]},"autocomplete-list":{"after":["autocomplete-sources"],"lang":["en"],"requires":["autocomplete-base","event-resize","node-screen","selector-css3","shim-plugin","widget","widget-position","widget-position-align"],"skinnable":true},"autocomplete-list-keys":{"condition":{"name":"autocomplete-list-keys","test":function(b){return !(b.UA.ios||b.UA.android);},"trigger":"autocomplete-list"},"requires":["autocomplete-list","base-build"]},"autocomplete-plugin":{"requires":["autocomplete-list","node-pluginhost"]},"autocomplete-sources":{"optional":["io-base","json-parse","jsonp","yql"],"requires":["autocomplete-base"]},"base":{"use":["base-base","base-pluginhost","base-build"]},"base-base":{"after":["attribute-complex"],"requires":["attribute-base"]},"base-build":{"requires":["base-base"]},"base-pluginhost":{"requires":["base-base","pluginhost"]},"cache":{"use":["cache-base","cache-offline","cache-plugin"]},"cache-base":{"requires":["base"]},"cache-offline":{"requires":["cache-base","json"]},"cache-plugin":{"requires":["plugin","cache-base"]},"calendar":{"lang":["en","ja","ru"],"requires":["calendar-base","calendarnavigator"],"skinnable":true},"calendar-base":{"lang":["en","ja","ru"],"requires":["widget","substitute","datatype-date","datatype-date-math","cssgrids"],"skinnable":true},"calendarnavigator":{"requires":["plugin","classnamemanager","datatype-date","node","substitute"],"skinnable":true},"charts":{"requires":["dom","datatype-number","datatype-date","event-custom","event-mouseenter","widget","widget-position","widget-stack","graphics"]},"classnamemanager":{"requires":["yui-base"]},"clickable-rail":{"requires":["slider-base"]},"collection":{"use":["array-extras","arraylist","arraylist-add","arraylist-filter","array-invoke"]},"console":{"lang":["en","es","ja"],"requires":["yui-log","widget","substitute"],"skinnable":true},"console-filters":{"requires":["plugin","console"],"skinnable":true},"controller":{"optional":["querystring-parse"],"requires":["array-extras","base-build","history"]},"cookie":{"requires":["yui-base"]},"createlink-base":{"requires":["editor-base"]},"cssbase":{"after":["cssreset","cssfonts","cssgrids","cssreset-context","cssfonts-context","cssgrids-context"],"type":"css"},"cssbase-context":{"after":["cssreset","cssfonts","cssgrids","cssreset-context","cssfonts-context","cssgrids-context"],"type":"css"},"cssfonts":{"type":"css"},"cssfonts-context":{"type":"css"},"cssgrids":{"optional":["cssreset","cssfonts"],"type":"css"},"cssreset":{"type":"css"},"cssreset-context":{"type":"css"},"dataschema":{"use":["dataschema-base","dataschema-json","dataschema-xml","dataschema-array","dataschema-text"]},"dataschema-array":{"requires":["dataschema-base"]},"dataschema-base":{"requires":["base"]},"dataschema-json":{"requires":["dataschema-base","json"]},"dataschema-text":{"requires":["dataschema-base"]},"dataschema-xml":{"requires":["dataschema-base"]},"datasource":{"use":["datasource-local","datasource-io","datasource-get","datasource-function","datasource-cache","datasource-jsonschema","datasource-xmlschema","datasource-arrayschema","datasource-textschema","datasource-polling"]},"datasource-arrayschema":{"requires":["datasource-local","plugin","dataschema-array"]},"datasource-cache":{"requires":["datasource-local","plugin","cache-base"]},"datasource-function":{"requires":["datasource-local"]},"datasource-get":{"requires":["datasource-local","get"]},"datasource-io":{"requires":["datasource-local","io-base"]},"datasource-jsonschema":{"requires":["datasource-local","plugin","dataschema-json"]},"datasource-local":{"requires":["base"]},"datasource-polling":{"requires":["datasource-local"]},"datasource-textschema":{"requires":["datasource-local","plugin","dataschema-text"]},"datasource-xmlschema":{"requires":["datasource-local","plugin","dataschema-xml"]},"datatable":{"use":["datatable-base","datatable-datasource","datatable-sort","datatable-scroll"]},"datatable-base":{"requires":["recordset-base","widget","substitute","event-mouseenter"],"skinnable":true},"datatable-datasource":{"requires":["datatable-base","plugin","datasource-local"]},"datatable-scroll":{"requires":["datatable-base","plugin"]},"datatable-sort":{"lang":["en"],"requires":["datatable-base","plugin","recordset-sort"]},"datatype":{"use":["datatype-number","datatype-date","datatype-xml"]},"datatype-date":{"supersedes":["datatype-date-format"],"use":["datatype-date-parse","datatype-date-format"]},"datatype-date-format":{"lang":["ar","ar-JO","ca","ca-ES","da","da-DK","de","de-AT","de-DE","el","el-GR","en","en-AU","en-CA","en-GB","en-IE","en-IN","en-JO","en-MY","en-NZ","en-PH","en-SG","en-US","es","es-AR","es-BO","es-CL","es-CO","es-EC","es-ES","es-MX","es-PE","es-PY","es-US","es-UY","es-VE","fi","fi-FI","fr","fr-BE","fr-CA","fr-FR","hi","hi-IN","id","id-ID","it","it-IT","ja","ja-JP","ko","ko-KR","ms","ms-MY","nb","nb-NO","nl","nl-BE","nl-NL","pl","pl-PL","pt","pt-BR","ro","ro-RO","ru","ru-RU","sv","sv-SE","th","th-TH","tr","tr-TR","vi","vi-VN","zh-Hans","zh-Hans-CN","zh-Hant","zh-Hant-HK","zh-Hant-TW"]},"datatype-date-math":{"requires":["yui-base"]},"datatype-date-parse":{},"datatype-number":{"use":["datatype-number-parse","datatype-number-format"]},"datatype-number-format":{},"datatype-number-parse":{},"datatype-xml":{"use":["datatype-xml-parse","datatype-xml-format"]},"datatype-xml-format":{},"datatype-xml-parse":{},"dd":{"use":["dd-ddm-base","dd-ddm","dd-ddm-drop","dd-drag","dd-proxy","dd-constrain","dd-drop","dd-scroll","dd-delegate"]},"dd-constrain":{"requires":["dd-drag"]},"dd-ddm":{"requires":["dd-ddm-base","event-resize"]},"dd-ddm-base":{"requires":["node","base","yui-throttle","classnamemanager"]},"dd-ddm-drop":{"requires":["dd-ddm"]},"dd-delegate":{"requires":["dd-drag","dd-drop-plugin","event-mouseenter"]},"dd-drag":{"requires":["dd-ddm-base"]},"dd-drop":{"requires":["dd-drag","dd-ddm-drop"]},"dd-drop-plugin":{"requires":["dd-drop"]},"dd-gestures":{"condition":{"name":"dd-gestures","test":function(b){return(b.config.win&&("ontouchstart" in b.config.win&&!b.UA.chrome));
},"trigger":"dd-drag"},"requires":["dd-drag","event-synthetic","event-gestures"]},"dd-plugin":{"optional":["dd-constrain","dd-proxy"],"requires":["dd-drag"]},"dd-proxy":{"requires":["dd-drag"]},"dd-scroll":{"requires":["dd-drag"]},"dial":{"lang":["en","es"],"requires":["widget","dd-drag","substitute","event-mouseenter","event-move","event-key","transition","intl"],"skinnable":true},"dom":{"use":["dom-base","dom-screen","dom-style","selector-native","selector"]},"dom-base":{"requires":["dom-core"]},"dom-core":{"requires":["oop","features"]},"dom-deprecated":{"requires":["dom-base"]},"dom-screen":{"requires":["dom-base","dom-style"]},"dom-style":{"requires":["dom-base"]},"dom-style-ie":{"condition":{"name":"dom-style-ie","test":function(h){var f=h.Features.test,g=h.Features.add,d=h.config.win,e=h.config.doc,b="documentElement",c=false;g("style","computedStyle",{test:function(){return d&&"getComputedStyle" in d;}});g("style","opacity",{test:function(){return e&&"opacity" in e[b].style;}});c=(!f("style","opacity")&&!f("style","computedStyle"));return c;},"trigger":"dom-style"},"requires":["dom-style"]},"dump":{"requires":["yui-base"]},"editor":{"use":["frame","selection","exec-command","editor-base","editor-para","editor-br","editor-bidi","editor-tab","createlink-base"]},"editor-base":{"requires":["base","frame","node","exec-command","selection"]},"editor-bidi":{"requires":["editor-base"]},"editor-br":{"requires":["editor-base"]},"editor-lists":{"requires":["editor-base"]},"editor-para":{"requires":["editor-base"]},"editor-tab":{"requires":["editor-base"]},"escape":{"requires":["yui-base"]},"event":{"after":["node-base"],"use":["event-base","event-delegate","event-synthetic","event-mousewheel","event-mouseenter","event-key","event-focus","event-resize","event-hover","event-outside"]},"event-base":{"after":["node-base"],"requires":["event-custom-base"]},"event-base-ie":{"after":["event-base"],"condition":{"name":"event-base-ie","test":function(c){var b=c.config.doc&&c.config.doc.implementation;return(b&&(!b.hasFeature("Events","2.0")));},"trigger":"node-base"},"requires":["node-base"]},"event-custom":{"use":["event-custom-base","event-custom-complex"]},"event-custom-base":{"requires":["oop"]},"event-custom-complex":{"requires":["event-custom-base"]},"event-delegate":{"requires":["node-base"]},"event-flick":{"requires":["node-base","event-touch","event-synthetic"]},"event-focus":{"requires":["event-synthetic"]},"event-gestures":{"use":["event-flick","event-move"]},"event-hover":{"requires":["event-mouseenter"]},"event-key":{"requires":["event-synthetic"]},"event-mouseenter":{"requires":["event-synthetic"]},"event-mousewheel":{"requires":["node-base"]},"event-move":{"requires":["node-base","event-touch","event-synthetic"]},"event-outside":{"requires":["event-synthetic"]},"event-resize":{"requires":["node-base","event-synthetic"]},"event-simulate":{"requires":["event-base"]},"event-synthetic":{"requires":["node-base","event-custom-complex"]},"event-touch":{"requires":["node-base"]},"event-valuechange":{"requires":["event-focus","event-synthetic"]},"exec-command":{"requires":["frame"]},"features":{"requires":["yui-base"]},"frame":{"requires":["base","node","selector-css3","substitute","yui-throttle"]},"get":{"requires":["yui-base"]},"graphics":{"requires":["node","event-custom","pluginhost"]},"graphics-canvas":{"condition":{"name":"graphics-canvas","test":function(d){var c=d.config.doc,b=c&&c.createElement("canvas");return(c&&!c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")&&(b&&b.getContext&&b.getContext("2d")));},"trigger":"graphics"},"requires":["graphics"]},"graphics-canvas-default":{"condition":{"name":"graphics-canvas-default","test":function(d){var c=d.config.doc,b=c&&c.createElement("canvas");return(c&&!c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")&&(b&&b.getContext&&b.getContext("2d")));},"trigger":"graphics"}},"graphics-svg":{"condition":{"name":"graphics-svg","test":function(c){var b=c.config.doc;return(b&&b.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1"));},"trigger":"graphics"},"requires":["graphics"]},"graphics-svg-default":{"condition":{"name":"graphics-svg-default","test":function(c){var b=c.config.doc;return(b&&b.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1"));},"trigger":"graphics"}},"graphics-vml":{"condition":{"name":"graphics-vml","test":function(d){var c=d.config.doc,b=c&&c.createElement("canvas");return(c&&!c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")&&(!b||!b.getContext||!b.getContext("2d")));},"trigger":"graphics"},"requires":["graphics"]},"graphics-vml-default":{"condition":{"name":"graphics-vml-default","test":function(d){var c=d.config.doc,b=c&&c.createElement("canvas");return(c&&!c.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")&&(!b||!b.getContext||!b.getContext("2d")));},"trigger":"graphics"}},"highlight":{"use":["highlight-base","highlight-accentfold"]},"highlight-accentfold":{"requires":["highlight-base","text-accentfold"]},"highlight-base":{"requires":["array-extras","classnamemanager","escape","text-wordbreak"]},"history":{"use":["history-base","history-hash","history-hash-ie","history-html5"]},"history-base":{"requires":["event-custom-complex"]},"history-hash":{"after":["history-html5"],"requires":["event-synthetic","history-base","yui-later"]},"history-hash-ie":{"condition":{"name":"history-hash-ie","test":function(c){var b=c.config.doc&&c.config.doc.documentMode;return c.UA.ie&&(!("onhashchange" in c.config.win)||!b||b<8);},"trigger":"history-hash"},"requires":["history-hash","node-base"]},"history-html5":{"optional":["json"],"requires":["event-base","history-base","node-base"]},"imageloader":{"requires":["base-base","node-style","node-screen"]},"intl":{"requires":["intl-base","event-custom"]},"intl-base":{"requires":["yui-base"]},"io":{"use":["io-base","io-xdr","io-form","io-upload-iframe","io-queue"]},"io-base":{"requires":["event-custom-base","querystring-stringify-simple"]},"io-form":{"requires":["io-base","node-base"]},"io-queue":{"requires":["io-base","queue-promote"]},"io-upload-iframe":{"requires":["io-base","node-base"]},"io-xdr":{"requires":["io-base","datatype-xml-parse"]},"json":{"use":["json-parse","json-stringify"]},"json-parse":{"requires":["yui-base"]},"json-stringify":{"requires":["yui-base"]},"jsonp":{"requires":["get","oop"]},"jsonp-url":{"requires":["jsonp"]},"loader":{"use":["loader-base","loader-rollup","loader-yui3"]},"loader-base":{"requires":["get"]},"loader-rollup":{"requires":["loader-base"]},"loader-yui3":{"requires":["loader-base"]},"model":{"requires":["base-build","escape","json-parse"]},"model-list":{"requires":["array-extras","array-invoke","arraylist","base-build","escape","json-parse","model"]},"node":{"use":["node-base","node-event-delegate","node-pluginhost","node-screen","node-style"]},"node-base":{"requires":["event-base","node-core","dom-base"]},"node-core":{"requires":["dom-core","selector"]},"node-deprecated":{"requires":["node-base"]},"node-event-delegate":{"requires":["node-base","event-delegate"]},"node-event-html5":{"requires":["node-base"]},"node-event-simulate":{"requires":["node-base","event-simulate"]},"node-flick":{"requires":["classnamemanager","transition","event-flick","plugin"],"skinnable":true},"node-focusmanager":{"requires":["attribute","node","plugin","node-event-simulate","event-key","event-focus"]},"node-load":{"requires":["node-base","io-base"]},"node-menunav":{"requires":["node","classnamemanager","plugin","node-focusmanager"],"skinnable":true},"node-pluginhost":{"requires":["node-base","pluginhost"]},"node-screen":{"requires":["dom-screen","node-base"]},"node-style":{"requires":["dom-style","node-base"]},"oop":{"requires":["yui-base"]},"overlay":{"requires":["widget","widget-stdmod","widget-position","widget-position-align","widget-stack","widget-position-constrain"],"skinnable":true},"panel":{"requires":["widget","widget-stdmod","widget-position","widget-position-align","widget-stack","widget-position-constrain","widget-modality","widget-autohide","widget-buttons"],"skinnable":true},"plugin":{"requires":["base-base"]},"pluginhost":{"use":["pluginhost-base","pluginhost-config"]},"pluginhost-base":{"requires":["yui-base"]},"pluginhost-config":{"requires":["pluginhost-base"]},"profiler":{"requires":["yui-base"]},"querystring":{"use":["querystring-parse","querystring-stringify"]},"querystring-parse":{"requires":["yui-base","array-extras"]},"querystring-parse-simple":{"requires":["yui-base"]},"querystring-stringify":{"requires":["yui-base"]},"querystring-stringify-simple":{"requires":["yui-base"]},"queue-promote":{"requires":["yui-base"]},"range-slider":{"requires":["slider-base","slider-value-range","clickable-rail"]},"recordset":{"use":["recordset-base","recordset-sort","recordset-filter","recordset-indexer"]},"recordset-base":{"requires":["base","arraylist"]},"recordset-filter":{"requires":["recordset-base","array-extras","plugin"]},"recordset-indexer":{"requires":["recordset-base","plugin"]},"recordset-sort":{"requires":["arraysort","recordset-base","plugin"]},"resize":{"use":["resize-base","resize-proxy","resize-constrain"]},"resize-base":{"requires":["base","widget","substitute","event","oop","dd-drag","dd-delegate","dd-drop"],"skinnable":true},"resize-constrain":{"requires":["plugin","resize-base"]},"resize-plugin":{"optional":["resize-constrain"],"requires":["resize-base","plugin"]},"resize-proxy":{"requires":["plugin","resize-base"]},"rls":{"requires":["get","features"]},"scrollview":{"requires":["scrollview-base","scrollview-scrollbars"]},"scrollview-base":{"requires":["widget","event-gestures","transition"],"skinnable":true},"scrollview-base-ie":{"condition":{"name":"scrollview-base-ie","trigger":"scrollview-base","ua":"ie"},"requires":["scrollview-base"]},"scrollview-list":{"requires":["plugin","classnamemanager"],"skinnable":true},"scrollview-paginator":{"requires":["plugin"]},"scrollview-scrollbars":{"requires":["classnamemanager","transition","plugin"],"skinnable":true},"selection":{"requires":["node"]},"selector":{"requires":["selector-native"]},"selector-css2":{"condition":{"name":"selector-css2","test":function(d){var c=d.config.doc,b=c&&!("querySelectorAll" in c);
return b;},"trigger":"selector"},"requires":["selector-native"]},"selector-css3":{"requires":["selector-native","selector-css2"]},"selector-native":{"requires":["dom-base"]},"shim-plugin":{"requires":["node-style","node-pluginhost"]},"slider":{"use":["slider-base","slider-value-range","clickable-rail","range-slider"]},"slider-base":{"requires":["widget","dd-constrain","substitute"],"skinnable":true},"slider-value-range":{"requires":["slider-base"]},"sortable":{"requires":["dd-delegate","dd-drop-plugin","dd-proxy"]},"sortable-scroll":{"requires":["dd-scroll","sortable"]},"stylesheet":{"requires":["yui-base"]},"substitute":{"optional":["dump"],"requires":["yui-base"]},"swf":{"requires":["event-custom","node","swfdetect","escape"]},"swfdetect":{"requires":["yui-base"]},"tabview":{"requires":["widget","widget-parent","widget-child","tabview-base","node-pluginhost","node-focusmanager"],"skinnable":true},"tabview-base":{"requires":["node-event-delegate","classnamemanager","skin-sam-tabview"]},"tabview-plugin":{"requires":["tabview-base"]},"test":{"requires":["event-simulate","event-custom","substitute","json-stringify"],"skinnable":true},"text":{"use":["text-accentfold","text-wordbreak"]},"text-accentfold":{"requires":["array-extras","text-data-accentfold"]},"text-data-accentfold":{"requires":["yui-base"]},"text-data-wordbreak":{"requires":["yui-base"]},"text-wordbreak":{"requires":["array-extras","text-data-wordbreak"]},"transition":{"requires":["node-style"]},"transition-timer":{"condition":{"name":"transition-timer","test":function(e){var d=e.config.doc,c=(d)?d.documentElement:null,b=true;if(c&&c.style){b=!("MozTransition" in c.style||"WebkitTransition" in c.style);}return b;},"trigger":"transition"},"requires":["transition"]},"uploader":{"requires":["event-custom","node","base","swf"]},"view":{"requires":["base-build","node-event-delegate"]},"widget":{"use":["widget-base","widget-htmlparser","widget-uievents","widget-skin"]},"widget-anim":{"requires":["plugin","anim-base","widget"]},"widget-autohide":{"requires":["widget","event-outside","base-build","event-key"],"skinnable":false},"widget-base":{"requires":["attribute","event-focus","base-base","base-pluginhost","node-base","node-style","classnamemanager"],"skinnable":true},"widget-base-ie":{"condition":{"name":"widget-base-ie","trigger":"widget-base","ua":"ie"},"requires":["widget-base"]},"widget-buttons":{"requires":["widget","base-build","widget-stdmod"],"skinnable":true},"widget-child":{"requires":["base-build","widget"]},"widget-htmlparser":{"requires":["widget-base"]},"widget-locale":{"requires":["widget-base"]},"widget-modality":{"requires":["widget","event-outside","base-build"],"skinnable":false},"widget-parent":{"requires":["base-build","arraylist","widget"]},"widget-position":{"requires":["base-build","node-screen","widget"]},"widget-position-align":{"requires":["widget-position"]},"widget-position-constrain":{"requires":["widget-position"]},"widget-skin":{"requires":["widget-base"]},"widget-stack":{"requires":["base-build","widget"],"skinnable":true},"widget-stdmod":{"requires":["base-build","widget"]},"widget-uievents":{"requires":["widget-base","node-event-delegate"]},"yql":{"requires":["jsonp","jsonp-url"]},"yui":{},"yui-base":{},"yui-later":{"requires":["yui-base"]},"yui-log":{"requires":["yui-base"]},"yui-rls":{},"yui-throttle":{"requires":["yui-base"]}};YUI.Env[a.version].md5="105ebffae27a0e3d7331f8cf5c0bb282";},"3.4.1",{requires:["loader-base"]});YUI.add("yui",function(a){},"3.4.1",{use:["yui-base","get","features","intl-base","yui-log","yui-later","loader-base","loader-rollup","loader-yui3"]});
\ No newline at end of file
sass/core/_core-constants.scss
View file @ 2fcda1ed
@charset "UTF-8"; @charset 'UTF-8';
/** ////
* Ubuntu Patterns Stylesheet /// Ubuntu Patterns Stylesheet
* /// The CSS file required by Ubuntu patterns page
* The CSS file required by Ubuntu patterns page /// @project Ubuntu Patterns
* /// @author Web Team at Canonical Ltd
* @project Ubuntu Patterns /// @copyright 2012 Canonical Ltd
* @author Web Team at Canonical Ltd /// @see http://design.ubuntu.com
* @copyright 2012 Canonical Ltd ////
*
* @see http://design.ubuntu.com
*/
/**
* standard colors
*
* @colordef standard colors
*/
/* assets database path */
$asset-path: "//assets.ubuntu.com/sites/ubuntu/latest/u/img/";
/* usage: background: url(#{$asset-path}/backgrounds/background.jpg) no-repeat 0 0; */
$ubuntu-orange: #dd4814; /* ubuntu orange (used for text links also on any site except canonical) */
$light-orange: #fdf6f2; /* used as background on pre text */
$canonical-aubergine: #772953; /* canonical aubergine */
$light-aubergine: #77216f; /* light aubergine (consumer) */
$mid-aubergine: #5e2750; /* mid aubergine (both) */
$dark-aubergine: #2c001e; /* dark aubergine (enterprise) */
$warm-grey: #888888; /* warm grey */
$cool-grey: #333333; /* cool grey */
$light-grey: #f7f7f7; /* light grey */
/* notifications */
$error: #df382c; /* red */
$warning: #eca918; /* yellow */
$success: #38b44a; /* green */
$information: #19b6ee; /* cyan */
/* colour coded status - from negative to positive (Icon: canonical circle) */
$status-red: #df382c; /* red, for status that require immediate attention */
$status-grey: #888888; /* grey, for disabled status or ones that don’t require attention */
$status-yellow: #efb73e; /* yellow, for status that require attention */
$status-blue: #19b6ee; /* blue, for status that don’t require action */
$status-green: #38b44a; /* green, for positive status */
/* misc colours */
$box-solid-grey: #efefef;
$link-color: $ubuntu-orange; /* This is the global link color, mainly used for links in content */
/* grid variables */
$base: 14;
$gutter-width: 20px;
$grid-gutter: 20px;
$gutter: 2.12766%;
$one-col: 6.38297%;
$two-col: 14.89361%;
$three-col: 23.40425%;
$four-col: 31.91489%;
$five-col: 40.42553%;
$six-col: 48.93617%;
$seven-col: 57.4468%;
$eight-col: 65.95744%;
$nine-col: 74.46808%;
$ten-col: 82.97872%;
$eleven-col: 91.48936%;
$nav-bg: #f0f0f0;
$nav-link-color: #333;
$nav-border-dark: #d4d7d4;
$nav-border-light: #f2f2f4;
$nav-hover-bg: #d0d0d0;
$nav-active-bg: #ddd;
$breakpoint-medium: "only screen and (min-width: 768px)";
$breakpoint-large: "only screen and (min-width: 984px)";
/// standard colors
/// @colordef standard colors
/// assets database path
/// usage: background: url(#{$asset-path}/backgrounds/background.jpg) no-repeat 0 0;
$asset-path: '//assets.ubuntu.com/sites/ubuntu/latest/u/img/';
/// transparent to use throughout the site
$transparent: transparent !default;
/// ubuntu orange (used for text links also on any site except canonical)
$brand-color: #dd4814 !default;
/// light-orange - used as background on pre text
$light-orange: #fdf6f2 !default;
/// canonical aubergine
$canonical-aubergine: #772953 !default;
/// light aubergine (consumer)
$light-aubergine: #77216f !default;
/// mid aubergine (both)
$mid-aubergine: #5e2750 !default;
/// dark aubergine (enterprise)
$dark-aubergine: #2c001e !default;
/// warm grey
$warm-grey: #888 !default;
/// cool grey
$cool-grey: #333 !default;
/// mid grey
$mid-grey: #dfdcd9 !default;
/// light grey
$light-grey: #f7f7f7 !default;
/// white
$white: #fff !default;
/// black
$black: #000 !default;
/// row background
$row-background: #4b1827 !default;
/// red notifications
$error: #df382c !default;
/// yellow notifications
$warning: #eca918 !default;
/// green notifications
$success: #38b44a !default;
/// cyan notifications
$information: #19b6ee !default;
/// red, for status that require immediate attention
$status-red: #df382c !default;
/// grey, for disabled status or ones that don’t require attention
$status-grey: #888 !default;
/// yellow, for status that require attention
$status-yellow: #efb73e !default;
/// blue, for status that don’t require action
$status-blue: #19b6ee !default;
/// green, for positive status
$status-green: #38b44a !default;
/// box shadows
$box-shadow: #c2c2c2 !default;
/// code background
$code-bg: #fffbeb !default;
/// table header background
$table-th: #fee3d2 !default;
/// box borders
$box-border: #dfdcd9 !default;
/// This is the global link color, mainly used for links in content
$link-color: $brand-color !default;
/// Base font colour
$base-color: #333 !default;
/// grid variables
/// base
$base: 14 !default;
/// gutter width
$gutter-width: 20px !default;
/// grid-gutter
$grid-gutter: 20px !default;
/// gutter
$gutter: 2.12766% !default;
/// one col
$one-col: 6.38297% !default;
/// two col
$two-col: 14.89361% !default;
/// three col
$three-col: 23.40425% !default;
/// four col
$four-col: 31.91489% !default;
/// five col
$five-col: 40.42553% !default;
/// six col
$six-col: 48.93617% !default;
/// seven col
$seven-col: 57.4468% !default;
/// eight col
$eight-col: 65.95744% !default;
/// nine col
$nine-col: 74.46808% !default;
/// ten col
$ten-col: 82.97872% !default;
/// eleven col
$eleven-col: 91.48936% !default;
/// nav background
$nav-bg: #f0f0f0 !default;
/// nav link colour
$nav-link-color: #333 !default;
/// nav border dark
$nav-border-dark: #d4d7d4 !default;
/// nav border light
$nav-border-light: #f2f2f4 !default;
/// nav hover background
$nav-hover-bg: #d0d0d0 !default;
/// nav active background
$nav-active-bg: #ddd !default;
/// resource hover
$resource-hover: #fafafa !default;
/// resource shadow
$resource-shadow: #ddd !default;
/// Medium breakpoint
$breakpoint-medium: 768px;
/// Large breakpoint
$breakpoint-large: 984px;
/// Base font size - medium screen
@media only screen and (min-width : 768px) { $base: 15; } @media only screen and (min-width : 768px) { $base: 15; }
@media only screen and (min-width: 984px) { $base: 14; } // Base font size - small screen
\ No newline at end of file @media only screen and (min-width: 984px) { $base: 14; }
sass/core/_core-grid-desktop.scss
View file @ 2fcda1ed
@charset "UTF-8"; @charset 'UTF-8';
@media only screen and (min-width: 984px) { @media only screen and (min-width: 984px) {
body { font-size: 16px; } body { font-size: 16px; }
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col, .col {
float: left;
}
.one-col { width: 6.38297%; }
.two-col { width: 14.89361%; }
.three-col { width: 23.40425%; }
.four-col { width: 31.91489%; }
.five-col { width: 40.42553%; }
.six-col { width: 48.93617%; }
.seven-col { width: 57.4468%; }
.eight-col { width: 65.95744%; }
.nine-col { width: 74.46808%; }
.ten-col { width: 82.97872%; }
.eleven-col { width: 91.48936%; }
.three-col:nth-child(1):nth-last-child(4),
.three-col:nth-child(2):nth-last-child(3),
.three-col:nth-child(3):nth-last-child(2),
.three-col:nth-child(4):nth-last-child(1) { width: 23.36%; }
.three-col:nth-of-type(2) { margin-right: 2.21238%; }
.twelve-col {
width: 100%;
margin-right: 0;
}
.twelve-col .one-col {
width: 6.3053%;
margin-right: 2.21238%;
}
.twelve-col .two-col {
width: 14.823%;
margin-right: 2.21238%;
}
.twelve-col .three-col {
width: 23.3407%;
margin-right: 2.21238%;
}
.twelve-col .three-col:nth-child(1):nth-last-child(4),
.twelve-col .three-col:nth-child(2):nth-last-child(3),
.twelve-col .three-col:nth-child(3):nth-last-child(2),
.twelve-col .three-col:nth-child(4):nth-last-child(1) { width: 23.3407%; }
.twelve-col .three-col:nth-of-type(2) { margin-right: 2.21238%; }
.twelve-col .four-col {
width: 31.8584%;
margin-right: 2.21238%;
}
.twelve-col .five-col {
width: 40.3761%;
margin-right: 2.21238%;
}
.twelve-col .six-col {
width: 48.8938%;
margin-right: 2.21238%;
}
.twelve-col .seven-col {
width: 57.4115%;
margin-right: 2.21238%;
}
.twelve-col .eight-col {
width: 65.9292%;
margin-right: 2.21238%;
}
.twelve-col .nine-col {
width: 74.4469%;
margin-right: 2.21238%;
}
.twelve-col .ten-col {
width: 82.9646%;
margin-right: 2.21238%;
}
.twelve-col .eleven-col {
width: 91.4823%;
margin-right: 2.21238%;
}
.twelve-col .twelve-col {
width: 100%;
margin-right: 0;
}
.eleven-col .one-col {
width: 6.89238%;
margin-right: 2.41837%;
}
.eleven-col .two-col {
width: 16.20314%;
margin-right: 2.41837%;
}
.eleven-col .three-col {
width: 25.5139%;
margin-right: 2.41837%;
}
.eleven-col .four-col {
width: 34.82466%;
margin-right: 2.41837%;
}
.eleven-col .five-col {
width: 44.13542%;
margin-right: 2.41837%;
}
.eleven-col .six-col {
width: 53.44619%;
margin-right: 2.41837%;
}
.eleven-col .seven-col {
width: 62.75695%;
margin-right: 2.41837%;
}
.eleven-col .eight-col {
width: 72.06771%;
margin-right: 2.41837%;
}
.eleven-col .nine-col {
width: 81.37847%;
margin-right: 2.41837%;
}
.eleven-col .ten-col {
width: 90.68923%;
margin-right: 2.41837%;
}
.eleven-col .eleven-col {
width: 100%;
margin-right: 0;
}
.ten-col .one-col {
width: 7.6%;
margin-right: 2.66666%;
}
.ten-col .two-col {
width: 17.86666%;
margin-right: 2.66666%;
}
.ten-col .three-col {
width: 28.13333%;
margin-right: 2.66666%;
}
.ten-col .four-col {
width: 38.4%;
margin-right: 2.66666%;
}
.ten-col .five-col {
width: 48.66666%;
margin-right: 2.66666%;
}
.ten-col .six-col {
width: 58.93333%;
margin-right: 2.66666%;
}
.ten-col .seven-col {
width: 69.19999%;
margin-right: 2.66666%;
}
.ten-col .eight-col {
width: 79.46666%;
margin-right: 2.66666%;
}
.ten-col .nine-col {
width: 89.73333%;
margin-right: 2.66666%;
}
.ten-col .ten-col {
width: 100%;
margin-right: 0;
}
.nine-col .one-col {
width: 8.46953%;
margin-right: 2.97176%;
}
.nine-col .two-col {
width: 19.91084%;
margin-right: 2.97176%;
}
.nine-col .three-col {
width: 31.35215%;
margin-right: 2.97176%;
}
.nine-col .four-col {
width: 42.79346%;
margin-right: 2.97176%;
}
.nine-col .five-col {
width: 54.23476%;
margin-right: 2.97176%;
}
.nine-col .six-col {
width: 65.67607%;
margin-right: 2.97176%;
}
.nine-col .seven-col {
width: 77.11738%;
margin-right: 2.97176%;
}
.nine-col .eight-col {
width: 88.55869%;
margin-right: 2.97176%;
}
.nine-col .nine-col {
width: 100%;
margin-right: 0;
}
.eight-col .one-col {
width: 9.56375%;
margin-right: 3.3557%;
}
.eight-col .two-col {
width: 22.48322%;
margin-right: 3.3557%;
}
.eight-col .three-col {
width: 35.40268%;
margin-right: 3.3557%;
}
.eight-col .four-col {
width: 48.32214%;
margin-right: 3.3557%;
}
.eight-col .five-col {
width: 61.24161%;
margin-right: 3.3557%;
}
.eight-col .six-col {
width: 74.16107%;
margin-right: 3.3557%;
}
.eight-col .seven-col {
width: 87.08053%;
margin-right: 3.3557%;
}
.eight-col .eight-col {
width: 100%;
margin-right: 0;
}
.seven-col .one-col {
width: 10.98265%;
margin-right: 3.85356%;
}
.seven-col .two-col {
width: 25.81888%;
margin-right: 3.85356%;
}
.seven-col .three-col {
width: 40.6551%;
margin-right: 3.85356%;
}
.seven-col .four-col {
width: 55.49132%;
margin-right: 3.85356%;
}
.seven-col .five-col {
width: 70.32755%;
margin-right: 3.85356%;
}
.seven-col .six-col {
width: 85.16377%;
margin-right: 3.85356%;
}
.seven-col .seven-col {
width: 100%;
margin-right: 0;
}
.six-col .one-col {
width: 12.89592%;
margin-right: 4.52488%;
}
.six-col .two-col {
width: 30.31674%;
margin-right: 4.52488%;
}
.six-col .three-col {
width: 47.73755%;
margin-right: 4.52488%;
}
.six-col .four-col {
width: 65.15837%;
margin-right: 4.52488%;
}
.six-col .five-col {
width: 82.57918%;
margin-right: 4.52488%;
}
.six-col .six-col {
width: 100%;
margin-right: 0;
}
.five-col .one-col {
width: 15.61643%;
margin-right: 5.47945%;
}
.five-col .two-col {
width: 36.71232%;
margin-right: 5.47945%;
}
.five-col .three-col {
width: 57.80821%;
margin-right: 5.47945%;
}
.five-col .four-col {
width: 78.9041%;
margin-right: 5.47945%;
}
.five-col .five-col {
width: 100%;
margin-right: 0;
}
.four-col .one-col {
width: 19.79166%;
margin-right: 6.94444%;
}
.four-col .two-col {
width: 46.52777%;
margin-right: 6.94444%;
}
.four-col .three-col {
width: 73.26388%;
margin-right: 6.94444%;
}
.four-col .four-col {
width: 100%;
margin-right: 0;
}
.three-col .one-col {
width: 27.01421%;
margin-right: 9.47867%;
}
.three-col .two-col {
width: 63.5071%;
margin-right: 9.47867%;
}
.three-col .three-col {
width: 100%;
margin-right: 0;
}
.two-col .one-col {
width: 42.53731%;
margin-right: 14.92537%;
}
.two-col .two-col {
width: 100%;
margin-right: 0;
}
.one-col .one-col {
width: 100%;
margin-right: 0;
}
.twelve-col .last-col {
margin-right: 0;
}
.eleven-col .last-col {
margin-right: 0;
}
.ten-col .last-col {
margin-right: 0;
}
.nine-col .last-col {
margin-right: 0;
}
.eight-col .last-col {
margin-right: 0;
}
.seven-col .last-col {
margin-right: 0;
}
.six-col .last-col {
margin-right: 0;
}
.five-col .last-col {
margin-right: 0;
}
.four-col .last-col {
margin-right: 0;
}
.three-col .last-col {
margin-right: 0;
}
.two-col .last-col {
margin-right: 0;
}
.one-col .last-col {
margin-right: 0;
}
/**
* Main containers
*
* @section containers
*/
.row, #context-footer { /** Clear entire row. */
@include rounded-corners(0);
margin: 0;
padding: 40px 40px 20px;
}
.row:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.row-feature {
background: none;
}
/**
* Columns
*
* @section columns
*/
/* inner grid */
.container {
@include box-sizing;
margin: $gutter-width $gutter-width 0;
width: 100%;
}
/**
* Empty columns
*
* Add these to a column to append or prepend
* empty columns
*
* @section empty-columns
*/
.append-one { margin-right: $one-col + $gutter; }
.append-two { margin-right: $two-col + $gutter; }
.append-three { margin-right: $three-col + $gutter; }
.append-four { margin-right: $four-col + $gutter; }
.append-five { margin-right: $five-col + $gutter; }
.append-six { margin-right: $six-col + $gutter; }
.append-seven { margin-right: $seven-col + $gutter; }
.append-eight { margin-right: $eight-col + $gutter; }
.append-nine { margin-right: $nine-col + $gutter; }
.append-ten { margin-right: $ten-col + $gutter; }
.append-eleven { margin-right: $eleven-col + $gutter; }
.prepend-one { margin-left: $one-col + 2.12766%; }
.prepend-two { margin-left: $two-col + 2.12766%; }
.prepend-three { margin-left: $three-col + 2.12766%; }
.prepend-four { margin-left: $four-col + 2.12766%; }
.prepend-five { margin-left: $five-col + 2.12766%; }
.prepend-six { margin-left: $six-col + $gutter; }
.prepend-seven { margin-left: $seven-col + $gutter; }
.prepend-eight { margin-left: $eight-col + $gutter; }
.prepend-nine { margin-left: $nine-col + $gutter; }
.prepend-ten { margin-left: $ten-col + $gutter; }
.prepend-eleven { margin-left: $eleven-col + $gutter; }
.push-one { margin-left: 57px; }
/**
* Push and pull
*
* Use these classes to push elements into the next
* column and pull it into the previous column
*
* @section push-pull
*/
.pull-one, .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten, .pull-eleven {
float: left;
position: relative;
}
.pull-one { margin-left: -$one-col; }
.pull-two { margin-left: -($two-col + $gutter); }
.pull-three { margin-left: -($three-col + $gutter); }
.pull-four { margin-left: -($four-col + $gutter); }
.pull-five { margin-left: -($four-col + $gutter); }
.pull-six { margin-left: -($six-col + $gutter); }
.pull-seven { margin-left: -($seven-col + $gutter); }
.pull-eight { margin-left: -($eight-col + $gutter); }
.pull-nine { margin-left: -($nine-col + $gutter); }
.pull-ten { margin-left: -($ten-col + $gutter); }
.pull-eleven { margin-left: -($eleven-col + $gutter); }
.push-1, .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten, .push-eleven {
float: left;
position: relative;
}
.push-one { margin: 0 (-($one-col + $gutter)) 0 ($one-col + $gutter); }
.push-two { margin: 0 (-($two-col + ($gutter * 2))) 0 ($two-col + ($gutter * 2)); }
.push-three { margin: 0 (-($three-col + ($gutter * 2))) 0 ($three-col + ($gutter * 2)); }
.push-four { margin: 0 (-($four-col + ($gutter * 2))) 0 ($four-col + ($gutter * 2)); }
.push-five { margin: 0 (-($four-col + ($gutter * 2))) 0 ($four-col + ($gutter * 2)); }
.push-six { margin: 0 (-($six-col + ($gutter * 2))) 0 ($six-col + ($gutter * 2)); }
.push-seven { margin: 0 (-($seven-col + ($gutter * 2))) 0 ($seven-col + ($gutter * 2)); }
.push-eight { margin: 0 (-($eight-col + ($gutter * 2))) 0 ($eight-col + ($gutter * 2)); }
.push-nine { margin: 0 (-($nine-col + ($gutter * 2))) 0 ($nine-col + ($gutter * 2)); }
.push-ten { margin: 0 (-($ten-col + ($gutter * 2))) 0 ($ten-col + ($gutter * 2)); }
.push-eleven { margin: 0 (-($eleven-col + ($gutter * 2))) 0 ($eleven-col + ($gutter * 2)); }
.one-col,
.two-col,
.three-col,
.four-col,
.five-col,
.six-col,
.seven-col,
.eight-col,
.nine-col,
.ten-col,
.eleven-col,
.twelve-col,
.col {
float: left;
}
.one-col { width: 6.38297%; }
.two-col { width: 14.89361%; }
.three-col { width: 23.40425%; }
.four-col { width: 31.91489%; }
.five-col { width: 40.42553%; }
.six-col { width: 48.93617%; }
.seven-col { width: 57.4468%; }
.eight-col { width: 65.95744%; }
.nine-col { width: 74.46808%; }
.ten-col { width: 82.97872%; }
.eleven-col { width: 91.48936%; }
.three-col:nth-child(1):nth-last-child(4),
.three-col:nth-child(2):nth-last-child(3),
.three-col:nth-child(3):nth-last-child(2),
.three-col:nth-child(4):nth-last-child(1) {
width: 23.36%;
}
.three-col:nth-of-type(2) { margin-right: 2.21238%; }
.twelve-col {
margin-right: 0;
width: 100%;
}
.twelve-col .one-col {
margin-right: 2.21238%;
width: 6.3053%;
}
.twelve-col .two-col {
margin-right: 2.21238%;
width: 14.823%;
}
.twelve-col .three-col {
margin-right: 2.21238%;
width: 23.3407%;
}
.twelve-col .three-col:nth-child(1):nth-last-child(4),
.twelve-col .three-col:nth-child(2):nth-last-child(3),
.twelve-col .three-col:nth-child(3):nth-last-child(2),
.twelve-col .three-col:nth-child(4):nth-last-child(1) {
width: 23.3407%;
}
.twelve-col .three-col:nth-of-type(2) {
margin-right: 2.21238%;
}
.twelve-col .four-col {
margin-right: 2.21238%;
width: 31.8584%;
}
.twelve-col .five-col {
margin-right: 2.21238%;
width: 40.3761%;
}
.twelve-col .six-col {
margin-right: 2.21238%;
width: 48.8938%;
}
.twelve-col .seven-col {
margin-right: 2.21238%;
width: 57.4115%;
}
.twelve-col .eight-col {
margin-right: 2.21238%;
width: 65.9292%;
}
.twelve-col .nine-col {
margin-right: 2.21238%;
width: 74.4469%;
}
.twelve-col .ten-col {
margin-right: 2.21238%;
width: 82.9646%;
}
.twelve-col .eleven-col {
margin-right: 2.21238%;
width: 91.4823%;
}
.twelve-col .twelve-col {
margin-right: 0;
width: 100%;
}
.eleven-col .one-col {
margin-right: 2.41837%;
width: 6.89238%;
}
.eleven-col .two-col {
margin-right: 2.41837%;
width: 16.20314%;
}
.eleven-col .three-col {
margin-right: 2.41837%;
width: 25.5139%;
}
.eleven-col .four-col {
margin-right: 2.41837%;
width: 34.82466%;
}
.eleven-col .five-col {
margin-right: 2.41837%;
width: 44.13542%;
}
.eleven-col .six-col {
margin-right: 2.41837%;
width: 53.44619%;
}
.eleven-col .seven-col {
margin-right: 2.41837%;
width: 62.75695%;
}
.eleven-col .eight-col {
margin-right: 2.41837%;
width: 72.06771%;
}
.eleven-col .nine-col {
margin-right: 2.41837%;
width: 81.37847%;
}
.eleven-col .ten-col {
margin-right: 2.41837%;
width: 90.68923%;
}
.eleven-col .eleven-col {
margin-right: 0;
width: 100%;
}
.ten-col .one-col {
margin-right: 2.66666%;
width: 7.6%;
}
.ten-col .two-col {
margin-right: 2.66666%;
width: 17.86666%;
}
.ten-col .three-col {
margin-right: 2.66666%;
width: 28.13333%;
}
.ten-col .four-col {
margin-right: 2.66666%;
width: 38.4%;
}
.ten-col .five-col {
margin-right: 2.66666%;
width: 48.66666%;
}
.ten-col .six-col {
margin-right: 2.66666%;
width: 58.93333%;
}
.ten-col .seven-col {
margin-right: 2.66666%;
width: 69.19999%;
}
.ten-col .eight-col {
margin-right: 2.66666%;
width: 79.46666%;
}
.ten-col .nine-col {
margin-right: 2.66666%;
width: 89.73333%;
}
.ten-col .ten-col {
margin-right: 0;
width: 100%;
}
.nine-col .one-col {
margin-right: 2.97176%;
width: 8.46953%;
}
.nine-col .two-col {
margin-right: 2.97176%;
width: 19.91084%;
}
.nine-col .three-col {
margin-right: 2.97176%;
width: 31.35215%;
}
.nine-col .four-col {
margin-right: 2.97176%;
width: 42.79346%;
}
.nine-col .five-col {
margin-right: 2.97176%;
width: 54.23476%;
}
.nine-col .six-col {
margin-right: 2.97176%;
width: 65.67607%;
}
.nine-col .seven-col {
margin-right: 2.97176%;
width: 77.11738%;
}
.nine-col .eight-col {
margin-right: 2.97176%;
width: 88.55869%;
}
.nine-col .nine-col {
margin-right: 0;
width: 100%;
}
.eight-col .one-col {
margin-right: 3.3557%;
width: 9.56375%;
}
.eight-col .two-col {
margin-right: 3.3557%;
width: 22.48322%;
}
.eight-col .three-col {
margin-right: 3.3557%;
width: 35.40268%;
}
.eight-col .four-col {
margin-right: 3.3557%;
width: 48.32214%;
}
.eight-col .five-col {
margin-right: 3.3557%;
width: 61.24161%;
}
.eight-col .six-col {
margin-right: 3.3557%;
width: 74.16107%;
}
.eight-col .seven-col {
margin-right: 3.3557%;
width: 87.08053%;
}
.eight-col .eight-col {
margin-right: 0;
width: 100%;
}
.seven-col .one-col {
margin-right: 3.85356%;
width: 10.98265%;
}
.seven-col .two-col {
margin-right: 3.85356%;
width: 25.81888%;
}
.seven-col .three-col {
margin-right: 3.85356%;
width: 40.6551%;
}
.seven-col .four-col {
margin-right: 3.85356%;
width: 55.49132%;
}
.seven-col .five-col {
margin-right: 3.85356%;
width: 70.32755%;
}
.seven-col .six-col {
margin-right: 3.85356%;
width: 85.16377%;
}
.seven-col .seven-col {
margin-right: 0;
width: 100%;
}
.six-col .one-col {
margin-right: 4.52488%;
width: 12.89592%;
}
.six-col .two-col {
margin-right: 4.52488%;
width: 30.31674%;
}
.six-col .three-col {
margin-right: 4.52488%;
width: 47.73755%;
}
.six-col .four-col {
margin-right: 4.52488%;
width: 65.15837%;
}
.six-col .five-col {
margin-right: 4.52488%;
width: 82.57918%;
}
.six-col .six-col {
margin-right: 0;
width: 100%;
}
.five-col .one-col {
margin-right: 5.47945%;
width: 15.61643%;
}
.five-col .two-col {
margin-right: 5.47945%;
width: 36.71232%;
}
.five-col .three-col {
margin-right: 5.47945%;
width: 57.80821%;
}
.five-col .four-col {
margin-right: 5.47945%;
width: 78.9041%;
}
.five-col .five-col {
margin-right: 0;
width: 100%;
}
.four-col .one-col {
margin-right: 6.94444%;
width: 19.79166%;
}
.four-col .two-col {
margin-right: 6.94444%;
width: 46.52777%;
}
.four-col .three-col {
margin-right: 6.94444%;
width: 73.26388%;
}
.four-col .four-col {
margin-right: 0;
width: 100%;
}
.three-col .one-col {
margin-right: 9.47867%;
width: 27.01421%;
}
.three-col .two-col {
margin-right: 9.47867%;
width: 63.5071%;
}
.three-col .three-col {
margin-right: 0;
width: 100%;
}
.two-col .one-col {
margin-right: 14.92537%;
width: 42.53731%;
}
.two-col .two-col {
margin-right: 0;
width: 100%;
}
.one-col .one-col {
margin-right: 0;
width: 100%;
}
.twelve-col .last-col {
margin-right: 0;
}
.eleven-col .last-col {
margin-right: 0;
}
.ten-col .last-col {
margin-right: 0;
}
.nine-col .last-col {
margin-right: 0;
}
.eight-col .last-col {
margin-right: 0;
}
.seven-col .last-col {
margin-right: 0;
}
.six-col .last-col {
margin-right: 0;
}
.five-col .last-col {
margin-right: 0;
}
.four-col .last-col {
margin-right: 0;
}
.three-col .last-col {
margin-right: 0;
}
.two-col .last-col {
margin-right: 0;
}
.one-col .last-col {
margin-right: 0;
}
// Columns
// @section columns
// inner grid
.container {
box-sizing: border-box;
margin: $gutter-width $gutter-width 0;
width: 100%;
}
// Empty columns
// Add these to a column to append or prepend
// empty columns
// @section empty-columns
.append-one { margin-right: $one-col + $gutter; }
.append-two { margin-right: $two-col + $gutter; }
.append-three { margin-right: $three-col + $gutter; }
.append-four { margin-right: $four-col + $gutter; }
.append-five { margin-right: $five-col + $gutter; }
.append-six { margin-right: $six-col + $gutter; }
.append-seven { margin-right: $seven-col + $gutter; }
.append-eight { margin-right: $eight-col + $gutter; }
.append-nine { margin-right: $nine-col + $gutter; }
.append-ten { margin-right: $ten-col + $gutter; }
.append-eleven { margin-right: $eleven-col + $gutter; }
.prepend-one { margin-left: $one-col + 2.12766%; }
.prepend-two { margin-left: $two-col + 2.12766%; }
.prepend-three { margin-left: $three-col + 2.12766%; }
.prepend-four { margin-left: $four-col + 2.12766%; }
.prepend-five { margin-left: $five-col + 2.12766%; }
.prepend-six { margin-left: $six-col + $gutter; }
.prepend-seven { margin-left: $seven-col + $gutter; }
.prepend-eight { margin-left: $eight-col + $gutter; }
.prepend-nine { margin-left: $nine-col + $gutter; }
.prepend-ten { margin-left: $ten-col + $gutter; }
.prepend-eleven { margin-left: $eleven-col + $gutter; }
.push-one { margin-left: 57px; }
// Push and pull
// Use these classes to push elements into the next
// column and pull it into the previous column
// @section push-pull
.pull-one,
.pull-two,
.pull-three,
.pull-four,
.pull-five,
.pull-six,
.pull-seven,
.pull-eight,
.pull-nine,
.pull-ten,
.pull-eleven {
float: left;
position: relative;
}
.pull-one { margin-left: -$one-col; }
.pull-two { margin-left: -($two-col + $gutter); }
.pull-three { margin-left: -($three-col + $gutter); }
.pull-four { margin-left: -($four-col + $gutter); }
.pull-five { margin-left: -($four-col + $gutter); }
.pull-six { margin-left: -($six-col + $gutter); }
.pull-seven { margin-left: -($seven-col + $gutter); }
.pull-eight { margin-left: -($eight-col + $gutter); }
.pull-nine { margin-left: -($nine-col + $gutter); }
.pull-ten { margin-left: -($ten-col + $gutter); }
.pull-eleven { margin-left: -($eleven-col + $gutter); }
.push-1,
.push-two,
.push-three,
.push-four,
.push-five,
.push-six,
.push-seven,
.push-eight,
.push-nine,
.push-ten,
.push-eleven {
float: left;
position: relative;
}
.push-one { margin: 0 (-($one-col + $gutter)) 0 ($one-col + $gutter); }
.push-two { margin: 0 (-($two-col + ($gutter * 2))) 0 ($two-col + ($gutter * 2)); }
.push-three { margin: 0 (-($three-col + ($gutter * 2))) 0 ($three-col + ($gutter * 2)); }
.push-four { margin: 0 (-($four-col + ($gutter * 2))) 0 ($four-col + ($gutter * 2)); }
.push-five { margin: 0 (-($four-col + ($gutter * 2))) 0 ($four-col + ($gutter * 2)); }
.push-six { margin: 0 (-($six-col + ($gutter * 2))) 0 ($six-col + ($gutter * 2)); }
.push-seven { margin: 0 (-($seven-col + ($gutter * 2))) 0 ($seven-col + ($gutter * 2)); }
.push-eight { margin: 0 (-($eight-col + ($gutter * 2))) 0 ($eight-col + ($gutter * 2)); }
.push-nine { margin: 0 (-($nine-col + ($gutter * 2))) 0 ($nine-col + ($gutter * 2)); }
.push-ten { margin: 0 (-($ten-col + ($gutter * 2))) 0 ($ten-col + ($gutter * 2)); }
.push-eleven { margin: 0 (-($eleven-col + ($gutter * 2))) 0 ($eleven-col + ($gutter * 2)); }
} }
sass/core/_core-grid-tablet.scss
View file @ 2fcda1ed
@charset "UTF-8"; @charset 'UTF-8';
@media only screen and (min-width : 768px) { @media only screen and (min-width: 768px) {
body {
font-size: 15px; body {
} font-size: 15px;
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col, .col { }
float: left;
} .one-col,
.two-col,
.one-col { width: 6.38297%; } .three-col,
.two-col { width: 14.89361%; } .four-col,
.three-col { width: 23.40425%; } .five-col,
.six-col,
.four-col { width: 31.91489%; } .seven-col,
.five-col { width: 40.42553%; } .eight-col,
.six-col { width: 48.93617%; } .nine-col,
.seven-col { width: 57.4468%; } .ten-col,
.eight-col { width: 65.95744%; } .eleven-col,
.nine-col { width: 74.46808%; } .twelve-col,
.ten-col { width: 82.97872%; } .col {
.eleven-col { width: 91.48936%; } float: left;
}
.twelve-col {
width: 100%; .one-col {
margin-right: 0; width: 6.38297%;
} }
.twelve-col .one-col { .two-col {
width: 6.3053%; width: 14.89361%;
margin-right: 2.21238%; }
}
.twelve-col .two-col { .three-col {
width: 14.823%; width: 23.40425%;
margin-right: 2.21238%; }
}
.twelve-col .three-col { .four-col {
width: 23.3407%; width: 31.91489%;
margin-right: 2.21238%; }
}
.twelve-col .three-col { .five-col {
width: 48.8938%; width: 40.42553%;
margin-right: 2.21238%; }
}
.six-col {
.twelve-col .four-col { width: 48.93617%;
width: 31.8584%; }
margin-right: 2.21238%;
} .seven-col {
.twelve-col .five-col { width: 57.4468%;
width: 40.3761%; }
margin-right: 2.21238%;
} .eight-col {
.twelve-col .six-col { width: 65.95744%;
width: 48.8938%; }
margin-right: 2.21238%;
} .nine-col {
.twelve-col .seven-col { width: 74.46808%;
width: 57.4115%; }
margin-right: 2.21238%;
} .ten-col {
.twelve-col .eight-col { width: 82.97872%;
width: 65.9292%; }
margin-right: 2.21238%;
} .eleven-col {
.twelve-col .nine-col { width: 91.48936%;
width: 74.4469%; }
margin-right: 2.21238%;
} .twelve-col {
.twelve-col .ten-col { margin-right: 0;
width: 82.9646%; width: 100%;
margin-right: 2.21238%; }
}
.twelve-col .eleven-col { .twelve-col .one-col {
width: 91.4823%; margin-right: 2.21238%;
margin-right: 2.21238%; width: 6.3053%;
} }
.twelve-col .twelve-col {
width: 100%; .twelve-col .two-col {
margin-right: 0; margin-right: 2.21238%;
} width: 14.823%;
.eleven-col .one-col { }
width: 6.89238%;
margin-right: 2.41837%; .twelve-col .three-col {
} margin-right: 2.21238%;
.eleven-col .two-col { width: 23.3407%;
width: 16.20314%; }
margin-right: 2.41837%;
} .twelve-col .three-col {
.eleven-col .three-col { margin-right: 2.21238%;
width: 25.5139%; width: 48.8938%;
margin-right: 2.41837%; }
}
.eleven-col .four-col { .twelve-col .four-col {
width: 34.82466%; margin-right: 2.21238%;
margin-right: 2.41837%; width: 31.8584%;
} }
.eleven-col .five-col {
width: 44.13542%; .twelve-col .five-col {
margin-right: 2.41837%; margin-right: 2.21238%;
} width: 40.3761%;
.eleven-col .six-col { }
width: 53.44619%;
margin-right: 2.41837%; .twelve-col .six-col {
} margin-right: 2.21238%;
.eleven-col .seven-col { width: 48.8938%;
width: 62.75695%; }
margin-right: 2.41837%;
} .twelve-col .seven-col {
.eleven-col .eight-col { margin-right: 2.21238%;
width: 72.06771%; width: 57.4115%;
margin-right: 2.41837%; }
}
.eleven-col .nine-col { .twelve-col .eight-col {
width: 81.37847%; margin-right: 2.21238%;
margin-right: 2.41837%; width: 65.9292%;
} }
.eleven-col .ten-col {
width: 90.68923%; .twelve-col .nine-col {
margin-right: 2.41837%; margin-right: 2.21238%;
} width: 74.4469%;
.eleven-col .eleven-col { }
width: 100%;
margin-right: 0; .twelve-col .ten-col {
} margin-right: 2.21238%;
.ten-col .one-col { width: 82.9646%;
width: 7.6%; }
margin-right: 2.66666%;
} .twelve-col .eleven-col {
.ten-col .two-col { margin-right: 2.21238%;
width: 17.86666%; width: 91.4823%;
margin-right: 2.66666%; }
}
.ten-col .three-col { .twelve-col .twelve-col {
width: 28.13333%; margin-right: 0;
margin-right: 2.66666%; width: 100%;
} }
.ten-col .four-col {
width: 38.4%; .eleven-col .one-col {
margin-right: 2.66666%; margin-right: 2.41837%;
} width: 6.89238%;
.ten-col .five-col { }
width: 48.66666%;
margin-right: 2.66666%; .eleven-col .two-col {
} margin-right: 2.41837%;
.ten-col .six-col { width: 16.20314%;
width: 58.93333%; }
margin-right: 2.66666%;
} .eleven-col .three-col {
.ten-col .seven-col { margin-right: 2.41837%;
width: 69.19999%; width: 25.5139%;
margin-right: 2.66666%; }
}
.ten-col .eight-col { .eleven-col .four-col {
width: 79.46666%; margin-right: 2.41837%;
margin-right: 2.66666%; width: 34.82466%;
} }
.ten-col .nine-col {
width: 89.73333%; .eleven-col .five-col {
margin-right: 2.66666%; margin-right: 2.41837%;
} width: 44.13542%;
.ten-col .ten-col { }
width: 100%;
margin-right: 0; .eleven-col .six-col {
} margin-right: 2.41837%;
.nine-col .one-col { width: 53.44619%;
width: 8.46953%; }
margin-right: 2.97176%;
} .eleven-col .seven-col {
.nine-col .two-col { margin-right: 2.41837%;
width: 19.91084%; width: 62.75695%;
margin-right: 2.97176%; }
}
.nine-col .three-col { .eleven-col .eight-col {
width: 31.35215%; margin-right: 2.41837%;
margin-right: 2.97176%; width: 72.06771%;
} }
.nine-col .four-col {
width: 42.79346%; .eleven-col .nine-col {
margin-right: 2.97176%; margin-right: 2.41837%;
} width: 81.37847%;
.nine-col .five-col { }
width: 54.23476%;
margin-right: 2.97176%; .eleven-col .ten-col {
} margin-right: 2.41837%;
.nine-col .six-col { width: 90.68923%;
width: 65.67607%; }
margin-right: 2.97176%;
} .eleven-col .eleven-col {
.nine-col .seven-col { margin-right: 0;
width: 77.11738%; width: 100%;
margin-right: 2.97176%; }
}
.nine-col .eight-col { .ten-col .one-col {
width: 88.55869%; margin-right: 2.66666%;
margin-right: 2.97176%; width: 7.6%;
} }
.nine-col .nine-col {
width: 100%; .ten-col .two-col {
margin-right: 0; margin-right: 2.66666%;
} width: 17.86666%;
.eight-col .one-col { }
width: 9.56375%;
margin-right: 3.3557%; .ten-col .three-col {
} margin-right: 2.66666%;
.eight-col .two-col { width: 28.13333%;
width: 22.48322%; }
margin-right: 3.3557%;
} .ten-col .four-col {
.eight-col .three-col { margin-right: 2.66666%;
width: 35.40268%; width: 38.4%;
margin-right: 3.3557%; }
}
.eight-col .four-col { .ten-col .five-col {
width: 48.32214%; margin-right: 2.66666%;
margin-right: 3.3557%; width: 48.66666%;
} }
.eight-col .five-col {
width: 61.24161%; .ten-col .six-col {
margin-right: 3.3557%; margin-right: 2.66666%;
} width: 58.93333%;
.eight-col .six-col { }
width: 74.16107%;
margin-right: 3.3557%; .ten-col .seven-col {
} margin-right: 2.66666%;
.eight-col .seven-col { width: 69.19999%;
width: 87.08053%; }
margin-right: 3.3557%;
} .ten-col .eight-col {
.eight-col .eight-col { margin-right: 2.66666%;
width: 100%; width: 79.46666%;
margin-right: 0; }
}
.seven-col .one-col { .ten-col .nine-col {
width: 10.98265%; margin-right: 2.66666%;
margin-right: 3.85356%; width: 89.73333%;
} }
.seven-col .two-col {
width: 25.81888%; .ten-col .ten-col {
margin-right: 3.85356%; margin-right: 0;
} width: 100%;
.seven-col .three-col { }
width: 40.6551%;
margin-right: 3.85356%; .nine-col .one-col {
} margin-right: 2.97176%;
.seven-col .four-col { width: 8.46953%;
width: 55.49132%; }
margin-right: 3.85356%;
} .nine-col .two-col {
.seven-col .five-col { margin-right: 2.97176%;
width: 70.32755%; width: 19.91084%;
margin-right: 3.85356%; }
}
.seven-col .six-col { .nine-col .three-col {
width: 85.16377%; margin-right: 2.97176%;
margin-right: 3.85356%; width: 31.35215%;
} }
.seven-col .seven-col {
width: 100%; .nine-col .four-col {
margin-right: 0; margin-right: 2.97176%;
} width: 42.79346%;
.six-col .one-col { }
width: 12.89592%;
margin-right: 4.52488%; .nine-col .five-col {
} margin-right: 2.97176%;
.six-col .two-col { width: 54.23476%;
width: 30.31674%; }
margin-right: 4.52488%;
} .nine-col .six-col {
.six-col .three-col { margin-right: 2.97176%;
width: 47.73755%; width: 65.67607%;
margin-right: 4.52488%; }
}
.six-col .four-col { .nine-col .seven-col {
width: 65.15837%; margin-right: 2.97176%;
margin-right: 4.52488%; width: 77.11738%;
} }
.six-col .five-col {
width: 82.57918%; .nine-col .eight-col {
margin-right: 4.52488%; margin-right: 2.97176%;
} width: 88.55869%;
.six-col .six-col { }
width: 100%;
margin-right: 0; .nine-col .nine-col {
} margin-right: 0;
.five-col .one-col { width: 100%;
width: 15.61643%; }
margin-right: 5.47945%;
} .eight-col .one-col {
.five-col .two-col { margin-right: 3.3557%;
width: 36.71232%; width: 9.56375%;
margin-right: 5.47945%; }
}
.five-col .three-col { .eight-col .two-col {
width: 57.80821%; margin-right: 3.3557%;
margin-right: 5.47945%; width: 22.48322%;
} }
.five-col .four-col {
width: 78.9041%; .eight-col .three-col {
margin-right: 5.47945%; margin-right: 3.3557%;
} width: 35.40268%;
.five-col .five-col { }
width: 100%;
margin-right: 0; .eight-col .four-col {
} margin-right: 3.3557%;
.four-col .one-col { width: 48.32214%;
width: 19.79166%; }
margin-right: 6.94444%;
} .eight-col .five-col {
.four-col .two-col { margin-right: 3.3557%;
width: 46.52777%; width: 61.24161%;
margin-right: 6.94444%; }
}
.four-col .three-col { .eight-col .six-col {
width: 73.26388%; margin-right: 3.3557%;
margin-right: 6.94444%; width: 74.16107%;
} }
.four-col .four-col {
width: 100%; .eight-col .seven-col {
margin-right: 0; margin-right: 3.3557%;
} width: 87.08053%;
.three-col .one-col { }
width: 27.01421%;
margin-right: 9.47867%; .eight-col .eight-col {
} margin-right: 0;
.three-col .two-col { width: 100%;
width: 63.5071%; }
margin-right: 9.47867%;
} .seven-col .one-col {
.three-col .three-col { margin-right: 3.85356%;
width: 100%; width: 10.98265%;
margin-right: 0; }
}
.two-col .one-col { .seven-col .two-col {
width: 42.53731%; margin-right: 3.85356%;
margin-right: 14.92537%; width: 25.81888%;
} }
.two-col .two-col {
width: 100%; .seven-col .three-col {
margin-right: 0; margin-right: 3.85356%;
} width: 40.6551%;
.one-col .one-col { }
width: 100%;
margin-right: 0; .seven-col .four-col {
} margin-right: 3.85356%;
.twelve-col .last-col { width: 55.49132%;
margin-right: 0; }
}
.eleven-col .last-col { .seven-col .five-col {
margin-right: 0; margin-right: 3.85356%;
} width: 70.32755%;
.ten-col .last-col { }
margin-right: 0;
} .seven-col .six-col {
.nine-col .last-col { margin-right: 3.85356%;
margin-right: 0; width: 85.16377%;
} }
.eight-col .last-col {
margin-right: 0; .seven-col .seven-col {
} margin-right: 0;
.seven-col .last-col { width: 100%;
margin-right: 0; }
}
.six-col .last-col { .six-col .one-col {
margin-right: 0; margin-right: 4.52488%;
} width: 12.89592%;
.five-col .last-col { }
margin-right: 0;
} .six-col .two-col {
.four-col .last-col { margin-right: 4.52488%;
margin-right: 0; width: 30.31674%;
} }
.three-col .last-col {
margin-right: 0; .six-col .three-col {
} margin-right: 4.52488%;
.two-col .last-col { width: 47.73755%;
margin-right: 0; }
}
.one-col .last-col { .six-col .four-col {
margin-right: 0; margin-right: 4.52488%;
} width: 65.15837%;
}
/**
* Main containers .six-col .five-col {
* margin-right: 4.52488%;
* @section containers width: 82.57918%;
*/ }
.six-col .six-col {
margin-right: 0;
.row, #context-footer { /** Clear entire row. */ width: 100%;
@include rounded_corners(0); }
margin: 0;
padding: 40px 40px 20px; .five-col .one-col {
} margin-right: 5.47945%;
width: 15.61643%;
.row:after { }
content: ".";
visibility: hidden; .five-col .two-col {
display: block; margin-right: 5.47945%;
height: 0; width: 36.71232%;
clear: both; }
}
.five-col .three-col {
.row-feature { margin-right: 5.47945%;
background: none; width: 57.80821%;
} }
/** .five-col .four-col {
* Columns margin-right: 5.47945%;
* width: 78.9041%;
* @section columns }
*/
.five-col .five-col {
/* inner grid */ margin-right: 0;
.container { width: 100%;
@include box-sizing; }
margin: $gutter_width $gutter_width 0;
width: 100%; .four-col .one-col {
} margin-right: 6.94444%;
width: 19.79166%;
/** }
* Empty columns
* .four-col .two-col {
* Add these to a column to append or prepend margin-right: 6.94444%;
* empty columns width: 46.52777%;
* }
* @section empty-columns
*/ .four-col .three-col {
margin-right: 6.94444%;
.append-one { margin-right: $one_col + $gutter; } width: 73.26388%;
.append-two { margin-right: $two_col + $gutter; } }
.append-three { margin-right: $three_col + $gutter; }
.append-four { margin-right: $four_col + $gutter; } .four-col .four-col {
.append-five { margin-right: $five_col + $gutter; } margin-right: 0;
.append-six { margin-right: $six_col + $gutter; } width: 100%;
.append-seven { margin-right: $seven_col + $gutter; } }
.append-eight { margin-right: $eight_col + $gutter; }
.append-nine { margin-right: $nine_col + $gutter; } .three-col .one-col {
.append-ten { margin-right: $ten_col + $gutter; } margin-right: 9.47867%;
.append-eleven { margin-right: $eleven_col + $gutter; } width: 27.01421%;
}
.prepend-one { margin-left: $one_col + 2.12766%; }
.prepend-two { margin-left: $two_col + 2.12766%; } .three-col .two-col {
.prepend-three { margin-left: $three_col + 2.12766%; } margin-right: 9.47867%;
.prepend-four { margin-left: $four_col + 2.12766%; } width: 63.5071%;
.prepend-five { margin-left: $five_col + 2.12766%; } }
.prepend-six { margin-left: $six_col + $gutter; }
.prepend-seven { margin-left: $seven_col + $gutter; } .three-col .three-col {
.prepend-eight { margin-left: $eight_col + $gutter; } margin-right: 0;
.prepend-nine { margin-left: $nine_col + $gutter; } width: 100%;
.prepend-ten { margin-left: $ten_col + $gutter; } }
.prepend-eleven { margin-left: $eleven_col + $gutter; }
.two-col .one-col {
.push-one { margin-left: 57px; } margin-right: 14.92537%;
width: 42.53731%;
/** }
* Push and pull
* .two-col .two-col {
* Use these classes to push elements into the next margin-right: 0;
* column and pull it into the previous column width: 100%;
* }
* @section push-pull
*/ .one-col .one-col {
margin-right: 0;
.pull-one, .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten, .pull-eleven { width: 100%;
float: left; }
position: relative;
} .twelve-col .last-col {
.pull-one { margin-left: -$one_col; } margin-right: 0;
.pull-two { margin-left: -($two_col + $gutter); } }
.pull-three { margin-left: -($three_col + $gutter); }
.pull-four { margin-left: -($four_col + $gutter); } .eleven-col .last-col {
.pull-five { margin-left: -($four_col + $gutter); } margin-right: 0;
.pull-six { margin-left: -($six_col + $gutter); } }
.pull-seven { margin-left: -($seven_col + $gutter); }
.pull-eight { margin-left: -($eight_col + $gutter); } .ten-col .last-col {
.pull-nine { margin-left: -($nine_col + $gutter); } margin-right: 0;
.pull-ten { margin-left: -($ten_col + $gutter); } }
.pull-eleven { margin-left: -($eleven_col + $gutter); }
.nine-col .last-col {
.push-1, .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten, .push-eleven { margin-right: 0;
float: left; }
position: relative;
} .eight-col .last-col {
.push-one { margin: 0 (-($one_col + $gutter)) 0 ($one_col + $gutter); } margin-right: 0;
.push-two { margin: 0 (-($two_col + ($gutter * 2))) 0 ($two_col + ($gutter * 2)); } }
.push-three { margin: 0 (-($three_col + ($gutter * 2))) 0 ($three_col + ($gutter * 2)); }
.push-four { margin: 0 (-($four_col + ($gutter * 2))) 0 ($four_col + ($gutter * 2)); } .seven-col .last-col {
.push-five { margin: 0 (-($four_col + ($gutter * 2))) 0 ($four_col + ($gutter * 2)); } margin-right: 0;
.push-six { margin: 0 (-($six_col + ($gutter * 2))) 0 ($six_col + ($gutter * 2)); } }
.push-seven { margin: 0 (-($seven_col + ($gutter * 2))) 0 ($seven_col + ($gutter * 2)); }
.push-eight { margin: 0 (-($eight_col + ($gutter * 2))) 0 ($eight_col + ($gutter * 2)); } .six-col .last-col {
.push-nine { margin: 0 (-($nine_col + ($gutter * 2))) 0 ($nine_col + ($gutter * 2)); } margin-right: 0;
.push-ten { margin: 0 (-($ten_col + ($gutter * 2))) 0 ($ten_col + ($gutter * 2)); } }
.push-eleven { margin: 0 (-($eleven_col + ($gutter * 2))) 0 ($eleven_col + ($gutter * 2)); }
} .five-col .last-col {
\ No newline at end of file margin-right: 0;
}
.four-col .last-col {
margin-right: 0;
}
.three-col .last-col {
margin-right: 0;
}
.two-col .last-col {
margin-right: 0;
}
.one-col .last-col {
margin-right: 0;
}
// Columns
// @section columns
/// inner grid
.container {
box-sizing: border-box;
margin: $gutter-width $gutter-width 0;
width: 100%;
}
/// Empty columns
/// Add these to a column to append or prepend
/// empty columns
/// @section empty-columns
.append-one {
margin-right: $one-col + $gutter;
}
.append-two {
margin-right: $two-col + $gutter;
}
.append-three {
margin-right: $three-col + $gutter;
}
.append-four {
margin-right: $four-col + $gutter;
}
.append-five {
margin-right: $five-col + $gutter;
}
.append-six {
margin-right: $six-col + $gutter;
}
.append-seven {
margin-right: $seven-col + $gutter;
}
.append-eight {
margin-right: $eight-col + $gutter;
}
.append-nine {
margin-right: $nine-col + $gutter;
}
.append-ten {
margin-right: $ten-col + $gutter;
}
.append-eleven {
margin-right: $eleven-col + $gutter;
}
.prepend-one {
margin-left: $one-col + 2.12766%;
}
.prepend-two {
margin-left: $two-col + 2.12766%;
}
.prepend-three {
margin-left: $three-col + 2.12766%;
}
.prepend-four {
margin-left: $four-col + 2.12766%;
}
.prepend-five {
margin-left: $five-col + 2.12766%;
}
.prepend-six {
margin-left: $six-col + $gutter;
}
.prepend-seven {
margin-left: $seven-col + $gutter;
}
.prepend-eight {
margin-left: $eight-col + $gutter;
}
.prepend-nine {
margin-left: $nine-col + $gutter;
}
.prepend-ten {
margin-left: $ten-col + $gutter;
}
.prepend-eleven {
margin-left: $eleven-col + $gutter;
}
.push-one {
margin-left: 57px;
}
/// Push and pull
/// Use these classes to push elements into the next
/// column and pull it into the previous column
/// @section push-pull
.pull-one,
.pull-two,
.pull-three,
.pull-four,
.pull-five,
.pull-six,
.pull-seven,
.pull-eight,
.pull-nine,
.pull-ten,
.pull-eleven {
float: left;
position: relative;
}
.pull-one {
margin-left: -$one-col;
}
.pull-two {
margin-left: -($two-col + $gutter);
}
.pull-three {
margin-left: -($three-col + $gutter);
}
.pull-four {
margin-left: -($four-col + $gutter);
}
.pull-five {
margin-left: -($four-col + $gutter);
}
.pull-six {
margin-left: -($six-col + $gutter);
}
.pull-seven {
margin-left: -($seven-col + $gutter);
}
.pull-eight {
margin-left: -($eight-col + $gutter);
}
.pull-nine {
margin-left: -($nine-col + $gutter);
}
.pull-ten {
margin-left: -($ten-col + $gutter);
}
.pull-eleven {
margin-left: -($eleven-col + $gutter);
}
.push-1,
.push-two,
.push-three,
.push-four,
.push-five,
.push-six,
.push-seven,
.push-eight,
.push-nine,
.push-ten,
.push-eleven {
float: left;
position: relative;
}
.push-one {
margin: 0 (-($one-col + $gutter)) 0 ($one-col + $gutter);
}
.push-two {
margin: 0 (-($two-col + ($gutter * 2))) 0 ($two-col + ($gutter * 2));
}
.push-three {
margin: 0 (-($three-col + ($gutter * 2))) 0 ($three-col + ($gutter * 2));
}
.push-four {
margin: 0 (-($four-col + ($gutter * 2))) 0 ($four-col + ($gutter * 2));
}
.push-five {
margin: 0 (-($five-col + ($gutter * 2))) 0 ($five-col + ($gutter * 2));
}
.push-six {
margin: 0 (-($six-col + ($gutter * 2))) 0 ($six-col + ($gutter * 2));
}
.push-seven {
margin: 0 (-($seven-col + ($gutter * 2))) 0 ($seven-col + ($gutter * 2));
}
.push-eight {
margin: 0 (-($eight-col + ($gutter * 2))) 0 ($eight-col + ($gutter * 2));
}
.push-nine {
margin: 0 (-($nine-col + ($gutter * 2))) 0 ($nine-col + ($gutter * 2));
}
.push-ten {
margin: 0 (-($ten-col + ($gutter * 2))) 0 ($ten-col + ($gutter * 2));
}
.push-eleven {
margin: 0 (-($eleven-col + ($gutter * 2))) 0 ($eleven-col + ($gutter * 2));
}
}
sass/core/_core-grid.scss
View file @ 2fcda1ed
@charset "UTF-8"; @charset 'UTF-8';
/**
* Ubuntu Core Front-End Framework
*
* Grid file part of the Ubuntu Core Front-End Framework
*
* This grid is composed by 14 columns (units) separated by 13 gutters (1/3 unit).
* The first and last column are for padding purposes only.
* The content fits in the middle 12 columns.
* Possible divisions: 1 (12 units + 11 gutters), 2 (6 units + 5 gutters),
* 3 ( 4 units + 3 gutters) and 4 (3 units + 2 gutters).
*
* When 1 unit = 60px, 1 gutter = 20px
*
* @project Ubuntu Core Front-End Framework
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
* @see http://gridinator.com/
*/
/**
* Table of contents
*
* Main containers
* Columns
* Empty columns
* Borders
* Push and pull
* Verticla gutter
* Last
* Clearing
one-col 60 ////
two-col 140
three-col 220
four-col 300
five-col 380
six-col 460
seven-col 540
eight-col 630
nine-col 700
ten-col 780
eleven-col 860
twelve-col 940
*/ /// Ubuntu Core Front-End Framework
///
/// Grid file part of the Ubuntu Core Front-End Framework
///
/// This grid is composed by 14 columns (units) separated by 13 gutters (1/3 unit).
/// The first and last column are for padding purposes only.
/// The content fits in the middle 12 columns.
/// Possible divisions: 1 (12 units + 11 gutters), 2 (6 units + 5 gutters),
/// 3 ( 4 units + 3 gutters) and 4 (3 units + 2 gutters).
///
/// When 1 unit = 60px, 1 gutter = 20px
///
/// @project Ubuntu Core Front-End Framework
/// @author Web Team at Canonical Ltd
/// @copyright 2012 Canonical Ltd
///
/// @see http://gridinator.com/
.fake { display: none; } /// Table of contents
///
/// Main containers
/// Columns
/// Empty columns
/// Borders
/// Push and pull
/// Verticla gutter
/// Last
/// Clearing
/// one-col 60
/// two-col 140
/// three-col 220
/// four-col 300
/// five-col 380
/// six-col 460
/// seven-col 540
/// eight-col 630
/// nine-col 700
/// ten-col 780
/// eleven-col 860
/// twelve-col 940
////
.fake {
display: none;
}
body { body {
font-size: 14px; font-size: 14px;
} }
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col, .col { .one-col,
@include box-sizing; .two-col,
clear: none; .three-col,
display: inline-block; .four-col,
float: none; .five-col,
margin-right: $gutter; .six-col,
margin-bottom: 20px; .seven-col,
padding: 0; .eight-col,
position: relative; .nine-col,
width: 100%; .ten-col,
.eleven-col,
.twelve-col,
.col {
box-sizing: border-box;
clear: none;
display: inline-block;
float: none;
margin-bottom: 20px;
margin-right: $gutter;
padding: 0;
position: relative;
width: 100%;
} }
.twelve-col { .twelve-col {
.one-col, .one-col,
.two-col, .two-col,
.three-col, .three-col,
.four-col, .four-col,
.five-col, .five-col,
.six-col, .six-col,
.seven-col, .seven-col,
.eight-col, .eight-col,
.nine-col, .nine-col,
.ten-col, .ten-col,
.eleven-col { width: 100%; } .eleven-col {
width: 100%;
}
} }
.last-col, .last { margin-right: 0; } .last-col,
.last {
margin-right: 0;
}
/** // Clearing
* Clearing // Hard and soft clearing classes
* // @section clearing
* Hard and soft clearing classes
*
* @section clearing
*/
.clearfix:after, .container:after {
.clearfix:after,
.container:after {
clear: both; clear: both;
content: "\0020"; content: '\0020';
display: block; display: block;
height: 0; height: 0;
overflow:hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
} }
.clear { clear: both; } .clear {
.clearfix { display: block; } clear: both;
}
.clearfix {
display: block;
}
sass/core/_core-mixins.scss
View file @ 2fcda1ed
/** ////
* mixins /// Mixins
* /// @section mixins
* @section mixins ////
*/
/// font size, default 16
@mixin font-size ($size: 16) { @mixin font-size ($size: 16) {
font-size: ($size / $base)+em; font-size: ($size / $base)+em;
margin-bottom: (12 / $size)+em; margin-bottom: (12 / $size)+em;
} }
@mixin box-sizing ($type: border-box) { /// footer styles with parameterised backgrond image
-webkit-box-sizing: $type;
-moz-box-sizing: $type;
box-sizing: $type;
}
@mixin rounded-corners($radius: 4px 4px 4px 4px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
@mixin box-shadow($shadow...) {
-moz-box-shadow: $shadow;
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
@mixin gradient($from, $to) {
background-color: $to;
background-image: -moz-linear-gradient($from, $to);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
background-image: -webkit-linear-gradient($from, $to);
background-image: -o-linear-gradient($from, $to);
}
@mixin footer($background) { @mixin footer($background) {
padding: $gutter-width $two-col $gutter-width $four-col; padding: $gutter-width $two-col $gutter-width $four-col;
margin-bottom: 0; margin-bottom: 0;
background: url($background) no-repeat scroll $one-col center #F7F7F7; background: url($background) no-repeat scroll $one-col center $light-grey;
} }
/// clearfix
@mixin clearfix() { @mixin clearfix() {
*zoom:1;
&:before, &:before,
&:after { &:after {
content:""; content: '';
display:table; display: table;
} }
&:after { &:after {
clear:both; clear: both;
} }
} }
// CSS3 colunms
@mixin columns($num: 3, $gap: 20) {
-moz-column-count: $num;
-moz-column-gap: ($gap / $base)em;
-webkit-column-count: $num;
-webkit-column-gap: ($gap / $base)em;
column-count: $num;
column-gap: ($gap / $base)em;
}
// background-size
@mixin background-size($size: 100% 100%) {
-moz-background-size: $size;
-webkit-background-size: $size;
-o-background-size: $size;
background-size: $size;
}
// transitions
@mixin transition($properties: all, $duration: .5s, $method: ease-out) {
-webkit-transition: $properties $duration $method;
-moz-transition: $properties $duration $method;
-ms-transition: $properties $duration $method;
-o-transition: $properties $duration $method;
transition: $properties $duration $method;
}
// usage: @include transition(all, 0.3s, ease-in-out);
\ No newline at end of file
sass/core/_core-templates.scss
View file @ 2fcda1ed
@charset "UTF-8"; @charset 'UTF-8';
@import "core-constants"; @import 'core-constants';
@import "core-mixins"; @import 'core-mixins';
/** ////
* Ubuntu Super Patterns Stylesheet /// Ubuntu Super Patterns Stylesheet
* /// Contains audience related themes for site-wide application
* Contains audience related themes for site-wide application /// @project Ubuntu Patterns
* /// @author Web Team at Canonical Ltd
* @project Ubuntu Patterns /// @copyright 2012 Canonical Ltd
* @author Web Team at Canonical Ltd ////
* @copyright 2012 Canonical Ltd
*
*/
/**
* Audience specific
*
* @section audience
*/
/* Voice */
.voice-community { }
.voice-canonical { }
.voice-community.voice-canonical { }
/*
* Consumer
*/
.audience-consumer{
color: $cool-grey;
.row-box, .main-content {
color: $cool-grey;
}
.inner-wrapper {
background: #fff;
}
.quote-right-top {
padding: 60px 60px 0 40px;
background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-br-287x287.png") no-repeat;
height: 287px;
position: absolute;
right: -($gutter-width * 2);
text-align: left;
top: -($gutter-width * 4.5);
width: $four-col;
p {
@include font-size (16);
margin: (1.538em / 2);
padding-bottom: 0;
color: #fff;
cite {
@include font-size (12);
color: #fff;
padding: 0;
}
}
}
.quote-right-top p a,
.quote-right p a { color: #fff; }
.quote-right {
@include font-size (18);
color: #fff;
padding: 50px 100px 0 50px;
text-indent: -6px;
background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-bl-287x287.png") no-repeat;
min-height: 287px;
position: absolute;
right: -$gutter-width;
text-align: left;
top: -($gutter-width * 4.5);
width: $four-col -(150/$base)em;
cite {
font-style: normal;
margin-left: 6px;
}
}
.quote-right-alt {
background: url(/sites/ubuntu/latest/u/img/patterns/quote-white-br-360x360.png) 0 -100px no-repeat;
color: $ubuntu-orange;
padding: 50px 50px 0 50px;
}
.quote-right-right { background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-br-287x287.png") no-repeat; }
}
/*
* Enterprise
*/
.audience-enterprise {
h1 { margin: 0 0 18px 0; }
td{ background: #fff; }
th, td {
padding: 6px 10px;
background: #fff;
}
th[scope="col"] {
background: #E2D4DC;
color: $canonical-aubergine;
}
tbody th[rowspan] { background: #F7F2F6; }
tfoot th[rowspan] { background: #dfdcd9; }
tfoot td, tfoot th {
font-weight: normal;
background: #dfdcd9;
}
.inner-wrapper {
background: $dark-aubergine;
color: #fff;
}
.row-box {
background: #fff;
color: $cool-grey;
}
/*.row-quote {
background: none repeat scroll 0 0 #E2D4DC;
color: #772953;
margin-left: -1.125em;
padding-top: 1.25em;
width: 58.75em;
}
.row-quote blockquote,
.row-quote blockquote p {
color: inherit;
font-size: 1.313em;
margin: 0 0.563em;
padding: 0;
top: auto;
width: auto;
}
.row-quote blockquote p {
line-height: 1.3;
text-indent: -12px;
}
.row-quote blockquote cite {
@include font-size (12);
color: #656565;
font-style: normal;
margin-left: 12px;
text-indent: 0;
}*/
}
.row-enterprise { .row-enterprise {
border-radius: 0;
background: $canonical-aubergine; background: $canonical-aubergine;
color:#fff; color: $white;
@include rounded-corners(0);
.box, div { .box,
div {
background: $canonical-aubergine; background: $canonical-aubergine;
color:#fff; color: $white;
} }
a { a {
color:#fff; color: $white;
} }
} }
/*
.audience-consumer.audience-enterprise{
.inner-wrapper {
background: $mid-aubergine;
color: #fff;
}
.row-box,
.main-content {
background: #fff;
color: $cool-grey;
}
.enterprise-dot-pattern {
background: url('/sites/ubuntu/latest/u/img/patterns/enterprise-dot-pattern.png');
} }
*/
.enterprise-dot-pattern { background:url('/sites/ubuntu/latest/u/img/patterns/enterprise-dot-pattern.png') } .developer-dot-pattern {
.developer-dot-pattern { background:url('/sites/ubuntu/latest/u/img/patterns/developer-dot-pattern.png') } background: url('/sites/ubuntu/latest/u/img/patterns/developer-dot-pattern.png');
\ No newline at end of file }
sass/core/_core.scss
View file @ 2fcda1ed
@charset "UTF-8"; @charset 'UTF-8';
@import "core-constants"; @import 'core-constants';
@import "core-mixins"; @import 'core-mixins';
/** ////
* Ubuntu Core Front-End Framework /// Ubuntu Core Front-End Framework
* /// Main CSS file part of the Ubuntu Core Front-End Framework
* Main CSS file part of the Ubuntu Core Front-End Framework ///
* /// @project Ubuntu Core Front-End Framework
* @project Ubuntu Core Front-End Framework /// @author Web Team at Canonical Ltd
* @author Web Team at Canonical Ltd /// @copyright 2015 Canonical Ltd
* @copyright 2012 Canonical Ltd ///
* /// @colordef $cool-grey (#333); main text
* @colordef $cool-grey (#333); main text /// @colordef $brand-color (#dd4814); Ubuntu orange
* @colordef $ubuntu-orange (#dd4814); Ubuntu orange
*/ /// Dependencies
///
/** /// Importing reset file: core-reset.css
* Dependencies /// Importing grid file: core-grid.css
* ////
* Importing reset file: core-reset.css
* Importing grid file: core-grid.css /// Font sizes
*/ ///
/// 45px
/** /// 32px
* Font sizes /// 23px
* /// 19.5px
* 45px /// 16px - bold
* 32px /// 13px - bold - uppercase
* 23px
* 19.5px /// Table of contents
* 16px - bold /// General
* 13px - bold - uppercase /// Links
*/ /// Lists
/// Images
/** /// Base typography
* Table of contents /// Global elements
* General /// Forms
* Links /// Tables
* Lists ////
* Images
* Base typography /// General
* Global elements ///
* Forms /// @section links
* Tables html,
*/ body,
div,
/** span,
* General applet,
* object,
* @section links iframe,
*/ h1,
h2,
html, body, div, span, applet, object, iframe, h3,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, h4,
a, acronym, address, big, cite, code, h5,
del, dfn, em, img, ins, kbd, q, s, samp, h6,
small, strike, strong, sub, sup, tt, var, p,
b, u, i, center, blockquote,
dl, ol, ul, li, pre,
form, label, legend, a,
table, caption, tbody, tfoot, thead, tr, th, td, acronym,
article, aside, canvas, details, embed, address,
figure, figcaption, footer, header, big,
menu, nav, output, ruby, section, summary, cite,
time, mark, audio, video { code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
ol,
ul,
li,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
border: 0; border: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
vertical-align: baseline; vertical-align: baseline;
} }
article, aside, details, figcaption, figure, article,
footer, header, nav, section { aside,
display: block; details,
figcaption,
figure,
footer,
header,
nav,
section {
display: block;
} }
audio, canvas, video { audio,
display: inline-block; canvas,
*display: inline; video {
*zoom: 1; display: inline-block;
} }
audio:not([controls]) { audio:not([controls]) {
display: none; display: none;
} }
[hidden] { [hidden] {
display: none; display: none;
} }
@font-face { // importing the latest version of ubuntu font from google here as well as in the HTML in most sites, seems daft doubling up but some sites don't pull this file in in the HTML, developer.u.c for example. Using @import instead of @font-face (as below) ensure we have the very latest version of the font
font-family: 'Ubuntu'; @import url('//fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,700,700italic%7CUbuntu+Mono');
font-style: normal;
font-weight: 300;
src: url('https://themes.googleusercontent.com/static/fonts/ubuntu/v5/e7URzK__gdJcp1hLJYAEag.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu'), url('https://themes.googleusercontent.com/static/fonts/ubuntu/v5/mZSs29ggGoaqrCNB3kDfZQ.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 500;
src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url('https://themes.googleusercontent.com/static/fonts/ubuntu/v5/I5PmmDkYShUQg-ah7wh25w.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('https://themes.googleusercontent.com/static/fonts/ubuntu/v5/trnbTfqisuuhRVI3i45C5w.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 300;
src: local('Ubuntu Light Italic'), local('Ubuntu-LightItalic'), url('https://themes.googleusercontent.com/static/fonts/ubuntu/v5/j-TYDdXcC_eQzhhp386SjT8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
src: local('Ubuntu Italic'), local('Ubuntu-Italic'), url('https://themes.googleusercontent.com/static/fonts/ubuntu/v5/GZMdC02DTXXx8AdUvU2etw.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 500;
src: local('Ubuntu Medium Italic'), local('Ubuntu-MediumItalic'), url('https://themes.googleusercontent.com/static/fonts/ubuntu/v5/NWdMogIO7U6AtEM4dDdf_T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url('https://themes.googleusercontent.com/static/fonts/ubuntu/v5/pqisLQoeO9YTDCNnlQ9bfz8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
html { html {
-moz-transition: background-position 100 ease;
-ms-text-size-adjust: 100%;
-o-transition: background-position 100 ease;
-webkit-text-size-adjust: 100%;
-webkit-transition: background-position 100 ease;
background: url('#{$asset-path}backgrounds/image-background-paper.png') repeat-y fixed center top $light-grey; background: url('#{$asset-path}backgrounds/image-background-paper.png') repeat-y fixed center top $light-grey;
font-size: 100%; font-size: 100%;
overflow-y: scroll; overflow-y: scroll;
...@@ -153,132 +163,143 @@ html { ...@@ -153,132 +163,143 @@ html {
} }
body { body {
background: url('#{$asset-path}backgrounds/image-background-paper.png') repeat-y center top $light-grey; background: url('#{$asset-path}backgrounds/image-background-paper.png') repeat-y center top $light-grey;
color: #333; color: $base-color;
font-family: Ubuntu, Arial, "libra sans", sans-serif; font-family: Ubuntu, Arial, 'libra sans', sans-serif;
font-weight: 300; font-weight: 300;
} }
blockquote, q { blockquote,
q {
quotes: none; quotes: none;
} }
blockquote { blockquote {
margin: 28px 20px; margin: 0;
> p {
@include font-size (13);
font-weight: 100;
margin: 0 0 .4em;
}
small {
font-size: .813em;
line-height: 1.4;
}
} }
blockquote:before, blockquote:before,
blockquote:after, blockquote:after,
q:before, q:after { q:before,
content: ""; q:after {
content: none; content: '';
} }
legend { legend {
border: 0; border: 0;
*margin-left: -7px;
} }
figure { figure {
margin: 0; margin: 0;
} }
abbr, abbr,
acronym { cursor: help; } acronym {
cursor: help;
/** }
* Links
*
* @section links
*/
/// Links
/// @section links
a:focus { a:focus {
outline: thin dotted; outline: thin dotted;
} }
a:hover, a:hover,
a:active { a:active {
outline: 0; outline: 0;
} }
a:link, a {
a:visited { color: $link-color;
color: $link-color; text-decoration: none;
text-decoration: none;
} }
a:hover, a:hover,
a:active, a:active,
a:focus { a:focus {
text-decoration: underline; text-decoration: underline;
} }
a.link-arrow:after { content: "\0000a0›"; } .link-arrow:after {
content: '\0000a0›';
nav ul li h2 a:after { content: "\0000a0›"; } }
nav ul li a:after, nav ul li h2 a:after {
.carousel ul li a:after, content: '\0000a0›';
ul li p a:after { content: ""; } }
/** nav ul li a:after,
* Lists .carousel ul li a:after,
*/ ul li p a:after {
content: '';
}
ol, /// Lists
ol,
ul { ul {
margin-left: 20px; margin-left: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
ol ol, ol ol,
ul ul, ul ul,
ol ul, ol ul,
ul ol { margin-bottom: 0; } ul ol {
margin-bottom: 0;
}
nav ul, nav ul,
nav ol { nav ol {
list-style: none; list-style: none;
list-style-image: none; list-style-image: none;
} }
/** /// Images
* Images /// @section images
* svg:not(:root) {
* @section images overflow: hidden;
*/ }
svg:not(:root) { overflow: hidden; }
img { img {
border: 0; border: 0;
height: auto; height: auto;
max-width: 100%; max-width: 100%;
}
img.left { margin-right: $gutter-width; } .left {
margin-right: $gutter-width;
}
img.right { margin-left: $gutter-width; } .right {
margin-left: $gutter-width;
}
}
.middle img { .middle img {
vertical-align: middle; vertical-align: middle;
margin-top: 4em; margin-top: 4em;
} }
/** /// Base typography
* Base typography /// @section type
* h1,
* @section type h2,
*/ h3,
h4,
h1, h5,
h2,
h3,
h4,
h5,
h6 { h6 {
font-weight: 300; font-weight: 300;
line-height: 1.3; line-height: 1.3;
} }
h1 { h1 {
...@@ -316,7 +337,7 @@ h6 { ...@@ -316,7 +337,7 @@ h6 {
text-transform: uppercase; text-transform: uppercase;
} }
p, p,
li { li {
font-size: 1em; font-size: 1em;
line-height: 1.5; line-height: 1.5;
...@@ -325,347 +346,338 @@ li { ...@@ -325,347 +346,338 @@ li {
padding: 0; padding: 0;
} }
h2 span, h2 span,
h1 span { display: block; } h1 span {
display: block;
p + h2, }
ul + h2,
ol + h2,
pre + h2 { margin-top: (18 / 32)+em; }
header nav a:link { font-weight: normal; }
p + h3, p + h2,
ul + h3, ul + h2,
ol + h3, ol + h2,
pre + h3 { margin-top: (18 / 23)+em; } pre + h2 {
margin-top: (18 / 32)+em;
}
p + h4, header nav a:link {
ul + h4, font-weight: normal;
ol + h4, }
pre + h4 { margin-top: (19.5 / $base)+em; }
p + h3,
ul + h3,
ol + h3,
pre + h3 {
margin-top: (18 / 23)+em;
}
p + h4,
ul + h4,
ol + h4,
pre + h4 {
margin-top: (19.5 / $base)+em;
}
ol+h2, p+h2, pre+h2, ul+h2 { margin-top: .563em; } ol+h2,
ol+h3, p+h3, pre+h3, ul+h3 { margin-top: .783em; } p+h2,
ol+h4, p+h4, pre+h4, ul+h4 { margin-top: 1.219em; } pre+h2,
ul+h2 {
margin-top: .563em;
}
/* p + ol, p + dl { ol+h3,
margin-top: 1.5em; p+h3,
margin-bottom: 1.5em; pre+h3,
ul+h3 {
margin-top: .783em;
}
}*/ ol+h4,
p+h4,
pre+h4,
ul+h4 {
margin-top: 1.219em;
}
li { margin-bottom: .4em; } li {
margin-bottom: .4em;
}
li:last-of-type { margin-bottom: 0; } li:last-of-type {
margin-bottom: 0;
}
ins { ins {
background: #fffbeb; background: $code-bg;
text-decoration: none; text-decoration: none;
} }
small, small,
.smaller { font-size: 13px; } .smaller {
font-size: 13px;
}
sub, sub,
sup { sup {
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sup { vertical-align: text-top; } sup {
vertical-align: text-top;
sub { vertical-align: text-bottom; } }
dfn { font-style: italic; } sub {
vertical-align: text-bottom;
}
mark { dfn {
background: #ff0; font-style: italic;
color: #000;
} }
code, pre { code,
font-family: "Ubuntu Mono", "Consolas", "Monaco", "Lucida Console", "Courier New", Courier, monospace; pre {
font-family: 'Ubuntu Mono', 'Consolas', 'Monaco', 'Lucida Console', 'Courier New', Courier, monospace;
} }
pre { pre {
@include rounded-corners(4px); border-radius: 4px;
background: $light-orange; background: $light-orange;
padding: .6em 1em; padding: .6em 1em;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
} }
blockquote { margin: 0; } /// Forms
/// Global form element styles
blockquote > p { /// @section forms
@include font-size (13);
font-weight:100;
margin:0 0 .4em 0;
}
blockquote small {
font-size:.813em;
line-height:1.4;
}
/**
* Forms
*
* Global form element styles
*
* @section forms
*/
button, button,
input, input,
select, select,
textarea { textarea {
font-family: Ubuntu,Arial,"libra sans",sans-serif; font-family: Ubuntu,Arial,'libra sans',sans-serif;
margin: 0; margin: 0;
vertical-align: baseline; vertical-align: baseline;
*vertical-align: middle;
} }
select { select {
font-size: 1em; font-size: 1em;
font-weight: 300; font-weight: 300;
} }
button, button,
input { line-height: normal; } input {
line-height: normal;
}
button, button,
input[type="button"], input[type='button'],
input[type="reset"], input[type='reset'],
input[type="submit"] { input[type='submit'] {
cursor: pointer; cursor: pointer;
-webkit-appearance: button; -webkit-appearance: button;
*overflow: visible;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
} }
input[type='checkbox'],
input[type='radio'] {
box-sizing: border-box;
padding: 0;
}
input[type="search"] { input[type="search"] {
@include rounded-corners(2px); border-radius: 2px;
-moz-box-sizing: content-box; box-sizing: content-box;
-webkit-appearance: none; font-family: Ubuntu,Arial,'libra sans',sans-serif;
-webkit-box-sizing: content-box; font-weight: 300;
box-sizing: content-box; outline: none;
font-family: Ubuntu,Arial,"libra sans",sans-serif; padding: .6956522em .869565em;
font-weight: 300;
outline: none;
padding: 0.6956522em 0.869565em;
} }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } input[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner, button::-moz-focus-inner,
input::-moz-focus-inner { input::-moz-focus-inner {
border: 0; border: 0;
padding: 0; padding: 0;
} }
textarea { textarea {
overflow: auto; overflow: auto;
vertical-align: top; vertical-align: top;
} }
form fieldset { form fieldset {
@include rounded-corners(4px); border-radius: 4px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #EFEEEC; background-color: $mid-grey;
background-position: -15px -15px; background-position: -15px -15px;
border: 0; border: 0;
margin-bottom: 8px; margin-bottom: 8px;
padding: 15px 20px; padding: 15px 20px;
}
form fieldset h3 { h3 {
border-bottom: 1px dotted #dfdcd9; border-bottom: 1px dotted $mid-grey;
margin-bottom: 9px; margin-bottom: 9px;
padding-bottom: 10px; padding-bottom: 10px;
} }
form fieldset li:first-child { margin-top: 0; } li:first-child {
margin-top: 0;
}
}
form input[type="text"], form input[type='text'],
form input[type="email"], form input[type='email'],
form input[type="tel"], form input[type='tel'],
form textarea { form textarea {
-webkit-appearance: none; border-radius: 2px;
@include rounded-corners(2px); background-color: $white;
background: #fff; border: 1px solid $warm-grey;
border: 1px solid #999; display: block;
display: block; font-family: Ubuntu, Arial, 'libra sans', sans-serif;
font-family: Ubuntu,Arial,"libra sans",sans-serif; font-size: 1em;
font-size: 1em; font-weight: 300;
font-weight: 300; padding: .6956522em .869565em;
padding: 0.6956522em 0.869565em;
} }
form input:focus, form input:focus,
form textarea:focus { border: 1px solid #dd4814; } form textarea:focus {
border: 1px solid $brand-color;
}
form textarea[readonly='readonly'] { color: #999; } form textarea[readonly='readonly'] {
color: $warm-grey;
}
form input[type="checkbox"], form input[type="radio"] { form input[type='checkbox'],
margin: 0; form input[type='radio'] {
width:auto; margin: 0;
width: auto;
} }
form input[type="checkbox"] + label, form input[type='checkbox'] + label,
form input[type="radio"] + label{ form input[type='radio'] + label {
display: inline; display: inline;
margin-left: 5px; margin-left: 5px;
vertical-align: middle; vertical-align: middle;
width: auto; width: auto;
} }
form input[type="submit"] { form input[type='submit'] {
@include font-size (16); @include font-size (16);
@include rounded-corners(4px); border-radius: 4px;
@include gradient(#f26120, $ubuntu-orange); background-color: $brand-color;
@include box-shadow(none); background-image: linear-gradient(lighten($brand-color, 10%), $brand-color);
border: 0; box-shadow: none;
color: #fff; border: 0;
display: block; color: $white;
padding: 10px 14px; display: block;
text-shadow: none; padding: 10px 14px;
width: auto; text-shadow: none;
margin-bottom: 0; width: auto;
margin-bottom: 0;
} }
form input[type="submit"]:hover { form input[type='submit']:hover {
background: $ubuntu-orange; background: $brand-color;
} }
form label { form label {
cursor: pointer; cursor: pointer;
display: block; display: block;
margin-bottom: 4px; margin-bottom: 4px;
}
form label span { span {
color: $error; color: $error;
}
} }
form ul { margin-left:0; } form ul {
margin-left: 0;
}
form li { form li {
list-style: none outside none; list-style: none outside none;
margin-top: 14px; margin-top: 14px;
} }
form button[type='submit'] {
form button[type="submit"] {
border: 0; border: 0;
display: inline-block; display: inline-block;
font-family: Ubuntu, Arial, "libra sans", sans-serif; font-family: Ubuntu, Arial, 'libra sans', sans-serif;
text-decoration:none; text-decoration: none;
font-weight: 300; font-weight: 300;
} }
form input[type="reset"] { form input[type='reset'] {
display: none; display: none;
} }
/** /// Tables
* Tables /// @section tables
*
* @section tables
*/
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
overflow-x: scroll; overflow-x: scroll;
margin-bottom: $gutter-width; margin-bottom: $gutter-width;
margin: 0 0 (40/$base) + em 0; margin: 0 0 (40/$base) + em;
width: 100%; width: 100%;
th, td { th,
padding: 15px 10px; td {
background: #f0edea; padding: 15px 10px;
border: 1px dotted $warm-grey; background: $light-grey;
border: 1px dotted $warm-grey;
} }
td { td {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
thead th { thead th {
border-collapse: separate; border-collapse: separate;
border-spacing: 0 10px; border-spacing: 0 10px;
background: #fee3d2; background: $table-th;
color: #333333; color: $base-color;
font-weight: normal; font-weight: normal;
} }
tbody th { tbody th {
text-align: left; text-align: left;
font-weight: normal; font-weight: 300;
font-weight: 300;
} }
th[scope="col"] {
text-align: center; th[scope='col'] {
text-align: center;
}
thead th:first-of-type {
text-align: left;
} }
thead th:first-of-type { text-align: left; }
}
/* Responsive typo
h1 {
@include font-size (26);
margin-bottom: .5rem;
}
h2 {
font-size: 1.438rem;
margin-bottom: .5rem;
}
h3 {
font-size: 1.219rem;
margin-bottom: .522rem;
}
h4 {
font-size: 1rem;
font-weight: 400;
margin-bottom: .615rem;
}
h5 {
font-size: .813rem;
font-weight: 700;
margin-bottom: 1rem;
}
h6 {
font-size: .723rem;
font-weight: 400;
margin-bottom: 1rem;
letter-spacing: .1rem;
text-transform: uppercase;
} }
p {
@include font-size (14);
line-height: 1.6;
margin: 0;
margin-bottom: .75rem;
padding: 0;
}*/
@media only screen and (max-width : 768px) { @media only screen and (max-width : 768px) {
table {
display: block; table {
} display: block;
} // end @media only screen and (max-width : 768px) }
} /// end @media only screen and (max-width : 768px)
@media only screen and (min-width: 984px) { @media only screen and (min-width: 984px) {
form fieldset { form fieldset {
padding: 15px 20px; padding: 15px 20px;
} }
img {
max-width: none; img {
} max-width: none;
} }
\ No newline at end of file
}
sass/core/core-print.scss
View file @ 2fcda1ed
@charset "UTF-8"; @charset 'UTF-8';
/** ////
* Ubuntu print Stylesheet /// Ubuntu print Stylesheet
*
* /// @project Ubuntu Patterns
* @project Ubuntu Patterns /// @author Web Team at Canonical Ltd
* @author Web Team at Canonical Ltd /// @copyright 2012 Canonical Ltd
* @copyright 2012 Canonical Ltd
* ////
*/
@import 'core-constants';
* { background: #fff; color: #000; }
* {
background: $white;
color: $black;
}
body { body {
background: white; background: $white;
font-size: 16pt; font-size: 16pt;
line-height: 1.5; line-height: 1.5;
} }
a:link, a:visited { a:link,
color: #898989; a:visited {
background: transparent; background: transparent;
font-weight: bold; color: $warm-grey;
text-decoration: underline; font-weight: bold;
text-decoration: underline;
} }
nav, nav,
#box-search,
.cookie-policy, .cookie-policy,
.link-top, .link-top,
footer { footer {
display: none; display: none;
} }
nav.nav-secondary { .nav-secondary {
display: block; display: block;
} }
.wrapper { .wrapper {
width: auto; float: none;
margin: 0 5%; margin: 0 5%;
padding: 0; padding-top: 1em;
padding-top: 1em; width: auto;
float: none !important;
} }
sass/core/patterns/_arrows.scss
View file @ 2fcda1ed
...@@ -40,19 +40,11 @@ ...@@ -40,19 +40,11 @@
div > .arrow-left { left: -10px; } div > .arrow-left { left: -10px; }
@media only screen and (max-width : 768px) {
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) { @media only screen and (min-width : 769px) {
html.yui3-js-enabled .arrow { .yui3-js-enabled .arrow {
visibility: visible; visibility: visible;
} }
} // @media only screen and (min-width : 769px) } // @media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_blockquotes.scss
View file @ 2fcda1ed
@charset 'UTF-8'; @charset 'UTF-8';
blockquote { .pull-quote {
&.pull-quote { text-indent: 0;
text-indent: 0;
p {
@include font-size (24.833);
color: $cool-grey;
padding-left: 10px;
padding-right: 10px;
text-indent: -.4em;
margin-left: .4em;
line-height: 1.3;
p { span {
color: $cool-grey; font-weight: bold;
padding-left: 10px; color: $brand-color;
padding-right: 10px; line-height: 0;
@include font-size (24.833); position: relative;
text-indent: -.4em; left: -5px;
margin-left: .4em;
line-height: 1.3;
span { // scss-lint:disable NestingDepth
font-weight: bold; + span {
color: $ubuntu-orange; left: 5px;
line-height: 0;
position: relative;
left: -5px;
& + span { left: 5px; } // the second span
}
cite {
margin: 10px 0 0;
font-weight: 300;
display: block;
font-size: .75em;
text-indent: 0;
} }
// scss-lint:enable NestingDepth
} }
&.js { cite {
padding-left: $gutter-width * 3; margin: 10px 0 0;
display: table-cell; font-weight: 300;
display: block;
font-size: .75em;
text-indent: 0;
} }
} }
&.quote-canonical, &.js {
&.quote-canonical-white { padding-left: $gutter-width * 3;
@include font-size (16); display: table-cell;
background: url("#{$asset-path}patterns/quote-white-360x360.png") no-repeat 20px -130px;
color: $canonical-aubergine;
float: right;
font-size: 1em;
height: 215px;
margin-top: 0;
padding: 20px 60px 0;
position: relative;
width: 236px;
} }
}
&.quote-canonical-white { .quote-canonical,
background: url("#{$asset-path}patterns/quote-aubergine-345x345.png") no-repeat 0 0; .quote-canonical-white {
color: #fff; @include font-size (16);
padding: 80px 60px 0; background: none;
height: 265px; color: $cool-grey;
} width: auto;
height: auto;
float: right;
font-size: 1em;
margin-top: 20px;
padding: 0 30px;
position: relative;
}
&.quote p:first-child { .quote-canonical-white {
@include font-size (18); // (16) desired value in px, this is divided by the baseline font-size value to reach the em value background: url("#{$asset-path}patterns/quote-aubergine-345x345.png") no-repeat 0 0;
line-height: 1.3; color: $white;
text-indent: -7px; padding: 80px 60px 0;
} height: 265px;
}
&.quote-right-bottom { .quote p:first-child {
background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.svg"); @include font-size (18); // (16) desired value in px, this is divided by the baseline font-size value to reach the em value
background-repeat: no-repeat; line-height: 1.3;
background-size: 287px 286px; text-indent: -7px;
color: #fff; }
height: 167px;
padding: 60px 40px;
position: static;
right: -($gutter-width * 2);
top: -($gutter-width * 4.5);
width: 207px;
& p { color: #fff; }
}
&.quote-grey { .quote-right-bottom {
@include font-size (36); background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.svg");
background: url("#{$asset-path}patterns/quote-grey-br-211x211.png") no-repeat scroll 0 0 transparent; background-repeat: no-repeat;
color: #fff; background-size: 287px 286px;
height: 152px; color: $white;
line-height: 40px; height: 167px;
margin-left: 20px; padding: 60px 40px;
padding: 60px 0 0; position: static;
text-align: center; right: -($gutter-width * 2);
width: 211px; top: -($gutter-width * 4.5);
} width: 207px;
p { color: $white; }
}
&.quote-bottom-left { &.quote-grey {
background: url("#{$asset-path}patterns/quote-orange-bl-287x287.png") no-repeat; @include font-size (36);
color: #fff; background: url("#{$asset-path}patterns/quote-grey-br-211x211.png") no-repeat scroll 0 0 $transparent;
height: 167px; color: $white;
padding: 55px 40px 70px 45px; height: 152px;
width: 225px; line-height: 40px;
} margin-left: 20px;
padding: 60px 0 0;
text-align: center;
width: 211px;
}
&.quote-bottom-left {
background: url("#{$asset-path}patterns/quote-orange-bl-287x287.png") no-repeat;
color: $white;
height: 167px;
padding: 55px 40px 70px 45px;
width: 225px;
} }
//.pull-quote { //.pull-quote {
...@@ -108,9 +110,9 @@ blockquote { ...@@ -108,9 +110,9 @@ blockquote {
//right: 0; //right: 0;
//} //}
html.no-svg, .no-svg,
.opera-mini { .opera-mini {
blockquote.quote-right-bottom { .quote-right-bottom {
background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.png"); background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.png");
} }
} }
...@@ -120,51 +122,54 @@ html.no-svg, ...@@ -120,51 +122,54 @@ html.no-svg,
// row-quote // row-quote
.row-quote { .row-quote {
@include rounded-corners(0); border-radius: 0;
blockquote { blockquote {
@include rounded-corners(4px); border-radius: 4px;
margin: 0; margin: 0;
padding: 0; padding: 0;
p { p {
margin-bottom: .75em; margin-bottom: .75em;
line-height: 1.3; line-height: 1.3;
color: $cool-grey; color: $base-color;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
//@include font-size (23); //@include font-size (23);
//font-size: 1em; //font-size: 1em;
text-indent: 0; text-indent: 0;
} }
span { span {
font-weight: bold; font-weight: bold;
color: $ubuntu-orange; color: $brand-color;
line-height: 0; line-height: 0;
position: relative; position: relative;
left: -5px; left: -5px;
& + span { left: 5px; } // the second span // scss-lint:disable NestingDepth
+ span {
left: 5px;
}
// scss-lint:enable NestingDepth
} }
cite { cite {
color: $cool-grey; color: $base-color;
font-style: normal; font-style: normal;
margin-bottom: 0; margin-bottom: 0;
font-size: .75em; font-size: .75em;
text-indent: -14px;
text-indent: 0; text-indent: 0;
} }
} }
.quote-twitter { .quote-twitter {
background: #fcece7 url('#{$asset-path}pictograms/pictogram-twitter-115x139.png') $gutter-width bottom no-repeat; background: $table-th url('#{$asset-path}pictograms/pictogram-twitter-115x139.png') $gutter-width bottom no-repeat;
padding: $gutter-width $gutter-width $gutter-width $three-col; padding: $gutter-width $gutter-width $gutter-width $three-col;
} }
.quote-twitter-small { .quote-twitter-small {
background: #fcece7 url('#{$asset-path}pictograms/pictogram-twitter-54x63.png') 99% bottom no-repeat; background: $table-th url('#{$asset-path}pictograms/pictogram-twitter-54x63.png') 99% bottom no-repeat;
padding: $gutter-width $gutter-width $gutter-width 80px; padding: $gutter-width $gutter-width $gutter-width 80px;
p { p {
...@@ -174,21 +179,6 @@ html.no-svg, ...@@ -174,21 +179,6 @@ html.no-svg,
} }
} }
blockquote.quote-canonical,
blockquote.quote-canonical-white {
background: none;
color: $cool-grey;
width: auto;
height: auto;
padding: 0 30px;
margin-top: 20px;
}
@media only screen and (max-width : 768px) {
.row-quote blockquote p {
}
}
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
.row-quote blockquote { .row-quote blockquote {
...@@ -199,12 +189,15 @@ blockquote.quote-canonical-white { ...@@ -199,12 +189,15 @@ blockquote.quote-canonical-white {
text-indent: -.4em; text-indent: -.4em;
} }
.row-quote blockquote p { .row-quote blockquote {
@include font-size (24.83); p {
@include font-size (24.83);
text-indent: -.4em;
}
} }
blockquote.pull-quote p, .pull-quote p,
.row-quote blockquote p { .row-quote blockquote p {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
text-indent: -.7em; text-indent: -.7em;
...@@ -219,21 +212,15 @@ blockquote.quote-canonical-white { ...@@ -219,21 +212,15 @@ blockquote.quote-canonical-white {
} }
} }
blockquote.pull-quote p span, .pull-quote p span,
.row-quote blockquote p span { .row-quote blockquote p span {
top: 5px; top: 5px;
} }
} // end @media only screen and (max-width : 768px) } // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) { @media only screen and (min-width : 769px) {
.row-quote blockquote {
p {
@include font-size (24.83);
text-indent: -.4em;
}
}
} //@media only screen and (min-width : 769px) } //@media only screen and (min-width : 769px)
...@@ -242,12 +229,12 @@ blockquote.quote-canonical-white { ...@@ -242,12 +229,12 @@ blockquote.quote-canonical-white {
.row-quote blockquote { .row-quote blockquote {
padding: 0 80px 20px; padding: 0 80px 20px;
text-indent: -10px; text-indent: -10px;
} }
blockquote.pull-quote p span, .pull-quote p span,
.row-quote blockquote p span { .row-quote blockquote p span {
top: 10px; top: 10px;
} }
} // end @media only screen and (min-width: 984px) } // end @media only screen and (min-width: 984px)
sass/core/patterns/_boxes.scss
View file @ 2fcda1ed
@charset 'UTF-8'; @charset 'UTF-8';
%box { %box {
@include rounded-corners(4px); border-radius: 4px;
padding: 1.333em $gutter-width; padding: 1.333em $gutter-width;
} }
.box { .box {
@extend %box; @extend %box;
background: #fff; background: $white;
border: 1px solid #dfdcd9; border: 1px solid $box-border;
} }
.box-grey { .box-grey {
@extend %box; @extend %box;
background: $light-grey; background: $light-grey;
color: $cool-grey; color: $base-color;
} }
.box-orange { .box-orange {
background: $ubuntu-orange; background: $brand-color;
color: #fff; color: $white;
} }
.box-highlight { .box-highlight {
@include box-shadow(0 2px 2px 0 #c2c2c2); box-shadow: 0 2px 2px 0 $box-shadow;
border: 1px solid $light-grey; border: 1px solid $light-grey;
} }
.box-textured { .box-textured {
@include box-shadow(0 2px 2px 0 #c2c2c2); box-shadow: 0 2px 2px 0 $box-shadow;
background: url("#{$asset-path}patterns/grey-textured-background.jpg"); background: url("#{$asset-path}patterns/grey-textured-background.jpg");
border: 0; border: 0;
} }
.box-padded { .box-padded {
@include rounded-corners(4px); border-radius: 4px;
background: $box-solid-grey; background: $mid-grey;
border: 0; border: 0;
margin-bottom: 20px; margin-bottom: 20px;
padding: 6px 5px; padding: 6px 5px;
...@@ -47,29 +47,29 @@ ...@@ -47,29 +47,29 @@
} }
li h3 { // this happens in 'Further reading' /cloud/insights li h3 { // this happens in 'Further reading' /cloud/insights
@include font-size(19.5); @include font-size(19.5);
margin: 0; margin: 0;
} }
div { div {
@include rounded-corners(4px); border-radius: 4px;
background: #fff; background: $white;
overflow: hidden; overflow: hidden;
padding: 8px 8px 2px; padding: 8px 8px 2px;
} }
} }
.box-padded-feature { .box-padded-feature {
@include rounded-corners(4px); border-radius: 4px;
background: url("#{$asset-path}patterns/soft-centre-bkg.gif") repeat scroll 0 0 #a09f9f; background: url('#{$asset-path}patterns/soft-centre-bkg.gif') repeat scroll 0 0 $cool-grey;
border: 0; border: 0;
margin-bottom: 20px; margin-bottom: 20px;
padding: 11px 5px 6px; padding: 11px 5px 6px;
h3 { h3 {
color: #fff;
margin-left: ($gutter-width / 4);
@include font-size(19.5); @include font-size(19.5);
color: $white;
margin-left: ($gutter-width / 4);
} }
h4 { h4 {
...@@ -78,28 +78,28 @@ ...@@ -78,28 +78,28 @@
} }
> div { > div {
@include rounded-corners(4px); border-radius: 4px;
background: #fff; background: $white;
overflow: hidden; overflow: hidden;
padding: 20px 8px; padding: 20px 8px;
} }
div div { div div {
margin-bottom: 0; margin-bottom: 0;
} }
.inline-icons { .inline-icons {
display: table; display: table;
width: 100%; width: 100%;
margin: 0; margin: 0;
text-align: center; text-align: center;
li { li {
display: table-cell; display: table-cell;
text-align: left; text-align: left;
float: none; float: none;
} }
} }
.one-col { .one-col {
width: 48px; width: 48px;
...@@ -112,52 +112,22 @@ ...@@ -112,52 +112,22 @@
cursor: pointer; cursor: pointer;
padding-bottom: 40px; padding-bottom: 40px;
position: relative; position: relative;
-moz-transition: background .2s ease-out;
-webkit-transition: background .2s ease-out;
transition: background .2s ease-out; transition: background .2s ease-out;
& h2 { h2 {
padding-right: 20px; padding-right: 20px;
} }
&.five-col h2, &:hover { background-color: $resource-hover; }
&.four-col h2 {
a:link,
a:visited {
font-size: inherit !important;
}
}
&.four-col {
h2 a:link,
h2 a:visited {
font-size: 1.125em;
}
}
&.twelve-col {
h2 a:link,
h2 a:visited {
font-size: 1.40625em;
}
}
&:hover { background-color: #fafafa; }
&:after { &:after {
-moz-box-shadow: 0 -1px 2px 0 #ddd; box-shadow: 0 -1px 2px 0 $resource-shadow;
-webkit-box-shadow: 0 -1px 2px 0 #ddd;
box-shadow: 0 -1px 2px 0 #ddd;
content: ''; content: '';
height: 1px; height: 1px;
position: absolute; position: absolute;
right: -6px; right: -6px;
top: 14px; top: 14px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out; transition: all .2s ease-out;
width: 41px; width: 41px;
z-index: 2; z-index: 2;
...@@ -172,20 +142,16 @@ ...@@ -172,20 +142,16 @@
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
-moz-transition: border-width .2s ease-out;
-webkit-transition: border-width .2s ease-out;
transition: border-width .2s ease-out; transition: border-width .2s ease-out;
top: -2px; top: -2px;
right: -3px; right: -3px;
width: 0; width: 0;
height: 0; height: 0;
border-bottom: 30px solid #fdfdfd; border-bottom: 30px solid $light-grey;
border-right: 30px solid #fff; border-right: 30px solid $white;
-webkit-box-shadow: -2px 2px 2px rgba(176, 176, 176, .4);
-moz-box-shadow: -2px 2px 2px rgba(176, 176, 176, .4);
box-shadow: -2px 2px 2px rgba(176, 176, 176, .4); box-shadow: -2px 2px 2px rgba(176, 176, 176, .4);
z-index: 2; z-index: 2;
@include rounded-corners(0 0 0 0); border-radius: 0;
} }
&:hover:before { &:hover:before {
...@@ -198,8 +164,8 @@ ...@@ -198,8 +164,8 @@
} }
.content-cat { .content-cat {
background: url("#{$asset-path}icons/icon-resource-hub-icon-document.png") left center no-repeat; background: url('#{$asset-path}icons/icon-resource-hub-icon-document.png') left center no-repeat;
color: #aea79f; color: $warm-grey;
font-size: 14px; font-size: 14px;
letter-spacing: 1px; letter-spacing: 1px;
margin: 0; margin: 0;
...@@ -210,7 +176,7 @@ ...@@ -210,7 +176,7 @@
} }
.content-cat-webinar { .content-cat-webinar {
background: url("#{$asset-path}icons/icon-resource-hub-webinar.png") left center no-repeat; background: url('#{$asset-path}icons/icon-resource-hub-webinar.png') left center no-repeat;
} }
&.box-image-centered div + span img { &.box-image-centered div + span img {
...@@ -218,12 +184,12 @@ ...@@ -218,12 +184,12 @@
} }
} }
html.yui3-js-enabled .resource:hover a { .yui3-js-enabled .resource:hover a {
text-decoration: underline; text-decoration: underline;
} }
.row-grey .resource:before { .row-grey .resource:before {
border-right-color: #f7f7f7; border-right-color: $light-grey;
} }
@media only screen and (max-width : 768px) { @media only screen and (max-width : 768px) {
......
sass/core/patterns/_buttons.scss
View file @ 2fcda1ed
@charset 'UTF-8'; @charset 'UTF-8';
////
a.link-cta-ubuntu, /// Ubuntu Patterns Stylesheet
a.link-cta-canonical, /// The CSS file required by Ubuntu patterns page
a.link-cta-inverted, /// @project Ubuntu Patterns
button.cta-ubuntu, /// @author Web Team at Canonical Ltd
button.cta-canonical, /// @copyright 2012 Canonical Ltd
form button[type="submit"], /// @see http://design.ubuntu.com
form input[type="submit"] { ////
@include box-sizing();
@include font-size (16); /// cta button
@include rounded-corners(3px); .link-cta-ubuntu,
background: $ubuntu-orange; .link-cta-canonical,
color: #fff; .link-cta-inverted,
text-decoration: none; .cta-ubuntu,
display: inline-block; .cta-canonical,
margin: 0; form [type="submit"] {
font-family: Ubuntu, Arial, 'libra sans', sans-serif; @include font-size (16);
font-weight: 300; box-sizing: border-box;
-webkit-font-smoothing: subpixel-antialiased; border-radius: 3px;
-moz-font-smoothing: subpixel-antialiased; border: 0;
-o-font-smoothing: subpixel-antialiased; background: $brand-color;
font-smoothing: subpixel-antialiased; color: $white;
padding: 8px 14px; text-decoration: none;
width: 100%; display: inline-block;
text-align: center; margin: 0;
outline: none;
font-family: Ubuntu, Arial, 'libra sans', sans-serif;
font-weight: 300;
font-smoothing: subpixel-antialiased;
padding: 8px 14px;
width: 100%;
text-align: center;
/// cta hover state
&:hover {
background: darken($base-color, 6.2%); // #c03f11
text-decoration: none;
}
} }
a.cta-large, /// cta large button
button.cta-large { .cta-large,
@include font-size (18); .cta-large {
padding: 10px 20px; @include font-size (18);
padding: 10px 20px;
} }
a.link-cta-canonical, /// Canonical cta colours
button.cta-canonical, .link-cta-canonical,
form button.cta-canonical[type="submit"], .cta-canonical,
form input.cta-canonical[type="submit"] { form .cta-canonical[type="submit"],
background: $canonical-aubergine; form .cta-canonical[type="submit"] {
color: #fff; background: $canonical-aubergine;
color: $white;
&:hover {
background: darken($canonical-aubergine, 6.2%); // #5f193e
text-decoration: none;
}
} }
a.link-cta-inverted, /// Inverted colour style
button.cta-inverted { .link-cta-inverted,
background: #fff; .cta-inverted {
color: $cool-grey; background: $white;
color: $base-color;
&:hover {
background: $white;
text-decoration: underline;
}
} }
.row-enterprise a.link-cta-canonical, /// Enterprise cta colour style
.row-enterprise button.link-cta-canonical { .row-enterprise .link-cta-canonical,
background: #fff; .row-enterprise .link-cta-canonical {
background: $white;
color: $canonical-aubergine; color: $canonical-aubergine;
}
a.link-cta-ubuntu:hover, &:hover {
a.link-cta-ubuntu:hover, background: $white;
button.cta-ubuntu:hover, text-decoration: underline;
form button[type="submit"]:hover, }
form input[type="submit"]:hover {
background: darken($ubuntu_orange, 6.2%); // #c03f11
text-decoration: none;
} }
a.link-cta-canonical:hover, /// cta deactived style
button.cta-canonical:hover { .cta-deactivated,
background: darken($canonical-aubergine, 6.2%); // #5f193e .cta-deactivated:hover {
text-decoration: none; background: $cool-grey;
color: $white;
cursor: not-allowed;
} }
a.link-cta-inverted:hover, /// Medium breakpoint
.row-enterprise a.link-cta-canonical:hover, @media only screen and (min-width : 768px) {
button.cta-inverted:hover, .link-cta-ubuntu,
.row-enterprise button.cta-canonical:hover { .link-cta-canonical,
background: #fff; .link-cta-inverted,
text-decoration: underline; .cta-ubuntu,
.cta-canonical,
form [type="submit"] {
width: auto;
}
} }
a.cta-deactivated, /// Large breakpoint
a.cta-deactivated:hover, @media only screen and (min-width : 984px) {
button.cta-deactivated, .link-cta-ubuntu,
button.cta-deactivated:hover { .link-cta-canonical,
background: $box-solid-grey; .link-cta-inverted,
color: #fff; .cta-ubuntu,
cursor: not-allowed; .cta-canonical,
form [type="submit"] {
width: auto;
}
} }
@media only screen and (min-width : 768px) {
a.link-cta-ubuntu,
a.link-cta-canonical,
a.link-cta-inverted,
button.cta-ubuntu,
button.cta-canonical,
form button[type="submit"],
form input[type="submit"] {
width: auto;
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
} // @media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
a.link-cta-ubuntu,
a.link-cta-canonical,
a.link-cta-inverted,
button.cta-ubuntu,
button.cta-canonical,
form button[type="submit"],
form input[type="submit"] {
width: auto;
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_contextual-footer.scss
View file @ 2fcda1ed
@charset 'UTF-8'; @charset 'UTF-8';
// scss-lint:disable IdSelector
#context-footer { #context-footer {
@include box-sizing; @include font-size (14);
@include font-size (14); box-sizing: border-box;
border-bottom: 0; border-bottom: 0;
clear: both; clear: both;
padding-bottom: 1px; padding-bottom: 1px;
padding-top: 0; padding-top: 0;
position: relative; position: relative;
margin-bottom: 0; margin-bottom: 0;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
width: 100%; width: 100%;
hr { hr {
@include box-shadow(inset 0 2px 2px -2px #333); box-shadow: inset 0 2px 2px -2px $cool-grey;
background: $ubuntu-orange; background: $brand-color;
height: 14px; height: 14px;
margin: 0 0 10px; margin: 0 0 10px;
border: 0; border: 0;
clear: both; clear: both;
} }
div.twelve-col { .twelve-col {
display: table; display: table;
float: none; float: none;
margin-bottom: 7px; margin-bottom: 7px;
} }
div div { div div {
display: block; display: block;
padding-left: 0; padding-left: 0;
margin-bottom: 20px; margin-bottom: 20px;
div { div {
display: block; display: block;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
} }
&.feature-one { &.feature-one {
padding-left: 0; padding-left: 0;
} }
&.feature-four { &.feature-four {
margin-bottom: 0; margin-bottom: 0;
margin-right: 0; margin-right: 0;
} }
} }
> div { > div {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
ul { ul {
margin-bottom: 5px; margin-bottom: 5px;
}
.active {
li.active { display: none;
display: none; }
} }
h3 { h3 {
@include font-size (16); @include font-size (16);
font-weight: normal; font-weight: normal;
} }
.list a:after, .list a:after,
a.link-arrow:after, .link-arrow:after,
nav ul li h2 a:after { nav ul li h2 a:after {
content: ' \203A'; content: ' \203A';
} }
} }
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
#context-footer { #context-footer {
margin-bottom: 12px; margin-bottom: 12px;
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
div + div { div {
width: 31%;
}
div div.feature-four { + div {
padding-bottom: 20px; width: 31%;
}
.feature-four {
padding-bottom: 20px;
}
} }
hr { hr {
margin: 0 -30px 40px; margin: 0 -30px 40px;
} }
& > div { > div {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
} }
} // end @media only screen and (max-width : 768px) } // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) { @media only screen and (min-width : 769px) {
...@@ -107,20 +110,22 @@ ...@@ -107,20 +110,22 @@
@media only screen and (min-width: 984px) { @media only screen and (min-width: 984px) {
#context-footer { #context-footer {
padding: 0 40px 10px; padding: 0 40px 10px;
}
#context-footer div div { div div {
display: table-cell; display: table-cell;
float: none; float: none;
padding-left: 20px; padding-left: 20px;
margin-bottom: 0; margin-bottom: 0;
} }
#context-footer hr { hr {
margin: 0 -40px 40px; margin: 0 -40px 40px;
} }
}
} // end @media only screen and (min-width: 984px) } // end @media only screen and (min-width: 984px)
// scss-lint:enable IdSelector
sass/core/patterns/_footer.scss
View file @ 2fcda1ed
@charset "UTF-8"; // scss-lint:disable QualifyingElement, IdSelector
body footer.global #nav-global li:first-of-type a { body footer.global #nav-global li:first-of-type a {
margin-left: 0; margin-left: 0;
} }
footer.global { footer.global {
@include box-sizing; background: none;
@include box-shadow(inset 0 2px 2px -1px #d3d3d3); border-top: 0;
background: none; box-shadow: inset 0 2px 2px -1px $mid-grey;
border-top: 0; box-sizing: border-box;
clear: both; clear: both;
display: block; display: block;
padding: 30px 10px 20px; padding: 30px 10px 20px;
position: relative; position: relative;
width: 100%; width: 100%;
.legal { .legal {
/* Can be removed once live */ background-image: none;
margin: 0 auto; clear: both;
width: 100%; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */ margin: 0 auto;
} min-height: 40px;
position: relative;
.legal { width: 100%;
background-image: none;
position: relative; p,
clear: both; ul {
min-height: 40px; padding-left: 0;
}
p, } // legal
ul {
padding-left: 0; h2 {
} font-size: .75em;
} // legal line-height: 1.4;
margin-bottom: 0;
h2 { padding-bottom: .5em;
font-size: 0.75em; }
line-height: 1.4;
margin-bottom: 0; h2,
padding-bottom: 0.5em; h2 a:link,
} h2 a:visited {
color: $base-color;
h2, h2 a:link, h2 a:visited { font-weight: normal;
color: $cool-grey; }
font-weight: normal;
} nav ul li h2 a:after { content: ''; }
nav ul li h2 a:after { content: ""; } ul {
margin: 0;
ul { margin: 0; }
.inline li a:hover {
nav ul li.two-col { color: $brand-color;
display: inline-block; }
min-height: 10em;
vertical-align: top; li:after {
} color: $warm-grey;
content: '\00b7';
nav ul li li { vertical-align: middle;
@include font-size (12); margin: 0 5px;
font-size: 0.75em; }
margin-bottom: 0; }
}
nav ul .two-col {
ul li li a:link, ul li li a:visited { display: inline-block;
color: $cool-grey; min-height: 10em;
margin-bottom: 0; vertical-align: top;
} }
ul li li a:hover, ul li li a:active, h2 a:hover, h2 a:active { nav ul li li {
color: $ubuntu-orange; @include font-size (12);
//text-decoration: underline; font-size: .75em;
} margin-bottom: 0;
}
.inline li { display: inline; }
ul li li a:link,
p, ul.inline li a { ul li li a:visited {
color: $cool-grey; color: $base-color;
font-size: 12px; margin-bottom: 0;
margin-bottom: 0; }
}
ul.inline li a:hover { color: $ubuntu-orange; } ul li li a:hover,
ul li li a:active,
ul.inline li:after { h2 a:hover,
color: $warm-grey; h2 a:active {
content: "\00b7"; color: $brand-color;
vertical-align: middle; }
margin: 0 5px;
} .inline li {
display: inline;
ul.inline li:last-child { width: 120px; } float: none;
margin-bottom: 0;
ul.inline li:last-child:after { content: ""; }
li:last-child { width: 120px; }
.inline li { li:last-child:after { content: ''; }
float: none; }
margin-bottom: 0;
} p,
.inline li a {
.top-link { color: $base-color;
@include box-shadow(0 -4px 4px -4px rgba(0, 0, 0, 0.3) inset); font-size: 12px;
margin-bottom: 0;
}
.top-link {
box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, .3) inset;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0); background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none; border: 0 none;
float: left; float: left;
font-size: 0.75em; font-size: .75em;
letter-spacing: 0.05em; letter-spacing: .05em;
margin: 0 0 0 -10px; margin: 0 0 0 -10px;
padding-right: 20px; padding-right: 20px;
text-transform: uppercase; text-transform: uppercase;
width: 100%; width: 100%;
a { a {
@include box-sizing(); box-sizing: border-box;
background-image: url("#{$asset-path}pictograms/picto-pack/picto-upload-warmgrey.svg"); background-image: url("#{$asset-path}pictograms/picto-pack/picto-upload-warmgrey.svg");
background-position: 10px center; background-position: 10px center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 14px 14px; background-size: 14px 14px;
border-bottom: 0 none; border-bottom: 0 none;
color: #888888; color: $warm-grey;
display: block; display: block;
float: none; float: none;
font-weight: 400; font-weight: 400;
padding: 12px 0 12px 28px; padding: 12px 0 12px 28px;
} }
} }
} /* End footer.global */ } /* End footer.global */
html.no-svg, .opera-mini { .no-svg,
.opera-mini {
footer.global .top-link { footer.global .top-link {
a { a {
background-image: url("#{$asset-path}pictograms/picto-pack/picto-upload-warmgrey.png"); background-image: url("#{$asset-path}pictograms/picto-pack/picto-upload-warmgrey.png");
...@@ -135,14 +140,14 @@ html.no-svg, .opera-mini { ...@@ -135,14 +140,14 @@ html.no-svg, .opera-mini {
@media only screen and (max-width : 768px) { @media only screen and (max-width : 768px) {
footer.no-global .legal { footer.no-global .legal {
@include box-sizing(content-box); box-shadow: 0 2px 2px -1px $mid-grey inset;
box-shadow: 0 2px 2px -1px #D3D3D3 inset; box-sizing: content-box;
padding-top: 10px; margin-left: -10px;
margin-left: -10px; padding-left: 10px;
padding-left: 10px; padding-right: 10px;
padding-right: 10px; padding-top: 10px;
} }
#livechat-eye-catcher { #livechat-eye-catcher {
display: block; display: block;
...@@ -152,10 +157,10 @@ html.no-svg, .opera-mini { ...@@ -152,10 +157,10 @@ html.no-svg, .opera-mini {
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
footer.global .inline li { footer.global .inline li {
display: inline; display: inline;
float: left; float: left;
} }
} // @media only screen and (min-width : 768px) } // @media only screen and (min-width : 768px)
...@@ -166,7 +171,7 @@ html.no-svg, .opera-mini { ...@@ -166,7 +171,7 @@ html.no-svg, .opera-mini {
} }
footer.global .footer-b h2 a i { footer.global .footer-b h2 a i {
font-style: normal; font-style: normal;
display: inline; display: inline;
} }
...@@ -174,23 +179,24 @@ html.no-svg, .opera-mini { ...@@ -174,23 +179,24 @@ html.no-svg, .opera-mini {
@media only screen and (min-width: 984px) { @media only screen and (min-width: 984px) {
footer.global .legal { footer.global .legal {
width: 984px; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */ width: 984px; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
} }
footer.global {
padding: 30px 0 20px;
footer.global { .legal {
padding: 30px 0 20px; background: url("#{$asset-path}logos/logo-ubuntu-grey.png") 100% 0 no-repeat;
}
.legal {
background: url("#{$asset-path}logos/logo-ubuntu-grey.png") 100% 0 no-repeat;
}
.footer-a { .footer-a {
display: block; display: block;
} }
} }
} // end @media only screen and (min-width: 984px) } // end @media only screen and (min-width: 984px)
// scss-lint:enable IdSelector, QualifyingElement
sass/core/patterns/_forms.scss
View file @ 2fcda1ed
@charset 'UTF-8'; @charset 'UTF-8';
form { form {
input, input,
select, select,
textarea { textarea {
@include box-sizing(); box-sizing: border-box;
width: 100%; width: 100%;
} }
.fieldset-submit ul { .fieldset-submit ul {
margin-bottom: 0; margin-bottom: 0;
} }
// scss-lint:disable SelectorFormat
fieldset { fieldset {
.mktError, .mktError,
.errMsg, .errMsg,
.reqMark { .reqMark {
color: $error; color: $error;
} }
.mktFormMsg { .mktFormMsg {
clear: both; clear: both;
display: block; display: block;
} }
} }
// scss-lint:enable SelectorFormat
} }
@media only screen and (max-width : 768px) {
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
} // @media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_header.scss
View file @ 2fcda1ed
@charset "UTF-8"; @charset 'UTF-8';
header.banner { // scss-lint:disable NestingDepth, IdSelector
border-top: 0;
min-width: 100%; $nav-box-shadow-color: #777 !default;
width: auto; $nav-border-color: #d5d5d5 !default;
background: $ubuntu-orange; $nav-border-left: #c64012 !default;
$nav-hover-border-left: #ec5b29 !default;
$nav-hover-bg-color: #e1662f !default;
$nav-active-bg-color: #b83a10 !default;
.banner {
border-top: 0;
min-width: 100%;
width: auto;
background: $brand-color;
display: block; display: block;
position: relative; position: relative;
z-index: 2; z-index: 2;
h2 {
@include font-size (25);
display: block;
left: 4px;
margin-bottom: 0;
position: relative;
text-transform: lowercase;
top: 14px;
a:link,
a:visited,
a {
color: $white;
float: left;
text-decoration: none;
}
}
.nav-primary {
border: 0;
margin: 0 auto;
overflow: hidden;
.nav-primary { ul {
border: 0; border-right: 1px solid lighten($brand-color, 10%);
margin: 0 auto; float: left;
overflow: hidden; margin: 0;
position: static;
ul {
border-right: 1px solid lighten($ubuntu-orange, 10%);
float: left;
margin: 0;
position: relative;
li {
border-left: 1px solid darken($ubuntu-orange, 5%);
float: left;
list-style-image: none;
margin: 0;
text-indent: 0;
vertical-align: bottom;
}
li:last-child {
border-right: 1px solid darken($ubuntu-orange, 5%);
}
li a:link,
li a:visited {
font-size: 14px;
border-left: 1px solid lighten($ubuntu-orange, 7%);
color: #fff;
display: block;
margin-bottom: 0;
padding: 14px 14px 13px;
position: relative;
text-align: center;
text-decoration: none;
-webkit-font-smoothing: subpixel-antialiased;
-moz-font-smoothing: subpixel-antialiased;
-o-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;
}
a.active {
background: #B83A10;
border-left: 1px solid lighten($ubuntu-orange, 7%);
}
li a:hover {
background: #e1662f;
border-top: 0;
@include box-shadow(inset 0 2px 2px -2px #777);
}
} // end ul
} // nav-primary
} // end header.banner
li {
border-bottom: 1px solid $nav-border-light;
border-left: 1px solid darken($brand-color, 5%);
float: left;
font-size: 16px;
list-style-image: none;
margin: 0;
text-indent: 0;
vertical-align: bottom;
// Responsive header navigation
#main-navigation-link { display: none; }
header.banner .nav-toggle {
position:absolute;
right: 0;
display: block;
width: 48px;
height: 48px;
text-indent: -99999px;
background-image: url(#{$asset-path}icons/navigation-menu-plain.svg);
@include background-size(25px auto);
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
}
header.banner .no-script { &:last-child {
display: none; border-right: 1px solid darken($brand-color, 5%);
} }
a:link,
a:visited {
font-size: 14px;
border-left: 1px solid lighten($brand-color, 7%);
color: $white;
display: block;
margin-bottom: 0;
padding: 14px 14px 13px;
position: relative;
text-align: center;
text-decoration: none;
font-smoothing: subpixel-antialiased;
}
.active {
background: $nav-active-bg-color;
border-left: 1px solid lighten($brand-color, 7%);
}
.opera-mini header.banner .nav-toggle, a:hover {
.no-svg header.banner .nav-toggle { border-top: 0;
background-image: url(#{$asset-path}icons/navigation-menu-plain.png); box-shadow: none;
} background-color: $nav-hover-bg;
}
li:last-child {
border: 0;
}
}
header.banner nav ul { } // end ul
background-color: $nav-bg;
display: none; &.active {
float: left; border-bottom: 1px solid $nav-border-dark;
} box-shadow: 0 1px 2px 1px rgba(120, 120, 120, .2);
header.banner .nav-primary.active { padding: 0;
@include box-shadow(0 1px 2px 1px rgba(120, 120, 120, 0.2)); }
padding: 0;
border-bottom: 1px solid $nav-border-dark;
}
header nav ul.active { ul li,
display: block; ul li a:link,
} ul li a:visited,
ul li a:active {
display: block;
padding: 0;
margin: 0;
border: 0;
}
ul li a:link,
ul li a:visited,
ul li a:hover,
ul li a:active {
padding: 14px 14px 13px;
text-align: left;
}
.active li ul {
display: none;
}
&.nav-left {
.logo-ubuntu {
float: right;
}
}
header.banner .nav-primary ul li, &.nav-right {
header.banner .nav-primary ul li a:link, .logo-ubuntu {
header.banner .nav-primary ul li a:visited, background-image: url('#{$asset-path}logos/logo-ubuntu-white.svg');
header.banner .nav-primary ul li a:active { background-size: 107px 25px;
display: block; float: left;
padding: 0; }
margin: 0; }
border: none;
} li ul {
box-shadow: 0 2px 2px -1px $nav-box-shadow-color;
border-radius: 10px;
background: $light-grey;
border: 1px solid $nav-border-color;
display: none;
float: none;
margin: 0;
padding: 5px 0;
position: absolute;
top: 51px;
width: 200px;
header.banner .nav-primary ul li a:hover { .promo {
@include box-shadow(none); border-top: 1px solid $nav-border-color;
background-color: $nav-hover-bg; float: left;
} margin-top: 5px;
header.banner .nav-primary ul li a.active { padding: 15px 0 0;
background-color: $nav-active-bg;
} .category {
color: $warm-grey;
font-size: 11px;
margin: 0 10px;
text-transform: uppercase;
}
img {
margin-top: 14px;
margin-bottom: -6px;
border-radius: 0 0 10px 10px;
position: relative;
top: 1px;
}
a:hover {
box-shadow: none;
color: $brand-color;
}
p {
margin: 0 10px;
}
}
li {
border: 0;
float: none;
a:link,
a:visited {
border: 0;
color: $warm-grey;
padding: 0 0 11px 14px;
text-align: left;
width: 170px;
}
a:hover {
background: none repeat scroll 0 0 $transparent;
box-shadow: none;
color: $brand-color;
}
header.banner .nav-primary ul li { }
border-bottom: 1px solid #F2F2F4;
font-size: 16px; // the old arrow that appears if there is secondary nav when you hover over the main nav
.arrow-up {
display: none;
}
.first a:link,
.first a:visited,
:first-of-type a:link {
padding: 10px 14px;
}
.active a:link,
.active a:visited {
background: none;
}
} // end ul
// the new arrow that appears if there is secondary nav when you hover over the main nav
li:hover ul:after {
background: url('#{$asset-path}patterns/arrow-up-smaller.png') no-repeat;
content: '';
display: block;
height: 8px;
left: 20px;
position: relative;
top: -13px;
width: 200px;
z-index: 999;
}
li ul .promo a:link,
li ul .promo a:visited {
background: none repeat scroll 0 0 $transparent;
border-left: 0 none;
color: $warm-grey;
height: auto;
padding: 0;
text-align: left;
}
li:hover ul {
display: block;
}
} // nav-primary
.nav-toggle {
background-image: url(#{$asset-path}icons/navigation-menu-plain.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 25px auto;
cursor: pointer;
display: block;
height: 48px;
position: absolute;
right: 0;
text-indent: -99999px;
width: 48px;
}
.no-script {
display: none;
}
nav ul {
background-color: $nav-bg;
display: none;
float: left;
}
.logo {
border-left: 0;
float: left;
height: 48px;
overflow: hidden;
}
.logo-ubuntu {
background: url('#{$asset-path}ubuntu-logo.png') no-repeat scroll 0 10px $transparent;
display: inline-block;
float: left;
font-size: 18px;
height: 32px;
margin: 0;
margin-left: 10px;
margin-right: -20px;
min-width: 128px;
padding: 7px 14px 9px 0;
position: relative;
text-transform: lowercase;
img {
margin-right: 8px;
position: absolute;
left: -999em;
}
span {
float: left;
font-size: 23px;
font-weight: 300;
padding-left: 122px;
padding-right: 20px;
position: relative;
top: 5px;
}
}
} // end .banner
// show secondary nav differently if :after isn't supported, remove arrow and move secondary nav up to meet the bottom of the navbar
.no-generatedcontent .banner .nav-primary li ul {
border-radius: 0 0 10px 10px;
top: 48px;
} }
header.banner .nav-primary ul li:last-child { // Responsive header navigation
border: 0; #main-navigation-link {
display: none;
} }
header.banner nav.nav-primary ul li a:link, .opera-mini .banner .nav-toggle,
header.banner .nav-primary ul li a:visited, .no-svg .banner .nav-toggle {
header.banner .nav-primary ul li a:hover, background-image: url('#{$asset-path}icons/navigation-menu-plain.png');
header.banner .nav-primary ul li a:active {
padding: 14px 14px 13px;
text-align: left;
} }
header.banner nav.nav-primary ul.active li ul { header nav .active {
display: none; display: block;
} }
#menu.active:after { #menu.active:after {
background-image: url(#{$asset-path}patterns/nav-arrow.svg); background-image: url('#{$asset-path}patterns/nav-arrow.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 26px; background-position: 50% 26px;
content: ""; content: '';
display: block; display: block;
height: 23px; height: 23px;
margin-left: 0; margin-left: 0;
...@@ -160,15 +348,27 @@ header.banner nav.nav-primary ul.active li ul { ...@@ -160,15 +348,27 @@ header.banner nav.nav-primary ul.active li ul {
width: 48px; width: 48px;
z-index: 999; z-index: 999;
} }
html.no-svg, .opera-mini {
.no-svg,
.opera-mini {
#menu.active:after { #menu.active:after {
background-image: url(#{$asset-path}patterns/nav-arrow.png); background-image: url('#{$asset-path}patterns/nav-arrow.png');
}
.banner .nav-primary.nav-right .logo-ubuntu {
background-image: url('#{$asset-path}logos/logo-ubuntu-white.png');
}
.banner .logo-ubuntu {
background-image: url('#{$asset-path}logos/logo-ubuntu_cof-white_orange-hex.png');
} }
} // End responsive navigation } // End responsive navigation
/* nav-secondary */ // nav-secondary
.nav-secondary { .nav-secondary {
border-bottom: 1px solid #dfdcd9; border-bottom: 1px solid $mid-grey;
margin-bottom: 0; margin-bottom: 0;
...@@ -181,30 +381,32 @@ html.no-svg, .opera-mini { ...@@ -181,30 +381,32 @@ html.no-svg, .opera-mini {
float: left; float: left;
margin-top: 16px; margin-top: 16px;
font-size: 14px; font-size: 14px;
margin-right: 15px; margin-right: 15px;
a:link, a:link,
a:visited { a:visited {
color: #333; color: $warm-grey;
font-size: 14px; font-size: 14px;
float: left; float: left;
} }
a:hover, a:hover,
a:active { a:active {
color: $ubuntu-orange; color: $brand-color;
text-decoration: none; text-decoration: none;
} }
} }
li, li,
li.active a:link, .active a:link,
li.active a:visited { .active a:visited {
color: $ubuntu-orange; color: $brand-color;
text-decoration: none; text-decoration: none;
} }
}
ul.breadcrumb { } // end ul
.breadcrumb {
margin-left: 20px; margin-left: 20px;
li, li,
...@@ -214,152 +416,79 @@ html.no-svg, .opera-mini { ...@@ -214,152 +416,79 @@ html.no-svg, .opera-mini {
margin-right: 8px; margin-right: 8px;
} }
li.active a:link, .active a:link,
li.active a:visited { .active a:visited {
color: $ubuntu-orange; color: $brand-color;
} }
} }
} }
header.banner h2 { @media only screen and (max-width: 295px) {
@include font-size (25);
display: block;
left: 4px;
margin-bottom:0;
position: relative;
text-transform: lowercase;
top: 14px;
}
header.banner h2 a:link, header.banner h2 a:visited, header.banner a {
color: #fff;
float: left;
text-decoration:none;
}
header.banner {
.logo {
border-left: 0;
float: left;
height: 48px;
overflow: hidden;
}
.logo-ubuntu {
background: url("#{$asset-path}ubuntu-logo.png") no-repeat scroll 0 10px transparent;
font-size: 18px;
margin-bottom: 0;
position: relative;
text-transform: lowercase;
float: left;
margin: 0;
display: inline-block;
height: 32px;
min-width: 128px;
margin-right: -20px;
margin-left: 10px;
padding: 7px 14px 9px 0;
img {
margin-right: 8px;
position: absolute;
left: -999em;
}
span {
float: left;
font-size: 23px;
font-weight: 300;
padding-left: 122px;
padding-right: 20px;
position: relative;
top: 5px;
}
} // this changes the logo to the circle of friends on screens below 295px
.nav-primary.nav-left { .banner {
.nav-primary.nav-right .logo-ubuntu,
.logo-ubuntu { .logo-ubuntu {
float: right; background-size: 20px 20px;
background: url('#{$asset-path}logos/logo-ubuntu_cof-white_orange-hex.svg') 0 50% no-repeat;
min-width: 0;
width: 38px;
} }
} }
.nav-primary.nav-right {
.logo-ubuntu { .banner .logo-ubuntu span {
background-image: url("#{$asset-path}logos/logo-ubuntu-white.svg"); padding-left: 38px;
background-size: 107px 25px;
float: left;
}
}
}
html.no-svg, .opera-mini {
header.banner .nav-primary.nav-right .logo-ubuntu {
background-image: url("#{$asset-path}logos/logo-ubuntu-white.png");
} }
}
} // end @media only screen and (max-width: 295px)
@media only screen and (max-width: 295px) { /*
* Main navigation dropdown styles
*/
// this changes the logo to the circle of friends on screens below 295px .lt-ie8 .banner .nav-primary li:hover ul {
header.banner { display: none;
.nav-primary.nav-right .logo-ubuntu,
.logo-ubuntu {
@include background_size(20px 20px);
background: url('#{$asset-path}logos/logo-ubuntu_cof-white_orange-hex.svg') 0 50% no-repeat;
min-width: 0;
width: 38px;
}
}
header.banner .logo-ubuntu span {
padding-left: 38px;
}
} // end @@media only screen and (max-width: 295px)
html.no-svg, .opera-mini {
header.banner .logo-ubuntu {
background-image: url('#{$asset-path}logos/logo-ubuntu_cof-white_orange-hex.png');
}
} }
@media only screen and (max-width : 768px) { @media only screen and (max-width : 768px) {
header.banner .nav-primary { .banner .nav-primary {
@include box-shadow(0 1px 2px 1px rgba(0, 0, 0, 0.2)); box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .2);
} }
header.banner .nav-primary.active { .banner .nav-primary.active {
@include box-shadow(none); box-shadow: none;
padding: 0; padding: 0;
} }
header nav ul.active { header nav .active {
float: left; float: left;
} }
header nav ul.active li:last-child a:link, header nav .active li:last-child a:link,
header nav ul.active li:last-child a:visited { header nav .active li:last-child a:visited {
border-bottom: 0; border-bottom: 0;
} }
header.banner .nav-primary ul { .banner .nav-primary ul {
position: relative; position: relative;
width: 100%; width: 100%;
} }
header.banner .nav-primary ul li.active { .banner .nav-primary ul .active {
a:link, a:link,
a:visited { a:visited {
color: #333; color: $warm-grey;
font-weight: 700; font-weight: 700;
} }
} }
header.banner .nav-primary ul li, .banner .nav-primary ul li,
header.banner .nav-primary ul li a:link, .banner .nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited, .banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:active { .banner .nav-primary ul li a:active {
@include box-sizing(); box-sizing: border-box;
background: transparent; background: $transparent;
border: none; border: 0;
display: block; display: block;
font-weight: 300; font-weight: 300;
margin: 0; margin: 0;
...@@ -367,40 +496,41 @@ html.no-svg, .opera-mini { ...@@ -367,40 +496,41 @@ html.no-svg, .opera-mini {
width: 100%; width: 100%;
} }
header.banner .nav-primary ul li a:link, .banner .nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited, .banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:hover, .banner .nav-primary ul li a:hover,
header.banner .nav-primary ul li a:active { .banner .nav-primary ul li a:active {
background-color: $nav-bg; background-color: $nav-bg;
border-bottom: 1px solid $nav-border-dark; border-bottom: 1px solid $nav-border-dark;
color: #333333; color: $warm-grey;
font-size: 1em; font-size: 1em;
} }
header.banner .nav-primary ul li:nth-last-child(-n+2) a:link, .banner .nav-primary ul li:nth-last-child(-n+2) a:link,
header.banner .nav-primary ul li:nth-last-child(-n+2) a:visited { .banner .nav-primary ul li:nth-last-child(-n+2) a:visited {
border: 0; border: 0;
} }
header.banner .nav-primary ul li a:hover { .banner .nav-primary ul li a:hover {
@include box-shadow(none); box-shadow: none;
background: lighten($nav_bg, 3%); background: lighten($nav_bg, 3%);
} }
header.banner .nav-primary ul li a.active {
.banner .nav-primary ul li .active {
background-color: $nav-active-bg; background-color: $nav-active-bg;
} }
header.banner nav.nav-primary ul li a:link, .banner .nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited, .banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:hover, .banner .nav-primary ul li a:hover,
header.banner .nav-primary ul li a:active { .banner .nav-primary ul li a:active {
padding: 8px 10px; padding: 8px 10px;
text-align: left; text-align: left;
} }
header.banner .nav-primary ul li { .banner .nav-primary ul li {
@include box-sizing(); box-sizing: border-box;
background: transparent; background: $transparent;
border-bottom: 0; border-bottom: 0;
border-right: 1px solid $nav-border-dark; border-right: 1px solid $nav-border-dark;
float: left; float: left;
...@@ -408,9 +538,9 @@ html.no-svg, .opera-mini { ...@@ -408,9 +538,9 @@ html.no-svg, .opera-mini {
} }
.nav-secondary { .nav-secondary {
background: #fff; background: $white;
ul.second-level-nav { .second-level-nav {
border-top: 1px solid $nav-border-dark; border-top: 1px solid $nav-border-dark;
display: none; display: none;
margin-bottom: 0; margin-bottom: 0;
...@@ -420,7 +550,7 @@ html.no-svg, .opera-mini { ...@@ -420,7 +550,7 @@ html.no-svg, .opera-mini {
width: 100%; width: 100%;
li { li {
@include box-sizing(); box-sizing: border-box;
width: 50%; width: 50%;
margin: 0; margin: 0;
float: left; float: left;
...@@ -428,32 +558,32 @@ html.no-svg, .opera-mini { ...@@ -428,32 +558,32 @@ html.no-svg, .opera-mini {
a, a,
a:link, a:link,
a:visited { a:visited {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
height: 100%; height: 100%;
padding: 10px 10px 10px 20px; padding: 10px 10px 10px 20px;
width: 100%; width: 100%;
} }
&.active { &.active {
a, a,
a:link, a:link,
a:visited { a:visited {
color: #333; color: $warm-grey;
font-weight: 700; font-weight: 700;
} }
} }
} }
} /* end .second-level-nav */ } /* end .second-level-nav */
ul.third-level-nav {
.third-level-nav {
display: none; display: none;
margin-bottom: 0; margin-bottom: 0;
width: 100%; width: 100%;
padding-bottom: 20px; padding-bottom: 20px;
li { li {
@include box-sizing(); box-sizing: border-box;
width: 50%; width: 50%;
margin: 0; margin: 0;
float: left; float: left;
...@@ -462,7 +592,7 @@ html.no-svg, .opera-mini { ...@@ -462,7 +592,7 @@ html.no-svg, .opera-mini {
a, a,
a:link, a:link,
a:visited { a:visited {
@include box-sizing(); box-sizing: border-box;
padding: 10px 10px 10px 0; padding: 10px 10px 10px 0;
display: block; display: block;
width: 100%; width: 100%;
...@@ -473,7 +603,7 @@ html.no-svg, .opera-mini { ...@@ -473,7 +603,7 @@ html.no-svg, .opera-mini {
a, a,
a:link, a:link,
a:visited { a:visited {
color: #333; color: $warm-grey;
font-weight: 700; font-weight: 700;
} }
} }
...@@ -486,10 +616,11 @@ html.no-svg, .opera-mini { ...@@ -486,10 +616,11 @@ html.no-svg, .opera-mini {
li:only-child { li:only-child {
width: 100%; width: 100%;
} }
} /* end third-level-nav */ } /* end third-level-nav */
ul.breadcrumb { .breadcrumb {
@include box-sizing(); box-sizing: border-box;
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
margin-bottom: 0; margin-bottom: 0;
...@@ -500,34 +631,47 @@ html.no-svg, .opera-mini { ...@@ -500,34 +631,47 @@ html.no-svg, .opera-mini {
} }
li { li {
@include box-sizing(); box-sizing: border-box;
color: #fff; color: $white;
width: 100%;
display: block; display: block;
height: 40px; height: 40px;
margin: 0; margin: 0;
width: 100%;
+ li {
display: none;
a:link,
a:active,
a:visited {
padding-left: 20px;
}
.after {
background-image: none;
}
}
a, a,
a:link, a:link,
a:visited { a:visited {
@include box-sizing(); box-sizing: border-box;
font-size: 16px; color: $warm-grey;
width: 100%;
color: #333333;
display: block; display: block;
font-size: 16px;
margin-right: 0; margin-right: 0;
padding: 8px 10px 0;
text-decoration: none; text-decoration: none;
padding: 8px 10px 0 10px; width: 100%;
} }
&.active { &.active {
margin-top: 12px; margin-top: 12px;
a, a,
a:link, a:link,
a:visited { a:visited {
color: #333; color: $warm-grey;
font-weight: 700; font-weight: 700;
} }
} }
...@@ -553,45 +697,41 @@ html.no-svg, .opera-mini { ...@@ -553,45 +697,41 @@ html.no-svg, .opera-mini {
} }
} }
li + li {
display: none;
a:link,
a:active,
a:visited {
padding-left: 20px;
}
a.after {
background-image: none;
}
}
} }
&.open { &.open {
ul.breadcrumb li a:after,
ul.breadcrumb li a:link:after, .breadcrumb li a:after,
ul.breadcrumb li a:visited:after { .breadcrumb li a:link:after,
.breadcrumb li a:visited:after {
background-image: url(#{$asset-path}patterns/nav-up-arrow.svg); background-image: url(#{$asset-path}patterns/nav-up-arrow.svg);
} }
ul.breadcrumb li + li a.after {
.breadcrumb li + li .after {
background-image: none; background-image: none;
} }
ul.breadcrumb li .after {
.breadcrumb li .after {
background-image: url(#{$asset-path}patterns/nav-up-arrow.svg); background-image: url(#{$asset-path}patterns/nav-up-arrow.svg);
margin-top: -7px; margin-top: -7px;
} }
ul.second-level-nav,
ul.third-level-nav, .second-level-nav,
ul.breadcrumb li + li { .third-level-nav,
.breadcrumb li + li {
display: block; display: block;
} }
} }
}/* end nav-secondary */ }/* end nav-secondary */
.no-js { .no-js {
.nav-secondary ul.second-level-nav { display: block; }
.nav-secondary .second-level-nav {
display: block;
}
#main-navigation-link { #main-navigation-link {
position: absolute; position: absolute;
right: 10px; right: 10px;
...@@ -603,7 +743,7 @@ html.no-svg, .opera-mini { ...@@ -603,7 +743,7 @@ html.no-svg, .opera-mini {
display: block; display: block;
a { a {
background-image: url("#{$asset-path}icons/navigation-menu-plain.svg"); background-image: url('#{$asset-path}icons/navigation-menu-plain.svg');
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 25px auto; background-size: 25px auto;
...@@ -611,56 +751,73 @@ html.no-svg, .opera-mini { ...@@ -611,56 +751,73 @@ html.no-svg, .opera-mini {
width: 28px; width: 28px;
height: 28px; height: 28px;
position: absolute; position: absolute;
} }
} }
} }
html.no-svg, .opera-mini { .no-svg,
.nav-secondary ul.breadcrumb { .opera-mini {
.nav-secondary .breadcrumb {
li .after { li .after {
background-image: url(#{$asset-path}patterns/nav-down-arrow.png); background-image: url(#{$asset-path}patterns/nav-down-arrow.png);
} }
&.open { &.open {
ul.breadcrumb li a:after, .breadcrumb li a:after,
ul.breadcrumb li a:link:after, .breadcrumb li a:link:after,
ul.breadcrumb li a:visited:after { .breadcrumb li a:visited:after {
background-image: url(#{$asset-path}patterns/nav-up-arrow.png); background-image: url(#{$asset-path}patterns/nav-up-arrow.png);
} }
ul.breadcrumb li .after{
.breadcrumb li .after {
background-image: url(#{$asset-path}patterns/nav-up-arrow.png); background-image: url(#{$asset-path}patterns/nav-up-arrow.png);
} }
} } // end .open
}
header.banner .nav-primary #google-appliance-search-form button[type="submit"] { } // end .nav-secondary .breadcrumb
background-image: url("#{$asset-path}search-black.png");
.banner .nav-primary button {
background-image: url('#{$asset-path}search-black.png');
} }
} }
html.no-svg, .opera-mini { .no-svg,
.nav-secondary ul.breadcrumb { .opera-mini {
.nav-secondary .breadcrumb {
li .after { li .after {
background-image: url(#{$asset-path}patterns/nav-down-arrow.png); background-image: url(#{$asset-path}patterns/nav-down-arrow.png);
} }
&.open { &.open {
ul.breadcrumb li a:after, .breadcrumb li a:after,
ul.breadcrumb li a:link:after, .breadcrumb li a:link:after,
ul.breadcrumb li a:visited:after { .breadcrumb li a:visited:after {
background-image: url(#{$asset-path}patterns/nav-up-arrow.png); background-image: url(#{$asset-path}patterns/nav-up-arrow.png);
} }
ul.breadcrumb li .after{
.breadcrumb li .after {
background-image: url(#{$asset-path}patterns/nav-up-arrow.png); background-image: url(#{$asset-path}patterns/nav-up-arrow.png);
} }
} }
} }
header.banner .nav-primary #google-appliance-search-form button[type="submit"] {
background-image: url("#{$asset-path}search-black.png"); .banner .nav-primary button {
background-image: url('#{$asset-path}search-black.png');
} }
} }
header.banner { .banner {
.nav-toggle { .nav-toggle {
background-image: url("#{$asset-path}icons/navigation-menu-plain.svg"); background-image: url('#{$asset-path}icons/navigation-menu-plain.svg');
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 25px auto; background-size: 25px auto;
...@@ -675,226 +832,125 @@ html.no-svg, .opera-mini { ...@@ -675,226 +832,125 @@ html.no-svg, .opera-mini {
} }
html.no-svg, .opera-mini { .no-svg,
header.banner .nav-toggle { .opera-mini {
background-image: url("#{$asset-path}icons/navigation-menu-plain.png");
.banner .nav-toggle {
background-image: url('#{$asset-path}icons/navigation-menu-plain.png');
} }
} }
} }
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
header.banner .nav-primary ul li { .banner .nav-primary ul li {
border-bottom: 0; border-bottom: 0;
} }
} }
@media only screen and (min-width : 769px) { @media only screen and (min-width : 769px) {
header.banner { .banner {
-moz-box-shadow: 0 2px 2px -2px #777777 inset, 2px 1px #FFFFFF; box-shadow: 0 2px 2px -2px $nav-box-shadow-color inset, 2px 1px $white;
-webkit-box-shadow: 0 2px 2px -2px #777777 inset, 2px 1px #FFFFFF;
box-shadow: 0 2px 2px -2px #777777 inset, 2px 1px #FFFFFF;
nav.nav-primary { .nav-primary {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
border-bottom: 0; border-bottom: 0;
} }
} }
header.banner .nav-toggle { .banner .nav-toggle {
display: none; display: none;
} }
header.banner nav ul { .banner nav ul {
background-color: transparent; background-color: $transparent;
display: block; display: block;
} }
header.banner .nav-primary ul li { .banner .nav-primary ul li {
border-left: 1px solid #C64012; border-left: 1px solid $nav-border-left;
} }
header.banner .nav-primary ul li a:active, .banner .nav-primary ul li a:active,
header.banner .nav-primary ul li a:hover, .banner .nav-primary ul li a:hover,
header.banner .nav-primary ul li a:visited, .banner .nav-primary ul li a:visited,
header.banner nav.nav-primary ul li a:link { .banner .nav-primary ul li a:link {
border-left: 1px solid #EC5B29; border-left: 1px solid $nav-hover-border-left;
} }
header.banner .nav-primary ul li:last-child {
border-right: 1px solid #C64012; .banner .nav-primary ul li:last-child {
border-left: 1px solid #C64012; border-right: 1px solid $nav-border-left;
border-left: 1px solid $nav-border-left;
} }
header.banner .nav-primary ul li a.active {
background-color: #B83A10; .banner .nav-primary ul li .active {
background-color: $nav-active-bg-color;
} }
header.banner .nav-primary ul li a:hover {
background-color: #E1662F; .banner .nav-primary ul li a:hover {
background-color: $nav-hover-bg-color;
} }
.nav-secondary { .nav-secondary {
ul:last-child li:last-child {
:last-child li:last-child {
padding-bottom: 10px; padding-bottom: 10px;
} }
ul.breadcrumb, .breadcrumb,
ul.second-level-nav, .second-level-nav,
ul.third-level-nav { .third-level-nav {
li { li {
margin-right: 15px; margin-right: 15px;
} }
} }
ul.breadcrumb { .breadcrumb {
float: left; float: left;
li { li {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
ul { ul {
float: none; float: none;
margin-bottom: 0; margin-bottom: 0;
}
ul li { li {
margin-bottom: 5px; margin-bottom: 5px;
}
} }
} }
} }
@media only screen and (min-width: 984px) { @media only screen and (min-width: 984px) {
header.banner { .banner {
margin-bottom: 20px; margin-bottom: 20px;
.nav-primary ul {
display: block;
}
} }
header.banner nav.nav-primary ul { .banner .nav-primary,
display: block; .nav-global-wrapper {
}
header.banner .nav-primary,
#nav-global .nav-global-wrapper {
width: 984px; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */ width: 984px; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
} }
header.banner .nav-primary.nav-right .logo-ubuntu { .banner .nav-primary.nav-right .logo-ubuntu {
margin-left: 0; margin-left: 0;
} }
} }
/* // scss-lint:enable NestingDepth, IdSelector
* Main navigation dropdown styles
*/
header.banner .nav-primary ul { position: static; }
header.banner .nav-primary li ul {
@include box_shadow(0 2px 2px -1px #777777);
@include rounded_corners(10px);
background: #f7f7f7;
border: 1px solid #d5d5d5;
display: none;
float: none;
margin: 0;
padding: 5px 0;
position: absolute;
top: 51px;
width: 200px;
}
// the new arrow that appears if there is secondary nav when you hover over the main nav
header.banner .nav-primary li:hover ul:after {
background: url("#{$asset-path}patterns/arrow-up-smaller.png") no-repeat;
content: '';
display: block;
height: 8px;
left: 20px;
position: relative;
top: -13px;
width: 200px;
z-index: 999;
}
// show secondary nav differently if :after isn't supported, remove arrow and move secondary nav up to meet the bottom of the navbar
.no-generatedcontent header.banner .nav-primary li ul {
@include rounded_corners(0 0 10px 10px);
top: 48px;
}
// the old arrow that appears if there is secondary nav when you hover over the main nav
header.banner .nav-primary li ul .arrow-up {
display: none;
}
header.banner .nav-primary li ul li {
border: 0;
float: none;
}
header.banner .nav-primary li ul li a:link,
header.banner .nav-primary li ul li a:visited {
border: 0;
color: #333333;
padding: 0 0 11px 14px;
text-align: left;
width: 170px;
}
header.banner .nav-primary li ul li a:hover {
background: none repeat scroll 0 0 transparent;
@include box_shadow(none);
color: #DD4814;
}
header.banner .nav-primary li ul li.first a:link,
header.banner .nav-primary li ul li.first a:visited,
header.banner .nav-primary li ul li:first-of-type a:link {
padding: 10px 14px;
}
header.banner .nav-primary li ul li.active a:link,
header.banner .nav-primary li ul li.active a:visited {
background: none repeat scroll 0 0 transparent !important;
}
header.banner .nav-primary li ul .promo {
border-top: 1px solid #D5D5D5;
float: left;
margin-top: 5px;
padding: 15px 0 0;
}
header.banner .nav-primary li ul .promo a:link,
header.banner .nav-primary li ul .promo a:visited {
background: none repeat scroll 0 0 transparent;
border-left: 0 none;
color: #333333;
height: auto;
padding: 0;
text-align: left;
}
header.banner .nav-primary li ul .promo p { margin: 0 10px; }
header.banner .nav-primary li ul .promo a:hover {
box-shadow: none;
color: #DD4814;
}
header.banner .nav-primary li ul .promo img {
margin-top: 14px;
margin-bottom: -6px;
@include rounded_corners(0 0 10px 10px);
position:relative;
top:1px;
}
header.banner .nav-primary li ul .promo .category {
color: $warm_grey;
font-size: 11px;
margin: 0 10px;
text-transform: uppercase;
}
header.banner .nav-primary li:hover ul { display: block; }
html.lt-ie8 header.banner .nav-primary li:hover ul { display: none; }
sass/core/patterns/_helpers.scss
View file @ 2fcda1ed
@charset 'UTF-8'; @charset 'UTF-8';
@import '../_core-constants'; @import '../core-constants';
.left { float: left; } .left { float: left; }
...@@ -9,9 +9,9 @@ ...@@ -9,9 +9,9 @@
.caps { text-transform: uppercase; } .caps { text-transform: uppercase; }
img { img {
border: 0 none; border: 0 none;
height: auto; height: auto;
max-width: 100%; max-width: 100%;
&.left { margin-right: 0; } &.left { margin-right: 0; }
...@@ -20,21 +20,21 @@ img { ...@@ -20,21 +20,21 @@ img {
.accessibility-aid, .accessibility-aid,
.off-left { .off-left {
position: absolute; position: absolute;
left: -999em; left: -999em;
} }
a.external { .external {
@include background-size(.7em .7em); background-size: .7em .7em;
padding-right: .9em; padding-right: .9em;
background-image: url('#{$asset-path}external-link-orange.svg'); background-image: url('#{$asset-path}external-link-orange.svg');
background-position: right 1px; background-position: right 1px;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.opera-mini a.external, .opera-mini .external,
.no-svg a.external { background-image: url('#{$asset-path}external-link-orange.png'); } .no-svg .external { background-image: url('#{$asset-path}external-link-orange.png'); }
.text-center, .text-center,
.align-center { text-align: center; } .align-center { text-align: center; }
...@@ -56,29 +56,29 @@ a.external { ...@@ -56,29 +56,29 @@ a.external {
.no-border { border: 0; } .no-border { border: 0; }
.link-top { .link-top {
@include font-size (14); @include font-size (14);
clear: both; clear: both;
margin-bottom: 40px; margin-bottom: 40px;
margin-top: -40px; margin-top: -40px;
a { a {
background: #fff; background: $white;
margin-right: 10px; margin-right: 10px;
margin-top: -17px; margin-top: -17px;
padding: 5px; padding: 5px;
float: right; float: right;
} }
} }
.pull-bottom-right { .pull-bottom-right {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: auto; left: auto;
} }
.box .pull-bottom-right { .box .pull-bottom-right {
@include rounded-corners(0 0 4px 0); border-radius: 0 0 4px;
} }
.pull-bottom-left { margin-left: -20px; margin-bottom: -21px; } .pull-bottom-left { margin-left: -20px; margin-bottom: -21px; }
...@@ -86,9 +86,9 @@ a.external { ...@@ -86,9 +86,9 @@ a.external {
.pull-top-right { margin-left: -20px; margin-top: -21px; } .pull-top-right { margin-left: -20px; margin-top: -21px; }
div.box-image-centered span img, .box-image-centered span img,
div.row-image-centered span img, .row-image-centered span img,
div.row.row-image-centered span img, .row.row-image-centered span img,
img { img {
&.priority-0 { &.priority-0 {
position: absolute; position: absolute;
...@@ -98,28 +98,28 @@ img { ...@@ -98,28 +98,28 @@ img {
.priority-0, .priority-0,
.not-for-small { .not-for-small {
position: absolute; position: absolute;
left: -999em; left: -999em;
} }
// responsive video solution // responsive video solution
.video-container { .video-container {
position: relative; position: relative;
padding-bottom: 56.25%; padding-bottom: 56.25%;
padding-top: 30px; padding-top: 30px;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
iframe { iframe {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
& + h3, + h3,
& + .video-title { + .video-title {
margin-top: 20px; margin-top: 20px;
} }
} }
...@@ -131,7 +131,7 @@ img { ...@@ -131,7 +131,7 @@ img {
.pull-bottom-right, .pull-bottom-right,
.pull-bottom-left { position: static; } .pull-bottom-left { position: static; }
img.pull-bottom-left { .pull-bottom-left {
margin-bottom: 0; margin-bottom: 0;
margin-left: 0; margin-left: 0;
} }
...@@ -139,38 +139,39 @@ img { ...@@ -139,38 +139,39 @@ img {
} // end @media only screen and (max-width : 768px) } // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
div.box-image-centered span img, .box-image-centered span img,
div.row-image-centered span img, .row-image-centered span img,
div.row.row-image-centered span img, .row.row-image-centered span img,
img { img {
&.priority-0 { &.priority-0 {
position: relative; position: relative;
left: auto; left: auto;
} }
} }
.priority-0, .priority-0,
.not-for-small { .not-for-small {
position: relative; position: relative;
left: auto; left: auto;
} }
.for-mobile, .for-mobile,
.for-small { .for-small {
position: absolute; position: absolute;
left: -999em; left: -999em;
} }
.pull-right { .pull-right {
float: right; float: right;
margin-right: -30px; margin-right: -30px;
} }
img.pull-left { .pull-left {
margin-left: -30px; margin-left: -30px;
} }
img.touch-border { .touch-border {
float: left; float: left;
margin-bottom: -30px; margin-bottom: -30px;
} }
...@@ -179,34 +180,31 @@ img { ...@@ -179,34 +180,31 @@ img {
@media only screen and (min-width : 769px) { @media only screen and (min-width : 769px) {
img.left { margin-right: 20px; } .left { margin-right: 20px; }
} //@media only screen and (min-width : 769px) } //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) { @media only screen and (min-width: 984px) {
img.touch-border { .touch-border {
float: left; float: left;
margin-bottom: -40px; margin-bottom: -40px;
} }
img.pull-left { margin-left: -40px; } .pull-left { margin-left: -40px; }
.pull-right { .pull-right {
float: right; float: right;
margin-right: -40px; margin-right: -40px;
} }
.for-tablet, .for-tablet,
.for-medium { .for-medium {
display: none; display: none;
} }
.no-border { .no-border {
border: 0; border: 0;
} }
} // end @media only screen and (min-width: 984px) } // end @media only screen and (min-width: 984px)
sass/core/patterns/_image-centered.scss
View file @ 2fcda1ed
@charset 'UTF-8'; .box-image-centered,
.row-image-centered {
.row.row-image-centered, padding: 20px 10px 0;
div.box-image-centered,
div.row-image-centered, &.row {
div.row.row-image-centered { padding-top: 40px;
padding: 20px 10px 0; padding-bottom: 40px;
} }
.row-box.row-image-centered { &.row-box {
padding-top: 20px; padding-bottom: 20px;
padding-bottom: 20px; }
}
&.row-hero {
.row.row-image-centered { padding-top: 0;
padding-top: 40px; }
padding-bottom: 40px;
} div,
span {
.row-hero.row-image-centered { float: none;
padding-top: 0; }
}
span {
div.row-image-centered, width: 100%;
div.box-image-centered,
div.row.row-image-centered { img {
//display: block; display: block;
height: auto;
div, padding: 0;
span { margin: 0 auto;
//display: block; margin-bottom: 20px;
float: none; max-width: 100%;
} }
}
span {
width: 100%; p,
h2,
img { h3 {
height: auto; float: none;
max-width: 100%; }
display: block;
padding: 0;
margin: 0 auto;
margin-bottom: 20px;
}
}
p,
h2,
h3 {
float: none;
}
} }
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
div.row-image-centered, .row-image-centered,
div.row.row-image-centered, .row.row-image-centered,
div.box-image-centered { .box-image-centered {
@include box-sizing; box-sizing: border-box;
padding-bottom: 20px; display: table;
display: table; padding-bottom: 20px;
div { div {
float: none; display: table-cell;
display: table-cell; float: none;
position: relative; position: relative;
p, p,
h2, h2,
h3 { h3 {
display: block; display: block;
width: 100%; float: left;
float: left; width: 100%;
} }
+ span img { // if image is on the right hand side + span img { // if image is on the right hand side
padding-right: 0; margin-bottom: 20px;
margin-bottom: 20px; padding-right: 0;
} }
} }
span { span {
display: table-cell; display: table-cell;
float: none; float: none;
position: relative; position: relative;
text-align: center; text-align: center;
top: 0; top: 0;
vertical-align: middle; vertical-align: middle;
width: auto; width: auto;
img { img {
padding-right: 20px; // if image is on the left hand side padding-right: 20px; // if image is on the left hand side
} }
} }
} }
/*
alternative to row-image-centered ///
requires equal-height class on row /// alternative to row-image-centered
add align-vertically to the div containing the image /// requires equal-height class on row
http://caniuse.com/transforms2d /// add align-vertically to the div containing the image
*/ /// http://caniuse.com/transforms2d
.align-vertically { ///
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d; .js .align-vertically {
transform-style: preserve-3d; transform-style: preserve-3d;
img, img,
div { div {
-ms-transform: translateY(-50%); // for IE9 position: relative;
-webkit-transform: translateY(-50%); top: 50%;
position: relative; transform: translateY(-50%);
top: 50%; }
transform: translateY(-50%); }
}
}
} //@media only screen and (min-width : 768px) } //@media only screen and (min-width : 768px)
div.box-image-centered {
padding-top: 20px;
}
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
.row.row-image-centered, .box-image-centered,
div.box-image-centered, .row-image-centered,
div.row-image-centered, .row.row-image-centered {
div.row.row-image-centered { padding: 30px;
padding: 30px;
} div {
div.box-image-centered div + span img, + span img {
div.row-image-centered div + span img, display: table-cell;
div.row.row-image-centered div + span img, margin-bottom: 0;
div.box-image-centered span img.priority-0, margin-right: auto;
div.row-image-centered span img.priority-0, }
div.row.row-image-centered span img.priority-0 { }
margin-right: auto;
display: table-cell; span {
margin-bottom: 0;
} .priority-0 {
display: table-cell;
margin-bottom: 0;
margin-right: auto;
}
}
}
} // @media only screen and (min-width : 768px) } // @media only screen and (min-width : 768px)
@media only screen and (min-width: 984px) { @media only screen and (min-width: 984px) {
.row-image-centered,
.row.row-image-centered, .row.row-image-centered,
div.row-image-centered, .box-image-centered {
div.row.row-image-centered, box-sizing: border-box;
div.box-image-centered { display: table;
@include box-sizing; padding: 60px 40px;
padding: 60px 40px 60px;
display: table; div {
display: table-cell;
div { float: none;
float: none; position: relative;
display: table-cell;
position: relative; p,
h2,
p, h3 {
h2, display: block;
h3 { float: left;
display: block; width: 100%;
width: 100%; }
float: left;
} + span img { // if image is on the right hand side
padding-right: 0;
+ span img { // if image is on the right hand side }
padding-right: 0; }
//margin-bottom: 20px;
} span {
} display: table-cell;
float: none;
span { position: relative;
display: table-cell; text-align: center;
float: none; top: 0;
position: relative; vertical-align: middle;
text-align: center; width: auto;
top: 0;
vertical-align: middle; img {
width: auto; padding-right: 20px; // if image is on the left hand side
}
img { }
padding-right: 20px; // if image is on the left hand side }
}
}
}
} // end @media only screen and (min-width: 984px) } // end @media only screen and (min-width: 984px)
sass/core/patterns/_inline-logos.scss
View file @ 2fcda1ed
@charset 'UTF-8'; @charset 'UTF-8';
ul.inline-logos { .inline-logos {
float: left; float: left;
margin-left: 0; margin-left: 0;
padding: 0; padding: 0;
...@@ -8,82 +8,78 @@ ul.inline-logos { ...@@ -8,82 +8,78 @@ ul.inline-logos {
width: 100%; width: 100%;
li { li {
clear: none; clear: none;
display: inline-block; display: inline-block;
float: none; float: none;
margin: 10px 20px; margin: 10px 20px;
padding: 0; padding: 0;
&.clear-row { clear: left; } &.clear-row { clear: left; }
&.last-item { border: 0; } &.last-item { border: 0; }
} }
img {
@include transition; img {
vertical-align: middle; transition: all .5s ease-out;
max-width: 115px; vertical-align: middle;
max-height: 32px; max-width: 115px;
} max-height: 32px;
}
} }
.inline-icons { .inline-icons {
margin: 0 0 $gutter-width; margin: 0 0 $gutter-width;
li { li {
margin-right: 20px; margin-right: 20px;
margin-bottom: 20px; margin-bottom: 20px;
text-align: left; text-align: left;
display: inline-block; display: inline-block;
&.last-item { margin-right: 0; } &.last-item { margin-right: 0; }
} }
&.no-margin-bottom li { margin-bottom: 0; } &.no-margin-bottom li { margin-bottom: 0; }
img { img {
vertical-align: middle; vertical-align: middle;
max-width: 115px; max-width: 115px;
max-height: 32px; max-height: 32px;
} }
} }
@media only screen and (max-width : 768px) { @media only screen and (max-width : 768px) {
ul.inline-logos { .inline-logos {
img { img {
max-width: 172px; max-width: 172px;
max-height: 48px; max-height: 48px;
} }
} }
} // end @media only screen and (max-width : 768px) } // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) { @media only screen and (min-width : 769px) {
.inline-logos {
ul.inline-logos { li {
li { clear: none;
clear: none; display: inline-block;
display: inline-block; height: auto;
height: auto; margin: 20px 0;
margin: 20px 0; line-height: 60px;
line-height: 60px; padding: 0 40px;
padding: 0 40px;
img {
img { float: none;
float: none; vertical-align: middle;
vertical-align: middle; max-width: 200px;
max-width: 200px; max-height: 45px;
max-height: 45px; }
} }
} }
}
} //@media only screen and (min-width : 769px) } //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) { @media only screen and (min-width: 984px) {
.inline-icons {
.inline-icons {
text-align: left; text-align: left;
margin-bottom: 20px; margin-bottom: 20px;
} }
} // end @media only screen and (min-width: 984px) } // end @media only screen and (min-width: 984px)
sass/core/patterns/_lists.scss
View file @ 2fcda1ed
...@@ -3,20 +3,22 @@ ...@@ -3,20 +3,22 @@
.list, .list,
.list-ubuntu, .list-ubuntu,
.list-canonical { .list-canonical {
list-style: none; list-style: none;
margin-left: 0; margin-left: 0;
li { li {
border-bottom: 1px dotted $warm-grey; border-bottom: 1px dotted $warm-grey;
margin-bottom: 0; margin-bottom: 0;
padding: 10px 0; padding: 10px 0;
} }
li:last-of-type, // scss-lint:disable QualifyingElement
li:last-of-type,
li.last-item { li.last-item {
border: 0; border: 0;
padding-bottom: 0; padding-bottom: 0;
} }
// scss-lint:enable QualifyingElement
} }
.list article { .list article {
...@@ -31,13 +33,13 @@ ...@@ -31,13 +33,13 @@
} }
nav .list a { nav .list a {
display: block; display: block;
} }
.list-ubuntu li, .list-ubuntu li,
.list-canonical li { .list-canonical li {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 1em; background-position: 0 1em;
padding-left: 25px; padding-left: 25px;
} }
...@@ -54,7 +56,7 @@ nav .list a { ...@@ -54,7 +56,7 @@ nav .list a {
padding-left: 25px; padding-left: 25px;
} }
html.no-svg, .no-svg,
.opera-mini { .opera-mini {
.list-ubuntu li { .list-ubuntu li {
background-image: url('#{$asset-path}patterns/tick-orange.png'); background-image: url('#{$asset-path}patterns/tick-orange.png');
...@@ -84,13 +86,13 @@ html.no-svg, ...@@ -84,13 +86,13 @@ html.no-svg,
margin-bottom: 0; margin-bottom: 0;
} }
// scss-lint:disable QualifyingElement
li.last-item { li.last-item {
border-bottom: 1px dotted $warm-grey; border-bottom: 1px dotted $warm-grey;
padding-bottom: 10px; padding-bottom: 10px;
} }
div.last-col, .last-col {
ul.last-col {
margin-bottom: 20px; margin-bottom: 20px;
li.last-item { li.last-item {
...@@ -98,6 +100,7 @@ html.no-svg, ...@@ -98,6 +100,7 @@ html.no-svg,
padding-bottom: 0; padding-bottom: 0;
} }
} }
// scss-lint:enable QualifyingElement
} }
.inline { .inline {
...@@ -113,16 +116,18 @@ html.no-svg, ...@@ -113,16 +116,18 @@ html.no-svg,
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
.row .combined-list { .row .combined-list {
ul, ul,
div { div {
margin-bottom: 20px; margin-bottom: 20px;
} }
// scss-lint:disable QualifyingElement
li.last-item { li.last-item {
border-bottom: 0; border-bottom: 0;
padding-bottom: 0; padding-bottom: 0;
} }
// scss-lint:enable QualifyingElement
} }
} // end @media only screen and (max-width : 768px) } // end @media only screen and (max-width : 768px)
......
sass/core/patterns/_notifications.scss deleted 100644 → 0
View file @ dbb51318
@charset 'UTF-8';
div.warning {
@include rounded-corners(4px);
background-color: #fdffdc;
color: $cool-grey;
p {
padding: 0;
margin: 0;
}
}
@media only screen and (max-width : 768px) {
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_rows.scss
View file @ 2fcda1ed
@charset 'UTF-8'; @charset 'UTF-8';
////
// rows sass /// rows sass
/// contents:
// contents: /// row
/// row-hero
// row /// row-background
// row-hero /// strips
// row-background /// row-aux
// strips /// row-step
// row-aux ////
// row-step
/// row
// row
// ----------------------------------------------------------
.row { .row {
@include box-sizing; box-sizing: border-box;
border-bottom: 1px dotted $warm-grey; border-bottom: 1px dotted $warm-grey;
clear: both; clear: both;
padding: 20px 10px 0; padding: 20px 10px 0;
...@@ -27,7 +24,17 @@ ...@@ -27,7 +24,17 @@
display: none; display: none;
} }
&.no-padding-bottom { padding-bottom: 0 !important; } &.no-padding-bottom {
padding-bottom: 0;
}
}
.row:after {
clear: both;
content: '.';
display: block;
height: 0;
visibility: hidden;
} }
.row-grey { .row-grey {
...@@ -36,25 +43,23 @@ ...@@ -36,25 +43,23 @@
.no-border { border: 0; } .no-border { border: 0; }
// row-hero /// row-hero
// ---------------------------------------------------------- .row-hero {
#main-content .row-hero {
margin-top: 20px; margin-top: 20px;
padding-top: 0; padding-top: 0;
} }
// row-background /// row-background
// ----------------------------------------------------------
.row-background { .row-background {
color: #fff; color: $white;
background: url("#{$asset-path}backgrounds/image-background-wallpaper.jpg") no-repeat scroll 50% 50% #4b1827; background: url("#{$asset-path}backgrounds/image-background-wallpaper.jpg") no-repeat scroll 50% 50% $row-background;
a.alternate { .alternate {
color: #fff; color: $white;
text-decoration: underline; text-decoration: underline;
} }
a.alternate:hover { .alternate:hover {
color: rgba(255, 255, 255, .6); color: rgba(255, 255, 255, .6);
} }
...@@ -64,8 +69,7 @@ ...@@ -64,8 +69,7 @@
} }
} }
// strips /// strips
// ----------------------------------------------------------
.strip { .strip {
width: 100%; width: 100%;
display: block; display: block;
...@@ -75,27 +79,21 @@ ...@@ -75,27 +79,21 @@
background-color: $dark-aubergine; background-color: $dark-aubergine;
background-image: url("#{$asset-path}backgrounds/background-grid.png"); background-image: url("#{$asset-path}backgrounds/background-grid.png");
background-repeat: repeat; background-repeat: repeat;
color: #fff; color: $white;
.list-ubuntu li { .list-ubuntu li {
border: 0; border: 0;
} }
.resource { .resource {
color: #333; color: $base-color;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
padding-right: 20px;
} }
.resource:before {
border-right-color: #2c001e;
}
}
#main-content .strip-dark {
.resource:before { .resource:before {
border-bottom-width: 29px; border-bottom-width: 29px;
border-right-color: $dark-aubergine;
right: -2px; right: -2px;
top: -1px; top: -1px;
} }
...@@ -103,14 +101,9 @@ ...@@ -103,14 +101,9 @@
.resource:hover:before { .resource:hover:before {
border-bottom-width: 34px; border-bottom-width: 34px;
} }
.resource h2 {
padding-right: 20px;
}
} }
// row-aux /// row-aux
// ----------------------------------------------------------
.row-aux { .row-aux {
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
text-align: center; text-align: center;
...@@ -121,13 +114,12 @@ ...@@ -121,13 +114,12 @@
} }
a p { a p {
color: #333; color: $base-color;
margin-bottom: 30px; margin-bottom: 30px;
} }
} }
// row-step /// row-step
// ----------------------------------------------------------
.row-step { .row-step {
h2 { h2 {
position: relative; position: relative;
...@@ -140,29 +132,42 @@ ...@@ -140,29 +132,42 @@
height: 32px; height: 32px;
width: 32px; width: 32px;
border-radius: 50%; border-radius: 50%;
border: 3px solid $ubuntu-orange; border: 3px solid $brand-color;
color: $ubuntu-orange; color: $brand-color;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
background-color: #fff; background-color: $white;
font-size: 23px; font-size: 23px;
font-weight: 400; font-weight: 400;
} }
} }
@media only screen and (max-width : 768px) { @media only screen and (max-width : $breakpoint-medium) {
} // end @media only screen and (max-width : 768px) } // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 768px) { @media only screen and (min-width : $breakpoint-medium) {
.row { padding: 30px; } .row { padding: 30px; }
#main-content .row-hero { margin-top: 40px; } .row-hero { margin-top: 40px; }
// scss-lint:disable IdSelector
.row,
#context-footer { // Clear entire row
border-radius: 0;
margin: 0;
padding: 40px 40px 20px;
}
// scss-lint:enable IdSelector
.row-feature {
background: none;
}
} // end @media only screen and (max-width : 768px) } // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) { @media only screen and (min-width : $breakpoint-medium + 1px) {
.row-step .step { .row-step .step {
height: 42px; height: 42px;
...@@ -174,7 +179,7 @@ ...@@ -174,7 +179,7 @@
} //@media only screen and (min-width : 769px) } //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) { @media only screen and (min-width: $breakpoint-large) {
.row br { display: block; } .row br { display: block; }
......
sass/core/patterns/_search.scss
View file @ 2fcda1ed
@charset "UTF-8"; @charset 'UTF-8';
// scss-lint:disable IdSelector
.header-search, .header-search,
#box-search { #box-search {
padding: 7px 0 7px 14px; padding: 7px 0 7px 14px;
overflow: hidden; overflow: hidden;
[type="search"],
[type="text"] {
-webkit-appearance: none;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
box-sizing: border-box;
border-radius: 4px;
transition: all .5s ease-out;
background-color: darken($brand-color, 10%);
border: 0;
color: $white;
display: block;
float: left;
font-size: 16px;
height: 2.1em;
margin-bottom: 0;
padding: .5em 2.5em .5em .5em;
width: 100%;
}
input[type="search"], /// User agents are required to ignore a rule with an unknown selector. i.e: a group of selectors containing an invalid selector is invalid.
input[type="text"] { /// So we need separate placeholder rules for each browser. Otherwise the whole group would be ignored by all browsers.
-webkit-appearance: none; placeholder {
@include box-shadow(inset 0 1px 4px rgba(0,0,0,0.2)); color: $white;
@include box-sizing(); opacity: .4;
@include rounded-corners(4px); }
@include transition;
background-color: #be3d00;
border: none;
color: #fff;
display: block;
float: left;
font-size: 16px;
height: 2.1em;
margin-bottom: 0;
padding: 0.5em 2.5em 0.5em 0.5em;
width: 100%;
}
// User agents are required to ignore a rule with an unknown selector. i.e: a group of selectors containing an invalid selector is invalid.
// So we need separate placeholder rules for each browser. Otherwise the whole group would be ignored by all browsers.
::-webkit-input-placeholder {
color: white;
opacity: 0.4;
}
::-webkit-input-placeholder {
color: white;
opacity: 0.4;
}
::-moz-placeholder { input:placeholder {
color: white; color: $white;
opacity: 0.4; opacity: .4;
} }
:-ms-input-placeholder { ::placeholder {
color: white; color: $white;
opacity: 0.4; opacity: .4;
} }
input:-moz-placeholder { [type="search"]:focus {
color: white; background-color: darken($brand-color, 14%);
opacity: 0.4; }
}
::placeholder { [type=submit] {
color: white; padding: 3px 2px;
opacity: 0.4; line-height: 0;
} float: left;
margin-left: -40px;
display: block;
background: none;
overflow: visible;
&:hover { background: none; }
input[type="search"]:focus { background-color: #a63603; } img {
height: 28px;
button[type=submit] { width: 28px;
padding: 3px 2px;
line-height: 0;
float: left;
margin-left: -40px;
display: block;
background: none;
overflow: visible;
&:hover { background: none; }
img {
height: 28px;
width: 28px;
}
} }
}
} }
header.banner .search-toggle { .banner .search-toggle {
@include background-size(20px 20px); background-size: 20px 20px;
background-image: url('#{$asset-path}search_icon_white_64.png'); background-image: url('#{$asset-path}search.svg');
background-image: url('#{$asset-path}search.svg'); background-position: center center;
background-position: center center; background-repeat: no-repeat;
background-repeat: no-repeat; display: block;
display: block; height: 48px;
height: 48px; outline: none;
outline: none; overflow: hidden;
overflow: hidden; position: absolute;
position: absolute; right: 58px;
right: 58px; text-indent: -999em;
text-indent: -999em; top: 0;
top: 0; width: 24px;
width: 24px;
} }
.search-toggle:link, .search-toggle:link,
.search-toggle:active { .search-toggle:active {
outline: none; outline: none;
} }
#box-search, #box-search,
.header-search { .header-search {
background: #f0f0f0; background: $light-grey;
border: 0; border: 0;
display: none; display: none;
float: left; float: left;
margin-bottom: 0; margin-bottom: 0;
position: relative; position: relative;
margin: 0 0 -1px 0; margin: 0 0 -1px;
padding: 0; padding: 0;
width: 100%; width: 100%;
z-index: 3; z-index: 3;
} }
#box-search.active, #box-search.active,
...@@ -117,28 +105,25 @@ header.banner .search-toggle { ...@@ -117,28 +105,25 @@ header.banner .search-toggle {
#box-search div, #box-search div,
.header-search div { .header-search div {
@include box-shadow( inset 0 -4px 4px -4px rgba(0, 0, 0, .3), box-shadow: inset 0 -4px 4px -4px rgba(0, 0, 0, .3), inset 0 5px 5px -5px rgba(0, 0, 0, .3);
inset 0 5px 5px -5px rgba(0, 0, 0, 0.3)); background: $nav-bg;
background: $nav-bg; margin: 10px;
margin: 10px; position: relative;
position: relative; z-index: 1;
z-index: 1;
} }
#box-search form input[type="search"], #box-search form [type="search"],
.header-search form input[type="search"] { .header-search form [type="search"] {
@include font-size (16); @include font-size (16);
@include rounded-corners(); border-radius: 4px;
@include box-shadow(0 2px 2px rgba(0, 0, 0, 0.3) inset, box-shadow: 0 2px 2px rgba(0, 0, 0, .3) inset, 0 -1px 3px rgba(0, 0, 0, .2) inset, 0 2px 0 rgba(255, 255, 255, .4);
0 -1px 3px rgba(0, 0, 0, 0.2) inset, box-sizing: border-box;
0 2px 0 rgba(255, 255, 255, 0.4)); background: $white;
@include box-sizing(); border: 0;
background: #fff; color: $base-color;
border: 0; font-size: 16px;
color: #333; height: auto;
font-size: 16px; margin: 0;
height: auto;
margin: 0;
float: left; float: left;
padding: 9px 10px; padding: 9px 10px;
width: 100%; width: 100%;
...@@ -146,30 +131,32 @@ header.banner .search-toggle { ...@@ -146,30 +131,32 @@ header.banner .search-toggle {
.yes-js .header-inner #box-search, .yes-js .header-inner #box-search,
.yes-js .header-inner .header-search { .yes-js .header-inner .header-search {
display: none; display: none;
form { form {
@include box-sizing(); box-sizing: border-box;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
overflow: hidden; overflow: hidden;
padding: 10px; padding: 10px;
top: 0; top: 0;
z-index: 999; z-index: 999;
position: relative; position: relative;
width: 100%; width: 100%;
} }
} }
// scss-lint:enable IdSelector
@media only screen and (max-width : 768px) { @media only screen and (max-width : 768px) {
header.banner { .banner {
.search-toggle { .search-toggle {
right: 48px; right: 48px;
} }
} }
html.no-svg, .opera-mini { .no-svg,
.opera-mini {
.search-toggle { .search-toggle {
background-image: url("#{$asset-path}search-white.png"); background-image: url("#{$asset-path}search-white.png");
} }
...@@ -179,282 +166,291 @@ header.banner .search-toggle { ...@@ -179,282 +166,291 @@ header.banner .search-toggle {
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
header.banner .search-toggle { .banner .search-toggle {
display: none; display: none;
} }
} // @media only screen and (min-width : 768px) } // @media only screen and (min-width : 768px)
@media only screen and (min-width : 960px) { @media only screen and (min-width : 960px) {
// scss-lint:disable IdSelector
#box-search, #box-search,
.header-search { .header-search {
background: none; // scss-lint:enable IdSelector
overflow:hidden; background: none;
padding: 7px 0 7px 14px; overflow: hidden;
border-right: 0 none; padding: 7px 0 7px 14px;
float: right; border-right: 0 none;
margin-bottom: 0; float: right;
padding-bottom: 5px; margin-bottom: 0;
padding-right: 0; padding-bottom: 5px;
padding-top: 7px; padding-right: 0;
max-width: 220px; padding-top: 7px;
max-width: 220px;
form input[type="text"],
form input[type="search"] { form [type="text"],
@include box-shadow(0 2px 4px rgba(0, 0, 0, 0.4) inset); form [type="search"] {
@include box-sizing(content-box); box-shadow: 0 2px 4px rgba(0, 0, 0, .4) inset;
background: url("#{$asset-path}icons/icon-search.png") no-repeat scroll 5px center, none repeat scroll 0 0 #BE3D00; box-sizing: content-box;
border: 6px solid #DE6532; background: url("#{$asset-path}icons/icon-search.png") no-repeat scroll 5px center, none repeat scroll 0 0 darken($brand-color, 10%);
border: 6px solid darken($brand-color, 12%);
border-width: 0 0 1px; border-width: 0 0 1px;
color: #fff; color: $white;
font-size: 0.813em; font-size: .813em;
height: 24px; height: 24px;
margin-bottom: 0; margin-bottom: 0;
padding: 4px 4px 4px 30px; padding: 4px 4px 4px 30px;
transition: all 0.5s ease 0s; transition: all .5s ease 0s;
width: 86px; width: 86px;
} }
} }
} // @media only screen and (min-width : 769px) } // @media only screen and (min-width : 769px)
@media only screen and (max-width : 960px) { @media only screen and (max-width : 960px) {
header.banner nav.nav-primary { .banner .nav-primary .header-search {
padding: 0;
position: relative;
top: 0;
width: 100%;
[type="search"] {
border-radius: 0;
background: $light-grey;
color: $base-color;
}
.header-search { [type="submit"] {
padding: 0; width: 32px;
position: relative; height: 38px;
top: 0; background: url('#{$asset-path}search-black.svg') no-repeat scroll center center $transparent;
width: 100%; background-size: 28px 28px;
input[type="search"] { img {
border-radius: 0; max-width: none;
background: $light_grey; display: none;
color: #333;
} }
button[type="submit"] { }
width: 32px;
height: 38px; &.open {
background: url('#{$asset-path}search-black.svg') no-repeat scroll center center transparent;
background-size: 28px 28px;
img {
max-width: none;
display: none;
}
}
}
.header-search.open {
display: block; display: block;
} }
}
.banner .search-toggle {
background-image: url("#{$asset-path}search-white.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 25px auto;
cursor: pointer;
right: 0;
display: block;
height: 48px;
position: absolute;
text-indent: -99999px;
width: 48px;
}
} .no-svg,
.opera-mini {
.banner .search-toggle {
background-image: url("#{$asset-path}img/search-white.png");
}
}
header.banner { .opera-mini {
.search-toggle { x:-o-prefocus,
background-image: url("#{$asset-path}search-white.svg"); .banner .search-toggle {
background-position: center center;
background-repeat: no-repeat;
background-size: 25px auto; background-size: 25px auto;
cursor: pointer;
right: 0;
display: block;
height: 48px;
position: absolute;
text-indent: -99999px;
width: 48px;
} }
} }
html.no-svg, .opera-mini {
header.banner .search-toggle { background-image: url("#{$asset-path}img/search-white.png"); }
}
.opera-mini {
x:-o-prefocus, header.banner .search-toggle {
-o-background-size: 25px auto;
background-size: 25px auto;
}
}
} }
@media only screen and (min-width: 984px) { @media only screen and (min-width: 984px) {
// scss-lint:disable IdSelector
#box-search, #box-search,
.header-search { .header-search {
// scss-lint:enable IdSelector
display: block; display: block;
margin-right: 0; margin-right: 0;
input[type="search"], form [type="text"]:focus {
input[type="text"] {
}
form input[type="text"]:focus {
width: 160px; width: 160px;
} }
} }
} // @media only screen and (min-width: 984px) }
@media only screen and (max-width : 768px) { @media only screen and (max-width : 768px) {
.banner .search-toggle {
header.banner .search-toggle {
right: 48px; right: 48px;
} }
}
} // @media only screen and (min-width : 768px) /// search results
.ubuntu-search,
.search-results,
.search-no-results {
.nav-secondary {
display: none;
}
section > h1,
section article h1 {
padding-bottom: 10px;
font-size: 1.438em;
margin-bottom: 0;
}
section > h1 {
border-bottom: 1px dotted $mid-grey;
}
.main-search {
padding: 20px 0;
margin: 0 0 20px;
background-color: transparent;
[type="search"] {
float: left;
width: 100%;
font-size: 2em;
border: 1px solid $warm-grey;
box-sizing: border-box;
padding: .2em 65px .2em .2em;
}
[type=submit] {
padding: 4px;
line-height: 0;
float: left;
margin-left: -53px;
display: block;
background: none;
overflow: visible;
width: auto;
margin-top: -4px;
// scss-lint:disable NestingDepth
img {
height: 45px;
width: 45px;
}
// scss-lint:enable NestingDepth
}
[type=submit]:hover {
background: none;
}
}
.search-result h1 .title-main {
margin-right: 20px;
}
.search-result h1 .result-url {
color: $warm-grey;
overflow: hidden;
text-overflow: ellipsis;
display: block;
vertical-align: bottom;
padding-bottom: 2px;
a {
color: $warm-grey;
}
}
.search-result p {
margin-bottom: 0;
}
.num-results {
display: inline-block;
margin-left: 20px;
}
.bottom-results-total {
text-align: center;
width: 100%;
overflow: visible;
padding-top: 20px;
margin: 0;
}
.bottom-nav {
overflow: hidden;
margin-top: -26px;
ul {
margin-bottom: 0;
margin-left: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
margin-left: 15px;
}
li:first-child {
margin-left: 0;
}
}
.nav-back {
float: left;
// search results li:before {
body.ubuntu-search, content: '\2039'; /* left chevron &lsaquo; */
body.search-results, color: $brand-color;
body.search-no-results { margin-right: 5px;
.nav-secondary { }
display: none;
} .item-extreme:before {
section > h1, content: '\2039\2039'; /* double left chevron &lsaquo; */
section article h1 { }
padding-bottom: 10px; }
font-size: 1.438em;
margin-bottom: 0; .nav-forward {
} float: right;
section > h1 {
border-bottom: 1px dotted #dfdcd9; li:after {
} content: '\203A'; /* right chevron&nbsp;&rsaquo; */
.main-search { color: $brand-color;
padding: 20px 0; margin-left: 5px;
margin: 0 0 20px 0; }
background-color: transparent;
.item-extreme:after {
input[type="search"] { content: '\203A\203A'; /* double right chevron&nbsp;&rsaquo; */
float: left; }
width: 100%; }
font-size: 2em;
border: 1px solid #999; .error-notification {
-moz-box-sizing: border-box; background-color: $white;
box-sizing: border-box; color: $base-color;
padding: 0.2em 65px 0.2em 0.2em; padding: 20px;
} box-sizing: border-box;
button[type=submit] { width: 100%;
padding: 4px; margin-top: 20px;
line-height: 0; display: block;
float: left; }
margin-left: -53px;
display: block; .result-line {
background: none; color: $warm-grey;
overflow: visible; }
width: auto;
margin-top: -4px; .results-top {
border-bottom: 1px dotted $mid-grey;
&:hover { padding-bottom: .5em;
background: none; }
}
.search-container {
img { padding-bottom: 0;
height: 45px; }
width: 45px;
}
}
}
.search-result h1 .title-main {
margin-right: 20px;
}
.search-result h1 .result-url {
color: #999;
overflow: hidden;
text-overflow: ellipsis;
display: block;
vertical-align: bottom;
padding-bottom: 2px;
}
.search-result h1 .result-url a {
color: #999;
}
.search-result p {
margin-bottom: 0;
}
.num-results {
display: inline-block;
margin-left: 20px;
}
.bottom-results-total {
text-align: center;
width: 100%;
overflow: visible;
padding-top: 20px;
margin: 0;
}
.bottom-nav {
overflow: hidden;
margin-top: -26px;
}
.bottom-nav ul {
margin-bottom: 0;
margin-left: 0;
padding: 0;
overflow: hidden;
}
.bottom-nav li {
float: left;
margin-left: 15px;
}
.bottom-nav li:first-child {
margin-left: 0;
}
.nav-back {
float: left;
}
.nav-back li:before {
content: "\2039"; /* left chevron &lsaquo; */
color: $ubuntu_orange;
margin-right: 5px;
}
.nav-back li.item-extreme:before {
content: "\2039\2039"; /* double left chevron &lsaquo; */
}
.nav-forward {
float: right;
}
.nav-forward li:after {
content: "\203A"; /* right chevron&nbsp;&rsaquo; */
color: $ubuntu_orange;
margin-left: 5px;
}
.nav-forward li.item-extreme:after {
content: "\203A\203A"; /* double right chevron&nbsp;&rsaquo; */
}
.error-notification {
background-color: #fdffdc;
color: #333;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin-top: 20px;
display: block;
}
.result-line {
color: #ada69e;
}
.results-top {
border-bottom: 1px dotted #dfdcd9;
padding-bottom: 0.5em;
}
.search-container {
padding-bottom: 0;
}
} }
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
.ubuntu-search { .ubuntu-search .main-search [type=submit] {
.main-search { margin-left: -60px;
button[type=submit] { margin-top: 0;
margin-left: -60px; }
margin-top: 0;
}
}
}
} /* end @media only screen and (min-width : 768px) */ } /* end @media only screen and (min-width : 768px) */
sass/core/patterns/_slider.scss
View file @ 2fcda1ed
@charset 'UTF-8'; @charset 'UTF-8';
.slider { .slider {
@include rounded-corners(4px); border-radius: 4px;
background: $light-grey; background: $light-grey;
padding-top: $gutter-width * 2; padding-top: $gutter-width * 2;
...@@ -9,18 +9,12 @@ ...@@ -9,18 +9,12 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
height: 450px; height: 450px;
-moz-transition: left 1s;
-webkit-transition: left 1s;
-o-transition: left 1s;
transition: left 1s; transition: left 1s;
} }
.slide-container { .slide-container {
position: absolute; position: absolute;
width: (700 * 4)px; width: (700 * 4)px;
-moz-transition: left 1s;
-webkit-transition: left 1s;
-o-transition: left 1s;
transition: left 1s; transition: left 1s;
left: 0; left: 0;
} }
...@@ -42,10 +36,10 @@ ...@@ -42,10 +36,10 @@
margin-right: .75em; margin-right: .75em;
text-indent: -9999em; text-indent: -9999em;
width: 7px; width: 7px;
}
&.active { .active {
background-position: 0 0; background-position: 0 0;
}
} }
a { a {
...@@ -80,7 +74,7 @@ ...@@ -80,7 +74,7 @@
.arrow-prev:hover, .arrow-prev:hover,
.arrow-next:hover { .arrow-next:hover {
text-decoration: none; text-decoration: none;
color: $cool-grey; color: $base-color;
} }
.arrow-prev:active, .arrow-prev:active,
......
sass/core/patterns/_structure.scss
View file @ 2fcda1ed
@charset 'UTF-8'; @charset 'UTF-8';
@import '../_core-mixins'; @import '../core-mixins';
@import '../_core-constants.scss'; @import '../core-constants';
.wrapper, .wrapper,
header.banner .nav-primary, .banner .nav-primary,
nav div.footer-a div, nav .footer-a div,
.inline-lists ul, .inline-lists ul,
.legal { .legal {
@include box-sizing(); box-sizing: border-box;
width: auto; width: auto;
} }
.inner-wrapper { .inner-wrapper {
@include box-sizing(); box-sizing: border-box;
background: #fff; background: $white;
clear: both; clear: both;
display: block; display: block;
float: left; float: left;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding-bottom: 20px; padding-bottom: 20px;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
.med-six-col { .med-six-col {
.three-col { .three-col {
width: 48%; width: 48%;
} }
.three-col:nth-of-type(2n) { .three-col:nth-of-type(2n) {
margin-right: 0; margin-right: 0;
} }
} }
} // end @media only screen and (max-width : 768px) } // end @media only screen and (max-width : 768px)
...@@ -47,38 +47,38 @@ nav div.footer-a div, ...@@ -47,38 +47,38 @@ nav div.footer-a div,
@media only screen and (min-width: 984px) { @media only screen and (min-width: 984px) {
.wrapper { .wrapper {
@include box-sizing; box-sizing: border-box;
background: #fff; background: $white;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
text-align: left; text-align: left;
width: 984px; width: 984px;
} }
.inner-wrapper { .inner-wrapper {
@include box-shadow(0 0 3px #c9c9c9); box-shadow: 0 0 3px $mid-grey;
margin: 10px 0 30px; margin: 10px 0 30px;
} }
.three-col, .three-col,
.med-six-col .three-col { .med-six-col .three-col {
width: 23.30%; width: 23.30%;
} }
.three-col.last-col:nth-of-type(2n) { .three-col.last-col:nth-of-type(2n) {
margin-right: 0; margin-right: 0;
} }
.med-six-col { .med-six-col {
.three-col:nth-of-type(2n) { .three-col:nth-of-type(2n) {
margin-right: 20px; margin-right: 20px;
} }
.three-col.last-col { .three-col.last-col {
margin-right: 0; margin-right: 0;
} }
} }
} // end @media only screen and (min-width: 984px) } // end @media only screen and (min-width: 984px)
sass/core/patterns/_tabbed-content.scss
View file @ 2fcda1ed
@charset 'UTF-8'; @charset 'UTF-8';
html.js .tabbed-content .accordion-button { .js .tabbed-content .accordion-button {
@include box-sizing; box-sizing: border-box;
height: auto; height: auto;
padding-bottom: .6em; padding-bottom: .6em;
padding-right: 20px; padding-right: 20px;
} }
html.yui3-js-enabled { .yui3-js-enabled {
.tabbed-menu { .tabbed-menu {
display: none; display: none;
...@@ -22,61 +22,57 @@ html.yui3-js-enabled { ...@@ -22,61 +22,57 @@ html.yui3-js-enabled {
} }
.tabbed-content { .tabbed-content {
@include rounded-corners(4px); border-radius: 4px;
padding: 8px 8px 0; padding: 8px 8px 0;
background: $light-grey; background: $light-grey;
margin-bottom: 8px; margin-bottom: 8px;
&.hide { &.hide {
display: block; display: block;
opacity: 1 !important; opacity: 1;
} }
.title { .title {
display: none; display: none;
} }
div { div {
display: none; display: none;
} }
.accordion-button { .accordion-button {
@include box-sizing; box-sizing: border-box;
background: url("#{$asset-path}icons/icon-arrow-down.svg") no-repeat scroll right 3px $light-grey; background: url("#{$asset-path}icons/icon-arrow-down.svg") no-repeat scroll right 3px $light-grey;
color: $cool-grey; color: $base-color;
display: block; display: block;
font-size: 16px; font-size: 16px;
padding-bottom: .6em; padding-bottom: .6em;
padding-right: 20px; padding-right: 20px;
width: 100%; width: 100%;
} }
&.open { &.open .accordion-button {
.accordion-button { background-image: url("#{$asset-path}icons/icon-arrow-up.svg");
background-image: url("#{$asset-path}icons/icon-arrow-up.svg"); margin-bottom: 10px;
margin-bottom: 10px; }
}
div { &.open div {
display: block; display: block;
} }
}
} }
html.yui3-js-enabled.opera-mini .tabbed-content, .yui3-js-enabled.opera-mini .tabbed-content,
html.yui3-js-enabled.no-svg .tabbed-content { .yui3-js-enabled.no-svg .tabbed-content {
.accordion-button { .accordion-button {
background-image: url("#{$asset-path}icons/icon-arrow-right.png"); background-image: url("#{$asset-path}icons/icon-arrow-right.png");
} }
&.open { &.open .accordion-button {
.accordion-button { background-image: url("#{$asset-path}icons/icon-arrow-up.png");
background-image: url("#{$asset-path}icons/icon-arrow-up.png");
}
} }
} }
html.yui3-js-enabled.opera-mini.tabbed-content { .yui3-js-enabled.opera-mini.tabbed-content {
.accordion-button { .accordion-button {
background-image: none; background-image: none;
margin-bottom: 10px; margin-bottom: 10px;
...@@ -93,25 +89,25 @@ html.yui3-js-enabled { ...@@ -93,25 +89,25 @@ html.yui3-js-enabled {
} }
.tabbed-content { .tabbed-content {
margin-bottom: 20px; margin-bottom: 20px;
padding: 40px; padding: 40px;
&.hide { &.hide {
display: none; display: none;
opacity: 0 !important; opacity: 0;
} }
.title { .title {
display: block; display: block;
} }
div { div {
display: block; display: block;
} }
.vertical-divider div { .vertical-divider div {
display: table-cell; display: table-cell;
} }
.accordion-button { .accordion-button {
display: none; display: none;
...@@ -128,16 +124,16 @@ html.yui3-js-enabled { ...@@ -128,16 +124,16 @@ html.yui3-js-enabled {
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
.tabbed-menu { .tabbed-menu {
@include box-shadow(0 -1px 10px #cfcfcf inset); box-shadow: 0 -1px 10px $mid-grey inset;
@include box-sizing; box-sizing: border-box;
@include rounded-corners(4px 4px 0 0); border-radius: 4px 4px 0 0;
background: none repeat scroll 0 0 $light-grey; background: none repeat scroll 0 0 $light-grey;
padding-bottom: $gutter-width; padding-bottom: $gutter-width;
padding-top: $gutter-width; padding-top: $gutter-width;
position: relative; position: relative;
ul { ul {
@include box-sizing; box-sizing: border-box;
display: table; display: table;
margin-bottom: 0; margin-bottom: 0;
padding: 0; padding: 0;
...@@ -152,7 +148,7 @@ html.yui3-js-enabled { ...@@ -152,7 +148,7 @@ html.yui3-js-enabled {
} }
a { a {
color: #666; color: $base-color;
display: block; display: block;
outline: none; outline: none;
...@@ -186,14 +182,14 @@ html.yui3-js-enabled { ...@@ -186,14 +182,14 @@ html.yui3-js-enabled {
padding-bottom: 40px; padding-bottom: 40px;
} }
html.yui3-js-enabled .tabbed-content.hide { .yui3-js-enabled .tabbed-content.hide {
display: none; display: none;
opacity: 0; opacity: 0;
} }
.tabbed-content-bg { .tabbed-content-bg {
@include box-sizing; box-sizing: border-box;
background: #fff; background: $white;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
...@@ -202,9 +198,9 @@ html.yui3-js-enabled { ...@@ -202,9 +198,9 @@ html.yui3-js-enabled {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
html.yui3-js-enabled .arrow { .yui3-js-enabled .arrow {
visibility: visible; visibility: visible;
} }
} }
sass/core/patterns/_tooltips.scss
View file @ 2fcda1ed
...@@ -5,13 +5,11 @@ ...@@ -5,13 +5,11 @@
} }
.yui3-tooltip-content { .yui3-tooltip-content {
@include box-shadow(0 2px 8px hsla(0, 0%, 0%, .20)); box-shadow: 0 2px 8px hsla(0, 0%, 0%, .20);
background: url("#{$asset-path}patterns/grey-textured-background.jpg") repeat scroll 0 0 transparent; background: url("#{$asset-path}patterns/grey-textured-background.jpg");
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #e3e3e3; border: 1px solid $warm-grey;
color: $cool-grey; color: $base-color;
margin-top: -30px; margin-top: -30px;
max-width: 520px; max-width: 520px;
position: relative; position: relative;
...@@ -32,8 +30,8 @@ ...@@ -32,8 +30,8 @@
} }
img { img {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
} }
q { q {
...@@ -68,19 +66,19 @@ ...@@ -68,19 +66,19 @@
left: 50%; left: 50%;
margin: 0 0 0 -10px; margin: 0 0 0 -10px;
border-width: 0 10px 10px; border-width: 0 10px 10px;
border-color: $box-solid-grey transparent; border-color: $mid-grey $transparent;
} }
.yui3-tooltip .yui3-tooltip-align-bottom .yui3-widget-ft div { .yui3-tooltip .yui3-tooltip-align-bottom .yui3-widget-ft div {
top: 0; top: 0;
border-color: $box-solid-grey transparent; border-color: $mid-grey $transparent;
} }
.tooltip-label { .tooltip-label {
@include box-shadow(3px 3px 6px rgba(0, 0, 0, .3)); box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
@include rounded-corners(4px); border-radius: 4px;
background: #fff; background: $white;
border: 1px solid #dfdcd9; border: 1px solid $mid-grey;
display: none; display: none;
font-size: 13px; font-size: 13px;
line-height: 1; line-height: 1;
......
sass/core/patterns/_typography.scss
View file @ 2fcda1ed
...@@ -2,13 +2,13 @@ ...@@ -2,13 +2,13 @@
.caps-centered, .caps-centered,
.muted-heading { .muted-heading {
font-size: .875em; font-size: .875em;
margin-bottom: 20px; margin-bottom: 20px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
} }
p.intro { .intro {
@include font-size (16); @include font-size (16);
line-height: 1.4; line-height: 1.4;
} }
...@@ -29,7 +29,7 @@ p.intro { ...@@ -29,7 +29,7 @@ p.intro {
@media only screen and (min-width : 768px) { @media only screen and (min-width : 768px) {
p.intro { .intro {
font-size: 1.13333em; font-size: 1.13333em;
} }
...@@ -69,7 +69,7 @@ p.intro { ...@@ -69,7 +69,7 @@ p.intro {
margin-bottom: .75em; margin-bottom: .75em;
} }
p.intro { .intro {
font-size: 1.25em; font-size: 1.25em;
} }
......
sass/core/patterns/_vertical-divider.scss
View file @ 2fcda1ed
...@@ -41,25 +41,19 @@ ...@@ -41,25 +41,19 @@
.row.vertical-divider { .row.vertical-divider {
padding-bottom: 0; padding-bottom: 0;
} }
// scss-lint:disable ImportantRule
.equal-height div, .equal-height div,
.equal-height li { .equal-height li {
height: auto !important; height: auto !important;
} }
// scss-lint:enable ImportantRule
} }
@media only screen and (max-width : 768px) {
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) { @media only screen and (min-width: 984px) {
.row.vertical-divider { .row.vertical-divider {
padding-bottom: 60px; padding-bottom: 60px;
} }
.vertical-divider { .vertical-divider {
> div, > div,
...@@ -72,7 +66,7 @@ ...@@ -72,7 +66,7 @@
padding-right: 20px; padding-right: 20px;
vertical-align: top; vertical-align: top;
} }
// scss-lint:disable QualifyingElement
> div:last-child, > div:last-child,
> li:last-child, > li:last-child,
> div.last-col, > div.last-col,
...@@ -91,5 +85,6 @@ ...@@ -91,5 +85,6 @@
> li:first-of-type { > li:first-of-type {
padding-left: 0; padding-left: 0;
} }
// scss-lint:enable QualifyingElement
} }
} // end @media only screen and (min-width: 984px) } // end @media only screen and (min-width: 984px)
sass/core/patterns/patterns.scss
View file @ 2fcda1ed
@charset "UTF-8"; @charset 'UTF-8';
/** /**
* Ubuntu Patterns Stylesheet * Ubuntu Patterns Stylesheet
* *
* The CSS file required by Ubuntu patterns page * The CSS file required by Ubuntu patterns page
* *
* @project Ubuntu Patterns * @project Ubuntu Patterns
* @author Web Team at Canonical Ltd * @author Web Team at Canonical Ltd
* @copyright 2014 Canonical Ltd * @copyright 2014 Canonical Ltd
* *
*/ */
@import '_structure'; @import 'structure';
@import '_helpers'; @import 'helpers';
@import '_typography'; @import 'typography';
@import '_header'; @import 'header';
@import '_search'; @import 'search';
@import '_footer'; @import 'footer';
@import '_contextual-footer'; @import 'contextual-footer';
@import '_buttons'; @import 'buttons';
@import '_forms'; @import 'forms';
@import '_rows'; @import 'rows';
@import '_image-centered'; @import 'image-centered';
@import '_boxes'; @import 'boxes';
@import '_arrows'; @import 'arrows';
@import '_lists'; @import 'lists';
@import '_inline-logos'; @import 'inline-logos';
@import '_blockquotes'; @import 'blockquotes';
@import '_tabbed-content'; @import 'tabbed-content';
@import '_vertical-divider'; @import 'vertical-divider';
@import '_slider'; @import 'slider';
@import '_tooltips'; @import 'tooltips';
sass/core/ubuntu-styles.scss
View file @ 2fcda1ed
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
// import required files // import required files
@import '_core-constants'; @import 'core-constants';
@import '_core-mixins'; @import 'core-mixins';
@import '_core-grid'; @import 'core-grid';
@import '_core-grid-tablet'; @import 'core-grid-tablet';
@import '_core-grid-desktop'; @import 'core-grid-desktop';
@import '_core'; @import 'core';
@import '_core-templates'; @import 'core-templates';
@import 'patterns/patterns'; @import 'patterns/patterns';
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment