Skip to content

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

Update frontend framework to the latest responsive version available

parent d30863b5
Hide whitespace changes
Inline Side-by-side
Showing with 11592 additions and 3169 deletions
css/style.css
View file @ a60faf68
This source diff could not be displayed because it is too large. You can view the blob instead.
sass/core/_core-constants.scss 0 → 100644
View file @ a60faf68
@charset "UTF-8";
/**
* Ubuntu Patterns Stylesheet
*
* The CSS file required by Ubuntu patterns page
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
* @see http://design.ubuntu.com
*/
/**
* standard colors
*
* @colordef standard colors
*/
/* assets database path */
$asset-path: "//assets.ubuntu.com/sites/ubuntu/latest/u/img/";
/* usage: background: url(#{$asset-path}/backgrounds/background.jpg) no-repeat 0 0; */
$ubuntu-orange: #dd4814; /* ubuntu orange (used for text links also on any site except canonical) */
$light-orange: #fdf6f2; /* used as background on pre text */
$canonical-aubergine: #772953; /* canonical aubergine */
$light-aubergine: #77216f; /* light aubergine (consumer) */
$mid-aubergine: #5e2750; /* mid aubergine (both) */
$dark-aubergine: #2c001e; /* dark aubergine (enterprise) */
$warm-grey: #888888; /* warm grey */
$cool-grey: #333333; /* cool grey */
$light-grey: #f7f7f7; /* light grey */
/* notifications */
$error: #df382c; /* red */
$warning: #eca918; /* yellow */
$success: #38b44a; /* green */
$information: #19b6ee; /* cyan */
/* colour coded status - from negative to positive (Icon: canonical circle) */
$status-red: #df382c; /* red, for status that require immediate attention */
$status-grey: #888888; /* grey, for disabled status or ones that don’t require attention */
$status-yellow: #efb73e; /* yellow, for status that require attention */
$status-blue: #19b6ee; /* blue, for status that don’t require action */
$status-green: #38b44a; /* green, for positive status */
/* misc colours */
$box-solid-grey: #efefef;
$link-color: $ubuntu-orange; /* This is the global link color, mainly used for links in content */
/* grid variables */
$base: 14;
$gutter-width: 20px;
$grid-gutter: 20px;
$gutter: 2.12766%;
$one-col: 6.38297%;
$two-col: 14.89361%;
$three-col: 23.40425%;
$four-col: 31.91489%;
$five-col: 40.42553%;
$six-col: 48.93617%;
$seven-col: 57.4468%;
$eight-col: 65.95744%;
$nine-col: 74.46808%;
$ten-col: 82.97872%;
$eleven-col: 91.48936%;
$nav-bg: #f0f0f0;
$nav-link-color: #333;
$nav-border-dark: #d4d7d4;
$nav-border-light: #f2f2f4;
$nav-hover-bg: #d0d0d0;
$nav-active-bg: #ddd;
$breakpoint-medium: "only screen and (min-width: 768px)";
$breakpoint-large: "only screen and (min-width: 984px)";
@media only screen and (min-width : 768px) { $base: 15; }
@media only screen and (min-width: 984px) { $base: 14; }
\ No newline at end of file
sass/core/_core-grid-desktop.scss 0 → 100644
View file @ a60faf68
@charset "UTF-8";
@media only screen and (min-width: 984px) {
body { font-size: 16px; }
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col, .col {
float: left;
}
.one-col { width: 6.38297%; }
.two-col { width: 14.89361%; }
.three-col { width: 23.40425%; }
.four-col { width: 31.91489%; }
.five-col { width: 40.42553%; }
.six-col { width: 48.93617%; }
.seven-col { width: 57.4468%; }
.eight-col { width: 65.95744%; }
.nine-col { width: 74.46808%; }
.ten-col { width: 82.97872%; }
.eleven-col { width: 91.48936%; }
.three-col:nth-child(1):nth-last-child(4),
.three-col:nth-child(2):nth-last-child(3),
.three-col:nth-child(3):nth-last-child(2),
.three-col:nth-child(4):nth-last-child(1) { width: 23.36%; }
.three-col:nth-of-type(2) { margin-right: 2.21238%; }
.twelve-col {
width: 100%;
margin-right: 0;
}
.twelve-col .one-col {
width: 6.3053%;
margin-right: 2.21238%;
}
.twelve-col .two-col {
width: 14.823%;
margin-right: 2.21238%;
}
.twelve-col .three-col {
width: 23.3407%;
margin-right: 2.21238%;
}
.twelve-col .three-col:nth-child(1):nth-last-child(4),
.twelve-col .three-col:nth-child(2):nth-last-child(3),
.twelve-col .three-col:nth-child(3):nth-last-child(2),
.twelve-col .three-col:nth-child(4):nth-last-child(1) { width: 23.3407%; }
.twelve-col .three-col:nth-of-type(2) { margin-right: 2.21238%; }
.twelve-col .four-col {
width: 31.8584%;
margin-right: 2.21238%;
}
.twelve-col .five-col {
width: 40.3761%;
margin-right: 2.21238%;
}
.twelve-col .six-col {
width: 48.8938%;
margin-right: 2.21238%;
}
.twelve-col .seven-col {
width: 57.4115%;
margin-right: 2.21238%;
}
.twelve-col .eight-col {
width: 65.9292%;
margin-right: 2.21238%;
}
.twelve-col .nine-col {
width: 74.4469%;
margin-right: 2.21238%;
}
.twelve-col .ten-col {
width: 82.9646%;
margin-right: 2.21238%;
}
.twelve-col .eleven-col {
width: 91.4823%;
margin-right: 2.21238%;
}
.twelve-col .twelve-col {
width: 100%;
margin-right: 0;
}
.eleven-col .one-col {
width: 6.89238%;
margin-right: 2.41837%;
}
.eleven-col .two-col {
width: 16.20314%;
margin-right: 2.41837%;
}
.eleven-col .three-col {
width: 25.5139%;
margin-right: 2.41837%;
}
.eleven-col .four-col {
width: 34.82466%;
margin-right: 2.41837%;
}
.eleven-col .five-col {
width: 44.13542%;
margin-right: 2.41837%;
}
.eleven-col .six-col {
width: 53.44619%;
margin-right: 2.41837%;
}
.eleven-col .seven-col {
width: 62.75695%;
margin-right: 2.41837%;
}
.eleven-col .eight-col {
width: 72.06771%;
margin-right: 2.41837%;
}
.eleven-col .nine-col {
width: 81.37847%;
margin-right: 2.41837%;
}
.eleven-col .ten-col {
width: 90.68923%;
margin-right: 2.41837%;
}
.eleven-col .eleven-col {
width: 100%;
margin-right: 0;
}
.ten-col .one-col {
width: 7.6%;
margin-right: 2.66666%;
}
.ten-col .two-col {
width: 17.86666%;
margin-right: 2.66666%;
}
.ten-col .three-col {
width: 28.13333%;
margin-right: 2.66666%;
}
.ten-col .four-col {
width: 38.4%;
margin-right: 2.66666%;
}
.ten-col .five-col {
width: 48.66666%;
margin-right: 2.66666%;
}
.ten-col .six-col {
width: 58.93333%;
margin-right: 2.66666%;
}
.ten-col .seven-col {
width: 69.19999%;
margin-right: 2.66666%;
}
.ten-col .eight-col {
width: 79.46666%;
margin-right: 2.66666%;
}
.ten-col .nine-col {
width: 89.73333%;
margin-right: 2.66666%;
}
.ten-col .ten-col {
width: 100%;
margin-right: 0;
}
.nine-col .one-col {
width: 8.46953%;
margin-right: 2.97176%;
}
.nine-col .two-col {
width: 19.91084%;
margin-right: 2.97176%;
}
.nine-col .three-col {
width: 31.35215%;
margin-right: 2.97176%;
}
.nine-col .four-col {
width: 42.79346%;
margin-right: 2.97176%;
}
.nine-col .five-col {
width: 54.23476%;
margin-right: 2.97176%;
}
.nine-col .six-col {
width: 65.67607%;
margin-right: 2.97176%;
}
.nine-col .seven-col {
width: 77.11738%;
margin-right: 2.97176%;
}
.nine-col .eight-col {
width: 88.55869%;
margin-right: 2.97176%;
}
.nine-col .nine-col {
width: 100%;
margin-right: 0;
}
.eight-col .one-col {
width: 9.56375%;
margin-right: 3.3557%;
}
.eight-col .two-col {
width: 22.48322%;
margin-right: 3.3557%;
}
.eight-col .three-col {
width: 35.40268%;
margin-right: 3.3557%;
}
.eight-col .four-col {
width: 48.32214%;
margin-right: 3.3557%;
}
.eight-col .five-col {
width: 61.24161%;
margin-right: 3.3557%;
}
.eight-col .six-col {
width: 74.16107%;
margin-right: 3.3557%;
}
.eight-col .seven-col {
width: 87.08053%;
margin-right: 3.3557%;
}
.eight-col .eight-col {
width: 100%;
margin-right: 0;
}
.seven-col .one-col {
width: 10.98265%;
margin-right: 3.85356%;
}
.seven-col .two-col {
width: 25.81888%;
margin-right: 3.85356%;
}
.seven-col .three-col {
width: 40.6551%;
margin-right: 3.85356%;
}
.seven-col .four-col {
width: 55.49132%;
margin-right: 3.85356%;
}
.seven-col .five-col {
width: 70.32755%;
margin-right: 3.85356%;
}
.seven-col .six-col {
width: 85.16377%;
margin-right: 3.85356%;
}
.seven-col .seven-col {
width: 100%;
margin-right: 0;
}
.six-col .one-col {
width: 12.89592%;
margin-right: 4.52488%;
}
.six-col .two-col {
width: 30.31674%;
margin-right: 4.52488%;
}
.six-col .three-col {
width: 47.73755%;
margin-right: 4.52488%;
}
.six-col .four-col {
width: 65.15837%;
margin-right: 4.52488%;
}
.six-col .five-col {
width: 82.57918%;
margin-right: 4.52488%;
}
.six-col .six-col {
width: 100%;
margin-right: 0;
}
.five-col .one-col {
width: 15.61643%;
margin-right: 5.47945%;
}
.five-col .two-col {
width: 36.71232%;
margin-right: 5.47945%;
}
.five-col .three-col {
width: 57.80821%;
margin-right: 5.47945%;
}
.five-col .four-col {
width: 78.9041%;
margin-right: 5.47945%;
}
.five-col .five-col {
width: 100%;
margin-right: 0;
}
.four-col .one-col {
width: 19.79166%;
margin-right: 6.94444%;
}
.four-col .two-col {
width: 46.52777%;
margin-right: 6.94444%;
}
.four-col .three-col {
width: 73.26388%;
margin-right: 6.94444%;
}
.four-col .four-col {
width: 100%;
margin-right: 0;
}
.three-col .one-col {
width: 27.01421%;
margin-right: 9.47867%;
}
.three-col .two-col {
width: 63.5071%;
margin-right: 9.47867%;
}
.three-col .three-col {
width: 100%;
margin-right: 0;
}
.two-col .one-col {
width: 42.53731%;
margin-right: 14.92537%;
}
.two-col .two-col {
width: 100%;
margin-right: 0;
}
.one-col .one-col {
width: 100%;
margin-right: 0;
}
.twelve-col .last-col {
margin-right: 0;
}
.eleven-col .last-col {
margin-right: 0;
}
.ten-col .last-col {
margin-right: 0;
}
.nine-col .last-col {
margin-right: 0;
}
.eight-col .last-col {
margin-right: 0;
}
.seven-col .last-col {
margin-right: 0;
}
.six-col .last-col {
margin-right: 0;
}
.five-col .last-col {
margin-right: 0;
}
.four-col .last-col {
margin-right: 0;
}
.three-col .last-col {
margin-right: 0;
}
.two-col .last-col {
margin-right: 0;
}
.one-col .last-col {
margin-right: 0;
}
/**
* Main containers
*
* @section containers
*/
.row, #context-footer { /** Clear entire row. */
@include rounded-corners(0);
margin: 0;
padding: 40px 40px 20px;
}
.row:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.row-feature {
background: none;
}
/**
* Columns
*
* @section columns
*/
/* inner grid */
.container {
@include box-sizing;
margin: $gutter-width $gutter-width 0;
width: 100%;
}
/**
* Empty columns
*
* Add these to a column to append or prepend
* empty columns
*
* @section empty-columns
*/
.append-one { margin-right: $one-col + $gutter; }
.append-two { margin-right: $two-col + $gutter; }
.append-three { margin-right: $three-col + $gutter; }
.append-four { margin-right: $four-col + $gutter; }
.append-five { margin-right: $five-col + $gutter; }
.append-six { margin-right: $six-col + $gutter; }
.append-seven { margin-right: $seven-col + $gutter; }
.append-eight { margin-right: $eight-col + $gutter; }
.append-nine { margin-right: $nine-col + $gutter; }
.append-ten { margin-right: $ten-col + $gutter; }
.append-eleven { margin-right: $eleven-col + $gutter; }
.prepend-one { margin-left: $one-col + 2.12766%; }
.prepend-two { margin-left: $two-col + 2.12766%; }
.prepend-three { margin-left: $three-col + 2.12766%; }
.prepend-four { margin-left: $four-col + 2.12766%; }
.prepend-five { margin-left: $five-col + 2.12766%; }
.prepend-six { margin-left: $six-col + $gutter; }
.prepend-seven { margin-left: $seven-col + $gutter; }
.prepend-eight { margin-left: $eight-col + $gutter; }
.prepend-nine { margin-left: $nine-col + $gutter; }
.prepend-ten { margin-left: $ten-col + $gutter; }
.prepend-eleven { margin-left: $eleven-col + $gutter; }
.push-one { margin-left: 57px; }
/**
* Push and pull
*
* Use these classes to push elements into the next
* column and pull it into the previous column
*
* @section push-pull
*/
.pull-one, .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten, .pull-eleven {
float: left;
position: relative;
}
.pull-one { margin-left: -$one-col; }
.pull-two { margin-left: -($two-col + $gutter); }
.pull-three { margin-left: -($three-col + $gutter); }
.pull-four { margin-left: -($four-col + $gutter); }
.pull-five { margin-left: -($four-col + $gutter); }
.pull-six { margin-left: -($six-col + $gutter); }
.pull-seven { margin-left: -($seven-col + $gutter); }
.pull-eight { margin-left: -($eight-col + $gutter); }
.pull-nine { margin-left: -($nine-col + $gutter); }
.pull-ten { margin-left: -($ten-col + $gutter); }
.pull-eleven { margin-left: -($eleven-col + $gutter); }
.push-1, .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten, .push-eleven {
float: left;
position: relative;
}
.push-one { margin: 0 (-($one-col + $gutter)) 0 ($one-col + $gutter); }
.push-two { margin: 0 (-($two-col + ($gutter * 2))) 0 ($two-col + ($gutter * 2)); }
.push-three { margin: 0 (-($three-col + ($gutter * 2))) 0 ($three-col + ($gutter * 2)); }
.push-four { margin: 0 (-($four-col + ($gutter * 2))) 0 ($four-col + ($gutter * 2)); }
.push-five { margin: 0 (-($four-col + ($gutter * 2))) 0 ($four-col + ($gutter * 2)); }
.push-six { margin: 0 (-($six-col + ($gutter * 2))) 0 ($six-col + ($gutter * 2)); }
.push-seven { margin: 0 (-($seven-col + ($gutter * 2))) 0 ($seven-col + ($gutter * 2)); }
.push-eight { margin: 0 (-($eight-col + ($gutter * 2))) 0 ($eight-col + ($gutter * 2)); }
.push-nine { margin: 0 (-($nine-col + ($gutter * 2))) 0 ($nine-col + ($gutter * 2)); }
.push-ten { margin: 0 (-($ten-col + ($gutter * 2))) 0 ($ten-col + ($gutter * 2)); }
.push-eleven { margin: 0 (-($eleven-col + ($gutter * 2))) 0 ($eleven-col + ($gutter * 2)); }
}
sass/core/_core-grid-tablet.scss 0 → 100644
View file @ a60faf68
@charset "UTF-8";
@media only screen and (min-width : 768px) {
body {
font-size: 15px;
}
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col, .col {
float: left;
}
.one-col { width: 6.38297%; }
.two-col { width: 14.89361%; }
.three-col { width: 23.40425%; }
.four-col { width: 31.91489%; }
.five-col { width: 40.42553%; }
.six-col { width: 48.93617%; }
.seven-col { width: 57.4468%; }
.eight-col { width: 65.95744%; }
.nine-col { width: 74.46808%; }
.ten-col { width: 82.97872%; }
.eleven-col { width: 91.48936%; }
.twelve-col {
width: 100%;
margin-right: 0;
}
.twelve-col .one-col {
width: 6.3053%;
margin-right: 2.21238%;
}
.twelve-col .two-col {
width: 14.823%;
margin-right: 2.21238%;
}
.twelve-col .three-col {
width: 23.3407%;
margin-right: 2.21238%;
}
.twelve-col .three-col {
width: 48.8938%;
margin-right: 2.21238%;
}
.twelve-col .four-col {
width: 31.8584%;
margin-right: 2.21238%;
}
.twelve-col .five-col {
width: 40.3761%;
margin-right: 2.21238%;
}
.twelve-col .six-col {
width: 48.8938%;
margin-right: 2.21238%;
}
.twelve-col .seven-col {
width: 57.4115%;
margin-right: 2.21238%;
}
.twelve-col .eight-col {
width: 65.9292%;
margin-right: 2.21238%;
}
.twelve-col .nine-col {
width: 74.4469%;
margin-right: 2.21238%;
}
.twelve-col .ten-col {
width: 82.9646%;
margin-right: 2.21238%;
}
.twelve-col .eleven-col {
width: 91.4823%;
margin-right: 2.21238%;
}
.twelve-col .twelve-col {
width: 100%;
margin-right: 0;
}
.eleven-col .one-col {
width: 6.89238%;
margin-right: 2.41837%;
}
.eleven-col .two-col {
width: 16.20314%;
margin-right: 2.41837%;
}
.eleven-col .three-col {
width: 25.5139%;
margin-right: 2.41837%;
}
.eleven-col .four-col {
width: 34.82466%;
margin-right: 2.41837%;
}
.eleven-col .five-col {
width: 44.13542%;
margin-right: 2.41837%;
}
.eleven-col .six-col {
width: 53.44619%;
margin-right: 2.41837%;
}
.eleven-col .seven-col {
width: 62.75695%;
margin-right: 2.41837%;
}
.eleven-col .eight-col {
width: 72.06771%;
margin-right: 2.41837%;
}
.eleven-col .nine-col {
width: 81.37847%;
margin-right: 2.41837%;
}
.eleven-col .ten-col {
width: 90.68923%;
margin-right: 2.41837%;
}
.eleven-col .eleven-col {
width: 100%;
margin-right: 0;
}
.ten-col .one-col {
width: 7.6%;
margin-right: 2.66666%;
}
.ten-col .two-col {
width: 17.86666%;
margin-right: 2.66666%;
}
.ten-col .three-col {
width: 28.13333%;
margin-right: 2.66666%;
}
.ten-col .four-col {
width: 38.4%;
margin-right: 2.66666%;
}
.ten-col .five-col {
width: 48.66666%;
margin-right: 2.66666%;
}
.ten-col .six-col {
width: 58.93333%;
margin-right: 2.66666%;
}
.ten-col .seven-col {
width: 69.19999%;
margin-right: 2.66666%;
}
.ten-col .eight-col {
width: 79.46666%;
margin-right: 2.66666%;
}
.ten-col .nine-col {
width: 89.73333%;
margin-right: 2.66666%;
}
.ten-col .ten-col {
width: 100%;
margin-right: 0;
}
.nine-col .one-col {
width: 8.46953%;
margin-right: 2.97176%;
}
.nine-col .two-col {
width: 19.91084%;
margin-right: 2.97176%;
}
.nine-col .three-col {
width: 31.35215%;
margin-right: 2.97176%;
}
.nine-col .four-col {
width: 42.79346%;
margin-right: 2.97176%;
}
.nine-col .five-col {
width: 54.23476%;
margin-right: 2.97176%;
}
.nine-col .six-col {
width: 65.67607%;
margin-right: 2.97176%;
}
.nine-col .seven-col {
width: 77.11738%;
margin-right: 2.97176%;
}
.nine-col .eight-col {
width: 88.55869%;
margin-right: 2.97176%;
}
.nine-col .nine-col {
width: 100%;
margin-right: 0;
}
.eight-col .one-col {
width: 9.56375%;
margin-right: 3.3557%;
}
.eight-col .two-col {
width: 22.48322%;
margin-right: 3.3557%;
}
.eight-col .three-col {
width: 35.40268%;
margin-right: 3.3557%;
}
.eight-col .four-col {
width: 48.32214%;
margin-right: 3.3557%;
}
.eight-col .five-col {
width: 61.24161%;
margin-right: 3.3557%;
}
.eight-col .six-col {
width: 74.16107%;
margin-right: 3.3557%;
}
.eight-col .seven-col {
width: 87.08053%;
margin-right: 3.3557%;
}
.eight-col .eight-col {
width: 100%;
margin-right: 0;
}
.seven-col .one-col {
width: 10.98265%;
margin-right: 3.85356%;
}
.seven-col .two-col {
width: 25.81888%;
margin-right: 3.85356%;
}
.seven-col .three-col {
width: 40.6551%;
margin-right: 3.85356%;
}
.seven-col .four-col {
width: 55.49132%;
margin-right: 3.85356%;
}
.seven-col .five-col {
width: 70.32755%;
margin-right: 3.85356%;
}
.seven-col .six-col {
width: 85.16377%;
margin-right: 3.85356%;
}
.seven-col .seven-col {
width: 100%;
margin-right: 0;
}
.six-col .one-col {
width: 12.89592%;
margin-right: 4.52488%;
}
.six-col .two-col {
width: 30.31674%;
margin-right: 4.52488%;
}
.six-col .three-col {
width: 47.73755%;
margin-right: 4.52488%;
}
.six-col .four-col {
width: 65.15837%;
margin-right: 4.52488%;
}
.six-col .five-col {
width: 82.57918%;
margin-right: 4.52488%;
}
.six-col .six-col {
width: 100%;
margin-right: 0;
}
.five-col .one-col {
width: 15.61643%;
margin-right: 5.47945%;
}
.five-col .two-col {
width: 36.71232%;
margin-right: 5.47945%;
}
.five-col .three-col {
width: 57.80821%;
margin-right: 5.47945%;
}
.five-col .four-col {
width: 78.9041%;
margin-right: 5.47945%;
}
.five-col .five-col {
width: 100%;
margin-right: 0;
}
.four-col .one-col {
width: 19.79166%;
margin-right: 6.94444%;
}
.four-col .two-col {
width: 46.52777%;
margin-right: 6.94444%;
}
.four-col .three-col {
width: 73.26388%;
margin-right: 6.94444%;
}
.four-col .four-col {
width: 100%;
margin-right: 0;
}
.three-col .one-col {
width: 27.01421%;
margin-right: 9.47867%;
}
.three-col .two-col {
width: 63.5071%;
margin-right: 9.47867%;
}
.three-col .three-col {
width: 100%;
margin-right: 0;
}
.two-col .one-col {
width: 42.53731%;
margin-right: 14.92537%;
}
.two-col .two-col {
width: 100%;
margin-right: 0;
}
.one-col .one-col {
width: 100%;
margin-right: 0;
}
.twelve-col .last-col {
margin-right: 0;
}
.eleven-col .last-col {
margin-right: 0;
}
.ten-col .last-col {
margin-right: 0;
}
.nine-col .last-col {
margin-right: 0;
}
.eight-col .last-col {
margin-right: 0;
}
.seven-col .last-col {
margin-right: 0;
}
.six-col .last-col {
margin-right: 0;
}
.five-col .last-col {
margin-right: 0;
}
.four-col .last-col {
margin-right: 0;
}
.three-col .last-col {
margin-right: 0;
}
.two-col .last-col {
margin-right: 0;
}
.one-col .last-col {
margin-right: 0;
}
/**
* Main containers
*
* @section containers
*/
.row, #context-footer { /** Clear entire row. */
@include rounded_corners(0);
margin: 0;
padding: 40px 40px 20px;
}
.row:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.row-feature {
background: none;
}
/**
* Columns
*
* @section columns
*/
/* inner grid */
.container {
@include box-sizing;
margin: $gutter_width $gutter_width 0;
width: 100%;
}
/**
* Empty columns
*
* Add these to a column to append or prepend
* empty columns
*
* @section empty-columns
*/
.append-one { margin-right: $one_col + $gutter; }
.append-two { margin-right: $two_col + $gutter; }
.append-three { margin-right: $three_col + $gutter; }
.append-four { margin-right: $four_col + $gutter; }
.append-five { margin-right: $five_col + $gutter; }
.append-six { margin-right: $six_col + $gutter; }
.append-seven { margin-right: $seven_col + $gutter; }
.append-eight { margin-right: $eight_col + $gutter; }
.append-nine { margin-right: $nine_col + $gutter; }
.append-ten { margin-right: $ten_col + $gutter; }
.append-eleven { margin-right: $eleven_col + $gutter; }
.prepend-one { margin-left: $one_col + 2.12766%; }
.prepend-two { margin-left: $two_col + 2.12766%; }
.prepend-three { margin-left: $three_col + 2.12766%; }
.prepend-four { margin-left: $four_col + 2.12766%; }
.prepend-five { margin-left: $five_col + 2.12766%; }
.prepend-six { margin-left: $six_col + $gutter; }
.prepend-seven { margin-left: $seven_col + $gutter; }
.prepend-eight { margin-left: $eight_col + $gutter; }
.prepend-nine { margin-left: $nine_col + $gutter; }
.prepend-ten { margin-left: $ten_col + $gutter; }
.prepend-eleven { margin-left: $eleven_col + $gutter; }
.push-one { margin-left: 57px; }
/**
* Push and pull
*
* Use these classes to push elements into the next
* column and pull it into the previous column
*
* @section push-pull
*/
.pull-one, .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten, .pull-eleven {
float: left;
position: relative;
}
.pull-one { margin-left: -$one_col; }
.pull-two { margin-left: -($two_col + $gutter); }
.pull-three { margin-left: -($three_col + $gutter); }
.pull-four { margin-left: -($four_col + $gutter); }
.pull-five { margin-left: -($four_col + $gutter); }
.pull-six { margin-left: -($six_col + $gutter); }
.pull-seven { margin-left: -($seven_col + $gutter); }
.pull-eight { margin-left: -($eight_col + $gutter); }
.pull-nine { margin-left: -($nine_col + $gutter); }
.pull-ten { margin-left: -($ten_col + $gutter); }
.pull-eleven { margin-left: -($eleven_col + $gutter); }
.push-1, .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten, .push-eleven {
float: left;
position: relative;
}
.push-one { margin: 0 (-($one_col + $gutter)) 0 ($one_col + $gutter); }
.push-two { margin: 0 (-($two_col + ($gutter * 2))) 0 ($two_col + ($gutter * 2)); }
.push-three { margin: 0 (-($three_col + ($gutter * 2))) 0 ($three_col + ($gutter * 2)); }
.push-four { margin: 0 (-($four_col + ($gutter * 2))) 0 ($four_col + ($gutter * 2)); }
.push-five { margin: 0 (-($four_col + ($gutter * 2))) 0 ($four_col + ($gutter * 2)); }
.push-six { margin: 0 (-($six_col + ($gutter * 2))) 0 ($six_col + ($gutter * 2)); }
.push-seven { margin: 0 (-($seven_col + ($gutter * 2))) 0 ($seven_col + ($gutter * 2)); }
.push-eight { margin: 0 (-($eight_col + ($gutter * 2))) 0 ($eight_col + ($gutter * 2)); }
.push-nine { margin: 0 (-($nine_col + ($gutter * 2))) 0 ($nine_col + ($gutter * 2)); }
.push-ten { margin: 0 (-($ten_col + ($gutter * 2))) 0 ($ten_col + ($gutter * 2)); }
.push-eleven { margin: 0 (-($eleven_col + ($gutter * 2))) 0 ($eleven_col + ($gutter * 2)); }
}
\ No newline at end of file
sass/core/_core-grid.scss 0 → 100644
View file @ a60faf68
@charset "UTF-8";
/**
* Ubuntu Core Front-End Framework
*
* Grid file part of the Ubuntu Core Front-End Framework
*
* This grid is composed by 14 columns (units) separated by 13 gutters (1/3 unit).
* The first and last column are for padding purposes only.
* The content fits in the middle 12 columns.
* Possible divisions: 1 (12 units + 11 gutters), 2 (6 units + 5 gutters),
* 3 ( 4 units + 3 gutters) and 4 (3 units + 2 gutters).
*
* When 1 unit = 60px, 1 gutter = 20px
*
* @project Ubuntu Core Front-End Framework
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
* @see http://gridinator.com/
*/
/**
* Table of contents
*
* Main containers
* Columns
* Empty columns
* Borders
* Push and pull
* Verticla gutter
* Last
* Clearing
one-col 60
two-col 140
three-col 220
four-col 300
five-col 380
six-col 460
seven-col 540
eight-col 630
nine-col 700
ten-col 780
eleven-col 860
twelve-col 940
*/
.fake { display: none; }
body {
font-size: 14px;
}
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col, .col {
@include box-sizing;
clear: none;
display: inline-block;
float: none;
margin-right: $gutter;
margin-bottom: 20px;
padding: 0;
position: relative;
width: 100%;
}
.twelve-col {
.one-col,
.two-col,
.three-col,
.four-col,
.five-col,
.six-col,
.seven-col,
.eight-col,
.nine-col,
.ten-col,
.eleven-col { width: 100%; }
}
.last-col, .last { margin-right: 0; }
/**
* Clearing
*
* Hard and soft clearing classes
*
* @section clearing
*/
.clearfix:after, .container:after {
clear: both;
content: "\0020";
display: block;
height: 0;
overflow:hidden;
visibility: hidden;
}
.clear { clear: both; }
.clearfix { display: block; }
sass/core/core-mixins.scss → sass/core/_core-mixins.scss
View file @ a60faf68
......@@ -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
sass/core/core-templates.scss → sass/core/_core-templates.scss
View file @ a60faf68
@charset "UTF-8";
@import "core-constants";
@import "core-mixins";
/**
* Ubuntu Super Patterns Stylesheet
*
* Contains audience related themes for site-wide application
*
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
......@@ -12,7 +16,7 @@
/**
* Audience specific
*
*
* @section audience
*/
......@@ -21,39 +25,39 @@
.voice-canonical { }
.voice-community.voice-canonical { }
/*
* Consumer
/*
* Consumer
*/
.audience-consumer{
color: $cool_grey;
color: $cool-grey;
.row-box, .main-content {
color: $cool_grey;
}
color: $cool-grey;
}
.inner-wrapper {
background: #fff;
}
.quote-right-top {
padding: 60px 60px 0 40px;
background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-br-287x287.png") no-repeat;
height: 287px;
height: 287px;
position: absolute;
right: -($gutter_width * 2);
right: -($gutter-width * 2);
text-align: left;
top: -($gutter_width * 4.5);
width: $four_col;
top: -($gutter-width * 4.5);
width: $four-col;
p {
@include font_size (16);
@include font-size (16);
margin: (1.538em / 2);
padding-bottom: 0;
color: #fff;
cite {
@include font_size (12);
@include font-size (12);
color: #fff;
padding: 0;
}
......@@ -62,18 +66,18 @@
.quote-right-top p a,
.quote-right p a { color: #fff; }
.quote-right {
@include font_size (18);
@include font-size (18);
color: #fff;
padding: 50px 100px 0 50px;
text-indent: -6px;
background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-bl-287x287.png") no-repeat;
min-height: 287px;
min-height: 287px;
position: absolute;
right: -$gutter_width;
right: -$gutter-width;
text-align: left;
top: -($gutter_width * 4.5);
width: $four_col -(150/$base)em;
top: -($gutter-width * 4.5);
width: $four-col -(150/$base)em;
cite {
font-style: normal;
margin-left: 6px;
......@@ -81,13 +85,13 @@
}
.quote-right-alt {
background: url(/sites/ubuntu/latest/u/img/patterns/quote-white-br-360x360.png) 0 -100px no-repeat;
color: $ubuntu_orange;
color: $ubuntu-orange;
padding: 50px 50px 0 50px;
}
.quote-right-right { background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-br-287x287.png") no-repeat; }
}
/*
/*
* Enterprise
*/
......@@ -95,30 +99,30 @@
h1 { margin: 0 0 18px 0; }
td{ background: #fff; }
th, td {
padding: 6px 10px;
background: #fff;
}
th[scope="col"] {
background: #E2D4DC;
color: $canonical_aubergine;
color: $canonical-aubergine;
}
tbody th[rowspan] { background: #F7F2F6; }
tfoot th[rowspan] { background: #dfdcd9; }
tfoot td, tfoot th {
font-weight: normal;
background: #dfdcd9;
background: #dfdcd9;
}
.inner-wrapper {
background: $dark_aubergine;
background: $dark-aubergine;
color: #fff;
}
.row-box {
background: #fff;
color: $cool_grey;
color: $cool-grey;
}
/*.row-quote {
/*.row-quote {
background: none repeat scroll 0 0 #E2D4DC;
color: #772953;
margin-left: -1.125em;
......@@ -139,7 +143,7 @@
text-indent: -12px;
}
.row-quote blockquote cite {
@include font_size (12);
@include font-size (12);
color: #656565;
font-style: normal;
margin-left: 12px;
......@@ -148,32 +152,32 @@
}
.row-enterprise {
background: $canonical_aubergine;
background: $canonical-aubergine;
color:#fff;
@include rounded_corners(0);
@include rounded-corners(0);
.box, div {
background: $canonical_aubergine;
background: $canonical-aubergine;
color:#fff;
}
a {
color:#fff;
color:#fff;
}
}
/*
.audience-consumer.audience-enterprise{
.inner-wrapper {
background: $mid_aubergine;
background: $mid-aubergine;
color: #fff;
}
.row-box,
.main-content {
background: #fff;
color: $cool_grey;
color: $cool-grey;
}
}
*/
......
sass/core/core.scss → sass/core/_core.scss
View file @ a60faf68
@charset "UTF-8";
@import "core-constants";
@import "core-mixins";
/**
* Ubuntu Core Front-End Framework
*
* Main CSS file part of the Ubuntu Core Front-End Framework
*
*
* @project Ubuntu Core Front-End Framework
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
* @colordef $cool_grey (#333); main text
* @colordef $ubuntu_orange (#dd4814); Ubuntu orange
* @colordef $cool-grey (#333); main text
* @colordef $ubuntu-orange (#dd4814); Ubuntu orange
*/
/**
......@@ -21,7 +25,7 @@
/**
* Font sizes
*
*
* 45px
* 32px
* 23px
......@@ -29,7 +33,7 @@
* 16px - bold
* 13px - bold - uppercase
*/
/**
* Table of contents
* General
......@@ -41,7 +45,7 @@
* Forms
* Tables
*/
/**
* General
*
......@@ -57,44 +61,99 @@ 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
border: 0;
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section {
display: block;
footer, header, nav, section {
display: block;
}
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
audio:not([controls]) {
display: none;
}
[hidden] {
display: none;
display: none;
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 300;
src: url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/e7URzK__gdJcp1hLJYAEag.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/mZSs29ggGoaqrCNB3kDfZQ.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 500;
src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/I5PmmDkYShUQg-ah7wh25w.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/trnbTfqisuuhRVI3i45C5w.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 300;
src: local('Ubuntu Light Italic'), local('Ubuntu-LightItalic'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/j-TYDdXcC_eQzhhp386SjT8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
src: local('Ubuntu Italic'), local('Ubuntu-Italic'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/GZMdC02DTXXx8AdUvU2etw.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 500;
src: local('Ubuntu Medium Italic'), local('Ubuntu-MediumItalic'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/NWdMogIO7U6AtEM4dDdf_T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v5/pqisLQoeO9YTDCNnlQ9bfz8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
html {
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-transition: background-position 100 ease;
-ms-text-size-adjust: 100%;
-o-transition: background-position 100 ease;
-webkit-text-size-adjust: 100%;
-webkit-transition: background-position 100 ease;
background: url('#{$asset-path}backgrounds/image-background-paper.png') repeat-y fixed center top $light-grey;
font-size: 100%;
overflow-y: scroll;
text-size-adjust: 100%;
transition: background-position 100 ease;
}
body {
background: #fff url("/sites/ubuntu/latest/u/img/patterns/body_bg.jpg");
background: url('#{$asset-path}backgrounds/image-background-paper.png') repeat-y center top $light-grey;
color: #333;
font-family: Ubuntu, Arial, "libra sans", sans-serif;
font-weight: 300;
......@@ -108,22 +167,25 @@ blockquote {
margin: 28px 20px;
}
blockquote:before, blockquote:after,
blockquote:before,
blockquote:after,
q:before, q:after {
content: "";
content: none;
}
legend {
border: 0;
*margin-left: -7px;
border: 0;
*margin-left: -7px;
}
figure {
margin: 0;
margin: 0;
}
abbr, acronym { cursor: help; }
abbr,
acronym { cursor: help; }
/**
* Links
*
......@@ -131,62 +193,72 @@ abbr, acronym { cursor: help; }
*/
a:focus {
outline: thin dotted;
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
outline: 0;
}
a:link, a:visited {
color: $link_color;
a:link,
a:visited {
color: $link-color;
text-decoration: none;
}
a:hover, a:active, a:focus {
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: ""; }
nav ul li a:after,
.carousel ul li a:after,
ul li p a:after { content: ""; }
/**
* Lists
*
* @section lists
*/
ol, ul {
ol,
ul {
margin-left: 20px;
margin-bottom: 20px;
}
ol ol, ul ul, ol ul, ul ol {
margin-bottom: 0;
}
ol ol,
ul ul,
ol ul,
ul ol { margin-bottom: 0; }
nav ul,
nav ol {
list-style: none;
list-style-image: none;
list-style: none;
list-style-image: none;
}
/**
* Images
*
*
* @section images
*/
svg:not(:root) {
overflow: hidden;
}
svg:not(:root) { overflow: hidden; }
img {
border: 0;
border: 0;
height: auto;
max-width: 100%;
}
img.left { margin-right: $gutter_width; }
img.right { margin-left: $gutter_width; }
img.left { margin-right: $gutter-width; }
img.right { margin-left: $gutter-width; }
.middle img {
vertical-align: middle;
......@@ -198,39 +270,91 @@ img.right { margin-left: $gutter_width; }
*
* @section type
*/
h1, h2, h3, h4 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
line-height: 1.3;
line-height: 1.3;
}
h1 { @include font_size (45) }
h2 { @include font_size (32) }
h1 {
font-size: 1.625em;
margin-bottom: .5em;
}
h2 span, h1 span { display: block; }
h2 {
font-size: 1.438em;
margin-bottom: .5em;
}
p + h2, ul + h2, ol + h2, pre + h2 { margin-top: (18 / 32)em; }
h3 {
font-size: 1.219em;
margin-bottom: .522em;
}
header nav a:link { font-weight: normal; }
h4 {
font-size: 1.25em;
font-weight: 400;
margin-bottom: .615em;
}
h3 { @include font_size (23) }
h5 {
font-size: 1em;
font-weight: 700;
margin-bottom: 1em;
}
p + h3, ul + h3, ol + h3, pre + h3 { margin-top: (18 / 23)em; }
h6 {
font-size: .723em;
font-weight: 400;
margin-bottom: 1em;
letter-spacing: .1em;
text-transform: uppercase;
}
h4 { @include font_size (19.5) }
p,
li {
font-size: 1em;
line-height: 1.5;
margin: 0;
margin-bottom: .75em;
padding: 0;
}
p + h4, ul + h4, ol + h4, , pre + h4 { margin-top: (19.5 / $base)em; }
h2 span,
h1 span { display: block; }
h5 { @include font_size (16); }
p + h2,
ul + h2,
ol + h2,
pre + h2 { margin-top: (18 / 32)+em; }
h6 { @include font_size (13); text-transform: uppercase; letter-spacing: .1em }
header nav a:link { font-weight: normal; }
p, li, code, pre { @include font_size(16); line-height: 1.6; margin-bottom: (12/$base)em; }
p + h3,
ul + h3,
ol + h3,
pre + h3 { margin-top: (18 / 23)+em; }
/* p + ol, p + dl {
p + h4,
ul + h4,
ol + h4,
pre + h4 { margin-top: (19.5 / $base)+em; }
ol+h2, p+h2, pre+h2, ul+h2 { margin-top: .563em; }
ol+h3, p+h3, pre+h3, ul+h3 { margin-top: .783em; }
ol+h4, p+h4, pre+h4, ul+h4 { margin-top: 1.219em; }
/* p + ol, p + dl {
margin-top: 1.5em;
margin-bottom: 1.5em;
}*/
li { margin-bottom: .4em; }
......@@ -241,27 +365,27 @@ ins {
background: #fffbeb;
text-decoration: none;
}
small, .smaller { font-size: 13px; }
small,
.smaller { font-size: 13px; }
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
dfn {
font-style: italic;
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;
background: #ff0;
color: #000;
}
code, pre {
......@@ -269,26 +393,17 @@ code, pre {
}
pre {
@include rounded_corners(4px);
background: $light_orange;
@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);
blockquote > p {
@include font-size (13);
font-weight:100;
margin:0 0 .4em 0;
}
......@@ -310,116 +425,131 @@ button,
input,
select,
textarea {
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
font-family: Ubuntu,Arial,"libra sans",sans-serif;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
line-height: normal;
select {
font-size: 1em;
font-weight: 300;
}
button,
input { line-height: normal; }
button,
input[type="button"],
input[type="reset"],
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
*overflow: visible;
cursor: pointer;
-webkit-appearance: button;
*overflow: visible;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
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;
@include rounded-corners(2px);
-moz-box-sizing: content-box;
-webkit-appearance: none;
-webkit-box-sizing: content-box;
box-sizing: content-box;
font-family: Ubuntu,Arial,"libra sans",sans-serif;
font-weight: 300;
outline: none;
padding: 0.6956522em 0.869565em;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
overflow: auto;
vertical-align: top;
}
form fieldset {
@include rounded_corners(4px);
background-repeat: no-repeat;
background-color: #EFEEEC;
background-position: -15px -15px;
border: 0;
margin-bottom: 8px;
padding: 15px 20px 15px 94px;
@include rounded-corners(4px);
background-repeat: no-repeat;
background-color: #EFEEEC;
background-position: -15px -15px;
border: 0;
margin-bottom: 8px;
padding: 15px 20px;
}
form fieldset h3 {
border-bottom: 1px dotted #dfdcd9;
margin-bottom: 9px;
padding-bottom: 10px;
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[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
-webkit-appearance: none;
@include rounded-corners(2px);
background: #fff;
border: 1px solid #999;
display: block;
font-family: Ubuntu,Arial,"libra sans",sans-serif;
font-size: 1em;
font-weight: 300;
padding: 0.6956522em 0.869565em;
}
form input:focus, form textarea:focus {
border: 1px solid #000;
}
form input:focus,
form textarea:focus { border: 1px solid #dd4814; }
form textarea[readonly='readonly'] {
color: #999;
}
form textarea[readonly='readonly'] { color: #999; }
form input[type="checkbox"], form input[type="radio"] {
margin: 0;
width:auto;
margin: 0;
width:auto;
}
form input[type="checkbox"] + label,
form input[type="checkbox"] + label,
form input[type="radio"] + label{
display: inline;
margin-left: 5px;
vertical-align: middle;
width: auto;
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;
@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;
background: $ubuntu-orange;
}
form label {
cursor: pointer;
display: block;
margin-bottom: 4px;
cursor: pointer;
display: block;
margin-bottom: 4px;
}
form label span {
color: $error;
......@@ -428,8 +558,8 @@ form label span {
form ul { margin-left:0; }
form li {
list-style: none outside none;
margin-top: 14px;
list-style: none outside none;
margin-top: 14px;
}
......@@ -451,34 +581,91 @@ form input[type="reset"] {
* @section tables
*/
table {
border-collapse: collapse;
border-spacing: 0;
border-collapse: collapse;
border-spacing: 0;
overflow-x: scroll;
margin-bottom: $gutter-width;
margin: 0 0 (40/$base) + em 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;
padding: 15px 10px;
background: #f0edea;
border: 1px dotted $warm-grey;
}
td {
text-align: center;
vertical-align: middle;
text-align: center;
vertical-align: middle;
}
thead th {
border-collapse: separate;
border-spacing: 0 10px;
background: #fee3d2;
color: #333333;
font-weight: normal;
border-collapse: separate;
border-spacing: 0 10px;
background: #fee3d2;
color: #333333;
font-weight: normal;
}
tbody th {
font-weight: 300;
text-align: left;
font-weight: normal;
font-weight: 300;
}
th[scope="col"] {
text-align: center;
text-align: center;
}
thead th:first-of-type { text-align: left; }
}
/* Responsive typo
h1 {
@include font-size (26);
margin-bottom: .5rem;
}
h2 {
font-size: 1.438rem;
margin-bottom: .5rem;
}
h3 {
font-size: 1.219rem;
margin-bottom: .522rem;
}
h4 {
font-size: 1rem;
font-weight: 400;
margin-bottom: .615rem;
}
h5 {
font-size: .813rem;
font-weight: 700;
margin-bottom: 1rem;
}
h6 {
font-size: .723rem;
font-weight: 400;
margin-bottom: 1rem;
letter-spacing: .1rem;
text-transform: uppercase;
}
p {
@include font-size (14);
line-height: 1.6;
margin: 0;
margin-bottom: .75rem;
padding: 0;
}*/
@media only screen and (max-width : 768px) {
table {
display: block;
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width: 984px) {
form fieldset {
padding: 15px 20px;
}
img {
max-width: none;
}
}
\ No newline at end of file
sass/core/core-constants.scss deleted 100644 → 0
View file @ d30863b5
@charset "UTF-8";
/**
* Ubuntu Patterns Stylesheet
*
* The CSS file required by Ubuntu patterns page
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
* @see http://design.ubuntu.com
*/
/**
* standard colors
*
* @colordef standard colors
*/
$ubuntu_orange: #dd4814; /* ubuntu orange (used for text links also on any site except canonical) */
$light_orange: #fdf6f2; /* used as background on pre text */
$canonical_aubergine: #772953; /* canonical aubergine */
$light_aubergine: #77216f; /* light aubergine (consumer) */
$mid_aubergine: #5e2750; /* mid aubergine (both) */
$dark_aubergine: #2c001e; /* dark aubergine (enterprise) */
$warm_grey: #aea79f; /* warm grey */
$cool_grey: #333333; /* cool grey */
$light_grey: #f7f7f7; /* light grey */
/* notifications */
$error: #df382c; /* red */
$warning: #eca918; /* yellow */
$success: #38b44a; /* green */
$information: #19b6ee; /* cyan */
/* colour coded status - from negative to positive (Icon: canonical circle) */
$status_red: #df382c; /* red, for status that require immediate attention */
$status_grey: #aea79f; /* grey, for disabled status or ones that don’t require attention */
$status_yellow: #efb73e; /* yellow, for status that require attention */
$status_blue: #19b6ee; /* blue, for status that don’t require action */
$status_green: #38b44a; /* green, for positive status */
/* misc colours */
$box_solid_grey: #efefef;
$link_color: $ubuntu_orange; /* This is the global link color, mainly used for links in content */
/* grid variables */
$base: 16;
$gutter_width: 20px;
$grid_gutter: 20px;
$gutter: 2.12766%;
$one_col: 6.38297%;
$two_col: 14.89361%;
$three_col: 23.40425%;
$four_col: 31.91489%;
$five_col: 40.42553%;
$six_col: 48.93617%;
$seven_col: 57.4468%;
$eight_col: 65.95744%;
$nine_col: 74.46808%;
$ten_col: 82.97872%;
$eleven-col: 91.48936%;
\ No newline at end of file
sass/core/core-grid.scss deleted 100644 → 0
View file @ d30863b5
@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/core/core-pattern.scss deleted 100644 → 0
View file @ d30863b5
@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/core/core-print.scss
View file @ a60faf68
......@@ -2,13 +2,13 @@
/**
* Ubuntu print Stylesheet
*
*
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
*/
* { background: #fff; color: #000; }
body {
......@@ -32,6 +32,10 @@ footer {
display: none;
}
nav.nav-secondary {
display: block;
}
.wrapper {
width: auto;
margin: 0 5%;
......
sass/core/patterns/_arrows.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
%arrow {
height: 11px;
position: absolute;
width: 18px;
}
.arrow-up {
@extend %arrow;
background: url('#{$asset-path}patterns/arrow-up.png') 0 0 no-repeat;
left: 20px;
top: -11px;
}
.arrow-down {
@extend %arrow;
background: url('#{$asset-path}patterns/arrow-down.png') 0 0 no-repeat;
bottom: -11px;
right: 20px;
}
.arrow-right {
@extend %arrow;
background: url('#{$asset-path}patterns/arrow-right.png') 0 0 no-repeat;
height: 18px;
right: -11px;
top: 20px;
width: 11px;
}
.arrow-left {
@extend %arrow;
background: url('#{$asset-path}patterns/arrow-left.png') 0 0 no-repeat;
bottom: 20px;
height: 18px;
left: -11px;
width: 11px;
}
div > .arrow-left { left: -10px; }
@media only screen and (max-width : 768px) {
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
html.yui3-js-enabled .arrow {
visibility: visible;
}
} // @media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_blockquotes.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
blockquote {
&.pull-quote {
text-indent: 0;
p {
color: $cool-grey;
padding-left: 10px;
padding-right: 10px;
@include font-size (24.833);
text-indent: -.4em;
margin-left: .4em;
line-height: 1.3;
span {
font-weight: bold;
color: $ubuntu-orange;
line-height: 0;
position: relative;
left: -5px;
& + span { left: 5px; } // the second span
}
cite {
margin: 10px 0 0;
font-weight: 300;
display: block;
font-size: .75em;
text-indent: 0;
}
}
&.js {
padding-left: $gutter-width * 3;
display: table-cell;
}
}
&.quote-canonical,
&.quote-canonical-white {
@include font-size (16);
background: url("#{$asset-path}patterns/quote-white-360x360.png") no-repeat 20px -130px;
color: $canonical-aubergine;
float: right;
font-size: 1em;
height: 215px;
margin-top: 0;
padding: 20px 60px 0;
position: relative;
width: 236px;
}
&.quote-canonical-white {
background: url("#{$asset-path}patterns/quote-aubergine-345x345.png") no-repeat 0 0;
color: #fff;
padding: 80px 60px 0;
height: 265px;
}
&.quote p:first-child {
@include font-size (18); // (16) desired value in px, this is divided by the baseline font-size value to reach the em value
line-height: 1.3;
text-indent: -7px;
}
&.quote-right-bottom {
background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.svg");
background-repeat: no-repeat;
background-size: 287px 286px;
color: #fff;
height: 167px;
padding: 60px 40px;
position: static;
right: -($gutter-width * 2);
top: -($gutter-width * 4.5);
width: 207px;
& p { color: #fff; }
}
&.quote-grey {
@include font-size (36);
background: url("#{$asset-path}patterns/quote-grey-br-211x211.png") no-repeat scroll 0 0 transparent;
color: #fff;
height: 152px;
line-height: 40px;
margin-left: 20px;
padding: 60px 0 0;
text-align: center;
width: 211px;
}
&.quote-bottom-left {
background: url("#{$asset-path}patterns/quote-orange-bl-287x287.png") no-repeat;
color: #fff;
height: 167px;
padding: 55px 40px 70px 45px;
width: 225px;
}
}
//.pull-quote {
//@include font-size (30);
//color: $warm-grey;
//line-height: 1.4;
//right: 0;
//}
html.no-svg,
.opera-mini {
blockquote.quote-right-bottom {
background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.png");
}
}
// End blockquote
// row-quote
.row-quote {
@include rounded-corners(0);
blockquote {
@include rounded-corners(4px);
margin: 0;
padding: 0;
p {
margin-bottom: .75em;
line-height: 1.3;
color: $cool-grey;
padding-left: 10px;
padding-right: 10px;
//@include font-size (23);
//font-size: 1em;
text-indent: 0;
}
span {
font-weight: bold;
color: $ubuntu-orange;
line-height: 0;
position: relative;
left: -5px;
& + span { left: 5px; } // the second span
}
cite {
color: $cool-grey;
font-style: normal;
margin-bottom: 0;
font-size: .75em;
text-indent: -14px;
text-indent: 0;
}
}
.quote-twitter {
background: #fcece7 url('#{$asset-path}pictograms/pictogram-twitter-115x139.png') $gutter-width bottom no-repeat;
padding: $gutter-width $gutter-width $gutter-width $three-col;
}
.quote-twitter-small {
background: #fcece7 url('#{$asset-path}pictograms/pictogram-twitter-54x63.png') 99% bottom no-repeat;
padding: $gutter-width $gutter-width $gutter-width 80px;
p {
margin: 0;
padding: 0;
}
}
}
blockquote.quote-canonical,
blockquote.quote-canonical-white {
background: none;
color: $cool-grey;
width: auto;
height: auto;
padding: 0 30px;
margin-top: 20px;
}
@media only screen and (max-width : 768px) {
.row-quote blockquote p {
}
}
@media only screen and (min-width : 768px) {
.row-quote blockquote {
text-indent: -7px;
}
.pull-quote {
text-indent: -.4em;
}
.row-quote blockquote p {
@include font-size (24.83);
}
blockquote.pull-quote p,
.row-quote blockquote p {
padding-left: 0;
padding-right: 0;
text-indent: -.7em;
span {
font-size: 1.391304348em;
}
cite {
margin-left: 0;
text-indent: 0;
}
}
blockquote.pull-quote p span,
.row-quote blockquote p span {
top: 5px;
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
.row-quote blockquote {
p {
@include font-size (24.83);
text-indent: -.4em;
}
}
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
.row-quote blockquote {
padding: 0 80px 20px;
text-indent: -10px;
}
blockquote.pull-quote p span,
.row-quote blockquote p span {
top: 10px;
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_boxes.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
%box {
@include rounded-corners(4px);
padding: 1.333em $gutter-width;
}
.box {
@extend %box;
background: #fff;
border: 1px solid #dfdcd9;
}
.box-grey {
@extend %box;
background: $light-grey;
color: $cool-grey;
}
.box-orange {
background: $ubuntu-orange;
color: #fff;
}
.box-highlight {
@include box-shadow(0 2px 2px 0 #c2c2c2);
border: 1px solid $light-grey;
}
.box-textured {
@include box-shadow(0 2px 2px 0 #c2c2c2);
background: url("#{$asset-path}patterns/grey-textured-background.jpg");
border: 0;
}
.box-padded {
@include rounded-corners(4px);
background: $box-solid-grey;
border: 0;
margin-bottom: 20px;
padding: 6px 5px;
h3 {
@include font-size(19.5);
margin-left: ($gutter-width / 4);
margin-top: 5px;
}
li h3 { // this happens in 'Further reading' /cloud/insights
@include font-size(19.5);
margin: 0;
}
div {
@include rounded-corners(4px);
background: #fff;
overflow: hidden;
padding: 8px 8px 2px;
}
}
.box-padded-feature {
@include rounded-corners(4px);
background: url("#{$asset-path}patterns/soft-centre-bkg.gif") repeat scroll 0 0 #a09f9f;
border: 0;
margin-bottom: 20px;
padding: 11px 5px 6px;
h3 {
color: #fff;
margin-left: ($gutter-width / 4);
@include font-size(19.5);
}
h4 {
@include font-size(16);
font-weight: normal;
}
> div {
@include rounded-corners(4px);
background: #fff;
overflow: hidden;
padding: 20px 8px;
}
div div {
margin-bottom: 0;
}
.inline-icons {
display: table;
width: 100%;
margin: 0;
text-align: center;
li {
display: table-cell;
text-align: left;
float: none;
}
}
.one-col {
width: 48px;
float: left;
}
}
.resource {
cursor: pointer;
padding-bottom: 40px;
position: relative;
-moz-transition: background .2s ease-out;
-webkit-transition: background .2s ease-out;
transition: background .2s ease-out;
& h2 {
padding-right: 20px;
}
&.five-col h2,
&.four-col h2 {
a:link,
a:visited {
font-size: inherit !important;
}
}
&.four-col {
h2 a:link,
h2 a:visited {
font-size: 1.125em;
}
}
&.twelve-col {
h2 a:link,
h2 a:visited {
font-size: 1.40625em;
}
}
&:hover { background-color: #fafafa; }
&:after {
-moz-box-shadow: 0 -1px 2px 0 #ddd;
-webkit-box-shadow: 0 -1px 2px 0 #ddd;
box-shadow: 0 -1px 2px 0 #ddd;
content: '';
height: 1px;
position: absolute;
right: -6px;
top: 14px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
width: 41px;
z-index: 2;
}
&:hover:after {
right: -9px;
top: 18px;
width: 48px;
}
&:before {
content: '';
position: absolute;
-moz-transition: border-width .2s ease-out;
-webkit-transition: border-width .2s ease-out;
transition: border-width .2s ease-out;
top: -2px;
right: -3px;
width: 0;
height: 0;
border-bottom: 30px solid #fdfdfd;
border-right: 30px solid #fff;
-webkit-box-shadow: -2px 2px 2px rgba(176, 176, 176, .4);
-moz-box-shadow: -2px 2px 2px rgba(176, 176, 176, .4);
box-shadow: -2px 2px 2px rgba(176, 176, 176, .4);
z-index: 2;
@include rounded-corners(0 0 0 0);
}
&:hover:before {
border-bottom-width: 35px;
border-right-width: 35px;
}
&:last-of-type {
margin-bottom: 30px;
}
.content-cat {
background: url("#{$asset-path}icons/icon-resource-hub-icon-document.png") left center no-repeat;
color: #aea79f;
font-size: 14px;
letter-spacing: 1px;
margin: 0;
padding-left: 20px;
padding: 0;
position: absolute;
text-transform: uppercase;
}
.content-cat-webinar {
background: url("#{$asset-path}icons/icon-resource-hub-webinar.png") left center no-repeat;
}
&.box-image-centered div + span img {
margin-top: 40px;
}
}
html.yui3-js-enabled .resource:hover a {
text-decoration: underline;
}
.row-grey .resource:before {
border-right-color: #f7f7f7;
}
@media only screen and (max-width : 768px) {
.box-padded-feature .inline-icons li {
float: left;
display: block;
}
.box-padded-feature {
.one-col {
width: 48px;
float: left;
}
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_buttons.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
a.link-cta-ubuntu,
a.link-cta-canonical,
a.link-cta-inverted,
button.cta-ubuntu,
button.cta-canonical,
form button[type="submit"],
form input[type="submit"] {
@include box-sizing();
@include font-size (16);
@include rounded-corners(3px);
background: $ubuntu-orange;
color: #fff;
text-decoration: none;
display: inline-block;
margin: 0;
font-family: Ubuntu, Arial, 'libra sans', sans-serif;
font-weight: 300;
-webkit-font-smoothing: subpixel-antialiased;
-moz-font-smoothing: subpixel-antialiased;
-o-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;
padding: 8px 14px;
width: 100%;
text-align: center;
}
a.cta-large,
button.cta-large {
@include font-size (18);
padding: 10px 20px;
}
a.link-cta-canonical,
button.cta-canonical,
form button.cta-canonical[type="submit"],
form input.cta-canonical[type="submit"] {
background: $canonical-aubergine;
color: #fff;
}
a.link-cta-inverted,
button.cta-inverted {
background: #fff;
color: $cool-grey;
}
.row-enterprise a.link-cta-canonical,
.row-enterprise button.link-cta-canonical {
background: #fff;
color: $canonical-aubergine;
}
a.link-cta-ubuntu:hover,
a.link-cta-ubuntu:hover,
button.cta-ubuntu:hover,
form button[type="submit"]:hover,
form input[type="submit"]:hover {
background: darken($ubuntu_orange, 6.2%); // #c03f11
text-decoration: none;
}
a.link-cta-canonical:hover,
button.cta-canonical:hover {
background: darken($canonical-aubergine, 6.2%); // #5f193e
text-decoration: none;
}
a.link-cta-inverted:hover,
.row-enterprise a.link-cta-canonical:hover,
button.cta-inverted:hover,
.row-enterprise button.cta-canonical:hover {
background: #fff;
text-decoration: underline;
}
a.cta-deactivated,
a.cta-deactivated:hover,
button.cta-deactivated,
button.cta-deactivated:hover {
background: $box-solid-grey;
color: #fff;
cursor: not-allowed;
}
@media only screen and (min-width : 768px) {
a.link-cta-ubuntu,
a.link-cta-canonical,
a.link-cta-inverted,
button.cta-ubuntu,
button.cta-canonical,
form button[type="submit"],
form input[type="submit"] {
width: auto;
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
} // @media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
a.link-cta-ubuntu,
a.link-cta-canonical,
a.link-cta-inverted,
button.cta-ubuntu,
button.cta-canonical,
form button[type="submit"],
form input[type="submit"] {
width: auto;
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_contextual-footer.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
#context-footer {
@include box-sizing;
@include font-size (14);
border-bottom: 0;
clear: both;
padding-bottom: 1px;
padding-top: 0;
position: relative;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
width: 100%;
hr {
@include box-shadow(inset 0 2px 2px -2px #333);
background: $ubuntu-orange;
height: 14px;
margin: 0 0 10px;
border: 0;
clear: both;
}
div.twelve-col {
display: table;
float: none;
margin-bottom: 7px;
}
div div {
display: block;
padding-left: 0;
margin-bottom: 20px;
div {
display: block;
padding-left: 0;
margin-bottom: 0;
}
&.feature-one {
padding-left: 0;
}
&.feature-four {
margin-bottom: 0;
margin-right: 0;
}
}
> div {
padding-left: 10px;
padding-right: 10px;
}
ul {
margin-bottom: 5px;
}
li.active {
display: none;
}
h3 {
@include font-size (16);
font-weight: normal;
}
.list a:after,
a.link-arrow:after,
nav ul li h2 a:after {
content: ' \203A';
}
}
@media only screen and (min-width : 768px) {
#context-footer {
margin-bottom: 12px;
padding-left: 30px;
padding-right: 30px;
div + div {
width: 31%;
}
div div.feature-four {
padding-bottom: 20px;
}
hr {
margin: 0 -30px 40px;
}
& > div {
padding-left: 0;
padding-right: 0;
}
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
#context-footer {
padding: 0 40px 10px;
}
#context-footer div div {
display: table-cell;
float: none;
padding-left: 20px;
margin-bottom: 0;
}
#context-footer hr {
margin: 0 -40px 40px;
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_footer.scss 0 → 100644
View file @ a60faf68
@charset "UTF-8";
body footer.global #nav-global li:first-of-type a {
margin-left: 0;
}
footer.global {
@include box-sizing;
@include box-shadow(inset 0 2px 2px -1px #d3d3d3);
background: none;
border-top: 0;
clear: both;
display: block;
padding: 30px 10px 20px;
position: relative;
width: 100%;
.legal {
/* Can be removed once live */
margin: 0 auto;
width: 100%; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
}
.legal {
background-image: none;
position: relative;
clear: both;
min-height: 40px;
p,
ul {
padding-left: 0;
}
} // legal
h2 {
font-size: 0.75em;
line-height: 1.4;
margin-bottom: 0;
padding-bottom: 0.5em;
}
h2, h2 a:link, h2 a:visited {
color: $cool-grey;
font-weight: normal;
}
nav ul li h2 a:after { content: ""; }
ul { margin: 0; }
nav ul li.two-col {
display: inline-block;
min-height: 10em;
vertical-align: top;
}
nav ul li li {
@include font-size (12);
font-size: 0.75em;
margin-bottom: 0;
}
ul li li a:link, ul li li a:visited {
color: $cool-grey;
margin-bottom: 0;
}
ul li li a:hover, ul li li a:active, h2 a:hover, h2 a:active {
color: $ubuntu-orange;
//text-decoration: underline;
}
.inline li { display: inline; }
p, ul.inline li a {
color: $cool-grey;
font-size: 12px;
margin-bottom: 0;
}
ul.inline li a:hover { color: $ubuntu-orange; }
ul.inline li:after {
color: $warm-grey;
content: "\00b7";
vertical-align: middle;
margin: 0 5px;
}
ul.inline li:last-child { width: 120px; }
ul.inline li:last-child:after { content: ""; }
.inline li {
float: none;
margin-bottom: 0;
}
.top-link {
@include box-shadow(0 -4px 4px -4px rgba(0, 0, 0, 0.3) inset);
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
float: left;
font-size: 0.75em;
letter-spacing: 0.05em;
margin: 0 0 0 -10px;
padding-right: 20px;
text-transform: uppercase;
width: 100%;
a {
@include box-sizing();
background-image: url("#{$asset-path}pictograms/picto-pack/picto-upload-warmgrey.svg");
background-position: 10px center;
background-repeat: no-repeat;
background-size: 14px 14px;
border-bottom: 0 none;
color: #888888;
display: block;
float: none;
font-weight: 400;
padding: 12px 0 12px 28px;
}
}
} /* End footer.global */
html.no-svg, .opera-mini {
footer.global .top-link {
a {
background-image: url("#{$asset-path}pictograms/picto-pack/picto-upload-warmgrey.png");
}
}
}
@media only screen and (max-width : 768px) {
footer.no-global .legal {
@include box-sizing(content-box);
box-shadow: 0 2px 2px -1px #D3D3D3 inset;
padding-top: 10px;
margin-left: -10px;
padding-left: 10px;
padding-right: 10px;
}
#livechat-eye-catcher {
display: block;
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 768px) {
footer.global .inline li {
display: inline;
float: left;
}
} // @media only screen and (min-width : 768px)
@media only screen and (min-width : 769px) {
footer.global .top-link {
display: none;
}
footer.global .footer-b h2 a i {
font-style: normal;
display: inline;
}
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
footer.global .legal {
width: 984px; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
}
footer.global {
padding: 30px 0 20px;
.legal {
background: url("#{$asset-path}logos/logo-ubuntu-grey.png") 100% 0 no-repeat;
}
.footer-a {
display: block;
}
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_forms.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
form {
input,
select,
textarea {
@include box-sizing();
width: 100%;
}
.fieldset-submit ul {
margin-bottom: 0;
}
fieldset {
.mktError,
.errMsg,
.reqMark {
color: $error;
}
.mktFormMsg {
clear: both;
display: block;
}
}
}
@media only screen and (max-width : 768px) {
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
} // @media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_header.scss 0 → 100644
View file @ a60faf68
@charset "UTF-8";
header.banner {
border-top: 0;
min-width: 100%;
width: auto;
background: $ubuntu-orange;
display: block;
position: relative;
z-index: 2;
.nav-primary {
border: 0;
margin: 0 auto;
overflow: hidden;
ul {
border-right: 1px solid lighten($ubuntu-orange, 10%);
float: left;
margin: 0;
position: relative;
li {
border-left: 1px solid darken($ubuntu-orange, 5%);
float: left;
list-style-image: none;
margin: 0;
text-indent: 0;
vertical-align: bottom;
}
li:last-child {
border-right: 1px solid darken($ubuntu-orange, 5%);
}
li a:link,
li a:visited {
font-size: 14px;
border-left: 1px solid lighten($ubuntu-orange, 7%);
color: #fff;
display: block;
margin-bottom: 0;
padding: 14px 14px 13px;
position: relative;
text-align: center;
text-decoration: none;
-webkit-font-smoothing: subpixel-antialiased;
-moz-font-smoothing: subpixel-antialiased;
-o-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;
}
a.active {
background: #B83A10;
border-left: 1px solid lighten($ubuntu-orange, 7%);
}
li a:hover {
background: #e1662f;
border-top: 0;
@include box-shadow(inset 0 2px 2px -2px #777);
}
} // end ul
} // nav-primary
} // end header.banner
// Responsive header navigation
#main-navigation-link { display: none; }
header.banner .nav-toggle {
position:absolute;
right: 0;
display: block;
width: 48px;
height: 48px;
text-indent: -99999px;
background-image: url(#{$asset-path}icons/navigation-menu-plain.svg);
@include background-size(25px auto);
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
}
header.banner .no-script {
display: none;
}
.opera-mini header.banner .nav-toggle,
.no-svg header.banner .nav-toggle {
background-image: url(#{$asset-path}icons/navigation-menu-plain.png);
}
header.banner nav ul {
background-color: $nav-bg;
display: none;
float: left;
}
header.banner .nav-primary.active {
@include box-shadow(0 1px 2px 1px rgba(120, 120, 120, 0.2));
padding: 0;
border-bottom: 1px solid $nav-border-dark;
}
header nav ul.active {
display: block;
}
header.banner .nav-primary ul li,
header.banner .nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:active {
display: block;
padding: 0;
margin: 0;
border: none;
}
header.banner .nav-primary ul li a:hover {
@include box-shadow(none);
background-color: $nav-hover-bg;
}
header.banner .nav-primary ul li a.active {
background-color: $nav-active-bg;
}
header.banner .nav-primary ul li {
border-bottom: 1px solid #F2F2F4;
font-size: 16px;
}
header.banner .nav-primary ul li:last-child {
border: 0;
}
header.banner nav.nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:hover,
header.banner .nav-primary ul li a:active {
padding: 14px 14px 13px;
text-align: left;
}
header.banner nav.nav-primary ul.active li ul {
display: none;
}
#menu.active:after {
background-image: url(#{$asset-path}patterns/nav-arrow.svg);
background-repeat: no-repeat;
background-position: 50% 26px;
content: "";
display: block;
height: 23px;
margin-left: 0;
padding-bottom: 17px;
position: relative;
top: -3px;
width: 48px;
z-index: 999;
}
html.no-svg, .opera-mini {
#menu.active:after {
background-image: url(#{$asset-path}patterns/nav-arrow.png);
}
} // End responsive navigation
/* 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("#{$asset-path}ubuntu-logo.png") no-repeat scroll 0 10px transparent;
font-size: 18px;
margin-bottom: 0;
position: relative;
text-transform: lowercase;
float: left;
margin: 0;
display: inline-block;
height: 32px;
min-width: 128px;
margin-right: -20px;
margin-left: 10px;
padding: 7px 14px 9px 0;
img {
margin-right: 8px;
position: absolute;
left: -999em;
}
span {
float: left;
font-size: 23px;
font-weight: 300;
padding-left: 122px;
padding-right: 20px;
position: relative;
top: 5px;
}
}
.nav-primary.nav-left {
.logo-ubuntu {
float: right;
}
}
.nav-primary.nav-right {
.logo-ubuntu {
background-image: url("#{$asset-path}logos/logo-ubuntu-white.svg");
background-size: 107px 25px;
float: left;
}
}
}
html.no-svg, .opera-mini {
header.banner .nav-primary.nav-right .logo-ubuntu {
background-image: url("#{$asset-path}logos/logo-ubuntu-white.png");
}
}
@media only screen and (max-width: 295px) {
// this changes the logo to the circle of friends on screens below 295px
header.banner {
.nav-primary.nav-right .logo-ubuntu,
.logo-ubuntu {
@include background_size(20px 20px);
background: url('#{$asset-path}logos/logo-ubuntu_cof-white_orange-hex.svg') 0 50% no-repeat;
min-width: 0;
width: 38px;
}
}
header.banner .logo-ubuntu span {
padding-left: 38px;
}
} // end @@media only screen and (max-width: 295px)
html.no-svg, .opera-mini {
header.banner .logo-ubuntu {
background-image: url('#{$asset-path}logos/logo-ubuntu_cof-white_orange-hex.png');
}
}
@media only screen and (max-width : 768px) {
header.banner .nav-primary {
@include box-shadow(0 1px 2px 1px rgba(0, 0, 0, 0.2));
}
header.banner .nav-primary.active {
@include box-shadow(none);
padding: 0;
}
header nav ul.active {
float: left;
}
header nav ul.active li:last-child a:link,
header nav ul.active li:last-child a:visited {
border-bottom: 0;
}
header.banner .nav-primary ul {
position: relative;
width: 100%;
}
header.banner .nav-primary ul li.active {
a:link,
a:visited {
color: #333;
font-weight: 700;
}
}
header.banner .nav-primary ul li,
header.banner .nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:active {
@include box-sizing();
background: transparent;
border: none;
display: block;
font-weight: 300;
margin: 0;
padding: 0;
width: 100%;
}
header.banner .nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:hover,
header.banner .nav-primary ul li a:active {
background-color: $nav-bg;
border-bottom: 1px solid $nav-border-dark;
color: #333333;
font-size: 1em;
}
header.banner .nav-primary ul li:nth-last-child(-n+2) a:link,
header.banner .nav-primary ul li:nth-last-child(-n+2) a:visited {
border: 0;
}
header.banner .nav-primary ul li a:hover {
@include box-shadow(none);
background: lighten($nav_bg, 3%);
}
header.banner .nav-primary ul li a.active {
background-color: $nav-active-bg;
}
header.banner nav.nav-primary ul li a:link,
header.banner .nav-primary ul li a:visited,
header.banner .nav-primary ul li a:hover,
header.banner .nav-primary ul li a:active {
padding: 8px 10px;
text-align: left;
}
header.banner .nav-primary ul li {
@include box-sizing();
background: transparent;
border-bottom: 0;
border-right: 1px solid $nav-border-dark;
float: left;
width: 50%;
}
.nav-secondary {
background: #fff;
ul.second-level-nav {
border-top: 1px solid $nav-border-dark;
display: none;
margin-bottom: 0;
margin-left: 0;
padding-bottom: 10px;
padding-top: 10px;
width: 100%;
li {
@include box-sizing();
width: 50%;
margin: 0;
float: left;
a,
a:link,
a:visited {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
height: 100%;
padding: 10px 10px 10px 20px;
width: 100%;
}
&.active {
a,
a:link,
a:visited {
color: #333;
font-weight: 700;
}
}
}
} /* end .second-level-nav */
ul.third-level-nav {
display: none;
margin-bottom: 0;
width: 100%;
padding-bottom: 20px;
li {
@include box-sizing();
width: 50%;
margin: 0;
float: left;
padding-left: 30px;
a,
a:link,
a:visited {
@include box-sizing();
padding: 10px 10px 10px 0;
display: block;
width: 100%;
height: 100%;
}
&.active {
a,
a:link,
a:visited {
color: #333;
font-weight: 700;
}
}
&.single-link {
width: 100%;
}
} /* end li */
li:only-child {
width: 100%;
}
} /* end third-level-nav */
ul.breadcrumb {
@include box-sizing();
width: 100%;
margin-left: 0;
margin-bottom: 0;
li:first-of-type {
border-bottom: 1px solid $nav-border-dark;
margin-bottom: -1px;
}
li {
@include box-sizing();
color: #fff;
width: 100%;
display: block;
height: 40px;
margin: 0;
a,
a:link,
a:visited {
@include box-sizing();
font-size: 16px;
width: 100%;
color: #333333;
display: block;
margin-right: 0;
text-decoration: none;
padding: 8px 10px 0 10px;
}
&.active {
margin-top: 12px;
a,
a:link,
a:visited {
color: #333;
font-weight: 700;
}
}
&:nth-of-type(2n) {
margin-top: 12px;
}
.after {
background-image: url(#{$asset-path}patterns/nav-down-arrow.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 18px;
float: right;
height: 18px;
margin-right: -5px;
margin-top: -6px;
padding: 10px;
position: relative;
right: 0;
top: 0;
width: 18px;
}
}
li + li {
display: none;
a:link,
a:active,
a:visited {
padding-left: 20px;
}
a.after {
background-image: none;
}
}
}
&.open {
ul.breadcrumb li a:after,
ul.breadcrumb li a:link:after,
ul.breadcrumb li a:visited:after {
background-image: url(#{$asset-path}patterns/nav-up-arrow.svg);
}
ul.breadcrumb li + li a.after {
background-image: none;
}
ul.breadcrumb li .after {
background-image: url(#{$asset-path}patterns/nav-up-arrow.svg);
margin-top: -7px;
}
ul.second-level-nav,
ul.third-level-nav,
ul.breadcrumb li + li {
display: block;
}
}
}/* end nav-secondary */
.no-js {
.nav-secondary ul.second-level-nav { display: block; }
#main-navigation-link {
position: absolute;
right: 10px;
top: 12px;
width: 20px;
height: 28px;
z-index: 999;
text-indent: -999em;
display: block;
a {
background-image: url("#{$asset-path}icons/navigation-menu-plain.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 25px auto;
display: block;
width: 28px;
height: 28px;
position: absolute;
}
}
}
html.no-svg, .opera-mini {
.nav-secondary ul.breadcrumb {
li .after {
background-image: url(#{$asset-path}patterns/nav-down-arrow.png);
}
&.open {
ul.breadcrumb li a:after,
ul.breadcrumb li a:link:after,
ul.breadcrumb li a:visited:after {
background-image: url(#{$asset-path}patterns/nav-up-arrow.png);
}
ul.breadcrumb li .after{
background-image: url(#{$asset-path}patterns/nav-up-arrow.png);
}
}
}
header.banner .nav-primary #google-appliance-search-form button[type="submit"] {
background-image: url("#{$asset-path}search-black.png");
}
}
html.no-svg, .opera-mini {
.nav-secondary ul.breadcrumb {
li .after {
background-image: url(#{$asset-path}patterns/nav-down-arrow.png);
}
&.open {
ul.breadcrumb li a:after,
ul.breadcrumb li a:link:after,
ul.breadcrumb li a:visited:after {
background-image: url(#{$asset-path}patterns/nav-up-arrow.png);
}
ul.breadcrumb li .after{
background-image: url(#{$asset-path}patterns/nav-up-arrow.png);
}
}
}
header.banner .nav-primary #google-appliance-search-form button[type="submit"] {
background-image: url("#{$asset-path}search-black.png");
}
}
header.banner {
.nav-toggle {
background-image: url("#{$asset-path}icons/navigation-menu-plain.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 25px auto;
cursor: pointer;
display: block;
height: 48px;
position: absolute;
right: 0;
text-indent: -99999px;
width: 48px;
}
}
html.no-svg, .opera-mini {
header.banner .nav-toggle {
background-image: url("#{$asset-path}icons/navigation-menu-plain.png");
}
}
}
@media only screen and (min-width : 768px) {
header.banner .nav-primary ul li {
border-bottom: 0;
}
}
@media only screen and (min-width : 769px) {
header.banner {
-moz-box-shadow: 0 2px 2px -2px #777777 inset, 2px 1px #FFFFFF;
-webkit-box-shadow: 0 2px 2px -2px #777777 inset, 2px 1px #FFFFFF;
box-shadow: 0 2px 2px -2px #777777 inset, 2px 1px #FFFFFF;
nav.nav-primary {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 0;
}
}
header.banner .nav-toggle {
display: none;
}
header.banner nav ul {
background-color: transparent;
display: block;
}
header.banner .nav-primary ul li {
border-left: 1px solid #C64012;
}
header.banner .nav-primary ul li a:active,
header.banner .nav-primary ul li a:hover,
header.banner .nav-primary ul li a:visited,
header.banner nav.nav-primary ul li a:link {
border-left: 1px solid #EC5B29;
}
header.banner .nav-primary ul li:last-child {
border-right: 1px solid #C64012;
border-left: 1px solid #C64012;
}
header.banner .nav-primary ul li a.active {
background-color: #B83A10;
}
header.banner .nav-primary ul li a:hover {
background-color: #E1662F;
}
.nav-secondary {
ul:last-child li:last-child {
padding-bottom: 10px;
}
ul.breadcrumb,
ul.second-level-nav,
ul.third-level-nav {
li {
margin-right: 15px;
}
}
ul.breadcrumb {
float: left;
li {
margin-bottom: 10px;
}
}
ul {
float: none;
margin-bottom: 0;
}
ul li {
margin-bottom: 5px;
}
}
}
@media only screen and (min-width: 984px) {
header.banner {
margin-bottom: 20px;
}
header.banner nav.nav-primary ul {
display: block;
}
header.banner .nav-primary,
#nav-global .nav-global-wrapper {
width: 984px; /* 980px / 15px (baseline font); 980px + (60px x 2) = 1100px */
}
header.banner .nav-primary.nav-right .logo-ubuntu {
margin-left: 0;
}
}
/*
* Main navigation dropdown styles
*/
header.banner .nav-primary ul { position: static; }
header.banner .nav-primary li ul {
@include box_shadow(0 2px 2px -1px #777777);
@include rounded_corners(10px);
background: #f7f7f7;
border: 1px solid #d5d5d5;
display: none;
float: none;
margin: 0;
padding: 5px 0;
position: absolute;
top: 51px;
width: 200px;
}
// the new arrow that appears if there is secondary nav when you hover over the main nav
header.banner .nav-primary li:hover ul:after {
background: url("#{$asset-path}patterns/arrow-up-smaller.png") no-repeat;
content: '';
display: block;
height: 8px;
left: 20px;
position: relative;
top: -13px;
width: 200px;
z-index: 999;
}
// show secondary nav differently if :after isn't supported, remove arrow and move secondary nav up to meet the bottom of the navbar
.no-generatedcontent header.banner .nav-primary li ul {
@include rounded_corners(0 0 10px 10px);
top: 48px;
}
// the old arrow that appears if there is secondary nav when you hover over the main nav
header.banner .nav-primary li ul .arrow-up {
display: none;
}
header.banner .nav-primary li ul li {
border: 0;
float: none;
}
header.banner .nav-primary li ul li a:link,
header.banner .nav-primary li ul li a:visited {
border: 0;
color: #333333;
padding: 0 0 11px 14px;
text-align: left;
width: 170px;
}
header.banner .nav-primary li ul li a:hover {
background: none repeat scroll 0 0 transparent;
@include box_shadow(none);
color: #DD4814;
}
header.banner .nav-primary li ul li.first a:link,
header.banner .nav-primary li ul li.first a:visited,
header.banner .nav-primary li ul li:first-of-type a:link {
padding: 10px 14px;
}
header.banner .nav-primary li ul li.active a:link,
header.banner .nav-primary li ul li.active a:visited {
background: none repeat scroll 0 0 transparent !important;
}
header.banner .nav-primary li ul .promo {
border-top: 1px solid #D5D5D5;
float: left;
margin-top: 5px;
padding: 15px 0 0;
}
header.banner .nav-primary li ul .promo a:link,
header.banner .nav-primary li ul .promo a:visited {
background: none repeat scroll 0 0 transparent;
border-left: 0 none;
color: #333333;
height: auto;
padding: 0;
text-align: left;
}
header.banner .nav-primary li ul .promo p { margin: 0 10px; }
header.banner .nav-primary li ul .promo a:hover {
box-shadow: none;
color: #DD4814;
}
header.banner .nav-primary li ul .promo img {
margin-top: 14px;
margin-bottom: -6px;
@include rounded_corners(0 0 10px 10px);
position:relative;
top:1px;
}
header.banner .nav-primary li ul .promo .category {
color: $warm_grey;
font-size: 11px;
margin: 0 10px;
text-transform: uppercase;
}
header.banner .nav-primary li:hover ul { display: block; }
html.lt-ie8 header.banner .nav-primary li:hover ul { display: none; }
sass/core/patterns/_helpers.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
@import '../_core-constants';
.left { float: left; }
.right { float: right; }
// additional helper class for shouty text
.caps { text-transform: uppercase; }
img {
border: 0 none;
height: auto;
max-width: 100%;
&.left { margin-right: 0; }
&.touch-border { margin-bottom: -3px; }
}
.accessibility-aid,
.off-left {
position: absolute;
left: -999em;
}
a.external {
@include background-size(.7em .7em);
padding-right: .9em;
background-image: url('#{$asset-path}external-link-orange.svg');
background-position: right 1px;
background-repeat: no-repeat;
}
.opera-mini a.external,
.no-svg a.external { background-image: url('#{$asset-path}external-link-orange.png'); }
.text-center,
.align-center { text-align: center; }
.no-margin { margin: 0; }
.no-margin-bottom { margin-bottom: 0; }
.no-padding-bottom { padding-bottom: 0; }
.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: 0; }
.link-top {
@include font-size (14);
clear: both;
margin-bottom: 40px;
margin-top: -40px;
a {
background: #fff;
margin-right: 10px;
margin-top: -17px;
padding: 5px;
float: right;
}
}
.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-left: -20px; margin-top: -21px; }
div.box-image-centered span img,
div.row-image-centered span img,
div.row.row-image-centered span img,
img {
&.priority-0 {
position: absolute;
left: -999em;
}
}
.priority-0,
.not-for-small {
position: absolute;
left: -999em;
}
// responsive video solution
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
& + h3,
& + .video-title {
margin-top: 20px;
}
}
@media only screen and (max-width : 768px) {
.pull-right-40 { margin-right: -30px; }
.pull-bottom-right,
.pull-bottom-left { position: static; }
img.pull-bottom-left {
margin-bottom: 0;
margin-left: 0;
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 768px) {
div.box-image-centered span img,
div.row-image-centered span img,
div.row.row-image-centered span img,
img {
&.priority-0 {
position: relative;
left: auto;
}
}
.priority-0,
.not-for-small {
position: relative;
left: auto;
}
.for-mobile,
.for-small {
position: absolute;
left: -999em;
}
.pull-right {
float: right;
margin-right: -30px;
}
img.pull-left {
margin-left: -30px;
}
img.touch-border {
float: left;
margin-bottom: -30px;
}
} // end @media only screen and (min-width : 768px)
@media only screen and (min-width : 769px) {
img.left { margin-right: 20px; }
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
img.touch-border {
float: left;
margin-bottom: -40px;
}
img.pull-left { margin-left: -40px; }
.pull-right {
float: right;
margin-right: -40px;
}
.for-tablet,
.for-medium {
display: none;
}
.no-border {
border: 0;
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_image-centered.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
.row.row-image-centered,
div.box-image-centered,
div.row-image-centered,
div.row.row-image-centered {
padding: 20px 10px 0;
}
.row-box.row-image-centered {
padding-top: 20px;
padding-bottom: 20px;
}
.row.row-image-centered {
padding-top: 40px;
padding-bottom: 40px;
}
.row-hero.row-image-centered {
padding-top: 0;
}
div.row-image-centered,
div.box-image-centered,
div.row.row-image-centered {
//display: block;
div,
span {
//display: block;
float: none;
}
span {
width: 100%;
img {
height: auto;
max-width: 100%;
display: block;
padding: 0;
margin: 0 auto;
margin-bottom: 20px;
}
}
p,
h2,
h3 {
float: none;
}
}
@media only screen and (min-width : 768px) {
div.row-image-centered,
div.row.row-image-centered,
div.box-image-centered {
@include box-sizing;
padding-bottom: 20px;
display: table;
div {
float: none;
display: table-cell;
position: relative;
p,
h2,
h3 {
display: block;
width: 100%;
float: left;
}
+ span img { // if image is on the right hand side
padding-right: 0;
margin-bottom: 20px;
}
}
span {
display: table-cell;
float: none;
position: relative;
text-align: center;
top: 0;
vertical-align: middle;
width: auto;
img {
padding-right: 20px; // if image is on the left hand side
}
}
}
/*
alternative to row-image-centered
requires equal-height class on row
add align-vertically to the div containing the image
http://caniuse.com/transforms2d
*/
.align-vertically {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
img,
div {
-ms-transform: translateY(-50%); // for IE9
-webkit-transform: translateY(-50%);
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
} //@media only screen and (min-width : 768px)
div.box-image-centered {
padding-top: 20px;
}
@media only screen and (min-width : 768px) {
.row.row-image-centered,
div.box-image-centered,
div.row-image-centered,
div.row.row-image-centered {
padding: 30px;
}
div.box-image-centered div + span img,
div.row-image-centered div + span img,
div.row.row-image-centered div + span img,
div.box-image-centered span img.priority-0,
div.row-image-centered span img.priority-0,
div.row.row-image-centered span img.priority-0 {
margin-right: auto;
display: table-cell;
margin-bottom: 0;
}
} // @media only screen and (min-width : 768px)
@media only screen and (min-width: 984px) {
.row.row-image-centered,
div.row-image-centered,
div.row.row-image-centered,
div.box-image-centered {
@include box-sizing;
padding: 60px 40px 60px;
display: table;
div {
float: none;
display: table-cell;
position: relative;
p,
h2,
h3 {
display: block;
width: 100%;
float: left;
}
+ span img { // if image is on the right hand side
padding-right: 0;
//margin-bottom: 20px;
}
}
span {
display: table-cell;
float: none;
position: relative;
text-align: center;
top: 0;
vertical-align: middle;
width: auto;
img {
padding-right: 20px; // if image is on the left hand side
}
}
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_inline-logos.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
ul.inline-logos {
float: left;
margin-left: 0;
padding: 0;
text-align: center;
width: 100%;
li {
clear: none;
display: inline-block;
float: none;
margin: 10px 20px;
padding: 0;
&.clear-row { clear: left; }
&.last-item { border: 0; }
}
img {
@include transition;
vertical-align: middle;
max-width: 115px;
max-height: 32px;
}
}
.inline-icons {
margin: 0 0 $gutter-width;
li {
margin-right: 20px;
margin-bottom: 20px;
text-align: left;
display: inline-block;
&.last-item { margin-right: 0; }
}
&.no-margin-bottom li { margin-bottom: 0; }
img {
vertical-align: middle;
max-width: 115px;
max-height: 32px;
}
}
@media only screen and (max-width : 768px) {
ul.inline-logos {
img {
max-width: 172px;
max-height: 48px;
}
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
ul.inline-logos {
li {
clear: none;
display: inline-block;
height: auto;
margin: 20px 0;
border-right: 1px dotted #bbb;
line-height: 60px;
padding: 0 40px;
img {
float: none;
vertical-align: middle;
max-width: 200px;
max-height: 45px;
}
}
}
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
.inline-icons {
text-align: left;
margin-bottom: 20px;
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_lists.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
.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;
}
}
.list article {
border-bottom: 1px dotted $warm-grey;
margin-bottom: 0;
padding: 10px 0;
}
.list-spaced article,
.list-spaced li {
padding: 30px 0;
}
nav .list a {
display: block;
}
.list-ubuntu li,
.list-canonical li {
background-repeat: no-repeat;
background-position: 0 1em;
padding-left: 25px;
}
.list-ubuntu li { background-image: url('#{$asset-path}patterns/tick-orange.svg'); }
.list-canonical li { background-image: url('#{$asset-path}patterns/tick-midaubergine.svg'); }
.list-warm li { background-image: url('#{$asset-path}patterns/tick-warmgrey.svg'); }
.list-dark li { background-image: url('#{$asset-path}patterns/tick-darkaubergine.svg'); }
.vertical-divider .list-canonical li,
.vertical-divider .list-ubuntu li {
padding-left: 25px;
}
html.no-svg,
.opera-mini {
.list-ubuntu li {
background-image: url('#{$asset-path}patterns/tick-orange.png');
}
.list-canonical li {
background-image: url('#{$asset-path}patterns/tick-midaubergine.png');
}
.list-warm li {
background-image: url('#{$asset-path}patterns/tick-warmgrey.png');
}
.list-dark li {
background-image: url('#{$asset-path}patterns/tick-darkaubergine.png');
}
}
.no-bullets {
list-style: none;
margin-left: 0;
}
.row .combined-list {
ul,
div {
margin-bottom: 0;
}
li.last-item {
border-bottom: 1px dotted $warm-grey;
padding-bottom: 10px;
}
div.last-col,
ul.last-col {
margin-bottom: 20px;
li.last-item {
border-bottom: 0;
padding-bottom: 0;
}
}
}
.inline {
margin-left: 0;
li {
display: inline;
list-style: none;
margin-left: 0;
float: left;
}
}
@media only screen and (min-width : 768px) {
.row .combined-list {
ul,
div {
margin-bottom: 20px;
}
li.last-item {
border-bottom: 0;
padding-bottom: 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) {
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_notifications.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
div.warning {
@include rounded-corners(4px);
background-color: #fdffdc;
color: $cool-grey;
p {
padding: 0;
margin: 0;
}
}
@media only screen and (max-width : 768px) {
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_rows.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
// rows sass
// contents:
// row
// row-hero
// row-background
// strips
// row-aux
// row-step
// row
// ----------------------------------------------------------
.row {
@include box-sizing;
border-bottom: 1px dotted $warm-grey;
clear: both;
padding: 20px 10px 0;
position: relative;
br {
display: none;
}
&.no-padding-bottom { padding-bottom: 0 !important; }
}
.row-grey {
background: $light-grey;
}
.no-border { border: 0; }
// row-hero
// ----------------------------------------------------------
#main-content .row-hero {
margin-top: 20px;
padding-top: 0;
}
// row-background
// ----------------------------------------------------------
.row-background {
color: #fff;
background: url("#{$asset-path}backgrounds/image-background-wallpaper.jpg") no-repeat scroll 50% 50% #4b1827;
a.alternate {
color: #fff;
text-decoration: underline;
}
a.alternate:hover {
color: rgba(255, 255, 255, .6);
}
@media only screen and (min-width : 768px) {
background-position: center 50%;
background-size: 100% auto;
}
}
// strips
// ----------------------------------------------------------
.strip {
width: 100%;
display: block;
}
.strip-dark {
background-color: $dark-aubergine;
background-image: url("#{$asset-path}backgrounds/background-grid.png");
background-repeat: repeat;
color: #fff;
.list-ubuntu li {
border: 0;
}
.resource {
color: #333;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.resource:before {
border-right-color: #2c001e;
}
}
#main-content .strip-dark {
.resource:before {
border-bottom-width: 29px;
right: -2px;
top: -1px;
}
.resource:hover:before {
border-bottom-width: 34px;
}
.resource h2 {
padding-right: 20px;
}
}
// row-aux
// ----------------------------------------------------------
.row-aux {
background-color: rgba(255, 255, 255, .6);
text-align: center;
h2,
p {
text-align: left;
}
a p {
color: #333;
margin-bottom: 30px;
}
}
// row-step
// ----------------------------------------------------------
.row-step {
h2 {
position: relative;
top: 5px;
}
.step {
position: relative;
top: -5px;
height: 32px;
width: 32px;
border-radius: 50%;
border: 3px solid $ubuntu-orange;
color: $ubuntu-orange;
line-height: 32px;
text-align: center;
background-color: #fff;
font-size: 23px;
font-weight: 400;
}
}
@media only screen and (max-width : 768px) {
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 768px) {
.row { padding: 30px; }
#main-content .row-hero { margin-top: 40px; }
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
.row-step .step {
height: 42px;
width: 42px;
line-height: 42px;
}
.row br { display: block; }
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
.row br { display: block; }
.row { padding: 60px 40px 40px; }
.no-border { border: 0; }
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_search.scss 0 → 100644
View file @ a60faf68
@charset "UTF-8";
.header-search,
#box-search {
padding: 7px 0 7px 14px;
overflow: hidden;
input[type="search"],
input[type="text"] {
-webkit-appearance: none;
@include box-shadow(inset 0 1px 4px rgba(0,0,0,0.2));
@include box-sizing();
@include rounded-corners(4px);
@include transition;
background-color: #be3d00;
border: none;
color: #fff;
display: block;
float: left;
font-size: 16px;
height: 2.1em;
margin-bottom: 0;
padding: 0.5em 2.5em 0.5em 0.5em;
width: 100%;
}
// User agents are required to ignore a rule with an unknown selector. i.e: a group of selectors containing an invalid selector is invalid.
// So we need separate placeholder rules for each browser. Otherwise the whole group would be ignored by all browsers.
::-webkit-input-placeholder {
color: white;
opacity: 0.4;
}
::-webkit-input-placeholder {
color: white;
opacity: 0.4;
}
::-moz-placeholder {
color: white;
opacity: 0.4;
}
:-ms-input-placeholder {
color: white;
opacity: 0.4;
}
input:-moz-placeholder {
color: white;
opacity: 0.4;
}
::placeholder {
color: white;
opacity: 0.4;
}
input[type="search"]:focus { background-color: #a63603; }
button[type=submit] {
padding: 3px 2px;
line-height: 0;
float: left;
margin-left: -40px;
display: block;
background: none;
overflow: visible;
&:hover { background: none; }
img {
height: 28px;
width: 28px;
}
}
}
header.banner .search-toggle {
@include background-size(20px 20px);
background-image: url('#{$asset-path}search_icon_white_64.png');
background-image: url('#{$asset-path}search.svg');
background-position: center center;
background-repeat: no-repeat;
display: block;
height: 48px;
outline: none;
overflow: hidden;
position: absolute;
right: 58px;
text-indent: -999em;
top: 0;
width: 24px;
}
.search-toggle:link,
.search-toggle:active {
outline: none;
}
#box-search,
.header-search {
background: #f0f0f0;
border: 0;
display: none;
float: left;
margin-bottom: 0;
position: relative;
margin: 0 0 -1px 0;
padding: 0;
width: 100%;
z-index: 3;
}
#box-search.active,
.header-search.active,
.header-search.open { display: block; }
#box-search div,
.header-search div {
@include box-shadow( inset 0 -4px 4px -4px rgba(0, 0, 0, .3),
inset 0 5px 5px -5px rgba(0, 0, 0, 0.3));
background: $nav-bg;
margin: 10px;
position: relative;
z-index: 1;
}
#box-search form input[type="search"],
.header-search form input[type="search"] {
@include font-size (16);
@include rounded-corners();
@include box-shadow(0 2px 2px rgba(0, 0, 0, 0.3) inset,
0 -1px 3px rgba(0, 0, 0, 0.2) inset,
0 2px 0 rgba(255, 255, 255, 0.4));
@include box-sizing();
background: #fff;
border: 0;
color: #333;
font-size: 16px;
height: auto;
margin: 0;
float: left;
padding: 9px 10px;
width: 100%;
}
.yes-js .header-inner #box-search,
.yes-js .header-inner .header-search {
display: none;
form {
@include box-sizing();
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 10px;
top: 0;
z-index: 999;
position: relative;
width: 100%;
}
}
@media only screen and (max-width : 768px) {
header.banner {
.search-toggle {
right: 48px;
}
}
html.no-svg, .opera-mini {
.search-toggle {
background-image: url("#{$asset-path}search-white.png");
}
}
} // @media only screen and (max-width : 768px)
@media only screen and (min-width : 768px) {
header.banner .search-toggle {
display: none;
}
} // @media only screen and (min-width : 768px)
@media only screen and (min-width : 960px) {
#box-search,
.header-search {
background: none;
overflow:hidden;
padding: 7px 0 7px 14px;
border-right: 0 none;
float: right;
margin-bottom: 0;
padding-bottom: 5px;
padding-right: 0;
padding-top: 7px;
max-width: 220px;
form input[type="text"],
form input[type="search"] {
@include box-shadow(0 2px 4px rgba(0, 0, 0, 0.4) inset);
@include box-sizing(content-box);
background: url("#{$asset-path}icons/icon-search.png") no-repeat scroll 5px center, none repeat scroll 0 0 #BE3D00;
border: 6px solid #DE6532;
border-width: 0 0 1px;
color: #fff;
font-size: 0.813em;
height: 24px;
margin-bottom: 0;
padding: 4px 4px 4px 30px;
transition: all 0.5s ease 0s;
width: 86px;
}
}
} // @media only screen and (min-width : 769px)
@media only screen and (max-width : 960px) {
header.banner nav.nav-primary {
.header-search {
padding: 0;
position: relative;
top: 0;
width: 100%;
input[type="search"] {
border-radius: 0;
background: $light_grey;
color: #333;
}
button[type="submit"] {
width: 32px;
height: 38px;
background: url('#{$asset-path}search-black.svg') no-repeat scroll center center transparent;
background-size: 28px 28px;
img {
max-width: none;
display: none;
}
}
}
.header-search.open {
display: block;
}
}
header.banner {
.search-toggle {
background-image: url("#{$asset-path}search-white.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 25px auto;
cursor: pointer;
right: 0;
display: block;
height: 48px;
position: absolute;
text-indent: -99999px;
width: 48px;
}
}
html.no-svg, .opera-mini {
header.banner .search-toggle { background-image: url("#{$asset-path}img/search-white.png"); }
}
.opera-mini {
x:-o-prefocus, header.banner .search-toggle {
-o-background-size: 25px auto;
background-size: 25px auto;
}
}
}
@media only screen and (min-width: 984px) {
#box-search,
.header-search {
display: block;
margin-right: 0;
input[type="search"],
input[type="text"] {
}
form input[type="text"]:focus {
width: 160px;
}
}
} // @media only screen and (min-width: 984px)
@media only screen and (max-width : 768px) {
header.banner .search-toggle {
right: 48px;
}
} // @media only screen and (min-width : 768px)
// search results
body.ubuntu-search,
body.search-results,
body.search-no-results {
.nav-secondary {
display: none;
}
section > h1,
section article h1 {
padding-bottom: 10px;
font-size: 1.438em;
margin-bottom: 0;
}
section > h1 {
border-bottom: 1px dotted #dfdcd9;
}
.main-search {
padding: 20px 0;
margin: 0 0 20px 0;
background-color: transparent;
input[type="search"] {
float: left;
width: 100%;
font-size: 2em;
border: 1px solid #999;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.2em 65px 0.2em 0.2em;
}
button[type=submit] {
padding: 4px;
line-height: 0;
float: left;
margin-left: -53px;
display: block;
background: none;
overflow: visible;
width: auto;
margin-top: -4px;
&:hover {
background: none;
}
img {
height: 45px;
width: 45px;
}
}
}
.search-result h1 .title-main {
margin-right: 20px;
}
.search-result h1 .result-url {
color: #999;
overflow: hidden;
text-overflow: ellipsis;
display: block;
vertical-align: bottom;
padding-bottom: 2px;
}
.search-result h1 .result-url a {
color: #999;
}
.search-result p {
margin-bottom: 0;
}
.num-results {
display: inline-block;
margin-left: 20px;
}
.bottom-results-total {
text-align: center;
width: 100%;
overflow: visible;
padding-top: 20px;
margin: 0;
}
.bottom-nav {
overflow: hidden;
margin-top: -26px;
}
.bottom-nav ul {
margin-bottom: 0;
margin-left: 0;
padding: 0;
overflow: hidden;
}
.bottom-nav li {
float: left;
margin-left: 15px;
}
.bottom-nav li:first-child {
margin-left: 0;
}
.nav-back {
float: left;
}
.nav-back li:before {
content: "\2039"; /* left chevron &lsaquo; */
color: $ubuntu_orange;
margin-right: 5px;
}
.nav-back li.item-extreme:before {
content: "\2039\2039"; /* double left chevron &lsaquo; */
}
.nav-forward {
float: right;
}
.nav-forward li:after {
content: "\203A"; /* right chevron&nbsp;&rsaquo; */
color: $ubuntu_orange;
margin-left: 5px;
}
.nav-forward li.item-extreme:after {
content: "\203A\203A"; /* double right chevron&nbsp;&rsaquo; */
}
.error-notification {
background-color: #fdffdc;
color: #333;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin-top: 20px;
display: block;
}
.result-line {
color: #ada69e;
}
.results-top {
border-bottom: 1px dotted #dfdcd9;
padding-bottom: 0.5em;
}
.search-container {
padding-bottom: 0;
}
}
@media only screen and (min-width : 768px) {
.ubuntu-search {
.main-search {
button[type=submit] {
margin-left: -60px;
margin-top: 0;
}
}
}
} /* end @media only screen and (min-width : 768px) */
sass/core/patterns/_slider.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
.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-position: 0 -8px;
background: url('#{$asset-path}patterns/sprite-pager.png') no-repeat;
float: left;
height: 7px;
list-style-type: none;
margin-right: .75em;
text-indent: -9999em;
width: 7px;
&.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;
}
}
sass/core/patterns/_structure.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
@import '../_core-mixins';
@import '../_core-constants.scss';
.wrapper,
header.banner .nav-primary,
nav div.footer-a div,
.inline-lists ul,
.legal {
@include box-sizing();
width: auto;
}
.inner-wrapper {
@include box-sizing();
background: #fff;
clear: both;
display: block;
float: left;
width: 100%;
margin: 0;
padding-bottom: 20px;
position: relative;
z-index: 1;
}
@media only screen and (min-width : 768px) {
.med-six-col {
.three-col {
width: 48%;
}
.three-col:nth-of-type(2n) {
margin-right: 0;
}
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
.inner-wrapper {
border-radius: 4px;
padding-bottom: 20px;
}
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
.wrapper {
@include box-sizing;
background: #fff;
margin: 0 auto;
position: relative;
text-align: left;
width: 984px;
}
.inner-wrapper {
@include box-shadow(0 0 3px #c9c9c9);
margin: 10px 0 30px;
}
.three-col,
.med-six-col .three-col {
width: 23.30%;
}
.three-col.last-col:nth-of-type(2n) {
margin-right: 0;
}
.med-six-col {
.three-col:nth-of-type(2n) {
margin-right: 20px;
}
.three-col.last-col {
margin-right: 0;
}
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_tabbed-content.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
html.js .tabbed-content .accordion-button {
@include box-sizing;
height: auto;
padding-bottom: .6em;
padding-right: 20px;
}
html.yui3-js-enabled {
.tabbed-menu {
display: none;
padding-bottom: 20px;
padding-top: 20px;
}
.arrow {
display: none;
position: absolute;
visibility: hidden;
}
.tabbed-content {
@include rounded-corners(4px);
padding: 8px 8px 0;
background: $light-grey;
margin-bottom: 8px;
&.hide {
display: block;
opacity: 1 !important;
}
.title {
display: none;
}
div {
display: none;
}
.accordion-button {
@include box-sizing;
background: url("#{$asset-path}icons/icon-arrow-down.svg") no-repeat scroll right 3px $light-grey;
color: $cool-grey;
display: block;
font-size: 16px;
padding-bottom: .6em;
padding-right: 20px;
width: 100%;
}
&.open {
.accordion-button {
background-image: url("#{$asset-path}icons/icon-arrow-up.svg");
margin-bottom: 10px;
}
div {
display: block;
}
}
}
html.yui3-js-enabled.opera-mini .tabbed-content,
html.yui3-js-enabled.no-svg .tabbed-content {
.accordion-button {
background-image: url("#{$asset-path}icons/icon-arrow-right.png");
}
&.open {
.accordion-button {
background-image: url("#{$asset-path}icons/icon-arrow-up.png");
}
}
}
html.yui3-js-enabled.opera-mini.tabbed-content {
.accordion-button {
background-image: none;
margin-bottom: 10px;
}
div {
display: block;
}
}
@media only screen and (min-width : 768px) {
.tabbed-menu {
display: block;
}
.tabbed-content {
margin-bottom: 20px;
padding: 40px;
&.hide {
display: none;
opacity: 0 !important;
}
.title {
display: block;
}
div {
display: block;
}
.vertical-divider div {
display: table-cell;
}
.accordion-button {
display: none;
}
}
}
.accordion-button.active {
background-color: transparent;
}
}
@media only screen and (min-width : 768px) {
.tabbed-menu {
@include box-shadow(0 -1px 10px #cfcfcf inset);
@include box-sizing;
@include rounded-corners(4px 4px 0 0);
background: none repeat scroll 0 0 $light-grey;
padding-bottom: $gutter-width;
padding-top: $gutter-width;
position: relative;
ul {
@include box-sizing;
display: table;
margin-bottom: 0;
padding: 0;
position: relative;
table-layout: fixed;
width: 100%;
}
li {
text-align: center;
display: table-cell;
}
a {
color: #666;
display: block;
outline: none;
.active {
color: $canonical-aubergine;
text-decoration: none;
}
}
a:hover {
text-decoration: none;
}
.arrow {
bottom: 0;
position: absolute;
}
}
.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;
}
html.yui3-js-enabled .arrow {
visibility: visible;
}
}
sass/core/patterns/_tooltips.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
.yui3-tooltip-hidden {
display: none;
}
.yui3-tooltip-content {
@include box-shadow(0 2px 8px hsla(0, 0%, 0%, .20));
background: url("#{$asset-path}patterns/grey-textured-background.jpg") repeat scroll 0 0 transparent;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #e3e3e3;
color: $cool-grey;
margin-top: -30px;
max-width: 520px;
position: relative;
}
.yui3-tooltip .yui3-widget-bd {
padding: 20px;
width: 320px;
* {
max-width: 100%;
}
h5 {
margin-bottom: 10px;
font-size: 22px;
font-weight: 300;
}
img {
float: left;
margin-right: 10px;
}
q {
border-bottom: 1px dotted $warm-grey;
border-top: 1px dotted $warm-grey;
display: block;
font-size: 16px;
font-style: italic;
margin-bottom: 0;
margin-top: 20px;
padding: 10px 0;
}
p:last-child {
margin-bottom: 0;
}
}
.yui3-tooltip .yui3-widget-ft,
.yui3-tooltip .yui3-widget-ft div {
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;
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 box-shadow(3px 3px 6px rgba(0, 0, 0, .3));
@include rounded-corners(4px);
background: #fff;
border: 1px solid #dfdcd9;
display: none;
font-size: 13px;
line-height: 1;
margin: 0;
padding: 6px 5px;
position: absolute;
top: -20px;
white-space: nowrap;
z-index: 1000;
}
sass/core/patterns/_typography.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
.caps-centered,
.muted-heading {
font-size: .875em;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
}
p.intro {
@include font-size (16);
line-height: 1.4;
}
.row div {
p:last-child,
ul:last-child { margin-bottom: 0; }
}
.four-col p:last-child {
margin-bottom: 0;
}
.note {
color: $warm-grey;
font-size: .813em;
}
@media only screen and (min-width : 768px) {
p.intro {
font-size: 1.13333em;
}
} // 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) {
h1 {
font-size: 2.8125em;
}
h2 {
font-size: 2em;
margin-bottom: .375em;
}
h3 {
font-size: 1.438em;
margin-bottom: .522em;
}
h4 {
font-size: 1em;
margin-bottom: .75em;
}
h5 { font-size: 1em; }
p,
li,
code,
pre {
font-size: 16px;
line-height: 1.5;
margin-bottom: .75em;
}
p.intro {
font-size: 1.25em;
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_vertical-divider.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
.row.vertical-divider {
padding-bottom: 40px;
}
.vertical-divider div,
.vertical-divider li {
border-right: 0;
display: block;
padding-left: 0;
padding-right: 0;
}
.vertical-divider-full {
padding-bottom: 0;
> div {
padding-bottom: 40px;
}
}
.row.vertical-divider-full {
padding-bottom: 0;
}
@media only screen and (max-width : 767px) {
.vertical-divider > div,
.vertical-divider > li {
border-bottom: 1px dotted $warm-grey;
padding-bottom: 20px;
}
.vertical-divider div:last-of-type,
.vertical-divider li:last-of-type,
.inline-icons li:last-of-type {
border-bottom: 0;
padding-bottom: 5px;
}
.row.vertical-divider {
padding-bottom: 0;
}
.equal-height div,
.equal-height li {
height: auto !important;
}
}
@media only screen and (max-width : 768px) {
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
.row.vertical-divider {
padding-bottom: 60px;
}
.vertical-divider {
> div,
> li {
border-right: 1px dotted $warm-grey;
display: table-cell;
float: none;
margin-right: 0;
padding-left: 20px;
padding-right: 20px;
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;
}
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/patterns.scss 0 → 100644
View file @ a60faf68
@charset "UTF-8";
/**
* Ubuntu Patterns Stylesheet
*
* The CSS file required by Ubuntu patterns page
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2014 Canonical Ltd
*
*/
@import '_structure';
@import '_helpers';
@import '_typography';
@import '_header';
@import '_search';
@import '_footer';
@import '_contextual-footer';
@import '_buttons';
@import '_forms';
@import '_rows';
@import '_image-centered';
@import '_boxes';
@import '_arrows';
@import '_lists';
@import '_inline-logos';
@import '_blockquotes';
@import '_tabbed-content';
@import '_vertical-divider';
@import '_slider';
@import '_tooltips';
sass/core/ubuntu-styles.scss 0 → 100644
View file @ a60faf68
@charset 'UTF-8';
// import required files
@import '_core-constants';
@import '_core-mixins';
@import '_core-grid';
@import '_core-grid-tablet';
@import '_core-grid-desktop';
@import '_core';
@import '_core-templates';
@import 'patterns/patterns';
sass/style.scss
View file @ a60faf68
@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);
......
template.php
View file @ a60faf68
......@@ -63,16 +63,22 @@ function valencia_preprocess_html( &$variables ) {
* }
* @return array Queued cascading stylesheets.
*/
drupal_add_css('http://assets.ubuntu.com/sites/guidelines/css/responsive/latest/ubuntu-styles.css', array(
'type' => 'external',
'group' => CSS_DEFAULT,
'every_page' => true
));
drupal_add_css('http://assets.ubuntu.com/sites/ubuntu/1160/u/css/styles.css', array(
'type' => 'external',
'group' => CSS_DEFAULT,
'every_page' => true
//drupal_add_css('http://assets.ubuntu.com/sites/guidelines/css/responsive/latest/ubuntu-styles.css', array(
// 'type' => 'external',
// 'group' => CSS_DEFAULT,
// 'every_page' => true
//));
//drupal_add_css('http://assets.ubuntu.com/sites/ubuntu/1160/u/css/styles.css', array(
// 'type' => 'external',
// 'group' => CSS_DEFAULT,
// 'every_page' => true
//));
drupal_add_css( drupal_get_path( 'theme', 'valencia' ) . '/css/style.css', array(
'type' => 'file',
'group' => CSS_THEME,
'every_page' => true
));
/**
......@@ -111,39 +117,39 @@ function valencia_preprocess_html( &$variables ) {
* }
* @return array JavaScript file, settings, and inline code, including Drupal defaults.
*/
drupal_add_js('http://assets.ubuntu.com/sites/ubuntu/1160/u/js/plugins/modernizr.2.7.1.js', array(
'type' => 'external',
'group' => JS_LIBRARY,
'every_page' => 'TRUE'
));
drupal_add_js('http://assets.ubuntu.com/sites/ubuntu/1160/u/js/plugins/yui-combined.min.js', array(
'type' => 'external',
'group' => JS_DEFAULT,
'every_page' => 'TRUE',
'scope' => 'footer'
));
drupal_add_js("if(!core){ var core = {}; } core.globalPrepend = 'body';", array(
'type' => 'inline',
'group' => JS_DEFAULT,
'every_page' => 'TRUE',
'scope' => 'footer'
));
drupal_add_js('http://assets.ubuntu.com/sites/guidelines/js/responsive/core.js', array(
'type' => 'external',
'group' => JS_THEME,
'every_page' => 'TRUE',
'scope' => 'footer'
));
drupal_add_js('http://assets.ubuntu.com/sites/ubuntu/1160/u/js/plugins/respond.min.js', array(
'type' => 'external',
'group' => JS_THEME,
'every_page' => 'TRUE',
'scope' => 'footer'
));
drupal_add_js('http://assets.ubuntu.com/sites/ubuntu/1160/u/js/plugins/modernizr.2.7.1.js', array(
'type' => 'external',
'group' => JS_LIBRARY,
'every_page' => 'TRUE'
));
drupal_add_js('http://assets.ubuntu.com/sites/ubuntu/1160/u/js/plugins/yui-combined.min.js', array(
'type' => 'external',
'group' => JS_DEFAULT,
'every_page' => 'TRUE',
'scope' => 'footer'
));
drupal_add_js("if(!core){ var core = {}; } core.globalPrepend = 'body';", array(
'type' => 'inline',
'group' => JS_DEFAULT,
'every_page' => 'TRUE',
'scope' => 'footer'
));
drupal_add_js('http://assets.ubuntu.com/sites/guidelines/js/responsive/core.js', array(
'type' => 'external',
'group' => JS_THEME,
'every_page' => 'TRUE',
'scope' => 'footer'
));
drupal_add_js('http://assets.ubuntu.com/sites/ubuntu/1160/u/js/plugins/respond.min.js', array(
'type' => 'external',
'group' => JS_THEME,
'every_page' => 'TRUE',
'scope' => 'footer'
));
}
/**
......@@ -151,13 +157,13 @@ function valencia_preprocess_html( &$variables ) {
*
*/
function valencia_preprocess_page( &$vars ) {
// Get the entire main menu tree
$main_menu_tree = menu_tree_all_data('main-menu');
// and add the active trail
menu_tree_add_active_path($main_menu_tree);
// Get the entire main menu tree
$main_menu_tree = menu_tree_all_data('main-menu');
// and add the active trail
menu_tree_add_active_path($main_menu_tree);
// Add the rendered output to menu
$vars['valencia_menu'] = menu_tree_output($main_menu_tree);
// Add the rendered output to menu
$vars['valencia_menu'] = menu_tree_output($main_menu_tree);
}
/**
......@@ -172,45 +178,45 @@ function valencia_preprocess_page( &$vars ) {
* http://drupalcontrib.org/api/drupal/contributions!menu_block!menu_block.module/function/menu_tree_add_active_path/7
*/
function menu_tree_add_active_path(&$tree) {
// Grab any menu item to find the menu_name for this tree.
$menu_item = current($tree);
$tree_with_trail = menu_tree_page_data($menu_item['link']['menu_name']);
// To traverse the original tree down the active trail, we use a pointer.
$subtree_pointer = &$tree;
// Find each key in the active trail.
while ($tree_with_trail) {
foreach ($tree_with_trail as $key => &$value) {
if ($tree_with_trail[$key]['link']['in_active_trail']) {
// Set the active trail info in the original tree.
$subtree_pointer[$key]['link']['in_active_trail'] = TRUE;
// Continue in the subtree, if it exists.
$tree_with_trail = &$tree_with_trail[$key]['below'];
$subtree_pointer = &$subtree_pointer[$key]['below'];
break;
}
else {
unset($tree_with_trail[$key]);
}
}
}
// Grab any menu item to find the menu_name for this tree.
$menu_item = current($tree);
$tree_with_trail = menu_tree_page_data($menu_item['link']['menu_name']);
// To traverse the original tree down the active trail, we use a pointer.
$subtree_pointer = &$tree;
// Find each key in the active trail.
while ($tree_with_trail) {
foreach ($tree_with_trail as $key => &$value) {
if ($tree_with_trail[$key]['link']['in_active_trail']) {
// Set the active trail info in the original tree.
$subtree_pointer[$key]['link']['in_active_trail'] = TRUE;
// Continue in the subtree, if it exists.
$tree_with_trail = &$tree_with_trail[$key]['below'];
$subtree_pointer = &$subtree_pointer[$key]['below'];
break;
}
else {
unset($tree_with_trail[$key]);
}
}
}
}
/**
* Choose which menu create basing on the id
*/
function valencia_links__system_main_menu($vars) {
switch ($vars['id']) {
case 'header':
return valencia_header_menu($vars);
case 'subheader':
return valencia_subheader_menu($vars);
case 'breadcrumb':
return valencia_breadcrumb_menu($vars);
case 'footer':
return valencia_footer_menu($vars);
}
switch ($vars['id']) {
case 'header':
return valencia_header_menu($vars);
case 'subheader':
return valencia_subheader_menu($vars);
case 'breadcrumb':
return valencia_breadcrumb_menu($vars);
case 'footer':
return valencia_footer_menu($vars);
}
}
/**
......@@ -218,20 +224,20 @@ function valencia_links__system_main_menu($vars) {
* Follows http://design.ubuntu.com/web-style-guide/scaffolding#navigation
*/
function valencia_header_menu($vars) {
// Var with all HTML of the menu
$html = '<ul>';
foreach ($vars['links'] as $key => $link) {
// To print every menu voice only one, see Drupal API
if (is_numeric($key)) {
$link_title = $link['#title'];
$link_href = $link['#href'];
$html .= '<li>' . l($link_title, $link_href, array('html' => 'true')) . '</li>';
}
}
$html .= '</ul>';
return $html;
// Var with all HTML of the menu
$html = '<ul>';
foreach ($vars['links'] as $key => $link) {
// To print every menu voice only one, see Drupal API
if (is_numeric($key)) {
$link_title = $link['#title'];
$link_href = $link['#href'];
$html .= '<li>' . l($link_title, $link_href, array('html' => 'true')) . '</li>';
}
}
$html .= '</ul>';
return $html;
}
/**
......@@ -241,28 +247,28 @@ function valencia_header_menu($vars) {
* We need to print only the submenu of active menu
*/
function valencia_subheader_menu($vars) {
// Var with all HTML of the menu
$html = '<ul>';
foreach ($vars['links'] as $key => $link) {
// To print every menu voice only one, see Drupal API
if (is_numeric($key)) {
// Check for submenu, but only if they are of first level and this
// is the active link
if (!empty($link['#below']) && $link['#original_link']['depth'] === '1' && $link['#original_link']['in_active_trail']) {
// If there is a submenu create it using the header function,
// because they have the same struct
$sub_menu = theme('links__system_main_menu', array(
'links' => $link['#below'],
'id' => 'header'
));
$html .= $sub_menu;
}
}
}
$html .= '</ul>';
return $html;
// Var with all HTML of the menu
$html = '<ul>';
foreach ($vars['links'] as $key => $link) {
// To print every menu voice only one, see Drupal API
if (is_numeric($key)) {
// Check for submenu, but only if they are of first level and this
// is the active link
if (!empty($link['#below']) && $link['#original_link']['depth'] === '1' && $link['#original_link']['in_active_trail']) {
// If there is a submenu create it using the header function,
// because they have the same struct
$sub_menu = theme('links__system_main_menu', array(
'links' => $link['#below'],
'id' => 'header'
));
$html .= $sub_menu;
}
}
}
$html .= '</ul>';
return $html;
}
/**
......@@ -273,69 +279,69 @@ function valencia_subheader_menu($vars) {
* Also, if there is, we print third level menu
*/
function valencia_breadcrumb_menu($vars) {
// Var with all HTML
$html = '';
foreach ($vars['links'] as $key => $link) {
// See Drupal API, is to print every menu voice only one
if (is_numeric($key)) {
// We need only active links
if ($link['#original_link']['in_active_trail']) {
// If is the first level link and it has children, we have our first
// link of breadcrumb!
if(!empty($link['#below']) && $link['#original_link']['depth'] === '1') {
$link_title = $link['#title'];
$link_href = $link['#href'];
$html .= '<ul class="breadcrumb">';
$html .= '<li>' . l($link_title, $link_href, array('html' => 'true')) . '&nbsp;&rsaquo;</li>';
// Now we need to attach second level menu
$sub_menu = theme('links__system_main_menu', array(
'links' => $link['#below'],
'id' => 'breadcrumb'
));
$html .= $sub_menu;
}
// Second level link: could be the active one, or only a
// breadcrumb for third level (or both)
else if ($link['#original_link']['depth'] === '2') {
// If it hasn't child, is the active link
if (empty($link['#below'])) {
$link_title = $link['#title'];
$link_href = $link['#href'];
$html .= '<li class="active">' . l($link_title, $link_href, array('html' => 'true')) . '</li>';
// We close the ul with class breadcrumb, as per design
$html .= '</ul>';
}
else {
// If it has children could be active or not.
// To check we need to create first the third level
// menu, and check if any of the third level menu links
// is active
list ($has_child_active_link, $third_level_menu) = valencia_third_level_menu($link['#below']);
$link_title = $link['#title'];
$link_href = $link['#href'];
// If a child is active, this one isn't active
if ($has_child_active_link) {
$html .= '<li>' . l($link_title, $link_href, array('html' => 'true')) . '&nbsp;&rsaquo;</li>';
}
else {
$html .= '<li class="active">' . l($link_title, $link_href, array('html' => 'true')) . '</li>';
}
// We close the ul with class breadcrumb, as per design
$html .= '</ul>';
// Then, third level menu
$html .= $third_level_menu;
}
}
}
}
}
return $html;
// Var with all HTML
$html = '';
foreach ($vars['links'] as $key => $link) {
// See Drupal API, is to print every menu voice only one
if (is_numeric($key)) {
// We need only active links
if ($link['#original_link']['in_active_trail']) {
// If is the first level link and it has children, we have our first
// link of breadcrumb!
if(!empty($link['#below']) && $link['#original_link']['depth'] === '1') {
$link_title = $link['#title'];
$link_href = $link['#href'];
$html .= '<ul class="breadcrumb">';
$html .= '<li>' . l($link_title, $link_href, array('html' => 'true')) . '&nbsp;&rsaquo;</li>';
// Now we need to attach second level menu
$sub_menu = theme('links__system_main_menu', array(
'links' => $link['#below'],
'id' => 'breadcrumb'
));
$html .= $sub_menu;
}
// Second level link: could be the active one, or only a
// breadcrumb for third level (or both)
else if ($link['#original_link']['depth'] === '2') {
// If it hasn't child, is the active link
if (empty($link['#below'])) {
$link_title = $link['#title'];
$link_href = $link['#href'];
$html .= '<li class="active">' . l($link_title, $link_href, array('html' => 'true')) . '</li>';
// We close the ul with class breadcrumb, as per design
$html .= '</ul>';
}
else {
// If it has children could be active or not.
// To check we need to create first the third level
// menu, and check if any of the third level menu links
// is active
list ($has_child_active_link, $third_level_menu) = valencia_third_level_menu($link['#below']);
$link_title = $link['#title'];
$link_href = $link['#href'];
// If a child is active, this one isn't active
if ($has_child_active_link) {
$html .= '<li>' . l($link_title, $link_href, array('html' => 'true')) . '&nbsp;&rsaquo;</li>';
}
else {
$html .= '<li class="active">' . l($link_title, $link_href, array('html' => 'true')) . '</li>';
}
// We close the ul with class breadcrumb, as per design
$html .= '</ul>';
// Then, third level menu
$html .= $third_level_menu;
}
}
}
}
}
return $html;
}
/**
......@@ -348,31 +354,31 @@ function valencia_breadcrumb_menu($vars) {
* active link, the second element is the html of third level menu
*/
function valencia_third_level_menu($vars) {
// Var with all HTML
$html = '<ul class="third-level">';
// This becomes TRUE if there is an active link
$has_active_link = FALSE;
foreach ($vars as $key => $link) {
// See Drupal API, is to print every menu voice only one
if (is_numeric($key)) {
if ($link['#original_link']['in_active_trail']) {
$has_active_link = TRUE;
$link_title = $link['#title'];
$link_href = $link['#href'];
$html .= '<li class="active">' . l($link_title, $link_href, array('html' => 'true')) . '</li>';
}
else {
$link_title = $link['#title'];
$link_href = $link['#href'];
$html .= '<li>' . l($link_title, $link_href, array('html' => 'true')) . '</li>';
}
}
}
$html .= '</ul>';
return array($has_active_link, $html);
// Var with all HTML
$html = '<ul class="third-level">';
// This becomes TRUE if there is an active link
$has_active_link = FALSE;
foreach ($vars as $key => $link) {
// See Drupal API, is to print every menu voice only one
if (is_numeric($key)) {
if ($link['#original_link']['in_active_trail']) {
$has_active_link = TRUE;
$link_title = $link['#title'];
$link_href = $link['#href'];
$html .= '<li class="active">' . l($link_title, $link_href, array('html' => 'true')) . '</li>';
}
else {
$link_title = $link['#title'];
$link_href = $link['#href'];
$html .= '<li>' . l($link_title, $link_href, array('html' => 'true')) . '</li>';
}
}
}
$html .= '</ul>';
return array($has_active_link, $html);
}
/**
......@@ -389,52 +395,52 @@ function valencia_third_level_menu($vars) {
* https://gitlab.com/ubuntu-it-web/valencia/issues/6
*/
function valencia_footer_menu($vars) {
// Var with all HTML of the menu
$html = '<ul>';
// Counter to select first element of every submenu to add class .first
$voice_number = 0;
foreach ($vars['links'] as $key => $link) {
// To print every menu voice only one, see Drupal API
if (is_numeric($key)) {
// Store the submenu links
$sub_menu = '';
$link_title = $link['#title'];
// Check for submenu, but only if they are of first level!
if (!empty($link['#below']) && $link['#original_link']['depth'] === '1') {
// If there is a submenu create it using the same function
$sub_menu = theme('links__system_main_menu', array(
'links' => $link['#below'],
'id' => 'footer'
));
}
/**
* We have 3 types of link:
* - First level link, they are h2 title, and will be identify for
* by their depth of 1
* - First link of second level menus, they have class .first,
* identified by $voice_number
* - Others links of second level menus
*/
if ($link['#original_link']['depth'] === '1') {
// First level menu is h2
$html .= '<li><h2>' . l($link_title, $link['#href'], array('html' => 'true')) . '</h2>' . $sub_menu . '</li>';
}
else if ($voice_number === 0) {
// The first submenu of every menu has class first
$html .= '<li class="first">' . l($link_title, $link['#href'], array('html' => 'true')) . $sub_menu . '</li>';
}
else {
// Submenu voice
$html .= '<li>' . l($link_title, $link['#href'], array('html' => 'true')) . $sub_menu . '</li>';
}
$voice_number++;
}
}
$html .= '</ul>';
return $html;
// Var with all HTML of the menu
$html = '<ul>';
// Counter to select first element of every submenu to add class .first
$voice_number = 0;
foreach ($vars['links'] as $key => $link) {
// To print every menu voice only one, see Drupal API
if (is_numeric($key)) {
// Store the submenu links
$sub_menu = '';
$link_title = $link['#title'];
// Check for submenu, but only if they are of first level!
if (!empty($link['#below']) && $link['#original_link']['depth'] === '1') {
// If there is a submenu create it using the same function
$sub_menu = theme('links__system_main_menu', array(
'links' => $link['#below'],
'id' => 'footer'
));
}
/**
* We have 3 types of link:
* - First level link, they are h2 title, and will be identify for
* by their depth of 1
* - First link of second level menus, they have class .first,
* identified by $voice_number
* - Others links of second level menus
*/
if ($link['#original_link']['depth'] === '1') {
// First level menu is h2
$html .= '<li><h2>' . l($link_title, $link['#href'], array('html' => 'true')) . '</h2>' . $sub_menu . '</li>';
}
else if ($voice_number === 0) {
// The first submenu of every menu has class first
$html .= '<li class="first">' . l($link_title, $link['#href'], array('html' => 'true')) . $sub_menu . '</li>';
}
else {
// Submenu voice
$html .= '<li>' . l($link_title, $link['#href'], array('html' => 'true')) . $sub_menu . '</li>';
}
$voice_number++;
}
}
$html .= '</ul>';
return $html;
}
if ( !function_exists( 'region_empty' ) ) :
......
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