bellord/kit
1
0
Fork 0
mirror of https://bitbucket.org/bellord13/kit.git synced 2026-11-13 19:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
bellord
2021-09-29 12:05:44 +03:00
parent 77fda4e363
commit bf74cd1618
21 changed files with 3815 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/align/align.js
+568 -203
View File
@@ -1,220 +1,585 @@
kit.PluginManager.register('align',function() {
/** @module align */
kit.PluginManager.register('align',function(module, exports, require) {
var AlignClass = function(){
var Align = function()
{
this.reset();
this.node = null;
this.parentNode = null;
this.offsetHorizontal = 0;
this.offsetVertical = 0;
this.offset = 0;
};
/**
* @param node HTMLElement
* @return {Align}
*/
Align.prototype.setNode = function(node){
this.node = node;
return this;
};
/**
* @param node HTMLElement
* @return {Align}
*/
Align.prototype.setParentNode = function(node){
this.parentNode = node;
return this;
};
/**
* @return {Align}
*/
Align.prototype.reset = function(hor = true, vert = true){
if(hor) {
this.right = {applicability: 0, valid: false};
this.left = {applicability: 0, valid: false};
}
if(vert) {
this.top = {applicability: 0, valid: false};
this.bottom = {applicability: 0, valid: false};
}
return this;
};
Align.prototype.getContentSizes = function() {
/**
* @class Rect
* @param node
*/
var Rect = function (node) {
this.node = node;
this.get();
};
Rect.prototype.get = function () {
function getBoundingClientRect(node) {
var rect = node.getBoundingClientRect();
return {
InnerWidth: window.innerWidth,
InnerHeight: window.innerHeight,
top: rect.top,
right: rect.right,
bottom: rect.bottom,
left: rect.left,
width: rect.width,
height: rect.height,
x: rect.x,
y: rect.y
};
}
var metrics = {};
if(this.node instanceof HTMLElement) {
metrics = {
offsetHeight: this.node.offsetHeight,
offsetWidth: this.node.offsetWidth,
clientHeight: this.node.clientHeight,
clientWidth: this.node.clientWidth,
offsetLeft: this.node.offsetLeft,
offsetTop: this.node.offsetTop,
clientLeft: this.node.clientLeft,
clientTop: this.node.clientTop,
clientRight: this.node.offsetWidth - this.node.clientWidth,
clientBottom: this.node.offsetHeight - this.node.clientHeight,
offsetRight: document.body.offsetWidth - this.node.offsetLeft - this.node.offsetWidth,
offsetBottom: window.innerHeight - this.node.offsetTop - this.node.offsetHeight,
};
metrics = Object.assign({}, getBoundingClientRect(this.node), metrics);
}
if(this.node instanceof Window) {
metrics = {
offsetHeight: window.innerHeight,
offsetWidth: document.body.offsetWidth,
clientHeight: window.innerHeight,
clientWidth: document.body.offsetWidth,
offsetLeft: 0,
offsetTop: 0,
clientLeft: 0,
clientTop: 0,
clientRight: 0,
clientBottom: 0,
offsetRight: 0,
offsetBottom: 0,
};
metrics = Object.assign({
left: 0,
top: 0,
right: document.body.offsetWidth,
bottom: window.innerHeight,
x: 0,
y: 0,
width: document.body.offsetWidth,
height: window.innerHeight,
}, metrics)
}
Object.assign(this, metrics);
return this;
};
Rect.prototype.getLine = function (axis = 'horizontal') {
var line = new Line(null, axis);
line.node = this.node;
line.rect = this;
line.setAxis(axis);
return line;
};
var viewLineDriver = {
horizontal: {
left: 'start',
right: 'end',
x: 'a',
width: 'length',
offsetWidth: 'offset',
clientWidth: 'client',
offsetLeft: 'offsetStart',
clientLeft: 'clientStart',
offsetRight: 'offsetEnd',
clientRight: 'clientEnd',
},
vertical: {
top: 'start',
bottom: 'end',
y: 'a',
height: 'length',
offsetHeight: 'offset',
clientHeight: 'client',
offsetTop: 'offsetStart',
clientTop: 'clientStart',
offsetBottom: 'offsetEnd',
clientBottom: 'clientEnd',
},
};
/**
* @param node
* @param axis
* @property start
* @property end
* @property a
* @property length
* @property offset
* @property client
* @property offsetStart
* @property clientStart
* @property offsetEnd
* @property clientEnd
*
*/
var Line = function (node, axis = 'horizontal') {
this.axis = axis;
this.node = node;
this.update();
};
Line.prototype.setAxis = function(axis){
this.axis = axis;
for (var key in viewLineDriver[this.axis]) {
this[viewLineDriver[this.axis][key]] = this.rect[key];
}
};
Line.prototype.update = function () {
if(!this.node) {
return this;
}
this.rect = new Rect(this.node);
this.setAxis(this.axis);
return this;
};
var metric = {
Rect: Rect,
Line: Line,
};
/**
*
* @class {AlignCalc}
* @param limiterNode {HTMLElement}
* @param parentNode {HTMLElement}
* @param node {HTMLElement}
*/
var AlignCalc = function (node, parentNode, limiterNode = window) {
var _this = this;
this.axis = 'horizontal';
this.direction = 'bottom';
this.align = 'bottom';
this.offset = [0, 0];
this.setLimiterNode(limiterNode);
this.setParentNode(parentNode);
this.setNode(node);
this.style = {
start: function (extra) {
this.nodeMetricsLine.node.style[this.map.style.start()] = '' + ((!this.valid && extra)?this.shiftExtra:this.shift) + 'px';
}.bind(this),
end: function (extra) {
this.nodeMetricsLine.node.style[this.map.style.end()] = 'unset';
}.bind(this),
};
/**
* @param top bool
* @param inner bool
* @return {Align}
*/
Align.prototype.setVertical = function(top = false, inner = false){
var contentSizes = this.getContentSizes();
this.reset(false, true);
if(top){
!this.calcTop(contentSizes, inner) && this.calcBottom(contentSizes, inner);
} else {
!this.calcBottom(contentSizes, inner) && this.calcTop(contentSizes, inner);
this.map = {
style: {
start: function(){
switch (_this.axis) {
case 'vertical':
return 'top';
case 'horizontal':
return 'left';
}
},
end: function(){
switch (_this.axis) {
case 'vertical':
return 'bottom';
case 'horizontal':
return 'right';
}
},
},
direction: {
get: function () {
switch (_this.direction) {
case 'start':
case 'left':
case 'top':
return 'start';
case 'end':
case 'right':
case 'bottom':
return 'end';
}
}
},
align: {
get: function () {
switch (_this.align) {
case 'start':
case 'left':
case 'top':
return 'start';
case 'end':
case 'right':
case 'bottom':
return 'end';
}
}
},
axisNumber: function () {
return _this.axis === 'horizontal' ? 0 : 1;
}
};
if(!this.top.valid && !this.bottom.valid) {
if(this.top.applicability > this.bottom.applicability || contentSizes.InnerHeight < this.node.offsetHeight) {
this.calcTop(contentSizes, inner, true);
} else {
this.calcBottom(contentSizes, inner, true);
var getShiftWhenHidingNodeUnderLimiterStart = function(shift) {
var d = this.parentMetricsLine.start + shift - this.limiterMetricsLine.start;
if(d < 0) {
shift = shift - d;
}
return shift;
}.bind(this);
this.core = {
direction: {
start: {
shift: function () {
return - this.nodeMetricsLine.offset - this.offset[this.map.axisNumber()];
}.bind(this),
applicability: function () {
return (this.parentMetricsLine.start + this.shift) - this.limiterMetricsLine.start;
}.bind(this),
valid: function () {
return (this.parentMetricsLine.start + this.shift) >= this.limiterMetricsLine.start;
}.bind(this),
shiftExtra: function () {
return getShiftWhenHidingNodeUnderLimiterStart(this.shift - this.applicability);
}.bind(this),
},
end: {
shift: function () {
return this.offset[this.map.axisNumber()];
}.bind(this),
applicability: function () {
return this.limiterMetricsLine.end - (this.parentMetricsLine.start + this.nodeMetricsLine.length + this.shift);
}.bind(this),
valid: function () {
return this.limiterMetricsLine.end >= (this.parentMetricsLine.start + this.nodeMetricsLine.length + this.shift);
}.bind(this),
shiftExtra: function () {
return getShiftWhenHidingNodeUnderLimiterStart(this.shift + this.applicability);
}.bind(this),
},
},
align: {
start: {
shift: function () {
return this.nodeMetricsLine.clientStart;
}.bind(this),
},
end: {
shift: function () {
return this.parentMetricsLine.offset - this.parentMetricsLine.clientStart;
}.bind(this),
},
},
};
return this;
};
/**
* @param node
* @return {AlignCalc}
*/
AlignCalc.prototype.setLimiterNode = function (node) {
if(!this.limiterMetricsLine || (this.limiterMetricsLine.node !== node)) {
this.limiterMetricsLine = new Line(node, this.axis);
}
return this;
};
/**
*
* @param node
* @return {AlignCalc}
*/
AlignCalc.prototype.setParentNode = function (node) {
if(!this.parentMetricsLine || (this.parentMetricsLine.node !== node)) {
this.parentMetricsLine = new Line(node, this.axis);
}
return this;
};
/**
*
* @param node
* @return {AlignCalc}
*/
AlignCalc.prototype.setNode = function (node) {
if(!this.nodeMetricsLine || (this.nodeMetricsLine.node !== node)) {
this.nodeMetricsLine = new Line(node, this.axis);
}
return this;
};
/**
*
* @param extra
* @return {AlignCalc}
*/
AlignCalc.prototype.render = function (extra = false) {
for (var key in this.style) {
if(this.style.hasOwnProperty(key)) {
this.style[key](extra);
}
}
return this;
};
/**
*
* @return {AlignCalc}
*/
AlignCalc.prototype.updateMetrics = function(){
this.limiterMetricsLine.update();
this.parentMetricsLine.update();
this.nodeMetricsLine.update();
return this;
};
/**
*
* @param direction
* @return {AlignCalc}
*/
AlignCalc.prototype.setDirection = function(direction){
this.direction = direction;
return this;
};
/**
*
* @param align
* @return {AlignCalc}
*/
AlignCalc.prototype.setAlign = function(align){
this.align = align;
return this;
};
/**
*
* @param axis
* @return {AlignCalc}
*/
AlignCalc.prototype.setAxis = function(axis){
this.axis = axis;
this.limiterMetricsLine.setAxis(axis);
this.parentMetricsLine.setAxis(axis);
this.nodeMetricsLine.setAxis(axis);
return this;
};
/**
*
* @param align
* @param direction
* @return {AlignCalc}
*/
AlignCalc.prototype.set = function(align, direction){
this.align = align;
this.direction = direction;
return this;
};
/**
*
* @return {AlignCalc}
*/
AlignCalc.prototype.calc = function () {
this.shift =
this.core.direction[this.map.direction.get()].shift() +
this.core.align[this.map.align.get()].shift();
this.applicability = this.core.direction[this.map.direction.get()].applicability();
this.valid = this.core.direction[this.map.direction.get()].valid();
this.shiftExtra = this.core.direction[this.map.direction.get()].shiftExtra();
return this;
};
/**
*
* @return {{valid: *, shiftExtra: *, shift: *, applicability: *}}
*/
AlignCalc.prototype.getData = function () {
return {
shift: this.shift,
applicability: this.applicability,
valid: this.valid,
shiftExtra: this.shiftExtra,
};
};
/**
* @param node {HTMLElement}
* @param parentNode {HTMLElement}
* @param limiterNode {HTMLElement}
* @constructor
*/
var AlignClass = function(node, parentNode, limiterNode = window)
{
this.changeOfDirection = true;
this.withinTheScreen = true;
this.offset = [0, 0];
this.status = {vertical: {}, horizontal: {},};
this.setNode(node);
this.setParentNode(parentNode);
this.setLimiterNode(limiterNode);
};
AlignClass.prototype.setNode = function(node){
this.unset();
this.node = node;
this.reset();
if(node instanceof HTMLElement) {
this.node.kit = this.node.kit || {};
this.node.kit.align = this;
}
if(this.calc) {
this.calc.setNode(this.node);
}
return this;
};
AlignClass.prototype.setParentNode = function(node){
this.parentNode = node;
if(this.calc) {
this.calc.setParentNode(this.parentNode);
}
return this;
};
AlignClass.prototype.setLimiterNode = function(node){
this.limiterNode = node;
if(this.calc) {
this.calc.setLimiterNode(this.limiterNode);
}
return this;
};
AlignClass.prototype.unset = function(){
if(this.node instanceof HTMLElement) {
if(this.node.kit && this.node.kit.align){
delete this.node.kit.align;
}
this.node.removeAttribute('data-kit-align-horizontal-direction');
this.node.removeAttribute('data-kit-align-horizontal-align');
this.node.removeAttribute('data-kit-align-vertical-direction');
this.node.removeAttribute('data-kit-align-vertical-align');
}
};
AlignClass.prototype.reset = function(bHorizontal = true, bVertical = true){
if(bHorizontal) {
this.status.horizontal = {};
if(this.node instanceof HTMLElement) {
this.node.style.left = '';
this.node.style.right = '';
this.node.removeAttribute('data-kit-align-horizontal-direction');
this.node.removeAttribute('data-kit-align-horizontal-align');
}
}
if(bVertical) {
this.status.vertical = {};
if(this.node instanceof HTMLElement) {
this.node.style.top = '';
this.node.style.bottom = '';
this.node.removeAttribute('data-kit-align-vertical-direction');
this.node.removeAttribute('data-kit-align-vertical-align');
}
}
return this;
};
AlignClass.prototype.set = function(hAlign, vAlign, hDirection, vDirection){
this.setEx('vertical', vDirection, vAlign);
this.setEx('horizontal', hDirection, hAlign);
return this;
};
AlignClass.prototype.setVertical = function(direction, align){
this.setEx('vertical', direction, align);
return this;
};
AlignClass.prototype.setHorizontal = function(direction, align){
this.setEx('horizontal', direction, align);
return this;
};
AlignClass.prototype.setEx = function(axis, direction, align){
this.reset(axis === 'horizontal', axis === 'vertical');
this.status[axis].direction = direction;
this.status[axis].align = align;
if(!this.calc) {
this.calc = new AlignCalc(this.node, this.parentNode, this.limiterNode);
}
this.calc.offset = this.offset;
this.node.setAttribute('data-kit-align-'+axis+'-direction', direction);
this.node.setAttribute('data-kit-align-'+axis+'-align', align);
var defAlignResult = this.calc.updateMetrics().setAxis(axis).setDirection(direction).setAlign(align).calc().getData();
// console.log('defAlignResult', axis, align, direction, defAlignResult);
if(this.changeOfDirection) {
if(!defAlignResult.valid) {
this.node.setAttribute('data-kit-align-'+axis+'-direction', this.getInverse(direction));
this.node.setAttribute('data-kit-align-'+axis+'-align', this.getInverse(align));
var inverseAlignResult = this.calc.updateMetrics().setDirection(this.getInverse(direction)).setAlign(this.getInverse(align)).calc().getData();
// console.log('inverseAlignResult', axis, this.getInverse(align), this.getInverse(direction), inverseAlignResult);
this.status[axis].direction = this.getInverse(direction);
this.status[axis].align = this.getInverse(align);
if(!inverseAlignResult.valid && (defAlignResult.applicability > inverseAlignResult.applicability) ) {
this.node.setAttribute('data-kit-align-'+axis+'-direction', direction);
this.node.setAttribute('data-kit-align-'+axis+'-align', align);
this.status[axis].direction = direction;
this.status[axis].align = align;
this.calc.updateMetrics().setDirection(direction).setAlign(align).calc();
}
}
}
return this;
this.calc.render(this.withinTheScreen);
return this;
};
AlignClass.prototype.getInverse = function(value){
var inverseConfig = {
start: 'end',
left: 'right',
top: 'bottom',
end: 'start',
right: 'left',
bottom: 'top',
};
Align.prototype.calcTop = function (contentSizes, inner, extra = false) {
var top, offset;
if(inverseConfig.hasOwnProperty(value)) {
return inverseConfig[value];
}
return value;
};
this.node.setAttribute('data-kit-align-vertical','top');
offset = this.offsetVertical || this.offset;
if(inner) {
top = 0 - this.node.offsetHeight + this.parentNode.offsetHeight - this.parentNode.clientTop - offset;
} else {
top = 0 - this.parentNode.clientTop - this.node.offsetHeight + this.node.clientTop - offset;
/**
* @memberof kitCore
* @instance
*/
var align = {
Class: AlignClass,
getInstance: function (node, parentNode) {
if(node instanceof HTMLElement && node.kit && node.kit.align) {
return node.kit.align;
}
return new AlignClass(node, parentNode);
},
metric: metric,
};
this.node.style.top = '' + top + 'px';
this.node.style.bottom = 'unset';
module.exports = align;
if(extra) {
this.checkTop(contentSizes);
this.node.style.top = (top - this.top.applicability) + 'px';
return false;
}
return this.checkTop(contentSizes);
};
Align.prototype.calcBottom = function (contentSizes, inner, extra = false) {
var top, offset;
this.node.setAttribute('data-kit-align-vertical','bottom');
offset = this.offsetVertical || this.offset;
if(inner) {
top = 0 - this.parentNode.clientTop + offset;
} else {
top = this.parentNode.offsetHeight - this.parentNode.clientTop + offset;
}
this.node.style.top = '' + top + 'px';
this.node.style.bottom = 'unset';
if(extra) {
this.checkBottom(contentSizes);
this.node.style.top = (top + this.bottom.applicability) + 'px';
return false;
}
return this.checkBottom(contentSizes);
};
Align.prototype.checkTop = function (contentSizes) {
var b = this.node.getBoundingClientRect();
this.top.applicability = b.top - 0;
this.top.valid = b.top >= 0;
return this.top.valid;
};
Align.prototype.checkBottom = function (contentSizes) {
var b = this.node.getBoundingClientRect();
this.bottom.applicability = contentSizes.InnerHeight - (b.top + b.height);
this.bottom.valid = contentSizes.InnerHeight >= (b.top + b.height);
return this.bottom.valid;
};
/**
* @param right bool
* @param inner bool
* @return {Align}
*/
Align.prototype.setHorizontal = function(right = true, inner = false){
var contentSizes = this.getContentSizes();
this.reset(true, false);
if(right){
!this.calcRight(contentSizes, inner) && this.calcLeft(contentSizes, inner);
} else {
!this.calcLeft(contentSizes, inner) && this.calcRight(contentSizes, inner);
}
if(!this.left.valid && !this.right.valid) {
if(this.left.applicability > this.right.applicability || contentSizes.InnerWidth < this.node.offsetWidth) {
this.calcLeft(contentSizes, inner, true);
} else {
this.calcRight(contentSizes, inner, true)
}
}
return this;
};
Align.prototype.calcLeft = function (contentSizes, inner, extra = false) {
var left, offset;
this.node.setAttribute('data-kit-align-horizontal','left');
offset = this.offsetHorizontal || this.offset;
if(inner) {
left = 0 - this.node.offsetWidth + this.parentNode.offsetWidth - this.parentNode.clientLeft - offset;
} else {
left = 0 - this.parentNode.clientLeft - this.node.offsetWidth + this.node.clientLeft - offset;
}
this.node.style.left = '' + left + 'px';
this.node.style.right = 'unset';
if(extra) {
this.checkLeft(contentSizes);
this.node.style.left = (left - this.left.applicability) + 'px';
return false;
}
return this.checkLeft(contentSizes);
};
Align.prototype.calcRight = function (contentSizes, inner, extra = false) {
var left, offset;
this.node.setAttribute('data-kit-align-horizontal','right');
offset = this.offsetHorizontal || this.offset;
if(inner) {
left = 0 - this.parentNode.clientLeft + offset;
} else {
left = this.parentNode.offsetWidth - this.parentNode.clientLeft + offset;
}
this.node.style.left = '' + left + 'px';
this.node.style.right = 'unset';
if(extra) {
this.checkRight(contentSizes);
this.node.style.left = (left + this.right.applicability) + 'px';
return false;
}
return this.checkRight(contentSizes);
};
Align.prototype.checkLeft = function (contentSizes) {
var b = this.node.getBoundingClientRect();
this.left.applicability = b.left - 0;
this.left.valid = b.left >= 0;
return this.left.valid;
};
Align.prototype.checkRight = function (contentSizes) {
var b = this.node.getBoundingClientRect();
this.right.applicability = contentSizes.InnerWidth - (b.left + b.width);
this.right.valid = contentSizes.InnerWidth >= (b.left + b.width);
return this.right.valid;
};
return Align;
}();
this.Class = AlignClass;
return this;
return module.exports;
});
assets/animations/animations.css
+16
View File
@@ -0,0 +1,16 @@
.anim-scale-in {
animation-name: scale-in;
animation-duration: .15s;
animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
}
@keyframes scale-in {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
assets/animations/animations.js
+15
View File
@@ -0,0 +1,15 @@
/** @module animations */
kit.PluginManager.register('animations',function(module, exports, require, global) {
/**
* @memberof kitCore
* @instance
*/
var animations = {
scaleIn: 'anim-scale-in',
};
Object.assign(animations, global.animations || {});
return module.exports = animations;
});
assets/collection/collection.js
+73
View File
@@ -0,0 +1,73 @@
/** @module collection */
kit.PluginManager.register('collection',function(module, exports, require, global) {
function valueEx(value) {
if(typeof value === 'function') {
return value();
}
return value;
}
function uniqueId (length = 32, firstLetter = true) {
var idStr = '';
if(length < 1) return idStr;
if(firstLetter) {
length && (idStr = (Math.floor((Math.random() * 25)) + 10).toString(36));
if (length === 1) return idStr;
}
do {
idStr += (Math.floor((Math.random() * 35))).toString(36);
} while (idStr.length < length);
return (idStr);
};
var ArrayCollection = function (data){
this.data = data;
};
ArrayCollection.prototype.all = function () {
return this.data;
};
ArrayCollection.prototype.put = function (key, value) {
this.data[key] = value;
};
ArrayCollection.prototype.push = function (value) {
this.data.push(value);
};
ArrayCollection.prototype.get = function (key, defValue = undefined) {
if(this.data.hasOwnProperty(key)) {
return this.data[key];
}
return valueEx(defValue);
};
ArrayCollection.prototype.has = function (key) {
return this.data.hasOwnProperty(key);
};
var ObjectCollection = function (data){
this.data = data;
};
ObjectCollection.prototype.all = ArrayCollection.prototype.all;
ObjectCollection.prototype.put = ArrayCollection.prototype.put;
ObjectCollection.prototype.push = function (value) {
this.data[uniqueId(8)] = value;
};
ObjectCollection.prototype.get = ArrayCollection.prototype.get;
ObjectCollection.prototype.has = ArrayCollection.prototype.has;
/**
* @memberof kitCore
* @instance
*/
var Collection = function (data) {
if(typeof data === 'object') {
return new ObjectCollection(data);
}
if(Array.isArray(data)) {
return new ArrayCollection(data);
}
return new ArrayCollection([data]);
}
return module.exports = Collection;
});
assets/config/config.js
-1
View File
@@ -1,5 +1,4 @@
/**
* @var kit
* @type {kitCore}
*/
window.kit = window.kit || {};
assets/config/toolkit.config.css
+8
View File
@@ -63,6 +63,8 @@
--kit-color: #1a1a1a;
--kit-color-text-hover: var(--kit-color-primary);
--kit-color-primary-w5: hsl(210, 100%, 85%);
--kit-color-primary-w4: hsl(210, 100%, 80%);
--kit-color-primary-w3: hsl(210, 100%, 70%);
--kit-color-primary-w2: hsl(210, 100%, 65%);
--kit-color-primary-w1: hsl(210, 100%, 60%);
@@ -70,8 +72,12 @@
--kit-color-primary-b1: hsl(210, 100%, 50%);
--kit-color-primary-b2: hsl(210, 100%, 45%);
--kit-color-primary-b3: hsl(210, 100%, 40%);
--kit-color-primary-b4: hsl(210, 100%, 35%);
--kit-color-primary-b5: hsl(210, 100%, 30%);
--kit-color-primary-text: #FFF;
--kit-color-secondary-w5: hsl(0, 0%, 80%);
--kit-color-secondary-w4: hsl(0, 0%, 75%);
--kit-color-secondary-w3: hsl(0, 0%, 70%);
--kit-color-secondary-w2: hsl(0, 0%, 65%);
--kit-color-secondary-w1: hsl(0, 0%, 60%);
@@ -79,6 +85,8 @@
--kit-color-secondary-b1: hsl(0, 0%, 50%);
--kit-color-secondary-b2: hsl(0, 0%, 45%);
--kit-color-secondary-b3: hsl(0, 0%, 40%);
--kit-color-secondary-b4: hsl(0, 0%, 35%);
--kit-color-secondary-b5: hsl(0, 0%, 30%);
--kit-color-secondary-text: #FFF;
assets/core/core.js
+6 -8
View File
@@ -399,11 +399,10 @@ window.kit = window.kit || {};
if(data === undefined) {
return;
}
if(!this.global.hasOwnProperty(key)) {
this.global[key] = data;
} else {
console.warn('PluginManager.install: plugin ' + pluginId + ' already exist in kit ('+plugin.state+')');
if(this.global.hasOwnProperty(key)) {
console.warn(`PluginManager.install(${pluginId}): key ${key} overwritten in kit (${plugin.state}).`);
}
this.global[key] = data;
if(Array.isArray(aliasList) && aliasList.length) {
aliasList.forEach(function (alias) {
setGlobalExtension(alias, [], data)
@@ -579,17 +578,16 @@ window.kit = window.kit || {};
if(this.plugins.hasOwnProperty(pluginId)) {
return this.plugins[pluginId];
}
for (var _pluginId in this.plugins) {
var _pluginId;
for (_pluginId in this.plugins) {
if(this.plugins.hasOwnProperty(_pluginId) && this.plugins[_pluginId].config.alias.indexOf(pluginId) !== -1) {
return this.plugins[_pluginId];
}
}
var _pluginId = pluginId[0].toUpperCase() + pluginId.slice(1);
_pluginId = pluginId[0].toUpperCase() + pluginId.slice(1);
if(_pluginId !== pluginId) {
return this.__getPlugin(_pluginId);
}
return undefined;
};
assets/core/core.register.js
+7 -1
View File
@@ -6,7 +6,7 @@ __PluginManager__.registerPlugins({
'/menu.css'
],
type: 'loader',
deps: ['lib', 'align', 'utils']
deps: ['lib', 'align', 'utils', 'animations']
},
lib: {
path: __pmConfig__.assetsPath + '/lib',
@@ -141,6 +141,12 @@ __PluginManager__.registerPlugins({
module: '/cookie.js',
type: 'loader',
},
animations: {
path: __pmConfig__.assetsPath + '/animations',
css: '/animations.css',
module: '/animations.js',
type: 'loader',
},
});
assets/core/doc.js
+6 -2
View File
@@ -15,6 +15,10 @@
* @property {kitCookie} cookie
* @property {kitConfig} config
* @property {kitTooltip} tooltip
* @property {kitPopover} popover
* @property {kitPopover} Popover
* @property {kitPopper} popper
*/
*/
/**
* @namespace kit
*/
assets/lib/lib.js
+14 -5
View File
@@ -1,9 +1,18 @@
kit.PluginManager.register('lib',function() {
/** @module lib */
kit.PluginManager.register('lib',function(module, exports, require, global) {
this.icon = {
options: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" focusable="false"><g><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.1-1.65c.2-.15.25-.42.13-.64l-2-3.46c-.12-.22-.4-.3-.6-.22l-2.5 1c-.52-.4-1.08-.73-1.7-.98l-.37-2.65c-.06-.24-.27-.42-.5-.42h-4c-.27 0-.48.18-.5.42l-.4 2.65c-.6.25-1.17.6-1.7.98l-2.48-1c-.23-.1-.5 0-.6.22l-2 3.46c-.14.22-.08.5.1.64l2.12 1.65c-.04.32-.07.65-.07.98s.02.66.06.98l-2.1 1.65c-.2.15-.25.42-.13.64l2 3.46c.12.22.4.3.6.22l2.5-1c.52.4 1.08.73 1.7.98l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.6-.25 1.17-.6 1.7-.98l2.48 1c.23.1.5 0 .6-.22l2-3.46c.13-.22.08-.5-.1-.64l-2.12-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></g></svg>',
arrowMenu: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" focusable="false"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg>',
/**
* @memberof kitCore
* @instance
*/
var lib = {
svg: {
options: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" focusable="false"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.1-1.65c.2-.15.25-.42.13-.64l-2-3.46c-.12-.22-.4-.3-.6-.22l-2.5 1c-.52-.4-1.08-.73-1.7-.98l-.37-2.65c-.06-.24-.27-.42-.5-.42h-4c-.27 0-.48.18-.5.42l-.4 2.65c-.6.25-1.17.6-1.7.98l-2.48-1c-.23-.1-.5 0-.6.22l-2 3.46c-.14.22-.08.5.1.64l2.12 1.65c-.04.32-.07.65-.07.98s.02.66.06.98l-2.1 1.65c-.2.15-.25.42-.13.64l2 3.46c.12.22.4.3.6.22l2.5-1c.52.4 1.08.73 1.7.98l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.6-.25 1.17-.6 1.7-.98l2.48 1c.23.1.5 0 .6-.22l2-3.46c.13-.22.08-.5-.1-.64l-2.12-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></svg>',
arrowMenu: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" focusable="false"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg>',
}
};
return this;
Object.assign(lib, global.lib || {});
return module.exports = lib;
});
assets/menu/menu.css
+9 -8
View File
@@ -21,11 +21,11 @@
background: var(--kit-color-menu-content);
display: none;
}
.kit-menu[data-kit-align-horizontal="right"] {
.kit-menu[data-kit-align-horizontal-align="right"] {
border-left: var(--kit-menu-border-width) solid var(--kit-color-primary, #3c9cdd);
box-shadow: 0 0 10px 0 #00000033, inset 5px 0 5px -5px var(--kit-color-primary-b2, #2283c3);
}
.kit-menu[data-kit-align-horizontal="left"] {
.kit-menu[data-kit-align-horizontal-align="left"] {
border-right: var(--kit-menu-border-width) solid var(--kit-color-primary, #3c9cdd);
box-shadow: 0 0 10px 0 #00000033, inset -5px 0 5px -5px var(--kit-color-primary-b2, #2283c3);
}
@@ -46,6 +46,7 @@
padding-left: 0.5em;
padding-right: 0.5em;;
min-width: calc(15 * 1em);
text-decoration: none;
}
.kit-menu-item > *:not(.kit-menu) {
margin-left: 0.5em;
@@ -104,8 +105,8 @@
.kit-menu-item__label:hover > a {
color: var(--kit-color-menu-content-text-hover);
}
.kit-menu[data-kit-align-horizontal="left"] .kit-menu-item:before,
.kit-menu[data-kit-align-horizontal="right"] .kit-menu-item:before
.kit-menu[data-kit-align-horizontal-align="left"] .kit-menu-item:before,
.kit-menu[data-kit-align-horizontal-align="right"] .kit-menu-item:before
{
content: "";
position: absolute;
@@ -119,7 +120,7 @@
left: 0;
right: unset;
}
.kit-menu[data-kit-align-horizontal="left"] > .kit-menu-item:before {
.kit-menu[data-kit-align-horizontal-align="left"] > .kit-menu-item:before {
right: 0;
left: unset;
}
@@ -142,14 +143,14 @@
flex: 0 0 1.5em;
order: 1000;
}
.kit-menu[data-kit-align-horizontal="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
.kit-menu[data-kit-align-horizontal-align="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
/*order: 10;*/
/*transform: rotate(180deg);*/
}
.kit-menu[data-kit-align-horizontal="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__icon {
.kit-menu[data-kit-align-horizontal-align="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__icon {
/*order: 990;*/
}
.kit-menu[data-kit-align-horizontal="right"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
.kit-menu[data-kit-align-horizontal-align="right"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
}
.kit-menu-item__arrow {
assets/menu/menu.js
+179 -57
View File
@@ -1,18 +1,23 @@
kit.PluginManager.register('menu',function(module, exports, require) {
/** @module menu */
//todo: instance, options, auto-options-by-node, fast reCalc, fast reInit, userEventManager, collection
__PluginManager__.register('menu',function(module, exports, require) {
var AlignModule = require('align');
var align = require('align');
var libModule = require('lib');
var utils = require('utils');
/**
* @class kitMenuClassDefaultOptions
*/
var defaultMenuOptions = {
parent: null,
nodeProperty: 'kitMenu',
nodeProperty: 'menu',
class: 'kit-menu',
eventType: 'hover',
animation: '',
hideDelay: 200,
offsetHorizontal: 0,
offsetVertical: 0,
alignOffset: [0, 0],
click: (function (event, menu) {
console.log('Menu click');
}),
@@ -27,9 +32,24 @@ kit.PluginManager.register('menu',function(module, exports, require) {
};
var MenuList = [];
var MenuClass = (function () {
var MenuList = [];
var MenuListIncrement = 0;
var MenuClass = (function () {
/**
* @typedef kitMenuItemHandler
* @param event {MouseEvent}
* @param menuItem {MenuItem}
* @param menu {Menu}
*/
/**
* @param options
* @param items
* @constructor
*/
function Menu(options = {}, items = [])
{
//console.log('Menu: constructor');
@@ -38,12 +58,11 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.documentListenerHandler = this.documentListener.bind(this);
this.nodeActionHandler = this.nodeAction.bind(this);
this.id = MenuList.length;
this.id = ++MenuListIncrement;
MenuList[this.id] = this;
this.itemList = {};
this.align = new AlignModule.Class();
this.align = new align.Class();
this.node = null;
this.bInit = false;
this.deferredHideID = 0;
@@ -85,17 +104,21 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.node.classList.add(this.options.class);
this.node.style.display = 'none';
this.node.setAttribute('data-menu-id', this.id);
this.node[this.options.nodeProperty] = this;
this.node.kit = this.node.kit || {};
this.node.kit[this.options.nodeProperty] = this;
};
Menu.prototype.showNode = function () {
// console.log('Menu: showNode');
// console.log('Menu: showNode ' + this.id, this.bActive);
this.deferredHideCancel();
this.node.style.display = '';
this.node.classList.add('active');
this.options.parent.classList.add('active');
this.calcStyle();
this.bActive = true;
document.addEventListener('click', this.documentListenerHandler, false);
if(!this.bActive) {
this.node.style.display = '';
this.node.classList.add('active');
this.options.parent.classList.add('active');
this.calcStyle();
this.bActive = true;
this.addDocumentEventListener();
}
this.addAnimation();
};
Menu.prototype.hideNode = function () {
// console.log('Menu: hideNode');
@@ -125,13 +148,25 @@ kit.PluginManager.register('menu',function(module, exports, require) {
// console.log('Menu: hideNodeNow');
this.deferredHideCancel();
this.node.style.display = 'none';
this.removeAnimation();
this.node.classList.remove('active');
this.options.parent.classList.remove('active');
this.bActive = false;
document.removeEventListener('click', this.documentListenerHandler, false);
this.removeDocumentEventListener();
return this;
};
Menu.prototype.removeAnimation = function(){
if(this.options.animation && this.node && this.node.classList.contains(this.options.animation)){
this.node.classList.remove(this.options.animation);
}
};
Menu.prototype.addAnimation = function(){
if(this.options.animation && this.node && !this.node.classList.contains(this.options.animation)){
this.node.classList.add(this.options.animation);
}
};
/**
* @returns {Menu}
*/
@@ -143,7 +178,8 @@ kit.PluginManager.register('menu',function(module, exports, require) {
}
return this;
};
Menu.prototype.calcStyle = function () {
Menu.prototype.calcStyle = function (recursive = false) {
// console.log('calcStyle ' + this.id);
if(!(this.options.parent instanceof Element)) {
console.warn('Menu.options.parent NOT instanceof Element');
return false;
@@ -155,35 +191,67 @@ kit.PluginManager.register('menu',function(module, exports, require) {
//var parentNode = this.getParentMenuNode() || this.getParent();
var parentNode = this.getParent();
var right = true;
var hDirection = 'right';
var parentMenu = this.getParentMenu();
if(parentMenu && parentMenu instanceof Menu) {
right = !parentMenu.align.left.valid;
hDirection = parentMenu.align.status.horizontal.direction;
}
var hAlign = 'right';
if(parentMenu && parentMenu instanceof Menu) {
hAlign = parentMenu.align.status.horizontal.align;
}
this.align.offsetHorizontal = this.options.offsetHorizontal;
this.align.offsetVertical = this.options.offsetVertical;
this.align.offset = this.options.alignOffset;
this.align
.setNode(this.node)
.setParentNode(parentNode)
.setHorizontal(right, false)
.setVertical(false, true);
.setHorizontal(hDirection, hAlign)
.setVertical('bottom', 'top');
// this.node.setAttribute('data-kit-menu-align-horizontal', horMode);
if(recursive) {
this.calcStyleChildMenu(true, MenuList);
}
};
Menu.prototype.calcStyleChildMenu = function(recursive = false, MenuList = null){
var i, MenuListActive = [];
for(i in MenuList){
if(!MenuList.hasOwnProperty(i) || !(MenuList[i] instanceof Menu)) {
continue;
}
if(MenuList[i].bActive && this !== MenuList[i]) {
MenuListActive.push(MenuList[i]);
}
}
for(i in MenuListActive){
if(MenuListActive[i].getParentMenu() === this) {
MenuListActive[i].calcStyle();
if(recursive) {
MenuListActive[i].calcStyleChildMenu(true, MenuListActive);
}
}
}
};
/**
* @return {Menu} | null
*/
Menu.prototype.getParentMenu = function() {
if(this.getParent() && this.getParent().kitMenuItem) {
return this.getParent().kitMenuItem.getMenu();
}
return undefined;
if(
this.getParent() && (this.getParent() instanceof Element) &&
this.getParent().hasOwnProperty('kitMenuItem') && (this.getParent().kitMenuItem instanceof MenuItemClass) &&
this.getParent().kitMenuItem.getMenu() && (this.getParent().kitMenuItem.getMenu() instanceof Menu)
this.getParent().hasOwnProperty('kitMenuItem') && (this.getParent().kitMenuItem instanceof MenuItemClass)
) {
return this.getParent().kitMenuItem.getMenu();
}
return null;
return undefined;
};
Menu.prototype.getParentMenuNode = function() {
var parentMenu = this.getParentMenu(),
@@ -194,6 +262,12 @@ kit.PluginManager.register('menu',function(module, exports, require) {
return parentMenuNode;
};
/**
*
* @param options {kitMenuItemOptions}
* @param returnItem
* @return {Menu}
*/
Menu.prototype.addItem = function (options = {}, returnItem = false) {
var listIndex;
if(options instanceof MenuItemClass) {
@@ -262,7 +336,7 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.options.parent = parentNode;
if(this.bInit) {
this.reInit();
this.reInit(true);
}
};
Menu.prototype.setEventType = function(type = 'hover') {
@@ -273,6 +347,12 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.reInit();
}
};
Menu.prototype.addDocumentEventListener = function() {
document.addEventListener('click', this.documentListenerHandler, false);
};
Menu.prototype.removeDocumentEventListener = function() {
document.removeEventListener('click', this.documentListenerHandler, false);
};
Menu.prototype.removeParentEventListener = function() {
// console.log('Menu: removeParentEventListener');
if(this.options.parent instanceof Element) {
@@ -293,11 +373,21 @@ kit.PluginManager.register('menu',function(module, exports, require) {
}
}
};
Menu.prototype.initNodeHandlers = function() {
if(this.node) {
this.node.addEventListener('mouseenter', this.nodeActionHandler, false);
this.node.addEventListener('mouseleave', this.nodeActionHandler, false);
Menu.prototype.addNodeEventListener = function() {
if(!this.node) {
return;
}
this.node.addEventListener('mouseenter', this.nodeActionHandler, false);
this.node.addEventListener('mouseleave', this.nodeActionHandler, false);
};
Menu.prototype.removeNodeEventListener = function() {
if(!this.node) {
return;
}
this.node.removeEventListener('mouseenter', this.nodeActionHandler, false);
this.node.removeEventListener('mouseleave', this.nodeActionHandler, false);
};
Menu.prototype.toggleParent = function() {
this.node.classList.toggle('active');
@@ -324,7 +414,7 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.options.parent.append(this.getNode());
this.addParentEventListener();
this.initNodeHandlers();
this.addNodeEventListener();
//document.addEventListener('click', this.documentListenerHandler, false);
@@ -332,15 +422,17 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.bInit = true;
};
Menu.prototype.reInit = function () {
//console.log('Menu: reInit ' + this.id);
Menu.prototype.reInit = function (recursiveCalcStyle = false) {
// console.warn('Menu: reInit ' + this.id);
if(this.bInit === false) {
return;
}
this.removeNodeEventListener();
this.removeParentEventListener();
//this.removeDocumentEventListener();
document.removeEventListener('click', this.documentListenerHandler, false);
this.removeAnimation();
this.node.remove();
@@ -349,17 +441,18 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.options.parent.prepend(this.getNode());
if(this.bActive) {
this.calcStyle(recursiveCalcStyle);
this.showNode();
} else {
this.hideNode();
}
this.addNodeEventListener();
this.addParentEventListener();
this.initNodeHandlers();
//document.addEventListener('click', this.documentListenerHandler, false);
//this.addDocumentEventListener();
};
Menu.prototype.toggle = function() {
if(this.toggleParent()) {
this.showNode();
@@ -412,10 +505,16 @@ kit.PluginManager.register('menu',function(module, exports, require) {
// console.log('documentListener');
// console.log(event);
if (this.needHideByParent(event.target)) {
this.toggle();
if(this.options.eventType === 'click') {
if (this.needHideByParent(event.target)) {
this.toggle();
}
}
};
/**
* @param options {kitMenuClassDefaultOptions}
* @return {Menu}
*/
Menu.prototype.setOptions = function (options = {}) {
this.options = Object.assign({}, this.options, options);
this.setParent(this.options.parent);
@@ -431,16 +530,22 @@ kit.PluginManager.register('menu',function(module, exports, require) {
this.bInit = false;
this.bActive = false;
this.child = null;
/**
* @class kitMenuItemOptions
*/
this.options = {
id: '',
icon: libModule.icon.options,
arrow: libModule.icon.arrowMenu,
icon: libModule.svg.options,
arrow: libModule.svg.arrowMenu,
label: 'menu',
href: 'javascript:void(0);',
class: 'kit-menu-item',
sort: 500,
visible: true,
/** @type {kitMenuItemHandler} */
hover: this.defaultHoverHandler,
/** @type {kitMenuItemHandler} */
click: this.defaultClickHandler,
dblclick: this.defaultDblClickHandler,
};
@@ -725,6 +830,15 @@ kit.PluginManager.register('menu',function(module, exports, require) {
return Menu;
})();
var getInstance = function(options = {}, items = []) {
if(options instanceof Menu) {
return options;
}
if(typeof options === 'string') {
options = document.querySelector(options);
}
if((options instanceof HTMLElement) && options.kit && options.kit.menu) {
return options.kit.menu;
}
return new MenuClass(options, items);
};
var getActiveMenuIdList = function(){
@@ -755,14 +869,14 @@ kit.PluginManager.register('menu',function(module, exports, require) {
MenuList[id].calcStyle();
});
};
var autoload = function(doc = document){
var autoload = function(doc = document, selector = '.kit-menu'){
if(!(doc instanceof Node)) {
return false;
}
var menuList = doc.querySelectorAll('.' + defaultMenuOptions.class);
var menuList = doc.querySelectorAll(selector);
menuList.forEach(
function(menuNode, currentIndex, listObj) {
if(!menuNode.hasOwnProperty(defaultMenuOptions.nodeProperty)) {
if(!menuNode.kit || !menuNode.kit.hasOwnProperty(defaultMenuOptions.nodeProperty)) {
}
}
@@ -777,11 +891,19 @@ kit.PluginManager.register('menu',function(module, exports, require) {
};
window.addEventListener('resize', globalHandlers.resize);
this.Class = MenuClass;
this.getInstance = getInstance;
this.reInitAllMenu = reInitAllMenu;
this.reCalcAllMenu = reCalcAllMenu;
this.autoload = autoload;
return this;
/**
* @memberof kitCore
* @instance
*/
var menu = {
Class: MenuClass,
getInstance: getInstance,
reInitAllMenu: reInitAllMenu,
reCalcAllMenu: reCalcAllMenu,
autoload: autoload,
MenuList: MenuList,
};
return module.exports = menu;
});
assets/tippy/tippy.js
+2463
View File
File diff suppressed because it is too large Load Diff
assets/tippy/tippy.min.js
Vendored
+2
View File
File diff suppressed because one or more lines are too long
assets/toolkit/toolkit.css
+48 -14
View File
@@ -34,7 +34,15 @@
.kit-field--text {
}
input[type="color"] ~ .kit-field__color {
display: flex;
}
.kit-field__color {
display: none;
}
.kit-field__color {
display: none;
}
.kit-field__label {
display: none;
}
@@ -701,6 +709,9 @@
-moz-transition: background 0.3s, box-shadow 0.3s, color 0.3s;
transition: background 0.3s, box-shadow 0.3s, color 0.3s;
position: relative;
/*box-shadow: 0px 2px 7px -6px var(--kit-color-button-content, var(--kit-color-text));*/
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}
.kit-button * {
pointer-events: none;
@@ -726,13 +737,6 @@
-moz-transition: none;
transition: none;
}
.kit-button.kit-button--material {
padding-bottom: 2px;
box-shadow: inset 0 -2px 0 var(--kit-color-button-material);
}
.kit-button.kit-button--material:hover {
box-shadow: inset 0 -2px 0 var(--kit-color-button-material);
}
.kit-button__icon {
display: inline-block;
height: 1em;
@@ -782,11 +786,13 @@
width: 100%;
}
.kit-button.kit-button--radius,
.kit-button.kit-button--radius:after {
.kit-button.kit-button--radius:before,
.kit-button.kit-button--radius .kit-button__border {
border-radius: 2px;
}
.kit-button.kit-button--round,
.kit-button.kit-button--round:after {
.kit-button.kit-button--round:before,
.kit-button.kit-button--round .kit-button__border {
border-radius: 1em;
}
@@ -795,22 +801,50 @@
color: var(--kit-color-button-content);
background-color: transparent;
position: relative;
box-shadow: none;
transition: inherit;
}
.kit-button.kit-button--bordered:after {
content: '';
.kit-button__border {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 1px solid var(--kit-color-button-content);
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.kit-button.kit-button--bordered .kit-button__border {
border-width: 1px;
border-style: solid;
border-color: var(--kit-color-button-content, var(--kit-color-text));
}
.kit-button.kit-button--material:before {
transition: inherit;
content: '';
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-shadow: inset 0 -2px 0 var(--kit-color-button-material, var(--kit-color-text));
}
.kit-button.kit-button--material:hover:before,
.kit-button.kit-button--material:active:before,
.kit-button.kit-button--material:focus:before {
box-shadow: inset 0 -2px 0 var(--kit-color-button-material, var(--kit-color-text));
}
.kit-button.kit-button--material .kit-button__border {
border-width: 1px;
border-style: solid;
border-color: var(--kit-color-button-content, var(--kit-color-text));
}
.kit-button.kit-button--transparent {
background: transparent !important;
assets/utils/utils.js
+10 -4
View File
@@ -1,4 +1,5 @@
kit.PluginManager.register('utils', function(module, exports, require){
/** @module utils */
__PluginManager__.register('utils', function(module, exports, require){
var StackExecutionLimiter = (function () {
var stack = function (context, callback, timeout = 1000) {
this.counter = 0;
@@ -43,8 +44,6 @@ kit.PluginManager.register('utils', function(module, exports, require){
};
return stack;
})();
var str = {
ucFirst: function (str) {
if (!str) return str;
@@ -52,8 +51,15 @@ kit.PluginManager.register('utils', function(module, exports, require){
}
};
return module.exports = {
/**
* @memberof kitCore
* @instance
*/
var utils = {
StackExecutionLimiter: StackExecutionLimiter,
str: str,
};
return module.exports = utils;
});