From ac5877f2b84f6969b4710c36c11862af0b23f050 Mon Sep 17 00:00:00 2001 From: Istvan Halmen Date: Fri, 21 Dec 2018 12:51:48 +0200 Subject: [PATCH] Merging 4.4.3 changes --- examples/angular/package.json | 2 +- examples/react/package.json | 2 +- package.json | 2 +- packages/angular/package.json | 2 +- packages/angularjs/package.json | 2 +- packages/javascript/package.json | 2 +- packages/jquery/package.json | 2 +- packages/react/package.json | 2 +- src/js/classes/input.js | 39 +++------- src/js/classes/scroller.js | 19 ++--- src/js/classes/scrollview-base.js | 6 +- src/js/core/core.js | 4 +- src/js/forms.angular.ts | 87 +++++++++++++---------- src/js/forms.react.jsx | 54 ++++++++++++-- src/js/frameworks/angular.ts | 4 ++ src/js/frameworks/javascript.d.ts | 71 +++++++++++++++++- src/js/frameworks/jquery.d.ts | 75 ++++++++++++++++++- src/js/frameworks/react.jsx | 3 +- src/js/themes/ios.js | 3 +- src/less/collapsible.less | 8 +-- src/less/forms.less | 27 ++++++- src/less/frame.less | 1 + src/less/grid-layout.less | 3 +- src/less/input.less | 82 +++++++++------------ src/less/templates/ios.less | 11 ++- src/less/themes/ios.forms.less | 24 +++++-- src/less/themes/ios.input.less | 47 +++++------- src/less/themes/material.collapsible.less | 10 ++- src/less/themes/material.forms.less | 18 ++++- src/less/themes/material.input.less | 45 ++++++------ src/less/themes/windows.forms.less | 4 +- 31 files changed, 425 insertions(+), 236 deletions(-) diff --git a/examples/angular/package.json b/examples/angular/package.json index ff507dbf..4fbf5d9e 100644 --- a/examples/angular/package.json +++ b/examples/angular/package.json @@ -21,7 +21,7 @@ "@angular/platform-browser": "^5.2.11", "@angular/platform-browser-dynamic": "^5.2.11", "@angular/router": "^5.2.11", - "@mobiscroll/angular-lite": "^4.4.2", + "@mobiscroll/angular-lite": "^4.4.3", "core-js": "^2.5.7", "rxjs": "^5.5.11", "zone.js": "^0.8.26" diff --git a/examples/react/package.json b/examples/react/package.json index 7ebe6afc..45e38d64 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@mobiscroll/react-lite": "^4.4.2", + "@mobiscroll/react-lite": "^4.4.3", "react": "^16.4.1", "react-dom": "^16.4.1", "react-scripts": "^1.1.4" diff --git a/package.json b/package.json index 954ae0c2..0c891169 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mobiscroll", - "version": "4.4.2", + "version": "4.4.3", "description": "Cross platform UI controls for progressive web an hybrid apps", "homepage": "https://mobiscroll.com/", "license": "Apache-2.0", diff --git a/packages/angular/package.json b/packages/angular/package.json index 7d083cdf..94ed5252 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@mobiscroll/angular-lite", - "version": "4.4.2", + "version": "4.4.3", "description": "Angular UI library for progressive web and hybrid apps", "homepage": "https://mobiscroll.com/", "license": "Apache-2.0", diff --git a/packages/angularjs/package.json b/packages/angularjs/package.json index 0e1ee32e..093a2176 100644 --- a/packages/angularjs/package.json +++ b/packages/angularjs/package.json @@ -1,6 +1,6 @@ { "name": "@mobiscroll/angularjs-lite", - "version": "4.4.2", + "version": "4.4.3", "description": "AngularJS UI library for progressive web and hybrid apps", "homepage": "https://mobiscroll.com/", "license": "Apache-2.0", diff --git a/packages/javascript/package.json b/packages/javascript/package.json index d613b177..60a14651 100644 --- a/packages/javascript/package.json +++ b/packages/javascript/package.json @@ -1,6 +1,6 @@ { "name": "@mobiscroll/javascript-lite", - "version": "4.4.2", + "version": "4.4.3", "description": "Framework agnostic UI library for progressive web and hybrid apps", "homepage": "https://mobiscroll.com/", "license": "Apache-2.0", diff --git a/packages/jquery/package.json b/packages/jquery/package.json index 4da04b50..98af51f5 100644 --- a/packages/jquery/package.json +++ b/packages/jquery/package.json @@ -1,6 +1,6 @@ { "name": "@mobiscroll/jquery-lite", - "version": "4.4.2", + "version": "4.4.3", "description": "jQuery and jQuery Mobile UI library for progressive web and hybrid apps", "homepage": "https://mobiscroll.com/", "license": "Apache-2.0", diff --git a/packages/react/package.json b/packages/react/package.json index 1a8dd472..7ccc6e62 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@mobiscroll/react-lite", - "version": "4.4.2", + "version": "4.4.3", "description": "React UI library for progressive web and hybrid apps", "homepage": "https://mobiscroll.com/", "license": "Apache-2.0", diff --git a/src/js/classes/input.js b/src/js/classes/input.js index a16065c4..45d614c7 100644 --- a/src/js/classes/input.js +++ b/src/js/classes/input.js @@ -7,54 +7,37 @@ export class Input extends FormControl { super(elm, settings); addIconToggle(this, this._$parent, this._$elm); + this._$parent.addClass('mbsc-input'); + this.checkLabel = this.checkLabel.bind(this); // Attach events - // Prevent 300ms click latency events.forEach(ev => { - elm.addEventListener(ev, this); + this._$elm.on(ev, this.checkLabel); }); setTimeout(() => { // if label is floating and input is autofill, add floating active class // input has no value yet - if (this._isFloating && this._$elm.is("*:-webkit-autofill")) { + if (this._isFloating && this._$elm.is('*:-webkit-autofill')) { this._$parent.addClass('mbsc-label-floating-active'); } }); } - handleEvent(ev) { - super.handleEvent(ev); - switch (ev.type) { - case 'focus': - this.onFocus(); - break; - case 'change': - case 'blur': - this.onChange(); - break; - } - } - refresh() { - this.onChange(); - } - - onChange() { + checkLabel(ev) { if (this._isFloating) { - if (!this._elm.value) { - this._$parent.removeClass('mbsc-label-floating-active'); - } else { + if (this._elm.value || (ev && ev.type == 'focus')) { this._$parent.addClass('mbsc-label-floating-active'); + } else { + this._$parent.removeClass('mbsc-label-floating-active'); } } } - onFocus() { - if (this._isFloating) { - this._$parent.addClass('mbsc-label-floating-active'); - } + refresh() { + this.checkLabel(); } destroy() { @@ -65,7 +48,7 @@ export class Input extends FormControl { .remove(); events.forEach(ev => { - this._elm.removeEventListener(ev, this); + this._$elm.off(ev, this.checkLabel); }); } } diff --git a/src/js/classes/scroller.js b/src/js/classes/scroller.js index dcfd7778..53d67949 100644 --- a/src/js/classes/scroller.js +++ b/src/js/classes/scroller.js @@ -2,17 +2,16 @@ import { mobiscroll } from '../core/core'; // mobiscroll needed for trial /* eslint-enable no-unused-vars */ import { $, extend, classes } from '../core/core'; -import { os, isBrowser } from '../util/platform'; import { cssPrefix, jsPrefix } from '../util/dom'; import { isNumeric, objectToArray } from '../util/misc'; +import { isBrowser } from '../util/platform'; import { createStepper } from '../util/stepper'; import { Frame } from './frame'; import { ScrollViewBase } from './scrollview-base'; var presets = {}, css = isBrowser ? window.CSS : null, - has3d = css && css.supports && css.supports("(transform-style: preserve-3d)"), - force2D = !has3d || os == 'wp' || os == 'android'; + has3d = css && css.supports && css.supports("(transform-style: preserve-3d)"); function sanitize(str) { return (str + '').replace('"', '___'); @@ -31,7 +30,6 @@ export const Scroller = function (el, settings, inherit) { showScrollArrows, stepper, tempWheelArray, - hasScrollbar, itemHeight, itemHeight3d, isPointer, @@ -506,7 +504,7 @@ export const Scroller = function (el, settings, inherit) { that._wheelArray = []; for (var i = 0; i < tempWheelArray.length; i++) { // In case of multiple select wheel take the first selected value, - that._wheelArray[i] = wheels[i] && wheels[i].multiple ? Object.keys(that._tempSelected[i])[0] : tempWheelArray[i]; + that._wheelArray[i] = wheels[i] && wheels[i].multiple ? Object.keys(that._tempSelected[i] || {})[0] : tempWheelArray[i]; } that._value = that._hasValue ? that._tempValue : null; that._selected = extend(true, {}, that._tempSelected); @@ -644,7 +642,7 @@ export const Scroller = function (el, settings, inherit) { (s.width ? ('width:' + (s.width[l] || s.width) + 'px;') : (s.minWidth ? ('min-width:' + (s.minWidth[l] || s.minWidth) + 'px;') : '') + (s.maxWidth ? ('max-width:' + (s.maxWidth[l] || s.maxWidth) + 'px;') : '')) + '">' + - (hasScrollbar ? '
' : '') + // Scrollbar + (isPointer ? '
' : '') + // Scrollbar '
' + highlight + '
' + @@ -832,17 +830,10 @@ export const Scroller = function (el, settings, inherit) { that._wheelArray = null; } - if (isPointer) { - s.scroll3d = false; - hasScrollbar = true; - } else { - hasScrollbar = false; - } - wheels = []; wheelsMap = {}; showScrollArrows = s.showScrollArrows; - scroll3d = s.scroll3d && !force2D && !showScrollArrows; + scroll3d = s.scroll3d && has3d && !showScrollArrows && !isPointer && (s.theme == 'ios' || s.baseTheme == 'ios'); itemHeight = s.height; itemHeight3d = scroll3d ? Math.round((itemHeight - (itemHeight * s.rows / 2 + 3) * 0.03) / 2) * 2 : itemHeight; batchSize3d = Math.round(s.rows * 1.8); diff --git a/src/js/classes/scrollview-base.js b/src/js/classes/scrollview-base.js index 6d4874a8..e3e0dac8 100644 --- a/src/js/classes/scrollview-base.js +++ b/src/js/classes/scrollview-base.js @@ -170,7 +170,7 @@ export const ScrollViewBase = function (el, settings, inherit) { } else if (Math.abs(diffY) > 7) { nativeScroll = true; that.scrolled = true; - $elm.trigger('touchend'); + onEnd(); } } } @@ -199,7 +199,7 @@ export const ScrollViewBase = function (el, settings, inherit) { time = new Date() - startTime; // Better performance if there are tap events on document - if (s.stopProp) { + if (s.stopProp && ev) { ev.stopPropagation(); } @@ -233,7 +233,7 @@ export const ScrollViewBase = function (el, settings, inherit) { } // Detach document events - if (ev.type == 'mouseup') { + if (ev && ev.type == 'mouseup') { $(document).off('mousemove', onMove).off('mouseup', onEnd); } diff --git a/src/js/core/core.js b/src/js/core/core.js index b40e936b..33f9932c 100644 --- a/src/js/core/core.js +++ b/src/js/core/core.js @@ -1,5 +1,5 @@ /*! - * Mobiscroll v4.4.2 + * Mobiscroll v4.4.3 * http://mobiscroll.com * * Copyright 2010-2018, Acid Media @@ -76,7 +76,7 @@ extend(util, { ms = extend(mobiscroll, { $: $, - version: '4.4.2', + version: '4.4.3', autoTheme: 'mobiscroll', themes: { form: {}, diff --git a/src/js/forms.angular.ts b/src/js/forms.angular.ts index cb39107c..8d5ebfd9 100644 --- a/src/js/forms.angular.ts +++ b/src/js/forms.angular.ts @@ -21,7 +21,8 @@ import { Observable, MbscInputService, MbscOptionsService, - AfterViewInit + AfterViewInit, + ChangeDetectionStrategy } from './frameworks/angular'; import { Form } from './classes/forms'; @@ -51,7 +52,7 @@ import { CollapsibleBase } from './util/collapsible-base.js'; * @param val The value of the attribute. */ function emptyOrTrue(val: any) { - return (typeof(val) === 'string' && (val === 'true' || val === '')) || !!val; + return (typeof (val) === 'string' && (val === 'true' || val === '')) || !!val; } @Component({ @@ -535,7 +536,8 @@ export class MbscDropdown extends MbscFormValueBase { [disabled]="disabled"> - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class MbscButton extends MbscFormBase { _instance: Button; @@ -543,29 +545,29 @@ export class MbscButton extends MbscFormBase { _block: boolean = false; _outline: boolean = false; + _classesObj: any = {}; get cssClasses() { - var classesObj: any = { - 'mbsc-btn-flat': this._flat, - 'mbsc-btn-block': this._block, - 'mbsc-btn-outline': this._outline - }; + for (var k in this._classesObj) { delete this._classesObj[k] }; + this._classesObj['mbsc-btn-flat'] = this._flat; + this._classesObj['mbsc-btn-block'] = this._block; + this._classesObj['mbsc-btn-outline'] = this._outline; if (this.classes) { let cssClasses = this.classes.split(' '); if (cssClasses.length) { for (let i = 0; i < cssClasses.length; i++) { if (cssClasses[i]) { - classesObj[cssClasses[i]] = true; + this._classesObj[cssClasses[i]] = true; } } } } if (this.color) { - classesObj['mbsc-btn-' + this.color] = true; + this._classesObj['mbsc-btn-' + this.color] = true; } - return classesObj; + return this._classesObj; } @Input('class') @@ -620,7 +622,8 @@ export class MbscButton extends MbscFormBase { (blur)="onTouch($event)" /> - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush }) export class MbscCheckbox extends MbscFormValueBase { _instance: CheckBox; @@ -630,12 +633,13 @@ export class MbscCheckbox extends MbscFormValueBase { @Input() color: string; + _colorClass: any = {}; get colorClass(): any { - let cl: any = {}; + for (var k in this._colorClass) { delete this._colorClass[k]; } if (this.color) { - cl['mbsc-checkbox-' + this.color] = true; + this._colorClass['mbsc-checkbox-' + this.color] = true; } - return cl; + return this._colorClass; } constructor(hostElem: ElementRef, @Optional() formService: MbscOptionsService, @Optional() control: NgControl) { @@ -664,7 +668,8 @@ export class MbscCheckbox extends MbscFormValueBase { (blur)="onTouch($event)" /> `, - exportAs: 'mobiscroll' + exportAs: 'mobiscroll', + changeDetection: ChangeDetectionStrategy.OnPush }) export class MbscSwitch extends MbscControlBase implements OnInit { protected _inheritedOptions: any; @@ -701,12 +706,13 @@ export class MbscSwitch extends MbscControlBase implements OnInit { @ViewChild('initElement') _initElem: ElementRef; + _colorClass: any = {}; get colorClass() { - let cl: any = {}; + for (var k in this._colorClass) { delete this._colorClass[k] }; if (this.color) { - cl['mbsc-switch-' + this.color] = true; + this._colorClass['mbsc-switch-' + this.color] = true; } - return cl; + return this._colorClass; } constructor(hostElem: ElementRef, zone: NgZone, @Optional() protected _formService: MbscOptionsService, @Optional() control: NgControl) { @@ -758,13 +764,14 @@ export class MbscSwitch extends MbscControlBase implements OnInit { [attr.readonly]="_readonly"/>
`, - exportAs: 'mobiscroll' + exportAs: 'mobiscroll', + changeDetection: ChangeDetectionStrategy.OnPush }) export class MbscStepper extends MbscControlBase implements OnInit { protected _inheritedOptions: any; _instance: Stepper; _readonly: boolean; - + @Input() set readonly(val: any) { // sets the readonly setting to true if empty string is provided, aka without value (ex. ) @@ -809,12 +816,13 @@ export class MbscStepper extends MbscControlBase implements OnInit { @Input() color: string; + _colorClass: any = {}; get colorClass(): any { - let cl: any = {}; + for (var k in this._colorClass) { delete this._colorClass[k]; } if (this.color) { - cl['mbsc-stepper-' + this.color] = true; + this._colorClass['mbsc-stepper-' + this.color] = true; } - return cl; + return this._colorClass; } /** @@ -879,7 +887,8 @@ export class MbscStepper extends MbscControlBase implements OnInit { `, - exportAs: 'mobiscroll' + exportAs: 'mobiscroll', + changeDetection: ChangeDetectionStrategy.OnPush }) export class MbscProgress extends MbscControlBase implements OnInit { protected _inheritedOptions: any; @@ -921,12 +930,13 @@ export class MbscProgress extends MbscControlBase implements OnInit { @Input() color: string; + _colorClass: any = {}; get colorClass(): any { - let cl: any = {}; + for (var k in this._colorClass) { delete this._colorClass[k]; } if (this.color) { - cl['mbsc-progress-' + this.color] = true; + this._colorClass['mbsc-progress-' + this.color] = true; } - return cl; + return this._colorClass; } /** @@ -1090,12 +1100,13 @@ export class MbscRadio extends MbscFormBase { @Input() value: any; + _colorClass: any = {}; get colorClass() { - let cl: any = {}; + for (var k in this._colorClass) { delete this._colorClass[k]; } if (this.color) { - cl['mbsc-radio-' + this.color] = true; + this._colorClass['mbsc-radio-' + this.color] = true; } - return cl; + return this._colorClass; } clicked(e: any) { @@ -1351,12 +1362,13 @@ export class MbscSlider extends MbscControlBase { @Input() color: string; + _colorClass: any = {}; get colorClass(): any { - let cl: any = {}; + for (var k in this._colorClass) { delete this._colorClass[k]; } if (this.color) { - cl['mbsc-slider-' + this.color] = true; + this._colorClass['mbsc-slider-' + this.color] = true; } - return cl; + return this._colorClass; } /** @@ -1527,12 +1539,13 @@ export class MbscRating extends MbscControlBase implements OnInit { @Input() color: string; + _colorClass: any = {}; get colorClass(): any { - let cl: any = {}; + for (var k in this._colorClass) { delete this._colorClass[k]; } if (this.color) { - cl['mbsc-rating-' + this.color] = true; + this._colorClass['mbsc-rating-' + this.color] = true; } - return cl; + return this._colorClass; } constructor(hostElem: ElementRef, zone: NgZone, @Optional() protected formService: MbscOptionsService, @Optional() control: NgControl) { diff --git a/src/js/forms.react.jsx b/src/js/forms.react.jsx index 0a5411c1..1c63685a 100644 --- a/src/js/forms.react.jsx +++ b/src/js/forms.react.jsx @@ -7,7 +7,8 @@ import { PropTypes, MbscOptimized, CorePropTypes, - MbscInit + MbscInit, + updateCssClasses } from './frameworks/react'; import { Form } from './classes/forms'; import { Progress } from './classes/progress'; @@ -123,17 +124,39 @@ class MbscLabel extends React.Component { presetName: PropTypes.string } - render = () => { + componentDidMount() { + updateCssClasses.call(this, '', this.getClasses(this.props)); + } + + componentDidUpdate() { + if (this.cssClassUpdate) { + updateCssClasses.call(this, this.cssClassUpdate.prev, this.cssClassUpdate.next); + } + } + + shouldComponentUpdate(nextProps) { + const nextClasses = this.getClasses(nextProps); + const thisClasses = this.getClasses(this.props); + if (thisClasses !== nextClasses) { + this.cssClassUpdate = { + prev: thisClasses, + next: nextClasses + }; + } else { + this.cssClassUpdate = null; + } + return true; + } + + getClasses(props) { /* eslint-disable no-unused-vars */ // justification: variable 'valid' and 'className' is declared due to object decomposition var { valid, className, color, - children, - presetName, - ...other - } = this.props; + presetName + } = props; /* eslint-enable */ const cssClasses = []; @@ -151,7 +174,24 @@ class MbscLabel extends React.Component { if (cssClasses.length) { cssClass = cssClasses.reduce((pv, cv) => pv + ' ' + cv).replace(/\s+/g, ' ').trim(); } - return ; + return cssClass; + } + + render = () => { + /* eslint-disable no-unused-vars */ + // justification: variable 'valid' and 'className' is declared due to object decomposition + var { + valid, + className, + color, + children, + presetName, + ...other + } = this.props; + + /* eslint-enable */ + + return ; } } diff --git a/src/js/frameworks/angular.ts b/src/js/frameworks/angular.ts index 14fc6905..0fad45b2 100644 --- a/src/js/frameworks/angular.ts +++ b/src/js/frameworks/angular.ts @@ -32,6 +32,7 @@ import { ViewChildren, ViewContainerRef, Injector, + ChangeDetectionStrategy } from '@angular/core'; // // angular2 import { trigger, state, animate, transition, style } from '@angular/core'; // Angular 2.x @@ -52,6 +53,8 @@ import { Observable } from 'rxjs/Observable'; import { MbscFormValueBase } from '../forms.angular'; +export class MbscRouterToken { } + @Injectable() export class MbscOptionsService { private _options: any; @@ -789,5 +792,6 @@ export { ViewChildren, ViewContainerRef, Injector, + ChangeDetectionStrategy //trigger, state, animate, transition, style } \ No newline at end of file diff --git a/src/js/frameworks/javascript.d.ts b/src/js/frameworks/javascript.d.ts index 65a5a55f..d43bf66e 100644 --- a/src/js/frameworks/javascript.d.ts +++ b/src/js/frameworks/javascript.d.ts @@ -1,20 +1,87 @@ +import { Card, MbscCardOptions } from '../classes/cards'; +export { Card, MbscCardOptions }; +import { Calendar, MbscCalendarOptions } from '../presets/calendar'; +export { Calendar, MbscCalendarOptions }; +import { Color, MbscColorOptions } from '../classes/color'; +export { Color, MbscColorOptions }; +import { MbscDatetimeOptions } from '../presets/datetimebase'; +import { DateTime } from '../presets/datetime'; +export { DateTime, MbscDatetimeOptions }; +import { Eventcalendar, MbscEventcalendarOptions } from '../presets/eventcalendar'; +export { Eventcalendar, MbscEventcalendarOptions }; import { Form, MbscFormOptions } from '../classes/forms'; export { Form, MbscFormOptions }; import { Page, MbscPageOptions } from '../classes/page'; export { Page, MbscPageOptions }; +import { ImageScroller, MbscImageOptions } from '../presets/image'; +export { ImageScroller, MbscImageOptions }; +import { ListView, MbscListviewOptions } from '../classes/listview'; +export { ListView, MbscListviewOptions }; +import { Optionlist, MbscOptionlistOptions } from '../classes/optionlist'; +export { Optionlist, MbscOptionlistOptions }; +import { Measurement, MbscMeasurementOptions } from '../presets/measurement'; +import { Mass, MbscMassOptions } from '../presets/mass'; +import { Distance, MbscDistanceOptions } from '../presets/distance'; +import { Force, MbscForceOptions } from '../presets/force'; +import { Speed, MbscSpeedOptions } from '../presets/speed'; +import { Temperature, MbscTemperatureOptions } from '../presets/temperature'; +export { Measurement, Mass, Distance, Force, Speed, Temperature, MbscMeasurementOptions, MbscMassOptions, MbscForceOptions, MbscSpeedOptions, MbscTemperatureOptions, MbscDistanceOptions }; +import { Navigation, MbscNavOptions } from '../classes/navigation'; +export { Navigation, MbscNavOptions }; +import { NumberScroller, MbscNumberOptions } from '../presets/number'; +export { NumberScroller, MbscNumberOptions }; +import { Numpad, MbscNumpadOptions } from '../classes/numpad'; +export { Numpad, MbscNumpadOptions }; +import { RangePicker, MbscRangeOptions } from '../presets/range'; +export { RangePicker, MbscRangeOptions }; import { Scroller, MbscScrollerOptions } from '../classes/scroller'; export { Scroller, MbscScrollerOptions }; -import { Widget, MbscWidgetOptions } from '../classes/popup'; -export { Widget, MbscWidgetOptions }; +import { ScrollView, MbscScrollViewOptions } from '../classes/scrollview'; +export { ScrollView, MbscScrollViewOptions }; +import { Select, MbscSelectOptions } from '../presets/select'; +export { Select, MbscSelectOptions }; +import { Timer, MbscTimerOptions } from '../presets/timer'; +export { Timer, MbscTimerOptions }; +import { Timespan, MbscTimespanOptions } from '../presets/timespan'; +export { Timespan, MbscTimespanOptions }; +import { Treelist, MbscTreelistOptions } from '../presets/treelist'; +export { Treelist, MbscTreelistOptions }; import { Popup, MbscPopupOptions } from '../classes/popup'; export { Popup, MbscPopupOptions }; +import { Widget, MbscWidgetOptions } from '../classes/popup'; +export { Widget, MbscWidgetOptions }; import { IMobiscroll as _IMobiscroll } from '../core/core'; export interface IMobiscroll extends _IMobiscroll { + card(selector: string | HTMLElement, options?: MbscCardOptions): Card; + calendar(selector: string | HTMLElement, options?: MbscCalendarOptions): Calendar; + color(selector: string | HTMLElement, options?: MbscColorOptions): Color; + datetime(selector: string | HTMLElement, options?: MbscDatetimeOptions): DateTime; + date(selector: string | HTMLElement, options?: MbscDatetimeOptions): DateTime; + time(selector: string | HTMLElement, options?: MbscDatetimeOptions): DateTime; + eventcalendar(selector: string | HTMLElement, options?: MbscEventcalendarOptions): Eventcalendar; form(selector: string | HTMLElement, options?: MbscFormOptions): Form; page(selector: string | HTMLElement, options?: MbscPageOptions): Page; + image(selector: string | HTMLElement, options?: MbscImageOptions): ImageScroller; + listview(selector: string | HTMLElement, options?: MbscListviewOptions): ListView; + optionlist(selector: string | HTMLElement, options?: MbscOptionlistOptions): Optionlist; + measurement(selector: string | HTMLElement, options?: MbscMeasurementOptions): Measurement; + mass(selector: string | HTMLElement, options?: MbscMassOptions): Mass; + distance(selector: string | HTMLElement, options?: MbscDistanceOptions): Distance; + force(selector: string | HTMLElement, options?: MbscForceOptions): Force; + speed(selector: string | HTMLElement, options?: MbscSpeedOptions): Speed; + temperature(selector: string | HTMLElement, options?: MbscTemperatureOptions): Temperature; + nav(selector: string | HTMLElement, options?: MbscNavOptions): Navigation; + number(selector: string | HTMLElement, options?: MbscNumberOptions): NumberScroller; + numpad(selector: string | HTMLElement, options?: MbscNumpadOptions): Numpad; + range(selector: string | HTMLElement, options?: MbscRangeOptions): RangePicker; scroller(selector: string | HTMLElement, options?: MbscScrollerOptions): Scroller; + scrollview(selector: string | HTMLElement, options?: MbscScrollViewOptions): ScrollView; + select(selector: string | HTMLElement, options?: MbscSelectOptions): Select; + timer(selector: string | HTMLElement, options?: MbscTimerOptions): Timer; + timespan(selector: string | HTMLElement, options?: MbscTimespanOptions): Timespan; + treelist(selector: string | HTMLElement, options?: MbscTreelistOptions): Treelist; popup(selector: string | HTMLElement, options?: MbscPopupOptions): Popup; widget(selector: string | HTMLElement, options?: MbscWidgetOptions): Widget; } diff --git a/src/js/frameworks/jquery.d.ts b/src/js/frameworks/jquery.d.ts index d0212531..acde6c1d 100644 --- a/src/js/frameworks/jquery.d.ts +++ b/src/js/frameworks/jquery.d.ts @@ -1,13 +1,55 @@ +import { Card, MbscCardOptions } from '../classes/cards'; +export { Card, MbscCardOptions }; +import { Calendar, MbscCalendarOptions } from '../presets/calendar'; +export { Calendar, MbscCalendarOptions }; +import { Color, MbscColorOptions } from '../classes/color'; +export { Color, MbscColorOptions }; +import { MbscDatetimeOptions } from '../presets/datetimebase'; +import { DateTime } from '../presets/datetime'; +export { DateTime, MbscDatetimeOptions }; +import { Eventcalendar, MbscEventcalendarOptions } from '../presets/eventcalendar'; +export { Eventcalendar, MbscEventcalendarOptions }; import { Form, MbscFormOptions } from '../classes/forms'; export { Form, MbscFormOptions }; import { Page, MbscPageOptions } from '../classes/page'; export { Page, MbscPageOptions }; +import { ImageScroller, MbscImageOptions } from '../presets/image'; +export { ImageScroller, MbscImageOptions }; +import { ListView, MbscListviewOptions } from '../classes/listview'; +export { ListView, MbscListviewOptions }; +import { Optionlist, MbscOptionlistOptions } from '../classes/optionlist'; +export { Optionlist, MbscOptionlistOptions }; +import { Measurement, MbscMeasurementOptions } from '../presets/measurement'; +import { Mass, MbscMassOptions } from '../presets/mass'; +import { Distance, MbscDistanceOptions } from '../presets/distance'; +import { Force, MbscForceOptions } from '../presets/force'; +import { Speed, MbscSpeedOptions } from '../presets/speed'; +import { Temperature, MbscTemperatureOptions } from '../presets/temperature'; +export { Measurement, Mass, Distance, Force, Speed, Temperature, MbscMeasurementOptions, MbscMassOptions, MbscForceOptions, MbscSpeedOptions, MbscTemperatureOptions, MbscDistanceOptions }; +import { Navigation, MbscNavOptions } from '../classes/navigation'; +export { Navigation, MbscNavOptions }; +import { NumberScroller, MbscNumberOptions } from '../presets/number'; +export { NumberScroller, MbscNumberOptions }; +import { Numpad, MbscNumpadOptions } from '../classes/numpad'; +export { Numpad, MbscNumpadOptions }; +import { RangePicker, MbscRangeOptions } from '../presets/range'; +export { RangePicker, MbscRangeOptions }; import { Scroller, MbscScrollerOptions } from '../classes/scroller'; export { Scroller, MbscScrollerOptions }; -import { Widget, MbscWidgetOptions } from '../classes/popup'; -export { Widget, MbscWidgetOptions }; +import { ScrollView, MbscScrollViewOptions } from '../classes/scrollview'; +export { ScrollView, MbscScrollViewOptions }; +import { Select, MbscSelectOptions } from '../presets/select'; +export { Select, MbscSelectOptions }; +import { Timer, MbscTimerOptions } from '../presets/timer'; +export { Timer, MbscTimerOptions }; +import { Timespan, MbscTimespanOptions } from '../presets/timespan'; +export { Timespan, MbscTimespanOptions }; +import { Treelist, MbscTreelistOptions } from '../presets/treelist'; +export { Treelist, MbscTreelistOptions }; import { Popup, MbscPopupOptions } from '../classes/popup'; export { Popup, MbscPopupOptions }; +import { Widget, MbscWidgetOptions } from '../classes/popup'; +export { Widget, MbscWidgetOptions }; export { IMobiscroll } from '../core/core'; export { mobiscroll as default } from '../core/core'; @@ -15,9 +57,34 @@ export { mobiscroll as default } from '../core/core'; declare global { interface MobiscrollBundle { [index: number]: JQuery; + card(options?: MbscCardOptions): JQuery; + calendar(options?: MbscCalendarOptions): JQuery; + color(options?: MbscColorOptions): JQuery; + datetime(options?: MbscDatetimeOptions): JQuery; + date(options?: MbscDatetimeOptions): JQuery; + time(options?: MbscDatetimeOptions): JQuery; + eventcalendar(options?: MbscEventcalendarOptions): JQuery; form(options?: MbscFormOptions): JQuery; page(options?: MbscPageOptions): JQuery; + image(options?: MbscImageOptions): JQuery; + listview(options?: MbscListviewOptions): JQuery; + optionlist(options?: MbscOptionlistOptions): JQuery; + measurement(options?: MbscMeasurementOptions): JQuery; + mass(options?: MbscMassOptions): JQuery; + distance(options?: MbscDistanceOptions): JQuery; + force(options?: MbscForceOptions): JQuery; + speed(options?: MbscSpeedOptions): JQuery; + temperature(options?: MbscTemperatureOptions): JQuery; + nav(options?: MbscNavOptions): JQuery; + number(options?: MbscNumberOptions): JQuery; + numpad(options?: MbscNumpadOptions): JQuery; + range(options?: MbscRangeOptions): JQuery; scroller(options?: MbscScrollerOptions): JQuery; + scrollview(options?: MbscScrollViewOptions): JQuery; + select(options?: MbscSelectOptions): JQuery; + timer(options?: MbscTimerOptions): JQuery; + timespan(options?: MbscTimespanOptions): JQuery; + treelist(options?: MbscTreelistOptions): JQuery; popup(options?: MbscPopupOptions): JQuery; widget(options?: MbscWidgetOptions): JQuery; } @@ -27,3 +94,7 @@ declare global { mobiscroll(option: string): any; } } + + + + diff --git a/src/js/frameworks/react.jsx b/src/js/frameworks/react.jsx index e72ca448..55d58d62 100644 --- a/src/js/frameworks/react.jsx +++ b/src/js/frameworks/react.jsx @@ -179,7 +179,8 @@ export const CalbasePropTypes = { onMonthLoaded: funcType, onPageChange: funcType, onPageLoading: funcType, - onPageLoaded: funcType + onPageLoaded: funcType, + onSetDate: funcType }; export function updateCssClasses(currentClasses, nextClasses) { diff --git a/src/js/themes/ios.js b/src/js/themes/ios.js index 2dc612e2..6a4215e9 100644 --- a/src/js/themes/ios.js +++ b/src/js/themes/ios.js @@ -1,4 +1,5 @@ import { extend, mobiscroll } from '../core/core'; +import { os, majorVersion } from '../util/platform'; export default mobiscroll; @@ -9,7 +10,7 @@ themes.frame.ios = { headerText: false, // frame btnWidth: false, // frame deleteIcon: 'ios-backspace', // numpad - scroll3d: true + scroll3d: os != 'wp' && (os != 'android' || majorVersion > 7) }; themes.scroller.ios = extend({}, themes.frame.ios, { diff --git a/src/less/collapsible.less b/src/less/collapsible.less index 32060d4f..16edfce5 100644 --- a/src/less/collapsible.less +++ b/src/less/collapsible.less @@ -60,11 +60,11 @@ /* Mobiscroll theme */ .mbsc-mobiscroll .mbsc-collapsible { - .mbsc-collapsible-header { - padding-right: 3em; + .mbsc-form-group-title { + padding: 1em; } - .mbsc-form-group-title .mbsc-collapsible-icon { - margin-top: 0; + .mbsc-collapsible-header { + padding-right: 3em; } } diff --git a/src/less/forms.less b/src/less/forms.less index 845b3b73..2cc30d64 100644 --- a/src/less/forms.less +++ b/src/less/forms.less @@ -471,6 +471,15 @@ input:disabled + span .mbsc-slider-handle-cont { cursor: not-allowed; } +/* Form in grid */ + +.mbsc-form .mbsc-form-grid .mbsc-form-group-title { + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; +} + /* Mobiscroll theme */ .mbsc-mobiscroll { @@ -491,7 +500,7 @@ input:disabled + span .mbsc-slider-handle-cont { .mbsc-divider, .mbsc-form-group-title { - padding: 1.5em 1em .5em 1em; + padding: .5em 1em; color: #4eccc4; } @@ -506,6 +515,18 @@ input:disabled + span .mbsc-slider-handle-cont { color: #de3226; } + /* Form grid */ + + .mbsc-form-grid { + margin-top: .75em; + margin-bottom: .75em; + } + + .mbsc-form-grid .mbsc-input-box, + .mbsc-form-grid .mbsc-input-outline { + margin: .75em 1em; + } + /* Checkbox */ .mbsc-checkbox { padding: 1em 3.125em 1em 1em; @@ -756,11 +777,11 @@ input:disabled + span .mbsc-slider-handle-cont { .mbsc-btn-group, .mbsc-btn-group-justified { - padding: .5em; + margin: .5em; } .mbsc-btn-group-block { - padding: .5em 1em; + margin: .5em 1em; } /* Button color presets */ diff --git a/src/less/frame.less b/src/less/frame.less index 52899b00..c41a8e5b 100644 --- a/src/less/frame.less +++ b/src/less/frame.less @@ -267,6 +267,7 @@ display: table; width: 100%; text-align: center; + white-space: normal; } .mbsc-fr-btn-cont .mbsc-disabled { diff --git a/src/less/grid-layout.less b/src/less/grid-layout.less index 7c9c952a..8c9b1c54 100644 --- a/src/less/grid-layout.less +++ b/src/less/grid-layout.less @@ -15,7 +15,8 @@ } } -.mbsc-no-padding [class*="mbsc-col"] { +.mbsc-no-padding [class*="mbsc-col"], +.mbsc-form-grid [class*="mbsc-col"] { padding-right: 0; padding-left: 0; } diff --git a/src/less/input.less b/src/less/input.less index d1cf4e53..1e0e5158 100644 --- a/src/less/input.less +++ b/src/less/input.less @@ -125,67 +125,51 @@ transition: transform .2s; } - .mbsc-label + .mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { /* WebKit browsers */ - input::-webkit-input-placeholder, - textarea::-webkit-input-placeholder, - select::-webkit-input-placeholder { + .mbsc-control::-webkit-input-placeholder { opacity: 0; } /* Mozilla Firefox 4 to 18 */ - input:-moz-placeholder, - textarea:-moz-placeholder, - select:-moz-placeholder { + .mbsc-control:-moz-placeholder { opacity: 0; } /* Mozilla Firefox 19+ */ - input::-moz-placeholder, - textarea::-moz-placeholder, - select::-moz-placeholder { + .mbsc-control::-moz-placeholder { opacity: 0; } /* Internet Explorer 10+ */ - input:-ms-input-placeholder, - textarea:-ms-input-placeholder, - select:-ms-input-placeholder { + .mbsc-control:-ms-input-placeholder { opacity: 0; } } - &.mbsc-label-floating-active .mbsc-label + .mbsc-input-wrap { + &.mbsc-label-floating-active .mbsc-label ~ .mbsc-input-wrap { /* WebKit browsers */ - input::-webkit-input-placeholder, - textarea::-webkit-input-placeholder, - select::-webkit-input-placeholder { + .mbsc-control::-webkit-input-placeholder { opacity: 1; transition: opacity .2s; } /* Mozilla Firefox 4 to 18 */ - input:-moz-placeholder, - textarea:-moz-placeholder, - select:-moz-placeholder { + .mbsc-control:-moz-placeholder { opacity: 1; transition: opacity .2s; } /* Mozilla Firefox 19+ */ - input::-moz-placeholder, - textarea::-moz-placeholder, - select::-moz-placeholder { + .mbsc-control::-moz-placeholder { opacity: 1; transition: opacity .2s; } /* Internet Explorer 10+ */ - input:-ms-input-placeholder, - textarea:-ms-input-placeholder, - select:-ms-input-placeholder { + .mbsc-control:-ms-input-placeholder { opacity: 1; transition: opacity .2s; } @@ -230,9 +214,9 @@ /* Input */ .mbsc-input { - margin: .875em 1em 1.75em 1em; + margin: 1.5em 1em; - .mbsc-label + .mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { padding-top: .875em; .mbsc-input-ic { @@ -277,7 +261,7 @@ left: .6875em; } - .mbsc-label + .mbsc-input-wrap .mbsc-select-ic { + .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: 1.4375em; } @@ -410,7 +394,7 @@ } } - &.mbsc-select .mbsc-label + .mbsc-input-wrap .mbsc-select-ic { + &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: .5625em; } } @@ -455,8 +439,9 @@ height: 2.25em; } - &.mbsc-input .mbsc-label + .mbsc-input-wrap { + &.mbsc-input .mbsc-label ~ .mbsc-input-wrap { padding-top: 0; + input { padding-top: 1.25em; height: 3.5em; @@ -481,7 +466,7 @@ line-height: normal; } - &.mbsc-textarea .mbsc-label + .mbsc-input-wrap { + &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap { padding-top: 1.625em; textarea { @@ -495,7 +480,7 @@ top: .625em; } - .mbsc-label + .mbsc-input-wrap .mbsc-select-ic { + .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: 1.375em; } } @@ -505,26 +490,27 @@ .mbsc-label { padding-top: .125em; padding-bottom: .125em; + line-height: 2em; } - .mbsc-label + .mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { padding-top: 0; - + input { height: 2.25em; padding-top: .0625em; } } - .mbsc-label + .mbsc-input-wrap .mbsc-input-ic { + .mbsc-label ~ .mbsc-input-wrap .mbsc-input-ic { top: .1875em; } - &.mbsc-textarea .mbsc-label + .mbsc-input-wrap { + &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap { padding-top: .375em; } - &.mbsc-select .mbsc-label + .mbsc-input-wrap .mbsc-select-ic { + &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: .625em; } } @@ -714,7 +700,7 @@ } &.mbsc-input .mbsc-label { - top: .833334em; + top: .166667em; z-index: 1; background: #f7f7f7; padding: 0 .333334em; @@ -724,11 +710,11 @@ top: .8125em; } - &.mbsc-input .mbsc-label + .mbsc-input-wrap { - padding-top: 1em; + &.mbsc-input .mbsc-label ~ .mbsc-input-wrap { + padding-top: .25em; .mbsc-input-ic { - top: 1.8125em; + top: 1.0625em; } } @@ -757,8 +743,8 @@ top: 1.3125em; } - .mbsc-label + .mbsc-input-wrap .mbsc-select-ic { - top: 2.3125em; + .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { + top: 1.5625em; } } @@ -768,15 +754,15 @@ line-height: 3.375em; } - .mbsc-label + .mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { padding-top: 0; } - .mbsc-label + .mbsc-input-wrap .mbsc-input-ic { + .mbsc-label ~ .mbsc-input-wrap .mbsc-input-ic { top: .8125em; } - &.mbsc-select .mbsc-label + .mbsc-input-wrap .mbsc-select-ic { + &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: 1.3125em; } } @@ -784,7 +770,7 @@ /* Floating labels */ &.mbsc-label-floating.mbsc-input { .mbsc-label { - top: 1.6875em; + top: .9375em; padding: 0; } diff --git a/src/less/templates/ios.less b/src/less/templates/ios.less index ae968b8d..dbc5cd85 100644 --- a/src/less/templates/ios.less +++ b/src/less/templates/ios.less @@ -609,7 +609,7 @@ } &.mbsc-page { - background: @ios-background; + background: @output3_25; color: @ios-text; } @@ -662,18 +662,15 @@ border-top-color: @error; } -.mbsc-@{theme} .mbsc-input input::-webkit-input-placeholder, -.mbsc-@{theme} .mbsc-textarea textarea::-webkit-input-placeholder { +.mbsc-@{theme} .mbsc-input .mbsc-control::-webkit-input-placeholder { color: @output3_11; } -.mbsc-@{theme} .mbsc-input input::-ms-input-placeholder, -.mbsc-@{theme} .mbsc-textarea textarea::-ms-input-placeholder { +.mbsc-@{theme} .mbsc-input .mbsc-control::-ms-input-placeholder { color: @output3_11; } -.mbsc-@{theme} .mbsc-input input::-moz-placeholder, -.mbsc-@{theme} .mbsc-textarea textarea::-moz-placeholder { +.mbsc-@{theme} .mbsc-input .mbsc-control::-moz-placeholder { color: @output3_11; } diff --git a/src/less/themes/ios.forms.less b/src/less/themes/ios.forms.less index 288f4340..2b67b8e5 100644 --- a/src/less/themes/ios.forms.less +++ b/src/less/themes/ios.forms.less @@ -57,13 +57,25 @@ padding: .5em 1.333334em; } - .mbsc-form-outline .mbsc-divider, - .mbsc-form-outline .mbsc-form-group-title, - .mbsc-form-box .mbsc-divider, - .mbsc-form-box .mbsc-form-group-title { + &.mbsc-form-outline .mbsc-divider, + &.mbsc-form-outline .mbsc-form-group-title, + &.mbsc-form-box .mbsc-divider, + &.mbsc-form-box .mbsc-form-group-title { border: 0; } + /* Form grid */ + + .mbsc-form-grid { + margin-top: .75em; + margin-bottom: .75em; + } + + .mbsc-form-grid .mbsc-input-box.mbsc-control-w, + .mbsc-form-grid .mbsc-input-outline.mbsc-control-w { + margin: .75em 1em; + } + /* Checkbox, radio */ &.mbsc-form .mbsc-checkbox, &.mbsc-form .mbsc-radio { @@ -278,12 +290,12 @@ .mbsc-btn-group, .mbsc-btn-group-justified, .mbsc-btn-group-block { - padding: .5em .75em; + margin: .5em .75em; background: #efeff4; } .mbsc-btn-group-block { - padding: .5em 1em; + margin: .5em 1em; } /* Button color presets */ diff --git a/src/less/themes/ios.input.less b/src/less/themes/ios.input.less index b4997ce0..55bff251 100644 --- a/src/less/themes/ios.input.less +++ b/src/less/themes/ios.input.less @@ -19,15 +19,15 @@ background: transparent; } - .mbsc-input input::-webkit-input-placeholder { + .mbsc-input .mbsc-control::-webkit-input-placeholder { color: #ccc; } - .mbsc-input input::-ms-input-placeholder { + .mbsc-input .mbsc-control::-ms-input-placeholder { color: #ccc; } - .mbsc-input input::-moz-placeholder { + .mbsc-input .mbsc-control::-moz-placeholder { color: #ccc; } @@ -48,11 +48,12 @@ left: 0; right: 0; z-index: -1; + border-radius: 8px; } - .mbsc-input-wrap input:-webkit-autofill~.mbsc-input-fill { - background: #FAFFBA; - } + .mbsc-input-wrap input:-webkit-autofill ~ .mbsc-input-fill { + background: #FAFFBA; + } .mbsc-input-wrap input:-webkit-autofill { box-shadow: 0 0 0px 1000px #FAFFBA inset; @@ -65,18 +66,6 @@ background: transparent; } - .mbsc-textarea textarea::-webkit-input-placeholder { - color: #ccc; - } - - .mbsc-textarea textarea::-ms-input-placeholder { - color: #ccc; - } - - .mbsc-textarea textarea::-moz-placeholder { - color: #ccc; - } - .mbsc-input .mbsc-label, .mbsc-progress .mbsc-label { -webkit-box-flex: 0; @@ -321,7 +310,7 @@ width: auto; } - .mbsc-label + .mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { input { height: 3.75em; padding-top: 1.5em; @@ -332,11 +321,11 @@ } } - &.mbsc-textarea .mbsc-label + .mbsc-input-wrap { + &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap { padding-top: 1.625em; } - &.mbsc-select .mbsc-label + .mbsc-input-wrap .mbsc-select-ic { + &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: 1.4375em; } } @@ -398,7 +387,7 @@ top: 1.625em; } - .mbsc-label + .mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { input { height: 3.75em; padding-top: 1.5em; @@ -409,11 +398,11 @@ } } - &.mbsc-textarea .mbsc-label + .mbsc-input-wrap { + &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap { padding-top: 1.625em; } - &.mbsc-select .mbsc-label + .mbsc-input-wrap .mbsc-select-ic { + &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: 1.4375em; } @@ -509,7 +498,7 @@ top: .75em; } - .mbsc-label + .mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { input { height: 3.375em; padding-top: 1.25em; @@ -520,11 +509,11 @@ } } - &.mbsc-textarea .mbsc-label + .mbsc-input-wrap { + &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap { padding-top: 1.75em; } - &.mbsc-select .mbsc-label + .mbsc-input-wrap .mbsc-select-ic { + &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: 1.25em; } } @@ -535,7 +524,7 @@ top: .6875em; } - .mbsc-label + .mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { input { height: 3.375em; padding-top: 1.25em; @@ -583,7 +572,7 @@ border-color: #d8332a; } - &.mbsc-select .mbsc-label + .mbsc-input-wrap .mbsc-select-ic { + &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: .875em; } } diff --git a/src/less/themes/material.collapsible.less b/src/less/themes/material.collapsible.less index 26d6d9c0..78a12c95 100644 --- a/src/less/themes/material.collapsible.less +++ b/src/less/themes/material.collapsible.less @@ -1,13 +1,11 @@ /* collapsible */ .mbsc-material .mbsc-collapsible { - .mbsc-collapsible-header { - padding-right: 3em; + .mbsc-form-group-title { + padding: 1em; } - .mbsc-form-group-title { - .mbsc-collapsible-icon { - margin-top: 0; - } + .mbsc-collapsible-header { + padding-right: 3em; } } diff --git a/src/less/themes/material.forms.less b/src/less/themes/material.forms.less index cd0643bb..ef48b09c 100644 --- a/src/less/themes/material.forms.less +++ b/src/less/themes/material.forms.less @@ -32,7 +32,7 @@ .mbsc-divider, .mbsc-form-group-title { - padding: 1.5em 1em 1em 1em; + padding: .5em 1em; color: #009688; } @@ -55,6 +55,18 @@ right: 0; } + /* Form grid */ + + .mbsc-form-grid { + margin-top: .75em; + margin-bottom: .75em; + } + + .mbsc-form-grid .mbsc-input-box, + .mbsc-form-grid .mbsc-input-outline { + margin: .75em 1em; + } + /* Checkbox, radio */ &.mbsc-form .mbsc-checkbox, &.mbsc-form .mbsc-radio { @@ -314,11 +326,11 @@ .mbsc-btn-group, .mbsc-btn-group-justified { - padding: .5em; + margin: .5em; } .mbsc-btn-group-block { - padding: .5em 1em; + margin: .5em 1em; } .mbsc-btn:disabled { diff --git a/src/less/themes/material.input.less b/src/less/themes/material.input.less index cc918c59..fe824e49 100644 --- a/src/less/themes/material.input.less +++ b/src/less/themes/material.input.less @@ -32,9 +32,9 @@ /* Input */ .mbsc-input { - margin: .75em 1em 1.5em 1em; + margin: 1.5em 1em; - .mbsc-label + .mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { padding-top: .875em; .mbsc-input-ic { @@ -75,7 +75,7 @@ border-color: #6d6d6d transparent transparent transparent; } - .mbsc-select .mbsc-label + .mbsc-input-wrap:after { + .mbsc-select .mbsc-label ~ .mbsc-input-wrap:after { top: 1.75em; } @@ -200,7 +200,7 @@ line-height: 2em; } - .mbsc-label + .mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { padding-top: 0; .mbsc-input-ic { @@ -208,7 +208,7 @@ } } - &.mbsc-select .mbsc-label + .mbsc-input-wrap:after { + &.mbsc-select .mbsc-label ~ .mbsc-input-wrap:after { top: 1em; } } @@ -249,7 +249,7 @@ padding: .0625em 1em; border-radius: 4px 4px 0 0; } - + &.mbsc-input input:focus, &.mbsc-input textarea:focus, &.mbsc-input select:focus ~ input { @@ -261,8 +261,9 @@ height: 2.25em; } - &.mbsc-input .mbsc-label + .mbsc-input-wrap { + &.mbsc-input .mbsc-label ~ .mbsc-input-wrap { padding-top: 0; + input { padding-top: 1.25em; height: 3.5em; @@ -286,7 +287,7 @@ z-index: 1; } - &.mbsc-textarea .mbsc-label + .mbsc-input-wrap { + &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap { padding-top: 1.625em; textarea { @@ -300,7 +301,7 @@ top: 1em; } - .mbsc-label + .mbsc-input-wrap:after { + .mbsc-label ~ .mbsc-input-wrap:after { top: 1.625em; } } @@ -312,7 +313,7 @@ padding-bottom: .125em; } - .mbsc-label + .mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { padding-top: 0; input { @@ -321,11 +322,11 @@ } } - .mbsc-label + .mbsc-input-wrap .mbsc-input-ic { + .mbsc-label ~ .mbsc-input-wrap .mbsc-input-ic { top: .1875em; } - &.mbsc-textarea .mbsc-label + .mbsc-input-wrap { + &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap { padding-top: .375em; } } @@ -509,7 +510,7 @@ } &.mbsc-input .mbsc-label { - top: .833334em; + top: -.166667em; z-index: 1; background: #eee; padding: 0 .333334em; @@ -519,11 +520,11 @@ top: .8125em; } - &.mbsc-input .mbsc-label + .mbsc-input-wrap { - padding-top: 1em; + &.mbsc-input .mbsc-label ~ .mbsc-input-wrap { + padding-top: .25em; .mbsc-input-ic { - top: 1.8125em; + top: 1.0625em; } } @@ -563,8 +564,8 @@ top: 1.5em; } - .mbsc-label + .mbsc-input-wrap:after { - top: 2.5em; + .mbsc-label ~ .mbsc-input-wrap:after { + top: 1.75em; } } @@ -574,15 +575,15 @@ line-height: 3.375em; } - .mbsc-label + .mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { padding-top: 0; } - .mbsc-label + .mbsc-input-wrap .mbsc-input-ic { + .mbsc-label ~ .mbsc-input-wrap .mbsc-input-ic { top: .8125em; } - &.mbsc-select .mbsc-label + .mbsc-input-wrap:after { + &.mbsc-select .mbsc-label ~ .mbsc-input-wrap:after { top: 1.5em; } } @@ -590,7 +591,7 @@ /* Floating labels */ &.mbsc-label-floating.mbsc-input { .mbsc-label { - top: 1.6875em; + top: .9375em; padding: 0; } diff --git a/src/less/themes/windows.forms.less b/src/less/themes/windows.forms.less index 71273df1..f9b2089f 100644 --- a/src/less/themes/windows.forms.less +++ b/src/less/themes/windows.forms.less @@ -245,11 +245,11 @@ .mbsc-btn-group, .mbsc-btn-group-justified { - padding: .5em .75em; + margin: .5em .75em; } .mbsc-btn-group-block { - padding: .5em 1em; + margin: .5em 1em; } /* Button color presets*/