Skip to content

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

Update vanilla framework, remove yui-min.js

parent dbb51318
Expand all Show whitespace changes
Inline Side-by-side
Showing with 4276 additions and 4153 deletions
js/core.js
View file @ 2fcda1ed
This diff is collapsed.
js/yui-min.js deleted 100644 → 0
View file @ dbb51318
This diff is collapsed.
sass/core/_core-constants.scss
View file @ 2fcda1ed
@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; }
// Base font size - small screen
@media only screen and (min-width: 984px) { $base: 14; }
sass/core/_core-grid-desktop.scss
View file @ 2fcda1ed
This diff is collapsed.
sass/core/_core-grid-tablet.scss
View file @ 2fcda1ed
This diff is collapsed.
sass/core/_core-grid.scss
View file @ 2fcda1ed
@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;
}
.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;
.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-right: $gutter;
margin-bottom: 20px;
margin-right: $gutter;
padding: 0;
position: relative;
width: 100%;
......@@ -74,28 +89,35 @@ body {
.eight-col,
.nine-col,
.ten-col,
.eleven-col { width: 100%; }
.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;
}
sass/core/_core-mixins.scss
View file @ 2fcda1ed
/**
* 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
sass/core/_core-templates.scss
View file @ 2fcda1ed
@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;
color: $cool-grey;
}
.enterprise-dot-pattern {
background: url('/sites/ubuntu/latest/u/img/patterns/enterprise-dot-pattern.png');
}
*/
.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
.developer-dot-pattern {
background: url('/sites/ubuntu/latest/u/img/patterns/developer-dot-pattern.png');
}
sass/core/_core.scss
View file @ 2fcda1ed
This diff is collapsed.
sass/core/core-print.scss
View file @ 2fcda1ed
@charset "UTF-8";
/**
* Ubuntu print Stylesheet
*
*
* @project Ubuntu Patterns
* @author Web Team at Canonical Ltd
* @copyright 2012 Canonical Ltd
*
*/
* { background: #fff; color: #000; }
@charset 'UTF-8';
////
/// Ubuntu print Stylesheet
/// @project Ubuntu Patterns
/// @author Web Team at Canonical Ltd
/// @copyright 2012 Canonical Ltd
////
@import 'core-constants';
* {
background: $white;
color: $black;
}
body {
background: white;
background: $white;
font-size: 16pt;
line-height: 1.5;
}
a:link, a:visited {
color: #898989;
a:link,
a:visited {
background: transparent;
color: $warm-grey;
font-weight: bold;
text-decoration: underline;
}
nav,
#box-search,
.cookie-policy,
.link-top,
footer {
display: none;
}
nav.nav-secondary {
.nav-secondary {
display: block;
}
.wrapper {
width: auto;
float: none;
margin: 0 5%;
padding: 0;
padding-top: 1em;
float: none !important;
width: auto;
}
sass/core/patterns/_arrows.scss
View file @ 2fcda1ed
......@@ -40,19 +40,11 @@
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 {
.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
View file @ 2fcda1ed
@charset 'UTF-8';
blockquote {
&.pull-quote {
.pull-quote {
text-indent: 0;
p {
@include font-size (24.833);
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;
color: $brand-color;
line-height: 0;
position: relative;
left: -5px;
& + span { left: 5px; } // the second span
// scss-lint:disable NestingDepth
+ span {
left: 5px;
}
// scss-lint:enable NestingDepth
}
cite {
......@@ -36,40 +39,40 @@ blockquote {
padding-left: $gutter-width * 3;
display: table-cell;
}
}
}
&.quote-canonical,
&.quote-canonical-white {
.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;
background: none;
color: $cool-grey;
width: auto;
height: auto;
float: right;
font-size: 1em;
height: 215px;
margin-top: 0;
padding: 20px 60px 0;
margin-top: 20px;
padding: 0 30px;
position: relative;
width: 236px;
}
}
&.quote-canonical-white {
.quote-canonical-white {
background: url("#{$asset-path}patterns/quote-aubergine-345x345.png") no-repeat 0 0;
color: #fff;
color: $white;
padding: 80px 60px 0;
height: 265px;
}
}
&.quote p:first-child {
.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 {
.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;
color: $white;
height: 167px;
padding: 60px 40px;
position: static;
......@@ -77,28 +80,27 @@ blockquote {
top: -($gutter-width * 4.5);
width: 207px;
& p { color: #fff; }
}
p { color: $white; }
}
&.quote-grey {
&.quote-grey {
@include font-size (36);
background: url("#{$asset-path}patterns/quote-grey-br-211x211.png") no-repeat scroll 0 0 transparent;
color: #fff;
background: url("#{$asset-path}patterns/quote-grey-br-211x211.png") no-repeat scroll 0 0 $transparent;
color: $white;
height: 152px;
line-height: 40px;
margin-left: 20px;
padding: 60px 0 0;
text-align: center;
width: 211px;
}
}
&.quote-bottom-left {
&.quote-bottom-left {
background: url("#{$asset-path}patterns/quote-orange-bl-287x287.png") no-repeat;
color: #fff;
color: $white;
height: 167px;
padding: 55px 40px 70px 45px;
width: 225px;
}
}
//.pull-quote {
......@@ -108,9 +110,9 @@ blockquote {
//right: 0;
//}
html.no-svg,
.no-svg,
.opera-mini {
blockquote.quote-right-bottom {
.quote-right-bottom {
background-image: url("#{$asset-path}pictograms/picto-pack/picto-quote-orange.png");
}
}
......@@ -120,17 +122,17 @@ html.no-svg,
// row-quote
.row-quote {
@include rounded-corners(0);
border-radius: 0;
blockquote {
@include rounded-corners(4px);
border-radius: 4px;
margin: 0;
padding: 0;
p {
margin-bottom: .75em;
line-height: 1.3;
color: $cool-grey;
color: $base-color;
padding-left: 10px;
padding-right: 10px;
//@include font-size (23);
......@@ -140,31 +142,34 @@ html.no-svg,
span {
font-weight: bold;
color: $ubuntu-orange;
color: $brand-color;
line-height: 0;
position: relative;
left: -5px;
& + span { left: 5px; } // the second span
// scss-lint:disable NestingDepth
+ span {
left: 5px;
}
// scss-lint:enable NestingDepth
}
cite {
color: $cool-grey;
color: $base-color;
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;
background: $table-th 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;
background: $table-th url('#{$asset-path}pictograms/pictogram-twitter-54x63.png') 99% bottom no-repeat;
padding: $gutter-width $gutter-width $gutter-width 80px;
p {
......@@ -174,21 +179,6 @@ html.no-svg,
}
}
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 {
......@@ -199,11 +189,14 @@ blockquote.quote-canonical-white {
text-indent: -.4em;
}
.row-quote blockquote p {
.row-quote blockquote {
p {
@include font-size (24.83);
text-indent: -.4em;
}
}
blockquote.pull-quote p,
.pull-quote p,
.row-quote blockquote p {
padding-left: 0;
padding-right: 0;
......@@ -219,21 +212,15 @@ blockquote.quote-canonical-white {
}
}
blockquote.pull-quote p span,
.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)
......@@ -244,7 +231,7 @@ blockquote.quote-canonical-white {
text-indent: -10px;
}
blockquote.pull-quote p span,
.pull-quote p span,
.row-quote blockquote p span {
top: 10px;
}
......
sass/core/patterns/_boxes.scss
View file @ 2fcda1ed
@charset 'UTF-8';
%box {
@include rounded-corners(4px);
border-radius: 4px;
padding: 1.333em $gutter-width;
}
.box {
@extend %box;
background: #fff;
border: 1px solid #dfdcd9;
background: $white;
border: 1px solid $box-border;
}
.box-grey {
@extend %box;
background: $light-grey;
color: $cool-grey;
color: $base-color;
}
.box-orange {
background: $ubuntu-orange;
color: #fff;
background: $brand-color;
color: $white;
}
.box-highlight {
@include box-shadow(0 2px 2px 0 #c2c2c2);
box-shadow: 0 2px 2px 0 $box-shadow;
border: 1px solid $light-grey;
}
.box-textured {
@include box-shadow(0 2px 2px 0 #c2c2c2);
box-shadow: 0 2px 2px 0 $box-shadow;
background: url("#{$asset-path}patterns/grey-textured-background.jpg");
border: 0;
}
.box-padded {
@include rounded-corners(4px);
background: $box-solid-grey;
border-radius: 4px;
background: $mid-grey;
border: 0;
margin-bottom: 20px;
padding: 6px 5px;
......@@ -52,24 +52,24 @@
}
div {
@include rounded-corners(4px);
background: #fff;
border-radius: 4px;
background: $white;
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-radius: 4px;
background: url('#{$asset-path}patterns/soft-centre-bkg.gif') repeat scroll 0 0 $cool-grey;
border: 0;
margin-bottom: 20px;
padding: 11px 5px 6px;
h3 {
color: #fff;
margin-left: ($gutter-width / 4);
@include font-size(19.5);
color: $white;
margin-left: ($gutter-width / 4);
}
h4 {
......@@ -78,8 +78,8 @@
}
> div {
@include rounded-corners(4px);
background: #fff;
border-radius: 4px;
background: $white;
overflow: hidden;
padding: 20px 8px;
}
......@@ -112,52 +112,22 @@
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 {
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; }
&:hover { background-color: $resource-hover; }
&:after {
-moz-box-shadow: 0 -1px 2px 0 #ddd;
-webkit-box-shadow: 0 -1px 2px 0 #ddd;
box-shadow: 0 -1px 2px 0 #ddd;
box-shadow: 0 -1px 2px 0 $resource-shadow;
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;
......@@ -172,20 +142,16 @@
&: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);
border-bottom: 30px solid $light-grey;
border-right: 30px solid $white;
box-shadow: -2px 2px 2px rgba(176, 176, 176, .4);
z-index: 2;
@include rounded-corners(0 0 0 0);
border-radius: 0;
}
&:hover:before {
......@@ -198,8 +164,8 @@
}
.content-cat {
background: url("#{$asset-path}icons/icon-resource-hub-icon-document.png") left center no-repeat;
color: #aea79f;
background: url('#{$asset-path}icons/icon-resource-hub-icon-document.png') left center no-repeat;
color: $warm-grey;
font-size: 14px;
letter-spacing: 1px;
margin: 0;
......@@ -210,7 +176,7 @@
}
.content-cat-webinar {
background: url("#{$asset-path}icons/icon-resource-hub-webinar.png") left center no-repeat;
background: url('#{$asset-path}icons/icon-resource-hub-webinar.png') left center no-repeat;
}
&.box-image-centered div + span img {
......@@ -218,12 +184,12 @@
}
}
html.yui3-js-enabled .resource:hover a {
.yui3-js-enabled .resource:hover a {
text-decoration: underline;
}
.row-grey .resource:before {
border-right-color: #f7f7f7;
border-right-color: $light-grey;
}
@media only screen and (max-width : 768px) {
......
sass/core/patterns/_buttons.scss
View file @ 2fcda1ed
@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();
////
/// 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
////
/// cta button
.link-cta-ubuntu,
.link-cta-canonical,
.link-cta-inverted,
.cta-ubuntu,
.cta-canonical,
form [type="submit"] {
@include font-size (16);
@include rounded-corners(3px);
background: $ubuntu-orange;
color: #fff;
box-sizing: border-box;
border-radius: 3px;
border: 0;
background: $brand-color;
color: $white;
text-decoration: none;
display: inline-block;
margin: 0;
outline: none;
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;
/// cta hover state
&:hover {
background: darken($base-color, 6.2%); // #c03f11
text-decoration: none;
}
}
a.cta-large,
button.cta-large {
/// cta large button
.cta-large,
.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"] {
/// Canonical cta colours
.link-cta-canonical,
.cta-canonical,
form .cta-canonical[type="submit"],
form .cta-canonical[type="submit"] {
background: $canonical-aubergine;
color: #fff;
}
color: $white;
a.link-cta-inverted,
button.cta-inverted {
background: #fff;
color: $cool-grey;
&:hover {
background: darken($canonical-aubergine, 6.2%); // #5f193e
text-decoration: none;
}
}
.row-enterprise a.link-cta-canonical,
.row-enterprise button.link-cta-canonical {
background: #fff;
color: $canonical-aubergine;
}
/// Inverted colour style
.link-cta-inverted,
.cta-inverted {
background: $white;
color: $base-color;
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;
&:hover {
background: $white;
text-decoration: underline;
}
}
a.link-cta-canonical:hover,
button.cta-canonical:hover {
background: darken($canonical-aubergine, 6.2%); // #5f193e
text-decoration: none;
}
/// Enterprise cta colour style
.row-enterprise .link-cta-canonical,
.row-enterprise .link-cta-canonical {
background: $white;
color: $canonical-aubergine;
a.link-cta-inverted:hover,
.row-enterprise a.link-cta-canonical:hover,
button.cta-inverted:hover,
.row-enterprise button.cta-canonical:hover {
background: #fff;
&:hover {
background: $white;
text-decoration: underline;
}
}
a.cta-deactivated,
a.cta-deactivated:hover,
button.cta-deactivated,
button.cta-deactivated:hover {
background: $box-solid-grey;
color: #fff;
/// cta deactived style
.cta-deactivated,
.cta-deactivated:hover {
background: $cool-grey;
color: $white;
cursor: not-allowed;
}
/// Medium breakpoint
@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"] {
.link-cta-ubuntu,
.link-cta-canonical,
.link-cta-inverted,
.cta-ubuntu,
.cta-canonical,
form [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"] {
/// Large breakpoint
@media only screen and (min-width : 984px) {
.link-cta-ubuntu,
.link-cta-canonical,
.link-cta-inverted,
.cta-ubuntu,
.cta-canonical,
form [type="submit"] {
width: auto;
}
} // end @media only screen and (min-width: 984px)
}
sass/core/patterns/_contextual-footer.scss
View file @ 2fcda1ed
@charset 'UTF-8';
// scss-lint:disable IdSelector
#context-footer {
@include box-sizing;
@include font-size (14);
box-sizing: border-box;
border-bottom: 0;
clear: both;
padding-bottom: 1px;
......@@ -14,15 +15,15 @@
width: 100%;
hr {
@include box-shadow(inset 0 2px 2px -2px #333);
background: $ubuntu-orange;
box-shadow: inset 0 2px 2px -2px $cool-grey;
background: $brand-color;
height: 14px;
margin: 0 0 10px;
border: 0;
clear: both;
}
div.twelve-col {
.twelve-col {
display: table;
float: none;
margin-bottom: 7px;
......@@ -56,11 +57,11 @@
ul {
margin-bottom: 5px;
}
li.active {
.active {
display: none;
}
}
h3 {
@include font-size (16);
......@@ -68,7 +69,7 @@
}
.list a:after,
a.link-arrow:after,
.link-arrow:after,
nav ul li h2 a:after {
content: ' \203A';
}
......@@ -81,24 +82,26 @@
padding-left: 30px;
padding-right: 30px;
div + div {
div {
+ div {
width: 31%;
}
div div.feature-four {
.feature-four {
padding-bottom: 20px;
}
}
hr {
margin: 0 -30px 40px;
}
& > div {
> div {
padding-left: 0;
padding-right: 0;
}
}
} // end @media only screen and (max-width : 768px)
@media only screen and (min-width : 769px) {
......@@ -109,18 +112,20 @@
#context-footer {
padding: 0 40px 10px;
}
#context-footer div div {
div div {
display: table-cell;
float: none;
padding-left: 20px;
margin-bottom: 0;
}
#context-footer hr {
hr {
margin: 0 -40px 40px;
}
}
} // end @media only screen and (min-width: 984px)
// scss-lint:enable IdSelector
sass/core/patterns/_footer.scss
View file @ 2fcda1ed
@charset "UTF-8";
// scss-lint:disable QualifyingElement, IdSelector
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;
box-shadow: inset 0 2px 2px -1px $mid-grey;
box-sizing: border-box;
clear: both;
display: block;
padding: 30px 10px 20px;
......@@ -16,17 +15,13 @@ footer.global {
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;
margin: 0 auto;
min-height: 40px;
position: relative;
width: 100%;
p,
ul {
......@@ -35,22 +30,37 @@ footer.global {
} // legal
h2 {
font-size: 0.75em;
font-size: .75em;
line-height: 1.4;
margin-bottom: 0;
padding-bottom: 0.5em;
padding-bottom: .5em;
}
h2, h2 a:link, h2 a:visited {
color: $cool-grey;
h2,
h2 a:link,
h2 a:visited {
color: $base-color;
font-weight: normal;
}
nav ul li h2 a:after { content: ""; }
nav ul li h2 a:after { content: ''; }
ul { margin: 0; }
ul {
margin: 0;
.inline li a:hover {
color: $brand-color;
}
li:after {
color: $warm-grey;
content: '\00b7';
vertical-align: middle;
margin: 0 5px;
}
}
nav ul li.two-col {
nav ul .two-col {
display: inline-block;
min-height: 10em;
vertical-align: top;
......@@ -58,65 +68,59 @@ footer.global {
nav ul li li {
@include font-size (12);
font-size: 0.75em;
font-size: .75em;
margin-bottom: 0;
}
ul li li a:link, ul li li a:visited {
color: $cool-grey;
ul li li a:link,
ul li li a:visited {
color: $base-color;
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;
ul li li a:hover,
ul li li a:active,
h2 a:hover,
h2 a:active {
color: $brand-color;
}
.inline li { display: inline; }
p, ul.inline li a {
color: $cool-grey;
font-size: 12px;
.inline li {
display: inline;
float: none;
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;
li:last-child { width: 120px; }
li:last-child:after { content: ''; }
}
ul.inline li:last-child { width: 120px; }
ul.inline li:last-child:after { content: ""; }
.inline li {
float: none;
p,
.inline li a {
color: $base-color;
font-size: 12px;
margin-bottom: 0;
}
.top-link {
@include box-shadow(0 -4px 4px -4px rgba(0, 0, 0, 0.3) inset);
box-shadow: 0 -4px 4px -4px rgba(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;
font-size: .75em;
letter-spacing: .05em;
margin: 0 0 0 -10px;
padding-right: 20px;
text-transform: uppercase;
width: 100%;
a {
@include box-sizing();
box-sizing: border-box;
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;
color: $warm-grey;
display: block;
float: none;
font-weight: 400;
......@@ -125,7 +129,8 @@ footer.global {
}
} /* End footer.global */
html.no-svg, .opera-mini {
.no-svg,
.opera-mini {
footer.global .top-link {
a {
background-image: url("#{$asset-path}pictograms/picto-pack/picto-upload-warmgrey.png");
......@@ -136,12 +141,12 @@ html.no-svg, .opera-mini {
@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;
box-shadow: 0 2px 2px -1px $mid-grey inset;
box-sizing: content-box;
margin-left: -10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
#livechat-eye-catcher {
......@@ -194,3 +199,4 @@ html.no-svg, .opera-mini {
} // end @media only screen and (min-width: 984px)
// scss-lint:enable IdSelector, QualifyingElement
sass/core/patterns/_forms.scss
View file @ 2fcda1ed
......@@ -4,14 +4,14 @@ form {
input,
select,
textarea {
@include box-sizing();
box-sizing: border-box;
width: 100%;
}
.fieldset-submit ul {
margin-bottom: 0;
}
// scss-lint:disable SelectorFormat
fieldset {
.mktError,
.errMsg,
......@@ -24,15 +24,5 @@ form {
display: block;
}
}
// scss-lint:enable SelectorFormat
}
@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
View file @ 2fcda1ed
This diff is collapsed.
sass/core/patterns/_helpers.scss
View file @ 2fcda1ed
@charset 'UTF-8';
@import '../_core-constants';
@import '../core-constants';
.left { float: left; }
......@@ -25,16 +25,16 @@ img {
}
a.external {
@include background-size(.7em .7em);
.external {
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'); }
.opera-mini .external,
.no-svg .external { background-image: url('#{$asset-path}external-link-orange.png'); }
.text-center,
.align-center { text-align: center; }
......@@ -62,7 +62,7 @@ a.external {
margin-top: -40px;
a {
background: #fff;
background: $white;
margin-right: 10px;
margin-top: -17px;
padding: 5px;
......@@ -78,7 +78,7 @@ a.external {
}
.box .pull-bottom-right {
@include rounded-corners(0 0 4px 0);
border-radius: 0 0 4px;
}
.pull-bottom-left { margin-left: -20px; margin-bottom: -21px; }
......@@ -86,9 +86,9 @@ a.external {
.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,
.box-image-centered span img,
.row-image-centered span img,
.row.row-image-centered span img,
img {
&.priority-0 {
position: absolute;
......@@ -118,8 +118,8 @@ img {
height: 100%;
}
& + h3,
& + .video-title {
+ h3,
+ .video-title {
margin-top: 20px;
}
}
......@@ -131,7 +131,7 @@ img {
.pull-bottom-right,
.pull-bottom-left { position: static; }
img.pull-bottom-left {
.pull-bottom-left {
margin-bottom: 0;
margin-left: 0;
}
......@@ -139,9 +139,10 @@ img {
} // 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,
.box-image-centered span img,
.row-image-centered span img,
.row.row-image-centered span img,
img {
&.priority-0 {
position: relative;
......@@ -166,11 +167,11 @@ img {
margin-right: -30px;
}
img.pull-left {
.pull-left {
margin-left: -30px;
}
img.touch-border {
.touch-border {
float: left;
margin-bottom: -30px;
}
......@@ -179,18 +180,18 @@ img {
@media only screen and (min-width : 769px) {
img.left { margin-right: 20px; }
.left { margin-right: 20px; }
} //@media only screen and (min-width : 769px)
@media only screen and (min-width: 984px) {
img.touch-border {
.touch-border {
float: left;
margin-bottom: -40px;
}
img.pull-left { margin-left: -40px; }
.pull-left { margin-left: -40px; }
.pull-right {
float: right;
......@@ -207,6 +208,3 @@ img {
}
} // end @media only screen and (min-width: 984px)
sass/core/patterns/_image-centered.scss
View file @ 2fcda1ed
This diff is collapsed.
sass/core/patterns/_inline-logos.scss
View file @ 2fcda1ed
@charset 'UTF-8';
ul.inline-logos {
.inline-logos {
float: left;
margin-left: 0;
padding: 0;
......@@ -18,8 +18,9 @@ ul.inline-logos {
&.last-item { border: 0; }
}
img {
@include transition;
transition: all .5s ease-out;
vertical-align: middle;
max-width: 115px;
max-height: 32px;
......@@ -48,18 +49,16 @@ ul.inline-logos {
}
@media only screen and (max-width : 768px) {
ul.inline-logos {
.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 {
.inline-logos {
li {
clear: none;
display: inline-block;
......@@ -76,14 +75,11 @@ ul.inline-logos {
}
}
}
} //@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
View file @ 2fcda1ed
......@@ -12,11 +12,13 @@
padding: 10px 0;
}
// scss-lint:disable QualifyingElement
li:last-of-type,
li.last-item {
border: 0;
padding-bottom: 0;
}
// scss-lint:enable QualifyingElement
}
.list article {
......@@ -54,7 +56,7 @@ nav .list a {
padding-left: 25px;
}
html.no-svg,
.no-svg,
.opera-mini {
.list-ubuntu li {
background-image: url('#{$asset-path}patterns/tick-orange.png');
......@@ -84,13 +86,13 @@ html.no-svg,
margin-bottom: 0;
}
// scss-lint:disable QualifyingElement
li.last-item {
border-bottom: 1px dotted $warm-grey;
padding-bottom: 10px;
}
div.last-col,
ul.last-col {
.last-col {
margin-bottom: 20px;
li.last-item {
......@@ -98,6 +100,7 @@ html.no-svg,
padding-bottom: 0;
}
}
// scss-lint:enable QualifyingElement
}
.inline {
......@@ -119,10 +122,12 @@ html.no-svg,
margin-bottom: 20px;
}
// scss-lint:disable QualifyingElement
li.last-item {
border-bottom: 0;
padding-bottom: 0;
}
// scss-lint:enable QualifyingElement
}
} // end @media only screen and (max-width : 768px)
......
sass/core/patterns/_notifications.scss deleted 100644 → 0
View file @ dbb51318
@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
View file @ 2fcda1ed
This diff is collapsed.
sass/core/patterns/_search.scss
View file @ 2fcda1ed
This diff is collapsed.
sass/core/patterns/_slider.scss
View file @ 2fcda1ed
@charset 'UTF-8';
.slider {
@include rounded-corners(4px);
border-radius: 4px;
background: $light-grey;
padding-top: $gutter-width * 2;
......@@ -9,18 +9,12 @@
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;
}
......@@ -42,11 +36,11 @@
margin-right: .75em;
text-indent: -9999em;
width: 7px;
}
&.active {
.active {
background-position: 0 0;
}
}
a {
display: block;
......@@ -80,7 +74,7 @@
.arrow-prev:hover,
.arrow-next:hover {
text-decoration: none;
color: $cool-grey;
color: $base-color;
}
.arrow-prev:active,
......
sass/core/patterns/_structure.scss
View file @ 2fcda1ed
This diff is collapsed.
sass/core/patterns/_tabbed-content.scss
View file @ 2fcda1ed
This diff is collapsed.
sass/core/patterns/_tooltips.scss
View file @ 2fcda1ed
This diff is collapsed.
sass/core/patterns/_typography.scss
View file @ 2fcda1ed
This diff is collapsed.
sass/core/patterns/_vertical-divider.scss
View file @ 2fcda1ed
This diff is collapsed.
sass/core/patterns/patterns.scss
View file @ 2fcda1ed
This diff is collapsed.
sass/core/ubuntu-styles.scss
View file @ 2fcda1ed
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment