mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-03-01 02:03:22 +00:00
Bring the very last bits of js and css from spree_core
This commit is contained in:
Luis Ramos
@@ -0,0 +1,9 @@
|
||||
//= require handlebars
|
||||
Handlebars.registerHelper("t", function(key) {
|
||||
if (Spree.translations[key]) {
|
||||
return Spree.translations[key]
|
||||
} else {
|
||||
console.error("No translation found for " + key + ". Does it exist within spree/admin/shared/_translations.html.erb?")
|
||||
}
|
||||
});
|
||||
|
||||
40
app/assets/javascripts/admin/spree/spree.js.coffee
Normal file
40
app/assets/javascripts/admin/spree/spree.js.coffee
Normal file
@@ -0,0 +1,40 @@
|
||||
#= require jsuri
|
||||
class window.Spree
|
||||
@ready: (callback) ->
|
||||
jQuery(document).ready(callback)
|
||||
|
||||
# Helper function to take a URL and add query parameters to it
|
||||
# Uses the JSUri library from here: https://code.google.com/p/jsuri/
|
||||
# Thanks to Jake Moffat for the suggestion: https://twitter.com/jakeonrails/statuses/321776992221544449
|
||||
@url: (uri, query) ->
|
||||
if uri.path == undefined
|
||||
uri = new Uri(uri)
|
||||
if query
|
||||
$.each query, (key, value) ->
|
||||
uri.addQueryParam(key, value)
|
||||
if Spree.api_key
|
||||
uri.addQueryParam('token', Spree.api_key)
|
||||
return uri
|
||||
|
||||
# Helper method in case people want to call uri rather than url
|
||||
@uri: (uri, query) ->
|
||||
url(uri, query)
|
||||
|
||||
# This function automatically appends the API token
|
||||
# for the user to the end of any URL.
|
||||
# Immediately after, this string is then passed to jQuery.ajax.
|
||||
#
|
||||
# ajax works in two ways in jQuery:
|
||||
#
|
||||
# $.ajax("url", {settings: 'go here'})
|
||||
# or:
|
||||
# $.ajax({url: "url", settings: 'go here'})
|
||||
#
|
||||
# This function will support both of these calls.
|
||||
@ajax: (url_or_settings, settings) ->
|
||||
if (typeof(url_or_settings) == "string")
|
||||
$.ajax(Spree.url(url_or_settings).toString(), settings)
|
||||
else
|
||||
url = url_or_settings['url']
|
||||
delete url_or_settings['url']
|
||||
$.ajax(Spree.url(url).toString(), url_or_settings)
|
||||
@@ -1,4 +1,10 @@
|
||||
<script>
|
||||
if (Spree === undefined) {
|
||||
var Spree = {}
|
||||
}
|
||||
if (Spree.routes == undefined) {
|
||||
Spree.routes = {}
|
||||
}
|
||||
Spree.routes = <%== {
|
||||
:variants_search => spree.admin_search_variants_path(:format => 'json'),
|
||||
:taxons_search => main_app.api_taxons_path(:format => 'json'),
|
||||
|
||||
2
vendor/assets/javascripts/jsuri.js
vendored
Normal file
2
vendor/assets/javascripts/jsuri.js
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/*! jsUri v1.1.1 | https://github.com/derek-watson/jsUri */
|
||||
var Query=function(a){"use strict";var b=function(a){var b=[],c,d,e,f;if(typeof a=="undefined"||a===null||a==="")return b;a.indexOf("?")===0&&(a=a.substring(1)),d=a.toString().split(/[&;]/);for(c=0;c<d.length;c++)e=d[c],f=e.split("="),b.push([f[0],f[1]]);return b},c=b(a),d=function(){var a="",b,d;for(b=0;b<c.length;b++)d=c[b],a.length>0&&(a+="&"),a+=d.join("=");return a.length>0?"?"+a:a},e=function(a){a=decodeURIComponent(a),a=a.replace("+"," ");return a},f=function(a){var b,d;for(d=0;d<c.length;d++){b=c[d];if(e(a)===e(b[0]))return b[1]}},g=function(a){var b=[],d,f;for(d=0;d<c.length;d++)f=c[d],e(a)===e(f[0])&&b.push(f[1]);return b},h=function(a,b){var d=[],f,g,h,i;for(f=0;f<c.length;f++)g=c[f],h=e(g[0])===e(a),i=e(g[1])===e(b),(arguments.length===1&&!h||arguments.length===2&&!h&&!i)&&d.push(g);c=d;return this},i=function(a,b,d){arguments.length===3&&d!==-1?(d=Math.min(d,c.length),c.splice(d,0,[a,b])):arguments.length>0&&c.push([a,b]);return this},j=function(a,b,d){var f=-1,g,j;if(arguments.length===3){for(g=0;g<c.length;g++){j=c[g];if(e(j[0])===e(a)&&decodeURIComponent(j[1])===e(d)){f=g;break}}h(a,d).addParam(a,b,f)}else{for(g=0;g<c.length;g++){j=c[g];if(e(j[0])===e(a)){f=g;break}}h(a),i(a,b,f)}return this};return{getParamValue:f,getParamValues:g,deleteParam:h,addParam:i,replaceParam:j,toString:d}},Uri=function(a){"use strict";var b=!1,c=function(a){var c={strict:/^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,loose:/^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/},d=["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],e={name:"queryKey",parser:/(?:^|&)([^&=]*)=?([^&]*)/g},f=c[b?"strict":"loose"].exec(a),g={},h=14;while(h--)g[d[h]]=f[h]||"";g[e.name]={},g[d[12]].replace(e.parser,function(a,b,c){b&&(g[e.name][b]=c)});return g},d=c(a||""),e=new Query(d.query),f=function(a){typeof a!="undefined"&&(d.protocol=a);return d.protocol},g=null,h=function(a){typeof a!="undefined"&&(g=a);return g===null?d.source.indexOf("//")!==-1:g},i=function(a){typeof a!="undefined"&&(d.userInfo=a);return d.userInfo},j=function(a){typeof a!="undefined"&&(d.host=a);return d.host},k=function(a){typeof a!="undefined"&&(d.port=a);return d.port},l=function(a){typeof a!="undefined"&&(d.path=a);return d.path},m=function(a){typeof a!="undefined"&&(e=new Query(a));return e},n=function(a){typeof a!="undefined"&&(d.anchor=a);return d.anchor},o=function(a){f(a);return this},p=function(a){h(a);return this},q=function(a){i(a);return this},r=function(a){j(a);return this},s=function(a){k(a);return this},t=function(a){l(a);return this},u=function(a){m(a);return this},v=function(a){n(a);return this},w=function(a){return m().getParamValue(a)},x=function(a){return m().getParamValues(a)},y=function(a,b){arguments.length===2?m().deleteParam(a,b):m().deleteParam(a);return this},z=function(a,b,c){arguments.length===3?m().addParam(a,b,c):m().addParam(a,b);return this},A=function(a,b,c){arguments.length===3?m().replaceParam(a,b,c):m().replaceParam(a,b);return this},B=function(){var a="",b=function(a){return a!==null&&a!==""};b(f())?(a+=f(),f().indexOf(":")!==f().length-1&&(a+=":"),a+="//"):h()&&b(j())&&(a+="//"),b(i())&&b(j())&&(a+=i(),i().indexOf("@")!==i().length-1&&(a+="@")),b(j())&&(a+=j(),b(k())&&(a+=":"+k())),b(l())?a+=l():b(j())&&(b(m().toString())||b(n()))&&(a+="/"),b(m().toString())&&(m().toString().indexOf("?")!==0&&(a+="?"),a+=m().toString()),b(n())&&(n().indexOf("#")!==0&&(a+="#"),a+=n());return a},C=function(){return new Uri(B())};return{protocol:f,hasAuthorityPrefix:h,userInfo:i,host:j,port:k,path:l,query:m,anchor:n,setProtocol:o,setHasAuthorityPrefix:p,setUserInfo:q,setHost:r,setPort:s,setPath:t,setQuery:u,setAnchor:v,getQueryParamValue:w,getQueryParamValues:x,deleteQueryParam:y,addQueryParam:z,replaceQueryParam:A,toString:B,clone:C}},jsUri=Uri;
|
||||
375
vendor/assets/stylesheets/normalize.css
vendored
Normal file
375
vendor/assets/stylesheets/normalize.css
vendored
Normal file
@@ -0,0 +1,375 @@
|
||||
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Corrects `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling for `hidden` attribute not present in IE 8/9.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Sets default font family to sans-serif.
|
||||
* 2. Prevents iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
|
||||
* Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Corrects font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sets consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Removes border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects color not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects font family not being inherited in all browsers.
|
||||
* 2. Corrects font size not being inherited in all browsers.
|
||||
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Corrects inability to style clickable `input` types in iOS.
|
||||
* 3. Improves usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Removes excess padding in IE 8/9.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Removes default vertical scrollbar in IE 8/9.
|
||||
* 2. Improves readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
242
vendor/assets/stylesheets/skeleton.css
vendored
Normal file
242
vendor/assets/stylesheets/skeleton.css
vendored
Normal file
@@ -0,0 +1,242 @@
|
||||
/*
|
||||
* Skeleton V1.2
|
||||
* Copyright 2011, Dave Gamache
|
||||
* www.getskeleton.com
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* 6/20/2012
|
||||
*/
|
||||
|
||||
|
||||
/* Table of Contents
|
||||
==================================================
|
||||
#Base 960 Grid
|
||||
#Tablet (Portrait)
|
||||
#Mobile (Portrait)
|
||||
#Mobile (Landscape)
|
||||
#Clearing */
|
||||
|
||||
|
||||
|
||||
/* #Base 960 Grid
|
||||
================================================== */
|
||||
|
||||
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
|
||||
.container .column,
|
||||
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
|
||||
.row { margin-bottom: 20px; }
|
||||
|
||||
/* Nested Column Classes */
|
||||
.column.alpha, .columns.alpha { margin-left: 0; }
|
||||
.column.omega, .columns.omega { margin-right: 0; }
|
||||
|
||||
/* Base Grid */
|
||||
.container .one.column,
|
||||
.container .one.columns { width: 40px; }
|
||||
.container .two.columns { width: 100px; }
|
||||
.container .three.columns { width: 160px; }
|
||||
.container .four.columns { width: 220px; }
|
||||
.container .five.columns { width: 280px; }
|
||||
.container .six.columns { width: 340px; }
|
||||
.container .seven.columns { width: 400px; }
|
||||
.container .eight.columns { width: 460px; }
|
||||
.container .nine.columns { width: 520px; }
|
||||
.container .ten.columns { width: 580px; }
|
||||
.container .eleven.columns { width: 640px; }
|
||||
.container .twelve.columns { width: 700px; }
|
||||
.container .thirteen.columns { width: 760px; }
|
||||
.container .fourteen.columns { width: 820px; }
|
||||
.container .fifteen.columns { width: 880px; }
|
||||
.container .sixteen.columns { width: 940px; }
|
||||
|
||||
.container .one-third.column { width: 300px; }
|
||||
.container .two-thirds.column { width: 620px; }
|
||||
|
||||
/* Offsets */
|
||||
.container .offset-by-one { padding-left: 60px; }
|
||||
.container .offset-by-two { padding-left: 120px; }
|
||||
.container .offset-by-three { padding-left: 180px; }
|
||||
.container .offset-by-four { padding-left: 240px; }
|
||||
.container .offset-by-five { padding-left: 300px; }
|
||||
.container .offset-by-six { padding-left: 360px; }
|
||||
.container .offset-by-seven { padding-left: 420px; }
|
||||
.container .offset-by-eight { padding-left: 480px; }
|
||||
.container .offset-by-nine { padding-left: 540px; }
|
||||
.container .offset-by-ten { padding-left: 600px; }
|
||||
.container .offset-by-eleven { padding-left: 660px; }
|
||||
.container .offset-by-twelve { padding-left: 720px; }
|
||||
.container .offset-by-thirteen { padding-left: 780px; }
|
||||
.container .offset-by-fourteen { padding-left: 840px; }
|
||||
.container .offset-by-fifteen { padding-left: 900px; }
|
||||
|
||||
|
||||
|
||||
/* #Tablet (Portrait)
|
||||
================================================== */
|
||||
|
||||
/* Note: Design for a width of 768px */
|
||||
|
||||
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
||||
.container { width: 768px; }
|
||||
.container .column,
|
||||
.container .columns { margin-left: 10px; margin-right: 10px; }
|
||||
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
|
||||
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
|
||||
.alpha.omega { margin-left: 0; margin-right: 0; }
|
||||
|
||||
.container .one.column,
|
||||
.container .one.columns { width: 28px; }
|
||||
.container .two.columns { width: 76px; }
|
||||
.container .three.columns { width: 124px; }
|
||||
.container .four.columns { width: 172px; }
|
||||
.container .five.columns { width: 220px; }
|
||||
.container .six.columns { width: 268px; }
|
||||
.container .seven.columns { width: 316px; }
|
||||
.container .eight.columns { width: 364px; }
|
||||
.container .nine.columns { width: 412px; }
|
||||
.container .ten.columns { width: 460px; }
|
||||
.container .eleven.columns { width: 508px; }
|
||||
.container .twelve.columns { width: 556px; }
|
||||
.container .thirteen.columns { width: 604px; }
|
||||
.container .fourteen.columns { width: 652px; }
|
||||
.container .fifteen.columns { width: 700px; }
|
||||
.container .sixteen.columns { width: 748px; }
|
||||
|
||||
.container .one-third.column { width: 236px; }
|
||||
.container .two-thirds.column { width: 492px; }
|
||||
|
||||
/* Offsets */
|
||||
.container .offset-by-one { padding-left: 48px; }
|
||||
.container .offset-by-two { padding-left: 96px; }
|
||||
.container .offset-by-three { padding-left: 144px; }
|
||||
.container .offset-by-four { padding-left: 192px; }
|
||||
.container .offset-by-five { padding-left: 240px; }
|
||||
.container .offset-by-six { padding-left: 288px; }
|
||||
.container .offset-by-seven { padding-left: 336px; }
|
||||
.container .offset-by-eight { padding-left: 384px; }
|
||||
.container .offset-by-nine { padding-left: 432px; }
|
||||
.container .offset-by-ten { padding-left: 480px; }
|
||||
.container .offset-by-eleven { padding-left: 528px; }
|
||||
.container .offset-by-twelve { padding-left: 576px; }
|
||||
.container .offset-by-thirteen { padding-left: 624px; }
|
||||
.container .offset-by-fourteen { padding-left: 672px; }
|
||||
.container .offset-by-fifteen { padding-left: 720px; }
|
||||
}
|
||||
|
||||
|
||||
/* #Mobile (Portrait)
|
||||
================================================== */
|
||||
|
||||
/* Note: Design for a width of 320px */
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container { width: 300px; }
|
||||
.container .columns,
|
||||
.container .column { margin: 0; }
|
||||
|
||||
.container .one.column,
|
||||
.container .one.columns,
|
||||
.container .two.columns,
|
||||
.container .three.columns,
|
||||
.container .four.columns,
|
||||
.container .five.columns,
|
||||
.container .six.columns,
|
||||
.container .seven.columns,
|
||||
.container .eight.columns,
|
||||
.container .nine.columns,
|
||||
.container .ten.columns,
|
||||
.container .eleven.columns,
|
||||
.container .twelve.columns,
|
||||
.container .thirteen.columns,
|
||||
.container .fourteen.columns,
|
||||
.container .fifteen.columns,
|
||||
.container .sixteen.columns,
|
||||
.container .one-third.column,
|
||||
.container .two-thirds.column { width: 300px; }
|
||||
|
||||
/* Offsets */
|
||||
.container .offset-by-one,
|
||||
.container .offset-by-two,
|
||||
.container .offset-by-three,
|
||||
.container .offset-by-four,
|
||||
.container .offset-by-five,
|
||||
.container .offset-by-six,
|
||||
.container .offset-by-seven,
|
||||
.container .offset-by-eight,
|
||||
.container .offset-by-nine,
|
||||
.container .offset-by-ten,
|
||||
.container .offset-by-eleven,
|
||||
.container .offset-by-twelve,
|
||||
.container .offset-by-thirteen,
|
||||
.container .offset-by-fourteen,
|
||||
.container .offset-by-fifteen { padding-left: 0; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* #Mobile (Landscape)
|
||||
================================================== */
|
||||
|
||||
/* Note: Design for a width of 480px */
|
||||
|
||||
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
||||
.container { width: 420px; }
|
||||
.container .columns,
|
||||
.container .column { margin: 0; }
|
||||
|
||||
.container .one.column,
|
||||
.container .one.columns,
|
||||
.container .two.columns,
|
||||
.container .three.columns,
|
||||
.container .four.columns,
|
||||
.container .five.columns,
|
||||
.container .six.columns,
|
||||
.container .seven.columns,
|
||||
.container .eight.columns,
|
||||
.container .nine.columns,
|
||||
.container .ten.columns,
|
||||
.container .eleven.columns,
|
||||
.container .twelve.columns,
|
||||
.container .thirteen.columns,
|
||||
.container .fourteen.columns,
|
||||
.container .fifteen.columns,
|
||||
.container .sixteen.columns,
|
||||
.container .one-third.column,
|
||||
.container .two-thirds.column { width: 420px; }
|
||||
}
|
||||
|
||||
|
||||
/* #Clearing
|
||||
================================================== */
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
|
||||
/* Use clearfix class on parent to clear nested columns,
|
||||
or wrap each row of columns in a <div class="row"> */
|
||||
.clearfix:before,
|
||||
.clearfix:after,
|
||||
.row:before,
|
||||
.row:after {
|
||||
content: '\0020';
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
.row:after,
|
||||
.clearfix:after {
|
||||
clear: both; }
|
||||
.row,
|
||||
.clearfix {
|
||||
zoom: 1; }
|
||||
|
||||
/* You can also use a <br class="clear" /> to clear columns */
|
||||
.clear {
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user