diff --git a/app/assets/javascripts/admin/all.js b/app/assets/javascripts/admin/all.js index aa0de19dc0..0132f807cc 100644 --- a/app/assets/javascripts/admin/all.js +++ b/app/assets/javascripts/admin/all.js @@ -23,6 +23,7 @@ // spree //= require admin/spree_backend //= require modernizr +//= require css_browser_selector_dev //= require admin/spree_paypal_express // OFN specific diff --git a/app/assets/stylesheets/admin/all.scss b/app/assets/stylesheets/admin/all.scss index 757be97cfe..5e42010fab 100644 --- a/app/assets/stylesheets/admin/all.scss +++ b/app/assets/stylesheets/admin/all.scss @@ -13,6 +13,12 @@ *= require_self */ +@import 'globals/variables'; + +@import 'hacks/mozilla'; +@import 'hacks/opera'; +@import 'hacks/ie'; + @import 'variables'; @import 'components/*'; @import 'pages/*'; diff --git a/app/assets/stylesheets/admin/globals/variables.scss b/app/assets/stylesheets/admin/globals/variables.scss new file mode 100644 index 0000000000..d5316cbd26 --- /dev/null +++ b/app/assets/stylesheets/admin/globals/variables.scss @@ -0,0 +1,148 @@ +// ------------------------------------------------------------- +// Variables used in all other files +//-------------------------------------------------------------- + +// Fonts +//-------------------------------------------------------------- +$base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; + +// Colors +//-------------------------------------------------------------- + +// Basic color palette for admin +$color-1: #FFFFFF !default; // White +$color-2: #9FC820 !default; // Green +$color-3: #5498DA !default; // Light Blue +$color-4: #6788A2 !default; // Dark Blue +$color-5: #C60F13 !default; // Red +$color-6: #FF9300 !default; // Yellow + +// Body base colors +$color-body-bg: $color-1 !default; +$color-body-text: $color-4 !default; +$color-headers: $color-4 !default; +$color-link: $color-3 !default; +$color-link-hover: $color-2 !default; +$color-link-active: $color-2 !default; +$color-link-focus: $color-2 !default; +$color-link-visited: $color-3 !default; +$color-border: very-light($color-3, 12) !default; + +// Basic flash colors +$color-success: $color-2 !default; +$color-notice: $color-6 !default; +$color-error: $color-5 !default; + +// Table colors +$color-tbl-odd: $color-1 !default; +$color-tbl-even: very-light($color-3, 4) !default; +$color-tbl-thead: very-light($color-3, 4) !default; + +// Button colors +$color-btn-bg: $color-3 !default; +$color-btn-text: $color-1 !default; +$color-btn-hover-bg: $color-2 !default; +$color-btn-hover-text: $color-1 !default; + +// Actions colors +$color-action-edit-bg: very-light($color-success, 5 ) !default; +$color-action-edit-brd: very-light($color-success, 20 ) !default; +$color-action-clone-bg: very-light($color-notice, 5 ) !default; +$color-action-clone-brd: very-light($color-notice, 15 ) !default; +$color-action-remove-bg: very-light($color-error, 5 ) !default; +$color-action-remove-brd: very-light($color-error, 10 ) !default; +$color-action-void-bg: very-light($color-error, 10 ) !default; +$color-action-void-brd: very-light($color-error, 20 ) !default; +$color-action-cancel-bg: very-light($color-notice, 10 ) !default; +$color-action-cancel-brd: very-light($color-notice, 20 ) !default; +$color-action-capture-bg: very-light($color-success, 5 ) !default; +$color-action-capture-brd: very-light($color-success, 20 ) !default; +$color-action-save-bg: very-light($color-success, 5 ) !default; +$color-action-save-brd: very-light($color-success, 20 ) !default; +$color-action-mail-bg: very-light($color-success, 5 ) !default; +$color-action-mail-brd: very-light($color-success, 20 ) !default; + +// Select2 select field colors +$color-sel-bg: $color-3 !default; +$color-sel-text: $color-1 !default; +$color-sel-hover-bg: $color-2 !default; +$color-sel-hover-text: $color-1 !default; + +// Text inputs colors +$color-txt-brd: $color-border !default; +$color-txt-text: $color-3 !default; +$color-txt-hover-brd: $color-2 !default; + +// States label colors +$color-ste-complete-bg: $color-success !default; +$color-ste-complete-text: $color-1 !default; +$color-ste-completed-bg: $color-success !default; +$color-ste-completed-text: $color-1 !default; +$color-ste-sold-bg: $color-success !default; +$color-ste-sold-text: $color-1 !default; +$color-ste-pending-bg: $color-notice !default; +$color-ste-pending-text: $color-1 !default; +$color-ste-awaiting_return-bg: $color-notice !default; +$color-ste-awaiting_return-text: $color-1 !default; +$color-ste-returned-bg: $color-notice !default; +$color-ste-returned-text: $color-1 !default; +$color-ste-credit_owed-bg: $color-notice !default; +$color-ste-credit_owed-text: $color-1 !default; +$color-ste-paid-bg: $color-success !default; +$color-ste-paid-text: $color-1 !default; +$color-ste-shipped-bg: $color-success !default; +$color-ste-shipped-text: $color-1 !default; +$color-ste-balance_due-bg: $color-notice !default; +$color-ste-balance_due-text: $color-1 !default; +$color-ste-backorder-bg: $color-notice !default; +$color-ste-backorder-text: $color-1 !default; +$color-ste-none-bg: $color-error !default; +$color-ste-none-text: $color-1 !default; +$color-ste-ready-bg: $color-success !default; +$color-ste-ready-text: $color-1 !default; +$color-ste-void-bg: $color-error !default; +$color-ste-void-text: $color-1 !default; +$color-ste-canceled-bg: $color-error !default; +$color-ste-canceled-text: $color-1 !default; +$color-ste-address-bg: $color-error !default; +$color-ste-address-text: $color-1 !default; +$color-ste-checkout-bg: $color-notice !default; +$color-ste-checkout-text: $color-1 !default; +$color-ste-cart-bg: $color-notice !default; +$color-ste-cart-text: $color-1 !default; +$color-ste-payment-bg: $color-error !default; +$color-ste-payment-text: $color-1 !default; +$color-ste-delivery-bg: $color-success !default; +$color-ste-delivery-text: $color-1 !default; +$color-ste-confirm-bg: $color-error !default; +$color-ste-confirm-text: $color-1 !default; +$color-ste-active-bg: $color-success !default; +$color-ste-active-text: $color-1 !default; +$color-ste-inactive-bg: $color-notice !default; +$color-ste-inactive-text: $color-1 !default; + +// Available states +$states: completed, complete, sold, pending, awaiting_return, returned, credit_owed, paid, shipped, balance_due, backorder, checkout, cart, address, delivery, payment, confirm, canceled, ready, void, active, inactive !default; +$states-bg-colors: $color-ste-completed-bg, $color-ste-complete-bg, $color-ste-sold-bg, $color-ste-pending-bg, $color-ste-awaiting_return-bg, $color-ste-returned-bg, $color-ste-credit_owed-bg, $color-ste-paid-bg, $color-ste-shipped-bg, $color-ste-balance_due-bg, $color-ste-backorder-bg, $color-ste-checkout-bg, $color-ste-cart-bg, $color-ste-address-bg, $color-ste-delivery-bg, $color-ste-payment-bg, $color-ste-confirm-bg, $color-ste-canceled-bg, $color-ste-ready-bg, $color-ste-void-bg, $color-ste-active-bg, $color-ste-inactive-bg !default; +$states-text-colors: $color-ste-completed-text, $color-ste-complete-text, $color-ste-sold-text, $color-ste-pending-text, $color-ste-awaiting_return-text, $color-ste-returned-text, $color-ste-credit_owed-text, $color-ste-paid-text, $color-ste-shipped-text, $color-ste-balance_due-text, $color-ste-backorder-text, $color-ste-checkout-text, $color-ste-cart-text, $color-ste-address-text, $color-ste-delivery-text, $color-ste-payment-text, $color-ste-confirm-text, $color-ste-canceled-text, $color-ste-ready-text, $color-ste-void-text, $color-ste-active-text, $color-ste-inactive-text !default; + +// Available actions +$actions: edit, clone, remove, void, capture, save, cancel, mail !default; +$actions-bg-colors: $color-action-edit-bg, $color-action-clone-bg, $color-action-remove-bg, $color-action-void-bg, $color-action-capture-bg, $color-action-save-bg, $color-action-cancel-bg, $color-action-mail-bg !default; +$actions-brd-colors: $color-action-edit-brd, $color-action-clone-brd, $color-action-remove-brd, $color-action-void-brd, $color-action-capture-brd, $color-action-save-brd, $color-action-cancel-brd, $color-action-mail-brd !default; + +// Sizes +//-------------------------------------------------------------- +$body-font-size: 13px !default; + +$h6-size: $body-font-size + 2 !default; +$h5-size: $h6-size + 2 !default; +$h4-size: $h5-size + 2 !default; +$h3-size: $h4-size + 2 !default; +$h2-size: $h3-size + 2 !default; +$h1-size: $h2-size + 2 !default; + +$border-radius: 3px !default; + +$font-weight-bold: 600 !default; +$font-weight-normal: 400 !default; diff --git a/app/assets/stylesheets/admin/hacks/ie.scss b/app/assets/stylesheets/admin/hacks/ie.scss new file mode 100644 index 0000000000..15fc1f2601 --- /dev/null +++ b/app/assets/stylesheets/admin/hacks/ie.scss @@ -0,0 +1,73 @@ +// IE general hacks +html.ie { + + // Properly align icons in circle + table td.actions .no-text.icon-edit { + padding-top: 3px !important; + } + table td.actions .no-text.icon-envelope-alt { + padding-top: 4px !important; + } + + // Fix select2 background gradient. (It uses filter gradients for IE) + .select2-choice, .select2-choice div, + .select2-container-multi .select2-search-choice, + .select2-container:hover .select2-choice, + .select2-container.select2-container-active .select2-choice { + filter: none; + } + .select2-search { + &:before { + position: relative; + z-index: 10000; + content: '\f002' !important; + } + input { + position: relative; + z-index: 0; + } + } + + // Fix margin-top for destroy paperclip styles background + .destroy_new_attachment_styles { + margin-top: 17px !important; + } +} + +// IE8 Hacks +html.ie8 { + + // Fix italic font + body { + font-style: normal; + } + + // Fix white border around filter-actions + .filter-actions { + margin-bottom: -45px; + + button, .button, input[type="submit"], input[type="button"], span.or { + border: 15px solid $color-1; + } + span.or { + border-width: 5px; + margin-left: -10px; + margin-right: -10px; + } + } + + // Fix legend align center + legend { + display: table; + } + + // Sidebar align with fieldsets + #sidebar { + margin-top: 27px; + + .sidebar-title span { + margin-left: 7px; + } + } + +} \ No newline at end of file diff --git a/app/assets/stylesheets/admin/hacks/mozilla.scss b/app/assets/stylesheets/admin/hacks/mozilla.scss new file mode 100644 index 0000000000..a3e37cfacc --- /dev/null +++ b/app/assets/stylesheets/admin/hacks/mozilla.scss @@ -0,0 +1,32 @@ +html.firefox { + + // Fix sidebar margin + #sidebar { + margin-top: 18px; + } + + // Properly align icons in circle + table td.actions .no-text.icon-edit { + padding-left: 1px; + } + + // Fix select2 tag input size + input.select2-input { + padding: 0px 10px !important; + } + + // Fix select2 tag input container padding + .select2-container-multi .select2-choices { + padding-bottom: 0 !important; + } + + // Fix select2 search input left padding to not overlap search icon + .select2-search input.select2-input { + padding-left: 25px !important; + } + + // Fix image file upload width + input#image_attachment { + width: 80%; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/admin/hacks/opera.scss b/app/assets/stylesheets/admin/hacks/opera.scss new file mode 100644 index 0000000000..af8c878ec2 --- /dev/null +++ b/app/assets/stylesheets/admin/hacks/opera.scss @@ -0,0 +1,17 @@ +html.opera { + + // Fix legend center align + legend { + margin: 0 auto; + } + + // Properly align icons in circle + table td.actions .no-text.icon-edit { + padding-left: 1px; + } + + // Fix sidebar margin + #sidebar { + margin-top: 18px; + } +} \ No newline at end of file diff --git a/vendor/assets/javascripts/css_browser_selector_dev.js b/vendor/assets/javascripts/css_browser_selector_dev.js new file mode 100644 index 0000000000..3fddee52fe --- /dev/null +++ b/vendor/assets/javascripts/css_browser_selector_dev.js @@ -0,0 +1,156 @@ +/* +CSS Browser Selector 0.6.1 +Originally written by Rafael Lima (http://rafael.adm.br) +http://rafael.adm.br/css_browser_selector +License: http://creativecommons.org/licenses/by/2.5/ + +Co-maintained by: +https://github.com/verbatim/css_browser_selector + +*/ + +showLog=true; +function log(m) {if ( window.console && showLog ) {console.log(m); } } + +function css_browser_selector(u) + { + var uaInfo = {}, + screens = [320, 480, 640, 768, 1024, 1152, 1280, 1440, 1680, 1920, 2560], + allScreens = screens.length, + ua=u.toLowerCase(), + is=function(t) { return RegExp(t,"i").test(ua); }, + version = function(p,n) + { + n=n.replace(".","_"); var i = n.indexOf('_'), ver=""; + while (i>0) {ver += " "+ p+n.substring(0,i);i = n.indexOf('_', i+1);} + ver += " "+p+n; return ver; + }, + g='gecko', + w='webkit', + c='chrome', + f='firefox', + s='safari', + o='opera', + m='mobile', + a='android', + bb='blackberry', + lang='lang_', + dv='device_', + html=document.documentElement, + b= [ + + // browser + (!(/opera|webtv/i.test(ua))&&/msie\s(\d+)/.test(ua))?('ie ie'+(/trident\/4\.0/.test(ua) ? '8' : RegExp.$1)) + :is('firefox/')?g+ " " + f+(/firefox\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+f+RegExp.$2 + ' '+f+RegExp.$2+"_"+RegExp.$4:'') + :is('gecko/')?g + :is('opera')?o+(/version\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+o+RegExp.$2 + ' '+o+RegExp.$2+"_"+RegExp.$4 : (/opera(\s|\/)(\d+)\.(\d+)/.test(ua)?' '+o+RegExp.$2+" "+o+RegExp.$2+"_"+RegExp.$3:'')) + :is('konqueror')?'konqueror' + + :is('blackberry') ? + ( bb + + ( /Version\/(\d+)(\.(\d+)+)/i.test(ua) + ? " " + bb+ RegExp.$1 + " "+bb+ RegExp.$1+RegExp.$2.replace('.','_') + : (/Blackberry ?(([0-9]+)([a-z]?))[\/|;]/gi.test(ua) + ? ' ' +bb+RegExp.$2 + (RegExp.$3?' ' +bb+RegExp.$2+RegExp.$3:'') + : '') + ) + ) // blackberry + + :is('android') ? + ( a + + ( /Version\/(\d+)(\.(\d+))+/i.test(ua) + ? " " + a+ RegExp.$1 + " "+a+ RegExp.$1+RegExp.$2.replace('.','_') + : '') + + (/Android (.+); (.+) Build/i.test(ua) + ? ' '+dv+( (RegExp.$2).replace(/ /g,"_") ).replace(/-/g,"_") + :'' ) + ) //android + + :is('chrome')?w+ ' '+c+(/chrome\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua)?' '+c+RegExp.$2 +((RegExp.$4>0) ? ' '+c+RegExp.$2+"_"+RegExp.$4:''):'') + + :is('iron')?w+' iron' + + :is('applewebkit/') ? + ( w+ ' '+ s + + ( /version\/((\d+)(\.(\d+))(\.\d+)*)/.test(ua) + ? ' '+ s +RegExp.$2 + " "+s+ RegExp.$2+RegExp.$3.replace('.','_') + : ( / Safari\/(\d+)/i.test(ua) + ? + ( (RegExp.$1=="419" || RegExp.$1=="417" || RegExp.$1=="416" || RegExp.$1=="412" ) ? ' '+ s + '2_0' + : RegExp.$1=="312" ? ' '+ s + '1_3' + : RegExp.$1=="125" ? ' '+ s + '1_2' + : RegExp.$1=="85" ? ' '+ s + '1_0' + : '' ) + :'') + ) + ) //applewebkit + + :is('mozilla/')?g + :'' + + // mobile + ,is("android|mobi|mobile|j2me|iphone|ipod|ipad|blackberry|playbook|kindle|silk")?m:'' + + // os/platform + ,is('j2me')?'j2me' + :is('ipad|ipod|iphone')? + ( + ( + /CPU( iPhone)? OS (\d+[_|\.]\d+([_|\.]\d+)*)/i.test(ua) ? + 'ios' + version('ios',RegExp.$2) : '' + ) + ' ' + ( /(ip(ad|od|hone))/gi.test(ua) ? RegExp.$1 : "" ) + ) //'iphone' + //:is('ipod')?'ipod' + //:is('ipad')?'ipad' + :is('playbook')?'playbook' + :is('kindle|silk')?'kindle' + :is('playbook')?'playbook' + :is('mac')?'mac'+ (/mac os x ((\d+)[.|_](\d+))/.test(ua) ? ( ' mac' + (RegExp.$2) + ' mac' + (RegExp.$1).replace('.',"_") ) : '' ) + :is('win')?'win'+ + (is('windows nt 6.2')?' win8' + :is('windows nt 6.1')?' win7' + :is('windows nt 6.0')?' vista' + :is('windows nt 5.2') || is('windows nt 5.1') ? ' win_xp' + :is('windows nt 5.0')?' win_2k' + :is('windows nt 4.0') || is('WinNT4.0') ?' win_nt' + : '' + ) + :is('freebsd')?'freebsd' + :(is('x11|linux'))?'linux' + :'' + + // user agent language + ,(/[; |\[](([a-z]{2})(\-[a-z]{2})?)[)|;|\]]/i.test(ua))?(lang+RegExp.$2).replace("-","_")+(RegExp.$3!=''?(' '+lang+RegExp.$1).replace("-","_"):''):'' + + // beta: test if running iPad app + ,( is('ipad|iphone|ipod') && !is('safari') ) ? 'ipad_app' : '' + + + ]; // b + + function screenSize() + { + var w = window.outerWidth || html.clientWidth; + var h = window.outerHeight || html.clientHeight; + uaInfo.orientation = ((w=0;i--) { if (w >= screens[i] ) { uaInfo.maxw = screens[i]; break; }} + widthClasses=""; + for (var info in uaInfo) { widthClasses+=" "+info+"_"+ uaInfo[info] }; + html.className = ( html.className +widthClasses ); + return widthClasses; + } // screenSize + + window.onresize = screenSize; + screenSize(); + + var cssbs = (b.join(' ')) + " js "; + html.className = ( cssbs + html.className.replace(/\b(no[-|_]?)?js\b/g,"") ).replace(/^ /, "").replace(/ +/g," "); + + return cssbs; + } + +css_browser_selector(navigator.userAgent); + +