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
*
......@@ -5,274 +8,224 @@
*
* This file containes the classes required by ubuntu.com to interact.
*
* @project Ubuntu Core Front-End Framework
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
*/
/**
* Table of contents
*
* Core
* - setEqualHeight
* - hashBang
* - getPullQuotes
* - setupTooltips
* @project Ubuntu Core Front-End Framework
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
*/
if(!core){ var core = {}; }
YUI().use('node', 'anim','event-resize', function(Y) {
core.setEqualHeight = function($className) {
var maxHeight = 0;
var heightArray = Array();
var collection = Y.all('.'+$className);
collection.each(function(node) {
node.all(' > div, > ul li').each(function(node) {
if(node.get('clientHeight') > maxHeight){
maxHeight = node.get('clientHeight');
}
});
node.all('> div, > ul li').setStyle('height', maxHeight);
maxHeight = 0;
});
};
core.hashBang = function() {
Y.all('#main-content a').each(function (node) {
var hrefValue = node.get('href');
if( hrefValue.indexOf("#") != -1 ) {
var cleanTarget = core.qualifyURL(hrefValue.substr(0,hrefValue.indexOf('#')));
var hashValue = hrefValue.substr(hrefValue.indexOf('#')+1);
var cleanURL = window.location.href;
node.setAttribute('data-hash',hashValue);
node.set('href',hrefValue.substr(0,hrefValue.indexOf('#')));
if(cleanURL == cleanTarget){
node.on("click", function (e) {
e.preventDefault();
window.name = null;
if(!this.hasClass('slideless')) {
core.slideToAnchor(this.getAttribute('data-hash'));
}
});
}else{
node.on("click", function (e) {
window.name = '¬'+node.getAttribute('data-hash');
});
}
}else{
node.on("click", function (e) {
window.name = null;
});
}
});
core.checkForSession();
};
core.qualifyURL = function($url) {
var img = document.createElement('img');
img.src = $url;
$url = img.src;
img = null;
return $url;
};
core.checkForSession = function() {
var session = window.name;
if(session){
if(session.charAt(0) == '¬'){
core.jumpToAnchor(session.substring(1));
}
}
};
core.slideToAnchor = function($name) {
var target;
var destination = 0;
if($name !== ''){
destination = Y.one('#'+$name).getXY()[1] - 20;
}
var webkitAnim = new Y.Anim({
node: Y.one('html'),
to: { scroll: [0, destination]},
easing: 'easeOut',
duration: 1,
});
var ffAnim = new Y.Anim({
node: Y.one('body'),
to: { scroll: [0, destination]},
easing: 'easeOut',
duration: 1,
});
webkitAnim.run(1000);
ffAnim.run(1000);
};
core.jumpToAnchor = function($name) {
if(document.getElementById($name)){
document.getElementById($name).scrollIntoView();
}else{
window.name = null;
}
};
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>');
node.get('parentNode').get('parentNode').get('parentNode').append(item);
});
};
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');
node.on('mouseover', function(e){
this.set('title','');
this.get('parentNode').one('.tooltip-label').setStyle('display', 'inline');
});
node.on('mouseout', function(e){
this.set('title',title);
this.get('parentNode').one('.tooltip-label').setStyle('display', 'none');
});
});
}
};
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');
var s = p.get('href').split('#')[1];
var a = Y.one('.arrow');
var w = (p.get('clientWidth') / 2) - 7;
var x = (p.get('parentNode').getXY()[0] - p.get('parentNode').get('parentNode').getXY()[0]) + w;
Y.all('.tabbed-content').each(function() {
if(this.get('id') != s){
this.setStyle('opacity', '0');
}
}
);
a.setStyle('left',x+'px').setStyle('display', 'inline');
Y.all('.tabbed-menu a').on('click',function(e) {
e.preventDefault();
Y.all('.tabbed-menu a').removeClass('active');
e.currentTarget.addClass('active');
Y.all('.tabbed-content').addClass('hide').setStyle('opacity','0');
s = e.currentTarget.getAttribute('data-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;
new Y.Anim({ node: a, to: { left: x+'px' } }).run();
});
}
}
core.tabbedContent = function() {
Y.all('.tabbed-content .accordion-button').on('click', function(e){
e.preventDefault();
e.target.get('parentNode').toggleClass('open');
});
};
core.svgFallback = function() {
if(Modernizr){
if (!Modernizr.svg || !Modernizr.backgroundsize) {
Y.all("img[src$='.svg']").each(function(node) {
node.setAttribute("src", node.getAttribute('src').toString().match(/.*\/(.+?)\./)[0]+'png');
});
}
}
};
core.resourceHubBoxes = function() {
Y.all(".resource").on('click',function(e) {
e.preventDefault();
e.stopPropagation();
if(e.currentTarget.one('a') !== null) {
window.location = e.currentTarget.one('a').get("href");
}
});
};
core.mobileNav = function() {
if(Y.one('.header-search')) {
Y.one('.nav-primary').insert('<a class="search-toggle"></a><a id="menu" class="nav-toggle">menu</a>','before');
} else {
Y.one('.nav-primary').insert('</a><a id="menu" class="nav-toggle">menu</a>','before');
}
Y.all('.nav-toggle').on('click', function(e) {
e.preventDefault();
if(Y.one('.header-search')) {
Y.one('.header-search').removeClass('active');
}
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) {
e.preventDefault();
Y.all('.nav-toggle').removeClass('active');
Y.all('header nav ul').removeClass('active');
Y.all('.nav-primary').removeClass('active');
Y.one('.header-search').toggleClass('active');
Y.one('.header-search .form-text').focus();
});
}
if(Y.one('.breadcrumb li a')) {
Y.one('.breadcrumb > li a').insert('<span class="after"></span>');
Y.one('.breadcrumb li a .after').on('click', function(e) {
e.preventDefault();
Y.one('.nav-secondary').toggleClass('open');
core.setLocalStorage('onboard');
});
}
};
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
if (!core) { var core = {}; }
YUI().use('node', 'anim', 'event-resize', function (Y) {
core.setEqualHeight = function ($className) {
var maxHeight = 0,
collection = Y.all('.' + $className);
collection.each(function (node) {
node.all(' > div, > ul li').each(function (node) {
if (node.get('clientHeight') > maxHeight) {
maxHeight = node.get('clientHeight');
}
});
node.all('> div, > ul li').setStyle('height', maxHeight);
maxHeight = 0;
});
};
core.hashSlide = function () {
Y.all('#main-content a').each(function (node) {
if (node.get('hash') !== '') {
var targetURL = node.get('origin') + node.get('pathname');
if (window.location.href === targetURL) {
node.on("click", function (e) {
e.preventDefault();
if (!this.hasClass('slideless')) {
core.slideToAnchor(node.get('hash'));
}
});
}
}
});
};
core.slideToAnchor = function ($name) {
if ($name !== '') {
var destination = Y.one($name).getXY()[1] - 20,
webkitAnim = new Y.Anim({
node: Y.one('html'),
to: { scroll: [0, destination]},
easing: 'easeOut',
duration: 1
}),
ffAnim = new Y.Anim({
node: Y.one('body'),
to: { scroll: [0, destination]},
easing: 'easeOut',
duration: 1
});
webkitAnim.run(1000);
ffAnim.run(1000);
}
};
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>');
node.get('parentNode').get('parentNode').get('parentNode').append(item);
});
};
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');
node.on('mouseover', function () {
this.set('title', '');
this.get('parentNode').one('.tooltip-label').setStyle('display', 'inline');
});
node.on('mouseout', function () {
this.set('title', title);
this.get('parentNode').one('.tooltip-label').setStyle('display', 'none');
});
});
}
};
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'),
s = p.get('href').split('#')[1],
a = Y.one('.arrow'),
w = (p.get('clientWidth') / 2) - 7,
x = (p.get('parentNode').getXY()[0] - p.get('parentNode').get('parentNode').getXY()[0]) + w;
Y.all('.tabbed-content').each(function () {
if (this.get('id') !== s) {
this.setStyle('opacity', '0');
}
});
a.setStyle('left', x + 'px').setStyle('display', 'inline');
Y.all('.tabbed-menu a').on('click', function (e) {
e.preventDefault();
Y.all('.tabbed-menu a').removeClass('active');
e.currentTarget.addClass('active');
Y.all('.tabbed-content').addClass('hide').setStyle('opacity', '0');
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;
new Y.Anim({ node: a, to: { left: x + 'px' } }).run();
});
}
};
core.tabbedContent = function () {
Y.all('.tabbed-content .accordion-button').on('click', function (e) {
e.preventDefault();
e.target.get('parentNode').toggleClass('open');
});
};
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.resourceHubBoxes = function () {
Y.all(".resource").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
if (e.currentTarget.one('a') !== null) {
window.location = e.currentTarget.one('a').get("href");
}
});
};
core.mobileNav = function () {
if (Y.one('.header-search')) {
Y.one('.nav-primary').insert('<a class="search-toggle"></a><a id="menu" class="nav-toggle">menu</a>', 'before');
} else {
Y.one('.nav-primary').insert('</a><a id="menu" class="nav-toggle">menu</a>', 'before');
}
Y.all('.nav-toggle').on('click', function (e) {
e.preventDefault();
if (Y.one('.header-search')) {
Y.one('.header-search').removeClass('active');
}
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) {
e.preventDefault();
Y.all('.nav-toggle').removeClass('active');
Y.all('header nav ul').removeClass('active');
Y.all('.nav-primary').removeClass('active');
Y.one('.header-search').toggleClass('active');
Y.one('.header-search .form-text').focus();
});
}
if (Y.one('.breadcrumb li a')) {
Y.one('.breadcrumb > li a').insert('<span class="after"></span>');
Y.one('.breadcrumb li a .after').on('click', function (e) {
e.preventDefault();
Y.one('.nav-secondary').toggleClass('open');
core.setLocalStorage('onboard');
});
}
};
core.navOnboarding = function () {
var key = 'ubuntu',
nav_secondary = Y.one('.nav-secondary'),
ls;
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',
value = $value,
ubuntu = {};
ubuntu.navigation = value;
localStorage.setItem(key, JSON.stringify(ubuntu));
};
core.sectionTabs();
core.tabbedContent();
core.setEqualHeight('equal-height');
core.getPullQuotes();
core.setupTooltips();
core.svgFallback();
core.resourceHubBoxes();
core.mobileNav();
core.navOnboarding();
core.hashSlide();
});
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";
/**
* Ubuntu Patterns Stylesheet
*
* The CSS file required by Ubuntu patterns page
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @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)";
@charset 'UTF-8';
////
/// Ubuntu Patterns Stylesheet
/// The CSS file required by Ubuntu patterns page
/// @project Ubuntu Patterns
/// @author Web Team at Canonical Ltd
/// @copyright 2012 Canonical Ltd
/// @see http://design.ubuntu.com
////
/// 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: 984px) { $base: 14; }
\ No newline at end of file
// Base font size - small screen
@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) {
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)); }
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 {
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";
@media only screen and (min-width : 768px) {
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 { 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%; }
.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 {
width: 48.8938%;
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)); }
}
\ No newline at end of file
@charset 'UTF-8';
@media only screen and (min-width: 768px) {
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 {
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%;
}
.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 {
margin-right: 2.21238%;
width: 48.8938%;
}
.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 (-($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";
/**
* 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
@charset 'UTF-8';
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 {
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 {
@include box-sizing;
clear: none;
display: inline-block;
float: none;
margin-right: $gutter;
margin-bottom: 20px;
padding: 0;
position: relative;
width: 100%;
.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 {
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 {
.one-col,
.two-col,
.three-col,
.four-col,
.five-col,
.six-col,
.seven-col,
.eight-col,
.nine-col,
.ten-col,
.eleven-col { width: 100%; }
.one-col,
.two-col,
.three-col,
.four-col,
.five-col,
.six-col,
.seven-col,
.eight-col,
.nine-col,
.ten-col,
.eleven-col {
width: 100%;
}
}
.last-col, .last { margin-right: 0; }
.last-col,
.last {
margin-right: 0;
}
/**
* Clearing
*
* Hard and soft clearing classes
*
* @section clearing
*/
// Clearing
// Hard and soft clearing classes
// @section clearing
.clearfix:after, .container:after {
.clearfix:after,
.container:after {
clear: both;
content: "\0020";
content: '\0020';
display: block;
height: 0;
overflow:hidden;
overflow: hidden;
visibility: hidden;
}
.clear { clear: both; }
.clearfix { display: block; }
.clear {
clear: both;
}
.clearfix {
display: block;
}
sass/core/_core-mixins.scss
View file @ 2fcda1ed
/**
* mixins
*
* @section mixins
*/
////
/// Mixins
/// @section mixins
////
/// font size, default 16
@mixin font-size ($size: 16) {
font-size: ($size / $base)+em;
margin-bottom: (12 / $size)+em;
}
@mixin box-sizing ($type: border-box) {
-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);
}
/// footer styles with parameterised backgrond image
@mixin footer($background) {
padding: $gutter-width $two-col $gutter-width $four-col;
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() {
*zoom:1;
&:before,
&:after {
content:"";
display:table;
content: '';
display: table;
}
&: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-mixins";
@import 'core-constants';
@import 'core-mixins';
/**
* Ubuntu Super Patterns Stylesheet
*
* Contains audience related themes for site-wide application
*
* @project Ubuntu Patterns
* @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;
}*/
}
////
/// Ubuntu Super Patterns Stylesheet
/// Contains audience related themes for site-wide application
/// @project Ubuntu Patterns
/// @author Web Team at Canonical Ltd
/// @copyright 2012 Canonical Ltd
////
.row-enterprise {
border-radius: 0;
background: $canonical-aubergine;
color:#fff;
@include rounded-corners(0);
color: $white;
.box, div {
.box,
div {
background: $canonical-aubergine;
color:#fff;
color: $white;
}
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 { background:url('/sites/ubuntu/latest/u/img/patterns/developer-dot-pattern.png') }
\ No newline at end of file
.developer-dot-pattern {
background: url('/sites/ubuntu/latest/u/img/patterns/developer-dot-pattern.png');
}
sass/core/_core.scss
View file @ 2fcda1ed
@charset "UTF-8";
@import "core-constants";
@import "core-mixins";
/**
* Ubuntu Core Front-End Framework
*
* Main CSS file part of the Ubuntu Core Front-End Framework
*
* @project Ubuntu Core Front-End Framework
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
* @colordef $cool-grey (#333); main text
* @colordef $ubuntu-orange (#dd4814); Ubuntu orange
*/
/**
* Dependencies
*
* Importing reset file: core-reset.css
* Importing grid file: core-grid.css
*/
/**
* Font sizes
*
* 45px
* 32px
* 23px
* 19.5px
* 16px - bold
* 13px - bold - uppercase
*/
/**
* Table of contents
* General
* Links
* Lists
* Images
* Base typography
* Global elements
* Forms
* Tables
*/
/**
* General
*
* @section links
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, acronym, address, big, cite, 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 {
@charset 'UTF-8';
@import 'core-constants';
@import 'core-mixins';
////
/// Ubuntu Core Front-End Framework
/// Main CSS file part of the Ubuntu Core Front-End Framework
///
/// @project Ubuntu Core Front-End Framework
/// @author Web Team at Canonical Ltd
/// @copyright 2015 Canonical Ltd
///
/// @colordef $cool-grey (#333); main text
/// @colordef $brand-color (#dd4814); Ubuntu orange
/// Dependencies
///
/// Importing reset file: core-reset.css
/// Importing grid file: core-grid.css
////
/// Font sizes
///
/// 45px
/// 32px
/// 23px
/// 19.5px
/// 16px - bold
/// 13px - bold - uppercase
/// Table of contents
/// General
/// Links
/// Lists
/// Images
/// Base typography
/// Global elements
/// Forms
/// Tables
////
/// General
///
/// @section links
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
acronym,
address,
big,
cite,
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;
margin: 0;
padding: 0;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, nav, section {
display: block;
article,
aside,
details,
figcaption,
figure,
footer,
header,
nav,
section {
display: block;
}
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
display: none;
}
[hidden] {
display: none;
display: none;
}
@font-face {
font-family: 'Ubuntu';
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');
}
// 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
@import url('//fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,700,700italic%7CUbuntu+Mono');
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;
font-size: 100%;
overflow-y: scroll;
......@@ -153,132 +163,143 @@ html {
}
body {
background: url('#{$asset-path}backgrounds/image-background-paper.png') repeat-y center top $light-grey;
color: #333;
font-family: Ubuntu, Arial, "libra sans", sans-serif;
background: url('#{$asset-path}backgrounds/image-background-paper.png') repeat-y center top $light-grey;
color: $base-color;
font-family: Ubuntu, Arial, 'libra sans', sans-serif;
font-weight: 300;
}
blockquote, q {
blockquote,
q {
quotes: none;
}
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,
q:before, q:after {
content: "";
content: none;
q:before,
q:after {
content: '';
}
legend {
border: 0;
*margin-left: -7px;
border: 0;
}
figure {
margin: 0;
margin: 0;
}
abbr,
acronym { cursor: help; }
/**
* Links
*
* @section links
*/
abbr,
acronym {
cursor: help;
}
/// Links
/// @section links
a:focus {
outline: thin dotted;
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
outline: 0;
}
a:link,
a:visited {
color: $link-color;
text-decoration: none;
a {
color: $link-color;
text-decoration: none;
}
a:hover,
a:active,
a:hover,
a:active,
a:focus {
text-decoration: underline;
text-decoration: underline;
}
a.link-arrow:after { content: "\0000a0›"; }
nav ul li h2 a:after { content: "\0000a0›"; }
.link-arrow:after {
content: '\0000a0›';
}
nav ul li a:after,
.carousel ul li a:after,
ul li p a:after { content: ""; }
nav ul li h2 a:after {
content: '\0000a0›';
}
/**
* Lists
*/
nav ul li a:after,
.carousel ul li a:after,
ul li p a:after {
content: '';
}
ol,
/// Lists
ol,
ul {
margin-left: 20px;
margin-bottom: 20px;
}
ol ol,
ul ul,
ol ul,
ul ol { margin-bottom: 0; }
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
nav ul,
nav ol {
list-style: none;
list-style-image: none;
list-style: none;
list-style-image: none;
}
/**
* Images
*
* @section images
*/
svg:not(:root) { overflow: hidden; }
/// Images
/// @section images
svg:not(:root) {
overflow: hidden;
}
img {
border: 0;
height: auto;
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 {
vertical-align: middle;
margin-top: 4em;
}
/**
* Base typography
*
* @section type
*/
h1,
h2,
h3,
h4,
h5,
/// Base typography
/// @section type
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
line-height: 1.3;
font-weight: 300;
line-height: 1.3;
}
h1 {
......@@ -316,7 +337,7 @@ h6 {
text-transform: uppercase;
}
p,
p,
li {
font-size: 1em;
line-height: 1.5;
......@@ -325,347 +346,338 @@ li {
padding: 0;
}
h2 span,
h1 span { display: block; }
p + h2,
ul + h2,
ol + h2,
pre + h2 { margin-top: (18 / 32)+em; }
header nav a:link { font-weight: normal; }
h2 span,
h1 span {
display: block;
}
p + h3,
ul + h3,
ol + h3,
pre + h3 { margin-top: (18 / 23)+em; }
p + h2,
ul + h2,
ol + h2,
pre + h2 {
margin-top: (18 / 32)+em;
}
p + h4,
ul + h4,
ol + h4,
pre + h4 { margin-top: (19.5 / $base)+em; }
header nav a:link {
font-weight: normal;
}
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+h3, p+h3, pre+h3, ul+h3 { margin-top: .783em; }
ol+h4, p+h4, pre+h4, ul+h4 { margin-top: 1.219em; }
ol+h2,
p+h2,
pre+h2,
ul+h2 {
margin-top: .563em;
}
/* p + ol, p + dl {
margin-top: 1.5em;
margin-bottom: 1.5em;
ol+h3,
p+h3,
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 {
background: #fffbeb;
background: $code-bg;
text-decoration: none;
}
small,
.smaller { font-size: 13px; }
small,
.smaller {
font-size: 13px;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
sup {
vertical-align: text-top;
}
dfn { font-style: italic; }
sub {
vertical-align: text-bottom;
}
mark {
background: #ff0;
color: #000;
dfn {
font-style: italic;
}
code, pre {
font-family: "Ubuntu Mono", "Consolas", "Monaco", "Lucida Console", "Courier New", Courier, monospace;
code,
pre {
font-family: 'Ubuntu Mono', 'Consolas', 'Monaco', 'Lucida Console', 'Courier New', Courier, monospace;
}
pre {
@include rounded-corners(4px);
border-radius: 4px;
background: $light-orange;
padding: .6em 1em;
white-space: pre-wrap;
word-wrap: break-word;
}
blockquote { margin: 0; }
blockquote > p {
@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
*/
/// Forms
/// Global form element styles
/// @section forms
button,
input,
select,
textarea {
font-family: Ubuntu,Arial,"libra sans",sans-serif;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
font-family: Ubuntu,Arial,'libra sans',sans-serif;
margin: 0;
vertical-align: baseline;
}
select {
font-size: 1em;
font-weight: 300;
select {
font-size: 1em;
font-weight: 300;
}
button,
input { line-height: normal; }
input {
line-height: normal;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
*overflow: visible;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
input[type='button'],
input[type='reset'],
input[type='submit'] {
cursor: pointer;
-webkit-appearance: button;
}
input[type='checkbox'],
input[type='radio'] {
box-sizing: border-box;
padding: 0;
}
input[type="search"] {
@include rounded-corners(2px);
-moz-box-sizing: content-box;
-webkit-appearance: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
font-family: Ubuntu,Arial,"libra sans",sans-serif;
font-weight: 300;
outline: none;
padding: 0.6956522em 0.869565em;
border-radius: 2px;
box-sizing: content-box;
font-family: Ubuntu,Arial,'libra sans',sans-serif;
font-weight: 300;
outline: none;
padding: .6956522em .869565em;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
overflow: auto;
vertical-align: top;
}
form fieldset {
@include rounded-corners(4px);
background-repeat: no-repeat;
background-color: #EFEEEC;
background-position: -15px -15px;
border: 0;
margin-bottom: 8px;
padding: 15px 20px;
}
border-radius: 4px;
background-repeat: no-repeat;
background-color: $mid-grey;
background-position: -15px -15px;
border: 0;
margin-bottom: 8px;
padding: 15px 20px;
form fieldset h3 {
border-bottom: 1px dotted #dfdcd9;
margin-bottom: 9px;
padding-bottom: 10px;
}
h3 {
border-bottom: 1px dotted $mid-grey;
margin-bottom: 9px;
padding-bottom: 10px;
}
form fieldset li:first-child { margin-top: 0; }
li:first-child {
margin-top: 0;
}
}
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type='text'],
form input[type='email'],
form input[type='tel'],
form textarea {
-webkit-appearance: none;
@include rounded-corners(2px);
background: #fff;
border: 1px solid #999;
display: block;
font-family: Ubuntu,Arial,"libra sans",sans-serif;
font-size: 1em;
font-weight: 300;
padding: 0.6956522em 0.869565em;
border-radius: 2px;
background-color: $white;
border: 1px solid $warm-grey;
display: block;
font-family: Ubuntu, Arial, 'libra sans', sans-serif;
font-size: 1em;
font-weight: 300;
padding: .6956522em .869565em;
}
form input:focus,
form textarea:focus { border: 1px solid #dd4814; }
form input:focus,
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"] {
margin: 0;
width:auto;
form input[type='checkbox'],
form input[type='radio'] {
margin: 0;
width: auto;
}
form input[type="checkbox"] + label,
form input[type="radio"] + label{
display: inline;
margin-left: 5px;
vertical-align: middle;
width: auto;
form input[type='checkbox'] + label,
form input[type='radio'] + label {
display: inline;
margin-left: 5px;
vertical-align: middle;
width: auto;
}
form input[type="submit"] {
form input[type='submit'] {
@include font-size (16);
@include rounded-corners(4px);
@include gradient(#f26120, $ubuntu-orange);
@include box-shadow(none);
border: 0;
color: #fff;
display: block;
padding: 10px 14px;
text-shadow: none;
width: auto;
margin-bottom: 0;
border-radius: 4px;
background-color: $brand-color;
background-image: linear-gradient(lighten($brand-color, 10%), $brand-color);
box-shadow: none;
border: 0;
color: $white;
display: block;
padding: 10px 14px;
text-shadow: none;
width: auto;
margin-bottom: 0;
}
form input[type="submit"]:hover {
background: $ubuntu-orange;
form input[type='submit']:hover {
background: $brand-color;
}
form label {
cursor: pointer;
display: block;
margin-bottom: 4px;
}
form label span {
color: $error;
cursor: pointer;
display: block;
margin-bottom: 4px;
span {
color: $error;
}
}
form ul { margin-left:0; }
form ul {
margin-left: 0;
}
form li {
list-style: none outside none;
margin-top: 14px;
list-style: none outside none;
margin-top: 14px;
}
form button[type="submit"] {
form button[type='submit'] {
border: 0;
display: inline-block;
font-family: Ubuntu, Arial, "libra sans", sans-serif;
text-decoration:none;
font-weight: 300;
font-family: Ubuntu, Arial, 'libra sans', sans-serif;
text-decoration: none;
font-weight: 300;
}
form input[type="reset"] {
form input[type='reset'] {
display: none;
}
/**
* Tables
*
* @section tables
*/
/// Tables
/// @section tables
table {
border-collapse: collapse;
border-spacing: 0;
overflow-x: scroll;
border-collapse: collapse;
border-spacing: 0;
overflow-x: scroll;
margin-bottom: $gutter-width;
margin: 0 0 (40/$base) + em 0;
margin: 0 0 (40/$base) + em;
width: 100%;
th, td {
padding: 15px 10px;
background: #f0edea;
border: 1px dotted $warm-grey;
th,
td {
padding: 15px 10px;
background: $light-grey;
border: 1px dotted $warm-grey;
}
td {
text-align: center;
vertical-align: middle;
text-align: center;
vertical-align: middle;
}
thead th {
border-collapse: separate;
border-spacing: 0 10px;
background: #fee3d2;
color: #333333;
font-weight: normal;
border-collapse: separate;
border-spacing: 0 10px;
background: $table-th;
color: $base-color;
font-weight: normal;
}
tbody th {
text-align: left;
font-weight: normal;
font-weight: 300;
text-align: left;
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) {
table {
display: block;
}
} // end @media only screen and (max-width : 768px)
table {
display: block;
}
} /// end @media only screen and (max-width : 768px)
@media only screen and (min-width: 984px) {
form fieldset {
padding: 15px 20px;
padding: 15px 20px;
}
img {
max-width: none;
}
}
\ No newline at end of file
img {
max-width: none;
}
}
sass/core/core-print.scss
View file @ 2fcda1ed
@charset "UTF-8";
/**
* Ubuntu print Stylesheet
*
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
*/
* { background: #fff; color: #000; }
@charset 'UTF-8';
////
/// Ubuntu print Stylesheet
/// @project Ubuntu Patterns
/// @author Web Team at Canonical Ltd
/// @copyright 2012 Canonical Ltd
////
@import 'core-constants';
* {
background: $white;
color: $black;
}
body {
background: white;
font-size: 16pt;
line-height: 1.5;
background: $white;
font-size: 16pt;
line-height: 1.5;
}
a:link, a:visited {
color: #898989;
background: transparent;
font-weight: bold;
text-decoration: underline;
a:link,
a:visited {
background: transparent;
color: $warm-grey;
font-weight: bold;
text-decoration: underline;
}
nav,
#box-search,
.cookie-policy,
.link-top,
footer {
display: none;
display: none;
}
nav.nav-secondary {
display: block;
.nav-secondary {
display: block;
}
.wrapper {
width: auto;
margin: 0 5%;
padding: 0;
padding-top: 1em;
float: none !important;
float: none;
margin: 0 5%;
padding-top: 1em;
width: auto;
}
sass/core/patterns/_arrows.scss
View file @ 2fcda1ed
......@@ -40,19 +40,11 @@
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) {
html.yui3-js-enabled .arrow {
.yui3-js-enabled .arrow {
visibility: visible;
}
} // @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';
blockquote {
&.pull-quote {
text-indent: 0;
.pull-quote {
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 {
color: $cool-grey;
padding-left: 10px;
padding-right: 10px;
@include font-size (24.833);
text-indent: -.4em;
margin-left: .4em;
line-height: 1.3;
span {
font-weight: bold;
color: $brand-color;
line-height: 0;
position: relative;
left: -5px;
span {
font-weight: bold;
color: $ubuntu-orange;
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:disable NestingDepth
+ span {
left: 5px;
}
// scss-lint:enable NestingDepth
}
&.js {
padding-left: $gutter-width * 3;
display: table-cell;
cite {
margin: 10px 0 0;
font-weight: 300;
display: block;
font-size: .75em;
text-indent: 0;
}
}
&.quote-canonical,
&.quote-canonical-white {
@include font-size (16);
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;
&.js {
padding-left: $gutter-width * 3;
display: table-cell;
}
}
&.quote-canonical-white {
background: url("#{$asset-path}patterns/quote-aubergine-345x345.png") no-repeat 0 0;
color: #fff;
padding: 80px 60px 0;
height: 265px;
}
.quote-canonical,
.quote-canonical-white {
@include font-size (16);
background: none;
color: $cool-grey;
width: auto;
height: auto;
float: right;
font-size: 1em;
margin-top: 20px;
padding: 0 30px;
position: relative;
}
&.quote p:first-child {
@include font-size (18); // (16) desired value in px, this is divided by the baseline font-size value to reach the em value
line-height: 1.3;
text-indent: -7px;
}
.quote-canonical-white {
background: url("#{$asset-path}patterns/quote-aubergine-345x345.png") no-repeat 0 0;
color: $white;
padding: 80px 60px 0;
height: 265px;
}
&.quote-right-bottom {
background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.svg");
background-repeat: no-repeat;
background-size: 287px 286px;
color: #fff;
height: 167px;
padding: 60px 40px;
position: static;
right: -($gutter-width * 2);
top: -($gutter-width * 4.5);
width: 207px;
& p { color: #fff; }
}
.quote p:first-child {
@include font-size (18); // (16) desired value in px, this is divided by the baseline font-size value to reach the em value
line-height: 1.3;
text-indent: -7px;
}
&.quote-grey {
@include font-size (36);
background: url("#{$asset-path}patterns/quote-grey-br-211x211.png") no-repeat scroll 0 0 transparent;
color: #fff;
height: 152px;
line-height: 40px;
margin-left: 20px;
padding: 60px 0 0;
text-align: center;
width: 211px;
}
.quote-right-bottom {
background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.svg");
background-repeat: no-repeat;
background-size: 287px 286px;
color: $white;
height: 167px;
padding: 60px 40px;
position: static;
right: -($gutter-width * 2);
top: -($gutter-width * 4.5);
width: 207px;
p { color: $white; }
}
&.quote-bottom-left {
background: url("#{$asset-path}patterns/quote-orange-bl-287x287.png") no-repeat;
color: #fff;
height: 167px;
padding: 55px 40px 70px 45px;
width: 225px;
}
&.quote-grey {
@include font-size (36);
background: url("#{$asset-path}patterns/quote-grey-br-211x211.png") no-repeat scroll 0 0 $transparent;
color: $white;
height: 152px;
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 {
......@@ -108,9 +110,9 @@ blockquote {
//right: 0;
//}
html.no-svg,
.no-svg,
.opera-mini {
blockquote.quote-right-bottom {
.quote-right-bottom {
background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.png");
}
}
......@@ -120,51 +122,54 @@ html.no-svg,
// row-quote
.row-quote {
@include rounded-corners(0);
border-radius: 0;
blockquote {
@include rounded-corners(4px);
border-radius: 4px;
margin: 0;
padding: 0;
p {
margin-bottom: .75em;
line-height: 1.3;
color: $cool-grey;
color: $base-color;
padding-left: 10px;
padding-right: 10px;
//@include font-size (23);
//@include font-size (23);
//font-size: 1em;
text-indent: 0;
}
span {
font-weight: bold;
color: $ubuntu-orange;
color: $brand-color;
line-height: 0;
position: relative;
left: -5px;
& + span { left: 5px; } // the second span
// scss-lint:disable NestingDepth
+ span {
left: 5px;
}
// scss-lint:enable NestingDepth
}
cite {
color: $cool-grey;
color: $base-color;
font-style: normal;
margin-bottom: 0;
font-size: .75em;
text-indent: -14px;
text-indent: 0;
}
}
.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;
}
.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;
p {
......@@ -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) {
.row-quote blockquote {
......@@ -199,12 +189,15 @@ blockquote.quote-canonical-white {
text-indent: -.4em;
}
.row-quote blockquote p {
@include font-size (24.83);
.row-quote blockquote {
p {
@include font-size (24.83);
text-indent: -.4em;
}
}
blockquote.pull-quote p,
.row-quote blockquote p {
.pull-quote p,
.row-quote blockquote p {
padding-left: 0;
padding-right: 0;
text-indent: -.7em;
......@@ -219,21 +212,15 @@ blockquote.quote-canonical-white {
}
}
blockquote.pull-quote p span,
.pull-quote p span,
.row-quote blockquote p span {
top: 5px;
}
} // end @media only screen and (max-width : 768px)
@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)
......@@ -242,12 +229,12 @@ blockquote.quote-canonical-white {
.row-quote blockquote {
padding: 0 80px 20px;
text-indent: -10px;
}
}
blockquote.pull-quote p span,
.row-quote blockquote p span {
top: 10px;
}
.pull-quote p span,
.row-quote blockquote p span {
top: 10px;
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_boxes.scss
View file @ 2fcda1ed
@charset 'UTF-8';
%box {
@include rounded-corners(4px);
border-radius: 4px;
padding: 1.333em $gutter-width;
}
.box {
@extend %box;
background: #fff;
border: 1px solid #dfdcd9;
background: $white;
border: 1px solid $box-border;
}
.box-grey {
@extend %box;
background: $light-grey;
color: $cool-grey;
color: $base-color;
}
.box-orange {
background: $ubuntu-orange;
color: #fff;
background: $brand-color;
color: $white;
}
.box-highlight {
@include box-shadow(0 2px 2px 0 #c2c2c2);
border: 1px solid $light-grey;
box-shadow: 0 2px 2px 0 $box-shadow;
border: 1px solid $light-grey;
}
.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");
border: 0;
}
.box-padded {
@include rounded-corners(4px);
background: $box-solid-grey;
border-radius: 4px;
background: $mid-grey;
border: 0;
margin-bottom: 20px;
padding: 6px 5px;
......@@ -47,29 +47,29 @@
}
li h3 { // this happens in 'Further reading' /cloud/insights
@include font-size(19.5);
margin: 0;
@include font-size(19.5);
margin: 0;
}
div {
@include rounded-corners(4px);
background: #fff;
overflow: hidden;
padding: 8px 8px 2px;
border-radius: 4px;
background: $white;
overflow: hidden;
padding: 8px 8px 2px;
}
}
.box-padded-feature {
@include rounded-corners(4px);
background: url("#{$asset-path}patterns/soft-centre-bkg.gif") repeat scroll 0 0 #a09f9f;
border-radius: 4px;
background: url('#{$asset-path}patterns/soft-centre-bkg.gif') repeat scroll 0 0 $cool-grey;
border: 0;
margin-bottom: 20px;
padding: 11px 5px 6px;
h3 {
color: #fff;
margin-left: ($gutter-width / 4);
@include font-size(19.5);
color: $white;
margin-left: ($gutter-width / 4);
}
h4 {
......@@ -78,28 +78,28 @@
}
> div {
@include rounded-corners(4px);
background: #fff;
overflow: hidden;
padding: 20px 8px;
border-radius: 4px;
background: $white;
overflow: hidden;
padding: 20px 8px;
}
div div {
margin-bottom: 0;
}
.inline-icons {
display: table;
width: 100%;
margin: 0;
text-align: center;
.inline-icons {
display: table;
width: 100%;
margin: 0;
text-align: center;
li {
display: table-cell;
text-align: left;
float: none;
}
}
}
.one-col {
width: 48px;
......@@ -112,52 +112,22 @@
cursor: pointer;
padding-bottom: 40px;
position: relative;
-moz-transition: background .2s ease-out;
-webkit-transition: background .2s ease-out;
transition: background .2s ease-out;
& h2 {
h2 {
padding-right: 20px;
}
&.five-col h2,
&.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; }
&:hover { background-color: $resource-hover; }
&:after {
-moz-box-shadow: 0 -1px 2px 0 #ddd;
-webkit-box-shadow: 0 -1px 2px 0 #ddd;
box-shadow: 0 -1px 2px 0 #ddd;
box-shadow: 0 -1px 2px 0 $resource-shadow;
content: '';
height: 1px;
position: absolute;
right: -6px;
top: 14px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
width: 41px;
z-index: 2;
......@@ -172,20 +142,16 @@
&:before {
content: '';
position: absolute;
-moz-transition: border-width .2s ease-out;
-webkit-transition: border-width .2s ease-out;
transition: border-width .2s ease-out;
top: -2px;
right: -3px;
width: 0;
height: 0;
border-bottom: 30px solid #fdfdfd;
border-right: 30px solid #fff;
-webkit-box-shadow: -2px 2px 2px rgba(176, 176, 176, .4);
-moz-box-shadow: -2px 2px 2px rgba(176, 176, 176, .4);
border-bottom: 30px solid $light-grey;
border-right: 30px solid $white;
box-shadow: -2px 2px 2px rgba(176, 176, 176, .4);
z-index: 2;
@include rounded-corners(0 0 0 0);
border-radius: 0;
}
&:hover:before {
......@@ -198,8 +164,8 @@
}
.content-cat {
background: url("#{$asset-path}icons/icon-resource-hub-icon-document.png") left center no-repeat;
color: #aea79f;
background: url('#{$asset-path}icons/icon-resource-hub-icon-document.png') left center no-repeat;
color: $warm-grey;
font-size: 14px;
letter-spacing: 1px;
margin: 0;
......@@ -210,7 +176,7 @@
}
.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 {
......@@ -218,12 +184,12 @@
}
}
html.yui3-js-enabled .resource:hover a {
.yui3-js-enabled .resource:hover a {
text-decoration: underline;
}
.row-grey .resource:before {
border-right-color: #f7f7f7;
border-right-color: $light-grey;
}
@media only screen and (max-width : 768px) {
......
sass/core/patterns/_buttons.scss
View file @ 2fcda1ed
@charset 'UTF-8';
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"] {
@include box-sizing();
@include font-size (16);
@include rounded-corners(3px);
background: $ubuntu-orange;
color: #fff;
text-decoration: none;
display: inline-block;
margin: 0;
font-family: Ubuntu, Arial, 'libra sans', sans-serif;
font-weight: 300;
-webkit-font-smoothing: subpixel-antialiased;
-moz-font-smoothing: subpixel-antialiased;
-o-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;
padding: 8px 14px;
width: 100%;
text-align: center;
////
/// Ubuntu Patterns Stylesheet
/// The CSS file required by Ubuntu patterns page
/// @project Ubuntu Patterns
/// @author Web Team at Canonical Ltd
/// @copyright 2012 Canonical Ltd
/// @see http://design.ubuntu.com
////
/// cta button
.link-cta-ubuntu,
.link-cta-canonical,
.link-cta-inverted,
.cta-ubuntu,
.cta-canonical,
form [type="submit"] {
@include font-size (16);
box-sizing: border-box;
border-radius: 3px;
border: 0;
background: $brand-color;
color: $white;
text-decoration: none;
display: inline-block;
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,
button.cta-large {
@include font-size (18);
padding: 10px 20px;
/// cta large button
.cta-large,
.cta-large {
@include font-size (18);
padding: 10px 20px;
}
a.link-cta-canonical,
button.cta-canonical,
form button.cta-canonical[type="submit"],
form input.cta-canonical[type="submit"] {
background: $canonical-aubergine;
color: #fff;
/// Canonical cta colours
.link-cta-canonical,
.cta-canonical,
form .cta-canonical[type="submit"],
form .cta-canonical[type="submit"] {
background: $canonical-aubergine;
color: $white;
&:hover {
background: darken($canonical-aubergine, 6.2%); // #5f193e
text-decoration: none;
}
}
a.link-cta-inverted,
button.cta-inverted {
background: #fff;
color: $cool-grey;
/// Inverted colour style
.link-cta-inverted,
.cta-inverted {
background: $white;
color: $base-color;
&:hover {
background: $white;
text-decoration: underline;
}
}
.row-enterprise a.link-cta-canonical,
.row-enterprise button.link-cta-canonical {
background: #fff;
/// Enterprise cta colour style
.row-enterprise .link-cta-canonical,
.row-enterprise .link-cta-canonical {
background: $white;
color: $canonical-aubergine;
}
a.link-cta-ubuntu:hover,
a.link-cta-ubuntu:hover,
button.cta-ubuntu:hover,
form button[type="submit"]:hover,
form input[type="submit"]:hover {
background: darken($ubuntu_orange, 6.2%); // #c03f11
text-decoration: none;
&:hover {
background: $white;
text-decoration: underline;
}
}
a.link-cta-canonical:hover,
button.cta-canonical:hover {
background: darken($canonical-aubergine, 6.2%); // #5f193e
text-decoration: none;
/// cta deactived style
.cta-deactivated,
.cta-deactivated:hover {
background: $cool-grey;
color: $white;
cursor: not-allowed;
}
a.link-cta-inverted:hover,
.row-enterprise a.link-cta-canonical:hover,
button.cta-inverted:hover,
.row-enterprise button.cta-canonical:hover {
background: #fff;
text-decoration: underline;
/// Medium breakpoint
@media only screen and (min-width : 768px) {
.link-cta-ubuntu,
.link-cta-canonical,
.link-cta-inverted,
.cta-ubuntu,
.cta-canonical,
form [type="submit"] {
width: auto;
}
}
a.cta-deactivated,
a.cta-deactivated:hover,
button.cta-deactivated,
button.cta-deactivated:hover {
background: $box-solid-grey;
color: #fff;
cursor: not-allowed;
/// Large breakpoint
@media only screen and (min-width : 984px) {
.link-cta-ubuntu,
.link-cta-canonical,
.link-cta-inverted,
.cta-ubuntu,
.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';
// scss-lint:disable IdSelector
#context-footer {
@include box-sizing;
@include font-size (14);
border-bottom: 0;
clear: both;
padding-bottom: 1px;
padding-top: 0;
position: relative;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
width: 100%;
hr {
@include box-shadow(inset 0 2px 2px -2px #333);
background: $ubuntu-orange;
height: 14px;
margin: 0 0 10px;
border: 0;
clear: both;
}
div.twelve-col {
display: table;
float: none;
margin-bottom: 7px;
}
div div {
display: block;
padding-left: 0;
margin-bottom: 20px;
div {
display: block;
padding-left: 0;
margin-bottom: 0;
}
&.feature-one {
padding-left: 0;
}
&.feature-four {
margin-bottom: 0;
margin-right: 0;
}
}
> div {
padding-left: 10px;
padding-right: 10px;
}
ul {
margin-bottom: 5px;
}
li.active {
display: none;
}
h3 {
@include font-size (16);
font-weight: normal;
}
.list a:after,
a.link-arrow:after,
nav ul li h2 a:after {
content: ' \203A';
}
@include font-size (14);
box-sizing: border-box;
border-bottom: 0;
clear: both;
padding-bottom: 1px;
padding-top: 0;
position: relative;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
width: 100%;
hr {
box-shadow: inset 0 2px 2px -2px $cool-grey;
background: $brand-color;
height: 14px;
margin: 0 0 10px;
border: 0;
clear: both;
}
.twelve-col {
display: table;
float: none;
margin-bottom: 7px;
}
div div {
display: block;
padding-left: 0;
margin-bottom: 20px;
div {
display: block;
padding-left: 0;
margin-bottom: 0;
}
&.feature-one {
padding-left: 0;
}
&.feature-four {
margin-bottom: 0;
margin-right: 0;
}
}
> div {
padding-left: 10px;
padding-right: 10px;
}
ul {
margin-bottom: 5px;
.active {
display: none;
}
}
h3 {
@include font-size (16);
font-weight: normal;
}
.list a:after,
.link-arrow:after,
nav ul li h2 a:after {
content: ' \203A';
}
}
@media only screen and (min-width : 768px) {
#context-footer {
#context-footer {
margin-bottom: 12px;
padding-left: 30px;
padding-right: 30px;
div + div {
width: 31%;
}
div {
div div.feature-four {
padding-bottom: 20px;
+ div {
width: 31%;
}
.feature-four {
padding-bottom: 20px;
}
}
hr {
margin: 0 -30px 40px;
}
& > div {
> div {
padding-left: 0;
padding-right: 0;
}
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
......@@ -107,20 +110,22 @@
@media only screen and (min-width: 984px) {
#context-footer {
padding: 0 40px 10px;
}
#context-footer {
padding: 0 40px 10px;
#context-footer div div {
display: table-cell;
float: none;
padding-left: 20px;
margin-bottom: 0;
}
div div {
display: table-cell;
float: none;
padding-left: 20px;
margin-bottom: 0;
}
#context-footer hr {
margin: 0 -40px 40px;
}
hr {
margin: 0 -40px 40px;
}
}
} // 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 {
margin-left: 0;
margin-left: 0;
}
footer.global {
@include box-sizing;
@include box-shadow(inset 0 2px 2px -1px #d3d3d3);
background: none;
border-top: 0;
clear: both;
display: block;
padding: 30px 10px 20px;
position: relative;
width: 100%;
.legal {
/* Can be removed once live */
margin: 0 auto;
width: 100%; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
}
.legal {
background-image: none;
position: relative;
clear: both;
min-height: 40px;
p,
ul {
padding-left: 0;
}
} // legal
h2 {
font-size: 0.75em;
line-height: 1.4;
margin-bottom: 0;
padding-bottom: 0.5em;
}
h2, h2 a:link, h2 a:visited {
color: $cool-grey;
font-weight: normal;
}
nav ul li h2 a:after { content: ""; }
ul { margin: 0; }
nav ul li.two-col {
display: inline-block;
min-height: 10em;
vertical-align: top;
}
nav ul li li {
@include font-size (12);
font-size: 0.75em;
margin-bottom: 0;
}
ul li li a:link, ul li li a:visited {
color: $cool-grey;
margin-bottom: 0;
}
ul li li a:hover, ul li li a:active, h2 a:hover, h2 a:active {
color: $ubuntu-orange;
//text-decoration: underline;
}
.inline li { display: inline; }
p, ul.inline li a {
color: $cool-grey;
font-size: 12px;
margin-bottom: 0;
}
ul.inline li a:hover { color: $ubuntu-orange; }
ul.inline li:after {
color: $warm-grey;
content: "\00b7";
vertical-align: middle;
margin: 0 5px;
}
ul.inline li:last-child { width: 120px; }
ul.inline li:last-child:after { content: ""; }
.inline li {
float: none;
margin-bottom: 0;
}
.top-link {
@include box-shadow(0 -4px 4px -4px rgba(0, 0, 0, 0.3) inset);
background: none;
border-top: 0;
box-shadow: inset 0 2px 2px -1px $mid-grey;
box-sizing: border-box;
clear: both;
display: block;
padding: 30px 10px 20px;
position: relative;
width: 100%;
.legal {
background-image: none;
clear: both;
margin: 0 auto;
min-height: 40px;
position: relative;
width: 100%;
p,
ul {
padding-left: 0;
}
} // legal
h2 {
font-size: .75em;
line-height: 1.4;
margin-bottom: 0;
padding-bottom: .5em;
}
h2,
h2 a:link,
h2 a:visited {
color: $base-color;
font-weight: normal;
}
nav ul li h2 a:after { content: ''; }
ul {
margin: 0;
.inline li a:hover {
color: $brand-color;
}
li:after {
color: $warm-grey;
content: '\00b7';
vertical-align: middle;
margin: 0 5px;
}
}
nav ul .two-col {
display: inline-block;
min-height: 10em;
vertical-align: top;
}
nav ul li li {
@include font-size (12);
font-size: .75em;
margin-bottom: 0;
}
ul li li a:link,
ul li li a:visited {
color: $base-color;
margin-bottom: 0;
}
ul li li a:hover,
ul li li a:active,
h2 a:hover,
h2 a:active {
color: $brand-color;
}
.inline li {
display: inline;
float: none;
margin-bottom: 0;
li:last-child { width: 120px; }
li:last-child:after { content: ''; }
}
p,
.inline li a {
color: $base-color;
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);
border: 0 none;
float: left;
font-size: 0.75em;
letter-spacing: 0.05em;
font-size: .75em;
letter-spacing: .05em;
margin: 0 0 0 -10px;
padding-right: 20px;
text-transform: uppercase;
width: 100%;
a {
@include box-sizing();
box-sizing: border-box;
background-image: url("#{$asset-path}pictograms/picto-pack/picto-upload-warmgrey.svg");
background-position: 10px center;
background-repeat: no-repeat;
background-size: 14px 14px;
border-bottom: 0 none;
color: #888888;
color: $warm-grey;
display: block;
float: none;
font-weight: 400;
padding: 12px 0 12px 28px;
}
}
}
} /* End footer.global */
html.no-svg, .opera-mini {
.no-svg,
.opera-mini {
footer.global .top-link {
a {
background-image: url("#{$asset-path}pictograms/picto-pack/picto-upload-warmgrey.png");
......@@ -135,14 +140,14 @@ html.no-svg, .opera-mini {
@media only screen and (max-width : 768px) {
footer.no-global .legal {
@include box-sizing(content-box);
box-shadow: 0 2px 2px -1px #D3D3D3 inset;
padding-top: 10px;
margin-left: -10px;
padding-left: 10px;
padding-right: 10px;
}
footer.no-global .legal {
box-shadow: 0 2px 2px -1px $mid-grey inset;
box-sizing: content-box;
margin-left: -10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
#livechat-eye-catcher {
display: block;
......@@ -152,10 +157,10 @@ html.no-svg, .opera-mini {
@media only screen and (min-width : 768px) {
footer.global .inline li {
display: inline;
float: left;
}
footer.global .inline li {
display: inline;
float: left;
}
} // @media only screen and (min-width : 768px)
......@@ -166,7 +171,7 @@ html.no-svg, .opera-mini {
}
footer.global .footer-b h2 a i {
font-style: normal;
font-style: normal;
display: inline;
}
......@@ -174,23 +179,24 @@ html.no-svg, .opera-mini {
@media only screen and (min-width: 984px) {
footer.global .legal {
width: 984px; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
}
footer.global .legal {
width: 984px; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
}
footer.global {
padding: 30px 0 20px;
footer.global {
padding: 30px 0 20px;
.legal {
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 {
display: block;
}
}
.footer-a {
display: block;
}
}
} // end @media only screen and (min-width: 984px)
// scss-lint:enable IdSelector, QualifyingElement
sass/core/patterns/_forms.scss
View file @ 2fcda1ed
@charset 'UTF-8';
form {
input,
select,
textarea {
@include box-sizing();
width: 100%;
}
.fieldset-submit ul {
margin-bottom: 0;
}
fieldset {
.mktError,
.errMsg,
.reqMark {
color: $error;
}
.mktFormMsg {
clear: both;
display: block;
}
}
input,
select,
textarea {
box-sizing: border-box;
width: 100%;
}
.fieldset-submit ul {
margin-bottom: 0;
}
// scss-lint:disable SelectorFormat
fieldset {
.mktError,
.errMsg,
.reqMark {
color: $error;
}
.mktFormMsg {
clear: both;
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";
header.banner {
border-top: 0;
min-width: 100%;
width: auto;
background: $ubuntu-orange;
@charset 'UTF-8';
// scss-lint:disable NestingDepth, IdSelector
$nav-box-shadow-color: #777 !default;
$nav-border-color: #d5d5d5 !default;
$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;
position: relative;
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 {
border: 0;
margin: 0 auto;
overflow: hidden;
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
ul {
border-right: 1px solid lighten($brand-color, 10%);
float: left;
margin: 0;
position: static;
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 {
display: none;
}
&:last-child {
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,
.no-svg header.banner .nav-toggle {
background-image: url(#{$asset-path}icons/navigation-menu-plain.png);
}
a:hover {
border-top: 0;
box-shadow: none;
background-color: $nav-hover-bg;
}
li:last-child {
border: 0;
}
}
header.banner nav ul {
background-color: $nav-bg;
display: none;
float: left;
}
header.banner .nav-primary.active {
@include box-shadow(0 1px 2px 1px rgba(120, 120, 120, 0.2));
padding: 0;
border-bottom: 1px solid $nav-border-dark;
}
} // end ul
&.active {
border-bottom: 1px solid $nav-border-dark;
box-shadow: 0 1px 2px 1px rgba(120, 120, 120, .2);
padding: 0;
}
header nav ul.active {
display: block;
}
ul li,
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,
header.banner .nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:active {
display: block;
padding: 0;
margin: 0;
border: none;
}
&.nav-right {
.logo-ubuntu {
background-image: url('#{$asset-path}logos/logo-ubuntu-white.svg');
background-size: 107px 25px;
float: left;
}
}
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 {
@include box-shadow(none);
background-color: $nav-hover-bg;
}
header.banner .nav-primary ul li a.active {
background-color: $nav-active-bg;
}
.promo {
border-top: 1px solid $nav-border-color;
float: left;
margin-top: 5px;
padding: 15px 0 0;
.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 {
border: 0;
// Responsive header navigation
#main-navigation-link {
display: none;
}
header.banner nav.nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:hover,
header.banner .nav-primary ul li a:active {
padding: 14px 14px 13px;
text-align: left;
.opera-mini .banner .nav-toggle,
.no-svg .banner .nav-toggle {
background-image: url('#{$asset-path}icons/navigation-menu-plain.png');
}
header.banner nav.nav-primary ul.active li ul {
display: none;
header nav .active {
display: block;
}
#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-position: 50% 26px;
content: "";
content: '';
display: block;
height: 23px;
margin-left: 0;
......@@ -160,15 +348,27 @@ header.banner nav.nav-primary ul.active li ul {
width: 48px;
z-index: 999;
}
html.no-svg, .opera-mini {
.no-svg,
.opera-mini {
#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
/* nav-secondary */
// nav-secondary
.nav-secondary {
border-bottom: 1px solid #dfdcd9;
border-bottom: 1px solid $mid-grey;
margin-bottom: 0;
......@@ -181,30 +381,32 @@ html.no-svg, .opera-mini {
float: left;
margin-top: 16px;
font-size: 14px;
margin-right: 15px;
margin-right: 15px;
a:link,
a:visited {
color: #333;
color: $warm-grey;
font-size: 14px;
float: left;
}
a:hover,
a:active {
color: $ubuntu-orange;
color: $brand-color;
text-decoration: none;
}
}
li,
li.active a:link,
li.active a:visited {
color: $ubuntu-orange;
.active a:link,
.active a:visited {
color: $brand-color;
text-decoration: none;
}
}
ul.breadcrumb {
} // end ul
.breadcrumb {
margin-left: 20px;
li,
......@@ -214,152 +416,79 @@ html.no-svg, .opera-mini {
margin-right: 8px;
}
li.active a:link,
li.active a:visited {
color: $ubuntu-orange;
.active a:link,
.active a:visited {
color: $brand-color;
}
}
}
header.banner h2 {
@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;
}
@media only screen and (max-width: 295px) {
}
.nav-primary.nav-left {
// this changes the logo to the circle of friends on screens below 295px
.banner {
.nav-primary.nav-right .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 {
background-image: url("#{$asset-path}logos/logo-ubuntu-white.svg");
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");
.banner .logo-ubuntu span {
padding-left: 38px;
}
}
} // 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
header.banner {
.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');
}
.lt-ie8 .banner .nav-primary li:hover ul {
display: none;
}
@media only screen and (max-width : 768px) {
header.banner .nav-primary {
@include box-shadow(0 1px 2px 1px rgba(0, 0, 0, 0.2));
.banner .nav-primary {
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .2);
}
header.banner .nav-primary.active {
@include box-shadow(none);
.banner .nav-primary.active {
box-shadow: none;
padding: 0;
}
header nav ul.active {
header nav .active {
float: left;
}
header nav ul.active li:last-child a:link,
header nav ul.active li:last-child a:visited {
border-bottom: 0;
}
header.banner .nav-primary ul {
header nav .active li:last-child a:link,
header nav .active li:last-child a:visited {
border-bottom: 0;
}
.banner .nav-primary ul {
position: relative;
width: 100%;
}
header.banner .nav-primary ul li.active {
.banner .nav-primary ul .active {
a:link,
a:visited {
color: #333;
color: $warm-grey;
font-weight: 700;
}
}
header.banner .nav-primary ul li,
header.banner .nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:active {
@include box-sizing();
background: transparent;
border: none;
.banner .nav-primary ul li,
.banner .nav-primary ul li a:link,
.banner .nav-primary ul li a:visited,
.banner .nav-primary ul li a:active {
box-sizing: border-box;
background: $transparent;
border: 0;
display: block;
font-weight: 300;
margin: 0;
......@@ -367,40 +496,41 @@ html.no-svg, .opera-mini {
width: 100%;
}
header.banner .nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:hover,
header.banner .nav-primary ul li a:active {
.banner .nav-primary ul li a:link,
.banner .nav-primary ul li a:visited,
.banner .nav-primary ul li a:hover,
.banner .nav-primary ul li a:active {
background-color: $nav-bg;
border-bottom: 1px solid $nav-border-dark;
color: #333333;
color: $warm-grey;
font-size: 1em;
}
header.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 {
border: 0;
}
.banner .nav-primary ul li:nth-last-child(-n+2) a:link,
.banner .nav-primary ul li:nth-last-child(-n+2) a:visited {
border: 0;
}
header.banner .nav-primary ul li a:hover {
@include box-shadow(none);
background: lighten($nav_bg, 3%);
.banner .nav-primary ul li a:hover {
box-shadow: none;
background: lighten($nav_bg, 3%);
}
header.banner .nav-primary ul li a.active {
.banner .nav-primary ul li .active {
background-color: $nav-active-bg;
}
header.banner nav.nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:hover,
header.banner .nav-primary ul li a:active {
.banner .nav-primary ul li a:link,
.banner .nav-primary ul li a:visited,
.banner .nav-primary ul li a:hover,
.banner .nav-primary ul li a:active {
padding: 8px 10px;
text-align: left;
}
header.banner .nav-primary ul li {
@include box-sizing();
background: transparent;
.banner .nav-primary ul li {
box-sizing: border-box;
background: $transparent;
border-bottom: 0;
border-right: 1px solid $nav-border-dark;
float: left;
......@@ -408,9 +538,9 @@ html.no-svg, .opera-mini {
}
.nav-secondary {
background: #fff;
background: $white;
ul.second-level-nav {
.second-level-nav {
border-top: 1px solid $nav-border-dark;
display: none;
margin-bottom: 0;
......@@ -420,7 +550,7 @@ html.no-svg, .opera-mini {
width: 100%;
li {
@include box-sizing();
box-sizing: border-box;
width: 50%;
margin: 0;
float: left;
......@@ -428,32 +558,32 @@ html.no-svg, .opera-mini {
a,
a:link,
a:visited {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
height: 100%;
padding: 10px 10px 10px 20px;
width: 100%;
}
&.active {
a,
a:link,
a:visited {
color: #333;
color: $warm-grey;
font-weight: 700;
}
}
}
} /* end .second-level-nav */
ul.third-level-nav {
.third-level-nav {
display: none;
margin-bottom: 0;
width: 100%;
padding-bottom: 20px;
li {
@include box-sizing();
box-sizing: border-box;
width: 50%;
margin: 0;
float: left;
......@@ -462,7 +592,7 @@ html.no-svg, .opera-mini {
a,
a:link,
a:visited {
@include box-sizing();
box-sizing: border-box;
padding: 10px 10px 10px 0;
display: block;
width: 100%;
......@@ -473,7 +603,7 @@ html.no-svg, .opera-mini {
a,
a:link,
a:visited {
color: #333;
color: $warm-grey;
font-weight: 700;
}
}
......@@ -486,10 +616,11 @@ html.no-svg, .opera-mini {
li:only-child {
width: 100%;
}
} /* end third-level-nav */
ul.breadcrumb {
@include box-sizing();
.breadcrumb {
box-sizing: border-box;
width: 100%;
margin-left: 0;
margin-bottom: 0;
......@@ -500,34 +631,47 @@ html.no-svg, .opera-mini {
}
li {
@include box-sizing();
color: #fff;
width: 100%;
box-sizing: border-box;
color: $white;
display: block;
height: 40px;
margin: 0;
width: 100%;
+ li {
display: none;
a:link,
a:active,
a:visited {
padding-left: 20px;
}
.after {
background-image: none;
}
}
a,
a:link,
a:visited {
@include box-sizing();
font-size: 16px;
width: 100%;
color: #333333;
box-sizing: border-box;
color: $warm-grey;
display: block;
font-size: 16px;
margin-right: 0;
padding: 8px 10px 0;
text-decoration: none;
padding: 8px 10px 0 10px;
width: 100%;
}
&.active {
margin-top: 12px;
a,
a:link,
a:visited {
color: #333;
color: $warm-grey;
font-weight: 700;
}
}
......@@ -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 {
ul.breadcrumb li a:after,
ul.breadcrumb li a:link:after,
ul.breadcrumb li a:visited:after {
.breadcrumb li a:after,
.breadcrumb li a:link:after,
.breadcrumb li a:visited:after {
background-image: url(#{$asset-path}patterns/nav-up-arrow.svg);
}
ul.breadcrumb li + li a.after {
.breadcrumb li + li .after {
background-image: none;
}
ul.breadcrumb li .after {
.breadcrumb li .after {
background-image: url(#{$asset-path}patterns/nav-up-arrow.svg);
margin-top: -7px;
}
ul.second-level-nav,
ul.third-level-nav,
ul.breadcrumb li + li {
.second-level-nav,
.third-level-nav,
.breadcrumb li + li {
display: block;
}
}
}/* end nav-secondary */
.no-js {
.nav-secondary ul.second-level-nav { display: block; }
.nav-secondary .second-level-nav {
display: block;
}
#main-navigation-link {
position: absolute;
right: 10px;
......@@ -603,7 +743,7 @@ html.no-svg, .opera-mini {
display: block;
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-repeat: no-repeat;
background-size: 25px auto;
......@@ -611,56 +751,73 @@ html.no-svg, .opera-mini {
width: 28px;
height: 28px;
position: absolute;
}
}
}
html.no-svg, .opera-mini {
.nav-secondary ul.breadcrumb {
.no-svg,
.opera-mini {
.nav-secondary .breadcrumb {
li .after {
background-image: url(#{$asset-path}patterns/nav-down-arrow.png);
}
&.open {
ul.breadcrumb li a:after,
ul.breadcrumb li a:link:after,
ul.breadcrumb li a:visited:after {
.breadcrumb li a:after,
.breadcrumb li a:link:after,
.breadcrumb li a:visited:after {
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);
}
}
}
header.banner .nav-primary #google-appliance-search-form button[type="submit"] {
background-image: url("#{$asset-path}search-black.png");
} // end .open
} // end .nav-secondary .breadcrumb
.banner .nav-primary button {
background-image: url('#{$asset-path}search-black.png');
}
}
html.no-svg, .opera-mini {
.nav-secondary ul.breadcrumb {
.no-svg,
.opera-mini {
.nav-secondary .breadcrumb {
li .after {
background-image: url(#{$asset-path}patterns/nav-down-arrow.png);
}
&.open {
ul.breadcrumb li a:after,
ul.breadcrumb li a:link:after,
ul.breadcrumb li a:visited:after {
.breadcrumb li a:after,
.breadcrumb li a:link:after,
.breadcrumb li a:visited:after {
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);
}
}
}
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 {
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-repeat: no-repeat;
background-size: 25px auto;
......@@ -675,226 +832,125 @@ html.no-svg, .opera-mini {
}
html.no-svg, .opera-mini {
header.banner .nav-toggle {
background-image: url("#{$asset-path}icons/navigation-menu-plain.png");
.no-svg,
.opera-mini {
.banner .nav-toggle {
background-image: url('#{$asset-path}icons/navigation-menu-plain.png');
}
}
}
@media only screen and (min-width : 768px) {
header.banner .nav-primary ul li {
.banner .nav-primary ul li {
border-bottom: 0;
}
}
@media only screen and (min-width : 769px) {
header.banner {
-moz-box-shadow: 0 2px 2px -2px #777777 inset, 2px 1px #FFFFFF;
-webkit-box-shadow: 0 2px 2px -2px #777777 inset, 2px 1px #FFFFFF;
box-shadow: 0 2px 2px -2px #777777 inset, 2px 1px #FFFFFF;
.banner {
box-shadow: 0 2px 2px -2px $nav-box-shadow-color inset, 2px 1px $white;
nav.nav-primary {
-moz-box-shadow: none;
-webkit-box-shadow: none;
.nav-primary {
box-shadow: none;
border-bottom: 0;
border-bottom: 0;
}
}
header.banner .nav-toggle {
display: none;
.banner .nav-toggle {
display: none;
}
header.banner nav ul {
background-color: transparent;
.banner nav ul {
background-color: $transparent;
display: block;
}
header.banner .nav-primary ul li {
border-left: 1px solid #C64012;
.banner .nav-primary ul li {
border-left: 1px solid $nav-border-left;
}
header.banner .nav-primary ul li a:active,
header.banner .nav-primary ul li a:hover,
header.banner .nav-primary ul li a:visited,
header.banner nav.nav-primary ul li a:link {
border-left: 1px solid #EC5B29;
.banner .nav-primary ul li a:active,
.banner .nav-primary ul li a:hover,
.banner .nav-primary ul li a:visited,
.banner .nav-primary ul li a:link {
border-left: 1px solid $nav-hover-border-left;
}
header.banner .nav-primary ul li:last-child {
border-right: 1px solid #C64012;
border-left: 1px solid #C64012;
.banner .nav-primary ul li:last-child {
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 {
ul:last-child li:last-child {
:last-child li:last-child {
padding-bottom: 10px;
}
ul.breadcrumb,
ul.second-level-nav,
ul.third-level-nav {
.breadcrumb,
.second-level-nav,
.third-level-nav {
li {
margin-right: 15px;
}
}
ul.breadcrumb {
.breadcrumb {
float: left;
li {
margin-bottom: 10px;
}
}
ul {
float: none;
margin-bottom: 0;
}
ul li {
margin-bottom: 5px;
li {
margin-bottom: 5px;
}
}
}
}
@media only screen and (min-width: 984px) {
header.banner {
.banner {
margin-bottom: 20px;
.nav-primary ul {
display: block;
}
}
header.banner nav.nav-primary ul {
display: block;
}
header.banner .nav-primary,
#nav-global .nav-global-wrapper {
.banner .nav-primary,
.nav-global-wrapper {
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;
}
}
/*
* 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; }
// scss-lint:enable NestingDepth, IdSelector
sass/core/patterns/_helpers.scss
View file @ 2fcda1ed
@charset 'UTF-8';
@import '../_core-constants';
@import '../core-constants';
.left { float: left; }
......@@ -9,9 +9,9 @@
.caps { text-transform: uppercase; }
img {
border: 0 none;
height: auto;
max-width: 100%;
border: 0 none;
height: auto;
max-width: 100%;
&.left { margin-right: 0; }
......@@ -20,21 +20,21 @@ img {
.accessibility-aid,
.off-left {
position: absolute;
left: -999em;
position: absolute;
left: -999em;
}
a.external {
@include background-size(.7em .7em);
.external {
background-size: .7em .7em;
padding-right: .9em;
background-image: url('#{$asset-path}external-link-orange.svg');
background-position: right 1px;
background-repeat: no-repeat;
}
.opera-mini a.external,
.no-svg a.external { background-image: url('#{$asset-path}external-link-orange.png'); }
.opera-mini .external,
.no-svg .external { background-image: url('#{$asset-path}external-link-orange.png'); }
.text-center,
.align-center { text-align: center; }
......@@ -56,29 +56,29 @@ a.external {
.no-border { border: 0; }
.link-top {
@include font-size (14);
clear: both;
margin-bottom: 40px;
margin-top: -40px;
a {
background: #fff;
margin-right: 10px;
margin-top: -17px;
padding: 5px;
float: right;
}
@include font-size (14);
clear: both;
margin-bottom: 40px;
margin-top: -40px;
a {
background: $white;
margin-right: 10px;
margin-top: -17px;
padding: 5px;
float: right;
}
}
.pull-bottom-right {
position: absolute;
right: 0;
bottom: 0;
left: auto;
position: absolute;
right: 0;
bottom: 0;
left: auto;
}
.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; }
......@@ -86,9 +86,9 @@ a.external {
.pull-top-right { margin-left: -20px; margin-top: -21px; }
div.box-image-centered span img,
div.row-image-centered span img,
div.row.row-image-centered span img,
.box-image-centered span img,
.row-image-centered span img,
.row.row-image-centered span img,
img {
&.priority-0 {
position: absolute;
......@@ -98,28 +98,28 @@ img {
.priority-0,
.not-for-small {
position: absolute;
left: -999em;
position: absolute;
left: -999em;
}
// responsive video solution
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
& + h3,
& + .video-title {
+ h3,
+ .video-title {
margin-top: 20px;
}
}
......@@ -131,7 +131,7 @@ img {
.pull-bottom-right,
.pull-bottom-left { position: static; }
img.pull-bottom-left {
.pull-bottom-left {
margin-bottom: 0;
margin-left: 0;
}
......@@ -139,38 +139,39 @@ img {
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 768px) {
div.box-image-centered span img,
div.row-image-centered span img,
div.row.row-image-centered span img,
.box-image-centered span img,
.row-image-centered span img,
.row.row-image-centered span img,
img {
&.priority-0 {
position: relative;
left: auto;
position: relative;
left: auto;
}
}
.priority-0,
.not-for-small {
.priority-0,
.not-for-small {
position: relative;
left: auto;
}
}
.for-mobile,
.for-mobile,
.for-small {
position: absolute;
left: -999em;
}
}
.pull-right {
float: right;
margin-right: -30px;
}
img.pull-left {
.pull-left {
margin-left: -30px;
}
img.touch-border {
.touch-border {
float: left;
margin-bottom: -30px;
}
......@@ -179,34 +180,31 @@ img {
@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: 984px) {
img.touch-border {
.touch-border {
float: left;
margin-bottom: -40px;
}
img.pull-left { margin-left: -40px; }
.pull-left { margin-left: -40px; }
.pull-right {
float: right;
margin-right: -40px;
}
.for-tablet,
.for-tablet,
.for-medium {
display: none;
}
.no-border {
border: 0;
}
.no-border {
border: 0;
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_image-centered.scss
View file @ 2fcda1ed
@charset 'UTF-8';
.row.row-image-centered,
div.box-image-centered,
div.row-image-centered,
div.row.row-image-centered {
padding: 20px 10px 0;
}
.row-box.row-image-centered {
padding-top: 20px;
padding-bottom: 20px;
}
.row.row-image-centered {
padding-top: 40px;
padding-bottom: 40px;
}
.row-hero.row-image-centered {
padding-top: 0;
}
div.row-image-centered,
div.box-image-centered,
div.row.row-image-centered {
//display: block;
div,
span {
//display: block;
float: none;
}
span {
width: 100%;
img {
height: auto;
max-width: 100%;
display: block;
padding: 0;
margin: 0 auto;
margin-bottom: 20px;
}
}
p,
h2,
h3 {
float: none;
}
.box-image-centered,
.row-image-centered {
padding: 20px 10px 0;
&.row {
padding-top: 40px;
padding-bottom: 40px;
}
&.row-box {
padding-bottom: 20px;
}
&.row-hero {
padding-top: 0;
}
div,
span {
float: none;
}
span {
width: 100%;
img {
display: block;
height: auto;
padding: 0;
margin: 0 auto;
margin-bottom: 20px;
max-width: 100%;
}
}
p,
h2,
h3 {
float: none;
}
}
@media only screen and (min-width : 768px) {
div.row-image-centered,
div.row.row-image-centered,
div.box-image-centered {
@include box-sizing;
padding-bottom: 20px;
display: table;
div {
float: none;
display: table-cell;
position: relative;
p,
h2,
h3 {
display: block;
width: 100%;
float: left;
}
+ span img { // if image is on the right hand side
padding-right: 0;
margin-bottom: 20px;
}
}
span {
display: table-cell;
float: none;
position: relative;
text-align: center;
top: 0;
vertical-align: middle;
width: auto;
img {
padding-right: 20px; // if image is on the left hand side
}
}
}
/*
alternative to row-image-centered
requires equal-height class on row
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;
transform-style: preserve-3d;
img,
div {
-ms-transform: translateY(-50%); // for IE9
-webkit-transform: translateY(-50%);
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
.row-image-centered,
.row.row-image-centered,
.box-image-centered {
box-sizing: border-box;
display: table;
padding-bottom: 20px;
div {
display: table-cell;
float: none;
position: relative;
p,
h2,
h3 {
display: block;
float: left;
width: 100%;
}
+ span img { // if image is on the right hand side
margin-bottom: 20px;
padding-right: 0;
}
}
span {
display: table-cell;
float: none;
position: relative;
text-align: center;
top: 0;
vertical-align: middle;
width: auto;
img {
padding-right: 20px; // if image is on the left hand side
}
}
}
///
/// alternative to row-image-centered
/// requires equal-height class on row
/// add align-vertically to the div containing the image
/// http://caniuse.com/transforms2d
///
.js .align-vertically {
transform-style: preserve-3d;
img,
div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
} //@media only screen and (min-width : 768px)
div.box-image-centered {
padding-top: 20px;
}
@media only screen and (min-width : 768px) {
.row.row-image-centered,
div.box-image-centered,
div.row-image-centered,
div.row.row-image-centered {
padding: 30px;
}
div.box-image-centered div + span img,
div.row-image-centered div + span img,
div.row.row-image-centered div + span img,
div.box-image-centered span img.priority-0,
div.row-image-centered span img.priority-0,
div.row.row-image-centered span img.priority-0 {
margin-right: auto;
display: table-cell;
margin-bottom: 0;
}
.box-image-centered,
.row-image-centered,
.row.row-image-centered {
padding: 30px;
div {
+ span img {
display: table-cell;
margin-bottom: 0;
margin-right: auto;
}
}
span {
.priority-0 {
display: table-cell;
margin-bottom: 0;
margin-right: auto;
}
}
}
} // @media only screen and (min-width : 768px)
@media only screen and (min-width: 984px) {
.row-image-centered,
.row.row-image-centered,
div.row-image-centered,
div.row.row-image-centered,
div.box-image-centered {
@include box-sizing;
padding: 60px 40px 60px;
display: table;
div {
float: none;
display: table-cell;
position: relative;
p,
h2,
h3 {
display: block;
width: 100%;
float: left;
}
+ span img { // if image is on the right hand side
padding-right: 0;
//margin-bottom: 20px;
}
}
span {
display: table-cell;
float: none;
position: relative;
text-align: center;
top: 0;
vertical-align: middle;
width: auto;
img {
padding-right: 20px; // if image is on the left hand side
}
}
}
.box-image-centered {
box-sizing: border-box;
display: table;
padding: 60px 40px;
div {
display: table-cell;
float: none;
position: relative;
p,
h2,
h3 {
display: block;
float: left;
width: 100%;
}
+ span img { // if image is on the right hand side
padding-right: 0;
}
}
span {
display: table-cell;
float: none;
position: relative;
text-align: center;
top: 0;
vertical-align: middle;
width: auto;
img {
padding-right: 20px; // if image is on the left hand side
}
}
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_inline-logos.scss
View file @ 2fcda1ed
@charset 'UTF-8';
ul.inline-logos {
.inline-logos {
float: left;
margin-left: 0;
padding: 0;
......@@ -8,82 +8,78 @@ ul.inline-logos {
width: 100%;
li {
clear: none;
display: inline-block;
float: none;
margin: 10px 20px;
padding: 0;
clear: none;
display: inline-block;
float: none;
margin: 10px 20px;
padding: 0;
&.clear-row { clear: left; }
&.clear-row { clear: left; }
&.last-item { border: 0; }
}
img {
@include transition;
vertical-align: middle;
max-width: 115px;
max-height: 32px;
}
&.last-item { border: 0; }
}
img {
transition: all .5s ease-out;
vertical-align: middle;
max-width: 115px;
max-height: 32px;
}
}
.inline-icons {
margin: 0 0 $gutter-width;
margin: 0 0 $gutter-width;
li {
margin-right: 20px;
margin-bottom: 20px;
text-align: left;
display: inline-block;
li {
margin-right: 20px;
margin-bottom: 20px;
text-align: left;
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 {
vertical-align: middle;
max-width: 115px;
max-height: 32px;
}
img {
vertical-align: middle;
max-width: 115px;
max-height: 32px;
}
}
@media only screen and (max-width : 768px) {
ul.inline-logos {
img {
max-width: 172px;
max-height: 48px;
}
}
.inline-logos {
img {
max-width: 172px;
max-height: 48px;
}
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
ul.inline-logos {
li {
clear: none;
display: inline-block;
height: auto;
margin: 20px 0;
line-height: 60px;
padding: 0 40px;
img {
float: none;
vertical-align: middle;
max-width: 200px;
max-height: 45px;
}
}
}
.inline-logos {
li {
clear: none;
display: inline-block;
height: auto;
margin: 20px 0;
line-height: 60px;
padding: 0 40px;
img {
float: none;
vertical-align: middle;
max-width: 200px;
max-height: 45px;
}
}
}
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
.inline-icons {
.inline-icons {
text-align: left;
margin-bottom: 20px;
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_lists.scss
View file @ 2fcda1ed
......@@ -3,20 +3,22 @@
.list,
.list-ubuntu,
.list-canonical {
list-style: none;
margin-left: 0;
list-style: none;
margin-left: 0;
li {
border-bottom: 1px dotted $warm-grey;
li {
border-bottom: 1px dotted $warm-grey;
margin-bottom: 0;
padding: 10px 0;
}
}
li:last-of-type,
// scss-lint:disable QualifyingElement
li:last-of-type,
li.last-item {
border: 0;
border: 0;
padding-bottom: 0;
}
// scss-lint:enable QualifyingElement
}
.list article {
......@@ -31,13 +33,13 @@
}
nav .list a {
display: block;
display: block;
}
.list-ubuntu li,
.list-canonical li {
background-repeat: no-repeat;
background-position: 0 1em;
background-repeat: no-repeat;
background-position: 0 1em;
padding-left: 25px;
}
......@@ -54,7 +56,7 @@ nav .list a {
padding-left: 25px;
}
html.no-svg,
.no-svg,
.opera-mini {
.list-ubuntu li {
background-image: url('#{$asset-path}patterns/tick-orange.png');
......@@ -84,13 +86,13 @@ html.no-svg,
margin-bottom: 0;
}
// scss-lint:disable QualifyingElement
li.last-item {
border-bottom: 1px dotted $warm-grey;
padding-bottom: 10px;
}
div.last-col,
ul.last-col {
.last-col {
margin-bottom: 20px;
li.last-item {
......@@ -98,6 +100,7 @@ html.no-svg,
padding-bottom: 0;
}
}
// scss-lint:enable QualifyingElement
}
.inline {
......@@ -113,16 +116,18 @@ html.no-svg,
@media only screen and (min-width : 768px) {
.row .combined-list {
.row .combined-list {
ul,
div {
margin-bottom: 20px;
}
// scss-lint:disable QualifyingElement
li.last-item {
border-bottom: 0;
padding-bottom: 0;
}
// scss-lint:enable QualifyingElement
}
} // 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';
// rows sass
// contents:
// row
// row-hero
// row-background
// strips
// row-aux
// row-step
// row
// ----------------------------------------------------------
////
/// rows sass
/// contents:
/// row
/// row-hero
/// row-background
/// strips
/// row-aux
/// row-step
////
/// row
.row {
@include box-sizing;
box-sizing: border-box;
border-bottom: 1px dotted $warm-grey;
clear: both;
padding: 20px 10px 0;
......@@ -27,7 +24,17 @@
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 {
......@@ -36,25 +43,23 @@
.no-border { border: 0; }
// row-hero
// ----------------------------------------------------------
#main-content .row-hero {
/// row-hero
.row-hero {
margin-top: 20px;
padding-top: 0;
}
// row-background
// ----------------------------------------------------------
/// row-background
.row-background {
color: #fff;
background: url("#{$asset-path}backgrounds/image-background-wallpaper.jpg") no-repeat scroll 50% 50% #4b1827;
color: $white;
background: url("#{$asset-path}backgrounds/image-background-wallpaper.jpg") no-repeat scroll 50% 50% $row-background;
a.alternate {
color: #fff;
.alternate {
color: $white;
text-decoration: underline;
}
a.alternate:hover {
.alternate:hover {
color: rgba(255, 255, 255, .6);
}
......@@ -64,8 +69,7 @@
}
}
// strips
// ----------------------------------------------------------
/// strips
.strip {
width: 100%;
display: block;
......@@ -75,27 +79,21 @@
background-color: $dark-aubergine;
background-image: url("#{$asset-path}backgrounds/background-grid.png");
background-repeat: repeat;
color: #fff;
color: $white;
.list-ubuntu li {
border: 0;
}
.resource {
color: #333;
-moz-box-shadow: none;
-webkit-box-shadow: none;
color: $base-color;
box-shadow: none;
padding-right: 20px;
}
.resource:before {
border-right-color: #2c001e;
}
}
#main-content .strip-dark {
.resource:before {
border-bottom-width: 29px;
border-right-color: $dark-aubergine;
right: -2px;
top: -1px;
}
......@@ -103,14 +101,9 @@
.resource:hover:before {
border-bottom-width: 34px;
}
.resource h2 {
padding-right: 20px;
}
}
// row-aux
// ----------------------------------------------------------
/// row-aux
.row-aux {
background-color: rgba(255, 255, 255, .6);
text-align: center;
......@@ -121,13 +114,12 @@
}
a p {
color: #333;
color: $base-color;
margin-bottom: 30px;
}
}
// row-step
// ----------------------------------------------------------
/// row-step
.row-step {
h2 {
position: relative;
......@@ -140,29 +132,42 @@
height: 32px;
width: 32px;
border-radius: 50%;
border: 3px solid $ubuntu-orange;
color: $ubuntu-orange;
border: 3px solid $brand-color;
color: $brand-color;
line-height: 32px;
text-align: center;
background-color: #fff;
background-color: $white;
font-size: 23px;
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)
@media only screen and (min-width : 768px) {
@media only screen and (min-width : $breakpoint-medium) {
.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)
@media only screen and (min-width : 769px) {
@media only screen and (min-width : $breakpoint-medium + 1px) {
.row-step .step {
height: 42px;
......@@ -174,7 +179,7 @@
} //@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; }
......
sass/core/patterns/_search.scss
View file @ 2fcda1ed
@charset "UTF-8";
@charset 'UTF-8';
// scss-lint:disable IdSelector
.header-search,
#box-search {
padding: 7px 0 7px 14px;
overflow: hidden;
padding: 7px 0 7px 14px;
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"],
input[type="text"] {
-webkit-appearance: none;
@include box-shadow(inset 0 1px 4px rgba(0,0,0,0.2));
@include box-sizing();
@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;
}
/// 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.
placeholder {
color: $white;
opacity: .4;
}
::-moz-placeholder {
color: white;
opacity: 0.4;
}
input:placeholder {
color: $white;
opacity: .4;
}
:-ms-input-placeholder {
color: white;
opacity: 0.4;
}
::placeholder {
color: $white;
opacity: .4;
}
input:-moz-placeholder {
color: white;
opacity: 0.4;
}
[type="search"]:focus {
background-color: darken($brand-color, 14%);
}
::placeholder {
color: white;
opacity: 0.4;
}
[type=submit] {
padding: 3px 2px;
line-height: 0;
float: left;
margin-left: -40px;
display: block;
background: none;
overflow: visible;
&:hover { background: none; }
input[type="search"]:focus { background-color: #a63603; }
button[type=submit] {
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;
}
img {
height: 28px;
width: 28px;
}
}
}
header.banner .search-toggle {
@include background-size(20px 20px);
background-image: url('#{$asset-path}search_icon_white_64.png');
background-image: url('#{$asset-path}search.svg');
background-position: center center;
background-repeat: no-repeat;
display: block;
height: 48px;
outline: none;
overflow: hidden;
position: absolute;
right: 58px;
text-indent: -999em;
top: 0;
width: 24px;
.banner .search-toggle {
background-size: 20px 20px;
background-image: url('#{$asset-path}search.svg');
background-position: center center;
background-repeat: no-repeat;
display: block;
height: 48px;
outline: none;
overflow: hidden;
position: absolute;
right: 58px;
text-indent: -999em;
top: 0;
width: 24px;
}
.search-toggle:link,
.search-toggle:link,
.search-toggle:active {
outline: none;
outline: none;
}
#box-search,
.header-search {
background: #f0f0f0;
border: 0;
display: none;
float: left;
margin-bottom: 0;
position: relative;
margin: 0 0 -1px 0;
padding: 0;
width: 100%;
z-index: 3;
background: $light-grey;
border: 0;
display: none;
float: left;
margin-bottom: 0;
position: relative;
margin: 0 0 -1px;
padding: 0;
width: 100%;
z-index: 3;
}
#box-search.active,
......@@ -117,28 +105,25 @@ header.banner .search-toggle {
#box-search div,
.header-search div {
@include box-shadow( inset 0 -4px 4px -4px rgba(0, 0, 0, .3),
inset 0 5px 5px -5px rgba(0, 0, 0, 0.3));
background: $nav-bg;
margin: 10px;
position: relative;
z-index: 1;
box-shadow: inset 0 -4px 4px -4px rgba(0, 0, 0, .3), inset 0 5px 5px -5px rgba(0, 0, 0, .3);
background: $nav-bg;
margin: 10px;
position: relative;
z-index: 1;
}
#box-search form input[type="search"],
.header-search form input[type="search"] {
@include font-size (16);
@include rounded-corners();
@include box-shadow(0 2px 2px rgba(0, 0, 0, 0.3) inset,
0 -1px 3px rgba(0, 0, 0, 0.2) inset,
0 2px 0 rgba(255, 255, 255, 0.4));
@include box-sizing();
background: #fff;
border: 0;
color: #333;
font-size: 16px;
height: auto;
margin: 0;
#box-search form [type="search"],
.header-search form [type="search"] {
@include font-size (16);
border-radius: 4px;
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);
box-sizing: border-box;
background: $white;
border: 0;
color: $base-color;
font-size: 16px;
height: auto;
margin: 0;
float: left;
padding: 9px 10px;
width: 100%;
......@@ -146,30 +131,32 @@ header.banner .search-toggle {
.yes-js .header-inner #box-search,
.yes-js .header-inner .header-search {
display: none;
form {
@include box-sizing();
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 10px;
top: 0;
z-index: 999;
position: relative;
width: 100%;
}
display: none;
form {
box-sizing: border-box;
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 10px;
top: 0;
z-index: 999;
position: relative;
width: 100%;
}
}
// scss-lint:enable IdSelector
@media only screen and (max-width : 768px) {
header.banner {
.banner {
.search-toggle {
right: 48px;
}
}
html.no-svg, .opera-mini {
.no-svg,
.opera-mini {
.search-toggle {
background-image: url("#{$asset-path}search-white.png");
}
......@@ -179,282 +166,291 @@ header.banner .search-toggle {
@media only screen and (min-width : 768px) {
header.banner .search-toggle {
.banner .search-toggle {
display: none;
}
} // @media only screen and (min-width : 768px)
@media only screen and (min-width : 960px) {
// scss-lint:disable IdSelector
#box-search,
.header-search {
background: none;
overflow:hidden;
padding: 7px 0 7px 14px;
border-right: 0 none;
float: right;
margin-bottom: 0;
padding-bottom: 5px;
padding-right: 0;
padding-top: 7px;
max-width: 220px;
form input[type="text"],
form input[type="search"] {
@include box-shadow(0 2px 4px rgba(0, 0, 0, 0.4) inset);
@include box-sizing(content-box);
background: url("#{$asset-path}icons/icon-search.png") no-repeat scroll 5px center, none repeat scroll 0 0 #BE3D00;
border: 6px solid #DE6532;
.header-search {
// scss-lint:enable IdSelector
background: none;
overflow: hidden;
padding: 7px 0 7px 14px;
border-right: 0 none;
float: right;
margin-bottom: 0;
padding-bottom: 5px;
padding-right: 0;
padding-top: 7px;
max-width: 220px;
form [type="text"],
form [type="search"] {
box-shadow: 0 2px 4px rgba(0, 0, 0, .4) inset;
box-sizing: content-box;
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;
color: #fff;
font-size: 0.813em;
color: $white;
font-size: .813em;
height: 24px;
margin-bottom: 0;
padding: 4px 4px 4px 30px;
transition: all 0.5s ease 0s;
transition: all .5s ease 0s;
width: 86px;
}
}
} // @media only screen and (min-width : 769px)
@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 {
padding: 0;
position: relative;
top: 0;
width: 100%;
[type="submit"] {
width: 32px;
height: 38px;
background: url('#{$asset-path}search-black.svg') no-repeat scroll center center $transparent;
background-size: 28px 28px;
input[type="search"] {
border-radius: 0;
background: $light_grey;
color: #333;
img {
max-width: none;
display: none;
}
button[type="submit"] {
width: 32px;
height: 38px;
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 {
}
&.open {
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 {
.search-toggle {
background-image: url("#{$asset-path}search-white.svg");
background-position: center center;
background-repeat: no-repeat;
.opera-mini {
x:-o-prefocus,
.banner .search-toggle {
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) {
// scss-lint:disable IdSelector
#box-search,
.header-search {
// scss-lint:enable IdSelector
display: block;
margin-right: 0;
input[type="search"],
input[type="text"] {
}
form input[type="text"]:focus {
form [type="text"]:focus {
width: 160px;
}
}
} // @media only screen and (min-width: 984px)
}
@media only screen and (max-width : 768px) {
header.banner .search-toggle {
.banner .search-toggle {
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
body.ubuntu-search,
body.search-results,
body.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 #dfdcd9;
}
.main-search {
padding: 20px 0;
margin: 0 0 20px 0;
background-color: transparent;
input[type="search"] {
float: left;
width: 100%;
font-size: 2em;
border: 1px solid #999;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.2em 65px 0.2em 0.2em;
}
button[type=submit] {
padding: 4px;
line-height: 0;
float: left;
margin-left: -53px;
display: block;
background: none;
overflow: visible;
width: auto;
margin-top: -4px;
&:hover {
background: none;
}
img {
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;
}
li:before {
content: '\2039'; /* left chevron &lsaquo; */
color: $brand-color;
margin-right: 5px;
}
.item-extreme:before {
content: '\2039\2039'; /* double left chevron &lsaquo; */
}
}
.nav-forward {
float: right;
li:after {
content: '\203A'; /* right chevron&nbsp;&rsaquo; */
color: $brand-color;
margin-left: 5px;
}
.item-extreme:after {
content: '\203A\203A'; /* double right chevron&nbsp;&rsaquo; */
}
}
.error-notification {
background-color: $white;
color: $base-color;
padding: 20px;
box-sizing: border-box;
width: 100%;
margin-top: 20px;
display: block;
}
.result-line {
color: $warm-grey;
}
.results-top {
border-bottom: 1px dotted $mid-grey;
padding-bottom: .5em;
}
.search-container {
padding-bottom: 0;
}
}
@media only screen and (min-width : 768px) {
.ubuntu-search {
.main-search {
button[type=submit] {
margin-left: -60px;
margin-top: 0;
}
}
}
.ubuntu-search .main-search [type=submit] {
margin-left: -60px;
margin-top: 0;
}
} /* end @media only screen and (min-width : 768px) */
sass/core/patterns/_slider.scss
View file @ 2fcda1ed
@charset 'UTF-8';
.slider {
@include rounded-corners(4px);
border-radius: 4px;
background: $light-grey;
padding-top: $gutter-width * 2;
......@@ -9,18 +9,12 @@
overflow: hidden;
position: relative;
height: 450px;
-moz-transition: left 1s;
-webkit-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
}
.slide-container {
position: absolute;
width: (700 * 4)px;
-moz-transition: left 1s;
-webkit-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
left: 0;
}
......@@ -42,10 +36,10 @@
margin-right: .75em;
text-indent: -9999em;
width: 7px;
}
&.active {
background-position: 0 0;
}
.active {
background-position: 0 0;
}
a {
......@@ -80,7 +74,7 @@
.arrow-prev:hover,
.arrow-next:hover {
text-decoration: none;
color: $cool-grey;
color: $base-color;
}
.arrow-prev:active,
......
sass/core/patterns/_structure.scss
View file @ 2fcda1ed
@charset 'UTF-8';
@import '../_core-mixins';
@import '../_core-constants.scss';
@import '../core-mixins';
@import '../core-constants';
.wrapper,
header.banner .nav-primary,
nav div.footer-a div,
.banner .nav-primary,
nav .footer-a div,
.inline-lists ul,
.legal {
@include box-sizing();
width: auto;
box-sizing: border-box;
width: auto;
}
.inner-wrapper {
@include box-sizing();
background: #fff;
clear: both;
display: block;
float: left;
width: 100%;
margin: 0;
padding-bottom: 20px;
position: relative;
z-index: 1;
box-sizing: border-box;
background: $white;
clear: both;
display: block;
float: left;
width: 100%;
margin: 0;
padding-bottom: 20px;
position: relative;
z-index: 1;
}
@media only screen and (min-width : 768px) {
.med-six-col {
.three-col {
width: 48%;
}
.three-col:nth-of-type(2n) {
margin-right: 0;
}
}
.med-six-col {
.three-col {
width: 48%;
}
.three-col:nth-of-type(2n) {
margin-right: 0;
}
}
} // end @media only screen and (max-width : 768px)
......@@ -47,38 +47,38 @@ nav div.footer-a div,
@media only screen and (min-width: 984px) {
.wrapper {
@include box-sizing;
background: #fff;
margin: 0 auto;
position: relative;
text-align: left;
width: 984px;
}
.inner-wrapper {
@include box-shadow(0 0 3px #c9c9c9);
margin: 10px 0 30px;
}
.three-col,
.med-six-col .three-col {
width: 23.30%;
}
.three-col.last-col:nth-of-type(2n) {
.wrapper {
box-sizing: border-box;
background: $white;
margin: 0 auto;
position: relative;
text-align: left;
width: 984px;
}
.inner-wrapper {
box-shadow: 0 0 3px $mid-grey;
margin: 10px 0 30px;
}
.three-col,
.med-six-col .three-col {
width: 23.30%;
}
.three-col.last-col:nth-of-type(2n) {
margin-right: 0;
}
.med-six-col {
.three-col:nth-of-type(2n) {
margin-right: 20px;
}
.med-six-col {
.three-col:nth-of-type(2n) {
margin-right: 20px;
}
.three-col.last-col {
margin-right: 0;
}
}
.three-col.last-col {
margin-right: 0;
}
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_tabbed-content.scss
View file @ 2fcda1ed
@charset 'UTF-8';
html.js .tabbed-content .accordion-button {
@include box-sizing;
.js .tabbed-content .accordion-button {
box-sizing: border-box;
height: auto;
padding-bottom: .6em;
padding-right: 20px;
}
html.yui3-js-enabled {
.yui3-js-enabled {
.tabbed-menu {
display: none;
......@@ -22,61 +22,57 @@ html.yui3-js-enabled {
}
.tabbed-content {
@include rounded-corners(4px);
padding: 8px 8px 0;
background: $light-grey;
margin-bottom: 8px;
border-radius: 4px;
padding: 8px 8px 0;
background: $light-grey;
margin-bottom: 8px;
&.hide {
display: block;
opacity: 1 !important;
}
&.hide {
display: block;
opacity: 1;
}
.title {
display: none;
}
.title {
display: none;
}
div {
display: none;
}
div {
display: none;
}
.accordion-button {
@include box-sizing;
background: url("#{$asset-path}icons/icon-arrow-down.svg") no-repeat scroll right 3px $light-grey;
color: $cool-grey;
display: block;
font-size: 16px;
padding-bottom: .6em;
padding-right: 20px;
width: 100%;
.accordion-button {
box-sizing: border-box;
background: url("#{$asset-path}icons/icon-arrow-down.svg") no-repeat scroll right 3px $light-grey;
color: $base-color;
display: block;
font-size: 16px;
padding-bottom: .6em;
padding-right: 20px;
width: 100%;
}
&.open {
.accordion-button {
background-image: url("#{$asset-path}icons/icon-arrow-up.svg");
margin-bottom: 10px;
}
&.open .accordion-button {
background-image: url("#{$asset-path}icons/icon-arrow-up.svg");
margin-bottom: 10px;
}
div {
display: block;
}
}
&.open div {
display: block;
}
}
html.yui3-js-enabled.opera-mini .tabbed-content,
html.yui3-js-enabled.no-svg .tabbed-content {
.yui3-js-enabled.opera-mini .tabbed-content,
.yui3-js-enabled.no-svg .tabbed-content {
.accordion-button {
background-image: url("#{$asset-path}icons/icon-arrow-right.png");
}
&.open {
.accordion-button {
background-image: url("#{$asset-path}icons/icon-arrow-up.png");
}
&.open .accordion-button {
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 {
background-image: none;
margin-bottom: 10px;
......@@ -93,25 +89,25 @@ html.yui3-js-enabled {
}
.tabbed-content {
margin-bottom: 20px;
padding: 40px;
margin-bottom: 20px;
padding: 40px;
&.hide {
display: none;
opacity: 0 !important;
}
&.hide {
display: none;
opacity: 0;
}
.title {
display: block;
}
.title {
display: block;
}
div {
display: block;
}
div {
display: block;
}
.vertical-divider div {
display: table-cell;
}
.vertical-divider div {
display: table-cell;
}
.accordion-button {
display: none;
......@@ -128,16 +124,16 @@ html.yui3-js-enabled {
@media only screen and (min-width : 768px) {
.tabbed-menu {
@include box-shadow(0 -1px 10px #cfcfcf inset);
@include box-sizing;
@include rounded-corners(4px 4px 0 0);
box-shadow: 0 -1px 10px $mid-grey inset;
box-sizing: border-box;
border-radius: 4px 4px 0 0;
background: none repeat scroll 0 0 $light-grey;
padding-bottom: $gutter-width;
padding-top: $gutter-width;
position: relative;
ul {
@include box-sizing;
box-sizing: border-box;
display: table;
margin-bottom: 0;
padding: 0;
......@@ -152,7 +148,7 @@ html.yui3-js-enabled {
}
a {
color: #666;
color: $base-color;
display: block;
outline: none;
......@@ -186,14 +182,14 @@ html.yui3-js-enabled {
padding-bottom: 40px;
}
html.yui3-js-enabled .tabbed-content.hide {
.yui3-js-enabled .tabbed-content.hide {
display: none;
opacity: 0;
}
.tabbed-content-bg {
@include box-sizing;
background: #fff;
box-sizing: border-box;
background: $white;
margin-left: 20px;
margin-right: 20px;
}
......@@ -202,9 +198,9 @@ html.yui3-js-enabled {
padding-left: 0;
padding-right: 0;
}
html.yui3-js-enabled .arrow {
visibility: visible;
}
.yui3-js-enabled .arrow {
visibility: visible;
}
}
sass/core/patterns/_tooltips.scss
View file @ 2fcda1ed
......@@ -5,13 +5,11 @@
}
.yui3-tooltip-content {
@include box-shadow(0 2px 8px hsla(0, 0%, 0%, .20));
background: url("#{$asset-path}patterns/grey-textured-background.jpg") repeat scroll 0 0 transparent;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0 2px 8px hsla(0, 0%, 0%, .20);
background: url("#{$asset-path}patterns/grey-textured-background.jpg");
border-radius: 4px;
border: 1px solid #e3e3e3;
color: $cool-grey;
border: 1px solid $warm-grey;
color: $base-color;
margin-top: -30px;
max-width: 520px;
position: relative;
......@@ -32,8 +30,8 @@
}
img {
float: left;
margin-right: 10px;
float: left;
margin-right: 10px;
}
q {
......@@ -68,19 +66,19 @@
left: 50%;
margin: 0 0 0 -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 {
top: 0;
border-color: $box-solid-grey transparent;
border-color: $mid-grey $transparent;
}
.tooltip-label {
@include box-shadow(3px 3px 6px rgba(0, 0, 0, .3));
@include rounded-corners(4px);
background: #fff;
border: 1px solid #dfdcd9;
box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
border-radius: 4px;
background: $white;
border: 1px solid $mid-grey;
display: none;
font-size: 13px;
line-height: 1;
......
sass/core/patterns/_typography.scss
View file @ 2fcda1ed
......@@ -2,13 +2,13 @@
.caps-centered,
.muted-heading {
font-size: .875em;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
font-size: .875em;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
}
p.intro {
.intro {
@include font-size (16);
line-height: 1.4;
}
......@@ -29,7 +29,7 @@ p.intro {
@media only screen and (min-width : 768px) {
p.intro {
.intro {
font-size: 1.13333em;
}
......@@ -69,7 +69,7 @@ p.intro {
margin-bottom: .75em;
}
p.intro {
.intro {
font-size: 1.25em;
}
......
sass/core/patterns/_vertical-divider.scss
View file @ 2fcda1ed
......@@ -41,25 +41,19 @@
.row.vertical-divider {
padding-bottom: 0;
}
// scss-lint:disable ImportantRule
.equal-height div,
.equal-height li {
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) {
.row.vertical-divider {
padding-bottom: 60px;
}
.row.vertical-divider {
padding-bottom: 60px;
}
.vertical-divider {
> div,
......@@ -72,7 +66,7 @@
padding-right: 20px;
vertical-align: top;
}
// scss-lint:disable QualifyingElement
> div:last-child,
> li:last-child,
> div.last-col,
......@@ -91,5 +85,6 @@
> li:first-of-type {
padding-left: 0;
}
// scss-lint:enable QualifyingElement
}
} // 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
*
* The CSS file required by Ubuntu patterns page
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2014 Canonical Ltd
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2014 Canonical Ltd
*
*/
@import '_structure';
@import '_helpers';
@import '_typography';
@import '_header';
@import '_search';
@import '_footer';
@import '_contextual-footer';
@import '_buttons';
@import '_forms';
@import '_rows';
@import '_image-centered';
@import '_boxes';
@import '_arrows';
@import '_lists';
@import '_inline-logos';
@import '_blockquotes';
@import '_tabbed-content';
@import '_vertical-divider';
@import '_slider';
@import '_tooltips';
@import 'structure';
@import 'helpers';
@import 'typography';
@import 'header';
@import 'search';
@import 'footer';
@import 'contextual-footer';
@import 'buttons';
@import 'forms';
@import 'rows';
@import 'image-centered';
@import 'boxes';
@import 'arrows';
@import 'lists';
@import 'inline-logos';
@import 'blockquotes';
@import 'tabbed-content';
@import 'vertical-divider';
@import 'slider';
@import 'tooltips';
sass/core/ubuntu-styles.scss
View file @ 2fcda1ed
......@@ -2,14 +2,14 @@
// import required files
@import '_core-constants';
@import '_core-mixins';
@import 'core-constants';
@import 'core-mixins';
@import '_core-grid';
@import '_core-grid-tablet';
@import '_core-grid-desktop';
@import 'core-grid';
@import 'core-grid-tablet';
@import 'core-grid-desktop';
@import '_core';
@import '_core-templates';
@import 'core';
@import 'core-templates';
@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