Skip to content

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

Use SASS instead of LESS 

Include Ubuntu Style Guide source files (.scss)
Write documentation to include JS (todo: include from Ubuntu assets)
parent 79de4ee9
Expand all Show whitespace changes
Inline Side-by-side
Showing with 3685 additions and 5 deletions
.gitignore
View file @ 4d31dfc7
*.sublime* *.sublime*
.sass-cache
\ No newline at end of file
less/style.less → sass/style.scss
View file @ 4d31dfc7
@import 'ubuntu/core-constants.scss';
.logo { .logo {
position:absolute; position:absolute;
top:0; top:0;
......
sass/ubuntu/core-constants.scss 0 → 100644
View file @ 4d31dfc7
@charset "UTF-8";
/**
* Ubuntu Patterns Stylesheet
*
* The CSS file required by Ubuntu patterns page
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
* @see http://design.ubuntu.com
*/
/**
* standard colors
*
* @colordef standard colors
*/
$ubuntu_orange: #dd4814; /* ubuntu orange (used for text links also on any site except canonical) */
$light_orange: #fdf6f2; /* used as background on pre text */
$canonical_aubergine: #772953; /* canonical aubergine */
$light_aubergine: #77216f; /* light aubergine (consumer) */
$mid_aubergine: #5e2750; /* mid aubergine (both) */
$dark_aubergine: #2c001e; /* dark aubergine (enterprise) */
$warm_grey: #aea79f; /* warm grey */
$cool_grey: #333333; /* cool grey */
$light_grey: #f7f7f7; /* light grey */
/* notifications */
$error: #df382c; /* red */
$warning: #eca918; /* yellow */
$success: #38b44a; /* green */
$information: #19b6ee; /* cyan */
/* colour coded status - from negative to positive (Icon: canonical circle) */
$status_red: #df382c; /* red, for status that require immediate attention */
$status_grey: #aea79f; /* grey, for disabled status or ones that don’t require attention */
$status_yellow: #efb73e; /* yellow, for status that require attention */
$status_blue: #19b6ee; /* blue, for status that don’t require action */
$status_green: #38b44a; /* green, for positive status */
/* misc colours */
$box_solid_grey: #efefef;
$link_color: $ubuntu_orange; /* This is the global link color, mainly used for links in content */
/* grid variables */
$base: 16;
$gutter_width: 20px;
$grid_gutter: 20px;
$gutter: 2.12766%;
$one_col: 6.38297%;
$two_col: 14.89361%;
$three_col: 23.40425%;
$four_col: 31.91489%;
$five_col: 40.42553%;
$six_col: 48.93617%;
$seven_col: 57.4468%;
$eight_col: 65.95744%;
$nine_col: 74.46808%;
$ten_col: 82.97872%;
$eleven-col: 91.48936%;
\ No newline at end of file
sass/ubuntu/core-grid.scss 0 → 100644
View file @ 4d31dfc7
This diff is collapsed.
sass/ubuntu/core-mixins.scss 0 → 100644
View file @ 4d31dfc7
/**
* mixins
*
* @section mixins
*/
@mixin font_size ($size: 16) {
font-size: ($size / $base)em;
margin-bottom: (12 / $size)em;
}
@mixin box_sizing ($type: border-box) {
-webkit-box-sizing: $type;
-moz-box-sizing: $type;
box-sizing: $type;
}
@mixin rounded_corners($radius: 4px 4px 4px 4px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
@mixin box_shadow($shadow: 0 2px 2px 0 #c2c2c2) {
-moz-box-shadow: $shadow;
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
@mixin gradient($from, $to) {
background-color: $to;
background-image: -moz-linear-gradient($from, $to);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
background-image: -webkit-linear-gradient($from, $to);
background-image: -o-linear-gradient($from, $to);
}
@mixin footer($background) {
padding: $gutter_width $two_col $gutter_width $four_col;
margin-bottom: 0;
background: url($background) no-repeat scroll $one_col center #F7F7F7;
}
@mixin clearfix() {
*zoom:1;
&:before,
&:after {
content:"";
display:table;
}
&:after {
clear:both;
}
}
// CSS3 colunms
@mixin columns($num: 3, $gap: 20) {
-moz-column-count: $num;
-moz-column-gap: ($gap / $base)em;
-webkit-column-count: $num;
-webkit-column-gap: ($gap / $base)em;
column-count: $num;
column-gap: ($gap / $base)em;
}
\ No newline at end of file
sass/ubuntu/core-pattern.scss 0 → 100644
View file @ 4d31dfc7
This diff is collapsed.
sass/ubuntu/core-print.scss 0 → 100644
View file @ 4d31dfc7
@charset "UTF-8";
/**
* Ubuntu print Stylesheet
*
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
*/
* { background: #fff; color: #000; }
body {
background: white;
font-size: 16pt;
line-height: 1.5;
}
a:link, a:visited {
color: #898989;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
nav,
#box-search,
.cookie-policy,
.link-top,
footer {
display: none;
}
.wrapper {
width: auto;
margin: 0 5%;
padding: 0;
padding-top: 1em;
float: none !important;
}
sass/ubuntu/core-templates.scss 0 → 100644
View file @ 4d31dfc7
@charset "UTF-8";
/**
* Ubuntu Super Patterns Stylesheet
*
* Contains audience related themes for site-wide application
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
*/
/**
* Audience specific
*
* @section audience
*/
/* Voice */
.voice-community { }
.voice-canonical { }
.voice-community.voice-canonical { }
/*
* Consumer
*/
.audience-consumer{
color: $cool_grey;
.row-box, .main-content {
color: $cool_grey;
}
.inner-wrapper {
background: #fff;
}
.quote-right-top {
padding: 60px 60px 0 40px;
background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-br-287x287.png") no-repeat;
height: 287px;
position: absolute;
right: -($gutter_width * 2);
text-align: left;
top: -($gutter_width * 4.5);
width: $four_col;
p {
@include font_size (16);
margin: (1.538em / 2);
padding-bottom: 0;
color: #fff;
cite {
@include font_size (12);
color: #fff;
padding: 0;
}
}
}
.quote-right-top p a,
.quote-right p a { color: #fff; }
.quote-right {
@include font_size (18);
color: #fff;
padding: 50px 100px 0 50px;
text-indent: -6px;
background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-bl-287x287.png") no-repeat;
min-height: 287px;
position: absolute;
right: -$gutter_width;
text-align: left;
top: -($gutter_width * 4.5);
width: $four_col -(150/$base)em;
cite {
font-style: normal;
margin-left: 6px;
}
}
.quote-right-alt {
background: url(/sites/ubuntu/latest/u/img/patterns/quote-white-br-360x360.png) 0 -100px no-repeat;
color: $ubuntu_orange;
padding: 50px 50px 0 50px;
}
.quote-right-right { background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-br-287x287.png") no-repeat; }
}
/*
* Enterprise
*/
.audience-enterprise {
h1 { margin: 0 0 18px 0; }
td{ background: #fff; }
th, td {
padding: 6px 10px;
background: #fff;
}
th[scope="col"] {
background: #E2D4DC;
color: $canonical_aubergine;
}
tbody th[rowspan] { background: #F7F2F6; }
tfoot th[rowspan] { background: #dfdcd9; }
tfoot td, tfoot th {
font-weight: normal;
background: #dfdcd9;
}
.inner-wrapper {
background: $dark_aubergine;
color: #fff;
}
.row-box {
background: #fff;
color: $cool_grey;
}
/*.row-quote {
background: none repeat scroll 0 0 #E2D4DC;
color: #772953;
margin-left: -1.125em;
padding-top: 1.25em;
width: 58.75em;
}
.row-quote blockquote,
.row-quote blockquote p {
color: inherit;
font-size: 1.313em;
margin: 0 0.563em;
padding: 0;
top: auto;
width: auto;
}
.row-quote blockquote p {
line-height: 1.3;
text-indent: -12px;
}
.row-quote blockquote cite {
@include font_size (12);
color: #656565;
font-style: normal;
margin-left: 12px;
text-indent: 0;
}*/
}
.row-enterprise {
background: $canonical_aubergine;
color:#fff;
@include rounded_corners(0);
.box, div {
background: $canonical_aubergine;
color:#fff;
}
a {
color:#fff;
}
}
/*
.audience-consumer.audience-enterprise{
.inner-wrapper {
background: $mid_aubergine;
color: #fff;
}
.row-box,
.main-content {
background: #fff;
color: $cool_grey;
}
}
*/
.enterprise-dot-pattern { background:url('/sites/ubuntu/latest/u/img/patterns/enterprise-dot-pattern.png') }
.developer-dot-pattern { background:url('/sites/ubuntu/latest/u/img/patterns/developer-dot-pattern.png') }
\ No newline at end of file
sass/ubuntu/core.scss 0 → 100644
View file @ 4d31dfc7
@charset "UTF-8";
/**
* Ubuntu Core Front-End Framework
*
* Main CSS file part of the Ubuntu Core Front-End Framework
*
* @project Ubuntu Core Front-End Framework
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
* @colordef $cool_grey (#333); main text
* @colordef $ubuntu_orange (#dd4814); Ubuntu orange
*/
/**
* Dependencies
*
* Importing reset file: core-reset.css
* Importing grid file: core-grid.css
*/
/**
* Font sizes
*
* 45px
* 32px
* 23px
* 19.5px
* 16px - bold
* 13px - bold - uppercase
*/
/**
* Table of contents
* General
* Links
* Lists
* Images
* Base typography
* Global elements
* Forms
* Tables
*/
/**
* General
*
* @section links
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, ol, ul, li,
form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section {
display: block;
}
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
[hidden] {
display: none;
}
html {
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
background: #fff url("/sites/ubuntu/latest/u/img/patterns/body_bg.jpg");
color: #333;
font-family: Ubuntu, Arial, "libra sans", sans-serif;
font-weight: 300;
}
blockquote, q {
quotes: none;
}
blockquote {
margin: 28px 20px;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
legend {
border: 0;
*margin-left: -7px;
}
figure {
margin: 0;
}
abbr, acronym { cursor: help; }
/**
* Links
*
* @section links
*/
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
a:link, a:visited {
color: $link_color;
text-decoration: none;
}
a:hover, a:active, a:focus {
text-decoration: underline;
}
a.link-arrow:after { content: "\0000a0›"; }
nav ul li h2 a:after { content: "\0000a0›"; }
nav ul li a:after, .carousel ul li a:after, ul li p a:after { content: ""; }
/**
* Lists
*
* @section lists
*/
ol, ul {
margin-left: 20px;
margin-bottom: 20px;
}
ol ol, ul ul, ol ul, ul ol {
margin-bottom: 0;
}
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/**
* Images
*
* @section images
*/
svg:not(:root) {
overflow: hidden;
}
img {
border: 0;
}
img.left { margin-right: $gutter_width; }
img.right { margin-left: $gutter_width; }
.middle img {
vertical-align: middle;
margin-top: 4em;
}
/**
* Base typography
*
* @section type
*/
h1, h2, h3, h4 {
font-weight: 300;
line-height: 1.3;
}
h1 { @include font_size (45) }
h2 { @include font_size (32) }
h2 span, h1 span { display: block; }
p + h2, ul + h2, ol + h2, pre + h2 { margin-top: (18 / 32)em; }
header nav a:link { font-weight: normal; }
h3 { @include font_size (23) }
p + h3, ul + h3, ol + h3, pre + h3 { margin-top: (18 / 23)em; }
h4 { @include font_size (19.5) }
p + h4, ul + h4, ol + h4, , pre + h4 { margin-top: (19.5 / $base)em; }
h5 { @include font_size (16); }
h6 { @include font_size (13); text-transform: uppercase; letter-spacing: .1em }
p, li, code, pre { @include font_size(16); line-height: 1.6; margin-bottom: (12/$base)em; }
/* p + ol, p + dl {
margin-top: 1.5em;
margin-bottom: 1.5em;
}*/
li { margin-bottom: .4em; }
li:last-of-type { margin-bottom: 0; }
ins {
background: #fffbeb;
text-decoration: none;
}
small, .smaller { font-size: 13px; }
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
code, pre {
font-family: "Ubuntu Mono", "Consolas", "Monaco", "Lucida Console", "Courier New", Courier, monospace;
}
pre {
@include rounded_corners(4px);
background: $light_orange;
padding: .6em 1em;
white-space: pre-wrap;
word-wrap: break-word;
}
hgroup > h1 + h2,
hgroup > h2 + h3,
hgroup > h3 + h4 {
color: $warm_grey;
margin-top: (10 / $base)em;
}
hgroup > h2 + h3 { margin-top: 0; }
hgroup > h3 + h4 { margin-top: (5 / $base)em; }
blockquote { margin: 0; }
blockquote > p {
@include font_size (13);
font-weight:100;
margin:0 0 .4em 0;
}
blockquote small {
font-size:.813em;
line-height:1.4;
}
/**
* Forms
*
* Global form element styles
*
* @section forms
*/
button,
input,
select,
textarea {
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
line-height: normal;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
*overflow: visible;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
form fieldset {
@include rounded_corners(4px);
background-repeat: no-repeat;
background-color: #EFEEEC;
background-position: -15px -15px;
border: 0;
margin-bottom: 8px;
padding: 15px 20px 15px 94px;
}
form fieldset h3 {
border-bottom: 1px dotted #dfdcd9;
margin-bottom: 9px;
padding-bottom: 10px;
}
form fieldset li:first-child { margin-top: 0; }
form input[type="text"], form textarea {
@include rounded_corners(2px);
background: #fff;
border: 1px solid #999999;
font-family: Ubuntu, Arial, "libra sans", sans-serif;
display: block;
padding: 4px;
}
form input:focus, form textarea:focus {
border: 1px solid #000;
}
form textarea[readonly='readonly'] {
color: #999;
}
form input[type="checkbox"], form input[type="radio"] {
margin: 0;
width:auto;
}
form input[type="checkbox"] + label,
form input[type="radio"] + label{
display: inline;
margin-left: 5px;
vertical-align: middle;
width: auto;
}
form input[type="submit"] {
@include font_size (16);
@include rounded_corners(4px);
@include gradient(#f26120, $ubuntu_orange);
@include box_shadow(none);
border: 0;
color: #fff;
display: block;
padding: 10px 14px;
text-shadow: none;
width: auto;
margin-bottom: 0;
}
form input[type="submit"]:hover {
background: $ubuntu_orange;
}
form label {
cursor: pointer;
display: block;
margin-bottom: 4px;
}
form label span {
color: $error;
}
form ul { margin-left:0; }
form li {
list-style: none outside none;
margin-top: 14px;
}
form button[type="submit"] {
border: 0;
display: inline-block;
font-family: Ubuntu, Arial, "libra sans", sans-serif;
text-decoration:none;
font-weight: 300;
}
form input[type="reset"] {
display: none;
}
/**
* Tables
*
* @section tables
*/
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin: 0 0 (40/$base)em 0;
margin-bottom: $gutter_width;
th, td {
padding: 15px 10px;
background: #f0edea;
border: 1px dotted $warm_grey;
}
td {
text-align: center;
vertical-align: middle;
}
thead th {
border-collapse: separate;
border-spacing: 0 10px;
background: #fee3d2;
color: #333333;
font-weight: normal;
}
tbody th {
font-weight: 300;
}
th[scope="col"] {
text-align: center;
}
thead th:first-of-type { text-align: left; }
}
\ No newline at end of file
template.php
View file @ 4d31dfc7
...@@ -23,6 +23,8 @@ ...@@ -23,6 +23,8 @@
* External stylesheets and scripts cannot be inserted in the theme's * External stylesheets and scripts cannot be inserted in the theme's
* .info file. You must use this function instead. * .info file. You must use this function instead.
* *
* @since 1.0.0
*
* @uses drupal_add_css() * @uses drupal_add_css()
*/ */
function valencia_preprocess_html( &$variables ) { function valencia_preprocess_html( &$variables ) {
...@@ -37,6 +39,7 @@ function valencia_preprocess_html( &$variables ) { ...@@ -37,6 +39,7 @@ function valencia_preprocess_html( &$variables ) {
* Externally hosted stylesheets are never aggregated or compressed. * Externally hosted stylesheets are never aggregated or compressed.
* *
* @see drupal_get_css() * @see drupal_get_css()
* @since 1.0.0
* *
* @param string $data Optional. Stylesheet data to be added, depending on what is passed through the * @param string $data Optional. Stylesheet data to be added, depending on what is passed through the
* $options['type'] parameter. * $options['type'] parameter.
...@@ -62,10 +65,51 @@ function valencia_preprocess_html( &$variables ) { ...@@ -62,10 +65,51 @@ function valencia_preprocess_html( &$variables ) {
*/ */
drupal_add_css( 'http://assets.ubuntu.com/sites/guidelines/css/latest/ubuntu-styles.css', array( drupal_add_css( 'http://assets.ubuntu.com/sites/guidelines/css/latest/ubuntu-styles.css', array(
'type' => 'external', 'type' => 'external',
'group' => CSS_DEFAULT 'group' => CSS_DEFAULT,
'every_page' => true
)); ));
/**
* Add JavaScript file, setting, or inline code to the page.
*
* The behaviour of this function depends on the parameters it is called with.
* Generally, it handles the addition of JavaScript to the page, either as reference
* to an existing file or as inline code. You can:
* - Add a file ('file')
* - Add inline JavaScript code ('inline'). Make sure to wrap code in `(function($){})(jQuery);`
* - Add external JavaScript ('external')
* - Add settings ('setting'). Will be accessible at Drupal.settings
*
* If JavaScript aggregation is enabled, all JavaScript files added with $options['preprocess']
* set to TRUE will be merged into one aggregate file. Preprocessed inline JavaScript will not be
* aggregated into this single file. Externally hosted JavaScripts are never aggregated.
*
* @see drupal_get_js()
* @since 1.0.0
* @todo Add yui.min.js and core.js from Ubuntu assets
*
* @param string $data Optional. If given, the value depends on the $options or $options['type'] parameter.
* @param string|array $options {
* String defining the type of JavaScript that is being added in the $data parameter (<file>,
* <setting>, <inline>, <external>), or an associative array. JavaScript settings should always
* pass the string 'setting' only. Other types can have the following elements in the array. Optional.
*
* @type string $type Type of JavaScript. Default <file>. Accepts <file>, <inline>, <external>, <setting>.
* @type string $scope Location of the script. Can use custom regions. Default <header>. Accepts <header>, <footer>.
* @type integer $group Number of the JS group. Defines priority (higher first). Accepts <JS_LIBRARY>, <JS_DEFAULT>,
* <JS_THEME>.
* @type bool $every_page If present in every page of the website. Default <FALSE>.
* @type integer $weight Priority relative to the scope, group, and every_page. Higher first.
* @type bool $defer If TRUE, defer attribute is set on the script tag. Default <FALSE>.
* @type bool $cache Cache JS file. Used only when $type references a JS file. Default <TRUE>.
* @type bool $preprocess If TRUE and aggregation is enabled, script file will be aggregated. Default <TRUE>.
* }
* @return array JavaScript file, settings, and inline code, including Drupal defaults.
*/
//function drupal_add_js($data, $options);
} }
if ( !function_exists( 'region_empty' ) ) :
/** /**
* Check if region is empty. * Check if region is empty.
* *
...@@ -106,3 +150,4 @@ function region_empty( $region ) { ...@@ -106,3 +150,4 @@ function region_empty( $region ) {
return $empty; return $empty;
} }
endif;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment