Bring css_browser_selector_dev from spree_backend and respective hacks

This commit is contained in:
luisramos0
2019-12-18 13:12:11 +00:00
parent 0ec39106b1
commit a5f222b067
7 changed files with 433 additions and 0 deletions

View File

@@ -23,6 +23,7 @@
// spree
//= require admin/spree_backend
//= require modernizr
//= require css_browser_selector_dev
//= require admin/spree_paypal_express
// OFN specific

View File

@@ -13,6 +13,12 @@
*= require_self
*/
@import 'globals/variables';
@import 'hacks/mozilla';
@import 'hacks/opera';
@import 'hacks/ie';
@import 'variables';
@import 'components/*';
@import 'pages/*';

View File

@@ -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;

View File

@@ -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;
}
}
}

View File

@@ -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%;
}
}

View File

@@ -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;
}
}

View File

@@ -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<h) ? "portrait" : "landscape");
// remove previous min-width, max-width, client-width, client-height, and orientation
html.className = html.className.replace(/ ?orientation_\w+/g, "").replace(/ [min|max|cl]+[w|h]_\d+/g, "")
for (var i=(allScreens-1);i>=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);