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

@@ -4,24 +4,24 @@
  * @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;
 }
+
+// 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
  *
@@ -26,10 +30,10 @@
  */
 
 .audience-consumer{
-  color: $cool_grey;
+  color: $cool-grey;
 
   .row-box, .main-content {
-    color: $cool_grey;
+    color: $cool-grey;
   }
 
   .inner-wrapper {
@@ -41,19 +45,19 @@
     background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-br-287x287.png") no-repeat;
     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,17 +66,17 @@
   .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;
     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;
@@ -81,7 +85,7 @@
   }
   .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; }
@@ -102,7 +106,7 @@
   }
   th[scope="col"] {
     background: #E2D4DC;
-    color: $canonical_aubergine;
+    color: $canonical-aubergine;
   }
   tbody th[rowspan] { background: #F7F2F6; }
   tfoot th[rowspan] { background: #dfdcd9; }
@@ -111,12 +115,12 @@
     background: #dfdcd9;
   }
   .inner-wrapper {
-    background: $dark_aubergine;
+    background: $dark-aubergine;
 	  color: #fff;
 	}
 	.row-box {
     background: #fff;
-    color: $cool_grey;
+    color: $cool-grey;
   }
   /*.row-quote {
     background: none repeat scroll 0 0 #E2D4DC;
@@ -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,12 +152,12 @@
 }
 
 .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 {
@@ -164,14 +168,14 @@
 .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

@@ -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/_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/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);