Commit 2fcda1ed authored by Mattia Migliorini's avatar Mattia Migliorini

Update vanilla framework, remove yui-min.js

parent dbb51318
This diff is collapsed.
This diff is collapsed.
@charset "UTF-8";
/**
* Ubuntu Patterns Stylesheet
*
* The CSS file required by Ubuntu patterns page
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 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)";
@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
/// usage: background: url(#{$asset-path}/backgrounds/background.jpg) no-repeat 0 0;
$asset-path: '//assets.ubuntu.com/sites/ubuntu/latest/u/img/';
/// transparent to use throughout the site
$transparent: transparent !default;
/// ubuntu orange (used for text links also on any site except canonical)
$brand-color: #dd4814 !default;
/// light-orange - used as background on pre text
$light-orange: #fdf6f2 !default;
/// canonical aubergine
$canonical-aubergine: #772953 !default;
/// light aubergine (consumer)
$light-aubergine: #77216f !default;
/// mid aubergine (both)
$mid-aubergine: #5e2750 !default;
/// dark aubergine (enterprise)
$dark-aubergine: #2c001e !default;
/// warm grey
$warm-grey: #888 !default;
/// cool grey
$cool-grey: #333 !default;
/// mid grey
$mid-grey: #dfdcd9 !default;
/// light grey
$light-grey: #f7f7f7 !default;
/// white
$white: #fff !default;
/// black
$black: #000 !default;
/// row background
$row-background: #4b1827 !default;
/// red notifications
$error: #df382c !default;
/// yellow notifications
$warning: #eca918 !default;
/// green notifications
$success: #38b44a !default;
/// cyan notifications
$information: #19b6ee !default;
/// red, for status that require immediate attention
$status-red: #df382c !default;
/// grey, for disabled status or ones that don’t require attention
$status-grey: #888 !default;
/// yellow, for status that require attention
$status-yellow: #efb73e !default;
/// blue, for status that don’t require action
$status-blue: #19b6ee !default;
/// green, for positive status
$status-green: #38b44a !default;
/// box shadows
$box-shadow: #c2c2c2 !default;
/// code background
$code-bg: #fffbeb !default;
/// table header background
$table-th: #fee3d2 !default;
/// box borders
$box-border: #dfdcd9 !default;
/// This is the global link color, mainly used for links in content
$link-color: $brand-color !default;
/// Base font colour
$base-color: #333 !default;
/// grid variables
/// base
$base: 14 !default;
/// gutter width
$gutter-width: 20px !default;
/// grid-gutter
$grid-gutter: 20px !default;
/// gutter
$gutter: 2.12766% !default;
/// one col
$one-col: 6.38297% !default;
/// two col
$two-col: 14.89361% !default;
/// three col
$three-col: 23.40425% !default;
/// four col
$four-col: 31.91489% !default;
/// five col
$five-col: 40.42553% !default;
/// six col
$six-col: 48.93617% !default;
/// seven col
$seven-col: 57.4468% !default;
/// eight col
$eight-col: 65.95744% !default;
/// nine col
$nine-col: 74.46808% !default;
/// ten col
$ten-col: 82.97872% !default;
/// eleven col
$eleven-col: 91.48936% !default;
/// nav background
$nav-bg: #f0f0f0 !default;
/// nav link colour
$nav-link-color: #333 !default;
/// nav border dark
$nav-border-dark: #d4d7d4 !default;
/// nav border light
$nav-border-light: #f2f2f4 !default;
/// nav hover background
$nav-hover-bg: #d0d0d0 !default;
/// nav active background
$nav-active-bg: #ddd !default;
/// resource hover
$resource-hover: #fafafa !default;
/// resource shadow
$resource-shadow: #ddd !default;
/// Medium breakpoint
$breakpoint-medium: 768px;
/// Large breakpoint
$breakpoint-large: 984px;
/// Base font size - medium screen
@media only screen and (min-width : 768px) { $base: 15; }
@media only screen and (min-width: 984px) { $base: 14; }
\ No newline at end of file
// Base font size - small screen
@media only screen and (min-width: 984px) { $base: 14; }
This diff is collapsed.
This diff is collapsed.
@charset "UTF-8";
/**
* Ubuntu Core Front-End Framework
*
* Grid file part of the Ubuntu Core Front-End Framework
*
* This grid is composed by 14 columns (units) separated by 13 gutters (1/3 unit).
* The first and last column are for padding purposes only.
* The content fits in the middle 12 columns.
* Possible divisions: 1 (12 units + 11 gutters), 2 (6 units + 5 gutters),
* 3 ( 4 units + 3 gutters) and 4 (3 units + 2 gutters).
*
* When 1 unit = 60px, 1 gutter = 20px
*
* @project Ubuntu Core Front-End Framework
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
* @see http://gridinator.com/
*/
/**
* Table of contents
*
* Main containers
* Columns
* Empty columns
* Borders
* Push and pull
* Verticla gutter
* Last
* Clearing
@charset 'UTF-8';
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
////
*/
/// 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/
.fake { display: none; }
/// 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;
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%;
.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 {
box-sizing: border-box;
clear: none;
display: inline-block;
float: none;
margin-bottom: 20px;
margin-right: $gutter;
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%; }
.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; }
.last-col,
.last {
margin-right: 0;
}
/**
* Clearing
*
* Hard and soft clearing classes
*
* @section clearing
*/
// Clearing
// Hard and soft clearing classes
// @section clearing
.clearfix:after, .container:after {
.clearfix:after,
.container:after {
clear: both;
content: "\0020";
content: '\0020';
display: block;
height: 0;
overflow:hidden;
overflow: hidden;
visibility: hidden;
}
.clear { clear: both; }
.clearfix { display: block; }
.clear {
clear: both;
}
.clearfix {
display: block;
}
/**
* mixins
*
* @section mixins
*/
////
/// Mixins
/// @section mixins
////
/// font size, default 16
@mixin font-size ($size: 16) {
font-size: ($size / $base)+em;
margin-bottom: (12 / $size)+em;
}
@mixin box-sizing ($type: border-box) {
-webkit-box-sizing: $type;
-moz-box-sizing: $type;
box-sizing: $type;
}
@mixin rounded-corners($radius: 4px 4px 4px 4px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
@mixin box-shadow($shadow...) {
-moz-box-shadow: $shadow;
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
@mixin gradient($from, $to) {
background-color: $to;
background-image: -moz-linear-gradient($from, $to);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
background-image: -webkit-linear-gradient($from, $to);
background-image: -o-linear-gradient($from, $to);
}
/// footer styles with parameterised backgrond image
@mixin footer($background) {
padding: $gutter-width $two-col $gutter-width $four-col;
margin-bottom: 0;
background: url($background) no-repeat scroll $one-col center #F7F7F7;
background: url($background) no-repeat scroll $one-col center $light-grey;
}
/// clearfix
@mixin clearfix() {
*zoom:1;
&:before,
&:after {
content:"";
display:table;
content: '';
display: table;
}
&:after {
clear:both;
clear: both;
}
}
// CSS3 colunms
@mixin columns($num: 3, $gap: 20) {
-moz-column-count: $num;
-moz-column-gap: ($gap / $base)em;
-webkit-column-count: $num;
-webkit-column-gap: ($gap / $base)em;
column-count: $num;
column-gap: ($gap / $base)em;
}
// background-size
@mixin background-size($size: 100% 100%) {
-moz-background-size: $size;
-webkit-background-size: $size;
-o-background-size: $size;
background-size: $size;
}
// transitions
@mixin transition($properties: all, $duration: .5s, $method: ease-out) {
-webkit-transition: $properties $duration $method;
-moz-transition: $properties $duration $method;
-ms-transition: $properties $duration $method;
-o-transition: $properties $duration $method;
transition: $properties $duration $method;
}
// usage: @include transition(all, 0.3s, ease-in-out);
\ No newline at end of file
@charset "UTF-8";
@charset 'UTF-8';
@import "core-constants";
@import "core-mixins";
@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
*
*/
/**
* Audience specific
*
* @section audience
*/
/* Voice */
.voice-community { }
.voice-canonical { }
.voice-community.voice-canonical { }
/*
* Consumer
*/
.audience-consumer{
color: $cool-grey;
.row-box, .main-content {
color: $cool-grey;
}
.inner-wrapper {
background: #fff;
}
.quote-right-top {
padding: 60px 60px 0 40px;
background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-br-287x287.png") no-repeat;
height: 287px;
position: absolute;
right: -($gutter-width * 2);
text-align: left;
top: -($gutter-width * 4.5);
width: $four-col;
p {
@include font-size (16);
margin: (1.538em / 2);
padding-bottom: 0;
color: #fff;
cite {
@include font-size (12);
color: #fff;
padding: 0;
}
}
}
.quote-right-top p a,
.quote-right p a { color: #fff; }
.quote-right {
@include font-size (18);
color: #fff;
padding: 50px 100px 0 50px;
text-indent: -6px;
background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-bl-287x287.png") no-repeat;
min-height: 287px;
position: absolute;
right: -$gutter-width;
text-align: left;
top: -($gutter-width * 4.5);
width: $four-col -(150/$base)em;
cite {
font-style: normal;
margin-left: 6px;
}
}
.quote-right-alt {
background: url(/sites/ubuntu/latest/u/img/patterns/quote-white-br-360x360.png) 0 -100px no-repeat;
color: $ubuntu-orange;
padding: 50px 50px 0 50px;
}
.quote-right-right { background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-br-287x287.png") no-repeat; }
}
/*
* Enterprise
*/
.audience-enterprise {
h1 { margin: 0 0 18px 0; }
td{ background: #fff; }
th, td {
padding: 6px 10px;
background: #fff;
}
th[scope="col"] {
background: #E2D4DC;
color: $canonical-aubergine;
}
tbody th[rowspan] { background: #F7F2F6; }
tfoot th[rowspan] { background: #dfdcd9; }
tfoot td, tfoot th {
font-weight: normal;
background: #dfdcd9;
}
.inner-wrapper {
background: $dark-aubergine;
color: #fff;
}
.row-box {
background: #fff;
color: $cool-grey;
}
/*.row-quote {
background: none repeat scroll 0 0 #E2D4DC;
color: #772953;
margin-left: -1.125em;
padding-top: 1.25em;
width: 58.75em;
}
.row-quote blockquote,
.row-quote blockquote p {
color: inherit;
font-size: 1.313em;
margin: 0 0.563em;
padding: 0;
top: auto;
width: auto;
}
.row-quote blockquote p {
line-height: 1.3;
text-indent: -12px;
}
.row-quote blockquote cite {
@include font-size (12);
color: #656565;
font-style: normal;
margin-left: 12px;
text-indent: 0;
}*/
}
////
/// 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
////
.row-enterprise {
border-radius: 0;
background: $canonical-aubergine;
color:#fff;
@include rounded-corners(0);
color: $white;
.box, div {
.box,
div {
background: $canonical-aubergine;
color:#fff;
color: $white;
}
a {
color:#fff;
color: $white;
}
}
/*
.audience-consumer.audience-enterprise{
.inner-wrapper {
background: $mid-aubergine;
color: #fff;
}
.row-box,
.main-content {
background: #fff;