├── .babelrc ├── .eslintrc ├── .gitignore ├── .jsbeautifyrc ├── .jshintignore ├── .jshintrc ├── Gruntfile.js ├── LICENSE ├── README.md ├── bundles ├── mobiscroll.angular.js ├── mobiscroll.angular.min.js ├── mobiscroll.angular.scss ├── mobiscroll.angular.ts ├── mobiscroll.angularjs.js ├── mobiscroll.common.js ├── mobiscroll.javascript.js ├── mobiscroll.javascript.scss ├── mobiscroll.jquery.js ├── mobiscroll.jquery.scss ├── mobiscroll.ng.scss ├── mobiscroll.react.js ├── mobiscroll.react.scss └── mobiscroll.scss ├── examples ├── angular │ ├── .browserslistrc │ ├── .editorconfig │ ├── .gitignore │ ├── README.md │ ├── angular.json │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.html │ │ │ ├── app.component.scss │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.scss │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── kitchen-sink │ ├── README.md │ └── index.html └── react │ ├── .env │ ├── .eslintcache │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts │ ├── tsconfig.json │ └── yarn.lock ├── grunt ├── aliases.js ├── babel.js ├── bump.js ├── clean.js ├── copy.js ├── eslint.js ├── jshint.js ├── rollup.js ├── run.js └── sass.js ├── img ├── alert.png ├── buttons.png ├── checkbox.png ├── notifications.png ├── progress.png ├── radio.png ├── segmented.png ├── select-styling.png ├── slider.png ├── stepper.png ├── switch.png ├── text-input.png └── typography.png ├── package-lock.json ├── package.json ├── packages ├── angular │ ├── README.md │ └── package.json ├── angularjs │ ├── README.md │ └── package.json ├── javascript │ ├── README.md │ └── package.json ├── jquery │ ├── README.md │ └── package.json └── react │ ├── README.md │ └── package.json ├── src ├── js │ ├── classes │ │ ├── button.d.ts │ │ ├── button.js │ │ ├── checkbox.d.ts │ │ ├── checkbox.js │ │ ├── form-control.d.ts │ │ ├── form-control.js │ │ ├── forms.d.ts │ │ ├── forms.js │ │ ├── frame.d.ts │ │ ├── frame.js │ │ ├── input.d.ts │ │ ├── input.js │ │ ├── page.d.ts │ │ ├── page.js │ │ ├── popup.d.ts │ │ ├── popup.js │ │ ├── progress-base.d.ts │ │ ├── progress-base.js │ │ ├── progress.d.ts │ │ ├── progress.js │ │ ├── radio.d.ts │ │ ├── radio.js │ │ ├── rating.d.ts │ │ ├── rating.js │ │ ├── scroller.d.ts │ │ ├── scroller.js │ │ ├── scrollview-base.angular.ts │ │ ├── scrollview-base.js │ │ ├── scrollview-base.react.js │ │ ├── scrollview-base.react.jsx │ │ ├── segmented.d.ts │ │ ├── segmented.js │ │ ├── select.d.ts │ │ ├── select.js │ │ ├── slider-base.d.ts │ │ ├── slider-base.js │ │ ├── slider.d.ts │ │ ├── slider.js │ │ ├── stepper.d.ts │ │ ├── stepper.js │ │ ├── switch.d.ts │ │ ├── switch.js │ │ ├── textarea.d.ts │ │ ├── textarea.js │ │ ├── widget.d.ts │ │ └── widget.js │ ├── core │ │ ├── core.d.ts │ │ ├── core.js │ │ ├── dom.d.ts │ │ ├── dom.js │ │ ├── mobiscroll.d.ts │ │ └── mobiscroll.js │ ├── forms.angular.ts │ ├── forms.javascript.js │ ├── forms.jquery.js │ ├── forms.ng.js │ ├── forms.react.jsx │ ├── frameworks │ │ ├── angular.ts │ │ ├── javascript.d.ts │ │ ├── javascript.js │ │ ├── jquery.d.ts │ │ ├── jquery.js │ │ ├── ng.js │ │ ├── react.d.ts │ │ └── react.jsx │ ├── i18n │ │ ├── ar.js │ │ ├── bg.js │ │ ├── ca.js │ │ ├── cs.js │ │ ├── da.js │ │ ├── de.js │ │ ├── el.js │ │ ├── en-GB.js │ │ ├── es.js │ │ ├── fa.js │ │ ├── fi.js │ │ ├── fr.js │ │ ├── he.js │ │ ├── hi.js │ │ ├── hijri.js │ │ ├── hr.js │ │ ├── hu.js │ │ ├── it.js │ │ ├── ja.js │ │ ├── jalali.js │ │ ├── ko.js │ │ ├── lt.js │ │ ├── nl.js │ │ ├── no.js │ │ ├── pl.js │ │ ├── pt-BR.js │ │ ├── pt-PT.js │ │ ├── ro.js │ │ ├── ru-UA.js │ │ ├── ru.js │ │ ├── sk.js │ │ ├── sr.js │ │ ├── sv.js │ │ ├── th.js │ │ ├── tr.js │ │ ├── ua.js │ │ ├── vi.js │ │ └── zh.js │ ├── input.angular.ts │ ├── mobiscroll.commercial.d.ts │ ├── mobiscroll.commercial.js │ ├── mobiscroll.commercial.ts │ ├── modules │ │ └── mobiscroll.angular.free.ts │ ├── page.angular.ts │ ├── page.javascript.js │ ├── page.jquery.js │ ├── page.ng.js │ ├── page.react.jsx │ ├── scroller.angular.ts │ ├── scroller.javascript.js │ ├── scroller.jquery.js │ ├── scroller.ng.js │ ├── scroller.react.jsx │ ├── themes │ │ ├── auto-theme.js │ │ ├── ios-dark.js │ │ ├── ios.js │ │ ├── material-dark.js │ │ ├── material.js │ │ ├── mobiscroll-dark.js │ │ ├── windows-dark.js │ │ └── windows.js │ └── util │ │ ├── collapsible-base.d.ts │ │ ├── collapsible-base.js │ │ ├── dom.js │ │ ├── forms.js │ │ ├── misc.js │ │ ├── notifications.d.ts │ │ ├── notifications.js │ │ ├── observable.d.ts │ │ ├── observable.js │ │ ├── observable.ts │ │ ├── platform.js │ │ ├── resize-observer.js │ │ ├── stepper.js │ │ └── tap.js └── scss │ ├── borders │ └── borders.ios.scss │ ├── collapsible │ ├── collapsible.ios.scss │ ├── collapsible.material.scss │ ├── collapsible.mobiscroll.scss │ ├── collapsible.scss │ └── collapsible.windows.scss │ ├── core │ ├── animation.scss │ ├── base.scss │ ├── common.scss │ ├── exports.scss │ ├── icons.scss │ ├── icons_mobiscroll.ttf │ ├── icons_mobiscroll.woff │ ├── ios.scss │ ├── material.ripple.scss │ ├── material.scss │ ├── mobiscroll.scss │ └── windows.scss │ ├── forms │ ├── forms.bootstrap.scss │ ├── forms.ios.colors.scss │ ├── forms.ios.scss │ ├── forms.material.colors.scss │ ├── forms.material.scss │ ├── forms.mobiscroll.colors.scss │ ├── forms.mobiscroll.scss │ ├── forms.scss │ ├── forms.windows.colors.scss │ └── forms.windows.scss │ ├── frame │ ├── frame.bootstrap.scss │ ├── frame.ios.colors.scss │ ├── frame.ios.scss │ ├── frame.material.colors.scss │ ├── frame.material.scss │ ├── frame.mobiscroll.colors.scss │ ├── frame.mobiscroll.scss │ ├── frame.scss │ ├── frame.windows.colors.scss │ └── frame.windows.scss │ ├── grid-layout │ ├── grid-layout.bootstrap.scss │ ├── grid-layout.ios.scss │ ├── grid-layout.material.scss │ ├── grid-layout.mobiscroll.scss │ ├── grid-layout.scss │ └── grid-layout.windows.scss │ ├── input │ ├── input.bootstrap.scss │ ├── input.ios.colors.scss │ ├── input.ios.scss │ ├── input.material.colors.scss │ ├── input.material.scss │ ├── input.mobiscroll.colors.scss │ ├── input.mobiscroll.scss │ ├── input.scss │ ├── input.windows.colors.scss │ └── input.windows.scss │ ├── notifications │ ├── notifications.ios.colors.scss │ ├── notifications.ios.scss │ ├── notifications.material.colors.scss │ ├── notifications.material.scss │ ├── notifications.mobiscroll.colors.scss │ ├── notifications.mobiscroll.scss │ ├── notifications.scss │ ├── notifications.windows.colors.scss │ └── notifications.windows.scss │ ├── page │ ├── page.bootstrap.scss │ ├── page.ios.colors.scss │ ├── page.ios.scss │ ├── page.material.colors.scss │ ├── page.material.scss │ ├── page.mobiscroll.colors.scss │ ├── page.mobiscroll.scss │ ├── page.scss │ ├── page.windows.colors.scss │ └── page.windows.scss │ ├── popup │ ├── popup.bootstrap.scss │ ├── popup.ios.colors.scss │ ├── popup.ios.scss │ ├── popup.material.colors.scss │ ├── popup.material.scss │ ├── popup.mobiscroll.colors.scss │ ├── popup.mobiscroll.scss │ ├── popup.scss │ ├── popup.windows.colors.scss │ └── popup.windows.scss │ ├── progress │ ├── progress.bootstrap.scss │ ├── progress.ios.colors.scss │ ├── progress.ios.scss │ ├── progress.material.colors.scss │ ├── progress.material.scss │ ├── progress.mobiscroll.colors.scss │ ├── progress.mobiscroll.scss │ ├── progress.scss │ ├── progress.windows.colors.scss │ └── progress.windows.scss │ ├── rating │ ├── rating.bootstrap.scss │ ├── rating.ios.colors.scss │ ├── rating.ios.scss │ ├── rating.material.colors.scss │ ├── rating.material.scss │ ├── rating.mobiscroll.colors.scss │ ├── rating.mobiscroll.scss │ ├── rating.scss │ ├── rating.windows.colors.scss │ └── rating.windows.scss │ ├── scroller │ ├── scroller.bootstrap.scss │ ├── scroller.ios.colors.scss │ ├── scroller.ios.scss │ ├── scroller.material.colors.scss │ ├── scroller.material.scss │ ├── scroller.mobiscroll.colors.scss │ ├── scroller.mobiscroll.scss │ ├── scroller.scss │ ├── scroller.windows.colors.scss │ └── scroller.windows.scss │ └── slider │ ├── slider.bootstrap.scss │ ├── slider.ios.colors.scss │ ├── slider.ios.scss │ ├── slider.material.colors.scss │ ├── slider.material.scss │ ├── slider.mobiscroll.colors.scss │ ├── slider.mobiscroll.scss │ ├── slider.scss │ ├── slider.windows.colors.scss │ └── slider.windows.scss └── tsconfig.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-react", 4 | [ 5 | "@babel/preset-env", 6 | { 7 | "loose": true, 8 | "modules": false 9 | } 10 | ] 11 | ], 12 | "plugins": [ 13 | "@babel/plugin-proposal-class-properties" 14 | ] 15 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "plugins": [ 4 | "react" 5 | ], 6 | "extends": ["eslint:recommended", "plugin:react/recommended"], 7 | "rules": { 8 | "react/no-find-dom-node": 0, 9 | "react/prop-types": 0, 10 | "react/react-in-jsx-scope": 0, 11 | "react/display-name": 0 12 | }, 13 | "globals": { 14 | "mobiscroll": true, 15 | "React": true, 16 | "ReactDOM": true 17 | }, 18 | "env": { 19 | "browser": true, 20 | "node": true 21 | } 22 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | 4 | *.tgz 5 | 6 | bundles/*.d.ts 7 | bundles/*.metadata.json 8 | 9 | src/js/frameworks/react.js 10 | src/js/frameworks/angular.js 11 | src/js/frameworks/angular.d.ts 12 | src/js/modules/*.js 13 | src/js/modules/*.d.ts 14 | src/js/*.angular.js 15 | src/js/*.angular.d.ts 16 | src/js/*.react.js 17 | src/less/themes/*.css 18 | 19 | packages/**/LICENSE 20 | packages/**/src 21 | -------------------------------------------------------------------------------- /.jsbeautifyrc: -------------------------------------------------------------------------------- 1 | { 2 | "html": { 3 | "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg"], 4 | "space_after_anon_function": true, 5 | "end_with_newline": true 6 | }, 7 | "css": { 8 | "allowed_file_extensions": ["css", "scss", "sass", "less"], 9 | "end_with_newline": true, 10 | "space_around_combinator": true, 11 | "indent_size": 2 12 | }, 13 | "js": { 14 | "allowed_file_extensions": ["js", "jsx", "json", "jshintrc", "jsbeautifyrc"], 15 | "brace_style": "collapse,preserve-inline", 16 | "e4x": true, 17 | "space_after_anon_function": true, 18 | "end_with_newline": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.jshintignore: -------------------------------------------------------------------------------- 1 | dist/* 2 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | require('load-grunt-config')(grunt); 3 | }; 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2017 Mobiscroll 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. -------------------------------------------------------------------------------- /bundles/mobiscroll.angular.js: -------------------------------------------------------------------------------- 1 | export * from '../src/js/modules/mobiscroll.angular.free'; 2 | import './mobiscroll.common'; 3 | -------------------------------------------------------------------------------- /bundles/mobiscroll.angular.min.js: -------------------------------------------------------------------------------- 1 | export * from './mobiscroll.angular'; 2 | export { MbscAccordion as ɵp, MbscFormGroup as ɵm, MbscFormGroupContent as ɵo, MbscFormGroupTitle as ɵn, MbscRadioGroupBase as ɵl, MbscRadioService as ɵk } from '../src/js/forms.angular'; 3 | export { MbscBase as ɵc, MbscBaseModule as ɵg, MbscCloneBase as ɵe, MbscControlBase as ɵf, MbscInputService as ɵb, MbscOptionsService as ɵa, MbscValueBase as ɵd } from '../src/js/frameworks/angular'; 4 | export { MbscFormBase as ɵh, MbscFormValueBase as ɵi, MbscInputBase as ɵj } from '../src/js/input.angular'; 5 | -------------------------------------------------------------------------------- /bundles/mobiscroll.angular.scss: -------------------------------------------------------------------------------- 1 | $mbsc-font-path: '~@mobiscroll/angular-lite/dist/css/' !default; 2 | 3 | @import "mobiscroll"; 4 | -------------------------------------------------------------------------------- /bundles/mobiscroll.angular.ts: -------------------------------------------------------------------------------- 1 | export * from '../src/js/modules/mobiscroll.angular.free'; 2 | import './mobiscroll.common'; 3 | -------------------------------------------------------------------------------- /bundles/mobiscroll.angularjs.js: -------------------------------------------------------------------------------- 1 | import mobiscroll from '../src/js/frameworks/ng'; 2 | 3 | // Components 4 | import '../src/js/forms.ng'; 5 | import '../src/js/page.ng'; 6 | 7 | import './mobiscroll.common'; 8 | 9 | export default mobiscroll; 10 | -------------------------------------------------------------------------------- /bundles/mobiscroll.common.js: -------------------------------------------------------------------------------- 1 | // Languages 2 | import '../src/js/i18n/ar'; 3 | import '../src/js/i18n/bg'; 4 | import '../src/js/i18n/ca'; 5 | import '../src/js/i18n/cs'; 6 | import '../src/js/i18n/da'; 7 | import '../src/js/i18n/de'; 8 | import '../src/js/i18n/el'; 9 | import '../src/js/i18n/en-GB'; 10 | import '../src/js/i18n/es'; 11 | import '../src/js/i18n/fa'; 12 | import '../src/js/i18n/fi'; 13 | import '../src/js/i18n/fr'; 14 | import '../src/js/i18n/he'; 15 | import '../src/js/i18n/hi'; 16 | import '../src/js/i18n/hr'; 17 | import '../src/js/i18n/hu'; 18 | import '../src/js/i18n/it'; 19 | import '../src/js/i18n/ja'; 20 | import '../src/js/i18n/ko'; 21 | import '../src/js/i18n/lt'; 22 | import '../src/js/i18n/nl'; 23 | import '../src/js/i18n/no'; 24 | import '../src/js/i18n/pl'; 25 | import '../src/js/i18n/pt-BR'; 26 | import '../src/js/i18n/pt-PT'; 27 | import '../src/js/i18n/ro'; 28 | import '../src/js/i18n/ru-UA'; 29 | import '../src/js/i18n/ru'; 30 | import '../src/js/i18n/sk'; 31 | import '../src/js/i18n/sr'; 32 | import '../src/js/i18n/sv'; 33 | import '../src/js/i18n/tr'; 34 | import '../src/js/i18n/vi'; 35 | import '../src/js/i18n/zh'; 36 | 37 | // Themes 38 | import '../src/js/themes/ios'; 39 | import '../src/js/themes/material'; 40 | import '../src/js/themes/windows'; 41 | 42 | // Custom themes 43 | import '../src/js/themes/ios-dark'; 44 | import '../src/js/themes/material-dark'; 45 | import '../src/js/themes/mobiscroll-dark'; 46 | import '../src/js/themes/windows-dark'; 47 | 48 | // Auto Theme 49 | import '../src/js/themes/auto-theme'; 50 | -------------------------------------------------------------------------------- /bundles/mobiscroll.javascript.js: -------------------------------------------------------------------------------- 1 | import mobiscroll from '../src/js/frameworks/javascript'; 2 | 3 | // Components 4 | import '../src/js/forms.javascript'; 5 | import '../src/js/page.javascript'; 6 | 7 | import './mobiscroll.common'; 8 | 9 | export default mobiscroll; 10 | -------------------------------------------------------------------------------- /bundles/mobiscroll.javascript.scss: -------------------------------------------------------------------------------- 1 | $mbsc-font-path: '~@mobiscroll/javascript-lite/dist/css/' !default; 2 | 3 | @import "mobiscroll"; 4 | -------------------------------------------------------------------------------- /bundles/mobiscroll.jquery.js: -------------------------------------------------------------------------------- 1 | import mobiscroll from '../src/js/frameworks/jquery'; 2 | 3 | // Components 4 | import '../src/js/forms.jquery'; 5 | import '../src/js/page.jquery'; 6 | 7 | import './mobiscroll.common'; 8 | 9 | export default mobiscroll; 10 | -------------------------------------------------------------------------------- /bundles/mobiscroll.jquery.scss: -------------------------------------------------------------------------------- 1 | $mbsc-font-path: '~@mobiscroll/jquery-lite/dist/css/' !default; 2 | 3 | @import "mobiscroll"; 4 | -------------------------------------------------------------------------------- /bundles/mobiscroll.ng.scss: -------------------------------------------------------------------------------- 1 | $mbsc-font-path: '~@mobiscroll/angularjs-lite/dist/css/' !default; 2 | 3 | @import "mobiscroll"; 4 | -------------------------------------------------------------------------------- /bundles/mobiscroll.react.js: -------------------------------------------------------------------------------- 1 | import mobiscroll from '../src/js/frameworks/react'; 2 | 3 | // Components 4 | import '../src/js/forms.react'; 5 | import '../src/js/page.react'; 6 | 7 | import './mobiscroll.common'; 8 | 9 | export default mobiscroll; 10 | -------------------------------------------------------------------------------- /bundles/mobiscroll.react.scss: -------------------------------------------------------------------------------- 1 | $mbsc-font-path: '~@mobiscroll/react-lite/dist/css/' !default; 2 | 3 | @import "mobiscroll"; 4 | -------------------------------------------------------------------------------- /bundles/mobiscroll.scss: -------------------------------------------------------------------------------- 1 | // Forms 2 | @import "../src/scss/forms/forms"; 3 | @import "../src/scss/forms/forms.bootstrap"; 4 | @import "../src/scss/forms/forms.ios"; 5 | @import "../src/scss/forms/forms.material"; 6 | @import "../src/scss/forms/forms.mobiscroll"; 7 | @import "../src/scss/forms/forms.windows"; 8 | 9 | // Grid Layout 10 | @import "../src/scss/grid-layout/grid-layout"; 11 | 12 | // Create theme builder functions 13 | 14 | @mixin mbsc-ios-theme($theme, $params) { 15 | @include mbsc-ios-forms($theme, $params); 16 | } 17 | 18 | @mixin mbsc-material-theme($theme, $params) { 19 | @include mbsc-material-forms($theme, $params); 20 | } 21 | 22 | @mixin mbsc-mobiscroll-theme($theme, $params) { 23 | @include mbsc-mobiscroll-forms($theme, $params); 24 | } 25 | 26 | @mixin mbsc-windows-theme($theme, $params) { 27 | @include mbsc-windows-forms($theme, $params); 28 | } 29 | 30 | @mixin mbsc-custom-theme($theme, $base-theme, $colors) { 31 | @if $base-theme=='ios' { 32 | @include mbsc-ios-theme($theme, $colors); 33 | } 34 | 35 | @else if $base-theme=='material' { 36 | @include mbsc-material-theme($theme, $colors); 37 | } 38 | 39 | @else if $base-theme=='mobiscroll' { 40 | @include mbsc-mobiscroll-theme($theme, $colors); 41 | } 42 | 43 | @else if $base-theme=='windows' { 44 | @include mbsc-windows-theme($theme, $colors); 45 | } 46 | } 47 | 48 | // Create dark theme variants 49 | @include mbsc-ios-theme('ios-dark', ('background': $mbsc-ios-dark-background, 'text': $mbsc-ios-dark-text, 'accent': $mbsc-ios-dark-accent)); 50 | @include mbsc-material-theme('material-dark', ('background': $mbsc-material-dark-background, 'text': $mbsc-material-dark-text, 'accent': $mbsc-material-dark-accent)); 51 | @include mbsc-mobiscroll-theme('mobiscroll-dark', ('background': $mbsc-mobiscroll-dark-background, 'text': $mbsc-mobiscroll-dark-text, 'accent': $mbsc-mobiscroll-dark-accent)); 52 | @include mbsc-windows-theme('windows-dark', ('background': $mbsc-windows-dark-background, 'text': $mbsc-windows-dark-text, 'accent': $mbsc-windows-dark-accent)); 53 | -------------------------------------------------------------------------------- /examples/angular/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /examples/angular/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /examples/angular/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /examples/angular/README.md: -------------------------------------------------------------------------------- 1 | # AngularApp 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.6. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /examples/angular/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | SELENIUM_PROMISE_MANAGER: false, 20 | baseUrl: 'http://localhost:4200/', 21 | framework: 'jasmine', 22 | jasmineNodeOpts: { 23 | showColors: true, 24 | defaultTimeoutInterval: 30000, 25 | print: function() {} 26 | }, 27 | onPrepare() { 28 | require('ts-node').register({ 29 | project: require('path').join(__dirname, './tsconfig.json') 30 | }); 31 | jasmine.getEnv().addReporter(new SpecReporter({ 32 | spec: { 33 | displayStacktrace: StacktraceOption.PRETTY 34 | } 35 | })); 36 | } 37 | }; -------------------------------------------------------------------------------- /examples/angular/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', async () => { 12 | await page.navigateTo(); 13 | expect(await page.getTitleText()).toEqual('angular-app app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /examples/angular/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | async navigateTo(): Promise { 5 | return browser.get(browser.baseUrl); 6 | } 7 | 8 | async getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/angular/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../out-tsc/e2e", 6 | "module": "commonjs", 7 | "target": "es2018", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/angular/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, './coverage/angular-app'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /examples/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-app", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~12.0.0", 15 | "@angular/common": "~12.0.0", 16 | "@angular/compiler": "~12.0.0", 17 | "@angular/core": "~12.0.0", 18 | "@angular/forms": "~12.0.0", 19 | "@angular/platform-browser": "~12.0.0", 20 | "@angular/platform-browser-dynamic": "~12.0.0", 21 | "@angular/router": "~12.0.0", 22 | "@mobiscroll/angular-lite": "4.10.9", 23 | "rxjs": "^6.6.7", 24 | "tslib": "^2.2.0", 25 | "zone.js": "~0.11.4" 26 | }, 27 | "devDependencies": { 28 | "@angular-devkit/build-angular": "~12.0.0", 29 | "@angular/cli": "~12.0.0", 30 | "@angular/compiler-cli": "~12.0.0", 31 | "@types/jasmine": "^3.6.11", 32 | "@types/node": "^12.20.13", 33 | "codelyzer": "^6.0.2", 34 | "jasmine-core": "~3.6.0", 35 | "jasmine-spec-reporter": "~5.0.0", 36 | "karma": "~6.3.2", 37 | "karma-chrome-launcher": "~3.1.0", 38 | "karma-coverage": "~2.0.3", 39 | "karma-jasmine": "~4.0.0", 40 | "karma-jasmine-html-reporter": "^1.6.0", 41 | "protractor": "~7.0.0", 42 | "sass": "^1.32.13", 43 | "ts-node": "~8.3.0", 44 | "tslint": "~6.1.0", 45 | "typescript": "^4.2.4" 46 | } 47 | } -------------------------------------------------------------------------------- /examples/angular/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/examples/angular/src/app/app.component.scss -------------------------------------------------------------------------------- /examples/angular/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async(() => { 6 | TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | })); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'angular'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.componentInstance; 22 | expect(app.title).toEqual('angular'); 23 | }); 24 | 25 | it('should render title', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.nativeElement; 29 | expect(compiled.querySelector('.content span').textContent).toContain('angular app is running!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /examples/angular/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | firstName = ''; 10 | lastName = ''; 11 | email = ''; 12 | password = ''; 13 | rating = 4; 14 | gender = 'male'; 15 | height = 170; 16 | weight = 85; 17 | indoor = false; 18 | cheers = false; 19 | pause = true; 20 | heartRate = true; 21 | pace = 'current'; 22 | countdown = 3; 23 | } 24 | -------------------------------------------------------------------------------- /examples/angular/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { NgModule } from '@angular/core'; 4 | 5 | import { MbscModule, mobiscroll } from '@mobiscroll/angular-lite'; 6 | 7 | import { AppComponent } from './app.component'; 8 | 9 | mobiscroll.settings = { 10 | theme: 'auto', 11 | themeVariant: 'auto' 12 | }; 13 | 14 | @NgModule({ 15 | declarations: [ 16 | AppComponent 17 | ], 18 | imports: [ 19 | BrowserModule, 20 | FormsModule, 21 | MbscModule, 22 | ], 23 | providers: [], 24 | bootstrap: [AppComponent] 25 | }) 26 | export class AppModule { } 27 | -------------------------------------------------------------------------------- /examples/angular/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/examples/angular/src/assets/.gitkeep -------------------------------------------------------------------------------- /examples/angular/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /examples/angular/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /examples/angular/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/examples/angular/src/favicon.ico -------------------------------------------------------------------------------- /examples/angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/angular/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /examples/angular/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | $mbsc-ios-accent: #e61d2a; 4 | $mbsc-material-accent: #e61d2a; 5 | $mbsc-mobiscroll-accent: #e61d2a; 6 | 7 | @import "~@mobiscroll/angular-lite/dist/css/mobiscroll.scss"; 8 | -------------------------------------------------------------------------------- /examples/angular/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /examples/angular/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /examples/angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "sourceMap": true, 12 | "declaration": false, 13 | "downlevelIteration": true, 14 | "experimentalDecorators": true, 15 | "moduleResolution": "node", 16 | "importHelpers": true, 17 | "target": "es2015", 18 | "module": "es2020", 19 | "lib": [ 20 | "es2018", 21 | "dom" 22 | ] 23 | }, 24 | "angularCompilerOptions": { 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /examples/kitchen-sink/README.md: -------------------------------------------------------------------------------- 1 | Run `npm install` and `grunt build` to build the necessary css and js files into the `dist` folder. -------------------------------------------------------------------------------- /examples/react/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | -------------------------------------------------------------------------------- /examples/react/.eslintcache: -------------------------------------------------------------------------------- 1 | [{"/Users/dioslaska/Projects/mobiscroll/examples/react/src/App.tsx":"1","/Users/dioslaska/Projects/mobiscroll/examples/react/src/index.tsx":"2"},{"size":4181,"mtime":1611303858595,"results":"3","hashOfConfig":"4"},{"size":455,"mtime":1611303705600,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1w589hr",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/dioslaska/Projects/mobiscroll/examples/react/src/App.tsx",[],"/Users/dioslaska/Projects/mobiscroll/examples/react/src/index.tsx",[]] -------------------------------------------------------------------------------- /examples/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /examples/react/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /examples/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@mobiscroll/react-lite": "4.10.9", 7 | "@testing-library/jest-dom": "^5.12.0", 8 | "@testing-library/react": "^11.2.7", 9 | "@testing-library/user-event": "^12.8.3", 10 | "@types/jest": "^26.0.23", 11 | "@types/node": "^12.20.13", 12 | "@types/react": "^16.14.6", 13 | "@types/react-dom": "^16.9.13", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "react-scripts": "4.0.3", 17 | "typescript": "^4.2.4", 18 | "web-vitals": "^0.2.4" 19 | }, 20 | "scripts": { 21 | "start": "react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } -------------------------------------------------------------------------------- /examples/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/examples/react/public/favicon.ico -------------------------------------------------------------------------------- /examples/react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /examples/react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/examples/react/public/logo192.png -------------------------------------------------------------------------------- /examples/react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/examples/react/public/logo512.png -------------------------------------------------------------------------------- /examples/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /examples/react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /examples/react/src/App.scss: -------------------------------------------------------------------------------- 1 | $mbsc-ios-accent: #e61d2a; 2 | $mbsc-material-accent: #e61d2a; 3 | $mbsc-mobiscroll-accent: #e61d2a; 4 | 5 | @import '~@mobiscroll/react-lite/dist/css/mobiscroll.scss'; 6 | 7 | body, 8 | html, 9 | #root { 10 | height: 100%; 11 | } -------------------------------------------------------------------------------- /examples/react/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /examples/react/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | , 9 | document.getElementById('root') 10 | ); 11 | 12 | // If you want to start measuring performance in your app, pass a function 13 | // to log results (for example: reportWebVitals(console.log)) 14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 15 | reportWebVitals(); 16 | -------------------------------------------------------------------------------- /examples/react/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/react/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /examples/react/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /examples/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /grunt/aliases.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | default: [ 3 | 'sass', 4 | 'run:transpile', 5 | 'rollup:dev', 6 | 'copy:icons' 7 | ], 8 | build: [ 9 | 'clean:packages', 10 | 'sass', 11 | 'run:transpile', 12 | 'run:scss', 13 | 'rollup:dev', 14 | 'rollup:prod', 15 | 'rollup:esm', 16 | 'rollup:angular', 17 | 'copy:icons', 18 | 'copy:metadata', 19 | 'copy:dist' 20 | ] 21 | }; 22 | -------------------------------------------------------------------------------- /grunt/babel.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options: { 3 | babelrc: false, 4 | plugins: [ 5 | 'transform-react-jsx', 6 | 'transform-object-rest-spread', 7 | 'transform-es2015-destructuring', 8 | "transform-decorators-legacy", 9 | "transform-class-properties" 10 | ] 11 | }, 12 | dist: { 13 | files: { 14 | 'src/js/frameworks/react.js': 'src/js/frameworks/react.jsx', 15 | 'src/js/forms.react.js': 'src/js/forms.react.jsx', 16 | 'src/js/page.react.js': 'src/js/page.react.jsx', 17 | 'src/js/scroller.react.js': 'src/js/scroller.react.jsx' 18 | } 19 | } 20 | }; -------------------------------------------------------------------------------- /grunt/bump.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options: { 3 | files: [ 4 | 'package.json', 5 | 'packages/angular/package.json', 6 | 'packages/angularjs/package.json', 7 | 'packages/javascript/package.json', 8 | 'packages/jquery/package.json', 9 | 'packages/react/package.json' 10 | ], 11 | updateConfigs: [], 12 | commit: false, 13 | commitMessage: 'Release v%VERSION%', 14 | commitFiles: [ 15 | 'package.json' 16 | ], 17 | createTag: false, 18 | tagName: 'v%VERSION%', 19 | tagMessage: 'Version %VERSION%', 20 | push: false, 21 | pushTo: 'upstream', 22 | gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d' 23 | } 24 | }; -------------------------------------------------------------------------------- /grunt/clean.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dist: { 3 | src: [ 4 | 'dist/*' 5 | ] 6 | }, 7 | packages: { 8 | src: [ 9 | 'packages/**/dist/**', 10 | 'packages/**/src/**' 11 | ] 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /grunt/eslint.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | react: ['src/**/*.jsx'] 3 | }; 4 | -------------------------------------------------------------------------------- /grunt/jshint.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options: { 3 | jshintrc: true 4 | }, 5 | all: [ 6 | 'src/**/*.js', 7 | '!src/**/react.js', 8 | '!src/**/*.react.js' 9 | ] 10 | }; 11 | -------------------------------------------------------------------------------- /grunt/run.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | transpile: { 3 | exec: 'npm run transpile' 4 | }, 5 | scss: { 6 | exec: '' + 7 | '"./node_modules/.bin/scss-bundle" --verbosity Errors -e ./bundles/mobiscroll.angular.scss -d ./packages/angular/dist/css/mobiscroll.scss --dedupe ./src/**/*.scss && ' + 8 | '"./node_modules/.bin/scss-bundle" --verbosity Errors -e ./bundles/mobiscroll.javascript.scss -d ./packages/javascript/dist/css/mobiscroll.scss --dedupe ./src/**/*.scss && ' + 9 | '"./node_modules/.bin/scss-bundle" --verbosity Errors -e ./bundles/mobiscroll.jquery.scss -d ./packages/jquery/dist/css/mobiscroll.scss --dedupe ./src/**/*.scss && ' + 10 | '"./node_modules/.bin/scss-bundle" --verbosity Errors -e ./bundles/mobiscroll.ng.scss -d ./packages/angularjs/dist/css/mobiscroll.scss --dedupe ./src/**/*.scss && ' + 11 | '"./node_modules/.bin/scss-bundle" --verbosity Errors -e ./bundles/mobiscroll.react.scss -d ./packages/react/dist/css/mobiscroll.scss --dedupe ./src/**/*.scss' 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /grunt/sass.js: -------------------------------------------------------------------------------- 1 | const sass = require('node-sass'); 2 | 3 | module.exports = { 4 | dev: { 5 | options: { 6 | implementation: sass, 7 | sourceMap: true, 8 | }, 9 | files: { 10 | 'dist/css/mobiscroll.css': 'bundles/mobiscroll.scss' 11 | } 12 | }, 13 | prod: { 14 | options: { 15 | implementation: sass, 16 | sourceMap: false, 17 | outputStyle: 'compressed' 18 | }, 19 | files: { 20 | 'dist/css/mobiscroll.min.css': 'bundles/mobiscroll.scss' 21 | } 22 | } 23 | }; 24 | -------------------------------------------------------------------------------- /img/alert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/alert.png -------------------------------------------------------------------------------- /img/buttons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/buttons.png -------------------------------------------------------------------------------- /img/checkbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/checkbox.png -------------------------------------------------------------------------------- /img/notifications.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/notifications.png -------------------------------------------------------------------------------- /img/progress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/progress.png -------------------------------------------------------------------------------- /img/radio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/radio.png -------------------------------------------------------------------------------- /img/segmented.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/segmented.png -------------------------------------------------------------------------------- /img/select-styling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/select-styling.png -------------------------------------------------------------------------------- /img/slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/slider.png -------------------------------------------------------------------------------- /img/stepper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/stepper.png -------------------------------------------------------------------------------- /img/switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/switch.png -------------------------------------------------------------------------------- /img/text-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/text-input.png -------------------------------------------------------------------------------- /img/typography.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/img/typography.png -------------------------------------------------------------------------------- /packages/angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mobiscroll/angular-lite", 3 | "version": "4.10.9", 4 | "description": "Angular UI library for progressive web and hybrid apps", 5 | "homepage": "https://mobiscroll.com/", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "mobile web", 9 | "hybrid apps", 10 | "javascript", 11 | "mobiscroll", 12 | "javascript library", 13 | "angular", 14 | "component library", 15 | "ui components", 16 | "ui kit", 17 | "ionic plugin" 18 | ], 19 | "author": { 20 | "name": "Mobiscroll", 21 | "url": "https://mobiscroll.com/" 22 | }, 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/acidb/mobiscroll.git" 26 | }, 27 | "bugs": { 28 | "url": "https://github.com/acidb/mobiscroll/issues" 29 | }, 30 | "main": "dist/bundles/mobiscroll.angular.min.js", 31 | "module": "dist/esm5/mobiscroll.angular.min.js", 32 | "metadata": "dist/mobiscroll.angular.min.metadata.json", 33 | "types": "dist/mobiscroll.angular.min.d.ts", 34 | "sideEffects": false, 35 | "style": "dist/css/mobiscroll.min.css", 36 | "files": [ 37 | "dist/mobiscroll.angular.d.ts", 38 | "dist/mobiscroll.angular.min.d.ts", 39 | "dist/mobiscroll.angular.min.metadata.json", 40 | "dist/bundles/mobiscroll.angular.min.js", 41 | "dist/esm5/mobiscroll.angular.min.js", 42 | "dist/css/mobiscroll.css", 43 | "dist/css/mobiscroll.scss", 44 | "dist/css/mobiscroll.min.css", 45 | "dist/css/icons_mobiscroll.ttf", 46 | "dist/css/icons_mobiscroll.woff", 47 | "src/**" 48 | ], 49 | "peerDependencies": { 50 | "@angular/core": ">=2.0.0", 51 | "@angular/common": ">=2.0.0", 52 | "@angular/forms": ">=2.0.0" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/angularjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mobiscroll/angularjs-lite", 3 | "version": "4.10.9", 4 | "description": "AngularJS UI library for progressive web and hybrid apps", 5 | "homepage": "https://mobiscroll.com/", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "mobile web", 9 | "hybrid apps", 10 | "javascript", 11 | "mobiscroll", 12 | "javascript library", 13 | "angular", 14 | "component library", 15 | "ui components", 16 | "ui kit", 17 | "ionic plugin" 18 | ], 19 | "author": { 20 | "name": "Mobiscroll", 21 | "url": "https://mobiscroll.com/" 22 | }, 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/acidb/mobiscroll.git" 26 | }, 27 | "bugs": { 28 | "url": "https://github.com/acidb/mobiscroll/issues" 29 | }, 30 | "main": "dist/js/mobiscroll.angularjs.min.js", 31 | "style": "dist/css/mobiscroll.min.css", 32 | "files": [ 33 | "dist/js/mobiscroll.angularjs.js", 34 | "dist/js/mobiscroll.angularjs.min.js", 35 | "dist/css/mobiscroll.css", 36 | "dist/css/mobiscroll.scss", 37 | "dist/css/mobiscroll.min.css", 38 | "dist/css/icons_mobiscroll.ttf", 39 | "dist/css/icons_mobiscroll.woff" 40 | ], 41 | "peerDependencies": { 42 | "angular": ">=1.0.8" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/javascript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mobiscroll/javascript-lite", 3 | "version": "4.10.9", 4 | "description": "Framework agnostic UI library for progressive web and hybrid apps", 5 | "homepage": "https://mobiscroll.com/", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "mobile web", 9 | "hybrid apps", 10 | "javascript", 11 | "mobiscroll", 12 | "javascript library", 13 | "component library", 14 | "ui components", 15 | "ui kit" 16 | ], 17 | "author": { 18 | "name": "Mobiscroll", 19 | "url": "https://mobiscroll.com/" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/acidb/mobiscroll.git" 24 | }, 25 | "bugs": { 26 | "url": "https://github.com/acidb/mobiscroll/issues" 27 | }, 28 | "main": "dist/js/mobiscroll.javascript.min.js", 29 | "typings": "dist/src/js/frameworks/javascript.d.ts", 30 | "style": "dist/css/mobiscroll.min.css", 31 | "files": [ 32 | "dist/js/mobiscroll.javascript.js", 33 | "dist/js/mobiscroll.javascript.min.js", 34 | "dist/css/mobiscroll.css", 35 | "dist/css/mobiscroll.scss", 36 | "dist/css/mobiscroll.min.css", 37 | "dist/css/icons_mobiscroll.ttf", 38 | "dist/css/icons_mobiscroll.woff", 39 | "dist/src/**" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /packages/jquery/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mobiscroll/jquery-lite", 3 | "version": "4.10.9", 4 | "description": "jQuery and jQuery Mobile UI library for progressive web and hybrid apps", 5 | "homepage": "https://mobiscroll.com/", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "mobile web", 9 | "hybrid apps", 10 | "javascript", 11 | "mobiscroll", 12 | "jquery", 13 | "javascript library", 14 | "component library", 15 | "ui components", 16 | "ui kit" 17 | ], 18 | "author": { 19 | "name": "Mobiscroll", 20 | "url": "https://mobiscroll.com/" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/acidb/mobiscroll.git" 25 | }, 26 | "bugs": { 27 | "url": "https://github.com/acidb/mobiscroll/issues" 28 | }, 29 | "main": "dist/js/mobiscroll.jquery.min.js", 30 | "typings": "dist/src/js/frameworks/jquery.d.ts", 31 | "style": "dist/css/mobiscroll.min.css", 32 | "files": [ 33 | "dist/js/mobiscroll.jquery.js", 34 | "dist/js/mobiscroll.jquery.min.js", 35 | "dist/css/mobiscroll.css", 36 | "dist/css/mobiscroll.scss", 37 | "dist/css/mobiscroll.min.css", 38 | "dist/css/icons_mobiscroll.ttf", 39 | "dist/css/icons_mobiscroll.woff", 40 | "dist/src/**" 41 | ], 42 | "peerDependencies": { 43 | "jquery": ">=1.7.0" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mobiscroll/react-lite", 3 | "version": "4.10.9", 4 | "description": "React UI library for progressive web and hybrid apps", 5 | "homepage": "https://mobiscroll.com/", 6 | "license": "Apache-2.0", 7 | "keywords": [ 8 | "mobile web", 9 | "hybrid apps", 10 | "javascript", 11 | "mobiscroll", 12 | "javascript library", 13 | "react", 14 | "component library", 15 | "ui components", 16 | "ui kit" 17 | ], 18 | "author": { 19 | "name": "Mobiscroll", 20 | "url": "https://mobiscroll.com/" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/acidb/mobiscroll.git" 25 | }, 26 | "bugs": { 27 | "url": "https://github.com/acidb/mobiscroll/issues" 28 | }, 29 | "main": "dist/js/mobiscroll.react.min.js", 30 | "typings": "dist/src/js/frameworks/react.d.ts", 31 | "style": "dist/css/mobiscroll.min.css", 32 | "files": [ 33 | "dist/js/mobiscroll.react.js", 34 | "dist/js/mobiscroll.react.min.js", 35 | "dist/css/mobiscroll.css", 36 | "dist/css/mobiscroll.scss", 37 | "dist/css/mobiscroll.min.css", 38 | "dist/css/icons_mobiscroll.ttf", 39 | "dist/css/icons_mobiscroll.woff", 40 | "dist/src/**" 41 | ], 42 | "peerDependencies": { 43 | "react": ">=15.3.0", 44 | "react-dom": ">=15.3.0", 45 | "prop-types": ">=15.5.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/js/classes/button.d.ts: -------------------------------------------------------------------------------- 1 | import { FormControl } from './form-control'; 2 | import { MbscFormOptions } from './forms'; 3 | 4 | export class Button extends FormControl { 5 | constructor(element: any, settings: MbscFormOptions); 6 | } -------------------------------------------------------------------------------- /src/js/classes/button.js: -------------------------------------------------------------------------------- 1 | import { FormControl } from './form-control'; 2 | import { autoInit } from '../core/core'; 3 | 4 | export class Button extends FormControl { 5 | constructor(elm, settings) { 6 | super(elm, settings); 7 | 8 | const $elm = this._$elm; 9 | const hasIcon = $elm.attr('data-icon'); 10 | 11 | $elm 12 | .addClass('mbsc-btn mbsc-no-touch') 13 | .find('.mbsc-btn-ic').remove(); 14 | 15 | if (hasIcon) { 16 | $elm.prepend(''); 17 | if ($elm.text() === "") { 18 | $elm.addClass('mbsc-btn-icon-only'); 19 | } 20 | } 21 | 22 | this._$rippleElm = $elm; 23 | } 24 | 25 | getClassElm() { 26 | return this._$elm; 27 | } 28 | } 29 | 30 | // Init mbsc-button elements on page load 31 | autoInit('[mbsc-button]', Button); -------------------------------------------------------------------------------- /src/js/classes/checkbox.d.ts: -------------------------------------------------------------------------------- 1 | import { FormControl } from './form-control'; 2 | import { MbscFormOptions } from './forms'; 3 | 4 | export class CheckBox extends FormControl { 5 | constructor(element: any, settings: MbscFormOptions); 6 | } -------------------------------------------------------------------------------- /src/js/classes/checkbox.js: -------------------------------------------------------------------------------- 1 | import { FormControl } from './form-control'; 2 | import { autoInit } from '../core/core'; 3 | 4 | export class CheckBox extends FormControl { 5 | constructor(elm, settings) { 6 | super(elm, settings); 7 | 8 | this._$parent 9 | .prepend(this._$elm) 10 | .addClass('mbsc-checkbox mbsc-control-w') 11 | .find('.mbsc-checkbox-box').remove(); 12 | 13 | this._$elm.after(''); 14 | } 15 | } 16 | 17 | // Init mbsc-checkbox elements on page load 18 | autoInit('[mbsc-checkbox]', CheckBox); -------------------------------------------------------------------------------- /src/js/classes/form-control.d.ts: -------------------------------------------------------------------------------- 1 | import { MbscFormOptions } from './input'; 2 | 3 | export class FormControl { 4 | settings: MbscFormOptions; 5 | 6 | constructor(element: any, settings: MbscFormOptions); 7 | 8 | destroy(): void; 9 | option(settings: MbscFormOptions): void; 10 | handleEvent(event: any): void; 11 | } -------------------------------------------------------------------------------- /src/js/classes/forms.d.ts: -------------------------------------------------------------------------------- 1 | import { Base } from '../core/core'; 2 | import { MbscFormOptions } from './input'; 3 | import '../util/notifications'; 4 | 5 | export { MbscFormOptions }; 6 | 7 | export class Form extends Base { 8 | refresh(shallow?: boolean): void; 9 | } -------------------------------------------------------------------------------- /src/js/classes/input.d.ts: -------------------------------------------------------------------------------- 1 | import { MbscCoreOptions } from '../core/core'; 2 | import { FormControl } from './form-control'; 3 | 4 | export interface MbscFormOptions extends MbscCoreOptions { 5 | inputStyle?: string; 6 | labelStyle?: string; 7 | enhance?: boolean; 8 | context?: string | HTMLElement; 9 | } 10 | 11 | export class Input extends FormControl { 12 | constructor(element: any, settings: MbscFormOptions); 13 | refresh(): void; 14 | } -------------------------------------------------------------------------------- /src/js/classes/page.d.ts: -------------------------------------------------------------------------------- 1 | import { Base, MbscCoreOptions } from '../core/core'; 2 | 3 | export interface MbscPageOptions extends MbscCoreOptions { 4 | // Settings 5 | context?: string | HTMLElement; 6 | } 7 | 8 | export class Page extends Base { } 9 | -------------------------------------------------------------------------------- /src/js/classes/page.js: -------------------------------------------------------------------------------- 1 | import { $, Base, mobiscroll, classes, autoInit } from '../core/core'; 2 | 3 | // Page 4 | // --- 5 | 6 | export const Page = function (el, settings) { 7 | var cssClass = '', 8 | $elm = $(el), 9 | that = this, 10 | s = that.settings; 11 | 12 | // Call the parent constructor 13 | Base.call(this, el, settings, true); 14 | 15 | /** 16 | * Page initialization. 17 | */ 18 | that._init = function () { 19 | var ctx = s.context, 20 | $ctx = $(ctx), 21 | $topMenu = $ctx.find('.mbsc-ms-top .mbsc-ms'), 22 | $bottomMenu = $ctx.find('.mbsc-ms-bottom .mbsc-ms'), 23 | css = {}; 24 | 25 | if (ctx == 'body') { 26 | $('body,html').addClass('mbsc-page-ctx'); 27 | } else { 28 | $ctx.addClass('mbsc-page-ctx'); 29 | } 30 | 31 | if (cssClass) { 32 | $elm.removeClass(cssClass); 33 | } 34 | 35 | if ($topMenu.length) { 36 | css.paddingTop = $topMenu[0].offsetHeight; 37 | } 38 | 39 | if ($bottomMenu.length) { 40 | css.paddingBottom = $bottomMenu[0].offsetHeight; 41 | } 42 | 43 | cssClass = 'mbsc-page mbsc-' + s.theme + (s.baseTheme ? ' mbsc-' + s.baseTheme : '') + (s.rtl ? ' mbsc-rtl' : ' mbsc-ltr'); 44 | 45 | $elm.addClass(cssClass).removeClass('mbsc-cloak').css(css); 46 | }; 47 | 48 | /** 49 | * Destroys the mobiscroll instance. 50 | */ 51 | that._destroy = function () { 52 | $elm.removeClass(cssClass); 53 | }; 54 | 55 | // Constructor 56 | 57 | s = that.settings; 58 | 59 | that.init(); 60 | }; 61 | 62 | // Extend defaults 63 | Page.prototype = { 64 | _hasDef: true, 65 | _hasTheme: true, 66 | _hasLang: true, 67 | _class: 'page', 68 | _defaults: { 69 | context: 'body' 70 | } 71 | }; 72 | 73 | classes.Page = Page; 74 | 75 | mobiscroll.themes.page.mobiscroll = {}; 76 | 77 | // --- 78 | // Page end 79 | 80 | // Init mbsc-page elements on page load or when mbsc-enhance event is triggeres 81 | autoInit('[mbsc-page]', Page); 82 | -------------------------------------------------------------------------------- /src/js/classes/popup.d.ts: -------------------------------------------------------------------------------- 1 | import { Frame, MbscFrameOptions } from './frame'; 2 | 3 | export interface MbscPopupOptions extends MbscFrameOptions { 4 | okText?: string; 5 | onSet?(event: { valueText?: string }, inst: any): void; 6 | } 7 | export interface MbscWidgetOptions extends MbscPopupOptions { } 8 | 9 | export class Popup extends Frame { 10 | } 11 | 12 | export class Widget extends Popup { 13 | settings: MbscWidgetOptions; 14 | constructor(element: any, settings: MbscWidgetOptions); 15 | } -------------------------------------------------------------------------------- /src/js/classes/progress-base.d.ts: -------------------------------------------------------------------------------- 1 | import { Base, MbscCoreOptions } from '../core/core'; 2 | 3 | export class ProgressBase extends Base { } 4 | -------------------------------------------------------------------------------- /src/js/classes/progress-base.js: -------------------------------------------------------------------------------- 1 | import { $, Base } from '../core/core'; 2 | import { noop } from '../util/misc'; 3 | import { getCssClass } from './form-control'; 4 | 5 | export const ProgressBase = function (elm, settings, inherit) { 6 | var $elm, 7 | $parent, 8 | cssClass, 9 | s, 10 | that = this; 11 | 12 | // Call the parent constructor 13 | Base.call(this, elm, settings, true); 14 | 15 | that.__init = noop; 16 | 17 | that.__destroy = noop; 18 | 19 | that._init = function () { 20 | 21 | var wasInit; 22 | 23 | s = that.settings; 24 | 25 | $elm = $(elm); 26 | 27 | // Check if the element was already initialized 28 | wasInit = !!$parent; 29 | 30 | $parent = $elm.parent(); 31 | $parent = $parent.hasClass('mbsc-input-wrap') ? $parent.parent() : $parent; 32 | 33 | that._$parent = $parent; 34 | 35 | if (cssClass) { 36 | $parent.removeClass(cssClass); 37 | } 38 | 39 | cssClass = that._css + ' mbsc-progress-w mbsc-control-w ' + getCssClass(s); 40 | 41 | $parent.addClass(cssClass); 42 | 43 | $elm.addClass('mbsc-control'); 44 | 45 | that.__init(); 46 | 47 | if (!wasInit) { 48 | that._attachChange(); 49 | } 50 | 51 | // Show initial value 52 | that.refresh(); 53 | 54 | elm.mbscInst = that; 55 | }; 56 | 57 | that._destroy = function () { 58 | 59 | that.__destroy(); 60 | 61 | $parent.removeClass(cssClass); 62 | 63 | $elm.removeClass('mbsc-control'); 64 | 65 | delete elm.mbscInst; 66 | }; 67 | 68 | if (!inherit) { 69 | that.init(); 70 | } 71 | }; 72 | -------------------------------------------------------------------------------- /src/js/classes/progress.d.ts: -------------------------------------------------------------------------------- 1 | import { ProgressBase } from './progress-base'; 2 | import { MbscFormOptions } from './forms'; 3 | 4 | export class Progress extends ProgressBase { 5 | refresh(): void; 6 | getVal(): number; 7 | setVal(v: number, fill?: boolean, change?: boolean): void; 8 | } -------------------------------------------------------------------------------- /src/js/classes/radio.d.ts: -------------------------------------------------------------------------------- 1 | import { MbscFormOptions } from './forms'; 2 | import { FormControl } from './form-control'; 3 | 4 | export class Radio extends FormControl { 5 | constructor(element: any, settings: MbscFormOptions); 6 | } -------------------------------------------------------------------------------- /src/js/classes/radio.js: -------------------------------------------------------------------------------- 1 | import { FormControl } from './form-control'; 2 | import { autoInit } from '../core/core'; 3 | 4 | export class Radio extends FormControl { 5 | constructor(elm, settings) { 6 | super(elm, settings); 7 | 8 | this._$parent 9 | .addClass('mbsc-radio mbsc-control-w') 10 | .find('.mbsc-radio-box').remove(); 11 | 12 | this._$elm.after(''); 13 | } 14 | } 15 | 16 | // Init mbsc-radio elements on page load 17 | autoInit('[mbsc-radio]', Radio); -------------------------------------------------------------------------------- /src/js/classes/rating.d.ts: -------------------------------------------------------------------------------- 1 | import { Slider } from './slider'; 2 | import { MbscFormOptions } from './forms'; 3 | 4 | export class Rating extends Slider { } 5 | -------------------------------------------------------------------------------- /src/js/classes/scrollview-base.react.js: -------------------------------------------------------------------------------- 1 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 2 | 3 | import { PropTypes, CorePropTypes, MbscBase, deepCompare } from '../frameworks/react'; 4 | 5 | var reactFunc = PropTypes.func; 6 | 7 | export let MbscScrollViewBase = class MbscScrollViewBase extends MbscBase { 8 | constructor(props) { 9 | super(props); 10 | } 11 | 12 | shouldComponentUpdate(nextProps) { 13 | const nextOptions = this.getSettingsFromProps(nextProps); 14 | const thisOptions = this.getSettingsFromProps(this.props); 15 | this.optimizeUpdate = { 16 | updateOptions: !deepCompare(thisOptions, nextOptions), 17 | updateChildren: !deepCompare(this.props.children, nextProps.children) 18 | }; 19 | return true; 20 | } 21 | }; 22 | 23 | MbscScrollViewBase.propTypes = _extends({}, CorePropTypes, { 24 | itemWidth: PropTypes.number, 25 | layout: PropTypes.oneOf(['liquid', 'fixed']), 26 | mousewheel: PropTypes.bool, 27 | snap: PropTypes.bool, 28 | threshold: PropTypes.number, 29 | paging: PropTypes.bool, 30 | onItemTap: reactFunc, 31 | onMarkupReady: reactFunc, 32 | onAnimationStart: reactFunc, 33 | onAnimationEnd: reactFunc, 34 | onMove: reactFunc, 35 | onGestureStart: reactFunc, 36 | onGestureEnd: reactFunc 37 | }); 38 | -------------------------------------------------------------------------------- /src/js/classes/scrollview-base.react.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | PropTypes, 3 | CorePropTypes, 4 | MbscBase, 5 | deepCompare 6 | } from '../frameworks/react'; 7 | 8 | var reactFunc = PropTypes.func; 9 | 10 | export class MbscScrollViewBase extends MbscBase { 11 | constructor(props) { 12 | super(props); 13 | } 14 | 15 | shouldComponentUpdate(nextProps) { 16 | const nextOptions = this.getSettingsFromProps(nextProps); 17 | const thisOptions = this.getSettingsFromProps(this.props); 18 | this.optimizeUpdate = { 19 | updateOptions: !deepCompare(thisOptions, nextOptions), 20 | updateChildren: !deepCompare(this.props.children, nextProps.children) 21 | }; 22 | return true; 23 | } 24 | } 25 | 26 | MbscScrollViewBase.propTypes = { 27 | ...CorePropTypes, 28 | itemWidth: PropTypes.number, 29 | layout: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['liquid', 'fixed'])]), 30 | mousewheel: PropTypes.bool, 31 | snap: PropTypes.bool, 32 | threshold: PropTypes.number, 33 | paging: PropTypes.bool, 34 | onItemTap: reactFunc, 35 | onMarkupReady: reactFunc, 36 | onAnimationStart: reactFunc, 37 | onAnimationEnd: reactFunc, 38 | onMove: reactFunc, 39 | onGestureStart: reactFunc, 40 | onGestureEnd: reactFunc, 41 | }; -------------------------------------------------------------------------------- /src/js/classes/segmented.d.ts: -------------------------------------------------------------------------------- 1 | import { MbscFormOptions } from './forms'; 2 | import { FormControl } from './form-control'; 3 | 4 | export class SegmentedItem extends FormControl { 5 | constructor(element: any, settings: MbscFormOptions); 6 | } -------------------------------------------------------------------------------- /src/js/classes/segmented.js: -------------------------------------------------------------------------------- 1 | import { $, autoInit } from '../core/core'; 2 | import { FormControl } from './form-control'; 3 | 4 | export class SegmentedItem extends FormControl { 5 | constructor(elm, settings) { 6 | super(elm, settings); 7 | 8 | let $segmentCont; 9 | let $segment; 10 | 11 | const $elm = this._$elm; 12 | const $parent = this._$parent; 13 | 14 | if (!$parent.hasClass('mbsc-segmented-item-ready')) { 15 | $segmentCont = $('
'); 16 | 17 | $parent.after($segmentCont); 18 | $parent.parent().find('input[name="' + $elm.attr('name') + '"]').each(function () { 19 | const $input = $(this); 20 | 21 | $segment = $input.parent().addClass('mbsc-segmented-item mbsc-segmented-item-ready'); 22 | 23 | $('' + 24 | ($input.attr('data-icon') ? '' : '') + 25 | '').append($segment.contents()).appendTo($segment); 26 | 27 | $segment.prepend($input); 28 | 29 | $segmentCont.append($segment); 30 | }); 31 | } 32 | 33 | this._$rippleElm = $elm.next(); 34 | } 35 | 36 | getClassElm() { 37 | return this._$elm.closest('.mbsc-segmented'); 38 | } 39 | } 40 | 41 | 42 | // Init mbsc-segmented elements on page load 43 | autoInit('[mbsc-segmented]', SegmentedItem); 44 | -------------------------------------------------------------------------------- /src/js/classes/select.d.ts: -------------------------------------------------------------------------------- 1 | import { Input } from './input'; 2 | import { MbscFormOptions } from './forms'; 3 | 4 | export class Select extends Input { 5 | constructor(element: any, settings: MbscFormOptions); 6 | _setText(): void; 7 | } -------------------------------------------------------------------------------- /src/js/classes/select.js: -------------------------------------------------------------------------------- 1 | import { $, autoInit } from '../core/core'; 2 | import { Input } from './input'; 3 | 4 | export class Select extends Input { 5 | constructor(elm, settings) { 6 | super(elm, settings); 7 | 8 | const $elm = this._$elm; 9 | const $parent = this._$parent; 10 | const $existing = $parent.find('.mbsc-select-input'); 11 | const $input = $existing.length ? $existing : $(''); 12 | 13 | this._$input = $input; 14 | this._delm = $input[0]; 15 | this._setText = this._setText.bind(this); 16 | 17 | $parent.addClass('mbsc-select' + (this._$frame ? ' mbsc-select-inline' : '')); 18 | 19 | $elm.after($input); 20 | 21 | $input.after(''); 22 | 23 | // Update dummy input text on change 24 | $elm.on('change', this._setText); 25 | this._setText(); 26 | } 27 | 28 | destroy() { 29 | super.destroy(); 30 | this._$parent.find('.mbsc-select-ic').remove(); 31 | this._$elm.off('change', this._setText); 32 | } 33 | 34 | _setText() { 35 | const elm = this._elm; 36 | const $elm = $(elm); 37 | // Check if select and mobiscroll select was not initialized 38 | if ($elm.is('select') && !$elm.hasClass('mbsc-comp')) { 39 | this._$input.val(elm.selectedIndex != -1 ? elm.options[elm.selectedIndex].text : ''); 40 | } 41 | // Check floating label 42 | this.refresh(); 43 | } 44 | } 45 | 46 | // Init mbsc-select elements on page load 47 | autoInit('[mbsc-dropdown]', Select); -------------------------------------------------------------------------------- /src/js/classes/slider-base.d.ts: -------------------------------------------------------------------------------- 1 | import { ProgressBase } from './progress-base'; 2 | import { MbscFormOptions } from './forms'; 3 | 4 | export class SliderBase extends ProgressBase { 5 | refresh(): void; 6 | getVal(): any; 7 | setVal(val: any, fill?: boolean, change?: boolean): void; 8 | } -------------------------------------------------------------------------------- /src/js/classes/slider.d.ts: -------------------------------------------------------------------------------- 1 | import { SliderBase } from './slider-base'; 2 | import { MbscFormOptions } from './forms'; 3 | 4 | export class Slider extends SliderBase { 5 | getVal(): number | Array; 6 | setVal(v: number | Array, fill?: boolean, change?: boolean): void; 7 | } 8 | -------------------------------------------------------------------------------- /src/js/classes/stepper.d.ts: -------------------------------------------------------------------------------- 1 | import { Base, MbscCoreOptions } from '../core/core'; 2 | 3 | export class Stepper extends Base { 4 | getVal(): number; 5 | setVal(v: number, fill?: boolean, change?: boolean): void; 6 | } 7 | -------------------------------------------------------------------------------- /src/js/classes/switch.d.ts: -------------------------------------------------------------------------------- 1 | import { SliderBase } from './slider-base'; 2 | import { MbscFormOptions } from './forms'; 3 | 4 | export class Switch extends SliderBase { 5 | setVal(val: boolean, fill?: boolean, change?: boolean): void; 6 | getVal(): boolean; 7 | } 8 | -------------------------------------------------------------------------------- /src/js/classes/textarea.d.ts: -------------------------------------------------------------------------------- 1 | import { MbscFormOptions } from './forms'; 2 | import { Input } from './input'; 3 | 4 | export class TextArea extends Input { 5 | constructor(element: any, settings: MbscFormOptions); 6 | resize(): void; 7 | } -------------------------------------------------------------------------------- /src/js/classes/widget.d.ts: -------------------------------------------------------------------------------- 1 | import { Frame, MbscFrameOptions } from './frame'; 2 | 3 | export interface MbscWidgetOptions extends MbscFrameOptions { } 4 | 5 | export class Widget extends Frame { 6 | settings: MbscWidgetOptions; 7 | constructor(element: any, settings: MbscWidgetOptions); 8 | } 9 | -------------------------------------------------------------------------------- /src/js/core/core.d.ts: -------------------------------------------------------------------------------- 1 | import { mobiscroll, IMobiscroll } from './mobiscroll'; 2 | export { mobiscroll, IMobiscroll }; 3 | export const $: any; 4 | export const extend: any; 5 | 6 | export interface MbscCoreOptions { 7 | // Settings 8 | cssClass?: string; 9 | theme?: string; 10 | themeVariant?: 'auto' | 'dark' | 'light'; 11 | lang?: string; 12 | rtl?: boolean; 13 | responsive?: object; 14 | tap?: boolean; 15 | 16 | // Events 17 | onInit?(event: any, inst: any): void; 18 | onDestroy?(event: any, inst: any): void; 19 | } 20 | 21 | export class Base { 22 | settings: T; 23 | 24 | constructor(element: any, settings: T); 25 | 26 | init(settings?: T): void; 27 | destroy(): void; 28 | tap(el: any, handler: (ev?: any, inst?: any) => void, prevent?: boolean, tolerance?: number, time?: any): void; 29 | trigger(name: string, event?: any): any; 30 | option(options: string | T, value?: any): void; 31 | getInst(): Base; 32 | } 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/js/core/dom.d.ts: -------------------------------------------------------------------------------- 1 | import { mobiscroll } from './mobiscroll'; 2 | export { mobiscroll }; 3 | -------------------------------------------------------------------------------- /src/js/core/mobiscroll.d.ts: -------------------------------------------------------------------------------- 1 | export interface IMobiscroll { 2 | settings: any; 3 | $: any; 4 | i18n: any; 5 | fw: string; 6 | apiKey?: string; 7 | apiUrl?: string; 8 | uid?: string; 9 | util: IMobiscrollUtils; 10 | activeInstance?: any; 11 | platform: { 12 | name: string; 13 | majorVersion: number; 14 | minorVersion: number; 15 | }; 16 | customTheme: (name: string, baseTheme: string) => void; 17 | } 18 | 19 | export interface IMobiscrollUtils { } 20 | 21 | export const mobiscroll: IMobiscroll; 22 | -------------------------------------------------------------------------------- /src/js/core/mobiscroll.js: -------------------------------------------------------------------------------- 1 | var mobiscroll = mobiscroll || {}, 2 | util = {}, 3 | calendars = {}; 4 | 5 | export { mobiscroll, util, calendars }; 6 | -------------------------------------------------------------------------------- /src/js/forms.javascript.js: -------------------------------------------------------------------------------- 1 | import { createComponent, mobiscroll } from './frameworks/javascript'; 2 | import { Form } from './classes/forms'; 3 | import { Progress } from './classes/progress'; 4 | import { Slider } from './classes/slider'; 5 | import { Stepper } from './classes/stepper'; 6 | import { Switch } from './classes/switch'; 7 | import { Rating } from './classes/rating'; 8 | import './page.javascript'; 9 | 10 | createComponent('form', Form, false); 11 | createComponent('progress', Progress, false); 12 | createComponent('slider', Slider, false); 13 | createComponent('stepper', Stepper, false); 14 | createComponent('switch', Switch, false); 15 | createComponent('rating', Rating, false); 16 | 17 | export default mobiscroll; 18 | -------------------------------------------------------------------------------- /src/js/forms.jquery.js: -------------------------------------------------------------------------------- 1 | import { createComponent, mobiscroll } from './frameworks/jquery'; 2 | import { Form } from './classes/forms'; 3 | import { Progress } from './classes/progress'; 4 | import { Slider } from './classes/slider'; 5 | import { Stepper } from './classes/stepper'; 6 | import { Switch } from './classes/switch'; 7 | import { Rating } from './classes/rating'; 8 | import './page.jquery'; 9 | 10 | createComponent('form', Form, false); 11 | createComponent('progress', Progress, false); 12 | createComponent('slider', Slider, false); 13 | createComponent('stepper', Stepper, false); 14 | createComponent('switch', Switch, false); 15 | createComponent('rating', Rating, false); 16 | 17 | export default mobiscroll; 18 | -------------------------------------------------------------------------------- /src/js/frameworks/javascript.d.ts: -------------------------------------------------------------------------------- 1 | 2 | import { Form, MbscFormOptions } from '../classes/forms'; 3 | export { Form, MbscFormOptions }; 4 | import { Page, MbscPageOptions } from '../classes/page'; 5 | export { Page, MbscPageOptions }; 6 | import { Scroller, MbscScrollerOptions } from '../classes/scroller'; 7 | export { Scroller, MbscScrollerOptions }; 8 | import { Widget, MbscWidgetOptions } from '../classes/popup'; 9 | export { Widget, MbscWidgetOptions }; 10 | import { Popup, MbscPopupOptions } from '../classes/popup'; 11 | export { Popup, MbscPopupOptions }; 12 | 13 | import { IMobiscroll as _IMobiscroll } from '../core/core'; 14 | 15 | export interface IMobiscroll extends _IMobiscroll { 16 | form(selector: string | HTMLElement, options?: MbscFormOptions): Form; 17 | page(selector: string | HTMLElement, options?: MbscPageOptions): Page; 18 | scroller(selector: string | HTMLElement, options?: MbscScrollerOptions): Scroller; 19 | popup(selector: string | HTMLElement, options?: MbscPopupOptions): Popup; 20 | widget(selector: string | HTMLElement, options?: MbscWidgetOptions): Widget; 21 | } 22 | 23 | export const mobiscroll: IMobiscroll; 24 | export as namespace mobiscroll; 25 | export default mobiscroll; -------------------------------------------------------------------------------- /src/js/frameworks/javascript.js: -------------------------------------------------------------------------------- 1 | import { $, mobiscroll } from '../core/dom'; 2 | 3 | function createComponent(name, Component, preset) { 4 | mobiscroll[name] = function (selector, s) { 5 | var inst, 6 | instIds, 7 | ret = {}, 8 | options = s || {}; 9 | 10 | if (preset !== false) { 11 | options.preset = name; 12 | } 13 | 14 | $(selector).each(function () { 15 | inst = new Component(this, options); 16 | ret[this.id] = inst; 17 | }); 18 | 19 | instIds = Object.keys(ret); 20 | 21 | return instIds.length == 1 ? ret[instIds[0]] : ret; 22 | }; 23 | } 24 | 25 | export { createComponent, mobiscroll }; 26 | 27 | export default mobiscroll; 28 | -------------------------------------------------------------------------------- /src/js/frameworks/jquery.d.ts: -------------------------------------------------------------------------------- 1 | 2 | import { Form, MbscFormOptions } from '../classes/forms'; 3 | export { Form, MbscFormOptions }; 4 | import { Page, MbscPageOptions } from '../classes/page'; 5 | export { Page, MbscPageOptions }; 6 | import { Scroller, MbscScrollerOptions } from '../classes/scroller'; 7 | export { Scroller, MbscScrollerOptions }; 8 | import { Widget, MbscWidgetOptions } from '../classes/popup'; 9 | export { Widget, MbscWidgetOptions }; 10 | import { Popup, MbscPopupOptions } from '../classes/popup'; 11 | export { Popup, MbscPopupOptions }; 12 | 13 | export { IMobiscroll } from '../core/core'; 14 | export { mobiscroll as default } from '../core/core'; 15 | 16 | declare global { 17 | interface MobiscrollBundle { 18 | [index: number]: JQuery; 19 | form(options?: MbscFormOptions): JQuery; 20 | page(options?: MbscPageOptions): JQuery; 21 | scroller(options?: MbscScrollerOptions): JQuery; 22 | popup(options?: MbscPopupOptions): JQuery; 23 | widget(options?: MbscWidgetOptions): JQuery; 24 | } 25 | 26 | interface JQuery { 27 | mobiscroll(): MobiscrollBundle; 28 | mobiscroll(option: string): any; 29 | } 30 | } -------------------------------------------------------------------------------- /src/js/frameworks/jquery.js: -------------------------------------------------------------------------------- 1 | import jQuery from 'jquery'; 2 | import { mobiscroll } from '../core/mobiscroll'; 3 | 4 | const extend = jQuery.extend; 5 | const components = {}; 6 | 7 | function init(that, options, args) { 8 | var ret = that; 9 | 10 | // Init 11 | if (typeof options === 'object') { 12 | return that.each(function () { 13 | new options.component(this, options); 14 | }); 15 | } 16 | 17 | // Method call 18 | if (typeof options === 'string') { 19 | that.each(function () { 20 | var r, 21 | inst = mobiscroll.instances[this.id]; 22 | 23 | if (inst && inst[options]) { 24 | r = inst[options].apply(this, Array.prototype.slice.call(args, 1)); 25 | if (r !== undefined) { 26 | ret = r; 27 | return false; 28 | } 29 | } 30 | }); 31 | } 32 | 33 | return ret; 34 | } 35 | 36 | function createComponent(name, Component, preset) { 37 | components[name] = function (s) { 38 | return init(this, extend(s, { 39 | component: Component, 40 | preset: preset === false ? undefined : name 41 | }), arguments); 42 | }; 43 | } 44 | 45 | mobiscroll.$ = jQuery; 46 | 47 | jQuery.mobiscroll = mobiscroll; 48 | 49 | jQuery.fn.mobiscroll = function (method) { 50 | extend(this, components); 51 | return init(this, method, arguments); 52 | }; 53 | 54 | export { createComponent, mobiscroll }; 55 | 56 | export default mobiscroll; 57 | -------------------------------------------------------------------------------- /src/js/i18n/ca.js: -------------------------------------------------------------------------------- 1 | // Català 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n.ca = { 8 | // Core 9 | setText: 'Acceptar', 10 | cancelText: 'Cancel·lar', 11 | clearText: 'Esborrar', 12 | selectedText: '{count} seleccionat', 13 | selectedPluralText: '{count} seleccionats', 14 | // Datetime component 15 | dateFormat: 'dd/mm/yy', 16 | dayNames: ['Diumenge', 'Dilluns', 'Dimarts', 'Dimecres', 'Dijous', 'Divendres', 'Dissabte'], 17 | dayNamesShort: ['Dg', 'Dl', 'Dt', 'Dc', 'Dj', 'Dv', 'Ds'], 18 | dayNamesMin: ['Dg', 'Dl', 'Dt', 'Dc', 'Dj', 'Dv', 'Ds'], 19 | dayText: 'Dia', 20 | hourText: 'Hores', 21 | minuteText: 'Minuts', 22 | monthNames: ['Gener', 'Febrer', 'Març', 'Abril', 'Maig', 'Juny', 'Juliol', 'Agost', 'Setembre', 'Octubre', 'Novembre', 'Desembre'], 23 | monthNamesShort: ['Gen', 'Feb', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Oct', 'Nov', 'Des'], 24 | monthText: 'Mes', 25 | secText: 'Segons', 26 | timeFormat: 'HH:ii', 27 | yearText: 'Any', 28 | nowText: 'Ara', 29 | pmText: 'pm', 30 | amText: 'am', 31 | todayText: 'Avui', 32 | // Calendar component 33 | firstDay: 1, 34 | dateText: 'Data', 35 | timeText: 'Temps', 36 | closeText: 'Tancar', 37 | allDayText: 'Tot el dia', 38 | noEventsText: 'Cap esdeveniment', 39 | eventText: 'Esdeveniments', 40 | eventsText: 'Esdeveniments', 41 | moreEventsText: '{count} més', 42 | // Daterange component 43 | fromText: 'Iniciar', 44 | toText: 'Final', 45 | // Measurement components 46 | wholeText: 'Sencer', 47 | fractionText: 'Fracció', 48 | unitText: 'Unitat', 49 | // Time / Timespan component 50 | labels: ['Anys', 'Mesos', 'Dies', 'Hores', 'Minuts', 'Segons', ''], 51 | labelsShort: ['Anys', 'Mesos', 'Dies', 'Hrs', 'Mins', 'Secs', ''], 52 | // Timer component 53 | startText: 'Iniciar', 54 | stopText: 'Aturar', 55 | resetText: 'Reiniciar', 56 | lapText: 'Volta', 57 | hideText: 'Amagar', 58 | // Listview 59 | backText: 'Enrere', 60 | undoText: 'Desfés', 61 | // Form 62 | offText: 'No', 63 | onText: 'Si' 64 | }; 65 | -------------------------------------------------------------------------------- /src/js/i18n/cs.js: -------------------------------------------------------------------------------- 1 | // Cestina 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n.cs = { 8 | // Core 9 | setText: 'Zadej', 10 | cancelText: 'Storno', 11 | clearText: 'Vymazat', 12 | selectedText: 'Označený: {count}', 13 | // Datetime component 14 | dateFormat: 'dd.mm.yy', 15 | dayNames: ['Neděle', 'Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek', 'Sobota'], 16 | dayNamesShort: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'], 17 | dayNamesMin: ['N', 'P', 'Ú', 'S', 'Č', 'P', 'S'], 18 | dayText: 'Den', 19 | hourText: 'Hodiny', 20 | minuteText: 'Minuty', 21 | monthNames: ['Leden', 'Únor', 'Březen', 'Duben', 'Květen', 'Červen', 'Červenec', 'Srpen', 'Září', 'Říjen', 'Listopad', 'Prosinec'], 22 | monthNamesShort: ['Led', 'Úno', 'Bře', 'Dub', 'Kvě', 'Čer', 'Čvc', 'Spr', 'Zář', 'Říj', 'Lis', 'Pro'], 23 | monthText: 'Měsíc', 24 | secText: 'Sekundy', 25 | timeFormat: 'HH:ii', 26 | yearText: 'Rok', 27 | nowText: 'Teď', 28 | amText: 'am', 29 | pmText: 'pm', 30 | todayText: 'Dnes', 31 | // Calendar component 32 | firstDay: 1, 33 | dateText: 'Datum', 34 | timeText: 'Čas', 35 | closeText: 'Zavřít', 36 | allDayText: 'Celý den', 37 | noEventsText: 'Žádné události', 38 | eventText: 'Událostí', 39 | eventsText: 'Události', 40 | moreEventsText: '{count} další', 41 | // Daterange component 42 | fromText: 'Začátek', 43 | toText: 'Konec', 44 | // Measurement components 45 | wholeText: 'Celý', 46 | fractionText: 'Část', 47 | unitText: 'Jednotka', 48 | // Time / Timespan component 49 | labels: ['Roky', 'Měsíce', 'Dny', 'Hodiny', 'Minuty', 'Sekundy', ''], 50 | labelsShort: ['Rok', 'Měs', 'Dny', 'Hod', 'Min', 'Sec', ''], 51 | // Timer component 52 | startText: 'Start', 53 | stopText: 'Stop', 54 | resetText: 'Resetovat', 55 | lapText: 'Etapa', 56 | hideText: 'Schovat', 57 | // Listview 58 | backText: 'Zpět', 59 | undoText: 'Zpět', 60 | // Form 61 | offText: 'O', 62 | onText: 'I', 63 | // Numpad 64 | decimalSeparator: ',', 65 | thousandsSeparator: ' ' 66 | }; 67 | -------------------------------------------------------------------------------- /src/js/i18n/da.js: -------------------------------------------------------------------------------- 1 | // Dansk 2 | /* 3 | * Translation by: Mikkel Bonde, Apacta A/S 4 | */ 5 | 6 | import { mobiscroll } from '../core/core'; 7 | 8 | export default mobiscroll; 9 | 10 | mobiscroll.i18n.da = { 11 | // Core 12 | setText: 'Sæt', 13 | cancelText: 'Annuller', 14 | clearText: 'Ryd', 15 | selectedText: '{count} valgt', 16 | selectedPluralText: '{count} valgt', 17 | // Datetime component 18 | dateFormat: 'dd/mm/yy', 19 | dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'], 20 | dayNamesShort: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'], 21 | dayNamesMin: ['S', 'M', 'T', 'O', 'T', 'F', 'L'], 22 | dayText: 'Dag', 23 | hourText: 'Timer', 24 | minuteText: 'Minutter', 25 | monthNames: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'], 26 | monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'], 27 | monthText: 'Måned', 28 | secText: 'Sekunder', 29 | amText: 'am', 30 | pmText: 'pm', 31 | timeFormat: 'HH.ii', 32 | yearText: 'År', 33 | nowText: 'Nu', 34 | todayText: 'I dag', 35 | // Calendar component 36 | firstDay: 1, 37 | dateText: 'Dato', 38 | timeText: 'Tid', 39 | closeText: 'Luk', 40 | allDayText: 'Hele dagen', 41 | noEventsText: 'Ingen begivenheder', 42 | eventText: 'Begivenheder', 43 | eventsText: 'Begivenheder', 44 | moreEventsText: '{count} mere', 45 | // Daterange component 46 | fromText: 'Start', 47 | toText: 'Slut', 48 | // Measurement components 49 | wholeText: 'Hele', 50 | fractionText: 'Dele', 51 | unitText: 'Enhed', 52 | // Time / Timespan component 53 | labels: ['År', 'Måneder', 'Dage', 'Timer', 'Minutter', 'Sekunder', ''], 54 | labelsShort: ['År', 'Mdr', 'Dg', 'Timer', 'Min', 'Sek', ''], 55 | // Timer component 56 | startText: 'Start', 57 | stopText: 'Stop', 58 | resetText: 'Nulstil', 59 | lapText: 'Omgang', 60 | hideText: 'Skjul', 61 | // Forms 62 | offText: 'Fra', 63 | onText: 'Til', 64 | // Listview 65 | backText: 'Tilbage', 66 | undoText: 'Fortryd' 67 | }; 68 | -------------------------------------------------------------------------------- /src/js/i18n/en-GB.js: -------------------------------------------------------------------------------- 1 | // English (UK) 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n['en-GB'] = mobiscroll.i18n['en-UK'] = { 8 | dateFormat: 'dd/mm/yy', 9 | timeFormat: 'HH:ii' 10 | }; 11 | -------------------------------------------------------------------------------- /src/js/i18n/ja.js: -------------------------------------------------------------------------------- 1 | // 日本語 - Japanese 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n.ja = { 8 | // Core 9 | setText: 'セット', 10 | cancelText: 'キャンセル', 11 | clearText: 'クリア', 12 | selectedText: '{count} 選択', 13 | // Datetime component 14 | dateFormat: 'yy年mm月dd日', 15 | dayNames: ['日', '月', '火', '水', '木', '金', '土'], 16 | dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'], 17 | dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'], 18 | dayText: '日', 19 | hourText: '時', 20 | minuteText: '分', 21 | monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 22 | monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 23 | monthText: '月', 24 | secText: '秒', 25 | timeFormat: 'HH:ii', 26 | yearText: '年', 27 | nowText: '今', 28 | pmText: '午後', 29 | amText: '午前', 30 | yearSuffix: '年', 31 | monthSuffix: '月', 32 | daySuffix: '日', 33 | todayText: '今日', 34 | // Calendar component 35 | dateText: '日付', 36 | timeText: '時間', 37 | closeText: 'クローズ', 38 | allDayText: '終日', 39 | noEventsText: 'イベントはありません', 40 | eventText: 'イベント', 41 | eventsText: 'イベント', 42 | moreEventsText: '他 {count} 件', 43 | // Daterange component 44 | fromText: '開始', 45 | toText: '終わり', 46 | // Measurement components 47 | wholeText: '全数', 48 | fractionText: '分数', 49 | unitText: '単位', 50 | // Time / Timespan component 51 | labels: ['年間', '月間', '日間', '時間', '分', '秒', ''], 52 | labelsShort: ['年間', '月間', '日間', '時間', '分', '秒', ''], 53 | // Timer component 54 | startText: '開始', 55 | stopText: '停止', 56 | resetText: 'リセット', 57 | lapText: 'ラップ', 58 | hideText: '隠す', 59 | // Listview 60 | backText: 'バック', 61 | undoText: 'アンドゥ' 62 | }; 63 | -------------------------------------------------------------------------------- /src/js/i18n/ko.js: -------------------------------------------------------------------------------- 1 | // Korean 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n.ko = { 8 | // Core 9 | setText: '설정', 10 | cancelText: '취소', 11 | clearText: '삭제', 12 | selectedText: '{count} 선택된', 13 | // Datetime component 14 | dateFormat: 'yy년mm월dd일', 15 | dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'], 16 | dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'], 17 | dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], 18 | dayText: '일', 19 | delimiter: '-', 20 | hourText: '시간', 21 | minuteText: '분', 22 | monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], 23 | monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], 24 | monthText: '달', 25 | secText: '초', 26 | timeFormat: 'H:ii', 27 | yearText: '년', 28 | nowText: '지금', 29 | pmText: '오후', 30 | amText: '오전', 31 | yearSuffix: '년', 32 | monthSuffix: '월', 33 | daySuffix: '일', 34 | // Calendar component 35 | firstDay: 0, 36 | dateText: '날짜', 37 | timeText: '시간', 38 | todayText: '오늘', 39 | prevMonthText: '이전 달', 40 | nextMonthText: '다음 달', 41 | prevYearText: '이전 년', 42 | nextYearText: '다음 년', 43 | closeText: '닫기', 44 | eventText: '이벤트', 45 | eventsText: '이벤트', 46 | allDayText: '종일', 47 | noEventsText: '이벤트 없음', 48 | moreEventsText: '{count}개 더보기', 49 | // Daterange component 50 | fromText: '시작', 51 | toText: '종료', 52 | // Measurement components 53 | wholeText: '정수', 54 | fractionText: '분수', 55 | unitText: '단위', 56 | // Time / Timespan component 57 | labels: ['년', '달', '일', '시간', '분', '초', ''], 58 | labelsShort: ['년', '달', '일', '시간', '분', '초', ''], 59 | // Timer component 60 | startText: '시작', 61 | stopText: '중지 ', 62 | resetText: '초기화', 63 | lapText: '기록', 64 | hideText: '숨는 장소', 65 | // Listview 66 | backText: '뒤로', 67 | undoText: '실행취소', 68 | // Form 69 | offText: '끔', 70 | onText: '켬', 71 | // Numpad 72 | decimalSeparator: ',', 73 | thousandsSeparator: ' ' 74 | }; 75 | -------------------------------------------------------------------------------- /src/js/i18n/nl.js: -------------------------------------------------------------------------------- 1 | // Nederlands 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n.nl = { 8 | // Core 9 | setText: 'Instellen', 10 | cancelText: 'Annuleren', 11 | clearText: 'Leegmaken', 12 | selectedText: '{count} gekozen', 13 | // Datetime component 14 | dateFormat: 'dd-mm-yy', 15 | dayNames: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'], 16 | dayNamesShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'], 17 | dayNamesMin: ['z', 'm', 'd', 'w', 'd', 'v', 'z'], 18 | dayText: 'Dag', 19 | hourText: 'Uur', 20 | minuteText: 'Minuten', 21 | monthNames: ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'], 22 | monthNamesShort: ['jan', 'feb', 'mrt', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'], 23 | monthText: 'Maand', 24 | secText: 'Seconden', 25 | timeFormat: 'HH:ii', 26 | yearText: 'Jaar', 27 | nowText: 'Nu', 28 | pmText: 'pm', 29 | amText: 'am', 30 | todayText: 'Vandaag', 31 | // Calendar component 32 | firstDay: 1, 33 | dateText: 'Datum', 34 | timeText: 'Tijd', 35 | closeText: 'Sluiten', 36 | allDayText: 'Hele dag', 37 | noEventsText: 'Geen activiteiten', 38 | eventText: 'Activiteit', 39 | eventsText: 'Activiteiten', 40 | moreEventsText: 'nog {count}', 41 | // Daterange component 42 | fromText: 'Start', 43 | toText: 'Einde', 44 | // Measurement components 45 | wholeText: 'geheel', 46 | fractionText: 'fractie', 47 | unitText: 'eenheid', 48 | // Time / Timespan component 49 | labels: ['Jaren', 'Maanden', 'Dagen', 'Uren', 'Minuten', 'Seconden', ''], 50 | labelsShort: ['j', 'm', 'd', 'u', 'min', 'sec', ''], 51 | // Timer component 52 | startText: 'Start', 53 | stopText: 'Stop', 54 | resetText: 'Reset', 55 | lapText: 'Ronde', 56 | hideText: 'Verbergen', 57 | // Listview 58 | backText: 'Terug', 59 | undoText: 'Onged. maken', 60 | // Form 61 | offText: 'Uit', 62 | onText: 'Aan', 63 | // Numpad 64 | decimalSeparator: ',', 65 | thousandsSeparator: ' ' 66 | }; 67 | -------------------------------------------------------------------------------- /src/js/i18n/no.js: -------------------------------------------------------------------------------- 1 | // Norsk 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n.no = { 8 | // Core 9 | setText: 'OK', 10 | cancelText: 'Avbryt', 11 | clearText: 'Tømme', 12 | selectedText: '{count} valgt', 13 | // Datetime component 14 | dateFormat: 'dd.mm.yy', 15 | dayNames: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'], 16 | dayNamesShort: ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'], 17 | dayNamesMin: ['S', 'M', 'T', 'O', 'T', 'F', 'L'], 18 | dayText: 'Dag', 19 | delimiter: '.', 20 | hourText: 'Time', 21 | minuteText: 'Minutt', 22 | monthNames: ['Januar', 'Februar', 'Mars', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Desember'], 23 | monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'], 24 | monthText: 'Måned', 25 | secText: 'Sekund', 26 | timeFormat: 'HH:ii', 27 | yearText: 'År', 28 | nowText: 'Nå', 29 | pmText: 'pm', 30 | amText: 'am', 31 | todayText: 'I dag', 32 | // Calendar component 33 | firstDay: 1, 34 | dateText: 'Dato', 35 | timeText: 'Tid', 36 | closeText: 'Lukk', 37 | allDayText: 'Hele dagen', 38 | noEventsText: 'Ingen hendelser', 39 | eventText: 'Hendelse', 40 | eventsText: 'Hendelser', 41 | moreEventsText: '{count} mere', 42 | // Daterange component 43 | fromText: 'Start', 44 | toText: 'End', 45 | // Measurement components 46 | wholeText: 'Hele', 47 | fractionText: 'Fraksjon', 48 | unitText: 'Enhet', 49 | // Time / Timespan component 50 | labels: ['År', 'Måneder', 'Dager', 'Timer', 'Minutter', 'Sekunder', ''], 51 | labelsShort: ['År', 'Mån', 'Dag', 'Time', 'Min', 'Sek', ''], 52 | // Timer component 53 | startText: 'Start', 54 | stopText: 'Stopp', 55 | resetText: 'Tilbakestille', 56 | lapText: 'Runde', 57 | hideText: 'Skjul', 58 | // Listview 59 | backText: 'Tilbake', 60 | undoText: 'Angre', 61 | // Form 62 | offText: 'Av', 63 | onText: 'På', 64 | // Numpad 65 | decimalSeparator: ',', 66 | thousandsSeparator: ' ' 67 | }; 68 | -------------------------------------------------------------------------------- /src/js/i18n/pl.js: -------------------------------------------------------------------------------- 1 | // Polski 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n.pl = { 8 | // Core 9 | setText: 'Zestaw', 10 | cancelText: 'Anuluj', 11 | clearText: 'Oczyścić', 12 | selectedText: 'Wybór: {count}', 13 | // Datetime component 14 | dateFormat: 'yy-mm-dd', 15 | dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'], 16 | dayNamesShort: ['Niedz.', 'Pon.', 'Wt.', 'Śr.', 'Czw.', 'Pt.', 'Sob.'], 17 | dayNamesMin: ['N', 'P', 'W', 'Ś', 'C', 'P', 'S'], 18 | dayText: 'Dzień', 19 | hourText: 'Godziny', 20 | minuteText: 'Minuty', 21 | monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'], 22 | monthNamesShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'], 23 | monthText: 'Miesiąc', 24 | secText: 'Sekundy', 25 | timeFormat: 'HH:ii', 26 | yearText: 'Rok', 27 | nowText: 'Teraz', 28 | amText: 'am', 29 | pmText: 'pm', 30 | todayText: 'Dzisiaj', 31 | // Calendar component 32 | firstDay: 1, 33 | dateText: 'Data', 34 | timeText: 'Czas', 35 | closeText: 'Zakończenie', 36 | allDayText: 'Cały dzień', 37 | noEventsText: 'Brak wydarzeń', 38 | eventText: 'Wydarzeń', 39 | eventsText: 'Wydarzenia', 40 | moreEventsText: 'Jeszcze {count}', 41 | // Daterange component 42 | fromText: 'Rozpoczęcie', 43 | toText: 'Koniec', 44 | // Measurement components 45 | wholeText: 'Cały', 46 | fractionText: 'Ułamek', 47 | unitText: 'Jednostka', 48 | // Time / Timespan component 49 | labels: ['Lata', 'Miesiąc', 'Dni', 'Godziny', 'Minuty', 'Sekundy', ''], 50 | labelsShort: ['R', 'M', 'Dz', 'Godz', 'Min', 'Sek', ''], 51 | // Timer component 52 | startText: 'Rozpoczęcie', 53 | stopText: 'Zatrzymać', 54 | resetText: 'Zresetować', 55 | lapText: 'Zakładka', 56 | hideText: 'Ukryć', 57 | // Listview 58 | backText: 'Wróć', 59 | undoText: 'Cofnij', 60 | // Form 61 | offText: 'Wył', 62 | onText: 'Wł', 63 | // Numpad 64 | decimalSeparator: ',', 65 | thousandsSeparator: ' ' 66 | }; 67 | -------------------------------------------------------------------------------- /src/js/i18n/ru-UA.js: -------------------------------------------------------------------------------- 1 | // Русский (UA) 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n['ru-UA'] = { 8 | // Core 9 | setText: 'Установить', 10 | cancelText: 'Отменить', 11 | clearText: 'Очиститьr', 12 | selectedText: '{count} Вібрать', 13 | // Datetime component 14 | dateFormat: 'dd.mm.yy', 15 | dayNames: ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'], 16 | dayNamesShort: ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'], 17 | dayNamesMin: ['в', 'п', 'в', 'с', 'ч', 'п', 'с'], 18 | dayText: 'День', 19 | delimiter: '.', 20 | hourText: 'Часы', 21 | minuteText: 'Минуты', 22 | monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'], 23 | monthNamesShort: ['Янв.', 'Февр.', 'Март', 'Апр.', 'Май', 'Июнь', 'Июль', 'Авг.', 'Сент.', 'Окт.', 'Нояб.', 'Дек.'], 24 | monthText: 'Месяцы', 25 | secText: 'Сикунды', 26 | timeFormat: 'HH:ii', 27 | yearText: 'Год', 28 | nowText: 'Сейчас', 29 | amText: 'am', 30 | pmText: 'pm', 31 | todayText: 'Cегодня', 32 | // Calendar component 33 | firstDay: 1, 34 | dateText: 'Дата', 35 | timeText: 'Время', 36 | closeText: 'Закрыть', 37 | allDayText: 'Весь день', 38 | noEventsText: 'Нет событий', 39 | eventText: 'Мероприятия', 40 | eventsText: 'Мероприятия', 41 | moreEventsText: 'Ещё {count}', 42 | // Daterange component 43 | fromText: 'Начало', 44 | toText: 'Конец', 45 | // Measurement components 46 | wholeText: 'Весь', 47 | fractionText: 'Часть', 48 | unitText: 'Единица', 49 | // Time / Timespan component 50 | labels: ['Годы', ' Месяцы ', ' Дни ', ' Часы ', ' Минуты ', ' Секунды', ''], 51 | labelsShort: ['Год', 'Мес.', 'Дн.', 'Ч.', 'Мин.', 'Сек.', ''], 52 | // Timer component 53 | startText: 'Старт', 54 | stopText: 'Стоп', 55 | resetText: ' Сброс ', 56 | lapText: ' Этап ', 57 | hideText: ' Скрыть ', 58 | // Listview 59 | backText: 'назад', 60 | undoText: 'ОтменитЬ', 61 | // Form 62 | offText: 'O', 63 | onText: 'I', 64 | // Numpad 65 | decimalSeparator: ',', 66 | thousandsSeparator: ' ' 67 | }; 68 | -------------------------------------------------------------------------------- /src/js/i18n/ru.js: -------------------------------------------------------------------------------- 1 | // Русский 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n['ru-RU'] = mobiscroll.i18n.ru = { 8 | // Core 9 | setText: 'Установить', 10 | cancelText: 'Отмена', 11 | clearText: 'Очистить', 12 | selectedText: '{count} Выбрать', 13 | // Datetime component 14 | dateFormat: 'dd.mm.yy', 15 | dayNames: ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'], 16 | dayNamesShort: ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'], 17 | dayNamesMin: ['в', 'п', 'в', 'с', 'ч', 'п', 'с'], 18 | dayText: 'День', 19 | delimiter: '.', 20 | hourText: 'Час', 21 | minuteText: 'Минут', 22 | monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'], 23 | monthNamesShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'], 24 | monthText: 'Месяц', 25 | secText: 'Секунд', 26 | timeFormat: 'HH:ii', 27 | yearText: 'Год', 28 | nowText: 'Сейчас', 29 | amText: 'am', 30 | pmText: 'pm', 31 | todayText: 'Cегодня', 32 | // Calendar component 33 | firstDay: 1, 34 | dateText: 'Дата', 35 | timeText: 'Время', 36 | closeText: 'Закрыть', 37 | allDayText: 'Весь день', 38 | noEventsText: 'Нет событий', 39 | eventText: 'Мероприятия', 40 | eventsText: 'Мероприятия', 41 | moreEventsText: 'Ещё {count}', 42 | // Daterange component 43 | fromText: 'Начало', 44 | toText: 'Конец', 45 | // Measurement components 46 | wholeText: 'Целое', 47 | fractionText: 'Дробное', 48 | unitText: 'Единица', 49 | // Time / Timespan component 50 | labels: ['Лет', 'Месяцев', 'Дней', 'Часов', 'Минут', 'Секунд', ''], 51 | labelsShort: ['Лет', 'Мес', 'Дн', 'Час', 'Мин', 'Сек', ''], 52 | // Timer component 53 | startText: 'Старт', 54 | stopText: 'Стоп', 55 | resetText: 'Сбросить', 56 | lapText: 'Круг', 57 | hideText: 'Скрыть', 58 | // Listview 59 | backText: 'назад', 60 | undoText: 'ОтменитЬ', 61 | // Form 62 | offText: 'O', 63 | onText: 'I', 64 | // Numpad 65 | decimalSeparator: ',', 66 | thousandsSeparator: ' ' 67 | }; 68 | -------------------------------------------------------------------------------- /src/js/i18n/sk.js: -------------------------------------------------------------------------------- 1 | // Slovencina 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n.sk = { 8 | // Core 9 | setText: 'Zadaj', 10 | cancelText: 'Zrušiť', 11 | clearText: 'Vymazať', 12 | selectedText: 'Označený: {count}', 13 | // Datetime component 14 | dateFormat: 'd.m.yy', 15 | dayNames: ['Nedeľa', 'Pondelok', 'Utorok', 'Streda', 'Štvrtok', 'Piatok', 'Sobota'], 16 | dayNamesShort: ['Ne', 'Po', 'Ut', 'St', 'Št', 'Pi', 'So'], 17 | dayNamesMin: ['N', 'P', 'U', 'S', 'Š', 'P', 'S'], 18 | dayText: 'Ďeň', 19 | hourText: 'Hodiny', 20 | minuteText: 'Minúty', 21 | monthNames: ['Január', 'Február', 'Marec', 'Apríl', 'Máj', 'Jún', 'Júl', 'August', 'September', 'Október', 'November', 'December'], 22 | monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Máj', 'Jún', 'Júl', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'], 23 | monthText: 'Mesiac', 24 | secText: 'Sekundy', 25 | timeFormat: 'H:ii', 26 | yearText: 'Rok', 27 | nowText: 'Teraz', 28 | amText: 'am', 29 | pmText: 'pm', 30 | todayText: 'Dnes', 31 | // Calendar component 32 | firstDay: 1, 33 | dateText: 'Datum', 34 | timeText: 'Čas', 35 | closeText: 'Zavrieť', 36 | allDayText: 'Celý deň', 37 | noEventsText: 'Žiadne udalosti', 38 | eventText: 'Udalostí', 39 | eventsText: 'Udalosti', 40 | moreEventsText: '{count} ďalšia', 41 | moreEventsPluralText: '{count} ďalšie', 42 | // Daterange component 43 | fromText: 'Začiatok', 44 | toText: 'Koniec', 45 | // Measurement components 46 | wholeText: 'Celý', 47 | fractionText: 'Časť', 48 | unitText: 'Jednotka', 49 | // Time / Timespan component 50 | labels: ['Roky', 'Mesiace', 'Dni', 'Hodiny', 'Minúty', 'Sekundy', ''], 51 | labelsShort: ['Rok', 'Mes', 'Dni', 'Hod', 'Min', 'Sec', ''], 52 | // Timer component 53 | startText: 'Start', 54 | stopText: 'Stop', 55 | resetText: 'Resetovať', 56 | lapText: 'Etapa', 57 | hideText: 'Schovať', 58 | // Listview 59 | backText: 'Späť', 60 | undoText: 'Späť', 61 | // Form 62 | offText: 'O', 63 | onText: 'I', 64 | // Numpad 65 | decimalSeparator: ',', 66 | thousandsSeparator: ' ' 67 | }; 68 | -------------------------------------------------------------------------------- /src/js/i18n/sv.js: -------------------------------------------------------------------------------- 1 | // Svenska 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n.sv = { 8 | // Core 9 | setText: 'OK', 10 | cancelText: 'Avbryt', 11 | clearText: 'Klara', 12 | selectedText: '{count} vald', 13 | // Datetime component 14 | dateFormat: 'yy-mm-dd', 15 | dayNames: ['Söndag', 'Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag'], 16 | dayNamesShort: ['Sö', 'Må', 'Ti', 'On', 'To', 'Fr', 'Lö'], 17 | dayNamesMin: ['S', 'M', 'T', 'O', 'T', 'F', 'L'], 18 | dayText: 'Dag', 19 | hourText: 'Timme', 20 | minuteText: 'Minut', 21 | monthNames: ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni', 'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'], 22 | monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'], 23 | monthText: 'Månad', 24 | secText: 'Sekund', 25 | timeFormat: 'HH:ii', 26 | yearText: 'År', 27 | nowText: 'Nu', 28 | pmText: 'pm', 29 | amText: 'am', 30 | todayText: 'I dag', 31 | // Calendar component 32 | firstDay: 1, 33 | dateText: 'Datum', 34 | timeText: 'Tid', 35 | closeText: 'Stäng', 36 | allDayText: 'Heldag', 37 | noEventsText: 'Inga aktiviteter', 38 | eventText: 'Händelse', 39 | eventsText: 'Händelser', 40 | moreEventsText: '{count} till', 41 | // Daterange component 42 | fromText: 'Start', 43 | toText: 'Slut', 44 | // Measurement components 45 | wholeText: 'Hela', 46 | fractionText: 'Bråk', 47 | unitText: 'Enhet', 48 | // Time / Timespan component 49 | labels: ['År', 'Månader', 'Dagar', 'Timmar', 'Minuter', 'Sekunder', ''], 50 | labelsShort: ['År', 'Mån', 'Dag', 'Tim', 'Min', 'Sek', ''], 51 | // Timer component 52 | startText: 'Start', 53 | stopText: 'Stopp', 54 | resetText: 'Återställ', 55 | lapText: 'Varv', 56 | hideText: 'Dölj', 57 | // Listview 58 | backText: 'Tillbaka', 59 | undoText: 'Ångra', 60 | // Form 61 | offText: 'Av', 62 | onText: 'På' 63 | }; 64 | -------------------------------------------------------------------------------- /src/js/i18n/tr.js: -------------------------------------------------------------------------------- 1 | // Türkçe 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n.tr = { 8 | // Core 9 | setText: 'Seç', 10 | cancelText: 'İptal', 11 | clearText: 'Temizleyin', 12 | selectedText: '{count} seçilmiş', 13 | // Datetime component 14 | dateFormat: 'dd.mm.yy', 15 | dayNames: ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'], 16 | dayNamesShort: ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'], 17 | dayNamesMin: ['P', 'P', 'S', 'Ç', 'P', 'C', 'C'], 18 | dayText: 'Gün', 19 | delimiter: '.', 20 | hourText: 'Saat', 21 | minuteText: 'Dakika', 22 | monthNames: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'], 23 | monthNamesShort: ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'], 24 | monthText: 'Ay', 25 | secText: 'Saniye', 26 | timeFormat: 'HH:ii', 27 | yearText: 'Yıl', 28 | nowText: 'Şimdi', 29 | pmText: 'pm', 30 | amText: 'am', 31 | todayText: 'Bugün', 32 | // Calendar component 33 | firstDay: 1, 34 | dateText: 'Tarih', 35 | timeText: 'Zaman', 36 | closeText: 'Kapatmak', 37 | allDayText: 'Tüm gün', 38 | noEventsText: 'Etkinlik Yok', 39 | eventText: 'Etkinlik', 40 | eventsText: 'Etkinlikler', 41 | moreEventsText: '{count} tane daha', 42 | // Daterange component 43 | fromText: 'Başla', 44 | toText: 'Son', 45 | // Measurement components 46 | wholeText: 'Tam', 47 | fractionText: 'Kesir', 48 | unitText: 'Birim', 49 | // Time / Timespan component 50 | labels: ['Yıl', 'Ay', 'Gün', 'Saat', 'Dakika', 'Saniye', ''], 51 | labelsShort: ['Yıl', 'Ay', 'Gün', 'Sa', 'Dak', 'Sn', ''], 52 | // Timer component 53 | startText: 'Başla', 54 | stopText: 'Durdur', 55 | resetText: 'Sıfırla', 56 | lapText: 'Tur', 57 | hideText: 'Gizle', 58 | // Listview 59 | backText: 'Geri', 60 | undoText: 'Geri Al', 61 | // Form 62 | offText: 'O', 63 | onText: 'I', 64 | // Numpad 65 | decimalSeparator: ',', 66 | thousandsSeparator: '.' 67 | }; 68 | -------------------------------------------------------------------------------- /src/js/i18n/zh.js: -------------------------------------------------------------------------------- 1 | // Chinese 2 | 3 | import { mobiscroll } from '../core/core'; 4 | 5 | export default mobiscroll; 6 | 7 | mobiscroll.i18n.zh = { 8 | // Core 9 | setText: '确定', 10 | cancelText: '取消', 11 | clearText: '明确', 12 | selectedText: '{count} 选', 13 | // Datetime component 14 | dateFormat: 'yy年mm月d日', 15 | dayNames: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], 16 | dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'], 17 | dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'], 18 | dayText: '日', 19 | hourText: '时', 20 | minuteText: '分', 21 | monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 22 | monthNamesShort: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'], 23 | monthText: '月', 24 | secText: '秒', 25 | timeFormat: 'HH:ii', 26 | yearText: '年', 27 | nowText: '当前', 28 | pmText: '下午', 29 | amText: '上午', 30 | yearSuffix: '年', 31 | monthSuffix: '月', 32 | daySuffix: '日', 33 | todayText: '今天', 34 | // Calendar component 35 | dateText: '日', 36 | timeText: '时间', 37 | closeText: '关闭', 38 | allDayText: '全天', 39 | noEventsText: '无事件', 40 | eventText: '活动', 41 | eventsText: '活动', 42 | moreEventsText: '他 {count} 件', 43 | // Daterange component 44 | fromText: '开始时间', 45 | toText: '结束时间', 46 | // Measurement components 47 | wholeText: '合计', 48 | fractionText: '分数', 49 | unitText: '单位', 50 | // Time / Timespan component 51 | labels: ['年', '月', '日', '小时', '分钟', '秒', ''], 52 | labelsShort: ['年', '月', '日', '点', '分', '秒', ''], 53 | // Timer component 54 | startText: '开始', 55 | stopText: '停止', 56 | resetText: '重置', 57 | lapText: '圈', 58 | hideText: '隐藏', 59 | // Listview 60 | backText: '返回', 61 | undoText: '复原', 62 | // Form 63 | offText: '关闭', 64 | onText: '开启', 65 | // Numpad 66 | decimalSeparator: ',', 67 | thousandsSeparator: ' ' 68 | }; 69 | -------------------------------------------------------------------------------- /src/js/mobiscroll.commercial.d.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, ElementRef, NgZone } from '@angular/core'; 2 | import { MbscBase, MbscOptionsService } from './frameworks/angular'; 3 | import { MbscCoreOptions } from './core/core'; 4 | export declare class MbscCommercialComponent extends MbscBase implements AfterViewInit { 5 | optionsService: MbscOptionsService; 6 | mbscOptions: MbscCoreOptions; 7 | options: MbscCoreOptions; 8 | data: any; 9 | mbscData: any; 10 | initElem: ElementRef; 11 | constructor(hostElement: ElementRef, optionsService: MbscOptionsService, zone: NgZone); 12 | ngAfterViewInit(): void; 13 | } 14 | -------------------------------------------------------------------------------- /src/js/modules/mobiscroll.angular.free.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { mobiscroll } from '../frameworks/angular'; 5 | import { MbscInput, MbscInputModule } from '../input.angular'; 6 | import { MbscFormsModule, MbscForm, MbscRating, MbscDropdown, MbscTextarea, MbscButton, MbscCheckbox, MbscSwitch, MbscStepper, MbscProgress, MbscSlider, MbscRadio, MbscRadioGroup, MbscSegmentedGroup, MbscSegmented, MbscFormOptions, MbscFormGroup, MbscFormGroupTitle, MbscFormGroupContent } from '../forms.angular'; 7 | import { MbscPageModule, MbscPage, MbscPageOptions, MbscNote, MbscAvatar } from '../page.angular'; 8 | import { MbscCommercialComponent } from '../mobiscroll.commercial'; 9 | 10 | const directives = [ 11 | MbscForm, MbscRating, MbscPage, MbscNote, MbscAvatar, MbscInput, MbscDropdown, MbscTextarea, MbscButton, MbscCheckbox, MbscSwitch, MbscStepper, MbscProgress, MbscSlider, MbscRadio, MbscRadioGroup, MbscSegmentedGroup, MbscSegmented, 12 | MbscCommercialComponent, MbscFormGroup, MbscFormGroupTitle, MbscFormGroupContent 13 | ]; 14 | 15 | @NgModule({ 16 | imports: [FormsModule, CommonModule, MbscFormsModule, MbscPageModule], 17 | declarations: [MbscCommercialComponent], 18 | exports: [directives, MbscCommercialComponent, MbscFormsModule, MbscPageModule] 19 | }) 20 | class MbscModule { }; 21 | 22 | export { 23 | mobiscroll, 24 | MbscForm, MbscRating, MbscPage, MbscNote, MbscAvatar, MbscInput, MbscDropdown, MbscTextarea, MbscButton, MbscCheckbox, MbscSwitch, MbscStepper, MbscProgress, MbscSlider, MbscRadio, MbscRadioGroup, MbscSegmentedGroup, MbscSegmented, 25 | MbscCommercialComponent, 26 | MbscFormOptions, 27 | MbscPageOptions, 28 | MbscModule, 29 | MbscInputModule, 30 | MbscFormsModule, 31 | MbscPageModule 32 | } -------------------------------------------------------------------------------- /src/js/page.javascript.js: -------------------------------------------------------------------------------- 1 | import { createComponent, mobiscroll } from './frameworks/javascript'; 2 | import { Page } from './classes/page'; 3 | 4 | createComponent('page', Page, false); 5 | 6 | export default mobiscroll; 7 | -------------------------------------------------------------------------------- /src/js/page.jquery.js: -------------------------------------------------------------------------------- 1 | import { createComponent, mobiscroll } from './frameworks/jquery'; 2 | import { Page } from './classes/page'; 3 | 4 | createComponent('page', Page, false); 5 | 6 | export default mobiscroll; 7 | -------------------------------------------------------------------------------- /src/js/page.ng.js: -------------------------------------------------------------------------------- 1 | import angular from 'angular'; 2 | import mobiscroll from './frameworks/ng'; 3 | import { Page } from './classes/page'; 4 | 5 | angular 6 | .module('mobiscroll-page', []) 7 | .directive('mobiscrollPage', ['$parse', function ($parse) { 8 | return { 9 | restrict: 'A', 10 | link: function (scope, element, attrs) { 11 | var inst = new Page(element[0], mobiscroll.ng.getOpt(scope, attrs, 'mobiscrollPage', true)); 12 | 13 | // Add instance to scope if there is an attribute set 14 | if (attrs.mobiscrollInstance) { 15 | $parse(attrs.mobiscrollInstance).assign(scope, inst); 16 | } 17 | 18 | scope.$on('$destroy', function () { 19 | inst.destroy(); 20 | }); 21 | } 22 | }; 23 | }]) 24 | .directive('mobiscrollAvatar', function () { 25 | return { 26 | restrict: 'A', 27 | link: function (scope, element) { 28 | element[0].classList.add('mbsc-avatar'); 29 | } 30 | }; 31 | }); 32 | 33 | export default mobiscroll; 34 | -------------------------------------------------------------------------------- /src/js/scroller.javascript.js: -------------------------------------------------------------------------------- 1 | import { createComponent, mobiscroll } from './frameworks/javascript'; 2 | import { Scroller } from './classes/scroller'; 3 | 4 | createComponent('scroller', Scroller, false); 5 | 6 | export default mobiscroll; 7 | -------------------------------------------------------------------------------- /src/js/scroller.jquery.js: -------------------------------------------------------------------------------- 1 | import { createComponent, mobiscroll } from './frameworks/jquery'; 2 | import { Scroller } from './classes/scroller'; 3 | 4 | createComponent('scroller', Scroller, false); 5 | 6 | export default mobiscroll; 7 | -------------------------------------------------------------------------------- /src/js/scroller.ng.js: -------------------------------------------------------------------------------- 1 | import angular from 'angular'; 2 | import mobiscroll from './frameworks/ng'; 3 | import './classes/scroller'; 4 | 5 | angular 6 | .module('mobiscroll-scroller', []) 7 | .directive('mobiscrollScroller', ['$parse', function ($parse) { 8 | return mobiscroll.ng.getDDO($parse, 'mobiscrollScroller', {}); 9 | }]); 10 | 11 | export default mobiscroll; 12 | -------------------------------------------------------------------------------- /src/js/scroller.react.jsx: -------------------------------------------------------------------------------- 1 | import { mobiscroll, ScrollerPropTypes, MbscInputBase } from './frameworks/react'; 2 | import './classes/scroller'; 3 | 4 | class MbscScroller extends MbscInputBase { 5 | constructor(props) { 6 | super(props); 7 | this.mbscInit = { 8 | component: 'Scroller' 9 | }; 10 | } 11 | } 12 | 13 | MbscScroller.propTypes = { 14 | ...MbscScroller.propTypes, 15 | ...ScrollerPropTypes 16 | }; 17 | 18 | mobiscroll.Scroller = MbscScroller; 19 | 20 | export default mobiscroll; 21 | -------------------------------------------------------------------------------- /src/js/themes/auto-theme.js: -------------------------------------------------------------------------------- 1 | import { $, mobiscroll } from '../core/core'; 2 | import { os } from '../util/platform'; 3 | 4 | const themes = mobiscroll.themes; 5 | 6 | let theme = 'mobiscroll'; 7 | 8 | if (os == 'android') { 9 | theme = 'material'; 10 | } else if (os == 'ios') { 11 | theme = 'ios'; 12 | } else if (os == 'wp') { 13 | theme = 'windows'; 14 | } 15 | 16 | $.each(themes.frame, function (key, settings) { 17 | // Stop at the first custom theme with the OS base theme 18 | if (theme && settings.baseTheme == theme && key != (theme + '-dark')) { 19 | mobiscroll.autoTheme = key; 20 | return false; 21 | } else if (key == theme) { 22 | mobiscroll.autoTheme = key; 23 | } 24 | }); 25 | -------------------------------------------------------------------------------- /src/js/themes/ios-dark.js: -------------------------------------------------------------------------------- 1 | import { mobiscroll } from '../core/core'; 2 | import './ios.js'; 3 | 4 | export default mobiscroll; 5 | 6 | mobiscroll.customTheme('ios-dark', 'ios'); 7 | -------------------------------------------------------------------------------- /src/js/themes/ios.js: -------------------------------------------------------------------------------- 1 | import { extend, mobiscroll } from '../core/core'; 2 | import { os, majorVersion } from '../util/platform'; 3 | 4 | export default mobiscroll; 5 | 6 | var themes = mobiscroll.themes; 7 | 8 | themes.frame.ios = { 9 | display: 'bottom', // frame 10 | headerText: false, // frame 11 | btnWidth: false, // frame 12 | deleteIcon: 'ios-backspace', // numpad 13 | scroll3d: os != 'wp' && (os != 'android' || majorVersion > 7) 14 | }; 15 | 16 | themes.scroller.ios = extend({}, themes.frame.ios, { 17 | rows: 5, // scroller 18 | height: 34, // scroller 19 | minWidth: 55, // scroller 20 | selectedLineHeight: true, // scroller 21 | selectedLineBorder: 1, // scroller 22 | showLabel: false, // scroller 23 | useShortLabels: true, // timespan/timer 24 | btnPlusClass: 'mbsc-ic mbsc-ic-arrow-down5', // scroller 25 | btnMinusClass: 'mbsc-ic mbsc-ic-arrow-up5', // scroller 26 | checkIcon: 'ion-ios7-checkmark-empty', // select 27 | filterClearIcon: 'ion-close-circled', // select 28 | dateDisplay: 'MMdyy', // date 29 | btnCalPrevClass: 'mbsc-ic mbsc-ic-arrow-left5', // calendar 30 | btnCalNextClass: 'mbsc-ic mbsc-ic-arrow-right5' // calendar 31 | }); 32 | 33 | themes.listview.ios = { 34 | leftArrowClass: 'mbsc-ic-ion-ios7-arrow-back', 35 | rightArrowClass: 'mbsc-ic-ion-ios7-arrow-forward' 36 | }; 37 | 38 | themes.form.ios = {}; 39 | -------------------------------------------------------------------------------- /src/js/themes/material-dark.js: -------------------------------------------------------------------------------- 1 | import { mobiscroll } from '../core/core'; 2 | import './material.js'; 3 | 4 | export default mobiscroll; 5 | 6 | mobiscroll.customTheme('material-dark', 'material'); 7 | -------------------------------------------------------------------------------- /src/js/themes/mobiscroll-dark.js: -------------------------------------------------------------------------------- 1 | import { mobiscroll } from '../core/core'; 2 | 3 | export default mobiscroll; 4 | 5 | mobiscroll.customTheme('mobiscroll-dark', 'mobiscroll'); 6 | -------------------------------------------------------------------------------- /src/js/themes/windows-dark.js: -------------------------------------------------------------------------------- 1 | import { mobiscroll } from '../core/core'; 2 | import './windows.js'; 3 | 4 | export default mobiscroll; 5 | 6 | mobiscroll.customTheme('windows-dark', 'windows'); 7 | -------------------------------------------------------------------------------- /src/js/themes/windows.js: -------------------------------------------------------------------------------- 1 | import { extend, mobiscroll } from '../core/core'; 2 | 3 | export default mobiscroll; 4 | 5 | var themes = mobiscroll.themes; 6 | 7 | themes.frame.windows = { 8 | headerText: false, 9 | deleteIcon: 'backspace4', 10 | //setIcon: 'material-check', 11 | //cancelIcon: 'material-close', 12 | //closeIcon: 'material-close', 13 | //clearIcon: 'material-close', 14 | //okIcon: 'material-check', 15 | //nowIcon: 'loop2', 16 | //startIcon: 'play3', 17 | //stopIcon: 'pause2', 18 | //resetIcon: 'stop2', 19 | //lapIcon: 'loop2', 20 | //btnWidth: false, 21 | btnReverse: true 22 | }; 23 | 24 | themes.scroller.windows = extend({}, themes.frame.windows, { 25 | rows: 6, // scroller 26 | minWidth: 88, 27 | height: 44, 28 | btnPlusClass: 'mbsc-ic mbsc-ic-arrow-down5', 29 | btnMinusClass: 'mbsc-ic mbsc-ic-arrow-up5', 30 | checkIcon: 'material-check', 31 | dateDisplay: 'MMdyy', // date 32 | showLabel: false, 33 | showScrollArrows: true, 34 | btnCalPrevClass: 'mbsc-ic mbsc-ic-arrow-left5', // calendar 35 | btnCalNextClass: 'mbsc-ic mbsc-ic-arrow-right5', // calendar 36 | dayNamesShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], 37 | useShortLabels: true, // timespan/timer 38 | }); 39 | 40 | themes.form.windows = {}; 41 | -------------------------------------------------------------------------------- /src/js/util/collapsible-base.d.ts: -------------------------------------------------------------------------------- 1 | 2 | export class CollapsibleBase { 3 | constructor(elm: Element, settings: any); 4 | collapse(show: boolean): void; 5 | show(): void; 6 | hide(): void; 7 | toggle(): void; 8 | destroy(): void; 9 | } 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/js/util/misc.js: -------------------------------------------------------------------------------- 1 | function noop() {} 2 | 3 | function objectToArray(obj) { 4 | var arr = [], 5 | i; 6 | 7 | for (i in obj) { 8 | arr.push(obj[i]); 9 | } 10 | 11 | return arr; 12 | } 13 | 14 | function arrayToObject(arr) { 15 | var obj = {}, 16 | i; 17 | 18 | if (arr) { 19 | for (i = 0; i < arr.length; i++) { 20 | obj[arr[i]] = arr[i]; 21 | } 22 | } 23 | 24 | return obj; 25 | } 26 | 27 | function isNumeric(a) { 28 | return a - parseFloat(a) >= 0; 29 | } 30 | 31 | function isString(s) { 32 | return typeof s === 'string'; 33 | } 34 | 35 | function constrain(val, min, max) { 36 | return Math.max(min, Math.min(val, max)); 37 | } 38 | 39 | function pad(num, size) { 40 | num = num + ''; 41 | size = size || 2; 42 | while (num.length < size) { 43 | num = '0' + num; 44 | } 45 | return num; 46 | } 47 | 48 | function throttle(fn, threshhold) { 49 | var last, 50 | timer; 51 | 52 | threshhold = threshhold || 100; 53 | 54 | return function () { 55 | var context = this, 56 | now = +new Date(), 57 | args = arguments; 58 | 59 | if (last && now < last + threshhold) { 60 | clearTimeout(timer); 61 | timer = setTimeout(function () { 62 | last = now; 63 | fn.apply(context, args); 64 | }, threshhold); 65 | } else { 66 | last = now; 67 | fn.apply(context, args); 68 | } 69 | }; 70 | } 71 | 72 | function vibrate(time) { 73 | if ('vibrate' in navigator) { 74 | navigator.vibrate(time || 50); 75 | } 76 | } 77 | 78 | function getPercent(v, min, max) { 79 | return (v - min) * 100 / (max - min); 80 | } 81 | 82 | function getBoolAttr(attr, def, $elm) { 83 | var v = $elm.attr(attr); 84 | return v === undefined || v === '' ? def : v === 'true'; 85 | } 86 | 87 | export { 88 | arrayToObject, 89 | constrain, 90 | isNumeric, 91 | isString, 92 | noop, 93 | objectToArray, 94 | throttle, 95 | vibrate, 96 | pad, 97 | getPercent, 98 | getBoolAttr 99 | }; 100 | -------------------------------------------------------------------------------- /src/js/util/notifications.d.ts: -------------------------------------------------------------------------------- 1 | import { IMobiscroll } from '../core/mobiscroll'; 2 | declare module '../core/mobiscroll' { 3 | export interface IMobiscroll { 4 | alert: (config: any) => Promise; 5 | confirm: (config: any) => Promise; 6 | prompt: (config: any) => Promise; 7 | toast: (config: any) => Promise; 8 | snackbar: (config: any) => Promise; 9 | notification: { 10 | dismiss: () => void; 11 | }; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/js/util/observable.d.ts: -------------------------------------------------------------------------------- 1 | export declare type Handler = (value: T) => void; 2 | export declare class Observable { 3 | private keyCount; 4 | private subscribers; 5 | subscribe(handler: Handler): number; 6 | unsubscribe(handler: number | Handler): void; 7 | next(value: T): void; 8 | } 9 | -------------------------------------------------------------------------------- /src/js/util/observable.js: -------------------------------------------------------------------------------- 1 | var Observable = (function () { 2 | function Observable() { 3 | this.keyCount = 0; 4 | this.subscribers = new Map(); 5 | } 6 | Observable.prototype.subscribe = function (handler) { 7 | var key = this.keyCount++; 8 | this.subscribers.set(key, handler); 9 | return key; 10 | }; 11 | Observable.prototype.unsubscribe = function (handler) { 12 | if (typeof (handler) === 'number') { 13 | this.subscribers.delete(handler); 14 | } 15 | else { 16 | var foundKey_1 = null; 17 | this.subscribers.forEach(function (fn, key) { if (fn === handler) { 18 | foundKey_1 = key; 19 | } }); 20 | this.subscribers.delete(foundKey_1); 21 | } 22 | }; 23 | Observable.prototype.next = function (value) { 24 | this.subscribers.forEach(function (handler) { handler(value); }); 25 | }; 26 | return Observable; 27 | }()); 28 | export { Observable }; 29 | -------------------------------------------------------------------------------- /src/js/util/observable.ts: -------------------------------------------------------------------------------- 1 | export type Handler = (value: T) => void; 2 | 3 | export class Observable { 4 | private keyCount = 0; 5 | // handler function map 6 | private subscribers: Map> = new Map>(); // { [index: number]: Handler } = {}; 7 | 8 | /** 9 | * Subscribes a function that will be called when the observable changes. It will receive the new value as parameter. 10 | * NOTE: Don't forget to unsubscribe to prevent memory leaks! 11 | * @param handler A function that will be called when a new value is provided by the observable 12 | */ 13 | public subscribe(handler: Handler): number { 14 | const key = this.keyCount++; 15 | this.subscribers.set(key, handler); 16 | return key; 17 | } 18 | 19 | /** 20 | * Unsubscribes a handler from the observable 21 | * @param handler The handler of the function returned by the subscribe method or the function itself 22 | */ 23 | public unsubscribe(handler: number | Handler) { 24 | if (typeof(handler) === 'number') { 25 | this.subscribers.delete(handler); 26 | } else { 27 | let foundKey: number = null; 28 | this.subscribers.forEach((fn, key) => { if (fn === handler) { foundKey = key; } }); 29 | this.subscribers.delete(foundKey); 30 | } 31 | } 32 | 33 | /** 34 | * Notifies the subscribers of the observable of the next value. 35 | * @param value The next value of the observable 36 | */ 37 | public next(value: T): void { 38 | this.subscribers.forEach((handler) => { handler(value); }); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/js/util/platform.js: -------------------------------------------------------------------------------- 1 | var os, 2 | vers, 3 | majorVersion, 4 | minorVersion, 5 | version = [], 6 | isBrowser = typeof window !== 'undefined', 7 | isDark = isBrowser && window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches, 8 | userAgent = isBrowser ? navigator.userAgent : '', 9 | platform = isBrowser ? navigator.platform : '', 10 | maxTouchPoints = isBrowser ? navigator.maxTouchPoints : 0, 11 | isSafari = /Safari/.test(userAgent), 12 | device = userAgent.match(/Android|iPhone|iPad|iPod|Windows Phone|Windows|MSIE/i), 13 | raf = (isBrowser && window.requestAnimationFrame) || function (func) { 14 | return setTimeout(func, 20); 15 | }, 16 | rafc = (isBrowser && window.cancelAnimationFrame) || function (id) { 17 | clearTimeout(id); 18 | }; 19 | 20 | if (/Android/i.test(device)) { 21 | os = 'android'; 22 | vers = userAgent.match(/Android\s+([\d.]+)/i); 23 | if (vers) { 24 | version = vers[0].replace('Android ', '').split('.'); 25 | } 26 | } else if (/iPhone|iPad|iPod/i.test(device) || /iPhone|iPad|iPod/i.test(platform) || (platform === 'MacIntel' && maxTouchPoints > 1)) { 27 | // On iPad with iOS 13 desktop site request is automatically enabled in Safari, 28 | // so 'iPad' is no longer present in the user agent string. 29 | // In this case we check `navigator.platform` and `navigator.maxTouchPoints`. 30 | // maxTouchPoints is needed to exclude desktop Mac OS X. 31 | os = 'ios'; 32 | vers = userAgent.match(/OS\s+([\d_]+)/i); 33 | if (vers) { 34 | version = vers[0].replace(/_/g, '.').replace('OS ', '').split('.'); 35 | } 36 | } else if (/Windows Phone/i.test(device)) { 37 | os = 'wp'; 38 | } else if (/Windows|MSIE/i.test(device)) { 39 | os = 'windows'; 40 | } 41 | 42 | majorVersion = version[0]; 43 | minorVersion = version[1]; 44 | 45 | export { 46 | os, 47 | majorVersion, 48 | minorVersion, 49 | isBrowser, 50 | isDark, 51 | isSafari, 52 | userAgent, 53 | raf, 54 | rafc 55 | }; 56 | -------------------------------------------------------------------------------- /src/scss/borders/borders.ios.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | 3 | @include exports("borders.ios") { 4 | 5 | @media (-webkit-min-device-pixel-ratio: 2), 6 | (min-resolution: 192dpi) { 7 | 8 | .mbsc-fr-hb.mbsc-ios.mbsc-fr-inline .mbsc-fr-w, 9 | .mbsc-fr-hb.mbsc-ios.mbsc-fr-inline .mbsc-fr-c, 10 | .mbsc-fr-hb.mbsc-ios .mbsc-fr-hdr, 11 | .mbsc-fr-hb.mbsc-ios .mbsc-fr-btn-cont, 12 | .mbsc-fr-hb.mbsc-ios.mbsc-fr-center .mbsc-fr-btn-w, 13 | .mbsc-fr-hb.mbsc-ios.mbsc-fr-bottom .mbsc-fr-popup, 14 | /* Calendar */ 15 | .mbsc-fr-hb.mbsc-ios.mbsc-cal-liq.mbsc-fr-center .mbsc-fr-btn-cont, 16 | .mbsc-fr-hb.mbsc-ios.mbsc-calendar .mbsc-fr-popup .mbsc-fr-btn-cont, 17 | .mbsc-fr-hb.mbsc-ios .mbsc-cal-day, 18 | .mbsc-fr-hb.mbsc-ios .mbsc-cal-sc-m-cell, 19 | /* Range */ 20 | .mbsc-fr-hb.mbsc-ios .mbsc-range-btn-end, 21 | .mbsc-fr-hb.mbsc-ios .mbsc-range-btn-end .mbsc-range-btn:before, 22 | /* Numpad */ 23 | .mbsc-fr-hb.mbsc-ios .mbsc-np-btn, 24 | /* Navigation */ 25 | .mbsc-fr-hb.mbsc-ios.mbsc-ms-more .mbsc-ms-item:after, 26 | /* Listview */ 27 | .mbsc-lv-hb.mbsc-ios .mbsc-lv-item:before, 28 | .mbsc-lv-hb.mbsc-ios .mbsc-lv-item:after, 29 | .mbsc-lv-hb.mbsc-ios .mbsc-lv-gr-title, 30 | .mbsc-lv-hb.mbsc-ios, 31 | /* Forms */ 32 | .mbsc-form-hb.mbsc-ios .mbsc-control-w:before, 33 | .mbsc-form-hb.mbsc-ios .mbsc-control-w:after, 34 | .mbsc-form-hb.mbsc-ios .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w:before, 35 | .mbsc-form-hb.mbsc-ios .mbsc-form-group-inset .mbsc-control-ng .mbsc-control-w:after, 36 | .mbsc-form-hb.mbsc-ios .mbsc-divider, 37 | .mbsc-form-hb.mbsc-ios .mbsc-btn-group { 38 | border-width: .5px; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/scss/collapsible/collapsible.ios.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/ios"; 3 | @import "./collapsible"; 4 | 5 | @include exports("collapsible.ios") { 6 | .mbsc-ios .mbsc-collapsible { 7 | .mbsc-collapsible-header { 8 | padding-right: 3em; 9 | } 10 | 11 | .mbsc-form-group-title { 12 | padding-top: 2.5em; 13 | margin: 0; 14 | 15 | .mbsc-collapsible-icon { 16 | margin-top: .5em; 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/scss/collapsible/collapsible.material.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/material"; 3 | @import "./collapsible"; 4 | 5 | @include exports("collapsible.material") { 6 | .mbsc-material .mbsc-collapsible { 7 | .mbsc-form-group-title { 8 | padding: 1em; 9 | } 10 | 11 | .mbsc-collapsible-header { 12 | padding-right: 3em; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/scss/collapsible/collapsible.mobiscroll.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/mobiscroll"; 3 | @import "./collapsible"; 4 | 5 | @include exports("collapsible.mobiscroll") { 6 | .mbsc-mobiscroll .mbsc-collapsible { 7 | .mbsc-form-group-title { 8 | padding: 1em; 9 | } 10 | 11 | .mbsc-collapsible-header { 12 | padding-right: 3em; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/scss/collapsible/collapsible.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | 3 | @include exports("collapsible") { 4 | .mbsc-collapsible.mbsc-form-group { 5 | margin: 0; 6 | } 7 | 8 | .mbsc-collapsible-header { 9 | position: relative; 10 | padding-right: 3em; 11 | } 12 | 13 | .mbsc-collapsible .mbsc-collapsible-icon { 14 | position: absolute; 15 | width: 1em; 16 | height: 1em; 17 | top: 50%; 18 | right: 1em; 19 | margin-top: -.5em; 20 | line-height: 1em; 21 | font-size: 1em; 22 | transition: transform .125s ease-out; 23 | } 24 | 25 | .mbsc-collapsible .mbsc-collapsible-content { 26 | overflow: hidden; 27 | transition: height .125s ease; 28 | box-sizing: content-box; 29 | } 30 | 31 | .mbsc-collapsible:not(.mbsc-collapsible-open) .mbsc-collapsible-content { 32 | height: 0; 33 | padding-bottom: 0; 34 | } 35 | 36 | .mbsc-collapsible-open > .mbsc-collapsible-header .mbsc-collapsible-icon { 37 | -webkit-transform: rotateX(180deg); 38 | transform: rotateX(180deg); 39 | } 40 | 41 | /* Collapsible rtl */ 42 | 43 | .mbsc-rtl { 44 | 45 | .mbsc-collapsible.mbsc-form-group, 46 | .mbsc-collapsible.mbsc-card { 47 | 48 | .mbsc-collapsible-header, 49 | .mbsc-collapsible-header.mbsc-form-group-title { 50 | padding-right: 1em; 51 | padding-left: 3em; 52 | 53 | .mbsc-collapsible-icon { 54 | right: auto; 55 | left: 1em; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/scss/collapsible/collapsible.windows.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/windows"; 3 | @import "./collapsible"; 4 | 5 | @include exports("collapsible.windows") { 6 | .mbsc-windows .mbsc-collapsible { 7 | .mbsc-form-group-title.mbsc-collapsible-header { 8 | padding-left: .666667em; 9 | padding-right: 2em; 10 | } 11 | 12 | .mbsc-form-group-title .mbsc-collapsible-icon { 13 | font-size: .666667em; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/scss/core/common.scss: -------------------------------------------------------------------------------- 1 | @import "./exports"; 2 | 3 | @include exports("common") { 4 | .mbsc-cloak { 5 | visibility: hidden !important; 6 | } 7 | 8 | /* Empty view */ 9 | 10 | .mbsc-empty { 11 | text-align: center; 12 | margin: 3em; 13 | color: inherit; 14 | } 15 | 16 | .mbsc-empty h3 { 17 | margin: .666666em 0; 18 | padding: 0; 19 | color: inherit; 20 | font-size: 1.5em; 21 | font-weight: normal; 22 | font-family: inherit; 23 | } 24 | 25 | .mbsc-empty p { 26 | margin: 1em 0; 27 | padding: 0; 28 | font-size: 1em; 29 | line-height: 1.5; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/scss/core/exports.scss: -------------------------------------------------------------------------------- 1 | $modules: () !default; 2 | 3 | @mixin exports($name) { 4 | @if (not index($modules, $name)) { 5 | $modules: append($modules, $name) !global; 6 | @content; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/core/icons_mobiscroll.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/src/scss/core/icons_mobiscroll.ttf -------------------------------------------------------------------------------- /src/scss/core/icons_mobiscroll.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/src/scss/core/icons_mobiscroll.woff -------------------------------------------------------------------------------- /src/scss/core/material.ripple.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | 3 | @include exports("ripple.material") { 4 | .mbsc-material { 5 | .mbsc-ripple { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | opacity: 0; 10 | border-radius: 1000em; 11 | pointer-events: none; 12 | -webkit-transform: scale(0); 13 | transform: scale(0); 14 | -webkit-transition: -webkit-transform cubic-bezier(0, 0, 0.2, 1) .4s, opacity linear .1s; 15 | transition: transform cubic-bezier(0, 0, 0.2, 1) .4s, opacity linear .1s; 16 | } 17 | 18 | .mbsc-ripple-scaled { 19 | -webkit-transform: scale(1); 20 | transform: scale(1); 21 | } 22 | 23 | .mbsc-ripple-visible { 24 | opacity: .15; 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/scss/forms/forms.bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "../page/page.bootstrap"; 2 | @import "../slider/slider.bootstrap"; 3 | @import "../rating/rating.bootstrap"; 4 | @import "./forms"; 5 | -------------------------------------------------------------------------------- /src/scss/frame/frame.bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "./frame"; 2 | 3 | /* Frame */ 4 | .mbsc-bootstrap { 5 | .mbsc-fr-popup { 6 | display: block; 7 | padding: 0; 8 | margin: 0; 9 | } 10 | 11 | .mbsc-fr-hdr { 12 | padding: 0 14px; 13 | min-height: 37px; 14 | line-height: 37px; 15 | } 16 | 17 | .mbsc-fr-w { 18 | font-family: inherit; 19 | padding: 0; 20 | } 21 | 22 | .mbsc-fr-overlay { 23 | background: rgba(0, 0, 0, .5); 24 | } 25 | 26 | .mbsc-fr-btn-cont { 27 | padding: 0 2px 4px 2px; 28 | } 29 | 30 | .mbsc-fr-btn { 31 | display: block; 32 | margin: 0 2px; 33 | } 34 | 35 | 36 | /* Inline mode */ 37 | 38 | &.mbsc-inline .mbsc-fr-popup { 39 | display: inline-block; 40 | } 41 | 42 | 43 | /* Top/bottom mode */ 44 | 45 | &.mbsc-fr-inline .mbsc-fr-popup, 46 | &.mbsc-fr-top .mbsc-fr-popup, 47 | &.mbsc-fr-bottom .mbsc-fr-popup { 48 | border-radius: 0; 49 | } 50 | 51 | 52 | /* Bubble mode */ 53 | 54 | .mbsc-fr-arr-i { 55 | max-width: none; 56 | height: 20px; 57 | margin: 0 10px; 58 | padding: 0; 59 | border: 0; 60 | display: block; 61 | border-color: transparent; 62 | background: none; 63 | box-shadow: none; 64 | } 65 | 66 | .mbsc-fr-arr-w { 67 | margin: 0; 68 | overflow: visible; 69 | } 70 | 71 | .mbsc-fr-bubble-top .mbsc-fr-arr { 72 | top: 0; 73 | bottom: auto; 74 | } 75 | 76 | .mbsc-fr-bubble-bottom .mbsc-fr-arr { 77 | top: auto; 78 | bottom: 0; 79 | } 80 | 81 | /* 4.x */ 82 | 83 | &.mbsc-fr .mbsc-fr-arr { 84 | margin: 0; 85 | -webklit-transform: translate(-50%); 86 | transform: translate(-50%); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/scss/frame/frame.material.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "./frame.material.colors"; 3 | @import "../core/material.ripple"; 4 | @import "./frame"; 5 | 6 | @include exports("frame.material") { 7 | .mbsc-material { 8 | .mbsc-fr-w { 9 | border-radius: .1875em; 10 | min-width: 15em; 11 | font-size: 16px; 12 | } 13 | 14 | .mbsc-fr-hdr { 15 | padding: 0 .6666em; 16 | padding-top: .6666em; 17 | font-size: .75em; 18 | font-weight: bold; 19 | text-transform: uppercase; 20 | min-height: 2em; 21 | line-height: 2em; 22 | } 23 | 24 | .mbsc-fr-btn-cont { 25 | display: block; 26 | overflow: hidden; 27 | padding: 0 .5em .5em .5em; 28 | } 29 | 30 | .mbsc-ltr .mbsc-fr-btn-cont { 31 | text-align: right; 32 | } 33 | 34 | .mbsc-rtl .mbsc-fr-btn-cont { 35 | text-align: left; 36 | } 37 | 38 | .mbsc-fr-btn-w { 39 | display: inline-block; 40 | } 41 | 42 | .mbsc-fr-btn { 43 | position: relative; 44 | height: 2.4em; 45 | line-height: 2.4em; 46 | padding: 0 1em; 47 | border-radius: 2px; 48 | font-weight: bold; 49 | text-transform: uppercase; 50 | } 51 | 52 | .mbsc-fr-btn-cont .mbsc-fr-btn { 53 | font-size: .9375em; 54 | } 55 | 56 | .mbsc-fr-btn-e { 57 | transition: background-color .2s ease-out; 58 | } 59 | 60 | /* Inline mode */ 61 | 62 | &.mbsc-fr-inline .mbsc-fr-w { 63 | box-shadow: none; 64 | } 65 | 66 | 67 | /* Top, bottom mode */ 68 | 69 | &.mbsc-fr-inline .mbsc-fr-w, 70 | &.mbsc-fr-top .mbsc-fr-w, 71 | &.mbsc-fr-bottom .mbsc-fr-w { 72 | border-radius: 0; 73 | } 74 | } 75 | 76 | @include mbsc-material-frame(material, $mbsc-material-colors); 77 | } 78 | -------------------------------------------------------------------------------- /src/scss/frame/frame.mobiscroll.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "./frame.mobiscroll.colors"; 3 | @import "./frame"; 4 | 5 | @include exports("frame.mobiscroll") { 6 | .mbsc-mobiscroll { 7 | .mbsc-fr-w { 8 | min-width: 16em; 9 | font-size: 16px; 10 | } 11 | 12 | .mbsc-fr-hdr { 13 | padding: 0 .6666em; 14 | padding-top: .6666em; 15 | font-size: .75em; 16 | text-transform: uppercase; 17 | min-height: 2em; 18 | line-height: 2em; 19 | } 20 | 21 | .mbsc-fr-btn-cont { 22 | display: block; 23 | overflow: hidden; 24 | text-align: right; 25 | padding: 0 .5em .5em .5em; 26 | } 27 | 28 | .mbsc-ltr .mbsc-fr-btn-cont { 29 | text-align: right; 30 | } 31 | 32 | .mbsc-rtl .mbsc-fr-btn-cont { 33 | text-align: left; 34 | } 35 | 36 | .mbsc-fr-btn-w { 37 | display: inline-block; 38 | } 39 | 40 | .mbsc-fr-btn { 41 | height: 2.5em; 42 | line-height: 2.5em; 43 | padding: 0 1em; 44 | text-transform: uppercase; 45 | } 46 | 47 | /* Display modes */ 48 | &.mbsc-fr-center .mbsc-fr-w, 49 | &.mbsc-fr-bubble .mbsc-fr-w { 50 | border-radius: .25em; 51 | } 52 | 53 | &.mbsc-fr-no-overlay { 54 | .mbsc-fr-arr { 55 | box-shadow: 0 0 1em rgba(0, 0, 0, .2); 56 | } 57 | 58 | .mbsc-fr-w { 59 | box-shadow: 0 .125em 1em rgba(0, 0, 0, .3); 60 | } 61 | 62 | &.mbsc-fr-bubble .mbsc-fr-w { 63 | border-radius: .25em; 64 | } 65 | } 66 | } 67 | 68 | @include mbsc-mobiscroll-frame(mobiscroll, $mbsc-mobiscroll-colors); 69 | } 70 | -------------------------------------------------------------------------------- /src/scss/frame/frame.windows.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "./frame.windows.colors"; 3 | @import "./frame"; 4 | 5 | @include exports("frame.windows") { 6 | .mbsc-windows { 7 | .mbsc-fr-w { 8 | font-size: 16px; 9 | } 10 | 11 | .mbsc-ltr .mbsc-fr-btn-w .mbsc-fr-btn:before { 12 | padding: 0 .375em 0 0; 13 | } 14 | 15 | .mbsc-rtl .mbsc-fr-btn-w .mbsc-fr-btn:before { 16 | padding: 0 0 0 .375em; 17 | } 18 | 19 | &.mbsc-fr-inline .mbsc-fr-w { 20 | border: 0; 21 | } 22 | 23 | .mbsc-fr-hdr { 24 | padding: .5em; 25 | font-weight: bold; 26 | } 27 | 28 | .mbsc-fr-btn { 29 | height: 2.5em; 30 | line-height: 2.5em; 31 | text-align: center; 32 | padding: 0 .375em; 33 | } 34 | 35 | .mbsc-fr-arr-w { 36 | margin: -1px 0; 37 | } 38 | } 39 | 40 | @include mbsc-windows-frame(windows, $mbsc-windows-colors); 41 | } 42 | -------------------------------------------------------------------------------- /src/scss/grid-layout/grid-layout.bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import './grid-layout'; 2 | -------------------------------------------------------------------------------- /src/scss/grid-layout/grid-layout.ios.scss: -------------------------------------------------------------------------------- 1 | @import '../core/ios'; 2 | @import './grid-layout'; 3 | -------------------------------------------------------------------------------- /src/scss/grid-layout/grid-layout.material.scss: -------------------------------------------------------------------------------- 1 | @import '../core/material'; 2 | @import './grid-layout'; 3 | -------------------------------------------------------------------------------- /src/scss/grid-layout/grid-layout.mobiscroll.scss: -------------------------------------------------------------------------------- 1 | @import '../core/mobiscroll'; 2 | @import './grid-layout'; 3 | -------------------------------------------------------------------------------- /src/scss/grid-layout/grid-layout.windows.scss: -------------------------------------------------------------------------------- 1 | @import '../core/windows'; 2 | @import './grid-layout'; 3 | -------------------------------------------------------------------------------- /src/scss/input/input.bootstrap.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidb/mobiscroll/6694a7bef37c4188666a2986880e0b4012722c90/src/scss/input/input.bootstrap.scss -------------------------------------------------------------------------------- /src/scss/notifications/notifications.ios.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/ios"; 3 | @import "../popup/popup.ios.colors"; 4 | 5 | @mixin mbsc-ios-notifications($theme, $params) { 6 | @include exports("notifications.#{$theme}.colors") { 7 | 8 | @include mbsc-ios-popup($theme, $params); 9 | 10 | $colors: mbsc-ios-colors($params); 11 | $dark-text: map-get($colors, dark-text); 12 | $light-text: map-get($colors, light-text); 13 | $snackbar-button: map-get($colors, snackbar-button); 14 | 15 | .mbsc-#{$theme} { 16 | &.mbsc-alert .mbsc-input { 17 | border: 1px solid #ccc; 18 | } 19 | 20 | /* Snackbar */ 21 | 22 | &.mbsc-snackbar .mbsc-fr-w { 23 | background: #646464; 24 | color: #fff; 25 | } 26 | 27 | &.mbsc-snackbar .mbsc-snackbar-btn { 28 | color: $snackbar-button; 29 | } 30 | 31 | /* Toast */ 32 | 33 | &.mbsc-toast .mbsc-toast-msg { 34 | background: #646464; 35 | color: #fff; 36 | } 37 | 38 | /* Snackbar and Toast color presets */ 39 | 40 | &.mbsc-snackbar.mbsc-primary .mbsc-fr-w, 41 | &.mbsc-toast.mbsc-primary .mbsc-toast-msg, 42 | &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w, 43 | &.mbsc-toast.mbsc-secondary .mbsc-toast-msg, 44 | &.mbsc-snackbar.mbsc-success .mbsc-fr-w, 45 | &.mbsc-toast.mbsc-success .mbsc-toast-msg, 46 | &.mbsc-snackbar.mbsc-danger .mbsc-fr-w, 47 | &.mbsc-toast.mbsc-danger .mbsc-toast-msg, 48 | &.mbsc-snackbar.mbsc-warning .mbsc-fr-w, 49 | &.mbsc-toast.mbsc-warning .mbsc-toast-msg, 50 | &.mbsc-snackbar.mbsc-info .mbsc-fr-w, 51 | &.mbsc-toast.mbsc-info .mbsc-toast-msg, 52 | &.mbsc-snackbar.mbsc-primary .mbsc-snackbar-btn, 53 | &.mbsc-snackbar.mbsc-secondary .mbsc-snackbar-btn, 54 | &.mbsc-snackbar.mbsc-success .mbsc-snackbar-btn, 55 | &.mbsc-snackbar.mbsc-danger .mbsc-snackbar-btn, 56 | &.mbsc-snackbar.mbsc-warning .mbsc-snackbar-btn, 57 | &.mbsc-snackbar.mbsc-info .mbsc-snackbar-btn { 58 | color: $light-text; 59 | } 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/scss/notifications/notifications.ios.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../popup/popup.ios"; 3 | @import "./notifications.ios.colors"; 4 | @import "./notifications"; 5 | 6 | @include exports("notifications.ios") { 7 | .mbsc-ios { 8 | &.mbsc-alert .mbsc-fr-c.mbsc-wdg-c { 9 | padding: 1.142857em; 10 | line-height: 1.285714; 11 | text-align: center; 12 | } 13 | 14 | &.mbsc-alert h2 { 15 | margin: 0.277778em 0; 16 | font-size: 1.285715em; 17 | } 18 | 19 | &.mbsc-alert p { 20 | margin: 0.357143em 0; 21 | } 22 | 23 | &.mbsc-alert .mbsc-input { 24 | margin-top: 1.142857em; 25 | border-radius: 0; 26 | } 27 | 28 | &.mbsc-alert .mbsc-input input { 29 | height: 1.714286em; 30 | padding: 0 0.357143em; 31 | } 32 | 33 | /* Toast */ 34 | 35 | &.mbsc-toast .mbsc-toast-msg { 36 | border-radius: .5em; 37 | opacity: .9; 38 | } 39 | 40 | /* Snackbar and Toast color presets */ 41 | 42 | &.mbsc-snackbar.mbsc-primary .mbsc-fr-w, 43 | &.mbsc-toast.mbsc-primary .mbsc-toast-msg { 44 | background: $mbsc-ios-primary; 45 | } 46 | 47 | &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w, 48 | &.mbsc-toast.mbsc-secondary .mbsc-toast-msg { 49 | background: $mbsc-ios-secondary; 50 | } 51 | 52 | &.mbsc-snackbar.mbsc-success .mbsc-fr-w, 53 | &.mbsc-toast.mbsc-success .mbsc-toast-msg { 54 | background: $mbsc-ios-success; 55 | } 56 | 57 | &.mbsc-snackbar.mbsc-danger .mbsc-fr-w, 58 | &.mbsc-toast.mbsc-danger .mbsc-toast-msg { 59 | background: $mbsc-ios-danger; 60 | } 61 | 62 | &.mbsc-snackbar.mbsc-warning .mbsc-fr-w, 63 | &.mbsc-toast.mbsc-warning .mbsc-toast-msg { 64 | background: $mbsc-ios-warning; 65 | } 66 | 67 | &.mbsc-snackbar.mbsc-info .mbsc-fr-w, 68 | &.mbsc-toast.mbsc-info .mbsc-toast-msg { 69 | background: $mbsc-ios-info; 70 | } 71 | } 72 | 73 | @include mbsc-ios-notifications(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent)); 74 | } 75 | -------------------------------------------------------------------------------- /src/scss/notifications/notifications.material.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/material"; 3 | @import "../popup/popup.material.colors"; 4 | 5 | @mixin mbsc-material-notifications($theme, $params) { 6 | @include exports("notifications.#{$theme}.colors") { 7 | 8 | @include mbsc-material-popup($theme, $params); 9 | 10 | $accent: map-get($params, accent); 11 | 12 | $colors: mbsc-material-colors($params); 13 | $white-text: map-get($colors, white-text); 14 | $light-text: map-get($colors, light-text); 15 | $snackbar: map-get($colors, snackbar); 16 | $snackbar-btn: map-get($colors, snackbar-btn); 17 | 18 | .mbsc-#{$theme} { 19 | 20 | /* Snackbar */ 21 | 22 | &.mbsc-snackbar .mbsc-fr-w { 23 | background: $snackbar; 24 | color: $white-text; 25 | } 26 | 27 | &.mbsc-snackbar .mbsc-snackbar-btn { 28 | color: $snackbar-btn; 29 | } 30 | 31 | /* Toast */ 32 | 33 | &.mbsc-toast .mbsc-toast-msg { 34 | background: #505050; 35 | color: $white-text; 36 | } 37 | 38 | /* Snackbar and Toast color presets */ 39 | &.mbsc-snackbar.mbsc-primary .mbsc-fr-w, 40 | &.mbsc-toast.mbsc-primary .mbsc-toast-msg, 41 | &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w, 42 | &.mbsc-toast.mbsc-secondary .mbsc-toast-msg, 43 | &.mbsc-snackbar.mbsc-success .mbsc-fr-w, 44 | &.mbsc-toast.mbsc-success .mbsc-toast-msg, 45 | &.mbsc-snackbar.mbsc-danger .mbsc-fr-w, 46 | &.mbsc-toast.mbsc-danger .mbsc-toast-msg, 47 | &.mbsc-snackbar.mbsc-warning .mbsc-fr-w, 48 | &.mbsc-toast.mbsc-warning .mbsc-toast-msg, 49 | &.mbsc-snackbar.mbsc-info .mbsc-fr-w, 50 | &.mbsc-toast.mbsc-info .mbsc-toast-msg, 51 | &.mbsc-snackbar.mbsc-primary .mbsc-snackbar-btn, 52 | &.mbsc-snackbar.mbsc-secondary .mbsc-snackbar-btn, 53 | &.mbsc-snackbar.mbsc-success .mbsc-snackbar-btn, 54 | &.mbsc-snackbar.mbsc-danger .mbsc-snackbar-btn, 55 | &.mbsc-snackbar.mbsc-warning .mbsc-snackbar-btn, 56 | &.mbsc-snackbar.mbsc-info .mbsc-snackbar-btn { 57 | color: $light-text; 58 | } 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/scss/notifications/notifications.material.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../popup/popup.material"; 3 | @import "./notifications.material.colors"; 4 | @import "./notifications"; 5 | 6 | @include exports("notifications.material") { 7 | .mbsc-material { 8 | &.mbsc-toast .mbsc-toast-msg { 9 | opacity: .9; 10 | border-radius: 1.571429em; 11 | } 12 | 13 | /* Snackbar and Toast color presets */ 14 | 15 | &.mbsc-snackbar.mbsc-primary .mbsc-fr-w, 16 | &.mbsc-toast.mbsc-primary .mbsc-toast-msg { 17 | background: $mbsc-material-primary; 18 | } 19 | 20 | &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w, 21 | &.mbsc-toast.mbsc-secondary .mbsc-toast-msg { 22 | background: $mbsc-material-secondary; 23 | } 24 | 25 | &.mbsc-snackbar.mbsc-success .mbsc-fr-w, 26 | &.mbsc-toast.mbsc-success .mbsc-toast-msg { 27 | background: $mbsc-material-success; 28 | } 29 | 30 | &.mbsc-snackbar.mbsc-danger .mbsc-fr-w, 31 | &.mbsc-toast.mbsc-danger .mbsc-toast-msg { 32 | background: $mbsc-material-danger; 33 | } 34 | 35 | &.mbsc-snackbar.mbsc-warning .mbsc-fr-w, 36 | &.mbsc-toast.mbsc-warning .mbsc-toast-msg { 37 | background: $mbsc-material-warning; 38 | } 39 | 40 | &.mbsc-snackbar.mbsc-info .mbsc-fr-w, 41 | &.mbsc-toast.mbsc-info .mbsc-toast-msg { 42 | background: $mbsc-material-info; 43 | } 44 | } 45 | 46 | @include mbsc-material-notifications(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent)); 47 | } 48 | -------------------------------------------------------------------------------- /src/scss/notifications/notifications.mobiscroll.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/mobiscroll"; 3 | @import "../popup/popup.mobiscroll.colors"; 4 | 5 | @mixin mbsc-mobiscroll-notifications($theme, $params) { 6 | @include exports("notifications.#{$theme}.colors") { 7 | 8 | @include mbsc-mobiscroll-popup($theme, $params); 9 | 10 | $background: map-get($params, background); 11 | 12 | $colors: mbsc-mobiscroll-colors($params); 13 | $notification: map-get($colors, notification); 14 | $white-text: map-get($colors, white-text); 15 | 16 | .mbsc-#{$theme} { 17 | 18 | &.mbsc-snackbar .mbsc-fr-w, 19 | &.mbsc-toast .mbsc-toast-msg { 20 | background: $notification; 21 | color: $white-text; 22 | } 23 | 24 | /* Snackbar and Toast color presets */ 25 | &.mbsc-snackbar.mbsc-primary .mbsc-fr-w, 26 | &.mbsc-toast.mbsc-primary .mbsc-toast-msg, 27 | &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w, 28 | &.mbsc-toast.mbsc-secondary .mbsc-toast-msg, 29 | &.mbsc-snackbar.mbsc-success .mbsc-fr-w, 30 | &.mbsc-toast.mbsc-success .mbsc-toast-msg, 31 | &.mbsc-snackbar.mbsc-danger .mbsc-fr-w, 32 | &.mbsc-toast.mbsc-danger .mbsc-toast-msg, 33 | &.mbsc-snackbar.mbsc-warning .mbsc-fr-w, 34 | &.mbsc-toast.mbsc-warning .mbsc-toast-msg, 35 | &.mbsc-snackbar.mbsc-info .mbsc-fr-w, 36 | &.mbsc-toast.mbsc-info .mbsc-toast-msg, 37 | &.mbsc-snackbar.mbsc-primary .mbsc-snackbar-btn, 38 | &.mbsc-snackbar.mbsc-secondary .mbsc-snackbar-btn, 39 | &.mbsc-snackbar.mbsc-success .mbsc-snackbar-btn, 40 | &.mbsc-snackbar.mbsc-danger .mbsc-snackbar-btn, 41 | &.mbsc-snackbar.mbsc-warning .mbsc-snackbar-btn, 42 | &.mbsc-snackbar.mbsc-info .mbsc-snackbar-btn { 43 | color: $background; 44 | } 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/scss/notifications/notifications.mobiscroll.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../popup/popup.mobiscroll"; 3 | @import "./notifications.mobiscroll.colors"; 4 | @import "./notifications"; 5 | 6 | @include exports("notifications.mobiscroll") { 7 | .mbsc-mobiscroll { 8 | &.mbsc-toast .mbsc-toast-msg { 9 | opacity: .9; 10 | border-radius: .5em; 11 | } 12 | 13 | /* Snackbar and Toast color presets */ 14 | &.mbsc-snackbar.mbsc-primary .mbsc-fr-w, 15 | &.mbsc-toast.mbsc-primary .mbsc-toast-msg { 16 | background: $mbsc-mobiscroll-primary; 17 | } 18 | 19 | &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w, 20 | &.mbsc-toast.mbsc-secondary .mbsc-toast-msg { 21 | background: $mbsc-mobiscroll-secondary; 22 | } 23 | 24 | &.mbsc-snackbar.mbsc-success .mbsc-fr-w, 25 | &.mbsc-toast.mbsc-success .mbsc-toast-msg { 26 | background: $mbsc-mobiscroll-success; 27 | } 28 | 29 | &.mbsc-snackbar.mbsc-danger .mbsc-fr-w, 30 | &.mbsc-toast.mbsc-danger .mbsc-toast-msg { 31 | background: $mbsc-mobiscroll-danger; 32 | } 33 | 34 | &.mbsc-snackbar.mbsc-warning .mbsc-fr-w, 35 | &.mbsc-toast.mbsc-warning .mbsc-toast-msg { 36 | background: $mbsc-mobiscroll-warning; 37 | } 38 | 39 | &.mbsc-snackbar.mbsc-info .mbsc-fr-w, 40 | &.mbsc-toast.mbsc-info .mbsc-toast-msg { 41 | background: $mbsc-mobiscroll-info; 42 | } 43 | } 44 | 45 | @include mbsc-mobiscroll-notifications(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent)); 46 | } 47 | -------------------------------------------------------------------------------- /src/scss/notifications/notifications.windows.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/windows"; 3 | @import "../popup/popup.windows.colors"; 4 | 5 | @mixin mbsc-windows-notifications($theme, $params) { 6 | @include exports("notifications.#{$theme}.colors") { 7 | 8 | @include mbsc-windows-popup($theme, $params); 9 | 10 | $background: map-get($params, 'background'); 11 | $accent: map-get($params, 'accent'); 12 | 13 | $colors: mbsc-windows-colors($params); 14 | $dark-text: map-get($colors, 'dark-text'); 15 | $light-text: map-get($colors, 'light-text'); 16 | $input-hover: ''; 17 | @if (lightness($background) > 50%) { 18 | $input-hover: darken($background, 55%); 19 | } 20 | @else { 21 | $input-hover: lighten($background, 55%); 22 | } 23 | 24 | .mbsc-#{$theme} { 25 | 26 | /* Snackbar */ 27 | &.mbsc-snackbar .mbsc-snackbar-btn { 28 | color: $accent; 29 | } 30 | 31 | /* Toast */ 32 | &.mbsc-toast .mbsc-toast-msg { 33 | background: $input-hover; 34 | color: get-contrast-color($input-hover); 35 | } 36 | 37 | /* Snackbar and Toast color presets */ 38 | 39 | &.mbsc-snackbar.mbsc-primary .mbsc-fr-w, 40 | &.mbsc-toast.mbsc-primary .mbsc-toast-msg, 41 | &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w, 42 | &.mbsc-toast.mbsc-secondary .mbsc-toast-msg, 43 | &.mbsc-snackbar.mbsc-success .mbsc-fr-w, 44 | &.mbsc-toast.mbsc-success .mbsc-toast-msg, 45 | &.mbsc-snackbar.mbsc-danger .mbsc-fr-w, 46 | &.mbsc-toast.mbsc-danger .mbsc-toast-msg, 47 | &.mbsc-snackbar.mbsc-warning .mbsc-fr-w, 48 | &.mbsc-toast.mbsc-warning .mbsc-toast-msg, 49 | &.mbsc-snackbar.mbsc-info .mbsc-fr-w, 50 | &.mbsc-toast.mbsc-info .mbsc-toast-msg, 51 | &.mbsc-snackbar.mbsc-primary .mbsc-snackbar-btn, 52 | &.mbsc-snackbar.mbsc-secondary .mbsc-snackbar-btn, 53 | &.mbsc-snackbar.mbsc-success .mbsc-snackbar-btn, 54 | &.mbsc-snackbar.mbsc-danger .mbsc-snackbar-btn, 55 | &.mbsc-snackbar.mbsc-info .mbsc-snackbar-btn { 56 | color: $light-text; 57 | } 58 | 59 | &.mbsc-snackbar.mbsc-warning .mbsc-snackbar-btn { 60 | color: $dark-text; 61 | } 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/scss/notifications/notifications.windows.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../popup/popup.windows"; 3 | @import "./notifications.windows.colors"; 4 | @import "./notifications"; 5 | 6 | @include exports("notifications.windows") { 7 | .mbsc-windows { 8 | 9 | /* Toast */ 10 | &.mbsc-toast .mbsc-fr-w, 11 | &.mbsc-snackbar .mbsc-fr-w { 12 | border: 0; 13 | } 14 | 15 | /* Snackbar and Toast color presets */ 16 | &.mbsc-snackbar.mbsc-primary .mbsc-fr-w, 17 | &.mbsc-toast.mbsc-primary .mbsc-toast-msg { 18 | background: $mbsc-windows-primary; 19 | } 20 | 21 | &.mbsc-snackbar.mbsc-secondary .mbsc-fr-w, 22 | &.mbsc-toast.mbsc-secondary .mbsc-toast-msg { 23 | background: $mbsc-windows-secondary; 24 | } 25 | 26 | &.mbsc-snackbar.mbsc-success .mbsc-fr-w, 27 | &.mbsc-toast.mbsc-success .mbsc-toast-msg { 28 | background: $mbsc-windows-success; 29 | } 30 | 31 | &.mbsc-snackbar.mbsc-danger .mbsc-fr-w, 32 | &.mbsc-toast.mbsc-danger .mbsc-toast-msg { 33 | background: $mbsc-windows-danger; 34 | } 35 | 36 | &.mbsc-snackbar.mbsc-warning .mbsc-fr-w, 37 | &.mbsc-toast.mbsc-warning .mbsc-toast-msg { 38 | background: $mbsc-windows-warning; 39 | } 40 | 41 | &.mbsc-snackbar.mbsc-info .mbsc-fr-w, 42 | &.mbsc-toast.mbsc-info .mbsc-toast-msg { 43 | background: $mbsc-windows-info; 44 | } 45 | } 46 | 47 | @include mbsc-windows-notifications(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent)); 48 | } 49 | -------------------------------------------------------------------------------- /src/scss/page/page.bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/common"; 3 | @import "./page"; 4 | -------------------------------------------------------------------------------- /src/scss/page/page.ios.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/ios"; 3 | 4 | // Theme specific variables - inherited from global variables 5 | 6 | // background 7 | $mbsc-ios-page-background: $mbsc-page-background-light !default; 8 | $mbsc-ios-dark-page-background: $mbsc-page-background-dark !default; 9 | 10 | // text 11 | $mbsc-ios-page-text: $mbsc-page-text-light !default; 12 | $mbsc-ios-dark-page-text: $mbsc-page-text-dark !default; 13 | 14 | // add variables to color maps 15 | $mbsc-ios-colors: map-merge($mbsc-ios-colors, ( 16 | 'page-background': $mbsc-ios-page-background, 17 | 'page-text': $mbsc-ios-page-text, 18 | )); 19 | $mbsc-ios-dark-colors: map-merge($mbsc-ios-dark-colors, ( 20 | 'page-background': $mbsc-ios-dark-page-background, 21 | 'page-text': $mbsc-ios-dark-page-text, 22 | )); 23 | 24 | @mixin mbsc-ios-page($theme, $params) { 25 | @include exports("page.#{$theme}.colors") { 26 | 27 | $background: map-get($params, 'background'); 28 | $text: map-get($params, 'text'); 29 | 30 | $colors: mbsc-ios-colors($params); 31 | $button: map-get($colors, 'button'); 32 | 33 | @if (lightness($background) > 50%) { 34 | $background: adjust-hue(darken(saturate($background, 19%), 2%), 240deg); 35 | } 36 | @else { 37 | $background: adjust-hue(lighten(desaturate($background, 19%), 10%), 240deg); 38 | } 39 | 40 | // get custom params 41 | $text-param: map-get($params, 'page-text'); 42 | $background-param: map-get($params, 'page-background'); 43 | // overwrite params with custom variables 44 | $background: if($background-param, $background-param, $background); 45 | $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text)); 46 | 47 | .mbsc-#{$theme} { 48 | &.mbsc-page { 49 | background: $background; 50 | color: $text; 51 | } 52 | 53 | a { 54 | color: $button; 55 | } 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/scss/page/page.ios.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/common"; 3 | @import "./page.ios.colors"; 4 | @import "./page"; 5 | 6 | @include exports("page.ios") { 7 | .mbsc-ios { 8 | .mbsc-note { 9 | border-radius: .25em; 10 | } 11 | 12 | .mbsc-note, 13 | .mbsc-note-primary { 14 | color: darken($mbsc-ios-primary, 30%); 15 | background-color: lighten($mbsc-ios-primary, 20%); 16 | } 17 | 18 | .mbsc-note-secondary { 19 | color: darken($mbsc-ios-secondary, 30%); 20 | background-color: lighten($mbsc-ios-secondary, 20%); 21 | } 22 | 23 | .mbsc-note-success { 24 | color: darken($mbsc-ios-success, 30%); 25 | background-color: lighten($mbsc-ios-success, 20%); 26 | } 27 | 28 | .mbsc-note-danger { 29 | color: darken($mbsc-ios-danger, 30%); 30 | background-color: lighten($mbsc-ios-danger, 20%); 31 | } 32 | 33 | .mbsc-note-warning { 34 | color: darken($mbsc-ios-warning, 30%); 35 | background-color: lighten($mbsc-ios-warning, 20%); 36 | } 37 | 38 | .mbsc-note-info { 39 | color: darken($mbsc-ios-info, 30%); 40 | background-color: lighten($mbsc-ios-info, 20%); 41 | } 42 | 43 | .mbsc-note-light { 44 | color: darken($mbsc-ios-light, 70%); 45 | background-color: lighten($mbsc-ios-light, 20%); 46 | } 47 | 48 | .mbsc-note-dark { 49 | color: darken($mbsc-ios-dark, 30%); 50 | background-color: lighten($mbsc-ios-dark, 20%); 51 | } 52 | } 53 | 54 | @include mbsc-ios-page(ios, $mbsc-ios-colors); 55 | } 56 | -------------------------------------------------------------------------------- /src/scss/page/page.material.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/material"; 3 | 4 | // Theme specific variables - inherited from global variables 5 | 6 | // background 7 | $mbsc-material-page-background: $mbsc-page-background-light !default; 8 | $mbsc-material-dark-page-background: $mbsc-page-background-dark !default; 9 | // text 10 | $mbsc-material-page-text: $mbsc-page-text-light !default; 11 | $mbsc-material-dark-page-text: $mbsc-page-text-dark !default; 12 | 13 | // add variablest to color maps 14 | $mbsc-material-colors: map-merge($mbsc-material-colors, ( 15 | 'page-background': $mbsc-material-page-background, 16 | 'page-text': $mbsc-material-page-text, 17 | )); 18 | $mbsc-material-dark-colors: map-merge($mbsc-material-dark-colors, ( 19 | 'page-background': $mbsc-material-dark-page-background, 20 | 'page-text': $mbsc-material-dark-page-text, 21 | )); 22 | 23 | @mixin mbsc-material-page($theme, $params) { 24 | @include exports("page.#{$theme}.colors") { 25 | @include mbsc-material-common($theme, $params); 26 | 27 | $background: map-get($params, 'background'); 28 | $accent: map-get($params, 'accent'); 29 | $text: map-get($params, 'text'); 30 | 31 | // get custom params 32 | $text-param: map-get($params, 'page-text'); 33 | $background-param: map-get($params, 'page-background'); 34 | // overwrite params with custom variables 35 | $background: if($background-param, $background-param, $background); 36 | $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), lighten($text, 7%))); 37 | 38 | .mbsc-#{$theme} { 39 | &.mbsc-page { 40 | background-color: $background; 41 | color: $text; 42 | } 43 | 44 | a { 45 | color: $accent; 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/scss/page/page.material.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/common"; 3 | @import "./page.material.colors"; 4 | @import "./page"; 5 | 6 | @include exports("page.material") { 7 | .mbsc-material { 8 | .mbsc-note { 9 | border-radius: .1875em; 10 | } 11 | 12 | /* Note */ 13 | .mbsc-note, 14 | .mbsc-note-primary { 15 | color: darken($mbsc-material-primary, 30%); 16 | background-color: lighten($mbsc-material-primary, 15%); 17 | } 18 | 19 | .mbsc-note-secondary { 20 | color: darken($mbsc-material-secondary, 30%); 21 | background-color: lighten($mbsc-material-secondary, 15%); 22 | } 23 | 24 | .mbsc-note-success { 25 | color: darken($mbsc-material-success, 30%); 26 | background-color: lighten($mbsc-material-success, 15%); 27 | } 28 | 29 | .mbsc-note-danger { 30 | color: darken($mbsc-material-danger, 30%); 31 | background-color: lighten($mbsc-material-danger, 15%); 32 | } 33 | 34 | .mbsc-note-warning { 35 | color: darken($mbsc-material-warning, 30%); 36 | background-color: lighten($mbsc-material-warning, 15%); 37 | } 38 | 39 | .mbsc-note-info { 40 | color: darken($mbsc-material-info, 30%); 41 | background-color: lighten($mbsc-material-info, 15%); 42 | } 43 | 44 | .mbsc-note-light { 45 | color: darken($mbsc-material-light, 60%); 46 | background-color: lighten($mbsc-material-light, 10%); 47 | } 48 | 49 | .mbsc-note-dark { 50 | color: darken($mbsc-material-dark, 30%); 51 | background-color: lighten($mbsc-material-dark, 20%); 52 | } 53 | } 54 | 55 | @include mbsc-material-page(material, $mbsc-material-colors); 56 | } 57 | -------------------------------------------------------------------------------- /src/scss/page/page.mobiscroll.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/mobiscroll"; 3 | 4 | // Theme specific variables - inherited from global variables 5 | 6 | // background 7 | $mbsc-mobiscroll-page-background: $mbsc-page-background-light !default; 8 | $mbsc-mobiscroll-dark-page-background: $mbsc-page-background-dark !default; 9 | 10 | // text 11 | $mbsc-mobiscroll-page-text: $mbsc-page-text-light !default; 12 | $mbsc-mobiscroll-dark-page-text: $mbsc-page-text-dark !default; 13 | 14 | // add variables to color maps 15 | $mbsc-mobiscroll-colors: map-merge($mbsc-mobiscroll-colors, ( 16 | 'page-background': $mbsc-mobiscroll-page-background, 17 | 'page-text': $mbsc-mobiscroll-page-text, 18 | )); 19 | $mbsc-mobiscroll-dark-colors: map-merge($mbsc-mobiscroll-dark-colors, ( 20 | 'page-background': $mbsc-mobiscroll-dark-page-background, 21 | 'page-text': $mbsc-mobiscroll-dark-page-text, 22 | )); 23 | 24 | @mixin mbsc-mobiscroll-page($theme, $params) { 25 | @include exports("page.#{$theme}.colors") { 26 | @include mbsc-mobiscroll-common($theme, $params); 27 | 28 | $text: map-get($params, 'text'); 29 | $accent: map-get($params, 'accent'); 30 | $background: map-get($params, 'background'); 31 | // get custom params 32 | $text-param: map-get($params, 'page-text'); 33 | $background-param: map-get($params, 'page-background'); 34 | // overwrite params with custom variables 35 | $background: if($background-param, $background-param, $background); 36 | $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text)); 37 | 38 | .mbsc-#{$theme} { 39 | &.mbsc-page { 40 | background: $background; 41 | color: $text; 42 | } 43 | 44 | a { 45 | color: $accent; 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/scss/page/page.mobiscroll.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/common"; 3 | @import "./page.mobiscroll.colors"; 4 | @import "./page"; 5 | 6 | @include exports("page.mobiscroll") { 7 | .mbsc-mobiscroll { 8 | 9 | /* Note */ 10 | .mbsc-note { 11 | border-radius: .1875em; 12 | } 13 | 14 | .mbsc-note, 15 | .mbsc-note-primary { 16 | color: darken($mbsc-mobiscroll-primary, 30%); 17 | background-color: lighten($mbsc-mobiscroll-primary, 20%); 18 | } 19 | 20 | .mbsc-note-secondary { 21 | color: darken($mbsc-mobiscroll-secondary, 30%); 22 | background-color: lighten($mbsc-mobiscroll-secondary, 20%); 23 | } 24 | 25 | .mbsc-note-success { 26 | color: darken($mbsc-mobiscroll-success, 30%); 27 | background-color: lighten($mbsc-mobiscroll-success, 20%); 28 | } 29 | 30 | .mbsc-note-danger { 31 | color: darken($mbsc-mobiscroll-danger, 30%); 32 | background-color: lighten($mbsc-mobiscroll-danger, 20%); 33 | } 34 | 35 | .mbsc-note-warning { 36 | color: darken($mbsc-mobiscroll-warning, 25%); 37 | background-color: lighten($mbsc-mobiscroll-warning, 20%); 38 | } 39 | 40 | .mbsc-note-info { 41 | color: darken($mbsc-mobiscroll-info, 30%); 42 | background-color: lighten($mbsc-mobiscroll-info, 20%); 43 | } 44 | 45 | .mbsc-note-light { 46 | color: darken($mbsc-mobiscroll-light, 60%); 47 | background-color: darken($mbsc-mobiscroll-light, 5%); 48 | } 49 | 50 | .mbsc-note-dark { 51 | color: darken($mbsc-mobiscroll-dark, 30%); 52 | background-color: lighten($mbsc-mobiscroll-dark, 40%); 53 | } 54 | } 55 | 56 | @include mbsc-mobiscroll-page(mobiscroll, $mbsc-mobiscroll-colors); 57 | } 58 | -------------------------------------------------------------------------------- /src/scss/page/page.windows.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/windows"; 3 | 4 | // Theme specific variables - inherited from global variables 5 | 6 | // background 7 | $mbsc-windows-page-background: $mbsc-page-background-light !default; 8 | $mbsc-windows-dark-page-background: $mbsc-page-background-dark !default; 9 | 10 | // text 11 | $mbsc-windows-page-text: $mbsc-page-text-light !default; 12 | $mbsc-windows-dark-page-text: $mbsc-page-text-dark !default; 13 | 14 | // add variables to color maps 15 | $mbsc-windows-colors: map-merge($mbsc-windows-colors, ( 16 | 'page-background': $mbsc-windows-page-background, 17 | 'page-text': $mbsc-windows-page-text, 18 | )); 19 | $mbsc-windows-dark-colors: map-merge($mbsc-windows-dark-colors, ( 20 | 'page-background': $mbsc-windows-dark-page-background, 21 | 'page-text': $mbsc-windows-dark-page-text, 22 | )); 23 | 24 | @mixin mbsc-windows-page($theme, $params) { 25 | @include exports("page.#{$theme}.colors") { 26 | @include mbsc-windows-common($theme, $params); 27 | 28 | $background: map-get($params, 'background'); 29 | $text: map-get($params, 'text'); 30 | $accent: map-get($params, 'accent'); 31 | 32 | @if (lightness($background) > 50%) { 33 | $background: lighten($background, 13%); 34 | } 35 | @else { 36 | $background: darken($background, 12%); 37 | } 38 | 39 | 40 | // get custom params 41 | $text-param: map-get($params, 'page-text'); 42 | $background-param: map-get($params, 'page-background'); 43 | // overwrite params with custom variables 44 | $background: if($background-param, $background-param, $background); 45 | $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text)); 46 | 47 | .mbsc-#{$theme} { 48 | &.mbsc-page { 49 | background-color: $background; 50 | color: $text; 51 | } 52 | 53 | a { 54 | color: $accent; 55 | } 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/scss/page/page.windows.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/common"; 3 | @import "./page.windows.colors"; 4 | @import "./page"; 5 | 6 | @include exports("page.windows") { 7 | .mbsc-windows { 8 | 9 | /* Note */ 10 | .mbsc-note, 11 | .mbsc-note-primary { 12 | color: darken($mbsc-windows-primary, 30%); 13 | background-color: lighten($mbsc-windows-primary, 10%); 14 | } 15 | 16 | .mbsc-note-secondary { 17 | color: darken($mbsc-windows-secondary, 30%); 18 | background-color: lighten($mbsc-windows-secondary, 20%); 19 | } 20 | 21 | .mbsc-note-success { 22 | color: darken($mbsc-windows-success, 30%); 23 | background-color: lighten($mbsc-windows-success, 20%); 24 | } 25 | 26 | .mbsc-note-danger { 27 | color: darken($mbsc-windows-danger, 40%); 28 | background-color: lighten($mbsc-windows-danger, 10%); 29 | } 30 | 31 | .mbsc-note-warning { 32 | color: darken($mbsc-windows-warning, 35%); 33 | background-color: lighten($mbsc-windows-warning, 5%); 34 | } 35 | 36 | .mbsc-note-info { 37 | color: darken($mbsc-windows-info, 30%); 38 | background-color: lighten($mbsc-windows-info, 20%); 39 | } 40 | 41 | .mbsc-note-light { 42 | color: darken($mbsc-windows-light, 70%); 43 | background-color: lighten($mbsc-windows-light, 10%); 44 | } 45 | 46 | .mbsc-note-dark { 47 | color: darken($mbsc-windows-dark, 30%); 48 | background-color: lighten($mbsc-windows-dark, 10%); 49 | } 50 | } 51 | 52 | @include mbsc-windows-page(windows, $mbsc-windows-colors); 53 | } 54 | -------------------------------------------------------------------------------- /src/scss/popup/popup.bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "../frame/frame.bootstrap"; 2 | @import "./popup"; 3 | -------------------------------------------------------------------------------- /src/scss/popup/popup.ios.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/ios"; 3 | @import "../frame/frame.ios.colors"; 4 | 5 | @mixin mbsc-ios-popup($theme, $params) { 6 | @include exports("popup.#{$theme}.colors") { 7 | 8 | @include mbsc-ios-frame($theme, $params); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/scss/popup/popup.ios.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../frame/frame.ios"; 3 | @import "./popup.ios.colors"; 4 | @import "./popup"; 5 | 6 | @include exports("popup.ios") { 7 | @include mbsc-ios-popup(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent)); 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/popup/popup.material.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/material"; 3 | @import "../frame/frame.material.colors"; 4 | 5 | @mixin mbsc-material-popup($theme, $params) { 6 | @include exports("popup.#{$theme}.colors") { 7 | 8 | @include mbsc-material-frame($theme, $params); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/scss/popup/popup.material.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../frame/frame.material"; 3 | @import "./popup.material.colors"; 4 | @import "./popup"; 5 | 6 | @include exports("popup.material") { 7 | @include mbsc-material-popup(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent)); 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/popup/popup.mobiscroll.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/mobiscroll"; 3 | @import "../frame/frame.mobiscroll.colors"; 4 | 5 | @mixin mbsc-mobiscroll-popup($theme, $params) { 6 | @include exports("popup.#{$theme}.colors") { 7 | 8 | @include mbsc-mobiscroll-frame($theme, $params); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/scss/popup/popup.mobiscroll.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../frame/frame.mobiscroll"; 3 | @import "./popup.mobiscroll.colors"; 4 | @import "./popup"; 5 | 6 | @include exports("popup.mobiscroll") { 7 | @include mbsc-mobiscroll-popup(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent)); 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/popup/popup.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../frame/frame"; 3 | 4 | @include exports("popup") { 5 | 6 | .mbsc-wdg .mbsc-wdg-c { 7 | position: relative; 8 | z-index: 0; 9 | font-size: 14px; 10 | white-space: normal; 11 | -webkit-user-select: text; 12 | -moz-user-select: text; 13 | -ms-user-select: text; 14 | user-select: text; 15 | } 16 | 17 | .mbsc-wdg .mbsc-ltr .mbsc-wdg-c { 18 | text-align: left; 19 | } 20 | 21 | .mbsc-wdg .mbsc-rtl .mbsc-wdg-c { 22 | text-align: right; 23 | } 24 | 25 | .mbsc-wdg .mbsc-wdg-c.mbsc-w-p { 26 | padding: 1em; 27 | } 28 | 29 | .mbsc-no-padding.mbsc-wdg .mbsc-wdg-c.mbsc-w-p { 30 | padding: 0; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/scss/popup/popup.windows.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/windows"; 3 | @import "../frame/frame.windows.colors"; 4 | 5 | @mixin mbsc-windows-popup($theme, $params) { 6 | @include exports("popup.#{$theme}.colors") { 7 | 8 | @include mbsc-windows-frame($theme, $params); 9 | $colors: mbsc-windows-colors($params); 10 | $frame-border: map-get($colors, frame-border); 11 | 12 | .mbsc-#{$theme} { 13 | &.mbsc-wdg.mbsc-fr-btn { 14 | background: $frame-border; 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/popup/popup.windows.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../frame/frame.windows"; 3 | @import "./popup.windows.colors"; 4 | @import "./popup"; 5 | 6 | @include exports("popup.windows") { 7 | .mbsc-windows.mbsc-wdg { 8 | .mbsc-fr-btn-cont { 9 | padding: 1em .875em; 10 | border-top: 0; 11 | } 12 | 13 | .mbsc-fr-btn { 14 | margin: 0 .125em; 15 | height: 2em; 16 | line-height: 2em; 17 | } 18 | } 19 | 20 | @include mbsc-windows-popup(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent)); 21 | } 22 | -------------------------------------------------------------------------------- /src/scss/progress/progress.bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/icons"; 3 | -------------------------------------------------------------------------------- /src/scss/progress/progress.ios.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/ios"; 3 | 4 | @mixin mbsc-ios-progress($theme, $params) { 5 | @include exports("progress.#{$theme}.colors") { 6 | 7 | $accent: map-get($params, accent); 8 | 9 | $colors: mbsc-ios-colors($params); 10 | $cont-background: map-get($colors, cont-background); 11 | $slider-track-step: map-get($colors, slider-track-step); 12 | $slider-tooltip: map-get($colors, slider-tooltip); 13 | 14 | .mbsc-#{$theme} { 15 | 16 | &.mbsc-form .mbsc-progress, 17 | &.mbsc-input-box.mbsc-progress, 18 | &.mbsc-input-outline.mbsc-progress { 19 | background: $cont-background; 20 | } 21 | 22 | .mbsc-progress-track { 23 | background: $slider-track-step; 24 | } 25 | 26 | .mbsc-progress-bar { 27 | background: $accent; 28 | } 29 | 30 | .mbsc-progress-value, 31 | .mbsc-progress-step-label { 32 | color: $slider-tooltip; 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/progress/progress.material.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/material"; 3 | 4 | @mixin mbsc-material-progress($theme, $params) { 5 | @include exports("progress.#{$theme}.colors") { 6 | 7 | $accent: map-get($params, accent); 8 | 9 | $colors: mbsc-material-colors($params); 10 | $gray-background: map-get($colors, gray-background); 11 | 12 | .mbsc-#{$theme} { 13 | .mbsc-progress-track { 14 | background: $gray-background; 15 | } 16 | 17 | .mbsc-progress-bar { 18 | background: $accent; 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/scss/progress/progress.mobiscroll.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/mobiscroll"; 3 | 4 | @mixin mbsc-mobiscroll-progress($theme, $params) { 5 | @include exports("progress.#{$theme}.colors") { 6 | 7 | $background: map-get($params, 'background'); 8 | $accent: map-get($params, 'accent'); 9 | $text: map-get($params, 'text'); 10 | // derived colors 11 | $input-icon: lighten($text, 20%); 12 | 13 | $track: ''; 14 | // Light background 15 | @if (lightness($background) > 50%) { 16 | $track: darken($background, 10%); 17 | } 18 | // Dark background 19 | @else { 20 | $track: lighten($background, 8%); 21 | } 22 | 23 | .mbsc-#{$theme} { 24 | &.mbsc-progress .mbsc-input-ic { 25 | color: $input-icon; 26 | } 27 | 28 | .mbsc-progress-track { 29 | background: $track; 30 | } 31 | 32 | .mbsc-progress-bar { 33 | background: $accent; 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/scss/progress/progress.windows.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/windows"; 3 | 4 | @mixin mbsc-windows-progress($theme, $params) { 5 | @include exports("progress.#{$theme}.colors") { 6 | 7 | $text: map-get($params, text); 8 | $accent: map-get($params, accent); 9 | 10 | $colors: mbsc-windows-colors($params); 11 | $gray-background: map-get($colors, gray-background); 12 | $progress-background: map-get($colors, progress-background); 13 | 14 | .mbsc-#{$theme} { 15 | 16 | &.mbsc-progress .mbsc-label, 17 | &.mbsc-progress .mbsc-input-ic { 18 | color: $text; 19 | } 20 | 21 | .mbsc-progress-track { 22 | background: $progress-background; 23 | } 24 | 25 | .mbsc-progress-bar { 26 | background: $accent; 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/scss/rating/rating.bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../progress/progress.bootstrap"; 3 | @import "./rating"; 4 | -------------------------------------------------------------------------------- /src/scss/rating/rating.ios.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/ios"; 3 | @import "../progress/progress.ios.colors"; 4 | 5 | @mixin mbsc-ios-rating($theme, $params) { 6 | @include exports("rating.#{$theme}.colors") { 7 | 8 | @include mbsc-ios-progress($theme, $params); 9 | 10 | $accent: map-get($params, accent); 11 | 12 | .mbsc-#{$theme}.mbsc-rating { 13 | .mbsc-progress-track { 14 | color: $accent; 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/rating/rating.ios.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../progress/progress.ios"; 3 | @import "./rating.ios.colors"; 4 | @import "./rating"; 5 | 6 | @include exports("rating.ios") { 7 | .mbsc-ios.mbsc-rating { 8 | &.mbsc-progress .mbsc-input-wrap { 9 | padding: 0; 10 | } 11 | 12 | input:disabled ~ .mbsc-progress-cont .mbsc-progress-track { 13 | opacity: .4; 14 | } 15 | 16 | /* Color presets */ 17 | &.mbsc-rating-primary .mbsc-progress-track { 18 | color: $mbsc-ios-primary; 19 | } 20 | 21 | &.mbsc-rating-secondary .mbsc-progress-track { 22 | color: $mbsc-ios-secondary; 23 | } 24 | 25 | &.mbsc-rating-success .mbsc-progress-track { 26 | color: $mbsc-ios-success; 27 | } 28 | 29 | &.mbsc-rating-danger .mbsc-progress-track { 30 | color: $mbsc-ios-danger; 31 | } 32 | 33 | &.mbsc-rating-warning .mbsc-progress-track { 34 | color: $mbsc-ios-warning; 35 | } 36 | 37 | &.mbsc-rating-info .mbsc-progress-track { 38 | color: $mbsc-ios-info; 39 | } 40 | } 41 | 42 | @include mbsc-ios-rating(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent)); 43 | } 44 | -------------------------------------------------------------------------------- /src/scss/rating/rating.material.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/material"; 3 | @import "../progress/progress.material.colors"; 4 | 5 | @mixin mbsc-material-rating($theme, $params) { 6 | @include exports("rating.#{$theme}.colors") { 7 | 8 | @include mbsc-material-progress($theme, $params); 9 | 10 | $accent: map-get($params, accent); 11 | 12 | .mbsc-#{$theme}.mbsc-rating { 13 | .mbsc-progress-track { 14 | color: $accent; 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/rating/rating.material.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../progress/progress.material"; 3 | @import "./rating.material.colors"; 4 | @import "./rating"; 5 | 6 | @include exports("rating.material") { 7 | .mbsc-material.mbsc-rating { 8 | .mbsc-slider-handle:before { 9 | display: none; 10 | } 11 | 12 | .mbsc-label { 13 | padding-bottom: .5em; 14 | } 15 | 16 | input:disabled ~ .mbsc-progress-cont .mbsc-progress-track { 17 | opacity: .4; 18 | } 19 | 20 | &.mbsc-rating-primary .mbsc-progress-track { 21 | color: $mbsc-material-primary; 22 | } 23 | 24 | &.mbsc-rating-secondary .mbsc-progress-track { 25 | color: $mbsc-material-secondary; 26 | } 27 | 28 | &.mbsc-rating-success .mbsc-progress-track { 29 | color: $mbsc-material-success; 30 | } 31 | 32 | &.mbsc-rating-danger .mbsc-progress-track { 33 | color: $mbsc-material-danger; 34 | } 35 | 36 | &.mbsc-rating-warning .mbsc-progress-track { 37 | color: $mbsc-material-warning; 38 | } 39 | 40 | &.mbsc-rating-info .mbsc-progress-track { 41 | color: $mbsc-material-info; 42 | } 43 | } 44 | 45 | @include mbsc-material-rating(material, (background: $mbsc-material-background, text: $mbsc-material-text, accent: $mbsc-material-accent)); 46 | } 47 | -------------------------------------------------------------------------------- /src/scss/rating/rating.mobiscroll.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/mobiscroll"; 3 | @import "../progress/progress.mobiscroll.colors"; 4 | 5 | @mixin mbsc-mobiscroll-rating($theme, $params) { 6 | @include exports("rating.#{$theme}.colors") { 7 | 8 | @include mbsc-mobiscroll-progress($theme, $params); 9 | 10 | $accent: map-get($params, accent); 11 | 12 | .mbsc-#{$theme}.mbsc-rating { 13 | .mbsc-progress-track { 14 | color: $accent; 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/rating/rating.mobiscroll.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../progress/progress.mobiscroll"; 3 | @import "./rating.mobiscroll.colors"; 4 | @import "./rating"; 5 | 6 | @include exports("rating.mobiscroll") { 7 | .mbsc-mobiscroll.mbsc-rating { 8 | .mbsc-label { 9 | padding-bottom: .5em; 10 | } 11 | 12 | input:disabled ~ .mbsc-progress-cont .mbsc-progress-track { 13 | opacity: .4; 14 | } 15 | 16 | &.mbsc-rating-primary .mbsc-progress-track { 17 | color: $mbsc-mobiscroll-primary; 18 | } 19 | 20 | &.mbsc-rating-secondary .mbsc-progress-track { 21 | color: $mbsc-mobiscroll-secondary; 22 | } 23 | 24 | &.mbsc-rating-success .mbsc-progress-track { 25 | color: $mbsc-mobiscroll-success; 26 | } 27 | 28 | &.mbsc-rating-danger .mbsc-progress-track { 29 | color: $mbsc-mobiscroll-danger; 30 | } 31 | 32 | &.mbsc-rating-warning .mbsc-progress-track { 33 | color: $mbsc-mobiscroll-warning; 34 | } 35 | 36 | &.mbsc-rating-info .mbsc-progress-track { 37 | color: $mbsc-mobiscroll-info; 38 | } 39 | } 40 | 41 | @include mbsc-mobiscroll-rating(mobiscroll, (background: $mbsc-mobiscroll-background, text: $mbsc-mobiscroll-text, accent: $mbsc-mobiscroll-accent)); 42 | } 43 | -------------------------------------------------------------------------------- /src/scss/rating/rating.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../progress/progress"; 3 | 4 | @include exports("rating") { 5 | .mbsc-rating { 6 | &.mbsc-progress .mbsc-progress-cont { 7 | display: inline-block; 8 | width: auto; 9 | padding: 0 .5em; 10 | margin: 0 -.681818em; 11 | cursor: pointer; 12 | } 13 | 14 | .mbsc-progress-cont .mbsc-progress-track { 15 | height: auto; 16 | background: none; 17 | } 18 | 19 | .mbsc-ic { 20 | font-size: 1.375em; 21 | margin: 0 0.181818em; 22 | } 23 | 24 | &.mbsc-progress input { 25 | display: none; 26 | } 27 | 28 | &.mbsc-progress .mbsc-progress-cont .mbsc-slider-handle { 29 | display: block; 30 | position: absolute; 31 | width: 100%; 32 | height: 100%; 33 | margin: 0; 34 | top: 0; 35 | left: 0; 36 | right: 0; 37 | background: none; 38 | box-shadow: none; 39 | border: 0; 40 | -webkit-transform: none; 41 | transform: none; 42 | } 43 | 44 | .mbsc-progress-cont .mbsc-progress-bar { 45 | background: none; 46 | overflow: hidden; 47 | white-space: nowrap; 48 | border-radius: 0; 49 | transition: none; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/scss/rating/rating.windows.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/windows"; 3 | @import "../progress/progress.windows.colors"; 4 | 5 | @mixin mbsc-windows-rating($theme, $params) { 6 | @include exports("rating.#{$theme}.colors") { 7 | 8 | @include mbsc-windows-progress($theme, $params); 9 | 10 | $accent: map-get($params, accent); 11 | 12 | .mbsc-#{$theme}.mbsc-rating { 13 | .mbsc-progress-track { 14 | color: $accent; 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/rating/rating.windows.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../progress/progress.windows"; 3 | @import "./rating.windows.colors"; 4 | @import "./rating"; 5 | 6 | @include exports("rating.windows") { 7 | .mbsc-windows.mbsc-rating { 8 | input:disabled ~ .mbsc-progress-cont .mbsc-progress-track { 9 | opacity: .4; 10 | } 11 | 12 | /* Color presets */ 13 | &.mbsc-rating-primary .mbsc-progress-track { 14 | color: $mbsc-windows-primary; 15 | } 16 | 17 | &.mbsc-rating-secondary .mbsc-progress-track { 18 | color: $mbsc-windows-secondary; 19 | } 20 | 21 | &.mbsc-rating-success .mbsc-progress-track { 22 | color: $mbsc-windows-success; 23 | } 24 | 25 | &.mbsc-rating-danger .mbsc-progress-track { 26 | color: $mbsc-windows-danger; 27 | } 28 | 29 | &.mbsc-rating-warning .mbsc-progress-track { 30 | color: $mbsc-windows-warning; 31 | } 32 | 33 | &.mbsc-rating-info .mbsc-progress-track { 34 | color: $mbsc-windows-info; 35 | } 36 | } 37 | 38 | @include mbsc-windows-rating(windows, (background: $mbsc-windows-background, text: $mbsc-windows-text, accent: $mbsc-windows-accent)); 39 | } 40 | -------------------------------------------------------------------------------- /src/scss/scroller/scroller.bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../frame/frame.bootstrap"; 3 | @import "./scroller"; 4 | 5 | /* Scroller */ 6 | .mbsc-bootstrap { 7 | .mbsc-sc-whl-gr-c { 8 | overflow: visible; 9 | } 10 | 11 | .mbsc-sc-whl-gr { 12 | padding: 4px 2px; 13 | } 14 | 15 | .mbsc-sc-lbl-v .mbsc-sc-whl-gr { 16 | padding-top: 30px; 17 | } 18 | 19 | .mbsc-sc-lbl { 20 | line-height: 30px; 21 | } 22 | 23 | .mbsc-sc-whl-w { 24 | margin: 0 2px; 25 | } 26 | 27 | .mbsc-sc-whl-l { 28 | margin: 0 -2px; 29 | background: rgba(0, 0, 0, .2); 30 | } 31 | 32 | .mbsc-ltr .mbsc-sc-whl-w:first-child .mbsc-sc-whl-l, 33 | .mbsc-rtl .mbsc-sc-whl-w:last-child .mbsc-sc-whl-l { 34 | margin-left: -4px; 35 | } 36 | 37 | .mbsc-ltr .mbsc-sc-whl-w:last-child .mbsc-sc-whl-l, 38 | .mbsc-rtl .mbsc-sc-whl-w:first-child .mbsc-sc-whl-l { 39 | margin-right: -4px; 40 | } 41 | 42 | .mbsc-sc-itm { 43 | padding: 0 5px; 44 | font-size: 18px; 45 | } 46 | 47 | .mbsc-sc-itm.mbsc-active { 48 | background: rgba(0, 0, 0, .1); 49 | } 50 | 51 | 52 | /* Clickpick mode */ 53 | 54 | .mbsc-sc-cp .mbsc-sc-whl-w { 55 | padding: 30px 0; 56 | } 57 | 58 | .mbsc-sc-btn { 59 | height: 30px !important; 60 | line-height: 30px !important; 61 | } 62 | 63 | .mbsc-sc-btn-plus { 64 | top: auto; 65 | } 66 | 67 | .mbsc-sc-btn.mbsc-active { 68 | background: rgba(0, 0, 0, .1); 69 | } 70 | 71 | 72 | /* Multiple select */ 73 | 74 | .mbsc-sc-whl-multi .mbsc-sc-itm { 75 | padding: 0 40px; 76 | } 77 | 78 | .mbsc-sc-whl-multi .mbsc-sc-itm-sel:before { 79 | width: 40px; 80 | font-size: 16px; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /src/scss/scroller/scroller.material.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/material"; 3 | @import "../frame/frame.material.colors"; 4 | 5 | @mixin mbsc-material-scroller($theme, $params) { 6 | @include exports("scroller.#{$theme}.colors") { 7 | 8 | @include mbsc-material-frame($theme, $params); 9 | 10 | $background: map-get($params, 'background'); 11 | $accent: map-get($params, 'accent'); 12 | 13 | $background-param: map-get($params, 'frame-background'); 14 | $accent-param: map-get($params, 'frame-accent'); 15 | 16 | $background: if($background-param, $background-param, $background); 17 | $accent: if($accent-param, $accent-param, $accent); 18 | 19 | .mbsc-#{$theme} { 20 | .mbsc-sc-lbl { 21 | color: $accent; 22 | } 23 | 24 | &.mbsc-no-touch .mbsc-sc-itm.mbsc-btn-e:hover, 25 | .mbsc-sc-itm:focus { 26 | background: rgba(0, 0, 0, .05); 27 | } 28 | 29 | &.mbsc-sc .mbsc-sc-whl .mbsc-sc-itm.mbsc-active { 30 | background: rgba(0, 0, 0, .1); 31 | } 32 | 33 | .mbsc-sc-whl-l { 34 | border-top: 2px solid $accent; 35 | border-bottom: 2px solid $accent; 36 | } 37 | 38 | /* Clickpick mode */ 39 | 40 | .mbsc-sc-btn { 41 | color: $accent; 42 | background: $background; 43 | } 44 | 45 | &.mbsc-no-touch .mbsc-sc-btn:hover, 46 | .mbsc-sc-btn.mbsc-active { 47 | background: rgba(0, 0, 0, .1); 48 | } 49 | 50 | /* Multiple select */ 51 | 52 | .mbsc-sc-whl-multi .mbsc-sc-itm-sel:before { 53 | color: $accent; 54 | } 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/scss/scroller/scroller.mobiscroll.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/mobiscroll"; 3 | @import "../frame/frame.mobiscroll.colors"; 4 | 5 | @mixin mbsc-mobiscroll-scroller($theme, $params) { 6 | @include exports("scroller.#{$theme}.colors") { 7 | 8 | @include mbsc-mobiscroll-frame($theme, $params); 9 | 10 | $background: map-get($params, 'background'); 11 | $accent: map-get($params, 'accent'); 12 | $text: map-get($params, 'text'); 13 | 14 | $background-param: map-get($params, 'frame-background'); 15 | $text-param: map-get($params, 'frame-text'); 16 | $accent-param: map-get($params, 'frame-accent'); 17 | 18 | $background: if($background-param, $background-param, $background); 19 | $text: if($text-param, $text-param, if($background-param, get-contrast-color($background-param), $text)); 20 | $accent: if($accent-param, $accent-param, $accent); 21 | 22 | .mbsc-#{$theme} { 23 | .mbsc-sc-lbl { 24 | color: $accent; 25 | } 26 | 27 | .mbsc-sc-whl-l { 28 | border-top: 1px solid $accent; 29 | border-bottom: 1px solid $accent; 30 | } 31 | 32 | .mbsc-sc-btn { 33 | color: $accent; 34 | background: $background; 35 | } 36 | 37 | &.mbsc-no-touch .mbsc-sc-itm.mbsc-btn-e:hover, 38 | .mbsc-sc-itm:focus { 39 | background: rgba($text, .1); 40 | } 41 | 42 | &.mbsc-no-touch .mbsc-sc-btn:hover:before, 43 | &.mbsc-sc .mbsc-sc-whl .mbsc-sc-itm.mbsc-active, 44 | .mbsc-sc-btn.mbsc-active:before { 45 | background: rgba($accent, .3); 46 | } 47 | 48 | /* Multiple select */ 49 | .mbsc-sc-whl-multi { 50 | .mbsc-sc-itm-sel:before { 51 | color: $accent; 52 | } 53 | } 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/scss/scroller/scroller.mobiscroll.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../frame/frame.mobiscroll"; 3 | @import "./scroller.mobiscroll.colors"; 4 | @import "./scroller"; 5 | 6 | @include exports("scroller.mobiscroll") { 7 | .mbsc-mobiscroll { 8 | .mbsc-sc-whl-gr { 9 | padding: .5em .25em; 10 | } 11 | 12 | .mbsc-sc-whl-w { 13 | margin: 0 .25em; 14 | } 15 | 16 | .mbsc-sc-lbl-v .mbsc-sc-whl-w { 17 | margin-top: 1.875em; 18 | } 19 | 20 | .mbsc-sc-lbl { 21 | font-size: .75em; 22 | line-height: 2.5em; 23 | text-transform: uppercase; 24 | } 25 | 26 | .mbsc-sc-cp .mbsc-sc-whl-w { 27 | padding: 2em 0; 28 | } 29 | 30 | .mbsc-sc-btn { 31 | height: 2em; 32 | line-height: 2em; 33 | } 34 | 35 | .mbsc-sc-btn:before { 36 | font-size: 1.5em; 37 | } 38 | 39 | .mbsc-sc-itm { 40 | padding: 0 .25em; 41 | font-size: 1.375em; 42 | } 43 | 44 | &.mbsc-no-touch .mbsc-sc-itm.mbsc-btn-e:hover, 45 | .mbsc-sc-itm:focus { 46 | outline: 0; 47 | } 48 | 49 | /* Multiple select */ 50 | .mbsc-sc-whl-multi { 51 | .mbsc-sc-itm { 52 | padding: 0 1.818181em; 53 | } 54 | 55 | .mbsc-sc-itm-sel:before { 56 | font-size: 1.818181em; 57 | } 58 | } 59 | 60 | /* Desktop view */ 61 | &.mbsc-fr-pointer { 62 | .mbsc-sc-lbl { 63 | padding-left: 1.666667em; 64 | padding-right: 1.666667em; 65 | } 66 | 67 | .mbsc-sc-whl-w { 68 | margin-left: 0; 69 | margin-right: 0; 70 | } 71 | 72 | .mbsc-sc-itm { 73 | font-size: 1em; 74 | padding: 0 1.25em; 75 | } 76 | 77 | .mbsc-sc-whl-multi { 78 | .mbsc-sc-itm { 79 | padding: 0 2.5em; 80 | } 81 | 82 | .mbsc-sc-itm-sel:before { 83 | font-size: 2em; 84 | } 85 | } 86 | 87 | .mbsc-ltr .mbsc-sc-whl-multi .mbsc-sc-itm-sel:before { 88 | left: .125em; 89 | } 90 | 91 | .mbsc-rtl .mbsc-sc-whl-multi .mbsc-sc-itm-sel:before { 92 | right: .125em; 93 | } 94 | } 95 | } 96 | 97 | @include mbsc-mobiscroll-scroller(mobiscroll, $mbsc-mobiscroll-colors); 98 | } 99 | -------------------------------------------------------------------------------- /src/scss/slider/slider.bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../page/page.bootstrap"; 3 | @import "../progress/progress.bootstrap"; 4 | @import "./slider"; 5 | -------------------------------------------------------------------------------- /src/scss/slider/slider.ios.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/ios"; 3 | @import "../page/page.ios.colors"; 4 | @import "../progress/progress.ios.colors"; 5 | 6 | @mixin mbsc-ios-slider($theme, $params) { 7 | @include exports("slider.#{$theme}.colors") { 8 | 9 | @include mbsc-ios-page($theme, $params); 10 | @include mbsc-ios-progress($theme, $params); 11 | 12 | $colors: mbsc-ios-colors($params); 13 | $slider-tooltip: map-get($colors, slider-tooltip); 14 | $slider-track-step: map-get($colors, slider-track-step); 15 | $cont-background: map-get($colors, cont-background); 16 | 17 | .mbsc-#{$theme} { 18 | .mbsc-slider-handle { 19 | background: #fff; 20 | } 21 | 22 | .mbsc-slider-tooltip { 23 | color: $slider-tooltip; 24 | background: $cont-background; 25 | } 26 | 27 | .mbsc-slider-step { 28 | background: $slider-track-step; 29 | } 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/scss/slider/slider.ios.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../page/page.ios"; 3 | @import "../progress/progress.ios"; 4 | @import "./slider.ios.colors"; 5 | @import "./slider"; 6 | 7 | @include exports("slider.ios") { 8 | .mbsc-ios { 9 | 10 | .mbsc-slider-handle { 11 | top: 50%; 12 | width: 1.75em; 13 | height: 1.75em; 14 | margin: -.875em -.875em 0 0; 15 | border-radius: 1.25em; 16 | box-shadow: 0 0 1em rgba(0, 0, 0, .1), 0 0 .0625em rgba(0, 0, 0, .15), 0 .125em .125em rgba(0, 0, 0, .15); 17 | } 18 | 19 | .mbsc-slider-tooltip { 20 | font-size: .875em; 21 | width: 3em; 22 | margin-right: -1.5em; 23 | top: -1em; 24 | text-align: center; 25 | opacity: 0; 26 | transition: opacity .2s ease-in-out; 27 | } 28 | 29 | .mbsc-slider-handle:focus ~ .mbsc-slider-tooltip, 30 | .mbsc-active .mbsc-slider-tooltip { 31 | opacity: 1; 32 | } 33 | 34 | .mbsc-slider-step { 35 | height: .5em; 36 | width: .0625em; 37 | margin-top: -.1875em; 38 | margin-left: -.0625em; 39 | } 40 | 41 | &.mbsc-slider input:disabled ~ .mbsc-progress-cont .mbsc-progress-track { 42 | opacity: .4; 43 | } 44 | 45 | &.mbsc-slider-primary .mbsc-progress-bar { 46 | background: $mbsc-ios-primary; 47 | } 48 | 49 | &.mbsc-slider-secondary .mbsc-progress-bar { 50 | background: $mbsc-ios-secondary; 51 | } 52 | 53 | &.mbsc-slider-success .mbsc-progress-bar { 54 | background: $mbsc-ios-success; 55 | } 56 | 57 | &.mbsc-slider-danger .mbsc-progress-bar { 58 | background: $mbsc-ios-danger; 59 | } 60 | 61 | &.mbsc-slider-warning .mbsc-progress-bar { 62 | background: $mbsc-ios-warning; 63 | } 64 | 65 | &.mbsc-slider-info .mbsc-progress-bar { 66 | background: $mbsc-ios-info; 67 | } 68 | } 69 | 70 | @include mbsc-ios-slider(ios, (background: $mbsc-ios-background, text: $mbsc-ios-text, accent: $mbsc-ios-accent)); 71 | } 72 | -------------------------------------------------------------------------------- /src/scss/slider/slider.mobiscroll.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/mobiscroll"; 3 | @import "../page/page.mobiscroll.colors"; 4 | @import "../progress/progress.mobiscroll.colors"; 5 | 6 | @mixin mbsc-mobiscroll-slider($theme, $params) { 7 | @include exports("slider.#{$theme}.colors") { 8 | 9 | @include mbsc-mobiscroll-page($theme, $params); 10 | @include mbsc-mobiscroll-progress($theme, $params); 11 | 12 | $background: map-get($params, background); 13 | $accent: map-get($params, accent); 14 | 15 | $colors: mbsc-mobiscroll-colors($params); 16 | $tooltip: map-get($colors, tooltip); 17 | 18 | .mbsc-#{$theme} { 19 | .mbsc-slider-step { 20 | background: $background; 21 | } 22 | 23 | .mbsc-slider-handle { 24 | background: $accent; 25 | } 26 | 27 | .mbsc-slider-tooltip { 28 | color: $tooltip; 29 | background-color: $accent; 30 | } 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/scss/slider/slider.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../page/page"; 3 | @import "../progress/progress"; 4 | 5 | @include exports("slider") { 6 | .mbsc-progress.mbsc-slider input { 7 | display: none; 8 | } 9 | 10 | .mbsc-ltr .mbsc-progress-anim .mbsc-slider-handle-cont { 11 | transition: left .1s ease-in-out; 12 | } 13 | 14 | .mbsc-rtl .mbsc-progress-anim .mbsc-slider-handle-cont { 15 | transition: right .1s ease-in-out; 16 | } 17 | 18 | .mbsc-slider-handle-cont { 19 | position: absolute; 20 | width: 2em; 21 | height: 2em; 22 | top: .0625em; 23 | margin-top: -1em; 24 | cursor: pointer; 25 | } 26 | 27 | .mbsc-ltr .mbsc-slider-handle-cont { 28 | right: -1em; 29 | } 30 | 31 | .mbsc-rtl .mbsc-slider-handle-cont { 32 | left: -1em; 33 | } 34 | 35 | .mbsc-ltr .mbsc-slider-handle-cont.mbsc-slider-handle-left { 36 | left: 0; 37 | } 38 | 39 | .mbsc-rtl .mbsc-slider-handle-cont.mbsc-slider-handle-left { 40 | right: 0; 41 | } 42 | 43 | .mbsc-ltr .mbsc-progress-track .mbsc-slider-handle-cont { 44 | margin-left: -1em; 45 | } 46 | 47 | .mbsc-rtl .mbsc-progress-track .mbsc-slider-handle-cont { 48 | margin-right: -1em; 49 | } 50 | 51 | .mbsc-slider-handle { 52 | position: absolute; 53 | top: .125em; 54 | right: 50%; 55 | margin: -.5em -.5em 0 0; 56 | z-index: 2; 57 | } 58 | 59 | .mbsc-slider-handle-cont .mbsc-slider-handle { 60 | box-sizing: content-box; 61 | } 62 | 63 | .mbsc-slider .mbsc-slider-handle:focus, 64 | .mbsc-slider .mbsc-active .mbsc-slider-handle { 65 | outline: 0; 66 | z-index: 15; 67 | } 68 | 69 | .mbsc-slider .mbsc-handle-curr { 70 | z-index: 16; 71 | } 72 | 73 | .mbsc-slider-tooltip { 74 | position: absolute; 75 | right: 50%; 76 | opacity: 0; 77 | color: #000; 78 | } 79 | 80 | .mbsc-slider-step { 81 | position: absolute; 82 | top: 0; 83 | width: .125em; 84 | height: 100%; 85 | margin-left: -.0625em; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/scss/slider/slider.windows.colors.scss: -------------------------------------------------------------------------------- 1 | @import "../core/exports"; 2 | @import "../core/windows"; 3 | @import "../page/page.windows.colors"; 4 | @import "../progress/progress.windows.colors"; 5 | 6 | @mixin mbsc-windows-slider($theme, $params) { 7 | @include exports("slider.#{$theme}.colors") { 8 | 9 | @include mbsc-windows-page($theme, $params); 10 | @include mbsc-windows-progress($theme, $params); 11 | 12 | $background: map-get($params, 'background'); 13 | $accent: map-get($params, 'accent'); 14 | $text: map-get($params, 'text'); 15 | 16 | $colors: mbsc-windows-colors($params); 17 | $input-border: map-get($colors, 'input-border'); 18 | $frame-border: map-get($colors, 'frame-border'); 19 | 20 | $form-background: ''; 21 | $input-hover: ''; 22 | @if (lightness($background) > 50%) { 23 | $form-background: lighten($background, 13%); 24 | $input-hover: darken($background, 55%); 25 | } 26 | @else { 27 | $form-background: darken($background, 12%); 28 | $input-hover: lighten($background, 55%); 29 | } 30 | 31 | .mbsc-#{$theme} { 32 | &.mbsc-slider .mbsc-progress-track { 33 | background: $input-border; 34 | border-top: 2px solid $background; 35 | border-bottom: 2px solid $background; 36 | } 37 | 38 | &.mbsc-slider .mbsc-progress-track { 39 | border-top-color: $form-background; 40 | border-bottom-color: $form-background; 41 | } 42 | 43 | &.mbsc-slider:hover .mbsc-progress-track { 44 | background: $input-hover; 45 | 46 | .mbsc-slider-handle { 47 | background: $text; 48 | } 49 | } 50 | 51 | &.mbsc-slider .mbsc-active~.mbsc-progress-cont .mbsc-progress-track { 52 | background: $input-border; 53 | 54 | .mbsc-slider-handle { 55 | background: $frame-border; 56 | } 57 | } 58 | 59 | .mbsc-slider-handle { 60 | background: $accent; 61 | } 62 | 63 | .mbsc-slider-tooltip { 64 | border: 1px solid $frame-border; 65 | background: $background; 66 | color: $text; 67 | } 68 | 69 | .mbsc-slider-step { 70 | background: $input-border; 71 | } 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "es6", 4 | "moduleResolution": "node", 5 | "noImplicitAny": true, 6 | "removeComments": true, 7 | "experimentalDecorators": true, 8 | "emitDecoratorMetadata": true, 9 | "target": "es5", 10 | "importHelpers": true, 11 | "declaration": true, 12 | "lib": [ 13 | "es2015", 14 | "dom" 15 | ], 16 | "baseUrl": "./" 17 | }, 18 | "files": [ 19 | "bundles/mobiscroll.angular.ts" 20 | ], 21 | "angularCompilerOptions": { 22 | "skipTemplateCodegen": true, 23 | "strictMetadataEmit": true, 24 | "flatModuleOutFile": "mobiscroll.angular.min", 25 | "flatModuleId": "@mobiscroll/angular-lite" 26 | } 27 | } --------------------------------------------------------------------------------