Skip to content

valencia
valencia
Commit 4d31dfc7 authored by Mattia Migliorini's avatar Mattia Migliorini
Browse files
Options

Use SASS instead of LESS 

Include Ubuntu Style Guide source files (.scss)
Write documentation to include JS (todo: include from Ubuntu assets)
parent 79de4ee9
Show whitespace changes
Inline Side-by-side
Showing with 3685 additions and 5 deletions
.gitignore
View file @ 4d31dfc7
*.sublime*
.sass-cache
\ No newline at end of file
less/style.less → sass/style.scss
View file @ 4d31dfc7
@import 'ubuntu/core-constants.scss';
.logo {
position:absolute;
top:0;
......
sass/ubuntu/core-constants.scss 0 → 100644
View file @ 4d31dfc7
@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/ubuntu/core-grid.scss 0 → 100644
View file @ 4d31dfc7
@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
*/
.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: left;
margin-right: $gutter;
margin-bottom: 20px;
padding: 0;
position: relative;
}
.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 .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 {
@include box_sizing;
border-bottom: 1px dotted $warm_grey;
clear: both;
position: relative;
}
.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)); }
/**
* Borders
*
* @section borders
*/
.border { /** Border on right hand side of a column. */
border-right: 1px solid #ddd;
margin-right: $gutter_width / 2;
padding-right: .5625em; /* .625 - 1px */
}
// border
@mixin border($width: 1px, $style: dotted, $color: #ddd) {
border-right: $width $style $color;
margin-right: $gutter_width / 2;
padding-right: .5625em; /* .625 - 1px */
}
/**
* Push and pull
*
* Use these classes to push elements into the next
* column and pull it into the previous column
*
* @section push-pull
*/
/**
* Vertical gutter
*
* Add a gutter above or below and element
*
* @section last
*/
div.prepend-top, .prepend-top { margin-top: $gutter_width; }
div.append-bottom, .append-bottom { margin-bottom: $gutter_width; }
/**
* Last
*
* Add to last column a row
*
* @section last
*/
.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; }
/*@media handheld, only screen and (max-width: 767px) {
body {
font-size: 16px;
-webkit-text-size-adjust: none;
}
.row, body, .container {
width: 100%;
min-width: 0;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
.one-col, .two-col, .three-col, .fourcol, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col {
width: auto;
float: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
}
}*/
sass/ubuntu/core-mixins.scss 0 → 100644
View file @ 4d31dfc7
/**
* mixins
*
* @section mixins
*/
@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: 0 2px 2px 0 #c2c2c2) {
-moz-box-shadow: $shadow;
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
@mixin gradient($from, $to) {
background-color: $to;
background-image: -moz-linear-gradient($from, $to);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
background-image: -webkit-linear-gradient($from, $to);
background-image: -o-linear-gradient($from, $to);
}
@mixin footer($background) {
padding: $gutter_width $two_col $gutter_width $four_col;
margin-bottom: 0;
background: url($background) no-repeat scroll $one_col center #F7F7F7;
}
@mixin clearfix() {
*zoom:1;
&:before,
&:after {
content:"";
display:table;
}
&:after {
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;
}
\ No newline at end of file
sass/ubuntu/core-pattern.scss 0 → 100644
View file @ 4d31dfc7
@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
*
*/
/**
* Links
*
* @section links
*/
html { /* same colour as the footer background for if there is a short page */
background: $light_grey;
}
p.intro {
@include font_size (23);
line-height: 1.4;
}
header.banner {
background: $ubuntu_orange;
position: relative;
z-index: 2;
width: 100%;
margin-bottom: 20px;
display: inline-block;
border-top: 0;
-moz-box-shadow:
inset 0 2px 2px -2px #777,
2px 1px #fff;
-webkit-box-shadow:
inset 0 2px 2px -2px #777,
2px 1px #fff;
box-shadow:
inset 0 2px 2px -2px #777,
2px 1px #fff;
}
header.banner .nav-primary {
border: 0;
margin: 0 auto;
overflow: hidden;
width: 984px; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
}
header.banner .nav-primary ul {
border-right: 1px solid lighten($ubuntu_orange, 10%);
float: left;
margin: 0;
position: relative;
}
header.banner .nav-primary li {
border-left: 1px solid darken($ubuntu_orange, 5%);
float: left;
list-style-image: none;
margin: 0;
text-indent: 0;
vertical-align: bottom;
}
header.banner .nav-primary ul li:last-child {
border-right: 1px solid darken($ubuntu_orange, 5%);
}
header.banner .nav-primary li a:link,
header.banner .nav-primary li a:visited{
font-size: 14px;
border-left: 1px solid lighten($ubuntu_orange, 7%);
color: #fff;
display: block;
margin-bottom: 0;
padding: 12px 14px 14px;
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;
}
header.banner .nav-primary a.active {
background: #B83A10;
border-left: 1px solid lighten($ubuntu_orange, 7%);
}
header.banner .nav-primary li a:hover {
background: #e1662f;
border-top: 0;
-moz-box-shadow: inset 0 2px 2px -2px #777;
-webkit-box-shadow: inset 0 2px 2px -2px #777;
box-shadow: inset 0 2px 2px -2px #777;
}
/* nav-secondary */
.nav-secondary {
border-bottom: 1px solid #dfdcd9;
margin-bottom: 0;
ul {
float: left;
margin-bottom: 10px;
margin-left: 2px;
li {
float: left;
margin-top: 16px;
font-size: 14px;
margin-right: 15px;
a:link,
a:visited {
color: #333;
font-size: 14px;
float: left;
}
a:hover,
a:active {
color: $ubuntu_orange;
text-decoration: none;
}
}
li,
li.active a:link,
li.active a:visited {
color: $ubuntu_orange;
text-decoration: none;
}
}
ul.breadcrumb {
margin-left: 20px;
li,
li a:link,
li a:visited {
color: $warm_grey;
margin-right: 8px;
}
li.active a:link,
li.active a:visited {
color: $ubuntu_orange;
}
}
}
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("/sites/ubuntu/latest/u/img/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;
padding: 7px 14px 9px 0;
img {
margin-right: 8px;
position: absolute;
left: -999em;
}
span {
float: left;
font-size: 23px;
padding-left: 122px;
padding-right: 20px;
position: relative;
top: 5px;
}
}
.nav-primary.nav-left {
.logo-ubuntu {
float: right;
}
}
.nav-primary.nav-right {
.logo-ubuntu {
float: left;
}
}
}
/* Footer */
footer.global {
-moz-box-shadow: inset 0 2px 2px -2px #d3d3d3;
-webkit-box-shadow: inset 0 2px 2px -2px #d3d3d3;
background: $light_grey;
border-top: 0;
box-shadow: inset 0 2px 2px -1px #d3d3d3;
clear: both;
display: block;
padding: 30px 0 20px;
position: relative;
width: 100%;
.footer-a {
border-bottom: 1px solid #d8d8d8;
clear: both;
padding-bottom: 20px;
margin-bottom: 20px;
div {
padding-bottom: 10px;
}
ul {
border-collapse: collapse;
display: table;
float: none;
margin-left: -15px;
padding-bottom: 0;
width: 100%;
}
ul li {
border-right: 1px dotted $warm_grey;
display: table-cell;
float: none;
margin-left: 15px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 5px;
width: auto;
width: 124px;
}
ul li.secondary-desktop {
width: 128px;
}
ul li.secondary-server {
width: 118px;
}
ul li.secondary-tablet {
width: 123px;
}
ul li.secondary-cloud {
width: 115px;
}
ul li.secondary-tv {
width: 115px;
}
ul li.secondary-management {
width: 143px;
}
ul li:last-child, ul li.last-item {
border: 0;
padding-right: 0;
}
ul ul {
margin-left: 0;
display: block;
}
li li {
margin-left: 0;
float: none;
width: auto;
display: block;
min-height: 0;
border: 0;
margin-bottom: 2px;
padding-left: 0;
padding-bottom: inherit;
background: none;
}
li li:last-child {
margin-bottom: 0;
}
li li a {
display: block;
}
}/* end footer-a */
nav div.footer-a div, .inline-lists ul, .legal {
margin: 0 auto;
width: 984px; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
}
.legal {
background: url("/sites/ubuntu/latest/u/img/logos/logo-ubuntu-grey.png") 100% 0 no-repeat;
position: relative;
clear: both;
min-height: 40px;
}
h2 {
@include font_size (12);
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);
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;
}
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: "•";
vertical-align: middle;
margin: 0 5px;
}
ul.inline li:last-child {
width: 120px;
}
ul.inline li:last-child:after {
content: "";
}
.footer-b {
border-bottom: 1px solid #d8d8d8;
padding: 0 0 20px;
margin: 0 auto 20px;
ul ul, ul li, ul ul, h2, h2 a {
margin: 0;
padding: 0;
line-height: 2;
width: auto;
float: none;
}
h2 {
float: left;
margin-right: 6px;
display: inline;
}
li {
width: 100%;
display: block;
clear: both;
overflow: hidden;
}
li li {
width: auto;
background: 0;
float: left;
clear: none;
}
li li:last-child {
width: 200px;
}
li li:after {
content: "|";
padding-left: 6px;
padding-right: 6px;
position: relative;
}
li h2 a:after,
li li:last-child:after {
content: "";
}
}/* end footer-b */
} /* End footer.global */
/* contextualised footers */
#context-footer {
@include font_size (14);
border-bottom: 0;
padding-bottom: 1px;
padding-top: 0;
width: 100%;
}
#context-footer hr {
background: $ubuntu_orange;
height: 14px;
margin: 0 -40px 40px;
border: 0;
-moz- box-shadow: inset 0 2px 2px -2px #333;
-webkit box-shadow: inset 0 2px 2px -2px #333;
box-shadow: inset 0 2px 2px -2px #333;
clear: both;
}
#context-footer div.twelve-col {
display: table;
float: none;
margin-bottom: 7px;
}
#context-footer div div {
display: table-cell;
float: none;
padding-left: 20px;
margin-bottom: 0;
}
#context-footer div div div {
display: block;
padding-left: 0;
margin-bottom: 0;
}
#context-footer div div.feature-one {
padding-left: 0;
}
#context-footer div div.feature-four {
margin-right: 0;
}
#context-footer ul {
margin-bottom: 5px;
}
#context-footer li.active {
display: none;
}
#context-footer h3 {
@include font_size (16);
font-weight: normal;
}
#context-footer .list a:after {
content: "\0000a0›";
}
/*
* CTA Buttons
*/
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 font_size (16);
@include rounded_corners(4px);
@include gradient($ubuntu_orange, #c03f11);
color: #fff;
text-decoration:none;
display: inline-block;
margin: 0;
padding: 8px 14px;
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;
}
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"] {
@include gradient($canonical_aubergine, #5f193e);
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 {
text-decoration: none;
background: $ubuntu_orange;
}
a.link-cta-canonical:hover,
button.cta-canonical:hover, {
text-decoration: none;
background: $canonical_aubergine;
}
a.link-cta-inverted:hover,
.row-enterprise a.link-cta-canonical:hover,
button.cta-inverted:hover,
.row-enterprise button.cta-canonical:hover {
text-decoration: underline;
background: #fff;
}
a.cta-deactivated,
a.cta-deactivated:hover,
button.cta-deactivated,
button.cta-deactivated:hover {
color: #fff;
background: $box_solid_grey;
cursor: not-allowed;
}
/*
* End CTA Buttons
*/
.four-col p:last-child {
margin-bottom: 0;
}
/**
* Forms
*
* Global form element styles
*
* @section forms
*/
form .fieldset-1 { background-image: url("/sites/ubuntu/latest/u/img/patterns/fieldsets-1.png"); }
form .fieldset-2 { background-image: url("/sites/ubuntu/latest/u/img/patterns/fieldsets-2.png"); }
form .fieldset-3 { background-image: url("/sites/ubuntu/latest/u/img/patterns/fieldsets-3.png"); }
form .fieldset-4 { background-image: url("/sites/ubuntu/latest/u/img/patterns/fieldsets-4.png"); }
form .fieldset-submit ul {
margin-bottom: 0px;
}
form fieldset .mktError, form .errMsg {
color: $error;
}
.reqMark {
color: $error;
}
form fieldset .mktFormMsg {
clear: both;
display: block;
}
.donation-button {
margin-bottom: 1em;
}
.mktFormText, .mktFormTextarea {
width: 83%;
}
/**
* Components
*
* @section components
*/
.wrapper {
@include box_sizing;
background: #fff;
margin: 0 auto;
text-align: left;
width: 984px;
position: relative;
}
.inner-wrapper {
@include box_shadow(0 0 3px #c9c9c9);
@include box_sizing;
@include rounded_corners(4px);
background: #fff;
clear: both;
display: block;
float: left;
width: 100%;
margin: 10px 0 30px;
padding-bottom: 20px;
position:relative;
z-index:1;
}
#main-content .row-hero {
margin-top: 40px;
padding-top: 0;
}
.row-feature {
background: none;
border: 1px solid #dfdcd9;
padding-bottom: 20px;
}
.row-grey {
background: $light_grey;
}
.box, .box-grey {
@include rounded_corners(4px);
padding: 1.333em $gutter_width;
}
.box {
background: #fff;
border: 1px solid #dfdcd9;
}
.box-grey {
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("/sites/ubuntu/latest/u/img/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 6px;
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("/sites/ubuntu/latest/u/img/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 0;
}
div div {
margin-bottom: 0;
}
.inline-icons { display: table; width: 100%; margin: 0 0 $gutter_width 0; }
.inline-icons li { display: table-cell; text-align: left; float: none; }
}
/*
* Arrows for the pointing boxes component
*/
.arrow-right, .arrow-up, .arrow-down, .arrow-left {
height: 11px;
position: absolute;
width: 18px;
}
.arrow-right{
background: url("/sites/ubuntu/latest/u/img/patterns/arrow-right.png") 0 0 no-repeat;
height: 18px;
right: -11px;
top: 20px;
width: 11px;
}
.arrow-up{
background: url("/sites/ubuntu/latest/u/img/patterns/arrow-up.png") 0 0 no-repeat;
left: 20px;
top: -11px;
}
.arrow-down{
background: url("/sites/ubuntu/latest/u/img/patterns/arrow-down.png") 0 0 no-repeat;
bottom: -11px;
right: 20px;
}
.arrow-left{
background: url("/sites/ubuntu/latest/u/img/patterns/arrow-left.png") 0 0 no-repeat;
bottom: 20px;
height: 18px;
left: -11px;
width: 11px;
}
div > .arrow-left { left: -10px; }
/*
* Lists
*/
.list, .list-ubuntu, .list-canonical {
list-style: none;
margin-left: 0;
li {
border-bottom: 1px dotted $warm_grey;
margin-bottom: 0;
padding: 10px 0;
}
li:last-of-type, li.last-item {
border: 0;
padding-bottom: 0;
}
}
nav .list a {
display: block;
}
.list-ubuntu li, .list-canonical li {
background-repeat: no-repeat;
background-position: 0 15px;
padding-left: 25px;
}
.list-ubuntu li { background-image: url("/sites/ubuntu/latest/u/img/patterns/tick-orange.png"); }
.list-canonical li { background-image: url("/sites/ubuntu/latest/u/img/patterns/tick-aubergine.png"); }
blockquote.pull-quote p {
margin-left: 0.4em;
text-indent: -0.4em;
font-size: 30px;
line-height: 1.3;
color: #aea79f;
}
blockquote.pull-quote p cite {
margin: 10px 0 0 0.8em;
font-size: 16px;
font-weight: 300;
display: block;
}
blockquote.quote-canonical,
blockquote.quote-canonical-white{
@include font_size (16);
background: url("/sites/ubuntu/latest/u/img/patterns/quote-white-360x360.png") no-repeat 20px -130px;
color: $canonical_aubergine;
float: right;
height: 215px;
margin-top: 0;
padding: 20px 60px 0 60px;
position: relative;
width: 236px;
}
blockquote.quote-canonical-white{
background: url("/sites/ubuntu/latest/u/img/patterns/quote-aubergine-345x345.png") no-repeat 0 0;
color: #fff;
padding: 80px 60px 0 60px;
height: 265px;
}
blockquote.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;
}
blockquote.quote-right-bottom p { color: #fff; }
blockquote.quote-right-bottom {
background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-br-287x287.png") no-repeat;
color: #fff;
height: 167px;
padding: 60px 40px;
position: absolute;
right: -($gutter_width * 2);
top: -($gutter_width * 4.5);
width: 207px;
}
blockquote.quote-grey {
@include font_size (36);
background: url("/sites/ubuntu/latest/u/img/patterns/quote-grey-br-211x211.png") no-repeat scroll 0 0 transparent;
color: #FFFFFF;
height: 152px;
line-height: 40px;
margin-left: 20px;
padding: 60px 0 0;
text-align: center;
width: 211px;
}
blockquote.quote-bottom-left {
background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-bl-287x287.png") no-repeat;
color: #fff;
height: 167px;
padding: 55px 40px 70px 45px;
width: 225px;
}
.row-quote {
@include rounded_corners(0);
blockquote {
@include font_size (24);
@include rounded_corners(4px);
margin: 0;
padding: 0 80px 20px;
text-indent: -10px;
p {
@include font_size (16);
margin-bottom: 0.75em;
line-height: 1.3;
color: $cool_grey;
}
cite {
@include font_size (12);
color: $cool_grey;
font-style: normal;
margin-bottom: 0;
}
}
.quote-twitter {
background: #fcece7 url("/sites/ubuntu/latest/u/img/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("/sites/ubuntu/latest/u/img/pictograms/pictogram-twitter-54x63.png") 99% bottom no-repeat;
padding: $gutter_width $gutter_width $gutter_width 80px;
p {
margin: 0;
padding: 0;
}
}
}
.pull-wrap {
padding-right: $five_col;
width: $seven_col;
margin-bottom: 20px;
}
.pull-quote {
@include font_size (30);
color: $warm_grey;
line-height: 1.4;
right: 0;
text-indent: -0.4em;
}
.pull-quote.js {
padding-left: $gutter_width*3;
display: table-cell;
}
blockquote.pull-quote {
text-indent: 0;
}
.row-box-feature {
background: url("/sites/ubuntu/latest/u/img/patterns/grey-textured-background.jpg");
padding-top: $gutter_width;
}
.tabbed-menu {
@include box_sizing;
@include rounded_corners(4px 4px 0 0);
@include box_shadow(0 -1px 10px #cfcfcf inset);
background: none repeat scroll 0 0 $light_grey;
position: relative;
padding-top: $gutter_width;
padding-bottom: $gutter_width;
ul {
@include box_sizing;
margin-bottom: 0;
display: table;
width: 100%;
table-layout: fixed;
position: relative;
padding: 0;
}
li {
text-align: center;
display: table-cell;
}
a {
color: #666;
display: block;
outline: none;
}
a:hover {
text-decoration: none;
}
a.active {
color: $canonical_aubergine;
text-decoration: none;
}
.arrow {
position: absolute;
bottom: 0;
}
}
.tabbed-content {
@include clearfix();
padding: $gutter_width $gutter_width*2 0;
.row {
padding-left: 0;
padding-right: 0;
}
}
.tabbed-content .main-content {
padding-bottom: 40px;
}
html.yui3-js-enabled .tabbed-content.hide {
display: none;
opacity: 0;
}
.tabbed-content-bg {
@include box_sizing;
background: #fff;
margin-left: 20px;
margin-right: 20px;
}
.tabbed-content-bg .row-box {
padding-left: 0;
padding-right: 0;
}
.slider {
@include rounded_corners(4px);
background: $light_grey;
padding-top: $gutter_width * 2;
.slide-window {
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;
}
.slider-dots {
ul {
position: absolute;
top: 550px;
left: 220px;
z-index: 5;
}
li {
background: url("/sites/ubuntu/latest/u/img/patterns/sprite-pager.png") no-repeat;
list-style-type: none;
float: left;
text-indent: -9999em;
width: 7px;
height: 7px;
margin-right: 0.75em;
background-position: 0 -8px;
}
li.active {
background-position: 0 0;
}
a {
display:block;
outline: 0;
}
}
.slide {
float: right;
width: 700px;
h3{
margin-top:65px;
display: inline-block;
}
p {
width: 350px;
}
}
.arrow-prev,
.arrow-next {
font-size: 5em;
margin-top: 150px;
display: block;
color: $warm_grey;
outline: 0;
}
.arrow-prev:hover,
.arrow-next:hover {
text-decoration: none;
color: $cool_grey;
}
.arrow-prev:active,
.arrow-next:active {
padding-top:1px;
text-decoration: none;
}
.arrow-prev:focus,
.arrow-next:focus {
text-decoration: none;
}
}
/**
* Helper classes
*
* @section helper
*/
.no-bullets {
list-style: none;
margin-left:0;
}
.inline {
margin-left: 0;
li {
display: inline;
list-style: none;
margin-left: 0;
float:left;
}
}
.inline-icons { margin: 0 0 $gutter_width 0; }
.inline-icons li { margin-right: 20px; margin-bottom: 20px; text-align: left; display: inline-block; }
.inline-icons.no-margin-bottom li { margin-bottom: 0; }
.inline-icons li.last-item { margin-right: 0; }
.inline-icons img { vertical-align: middle; }
.left { float: left; }
.right { float: right; }
.accessibility-aid, .off-left { position: absolute; left: -999em; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.middle {
display: inline-block;
vertical-align: middle;
text-align: center;
}
.no-margin { margin: 0; }
.no-margin-bottom { margin-bottom: 0; }
.no-padding-bottom { padding-bottom: 0; }
.note {
@include font_size (13);
color: $warm_grey;
}
.pull-left-20 { margin-left: -20px; }
.pull-right-20 { margin-right: -20px; }
.pull-left-40 { margin-left: -40px; }
.pull-right-40 { margin-right: -41px; }
.no-border { border: none; }
.no-indent { text-indent: 0; }
.extra-gap div.last { padding-left: 1.25em; }
.boxed {
@include rounded_corners(4px);
background-color: $light_grey;
margin-bottom: 1.538em;
}
.link-top {
@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;
}
.box .pull-bottom-right {
@include rounded_corners(0 0 4px 0);
}
.pull-bottom-left { margin-left: -20px; margin-bottom: -21px; }
.pull-top-right { margin-right: -20px; margin-top: -21px; }
.pull-top-right { margin-left: -20px; margin-top: -21px; }
.row.vertical-divider {
padding-bottom: 40px;
}
.vertical-divider {
> div,
> li {
border-right: 1px dotted $warm_grey;
margin-right: 0;
padding-right: 20px;
padding-left: 20px;
float: none;
display: table-cell;
vertical-align: top;
}
> div:last-child,
> li:last-child,
> div.last-col,
> li.last-col,
> div:last-of-type,
> li:last-of-type {
border-right: 0;
padding-right: 0;
}
> div:first-child,
> li:first-child,
> div.first-col,
> li.first-col,
> div:first-of-type,
> li:first-of-type {
padding-left: 0;
}
}
.vertical-divider-full {
padding-bottom: 0;
> div {
padding-bottom: 40px;
}
}
.row.vertical-divider-full {
padding-bottom: 0;
}
div.warning {
@include rounded_corners(4px);
background-color: #fdffdc;
color: #333;
p {
padding: $gutter_width;
margin: 0;
}
}
.row-box.row-image-centered {
display: table;
padding-top: 20px;
padding-bottom: 20px;
}
.row.row-image-centered {
display: table;
padding-top: 40px;
padding-bottom: 40px;
}
.row-hero.row-image-centered {
padding-top: 0;
}
div.box-image-centered {
width: 100%;
clear: both;
position: relative;
}
div.row-image-centered,
div.box-image-centered {
@include box_sizing;
padding-top: 0;
display: table;
div {
float: none;
display: table-cell;
position: relative;
p, h2, h3 {
display: block;
width: 100%;
float: left;
}
}
span {
display: table-cell;
text-align: center;
vertical-align: middle;
float: none;
position: relative;
top: 0;
}
span img {
padding-right: 20px; /* if image is on the left hand side */
}
div + span img { /* if image is on the right hand side */
padding-right: 0;
margin-right: -20px;
}
}
div.box-image-centered {
padding-top: 20px;
}
.yui3-tooltip-hidden {
display: none;
}
.yui3-tooltip-content {
@include box_shadow(0px 2px 8px hsla(0, 0%, 0%, .20));
position: relative;
max-width: 520px;
_width: 520px; /* IE6 */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid $box_solid_grey;
color: $cool_grey;
background: url("/sites/ubuntu/latest/u/img/patterns/grey-textured-background.jpg") repeat scroll 0 0 transparent;
margin-top: -30px;
}
.yui3-tooltip .yui3-widget-bd {
padding: 20px;
width: 320px;
}
.yui3-tooltip .yui3-widget-bd * {
max-width: 100%;
}
.yui3-tooltip .yui3-widget-bd h5 {
margin-bottom: 10px;
font-size: 22px;
font-weight: 300;
}
.yui3-tooltip .yui3-widget-bd img {
float: left;
margin-right: 10px;
}
.yui3-tooltip .yui3-widget-bd q {
margin-top: 20px;
margin-bottom: 0;
padding: 10px 0;
display: block;
font-size: 13px;
border-top: 1px dotted $warm_grey;
border-bottom: 1px dotted $warm_grey;
font-style: italic;
}
.yui3-tooltip .yui3-widget-bd p:last-child {
margin-bottom: 0;
}
.yui3-tooltip .yui3-widget-ft,
.yui3-tooltip .yui3-widget-ft div {
*display: none; /* IE6, IE7 */
position: absolute;
width: 0;
height: 0;
border-style: solid;
line-height: 0;
font-size: 0;
}
.yui3-tooltip .yui3-tooltip-align-bottom .yui3-widget-ft,
.yui3-tooltip .yui3-tooltip-align-bottom .yui3-widget-ft div {
top: -10px;
left: 50%;
margin: 0 0 0 -10px;
border-width: 0 10px 10px 10px;
border-color: $box_solid_grey transparent;
}
.yui3-tooltip .yui3-tooltip-align-bottom .yui3-widget-ft div {
top: 0;
border-color: $box_solid_grey transparent;
}
.tooltip-label {
@include rounded_corners(4px);
@include box_shadow(3px 3px 6px rgba(0, 0, 0, 0.3));
display:none;
background: #fff;
padding: 6px 5px;
border: 1px solid #DFDCD9;
position:absolute;
top: -20px;
z-index: 1000;
font-size: 13px;
line-height: 1;
white-space: nowrap;
margin: 0;
}
/* share this */
.share-this {
margin-top: 10px;
float: left;
}
#box-search {
float: right;
margin-bottom: 0;
padding-bottom: 5px;
padding-top: 7px;
border-right: 0;
padding-right: 0;
form input[type="text"] {
@include rounded_corners(6px);
@include font_size (13);
width: 86px;
height: 24px;
border-bottom: 1px solid #de6532;
border-left: 0;
border-right: 0;
border-top: 0;
margin-bottom: 0;
background: #be3d00;
background: url("/sites/ubuntu/latest/u/img/icons/icon-search.png") no-repeat scroll 5px center, none repeat scroll 0 0 #BE3D00;
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-appearance: none;
padding-left: 30px;
color: #fff;
}
form input[type="text"]:focus {
width: 160px;
background:#a63603;
background: url("/sites/ubuntu/latest/u/img/icons/icon-search.png") no-repeat 5px center,#a63603;
}
form button {
display: none;
}
}
.lt-ie8 {
#box-search {
margin-right: 0;
padding-top: 9px;
}
body #box-search form .form-text {
width: 158px !important;
}
}
/*
*
* Popover styles
*
* Example:
* <a tooltip="&lt;h5&gt;Ubuntu&lt;/h5&gt;&lt;p&gt;About Ubuntu.&lt;/p&gt;" tooltip:alignment="bottom" href="#">Ubuntu</a>
*
*/
.yui3-tooltip-hidden {
display: none;
}
.yui3-tooltip-content {
@include box_shadow(0px 2px 8px hsla(0, 0%, 0%, .20));
position: relative;
max-width: 520px;
_width: 520px; /* IE6 */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #e3e3e3;
color: #333;
background: $light_grey; /* Fallback */
}
.yui3-tooltip .yui3-widget-bd {
padding: 20px;
}
.yui3-tooltip .yui3-widget-bd * {
max-width: 100%;
}
.yui3-tooltip .yui3-widget-bd h5 {
margin-bottom: 10px;
font-size: 22px;
font-weight: 300;
}
.yui3-tooltip .yui3-widget-bd q {
margin-top: 20px;
margin-bottom: 0;
padding: 10px 0;
display: block;
font-size: 16px;
border-top: 1px dotted $warm_grey;
border-bottom: 1px dotted $warm_grey;
font-style: italic;
}
.yui3-tooltip .yui3-widget-bd p:last-child {
margin-bottom: 0;
}
.yui3-tooltip .yui3-widget-ft,
.yui3-tooltip .yui3-widget-ft div {
*display: none; /* IE6, IE7 */
position: absolute;
width: 0;
height: 0;
border-style: solid;
line-height: 0;
font-size: 0;
}
.yui3-tooltip .yui3-tooltip-align-bottom .yui3-widget-ft,
.yui3-tooltip .yui3-tooltip-align-bottom .yui3-widget-ft div {
top: -10px;
left: 50%;
margin: 0 0 0 -10px;
border-width: 0 10px 10px 10px;
border-color: #e3e3e3 transparent;
}
.yui3-tooltip .yui3-tooltip-align-bottom .yui3-widget-ft div {
top: 1px;
border-color: $light_grey transparent;
}
/* @section ie7 specific
-------------------------------------------------------------- */
html.lt-ie8 {
footer.global .footer-a ul li {
float: left;
min-height: 200px;
}
footer.global .footer-a ul ul li {
min-height: auto;
float: none;
}
}
html.lt-ie8 {
.vertical-divider > div,
.vertical-divider > li {
display: inline;
float: left;
border: 0;
padding-left: 0;
}
* { zoom: 1; }
.one-col { width: 6.3053%; }
.two-col { width: 14.823%; }
.three-col { width: 23.3407%; }
.four-col { width: 28%; }
.five-col { width: 40.3761%; }
.six-col { width: 48.8938%; }
.seven-col { width: 57.4115%; }
.eight-col { width: 65.9292%; }
.nine-col { width: 74.4469%; }
.ten-col { width: 82.9646%; }
.eleven-col { width: 91.4823%; }
.inline-icons {
margin-left: -10px;
}
.inline-icons li {
display: inline;
float: left;
text-align: center;
margin-left: 10px;
}
.box-padded-feature .six-col {
width: px;
}
.feature-list-four .six-col {
width: 42.8%;
}
header.banner {
margin-bottom: 20px;
}
.nav-secondary {
padding-bottom: 15px;
padding-left: 20px;
margin-top: -5px;
}
.row-box { overflow: hidden; }
a.link-cta-ubuntu { color: #fff; }
.wrapper {
overflow: hidden;
border: 1px solid #e9e9e9; /* to make up for the lack of box-shadow */
border-width: 0 1px;
}
.inner-wrapper {
border-bottom: 1px solid #c7c6c5; /* to make up for the lack of box-shadow */
padding-bottom: $gutter_width;
width: 984px;
}
header.banner .logo-ubuntu {
background: url("/sites/ubuntu/latest/u/img/ie/logo.gif") no-repeat;
width: 140px;
height: 27px;
display: block;
text-indent: -999em;
top: 8px;
left: 20px;
}
#box-search {
float: none;
position: relative;
right: 0;
top: 0;
}
#box-search input.form-text {
background: #f12d00;
border: 1px solid #ce2600 !important;
width: 140px !important;
right: -10px;
top: -2px;
position: relative;
}
footer {
margin-top: 40px;
}
footer.global .footer-a ul li {
width: 120px;
display: inline;
height: 15em;
padding-left: 0;
}
footer.global .footer-a ul li li {
height: auto;
}
footer.global .footer-b ul li li {
padding-right: 6px;
}
/* homepage */
body.homepage .box a.link-cta-download { color: #fff; }
body.homepage header.banner .nav-secondary ul { background: none; }
/* ubuntu */
.row-do-more { padding-left: 0; }
.row-do-more .six-col {
display: inline;
width: $six_col/* - ($gutter_width / 2)*/;
}
.quote-right-top {
background: none;
top: 0;
padding: 0;
}
.quote-right-top p { color: $ubuntu_orange; }
.ubuntu-why-use-ubuntu .quote-right-right {
position: absolute;
left: -999em;
}
.ubuntu-why-use-ubuntu .row-free .article .quote-right-alt {
height: 207px;
top: -($gutter_width * 3.1);
padding-top: 20px;
}
body.ubuntu-why-is-it-free .quote-right {
background: none;
top: -($gutter_width * 3);
right: -( 2 * $gutter_width );
width: 220px;
}
body.ubuntu-why-is-it-free .quote-right p { color: $ubuntu_orange; }
/* business */
body.business .row-hero p.strip {
background: none;
}
body.business .row-hero-business, body.business-desktop-remix .row-hero {
left: 18px;
}
.row-ubuntu-advantage li {
width: 46.6938%;
}
body.business-desktop .row-ubuntu-advantage li.first {
height: 32.25em;
}
body.business-desktop .packages h2 {
padding: 50px 47px 50px 140px;
}
body.business-desktop .packages dl {
width: 175px;
}
body.business .row-enterprise .six-col {
overflow: hidden;
}
body.business .row-enterprise .quote-canonical {
background: #fff;
height: auto;
margin-top: $gutter_width;
padding-bottom: 0;
}
body.business .row-community {
padding-bottom: $gutter_width;
}
body.business .row-community .nine-col {
padding-left: $three_col;
width: $nine_col - $four_col;
}
/* cloud */
.row-cloud-guest .eight-col,
.row-consultancy .eight-col {
border-right: 1px solid $warm_grey;
width: $eight_col/* - ( 4 * $gutter_width)*/;
}
.row-providers .six-col {
width: $six_col/* - ( 2 * $gutter_width)*/;
}
/* @subsection download > desktop/server & cloud
-------------------------------------------------------------- */
body.download .row-hero {
width: 100% - (20/$base);
}
body.download .row-hero .intro {
padding-right: 0;
width: $six_col/* - (200/$base)/*/;
}
body.download .row-hero .intro p {
padding-right: 20px;
}
#download-help {
background: $light_grey;
width: $eight_col/* - ( 8 * $gutter_width )/*/;
}
#download-help li span {
margin-left: -(180/36)em;
overflow: hidden;
position: absolute;
}
/* min-height fixes */
footer nav ul li.two-col { height: 10em; }
body.download .row-hero .intro { height: 10em; }
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col {
display: inline;
}
body.project .equal-height .box, body.support .equal-height .box { background: #fff; }
body.partners .box { border: none; }
.row {
width: 904px;
float: left;
padding-left: 40px;
clear: both;
}
.row-box {
width: 904px;
float: left;
margin-left: 20px;
clear: both;
}
.row-image-centered span img {
position: absolute;
left: -999em;
}
body.devices-phone {
.row-interlinks .navigation li a {
padding-bottom: 0px;
}
.edge-magic-content {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
.meet-us {
border: 0;
background: #ececec url("/sites/ubuntu/latest/u/img/patterns/grey-textured-background.jpg");
}
}
.ubuntu .box-get-ubuntu {
div {
height: 210px;
}
li {
width: 24.5%;
}
}
body.community-stay-connected {
.social-list li {
width: 100%;
}
}
/* body.download */
body.download button {
cursor: pointer;
}
body.download-home .row-list-download .four-col {
width: 27.2%;
}
body.download #download-other .box {
min-height: 200px;
width: 41.3221%;
}
.download-cloud #download-other .cloud {
background-image: none;
}
body.download-cloud #download-other .cloud .box {
margin-bottom: 0;
width: 64.4%;
}
body.download-help #download-help {
width: 600px;
}
body.download-help .sidebar {
width: 280px;
display: inline;
}
body.download-arm .link-cta-ubuntu {
width: 100%;
}
/* body.devices */
body.devices {
.edge-magic-animation .screen {
background: url("/sites/ubuntu/latest/u/img/devices/phone-3-edge-magic-twitter.png") no-repeat;
z-index: 999;
}
}
#context-footer div div {
background: none;
display: inline;
float: left;
padding-left: 0;
width: 199px;
}
/* body.business */
body.business .row-hero-business {
margin-left: 2px;
}
} /* end html.lt-ie8 */
/* @section ie6 specific
-------------------------------------------------------------- */
html.lt-ie7 {
font-size: 16px;
a.link-cta-ubuntu { color: #fff; }
div { zoom: 1; } /* stops the shit hitting the fan */
.wrapper {
overflow: hidden;
border: 1px solid #e9e9e9; /* to make up for the lack of box-shadow */
border-width: 1px;
}
.inner-wrapper {
border: 0;
padding: 0;
}
header.banner .logo-ubuntu {
background: url("/sites/ubuntu/latest/u/img/ie/logo.gif") no-repeat;
width: 140px;
height: 27px;
display: block;
text-indent: -999em;
top: 8px;
left: 20px;
}
#box-search {
float: none;
position: relative;
right: 0;
top: 0;
}
#box-search input.form-text {
background: #f12d00;
border: 1px solid #ce2600 !important;
width: 150px !important;
right: -10px;
top: 2px;
position: relative;
}
#context-footer div div {
background: none;
display: inline;
float: left;
width: 200px;
}
.no-border { border: 0 !important; }
.nav-secondary {
padding-bottom: 15px;
margin-top: -5px;
}
footer {
margin-top: 40px;
}
footer.global .footer-a ul li {
width: 100px;
display: inline;
height: 15em;
}
footer.global .footer-a ul li li {
height: auto;
}
footer.global .footer-b ul li li {
padding-right: 6px;
}
/* homepage */
body.homepage .box a.link-cta-download { color: #fff; }
body.homepage header.banner .nav-secondary ul { background: none; }
/* ubuntu */
.row-do-more .six-col {
display: inline;
width: $six_col/* - ($gutter_width / 2)*/;
}
.quote-right-top {
background: none;
top: 0;
padding: 0;
}
.quote-right-top p { color: $ubuntu_orange; }
.ubuntu-why-use-ubuntu .quote-right-right {
position: absolute;
left: -999em;
}
.ubuntu-why-use-ubuntu .row-free .article .quote-right-alt {
height: 207px;
top: -($gutter_width * 3.1);
padding-top: 20px;
}
body.ubuntu-why-is-it-free .quote-right {
background: none;
top: -($gutter_width * 3);
right: -( 2 * $gutter_width );
width: 220px;
}
body.ubuntu-why-is-it-free .quote-right p { color: $ubuntu_orange; }
/* business */
body.business .row-hero-business, body.business-desktop-remix .row-hero, .row-ubuntu-advantage {
left: 18px;
}
body.business .row-enterprise .six-col {
overflow: hidden;
}
body.business .row-enterprise .quote-canonical {
background: #fff;
height: 0;
margin-top: $gutter_width;
padding-bottom: 0;
}
body.business .row-community {
padding-bottom: $gutter_width;
}
body.business .row-community .nine-col {
padding-left: $three_col;
width: $nine_col - $four_col;
}
/* cloud */
.row-cloud-guest .eight-col,
.row-consultancy .eight-col {
border-right: 1px solid $warm_grey;
width: $eight_col/* - ( 4 * $gutter_width)*/;
}
.row-providers .six-col {
width: $six_col/* - ( 2 * $gutter_width)*/;
}
/* @subsection download > desktop/server & cloud
-------------------------------------------------------------- */
body.download .row-hero {
width: 100% - (20/$base);
}
body.download .row-hero .intro {
padding-right: 0;
width: $six_col - (200/$base);
}
body.download .row-hero .intro p {
padding-right: 20px;
}
#download-help {
background: $light_grey;
width: $eight_col/* - ( 8 * $gutter_width )*/;
}
#download-help li span {
margin-left: -(180/36)em;
overflow: hidden;
position: absolute;
}
/* cloud */
.row-home .intro {
background: none;
padding: 0 19px $gutter_width 0;
width: $eight_col;
}
.row-home .box-openstack-cloud {
background: none;
padding-top: 0;
}
.row-menu h3 {
display: block;
float: left;
clear: both;
width: $three_col/* - ( 1.5 * $gutter_width)*/;
margin-bottom: 0;
}
.row-features .list-features-content li .list-feature-footer {
bottom: -90px;
margin-left: -30px;
width: 673px;
}
.nav-list-features li {
margin-top: 13px;
}
.row-cloud-services div {
padding-right: 0;
width: $three_col/* + (2 * $gutter_width)*/;
}
/* min-height fixes */
footer nav ul li.two-col { height: 10em; }
body.download .row-hero .intro { height: 10em; }
} /* end html.lt-ie7 */
sass/ubuntu/core-print.scss 0 → 100644
View file @ 4d31dfc7
@charset "UTF-8";
/**
* Ubuntu print Stylesheet
*
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
*/
* { background: #fff; color: #000; }
body {
background: white;
font-size: 16pt;
line-height: 1.5;
}
a:link, a:visited {
color: #898989;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
nav,
#box-search,
.cookie-policy,
.link-top,
footer {
display: none;
}
.wrapper {
width: auto;
margin: 0 5%;
padding: 0;
padding-top: 1em;
float: none !important;
}
sass/ubuntu/core-templates.scss 0 → 100644
View file @ 4d31dfc7
@charset "UTF-8";
/**
* 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;
}*/
}
.row-enterprise {
background: $canonical_aubergine;
color:#fff;
@include rounded_corners(0);
.box, div {
background: $canonical_aubergine;
color:#fff;
}
a {
color:#fff;
}
}
/*
.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') }
.developer-dot-pattern { background:url('/sites/ubuntu/latest/u/img/patterns/developer-dot-pattern.png') }
\ No newline at end of file
sass/ubuntu/core.scss 0 → 100644
View file @ 4d31dfc7
@charset "UTF-8";
/**
* 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, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section {
display: block;
}
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
[hidden] {
display: none;
}
html {
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
background: #fff url("/sites/ubuntu/latest/u/img/patterns/body_bg.jpg");
color: #333;
font-family: Ubuntu, Arial, "libra sans", sans-serif;
font-weight: 300;
}
blockquote, q {
quotes: none;
}
blockquote {
margin: 28px 20px;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
legend {
border: 0;
*margin-left: -7px;
}
figure {
margin: 0;
}
abbr, acronym { cursor: help; }
/**
* Links
*
* @section links
*/
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
a:link, a:visited {
color: $link_color;
text-decoration: none;
}
a:hover, a:active, a:focus {
text-decoration: underline;
}
a.link-arrow:after { content: "\0000a0›"; }
nav ul li h2 a:after { content: "\0000a0›"; }
nav ul li a:after, .carousel ul li a:after, ul li p a:after { content: ""; }
/**
* Lists
*
* @section lists
*/
ol, ul {
margin-left: 20px;
margin-bottom: 20px;
}
ol ol, ul ul, ol ul, ul ol {
margin-bottom: 0;
}
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/**
* Images
*
* @section images
*/
svg:not(:root) {
overflow: hidden;
}
img {
border: 0;
}
img.left { margin-right: $gutter_width; }
img.right { margin-left: $gutter_width; }
.middle img {
vertical-align: middle;
margin-top: 4em;
}
/**
* Base typography
*
* @section type
*/
h1, h2, h3, h4 {
font-weight: 300;
line-height: 1.3;
}
h1 { @include font_size (45) }
h2 { @include font_size (32) }
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; }
h3 { @include font_size (23) }
p + h3, ul + h3, ol + h3, pre + h3 { margin-top: (18 / 23)em; }
h4 { @include font_size (19.5) }
p + h4, ul + h4, ol + h4, , pre + h4 { margin-top: (19.5 / $base)em; }
h5 { @include font_size (16); }
h6 { @include font_size (13); text-transform: uppercase; letter-spacing: .1em }
p, li, code, pre { @include font_size(16); line-height: 1.6; margin-bottom: (12/$base)em; }
/* p + ol, p + dl {
margin-top: 1.5em;
margin-bottom: 1.5em;
}*/
li { margin-bottom: .4em; }
li:last-of-type { margin-bottom: 0; }
ins {
background: #fffbeb;
text-decoration: none;
}
small, .smaller { font-size: 13px; }
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
code, pre {
font-family: "Ubuntu Mono", "Consolas", "Monaco", "Lucida Console", "Courier New", Courier, monospace;
}
pre {
@include rounded_corners(4px);
background: $light_orange;
padding: .6em 1em;
white-space: pre-wrap;
word-wrap: break-word;
}
hgroup > h1 + h2,
hgroup > h2 + h3,
hgroup > h3 + h4 {
color: $warm_grey;
margin-top: (10 / $base)em;
}
hgroup > h2 + h3 { margin-top: 0; }
hgroup > h3 + h4 { margin-top: (5 / $base)em; }
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
*/
button,
input,
select,
textarea {
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
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="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
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 15px 94px;
}
form fieldset h3 {
border-bottom: 1px dotted #dfdcd9;
margin-bottom: 9px;
padding-bottom: 10px;
}
form fieldset li:first-child { margin-top: 0; }
form input[type="text"], form textarea {
@include rounded_corners(2px);
background: #fff;
border: 1px solid #999999;
font-family: Ubuntu, Arial, "libra sans", sans-serif;
display: block;
padding: 4px;
}
form input:focus, form textarea:focus {
border: 1px solid #000;
}
form textarea[readonly='readonly'] {
color: #999;
}
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="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;
}
form input[type="submit"]:hover {
background: $ubuntu_orange;
}
form label {
cursor: pointer;
display: block;
margin-bottom: 4px;
}
form label span {
color: $error;
}
form ul { margin-left:0; }
form li {
list-style: none outside none;
margin-top: 14px;
}
form button[type="submit"] {
border: 0;
display: inline-block;
font-family: Ubuntu, Arial, "libra sans", sans-serif;
text-decoration:none;
font-weight: 300;
}
form input[type="reset"] {
display: none;
}
/**
* Tables
*
* @section tables
*/
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin: 0 0 (40/$base)em 0;
margin-bottom: $gutter_width;
th, td {
padding: 15px 10px;
background: #f0edea;
border: 1px dotted $warm_grey;
}
td {
text-align: center;
vertical-align: middle;
}
thead th {
border-collapse: separate;
border-spacing: 0 10px;
background: #fee3d2;
color: #333333;
font-weight: normal;
}
tbody th {
font-weight: 300;
}
th[scope="col"] {
text-align: center;
}
thead th:first-of-type { text-align: left; }
}
\ No newline at end of file
template.php
View file @ 4d31dfc7
......@@ -23,6 +23,8 @@
* External stylesheets and scripts cannot be inserted in the theme's
* .info file. You must use this function instead.
*
* @since 1.0.0
*
* @uses drupal_add_css()
*/
function valencia_preprocess_html( &$variables ) {
......@@ -37,6 +39,7 @@ function valencia_preprocess_html( &$variables ) {
* Externally hosted stylesheets are never aggregated or compressed.
*
* @see drupal_get_css()
* @since 1.0.0
*
* @param string $data Optional. Stylesheet data to be added, depending on what is passed through the
* $options['type'] parameter.
......@@ -62,10 +65,51 @@ function valencia_preprocess_html( &$variables ) {
*/
drupal_add_css( 'http://assets.ubuntu.com/sites/guidelines/css/latest/ubuntu-styles.css', array(
'type' => 'external',
'group' => CSS_DEFAULT
'group' => CSS_DEFAULT,
'every_page' => true
));
/**
* Add JavaScript file, setting, or inline code to the page.
*
* The behaviour of this function depends on the parameters it is called with.
* Generally, it handles the addition of JavaScript to the page, either as reference
* to an existing file or as inline code. You can:
* - Add a file ('file')
* - Add inline JavaScript code ('inline'). Make sure to wrap code in `(function($){})(jQuery);`
* - Add external JavaScript ('external')
* - Add settings ('setting'). Will be accessible at Drupal.settings
*
* If JavaScript aggregation is enabled, all JavaScript files added with $options['preprocess']
* set to TRUE will be merged into one aggregate file. Preprocessed inline JavaScript will not be
* aggregated into this single file. Externally hosted JavaScripts are never aggregated.
*
* @see drupal_get_js()
* @since 1.0.0
* @todo Add yui.min.js and core.js from Ubuntu assets
*
* @param string $data Optional. If given, the value depends on the $options or $options['type'] parameter.
* @param string|array $options {
* String defining the type of JavaScript that is being added in the $data parameter (<file>,
* <setting>, <inline>, <external>), or an associative array. JavaScript settings should always
* pass the string 'setting' only. Other types can have the following elements in the array. Optional.
*
* @type string $type Type of JavaScript. Default <file>. Accepts <file>, <inline>, <external>, <setting>.
* @type string $scope Location of the script. Can use custom regions. Default <header>. Accepts <header>, <footer>.
* @type integer $group Number of the JS group. Defines priority (higher first). Accepts <JS_LIBRARY>, <JS_DEFAULT>,
* <JS_THEME>.
* @type bool $every_page If present in every page of the website. Default <FALSE>.
* @type integer $weight Priority relative to the scope, group, and every_page. Higher first.
* @type bool $defer If TRUE, defer attribute is set on the script tag. Default <FALSE>.
* @type bool $cache Cache JS file. Used only when $type references a JS file. Default <TRUE>.
* @type bool $preprocess If TRUE and aggregation is enabled, script file will be aggregated. Default <TRUE>.
* }
* @return array JavaScript file, settings, and inline code, including Drupal defaults.
*/
//function drupal_add_js($data, $options);
}
if ( !function_exists( 'region_empty' ) ) :
/**
* Check if region is empty.
*
......@@ -106,3 +150,4 @@ function region_empty( $region ) {
return $empty;
}
endif;
\ No newline at end of file
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