diff --git a/examples/angular/package-lock.json b/examples/angular/package-lock.json index 426b1e27..145b10d6 100644 --- a/examples/angular/package-lock.json +++ b/examples/angular/package-lock.json @@ -1729,8 +1729,8 @@ } }, "@mobiscroll/angular-lite": { - "version": "file:../../packages/angular/mobiscroll-angular-lite-4.8.1.tgz", - "integrity": "sha512-gUcTomw2RzTR+lqzojsHMkzIO44dRVEE2vyfZH/OQb+x6U4j4iQAwQk2hwJMtGa07lWVJnd7Zgsaa9EGguabVQ==" + "version": "file:mobiscroll-angular-lite-4.8.4.tgz", + "integrity": "sha512-rIL6kQ8U9G96+UH7W/G9fMNvpx8HJEPcB9qG2SDE0Jf70YZ6t51cJHbzY5VQxYoYNIfE2Cyb6vAPaxMi0nwfcQ==" }, "@ngtools/webpack": { "version": "8.3.2", @@ -5673,9 +5673,9 @@ "dev": true }, "handlebars": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz", - "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.5.tgz", + "integrity": "sha512-0Ce31oWVB7YidkaTq33ZxEbN+UDxMMgThvCe8ptgQViymL5DPis9uLdTA13MiRPhgvqyxIegugrP97iK3JeBHg==", "dev": true, "requires": { "neo-async": "^2.6.0", @@ -5941,15 +5941,24 @@ "dev": true }, "https-proxy-agent": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz", - "integrity": "sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz", + "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==", "dev": true, "requires": { - "agent-base": "^4.1.0", + "agent-base": "^4.3.0", "debug": "^3.1.0" }, "dependencies": { + "agent-base": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz", + "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==", + "dev": true, + "requires": { + "es6-promisify": "^5.0.0" + } + }, "debug": { "version": "3.2.6", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", @@ -5960,9 +5969,9 @@ } }, "ms": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", - "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true } } @@ -9102,11 +9111,6 @@ "tslib": "^1.9.0" } }, - "rxjs-compat": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.5.2.tgz", - "integrity": "sha512-TRMkTp4FgSxE2HtGvxmgRukh3JqdFM7ejAj1Ti/VdodbPGfWvZR5+KdLKRV9jVDFyu2SknM8RD+PR54KGnoLjg==" - }, "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", @@ -10557,16 +10561,23 @@ "dev": true }, "uglify-js": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.0.tgz", - "integrity": "sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==", + "version": "3.6.4", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.4.tgz", + "integrity": "sha512-9Yc2i881pF4BPGhjteCXQNaXx1DCwm3dtOyBaG2hitHjLWOczw/ki8vD1bqyT3u6K0Ms/FpCShkmfg+FtlOfYA==", "dev": true, "optional": true, "requires": { - "commander": "~2.20.0", + "commander": "~2.20.3", "source-map": "~0.6.1" }, "dependencies": { + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true, + "optional": true + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", diff --git a/examples/angular/package.json b/examples/angular/package.json index 982c6e1d..9050cea0 100644 --- a/examples/angular/package.json +++ b/examples/angular/package.json @@ -19,9 +19,8 @@ "@angular/platform-browser": "~8.2.4", "@angular/platform-browser-dynamic": "~8.2.4", "@angular/router": "~8.2.4", - "@mobiscroll/angular-lite": "4.8.1", + "@mobiscroll/angular-lite": "4.8.4", "rxjs": "~6.5.3", - "rxjs-compat": "^6.5.2", "tslib": "^1.9.0", "zone.js": "~0.9.1" }, diff --git a/examples/react/package-lock.json b/examples/react/package-lock.json index a77d9246..ff107519 100644 --- a/examples/react/package-lock.json +++ b/examples/react/package-lock.json @@ -1171,8 +1171,8 @@ } }, "@mobiscroll/react-lite": { - "version": "file:../../packages/react/mobiscroll-react-lite-4.8.1.tgz", - "integrity": "sha512-3vorcH5m3aL/YDqtWT0M4y1ixmAGoZ325mqiBj6poS0cLtgnP18Ax5o7fr9oTvUDRzxDSqfxZZ7rpT5kHl/TRw==" + "version": "file:mobiscroll-react-lite-4.8.4.tgz", + "integrity": "sha512-RWzUH7l2lQOSxuOrJMwpQCNCWLyE+qz/E/eKRIo+6IPbQoHs+gFudBmxKlW6i9N+MBANDwTv0YpCc4I5qX/Chw==" }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", @@ -5787,9 +5787,9 @@ "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==" }, "handlebars": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.2.0.tgz", - "integrity": "sha512-Kb4xn5Qh1cxAKvQnzNWZ512DhABzyFNmsaJf3OAkWNa4NkaqWcNI8Tao8Tasi0/F4JD9oyG0YxuFyvyR57d+Gw==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.5.tgz", + "integrity": "sha512-0Ce31oWVB7YidkaTq33ZxEbN+UDxMMgThvCe8ptgQViymL5DPis9uLdTA13MiRPhgvqyxIegugrP97iK3JeBHg==", "requires": { "neo-async": "^2.6.0", "optimist": "^0.6.1", diff --git a/examples/react/package.json b/examples/react/package.json index ce858742..7851df8e 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.8.1", + "@mobiscroll/react-lite": "4.8.4", "@types/jest": "^24.0.18", "@types/node": "^12.7.4", "@types/react": "^16.9.2", diff --git a/package.json b/package.json index 685e6c3f..7e4c210c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mobiscroll", - "version": "4.8.1", + "version": "4.8.4", "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 dd1c681c..5905c368 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@mobiscroll/angular-lite", - "version": "4.8.1", + "version": "4.8.4", "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 f08ddf9e..c5a1ff27 100644 --- a/packages/angularjs/package.json +++ b/packages/angularjs/package.json @@ -1,6 +1,6 @@ { "name": "@mobiscroll/angularjs-lite", - "version": "4.8.1", + "version": "4.8.4", "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 9ae64220..ea52aedc 100644 --- a/packages/javascript/package.json +++ b/packages/javascript/package.json @@ -1,6 +1,6 @@ { "name": "@mobiscroll/javascript-lite", - "version": "4.8.1", + "version": "4.8.4", "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 753ba22f..e9da63ba 100644 --- a/packages/jquery/package.json +++ b/packages/jquery/package.json @@ -1,6 +1,6 @@ { "name": "@mobiscroll/jquery-lite", - "version": "4.8.1", + "version": "4.8.4", "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 21dd6de7..ee7fdeac 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@mobiscroll/react-lite", - "version": "4.8.1", + "version": "4.8.4", "description": "React UI library for progressive web and hybrid apps", "homepage": "https://mobiscroll.com/", "license": "Apache-2.0", diff --git a/src/js/classes/form-control.js b/src/js/classes/form-control.js index 00345f13..3d9d7ee2 100644 --- a/src/js/classes/form-control.js +++ b/src/js/classes/form-control.js @@ -82,7 +82,11 @@ function addIconToggle(that, $parent, $control) { function wrapLabel($parent, type, inputStyle, labelStyle, elm) { // Wrap non-empty text nodes in span with mbsc-label class - if (type != 'button' && type != 'submit' && type != 'segmented') { + if (type == 'segmented') { + $parent.closest('.mbsc-segmented') + .addClass(inputStyle == 'box' ? 'mbsc-input-box' : '') + .addClass(inputStyle == 'outline' ? 'mbsc-input-outline' : ''); + } else if (type != 'button' && type != 'submit') { $parent .addClass('mbsc-control-w') .addClass(inputStyle == 'box' ? 'mbsc-input-box' : '') @@ -132,6 +136,10 @@ export class FormControl { const inputStyle = getAttr($elm, 'data-input-style', s.inputStyle); const labelStyle = getAttr($elm, 'data-label-style', s.labelStyle); + if (elm.mbscInst) { + elm.mbscInst.destroy(); + } + if ($frame) { $frame.insertAfter($parent); } @@ -155,9 +163,10 @@ export class FormControl { $elm.addClass('mbsc-control'); // Attach events + this._handle = this._handle.bind(this); // Prevent 300ms click latency events.forEach(ev => { - elm.addEventListener(ev, this); + $elm.on(ev, this._handle); }); this.settings = s; @@ -182,8 +191,9 @@ export class FormControl { destroy() { this._$elm.removeClass('mbsc-control'); + this.getClassElm().removeClass(this.cssClass); events.forEach(ev => { - this._elm.removeEventListener(ev, this); + this._$elm.off(ev, this._handle); }); delete this._elm.mbscInst; } @@ -202,7 +212,7 @@ export class FormControl { this._ripple = getRipple(this.settings.theme); } - handleEvent(ev) { + _handle(ev) { switch (ev.type) { case 'touchstart': case 'mousedown': @@ -287,8 +297,11 @@ export class FormControl { } } +mobiscroll.themes.form.mobiscroll = {}; + export { addIcon, addIconToggle, + getCssClass, wrapLabel }; diff --git a/src/js/classes/forms.d.ts b/src/js/classes/forms.d.ts index 4b21f32a..f227d703 100644 --- a/src/js/classes/forms.d.ts +++ b/src/js/classes/forms.d.ts @@ -4,8 +4,6 @@ import '../util/notifications'; export { MbscFormOptions }; -export class Form extends Base { - settings: MbscFormOptions; - constructor(element: any, settings: MbscFormOptions); +export class Form extends Base { refresh(shallow?: boolean): void; } \ No newline at end of file diff --git a/src/js/classes/forms.js b/src/js/classes/forms.js index dc456308..f0727eb6 100644 --- a/src/js/classes/forms.js +++ b/src/js/classes/forms.js @@ -95,8 +95,6 @@ Form.prototype = { } }; -mobiscroll.themes.form.mobiscroll = {}; - classes.Form = Form; // Init mbsc-form elements on page load diff --git a/src/js/classes/frame.d.ts b/src/js/classes/frame.d.ts index c493ab31..4d77af45 100644 --- a/src/js/classes/frame.d.ts +++ b/src/js/classes/frame.d.ts @@ -40,8 +40,7 @@ export interface MbscDataControlOptions { export type MbscDataFrameOptions = MbscDataControlOptions & MbscFrameOptions; -export class Frame extends Base { - settings: MbscFrameOptions; +export class Frame extends Base { buttons: object; handlers: { set: () => void, @@ -52,8 +51,6 @@ export class Frame extends Base { _isValid: boolean; _isVisible: boolean; - constructor(element: any, settings: MbscFrameOptions); - position(check?: boolean): void; attachShow(elm: any, beforeShow?: () => void): void; select(): void; @@ -64,7 +61,4 @@ export class Frame extends Base { show(prevAnim?: boolean, prevFocus?: boolean): void; hide(prevAnim?: boolean, btn?: string, force?: boolean, callback?: () => void): void; isVisible(): boolean; - - // type overrides - option(options: string | MbscFrameOptions, value?: any): void; } \ No newline at end of file diff --git a/src/js/classes/frame.js b/src/js/classes/frame.js index 9708203a..bff7d854 100644 --- a/src/js/classes/frame.js +++ b/src/js/classes/frame.js @@ -230,6 +230,40 @@ export const Frame = function (el, settings, inherit) { target: markup }); + if (isModal && s.closeOnOverlayTap) { + var moved, + target, + startX, + startY; + + $overlay + .on('touchstart mousedown', function (ev) { + if (!target && ev.target == overlay) { + target = true; + moved = false; + startX = getCoord(ev, 'X'); + startY = getCoord(ev, 'Y'); + } + }) + .on('touchmove mousemove', function (ev) { + if (target && !moved && (Math.abs(getCoord(ev, 'X') - startX) > 9 || Math.abs(getCoord(ev, 'Y') - startY) > 9)) { + moved = true; + } + }) + .on('touchcancel', function () { + target = false; + }) + .on('touchend click', function (ev) { + if (target && !moved) { + that.cancel(); + if (ev.type == 'touchend') { + preventClick(); + } + } + target = false; + }); + } + $markup .on('mousedown', '.mbsc-btn-e,.mbsc-fr-btn-e', prevdef) .on('touchstart mousedown', function (ev) { @@ -839,47 +873,13 @@ export const Frame = function (el, settings, inherit) { if (s.focusTrap) { $wnd.on('focusin', onFocus); } - - if (s.closeOnOverlayTap) { - var moved, - target, - startX, - startY; - - $overlay - .on('touchstart mousedown', function (ev) { - if (!target && ev.target == overlay) { - target = true; - moved = false; - startX = getCoord(ev, 'X'); - startY = getCoord(ev, 'Y'); - } - }) - .on('touchmove mousemove', function (ev) { - if (target && !moved && (Math.abs(getCoord(ev, 'X') - startX) > 9 || Math.abs(getCoord(ev, 'Y') - startY) > 9)) { - moved = true; - } - }) - .on('touchcancel', function () { - target = false; - }) - .on('touchend click', function (ev) { - if (target && !moved) { - that.cancel(); - if (ev.type == 'touchend') { - preventClick(); - } - } - target = false; - }); - } } - if (isModal && needsLock) { + if (isModal) { // Wait for the toolbar and addressbar to appear on iOS setTimeout(function () { insertMarkup(prevAnim, prevFocus); - }, 100); + }, needsLock ? 100 : 0); } else { insertMarkup(prevAnim, prevFocus); } diff --git a/src/js/classes/input.d.ts b/src/js/classes/input.d.ts index 9950eb14..132fe418 100644 --- a/src/js/classes/input.d.ts +++ b/src/js/classes/input.d.ts @@ -5,6 +5,7 @@ export interface MbscFormOptions extends MbscCoreOptions { inputStyle?: string; labelStyle?: string; enhance?: boolean; + context?: string | HTMLElement; } export class Input extends FormControl { diff --git a/src/js/classes/input.js b/src/js/classes/input.js index 431a8ded..efed8c23 100644 --- a/src/js/classes/input.js +++ b/src/js/classes/input.js @@ -8,54 +8,63 @@ export class Input extends FormControl { super(elm, settings); const $elm = this._$elm; - const $dummy = this._$parent.find('.mbsc-select-input'); + const $parent = this._$parent; + const $dummy = $parent.find('.mbsc-select-input, .mbsc-color-input'); - addIconToggle(this, this._$parent, $elm); + addIconToggle(this, $parent, $elm); + + this._checkLabel = this._checkLabel.bind(this); + this._mouseDown = this._mouseDown.bind(this); + this._setText = this._setText.bind(this); if (elm.type == 'file') { // Copy attributes and create dummy input - var $inp = $('').insertAfter($elm); // Copy value on file upload - $elm.on('change', function (ev) { - var files = ev.target.files, - names = []; - - for (var i = 0; i < files.length; ++i) { - names.push(files[i].name); - } - names.join(', '); - $inp.val(names); - }); + $elm.on('change', this._setText); } - this._$parent.addClass('mbsc-input'); - this.checkLabel = this.checkLabel.bind(this); + $parent.addClass('mbsc-input').on('mousedown', this._mouseDown); // Attach events events.forEach(ev => { - $elm.on(ev, this.checkLabel); + $elm.on(ev, this._checkLabel); }); // Move the dummy input after the element for correct styling if ($dummy.length) { $elm.after($dummy); - this._delm = $dummy[0]; - this.refresh(); + if ($dummy.hasClass('mbsc-select-input')) { + this._delm = $dummy[0]; + this.refresh(); + } + } + } + + _setText(ev) { + const files = ev.target.files; + const names = []; + + for (let i = 0; i < files.length; ++i) { + names.push(files[i].name); } + names.join(', '); + this._$input.val(names); } - checkLabel(ev) { + _checkLabel(ev) { if (this._isFloating) { // In case of select we need to check the dummy element const elm = this._delm || this._elm; // In case of autofill in webkit browsers the animationstart event will fire // due to the empty animation added in the css, // because there's no other event in case of the initial autofill - if (elm.value || (ev && (ev.type == 'focus' || (ev.type == 'animationstart' && this._$elm.is('*:-webkit-autofill'))))) { + if (elm.value || document.activeElement === elm || (ev && (ev.type == 'focus' || (ev.type == 'animationstart' && this._$elm.is('*:-webkit-autofill'))))) { this._$parent.addClass('mbsc-label-floating-active'); } else { this._$parent.removeClass('mbsc-label-floating-active'); @@ -63,13 +72,22 @@ export class Input extends FormControl { } } + + _mouseDown(ev) { + // Will prevent floating label animation when loosing focus only for a brief moment + if (document.activeElement === this._elm && ev.target !== this._elm) { + ev.preventDefault(); + } + } + refresh() { - this.checkLabel(); + this._checkLabel(); } destroy() { super.destroy(); this._$parent + .off('mousedown', this._mouseDown) .removeClass('mbsc-ic-left mbsc-ic-right') .find('.mbsc-input-ic') .remove(); @@ -79,10 +97,12 @@ export class Input extends FormControl { .remove(); events.forEach(ev => { - this._$elm.off(ev, this.checkLabel); + this._$elm.off(ev, this._checkLabel); }); + + this._$elm.off('change', this._setText); } } // Init mbsc-input elements on page load -autoInit('[mbsc-input]', Input); \ No newline at end of file +autoInit('[mbsc-input]', Input); diff --git a/src/js/classes/page.d.ts b/src/js/classes/page.d.ts index b7c61003..1e970108 100644 --- a/src/js/classes/page.d.ts +++ b/src/js/classes/page.d.ts @@ -5,7 +5,4 @@ export interface MbscPageOptions extends MbscCoreOptions { context?: string | HTMLElement; } -export class Page extends Base { - settings: MbscPageOptions; - constructor(element: any, settings: MbscPageOptions); -} \ No newline at end of file +export class Page extends Base { } diff --git a/src/js/classes/popup.d.ts b/src/js/classes/popup.d.ts index 3e7881bb..6d499229 100644 --- a/src/js/classes/popup.d.ts +++ b/src/js/classes/popup.d.ts @@ -6,9 +6,7 @@ export interface MbscPopupOptions extends MbscFrameOptions { } export interface MbscWidgetOptions extends MbscPopupOptions { } -export class Popup extends Frame { - settings: MbscPopupOptions; - constructor(element: any, settings: MbscPopupOptions); +export class Popup extends Frame { } export class Widget extends Popup { diff --git a/src/js/classes/progress-base.d.ts b/src/js/classes/progress-base.d.ts index 0382e795..fb4a7d3f 100644 --- a/src/js/classes/progress-base.d.ts +++ b/src/js/classes/progress-base.d.ts @@ -1,5 +1,3 @@ import { Base, MbscCoreOptions } from '../core/core'; -export class ProgressBase extends Base { - constructor(element: any, settings: MbscCoreOptions); -} \ No newline at end of file +export class ProgressBase extends Base { } diff --git a/src/js/classes/progress-base.js b/src/js/classes/progress-base.js index c33870d4..fbf0cdf9 100644 --- a/src/js/classes/progress-base.js +++ b/src/js/classes/progress-base.js @@ -1,5 +1,6 @@ import { $, Base } from '../core/core'; import { noop } from '../util/misc'; +import { getCssClass } from './form-control'; export const ProgressBase = function (elm, settings, inherit) { var $elm, @@ -35,7 +36,7 @@ export const ProgressBase = function (elm, settings, inherit) { $parent.removeClass(cssClass); } - cssClass = that._css + ' mbsc-progress-w mbsc-control-w mbsc-' + s.theme + (s.baseTheme ? ' mbsc-' + s.baseTheme : '') + (s.rtl ? ' mbsc-rtl' : ' mbsc-ltr'); + cssClass = that._css + ' mbsc-progress-w mbsc-control-w ' + getCssClass(s); $parent.addClass(cssClass); diff --git a/src/js/classes/progress.d.ts b/src/js/classes/progress.d.ts index 5f66555f..0a7f0383 100644 --- a/src/js/classes/progress.d.ts +++ b/src/js/classes/progress.d.ts @@ -1,7 +1,7 @@ import { ProgressBase } from './progress-base'; +import { MbscFormOptions } from './forms'; -export class Progress extends ProgressBase { - constructor(element: any, settings: any); +export class Progress extends ProgressBase { refresh(): void; getVal(): number; setVal(v: number, fill?: boolean, change?: boolean): void; diff --git a/src/js/classes/rating.d.ts b/src/js/classes/rating.d.ts index 3c5ec8cf..60038e5d 100644 --- a/src/js/classes/rating.d.ts +++ b/src/js/classes/rating.d.ts @@ -1,6 +1,4 @@ import { Slider } from './slider'; import { MbscFormOptions } from './forms'; -export class Rating extends Slider { - constructor(element: any, settings: MbscFormOptions); -} \ No newline at end of file +export class Rating extends Slider { } diff --git a/src/js/classes/scroller.d.ts b/src/js/classes/scroller.d.ts index 290f4f29..82deb1a0 100644 --- a/src/js/classes/scroller.d.ts +++ b/src/js/classes/scroller.d.ts @@ -42,11 +42,7 @@ export interface MbscScrollerOptions extends MbscFrameOptions { parseValue?(valueText: string): any; } -export class Scroller extends Frame { - settings: MbscScrollerOptions; - - constructor(element: any, settings: MbscScrollerOptions); - +export class Scroller extends Frame { setVal(value: any, fill?: boolean, change?: boolean, temp?: boolean, time?: number): void; getVal(temp?: boolean): any; setArrayVal(value: any, fill?: boolean, change?: boolean, temp?: boolean, time?: number): void; diff --git a/src/js/classes/scrollview-base.angular.ts b/src/js/classes/scrollview-base.angular.ts index bdd02921..f4ffdefb 100644 --- a/src/js/classes/scrollview-base.angular.ts +++ b/src/js/classes/scrollview-base.angular.ts @@ -7,7 +7,6 @@ import { ElementRef, NgZone, Injectable, - Subject, Observable, AfterViewInit, OnDestroy @@ -18,25 +17,25 @@ import { MbscScrollViewOptions } from './scrollview'; @Injectable() export class MbscNotifyItemService { - private _instanceSubject: Subject = new Subject(); - private _addRemoveSubject: Subject = new Subject(); + private _instanceObservable: Observable = new Observable(); + private _addRemoveObservable: Observable = new Observable(); public inst: any = null; notifyInstanceReady(instance: any) { this.inst = instance; - this._instanceSubject.next(instance); + this._instanceObservable.next(instance); } notifyAddRemove(item: any) { - this._addRemoveSubject.next(item); + this._addRemoveObservable.next(item); } onInstanceReady(): Observable { - return this._instanceSubject.asObservable(); + return this._instanceObservable; } onAddRemove(): Observable { - return this._addRemoveSubject.asObservable(); + return this._addRemoveObservable; } } @@ -55,9 +54,9 @@ export class MbscScrollItemBase implements AfterViewInit, OnDestroy { get nativeElement(): any { return this._elem.nativeElement; } - + instanceObserver: number; constructor(public notifyItemService: MbscNotifyItemService, public _elem: ElementRef) { - this.notifyItemService.onInstanceReady().subscribe((instance: any) => { + this.instanceObserver = this.notifyItemService.onInstanceReady().subscribe((instance: any) => { this._instance = instance; }); if (notifyItemService.inst) { @@ -70,6 +69,7 @@ export class MbscScrollItemBase implements AfterViewInit, OnDestroy { } ngOnDestroy() { + this.notifyItemService.onInstanceReady().unsubscribe(this.instanceObserver); this.notifyItemService.notifyAddRemove(this); } } diff --git a/src/js/classes/slider-base.d.ts b/src/js/classes/slider-base.d.ts index f229eb2a..ab888905 100644 --- a/src/js/classes/slider-base.d.ts +++ b/src/js/classes/slider-base.d.ts @@ -1,8 +1,7 @@ import { ProgressBase } from './progress-base'; -import { MbscCoreOptions } from '../core/core'; +import { MbscFormOptions } from './forms'; -export class SliderBase extends ProgressBase { - constructor(element: any, settings: MbscCoreOptions); +export class SliderBase extends ProgressBase { refresh(): void; getVal(): any; setVal(val: any, fill?: boolean, change?: boolean): void; diff --git a/src/js/classes/slider.d.ts b/src/js/classes/slider.d.ts index f3b47f1f..47ff9dbb 100644 --- a/src/js/classes/slider.d.ts +++ b/src/js/classes/slider.d.ts @@ -2,7 +2,6 @@ import { SliderBase } from './slider-base'; import { MbscFormOptions } from './forms'; export class Slider extends SliderBase { - constructor(element: any, settings: MbscFormOptions); getVal(): number | Array; setVal(v: number | Array, fill?: boolean, change?: boolean): void; -} \ No newline at end of file +} diff --git a/src/js/classes/stepper.d.ts b/src/js/classes/stepper.d.ts index fbc758c7..fd318136 100644 --- a/src/js/classes/stepper.d.ts +++ b/src/js/classes/stepper.d.ts @@ -1,8 +1,6 @@ import { Base, MbscCoreOptions } from '../core/core'; -export class Stepper extends Base { - constructor(element: any, settings: MbscCoreOptions); - +export class Stepper extends Base { getVal(): number; setVal(v: number, fill?: boolean, change?: boolean): void; -} \ No newline at end of file +} diff --git a/src/js/classes/switch.d.ts b/src/js/classes/switch.d.ts index 7fa9c056..e6cd87b1 100644 --- a/src/js/classes/switch.d.ts +++ b/src/js/classes/switch.d.ts @@ -2,7 +2,6 @@ import { SliderBase } from './slider-base'; import { MbscFormOptions } from './forms'; export class Switch extends SliderBase { - constructor(element: any, settings: MbscFormOptions); setVal(val: boolean, fill?: boolean, change?: boolean): void; getVal(): boolean; -} \ No newline at end of file +} diff --git a/src/js/classes/textarea.js b/src/js/classes/textarea.js index 7f1fcda2..e122bd4f 100644 --- a/src/js/classes/textarea.js +++ b/src/js/classes/textarea.js @@ -1,7 +1,7 @@ import { $, isBrowser, autoInit } from '../core/core'; import { Input } from './input'; -const events = ['keydown', 'input', 'scroll']; +const events = ['change', 'keydown', 'input', 'scroll']; let sizeDebounce; @@ -69,7 +69,7 @@ export class TextArea extends Input { this._$parent.addClass('mbsc-textarea'); events.forEach(ev => { - this._elm.addEventListener(ev, this); + this._$elm.on(ev, this._handle); }); sizeTextArea(elm); @@ -78,14 +78,23 @@ export class TextArea extends Input { destroy() { super.destroy(); events.forEach(ev => { - this._elm.removeEventListener(ev, this); + this._$elm.off(ev, this._handle); }); } - handleEvent(ev) { - super.handleEvent(ev); + refresh() { + super.refresh(); + clearTimeout(this._debounce); + sizeTextArea(this._elm); + } + + _handle(ev) { + super._handle(ev); switch (ev.type) { + case 'change': + sizeTextArea(this._elm); + break; case 'keydown': case 'input': this._onInput(ev); @@ -101,12 +110,6 @@ export class TextArea extends Input { sizeTextArea(this._elm); }, 100); } - - refresh() { - super.refresh(); - clearTimeout(this._debounce); - sizeTextArea(this._elm); - } } export { @@ -114,4 +117,4 @@ export { }; // Init mbsc-textarea elements on page load -autoInit('[mbsc-textarea]', TextArea); \ No newline at end of file +autoInit('[mbsc-textarea]', TextArea); diff --git a/src/js/core/core.d.ts b/src/js/core/core.d.ts index e683e180..2e79feae 100644 --- a/src/js/core/core.d.ts +++ b/src/js/core/core.d.ts @@ -17,17 +17,17 @@ export interface MbscCoreOptions { onDestroy?(event: any, inst: any): void; } -export class Base { - settings: MbscCoreOptions; +export class Base { + settings: T; - constructor(element: any, settings: MbscCoreOptions); + constructor(element: any, settings: T); - init(settings?: MbscCoreOptions): void; + init(settings?: T): void; destroy(): void; tap(el: any, handler: (ev?: any, inst?: any) => void, prevent?: boolean, tolerance?: number, time?: any): void; trigger(name: string, event?: any): any; - option(options: string | MbscCoreOptions, value?: any): void; - getInst(): Base; + option(options: string | T, value?: any): void; + getInst(): Base; } diff --git a/src/js/core/core.js b/src/js/core/core.js index 8fb83373..caf1eead 100644 --- a/src/js/core/core.js +++ b/src/js/core/core.js @@ -1,5 +1,5 @@ /*! - * Mobiscroll v4.8.1 + * Mobiscroll v4.8.4 * http://mobiscroll.com * * @@ -77,7 +77,7 @@ extend(util, { ms = extend(mobiscroll, { $: $, - version: '4.8.1', + version: '4.8.4', autoTheme: 'mobiscroll', themes: { form: {}, diff --git a/src/js/forms.angular.ts b/src/js/forms.angular.ts index 4e5e7eb5..3e4cc8cd 100644 --- a/src/js/forms.angular.ts +++ b/src/js/forms.angular.ts @@ -16,7 +16,6 @@ import { QueryList, Injectable, OnInit, - Subject, Observable, MbscInputService, MbscOptionsService, @@ -68,6 +67,9 @@ export class MbscForm extends MbscBase implements OnInit { @Input() enhance: boolean = false; + @Input() + context: string | HTMLElement; + /** * Specify the inputStyle. */ @@ -132,7 +134,7 @@ export class MbscForm extends MbscBase implements OnInit { [attr.data-icon]="icon ? icon : null" [attr.data-icon-align]="iconAlign ? iconAlign : null" [disabled]="disabled" - [attr.readonly]="_readonly"> + [readonly]="_readonly"> {{errorMessage}} @@ -179,7 +181,6 @@ export class MbscTextarea extends MbscInputBase { [attr.data-icon]="icon ? icon : null" [attr.data-icon-align]="iconAlign ? iconAlign : null" [disabled]="disabled" - [attr.readonly]="_readonly" (blur)="onTouch($event)"> @@ -354,9 +355,12 @@ export class MbscButton extends MbscFormBase { type="checkbox" [attr.name]="name" [disabled]="disabled" + [attr.data-label-style]="labelStyle" + [attr.data-input-style]="inputStyle" [(ngModel)]="innerValue" (blur)="onTouch($event)" /> + {{errorMessage}} `, changeDetection: ChangeDetectionStrategy.OnPush @@ -369,12 +373,27 @@ export class MbscCheckbox extends MbscFormValueBase { @Input() color: string; + /** + * Specify the inputStyle. + */ + @Input('input-style') + inputStyle: string; + + /** + * Specify the labelStyle. + */ + @Input('label-style') + labelStyle: string; + _colorClass: any = {}; get colorClass(): any { for (var k in this._colorClass) { delete this._colorClass[k]; } if (this.color) { this._colorClass['mbsc-checkbox-' + this.color] = true; } + if (this.error) { + this._colorClass['mbsc-err'] = true; + } return this._colorClass; } @@ -402,6 +421,7 @@ export class MbscCheckbox extends MbscFormValueBase { template: ` ` }) diff --git a/src/js/forms.react.jsx b/src/js/forms.react.jsx index c25610b0..abcd78b7 100644 --- a/src/js/forms.react.jsx +++ b/src/js/forms.react.jsx @@ -492,6 +492,8 @@ class MbscCheckbox extends MbscInit { static propTypes = { color: PropTypes.string, disabled: PropTypes.bool, + valid: PropTypes.bool, + errorMessage: PropTypes.string, name: PropTypes.string, inputStyle: PropTypes.string } @@ -507,11 +509,16 @@ class MbscCheckbox extends MbscInit { render() { /* eslint-disable no-unused-vars */ - var { color, children, inputStyle, ...other } = this.props; + var { color, children, errorMessage, inputStyle, valid, ...other } = this.props; /* eslint-enable */ - return + var error = null; + if (errorMessage && !valid) { + error = {errorMessage}; + } + return {children} + {error} ; } } @@ -528,7 +535,9 @@ class MbscRadio extends MbscInit { color: PropTypes.string, name: PropTypes.string, disabled: PropTypes.bool, - inputStyle: PropTypes.string + inputStyle: PropTypes.string, + valid: PropTypes.bool, + errorMessage: PropTypes.string } componentDidMount() { @@ -542,11 +551,16 @@ class MbscRadio extends MbscInit { render() { /* eslint-disable no-unused-vars */ - var { color, children, inputStyle, ...other } = this.props; + var { color, children, inputStyle, valid, errorMessage, ...other } = this.props; /* eslint-enable */ - return + var error = null; + if (errorMessage && !valid) { + error = {errorMessage}; + } + return {children} + {error} ; } } @@ -668,6 +682,8 @@ class MbscFormBase extends MbscOptimized { className, children, value, + valid, + errorMessage, checked, onChange, name, @@ -678,10 +694,17 @@ class MbscFormBase extends MbscOptimized { } = this.props; /* eslint-enable no-unused-vars */ + + var error = null; + if (errorMessage && !valid) { + error = {errorMessage}; + } + var type = this.inputType || 'text'; - return + return {children} + {error} ; } } diff --git a/src/js/frameworks/angular.ts b/src/js/frameworks/angular.ts index 9cb42fe1..98c1443d 100644 --- a/src/js/frameworks/angular.ts +++ b/src/js/frameworks/angular.ts @@ -48,8 +48,7 @@ import { FormsModule } from '@angular/forms'; -import { Subject } from 'rxjs/Subject'; -import { Observable } from 'rxjs/Observable'; +import { Observable } from '../util/observable'; import { MbscFormValueBase } from '../input.angular'; @@ -88,14 +87,14 @@ export class MbscInputService { @Injectable() export class MbscListService { - private addRemoveSubject: Subject = new Subject(); + private addRemoveObservable: Observable = new Observable(); notifyAddRemove(item: any) { - this.addRemoveSubject.next(item); + this.addRemoveObservable.next(item); } onAddRemove(): Observable { - return this.addRemoveSubject.asObservable(); + return this.addRemoveObservable; } } @@ -323,11 +322,13 @@ abstract class MbscCloneBase extends MbscValueBase implements DoCheck, OnInit { cloneDictionary: any = {}; makeClone(setting: string, value: Array) { - this.cloneDictionary[setting] = []; if (value) { + this.cloneDictionary[setting] = []; for (let i = 0; i < value.length; i++) { this.cloneDictionary[setting].push(value[i]); } + } else { + this.cloneDictionary[setting] = value; } } @@ -383,6 +384,12 @@ abstract class MbscControlBase extends MbscCloneBase implements ControlValueAcce @Input() showOnTap: boolean; + /** + * Used to disable the control state in components + */ + @Input() + disabled: boolean; + /** * Returns an object containing the extensions of the option object */ @@ -432,13 +439,13 @@ abstract class MbscControlBase extends MbscCloneBase implements ControlValueAcce * This function propagates the value to the model * It's overwrittem in registerOnChange (if formControl is used) */ - onChange: any = () => { }; + onChange: (value: any) => any = () => { }; /** * This function has to be called when the control is touched, to notify the validators (if formControl is used) * It's overwritter in registerOnTouched */ - onTouch: any = () => { }; + onTouch: (ev?: any) => any = () => { }; /** * EventEmitter for the value change @@ -481,7 +488,7 @@ abstract class MbscControlBase extends MbscCloneBase implements ControlValueAcce } } - protected oldAccessor: any; + public oldAccessor: any = null; /** * Constructs the Base Control for value changes @@ -533,6 +540,7 @@ abstract class MbscControlBase extends MbscCloneBase implements ControlValueAcce } setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; if (this.oldAccessor && this.oldAccessor.setDisabledState) { this.oldAccessor.setDisabledState(isDisabled); } @@ -582,10 +590,10 @@ abstract class MbscFrameBase extends MbscControlBase implements OnInit { @Input() context: string | HTMLElement; @Input() - disabled: boolean; - @Input() display: 'top' | 'bottom' | 'bubble' | 'inline' | 'center'; @Input() + showInput: boolean; + @Input() focusOnClose: boolean | string | HTMLElement; @Input() focusTrap: boolean; @@ -616,7 +624,7 @@ abstract class MbscFrameBase extends MbscControlBase implements OnInit { onShow: EventEmitter<{ target: HTMLElement, valueText: string, inst: any }> = new EventEmitter(); get inline(): boolean { - return (this.display || this.options.display) === 'inline'; + return (this.display || (this.options && this.options.display)) === 'inline'; } constructor(initialElem: ElementRef, zone: NgZone, control: NgControl, _inputService: MbscInputService, view: ViewContainerRef) { @@ -730,7 +738,7 @@ function emptyOrTrue(val: any) { return (typeof (val) === 'string' && (val === 'true' || val === '')) || !!val; } -const INPUT_TEMPLATE = `
@@ -781,7 +789,6 @@ export { Output, QueryList, SimpleChanges, - Subject, ViewChild, ViewChildren, ViewContainerRef, diff --git a/src/js/frameworks/react.jsx b/src/js/frameworks/react.jsx index 2557f242..6f2432ad 100644 --- a/src/js/frameworks/react.jsx +++ b/src/js/frameworks/react.jsx @@ -477,7 +477,7 @@ export class MbscInputBase extends MbscOptimized { var element = ReactDOM.findDOMNode(this); var input = $(element).find('input'); if (input.length) { - element = input; + element = input[0]; } this.instance = new classes[this.mbscInit.component || 'Scroller'](element, settings); diff --git a/src/js/input.angular.ts b/src/js/input.angular.ts index e35c448c..2f09c3cb 100644 --- a/src/js/input.angular.ts +++ b/src/js/input.angular.ts @@ -90,13 +90,13 @@ export class MbscFormValueBase extends MbscFormBase implements ControlValueAcces * This function propagates the value to the model * It's overwrittem in registerOnChange (if formControl is used) */ - onChange: any = () => { }; + onChange: (value: any) => any = () => { }; /** * This function has to be called when the control is touched, to notify the validators (if formControl is used) * It's overwritter in registerOnTouched */ - onTouch: any = () => { }; + onTouch: (ev?: any) => any = () => { }; /** * Input for the value. Used when no ngModel is present. @@ -132,7 +132,11 @@ export class MbscFormValueBase extends MbscFormBase implements ControlValueAcces constructor(hostElem: ElementRef, @Optional() _formService: MbscOptionsService, protected _control: NgControl, protected _noOverride: boolean, zone: NgZone) { super(hostElem, _formService, zone); if (_control && !_noOverride) { - _control.valueAccessor = this; + if (_control.valueAccessor && (_control.valueAccessor as any).oldAccessor !== undefined) { + (_control.valueAccessor as any).oldAccessor = this; + } else { + _control.valueAccessor = this; + } } } @@ -292,7 +296,7 @@ export class MbscInputBase extends MbscFormValueBase { [attr.accept]="accept" [attr.multiple]="multiple" [disabled]="disabled" - [attr.readonly]="_readonly" /> + [readonly]="_readonly" /> {{errorMessage}} diff --git a/src/js/page.angular.ts b/src/js/page.angular.ts index 90ad3044..2a74edea 100644 --- a/src/js/page.angular.ts +++ b/src/js/page.angular.ts @@ -26,6 +26,9 @@ export class MbscPage extends MbscBase implements OnInit { @Input() options: MbscPageOptions; + @Input() + context: string | HTMLElement; + @ViewChild('initElement', { static: false } as any) initElem: ElementRef; diff --git a/src/js/util/forms.js b/src/js/util/forms.js index 97e20e91..8d975e4c 100644 --- a/src/js/util/forms.js +++ b/src/js/util/forms.js @@ -131,7 +131,8 @@ function initControls($ctx, controls, s, shallow) { controls[control.id] = new SegmentedItem(control, { theme: s.theme, rtl: s.rtl, - tap: s.tap + tap: s.tap, + inputStyle: s.inputStyle }); break; case 'stepper': diff --git a/src/js/util/observable.d.ts b/src/js/util/observable.d.ts new file mode 100644 index 00000000..0db9dc3c --- /dev/null +++ b/src/js/util/observable.d.ts @@ -0,0 +1,8 @@ +export declare type Handler = (value: T) => void; +export declare class Observable { + private keyCount; + private subscribers; + subscribe(handler: Handler): number; + unsubscribe(handler: number | Handler): void; + next(value: T): void; +} diff --git a/src/js/util/observable.js b/src/js/util/observable.js new file mode 100644 index 00000000..b8536655 --- /dev/null +++ b/src/js/util/observable.js @@ -0,0 +1,28 @@ +var Observable = (function () { + function Observable() { + this.keyCount = 0; + this.subscribers = new Map(); + } + Observable.prototype.subscribe = function (handler) { + var key = this.keyCount++; + this.subscribers.set(key, handler); + return key; + }; + Observable.prototype.unsubscribe = function (handler) { + if (typeof (handler) === 'number') { + this.subscribers.delete(handler); + } + else { + var foundKey_1 = null; + this.subscribers.forEach(function (fn, key) { if (fn === handler) { + foundKey_1 = key; + } }); + this.subscribers.delete(foundKey_1); + } + }; + Observable.prototype.next = function (value) { + this.subscribers.forEach(function (handler) { handler(value); }); + }; + return Observable; +}()); +export { Observable }; diff --git a/src/js/util/observable.ts b/src/js/util/observable.ts new file mode 100644 index 00000000..80c487d3 --- /dev/null +++ b/src/js/util/observable.ts @@ -0,0 +1,40 @@ +export type Handler = (value: T) => void; + +export class Observable { + private keyCount = 0; + // handler function map + private subscribers: Map> = new Map>(); // { [index: number]: Handler } = {}; + + /** + * Subscribes a function that will be called when the observable changes. It will receive the new value as parameter. + * NOTE: Don't forget to unsubscribe to prevent memory leaks! + * @param handler A function that will be called when a new value is provided by the observable + */ + public subscribe(handler: Handler): number { + const key = this.keyCount++; + this.subscribers.set(key, handler); + return key; + } + + /** + * Unsubscribes a handler from the observable + * @param handler The handler of the function returned by the subscribe method or the function itself + */ + public unsubscribe(handler: number | Handler) { + if (typeof(handler) === 'number') { + this.subscribers.delete(handler); + } else { + let foundKey: number = null; + this.subscribers.forEach((fn, key) => { if (fn === handler) { foundKey = key; } }); + this.subscribers.delete(foundKey); + } + } + + /** + * Notifies the subscribers of the observable of the next value. + * @param value The next value of the observable + */ + public next(value: T): void { + this.subscribers.forEach((handler) => { handler(value); }); + } +} diff --git a/src/js/util/tap.js b/src/js/util/tap.js index 1af2aeb5..fc0f43db 100644 --- a/src/js/util/tap.js +++ b/src/js/util/tap.js @@ -64,6 +64,7 @@ function getCoord(e, c, page) { } function getControlType($elm) { + const attrs = ['switch', 'range', 'rating', 'segmented', 'stepper']; const elm = $elm[0]; const role = $elm.attr('data-role'); @@ -71,6 +72,12 @@ function getControlType($elm) { if (/(switch|range|rating|segmented|stepper|select)/.test(role)) { type = role; + } else { + for (let i = 0; i < attrs.length; i++) { + if ($elm.is('[mbsc-' + attrs[i] + ']')) { + type = attrs[i]; + } + } } return type; diff --git a/src/scss/core/ios.scss b/src/scss/core/ios.scss index 5fbc0690..80c6628e 100644 --- a/src/scss/core/ios.scss +++ b/src/scss/core/ios.scss @@ -239,8 +239,7 @@ $mbsc-ios-dark: #47494A !default; /* static colors */ error: #d8332a, white-text: #fff, - dark-text: #000, - light-text: #eee); + dark-text: #000); } @mixin mbsc-ios-common($theme, $params) { diff --git a/src/scss/core/material.scss b/src/scss/core/material.scss index 80ab1053..a80d239c 100644 --- a/src/scss/core/material.scss +++ b/src/scss/core/material.scss @@ -23,7 +23,6 @@ $mbsc-material-dark: #47494A !default; $light-background: lighten($background, 4.8%); $form-text: lighten($text, 7%); - $button-active: darken($background, 13%); $input-text: darken($text, 24%); $lv-text: lighten($text, 10%); $snackbar-btn: hsl(hue($accent), saturation($accent), max(lightness($accent), 34%)); @@ -41,6 +40,7 @@ $mbsc-material-dark: #47494A !default; $switch: ''; $switch-disabled: ''; $lv-item: ''; + $button-active: ''; // Light background @if (lightness($background) > 50%) { @@ -56,6 +56,7 @@ $mbsc-material-dark: #47494A !default; $snackbar: #323232; $background-contrast: #000; $lv-item: lighten($background, 4%); + $button-active: darken($background, 13%); } // Dark background @@ -72,6 +73,7 @@ $mbsc-material-dark: #47494A !default; $snackbar: #5b5b5b; $background-contrast: #fff; $lv-item: lighten($background, 3%); + $button-active: lighten($background, 13%); } @return (ripple: $background-contrast, diff --git a/src/scss/forms/forms.ios.colors.scss b/src/scss/forms/forms.ios.colors.scss index 5a7230e6..c5a3428c 100644 --- a/src/scss/forms/forms.ios.colors.scss +++ b/src/scss/forms/forms.ios.colors.scss @@ -32,7 +32,6 @@ $track-background: map-get($colors, track-background); $track-border: map-get($colors, track-border); $white-text: map-get($colors, white-text); - $light-text: map-get($colors, light-text); $dark-text: map-get($colors, dark-text); $switch-track: map-get($colors, switch-track); @@ -82,6 +81,11 @@ background: $cont-background; } + &.mbsc-form .mbsc-input-box.mbsc-segmented, + &.mbsc-form .mbsc-input-box.mbsc-segmented { + background: transparent; + } + /* Checkbox */ .mbsc-checkbox-box { border: .125em solid $form-selection; @@ -133,7 +137,7 @@ &.mbsc-btn-warning.mbsc-btn, &.mbsc-btn-info.mbsc-btn, &.mbsc-btn-dark.mbsc-btn { - color: $light-text; + color: $white-text; } &.mbsc-btn-light.mbsc-btn { diff --git a/src/scss/forms/forms.ios.scss b/src/scss/forms/forms.ios.scss index 6bae1fa0..05672739 100644 --- a/src/scss/forms/forms.ios.scss +++ b/src/scss/forms/forms.ios.scss @@ -52,6 +52,14 @@ margin: .75em 1em; } + /* Checkbox, switch */ + &.mbsc-checkbox .mbsc-err-msg, + &.mbsc-switch .mbsc-err-msg, + &.mbsc-radio .mbsc-err-msg { + padding: 0; + margin-bottom: -1em; + } + /* Checkbox, radio */ &.mbsc-ltr.mbsc-checkbox, &.mbsc-ltr.mbsc-radio { @@ -63,15 +71,15 @@ padding: .875em 1em .875em 3.75em; } - &.mbsc-checkbox input:disabled+.mbsc-checkbox-box, - &.mbsc-checkbox input:disabled~.mbsc-label, - &.mbsc-checkbox input:disabled~.mbsc-desc, - &.mbsc-radio input:disabled+.mbsc-radio-box, - &.mbsc-radio input:disabled~.mbsc-label, - &.mbsc-radio input:disabled~.mbsc-desc, - &.mbsc-switch input:disabled+.mbsc-switch-track, - &.mbsc-switch input:disabled~.mbsc-label, - &.mbsc-switch input:disabled~.mbsc-desc { + &.mbsc-checkbox input:disabled + .mbsc-checkbox-box, + &.mbsc-checkbox input:disabled ~ .mbsc-label, + &.mbsc-checkbox input:disabled ~ .mbsc-desc, + &.mbsc-radio input:disabled + .mbsc-radio-box, + &.mbsc-radio input:disabled ~ .mbsc-label, + &.mbsc-radio input:disabled ~ .mbsc-desc, + &.mbsc-switch input:disabled + .mbsc-switch-track, + &.mbsc-switch input:disabled ~ .mbsc-label, + &.mbsc-switch input:disabled ~ .mbsc-desc { opacity: .3; } @@ -457,38 +465,38 @@ margin: -.875em -.875em 0 0; } - &.mbsc-switch input:checked+.mbsc-switch-track:after { + &.mbsc-switch input:checked + .mbsc-switch-track:after { -webkit-transform: scale(0); transform: scale(0); } /* swithc color presets */ - &.mbsc-switch-primary.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch-primary.mbsc-switch input:checked + .mbsc-switch-track { border-color: $mbsc-ios-primary; background: $mbsc-ios-primary; } - &.mbsc-switch-secondary.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch-secondary.mbsc-switch input:checked + .mbsc-switch-track { border-color: $mbsc-ios-secondary; background: $mbsc-ios-secondary; } - &.mbsc-switch-success.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch-success.mbsc-switch input:checked + .mbsc-switch-track { border-color: $mbsc-ios-success; background: $mbsc-ios-success; } - &.mbsc-switch-danger.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch-danger.mbsc-switch input:checked + .mbsc-switch-track { border-color: $mbsc-ios-danger; background: $mbsc-ios-danger; } - &.mbsc-switch-warning.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch-warning.mbsc-switch input:checked + .mbsc-switch-track { border-color: $mbsc-ios-warning; background: $mbsc-ios-warning; } - &.mbsc-switch-info.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch-info.mbsc-switch input:checked + .mbsc-switch-track { border-color: $mbsc-ios-info; background: $mbsc-ios-info; } @@ -548,9 +556,9 @@ left: 1em; } - &.mbsc-segmented input:disabled~.mbsc-segmented-item .mbsc-segmented-content, + &.mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content, &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content, - &.mbsc-segmented .mbsc-segmented-item input:disabled+.mbsc-segmented-content { + &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content { background: none; } @@ -573,11 +581,11 @@ color: $mbsc-ios-primary; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-ios-primary; } - &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content { + &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { color: $mbsc-ios-primary; background: rgba($mbsc-ios-primary, .45); } @@ -589,11 +597,11 @@ color: $mbsc-ios-secondary; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-ios-secondary; } - &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content { + &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { color: $mbsc-ios-secondary; background: rgba($mbsc-ios-secondary, .45); } @@ -605,11 +613,11 @@ color: $mbsc-ios-success; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-ios-success; } - &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content { + &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { color: $mbsc-ios-success; background: rgba($mbsc-ios-success, .45); } @@ -621,11 +629,11 @@ color: $mbsc-ios-danger; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-ios-danger; } - &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content { + &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { color: $mbsc-ios-danger; background: rgba($mbsc-ios-danger, .45); } @@ -637,11 +645,11 @@ color: $mbsc-ios-warning; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-ios-warning; } - &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content { + &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { color: $mbsc-ios-warning; background: rgba($mbsc-ios-warning, .45); } @@ -653,11 +661,11 @@ color: $mbsc-ios-info; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-ios-info; } - &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content { + &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content { color: $mbsc-ios-info; background: rgba($mbsc-ios-info, .45); } @@ -742,7 +750,7 @@ } /* Stepper color presets */ - .mbsc-stepper-primary { + &.mbsc-stepper-primary { .mbsc-segmented-content { border-color: $mbsc-ios-primary; color: $mbsc-ios-primary; @@ -753,7 +761,7 @@ } } - .mbsc-stepper-secondary { + &.mbsc-stepper-secondary { .mbsc-segmented-content { border-color: $mbsc-ios-secondary; color: $mbsc-ios-secondary; @@ -764,7 +772,7 @@ } } - .mbsc-stepper-success { + &.mbsc-stepper-success { .mbsc-segmented-content { border-color: $mbsc-ios-success; color: $mbsc-ios-success; @@ -775,7 +783,7 @@ } } - .mbsc-stepper-danger { + &.mbsc-stepper-danger { .mbsc-segmented-content { border-color: $mbsc-ios-danger; color: $mbsc-ios-danger; @@ -786,7 +794,7 @@ } } - .mbsc-stepper-warning { + &.mbsc-stepper-warning { .mbsc-segmented-content { border-color: $mbsc-ios-warning; color: $mbsc-ios-warning; @@ -797,7 +805,7 @@ } } - .mbsc-stepper-info { + &.mbsc-stepper-info { .mbsc-segmented-content { border-color: $mbsc-ios-info; color: $mbsc-ios-info; @@ -810,4 +818,4 @@ } @include mbsc-ios-forms(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent)); -} \ No newline at end of file +} diff --git a/src/scss/forms/forms.material.colors.scss b/src/scss/forms/forms.material.colors.scss index 82f1139c..e99a6222 100644 --- a/src/scss/forms/forms.material.colors.scss +++ b/src/scss/forms/forms.material.colors.scss @@ -33,6 +33,7 @@ $input-color: map-get($colors, input-color); $switch-disabled: map-get($colors, switch-disabled); $switch: map-get($colors, switch); + $background-contrast: map-get($colors, background-contrast); .mbsc-#{$theme} { @@ -72,7 +73,7 @@ .mbsc-checkbox-box:before, .mbsc-radio-box:before { - background: rgba(0, 0, 0, .1); + background: rgba($background-contrast, .1); } /* Checkbox */ @@ -82,7 +83,7 @@ border-right: 0; } - &.mbsc-checkbox input:checked+.mbsc-checkbox-box { + &.mbsc-checkbox input:checked + .mbsc-checkbox-box { background: $accent; border-color: $accent; } @@ -92,7 +93,7 @@ background: $accent; } - &.mbsc-radio input:checked+.mbsc-radio-box { + &.mbsc-radio input:checked + .mbsc-radio-box { border-color: $accent; } @@ -164,22 +165,22 @@ &.mbsc-switch .mbsc-switch-handle { background: $switch; - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + box-shadow: 0 3px 1px -2px rgba($background-contrast, 0.2), 0 1px 5px 0 rgba($background-contrast, 0.12); } - &.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch input:checked + .mbsc-switch-track { background-color: rgba($accent, .3); } - &.mbsc-switch input:checked+.mbsc-switch-track .mbsc-switch-handle { + &.mbsc-switch input:checked + .mbsc-switch-track .mbsc-switch-handle { background: $accent; } - &.mbsc-switch input:disabled+.mbsc-switch-track { + &.mbsc-switch input:disabled + .mbsc-switch-track { background: $button-background; } - &.mbsc-switch input:disabled+.mbsc-switch-track .mbsc-switch-handle { + &.mbsc-switch input:disabled + .mbsc-switch-track .mbsc-switch-handle { background: $switch-disabled; } @@ -189,25 +190,25 @@ color: $button-color; } - &.mbsc-segmented .mbsc-segmented-item input:checked+.mbsc-segmented-content, - &.mbsc-segmented .mbsc-segmented-item input:checked~.mbsc-segmented-content { + &.mbsc-segmented .mbsc-segmented-item input:checked + .mbsc-segmented-content, + &.mbsc-segmented .mbsc-segmented-item input:checked ~ .mbsc-segmented-content { background: $accent; color: $background; } - &.mbsc-segmented .mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content, + &.mbsc-segmented .mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content, &.mbsc-segmented .mbsc-segmented-item .mbsc-active .mbsc-segmented-content { background: $button-active; color: $button-color; } - &.mbsc-segmented .mbsc-segmented-item input:disabled+.mbsc-segmented-content { + &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content { color: $input-color; border-color: $gray-background; background: transparent; } - &.mbsc-segmented .mbsc-segmented-item input:disabled:checked+.mbsc-segmented-content { + &.mbsc-segmented .mbsc-segmented-item input:disabled:checked + .mbsc-segmented-content { background: $button-background; color: $input-color; border-color: $button-background; @@ -221,14 +222,14 @@ background: $button-background; } - &.mbsc-segmented input:disabled~.mbsc-segmented-item .mbsc-segmented-content, + &.mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content, &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content, &.mbsc-segmented .mbsc-segmented-item.mbsc-disabled .mbsc-segmented-content { background: $button-background; color: $input-color; } - &.mbsc-segmented .mbsc-segmented-item input:disabled~.mbsc-segmented-item .mbsc-stepper-val { + &.mbsc-segmented .mbsc-segmented-item input:disabled ~ .mbsc-segmented-item .mbsc-stepper-val { background: $background; } @@ -308,4 +309,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/scss/forms/forms.material.scss b/src/scss/forms/forms.material.scss index c6e6514e..8e15372a 100644 --- a/src/scss/forms/forms.material.scss +++ b/src/scss/forms/forms.material.scss @@ -46,6 +46,25 @@ margin: .75em 1em; } + /* Checkbox, switch, radio */ + &.mbsc-checkbox .mbsc-err-msg, + &.mbsc-switch .mbsc-err-msg, + &.mbsc-radio .mbsc-err-msg { + padding-top: 0; + } + + &.mbsc-ltr.mbsc-checkbox .mbsc-err-msg, + &.mbsc-ltr.mbsc-switch .mbsc-err-msg, + &.mbsc-ltr.mbsc-radio .mbsc-err-msg { + left: 1.3333em; + } + + &.mbsc-rtl.mbsc-checkbox .mbsc-err-msg, + &.mbsc-rtl.mbsc-switch .mbsc-err-msg, + &.mbsc-rtl.mbsc-radio .mbsc-err-msg { + right: 1.3333em; + } + /* Checkbox, radio */ &.mbsc-ltr.mbsc-checkbox, &.mbsc-ltr.mbsc-radio { @@ -84,8 +103,8 @@ transition: transform .1s ease-out; } - &.mbsc-checkbox input:checked+.mbsc-checkbox-box:after, - &.mbsc-radio input:checked+.mbsc-radio-box:after { + &.mbsc-checkbox input:checked + .mbsc-checkbox-box:after, + &.mbsc-radio input:checked + .mbsc-radio-box:after { -webkit-transform: scale(1) rotate(-45deg); transform: scale(1) rotate(-45deg); } @@ -105,20 +124,20 @@ transition: opacity .2s ease-in-out; } - &.mbsc-checkbox input:disabled+.mbsc-checkbox-box, - &.mbsc-checkbox input:disabled~.mbsc-label, - &.mbsc-checkbox input:disabled~.mbsc-desc, - &.mbsc-radio input:disabled+.mbsc-radio-box, - &.mbsc-radio input:disabled~.mbsc-label, - &.mbsc-radio input:disabled~.mbsc-desc, - &.mbsc-switch input:disabled~.mbsc-label, - &.mbsc-switch input:disabled~.mbsc-desc { + &.mbsc-checkbox input:disabled + .mbsc-checkbox-box, + &.mbsc-checkbox input:disabled ~ .mbsc-label, + &.mbsc-checkbox input:disabled ~ .mbsc-desc, + &.mbsc-radio input:disabled + .mbsc-radio-box, + &.mbsc-radio input:disabled ~ .mbsc-label, + &.mbsc-radio input:disabled ~ .mbsc-desc, + &.mbsc-switch input:disabled ~ .mbsc-label, + &.mbsc-switch input:disabled ~ .mbsc-desc { opacity: .3; } - &.mbsc-checkbox input.mbsc-active+.mbsc-checkbox-box:before, - &.mbsc-radio input.mbsc-active+.mbsc-radio-box:before, - &.mbsc-switch input.mbsc-active+.mbsc-switch-track .mbsc-switch-handle:before { + &.mbsc-checkbox input.mbsc-active + .mbsc-checkbox-box:before, + &.mbsc-radio input.mbsc-active + .mbsc-radio-box:before, + &.mbsc-switch input.mbsc-active + .mbsc-switch-track .mbsc-switch-handle:before { opacity: 1; } @@ -136,7 +155,7 @@ /* Checkbox color presets */ &.mbsc-checkbox-primary.mbsc-checkbox { - input:checked+.mbsc-checkbox-box { + input:checked + .mbsc-checkbox-box { background: $mbsc-material-primary; border-color: $mbsc-material-primary; } @@ -150,28 +169,28 @@ } &.mbsc-checkbox-success.mbsc-checkbox { - input:checked+.mbsc-checkbox-box { + input:checked + .mbsc-checkbox-box { background: $mbsc-material-success; border-color: $mbsc-material-success; } } &.mbsc-checkbox-danger.mbsc-checkbox { - input:checked+.mbsc-checkbox-box { + input:checked + .mbsc-checkbox-box { background: $mbsc-material-danger; border-color: $mbsc-material-danger; } } &.mbsc-checkbox-warning.mbsc-checkbox { - input:checked+.mbsc-checkbox-box { + input:checked + .mbsc-checkbox-box { background: $mbsc-material-warning; border-color: $mbsc-material-warning; } } &.mbsc-checkbox-info.mbsc-checkbox { - input:checked+.mbsc-checkbox-box { + input:checked + .mbsc-checkbox-box { background: $mbsc-material-info; border-color: $mbsc-material-info; } @@ -188,61 +207,61 @@ /* Radio color presets */ &.mbsc-radio-primary.mbsc-radio input:checked { - +.mbsc-radio-box { + + .mbsc-radio-box { border-color: $mbsc-material-primary; } - +.mbsc-radio-box:after { + + .mbsc-radio-box:after { background: $mbsc-material-primary; } } &.mbsc-radio-secondary.mbsc-radio input:checked { - +.mbsc-radio-box { + + .mbsc-radio-box { border-color: $mbsc-material-secondary; } - +.mbsc-radio-box:after { + + .mbsc-radio-box:after { background: $mbsc-material-secondary; } } &.mbsc-radio-success.mbsc-radio input:checked { - +.mbsc-radio-box { + + .mbsc-radio-box { border-color: $mbsc-material-success; } - +.mbsc-radio-box:after { + + .mbsc-radio-box:after { background: $mbsc-material-success; } } &.mbsc-radio-danger.mbsc-radio input:checked { - +.mbsc-radio-box { + + .mbsc-radio-box { border-color: $mbsc-material-danger; } - +.mbsc-radio-box:after { + + .mbsc-radio-box:after { background: $mbsc-material-danger; } } &.mbsc-radio-warning.mbsc-radio input:checked { - +.mbsc-radio-box { + + .mbsc-radio-box { border-color: $mbsc-material-warning; } - +.mbsc-radio-box:after { + + .mbsc-radio-box:after { background: $mbsc-material-warning; } } &.mbsc-radio-info.mbsc-radio input:checked { - +.mbsc-radio-box { + + .mbsc-radio-box { border-color: $mbsc-material-info; } - +.mbsc-radio-box:after { + + .mbsc-radio-box:after { background: $mbsc-material-info; } } @@ -654,61 +673,61 @@ /* Switch color presets */ &.mbsc-switch.mbsc-switch-primary input:checked { - +.mbsc-switch-track { + + .mbsc-switch-track { background: lighten($mbsc-material-primary, 20%); } - +.mbsc-switch-track .mbsc-switch-handle { + + .mbsc-switch-track .mbsc-switch-handle { background: $mbsc-material-primary; } } &.mbsc-switch.mbsc-switch-secondary input:checked { - +.mbsc-switch-track { + + .mbsc-switch-track { background: lighten($mbsc-material-secondary, 20%); } - +.mbsc-switch-track .mbsc-switch-handle { + + .mbsc-switch-track .mbsc-switch-handle { background: $mbsc-material-secondary; } } &.mbsc-switch.mbsc-switch-success input:checked { - +.mbsc-switch-track { + + .mbsc-switch-track { background: lighten($mbsc-material-success, 20%); } - +.mbsc-switch-track .mbsc-switch-handle { + + .mbsc-switch-track .mbsc-switch-handle { background: $mbsc-material-success; } } &.mbsc-switch.mbsc-switch-danger input:checked { - +.mbsc-switch-track { + + .mbsc-switch-track { background: lighten($mbsc-material-danger, 20%); } - +.mbsc-switch-track .mbsc-switch-handle { + + .mbsc-switch-track .mbsc-switch-handle { background: $mbsc-material-danger; } } &.mbsc-switch.mbsc-switch-warning input:checked { - +.mbsc-switch-track { + + .mbsc-switch-track { background: lighten($mbsc-material-warning, 20%); } - +.mbsc-switch-track .mbsc-switch-handle { + + .mbsc-switch-track .mbsc-switch-handle { background: $mbsc-material-warning; } } &.mbsc-switch.mbsc-switch-info input:checked { - +.mbsc-switch-track { + + .mbsc-switch-track { background: lighten($mbsc-material-info, 20%); } - +.mbsc-switch-track .mbsc-switch-handle { + + .mbsc-switch-track .mbsc-switch-handle { background: $mbsc-material-info; } } @@ -768,7 +787,7 @@ /* Segmented color presets */ .mbsc-segmented-primary { - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-material-primary; } } @@ -779,7 +798,7 @@ color: $mbsc-material-secondary; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-material-secondary; } } @@ -790,7 +809,7 @@ color: $mbsc-material-success; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-material-success; } } @@ -801,7 +820,7 @@ color: $mbsc-material-danger; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-material-danger; } } @@ -812,7 +831,7 @@ color: $mbsc-material-warning; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-material-warning; } } @@ -823,7 +842,7 @@ color: $mbsc-material-info; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-material-info; } } @@ -836,7 +855,7 @@ color: $mbsc-material-primary; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-material-primary; } } @@ -847,7 +866,7 @@ color: $mbsc-material-secondary; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-material-secondary; } } @@ -858,7 +877,7 @@ color: $mbsc-material-success; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-material-success; } } @@ -869,7 +888,7 @@ color: $mbsc-material-danger; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-material-danger; } } @@ -880,7 +899,7 @@ color: $mbsc-material-warning; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-material-warning; } } @@ -891,49 +910,49 @@ color: $mbsc-material-info; } - &.mbsc-segmented-item input:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input:checked + .mbsc-segmented-content { background: $mbsc-material-info; } } } /* Segmented color presets */ - .mbsc-stepper-primary.mbsc-stepper-cont { + &.mbsc-stepper-primary.mbsc-stepper-cont { .mbsc-stepper .mbsc-segmented-content { background: $mbsc-material-primary; border-color: $mbsc-material-primary; } } - .mbsc-stepper-secondary.mbsc-stepper-cont { + &.mbsc-stepper-secondary.mbsc-stepper-cont { .mbsc-stepper .mbsc-segmented-content { background: $mbsc-material-secondary; border-color: $mbsc-material-secondary; } } - .mbsc-stepper-success.mbsc-stepper-cont { + &.mbsc-stepper-success.mbsc-stepper-cont { .mbsc-stepper .mbsc-segmented-content { background: $mbsc-material-success; border-color: $mbsc-material-success; } } - .mbsc-stepper-danger.mbsc-stepper-cont { + &.mbsc-stepper-danger.mbsc-stepper-cont { .mbsc-stepper .mbsc-segmented-content { background: $mbsc-material-danger; border-color: $mbsc-material-danger; } } - .mbsc-stepper-warning.mbsc-stepper-cont { + &.mbsc-stepper-warning.mbsc-stepper-cont { .mbsc-stepper .mbsc-segmented-content { background: $mbsc-material-warning; border-color: $mbsc-material-warning; } } - .mbsc-stepper-info.mbsc-stepper-cont { + &.mbsc-stepper-info.mbsc-stepper-cont { .mbsc-stepper .mbsc-segmented-content { background: $mbsc-material-info; color: $mbsc-material-light; @@ -971,4 +990,4 @@ } @include mbsc-material-forms(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent)); -} \ No newline at end of file +} diff --git a/src/scss/forms/forms.mobiscroll.scss b/src/scss/forms/forms.mobiscroll.scss index d34cc81e..daaefc08 100644 --- a/src/scss/forms/forms.mobiscroll.scss +++ b/src/scss/forms/forms.mobiscroll.scss @@ -35,6 +35,13 @@ margin: .75em 1em; } + /* Checkbox, switch, radio */ + &.mbsc-checkbox .mbsc-err-msg, + &.mbsc-switch .mbsc-err-msg, + &.mbsc-radio .mbsc-err-msg { + padding-top: 0; + } + /* Checkbox */ &.mbsc-checkbox { padding: 1em 3.125em 1em 1em; diff --git a/src/scss/forms/forms.windows.scss b/src/scss/forms/forms.windows.scss index fe392a28..b4e95428 100644 --- a/src/scss/forms/forms.windows.scss +++ b/src/scss/forms/forms.windows.scss @@ -18,21 +18,28 @@ line-height: 2em; } + /* Checkbox, switch */ + &.mbsc-checkbox .mbsc-err-msg, + &.mbsc-switch .mbsc-err-msg, + &.mbsc-radio .mbsc-err-msg { + padding-top: 0; + } + /* Checkbox, radio */ .mbsc-checkbox-box, .mbsc-radio-box { margin-top: -.6875em; } - &.mbsc-checkbox input:disabled+.mbsc-checkbox-box, - &.mbsc-checkbox input:disabled~.mbsc-label, - &.mbsc-checkbox input:disabled~.mbsc-desc, - &.mbsc-radio input:disabled+.mbsc-radio-box, - &.mbsc-radio input:disabled~.mbsc-label, - &.mbsc-radio input:disabled~.mbsc-desc, - &.mbsc-switch input:disabled+.mbsc-switch-track, - &.mbsc-switch input:disabled~.mbsc-label, - &.mbsc-switch input:disabled~.mbsc-desc { + &.mbsc-checkbox input:disabled + .mbsc-checkbox-box, + &.mbsc-checkbox input:disabled ~ .mbsc-label, + &.mbsc-checkbox input:disabled ~ .mbsc-desc, + &.mbsc-radio input:disabled + .mbsc-radio-box, + &.mbsc-radio input:disabled ~ .mbsc-label, + &.mbsc-radio input:disabled ~ .mbsc-desc, + &.mbsc-switch input:disabled + .mbsc-switch-track, + &.mbsc-switch input:disabled ~ .mbsc-label, + &.mbsc-switch input:disabled ~ .mbsc-desc { opacity: .2; } @@ -64,32 +71,32 @@ } /* Checkbox color presets */ - &.mbsc-checkbox-primary input:checked+.mbsc-checkbox-box { + &.mbsc-checkbox-primary.mbsc-checkbox input:checked + .mbsc-checkbox-box { background: $mbsc-windows-primary; border-color: $mbsc-windows-primary; } - &.mbsc-checkbox-secondary input:checked+.mbsc-checkbox-box { + &.mbsc-checkbox-secondary.mbsc-checkbox input:checked + .mbsc-checkbox-box { background: $mbsc-windows-secondary; border-color: $mbsc-windows-secondary; } - &.mbsc-checkbox-success input:checked+.mbsc-checkbox-box { + &.mbsc-checkbox-success.mbsc-checkbox input:checked + .mbsc-checkbox-box { background: $mbsc-windows-success; border-color: $mbsc-windows-success; } - &.mbsc-checkbox-danger input:checked+.mbsc-checkbox-box { + &.mbsc-checkbox-danger.mbsc-checkbox input:checked + .mbsc-checkbox-box { background: $mbsc-windows-danger; border-color: $mbsc-windows-danger; } - &.mbsc-checkbox-warning input:checked+.mbsc-checkbox-box { + &.mbsc-checkbox-warning.mbsc-checkbox input:checked + .mbsc-checkbox-box { background: $mbsc-windows-warning; border-color: $mbsc-windows-warning; } - &.mbsc-checkbox-info input:checked+.mbsc-checkbox-box { + &.mbsc-checkbox-info.mbsc-checkbox input:checked + .mbsc-checkbox-box { background: $mbsc-windows-info; border-color: $mbsc-windows-info; } @@ -547,32 +554,32 @@ } /* Checkbox color presets */ - &.mbsc-switch-primary.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch-primary.mbsc-switch input:checked + .mbsc-switch-track { background: $mbsc-windows-primary; border-color: $mbsc-windows-primary; } - &.mbsc-switch-secondary.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch-secondary.mbsc-switch input:checked + .mbsc-switch-track { background: $mbsc-windows-secondary; border-color: $mbsc-windows-secondary; } - &.mbsc-switch-success.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch-success.mbsc-switch input:checked + .mbsc-switch-track { background: $mbsc-windows-success; border-color: $mbsc-windows-success; } - &.mbsc-switch-danger.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch-danger.mbsc-switch input:checked + .mbsc-switch-track { background: $mbsc-windows-danger; border-color: $mbsc-windows-danger; } - &.mbsc-switch-warning.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch-warning.mbsc-switch input:checked + .mbsc-switch-track { background: $mbsc-windows-warning; border-color: $mbsc-windows-warning; } - &.mbsc-switch-info.mbsc-switch input:checked+.mbsc-switch-track { + &.mbsc-switch-info.mbsc-switch input:checked + .mbsc-switch-track { background: $mbsc-windows-info; border-color: $mbsc-windows-info; } @@ -594,7 +601,7 @@ &.mbsc-segmented:not(.mbsc-stepper) .mbsc-segmented-item:last-child, &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-plus, - &.mbsc-stepper-val-left .mbsc-segmented input+.mbsc-segmented-item, + &.mbsc-stepper-val-left .mbsc-segmented input + .mbsc-segmented-item, &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control { border: 0; } @@ -611,10 +618,10 @@ padding: 1.75em 1em 1.75em 13em; } - &.mbsc-segmented input:disabled~.mbsc-segmented-item .mbsc-segmented-content, + &.mbsc-segmented input:disabled ~ .mbsc-segmented-item .mbsc-segmented-content, &.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-disabled .mbsc-segmented-content, &.mbsc-stepper .mbsc-segmented-item.mbsc-disabled .mbsc-segmented-content, - &.mbsc-segmented .mbsc-segmented-item input:disabled+.mbsc-segmented-content { + &.mbsc-segmented .mbsc-segmented-item input:disabled + .mbsc-segmented-content { opacity: .3; } @@ -623,48 +630,48 @@ /* Segmented color presets */ .mbsc-segmented-primary { - &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content, - &.mbsc-segmented-item input.mbsc-control:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content, + &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content { background: $mbsc-windows-primary; } } .mbsc-segmented-secondary { - &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content, - &.mbsc-segmented-item input.mbsc-control:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content, + &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content { background: $mbsc-windows-secondary; } } .mbsc-segmented-success { - &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content, - &.mbsc-segmented-item input.mbsc-control:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content, + &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content { background: $mbsc-windows-success; } } .mbsc-segmented-danger { - &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content, - &.mbsc-segmented-item input.mbsc-control:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content, + &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content { background: $mbsc-windows-danger; } } .mbsc-segmented-warning { - &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content, - &.mbsc-segmented-item input.mbsc-control:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content, + &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content { background: $mbsc-windows-warning; } } .mbsc-segmented-info { - &.mbsc-segmented-item input.mbsc-active+.mbsc-segmented-content, - &.mbsc-segmented-item input.mbsc-control:checked+.mbsc-segmented-content { + &.mbsc-segmented-item input.mbsc-active + .mbsc-segmented-content, + &.mbsc-segmented-item input.mbsc-control:checked + .mbsc-segmented-content { background: $mbsc-windows-info; } } @@ -674,37 +681,37 @@ /* Segmented hover color presets*/ &.mbsc-segmented-primary { - &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active)+.mbsc-segmented-content { + &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active) + .mbsc-segmented-content { background: rgba($mbsc-windows-primary, .25); } } &.mbsc-segmented-secondary { - &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active)+.mbsc-segmented-content { + &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active) + .mbsc-segmented-content { background: rgba($mbsc-windows-secondary, .25); } } &.mbsc-segmented-success { - &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active)+.mbsc-segmented-content { + &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active) + .mbsc-segmented-content { background: rgba($mbsc-windows-success, .25); } } &.mbsc-segmented-danger { - &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active)+.mbsc-segmented-content { + &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active) + .mbsc-segmented-content { background: rgba($mbsc-windows-danger, .25); } } &.mbsc-segmented-warning { - &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active)+.mbsc-segmented-content { + &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active) + .mbsc-segmented-content { background: rgba($mbsc-windows-warning, .25); } } &.mbsc-segmented-info { - &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active)+.mbsc-segmented-content { + &.mbsc-segmented-item:hover input:not(:disabled):not(.mbsc-active) + .mbsc-segmented-content { background: rgba($mbsc-windows-info, .25); } } @@ -834,4 +841,4 @@ } @include mbsc-windows-forms(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent)); -} \ No newline at end of file +} diff --git a/src/scss/input/input.ios.scss b/src/scss/input/input.ios.scss index 96f55feb..a4a81288 100644 --- a/src/scss/input/input.ios.scss +++ b/src/scss/input/input.ios.scss @@ -277,7 +277,9 @@ } .mbsc-label ~ .mbsc-input-wrap { - input { + + input, + .mbsc-color-input { height: 3.75em; padding-top: 1.5em; } @@ -354,7 +356,9 @@ } .mbsc-label ~ .mbsc-input-wrap { - input { + + input, + .mbsc-color-input { height: 3.75em; padding-top: 1.5em; } @@ -460,7 +464,9 @@ } .mbsc-label ~ .mbsc-input-wrap { - input { + + input, + .mbsc-color-input { height: 3.375em; padding-top: 1.25em; } @@ -486,7 +492,9 @@ } .mbsc-label ~ .mbsc-input-wrap { - input { + + input, + .mbsc-color-input { height: 3.375em; padding-top: 1.25em; } diff --git a/src/scss/input/input.material.colors.scss b/src/scss/input/input.material.colors.scss index 9daf3dd5..30ae2901 100644 --- a/src/scss/input/input.material.colors.scss +++ b/src/scss/input/input.material.colors.scss @@ -16,16 +16,14 @@ .mbsc-#{$theme} { /* Textbox */ - &.mbsc-input input, - &.mbsc-input textarea { + &.mbsc-input .mbsc-control { border-bottom: 1px solid $form-text; color: $input-text; } /* Textbox, textarea, select */ - &.mbsc-input input:focus, - &.mbsc-input textarea:focus, - &.mbsc-input select:focus~input { + &.mbsc-input .mbsc-control:focus, + &.mbsc-input select:focus ~ input { border-bottom: 2px solid $accent; } @@ -51,8 +49,7 @@ /* Outline Input */ &.mbsc-input-outline { - &.mbsc-input input, - &.mbsc-input textarea { + &.mbsc-input .mbsc-control { border: 1px solid $form-text; } @@ -66,7 +63,7 @@ } &.mbsc-input input:focus, - &.mbsc-input select:focus~input { + &.mbsc-input select:focus ~ input { border: 2px solid $accent; } @@ -92,4 +89,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/scss/input/input.material.scss b/src/scss/input/input.material.scss index c9413005..c80e1ca1 100644 --- a/src/scss/input/input.material.scss +++ b/src/scss/input/input.material.scss @@ -7,7 +7,8 @@ /* Textbox */ &.mbsc-input input, - &.mbsc-input textarea { + &.mbsc-input textarea, + &.mbsc-input .mbsc-color-input { height: 2.125em; padding: 0 0 1px 0; background-color: transparent; @@ -16,16 +17,18 @@ } /* Textbox, textarea, select */ - &.mbsc-input .mbsc-control:disabled~input, + &.mbsc-input .mbsc-control:disabled ~ input, &.mbsc-input textarea:disabled, - &.mbsc-input input:disabled { + &.mbsc-input input:disabled, + &.mbsc-input input:disabled ~ .mbsc-color-input { border-style: dotted; opacity: .5; } &.mbsc-input input:focus, &.mbsc-input textarea:focus, - &.mbsc-input select:focus~input { + &.mbsc-input select:focus ~ input, + &.mbsc-input .mbsc-color-input:focus { padding-bottom: 0; } @@ -33,7 +36,7 @@ &.mbsc-input { margin: 1.5em 1em; - .mbsc-label~.mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { padding-top: .875em; .mbsc-input-ic { @@ -67,7 +70,7 @@ top: .875em; } - &.mbsc-select .mbsc-label~.mbsc-input-wrap:after { + &.mbsc-select .mbsc-label ~ .mbsc-input-wrap:after { top: 1.75em; } @@ -192,7 +195,7 @@ line-height: 2em; } - .mbsc-label~.mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { padding-top: 0; .mbsc-input-ic { @@ -200,7 +203,7 @@ } } - &.mbsc-select .mbsc-label~.mbsc-input-wrap:after { + &.mbsc-select .mbsc-label ~ .mbsc-input-wrap:after { top: 1em; } } @@ -235,7 +238,8 @@ border-radius: 4px 4px 0 0; } - &.mbsc-input input { + &.mbsc-input input, + &.mbsc-input .mbsc-color-input { height: 2.25em; padding: .0625em 1em; border-radius: 4px 4px 0 0; @@ -243,7 +247,8 @@ &.mbsc-input input:focus, &.mbsc-input textarea:focus, - &.mbsc-input select:focus~input { + &.mbsc-input select:focus ~ input, + &.mbsc-input .mbsc-color-input:focus { padding-bottom: 0; } @@ -252,10 +257,11 @@ height: 2.25em; } - &.mbsc-input .mbsc-label~.mbsc-input-wrap { + &.mbsc-input .mbsc-label ~ .mbsc-input-wrap { padding-top: 0; - input { + input, + .mbsc-color-input { padding-top: 1.25em; height: 3.5em; } @@ -278,7 +284,7 @@ z-index: 1; } - &.mbsc-textarea .mbsc-label~.mbsc-input-wrap { + &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap { padding-top: 1.625em; textarea { @@ -292,7 +298,7 @@ top: 1em; } - .mbsc-label~.mbsc-input-wrap:after { + .mbsc-label ~ .mbsc-input-wrap:after { top: 1.625em; } } @@ -304,20 +310,21 @@ padding-bottom: .125em; } - .mbsc-label~.mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { padding-top: 0; - input { + input, + .mbsc-color-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; } } @@ -485,11 +492,13 @@ &.mbsc-input-outline { &.mbsc-input input, - &.mbsc-input textarea { + &.mbsc-input textarea, + &.mbsc-input .mbsc-color-input { border-radius: 4px; } - &.mbsc-input input { + &.mbsc-input input, + &.mbsc-input .mbsc-color-input { height: 3.375em; padding: .0625em 1em; } @@ -509,7 +518,7 @@ top: .8125em; } - &.mbsc-input .mbsc-label~.mbsc-input-wrap { + &.mbsc-input .mbsc-label ~ .mbsc-input-wrap { padding-top: .25em; .mbsc-input-ic { @@ -518,7 +527,7 @@ } &.mbsc-input input:focus, - &.mbsc-input select:focus~input { + &.mbsc-input select:focus ~ input { padding: 0 .9375em; } @@ -544,7 +553,7 @@ top: 1.5em; } - .mbsc-label~.mbsc-input-wrap:after { + .mbsc-label ~ .mbsc-input-wrap:after { top: 1.75em; } } @@ -555,15 +564,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; } } @@ -572,13 +581,12 @@ &.mbsc-label-floating.mbsc-input { .mbsc-label { top: .9375em; - padding: 0; + padding: 0 .25em; } &.mbsc-label-floating-active .mbsc-label { -webkit-transform: translateY(-1.375em) scale(.75); transform: translateY(-1.375em) scale(.75); - padding: 0 .25em; } } } @@ -640,7 +648,7 @@ padding-right: 2em; } - select:focus~input { + select:focus ~ input { padding-right: 1.9375em; } @@ -653,7 +661,7 @@ padding-right: 4em; } - select:focus~input { + select:focus ~ input { padding-right: 3.9375em; } @@ -662,25 +670,17 @@ } } - &.mbsc-ic-left select:focus~input { + &.mbsc-ic-left select:focus ~ input { padding-left: 2.9375em; } } /* Floating labels */ &.mbsc-label-floating.mbsc-input .mbsc-label { - left: 1em; - } - - &.mbsc-label-floating.mbsc-input.mbsc-label-floating-active .mbsc-label { left: .875em; } &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label { - left: 3em; - } - - &.mbsc-label-floating.mbsc-input.mbsc-ic-left.mbsc-label-floating-active .mbsc-label { left: 2.875em; } } @@ -742,7 +742,7 @@ padding-left: 2em; } - select:focus~input { + select:focus ~ input { padding-left: 1.9375em; } @@ -755,7 +755,7 @@ padding-left: 4em; } - select:focus~input { + select:focus ~ input { padding-left: 3.9375em; } @@ -764,29 +764,21 @@ } } - &.mbsc-ic-left select:focus~input { + &.mbsc-ic-left select:focus ~ input { padding-right: 2.9375em; } } /* Floating labels */ &.mbsc-label-floating.mbsc-input .mbsc-label { - right: 1em; - } - - &.mbsc-label-floating.mbsc-input.mbsc-label-floating-active .mbsc-label { right: .875em; } &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label { - right: 3em; - } - - &.mbsc-label-floating.mbsc-input.mbsc-ic-left.mbsc-label-floating-active .mbsc-label { right: 2.875em; } } } @include mbsc-material-input(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent)); -} \ No newline at end of file +} diff --git a/src/scss/input/input.mobiscroll.colors.scss b/src/scss/input/input.mobiscroll.colors.scss index 8d6be38e..9e1495c5 100644 --- a/src/scss/input/input.mobiscroll.colors.scss +++ b/src/scss/input/input.mobiscroll.colors.scss @@ -18,15 +18,13 @@ .mbsc-#{$theme} { /* Textbox */ - &.mbsc-input input, - &.mbsc-input textarea { + &.mbsc-input .mbsc-control { border-bottom: 1px solid $input-icon; color: $color-input; } - &.mbsc-input input:focus, - &.mbsc-input select:focus~input .mbsc-input textarea:focus, - &.mbsc-input textarea:focus { + &.mbsc-input .mbsc-control:focus, + &.mbsc-input select:focus ~ input .mbsc-input textarea:focus { border-color: $accent; } @@ -44,8 +42,7 @@ /* Outline Input */ &.mbsc-input-outline { - &.mbsc-input input, - &.mbsc-input textarea { + &.mbsc-input .mbsc-control { border: 1px solid $input-icon; } @@ -58,8 +55,8 @@ background: none; } - &.mbsc-input input:focus, - &.mbsc-input select:focus~input, + &.mbsc-input .mbsc-control:focus, + &.mbsc-input select:focus ~ input, &.mbsc-err input { border-color: $accent; } @@ -75,4 +72,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/scss/input/input.mobiscroll.scss b/src/scss/input/input.mobiscroll.scss index 5ee56fe8..431f4b3a 100644 --- a/src/scss/input/input.mobiscroll.scss +++ b/src/scss/input/input.mobiscroll.scss @@ -7,7 +7,8 @@ /* Textbox */ &.mbsc-input input, - &.mbsc-input textarea { + &.mbsc-input textarea, + &.mbsc-color-input { height: 2.125em; padding: 0 0 1px 0; background: transparent; @@ -16,8 +17,9 @@ &.mbsc-input input:disabled, &.mbsc-input textarea:disabled, - &.mbsc-input .mbsc-control:disabled~input, - &.mbsc-input .mbsc-control:disabled~.mbsc-select-ic { + &.mbsc-input input:disabled ~ .mbsc-color-input, + &.mbsc-input .mbsc-control:disabled ~ input, + &.mbsc-input .mbsc-control:disabled ~ .mbsc-select-ic { opacity: .4; } @@ -25,7 +27,7 @@ &.mbsc-input { margin: 1.5em 1em; - .mbsc-label~.mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { padding-top: .875em; .mbsc-input-ic { @@ -64,7 +66,7 @@ left: .6875em; } - .mbsc-label~.mbsc-input-wrap .mbsc-select-ic { + .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: 1.4375em; } @@ -189,7 +191,7 @@ line-height: 2em; } - .mbsc-label+.mbsc-input-wrap { + .mbsc-label + .mbsc-input-wrap { padding-top: 0; .mbsc-input-ic { @@ -197,7 +199,7 @@ } } - &.mbsc-select .mbsc-label~.mbsc-input-wrap .mbsc-select-ic { + &.mbsc-select .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: .5625em; } } @@ -230,7 +232,8 @@ border-radius: 4px 4px 0 0; } - &.mbsc-input input { + &.mbsc-input input, + &.mbsc-input .mbsc-color-input { height: 2.25em; padding: .0625em 1em; border-radius: 4px 4px 0 0; @@ -241,10 +244,11 @@ height: 2.25em; } - &.mbsc-input .mbsc-label~.mbsc-input-wrap { + &.mbsc-input .mbsc-label ~ .mbsc-input-wrap { padding-top: 0; - input { + input, + .mbsc-color-input { padding-top: 1.25em; height: 3.5em; } @@ -268,7 +272,7 @@ line-height: normal; } - &.mbsc-textarea .mbsc-label~.mbsc-input-wrap { + &.mbsc-textarea .mbsc-label ~ .mbsc-input-wrap { padding-top: 1.625em; textarea { @@ -282,7 +286,7 @@ top: .625em; } - .mbsc-label~.mbsc-input-wrap .mbsc-select-ic { + .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: 1.375em; } } @@ -295,24 +299,25 @@ line-height: 2em; } - .mbsc-label~.mbsc-input-wrap { + .mbsc-label ~ .mbsc-input-wrap { padding-top: 0; - input { + input, + .mbsc-color-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; } } @@ -486,17 +491,18 @@ &.mbsc-input-outline { &.mbsc-input input, - &.mbsc-input textarea { + &.mbsc-input textarea, + &.mbsc-input .mbsc-color-input { border-radius: 4px; + height: 3.375em; } - &.mbsc-input input { - height: 3.375em; + &.mbsc-input input, + &.mbsc-input .mbsc-color-input { padding: .0625em 1em; } &.mbsc-input textarea { - height: 3.375em; padding: .875em 1em .4375em 1em; } @@ -510,7 +516,7 @@ top: .8125em; } - &.mbsc-input .mbsc-label~.mbsc-input-wrap { + &.mbsc-input .mbsc-label ~ .mbsc-input-wrap { padding-top: .25em; .mbsc-input-ic { @@ -519,7 +525,7 @@ } &.mbsc-input input:focus, - &.mbsc-input select:focus~input, + &.mbsc-input select:focus ~ input, &.mbsc-err input { padding-top: 0; padding-bottom: 0; @@ -535,7 +541,7 @@ top: 1.3125em; } - .mbsc-label~.mbsc-input-wrap .mbsc-select-ic { + .mbsc-label ~ .mbsc-input-wrap .mbsc-select-ic { top: 1.5625em; } } @@ -546,15 +552,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; } } @@ -563,13 +569,12 @@ &.mbsc-label-floating.mbsc-input { .mbsc-label { top: .9375em; - padding: 0; + padding: 0 .25em; } &.mbsc-label-floating-active .mbsc-label { -webkit-transform: translateY(-1.375em) scale(.75); transform: translateY(-1.375em) scale(.75); - padding: 0 .25em; } } } @@ -637,18 +642,10 @@ /* Floating labels */ &.mbsc-label-floating.mbsc-input .mbsc-label { - left: 1em; - } - - &.mbsc-label-floating.mbsc-input.mbsc-label-floating-active .mbsc-label { left: .875em; } &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label { - left: 3em; - } - - &.mbsc-label-floating.mbsc-input.mbsc-ic-left.mbsc-label-floating-active .mbsc-label { left: 2.875em; } } @@ -716,22 +713,14 @@ /* Floating labels */ &.mbsc-label-floating.mbsc-input .mbsc-label { - right: 1em; - } - - &.mbsc-label-floating.mbsc-input.mbsc-label-floating-active .mbsc-label { right: .875em; } &.mbsc-label-floating.mbsc-input.mbsc-ic-left .mbsc-label { - right: 3em; - } - - &.mbsc-label-floating.mbsc-input.mbsc-ic-left.mbsc-label-floating-active .mbsc-label { right: 2.875em; } } } @include mbsc-mobiscroll-input(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent)); -} \ No newline at end of file +} diff --git a/src/scss/page/page.scss b/src/scss/page/page.scss index 56867a04..eaed928d 100644 --- a/src/scss/page/page.scss +++ b/src/scss/page/page.scss @@ -56,7 +56,13 @@ .mbsc-page h3, .mbsc-page h4, .mbsc-page h5, - .mbsc-page h6 { + .mbsc-page h6, + .mbsc-h1, + .mbsc-h2, + .mbsc-h3, + .mbsc-h4, + .mbsc-h5, + .mbsc-h6 { margin: 0; padding: 0; color: inherit; @@ -64,50 +70,60 @@ font-family: inherit; } - .mbsc-page p { + .mbsc-page p, + .mbsc-p { margin: 1em 0; padding: 0; line-height: 1.5; } - .mbsc-page a { + .mbsc-page a, + .mbsc-a { text-decoration: none; } - .mbsc-page a:hover { + .mbsc-page a:hover, + .mbsc-a:hover { text-decoration: underline; } - .mbsc-page a.mbsc-btn:hover { + .mbsc-page a.mbsc-btn:hover, + .mbsc-a.mbsc-btn:hover { text-decoration: none; } - .mbsc-page h1 { + .mbsc-page h1, + .mbsc-h1 { margin: .347826em 0; font-size: 2.875em; } - .mbsc-page h2 { + .mbsc-page h2, + .mbsc-h2 { margin: .470588em 0; font-size: 2.125em; } - .mbsc-page h3 { + .mbsc-page h3, + .mbsc-h3 { margin: .666666em 0; font-size: 1.5em; } - .mbsc-page h4 { + .mbsc-page h4, + .mbsc-h4 { margin: .8em 0; font-size: 1.25em; } - .mbsc-page h5 { + .mbsc-page h5, + .mbsc-h5 { margin: 1.066666em 0; font-size: .9375em; } - .mbsc-page h6 { + .mbsc-page h6, + .mbsc-h6 { margin: 1.333333em 0; font-size: .75em; } @@ -140,19 +156,20 @@ /* Lists */ - .mbsc-page { - - ul, - ol { - padding: 0; - margin: 1em 0 1em 1.25em; - line-height: 1.5; - } + .mbsc-page ul, + .mbsc-page ol, + .mbsc-ul, + .mbsc-ol { + padding: 0; + margin: 1em 0 1em 1.25em; + line-height: 1.5; + } - ul ul, - ol ol { - margin: 0 0 0 1.25em; - } + .mbsc-page ul ul, + .mbsc-page ol ol, + .mbsc-ul .mbsc-ul, + .mbsc-ol .mbsc-ol { + margin: 0 0 0 1.25em; } /* Font sizes */ @@ -181,6 +198,27 @@ opacity: .6; } + /* Line heights */ + .mbsc-line-height-xs { + line-height: 1; + } + + .mbsc-line-height-s { + line-height: 1.25; + } + + .mbsc-line-height-m { + line-height: 1.5; + } + + .mbsc-line-height-l { + line-height: 1.75; + } + + .mbsc-line-height-xl { + line-height: 2; + } + /* Font weights */ .mbsc-ultra-bold { diff --git a/src/scss/progress/progress.ios.scss b/src/scss/progress/progress.ios.scss index dbcc1883..d151d685 100644 --- a/src/scss/progress/progress.ios.scss +++ b/src/scss/progress/progress.ios.scss @@ -89,11 +89,12 @@ .mbsc-progress-track { border-radius: 1em; - height: .0625em; + height: .125em; } .mbsc-progress-bar { z-index: 1; + border-radius: 1em; } .mbsc-progress-value { @@ -111,7 +112,8 @@ } /* Stacked label */ - .mbsc-label-stacked.mbsc-progress.mbsc-control-w { + .mbsc-label-stacked.mbsc-progress.mbsc-control-w, + .mbsc-label-floating.mbsc-progress.mbsc-control-w { .mbsc-label { font-size: .75em; position: absolute; @@ -131,7 +133,7 @@ padding-bottom: 1em; .mbsc-input-ic { - top: 1em; + top: 1.0625em; } } diff --git a/src/scss/slider/slider.ios.scss b/src/scss/slider/slider.ios.scss index 42d1b5e1..fd4e657c 100644 --- a/src/scss/slider/slider.ios.scss +++ b/src/scss/slider/slider.ios.scss @@ -6,9 +6,6 @@ @include exports("slider.ios") { .mbsc-ios { - .mbsc-slider-handle-cont { - top: 0; - } .mbsc-slider-handle { top: 50%; @@ -45,27 +42,27 @@ opacity: .4; } - .mbsc-slider-primary .mbsc-progress-bar { + &.mbsc-slider-primary .mbsc-progress-bar { background: $mbsc-ios-primary; } - .mbsc-slider-secondary .mbsc-progress-bar { + &.mbsc-slider-secondary .mbsc-progress-bar { background: $mbsc-ios-secondary; } - .mbsc-slider-success .mbsc-progress-bar { + &.mbsc-slider-success .mbsc-progress-bar { background: $mbsc-ios-success; } - .mbsc-slider-danger .mbsc-progress-bar { + &.mbsc-slider-danger .mbsc-progress-bar { background: $mbsc-ios-danger; } - .mbsc-slider-warning .mbsc-progress-bar { + &.mbsc-slider-warning .mbsc-progress-bar { background: $mbsc-ios-warning; } - .mbsc-slider-info .mbsc-progress-bar { + &.mbsc-slider-info .mbsc-progress-bar { background: $mbsc-ios-info; } } diff --git a/src/scss/slider/slider.material.colors.scss b/src/scss/slider/slider.material.colors.scss index a6678b06..973ef18c 100644 --- a/src/scss/slider/slider.material.colors.scss +++ b/src/scss/slider/slider.material.colors.scss @@ -27,6 +27,10 @@ background: $accent; } + .mbsc-slider-handle:before { + background: rgba($background-contrast, .1); + } + .mbsc-slider-start .mbsc-slider-handle { border-color: $gray-background; background: $background; diff --git a/src/scss/slider/slider.material.scss b/src/scss/slider/slider.material.scss index b87f9ae1..0f31975c 100644 --- a/src/scss/slider/slider.material.scss +++ b/src/scss/slider/slider.material.scss @@ -95,7 +95,7 @@ } /* color presets */ - .mbsc-slider-primary { + &.mbsc-slider-primary { .mbsc-slider-tooltip, .mbsc-slider-handle { @@ -112,7 +112,7 @@ } } - .mbsc-slider-secondary { + &.mbsc-slider-secondary { .mbsc-slider-tooltip, .mbsc-slider-handle { @@ -129,7 +129,7 @@ } } - .mbsc-slider-success { + &.mbsc-slider-success { .mbsc-slider-tooltip, .mbsc-slider-handle { @@ -146,7 +146,7 @@ } } - .mbsc-slider-danger { + &.mbsc-slider-danger { .mbsc-slider-tooltip, .mbsc-slider-handle { @@ -163,7 +163,7 @@ } } - .mbsc-slider-warning { + &.mbsc-slider-warning { .mbsc-slider-tooltip, .mbsc-slider-handle { @@ -180,7 +180,7 @@ } } - .mbsc-slider-info { + &.mbsc-slider-info { .mbsc-slider-tooltip, .mbsc-slider-handle { diff --git a/src/scss/slider/slider.mobiscroll.scss b/src/scss/slider/slider.mobiscroll.scss index b98d6873..eb5ba4ad 100644 --- a/src/scss/slider/slider.mobiscroll.scss +++ b/src/scss/slider/slider.mobiscroll.scss @@ -65,7 +65,7 @@ transform: scale(.5); } - .mbsc-slider-primary { + &.mbsc-slider-primary { .mbsc-slider-tooltip, .mbsc-slider-handle, @@ -74,7 +74,7 @@ } } - .mbsc-slider-secondary { + &.mbsc-slider-secondary { .mbsc-slider-tooltip, .mbsc-slider-handle, @@ -83,7 +83,7 @@ } } - .mbsc-slider-success { + &.mbsc-slider-success { .mbsc-slider-tooltip, .mbsc-slider-handlem .mbsc-progress-bar { @@ -91,7 +91,7 @@ } } - .mbsc-slider-danger { + &.mbsc-slider-danger { .mbsc-slider-tooltip, .mbsc-slider-handle, @@ -100,7 +100,7 @@ } } - .mbsc-slider-warning { + &.mbsc-slider-warning { .mbsc-slider-tooltip, .mbsc-slider-handle, @@ -109,7 +109,7 @@ } } - .mbsc-slider-info { + &.mbsc-slider-info { .mbsc-slider-tooltip, .mbsc-slider-handle, diff --git a/src/scss/slider/slider.windows.scss b/src/scss/slider/slider.windows.scss index 4b53a01b..5d0f223b 100644 --- a/src/scss/slider/slider.windows.scss +++ b/src/scss/slider/slider.windows.scss @@ -59,27 +59,27 @@ } /* Slider color presets */ - .mbsc-slider-primary .mbsc-progress-bar { + &.mbsc-slider-primary .mbsc-progress-bar { background: $mbsc-windows-primary; } - .mbsc-slider-secondary .mbsc-progress-bar { + &.mbsc-slider-secondary .mbsc-progress-bar { background: $mbsc-windows-secondary; } - .mbsc-slider-success .mbsc-progress-bar { + &.mbsc-slider-success .mbsc-progress-bar { background: $mbsc-windows-success; } - .mbsc-slider-danger .mbsc-progress-bar { + &.mbsc-slider-danger .mbsc-progress-bar { background: $mbsc-windows-danger; } - .mbsc-slider-warning .mbsc-progress-bar { + &.mbsc-slider-warning .mbsc-progress-bar { background: $mbsc-windows-warning; } - .mbsc-slider-info .mbsc-progress-bar { + &.mbsc-slider-info .mbsc-progress-bar { background: $mbsc-windows-info; } }