From 0d53fc404dffc50bbdb0ce6ae9639ef426fdda74 Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Fri, 25 Jan 2013 17:54:45 +0000 Subject: [PATCH] Remove jQuery Mobile and restyle. --- index.html | 29 +- javascripts/app.js | 26 +- javascripts/libs/json.js | 59 ++++ javascripts/main.js | 1 - javascripts/templates/line.mustache | 12 +- javascripts/templates/message.mustache | 1 + javascripts/test_data/now.json | 1 + javascripts/test_data/test_data.js | 10 + javascripts/test_data/tomorrow.json | 1 + javascripts/test_data/weekend.json | 150 ++++++++++ javascripts/views/line_list.js | 2 +- javascripts/views/main.js | 38 +++ .../bourbon/_bourbon-deprecated-upcoming.scss | 3 + stylesheets/bourbon/_bourbon.scss | 47 +++ stylesheets/bourbon/addons/_button.scss | 273 ++++++++++++++++++ stylesheets/bourbon/addons/_clearfix.scss | 29 ++ stylesheets/bourbon/addons/_font-family.scss | 5 + stylesheets/bourbon/addons/_hide-text.scss | 15 + .../bourbon/addons/_html5-input-types.scss | 56 ++++ stylesheets/bourbon/addons/_position.scss | 42 +++ stylesheets/bourbon/addons/_prefixer.scss | 27 ++ .../bourbon/addons/_timing-functions.scss | 32 ++ stylesheets/bourbon/css3/_animation.scss | 52 ++++ stylesheets/bourbon/css3/_appearance.scss | 3 + .../bourbon/css3/_background-image.scss | 44 +++ .../bourbon/css3/_background-size.scss | 3 + stylesheets/bourbon/css3/_background.scss | 107 +++++++ stylesheets/bourbon/css3/_border-image.scss | 56 ++++ stylesheets/bourbon/css3/_border-radius.scss | 22 ++ stylesheets/bourbon/css3/_box-shadow.scss | 3 + stylesheets/bourbon/css3/_box-sizing.scss | 4 + stylesheets/bourbon/css3/_columns.scss | 47 +++ stylesheets/bourbon/css3/_flex-box.scss | 52 ++++ stylesheets/bourbon/css3/_font-face.scss | 21 ++ .../bourbon/css3/_hidpi-media-query.scss | 10 + .../bourbon/css3/_image-rendering.scss | 13 + stylesheets/bourbon/css3/_inline-block.scss | 8 + .../bourbon/css3/_linear-gradient.scss | 43 +++ stylesheets/bourbon/css3/_perspective.scss | 8 + .../bourbon/css3/_radial-gradient.scss | 78 +++++ stylesheets/bourbon/css3/_transform.scss | 11 + stylesheets/bourbon/css3/_transition.scss | 36 +++ stylesheets/bourbon/css3/_user-select.scss | 3 + stylesheets/bourbon/functions/_compact.scss | 11 + .../_deprecated-webkit-gradient.scss | 44 +++ stylesheets/bourbon/functions/_flex-grid.scss | 35 +++ .../bourbon/functions/_grid-width.scss | 13 + .../bourbon/functions/_linear-gradient.scss | 6 + .../bourbon/functions/_modular-scale.scss | 40 +++ .../bourbon/functions/_radial-gradient.scss | 57 ++++ .../bourbon/functions/_render-gradients.scss | 14 + .../bourbon/functions/_tint-shade.scss | 9 + .../functions/_transition-property-name.scss | 22 ++ stylesheets/main.css | 111 ++++++- stylesheets/main.scss | 143 +++++++-- 55 files changed, 1911 insertions(+), 77 deletions(-) create mode 100644 javascripts/libs/json.js create mode 100644 javascripts/templates/message.mustache create mode 100644 javascripts/test_data/now.json create mode 100644 javascripts/test_data/test_data.js create mode 100644 javascripts/test_data/tomorrow.json create mode 100644 javascripts/test_data/weekend.json create mode 100644 javascripts/views/main.js create mode 100644 stylesheets/bourbon/_bourbon-deprecated-upcoming.scss create mode 100644 stylesheets/bourbon/_bourbon.scss create mode 100644 stylesheets/bourbon/addons/_button.scss create mode 100644 stylesheets/bourbon/addons/_clearfix.scss create mode 100644 stylesheets/bourbon/addons/_font-family.scss create mode 100644 stylesheets/bourbon/addons/_hide-text.scss create mode 100644 stylesheets/bourbon/addons/_html5-input-types.scss create mode 100644 stylesheets/bourbon/addons/_position.scss create mode 100644 stylesheets/bourbon/addons/_prefixer.scss create mode 100644 stylesheets/bourbon/addons/_timing-functions.scss create mode 100644 stylesheets/bourbon/css3/_animation.scss create mode 100644 stylesheets/bourbon/css3/_appearance.scss create mode 100644 stylesheets/bourbon/css3/_background-image.scss create mode 100644 stylesheets/bourbon/css3/_background-size.scss create mode 100644 stylesheets/bourbon/css3/_background.scss create mode 100644 stylesheets/bourbon/css3/_border-image.scss create mode 100644 stylesheets/bourbon/css3/_border-radius.scss create mode 100644 stylesheets/bourbon/css3/_box-shadow.scss create mode 100644 stylesheets/bourbon/css3/_box-sizing.scss create mode 100644 stylesheets/bourbon/css3/_columns.scss create mode 100644 stylesheets/bourbon/css3/_flex-box.scss create mode 100644 stylesheets/bourbon/css3/_font-face.scss create mode 100644 stylesheets/bourbon/css3/_hidpi-media-query.scss create mode 100644 stylesheets/bourbon/css3/_image-rendering.scss create mode 100644 stylesheets/bourbon/css3/_inline-block.scss create mode 100644 stylesheets/bourbon/css3/_linear-gradient.scss create mode 100644 stylesheets/bourbon/css3/_perspective.scss create mode 100644 stylesheets/bourbon/css3/_radial-gradient.scss create mode 100644 stylesheets/bourbon/css3/_transform.scss create mode 100644 stylesheets/bourbon/css3/_transition.scss create mode 100644 stylesheets/bourbon/css3/_user-select.scss create mode 100644 stylesheets/bourbon/functions/_compact.scss create mode 100644 stylesheets/bourbon/functions/_deprecated-webkit-gradient.scss create mode 100644 stylesheets/bourbon/functions/_flex-grid.scss create mode 100644 stylesheets/bourbon/functions/_grid-width.scss create mode 100644 stylesheets/bourbon/functions/_linear-gradient.scss create mode 100644 stylesheets/bourbon/functions/_modular-scale.scss create mode 100644 stylesheets/bourbon/functions/_radial-gradient.scss create mode 100644 stylesheets/bourbon/functions/_render-gradients.scss create mode 100644 stylesheets/bourbon/functions/_tint-shade.scss create mode 100644 stylesheets/bourbon/functions/_transition-property-name.scss diff --git a/index.html b/index.html index 551343b..8a9e707 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,8 @@ - + London Underground Status - @@ -11,29 +10,27 @@ -
+
-
+

Tube Status

- Refresh + ⟳
-
-
+
diff --git a/javascripts/app.js b/javascripts/app.js index 1954b10..7a54059 100644 --- a/javascripts/app.js +++ b/javascripts/app.js @@ -1,36 +1,18 @@ -define(['jquerymobile', - 'backbone', +define(['backbone', 'mustache', 'collections/lines', + 'views/main', 'views/line_list'], -function(a, Backbone, Mustache, LinesCollection, LineList) { +function(Backbone, Mustache, LinesCollection, Main, LineList) { return { initialize: function() { - $('body').removeClass('loading'); - var refetch = function() { - $.mobile.loading('show'); - lines.fetch({ - success: function() { - $.mobile.loading('hide'); - } - }); - } lines = new LinesCollection; + main = new Main({ collection: lines }); lineList = new LineList({ collection: lines }); lines.url = lines.urls.now; lines.fetch(); - - $('#refresh').on("click", function() { - refetch(); - return false; - }); - - $('footer a').on("click", function() { - lines.url = lines.urls[this.id]; - refetch(); - }); } }; }); diff --git a/javascripts/libs/json.js b/javascripts/libs/json.js new file mode 100644 index 0000000..85e5ae6 --- /dev/null +++ b/javascripts/libs/json.js @@ -0,0 +1,59 @@ +/** @license + * RequireJS plugin for loading JSON files + * - depends on Text plugin and it was HEAVILY "inspired" by it as well. + * Author: Miller Medeiros + * Version: 0.3.0 (2012/10/29) + * Released under the MIT license + */ +define(['text'], function(text){ + + var CACHE_BUST_QUERY_PARAM = 'bust', + CACHE_BUST_FLAG = '!bust', + jsonParse = (typeof JSON !== 'undefined' && typeof JSON.parse === 'function')? JSON.parse : function(val){ + return eval('('+ val +')'); //quick and dirty + }, + buildMap = {}; + + function cacheBust(url){ + url = url.replace(CACHE_BUST_FLAG, ''); + url += (url.indexOf('?') < 0)? '?' : '&'; + return url + CACHE_BUST_QUERY_PARAM +'='+ Math.round(2147483647 * Math.random()); + } + + //API + return { + + load : function(name, req, onLoad, config) { + if ( config.isBuild && (config.inlineJSON === false || name.indexOf(CACHE_BUST_QUERY_PARAM +'=') !== -1) ) { + //avoid inlining cache busted JSON or if inlineJSON:false + onLoad(null); + } else { + text.get(req.toUrl(name), function(data){ + if (config.isBuild) { + buildMap[name] = data; + onLoad(data); + } else { + onLoad(jsonParse(data)); + } + }, + onLoad.error + ); + } + }, + + normalize : function (name, normalize) { + //used normalize to avoid caching references to a "cache busted" request + return (name.indexOf(CACHE_BUST_FLAG) === -1)? name : cacheBust(name); + }, + + //write method based on RequireJS official text plugin by James Burke + //https://github.com/jrburke/requirejs/blob/master/text.js + write : function(pluginName, moduleName, write){ + if(moduleName in buildMap){ + var content = buildMap[moduleName]; + write('define("'+ pluginName +'!'+ moduleName +'", function(){ return '+ content +';});\n'); + } + } + + }; +}); \ No newline at end of file diff --git a/javascripts/main.js b/javascripts/main.js index 231f769..8424196 100644 --- a/javascripts/main.js +++ b/javascripts/main.js @@ -1,7 +1,6 @@ require.config({ paths: { jquery: 'libs/jquery.min', - jquerymobile: 'libs/jquery.mobile.min', underscore: 'libs/underscore', backbone: 'libs/backbone', mustache: 'libs/mustache', diff --git a/javascripts/templates/line.mustache b/javascripts/templates/line.mustache index 6fdef1c..ae346f0 100644 --- a/javascripts/templates/line.mustache +++ b/javascripts/templates/line.mustache @@ -1,5 +1,11 @@
  • - {{{ name }}} - {{ #message_count }}{{ message_count }}{{ /message_count }} - {{ status }} + + {{& name }} + {{ #message_count }}{{ message_count }}{{ /message_count }} + {{ status }} + + {{ #messages }} +
    +
    + {{ /messages }}
    • diff --git a/javascripts/templates/message.mustache b/javascripts/templates/message.mustache new file mode 100644 index 0000000..810872f --- /dev/null +++ b/javascripts/templates/message.mustache @@ -0,0 +1 @@ +

    {{ message }}

    diff --git a/javascripts/test_data/now.json b/javascripts/test_data/now.json new file mode 100644 index 0000000..653d30c --- /dev/null +++ b/javascripts/test_data/now.json @@ -0,0 +1 @@ +{"response":{"lines":[{"name":"Bakerloo","id":"bakerloo","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 13:43:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Central","id":"central","status":"good service","messages":[],"status_starts":"Wed, 23 Jan 2013 14:09:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Circle","id":"circle","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 11:50:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"District","id":"district","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 11:29:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"DLR","id":"docklands","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 08:33:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"H'smith & City","id":"hammersmithcity","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 01:35:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Jubilee","id":"jubilee","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 09:39:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Metropolitan","id":"metropolitan","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 12:39:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Northern","id":"northern","status":"good service","messages":[],"status_starts":"Wed, 23 Jan 2013 10:18:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Overground","id":"overground","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 15:02:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Piccadilly","id":"piccadilly","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 07:02:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Victoria","id":"victoria","status":"minor delays","messages":["Minor delays while we fix a signal failure at Highbury & Islington."],"status_starts":"Wed, 23 Jan 2013 16:24:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Waterloo & City","id":"waterloocity","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 19:58:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"}]}} diff --git a/javascripts/test_data/test_data.js b/javascripts/test_data/test_data.js new file mode 100644 index 0000000..cb2d456 --- /dev/null +++ b/javascripts/test_data/test_data.js @@ -0,0 +1,10 @@ +define(['json!test_data/now.json', + 'json!test_data/tomorrow.json', + 'json!test_data/weekend.json'], +function(now, tomorrow, weekend) { + + return { + now: now, tomorrow: tomorrow, weekend: weekend + } + +}); diff --git a/javascripts/test_data/tomorrow.json b/javascripts/test_data/tomorrow.json new file mode 100644 index 0000000..9a992ac --- /dev/null +++ b/javascripts/test_data/tomorrow.json @@ -0,0 +1 @@ +{"response":{"lines":[{"name":"Bakerloo","id":"bakerloo","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 13:43:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Central","id":"central","status":"minor delays","messages":["Minor delays between Leytonstone and Epping while we fix a signal failure at Loughton."],"status_starts":"Wed, 23 Jan 2013 17:37:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Circle","id":"circle","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 11:50:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"District","id":"district","status":"minor delays","messages":["Minor delays following a person ill on a train at Mile End."],"status_starts":"Wed, 23 Jan 2013 17:49:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"DLR","id":"docklands","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 08:33:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"H'smith & City","id":"hammersmithcity","status":"minor delays","messages":["Minor delays following a person ill on a train at Mile End."],"status_starts":"Wed, 23 Jan 2013 17:49:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Jubilee","id":"jubilee","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 09:39:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Metropolitan","id":"metropolitan","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 12:39:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Northern","id":"northern","status":"good service","messages":[],"status_starts":"Wed, 23 Jan 2013 10:18:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Overground","id":"overground","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 15:02:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Piccadilly","id":"piccadilly","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 07:02:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Victoria","id":"victoria","status":"severe delays","messages":["Severe delays due to an earlier signal failure at Highbury & Islington. Tickets will be accepted on First Capital Connect (Great Northern), Greater Anglia, Southeastern trains and London buses."],"status_starts":"Wed, 23 Jan 2013 17:19:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"},{"name":"Waterloo & City","id":"waterloocity","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 19:58:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 17:49:06 +0000"}]}} diff --git a/javascripts/test_data/weekend.json b/javascripts/test_data/weekend.json new file mode 100644 index 0000000..18ea531 --- /dev/null +++ b/javascripts/test_data/weekend.json @@ -0,0 +1,150 @@ +{ + "response":{ + "lines":[ + { + "name":"Bakerloo", + "id":"bakerloo", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 13:43:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Central", + "id":"central", + "status":"good service", + "messages":[ + + ], + "status_starts":"Wed, 23 Jan 2013 14:09:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Circle", + "id":"circle", + "status":"special service", + "messages":[ + + ], + "status_starts":"Tue, 22 Jan 2013 11:50:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"District", + "id":"district", + "status":"major delays", + "messages":[ + "MONUMENT AND BANK STATIONS: Please avoid using Monument Station to interchange with services from Bank.", + "DISTRICT LINE: Sunday 1 March, suspended between Ealing Broadway and Hammersmith." + ], + "status_starts":"Tue, 22 Jan 2013 11:29:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"DLR", + "id":"docklands", + "status":"good service", + "messages":[ + + ], + "status_starts":"Tue, 22 Jan 2013 08:33:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"H'smith & City", + "id":"hammersmithcity", + "status":"good service", + "messages":[ + + ], + "status_starts":"Tue, 22 Jan 2013 01:35:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Jubilee", + "id":"jubilee", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 09:39:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Metropolitan", + "id":"metropolitan", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 12:39:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Northern", + "id":"northern", + "status":"part closure", + "messages":[ + + ], + "status_starts":"Wed, 23 Jan 2013 10:18:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Overground", + "id":"overground", + "status":"good service", + "messages":[ + + ], + "status_starts":"Tue, 22 Jan 2013 15:02:02 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Piccadilly", + "id":"piccadilly", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 07:02:02 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Victoria", + "id":"victoria", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 19:31:02 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Waterloo & City", + "id":"waterloocity", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 19:58:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + } + ] + } +} diff --git a/javascripts/views/line_list.js b/javascripts/views/line_list.js index 1cee4b5..162d109 100644 --- a/javascripts/views/line_list.js +++ b/javascripts/views/line_list.js @@ -25,7 +25,7 @@ function(Backbone, html += Mustache.render(lineTemplate, model.toJSON()); }); // render the HTML and refresh jQuery Mobile. - this.$el.html(html).listview("refresh"); + this.$el.html(html); }, el: '#line-list' diff --git a/javascripts/views/main.js b/javascripts/views/main.js new file mode 100644 index 0000000..b4c4f41 --- /dev/null +++ b/javascripts/views/main.js @@ -0,0 +1,38 @@ +define(['backbone'], +function(Backbone) { + + var MainView = Backbone.View.extend({ + + el: 'body', + + events: { + "click #refresh": "refresh", + "click footer a": "changeView" + }, + + initialize: function() { + this.collection.on("request", function() { + // $.mobile.loading('show'); + }).on("reset", function() { + // $.mobile.loading('hide'); + }); + }, + + refresh: function(e) { + e.preventDefault(); + this.collection.fetch(); + }, + + changeView: function(e) { + e.preventDefault(); + this.collection.url = this.collection.urls[e.currentTarget.id]; + $('footer a').removeClass("selected"); + $(e.currentTarget).addClass("selected"); + this.collection.fetch(); + } + + }); + + return MainView; + +}); diff --git a/stylesheets/bourbon/_bourbon-deprecated-upcoming.scss b/stylesheets/bourbon/_bourbon-deprecated-upcoming.scss new file mode 100644 index 0000000..4e42552 --- /dev/null +++ b/stylesheets/bourbon/_bourbon-deprecated-upcoming.scss @@ -0,0 +1,3 @@ +//************************************************************************// +// These mixins/functions will be deprecated in the next MAJOR version release +//************************************************************************// diff --git a/stylesheets/bourbon/_bourbon.scss b/stylesheets/bourbon/_bourbon.scss new file mode 100644 index 0000000..9941356 --- /dev/null +++ b/stylesheets/bourbon/_bourbon.scss @@ -0,0 +1,47 @@ +// Custom Functions +@import "functions/compact"; +@import "functions/deprecated-webkit-gradient"; +@import "functions/flex-grid"; +@import "functions/grid-width"; +@import "functions/linear-gradient"; +@import "functions/modular-scale"; +@import "functions/radial-gradient"; +@import "functions/render-gradients"; +@import "functions/tint-shade"; +@import "functions/transition-property-name"; + +// CSS3 Mixins +@import "css3/animation"; +@import "css3/appearance"; +@import "css3/background"; +@import "css3/background-image"; +@import "css3/background-size"; +@import "css3/border-image"; +@import "css3/border-radius"; +@import "css3/box-shadow"; +@import "css3/box-sizing"; +@import "css3/columns"; +@import "css3/flex-box"; +@import "css3/font-face"; +@import "css3/hidpi-media-query"; +@import "css3/image-rendering"; +@import "css3/inline-block"; +@import "css3/linear-gradient"; +@import "css3/perspective"; +@import "css3/radial-gradient"; +@import "css3/transform"; +@import "css3/transition"; +@import "css3/user-select"; + +// Addons & other mixins +@import "addons/button"; +@import "addons/clearfix"; +@import "addons/font-family"; +@import "addons/hide-text"; +@import "addons/html5-input-types"; +@import "addons/position"; +@import "addons/prefixer"; +@import "addons/timing-functions"; + +// Soon to be deprecated Mixins +@import "bourbon-deprecated-upcoming"; diff --git a/stylesheets/bourbon/addons/_button.scss b/stylesheets/bourbon/addons/_button.scss new file mode 100644 index 0000000..17e4986 --- /dev/null +++ b/stylesheets/bourbon/addons/_button.scss @@ -0,0 +1,273 @@ +@mixin button ($style: simple, $base-color: #4294f0) { + + @if type-of($style) == color { + $base-color: $style; + $style: simple; + } + + // Grayscale button + @if $base-color == grayscale($base-color) { + @if $style == simple { + @include simple($base-color, $grayscale: true); + } + + @else if $style == shiny { + @include shiny($base-color, $grayscale: true); + } + + @else if $style == pill { + @include pill($base-color, $grayscale: true); + } + } + + // Colored button + @else { + @if $style == simple { + @include simple($base-color); + } + + @else if $style == shiny { + @include shiny($base-color); + } + + @else if $style == pill { + @include pill($base-color); + } + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } +} + + +// Simple Button +//************************************************************************// +@mixin simple($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); + $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); + $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border; + border-radius: 3px; + @include box-shadow (inset 0 1px 0 0 $inset-shadow); + color: $color; + display: inline-block; + font-size: 11px; + font-weight: bold; + @include linear-gradient ($base-color, $stop-gradient); + padding: 7px 18px; + text-decoration: none; + text-shadow: 0 1px 0 $text-shadow; + -webkit-background-clip: padding-box; + + &:hover:not(:disabled) { + $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); + $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + } + + @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover); + cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + } + + &:active:not(:disabled) { + $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + + @if $grayscale == true { + $border-active: grayscale($border-active); + $inset-shadow-active: grayscale($inset-shadow-active); + } + + border: 1px solid $border-active; + @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee); + } +} + + +// Shiny Button +//************************************************************************// +@mixin shiny($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); + $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); + $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); + $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); + $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); + $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); + $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $border-bottom: grayscale($border-bottom); + $fourth-stop: grayscale($fourth-stop); + $inset-shadow: grayscale($inset-shadow); + $second-stop: grayscale($second-stop); + $text-shadow: grayscale($text-shadow); + $third-stop: grayscale($third-stop); + } + + border: 1px solid $border; + border-bottom: 1px solid $border-bottom; + border-radius: 5px; + @include box-shadow(inset 0 1px 0 0 $inset-shadow); + color: $color; + display: inline-block; + font-size: 14px; + font-weight: bold; + @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); + padding: 8px 20px; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + + &:hover:not(:disabled) { + $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); + $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); + $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); + $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); + + @if $grayscale == true { + $first-stop-hover: grayscale($first-stop-hover); + $second-stop-hover: grayscale($second-stop-hover); + $third-stop-hover: grayscale($third-stop-hover); + $fourth-stop-hover: grayscale($fourth-stop-hover); + } + + cursor: pointer; + @include linear-gradient(top, $first-stop-hover 0%, + $second-stop-hover 50%, + $third-stop-hover 50%, + $fourth-stop-hover 100%); + } + + &:active:not(:disabled) { + $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + + @if $grayscale == true { + $inset-shadow-active: grayscale($inset-shadow-active); + } + + @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff); + } +} + + +// Pill Button +//************************************************************************// +@mixin pill($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); + $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); + $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); + $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + border-radius: 16px; + @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3); + color: $color; + display: inline-block; + font-size: 11px; + font-weight: normal; + line-height: 1; + @include linear-gradient ($base-color, $stop-gradient); + padding: 5px 16px; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + -webkit-background-clip: padding-box; + + &:hover:not(:disabled) { + $base-color-hover: adjust-color($base-color, $lightness: -4.5%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); + $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); + $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + $text-shadow-hover: grayscale($text-shadow-hover); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover); + cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + text-shadow: 0 -1px 1px $text-shadow-hover; + -webkit-background-clip: padding-box; + } + + &:active:not(:disabled) { + $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); + $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); + $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); + $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); + $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + + @if $grayscale == true { + $active-color: grayscale($active-color); + $border-active: grayscale($border-active); + $border-bottom-active: grayscale($border-bottom-active); + $inset-shadow-active: grayscale($inset-shadow-active); + $text-shadow-active: grayscale($text-shadow-active); + } + + background: $active-color; + border: 1px solid $border-active; + border-bottom: 1px solid $border-bottom-active; + @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff); + text-shadow: 0 -1px 1px $text-shadow-active; + } +} diff --git a/stylesheets/bourbon/addons/_clearfix.scss b/stylesheets/bourbon/addons/_clearfix.scss new file mode 100644 index 0000000..ca9903c --- /dev/null +++ b/stylesheets/bourbon/addons/_clearfix.scss @@ -0,0 +1,29 @@ +// Micro clearfix provides an easy way to contain floats without adding additional markup +// +// Example usage: +// +// // Contain all floats within .wrapper +// .wrapper { +// @include clearfix; +// .content, +// .sidebar { +// float : left; +// } +// } + +@mixin clearfix { + *zoom: 1; + + &:before, + &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } +} + +// Acknowledgements +// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/) diff --git a/stylesheets/bourbon/addons/_font-family.scss b/stylesheets/bourbon/addons/_font-family.scss new file mode 100644 index 0000000..df8a80d --- /dev/null +++ b/stylesheets/bourbon/addons/_font-family.scss @@ -0,0 +1,5 @@ +$georgia: Georgia, Cambria, "Times New Roman", Times, serif; +$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; +$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; +$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; +$verdana: Verdana, Geneva, sans-serif; diff --git a/stylesheets/bourbon/addons/_hide-text.scss b/stylesheets/bourbon/addons/_hide-text.scss new file mode 100644 index 0000000..e379c19 --- /dev/null +++ b/stylesheets/bourbon/addons/_hide-text.scss @@ -0,0 +1,15 @@ +@mixin hide-text { + background-color: transparent; + border: 0; + color: transparent; + font: 0/0 a; + text-shadow: none; +} + +// A CSS image replacement method that does not require the use of text-indent. +// +// Examples +// +// .ir { +// @include hide-text; +// } diff --git a/stylesheets/bourbon/addons/_html5-input-types.scss b/stylesheets/bourbon/addons/_html5-input-types.scss new file mode 100644 index 0000000..b184382 --- /dev/null +++ b/stylesheets/bourbon/addons/_html5-input-types.scss @@ -0,0 +1,56 @@ +//************************************************************************// +// Generate a variable ($all-text-inputs) with a list of all html5 +// input types that have a text-based input, excluding textarea. +// http://diveintohtml5.org/forms.html +//************************************************************************// +$inputs-list: 'input[type="email"]', + 'input[type="number"]', + 'input[type="password"]', + 'input[type="search"]', + 'input[type="tel"]', + 'input[type="text"]', + 'input[type="url"]', + + // Webkit & Gecko may change the display of these in the future + 'input[type="color"]', + 'input[type="date"]', + 'input[type="datetime"]', + 'input[type="datetime-local"]', + 'input[type="month"]', + 'input[type="time"]', + 'input[type="week"]'; + +$unquoted-inputs-list: (); +@each $input-type in $inputs-list { + $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma); +} + +$all-text-inputs: $unquoted-inputs-list; + + +// Hover Pseudo-class +//************************************************************************// +$all-text-inputs-hover: (); +@each $input-type in $unquoted-inputs-list { + $input-type-hover: $input-type + ":hover"; + $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma); +} + +// Focus Pseudo-class +//************************************************************************// +$all-text-inputs-focus: (); +@each $input-type in $unquoted-inputs-list { + $input-type-focus: $input-type + ":focus"; + $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma); +} + +// You must use interpolation on the variable: +// #{$all-text-inputs} +// #{$all-text-inputs-hover} +// #{$all-text-inputs-focus} + +// Example +//************************************************************************// +// #{$all-text-inputs}, textarea { +// border: 1px solid red; +// } diff --git a/stylesheets/bourbon/addons/_position.scss b/stylesheets/bourbon/addons/_position.scss new file mode 100644 index 0000000..faad1ca --- /dev/null +++ b/stylesheets/bourbon/addons/_position.scss @@ -0,0 +1,42 @@ +@mixin position ($position: relative, $coordinates: 0 0 0 0) { + + @if type-of($position) == list { + $coordinates: $position; + $position: relative; + } + + $top: nth($coordinates, 1); + $right: nth($coordinates, 2); + $bottom: nth($coordinates, 3); + $left: nth($coordinates, 4); + + position: $position; + + @if $top == auto { + top: $top; + } + @else if not(unitless($top)) { + top: $top; + } + + @if $right == auto { + right: $right; + } + @else if not(unitless($right)) { + right: $right; + } + + @if $bottom == auto { + bottom: $bottom; + } + @else if not(unitless($bottom)) { + bottom: $bottom; + } + + @if $left == auto { + left: $left; + } + @else if not(unitless($left)) { + left: $left; + } +} diff --git a/stylesheets/bourbon/addons/_prefixer.scss b/stylesheets/bourbon/addons/_prefixer.scss new file mode 100644 index 0000000..60c4225 --- /dev/null +++ b/stylesheets/bourbon/addons/_prefixer.scss @@ -0,0 +1,27 @@ +//************************************************************************// +// Example: @include prefixer(border-radius, $radii, webkit ms spec); +//************************************************************************// +@mixin prefixer ($property, $value, $prefixes) { + + @each $prefix in $prefixes { + + @if $prefix == webkit { + -webkit-#{$property}: $value; + } + @else if $prefix == moz { + -moz-#{$property}: $value; + } + @else if $prefix == ms { + -ms-#{$property}: $value; + } + @else if $prefix == o { + -o-#{$property}: $value; + } + @else if $prefix == spec { + #{$property}: $value; + } + @else { + @warn "Unrecognized prefix: #{$prefix}"; + } + } +} diff --git a/stylesheets/bourbon/addons/_timing-functions.scss b/stylesheets/bourbon/addons/_timing-functions.scss new file mode 100644 index 0000000..51b2410 --- /dev/null +++ b/stylesheets/bourbon/addons/_timing-functions.scss @@ -0,0 +1,32 @@ +// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) +// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html + +// EASE IN +$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); +$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); +$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); +$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); +$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); +$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); +$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); +$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); + +// EASE OUT +$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); +$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); +$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); +$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); +$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); +$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); +$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); +$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); + +// EASE IN OUT +$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); +$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); +$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); +$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); +$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); +$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); +$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); +$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); diff --git a/stylesheets/bourbon/css3/_animation.scss b/stylesheets/bourbon/css3/_animation.scss new file mode 100644 index 0000000..08c3dbf --- /dev/null +++ b/stylesheets/bourbon/css3/_animation.scss @@ -0,0 +1,52 @@ +// http://www.w3.org/TR/css3-animations/#the-animation-name-property- +// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. + +// Official animation shorthand property. +@mixin animation ($animations...) { + @include prefixer(animation, $animations, webkit moz spec); +} + +// Individual Animation Properties +@mixin animation-name ($names...) { + @include prefixer(animation-name, $names, webkit moz spec); +} + + +@mixin animation-duration ($times...) { + @include prefixer(animation-duration, $times, webkit moz spec); +} + + +@mixin animation-timing-function ($motions...) { +// ease | linear | ease-in | ease-out | ease-in-out + @include prefixer(animation-timing-function, $motions, webkit moz spec); +} + + +@mixin animation-iteration-count ($values...) { +// infinite | + @include prefixer(animation-iteration-count, $values, webkit moz spec); +} + + +@mixin animation-direction ($directions...) { +// normal | alternate + @include prefixer(animation-direction, $directions, webkit moz spec); +} + + +@mixin animation-play-state ($states...) { +// running | paused + @include prefixer(animation-play-state, $states, webkit moz spec); +} + + +@mixin animation-delay ($times...) { + @include prefixer(animation-delay, $times, webkit moz spec); +} + + +@mixin animation-fill-mode ($modes...) { +// none | forwards | backwards | both + @include prefixer(animation-fill-mode, $modes, webkit moz spec); +} diff --git a/stylesheets/bourbon/css3/_appearance.scss b/stylesheets/bourbon/css3/_appearance.scss new file mode 100644 index 0000000..3eb16e4 --- /dev/null +++ b/stylesheets/bourbon/css3/_appearance.scss @@ -0,0 +1,3 @@ +@mixin appearance ($value) { + @include prefixer(appearance, $value, webkit moz ms o spec); +} diff --git a/stylesheets/bourbon/css3/_background-image.scss b/stylesheets/bourbon/css3/_background-image.scss new file mode 100644 index 0000000..5f199d6 --- /dev/null +++ b/stylesheets/bourbon/css3/_background-image.scss @@ -0,0 +1,44 @@ +//************************************************************************// +// Background-image property for adding multiple background images with +// gradients, or for stringing multiple gradients together. +//************************************************************************// + +@mixin background-image($images...) { + background-image: add-prefix($images, webkit); + background-image: add-prefix($images, moz); + background-image: add-prefix($images, ms); + background-image: add-prefix($images, o); + background-image: add-prefix($images); +} + + +@function add-prefix($images, $vendor: false) { + $images-prefixed: (); + + @for $i from 1 through length($images) { + $type: type-of(nth($images, $i)); // Get type of variable - List or String + + // If variable is a list - Gradient + @if $type == list { + $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial) + $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) + + $gradient: render-gradients($gradient-args, $gradient-type, $vendor); + $images-prefixed: append($images-prefixed, $gradient, comma); + } + + // If variable is a string - Image + @else if $type == string { + $images-prefixed: join($images-prefixed, nth($images, $i), comma); + } + } + @return $images-prefixed; +} + + +//Examples: + //@include background-image(linear-gradient(top, orange, red)); + //@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); + //@include background-image(url("/images/a.png"), linear-gradient(orange, red)); + //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png")); + //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red)); diff --git a/stylesheets/bourbon/css3/_background-size.scss b/stylesheets/bourbon/css3/_background-size.scss new file mode 100644 index 0000000..f883409 --- /dev/null +++ b/stylesheets/bourbon/css3/_background-size.scss @@ -0,0 +1,3 @@ +@mixin background-size ($lengths...) { + @include prefixer(background-size, $lengths, webkit moz ms o spec); +} diff --git a/stylesheets/bourbon/css3/_background.scss b/stylesheets/bourbon/css3/_background.scss new file mode 100644 index 0000000..70d0d7e --- /dev/null +++ b/stylesheets/bourbon/css3/_background.scss @@ -0,0 +1,107 @@ +//************************************************************************// +// Background property for adding multiple backgrounds using shorthand +// notation. +//************************************************************************// + +@mixin background( + $background-1 , $background-2: false, + $background-3: false, $background-4: false, + $background-5: false, $background-6: false, + $background-7: false, $background-8: false, + $background-9: false, $background-10: false, + $fallback: false +) { + $backgrounds: compact($background-1, $background-2, + $background-3, $background-4, + $background-5, $background-6, + $background-7, $background-8, + $background-9, $background-10); + + $fallback-color: false; + @if (type-of($fallback) == color) or ($fallback == "transparent") { + $fallback-color: $fallback; + } + @else { + $fallback-color: extract-background-color($backgrounds); + } + + @if $fallback-color { + background-color: $fallback-color; + } + background: background-add-prefix($backgrounds, webkit); + background: background-add-prefix($backgrounds, moz); + background: background-add-prefix($backgrounds, ms); + background: background-add-prefix($backgrounds, o); + background: background-add-prefix($backgrounds); +} + +@function extract-background-color($backgrounds) { + $final-bg-layer: nth($backgrounds, length($backgrounds)); + @if type-of($final-bg-layer) == list { + @for $i from 1 through length($final-bg-layer) { + $value: nth($final-bg-layer, $i); + @if type-of($value) == color { + @return $value; + } + } + } + @return false; +} + + +@function background-add-prefix($backgrounds, $vendor: false) { + $backgrounds-prefixed: (); + + @for $i from 1 through length($backgrounds) { + $shorthand: nth($backgrounds, $i); // Get member for current index + $type: type-of($shorthand); // Get type of variable - List or String + + // If shorthand is a list + @if $type == list { + $first-member: nth($shorthand, 1); // Get first member of shorthand + + // Linear Gradient + @if index(linear radial, nth($first-member, 1)) { + $gradient-type: nth($first-member, 1); // linear || radial + + // Get actual gradient (red, blue) + $gradient-args: false; + $shorthand-start: false; + // Linear gradient and positioning, repeat, etc. values + @if type-of($first-member) == list { + $gradient-args: nth($first-member, 2); + $shorthand-start: 2; + } + // Linear gradient only + @else { + $gradient-args: nth($shorthand, 2); // Get actual gradient (red, blue) + $shorthand-start: 3; + } + + $gradient: render-gradients($gradient-args, $gradient-type, $vendor); + @for $j from $shorthand-start through length($shorthand) { + $gradient: join($gradient, nth($shorthand, $j), space); + } + $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma); + } + + // Image with additional properties + @else { + $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma); + } + + } + + // If shorthand is a simple string, color or image + @else if $type == string { + $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma); + } + } + @return $backgrounds-prefixed; +} + +//Examples: + //@include background(linear-gradient(top, orange, red)); + //@include background(radial-gradient(50% 50%, cover circle, orange, red)); + //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red)); + //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png")); diff --git a/stylesheets/bourbon/css3/_border-image.scss b/stylesheets/bourbon/css3/_border-image.scss new file mode 100644 index 0000000..da4f20b --- /dev/null +++ b/stylesheets/bourbon/css3/_border-image.scss @@ -0,0 +1,56 @@ +@mixin border-image($images) { + -webkit-border-image: border-add-prefix($images, webkit); + -moz-border-image: border-add-prefix($images, moz); + -o-border-image: border-add-prefix($images, o); + border-image: border-add-prefix($images); +} + +@function border-add-prefix($images, $vendor: false) { + $border-image: (); + $images-type: type-of(nth($images, 1)); + $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial) + + // If input is a gradient + @if $images-type == string { + @if ($first-var == "linear") or ($first-var == "radial") { + @for $i from 2 through length($images) { + $gradient-type: nth($images, 1); // Get type of gradient (linear || radial) + $gradient-args: nth($images, $i); // Get actual gradient (red, blue) + $border-image: render-gradients($gradient-args, $gradient-type, $vendor); + } + } + + // If input is a URL + @else { + $border-image: $images; + } + } + + // If input is gradient or url + additional args + @else if $images-type == list { + @for $i from 1 through length($images) { + $type: type-of(nth($images, $i)); // Get type of variable - List or String + + // If variable is a list - Gradient + @if $type == list { + $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial) + $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) + $border-image: render-gradients($gradient-args, $gradient-type, $vendor); + } + + // If variable is a string - Image or number + @else if ($type == string) or ($type == number) { + $border-image: append($border-image, nth($images, $i)); + } + } + } + @return $border-image; +} + +//Examples: +// @include border-image(url("image.png")); +// @include border-image(url("image.png") 20 stretch); +// @include border-image(linear-gradient(45deg, orange, yellow)); +// @include border-image(linear-gradient(45deg, orange, yellow) stretch); +// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); +// @include border-image(radial-gradient(top, cover, orange, yellow, orange)); diff --git a/stylesheets/bourbon/css3/_border-radius.scss b/stylesheets/bourbon/css3/_border-radius.scss new file mode 100644 index 0000000..7c17190 --- /dev/null +++ b/stylesheets/bourbon/css3/_border-radius.scss @@ -0,0 +1,22 @@ +//************************************************************************// +// Shorthand Border-radius mixins +//************************************************************************// +@mixin border-top-radius($radii) { + @include prefixer(border-top-left-radius, $radii, spec); + @include prefixer(border-top-right-radius, $radii, spec); +} + +@mixin border-bottom-radius($radii) { + @include prefixer(border-bottom-left-radius, $radii, spec); + @include prefixer(border-bottom-right-radius, $radii, spec); +} + +@mixin border-left-radius($radii) { + @include prefixer(border-top-left-radius, $radii, spec); + @include prefixer(border-bottom-left-radius, $radii, spec); +} + +@mixin border-right-radius($radii) { + @include prefixer(border-top-right-radius, $radii, spec); + @include prefixer(border-bottom-right-radius, $radii, spec); +} diff --git a/stylesheets/bourbon/css3/_box-shadow.scss b/stylesheets/bourbon/css3/_box-shadow.scss new file mode 100644 index 0000000..4e3613c --- /dev/null +++ b/stylesheets/bourbon/css3/_box-shadow.scss @@ -0,0 +1,3 @@ +@mixin box-shadow ($shadows...) { + @include prefixer(box-shadow, $shadows, webkit spec); +} diff --git a/stylesheets/bourbon/css3/_box-sizing.scss b/stylesheets/bourbon/css3/_box-sizing.scss new file mode 100644 index 0000000..f07e1d4 --- /dev/null +++ b/stylesheets/bourbon/css3/_box-sizing.scss @@ -0,0 +1,4 @@ +@mixin box-sizing ($box) { +// content-box | border-box | inherit + @include prefixer(box-sizing, $box, webkit moz spec); +} diff --git a/stylesheets/bourbon/css3/_columns.scss b/stylesheets/bourbon/css3/_columns.scss new file mode 100644 index 0000000..42274a4 --- /dev/null +++ b/stylesheets/bourbon/css3/_columns.scss @@ -0,0 +1,47 @@ +@mixin columns($arg: auto) { +// || + @include prefixer(columns, $arg, webkit moz spec); +} + +@mixin column-count($int: auto) { +// auto || integer + @include prefixer(column-count, $int, webkit moz spec); +} + +@mixin column-gap($length: normal) { +// normal || length + @include prefixer(column-gap, $length, webkit moz spec); +} + +@mixin column-fill($arg: auto) { +// auto || length + @include prefixer(columns-fill, $arg, webkit moz spec); +} + +@mixin column-rule($arg) { +// || || + @include prefixer(column-rule, $arg, webkit moz spec); +} + +@mixin column-rule-color($color) { + @include prefixer(column-rule-color, $color, webkit moz spec); +} + +@mixin column-rule-style($style: none) { +// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid + @include prefixer(column-rule-style, $style, webkit moz spec); +} + +@mixin column-rule-width ($width: none) { + @include prefixer(column-rule-width, $width, webkit moz spec); +} + +@mixin column-span($arg: none) { +// none || all + @include prefixer(column-span, $arg, webkit moz spec); +} + +@mixin column-width($length: auto) { +// auto || length + @include prefixer(column-width, $length, webkit moz spec); +} diff --git a/stylesheets/bourbon/css3/_flex-box.scss b/stylesheets/bourbon/css3/_flex-box.scss new file mode 100644 index 0000000..3e741e6 --- /dev/null +++ b/stylesheets/bourbon/css3/_flex-box.scss @@ -0,0 +1,52 @@ +// CSS3 Flexible Box Model and property defaults + +// Custom shorthand notation for flexbox +@mixin box($orient: inline-axis, $pack: start, $align: stretch) { + @include display-box; + @include box-orient($orient); + @include box-pack($pack); + @include box-align($align); +} + +@mixin display-box { + display: -webkit-box; + display: -moz-box; + display: box; +} + +@mixin box-orient($orient: inline-axis) { +// horizontal|vertical|inline-axis|block-axis|inherit + @include prefixer(box-orient, $orient, webkit moz spec); +} + +@mixin box-pack($pack: start) { +// start|end|center|justify + @include prefixer(box-pack, $pack, webkit moz spec); +} + +@mixin box-align($align: stretch) { +// start|end|center|baseline|stretch + @include prefixer(box-align, $align, webkit moz spec); +} + +@mixin box-direction($direction: normal) { +// normal|reverse|inherit + @include prefixer(box-direction, $direction, webkit moz spec); +} + +@mixin box-lines($lines: single) { +// single|multiple + @include prefixer(box-lines, $lines, webkit moz spec); +} + +@mixin box-ordinal-group($int: 1) { + @include prefixer(box-ordinal-group, $int, webkit moz spec); +} + +@mixin box-flex($value: 0.0) { + @include prefixer(box-flex, $value, webkit moz spec); +} + +@mixin box-flex-group($int: 1) { + @include prefixer(box-flex-group, $int, webkit moz spec); +} diff --git a/stylesheets/bourbon/css3/_font-face.scss b/stylesheets/bourbon/css3/_font-face.scss new file mode 100644 index 0000000..15efe2f --- /dev/null +++ b/stylesheets/bourbon/css3/_font-face.scss @@ -0,0 +1,21 @@ +@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) { + @font-face { + font-family: $font-family; + font-weight: $weight; + font-style: $style; + + @if $asset-pipeline == true { + src: font-url('#{$file-path}.eot'); + src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), + font-url('#{$file-path}.woff') format('woff'), + font-url('#{$file-path}.ttf') format('truetype'), + font-url('#{$file-path}.svg##{$font-family}') format('svg'); + } @else { + src: url('#{$file-path}.eot'); + src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), + url('#{$file-path}.woff') format('woff'), + url('#{$file-path}.ttf') format('truetype'), + url('#{$file-path}.svg##{$font-family}') format('svg'); + } + } +} diff --git a/stylesheets/bourbon/css3/_hidpi-media-query.scss b/stylesheets/bourbon/css3/_hidpi-media-query.scss new file mode 100644 index 0000000..111e400 --- /dev/null +++ b/stylesheets/bourbon/css3/_hidpi-media-query.scss @@ -0,0 +1,10 @@ +// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) +@mixin hidpi($ratio: 1.3) { + @media only screen and (-webkit-min-device-pixel-ratio: $ratio), + only screen and (min--moz-device-pixel-ratio: $ratio), + only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), + only screen and (min-resolution: #{round($ratio*96)}dpi), + only screen and (min-resolution: #{$ratio}dppx) { + @content; + } +} diff --git a/stylesheets/bourbon/css3/_image-rendering.scss b/stylesheets/bourbon/css3/_image-rendering.scss new file mode 100644 index 0000000..abc7ee1 --- /dev/null +++ b/stylesheets/bourbon/css3/_image-rendering.scss @@ -0,0 +1,13 @@ +@mixin image-rendering ($mode:optimizeQuality) { + + @if ($mode == optimize-contrast) { + image-rendering: -moz-crisp-edges; + image-rendering: -o-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: optimize-contrast; + } + + @else { + image-rendering: $mode; + } +} diff --git a/stylesheets/bourbon/css3/_inline-block.scss b/stylesheets/bourbon/css3/_inline-block.scss new file mode 100644 index 0000000..3272a00 --- /dev/null +++ b/stylesheets/bourbon/css3/_inline-block.scss @@ -0,0 +1,8 @@ +// Legacy support for inline-block in IE7 (maybe IE6) +@mixin inline-block { + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; +} diff --git a/stylesheets/bourbon/css3/_linear-gradient.scss b/stylesheets/bourbon/css3/_linear-gradient.scss new file mode 100644 index 0000000..4d880d7 --- /dev/null +++ b/stylesheets/bourbon/css3/_linear-gradient.scss @@ -0,0 +1,43 @@ +@mixin linear-gradient($pos, $G1, $G2: false, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false, + $deprecated-pos1: left top, + $deprecated-pos2: left bottom, + $fallback: false) { + // Detect what type of value exists in $pos + $pos-type: type-of(nth($pos, 1)); + + // If $pos is missing from mixin, reassign vars and add default position + @if ($pos-type == color) or (nth($pos, 1) == "transparent") { + $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; + $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; + $pos: top; // Default position + } + + $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + + // Set $G1 as the default fallback color + $fallback-color: nth($G1, 1); + + // If $fallback is a color use that color as the fallback color + @if (type-of($fallback) == color) or ($fallback == "transparent") { + $fallback-color: $fallback; + } + + background-color: $fallback-color; + background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0 + background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome + background-image: -moz-linear-gradient($pos, $full); + background-image: -ms-linear-gradient($pos, $full); + background-image: -o-linear-gradient($pos, $full); + background-image: unquote("linear-gradient(#{$pos}, #{$full})"); +} + + +// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well. +// @include linear-gradient(#1e5799, #2989d8); +// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8); +// @include linear-gradient(top, #1e5799 0%, #2989d8 50%); +// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); diff --git a/stylesheets/bourbon/css3/_perspective.scss b/stylesheets/bourbon/css3/_perspective.scss new file mode 100644 index 0000000..1d0cc00 --- /dev/null +++ b/stylesheets/bourbon/css3/_perspective.scss @@ -0,0 +1,8 @@ +@mixin perspective($depth: none) { + // none | + @include prefixer(perspective, $depth, webkit moz o spec); +} + +@mixin perspective-origin($value: 50% 50%) { + @include prefixer(perspective-origin, $value, webkit moz o spec); +} diff --git a/stylesheets/bourbon/css3/_radial-gradient.scss b/stylesheets/bourbon/css3/_radial-gradient.scss new file mode 100644 index 0000000..19279b0 --- /dev/null +++ b/stylesheets/bourbon/css3/_radial-gradient.scss @@ -0,0 +1,78 @@ +// Requires Sass 3.1+ +@mixin radial-gradient($G1, $G2, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false, + $pos: 50% 50%, + $shape-size: ellipse cover, + $deprecated-pos1: center center, + $deprecated-pos2: center center, + $deprecated-radius1: 0, + $deprecated-radius2: 460, + $fallback: false) { + + @each $value in $G1, $G2 { + $first-val: nth($value, 1); + $pos-type: type-of($first-val); + + @if ($pos-type != color) or ($first-val != "transparent") { + @if ($pos-type == number) + or ($first-val == "center") + or ($first-val == "top") + or ($first-val == "right") + or ($first-val == "bottom") + or ($first-val == "left") { + + $pos: $value; + + @if $pos == $G1 { + $G1: false; + } + } + + @else if + ($first-val == "ellipse") + or ($first-val == "circle") + or ($first-val == "closest-side") + or ($first-val == "closest-corner") + or ($first-val == "farthest-side") + or ($first-val == "farthest-corner") + or ($first-val == "contain") + or ($first-val == "cover") { + + $shape-size: $value; + + @if $value == $G1 { + $G1: false; + } + + @else if $value == $G2 { + $G2: false; + } + } + } + } + + $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + + // Set $G1 as the default fallback color + $first-color: nth($full, 1); + $fallback-color: nth($first-color, 1); + + @if (type-of($fallback) == color) or ($fallback == "transparent") { + $fallback-color: $fallback; + } + + background-color: $fallback-color; + background-image: deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 + background-image: -webkit-radial-gradient($pos, $shape-size, $full); + background-image: -moz-radial-gradient($pos, $shape-size, $full); + background-image: -ms-radial-gradient($pos, $shape-size, $full); + background-image: -o-radial-gradient($pos, $shape-size, $full); + background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})"); +} + +// Usage: Gradient position and shape-size are required. Color stops are optional. +// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef); +// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef); diff --git a/stylesheets/bourbon/css3/_transform.scss b/stylesheets/bourbon/css3/_transform.scss new file mode 100644 index 0000000..a7fe08d --- /dev/null +++ b/stylesheets/bourbon/css3/_transform.scss @@ -0,0 +1,11 @@ +@mixin transform($property: none) { +// none | + @include prefixer(transform, $property, webkit moz ms o spec); +} + +@mixin transform-origin($axes: 50%) { +// x-axis - left | center | right | length | % +// y-axis - top | center | bottom | length | % +// z-axis - length + @include prefixer(transform-origin, $axes, webkit moz ms o spec); +} diff --git a/stylesheets/bourbon/css3/_transition.scss b/stylesheets/bourbon/css3/_transition.scss new file mode 100644 index 0000000..f89fc4a --- /dev/null +++ b/stylesheets/bourbon/css3/_transition.scss @@ -0,0 +1,36 @@ +// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. +// Example: @include transition (all, 2.0s, ease-in-out); +// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); +// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); + +@mixin transition ($properties...) { + @if length($properties) >= 1 { + @include prefixer(transition, $properties, webkit moz ms o spec); + } + + @else { + $properties: all 0.15s ease-out 0; + @include prefixer(transition, $properties, webkit moz ms o spec); + } +} + +@mixin transition-property ($properties...) { + -webkit-transition-property: transition-property-names($properties, 'webkit'); + -moz-transition-property: transition-property-names($properties, 'moz'); + -ms-transition-property: transition-property-names($properties, 'ms'); + -o-transition-property: transition-property-names($properties, 'o'); + transition-property: transition-property-names($properties, false); +} + +@mixin transition-duration ($times...) { + @include prefixer(transition-duration, $times, webkit moz ms o spec); +} + +@mixin transition-timing-function ($motions...) { +// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() + @include prefixer(transition-timing-function, $motions, webkit moz ms o spec); +} + +@mixin transition-delay ($times...) { + @include prefixer(transition-delay, $times, webkit moz ms o spec); +} diff --git a/stylesheets/bourbon/css3/_user-select.scss b/stylesheets/bourbon/css3/_user-select.scss new file mode 100644 index 0000000..1380aa8 --- /dev/null +++ b/stylesheets/bourbon/css3/_user-select.scss @@ -0,0 +1,3 @@ +@mixin user-select($arg: none) { + @include prefixer(user-select, $arg, webkit moz ms spec); +} diff --git a/stylesheets/bourbon/functions/_compact.scss b/stylesheets/bourbon/functions/_compact.scss new file mode 100644 index 0000000..871500e --- /dev/null +++ b/stylesheets/bourbon/functions/_compact.scss @@ -0,0 +1,11 @@ +// Remove `false` values from a list + +@function compact($vars...) { + $list: (); + @each $var in $vars { + @if $var { + $list: append($list, $var, comma); + } + } + @return $list; +} diff --git a/stylesheets/bourbon/functions/_deprecated-webkit-gradient.scss b/stylesheets/bourbon/functions/_deprecated-webkit-gradient.scss new file mode 100644 index 0000000..9126929 --- /dev/null +++ b/stylesheets/bourbon/functions/_deprecated-webkit-gradient.scss @@ -0,0 +1,44 @@ +// Render Deprecated Webkit Gradient - Linear || Radial +//************************************************************************// +@function deprecated-webkit-gradient($type, + $deprecated-pos1, $deprecated-pos2, + $full, + $deprecated-radius1: false, $deprecated-radius2: false) { + $gradient-list: (); + $gradient: false; + $full-length: length($full); + $percentage: false; + $gradient-type: $type; + + @for $i from 1 through $full-length { + $gradient: nth($full, $i); + + @if length($gradient) == 2 { + $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); + $gradient-list: join($gradient-list, $color-stop, comma); + } + + @else if $gradient != null { + @if $i == $full-length { + $percentage: 100%; + } + + @else { + $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%"; + } + + $color-stop: color-stop(unquote($percentage), $gradient); + $gradient-list: join($gradient-list, $color-stop, comma); + } + } + + @if $type == radial { + $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list); + } + + @else if $type == linear { + $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list); + } + + @return $gradient; +} diff --git a/stylesheets/bourbon/functions/_flex-grid.scss b/stylesheets/bourbon/functions/_flex-grid.scss new file mode 100644 index 0000000..707f994 --- /dev/null +++ b/stylesheets/bourbon/functions/_flex-grid.scss @@ -0,0 +1,35 @@ +// Flexible grid +@function flex-grid($columns, $container-columns: $fg-max-columns) { + $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($width / $container-width); +} + +// Flexible gutter +@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($gutter / $container-width); +} + +// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. +// This function takes the fluid grid equation (target / context = result) and uses columns to help define each. +// +// $fg-column: 60px; // Column Width +// $fg-gutter: 25px; // Gutter Width +// $fg-max-columns: 12; // Total Columns For Main Container +// +// div { +// width: flex-grid(4); // returns (315px / 1020px) = 30.882353%; +// margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%; +// +// p { +// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; +// float: left; +// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; +// } +// +// blockquote { +// float: left; +// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; +// } +// } diff --git a/stylesheets/bourbon/functions/_grid-width.scss b/stylesheets/bourbon/functions/_grid-width.scss new file mode 100644 index 0000000..8e63d83 --- /dev/null +++ b/stylesheets/bourbon/functions/_grid-width.scss @@ -0,0 +1,13 @@ +@function grid-width($n) { + @return $n * $gw-column + ($n - 1) * $gw-gutter; +} + +// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. +// +// $gw-column: 100px; // Column Width +// $gw-gutter: 40px; // Gutter Width +// +// div { +// width: grid-width(4); // returns 520px; +// margin-left: $gw-gutter; // returns 40px; +// } diff --git a/stylesheets/bourbon/functions/_linear-gradient.scss b/stylesheets/bourbon/functions/_linear-gradient.scss new file mode 100644 index 0000000..5030d6e --- /dev/null +++ b/stylesheets/bourbon/functions/_linear-gradient.scss @@ -0,0 +1,6 @@ +@function linear-gradient($gradients...) { + $type: linear; + $type-gradient: append($type, $gradients, comma); + + @return $type-gradient; +} diff --git a/stylesheets/bourbon/functions/_modular-scale.scss b/stylesheets/bourbon/functions/_modular-scale.scss new file mode 100644 index 0000000..dddccb5 --- /dev/null +++ b/stylesheets/bourbon/functions/_modular-scale.scss @@ -0,0 +1,40 @@ +@function modular-scale($value, $increment, $ratio) { + @if $increment > 0 { + @for $i from 1 through $increment { + $value: ($value * $ratio); + } + } + + @if $increment < 0 { + $increment: abs($increment); + @for $i from 1 through $increment { + $value: ($value / $ratio); + } + } + + @return $value; +} + +// div { +// Increment Up GR with positive value +// font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px +// +// Increment Down GR with negative value +// font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px +// +// Can be used with ceil(round up) or floor(round down) +// font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px +// font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px +// } +// +// modularscale.com + +@function golden-ratio($value, $increment) { + @return modular-scale($value, $increment, 1.618) +} + +// div { +// font-size: golden-ratio(14px, 1); // returns: 22.652px +// } +// +// goldenratiocalculator.com diff --git a/stylesheets/bourbon/functions/_radial-gradient.scss b/stylesheets/bourbon/functions/_radial-gradient.scss new file mode 100644 index 0000000..13b8e7a --- /dev/null +++ b/stylesheets/bourbon/functions/_radial-gradient.scss @@ -0,0 +1,57 @@ +// This function is required and used by the background-image mixin. +@function radial-gradient($G1, $G2, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false, + $pos: 50% 50%, + $shape-size: ellipse cover) { + + @each $value in $G1, $G2 { + $first-val: nth($value, 1); + $pos-type: type-of($first-val); + + @if ($pos-type != color) or ($first-val != "transparent") { + @if ($pos-type == number) + or ($first-val == "center") + or ($first-val == "top") + or ($first-val == "right") + or ($first-val == "bottom") + or ($first-val == "left") { + + $pos: $value; + + @if $pos == $G1 { + $G1: false; + } + } + + @else if + ($first-val == "ellipse") + or ($first-val == "circle") + or ($first-val == "closest-side") + or ($first-val == "closest-corner") + or ($first-val == "farthest-side") + or ($first-val == "farthest-corner") + or ($first-val == "contain") + or ($first-val == "cover") { + + $shape-size: $value; + + @if $value == $G1 { + $G1: false; + } + + @else if $value == $G2 { + $G2: false; + } + } + } + } + + $type: radial; + $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + $type-gradient: append($type, $gradient, comma); + + @return $type-gradient; +} diff --git a/stylesheets/bourbon/functions/_render-gradients.scss b/stylesheets/bourbon/functions/_render-gradients.scss new file mode 100644 index 0000000..fe7c799 --- /dev/null +++ b/stylesheets/bourbon/functions/_render-gradients.scss @@ -0,0 +1,14 @@ +// User for linear and radial gradients within background-image or border-image properties + +@function render-gradients($gradients, $gradient-type, $vendor: false) { + $vendor-gradients: false; + @if $vendor { + $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients); + } + + @else if $vendor == false { + $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})"; + $vendor-gradients: unquote($vendor-gradients); + } + @return $vendor-gradients; +} diff --git a/stylesheets/bourbon/functions/_tint-shade.scss b/stylesheets/bourbon/functions/_tint-shade.scss new file mode 100644 index 0000000..f717200 --- /dev/null +++ b/stylesheets/bourbon/functions/_tint-shade.scss @@ -0,0 +1,9 @@ +// Add percentage of white to a color +@function tint($color, $percent){ + @return mix(white, $color, $percent); +} + +// Add percentage of black to a color +@function shade($color, $percent){ + @return mix(black, $color, $percent); +} diff --git a/stylesheets/bourbon/functions/_transition-property-name.scss b/stylesheets/bourbon/functions/_transition-property-name.scss new file mode 100644 index 0000000..54cd422 --- /dev/null +++ b/stylesheets/bourbon/functions/_transition-property-name.scss @@ -0,0 +1,22 @@ +// Return vendor-prefixed property names if appropriate +// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background +//************************************************************************// +@function transition-property-names($props, $vendor: false) { + $new-props: (); + + @each $prop in $props { + $new-props: append($new-props, transition-property-name($prop, $vendor), comma); + } + + @return $new-props; +} + +@function transition-property-name($prop, $vendor: false) { + // put other properties that need to be prefixed here aswell + @if $vendor and $prop == transform { + @return unquote('-'+$vendor+'-'+$prop); + } + @else { + @return $prop; + } +} \ No newline at end of file diff --git a/stylesheets/main.css b/stylesheets/main.css index 8336fdf..d709b21 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -1,5 +1,104 @@ -body.loading { - display: none; } +* { + margin: 0; + padding: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } + +a { + text-decoration: none; } + +body { + margin: 0; + font-family: "Helvetica Neue", "Arial", sans-serif; } + +header { + position: fixed; + width: 100%; + background: #0019a8; + background-color: #8f9fff; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8f9fff), color-stop(100%, #001175)); + background-image: -webkit-linear-gradient(top, #8f9fff, #001175); + background-image: -moz-linear-gradient(top, #8f9fff, #001175); + background-image: -ms-linear-gradient(top, #8f9fff, #001175); + background-image: -o-linear-gradient(top, #8f9fff, #001175); + background-image: linear-gradient(top, #8f9fff, #001175); + -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); + color: white; + height: 2.5em; + padding-top: 0.45em; + border-bottom: 1px solid #0f0f64; } + header h1 { + text-align: center; + font-size: 1.3em; + font-weight: normal; + text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); } + header #refresh { + position: absolute; + right: 1em; + top: 0.25em; + border-radius: 0.3em; + border: 1px solid rgba(0, 0, 0, 0.4); + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.6); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.6); + padding: 0.1em 0.5em; + font-weight: bold; + color: white; } + +footer { + position: fixed; + bottom: 0; + width: 100%; + background: #111; + text-align: center; + height: 4em; + padding-top: 0.3em; } + footer li { + display: inline-block; + width: 32%; } + footer li a { + font-size: 0.8em; + height: 4.2em; + padding: 0.4em; + color: white; + display: block; + border-radius: 0.3em; } + footer li a.selected { + background-color: #333333; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #111111)); + background-image: -webkit-linear-gradient(top, #333333, #111111); + background-image: -moz-linear-gradient(top, #333333, #111111); + background-image: -ms-linear-gradient(top, #333333, #111111); + background-image: -o-linear-gradient(top, #333333, #111111); + background-image: linear-gradient(top, #333333, #111111); + border: 1px solid black; + -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3); } + +section[role="main"] { + padding: 2.5em 0 4em; } + +ul#line-list { + list-style: none; + padding: 0; } + ul#line-list li a { + background: #ffffff; + /* Old browsers */ + background-color: white; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f1f1f1)); + background-image: -webkit-linear-gradient(top, white, #f1f1f1); + background-image: -moz-linear-gradient(top, white, #f1f1f1); + background-image: -ms-linear-gradient(top, white, #f1f1f1); + background-image: -o-linear-gradient(top, white, #f1f1f1); + background-image: linear-gradient(top, white, #f1f1f1); + text-shadow: 0 2px 2px white; + border-style: solid; + border-width: 1px 0; + border-color: white white #cccccc; + display: block; + padding: 0.7em 1em; + text-decoration: none; } li .name { text-shadow: none; @@ -8,14 +107,14 @@ li .name { border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 0, 0, 0.1); } - li .status { float: right; text-transform: capitalize; font-size: 0.8em; + font-weight: bold; padding-top: 0.1em; } - li .message-count { + text-shadow: none; width: 1.2em; height: 1.2em; border: 2px solid white; @@ -28,16 +127,12 @@ li .message-count { color: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); border-radius: 1em; } - li .good-service { color: green; } - li .special-service { color: #000099; } - li .part-suspended, li .part-closure, li .minor-delays { color: #CC9900; } - li .major-delays { color: #CC0000; } diff --git a/stylesheets/main.scss b/stylesheets/main.scss index 12a1e9d..6655e99 100644 --- a/stylesheets/main.scss +++ b/stylesheets/main.scss @@ -1,33 +1,124 @@ -body.loading { - display: none; +$header-color: rgb(0, 25, 168); + +@import "bourbon/bourbon"; +* { + margin: 0; + padding: 0; + @include box-sizing(border-box); } -li .name { - text-shadow: none; - padding: 0.2em 0.5em; - font-weight: normal; - border-radius: 3px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(255, 255, 255, 0.6); - border: 1px solid rgba(0, 0, 0, 0.1); +a { + text-decoration: none; } -li .status { float: right; text-transform: capitalize; font-size: 0.8em; padding-top: 0.1em; } -li .message-count { - width: 1.2em; - height: 1.2em; - border: 2px solid white; - text-align: center; - margin-left: 0.5em; - font-weight: normal; - font-size: 0.9em; - float: right; - background: black; +body { + margin: 0; + font-family: "Helvetica Neue", "Arial", sans-serif; +} +header { + position: fixed; + width: 100%; + background: rgb(0, 25, 168); + @include linear-gradient(lighten($header-color, 45%), darken($header-color, 10%)); + @include box-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); color: white; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); - border-radius: 1em; + height: 2.5em; + padding-top: 0.45em; + border-bottom: 1px solid #0f0f64; + h1 { + text-align: center; + font-size: 1.3em; + font-weight: normal; + text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); + } + #refresh { + position: absolute; + right: 1em; + top: 0.25em; + border-radius: 0.3em; + border: 1px solid rgba(0, 0, 0, 0.4); + @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.6)); + padding: 0.1em 0.5em; + font-weight: bold; + color: white; + } +} + +footer { + position: fixed; + bottom: 0; + width: 100%; + background: #111; + text-align: center; + height: 4em; + padding-top: 0.3em; + li { + display: inline-block; + width: 32%; + a { + font-size: 0.8em; + height: 4.2em; + padding: 0.4em; + color: white; + display: block; + border-radius: 0.3em; + &.selected { + @include linear-gradient(#333, #111); + border: 1px solid black; + @include box-shadow(inset 0 0 3px rgba(255, 255, 255, 0.3)); + } + } + } +} + +section[role="main"] { + padding: 2.5em 0 4em; +} +ul#line-list { + list-style: none; + padding: 0; + li a { + background: #ffffff; /* Old browsers */ + @include linear-gradient(white, #f1f1f1); + text-shadow: 0 2px 2px white; + border: { + style: solid; + width: 1px 0; + color: #ffffff white #cccccc; + } + display: block; + padding: 0.7em 1em; + text-decoration: none; + } +} +li { + .name { + text-shadow: none; + padding: 0.2em 0.5em; + font-weight: normal; + border-radius: 3px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(255, 255, 255, 0.6); + border: 1px solid rgba(0, 0, 0, 0.1); + } + .status { float: right; text-transform: capitalize; font-size: 0.8em; font-weight: bold; padding-top: 0.1em; } + .message-count { + text-shadow: none; + width: 1.2em; + height: 1.2em; + border: 2px solid white; + text-align: center; + margin-left: 0.5em; + font-weight: normal; + font-size: 0.9em; + float: right; + background: black; + color: white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + border-radius: 1em; + } + .good-service { color: green; } + .special-service { color: #000099; } + .part-suspended, .part-closure, .minor-delays { color: #CC9900; } + .major-delays { color: #CC0000; } } -li .good-service { color: green; } -li .special-service { color: #000099; } -li .part-suspended, li .part-closure, li .minor-delays { color: #CC9900; } -li .major-delays { color: #CC0000; } $bakerloo: #B36305; $central: #E32017;