Commit a60faf68 authored by Mattia Migliorini's avatar Mattia Migliorini

Update frontend framework to the latest responsive version available

parent d30863b5
This diff is collapsed.
@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
This diff is collapsed.
This diff is collapsed.
@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; }
......@@ -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;
}
\ No newline at end of file
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
@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;
}
}
*/
......
@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
This diff is collapsed.
This diff is collapsed.
......@@ -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%;
......
@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)
@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)
@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)
@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)
@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)
@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)
@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)
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
@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)
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
@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';
@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';
@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);
......
This diff is collapsed.
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