copy dari repo om Irfan
This commit is contained in:
@@ -0,0 +1,161 @@
|
||||
.colorpicker-sw {
|
||||
width: 356px;
|
||||
height: 176px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
background: url(../images/colorpicker_background.png);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
display: none;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_color {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
left: 14px;
|
||||
top: 13px;
|
||||
position: absolute;
|
||||
background: #f00;
|
||||
overflow: hidden;
|
||||
cursor: crosshair;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_color div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: url(../images/colorpicker_overlay.png);
|
||||
}
|
||||
.colorpicker-sw .colorpicker_color div div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
overflow: hidden;
|
||||
background: url(../images/colorpicker_select.gif);
|
||||
margin: -5px 0 0 -5px;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_hue {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 171px;
|
||||
width: 35px;
|
||||
height: 150px;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_hue div {
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
height: 9px;
|
||||
overflow: hidden;
|
||||
background: url(../images/colorpicker_indic.gif) left top;
|
||||
margin: -4px 0 0 0;
|
||||
left: 0px;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_new_color {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
left: 213px;
|
||||
top: 13px;
|
||||
background: #f00;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_current_color {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
left: 283px;
|
||||
top: 13px;
|
||||
background: #f00;
|
||||
}
|
||||
.colorpicker-sw input {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #898989;
|
||||
top: 4px;
|
||||
right: 11px;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 11px;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_hex {
|
||||
position: absolute;
|
||||
width: 72px;
|
||||
height: 22px;
|
||||
background: url(../images/colorpicker_hex.png) top;
|
||||
left: 212px;
|
||||
top: 142px;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_hex input {
|
||||
right: 6px;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_field {
|
||||
height: 22px;
|
||||
width: 62px;
|
||||
background-position: top;
|
||||
position: absolute;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_field span {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 22px;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_rgb_r {
|
||||
background-image: url(../images/colorpicker_rgb_r.png);
|
||||
top: 52px;
|
||||
left: 212px;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_rgb_g {
|
||||
background-image: url(../images/colorpicker_rgb_g.png);
|
||||
top: 82px;
|
||||
left: 212px;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_rgb_b {
|
||||
background-image: url(../images/colorpicker_rgb_b.png);
|
||||
top: 112px;
|
||||
left: 212px;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_hsb_h {
|
||||
background-image: url(../images/colorpicker_hsb_h.png);
|
||||
top: 52px;
|
||||
left: 282px;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_hsb_s {
|
||||
background-image: url(../images/colorpicker_hsb_s.png);
|
||||
top: 82px;
|
||||
left: 282px;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_hsb_b {
|
||||
background-image: url(../images/colorpicker_hsb_b.png);
|
||||
top: 112px;
|
||||
left: 282px;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_submit {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url(../images/colorpicker_submit.png) top !important;
|
||||
left: 322px;
|
||||
top: 142px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_focus {
|
||||
background-position: center;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_hex.sw-colorpicker_focus {
|
||||
background-position: bottom;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_submit.sw-colorpicker_focus {
|
||||
background-position: bottom;
|
||||
}
|
||||
.colorpicker-sw .colorpicker_slider {
|
||||
background-position: bottom;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 49 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 532 B |
Binary file not shown.
|
After Width: | Height: | Size: 970 B |
Binary file not shown.
|
After Width: | Height: | Size: 1012 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 B |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 970 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 B |
Binary file not shown.
|
After Width: | Height: | Size: 984 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 562 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 970 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 B |
Binary file not shown.
|
After Width: | Height: | Size: 1008 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1018 B |
Binary file not shown.
|
After Width: | Height: | Size: 997 B |
Binary file not shown.
|
After Width: | Height: | Size: 506 B |
Binary file not shown.
|
After Width: | Height: | Size: 518 B |
Binary file not shown.
|
After Width: | Height: | Size: 315 B |
@@ -0,0 +1,484 @@
|
||||
/**
|
||||
*
|
||||
* Color picker
|
||||
* Author: Stefan Petre www.eyecon.ro
|
||||
*
|
||||
* Dual licensed under the MIT and GPL licenses
|
||||
*
|
||||
*/
|
||||
(function ($) {
|
||||
var ColorPicker = function () {
|
||||
var
|
||||
ids = {},
|
||||
inAction,
|
||||
charMin = 65,
|
||||
visible,
|
||||
tpl = '<div class="colorpicker colorpicker-sw"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
|
||||
defaults = {
|
||||
eventName: 'click',
|
||||
onShow: function () {},
|
||||
onBeforeShow: function(){},
|
||||
onHide: function () {},
|
||||
onChange: function () {},
|
||||
onSubmit: function () {},
|
||||
color: 'ff0000',
|
||||
livePreview: true,
|
||||
flat: false
|
||||
},
|
||||
fillRGBFields = function (hsb, cal) {
|
||||
var rgb = HSBToRGB(hsb);
|
||||
$(cal).data('colorpicker').fields
|
||||
.eq(1).val(rgb.r).end()
|
||||
.eq(2).val(rgb.g).end()
|
||||
.eq(3).val(rgb.b).end();
|
||||
},
|
||||
fillHSBFields = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').fields
|
||||
.eq(4).val(hsb.h).end()
|
||||
.eq(5).val(hsb.s).end()
|
||||
.eq(6).val(hsb.b).end();
|
||||
},
|
||||
fillHexFields = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').fields
|
||||
.eq(0).val(HSBToHex(hsb)).end();
|
||||
},
|
||||
setSelector = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
|
||||
$(cal).data('colorpicker').selectorIndic.css({
|
||||
left: parseInt(150 * hsb.s/100, 10),
|
||||
top: parseInt(150 * (100-hsb.b)/100, 10)
|
||||
});
|
||||
},
|
||||
setHue = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
|
||||
},
|
||||
setCurrentColor = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
||||
},
|
||||
setNewColor = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
||||
},
|
||||
keyDown = function (ev) {
|
||||
var pressedKey = ev.charCode || ev.keyCode || -1;
|
||||
if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
|
||||
return false;
|
||||
}
|
||||
var cal = $(this).parent().parent();
|
||||
if (cal.data('colorpicker').livePreview === true) {
|
||||
change.apply(this);
|
||||
}
|
||||
},
|
||||
change = function (ev) {
|
||||
var cal = $(this).parent().parent(), col;
|
||||
if (this.parentNode.className.indexOf('_hex') > 0) {
|
||||
cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
|
||||
} else if (this.parentNode.className.indexOf('_hsb') > 0) {
|
||||
cal.data('colorpicker').color = col = fixHSB({
|
||||
h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
|
||||
s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
|
||||
b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
|
||||
});
|
||||
} else {
|
||||
cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
|
||||
r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
|
||||
g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
|
||||
b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
|
||||
}));
|
||||
}
|
||||
if (ev) {
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
fillHSBFields(col, cal.get(0));
|
||||
}
|
||||
setSelector(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
|
||||
},
|
||||
blur = function (ev) {
|
||||
var cal = $(this).parent().parent();
|
||||
cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
|
||||
},
|
||||
focus = function () {
|
||||
charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
|
||||
$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
|
||||
$(this).parent().addClass('colorpicker_focus');
|
||||
},
|
||||
downIncrement = function (ev) {
|
||||
var field = $(this).parent().find('input').focus();
|
||||
var current = {
|
||||
el: $(this).parent().addClass('colorpicker_slider'),
|
||||
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
|
||||
y: ev.pageY,
|
||||
field: field,
|
||||
val: parseInt(field.val(), 10),
|
||||
preview: $(this).parent().parent().data('colorpicker').livePreview
|
||||
};
|
||||
$(document).bind('mouseup', current, upIncrement);
|
||||
$(document).bind('mousemove', current, moveIncrement);
|
||||
},
|
||||
moveIncrement = function (ev) {
|
||||
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
|
||||
if (ev.data.preview) {
|
||||
change.apply(ev.data.field.get(0), [true]);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
upIncrement = function (ev) {
|
||||
change.apply(ev.data.field.get(0), [true]);
|
||||
ev.data.el.removeClass('colorpicker_slider').find('input').focus();
|
||||
$(document).unbind('mouseup', upIncrement);
|
||||
$(document).unbind('mousemove', moveIncrement);
|
||||
return false;
|
||||
},
|
||||
downHue = function (ev) {
|
||||
var current = {
|
||||
cal: $(this).parent(),
|
||||
y: $(this).offset().top
|
||||
};
|
||||
current.preview = current.cal.data('colorpicker').livePreview;
|
||||
$(document).bind('mouseup', current, upHue);
|
||||
$(document).bind('mousemove', current, moveHue);
|
||||
},
|
||||
moveHue = function (ev) {
|
||||
change.apply(
|
||||
ev.data.cal.data('colorpicker')
|
||||
.fields
|
||||
.eq(4)
|
||||
.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
|
||||
.get(0),
|
||||
[ev.data.preview]
|
||||
);
|
||||
return false;
|
||||
},
|
||||
upHue = function (ev) {
|
||||
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
$(document).unbind('mouseup', upHue);
|
||||
$(document).unbind('mousemove', moveHue);
|
||||
return false;
|
||||
},
|
||||
downSelector = function (ev) {
|
||||
var current = {
|
||||
cal: $(this).parent(),
|
||||
pos: $(this).offset()
|
||||
};
|
||||
current.preview = current.cal.data('colorpicker').livePreview;
|
||||
$(document).bind('mouseup', current, upSelector);
|
||||
$(document).bind('mousemove', current, moveSelector);
|
||||
},
|
||||
moveSelector = function (ev) {
|
||||
change.apply(
|
||||
ev.data.cal.data('colorpicker')
|
||||
.fields
|
||||
.eq(6)
|
||||
.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
|
||||
.end()
|
||||
.eq(5)
|
||||
.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
|
||||
.get(0),
|
||||
[ev.data.preview]
|
||||
);
|
||||
return false;
|
||||
},
|
||||
upSelector = function (ev) {
|
||||
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
$(document).unbind('mouseup', upSelector);
|
||||
$(document).unbind('mousemove', moveSelector);
|
||||
return false;
|
||||
},
|
||||
enterSubmit = function (ev) {
|
||||
$(this).addClass('colorpicker_focus');
|
||||
},
|
||||
leaveSubmit = function (ev) {
|
||||
$(this).removeClass('colorpicker_focus');
|
||||
},
|
||||
clickSubmit = function (ev) {
|
||||
var cal = $(this).parent();
|
||||
var col = cal.data('colorpicker').color;
|
||||
cal.data('colorpicker').origColor = col;
|
||||
setCurrentColor(col, cal.get(0));
|
||||
cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
|
||||
},
|
||||
show = function (ev) {
|
||||
var cal = $('#' + $(this).data('colorpickerId'));
|
||||
cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
|
||||
var pos = $(this).offset();
|
||||
var viewPort = getViewport();
|
||||
var top = pos.top + this.offsetHeight;
|
||||
var left = pos.left;
|
||||
if (top + 176 > viewPort.t + viewPort.h) {
|
||||
top -= this.offsetHeight + 176;
|
||||
}
|
||||
if (left + 356 > viewPort.l + viewPort.w) {
|
||||
left -= 356;
|
||||
}
|
||||
cal.css({left: left + 'px', top: top + 'px'});
|
||||
if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
|
||||
cal.show();
|
||||
}
|
||||
$(document).bind('mousedown', {cal: cal}, hide);
|
||||
return false;
|
||||
},
|
||||
hide = function (ev) {
|
||||
if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
|
||||
if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
|
||||
ev.data.cal.hide();
|
||||
}
|
||||
$(document).unbind('mousedown', hide);
|
||||
}
|
||||
},
|
||||
isChildOf = function(parentEl, el, container) {
|
||||
if (parentEl == el) {
|
||||
return true;
|
||||
}
|
||||
if (parentEl.contains) {
|
||||
return parentEl.contains(el);
|
||||
}
|
||||
if ( parentEl.compareDocumentPosition ) {
|
||||
return !!(parentEl.compareDocumentPosition(el) & 16);
|
||||
}
|
||||
var prEl = el.parentNode;
|
||||
while(prEl && prEl != container) {
|
||||
if (prEl == parentEl)
|
||||
return true;
|
||||
prEl = prEl.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getViewport = function () {
|
||||
var m = document.compatMode == 'CSS1Compat';
|
||||
return {
|
||||
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
|
||||
t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
|
||||
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
|
||||
h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
|
||||
};
|
||||
},
|
||||
fixHSB = function (hsb) {
|
||||
return {
|
||||
h: Math.min(360, Math.max(0, hsb.h)),
|
||||
s: Math.min(100, Math.max(0, hsb.s)),
|
||||
b: Math.min(100, Math.max(0, hsb.b))
|
||||
};
|
||||
},
|
||||
fixRGB = function (rgb) {
|
||||
return {
|
||||
r: Math.min(255, Math.max(0, rgb.r)),
|
||||
g: Math.min(255, Math.max(0, rgb.g)),
|
||||
b: Math.min(255, Math.max(0, rgb.b))
|
||||
};
|
||||
},
|
||||
fixHex = function (hex) {
|
||||
var len = 6 - hex.length;
|
||||
if (len > 0) {
|
||||
var o = [];
|
||||
for (var i=0; i<len; i++) {
|
||||
o.push('0');
|
||||
}
|
||||
o.push(hex);
|
||||
hex = o.join('');
|
||||
}
|
||||
return hex;
|
||||
},
|
||||
HexToRGB = function (hex) {
|
||||
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
||||
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
|
||||
},
|
||||
HexToHSB = function (hex) {
|
||||
return RGBToHSB(HexToRGB(hex));
|
||||
},
|
||||
RGBToHSB = function (rgb) {
|
||||
var hsb = {
|
||||
h: 0,
|
||||
s: 0,
|
||||
b: 0
|
||||
};
|
||||
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
||||
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
||||
var delta = max - min;
|
||||
hsb.b = max;
|
||||
if (max != 0) {
|
||||
|
||||
}
|
||||
hsb.s = max != 0 ? 255 * delta / max : 0;
|
||||
if (hsb.s != 0) {
|
||||
if (rgb.r == max) {
|
||||
hsb.h = (rgb.g - rgb.b) / delta;
|
||||
} else if (rgb.g == max) {
|
||||
hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
||||
} else {
|
||||
hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
||||
}
|
||||
} else {
|
||||
hsb.h = -1;
|
||||
}
|
||||
hsb.h *= 60;
|
||||
if (hsb.h < 0) {
|
||||
hsb.h += 360;
|
||||
}
|
||||
hsb.s *= 100/255;
|
||||
hsb.b *= 100/255;
|
||||
return hsb;
|
||||
},
|
||||
HSBToRGB = function (hsb) {
|
||||
var rgb = {};
|
||||
var h = Math.round(hsb.h);
|
||||
var s = Math.round(hsb.s*255/100);
|
||||
var v = Math.round(hsb.b*255/100);
|
||||
if(s == 0) {
|
||||
rgb.r = rgb.g = rgb.b = v;
|
||||
} else {
|
||||
var t1 = v;
|
||||
var t2 = (255-s)*v/255;
|
||||
var t3 = (t1-t2)*(h%60)/60;
|
||||
if(h==360) h = 0;
|
||||
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
||||
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
||||
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
||||
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
||||
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
||||
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
||||
else {rgb.r=0; rgb.g=0; rgb.b=0}
|
||||
}
|
||||
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
||||
},
|
||||
RGBToHex = function (rgb) {
|
||||
var hex = [
|
||||
rgb.r.toString(16),
|
||||
rgb.g.toString(16),
|
||||
rgb.b.toString(16)
|
||||
];
|
||||
$.each(hex, function (nr, val) {
|
||||
if (val.length == 1) {
|
||||
hex[nr] = '0' + val;
|
||||
}
|
||||
});
|
||||
return hex.join('');
|
||||
},
|
||||
HSBToHex = function (hsb) {
|
||||
return RGBToHex(HSBToRGB(hsb));
|
||||
},
|
||||
restoreOriginal = function () {
|
||||
var cal = $(this).parent();
|
||||
var col = cal.data('colorpicker').origColor;
|
||||
cal.data('colorpicker').color = col;
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
fillHSBFields(col, cal.get(0));
|
||||
setSelector(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
};
|
||||
return {
|
||||
init: function (opt) {
|
||||
opt = $.extend({}, defaults, opt||{});
|
||||
if (typeof opt.color == 'string') {
|
||||
opt.color = HexToHSB(opt.color);
|
||||
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
|
||||
opt.color = RGBToHSB(opt.color);
|
||||
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
|
||||
opt.color = fixHSB(opt.color);
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
return this.each(function () {
|
||||
if (!$(this).data('colorpickerId')) {
|
||||
var options = $.extend({}, opt);
|
||||
options.origColor = opt.color;
|
||||
var id = 'collorpicker_' + parseInt(Math.random() * 1000);
|
||||
$(this).data('colorpickerId', id);
|
||||
var cal = $(tpl).attr('id', id);
|
||||
if (options.flat) {
|
||||
cal.appendTo(this).show();
|
||||
} else {
|
||||
cal.appendTo(document.body);
|
||||
}
|
||||
options.fields = cal
|
||||
.find('input')
|
||||
.bind('keyup', keyDown)
|
||||
.bind('change', change)
|
||||
.bind('blur', blur)
|
||||
.bind('focus', focus);
|
||||
cal
|
||||
.find('span').bind('mousedown', downIncrement).end()
|
||||
.find('>div.colorpicker_current_color').bind('click', restoreOriginal);
|
||||
options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
|
||||
options.selectorIndic = options.selector.find('div div');
|
||||
options.el = this;
|
||||
options.hue = cal.find('div.colorpicker_hue div');
|
||||
cal.find('div.colorpicker_hue').bind('mousedown', downHue);
|
||||
options.newColor = cal.find('div.colorpicker_new_color');
|
||||
options.currentColor = cal.find('div.colorpicker_current_color');
|
||||
cal.data('colorpicker', options);
|
||||
cal.find('div.colorpicker_submit')
|
||||
.bind('mouseenter', enterSubmit)
|
||||
.bind('mouseleave', leaveSubmit)
|
||||
.bind('click', clickSubmit);
|
||||
fillRGBFields(options.color, cal.get(0));
|
||||
fillHSBFields(options.color, cal.get(0));
|
||||
fillHexFields(options.color, cal.get(0));
|
||||
setHue(options.color, cal.get(0));
|
||||
setSelector(options.color, cal.get(0));
|
||||
setCurrentColor(options.color, cal.get(0));
|
||||
setNewColor(options.color, cal.get(0));
|
||||
if (options.flat) {
|
||||
cal.css({
|
||||
position: 'relative',
|
||||
display: 'block'
|
||||
});
|
||||
} else {
|
||||
$(this).bind(options.eventName, show);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
showPicker: function() {
|
||||
return this.each( function () {
|
||||
if ($(this).data('colorpickerId')) {
|
||||
show.apply(this);
|
||||
}
|
||||
});
|
||||
},
|
||||
hidePicker: function() {
|
||||
return this.each( function () {
|
||||
if ($(this).data('colorpickerId')) {
|
||||
$('#' + $(this).data('colorpickerId')).hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
setColor: function(col) {
|
||||
if (typeof col == 'string') {
|
||||
col = HexToHSB(col);
|
||||
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
|
||||
col = RGBToHSB(col);
|
||||
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
|
||||
col = fixHSB(col);
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
return this.each(function(){
|
||||
if ($(this).data('colorpickerId')) {
|
||||
var cal = $('#' + $(this).data('colorpickerId'));
|
||||
cal.data('colorpicker').color = col;
|
||||
cal.data('colorpicker').origColor = col;
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHSBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setSelector(col, cal.get(0));
|
||||
setCurrentColor(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}();
|
||||
$.fn.extend({
|
||||
ColorPicker: ColorPicker.init,
|
||||
ColorPickerHide: ColorPicker.hidePicker,
|
||||
ColorPickerShow: ColorPicker.showPicker,
|
||||
ColorPickerSetColor: ColorPicker.setColor
|
||||
});
|
||||
})(jQuery)
|
||||
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
*
|
||||
* Zoomimage
|
||||
* Author: Stefan Petre www.eyecon.ro
|
||||
*
|
||||
*/
|
||||
(function($){
|
||||
var EYE = window.EYE = function() {
|
||||
var _registered = {
|
||||
init: []
|
||||
};
|
||||
return {
|
||||
init: function() {
|
||||
$.each(_registered.init, function(nr, fn){
|
||||
fn.call();
|
||||
});
|
||||
},
|
||||
extend: function(prop) {
|
||||
for (var i in prop) {
|
||||
if (prop[i] != undefined) {
|
||||
this[i] = prop[i];
|
||||
}
|
||||
}
|
||||
},
|
||||
register: function(fn, type) {
|
||||
if (!_registered[type]) {
|
||||
_registered[type] = [];
|
||||
}
|
||||
_registered[type].push(fn);
|
||||
}
|
||||
};
|
||||
}();
|
||||
$(EYE.init);
|
||||
})(jQuery);
|
||||
+4376
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,67 @@
|
||||
(function($){
|
||||
var initLayout = function() {
|
||||
var hash = window.location.hash.replace('#', '');
|
||||
var currentTab = $('ul.navigationTabs a')
|
||||
.bind('click', showTab)
|
||||
.filter('a[rel=' + hash + ']');
|
||||
if (currentTab.size() == 0) {
|
||||
currentTab = $('ul.navigationTabs a:first');
|
||||
}
|
||||
showTab.apply(currentTab.get(0));
|
||||
$('#colorpickerHolder').ColorPicker({flat: true});
|
||||
$('#colorpickerHolder2').ColorPicker({
|
||||
flat: true,
|
||||
color: '#00ff00',
|
||||
onSubmit: function(hsb, hex, rgb) {
|
||||
$('#colorSelector2 div').css('backgroundColor', '#' + hex);
|
||||
}
|
||||
});
|
||||
$('#colorpickerHolder2>div').css('position', 'absolute');
|
||||
var widt = false;
|
||||
$('#colorSelector2').bind('click', function() {
|
||||
$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
|
||||
widt = !widt;
|
||||
});
|
||||
$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
|
||||
onSubmit: function(hsb, hex, rgb, el) {
|
||||
$(el).val(hex);
|
||||
$(el).ColorPickerHide();
|
||||
},
|
||||
onBeforeShow: function () {
|
||||
$(this).ColorPickerSetColor(this.value);
|
||||
}
|
||||
})
|
||||
.bind('keyup', function(){
|
||||
$(this).ColorPickerSetColor(this.value);
|
||||
});
|
||||
$('#colorSelector').ColorPicker({
|
||||
color: '#0000ff',
|
||||
onShow: function (colpkr) {
|
||||
$(colpkr).fadeIn(500);
|
||||
return false;
|
||||
},
|
||||
onHide: function (colpkr) {
|
||||
$(colpkr).fadeOut(500);
|
||||
return false;
|
||||
},
|
||||
onChange: function (hsb, hex, rgb) {
|
||||
$('#colorSelector div').css('backgroundColor', '#' + hex);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var showTab = function(e) {
|
||||
var tabIndex = $('ul.navigationTabs a')
|
||||
.removeClass('active')
|
||||
.index(this);
|
||||
$(this)
|
||||
.addClass('active')
|
||||
.blur();
|
||||
$('div.tab')
|
||||
.hide()
|
||||
.eq(tabIndex)
|
||||
.show();
|
||||
};
|
||||
|
||||
EYE.register(initLayout, 'init');
|
||||
})(jQuery)
|
||||
@@ -0,0 +1,252 @@
|
||||
/**
|
||||
*
|
||||
* Utilities
|
||||
* Author: Stefan Petre www.eyecon.ro
|
||||
*
|
||||
*/
|
||||
(function($) {
|
||||
EYE.extend({
|
||||
getPosition : function(e, forceIt)
|
||||
{
|
||||
var x = 0;
|
||||
var y = 0;
|
||||
var es = e.style;
|
||||
var restoreStyles = false;
|
||||
if (forceIt && jQuery.curCSS(e,'display') == 'none') {
|
||||
var oldVisibility = es.visibility;
|
||||
var oldPosition = es.position;
|
||||
restoreStyles = true;
|
||||
es.visibility = 'hidden';
|
||||
es.display = 'block';
|
||||
es.position = 'absolute';
|
||||
}
|
||||
var el = e;
|
||||
if (el.getBoundingClientRect) { // IE
|
||||
var box = el.getBoundingClientRect();
|
||||
x = box.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) - 2;
|
||||
y = box.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - 2;
|
||||
} else {
|
||||
x = el.offsetLeft;
|
||||
y = el.offsetTop;
|
||||
el = el.offsetParent;
|
||||
if (e != el) {
|
||||
while (el) {
|
||||
x += el.offsetLeft;
|
||||
y += el.offsetTop;
|
||||
el = el.offsetParent;
|
||||
}
|
||||
}
|
||||
if (jQuery.browser.safari && jQuery.curCSS(e, 'position') == 'absolute' ) {
|
||||
x -= document.body.offsetLeft;
|
||||
y -= document.body.offsetTop;
|
||||
}
|
||||
el = e.parentNode;
|
||||
while (el && el.tagName.toUpperCase() != 'BODY' && el.tagName.toUpperCase() != 'HTML')
|
||||
{
|
||||
if (jQuery.curCSS(el, 'display') != 'inline') {
|
||||
x -= el.scrollLeft;
|
||||
y -= el.scrollTop;
|
||||
}
|
||||
el = el.parentNode;
|
||||
}
|
||||
}
|
||||
if (restoreStyles == true) {
|
||||
es.display = 'none';
|
||||
es.position = oldPosition;
|
||||
es.visibility = oldVisibility;
|
||||
}
|
||||
return {x:x, y:y};
|
||||
},
|
||||
getSize : function(e)
|
||||
{
|
||||
var w = parseInt(jQuery.curCSS(e,'width'), 10);
|
||||
var h = parseInt(jQuery.curCSS(e,'height'), 10);
|
||||
var wb = 0;
|
||||
var hb = 0;
|
||||
if (jQuery.curCSS(e, 'display') != 'none') {
|
||||
wb = e.offsetWidth;
|
||||
hb = e.offsetHeight;
|
||||
} else {
|
||||
var es = e.style;
|
||||
var oldVisibility = es.visibility;
|
||||
var oldPosition = es.position;
|
||||
es.visibility = 'hidden';
|
||||
es.display = 'block';
|
||||
es.position = 'absolute';
|
||||
wb = e.offsetWidth;
|
||||
hb = e.offsetHeight;
|
||||
es.display = 'none';
|
||||
es.position = oldPosition;
|
||||
es.visibility = oldVisibility;
|
||||
}
|
||||
return {w:w, h:h, wb:wb, hb:hb};
|
||||
},
|
||||
getClient : function(e)
|
||||
{
|
||||
var h, w;
|
||||
if (e) {
|
||||
w = e.clientWidth;
|
||||
h = e.clientHeight;
|
||||
} else {
|
||||
var de = document.documentElement;
|
||||
w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
|
||||
h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
|
||||
}
|
||||
return {w:w,h:h};
|
||||
},
|
||||
getScroll : function (e)
|
||||
{
|
||||
var t=0, l=0, w=0, h=0, iw=0, ih=0;
|
||||
if (e && e.nodeName.toLowerCase() != 'body') {
|
||||
t = e.scrollTop;
|
||||
l = e.scrollLeft;
|
||||
w = e.scrollWidth;
|
||||
h = e.scrollHeight;
|
||||
} else {
|
||||
if (document.documentElement) {
|
||||
t = document.documentElement.scrollTop;
|
||||
l = document.documentElement.scrollLeft;
|
||||
w = document.documentElement.scrollWidth;
|
||||
h = document.documentElement.scrollHeight;
|
||||
} else if (document.body) {
|
||||
t = document.body.scrollTop;
|
||||
l = document.body.scrollLeft;
|
||||
w = document.body.scrollWidth;
|
||||
h = document.body.scrollHeight;
|
||||
}
|
||||
if (typeof pageYOffset != 'undefined') {
|
||||
t = pageYOffset;
|
||||
l = pageXOffset;
|
||||
}
|
||||
iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
|
||||
ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
|
||||
}
|
||||
return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
|
||||
},
|
||||
getMargins : function(e, toInteger)
|
||||
{
|
||||
var t = jQuery.curCSS(e,'marginTop') || '';
|
||||
var r = jQuery.curCSS(e,'marginRight') || '';
|
||||
var b = jQuery.curCSS(e,'marginBottom') || '';
|
||||
var l = jQuery.curCSS(e,'marginLeft') || '';
|
||||
if (toInteger)
|
||||
return {
|
||||
t: parseInt(t, 10)||0,
|
||||
r: parseInt(r, 10)||0,
|
||||
b: parseInt(b, 10)||0,
|
||||
l: parseInt(l, 10)
|
||||
};
|
||||
else
|
||||
return {t: t, r: r, b: b, l: l};
|
||||
},
|
||||
getPadding : function(e, toInteger)
|
||||
{
|
||||
var t = jQuery.curCSS(e,'paddingTop') || '';
|
||||
var r = jQuery.curCSS(e,'paddingRight') || '';
|
||||
var b = jQuery.curCSS(e,'paddingBottom') || '';
|
||||
var l = jQuery.curCSS(e,'paddingLeft') || '';
|
||||
if (toInteger)
|
||||
return {
|
||||
t: parseInt(t, 10)||0,
|
||||
r: parseInt(r, 10)||0,
|
||||
b: parseInt(b, 10)||0,
|
||||
l: parseInt(l, 10)
|
||||
};
|
||||
else
|
||||
return {t: t, r: r, b: b, l: l};
|
||||
},
|
||||
getBorder : function(e, toInteger)
|
||||
{
|
||||
var t = jQuery.curCSS(e,'borderTopWidth') || '';
|
||||
var r = jQuery.curCSS(e,'borderRightWidth') || '';
|
||||
var b = jQuery.curCSS(e,'borderBottomWidth') || '';
|
||||
var l = jQuery.curCSS(e,'borderLeftWidth') || '';
|
||||
if (toInteger)
|
||||
return {
|
||||
t: parseInt(t, 10)||0,
|
||||
r: parseInt(r, 10)||0,
|
||||
b: parseInt(b, 10)||0,
|
||||
l: parseInt(l, 10)||0
|
||||
};
|
||||
else
|
||||
return {t: t, r: r, b: b, l: l};
|
||||
},
|
||||
traverseDOM : function(nodeEl, func)
|
||||
{
|
||||
func(nodeEl);
|
||||
nodeEl = nodeEl.firstChild;
|
||||
while(nodeEl){
|
||||
EYE.traverseDOM(nodeEl, func);
|
||||
nodeEl = nodeEl.nextSibling;
|
||||
}
|
||||
},
|
||||
getInnerWidth : function(el, scroll) {
|
||||
var offsetW = el.offsetWidth;
|
||||
return scroll ? Math.max(el.scrollWidth,offsetW) - offsetW + el.clientWidth:el.clientWidth;
|
||||
},
|
||||
getInnerHeight : function(el, scroll) {
|
||||
var offsetH = el.offsetHeight;
|
||||
return scroll ? Math.max(el.scrollHeight,offsetH) - offsetH + el.clientHeight:el.clientHeight;
|
||||
},
|
||||
getExtraWidth : function(el) {
|
||||
if($.boxModel)
|
||||
return (parseInt($.curCSS(el, 'paddingLeft'))||0)
|
||||
+ (parseInt($.curCSS(el, 'paddingRight'))||0)
|
||||
+ (parseInt($.curCSS(el, 'borderLeftWidth'))||0)
|
||||
+ (parseInt($.curCSS(el, 'borderRightWidth'))||0);
|
||||
return 0;
|
||||
},
|
||||
getExtraHeight : function(el) {
|
||||
if($.boxModel)
|
||||
return (parseInt($.curCSS(el, 'paddingTop'))||0)
|
||||
+ (parseInt($.curCSS(el, 'paddingBottom'))||0)
|
||||
+ (parseInt($.curCSS(el, 'borderTopWidth'))||0)
|
||||
+ (parseInt($.curCSS(el, 'borderBottomWidth'))||0);
|
||||
return 0;
|
||||
},
|
||||
isChildOf: function(parentEl, el, container) {
|
||||
if (parentEl == el) {
|
||||
return true;
|
||||
}
|
||||
if (!el || !el.nodeType || el.nodeType != 1) {
|
||||
return false;
|
||||
}
|
||||
if (parentEl.contains && !$.browser.safari) {
|
||||
return parentEl.contains(el);
|
||||
}
|
||||
if ( parentEl.compareDocumentPosition ) {
|
||||
return !!(parentEl.compareDocumentPosition(el) & 16);
|
||||
}
|
||||
var prEl = el.parentNode;
|
||||
while(prEl && prEl != container) {
|
||||
if (prEl == parentEl)
|
||||
return true;
|
||||
prEl = prEl.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
centerEl : function(el, axis)
|
||||
{
|
||||
var clientScroll = EYE.getScroll();
|
||||
var size = EYE.getSize(el);
|
||||
if (!axis || axis == 'vertically')
|
||||
$(el).css(
|
||||
{
|
||||
top: clientScroll.t + ((Math.min(clientScroll.h,clientScroll.ih) - size.hb)/2) + 'px'
|
||||
}
|
||||
);
|
||||
if (!axis || axis == 'horizontally')
|
||||
$(el).css(
|
||||
{
|
||||
left: clientScroll.l + ((Math.min(clientScroll.w,clientScroll.iw) - size.wb)/2) + 'px'
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
if (!$.easing.easeout) {
|
||||
$.easing.easeout = function(p, n, firstNum, delta, duration) {
|
||||
return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
|
||||
};
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,466 @@
|
||||
/*
|
||||
Copyright (C) 2012 Sencha Inc.
|
||||
Copyright (C) 2011 Sencha Inc.
|
||||
|
||||
Author: Ariya Hidayat.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/*jslint continue: true, indent: 4 */
|
||||
/*global exports:true, module:true, window:true */
|
||||
|
||||
(function () {
|
||||
|
||||
'use strict';
|
||||
|
||||
function cssbeautify(style, opt) {
|
||||
|
||||
var options, index = 0, length = style.length, blocks, formatted = '',
|
||||
ch, ch2, str, state, State, depth, quote, comment,
|
||||
openbracesuffix = true,
|
||||
autosemicolon = false,
|
||||
trimRight;
|
||||
|
||||
options = arguments.length > 1 ? opt : {};
|
||||
if (typeof options.indent === 'undefined') {
|
||||
options.indent = ' ';
|
||||
}
|
||||
if (typeof options.openbrace === 'string') {
|
||||
openbracesuffix = (options.openbrace === 'end-of-line');
|
||||
}
|
||||
if (typeof options.autosemicolon === 'boolean') {
|
||||
autosemicolon = options.autosemicolon;
|
||||
}
|
||||
|
||||
function isWhitespace(c) {
|
||||
return (c === ' ') || (c === '\n') || (c === '\t') || (c === '\r') || (c === '\f');
|
||||
}
|
||||
|
||||
function isQuote(c) {
|
||||
return (c === '\'') || (c === '"');
|
||||
}
|
||||
|
||||
// FIXME: handle Unicode characters
|
||||
function isName(c) {
|
||||
return (ch >= 'a' && ch <= 'z') ||
|
||||
(ch >= 'A' && ch <= 'Z') ||
|
||||
(ch >= '0' && ch <= '9') ||
|
||||
'-_*.:#'.indexOf(c) >= 0;
|
||||
}
|
||||
|
||||
function appendIndent() {
|
||||
var i;
|
||||
for (i = depth; i > 0; i -= 1) {
|
||||
formatted += options.indent;
|
||||
}
|
||||
}
|
||||
|
||||
function openBlock() {
|
||||
formatted = trimRight(formatted);
|
||||
if (openbracesuffix) {
|
||||
formatted += ' {';
|
||||
} else {
|
||||
formatted += '\n';
|
||||
appendIndent();
|
||||
formatted += '{';
|
||||
}
|
||||
if (ch2 !== '\n') {
|
||||
formatted += '\n';
|
||||
}
|
||||
depth += 1;
|
||||
}
|
||||
|
||||
function closeBlock() {
|
||||
depth -= 1;
|
||||
formatted = trimRight(formatted);
|
||||
|
||||
if (autosemicolon) {
|
||||
if (formatted.charAt(formatted.length - 1) !== ';') {
|
||||
formatted += ';';
|
||||
}
|
||||
}
|
||||
|
||||
formatted += '\n';
|
||||
appendIndent();
|
||||
formatted += '}';
|
||||
blocks.push(formatted);
|
||||
formatted = '';
|
||||
}
|
||||
|
||||
if (String.prototype.trimRight) {
|
||||
trimRight = function (s) {
|
||||
return s.trimRight();
|
||||
};
|
||||
} else {
|
||||
// old Internet Explorer
|
||||
trimRight = function (s) {
|
||||
return s.replace(/\s+$/, '');
|
||||
};
|
||||
}
|
||||
|
||||
State = {
|
||||
Start: 0,
|
||||
AtRule: 1,
|
||||
Block: 2,
|
||||
Selector: 3,
|
||||
Ruleset: 4,
|
||||
Property: 5,
|
||||
Separator: 6,
|
||||
Expression: 7,
|
||||
URL: 8
|
||||
};
|
||||
|
||||
depth = 0;
|
||||
state = State.Start;
|
||||
comment = false;
|
||||
blocks = [];
|
||||
|
||||
// We want to deal with LF (\n) only
|
||||
style = style.replace(/\r\n/g, '\n');
|
||||
|
||||
while (index < length) {
|
||||
ch = style.charAt(index);
|
||||
ch2 = style.charAt(index + 1);
|
||||
index += 1;
|
||||
|
||||
// Inside a string literal?
|
||||
if (isQuote(quote)) {
|
||||
formatted += ch;
|
||||
if (ch === quote) {
|
||||
quote = null;
|
||||
}
|
||||
if (ch === '\\' && ch2 === quote) {
|
||||
// Don't treat escaped character as the closing quote
|
||||
formatted += ch2;
|
||||
index += 1;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// Starting a string literal?
|
||||
if (isQuote(ch)) {
|
||||
formatted += ch;
|
||||
quote = ch;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Comment
|
||||
if (comment) {
|
||||
formatted += ch;
|
||||
if (ch === '*' && ch2 === '/') {
|
||||
comment = false;
|
||||
formatted += ch2;
|
||||
index += 1;
|
||||
}
|
||||
continue;
|
||||
} else {
|
||||
if (ch === '/' && ch2 === '*') {
|
||||
comment = true;
|
||||
formatted += ch;
|
||||
formatted += ch2;
|
||||
index += 1;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (state === State.Start) {
|
||||
|
||||
if (blocks.length === 0) {
|
||||
if (isWhitespace(ch) && formatted.length === 0) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// Copy white spaces and control characters
|
||||
if (ch <= ' ' || ch.charCodeAt(0) >= 128) {
|
||||
state = State.Start;
|
||||
formatted += ch;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Selector or at-rule
|
||||
if (isName(ch) || (ch === '@')) {
|
||||
|
||||
// Clear trailing whitespaces and linefeeds.
|
||||
str = trimRight(formatted);
|
||||
|
||||
if (str.length === 0) {
|
||||
// If we have empty string after removing all the trailing
|
||||
// spaces, that means we are right after a block.
|
||||
// Ensure a blank line as the separator.
|
||||
if (blocks.length > 0) {
|
||||
formatted = '\n\n';
|
||||
}
|
||||
} else {
|
||||
// After finishing a ruleset or directive statement,
|
||||
// there should be one blank line.
|
||||
if (str.charAt(str.length - 1) === '}' ||
|
||||
str.charAt(str.length - 1) === ';') {
|
||||
|
||||
formatted = str + '\n\n';
|
||||
} else {
|
||||
// After block comment, keep all the linefeeds but
|
||||
// start from the first column (remove whitespaces prefix).
|
||||
while (true) {
|
||||
ch2 = formatted.charAt(formatted.length - 1);
|
||||
if (ch2 !== ' ' && ch2.charCodeAt(0) !== 9) {
|
||||
break;
|
||||
}
|
||||
formatted = formatted.substr(0, formatted.length - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
formatted += ch;
|
||||
state = (ch === '@') ? State.AtRule : State.Selector;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
if (state === State.AtRule) {
|
||||
|
||||
// ';' terminates a statement.
|
||||
if (ch === ';') {
|
||||
formatted += ch;
|
||||
state = State.Start;
|
||||
continue;
|
||||
}
|
||||
|
||||
// '{' starts a block
|
||||
if (ch === '{') {
|
||||
openBlock();
|
||||
state = State.Block;
|
||||
continue;
|
||||
}
|
||||
|
||||
formatted += ch;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (state === State.Block) {
|
||||
|
||||
// Selector
|
||||
if (isName(ch)) {
|
||||
|
||||
// Clear trailing whitespaces and linefeeds.
|
||||
str = trimRight(formatted);
|
||||
|
||||
if (str.length === 0) {
|
||||
// If we have empty string after removing all the trailing
|
||||
// spaces, that means we are right after a block.
|
||||
// Ensure a blank line as the separator.
|
||||
if (blocks.length > 0) {
|
||||
formatted = '\n\n';
|
||||
}
|
||||
} else {
|
||||
// Insert blank line if necessary.
|
||||
if (str.charAt(str.length - 1) === '}') {
|
||||
formatted = str + '\n\n';
|
||||
} else {
|
||||
// After block comment, keep all the linefeeds but
|
||||
// start from the first column (remove whitespaces prefix).
|
||||
while (true) {
|
||||
ch2 = formatted.charAt(formatted.length - 1);
|
||||
if (ch2 !== ' ' && ch2.charCodeAt(0) !== 9) {
|
||||
break;
|
||||
}
|
||||
formatted = formatted.substr(0, formatted.length - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
appendIndent();
|
||||
formatted += ch;
|
||||
state = State.Selector;
|
||||
continue;
|
||||
}
|
||||
|
||||
// '}' resets the state.
|
||||
if (ch === '}') {
|
||||
closeBlock();
|
||||
state = State.Start;
|
||||
continue;
|
||||
}
|
||||
|
||||
formatted += ch;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (state === State.Selector) {
|
||||
|
||||
// '{' starts the ruleset.
|
||||
if (ch === '{') {
|
||||
openBlock();
|
||||
state = State.Ruleset;
|
||||
continue;
|
||||
}
|
||||
|
||||
// '}' resets the state.
|
||||
if (ch === '}') {
|
||||
closeBlock();
|
||||
state = State.Start;
|
||||
continue;
|
||||
}
|
||||
|
||||
formatted += ch;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (state === State.Ruleset) {
|
||||
|
||||
// '}' finishes the ruleset.
|
||||
if (ch === '}') {
|
||||
closeBlock();
|
||||
state = State.Start;
|
||||
if (depth > 0) {
|
||||
state = State.Block;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// Make sure there is no blank line or trailing spaces inbetween
|
||||
if (ch === '\n') {
|
||||
formatted = trimRight(formatted);
|
||||
formatted += '\n';
|
||||
continue;
|
||||
}
|
||||
|
||||
// property name
|
||||
if (!isWhitespace(ch)) {
|
||||
formatted = trimRight(formatted);
|
||||
formatted += '\n';
|
||||
appendIndent();
|
||||
formatted += ch;
|
||||
state = State.Property;
|
||||
continue;
|
||||
}
|
||||
formatted += ch;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (state === State.Property) {
|
||||
|
||||
// ':' concludes the property.
|
||||
if (ch === ':') {
|
||||
formatted = trimRight(formatted);
|
||||
formatted += ': ';
|
||||
state = State.Expression;
|
||||
if (isWhitespace(ch2)) {
|
||||
state = State.Separator;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// '}' finishes the ruleset.
|
||||
if (ch === '}') {
|
||||
closeBlock();
|
||||
state = State.Start;
|
||||
if (depth > 0) {
|
||||
state = State.Block;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
formatted += ch;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (state === State.Separator) {
|
||||
|
||||
// Non-whitespace starts the expression.
|
||||
if (!isWhitespace(ch)) {
|
||||
formatted += ch;
|
||||
state = State.Expression;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Anticipate string literal.
|
||||
if (isQuote(ch2)) {
|
||||
state = State.Expression;
|
||||
}
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
if (state === State.Expression) {
|
||||
|
||||
// '}' finishes the ruleset.
|
||||
if (ch === '}') {
|
||||
closeBlock();
|
||||
state = State.Start;
|
||||
if (depth > 0) {
|
||||
state = State.Block;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// ';' completes the declaration.
|
||||
if (ch === ';') {
|
||||
formatted = trimRight(formatted);
|
||||
formatted += ';\n';
|
||||
state = State.Ruleset;
|
||||
continue;
|
||||
}
|
||||
|
||||
formatted += ch;
|
||||
|
||||
if (ch === '(') {
|
||||
if (formatted.charAt(formatted.length - 2) === 'l' &&
|
||||
formatted.charAt(formatted.length - 3) === 'r' &&
|
||||
formatted.charAt(formatted.length - 4) === 'u') {
|
||||
|
||||
// URL starts with '(' and closes with ')'.
|
||||
state = State.URL;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
if (state === State.URL) {
|
||||
|
||||
|
||||
// ')' finishes the URL (only if it is not escaped).
|
||||
if (ch === ')' && formatted.charAt(formatted.length - 1 !== '\\')) {
|
||||
formatted += ch;
|
||||
state = State.Expression;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// The default action is to copy the character (to prevent
|
||||
// infinite loop).
|
||||
formatted += ch;
|
||||
}
|
||||
|
||||
formatted = blocks.join('') + formatted;
|
||||
|
||||
return formatted;
|
||||
}
|
||||
|
||||
if (typeof exports !== 'undefined') {
|
||||
// Node.js module.
|
||||
module.exports = exports = cssbeautify;
|
||||
} else if (typeof window === 'object') {
|
||||
// Browser loading.
|
||||
window.cssbeautify = cssbeautify;
|
||||
}
|
||||
|
||||
}());
|
||||
+216
@@ -0,0 +1,216 @@
|
||||
/* Base */
|
||||
a, .btn-link {
|
||||
color: @skinColor;
|
||||
}
|
||||
|
||||
a:hover, a:focus, .btn-link:hover, .btn-link:focus {
|
||||
color: lighten(@skinColor, 5%);
|
||||
}
|
||||
|
||||
a:active, .btn-link:active {
|
||||
color: darken(@skinColor, 5%);
|
||||
}
|
||||
|
||||
/* Sidebar Left */
|
||||
.sidebar-left {
|
||||
.sidebar-header {
|
||||
|
||||
.sidebar-toggle {
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
html.sidebar-left-collapsed {
|
||||
|
||||
// boxed and scroll
|
||||
&.scroll,
|
||||
&.boxed {
|
||||
.sidebar-left {
|
||||
|
||||
.nav-main {
|
||||
|
||||
li {
|
||||
&.nav-active {
|
||||
a:hover {
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > li:hover {
|
||||
|
||||
& > a {
|
||||
|
||||
span.label {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Layout Boxed - small than min-width */
|
||||
@media only screen and (max-width: 1199px) {
|
||||
html.boxed {
|
||||
.header {
|
||||
border-top-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Layout Boxed - larger or equal min width */
|
||||
@media only screen and (min-width: 1200px) {
|
||||
|
||||
html.boxed {
|
||||
.header {
|
||||
border-top-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
html.boxed {
|
||||
.sidebar-right {
|
||||
border-top-color: @skinColor;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Userbox - Open */
|
||||
.userbox.open {
|
||||
.dropdown-menu {
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Mailbox */
|
||||
.mailbox {
|
||||
.mailbox-mail-list {
|
||||
|
||||
li {
|
||||
|
||||
&.active {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.mailbox-mail {
|
||||
|
||||
.mailbox-close-mail {
|
||||
color: @skinColor;
|
||||
|
||||
&:hover {
|
||||
color: lighten(@skinColor, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
.panel-heading {
|
||||
.panel-actions {
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Media Gallery */
|
||||
.media-gallery {
|
||||
|
||||
ul.mg-tags {
|
||||
|
||||
& > li {
|
||||
|
||||
a {
|
||||
|
||||
&:hover {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mg-files {
|
||||
|
||||
.thumbnail {
|
||||
|
||||
.thumb-preview {
|
||||
|
||||
.mg-thumb-options {
|
||||
|
||||
.mg-zoom {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
|
||||
.mg-toolbar {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.thumbnail-selected {
|
||||
box-shadow: 0 0 8px -1px @skinColor;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Sign Screens - Wrappers */
|
||||
.body-sign {
|
||||
|
||||
.panel-sign {
|
||||
|
||||
.panel-title-sign {
|
||||
.title {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
border-top-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Lock Screen */
|
||||
.body-locked {
|
||||
|
||||
.current-user {
|
||||
|
||||
.user-image {
|
||||
border-color: @skinColor;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
+772
@@ -0,0 +1,772 @@
|
||||
/* Blockquote */
|
||||
blockquote.primary {
|
||||
border-color: @skinColor;
|
||||
}
|
||||
|
||||
/* Nav Pills */
|
||||
.nav-pills-primary {
|
||||
> li {
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: @skinColor;
|
||||
background-color: lighten(@skinColor, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
> li.active {
|
||||
> a {
|
||||
&,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dropdown Menu */
|
||||
.dropdown-menu & >.active & > a,
|
||||
.dropdown-menu & >.active & > a:hover,
|
||||
.dropdown-menu & >.active & > a:focus {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
|
||||
.open > .dropdown-toggle.btn-primary {
|
||||
background: @skinColor;
|
||||
border-color: darken(@skinColor, 5%);
|
||||
}
|
||||
|
||||
body .btn-primary.dropdown-toggle {
|
||||
border-left-color: lighten(@skinColor, 8%);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
body {
|
||||
|
||||
.btn-primary {
|
||||
.buttonBackground(@color-primary, spin(@color-primary, 20%));
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
.buttonBackground(@color-success, spin(@color-success, 20%));
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
.buttonBackground(@color-warning, spin(@color-warning, 20%));
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
.buttonBackground(@color-danger, spin(@color-danger, 20%));
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
.buttonBackground(@color-info, spin(@color-info, 20%));
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
.buttonBackground(@color-dark, spin(@color-dark, 20%));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Switch*/
|
||||
.switch {
|
||||
&.switch-primary {
|
||||
.ios-switch .on-background {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.label-primary {
|
||||
background: @skinColor;
|
||||
}
|
||||
|
||||
/* Text Primary */
|
||||
.text-primary {
|
||||
color: @skinColor !important;
|
||||
}
|
||||
|
||||
/* BG Primary */
|
||||
.bg-primary {
|
||||
background: @skinColor;
|
||||
}
|
||||
|
||||
/* Alternative Font Style */
|
||||
.alternative-font {
|
||||
color: @skinColor;
|
||||
}
|
||||
|
||||
/* Hightlight */
|
||||
.highlight {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
|
||||
/* Drop Caps */
|
||||
p.drop-caps {
|
||||
&.colored:first-child:first-letter {
|
||||
color: @skinColor;
|
||||
}
|
||||
&.colored.secundary:first-child:first-letter {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Well */
|
||||
.well.primary {
|
||||
background: @skinColor;
|
||||
border-color: darken( @skinColor, 10% );
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.form-control:focus {
|
||||
border-color: lighten(@skinColor, 20%);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(red(@skinColor), green(@skinColor), blue(@skinColor), 0.3);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
.toggle-sidebar-left {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
h2 {
|
||||
border-bottom-color: @skinColor;
|
||||
}
|
||||
.sidebar-right-toggle {
|
||||
&:hover {
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
ul.nav-main {
|
||||
|
||||
& > li {
|
||||
&.nav-active {
|
||||
> a {
|
||||
box-shadow: 2px 0 0 @skinColor inset;
|
||||
}
|
||||
& > i {
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
.nav-children {
|
||||
|
||||
li {
|
||||
&.nav-active {
|
||||
> a {
|
||||
color: @skinColor;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Nano Scroller Plugin */
|
||||
html.no-overflowscrolling {
|
||||
.nano {
|
||||
> .nano-pane {
|
||||
|
||||
> .nano-slider {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Nav Pills */
|
||||
.nav-pills > .active {
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination {
|
||||
> li {
|
||||
a {
|
||||
color: @skinColor;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: lighten(@skinColor, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a,
|
||||
span {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @skinColor;
|
||||
border-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
html.dark {
|
||||
.pagination > li.active {
|
||||
a,
|
||||
span {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @skinColor;
|
||||
border-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Fullcalendar */
|
||||
.fc {
|
||||
|
||||
.fc-widget-header {
|
||||
background: @skinColor;
|
||||
border-color: @skinColor;
|
||||
}
|
||||
|
||||
.fc-header-title {
|
||||
h2 {
|
||||
|
||||
&:before {
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
background: @skinColor;
|
||||
border-color: @skinColor;
|
||||
}
|
||||
|
||||
.fc-event.fc-event-primary {
|
||||
background: @skinColor;
|
||||
border-color: @skinColor;
|
||||
}
|
||||
|
||||
/* Maps */
|
||||
.jqvmap-zoomin,
|
||||
.jqvmap-zoomout {
|
||||
background: @skinColor;
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
.timeline {
|
||||
|
||||
.tm-items {
|
||||
|
||||
& > li {
|
||||
|
||||
.tm-datetime {
|
||||
|
||||
.tm-datetime-time {
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
.tm-icon {
|
||||
border-color: @skinColor;
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.timeline-simple {
|
||||
|
||||
.tm-body {
|
||||
|
||||
.tm-items {
|
||||
|
||||
& > li {
|
||||
|
||||
&:before {
|
||||
background: @skinColor;
|
||||
box-shadow: 0 0 0 3px #FFF, 0 0 0 6px @skinColor;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
html.dark .timeline.timeline-simple .tm-body .tm-items > li:before {
|
||||
background: @skinColor;
|
||||
box-shadow: 0 0 0 3px lighten(#1d2127, 8%), 0 0 0 6px @skinColor;
|
||||
}
|
||||
|
||||
/* Princing Table */
|
||||
.pricing-table {
|
||||
h3 {
|
||||
span {
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.most-popular {
|
||||
h3 {
|
||||
background-color: @skinColor !important;
|
||||
color: #FFF !important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Data Tables Loading */
|
||||
.dataTables_processing {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
|
||||
/* Accordion */
|
||||
.panel-group {
|
||||
.panel-accordion {
|
||||
.panel-heading {
|
||||
|
||||
a {
|
||||
color: @skinColor;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert-primary {
|
||||
background-color: @skinColor;
|
||||
border-color: darken(@skinColor, 3%);
|
||||
|
||||
.alert-link {
|
||||
color: darken(@skinColor, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Nestable */
|
||||
.dd-handle {
|
||||
&:hover {
|
||||
color: @skinColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dd-placeholder {
|
||||
background: lighten(@skinColor, 55%);
|
||||
border-color: @skinColor;
|
||||
}
|
||||
|
||||
/* Panels */
|
||||
.panel-highlight {
|
||||
|
||||
.panel-heading {
|
||||
background-color: @skinColor;
|
||||
border-color: @skinColor;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
html .panel-primary {
|
||||
.panel-heading {
|
||||
background: @skinColor;
|
||||
border-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
&.bg-primary {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
&.bg-primary {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-featured-primary {
|
||||
border-color: @skinColor;
|
||||
|
||||
.panel-title {
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading-icon {
|
||||
&.bg-primary {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-group .panel-accordion-primary {
|
||||
.panel-heading .panel-title a {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.progress-bar {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
|
||||
.progress {
|
||||
.progress-bar-primary {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toggle */
|
||||
.toggle {
|
||||
&> {
|
||||
label {
|
||||
border-left-color: @skinColor;
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
> label {
|
||||
background: @skinColor !important;
|
||||
border-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Treeview */
|
||||
.jstree-default {
|
||||
.jstree-hovered {
|
||||
background-color: lighten(@skinColor, 55%) !important;
|
||||
}
|
||||
.jstree-clicked {
|
||||
background-color: lighten(@skinColor, 45%) !important;
|
||||
}
|
||||
.colored {
|
||||
color: @skinColor !important;
|
||||
.jstree-icon {
|
||||
color: @skinColor !important;
|
||||
}
|
||||
}
|
||||
.colored-icon {
|
||||
.jstree-icon {
|
||||
color: @skinColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Widgets */
|
||||
.sidebar-widget {
|
||||
|
||||
&.widget-tasks {
|
||||
|
||||
ul {
|
||||
li {
|
||||
|
||||
&:before {
|
||||
border-color: @skinColor;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget-twitter-profile {
|
||||
background-color: @skinColor;
|
||||
.profile-quote {
|
||||
background-color: lighten(@skinColor, 4%);
|
||||
.quote-footer {
|
||||
border-top-color: rgba(red(lighten(@skinColor, 10%)), green(lighten(@skinColor, 10%)), blue(lighten(@skinColor, 10%)), 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget-profile-info {
|
||||
.profile-info {
|
||||
.profile-footer {
|
||||
border-top-color: rgba(red(lighten(@skinColor, 10%)), green(lighten(@skinColor, 10%)), blue(lighten(@skinColor, 10%)), 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Thumb Info */
|
||||
.thumb-info {
|
||||
.thumb-info-type {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Social Icons */
|
||||
.social-icons-list {
|
||||
a {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Notifications */
|
||||
.notifications {
|
||||
.notification-menu {
|
||||
.notification-title {
|
||||
background: @skinColor;
|
||||
.label-default {
|
||||
background-color: darken(@skinColor, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notifications .notification-menu,
|
||||
.notifications .notification-icon {
|
||||
&:before {
|
||||
border-bottom-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-pnotify {
|
||||
.notification-primary {
|
||||
background: rgba(red(@skinColor), green(@skinColor), blue(@skinColor), 0.95);
|
||||
}
|
||||
|
||||
&.stack-bar-top,
|
||||
&.stack-bar-bottom {
|
||||
.notification-primary {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-pnotify.notification-primary {
|
||||
.notification,
|
||||
.notification-primary {
|
||||
background: rgba(red(@skinColor), green(@skinColor), blue(@skinColor), 0.95);
|
||||
}
|
||||
|
||||
&.stack-bar-top,
|
||||
&.stack-bar-bottom {
|
||||
.notification,
|
||||
.notification-primary {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-block-primary {
|
||||
.fa {
|
||||
color: @skinColor;
|
||||
}
|
||||
&.modal-header-color {
|
||||
.panel-heading {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
&.modal-full-color {
|
||||
.panel {
|
||||
background-color: lighten(@skinColor, 8%);
|
||||
}
|
||||
.panel-heading {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
.panel-footer {
|
||||
background-color: lighten(@skinColor, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal Icon */
|
||||
.modal-block-primary .modal-icon {
|
||||
.fa {
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
html,
|
||||
html.dark {
|
||||
body {
|
||||
.tabs-primary {
|
||||
.nav-tabs {
|
||||
&,
|
||||
&.nav-justified {
|
||||
li {
|
||||
a {
|
||||
&,
|
||||
&:hover {
|
||||
color: @skinColor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-top-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
border-top-color: @skinColor;
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabs-bottom {
|
||||
.nav-tabs {
|
||||
&,
|
||||
&.nav-justified {
|
||||
li {
|
||||
a {
|
||||
&:hover {
|
||||
border-bottom-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
border-top-color: #FFF;
|
||||
border-bottom-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabs-vertical {
|
||||
&.tabs-left {
|
||||
li {
|
||||
a {
|
||||
&:hover {
|
||||
border-left-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
border-left-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tabs-right {
|
||||
li {
|
||||
a {
|
||||
&:hover {
|
||||
border-right-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
border-right-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Simple List */
|
||||
ul.simple-bullet-list {
|
||||
li {
|
||||
&:before {
|
||||
border-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Simple Card List */
|
||||
.simple-card-list {
|
||||
li.primary {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Search Results */
|
||||
.search-content {
|
||||
.search-toolbar {
|
||||
.nav-pills {
|
||||
li.active {
|
||||
a {
|
||||
color: @skinColor;
|
||||
border-bottom-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-results-list {
|
||||
.result-thumb {
|
||||
.fa {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.search-content {
|
||||
.search-toolbar {
|
||||
.nav-pills {
|
||||
li.active {
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @skinColor;
|
||||
border-bottom-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Time Picker */
|
||||
.bootstrap-timepicker-widget table td a:hover {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
// Core variables and mixins
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
// Shared Front-End and Back-End
|
||||
@import "shared";
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
@gradient: 'false';
|
||||
|
||||
.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
||||
color: @textColor;
|
||||
text-shadow: @textShadow;
|
||||
.gradient(@primaryColor, @secondaryColor, @gradient);
|
||||
border-color: @primaryColor;
|
||||
}
|
||||
|
||||
// Gradients
|
||||
.gradient(@startColor: #555, @endColor: #333, @gradient) when not (@gradient) {
|
||||
background-color: @startColor;
|
||||
}
|
||||
|
||||
.gradient(@startColor: #555, @endColor: #333, @gradient) when (@gradient) {
|
||||
background-color: mix(@startColor, @endColor, 60%);
|
||||
background-image: -moz-linear-gradient(top, @startColor, @endColor);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));
|
||||
background-image: -webkit-linear-gradient(top, @startColor, @endColor);
|
||||
background-image: -o-linear-gradient(top, @startColor, @endColor);
|
||||
background-image: linear-gradient(to bottom, @startColor, @endColor);
|
||||
background-repeat: repeat-x;
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor)));
|
||||
}
|
||||
|
||||
// Button Background
|
||||
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) when not (@gradient) {
|
||||
.gradientBar(@startColor, @endColor, @textColor, @textShadow);
|
||||
|
||||
&:hover {
|
||||
border-color: lighten(@startColor, 5%) !important;
|
||||
background-color: lighten(@startColor, 5%);
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
border-color: darken(@startColor, 5%) !important;
|
||||
background-color: darken(@startColor, 5%);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
border-color: lighten(@startColor, 20%) !important;
|
||||
background-color: lighten(@startColor, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) when (@gradient) {
|
||||
.gradientBar(@startColor, @endColor, @textColor, @textShadow);
|
||||
|
||||
border-color: transparent !important;
|
||||
|
||||
&:hover {
|
||||
.gradientBar(lighten(@startColor, 5%), lighten(@endColor, 5%), lighten(@textColor, 5%), @textShadow);
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
.gradientBar(darken(@startColor, 5%), darken(@endColor, 5%), darken(@textColor, 5%), @textShadow);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
.gradientBar(lighten(@startColor, 20%), lighten(@endColor, 20%), lighten(@textColor, 20%), @textShadow) !important;
|
||||
}
|
||||
}
|
||||
+298
@@ -0,0 +1,298 @@
|
||||
/* Checkboxes */
|
||||
html.dark .checkbox-primary,
|
||||
.checkbox-primary {
|
||||
|
||||
label:before {
|
||||
background: @skinColor;
|
||||
border-color: darken(@skinColor, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
html.dark .checkbox-text-primary,
|
||||
.checkbox-text-primary {
|
||||
input[type="checkbox"]:checked + label:after {
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Radios */
|
||||
html.dark .radio-primary,
|
||||
.radio-primary {
|
||||
|
||||
input[type="radio"]:checked + label:after {
|
||||
background: @skinColor;
|
||||
-webkit-box-shadow: 0px 0px 1px @skinColor;
|
||||
box-shadow: 0px 0px 1px @skinColor;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Switch */
|
||||
.switch {
|
||||
&.switch-primary {
|
||||
.ios-switch .on-background {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.progress-bar {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
|
||||
.progress {
|
||||
.progress-bar-primary {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Slider */
|
||||
.slider-primary {
|
||||
.ui-slider-range,
|
||||
.ui-slider-handle {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-gradient.slider-primary {
|
||||
.ui-slider-range,
|
||||
.ui-slider-handle {
|
||||
background-image: -webkit-linear-gradient(left, lighten(@skinColor, 10%) 0, @skinColor 50%, darken(@skinColor, 10%) 100%);
|
||||
background-image: linear-gradient(left, lighten(@skinColor, 10%) 0, @skinColor 50%, darken(@skinColor, 10%) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.slider-gradient.ui-slider-vertical.slider-primary {
|
||||
.ui-slider-range,
|
||||
.ui-slider-handle {
|
||||
background-image: -webkit-linear-gradient(to right, lighten(@skinColor, 10%) 0, @skinColor 50%, darken(@skinColor, 10%) 100%);
|
||||
background-image: linear-gradient(to right, lighten(@skinColor, 10%) 0, @skinColor 50%, darken(@skinColor, 10%) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* DatePicker */
|
||||
.datepicker {
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
&.prev, &.next {
|
||||
&:hover {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child th:hover {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
td {
|
||||
span:hover {
|
||||
background: @skinColor;
|
||||
}
|
||||
|
||||
&.day:hover {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tfoot tr th:hover {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* DatePicker: Dark */
|
||||
html.dark .datepicker.datepicker-primary,
|
||||
.datepicker.datepicker-dark {
|
||||
table {
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
&.prev, &.next {
|
||||
&:hover {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
&.day {
|
||||
&:hover {
|
||||
background: @skinColor;
|
||||
}
|
||||
&.active {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* DatePicker: Primary */
|
||||
.datepicker.datepicker-primary {
|
||||
table {
|
||||
thead {
|
||||
tr {
|
||||
&:first-child {
|
||||
background-color: @skinColor;
|
||||
|
||||
th {
|
||||
&:hover {
|
||||
background-color: darken(@skinColor, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
background-color: lighten(@skinColor, 5%);
|
||||
|
||||
th:hover {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
|
||||
&.day {
|
||||
|
||||
&:hover {
|
||||
background: @skinColor;
|
||||
}
|
||||
&.active {
|
||||
background: @skinColor;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Select 2 */
|
||||
.select2-container-multi {
|
||||
.select2-choices .select2-search-choice {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
/* Wizard */
|
||||
.wizard-steps {
|
||||
> li {
|
||||
|
||||
&.active {
|
||||
|
||||
.badge {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
|
||||
a {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-top-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-tabs {
|
||||
ul {
|
||||
> li {
|
||||
|
||||
&.active {
|
||||
.badge {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
html.dark {
|
||||
.wizard-progress {
|
||||
|
||||
.steps-progress {
|
||||
.progress-indicator {
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-steps {
|
||||
li {
|
||||
&.completed {
|
||||
a {
|
||||
span {
|
||||
border-color: @skinColor;
|
||||
background: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
a {
|
||||
span {
|
||||
color: @skinColor;
|
||||
border-color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.table > thead > tr > td.primary,
|
||||
.table > tbody > tr > td.primary,
|
||||
.table > tfoot > tr > td.primary,
|
||||
.table > thead > tr > th.primary,
|
||||
.table > tbody > tr > th.primary,
|
||||
.table > tfoot > tr > th.primary,
|
||||
.table > thead > tr.primary > td,
|
||||
.table > tbody > tr.primary > td,
|
||||
.table > tfoot > tr.primary > td,
|
||||
.table > thead > tr.primary > th,
|
||||
.table > tbody > tr.primary > th,
|
||||
.table > tfoot > tr.primary > th {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
|
||||
/* Data Tables Loading */
|
||||
.dataTables_processing {
|
||||
background-color: @skinColor;
|
||||
}
|
||||
|
||||
/* Liquid Meter */
|
||||
.liquid-meter-wrapper {
|
||||
.liquid-meter-selector {
|
||||
a {
|
||||
&.active {
|
||||
color: @skinColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
// Core variables and mixins
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
// Core CSS
|
||||
@import "base";
|
||||
|
||||
// Components
|
||||
@import "components";
|
||||
|
||||
// Shared Front-End and Back-End
|
||||
@import "shared";
|
||||
@@ -0,0 +1,7 @@
|
||||
@skinColor: #0088CC;
|
||||
@color-primary: @skinColor;
|
||||
@color-success: #47a447;
|
||||
@color-warning: #ed9c28;
|
||||
@color-danger: #d2322d;
|
||||
@color-info: #5bc0de;
|
||||
@color-dark: #171717;
|
||||
@@ -0,0 +1 @@
|
||||
div.style-switcher{background:#191c21;width:205px;position:fixed;top:125px;z-index:1002;border-radius:6px 6px 0 0;right:-205px}div.style-switcher.with-bar{top:170px}div.style-switcher div.style-switcher-mode{padding:15px 10px;margin-bottom:-33px;position:relative;z-index:1}div.style-switcher div.style-switcher-mode div.options-links a{background:0 0;border:0}div.style-switcher div.style-switcher-mode div.options-links a.active{border:1px solid #3a3a3a;border-color:#3a3a3a;border-bottom:1px solid #191c21}div.style-switcher div.style-switcher-wrap{padding:10px;margin:10px;border:1px solid #3a3a3a;position:relative}div.style-switcher h4{background:#171717;color:#FFF;padding:5px 0 5px 10px;margin:0;line-height:30px;font-size:13px}div.style-switcher h4 a{background-color:#171717;display:block;height:40px;position:absolute;left:-40px;top:0;width:40px;font-size:17px;line-height:38px;color:#FFF;text-align:center;text-decoration:none;border-radius:6px 0 0 6px}div.style-switcher h4 a i{margin-right:5px}div.style-switcher h4 a:hover{text-decoration:none}div.style-switcher h5{color:#999;margin:0 0 5px;padding:0;line-height:30px;font-size:13px;font-weight:400}div.style-switcher ul.options{list-style:none;margin:-3px 0 10px 0;padding:0;overflow:hidden}div.style-switcher ul.options li{float:left;margin:2px}div.style-switcher ul.options li a{display:block;width:15px;height:15px;cursor:pointer}div.style-switcher ul.options li a.pattern{background-repeat:repeat;background-position:0 0;background-color:transparent}div.style-switcher div.color-gradient{position:absolute;top:14px;right:25px;font-size:13px}div.style-switcher div.color-gradient input{margin-right:5px;position:relative;top:2px}div.style-switcher div.color-gradient label{font-weight:400;color:#999}div.style-switcher.advanced div.color-gradient{top:15px;right:20px;font-size:14px}div.style-switcher.advanced div.color-gradient label{color:#FFF}div.style-switcher div.color-picker{display:none;margin-bottom:15px}div.style-switcher div.options-links{padding:0 0 10px}div.style-switcher div.options-links a{background-color:#000;border:1px solid #000;color:#ccc;font-size:12px;margin-bottom:0;margin-right:5px;padding:5px 12px;text-decoration:none}div.style-switcher div.layout.options-links a,div.style-switcher div.website-type.options-links a{text-align:center;min-width:55px;display:inline-block}div.style-switcher div.options-links a:hover{background-color:#111}div.style-switcher div.options-links a.active{border-color:#ADADAD}div.style-switcher hr{border-color:transparent;margin:10px 0 15px;background:#2c2c2c}textarea.get-css{height:325px;width:538px;resize:none;cursor:text}div.style-switcher.advanced{width:400px;right:-400px}div.style-switcher.advanced div.color-picker{display:block}div.style-switcher.advanced ul.options.colors{display:none}
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user