Update frontend framework to the latest responsive version available

sass/core/_core-constants.scss

+@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)";
+
+@media only screen and (min-width : 768px) { $base: 15; }
+
+@media only screen and (min-width: 984px) { $base: 14; }
\ No newline at end of file

sass/core/_core-grid.scss

+@charset "UTF-8";
+/**
+ * Ubuntu Core Front-End Framework
+ *
+ * Grid file part of the Ubuntu Core Front-End Framework
+ *
+ * This grid is composed by 14 columns (units) separated by 13 gutters (1/3 unit).
+ * The first and last column are for padding purposes only.
+ * The content fits in the middle 12 columns.
+ * Possible divisions: 1 (12 units + 11 gutters), 2 (6 units + 5 gutters),
+ * 3 ( 4 units + 3 gutters) and 4 (3 units + 2 gutters).
+ *
+ * When 1 unit = 60px, 1 gutter = 20px
+ *
+ * @project		Ubuntu Core Front-End Framework
+ * @author		Web Team at Canonical Ltd
+ * @copyright	2012 Canonical Ltd
+ *
+ * @see			http://gridinator.com/
+ */
+/**
+ * Table of contents
+ *
+ * Main containers
+ * Columns
+ * Empty columns
+ * Borders
+ * Push and pull
+ * Verticla gutter
+ * Last
+ * Clearing
+
+	one-col			60
+	two-col			140
+	three-col		220
+	four-col		300
+	five-col		380
+	six-col			460
+	seven-col		540
+	eight-col		630
+	nine-col		700
+	ten-col			780
+	eleven-col	860
+	twelve-col	940
+
+*/
+
+.fake { display: none; }
+
+body {
+	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%;
+}
+
+.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%; }
+}
+
+.last-col, .last { margin-right: 0; }
+
+/**
+ * Clearing
+ *
+ * Hard and soft clearing classes
+ *
+ * @section clearing
+ */
+
+.clearfix:after, .container:after {
+  clear: both;
+  content: "\0020";
+  display: block;
+  height: 0;
+  overflow:hidden;
+  visibility: hidden;
+}
+
+.clear { clear: both; }
+.clearfix { display: block; }
+

sass/core/core-mixins.scss → sass/core/_core-mixins.scss

@@ -3,25 +3,25 @@
  *
  * @section mixins
  */
- 
-@mixin font_size ($size: 16) {
+
+@mixin font-size ($size: 16) {
   font-size: ($size / $base)+em;
   margin-bottom: (12 / $size)+em;
 }
 
-@mixin box_sizing ($type: border-box) {
+@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) { 
+@mixin rounded-corners($radius: 4px 4px 4px 4px) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   border-radius: $radius;
 }
 
-@mixin box_shadow($shadow: 0 2px 2px 0 #c2c2c2) { 
+@mixin box-shadow($shadow...) {
   -moz-box-shadow: $shadow;
   -webkit-box-shadow: $shadow;
   box-shadow: $shadow;
@@ -36,9 +36,9 @@
 }
 
 @mixin footer($background) {
-  padding: $gutter_width $two_col $gutter_width $four_col;
+  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 #F7F7F7;
 }
 
 @mixin clearfix() {
@@ -57,9 +57,27 @@
 // CSS3 colunms
 @mixin columns($num: 3, $gap: 20) {
   -moz-column-count: $num;
-  -moz-column-gap: ($gap / $base)+em;
+  -moz-column-gap: ($gap / $base)em;
   -webkit-column-count: $num;
-  -webkit-column-gap: ($gap / $base)+em;
+  -webkit-column-gap: ($gap / $base)em;
   column-count: $num;
-  column-gap: ($gap / $base)+em;
-}
+  column-gap: ($gap / $base)em;
+}
\ No newline at end of file
+
+// 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 → sass/core/_core-templates.scss

 @charset "UTF-8";
+
+@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
@@ -12,7 +16,7 @@
 
 /**
  * Audience specific
- * 
+ *
  * @section audience
  */
 
@@ -21,39 +25,39 @@
 .voice-canonical { }
 .voice-community.voice-canonical { }
 
-/* 
- * Consumer 
+/*
+ * Consumer
  */
 
 .audience-consumer{
-  color: $cool_grey;
-  
+  color: $cool-grey;
+
   .row-box, .main-content {
-    color: $cool_grey;
-  } 
-  
+    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; 
+    height: 287px;
     position: absolute;
-    right:  -($gutter_width * 2);
+    right:  -($gutter-width * 2);
     text-align: left;
-    top: -($gutter_width * 4.5);
-    width: $four_col;
-    
+    top: -($gutter-width * 4.5);
+    width: $four-col;
+
     p {
-      @include font_size (16);
+      @include font-size (16);
       margin: (1.538em / 2);
       padding-bottom: 0;
       color: #fff;
-      
+
       cite {
-        @include font_size (12);
+        @include font-size (12);
         color: #fff;
         padding: 0;
       }
@@ -62,18 +66,18 @@
   .quote-right-top p a,
   .quote-right p a { color: #fff; }
   .quote-right {
-    @include font_size (18);
+    @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; 
+    min-height: 287px;
     position: absolute;
-    right:  -$gutter_width;
+    right:  -$gutter-width;
     text-align: left;
-    top: -($gutter_width * 4.5);
-    width: $four_col -(150/$base)em;
-    
+    top: -($gutter-width * 4.5);
+    width: $four-col -(150/$base)em;
+
     cite {
       font-style: normal;
       margin-left: 6px;
@@ -81,13 +85,13 @@
   }
   .quote-right-alt {
     background: url(/sites/ubuntu/latest/u/img/patterns/quote-white-br-360x360.png) 0 -100px no-repeat;
-    color: $ubuntu_orange;
+    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
  */
 
@@ -95,30 +99,30 @@
 
   h1 { margin: 0 0 18px 0; }
   td{ background: #fff; }
-  
+
   th, td {
     padding: 6px 10px;
     background: #fff;
   }
   th[scope="col"] {
     background: #E2D4DC;
-    color: $canonical_aubergine;
+    color: $canonical-aubergine;
   }
   tbody th[rowspan] { background: #F7F2F6; }
   tfoot th[rowspan] { background: #dfdcd9; }
   tfoot td, tfoot th {
     font-weight: normal;
-    background: #dfdcd9;   
+    background: #dfdcd9;
   }
   .inner-wrapper {
-    background: $dark_aubergine;
+    background: $dark-aubergine;
 	  color: #fff;
 	}
 	.row-box {
     background: #fff;
-    color: $cool_grey;
+    color: $cool-grey;
   }
-  /*.row-quote { 
+  /*.row-quote {
     background: none repeat scroll 0 0 #E2D4DC;
     color: #772953;
     margin-left: -1.125em;
@@ -139,7 +143,7 @@
     text-indent: -12px;
   }
   .row-quote blockquote cite {
-    @include font_size (12);
+    @include font-size (12);
     color: #656565;
     font-style: normal;
     margin-left: 12px;
@@ -148,32 +152,32 @@
 }
 
 .row-enterprise {
-  background: $canonical_aubergine;
+  background: $canonical-aubergine;
   color:#fff;
-  @include rounded_corners(0);
-  
+  @include rounded-corners(0);
+
   .box, div {
-    background: $canonical_aubergine;
+    background: $canonical-aubergine;
     color:#fff;
   }
   a {
-    color:#fff; 
+    color:#fff;
   }
 }
 /*
 .audience-consumer.audience-enterprise{
-  
+
   .inner-wrapper {
-    background: $mid_aubergine;
+    background: $mid-aubergine;
     color: #fff;
   }
-  
+
   .row-box,
   .main-content {
     background: #fff;
-    color: $cool_grey;
+    color: $cool-grey;
   }
-  
+
 }
 */
 

sass/core/core-constants.scss

-@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
- */
-
-$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:				    #aea79f; /* 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:			    #aea79f; /* 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:                16;
-$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%;
\ No newline at end of file

sass/core/core-print.scss

@@ -2,13 +2,13 @@
 /**
  * Ubuntu print Stylesheet
  *
- * 
+ *
  * @project		Ubuntu Patterns
  * @author		Web Team at Canonical Ltd
  * @copyright	2012 Canonical Ltd
  *
  */
- 
+
 * { background: #fff; color: #000; }
 
 body {
@@ -32,6 +32,10 @@ footer {
 	display: none;
 }
 
+nav.nav-secondary {
+	display: block;
+}
+
 .wrapper {
 	width: auto;
 	margin: 0 5%;

sass/core/patterns/_arrows.scss

+@charset 'UTF-8';
+
+%arrow {
+  height: 11px;
+  position: absolute;
+  width: 18px;
+}
+
+.arrow-up {
+  @extend %arrow;
+  background: url('#{$asset-path}patterns/arrow-up.png') 0 0 no-repeat;
+  left: 20px;
+  top: -11px;
+}
+
+.arrow-down {
+  @extend %arrow;
+  background: url('#{$asset-path}patterns/arrow-down.png') 0 0 no-repeat;
+  bottom: -11px;
+  right: 20px;
+}
+
+.arrow-right {
+  @extend %arrow;
+  background: url('#{$asset-path}patterns/arrow-right.png') 0 0 no-repeat;
+  height: 18px;
+  right: -11px;
+  top: 20px;
+  width: 11px;
+}
+
+.arrow-left {
+  @extend %arrow;
+  background: url('#{$asset-path}patterns/arrow-left.png') 0 0 no-repeat;
+  bottom: 20px;
+  height: 18px;
+  left: -11px;
+  width: 11px;
+}
+
+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 {
+    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

+@charset 'UTF-8';
+
+blockquote {
+  &.pull-quote {
+    text-indent: 0;
+
+    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: $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;
+      }
+    }
+
+    &.js {
+      padding-left: $gutter-width * 3;
+      display: table-cell;
+    }
+  }
+
+  &.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;
+  }
+
+  &.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 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-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-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-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;
+  }
+}
+
+//.pull-quote {
+  //@include font-size (30);
+  //color: $warm-grey;
+  //line-height: 1.4;
+  //right: 0;
+//}
+
+html.no-svg,
+.opera-mini {
+  blockquote.quote-right-bottom {
+    background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.png");
+  }
+}
+
+// End blockquote
+
+// row-quote
+
+.row-quote {
+  @include rounded-corners(0);
+
+  blockquote {
+    @include rounded-corners(4px);
+    margin: 0;
+    padding: 0;
+
+    p {
+      margin-bottom: .75em;
+      line-height: 1.3;
+      color: $cool-grey;
+      padding-left: 10px;
+      padding-right: 10px;
+			//@include font-size (23);
+      //font-size: 1em;
+      text-indent: 0;
+    }
+
+    span {
+      font-weight: bold;
+      color: $ubuntu-orange;
+      line-height: 0;
+      position: relative;
+      left: -5px;
+
+      & + span { left: 5px; } // the second span
+    }
+
+    cite {
+      color: $cool-grey;
+      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;
+    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;
+    padding: $gutter-width $gutter-width $gutter-width 80px;
+
+    p {
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+
+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 {
+    text-indent: -7px;
+  }
+
+  .pull-quote {
+    text-indent: -.4em;
+  }
+
+  .row-quote blockquote p {
+    @include font-size (24.83);
+  }
+
+ 	blockquote.pull-quote p,
+ 	.row-quote blockquote p {
+    padding-left: 0;
+    padding-right: 0;
+    text-indent: -.7em;
+
+    span {
+      font-size: 1.391304348em;
+    }
+
+    cite {
+      margin-left: 0;
+      text-indent: 0;
+    }
+  }
+
+  blockquote.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)
+
+@media only screen and (min-width: 984px) {
+
+  .row-quote blockquote {
+    padding: 0 80px 20px;
+    text-indent: -10px;
+	}
+
+	blockquote.pull-quote p span,
+	.row-quote blockquote p span {
+		top: 10px;
+	}
+
+} // end @media only screen and (min-width: 984px)
+

sass/core/patterns/_boxes.scss

+@charset 'UTF-8';
+
+%box {
+  @include rounded-corners(4px);
+  padding: 1.333em $gutter-width;
+}
+
+.box {
+  @extend %box;
+  background: #fff;
+  border: 1px solid #dfdcd9;
+}
+
+.box-grey {
+  @extend %box;
+  background: $light-grey;
+  color: $cool-grey;
+}
+
+.box-orange {
+  background: $ubuntu-orange;
+  color: #fff;
+}
+
+.box-highlight {
+	@include box-shadow(0 2px 2px 0 #c2c2c2);
+	border: 1px solid $light-grey;
+}
+
+.box-textured {
+  @include box-shadow(0 2px 2px 0 #c2c2c2);
+  background: url("#{$asset-path}patterns/grey-textured-background.jpg");
+  border: 0;
+}
+
+.box-padded {
+  @include rounded-corners(4px);
+  background: $box-solid-grey;
+  border: 0;
+  margin-bottom: 20px;
+  padding: 6px 5px;
+
+  h3 {
+    @include font-size(19.5);
+    margin-left: ($gutter-width / 4);
+    margin-top: 5px;
+  }
+
+  li h3 { // this happens in 'Further reading' /cloud/insights
+	  @include font-size(19.5);
+	  margin: 0;
+  }
+
+  div {
+    @include rounded-corners(4px);
+      background: #fff;
+      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: 0;
+  margin-bottom: 20px;
+  padding: 11px 5px 6px;
+
+  h3 {
+    color: #fff;
+    margin-left: ($gutter-width / 4);
+    @include font-size(19.5);
+  }
+
+  h4 {
+    @include font-size(16);
+    font-weight: normal;
+  }
+
+  > div {
+    @include rounded-corners(4px);
+      background: #fff;
+      overflow: hidden;
+      padding: 20px 8px;
+  }
+
+  div div {
+    margin-bottom: 0;
+  }
+
+	.inline-icons {
+		display: table;
+		width: 100%;
+		margin: 0;
+		text-align: center;
+
+    li {
+      display: table-cell;
+      text-align: left;
+      float: none;
+    }
+	}
+
+  .one-col {
+    width: 48px;
+    float: left;
+  }
+}
+
+
+.resource {
+  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 {
+    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; }
+
+  &:after {
+      -moz-box-shadow: 0 -1px 2px 0 #ddd;
+      -webkit-box-shadow: 0 -1px 2px 0 #ddd;
+    box-shadow: 0 -1px 2px 0 #ddd;
+    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;
+  }
+
+  &:hover:after {
+    right: -9px;
+    top: 18px;
+    width: 48px;
+  }
+
+  &: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);
+    box-shadow: -2px 2px 2px rgba(176, 176, 176, .4);
+    z-index: 2;
+    @include rounded-corners(0 0 0 0);
+  }
+
+  &:hover:before {
+    border-bottom-width: 35px;
+    border-right-width: 35px;
+  }
+
+  &:last-of-type {
+    margin-bottom: 30px;
+  }
+
+  .content-cat {
+    background: url("#{$asset-path}icons/icon-resource-hub-icon-document.png") left center no-repeat;
+    color: #aea79f;
+    font-size: 14px;
+    letter-spacing: 1px;
+    margin: 0;
+    padding-left: 20px;
+    padding: 0;
+    position: absolute;
+    text-transform: uppercase;
+  }
+
+  .content-cat-webinar {
+    background: url("#{$asset-path}icons/icon-resource-hub-webinar.png") left center no-repeat;
+  }
+
+  &.box-image-centered div + span img {
+    margin-top: 40px;
+  }
+}
+
+html.yui3-js-enabled .resource:hover a {
+  text-decoration: underline;
+}
+
+.row-grey .resource:before {
+  border-right-color: #f7f7f7;
+}
+
+@media only screen and (max-width : 768px) {
+
+  .box-padded-feature .inline-icons li {
+    float: left;
+    display: block;
+  }
+
+  .box-padded-feature {
+    .one-col {
+      width: 48px;
+      float: left;
+    }
+  }
+
+} // 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/_buttons.scss

+@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;
+}
+
+a.cta-large,
+button.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;
+}
+
+a.link-cta-inverted,
+button.cta-inverted {
+	background: #fff;
+	color: $cool-grey;
+}
+
+.row-enterprise a.link-cta-canonical,
+.row-enterprise button.link-cta-canonical {
+  background: #fff;
+  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;
+}
+
+a.link-cta-canonical:hover,
+button.cta-canonical:hover {
+	background: darken($canonical-aubergine, 6.2%); // #5f193e
+  text-decoration: none;
+}
+
+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;
+}
+
+a.cta-deactivated,
+a.cta-deactivated:hover,
+button.cta-deactivated,
+button.cta-deactivated:hover {
+  background: $box-solid-grey;
+  color: #fff;
+  cursor: not-allowed;
+}
+
+@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

+@charset 'UTF-8';
+
+#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';
+	}
+}
+
+@media only screen and (min-width : 768px) {
+
+	#context-footer {
+    margin-bottom: 12px;
+    padding-left: 30px;
+    padding-right: 30px;
+
+    div + div {
+      width: 31%;
+    }
+
+    div div.feature-four {
+      padding-bottom: 20px;
+    }
+
+    hr {
+      margin: 0 -30px 40px;
+    }
+
+    & > div {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+} // 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) {
+
+	#context-footer {
+		padding: 0 40px 10px;
+	}
+
+	#context-footer div div {
+		display: table-cell;
+		float: none;
+		padding-left: 20px;
+		margin-bottom: 0;
+	}
+
+	#context-footer hr {
+		margin: 0 -40px 40px;
+	}
+
+
+} // end @media only screen and (min-width: 984px)

sass/core/patterns/_footer.scss

+@charset "UTF-8";
+
+body footer.global #nav-global li:first-of-type a {
+	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 repeat scroll 0 0 rgba(0, 0, 0, 0);
+    border: 0 none;
+    float: left;
+    font-size: 0.75em;
+    letter-spacing: 0.05em;
+    margin: 0 0 0 -10px;
+    padding-right: 20px;
+    text-transform: uppercase;
+    width: 100%;
+
+    a {
+      @include box-sizing();
+      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;
+      display: block;
+      float: none;
+      font-weight: 400;
+      padding: 12px 0 12px 28px;
+    }
+	}
+} /* End footer.global */
+
+html.no-svg, .opera-mini {
+  footer.global .top-link {
+    a {
+      background-image: url("#{$asset-path}pictograms/picto-pack/picto-upload-warmgrey.png");
+    }
+  }
+}
+
+
+@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;
+	}
+
+  #livechat-eye-catcher {
+    display: block;
+  }
+
+} // end @media only screen and (max-width : 768px)
+
+@media only screen and (min-width : 768px) {
+
+	footer.global .inline li {
+	    display: inline;
+	    float: left;
+	}
+
+} // @media only screen and (min-width : 768px)
+
+@media only screen and (min-width : 769px) {
+
+  footer.global .top-link {
+    display: none;
+  }
+
+  footer.global .footer-b h2 a i {
+		font-style: normal;
+    display: inline;
+  }
+
+} //@media only screen and (min-width : 769px)
+
+@media only screen and (min-width: 984px) {
+
+	footer.global .legal {
+		width: 984px; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
+	}
+
+	footer.global {
+		padding: 30px 0 20px;
+		
+		.legal {
+			background: url("#{$asset-path}logos/logo-ubuntu-grey.png") 100% 0 no-repeat;
+		}
+
+		.footer-a {
+			display: block;
+		}
+	}
+
+
+
+} // end @media only screen and (min-width: 984px)
+

sass/core/patterns/_forms.scss

+@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;
+		}
+	}
+}
+
+@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/_notifications.scss

+@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/patterns.scss

+@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
+ *
+ */
+
+@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

+@charset 'UTF-8';
+
+// import required files
+
+@import '_core-constants';
+@import '_core-mixins';
+
+@import '_core-grid';
+@import '_core-grid-tablet';
+@import '_core-grid-desktop';
+
+@import '_core';
+@import '_core-templates';
+
+@import 'patterns/patterns';

sass/style.scss

-@import 'core/core-constants.scss';
-@import 'core/core-mixins.scss';
+@import 'core/ubuntu-styles';
 @import 'mixins.scss';
 @import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,400italic);