├── .babelrc ├── .circleci └── config.yml ├── .github └── FUNDING.yml ├── .gitignore ├── .gitpod.yml ├── .nvmrc ├── .travis.yml ├── AUTHORS.txt ├── CHANGELOG.md ├── LICENSE.txt ├── README.md ├── RELEASE.md ├── bower.json ├── build-targets ├── cdn-angular-combined.js ├── cdn-angular.js ├── cdn-js-combined.js ├── cdn-js.js ├── cdn-react-combined.js ├── cdn-react.js ├── cdn-webcomponents.js └── e2e-tests.js ├── e2e-tests ├── index-polyfill.html ├── index.html ├── polyfill.js └── tests.js ├── examples ├── angular │ ├── appbar.html │ ├── buttons.html │ ├── caret.html │ ├── checkbox.html │ ├── container.html │ ├── divider.html │ ├── dropdowns.html │ ├── form.html │ ├── grid.html │ ├── panel.html │ ├── radio.html │ ├── scratch.html │ ├── scratch2.html │ ├── select.html │ ├── tabs.html │ └── textfield.html ├── assets │ └── css-switch.js ├── css-js │ ├── appbar.html │ ├── autofill.html │ ├── buttons.html │ ├── caret.html │ ├── checkbox.html │ ├── dividers.html │ ├── dropdowns.html │ ├── form.html │ ├── globals.html │ ├── grid.html │ ├── overlay.html │ ├── radio.html │ ├── select.html │ ├── semanic-markup.html │ ├── tables.html │ ├── tabs.html │ ├── textfield.html │ ├── typography.html │ └── utilities.html ├── email │ ├── boilerplate.html │ ├── button-colors.html │ ├── buttons.html │ ├── css-helpers.html │ ├── dividers.html │ ├── panel.html │ ├── semantic-markup.html │ └── typography.html ├── extra │ ├── dropdowns-combined.html │ └── dropdowns-react-combined.html ├── layouts │ ├── blog.html │ ├── html-email.html │ ├── landing-page.html │ └── sidedrawer.html ├── react │ ├── appbar.html │ ├── buttons.html │ ├── caret.html │ ├── checkbox.html │ ├── container.html │ ├── divider.html │ ├── dropdowns.html │ ├── form.html │ ├── grid.html │ ├── panel.html │ ├── radio.html │ ├── scratch.html │ ├── select.html │ ├── tabs.html │ └── textfield.html └── webcomponents │ ├── buttons.html │ └── forms.html ├── greenkeeper.json ├── gulpfile.js ├── package-lock.json ├── package.json ├── packages ├── cdn │ ├── angular │ │ ├── mui-angular.js │ │ └── mui-angular.min.js │ ├── css │ │ ├── mui-rtl.css │ │ ├── mui-rtl.min.css │ │ ├── mui.css │ │ └── mui.min.css │ ├── email │ │ ├── mui-email-inline-rtl.css │ │ ├── mui-email-inline.css │ │ ├── mui-email-styletag-rtl.css │ │ └── mui-email-styletag.css │ ├── extra │ │ ├── mui-angular-combined.js │ │ ├── mui-angular-combined.min.js │ │ ├── mui-colors.css │ │ ├── mui-colors.min.css │ │ ├── mui-combined.js │ │ ├── mui-combined.min.js │ │ ├── mui-noglobals-rtl.css │ │ ├── mui-noglobals-rtl.min.css │ │ ├── mui-noglobals.css │ │ ├── mui-noglobals.min.css │ │ ├── mui-px-rtl.css │ │ ├── mui-px-rtl.min.css │ │ ├── mui-px.css │ │ ├── mui-px.min.css │ │ ├── mui-react-combined.js │ │ ├── mui-react-combined.min.js │ │ ├── mui-rem-rtl.css │ │ ├── mui-rem-rtl.min.css │ │ ├── mui-rem.css │ │ └── mui-rem.min.css │ ├── js │ │ ├── mui.js │ │ └── mui.min.js │ ├── react │ │ ├── mui-react.js │ │ └── mui-react.min.js │ └── webcomponents │ │ ├── mui-webcomponents.js │ │ └── mui-webcomponents.min.js ├── meteor │ ├── LICENSE.txt │ ├── README.md │ ├── lib │ │ ├── css │ │ │ ├── mui-rtl.css │ │ │ ├── mui-rtl.min.css │ │ │ ├── mui.css │ │ │ └── mui.min.css │ │ └── js │ │ │ ├── mui.js │ │ │ └── mui.min.js │ └── package.js └── npm │ ├── LICENSE.txt │ ├── README.md │ ├── angular.js │ ├── dist │ ├── angular │ │ ├── mui-angular.js │ │ └── mui-angular.min.js │ ├── css │ │ ├── mui-noglobals-rtl.css │ │ ├── mui-noglobals-rtl.min.css │ │ ├── mui-noglobals.css │ │ ├── mui-noglobals.min.css │ │ ├── mui-rtl.css │ │ ├── mui-rtl.min.css │ │ ├── mui.css │ │ └── mui.min.css │ ├── email │ │ ├── mui-email-inline-rtl.css │ │ ├── mui-email-inline.css │ │ ├── mui-email-styletag-rtl.css │ │ └── mui-email-styletag.css │ ├── extra │ │ ├── mui-angular-combined.js │ │ ├── mui-angular-combined.min.js │ │ ├── mui-colors.css │ │ ├── mui-colors.min.css │ │ ├── mui-combined.js │ │ ├── mui-combined.min.js │ │ ├── mui-noglobals-rtl.css │ │ ├── mui-noglobals-rtl.min.css │ │ ├── mui-noglobals.css │ │ ├── mui-noglobals.min.css │ │ ├── mui-px-rtl.css │ │ ├── mui-px-rtl.min.css │ │ ├── mui-px.css │ │ ├── mui-px.min.css │ │ ├── mui-react-combined.js │ │ ├── mui-react-combined.min.js │ │ ├── mui-rem-rtl.css │ │ ├── mui-rem-rtl.min.css │ │ ├── mui-rem.css │ │ └── mui-rem.min.css │ ├── js │ │ ├── mui.js │ │ └── mui.min.js │ ├── react │ │ ├── mui-react.js │ │ └── mui-react.min.js │ └── webcomponents │ │ ├── mui-webcomponents.js │ │ └── mui-webcomponents.min.js │ ├── index.js │ ├── lib │ ├── angular │ │ ├── appbar.js │ │ ├── babel-helpers.js │ │ ├── button.js │ │ ├── caret.js │ │ ├── checkbox.js │ │ ├── col.js │ │ ├── container.js │ │ ├── divider.js │ │ ├── dropdown-item.js │ │ ├── dropdown.js │ │ ├── form.js │ │ ├── input.js │ │ ├── option.js │ │ ├── panel.js │ │ ├── radio.js │ │ ├── row.js │ │ ├── select.js │ │ └── tabs.js │ ├── email │ │ ├── mui-email-inline.scss │ │ ├── mui-email-styletag.scss │ │ └── mui-email │ │ │ ├── _body.scss │ │ │ ├── _buttons.scss │ │ │ ├── _containers.scss │ │ │ ├── _divider.scss │ │ │ ├── _grid.scss │ │ │ ├── _helpers.scss │ │ │ ├── _normalize.scss │ │ │ ├── _panel.scss │ │ │ ├── _reboot.scss │ │ │ ├── _styletag.scss │ │ │ ├── _typography.scss │ │ │ └── _variables.scss │ ├── js │ │ ├── config.js │ │ ├── lib │ │ │ ├── forms.js │ │ │ ├── jqLite.js │ │ │ └── util.js │ │ └── overlay.js │ ├── react │ │ ├── _helpers.js │ │ ├── _textfieldHelpers.js │ │ ├── appbar.js │ │ ├── babel-helpers.js │ │ ├── button.js │ │ ├── caret.js │ │ ├── checkbox.js │ │ ├── col.js │ │ ├── container.js │ │ ├── divider.js │ │ ├── dropdown-item.js │ │ ├── dropdown.js │ │ ├── form.js │ │ ├── input.js │ │ ├── option.js │ │ ├── panel.js │ │ ├── radio.js │ │ ├── row.js │ │ ├── select.js │ │ ├── tab.js │ │ ├── tabs.js │ │ └── textarea.js │ └── sass │ │ ├── mui-colors.scss │ │ ├── mui-noglobals.scss │ │ ├── mui-px.scss │ │ ├── mui-rem.scss │ │ ├── mui.scss │ │ └── mui │ │ ├── _appbar.scss │ │ ├── _buttons.scss │ │ ├── _checkbox-and-radio.scss │ │ ├── _colors.scss │ │ ├── _containers.scss │ │ ├── _divider.scss │ │ ├── _dropdown.scss │ │ ├── _form.scss │ │ ├── _globals.scss │ │ ├── _grid.scss │ │ ├── _helpers.scss │ │ ├── _mixins.scss │ │ ├── _overlay.scss │ │ ├── _panel.scss │ │ ├── _ripple.scss │ │ ├── _select.scss │ │ ├── _table.scss │ │ ├── _tabs.scss │ │ ├── _textfield.scss │ │ ├── _typography.scss │ │ ├── _variables.scss │ │ └── mixins │ │ ├── _buttons.scss │ │ ├── _forms.scss │ │ ├── _grid-framework.scss │ │ ├── _typography.scss │ │ └── _util.scss │ ├── package.json │ └── react.js ├── src ├── angular │ ├── appbar.js │ ├── button.js │ ├── caret.js │ ├── checkbox.js │ ├── col.js │ ├── container.js │ ├── divider.js │ ├── dropdown-item.js │ ├── dropdown.js │ ├── form.js │ ├── input.js │ ├── option.js │ ├── panel.js │ ├── radio.js │ ├── row.js │ ├── select.js │ └── tabs.js ├── email │ ├── mui-email-inline.scss │ ├── mui-email-styletag.scss │ └── mui-email │ │ ├── _body.scss │ │ ├── _buttons.scss │ │ ├── _containers.scss │ │ ├── _divider.scss │ │ ├── _grid.scss │ │ ├── _helpers.scss │ │ ├── _normalize.scss │ │ ├── _panel.scss │ │ ├── _reboot.scss │ │ ├── _styletag.scss │ │ ├── _typography.scss │ │ └── _variables.scss ├── js │ ├── config.js │ ├── dropdown.js │ ├── lib │ │ ├── animationHelpers.js │ │ ├── forms.js │ │ ├── jqLite.js │ │ └── util.js │ ├── overlay.js │ ├── ripple.js │ ├── select.js │ ├── tabs.js │ └── textfield.js ├── react │ ├── _helpers.js │ ├── _textfieldHelpers.jsx │ ├── appbar.jsx │ ├── button.jsx │ ├── caret.jsx │ ├── checkbox.jsx │ ├── col.jsx │ ├── container.jsx │ ├── divider.jsx │ ├── dropdown-item.jsx │ ├── dropdown.jsx │ ├── form.jsx │ ├── input.jsx │ ├── option.jsx │ ├── panel.jsx │ ├── radio.jsx │ ├── row.jsx │ ├── select.jsx │ ├── tab.jsx │ ├── tabs.jsx │ └── textarea.jsx ├── sass │ ├── mui-colors.scss │ ├── mui-noglobals.scss │ ├── mui-px.scss │ ├── mui-rem.scss │ ├── mui.scss │ └── mui │ │ ├── _appbar.scss │ │ ├── _buttons.scss │ │ ├── _checkbox-and-radio.scss │ │ ├── _colors.scss │ │ ├── _containers.scss │ │ ├── _divider.scss │ │ ├── _dropdown.scss │ │ ├── _form.scss │ │ ├── _globals.scss │ │ ├── _grid.scss │ │ ├── _helpers.scss │ │ ├── _mixins.scss │ │ ├── _overlay.scss │ │ ├── _panel.scss │ │ ├── _ripple.scss │ │ ├── _select.scss │ │ ├── _table.scss │ │ ├── _tabs.scss │ │ ├── _textfield.scss │ │ ├── _typography.scss │ │ ├── _variables.scss │ │ └── mixins │ │ ├── _buttons.scss │ │ ├── _forms.scss │ │ ├── _grid-framework.scss │ │ ├── _typography.scss │ │ └── _util.scss └── webcomponents │ ├── buttons.js │ └── forms.js └── test ├── angular-tests ├── angular-helper.js ├── test-appbar.js ├── test-button.js └── test-input.js ├── before-compilers.js ├── cssjs-tests ├── test-jqLite.js └── test-util.js ├── lib └── react-helpers.js └── react-tests ├── test-appbar.js ├── test-button.js ├── test-caret.js ├── test-checkbox.js ├── test-col.js ├── test-container.js ├── test-divider.js ├── test-dropdown.js ├── test-form.js ├── test-input.js ├── test-option.js ├── test-panel.js ├── test-radio.js ├── test-row.js ├── test-select.js ├── test-tabs.js └── test-textarea.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/env", "@babel/react"], 3 | "plugins": ["@babel/plugin-proposal-class-properties", "add-module-exports"] 4 | } 5 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2 6 | jobs: 7 | build: 8 | docker: 9 | # specify the version you desire here 10 | - image: circleci/node:10.6.0 11 | 12 | # Specify service dependencies here if necessary 13 | # CircleCI maintains a library of pre-built images 14 | # documented at https://circleci.com/docs/2.0/circleci-images/ 15 | # - image: circleci/mongo:3.4.4 16 | 17 | working_directory: ~/repo 18 | 19 | steps: 20 | - checkout 21 | 22 | # Download and cache dependencies 23 | - restore_cache: 24 | keys: 25 | - v1-dependencies-{{ checksum "package.json" }} 26 | # fallback to using the latest cache if no exact match is found 27 | - v1-dependencies- 28 | 29 | - run: yarn install 30 | 31 | - save_cache: 32 | paths: 33 | - node_modules 34 | key: v1-dependencies-{{ checksum "package.json" }} 35 | 36 | # run tests! 37 | - run: yarn test 38 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: amorey 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | \#* 3 | node_modules 4 | .versions 5 | .sass-cache 6 | npm-debug.log 7 | yarn-error.log 8 | bower_components 9 | examples/assets/mui 10 | examples/email-inlined 11 | *.sublime-* 12 | .idea/ 13 | 14 | -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | tasks: 2 | - command: gp await-port 3000 && gp preview $(gp url 3000)/examples 3 | - init: > 4 | npm install && 5 | npm install http-server && 6 | npm run build-examples 7 | command: npm run http-server -- -p 3000 8 | 9 | ports: 10 | - port: 3000 11 | onOpen: ignore 12 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 10.16.0 2 | 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | env: 2 | - CXX=g++-4.8 3 | language: node_js 4 | node_js: 5 | - "10.16.1" 6 | addons: 7 | apt: 8 | sources: 9 | - ubuntu-toolchain-r-test 10 | packages: 11 | - gcc-4.8 12 | - g++-4.8 13 | script: npm test 14 | -------------------------------------------------------------------------------- /AUTHORS.txt: -------------------------------------------------------------------------------- 1 | Authors ordered by first contribution. 2 | 3 | Andres Morey 4 | Matt Bogado 5 | Michiel Schriever 6 | HjtHjtHjt 7 | Aron Jones 8 | Tushar Pokle 9 | pospi 10 | Arthur Kay <@arthurakay> 11 | Rushabh Shah <@rush1818> 12 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Andres Morey 4 | 5 | The following license applies to all parts of this software except as 6 | documented below: 7 | 8 | ==== 9 | 10 | Permission is hereby granted, free of charge, to any person obtaining a copy 11 | of this software and associated documentation files (the "Software"), to deal 12 | in the Software without restriction, including without limitation the rights 13 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 14 | copies of the Software, and to permit persons to whom the Software is 15 | furnished to do so, subject to the following conditions: 16 | 17 | The above copyright notice and this permission notice shall be included in 18 | all copies or substantial portions of the Software. 19 | 20 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 21 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 22 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 23 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 24 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 25 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 26 | THE SOFTWARE. 27 | 28 | ==== 29 | 30 | All files located in the node_modules and bower_components directories are 31 | externally maintained libraries used by this software which have their 32 | own licenses; we recommend you read them, as their terms may differ from 33 | the terms above. 34 | -------------------------------------------------------------------------------- /RELEASE.md: -------------------------------------------------------------------------------- 1 | # Release Instructions 2 | 3 | 1. Build packages 4 | 5 | ```bash 6 | $ npm run build-all 7 | ``` 8 | 9 | 1. Add release notes to CHANGELOG.md 10 | 11 | 1. Change version number in package.json 12 | 13 | 1. Change version number in bower.json 14 | 15 | 1. Change version number in README.md 16 | 17 | 1. Change version number in packages/meteor/package.js 18 | 19 | 1. Change version number in packages/npm/package.json 20 | 21 | 1. Update packages/npm/README.md (if necessary) 22 | 23 | 1. Commit changes and tag code 24 | 25 | ```bash 26 | $ git add . --all 27 | $ git commit -a -m "bumped version number" 28 | $ git push origin master 29 | $ git tag 30 | $ git push --tags 31 | ``` 32 | 33 | 1. Push changes to NPM 34 | 35 | ```bash 36 | $ cd packages/npm 37 | $ npm publish 38 | ``` 39 | 40 | 1. Update package on Meteor repository 41 | 42 | ```bash 43 | $ cd packages/meteor 44 | $ meteor publish 45 | ``` 46 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mui", 3 | "version": "0.10.3", 4 | "license": "MIT", 5 | "authors": [ 6 | "Andres Morey " 7 | ], 8 | "homepage": "https://www.muicss.com", 9 | "description": "MUI is a lightweight HTML/CSS/JS framework that follows Google's Material Design guidelines.", 10 | "main": [ 11 | "packages/cdn/css/mui.css", 12 | "packages/cdn/js/mui.js" 13 | ], 14 | "repository": { 15 | "type": "git", 16 | "url": "git://github.com/muicss/mui.git" 17 | }, 18 | "keywords": [ 19 | "material design", 20 | "frontend framework", 21 | "html, css, and js framework", 22 | "email css template" 23 | ], 24 | "dependencies": { 25 | }, 26 | "ignore": [ 27 | "**/.*", 28 | "build-targets", 29 | "e2e-tests", 30 | "examples", 31 | "gulpfile.js", 32 | "node_modules", 33 | "package.json", 34 | "test" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /build-targets/cdn-angular-combined.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Combined Angular module 3 | * @module angular/mui-combined 4 | */ 5 | (function(win) { 6 | // return if library has already been loaded 7 | if (win._muiAngularCombinedLoaded) return; 8 | else win._muiAngularCombinedLoaded = true; 9 | 10 | var util = require('src/js/lib/util'); 11 | 12 | // load css 13 | util.loadStyle(require('mui.min.css')); 14 | 15 | // load js 16 | require('./cdn-angular'); 17 | })(window); 18 | -------------------------------------------------------------------------------- /build-targets/cdn-angular.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Angular main module 3 | * @module angular/main 4 | */ 5 | 6 | (function(win) { 7 | // return if library has been loaded already 8 | if (win._muiAngularLoaded) return; 9 | else win._muiAngularLoaded = true; 10 | 11 | win.angular.module('mui', [ 12 | require('src/angular/appbar'), 13 | require('src/angular/button'), 14 | require('src/angular/caret'), 15 | require('src/angular/container'), 16 | require('src/angular/divider'), 17 | require('src/angular/dropdown'), 18 | require('src/angular/dropdown-item'), 19 | require('src/angular/panel'), 20 | require('src/angular/input'), 21 | require('src/angular/row'), 22 | require('src/angular/col'), 23 | require('src/angular/tabs'), 24 | require('src/angular/radio'), 25 | require('src/angular/checkbox'), 26 | require('src/angular/option'), 27 | require('src/angular/select'), 28 | require('src/angular/form') 29 | ]); 30 | })(window); 31 | -------------------------------------------------------------------------------- /build-targets/cdn-js-combined.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI CSS/JS combined module 3 | * @module combined 4 | */ 5 | (function(win) { 6 | // return if library has already been loaded 7 | if (win._muiCombinedLoadedJS) return; 8 | else win._muiCombinedLoadedJS = true; 9 | 10 | var util = require('src/js/lib/util'); 11 | 12 | // load css 13 | util.loadStyle(require('mui.min.css')); 14 | 15 | // load js 16 | require('./cdn-js'); 17 | })(window); 18 | -------------------------------------------------------------------------------- /build-targets/cdn-js.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI CSS/JS main module 3 | * @module main 4 | */ 5 | 6 | (function(win) { 7 | 'use strict'; 8 | 9 | // return if library has been loaded already 10 | if (win._muiLoadedJS) return; 11 | else win._muiLoadedJS = true; 12 | 13 | // load dependencies 14 | var jqLite = require('src/js/lib/jqLite'), 15 | dropdown = require('src/js/dropdown'), 16 | overlay = require('src/js/overlay'), 17 | ripple = require('src/js/ripple'), 18 | select = require('src/js/select'), 19 | tabs = require('src/js/tabs'), 20 | textfield = require('src/js/textfield'); 21 | 22 | // expose api 23 | win.mui = { 24 | overlay: overlay, 25 | tabs: tabs.api 26 | }; 27 | 28 | // init libraries 29 | jqLite.ready(function() { 30 | textfield.initListeners(); 31 | select.initListeners(); 32 | ripple.initListeners(); 33 | dropdown.initListeners(); 34 | tabs.initListeners(); 35 | }); 36 | })(window); 37 | -------------------------------------------------------------------------------- /build-targets/cdn-react-combined.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Combined React module 3 | * @module react/mui-combined 4 | */ 5 | (function(win) { 6 | // return if library has already been loaded 7 | if (win._muiReactCombinedLoaded) return; 8 | else win._muiReactCombinedLoaded = true; 9 | 10 | var util = require('src/js/lib/util'); 11 | 12 | // load css 13 | util.loadStyle(require('mui.min.css')); 14 | 15 | // load js 16 | require('./cdn-react'); 17 | })(window); 18 | -------------------------------------------------------------------------------- /build-targets/cdn-react.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React main module 3 | * @module react/main 4 | */ 5 | 6 | (function(win) { 7 | // return if library has been loaded already 8 | if (win._muiReactLoaded) return; 9 | else win._muiReactLoaded = true; 10 | 11 | var mui = win.mui = win.mui || [], 12 | react = mui.react = {}, 13 | lib; 14 | 15 | react.Appbar = require('src/react/appbar'); 16 | react.Button = require('src/react/button'); 17 | react.Caret = require('src/react/caret'); 18 | react.Checkbox = require('src/react/checkbox'); 19 | react.Col = require('src/react/col'); 20 | react.Container = require('src/react/container'); 21 | react.Divider = require('src/react/divider'); 22 | react.Dropdown = require('src/react/dropdown'), 23 | react.DropdownItem = require('src/react/dropdown-item'), 24 | react.Form = require('src/react/form'); 25 | react.Input = require('src/react/input'); 26 | react.Option = require('src/react/option'); 27 | react.Panel = require('src/react/panel'); 28 | react.Radio = require('src/react/radio'); 29 | react.Row = require('src/react/row'); 30 | react.Select = require('src/react/select'); 31 | react.Tab = require('src/react/tab'); 32 | react.Tabs = require('src/react/tabs'); 33 | react.Textarea = require('src/react/textarea'); 34 | })(window); 35 | -------------------------------------------------------------------------------- /build-targets/cdn-webcomponents.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI WebComponents main module 3 | * @module webcomponents/main 4 | */ 5 | 6 | (function(win) { 7 | // return if library has already been loaded 8 | if (win._muiLoadedWC) return; 9 | else win._muiLoadedWC = true; 10 | 11 | // check browser support 12 | if (typeof HTMLElement === 'undefined' || !document.registerElement) { 13 | throw new Error("MUI: Client does not support web components"); 14 | } 15 | 16 | // imports 17 | var buttons = require('src/webcomponents/buttons'), 18 | forms = require('src/webcomponents/forms'); 19 | 20 | // init 21 | buttons.registerElements(); 22 | forms.registerElements(); 23 | })(window); 24 | -------------------------------------------------------------------------------- /build-targets/e2e-tests.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | // css-js 3 | require('../test/cssjs-tests/test-jqlite'); 4 | require('../test/cssjs-tests/test-util'); 5 | 6 | // react 7 | require('../test/react-tests/test-appbar'); 8 | require('../test/react-tests/test-button'); 9 | require('../test/react-tests/test-caret'); 10 | require('../test/react-tests/test-checkbox'); 11 | require('../test/react-tests/test-col'); 12 | require('../test/react-tests/test-container'); 13 | require('../test/react-tests/test-divider'); 14 | require('../test/react-tests/test-dropdown'); 15 | require('../test/react-tests/test-form'); 16 | require('../test/react-tests/test-input'); 17 | require('../test/react-tests/test-option'); 18 | require('../test/react-tests/test-panel'); 19 | require('../test/react-tests/test-radio'); 20 | require('../test/react-tests/test-row'); 21 | require('../test/react-tests/test-select'); 22 | require('../test/react-tests/test-tabs'); 23 | require('../test/react-tests/test-textarea'); 24 | })(); 25 | -------------------------------------------------------------------------------- /e2e-tests/index-polyfill.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mocha 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /e2e-tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mocha 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /examples/angular/appbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 21 | 22 | 23 |

Appbar

24 | {{myVar}} 25 | 26 | 27 | -------------------------------------------------------------------------------- /examples/angular/caret.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Caret

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /examples/angular/container.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 21 | 22 | 23 |

Container

24 | 25 | {{myVal}} 26 | 27 | 28 | 29 | 30 |

Fluid Container

31 | 32 | {{myVal}} 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /examples/angular/divider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Divider

17 | 18 |
19 | Content 1 20 |
21 | 22 |
23 | Content 2 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /examples/angular/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

Grid

17 | 18 | 19 | 20 | md-1 21 | md-1 22 | md-1 23 | md-1 24 | md-1 25 | md-1 26 | md-1 27 | md-1 28 | md-1 29 | md-1 30 | md-1 31 | md-1 32 | 33 | 34 | md-8 35 | md-4 36 | 37 | 38 | md-4 39 | md-4 40 | md-4 41 | 42 | 43 | md-6 44 | md-6 45 | 46 | 47 | 48 | 49 | 50 | md-4 51 | md-4 md-offset-4 52 | 53 | 54 | md-3 md-offset-3 55 | md-3 md-offset-3 56 | 57 | 58 | md-6 md-offset-3 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /examples/angular/panel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

Panel

18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /examples/assets/css-switch.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('load', function() { 2 | // fetch link element 3 | var selector = 'link[href="../assets/mui/css/mui.css"]', 4 | linkEl = document.querySelector(selector); 5 | 6 | // build element 7 | var selectEl = document.createElement('select'); 8 | selectEl.innerHTML = [ 9 | '', 10 | '', 11 | '', 12 | '', 13 | '', 14 | '', 15 | 16 | '', 17 | '', 18 | '', 19 | '', 20 | '', 21 | '', 22 | 23 | '', 24 | '', 25 | '', 26 | '', 27 | '', 28 | '' 29 | ].join(''); 30 | 31 | selectEl.style.position = 'absolute'; 32 | selectEl.style.top = '0px'; 33 | selectEl.style.right = '0px'; 34 | 35 | // change css file 36 | selectEl.addEventListener('change', function(ev) { 37 | linkEl.href = '../assets/mui/' + this.value + '?' + (new Date()); 38 | }); 39 | 40 | document.body.appendChild(selectEl); 41 | }); 42 | -------------------------------------------------------------------------------- /examples/css-js/appbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 21 | 22 | 23 |

Container Element

24 |
25 |
26 |

Helpers

27 |

.mui--appbar-height

28 |
29 | 30 | 31 | 32 | 33 | 34 |
Left SideRight Side
35 |
36 |

.mui--appbar-min-height

37 |
38 | Content 39 |
40 |

.mui--appbar-line-height

41 |
42 | Content 43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /examples/css-js/autofill.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Autofill Example

14 |
15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 | 34 | 35 |
36 | 37 |
38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /examples/css-js/caret.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Caret

14 |
15 | 16 | 17 | 18 | 19 |
20 |
21 | 25 | 29 | 33 | 37 |
38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/css-js/checkbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Checkboxes

14 |
15 |
16 |
17 | 21 |
22 | 23 |
24 | 28 |
29 | 30 |
31 | 35 |
36 | 37 |
38 | 42 |
43 | 44 |
45 |
46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /examples/css-js/dividers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Dividers

14 |
15 |

.mui-divider

16 |
Line1
17 |
18 |
Line2
19 | 20 |

Helpers

21 |

.mui--divider-top

22 |
Line1
23 |
Line2
24 | 25 |

.mui--divider-bottom

26 |
Line1
27 |
Line2
28 | 29 |

.mui--divider-left

30 |
31 |
Col1
32 |
Col2
33 |
34 | 35 |

.mui--divider-right

36 |
37 |
Col1
38 |
Col2
39 |
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/css-js/overlay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 26 | 27 | 28 |
29 |
30 |

Overlay

31 |
32 | 33 |
34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /examples/css-js/radio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Radio buttons

14 |
15 |
16 |
17 | 25 |
26 | 27 |
28 | 35 |
36 | 37 |
38 | 47 |
48 | 49 |
50 | 58 |
59 | 60 |
61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /examples/css-js/semanic-markup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Semantic Markup

14 |
15 |

<h1>Heading 1</h1>

16 |

<h2>Heading 2</h2>

17 |

<h3>Heading 3</h3>

18 |

<h4>Heading 4</h4>

19 |
<h5>Heading 5</h5>
20 |
<h6>Heading 6</h6>
21 |
22 | <strong>strong</strong> 23 |
24 |
25 | <em>emphasis</em> 26 |
27 |
28 | <abbr>abbr</abbr> 29 |
30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/css-js/tables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Tables

14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
NameItem NameItem Price
AlvinEclair$0.87
AlanJellybean$3.76
JonathanLollipop$7.00
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
NameItem NameItem Price
AlvinEclair$0.87
AlanJellybean$3.76
JonathanLollipop$7.00
68 |
69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /examples/css-js/utilities.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 |
19 |

Depth helpers

20 |
21 |

.mui-z1

22 |
23 |

.mui-z2

24 |
25 |

.mui-z3

26 |
27 |

.mui-z4

28 |
29 |

.mui-z5

30 |
31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /examples/email/boilerplate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 24 | 25 |
15 |
16 | 17 |
18 | 19 | 20 |
21 | 22 |
23 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /examples/email/button-colors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 29 | 30 |
13 |
14 | 15 |
16 | 17 |
18 | Button 19 | Button 20 | Button 21 | Button 22 | Button 23 |
24 | 25 |
26 | 27 |
28 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /examples/email/css-helpers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 30 | 31 |
15 |
16 | 19 |
20 |
text-left
21 |
text-right
22 |
text-center
23 |
text-justify
24 |
25 | 28 |
29 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/email/dividers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 53 | 54 |
15 |
16 | 17 |
18 | 19 | 20 | 47 | 48 |
21 | 22 |

.mui--divider-top

23 |
Line1
24 |
Line2
25 | 26 |

.mui--divider-bottom

27 |
Line1
28 |
Line2
29 | 30 |

.mui--divider-left

31 | 32 | 33 | 34 | 35 | 36 |
Col1Col2
37 | 38 |

.mui--divider-right

39 | 40 | 41 | 42 | 43 | 44 |
Col1Col2
45 | 46 |
49 |
50 | 51 |
52 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /examples/email/panel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 33 | 34 |
15 |
16 | 19 |
20 | 21 | 22 | 25 | 26 |
23 |

Panel

24 |
27 |
28 | 31 |
32 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /examples/email/semantic-markup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 36 | 37 |
15 |
16 | 17 |
18 |
19 |

Heading 1

20 |

Heading 2

21 |

Heading 3

22 |

Heading 4

23 |
Heading 5
24 |
25 |
26 | Strong 27 |
28 |
29 | Emphasis 30 |
31 |
32 |
33 | 34 |
35 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /examples/extra/dropdowns-combined.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 16 | 17 | 18 |
19 |

Dropdowns

20 |
21 |

CSS

22 |
23 | 27 | 33 |
34 |
35 | 39 | 45 |
46 |
47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /examples/react/appbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Appbar

19 |
20 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /examples/react/caret.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Caret

20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /examples/react/checkbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Checkbox

19 |
20 |
21 |
22 |
23 |
24 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /examples/react/container.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Container

19 |
20 |

Fluid container

21 |
22 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /examples/react/divider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Divider

20 |
21 |
22 |
23 |
24 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /examples/react/panel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Panel

20 |
21 |
22 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/react/radio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Radio

19 |
20 |
21 |
22 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /examples/webcomponents/forms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | 12 |

Forms

13 |

Form with placeholders

14 |
15 | 16 | 17 | Submit 18 |
19 |

Form with fixed labels

20 |
21 | 22 | 23 | 24 | Submit 25 |
26 |

Form with floating labels

27 |
28 | 33 | 34 | 40 | 41 | 47 | 48 | Submit 49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /greenkeeper.json: -------------------------------------------------------------------------------- 1 | { 2 | "groups": { 3 | "default": { 4 | "packages": [ 5 | "package.json", 6 | "packages/npm/package.json" 7 | ] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/cdn/email/mui-email-styletag-rtl.css: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Colors module 3 | */ 4 | /** 5 | * MUI Email Styletag 6 | */ 7 | #outlook a { 8 | padding: 0; 9 | } 10 | 11 | .ReadMsgBody { 12 | width: 100%; 13 | } 14 | 15 | .ExternalClass { 16 | width: 100%; 17 | } 18 | .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { 19 | line-height: 100%; 20 | } 21 | 22 | .mui-container-fixed { 23 | width: 600px; 24 | display: block; 25 | margin: 0 auto; 26 | clear: both; 27 | text-align: right; 28 | padding-right: 15px; 29 | padding-left: 15px; 30 | } -------------------------------------------------------------------------------- /packages/cdn/email/mui-email-styletag.css: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Colors module 3 | */ 4 | /** 5 | * MUI Email Styletag 6 | */ 7 | #outlook a { 8 | padding: 0; 9 | } 10 | 11 | .ReadMsgBody { 12 | width: 100%; 13 | } 14 | 15 | .ExternalClass { 16 | width: 100%; 17 | } 18 | .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { 19 | line-height: 100%; 20 | } 21 | 22 | .mui-container-fixed { 23 | width: 600px; 24 | display: block; 25 | margin: 0 auto; 26 | clear: both; 27 | text-align: left; 28 | padding-left: 15px; 29 | padding-right: 15px; 30 | } -------------------------------------------------------------------------------- /packages/meteor/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 Andres Morey 2 | 3 | The following license applies to all parts of this software except as 4 | documented below: 5 | 6 | ==== 7 | 8 | Permission is hereby granted, free of charge, to any person obtaining a copy 9 | of this software and associated documentation files (the "Software"), to deal 10 | in the Software without restriction, including without limitation the rights 11 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | copies of the Software, and to permit persons to whom the Software is 13 | furnished to do so, subject to the following conditions: 14 | 15 | The above copyright notice and this permission notice shall be included in 16 | all copies or substantial portions of the Software. 17 | 18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 20 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 21 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 22 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 23 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 24 | THE SOFTWARE. 25 | 26 | ==== 27 | 28 | All files located in the node_modules and bower_components directories are 29 | externally maintained libraries used by this software which have their 30 | own licenses; we recommend you read them, as their terms may differ from 31 | the terms above. 32 | -------------------------------------------------------------------------------- /packages/meteor/README.md: -------------------------------------------------------------------------------- 1 | # Material Design CSS Framework 2 | 3 | [![MUI](https://www.muicss.com/static/favicons/icon-192x192.png)](https://www.muicss.com) 4 | 5 | MUI is a lightweight CSS framework that follows Google's Material Design guidelines. 6 | 7 | [![Join the chat at https://gitter.im/muicss/mui](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/muicss/mui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 8 | [![Build Status](https://travis-ci.org/muicss/mui.svg?branch=master)](https://travis-ci.org/muicss/mui) 9 | [![Dependency Status](https://david-dm.org/muicss/mui.svg)](https://david-dm.org/muicss/mui) 10 | [![devDependency Status](https://david-dm.org/muicss/mui/dev-status.svg)](https://david-dm.org/muicss/mui#info=devDependencies) 11 | 12 | ## Features 13 | 14 | MUI is designed from the ground up to be fast, small and developer friendly. By design it only includes the basic components you need to build a site that follows Google's Material Design guidelines. Some of the key features of MUI are: 15 | 16 | * Small footprint: mui.min.css - 6.6K, mui.min.js - 5.4K (gzipped) 17 | * A responsive grid to make mobile-friendly sites 18 | * No external dependencies 19 | * CSS library that can be customized with your own colors 20 | * JS library can be loaded asyncronously 21 | * Email library for styling HTML emails 22 | 23 | To get started using MUI, go to the [MUI website](https://www.muicss.com) to see examples and download boilerplate HTML. 24 | 25 | ## Browser Support 26 | 27 | MUI is tested and works in: 28 | 29 | * IE10+ 30 | * Latest Stable: Firefox, Chrome, Safari 31 | * iOS 6+ 32 | 33 | ## Directory Tree 34 | 35 | 
36 | muicss:mui/
37 | ├── lib
38 | │   ├── css
39 | │   │   └── mui.css
40 | │   └── js
41 | │       └── mui.js
42 | ├── LICENSE.txt
43 | ├── package.js
44 | └── README.md
45 |
46 | -------------------------------------------------------------------------------- /packages/meteor/package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'muicss:mui', 3 | version: '0.10.3', 4 | // Brief, one-line summary of the package. 5 | summary: 'MUI is a lightweight CSS framework based on Google\'s Material Design guidelines', 6 | // URL to the Git repository containing the source code for this package. 7 | git: 'https://github.com/muicss/mui', 8 | // By default, Meteor will default to using README.md for documentation. 9 | // To avoid submitting documentation, set this field to null. 10 | documentation: 'README.md' 11 | }); 12 | 13 | Package.onUse(function(api) { 14 | api.versionsFrom('1.0'); 15 | 16 | api.addFiles([ 17 | 'lib/css/mui.css', 18 | 'lib/css/mui.min.css', 19 | 'lib/js/mui.js', 20 | 'lib/js/mui.min.js' 21 | ], 'client'); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/npm/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 Andres Morey 2 | 3 | The following license applies to all parts of this software except as 4 | documented below: 5 | 6 | ==== 7 | 8 | Permission is hereby granted, free of charge, to any person obtaining a copy 9 | of this software and associated documentation files (the "Software"), to deal 10 | in the Software without restriction, including without limitation the rights 11 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | copies of the Software, and to permit persons to whom the Software is 13 | furnished to do so, subject to the following conditions: 14 | 15 | The above copyright notice and this permission notice shall be included in 16 | all copies or substantial portions of the Software. 17 | 18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 20 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 21 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 22 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 23 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 24 | THE SOFTWARE. 25 | 26 | ==== 27 | 28 | All files located in the node_modules and bower_components directories are 29 | externally maintained libraries used by this software which have their 30 | own licenses; we recommend you read them, as their terms may differ from 31 | the terms above. 32 | -------------------------------------------------------------------------------- /packages/npm/angular.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI NPM Package 3 | * @module pkg/angular.js 4 | */ 5 | 6 | var angular = require('angular'), 7 | moduleName = 'mui'; 8 | 9 | 10 | angular.module(moduleName, [ 11 | require('./lib/angular/appbar'), 12 | require('./lib/angular/button'), 13 | require('./lib/angular/caret'), 14 | require('./lib/angular/container'), 15 | require('./lib/angular/divider'), 16 | require('./lib/angular/dropdown'), 17 | require('./lib/angular/dropdown-item'), 18 | require('./lib/angular/panel'), 19 | require('./lib/angular/input'), 20 | require('./lib/angular/row'), 21 | require('./lib/angular/col'), 22 | require('./lib/angular/tabs'), 23 | require('./lib/angular/radio'), 24 | require('./lib/angular/checkbox'), 25 | require('./lib/angular/select'), 26 | require('./lib/angular/form') 27 | ]); 28 | 29 | 30 | /** Define module API */ 31 | module.exports = moduleName; 32 | -------------------------------------------------------------------------------- /packages/npm/dist/email/mui-email-styletag-rtl.css: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Colors module 3 | */ 4 | /** 5 | * MUI Email Styletag 6 | */ 7 | #outlook a { 8 | padding: 0; 9 | } 10 | 11 | .ReadMsgBody { 12 | width: 100%; 13 | } 14 | 15 | .ExternalClass { 16 | width: 100%; 17 | } 18 | .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { 19 | line-height: 100%; 20 | } 21 | 22 | .mui-container-fixed { 23 | width: 600px; 24 | display: block; 25 | margin: 0 auto; 26 | clear: both; 27 | text-align: right; 28 | padding-right: 15px; 29 | padding-left: 15px; 30 | } -------------------------------------------------------------------------------- /packages/npm/dist/email/mui-email-styletag.css: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Colors module 3 | */ 4 | /** 5 | * MUI Email Styletag 6 | */ 7 | #outlook a { 8 | padding: 0; 9 | } 10 | 11 | .ReadMsgBody { 12 | width: 100%; 13 | } 14 | 15 | .ExternalClass { 16 | width: 100%; 17 | } 18 | .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { 19 | line-height: 100%; 20 | } 21 | 22 | .mui-container-fixed { 23 | width: 600px; 24 | display: block; 25 | margin: 0 auto; 26 | clear: both; 27 | text-align: left; 28 | padding-left: 15px; 29 | padding-right: 15px; 30 | } -------------------------------------------------------------------------------- /packages/npm/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI NPM package 3 | * @module pkg/index.js 4 | */ 5 | 6 | /** Define module API */ 7 | module.exports = { 8 | overlay: require('./lib/js/overlay') 9 | } 10 | -------------------------------------------------------------------------------- /packages/npm/lib/angular/appbar.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | "use strict"; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | exports.default = void 0; 8 | 9 | var _angular = babelHelpers.interopRequireDefault(require("angular")); 10 | 11 | /** 12 | * MUI Angular Appbar Component 13 | * @module angular/appbar 14 | */ 15 | var moduleName = 'mui.appbar'; 16 | 17 | _angular.default.module(moduleName, []).directive('muiAppbar', function () { 18 | return { 19 | restrict: 'AE', 20 | transclude: true, 21 | replace: true, 22 | template: '
', 23 | link: function link(scope, element, attrs, controller, transcludeFn) { 24 | // use transcludeFn to pass ng-controller on parent element 25 | transcludeFn(scope, function (clone) { 26 | element.append(clone); 27 | }); 28 | } 29 | }; 30 | }); 31 | /** Define module API */ 32 | 33 | 34 | var _default = moduleName; 35 | exports.default = _default; 36 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/angular/babel-helpers.js: -------------------------------------------------------------------------------- 1 | (function (root, factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define(["exports"], factory); 4 | } else if (typeof exports === "object") { 5 | factory(exports); 6 | } else { 7 | factory(root.babelHelpers = {}); 8 | } 9 | })(this, function (global) { 10 | var babelHelpers = global; 11 | 12 | function _interopRequireDefault(obj) { 13 | return obj && obj.__esModule ? obj : { 14 | default: obj 15 | }; 16 | } 17 | 18 | babelHelpers.interopRequireDefault = _interopRequireDefault; 19 | 20 | function _getRequireWildcardCache() { 21 | if (typeof WeakMap !== "function") return null; 22 | var cache = new WeakMap(); 23 | 24 | _getRequireWildcardCache = function () { 25 | return cache; 26 | }; 27 | 28 | return cache; 29 | } 30 | 31 | function _interopRequireWildcard(obj) { 32 | if (obj && obj.__esModule) { 33 | return obj; 34 | } 35 | 36 | if (obj === null || typeof obj !== "object" && typeof obj !== "function") { 37 | return { 38 | default: obj 39 | }; 40 | } 41 | 42 | var cache = _getRequireWildcardCache(); 43 | 44 | if (cache && cache.has(obj)) { 45 | return cache.get(obj); 46 | } 47 | 48 | var newObj = {}; 49 | var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; 50 | 51 | for (var key in obj) { 52 | if (Object.prototype.hasOwnProperty.call(obj, key)) { 53 | var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; 54 | 55 | if (desc && (desc.get || desc.set)) { 56 | Object.defineProperty(newObj, key, desc); 57 | } else { 58 | newObj[key] = obj[key]; 59 | } 60 | } 61 | } 62 | 63 | newObj.default = obj; 64 | 65 | if (cache) { 66 | cache.set(obj, newObj); 67 | } 68 | 69 | return newObj; 70 | } 71 | 72 | babelHelpers.interopRequireWildcard = _interopRequireWildcard; 73 | }); -------------------------------------------------------------------------------- /packages/npm/lib/angular/caret.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | "use strict"; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | exports.default = void 0; 8 | 9 | var _angular = babelHelpers.interopRequireDefault(require("angular")); 10 | 11 | /** 12 | * MUI Angular Caret Component 13 | * @module angular/caret 14 | */ 15 | var moduleName = 'mui.caret'; 16 | 17 | _angular.default.module(moduleName, []).directive('muiCaret', function () { 18 | return { 19 | restrict: 'AE', 20 | replace: true, 21 | template: '', 22 | link: function link(scope, element, attrs) { 23 | // caret direction 24 | if (!_angular.default.isUndefined(attrs.direction)) { 25 | element.addClass('mui-caret--' + attrs['direction']); 26 | } 27 | } 28 | }; 29 | }); 30 | /** Define module API */ 31 | 32 | 33 | var _default = moduleName; 34 | exports.default = _default; 35 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/angular/checkbox.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | "use strict"; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | exports.default = void 0; 8 | 9 | var _angular = babelHelpers.interopRequireDefault(require("angular")); 10 | 11 | /** 12 | * MUI Angular Checkbox Component 13 | * @module angular/checkox 14 | */ 15 | var moduleName = 'mui.checkbox'; 16 | 17 | _angular.default.module(moduleName, []).directive('muiCheckbox', ['$parse', function () { 18 | return { 19 | restrict: 'AE', 20 | replace: true, 21 | scope: { 22 | label: '@', 23 | name: '@', 24 | value: '@', 25 | ngChecked: '=', 26 | ngDisabled: '=', 27 | ngModel: '=' 28 | }, 29 | template: function template(tElement, tAttrs) { 30 | var isUndef = _angular.default.isUndefined, 31 | html = ''; 32 | html += '
', 23 | transclude: true, 24 | link: function link(scope, element, attrs, controller, transcludeFn) { 25 | // use transcludeFn to pass ng-controller on parent element 26 | transcludeFn(scope, function (clone) { 27 | element.append(clone); 28 | }); // iterate through breakpoints 29 | 30 | var breakpoints = { 31 | 'xs': 'mui-col-xs-', 32 | 'sm': 'mui-col-sm-', 33 | 'md': 'mui-col-md-', 34 | 'lg': 'mui-col-lg-', 35 | 'xl': 'mui-col-xl-', 36 | 'xs-offset': 'mui-col-xs-offset-', 37 | 'sm-offset': 'mui-col-sm-offset-', 38 | 'md-offset': 'mui-col-md-offset-', 39 | 'lg-offset': 'mui-col-lg-offset-', 40 | 'xl-offset': 'mui-col-xl-offset-' 41 | }; 42 | 43 | _angular.default.forEach(breakpoints, function (value, key) { 44 | var attrVal = attrs[attrs.$normalize(key)]; 45 | if (attrVal) element.addClass(value + attrVal); 46 | }); 47 | } 48 | }; 49 | }); 50 | /** Define module API */ 51 | 52 | 53 | var _default = moduleName; 54 | exports.default = _default; 55 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/angular/container.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | "use strict"; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | exports.default = void 0; 8 | 9 | var _angular = babelHelpers.interopRequireDefault(require("angular")); 10 | 11 | /** 12 | * MUI Angular Container Component 13 | * @module angular/container 14 | */ 15 | var moduleName = 'mui.container'; 16 | 17 | _angular.default.module(moduleName, []).directive('muiContainer', function () { 18 | return { 19 | restrict: 'AE', 20 | template: '
', 21 | transclude: true, 22 | scope: true, 23 | replace: true, 24 | link: function link(scope, element, attrs, controller, transcludeFn) { 25 | // use transcludeFn to pass ng-controller on parent element 26 | transcludeFn(scope, function (clone) { 27 | element.append(clone); 28 | }); // handle fluid containers 29 | 30 | if (!_angular.default.isUndefined(attrs.fluid)) { 31 | element.removeClass('mui-container').addClass('mui-container-fluid'); 32 | } 33 | } 34 | }; 35 | }); 36 | /** Define module API */ 37 | 38 | 39 | var _default = moduleName; 40 | exports.default = _default; 41 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/angular/divider.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | "use strict"; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | exports.default = void 0; 8 | 9 | var _angular = babelHelpers.interopRequireDefault(require("angular")); 10 | 11 | /** 12 | * MUI Angular Divider Component 13 | * @module angular/divider 14 | */ 15 | var moduleName = 'mui.divider'; 16 | 17 | _angular.default.module(moduleName, []).directive('muiDivider', function () { 18 | return { 19 | restrict: 'AE', 20 | replace: true, 21 | compile: function compile(tElement, tAttrs) { 22 | tElement.addClass('mui-divider'); 23 | } 24 | }; 25 | }); 26 | /** Define module API */ 27 | 28 | 29 | var _default = moduleName; 30 | exports.default = _default; 31 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/angular/dropdown-item.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | "use strict"; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | exports.default = void 0; 8 | 9 | var _angular = babelHelpers.interopRequireDefault(require("angular")); 10 | 11 | /** 12 | * MUI Angular DropdownItem Component 13 | * @module angular/dropdown-item 14 | */ 15 | var moduleName = 'mui.dropdown-item'; 16 | 17 | _angular.default.module(moduleName, []).directive('muiDropdownItem', function () { 18 | return { 19 | restrict: 'AE', 20 | replace: true, 21 | scope: { 22 | link: '@' 23 | }, 24 | transclude: true, 25 | template: '
    • ' 26 | }; 27 | }); 28 | /** Define module API */ 29 | 30 | 31 | var _default = moduleName; 32 | exports.default = _default; 33 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/angular/form.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | "use strict"; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | exports.default = void 0; 8 | 9 | var _angular = babelHelpers.interopRequireDefault(require("angular")); 10 | 11 | /** 12 | * MUI Angular Form Directive 13 | * @module angular/form 14 | */ 15 | var moduleName = 'mui.form'; 16 | 17 | _angular.default.module(moduleName, []).directive('muiForm', function () { 18 | return { 19 | restrict: 'AE', 20 | template: '
    ', 21 | transclude: true, 22 | scope: true, 23 | replace: true, 24 | link: function link(scope, element, attrs, controller, transcludeFn) { 25 | // use transcludeFn to pass ng-controller on parent element 26 | transcludeFn(scope, function (clone) { 27 | element.append(clone); 28 | }); // handle inline forms 29 | 30 | if (!_angular.default.isUndefined(attrs.inline)) { 31 | element.addClass('mui-form--inline'); 32 | } 33 | } 34 | }; 35 | }); 36 | /** Define module API */ 37 | 38 | 39 | var _default = moduleName; 40 | exports.default = _default; 41 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/angular/option.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | "use strict"; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | exports.default = void 0; 8 | 9 | var _angular = babelHelpers.interopRequireDefault(require("angular")); 10 | 11 | var formlib = babelHelpers.interopRequireWildcard(require("../js/lib/forms")); 12 | var util = babelHelpers.interopRequireWildcard(require("../js/lib/util")); 13 | var jqLite = babelHelpers.interopRequireWildcard(require("../js/lib/jqLite")); 14 | 15 | /** 16 | * MUI Angular Select Component 17 | * @module angular/select 18 | */ 19 | var moduleName = 'mui.option'; 20 | 21 | _angular.default.module(moduleName, []).directive('muiOption', function () { 22 | return { 23 | restrict: 'AE', 24 | replace: true, 25 | //require: '^muiSelect', 26 | scope: { 27 | label: '@', 28 | value: '@', 29 | ngDisabled: '=' 30 | }, 31 | template: '', 32 | link: function link(scope, element, attrs, controller) { 33 | /* 34 | // register 35 | controller.addMenuItem({ 36 | label: attrs.label, 37 | value: attrs.value, 38 | disabled: scope.ngDisabled, 39 | hidden: attrs.hidden 40 | }); 41 | // destroy hook 42 | scope.$on('$destroy', function() { 43 | controller.removeMenuItem(attrs.value); 44 | }); 45 | */ 46 | } 47 | }; 48 | }); 49 | /** Define module API */ 50 | 51 | 52 | var _default = moduleName; 53 | exports.default = _default; 54 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/angular/panel.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | "use strict"; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | exports.default = void 0; 8 | 9 | var _angular = babelHelpers.interopRequireDefault(require("angular")); 10 | 11 | /** 12 | * MUI Angular Panel Component 13 | * @module angular/panel 14 | */ 15 | var moduleName = 'mui.panel'; 16 | 17 | _angular.default.module(moduleName, []).directive('muiPanel', function () { 18 | return { 19 | restrict: 'AE', 20 | replace: true, 21 | scope: true, 22 | template: '
    ', 23 | transclude: true, 24 | link: function link(scope, element, attr, controller, transcludeFn) { 25 | transcludeFn(scope, function (clone) { 26 | element.append(clone); 27 | }); 28 | } 29 | }; 30 | }); 31 | /** Define module API */ 32 | 33 | 34 | var _default = moduleName; 35 | exports.default = _default; 36 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/angular/radio.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | "use strict"; 3 | 4 | Object.defineProperty(exports, "__esModule", { 5 | value: true 6 | }); 7 | exports.default = void 0; 8 | 9 | var _angular = babelHelpers.interopRequireDefault(require("angular")); 10 | 11 | /** 12 | * MUI Angular Radio Component 13 | * @module angular/radio 14 | */ 15 | var moduleName = 'mui.radio'; 16 | 17 | _angular.default.module(moduleName, []).directive('muiRadio', function () { 18 | return { 19 | restrict: 'AE', 20 | replace: true, 21 | scope: { 22 | label: '@', 23 | name: '@', 24 | value: '@', 25 | ngChecked: '=', 26 | ngDisabled: '=', 27 | ngModel: '=' 28 | }, 29 | template: function template(tElement, tAttrs) { 30 | var isUndef = _angular.default.isUndefined, 31 | html = ''; 32 | html += '
    ', 23 | transclude: true, 24 | link: function link(scope, element, attr, controller, transcludeFn) { 25 | transcludeFn(scope, function (clone) { 26 | element.append(clone); 27 | }); 28 | } 29 | }; 30 | }); 31 | /** Define module API */ 32 | 33 | 34 | var _default = moduleName; 35 | exports.default = _default; 36 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/email/mui-email-inline.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Normalizer 4 | @import 5 | "mui-email/normalize"; 6 | 7 | // Core variables and mixins 8 | @import 9 | "../sass/mui/colors", 10 | "mui-email/variables", 11 | "../sass/mui/mixins"; 12 | 13 | // CSS Reboot 14 | @import 15 | "mui-email/reboot"; 16 | 17 | // Components 18 | @import 19 | "mui-email/body", 20 | "mui-email/buttons", 21 | "mui-email/containers", 22 | "mui-email/divider", 23 | "mui-email/panel"; 24 | 25 | // Miscellaneous 26 | @import 27 | "mui-email/helpers", 28 | "mui-email/typography"; 29 | -------------------------------------------------------------------------------- /packages/npm/lib/email/mui-email-styletag.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Core variables and mixins 4 | @import 5 | "../sass/mui/colors", 6 | "../sass/mui/mixins", 7 | "mui-email/variables"; 8 | 9 | // Main CSS 10 | @import 11 | "mui-email/styletag"; 12 | -------------------------------------------------------------------------------- /packages/npm/lib/email/mui-email/_body.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Body Component 3 | */ 4 | 5 | .mui-body { 6 | margin: 0; 7 | padding: 0; 8 | height: 100%; 9 | width: 100%; 10 | color: $mui-base-font-color; 11 | font-family: $mui-base-font-family; 12 | font-weight: $mui-base-font-weight; 13 | font-size: $mui-base-font-size; 14 | line-height: $mui-base-line-height; 15 | letter-spacing: $mui-base-letter-spacing; 16 | 17 | @if $mui-body-bg-color { 18 | background-color: $mui-body-bg-color; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/npm/lib/email/mui-email/_containers.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Containers 3 | */ 4 | 5 | .mui-container { 6 | max-width: $mui-container-max-width; 7 | display: block; 8 | margin: 0 auto; 9 | clear: both; 10 | text-align: left; 11 | padding-left: $mui-container-padding-horizontal; 12 | padding-right: $mui-container-padding-horizontal; 13 | } 14 | 15 | .mui-container-fixed { 16 | @extend .mui-container; 17 | width: $mui-container-max-width; 18 | } 19 | -------------------------------------------------------------------------------- /packages/npm/lib/email/mui-email/_divider.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Dividers 3 | */ 4 | 5 | .mui-divider { 6 | display: block; 7 | height: 1px; 8 | background-color: $mui-divider-color; 9 | } 10 | 11 | .mui--divider-top { 12 | border-top: 1px solid $mui-divider-color; 13 | } 14 | 15 | .mui--divider-bottom { 16 | border-bottom: 1px solid $mui-divider-color; 17 | } 18 | 19 | .mui--divider-left { 20 | border-left: 1px solid $mui-divider-color; 21 | } 22 | 23 | .mui--divider-right { 24 | border-right: 1px solid $mui-divider-color; 25 | } 26 | -------------------------------------------------------------------------------- /packages/npm/lib/email/mui-email/_grid.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Grid 3 | */ 4 | 5 | table { 6 | &.mui-body { 7 | height: 100%; 8 | width: 100%; 9 | @extend body; 10 | } 11 | 12 | &.mui-container { 13 | width: $mui-container-width; 14 | margin: 0 auto; 15 | text-align: inherit; 16 | 17 | table.mui-row { 18 | display: block; 19 | } 20 | } 21 | 22 | &.mui-row { 23 | padding: 0px; 24 | width: 100%; 25 | position: relative; 26 | } 27 | } 28 | 29 | td.mui-wrapper { 30 | padding: $mui-wrapper-padding-top $mui-column-gutter 0px 0px; 31 | position: relative; 32 | } 33 | -------------------------------------------------------------------------------- /packages/npm/lib/email/mui-email/_helpers.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Helpers 3 | */ 4 | 5 | // ============================================================================ 6 | // ALIGNMENT 7 | // ============================================================================ 8 | 9 | .mui--text-left { text-align: left; } 10 | .mui--text-right { text-align: right; } 11 | .mui--text-center { text-align: center; } 12 | .mui--text-justify { text-align: justify; } 13 | 14 | 15 | 16 | 17 | // ============================================================================ 18 | // IMAGES 19 | // ============================================================================ 20 | 21 | .mui-image--fix { 22 | display: block; 23 | } 24 | 25 | 26 | 27 | 28 | // ============================================================================ 29 | // TEXT COLOR HELPERS 30 | // ============================================================================ 31 | 32 | .mui--text-dark { color: $mui-text-dark; } 33 | .mui--text-dark-secondary { color: $mui-text-dark-secondary; } 34 | .mui--text-dark-hint { color: $mui-text-dark-hint; } 35 | 36 | .mui--text-light { color: $mui-text-light; } 37 | .mui--text-light-secondary { color: $mui-text-light-secondary; } 38 | .mui--text-light-hint { color: $mui-text-light-hint; } 39 | 40 | .mui--text-accent { color: $mui-text-accent; } 41 | .mui--text-accent-secondary { color: $mui-text-accent-secondary; } 42 | .mui--text-accent-hint { color: $mui-text-accent-hint; } 43 | 44 | .mui--text-black { color: mui-color('black'); } 45 | .mui--text-white { color: mui-color('white'); } 46 | .mui--text-danger { color: $mui-text-danger; } 47 | -------------------------------------------------------------------------------- /packages/npm/lib/email/mui-email/_normalize.scss: -------------------------------------------------------------------------------- 1 | // ========================= 2 | // Reset 3 | // ========================= 4 | body { 5 | width: 100% !important; 6 | min-width: 100%; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | img { 12 | border: 0 none; 13 | height: auto; 14 | line-height: 100%; 15 | outline: none; 16 | text-decoration: none; 17 | } 18 | 19 | a img { 20 | border: 0 none; 21 | } 22 | 23 | table { 24 | border-spacing: 0; 25 | border-collapse: collapse; 26 | } 27 | 28 | td { 29 | padding: 0; 30 | text-align: left; 31 | word-break: break-word; 32 | -webkit-hyphens: auto; 33 | -moz-hyphens: auto; 34 | hyphens: auto; 35 | border-collapse: collapse !important; 36 | } 37 | 38 | 39 | // ============================= 40 | // Client-specific styles 41 | // ============================= 42 | table, td { 43 | mso-table-lspace: 0pt; 44 | mso-table-rspace: 0pt; 45 | } 46 | 47 | body, 48 | table, 49 | td, 50 | p, 51 | a, 52 | li, 53 | blockquote{ 54 | -webkit-text-size-adjust: 100%; 55 | -ms-text-size-adjust: 100%; 56 | } 57 | 58 | img{ 59 | -ms-interpolation-mode: bicubic; 60 | } 61 | -------------------------------------------------------------------------------- /packages/npm/lib/email/mui-email/_panel.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Panel 3 | */ 4 | 5 | .mui-panel { 6 | padding: $mui-panel-padding; 7 | border-radius: $mui-panel-border-radius; 8 | background-color: $mui-panel-bg; 9 | border-top: 1px solid darken(mui-color('white'), 7%); 10 | border-left: 1px solid darken(mui-color('white'), 10%); 11 | border-right: 1px solid darken(mui-color('white'), 10%); 12 | border-bottom: 2px solid darken(mui-color('white'), 17%); 13 | } 14 | -------------------------------------------------------------------------------- /packages/npm/lib/email/mui-email/_reboot.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Reboot 3 | */ 4 | 5 | body { 6 | color: $mui-base-font-color; 7 | font-family: $mui-base-font-family; 8 | font-weight: $mui-base-font-weight; 9 | font-size: $mui-base-font-size; 10 | line-height: $mui-base-line-height; 11 | letter-spacing: $mui-base-letter-spacing; 12 | 13 | @if $mui-body-bg-color { 14 | background-color: $mui-body-bg-color; 15 | } 16 | } 17 | 18 | a { 19 | color: $mui-link-font-color; 20 | text-decoration: $mui-link-text-decoration; 21 | } 22 | 23 | p { 24 | margin: 0 0 ($mui-base-line-height-computed / 2); 25 | } 26 | 27 | hr { 28 | color: $mui-hr-color; 29 | background-color: $mui-hr-color; 30 | height: 1px; 31 | border: none; 32 | } 33 | 34 | strong { 35 | font-weight: 700; 36 | } 37 | 38 | h1 { 39 | @extend .mui--text-display1; 40 | } 41 | 42 | h2 { 43 | @extend .mui--text-headline; 44 | } 45 | 46 | h3 { 47 | @extend .mui--text-title; 48 | } 49 | 50 | h4 { 51 | @extend .mui--text-subhead; 52 | } 53 | 54 | h5 { 55 | @extend .mui--text-body2; 56 | } 57 | 58 | h1, h2, h3 { 59 | margin-top: $mui-base-line-height-computed; 60 | margin-bottom: ($mui-base-line-height-computed / 2); 61 | } 62 | 63 | h4, h5, h6 { 64 | margin-top: ($mui-base-line-height-computed / 2); 65 | margin-bottom: ($mui-base-line-height-computed / 2); 66 | } 67 | -------------------------------------------------------------------------------- /packages/npm/lib/email/mui-email/_styletag.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Styletag 3 | */ 4 | 5 | // ============================================================================ 6 | // OUTLOOK 7 | // ============================================================================ 8 | 9 | // add view in browser option 10 | #outlook a { 11 | padding: 0; 12 | } 13 | 14 | 15 | 16 | 17 | // ============================================================================ 18 | // HOTMAIL 19 | // ============================================================================ 20 | 21 | .ReadMsgBody{ 22 | width: 100%; 23 | } 24 | 25 | .ExternalClass { 26 | width: 100%; // display emails at full width 27 | 28 | &, 29 | & p, 30 | & span, 31 | & font, 32 | & td, 33 | & div { 34 | line-height: 100%; // display normal line spacing 35 | } 36 | } 37 | 38 | 39 | 40 | 41 | // ============================================================================ 42 | // MISCELLANEOUS 43 | // ============================================================================ 44 | 45 | .mui-container-fixed { 46 | width: $mui-container-max-width; 47 | display: block; 48 | margin: 0 auto; 49 | clear: both; 50 | text-align: left; 51 | padding-left: $mui-container-padding-horizontal; 52 | padding-right: $mui-container-padding-horizontal; 53 | } 54 | -------------------------------------------------------------------------------- /packages/npm/lib/email/mui-email/_typography.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Typography 3 | */ 4 | 5 | .mui--text-display4 { 6 | @include mui-text("display4"); 7 | } 8 | 9 | .mui--text-display3 { 10 | @include mui-text("display3"); 11 | } 12 | 13 | .mui--text-display2 { 14 | @include mui-text("display2"); 15 | } 16 | 17 | .mui--text-display1 { 18 | @include mui-text("display1"); 19 | } 20 | 21 | .mui--text-headline { 22 | @include mui-text("headline"); 23 | } 24 | 25 | .mui--text-title { 26 | @include mui-text("title"); 27 | } 28 | 29 | .mui--text-subhead { 30 | @include mui-text("subhead"); 31 | } 32 | 33 | .mui--text-body2 { 34 | @include mui-text("body2"); 35 | } 36 | 37 | .mui--text-body1 { 38 | @include mui-text("body1"); 39 | } 40 | 41 | .mui--text-caption { 42 | @include mui-text("caption"); 43 | } 44 | 45 | .mui--text-menu { 46 | @include mui-text("menu"); 47 | } 48 | 49 | .mui--text-button { 50 | @include mui-text("button"); 51 | } 52 | -------------------------------------------------------------------------------- /packages/npm/lib/js/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI config module 3 | * @module config 4 | */ 5 | 6 | /** Define module API */ 7 | module.exports = { 8 | /** Use debug mode */ 9 | debug: true 10 | }; 11 | -------------------------------------------------------------------------------- /packages/npm/lib/js/lib/forms.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI CSS/JS form helpers module 3 | * @module lib/forms.py 4 | */ 5 | 6 | 'use strict'; 7 | 8 | var jqLite = require('./jqLite'); 9 | 10 | 11 | /** 12 | * Menu position/size/scroll helper 13 | * @returns {Object} Object with keys 'height', 'top', 'scrollTop' 14 | */ 15 | function getMenuPositionalCSSFn(wrapperEl, menuEl, selectedRow) { 16 | var viewHeight = document.documentElement.clientHeight, 17 | numRows = menuEl.children.length; 18 | 19 | // determine menu height 20 | var h = parseInt(menuEl.offsetHeight), 21 | height = Math.min(h, viewHeight); 22 | 23 | // determine row height 24 | var p = parseInt(jqLite.css(menuEl, 'padding-top')), 25 | rowHeight = (h - 2 * p) / numRows; 26 | 27 | // determine 'top' 28 | var top, initTop, minTop, maxTop; 29 | 30 | initTop = -1 * selectedRow * rowHeight; 31 | minTop = -1 * wrapperEl.getBoundingClientRect().top; 32 | maxTop = (viewHeight - height) + minTop; 33 | 34 | top = Math.min(Math.max(initTop, minTop), maxTop); 35 | 36 | // determine 'scrollTop' 37 | var scrollTop = 0, 38 | scrollIdeal, 39 | scrollMax; 40 | 41 | if (h > viewHeight) { 42 | scrollIdeal = top + p + selectedRow * rowHeight; 43 | scrollMax = numRows * rowHeight + 2 * p - height; 44 | scrollTop = Math.min(scrollIdeal, scrollMax); 45 | } 46 | 47 | return { 48 | 'height': height + 'px', 49 | 'top': top + 'px', 50 | 'scrollTop': scrollTop 51 | }; 52 | } 53 | 54 | 55 | /** Define module API */ 56 | module.exports = { 57 | getMenuPositionalCSS: getMenuPositionalCSSFn 58 | }; 59 | -------------------------------------------------------------------------------- /packages/npm/lib/react/_helpers.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | /** 3 | * MUI React helpers 4 | * @module react/_helpers 5 | */ 6 | 'use strict'; 7 | 8 | var controlledMessage = 'You provided a `value` prop to a form field ' + 'without an `OnChange` handler. Please see React documentation on ' + 'controlled components'; 9 | /** Module export */ 10 | 11 | module.exports = { 12 | controlledMessage: controlledMessage 13 | }; -------------------------------------------------------------------------------- /packages/npm/lib/react/appbar.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | /** 3 | * MUI React Appbar Module 4 | * @module react/appbar 5 | */ 6 | 'use strict'; 7 | 8 | Object.defineProperty(exports, "__esModule", { 9 | value: true 10 | }); 11 | exports.default = void 0; 12 | 13 | var _react = babelHelpers.interopRequireDefault(require("react")); 14 | 15 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = babelHelpers.getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = babelHelpers.getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return babelHelpers.possibleConstructorReturn(this, result); }; } 16 | 17 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } 18 | 19 | /** 20 | * Appbar constructor 21 | * @class 22 | */ 23 | var Appbar = /*#__PURE__*/function (_React$Component) { 24 | babelHelpers.inherits(Appbar, _React$Component); 25 | 26 | var _super = _createSuper(Appbar); 27 | 28 | function Appbar() { 29 | babelHelpers.classCallCheck(this, Appbar); 30 | return _super.apply(this, arguments); 31 | } 32 | 33 | babelHelpers.createClass(Appbar, [{ 34 | key: "render", 35 | value: function render() { 36 | var _this$props = this.props, 37 | children = _this$props.children, 38 | reactProps = babelHelpers.objectWithoutProperties(_this$props, ["children"]); 39 | return /*#__PURE__*/_react.default.createElement("div", babelHelpers.extends({}, reactProps, { 40 | className: 'mui-appbar ' + this.props.className 41 | }), children); 42 | } 43 | }]); 44 | return Appbar; 45 | }(_react.default.Component); 46 | /** Define module API */ 47 | 48 | 49 | babelHelpers.defineProperty(Appbar, "defaultProps", { 50 | className: '' 51 | }); 52 | var _default = Appbar; 53 | exports.default = _default; 54 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/react/input.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | /** 3 | * MUI React Input Component 4 | * @module react/input 5 | */ 6 | 'use strict'; 7 | 8 | Object.defineProperty(exports, "__esModule", { 9 | value: true 10 | }); 11 | exports.default = void 0; 12 | 13 | var _react = babelHelpers.interopRequireDefault(require("react")); 14 | 15 | var _textfieldHelpers = require("./_textfieldHelpers"); 16 | 17 | /** 18 | * Input constructor 19 | * @class 20 | */ 21 | var Input = (0, _textfieldHelpers.textfieldWrapper)(function (props) { 22 | var inputRef = props.inputRef, 23 | rest = babelHelpers.objectWithoutProperties(props, ["inputRef"]); 24 | return /*#__PURE__*/_react.default.createElement("input", babelHelpers.extends({ 25 | ref: inputRef 26 | }, rest)); 27 | }); 28 | /** Module API */ 29 | 30 | var _default = Input; 31 | exports.default = _default; 32 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/react/panel.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | /** 3 | * MUI React layout module 4 | * @module react/layout 5 | */ 6 | 'use strict'; 7 | 8 | Object.defineProperty(exports, "__esModule", { 9 | value: true 10 | }); 11 | exports.default = void 0; 12 | 13 | var _react = babelHelpers.interopRequireDefault(require("react")); 14 | 15 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = babelHelpers.getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = babelHelpers.getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return babelHelpers.possibleConstructorReturn(this, result); }; } 16 | 17 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } 18 | 19 | /** 20 | * Panel constructor 21 | * @class 22 | */ 23 | var Panel = /*#__PURE__*/function (_React$Component) { 24 | babelHelpers.inherits(Panel, _React$Component); 25 | 26 | var _super = _createSuper(Panel); 27 | 28 | function Panel() { 29 | babelHelpers.classCallCheck(this, Panel); 30 | return _super.apply(this, arguments); 31 | } 32 | 33 | babelHelpers.createClass(Panel, [{ 34 | key: "render", 35 | value: function render() { 36 | var _this$props = this.props, 37 | children = _this$props.children, 38 | className = _this$props.className, 39 | reactProps = babelHelpers.objectWithoutProperties(_this$props, ["children", "className"]); 40 | return /*#__PURE__*/_react.default.createElement("div", babelHelpers.extends({}, reactProps, { 41 | className: 'mui-panel ' + className 42 | }), children); 43 | } 44 | }]); 45 | return Panel; 46 | }(_react.default.Component); 47 | /** Define module API */ 48 | 49 | 50 | babelHelpers.defineProperty(Panel, "defaultProps", { 51 | className: '' 52 | }); 53 | var _default = Panel; 54 | exports.default = _default; 55 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/react/tab.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | /** 3 | * MUI React tabs module 4 | * @module react/tabs 5 | */ 6 | 7 | /* jshint quotmark:false */ 8 | // jscs:disable validateQuoteMarks 9 | 'use strict'; 10 | 11 | Object.defineProperty(exports, "__esModule", { 12 | value: true 13 | }); 14 | exports.default = void 0; 15 | 16 | var _react = babelHelpers.interopRequireDefault(require("react")); 17 | 18 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = babelHelpers.getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = babelHelpers.getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return babelHelpers.possibleConstructorReturn(this, result); }; } 19 | 20 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } 21 | 22 | /** 23 | * Tab constructor 24 | * @class 25 | */ 26 | var Tab = /*#__PURE__*/function (_React$Component) { 27 | babelHelpers.inherits(Tab, _React$Component); 28 | 29 | var _super = _createSuper(Tab); 30 | 31 | function Tab() { 32 | babelHelpers.classCallCheck(this, Tab); 33 | return _super.apply(this, arguments); 34 | } 35 | 36 | babelHelpers.createClass(Tab, [{ 37 | key: "render", 38 | value: function render() { 39 | return null; 40 | } 41 | }]); 42 | return Tab; 43 | }(_react.default.Component); 44 | /** Define module API */ 45 | 46 | 47 | babelHelpers.defineProperty(Tab, "defaultProps", { 48 | value: null, 49 | label: '', 50 | onActive: null 51 | }); 52 | var _default = Tab; 53 | exports.default = _default; 54 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/react/textarea.js: -------------------------------------------------------------------------------- 1 | var babelHelpers = require('./babel-helpers.js'); 2 | /** 3 | * MUI React Textarea Component 4 | * @module react/textarea 5 | */ 6 | 'use strict'; 7 | 8 | Object.defineProperty(exports, "__esModule", { 9 | value: true 10 | }); 11 | exports.default = void 0; 12 | 13 | var _react = babelHelpers.interopRequireDefault(require("react")); 14 | 15 | var _textfieldHelpers = require("./_textfieldHelpers"); 16 | 17 | /** 18 | * Textarea constructor 19 | * @class 20 | */ 21 | var Textarea = (0, _textfieldHelpers.textfieldWrapper)(function (props) { 22 | var inputRef = props.inputRef, 23 | rest = babelHelpers.objectWithoutProperties(props, ["inputRef"]); // default number of rows 24 | 25 | if (!'rows' in rest) rest.rows = 2; 26 | return /*#__PURE__*/_react.default.createElement("textarea", babelHelpers.extends({ 27 | ref: inputRef 28 | }, rest)); 29 | }); 30 | var _default = Textarea; 31 | exports.default = _default; 32 | module.exports = exports.default; -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui-colors.scss: -------------------------------------------------------------------------------- 1 | @import "mui/colors"; 2 | 3 | @each $key1, $mapVal1 in $mui-colors { 4 | @if type-of($mapVal1) == 'map' { 5 | @each $key2, $mapVal2 in $mapVal1 { 6 | .mui--color-#{$key1}-#{$key2} { 7 | color: $mapVal2 !important; 8 | } 9 | 10 | .mui--bg-color-#{$key1}-#{$key2} { 11 | background-color: $mapVal2 !important; 12 | } 13 | 14 | @if $key2 == '500' { 15 | .mui--color-#{$key1} { 16 | color: $mapVal2 !important; 17 | } 18 | 19 | .mui--bg-color-#{$key1} { 20 | background-color: $mapVal2 !important; 21 | } 22 | } 23 | } 24 | 25 | } @else { 26 | .mui--color-#{$key1} { 27 | color: $mapVal1 !important; 28 | } 29 | 30 | .mui--bg-color-#{$key1} { 31 | background-color: $mapVal1 !important; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui-noglobals.scss: -------------------------------------------------------------------------------- 1 | $mui-include-globals: false; 2 | 3 | @import "mui"; 4 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui-px.scss: -------------------------------------------------------------------------------- 1 | $mui-use-rem: false; 2 | 3 | @import "mui"; 4 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui-rem.scss: -------------------------------------------------------------------------------- 1 | $mui-use-rem: true; 2 | 3 | @import "mui"; 4 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui.scss: -------------------------------------------------------------------------------- 1 | // Core variables and mixins 2 | @import 3 | "mui/colors", 4 | "mui/variables", 5 | "mui/mixins"; 6 | 7 | // Globals 8 | @import 9 | "mui/globals"; 10 | 11 | // Components 12 | @import 13 | "mui/appbar", 14 | "mui/buttons", 15 | "mui/checkbox-and-radio", 16 | "mui/containers", 17 | "mui/divider", 18 | "mui/dropdown", 19 | "mui/form", 20 | "mui/grid", 21 | "mui/panel", 22 | "mui/select", 23 | "mui/table", 24 | "mui/tabs", 25 | "mui/textfield"; 26 | 27 | // Miscellaneous 28 | @import 29 | "mui/helpers", 30 | "mui/overlay", 31 | "mui/ripple", 32 | "mui/typography"; 33 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_appbar.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Appbar 3 | */ 4 | 5 | $x-mobile-breakpoint: 480px; 6 | 7 | // ============================================================================ 8 | // HELPER CLASSES 9 | // ============================================================================ 10 | 11 | // mobile portrait 12 | .mui--appbar-height { height: $mui-appbar-height-xs-portrait; } 13 | .mui--appbar-min-height { min-height: $mui-appbar-height-xs-portrait; } 14 | .mui--appbar-line-height { line-height: $mui-appbar-height-xs-portrait; } 15 | .mui--appbar-top { top: $mui-appbar-height-xs-portrait; } 16 | 17 | // mobile landscape 18 | @media (orientation: landscape) and (max-height: $x-mobile-breakpoint) { 19 | .mui--appbar-height { height: $mui-appbar-height-xs-landscape; } 20 | .mui--appbar-min-height { min-height: $mui-appbar-height-xs-landscape; } 21 | .mui--appbar-line-height { line-height: $mui-appbar-height-xs-landscape; } 22 | .mui--appbar-top { top: $mui-appbar-height-xs-landscape; } 23 | } 24 | 25 | // all other screen sizes 26 | @media (min-width: $x-mobile-breakpoint) { 27 | .mui--appbar-height { height: $mui-appbar-height; } 28 | .mui--appbar-min-height { min-height: $mui-appbar-height; } 29 | .mui--appbar-line-height { line-height: $mui-appbar-height; } 30 | .mui--appbar-top { top: $mui-appbar-height; } 31 | } 32 | 33 | 34 | 35 | 36 | // ============================================================================ 37 | // APPBAR 38 | // ============================================================================ 39 | .mui-appbar { 40 | @extend .mui--appbar-min-height; 41 | 42 | background-color: $mui-appbar-bg-color; 43 | color: $mui-appbar-font-color; 44 | } 45 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_checkbox-and-radio.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Checkboxe and Radio Components 3 | */ 4 | 5 | .mui-radio, 6 | .mui-checkbox { 7 | position: relative; 8 | display: block; 9 | margin-top: mui-rem(10px); 10 | margin-bottom: mui-rem(10px); 11 | 12 | > label { 13 | min-height: $mui-base-line-height-computed; 14 | padding-left: 20px; 15 | margin-bottom: 0; 16 | font-weight: normal; 17 | cursor: pointer; 18 | } 19 | 20 | input:disabled { 21 | cursor: $mui-cursor-disabled; 22 | } 23 | 24 | input:focus { 25 | @include mui-tab-focus(); 26 | } 27 | } 28 | 29 | .mui-radio > label > input[type="radio"], 30 | .mui-radio--inline > label > input[type="radio"], 31 | .mui-checkbox > label> input[type="checkbox"], 32 | .mui-checkbox--inline > label > input[type="checkbox"] { 33 | position: absolute; 34 | margin-left: -20px; 35 | margin-top: mui-rem(4px); 36 | } 37 | 38 | .mui-radio + .mui-radio, 39 | .mui-checkbox + .mui-checkbox { 40 | // Move up sibling radios or checkboxes for tighter spacing 41 | margin-top: mui-rem(-5px); 42 | } 43 | 44 | .mui-radio--inline, 45 | .mui-checkbox--inline { 46 | // Radios and checkboxes on same line 47 | display: inline-block; 48 | padding-left: 20px; 49 | margin-bottom: 0; 50 | vertical-align: middle; 51 | font-weight: normal; 52 | cursor: pointer; 53 | 54 | > input[type="radio"], 55 | > input[type="checkbox"], 56 | > label > input[type="radio"], 57 | > label > input[type="checkbox"] { 58 | margin: mui-rem(4px) 0 0; 59 | line-height: normal; 60 | } 61 | } 62 | 63 | .mui-radio--inline + .mui-radio--inline, 64 | .mui-checkbox--inline + .mui-checkbox--inline { 65 | // Space out consecutive inline controls 66 | margin-top: 0; 67 | margin-left: 10px; 68 | } 69 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_containers.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Container module 3 | */ 4 | 5 | .mui-container { 6 | @include mui-container-fixed(); 7 | 8 | @media (min-width: $mui-screen-sm-min) { 9 | max-width: $mui-container-sm; 10 | } 11 | @media (min-width: $mui-screen-md-min) { 12 | max-width: $mui-container-md; 13 | } 14 | @media (min-width: $mui-screen-lg-min) { 15 | max-width: $mui-container-lg; 16 | } 17 | @media (min-width: $mui-screen-xl-min) { 18 | max-width: $mui-container-xl; 19 | } 20 | } 21 | 22 | .mui-container-fluid { 23 | @include mui-container-fixed(); 24 | } 25 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_divider.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Divider Component and CSS Helpers 3 | */ 4 | 5 | .mui-divider { 6 | display: block; 7 | height: 1px; 8 | background-color: $mui-divider-color; 9 | } 10 | 11 | .mui--divider-top { 12 | border-top: 1px solid $mui-divider-color; 13 | } 14 | 15 | .mui--divider-bottom { 16 | border-bottom: 1px solid $mui-divider-color; 17 | } 18 | 19 | .mui--divider-left { 20 | border-left: 1px solid $mui-divider-color; 21 | } 22 | 23 | .mui--divider-right { 24 | border-right: 1px solid $mui-divider-color; 25 | } 26 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_form.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Form Component 3 | */ 4 | 5 | .mui-form { 6 | legend { 7 | display: block; 8 | width: 100%; 9 | padding: 0; 10 | margin-bottom: $mui-base-line-height-computed / 2; 11 | font-size: $mui-form-legend-font-size; 12 | color: $mui-form-legend-font-color; 13 | line-height: inherit; 14 | border: 0; 15 | } 16 | 17 | fieldset { 18 | border: 0; 19 | padding: 0; 20 | margin: 0 0 $mui-form-group-margin-bottom 0; 21 | } 22 | } 23 | 24 | .mui-form--inline { 25 | @media (min-width: $mui-screen-sm-min) { 26 | .mui-textfield { 27 | display: inline-block; 28 | vertical-align: bottom; 29 | margin-bottom: 0; 30 | } 31 | 32 | .mui-radio, 33 | .mui-checkbox { 34 | display: inline-block; 35 | margin-top: 0; 36 | margin-bottom: 0; 37 | vertical-align: middle; 38 | 39 | > label { 40 | padding-left: 0; 41 | } 42 | } 43 | 44 | .mui-radio > label > input[type="radio"], 45 | .mui-checkbox > label > input[type="checkbox"] { 46 | position: relative; 47 | margin-left: 0; 48 | } 49 | 50 | .mui-select { 51 | display: inline-block; 52 | vertical-align: bottom; 53 | margin-bottom: 0; 54 | } 55 | 56 | .mui-btn { 57 | margin-bottom: 0; 58 | margin-top: 0; 59 | vertical-align: bottom; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_grid.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Grid module 3 | */ 4 | 5 | // row 6 | .mui-row { 7 | @include mui-clearfix(); 8 | 9 | margin-left: ($mui-grid-gutter-width / -2); 10 | margin-right: ($mui-grid-gutter-width / -2); 11 | } 12 | 13 | // columns 14 | @include mui-make-grid-columns(); 15 | 16 | // extra small grid 17 | @include mui-make-grid('xs'); 18 | 19 | // small grid 20 | @media (min-width: $mui-screen-sm-min) { 21 | @include mui-make-grid('sm'); 22 | } 23 | 24 | // medium grid 25 | @media (min-width: $mui-screen-md-min) { 26 | @include mui-make-grid('md'); 27 | } 28 | 29 | // large grid 30 | @media (min-width: $mui-screen-lg-min) { 31 | @include mui-make-grid('lg'); 32 | } 33 | 34 | // extra-large grid 35 | @media (min-width: $mui-screen-xl-min) { 36 | @include mui-make-grid('xl'); 37 | } 38 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/grid-framework"; 2 | @import "mixins/util"; 3 | @import "mixins/buttons"; 4 | @import "mixins/typography"; 5 | @import "mixins/forms"; 6 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_overlay.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Overlay module 3 | */ 4 | 5 | #mui-overlay { 6 | position: fixed; 7 | top: 0; 8 | right: 0; 9 | bottom: 0; 10 | left: 0; 11 | z-index: 99999999; 12 | background-color: $mui-overlay-bg-color; 13 | overflow: auto; 14 | } 15 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_panel.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Panel module 3 | */ 4 | 5 | .mui-panel { 6 | @include mui-clearfix(); 7 | 8 | padding: $mui-panel-padding; 9 | margin-bottom: $mui-base-line-height-computed; 10 | border-radius: $mui-panel-border-radius; 11 | background-color: $mui-panel-bg-color; 12 | box-shadow: 0 2px 2px 0 rgba(mui-color('black'), 0.16), 13 | 0 0px 2px 0 rgba(mui-color('black'), 0.12); 14 | 15 | // IE10+ bugfix 16 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 17 | box-shadow: 0 -1px 2px 0 rgba(mui-color('black'), 0.12), 18 | -1px 0px 2px 0 rgba(mui-color('black'), 0.12), 19 | 0 2px 2px 0 rgba(mui-color('black'), 0.16), 20 | 0 0px 2px 0 rgba(mui-color('black'), 0.12); 21 | } 22 | 23 | // Edge 24 | @supports (-ms-ime-align:auto) { 25 | box-shadow: 0 -1px 2px 0 rgba(mui-color('black'), 0.12), 26 | -1px 0px 2px 0 rgba(mui-color('black'), 0.12), 27 | 0 2px 2px 0 rgba(mui-color('black'), 0.16), 28 | 0 0px 2px 0 rgba(mui-color('black'), 0.12); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_ripple.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Ripple module 3 | */ 4 | 5 | .mui-btn__ripple-container { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | display: block; 10 | height: 100%; 11 | width: 100%; 12 | overflow: hidden; 13 | z-index: 0; 14 | pointer-events: none; 15 | } 16 | 17 | .mui-ripple { 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | border-radius: 50%; 22 | opacity: 0; 23 | pointer-events: none; 24 | transform: scale(0.0001, 0.0001); 25 | 26 | &.mui--is-animating { 27 | transform: none; 28 | transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), 29 | width 0.3s cubic-bezier(0, 0, 0.2, 1), 30 | height 0.3s cubic-bezier(0, 0, 0.2, 1), 31 | opacity 0.3s cubic-bezier(0, 0, 0.2, 1); 32 | } 33 | 34 | &.mui--is-visible { 35 | opacity: 0.3; 36 | } 37 | } 38 | 39 | .mui-btn .mui-ripple { 40 | background-color: $mui-btn-default-ripple-color; 41 | } 42 | 43 | .mui-btn--primary .mui-ripple { 44 | background-color: $mui-btn-primary-ripple-color; 45 | } 46 | 47 | .mui-btn--dark .mui-ripple { 48 | background-color: $mui-btn-dark-ripple-color; 49 | } 50 | 51 | .mui-btn--danger .mui-ripple { 52 | background-color: $mui-btn-danger-ripple-color; 53 | } 54 | 55 | .mui-btn--accent .mui-ripple { 56 | background-color: $mui-btn-accent-ripple-color; 57 | } 58 | 59 | .mui-btn--flat .mui-ripple { 60 | background-color: $mui-btn-flat-ripple-color; 61 | } 62 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_table.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Table Component 3 | */ 4 | 5 | // Table style 6 | .mui-table { 7 | width: 100%; 8 | max-width: 100%; 9 | margin-bottom: $mui-base-line-height-computed; 10 | 11 | // Cells 12 | > thead, 13 | > tbody, 14 | > tfoot { 15 | > tr { 16 | > th { 17 | text-align: left; 18 | } 19 | 20 | > th, 21 | > td { 22 | padding: $mui-table-cell-padding; 23 | line-height: $mui-base-line-height; 24 | } 25 | } 26 | } 27 | 28 | // Bottom align for column headings 29 | > thead > tr > th { 30 | border-bottom: 2px solid $mui-table-border-color; 31 | font-weight: 700; 32 | } 33 | 34 | // multiple tbody instances 35 | > tbody + tbody { 36 | border-top: 2px solid $mui-table-border-color; 37 | } 38 | 39 | // Bordered style 40 | &.mui-table--bordered > tbody > tr > td { 41 | border-bottom: 1px solid $mui-table-border-color; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_tabs.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Tabs module 3 | */ 4 | 5 | .mui-tabs__bar { 6 | list-style: none; 7 | padding-left: 0; 8 | margin-bottom: 0; 9 | background-color: transparent; 10 | white-space: nowrap; 11 | overflow-x: auto; 12 | 13 | > li { 14 | display: inline-block; 15 | 16 | > a { 17 | display: block; 18 | white-space: nowrap; 19 | text-transform: uppercase; 20 | font-weight: 500; 21 | font-size: mui-rem(14px); 22 | color: $mui-tab-font-color; 23 | cursor: default; 24 | height: mui-rem(48px); 25 | line-height: mui-rem(48px); 26 | padding-left: mui-rem(24px); 27 | padding-right: mui-rem(24px); 28 | user-select: none; 29 | 30 | &:hover { 31 | text-decoration: none; 32 | } 33 | } 34 | 35 | &.mui--is-active { 36 | border-bottom: 2px solid $mui-tab-border-color-active; 37 | 38 | > a { 39 | @if $mui-tab-font-color-active == null { 40 | color: $mui-tab-font-color; 41 | } @else { 42 | color: $mui-tab-font-color-active; 43 | } 44 | } 45 | } 46 | } 47 | 48 | &.mui-tabs__bar--justified { 49 | display: table; 50 | width: 100%; 51 | table-layout: fixed; 52 | 53 | > li { 54 | display: table-cell; 55 | 56 | > a { 57 | text-align: center; 58 | padding-left: 0px; 59 | padding-right: 0px; 60 | } 61 | } 62 | } 63 | } 64 | 65 | .mui-tabs__pane { 66 | display: none; 67 | 68 | &.mui--is-active { 69 | display: block; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/_typography.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Typography module 3 | */ 4 | 5 | .mui--text-display4 { 6 | @include mui-text("display4"); 7 | } 8 | 9 | .mui--text-display3 { 10 | @include mui-text("display3"); 11 | } 12 | 13 | .mui--text-display2 { 14 | @include mui-text("display2"); 15 | } 16 | 17 | .mui--text-display1 { 18 | @include mui-text("display1"); 19 | } 20 | 21 | .mui--text-headline { 22 | @include mui-text("headline"); 23 | } 24 | 25 | .mui--text-title { 26 | @include mui-text("title"); 27 | } 28 | 29 | .mui--text-subhead { 30 | @include mui-text("subhead"); 31 | } 32 | 33 | .mui--text-body2 { 34 | @include mui-text("body2"); 35 | } 36 | 37 | .mui--text-body1 { 38 | @include mui-text("body1"); 39 | } 40 | 41 | .mui--text-caption { 42 | @include mui-text("caption"); 43 | } 44 | 45 | .mui--text-menu { 46 | @include mui-text("menu"); 47 | } 48 | 49 | .mui--text-button { 50 | @include mui-text("button"); 51 | } 52 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | @mixin button-variant($font-color, $bg-color) { 2 | color: $font-color; 3 | background-color: $bg-color; 4 | 5 | &:hover, 6 | &:focus, 7 | &:active { 8 | color: $font-color; 9 | background-color: lighten($bg-color, 5%); 10 | } 11 | 12 | &[disabled] { 13 | &:hover, 14 | &:focus, 15 | &:active { 16 | color: $font-color; 17 | background-color: $bg-color; 18 | } 19 | } 20 | } 21 | 22 | @mixin button-flat-variant($font-color, $bg-color-hover) { 23 | &.mui-btn--flat { 24 | color: $font-color; 25 | background-color: transparent; 26 | 27 | &:hover, 28 | &:focus, 29 | &:active { 30 | color: $font-color; 31 | background-color: $bg-color-hover; 32 | } 33 | 34 | &[disabled] { 35 | &:hover, 36 | &:focus, 37 | &:active { 38 | color: $font-color; 39 | background-color: transparent; 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/mixins/_forms.scss: -------------------------------------------------------------------------------- 1 | @mixin form-label() { 2 | // Positioning 3 | position: absolute; 4 | top: 0; 5 | 6 | // Display 7 | display: block; 8 | width: 100%; 9 | 10 | // Other 11 | color: $mui-label-font-color; 12 | font-size: $mui-label-font-size; 13 | font-weight: 400; 14 | line-height: $xFormLabelLineHeight; 15 | overflow-x: hidden; 16 | text-overflow: ellipsis; 17 | white-space: nowrap; 18 | } 19 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/mixins/_grid-framework.scss: -------------------------------------------------------------------------------- 1 | // Overrides bootstrap functions to add prfx support 2 | 3 | @mixin mui-make-grid-columns($i: 1, $list: ".mui-col-xs-#{$i}, .mui-col-sm-#{$i}, .mui-col-md-#{$i}, .mui-col-lg-#{$i}") { 4 | @for $i from (1 + 1) through $mui-grid-columns { 5 | $list: "#{$list}, .mui-col-xs-#{$i}, .mui-col-sm-#{$i}, .mui-col-md-#{$i}, .mui-col-lg-#{$i}"; 6 | } 7 | 8 | #{$list} { 9 | // box sizing 10 | box-sizing: border-box; 11 | 12 | // Prevent columns from collapsing when empty 13 | min-height: 1px; 14 | 15 | // Inner gutter via padding 16 | padding-left: ($mui-grid-gutter-width / 2); 17 | padding-right: ($mui-grid-gutter-width / 2); 18 | } 19 | } 20 | 21 | @mixin mui-float-grid-columns($class, $i: 1, $list: ".mui-col-#{$class}-#{$i}") { 22 | @for $i from (1 + 1) through $mui-grid-columns { 23 | $list: "#{$list}, .mui-col-#{$class}-#{$i}"; 24 | } 25 | 26 | #{$list} { 27 | float: left; 28 | } 29 | } 30 | 31 | @mixin mui-calc-grid-column($i, $class, $type) { 32 | @if ($type == 'width') and ($i > 0) { 33 | .mui-col-#{$class}-#{$i} { 34 | width: percentage(($i / $mui-grid-columns)); 35 | } 36 | } 37 | @if ($type == 'offset') { 38 | .mui-col-#{$class}-offset-#{$i} { 39 | margin-left: percentage(($i / $mui-grid-columns)); 40 | } 41 | } 42 | } 43 | 44 | @mixin mui-loop-grid-columns($columns, $class, $type) { 45 | @for $i from 0 through $columns { 46 | @include mui-calc-grid-column($i, $class, $type); 47 | } 48 | } 49 | 50 | @mixin mui-make-grid($class) { 51 | @include mui-float-grid-columns($class); 52 | @include mui-loop-grid-columns($mui-grid-columns, $class, 'width'); 53 | @include mui-loop-grid-columns($mui-grid-columns, $class, 'offset'); 54 | } 55 | -------------------------------------------------------------------------------- /packages/npm/lib/sass/mui/mixins/_typography.scss: -------------------------------------------------------------------------------- 1 | // ************************** 2 | // Typography 3 | // ************************** 4 | @mixin mui-text($mui-name) { 5 | $mui-styles: map-get($mui-mui-text-styles, $mui-name); 6 | 7 | font-weight: map-get($mui-styles, "font-weight"); 8 | font-size: map-get($mui-styles, "font-size"); 9 | line-height: map-get($mui-styles, "line-height"); 10 | 11 | @if $mui-name == "button" { 12 | text-transform: uppercase; 13 | } 14 | } 15 | 16 | 17 | $mui-mui-text-styles: ( 18 | "display4": ( 19 | "font-weight": 300, 20 | "font-size": mui-rem(112px), 21 | "line-height": mui-rem(112px) 22 | ), 23 | "display3": ( 24 | "font-weight": 400, 25 | "font-size": mui-rem(56px), 26 | "line-height": mui-rem(56px) 27 | ), 28 | "display2": ( 29 | "font-weight": 400, 30 | "font-size": mui-rem(45px), 31 | "line-height": mui-rem(48px) 32 | ), 33 | "display1": ( 34 | "font-weight": 400, 35 | "font-size": mui-rem(34px), 36 | "line-height": mui-rem(40px) 37 | ), 38 | "headline": ( 39 | "font-weight": 400, 40 | "font-size": mui-rem(24px), 41 | "line-height": mui-rem(32px) 42 | ), 43 | "title": ( 44 | "font-weight": 400, 45 | "font-size": mui-rem(20px), 46 | "line-height": mui-rem(28px) 47 | ), 48 | "subhead": ( 49 | "font-weight": 400, 50 | "font-size": mui-rem(16px), 51 | "line-height": mui-rem(24px) 52 | ), 53 | "body2": ( 54 | "font-weight": 500, 55 | "font-size": mui-rem(14px), 56 | "line-height": mui-rem(24px) 57 | ), 58 | "body1": ( 59 | "font-weight": 400, 60 | "font-size": mui-rem(14px), 61 | "line-height": mui-rem(20px) 62 | ), 63 | "caption": ( 64 | "font-weight": 400, 65 | "font-size": mui-rem(12px), 66 | "line-height": mui-rem(16px) 67 | ), 68 | "menu": ( 69 | "font-weight": 500, 70 | "font-size": mui-rem(13px), 71 | "line-height": mui-rem(17px) 72 | ), 73 | "button": ( 74 | "font-weight": 500, 75 | "font-size": mui-rem(14px), 76 | "line-height": mui-rem(18px) 77 | ) 78 | ); 79 | -------------------------------------------------------------------------------- /packages/npm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "muicss", 3 | "version": "0.10.3", 4 | "license": "MIT", 5 | "description": "Lightweight CSS framework based on Google's Material Design guidelines", 6 | "keywords": [ 7 | "MUI", 8 | "CSS", 9 | "CSS Framework", 10 | "Material Design", 11 | "React" 12 | ], 13 | "homepage": "https://www.muicss.com", 14 | "browserslist": [ 15 | "last 2 versions" 16 | ], 17 | "bugs": { 18 | "url": "https://github.com/muicss/mui/issues", 19 | "email": "contact@muicss.com" 20 | }, 21 | "main": "./index.js", 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/muicss/mui.git" 25 | }, 26 | "devDependencies": {}, 27 | "peerDependencies": { 28 | "react": "^0.14.0 || ^15.0.0 || ^16.0.0" 29 | }, 30 | "dependencies": { 31 | "react-addons-shallow-compare": "^15.6.2" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/npm/react.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI NPM Package 3 | * @module pkg/react.js 4 | */ 5 | 6 | /** Define module API */ 7 | module.exports = { 8 | Appbar: require('./lib/react/appbar'), 9 | Button: require('./lib/react/button'), 10 | Caret: require('./lib/react/caret'), 11 | Checkbox: require('./lib/react/checkbox'), 12 | Col: require('./lib/react/col'), 13 | Container: require('./lib/react/container'), 14 | Divider: require('./lib/react/divider'), 15 | Dropdown: require('./lib/react/dropdown'), 16 | DropdownItem: require('./lib/react/dropdown-item'), 17 | Form: require('./lib/react/form'), 18 | Input: require('./lib/react/input'), 19 | Option: require('./lib/react/option'), 20 | Panel: require('./lib/react/panel'), 21 | Radio: require('./lib/react/radio'), 22 | Row: require('./lib/react/row'), 23 | Select: require('./lib/react/select'), 24 | Tab: require('./lib/react/tab'), 25 | Tabs: require('./lib/react/tabs'), 26 | Textarea: require('./lib/react/textarea') 27 | }; 28 | -------------------------------------------------------------------------------- /src/angular/appbar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Angular Appbar Component 3 | * @module angular/appbar 4 | */ 5 | 6 | import angular from 'angular'; 7 | 8 | 9 | const moduleName = 'mui.appbar'; 10 | 11 | 12 | angular.module(moduleName, []) 13 | .directive('muiAppbar', function() { 14 | return { 15 | restrict: 'AE', 16 | transclude: true, 17 | replace: true, 18 | template: '
    ', 19 | link: function(scope, element, attrs, controller, transcludeFn) { 20 | // use transcludeFn to pass ng-controller on parent element 21 | transcludeFn(scope, function(clone) { 22 | element.append(clone); 23 | }); 24 | } 25 | }; 26 | }); 27 | 28 | 29 | /** Define module API */ 30 | export default moduleName; 31 | -------------------------------------------------------------------------------- /src/angular/caret.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Angular Caret Component 3 | * @module angular/caret 4 | */ 5 | 6 | import angular from 'angular'; 7 | 8 | 9 | const moduleName = 'mui.caret'; 10 | 11 | 12 | angular.module(moduleName, []) 13 | .directive('muiCaret', function() { 14 | return { 15 | restrict : 'AE', 16 | replace: true, 17 | template : '', 18 | link: function(scope, element, attrs) { 19 | // caret direction 20 | if (!angular.isUndefined(attrs.direction)) { 21 | element.addClass('mui-caret--' + attrs['direction']); 22 | } 23 | } 24 | }; 25 | }); 26 | 27 | 28 | /** Define module API */ 29 | export default moduleName; 30 | -------------------------------------------------------------------------------- /src/angular/checkbox.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Angular Checkbox Component 3 | * @module angular/checkox 4 | */ 5 | 6 | import angular from 'angular'; 7 | 8 | 9 | const moduleName = 'mui.checkbox'; 10 | 11 | 12 | angular.module(moduleName, []) 13 | .directive('muiCheckbox', ['$parse', function() { 14 | return { 15 | restrict: 'AE', 16 | replace: true, 17 | scope: { 18 | label: '@', 19 | name: '@', 20 | value: '@', 21 | ngChecked: '=', 22 | ngDisabled: '=', 23 | ngModel: '=' 24 | }, 25 | template: function(tElement, tAttrs) { 26 | var isUndef = angular.isUndefined, 27 | html = ''; 28 | 29 | html += '
    ', 19 | transclude: true, 20 | link: function(scope, element, attrs, controller, transcludeFn) { 21 | // use transcludeFn to pass ng-controller on parent element 22 | transcludeFn(scope, function(clone) { 23 | element.append(clone); 24 | }); 25 | 26 | // iterate through breakpoints 27 | var breakpoints = { 28 | 'xs': 'mui-col-xs-', 29 | 'sm': 'mui-col-sm-', 30 | 'md': 'mui-col-md-', 31 | 'lg': 'mui-col-lg-', 32 | 'xl': 'mui-col-xl-', 33 | 'xs-offset': 'mui-col-xs-offset-', 34 | 'sm-offset': 'mui-col-sm-offset-', 35 | 'md-offset': 'mui-col-md-offset-', 36 | 'lg-offset': 'mui-col-lg-offset-', 37 | 'xl-offset': 'mui-col-xl-offset-' 38 | }; 39 | 40 | angular.forEach(breakpoints, function(value, key) { 41 | var attrVal = attrs[attrs.$normalize(key)]; 42 | if (attrVal) element.addClass(value + attrVal); 43 | }) 44 | } 45 | } 46 | }); 47 | 48 | 49 | /** Define module API */ 50 | export default moduleName; 51 | -------------------------------------------------------------------------------- /src/angular/container.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Angular Container Component 3 | * @module angular/container 4 | */ 5 | 6 | import angular from 'angular'; 7 | 8 | 9 | const moduleName = 'mui.container'; 10 | 11 | 12 | angular.module(moduleName, []) 13 | .directive('muiContainer', function() { 14 | return { 15 | restrict: 'AE', 16 | template: '
    ', 17 | transclude: true, 18 | scope: true, 19 | replace: true, 20 | link: function(scope, element, attrs, controller, transcludeFn) { 21 | // use transcludeFn to pass ng-controller on parent element 22 | transcludeFn(scope, function(clone) { 23 | element.append(clone); 24 | }); 25 | 26 | // handle fluid containers 27 | if (!angular.isUndefined(attrs.fluid)){ 28 | element.removeClass('mui-container').addClass('mui-container-fluid'); 29 | } 30 | } 31 | }; 32 | }); 33 | 34 | 35 | /** Define module API */ 36 | export default moduleName; 37 | -------------------------------------------------------------------------------- /src/angular/divider.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Angular Divider Component 3 | * @module angular/divider 4 | */ 5 | 6 | import angular from 'angular'; 7 | 8 | 9 | const moduleName = 'mui.divider'; 10 | 11 | 12 | angular.module(moduleName, []) 13 | .directive('muiDivider', function() { 14 | return { 15 | restrict: 'AE', 16 | replace: true, 17 | compile: function(tElement, tAttrs) { 18 | tElement.addClass('mui-divider'); 19 | } 20 | } 21 | }); 22 | 23 | 24 | /** Define module API */ 25 | export default moduleName; 26 | -------------------------------------------------------------------------------- /src/angular/dropdown-item.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Angular DropdownItem Component 3 | * @module angular/dropdown-item 4 | */ 5 | 6 | import angular from 'angular'; 7 | 8 | 9 | const moduleName = 'mui.dropdown-item'; 10 | 11 | 12 | angular.module(moduleName, []) 13 | .directive('muiDropdownItem', function() { 14 | return { 15 | restrict: 'AE', 16 | replace: true, 17 | scope: { 18 | link: '@' 19 | }, 20 | transclude: true, 21 | template: '
    • ' 22 | }; 23 | }); 24 | 25 | 26 | /** Define module API */ 27 | export default moduleName; 28 | -------------------------------------------------------------------------------- /src/angular/form.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Angular Form Directive 3 | * @module angular/form 4 | */ 5 | 6 | import angular from 'angular'; 7 | 8 | 9 | const moduleName = 'mui.form'; 10 | 11 | 12 | angular.module(moduleName, []) 13 | .directive('muiForm', function() { 14 | return { 15 | restrict: 'AE', 16 | template: '
    ', 17 | transclude: true, 18 | scope: true, 19 | replace: true, 20 | link: function(scope, element, attrs, controller, transcludeFn) { 21 | // use transcludeFn to pass ng-controller on parent element 22 | transcludeFn(scope, function(clone) { 23 | element.append(clone); 24 | }); 25 | 26 | // handle inline forms 27 | if (!angular.isUndefined(attrs.inline)) { 28 | element.addClass('mui-form--inline'); 29 | } 30 | } 31 | }; 32 | }); 33 | 34 | 35 | /** Define module API */ 36 | export default moduleName; 37 | -------------------------------------------------------------------------------- /src/angular/option.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Angular Select Component 3 | * @module angular/select 4 | */ 5 | 6 | import angular from 'angular'; 7 | 8 | import * as formlib from '../js/lib/forms'; 9 | import * as util from '../js/lib/util'; 10 | import * as jqLite from '../js/lib/jqLite'; 11 | 12 | 13 | const moduleName = 'mui.option'; 14 | 15 | 16 | angular.module(moduleName, []) 17 | .directive('muiOption', function() { 18 | return { 19 | restrict: 'AE', 20 | replace: true, 21 | //require: '^muiSelect', 22 | scope: { 23 | label: '@', 24 | value: '@', 25 | ngDisabled: '=' 26 | }, 27 | template: '', 28 | link: function(scope, element, attrs, controller) { 29 | /* 30 | // register 31 | controller.addMenuItem({ 32 | label: attrs.label, 33 | value: attrs.value, 34 | disabled: scope.ngDisabled, 35 | hidden: attrs.hidden 36 | }); 37 | 38 | // destroy hook 39 | scope.$on('$destroy', function() { 40 | controller.removeMenuItem(attrs.value); 41 | }); 42 | */ 43 | } 44 | }; 45 | }); 46 | 47 | 48 | /** Define module API */ 49 | export default moduleName; 50 | -------------------------------------------------------------------------------- /src/angular/panel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Angular Panel Component 3 | * @module angular/panel 4 | */ 5 | 6 | import angular from 'angular'; 7 | 8 | 9 | const moduleName = 'mui.panel'; 10 | 11 | 12 | angular.module(moduleName, []) 13 | .directive('muiPanel', function() { 14 | return { 15 | restrict: 'AE', 16 | replace: true, 17 | scope : true, 18 | template: '
    ', 19 | transclude: true, 20 | link: function(scope, element, attr, controller, transcludeFn) { 21 | transcludeFn(scope, function(clone) { 22 | element.append(clone); 23 | }); 24 | } 25 | }; 26 | }); 27 | 28 | 29 | /** Define module API */ 30 | export default moduleName; 31 | -------------------------------------------------------------------------------- /src/angular/radio.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Angular Radio Component 3 | * @module angular/radio 4 | */ 5 | 6 | import angular from 'angular'; 7 | 8 | 9 | const moduleName = 'mui.radio'; 10 | 11 | 12 | angular.module(moduleName, []) 13 | .directive('muiRadio', function() { 14 | return { 15 | restrict: 'AE', 16 | replace: true, 17 | scope: { 18 | label: '@', 19 | name: '@', 20 | value: '@', 21 | ngChecked: '=', 22 | ngDisabled: '=', 23 | ngModel: '=' 24 | }, 25 | template: function(tElement, tAttrs) { 26 | var isUndef = angular.isUndefined, 27 | html = ''; 28 | 29 | html += '
    ', 19 | transclude: true, 20 | link: function(scope, element, attr, controller, transcludeFn) { 21 | transcludeFn(scope, function(clone) { 22 | element.append(clone); 23 | }); 24 | } 25 | }; 26 | }); 27 | 28 | 29 | /** Define module API */ 30 | export default moduleName; 31 | -------------------------------------------------------------------------------- /src/email/mui-email-inline.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Normalizer 4 | @import 5 | "mui-email/normalize"; 6 | 7 | // Core variables and mixins 8 | @import 9 | "../sass/mui/colors", 10 | "mui-email/variables", 11 | "../sass/mui/mixins"; 12 | 13 | // CSS Reboot 14 | @import 15 | "mui-email/reboot"; 16 | 17 | // Components 18 | @import 19 | "mui-email/body", 20 | "mui-email/buttons", 21 | "mui-email/containers", 22 | "mui-email/divider", 23 | "mui-email/panel"; 24 | 25 | // Miscellaneous 26 | @import 27 | "mui-email/helpers", 28 | "mui-email/typography"; 29 | -------------------------------------------------------------------------------- /src/email/mui-email-styletag.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Core variables and mixins 4 | @import 5 | "../sass/mui/colors", 6 | "../sass/mui/mixins", 7 | "mui-email/variables"; 8 | 9 | // Main CSS 10 | @import 11 | "mui-email/styletag"; 12 | -------------------------------------------------------------------------------- /src/email/mui-email/_body.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Body Component 3 | */ 4 | 5 | .mui-body { 6 | margin: 0; 7 | padding: 0; 8 | height: 100%; 9 | width: 100%; 10 | color: $mui-base-font-color; 11 | font-family: $mui-base-font-family; 12 | font-weight: $mui-base-font-weight; 13 | font-size: $mui-base-font-size; 14 | line-height: $mui-base-line-height; 15 | letter-spacing: $mui-base-letter-spacing; 16 | 17 | @if $mui-body-bg-color { 18 | background-color: $mui-body-bg-color; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/email/mui-email/_containers.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Containers 3 | */ 4 | 5 | .mui-container { 6 | max-width: $mui-container-max-width; 7 | display: block; 8 | margin: 0 auto; 9 | clear: both; 10 | text-align: left; 11 | padding-left: $mui-container-padding-horizontal; 12 | padding-right: $mui-container-padding-horizontal; 13 | } 14 | 15 | .mui-container-fixed { 16 | @extend .mui-container; 17 | width: $mui-container-max-width; 18 | } 19 | -------------------------------------------------------------------------------- /src/email/mui-email/_divider.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Dividers 3 | */ 4 | 5 | .mui-divider { 6 | display: block; 7 | height: 1px; 8 | background-color: $mui-divider-color; 9 | } 10 | 11 | .mui--divider-top { 12 | border-top: 1px solid $mui-divider-color; 13 | } 14 | 15 | .mui--divider-bottom { 16 | border-bottom: 1px solid $mui-divider-color; 17 | } 18 | 19 | .mui--divider-left { 20 | border-left: 1px solid $mui-divider-color; 21 | } 22 | 23 | .mui--divider-right { 24 | border-right: 1px solid $mui-divider-color; 25 | } 26 | -------------------------------------------------------------------------------- /src/email/mui-email/_grid.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Grid 3 | */ 4 | 5 | table { 6 | &.mui-body { 7 | height: 100%; 8 | width: 100%; 9 | @extend body; 10 | } 11 | 12 | &.mui-container { 13 | width: $mui-container-width; 14 | margin: 0 auto; 15 | text-align: inherit; 16 | 17 | table.mui-row { 18 | display: block; 19 | } 20 | } 21 | 22 | &.mui-row { 23 | padding: 0px; 24 | width: 100%; 25 | position: relative; 26 | } 27 | } 28 | 29 | td.mui-wrapper { 30 | padding: $mui-wrapper-padding-top $mui-column-gutter 0px 0px; 31 | position: relative; 32 | } 33 | -------------------------------------------------------------------------------- /src/email/mui-email/_helpers.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Helpers 3 | */ 4 | 5 | // ============================================================================ 6 | // ALIGNMENT 7 | // ============================================================================ 8 | 9 | .mui--text-left { text-align: left; } 10 | .mui--text-right { text-align: right; } 11 | .mui--text-center { text-align: center; } 12 | .mui--text-justify { text-align: justify; } 13 | 14 | 15 | 16 | 17 | // ============================================================================ 18 | // IMAGES 19 | // ============================================================================ 20 | 21 | .mui-image--fix { 22 | display: block; 23 | } 24 | 25 | 26 | 27 | 28 | // ============================================================================ 29 | // TEXT COLOR HELPERS 30 | // ============================================================================ 31 | 32 | .mui--text-dark { color: $mui-text-dark; } 33 | .mui--text-dark-secondary { color: $mui-text-dark-secondary; } 34 | .mui--text-dark-hint { color: $mui-text-dark-hint; } 35 | 36 | .mui--text-light { color: $mui-text-light; } 37 | .mui--text-light-secondary { color: $mui-text-light-secondary; } 38 | .mui--text-light-hint { color: $mui-text-light-hint; } 39 | 40 | .mui--text-accent { color: $mui-text-accent; } 41 | .mui--text-accent-secondary { color: $mui-text-accent-secondary; } 42 | .mui--text-accent-hint { color: $mui-text-accent-hint; } 43 | 44 | .mui--text-black { color: mui-color('black'); } 45 | .mui--text-white { color: mui-color('white'); } 46 | .mui--text-danger { color: $mui-text-danger; } 47 | -------------------------------------------------------------------------------- /src/email/mui-email/_normalize.scss: -------------------------------------------------------------------------------- 1 | // ========================= 2 | // Reset 3 | // ========================= 4 | body { 5 | width: 100% !important; 6 | min-width: 100%; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | img { 12 | border: 0 none; 13 | height: auto; 14 | line-height: 100%; 15 | outline: none; 16 | text-decoration: none; 17 | } 18 | 19 | a img { 20 | border: 0 none; 21 | } 22 | 23 | table { 24 | border-spacing: 0; 25 | border-collapse: collapse; 26 | } 27 | 28 | td { 29 | padding: 0; 30 | text-align: left; 31 | word-break: break-word; 32 | -webkit-hyphens: auto; 33 | -moz-hyphens: auto; 34 | hyphens: auto; 35 | border-collapse: collapse !important; 36 | } 37 | 38 | 39 | // ============================= 40 | // Client-specific styles 41 | // ============================= 42 | table, td { 43 | mso-table-lspace: 0pt; 44 | mso-table-rspace: 0pt; 45 | } 46 | 47 | body, 48 | table, 49 | td, 50 | p, 51 | a, 52 | li, 53 | blockquote{ 54 | -webkit-text-size-adjust: 100%; 55 | -ms-text-size-adjust: 100%; 56 | } 57 | 58 | img{ 59 | -ms-interpolation-mode: bicubic; 60 | } 61 | -------------------------------------------------------------------------------- /src/email/mui-email/_panel.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Panel 3 | */ 4 | 5 | .mui-panel { 6 | padding: $mui-panel-padding; 7 | border-radius: $mui-panel-border-radius; 8 | background-color: $mui-panel-bg; 9 | border-top: 1px solid darken(mui-color('white'), 7%); 10 | border-left: 1px solid darken(mui-color('white'), 10%); 11 | border-right: 1px solid darken(mui-color('white'), 10%); 12 | border-bottom: 2px solid darken(mui-color('white'), 17%); 13 | } 14 | -------------------------------------------------------------------------------- /src/email/mui-email/_reboot.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Reboot 3 | */ 4 | 5 | body { 6 | color: $mui-base-font-color; 7 | font-family: $mui-base-font-family; 8 | font-weight: $mui-base-font-weight; 9 | font-size: $mui-base-font-size; 10 | line-height: $mui-base-line-height; 11 | letter-spacing: $mui-base-letter-spacing; 12 | 13 | @if $mui-body-bg-color { 14 | background-color: $mui-body-bg-color; 15 | } 16 | } 17 | 18 | a { 19 | color: $mui-link-font-color; 20 | text-decoration: $mui-link-text-decoration; 21 | } 22 | 23 | p { 24 | margin: 0 0 ($mui-base-line-height-computed / 2); 25 | } 26 | 27 | hr { 28 | color: $mui-hr-color; 29 | background-color: $mui-hr-color; 30 | height: 1px; 31 | border: none; 32 | } 33 | 34 | strong { 35 | font-weight: 700; 36 | } 37 | 38 | h1 { 39 | @extend .mui--text-display1; 40 | } 41 | 42 | h2 { 43 | @extend .mui--text-headline; 44 | } 45 | 46 | h3 { 47 | @extend .mui--text-title; 48 | } 49 | 50 | h4 { 51 | @extend .mui--text-subhead; 52 | } 53 | 54 | h5 { 55 | @extend .mui--text-body2; 56 | } 57 | 58 | h1, h2, h3 { 59 | margin-top: $mui-base-line-height-computed; 60 | margin-bottom: ($mui-base-line-height-computed / 2); 61 | } 62 | 63 | h4, h5, h6 { 64 | margin-top: ($mui-base-line-height-computed / 2); 65 | margin-bottom: ($mui-base-line-height-computed / 2); 66 | } 67 | -------------------------------------------------------------------------------- /src/email/mui-email/_styletag.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Styletag 3 | */ 4 | 5 | // ============================================================================ 6 | // OUTLOOK 7 | // ============================================================================ 8 | 9 | // add view in browser option 10 | #outlook a { 11 | padding: 0; 12 | } 13 | 14 | 15 | 16 | 17 | // ============================================================================ 18 | // HOTMAIL 19 | // ============================================================================ 20 | 21 | .ReadMsgBody{ 22 | width: 100%; 23 | } 24 | 25 | .ExternalClass { 26 | width: 100%; // display emails at full width 27 | 28 | &, 29 | & p, 30 | & span, 31 | & font, 32 | & td, 33 | & div { 34 | line-height: 100%; // display normal line spacing 35 | } 36 | } 37 | 38 | 39 | 40 | 41 | // ============================================================================ 42 | // MISCELLANEOUS 43 | // ============================================================================ 44 | 45 | .mui-container-fixed { 46 | width: $mui-container-max-width; 47 | display: block; 48 | margin: 0 auto; 49 | clear: both; 50 | text-align: left; 51 | padding-left: $mui-container-padding-horizontal; 52 | padding-right: $mui-container-padding-horizontal; 53 | } 54 | -------------------------------------------------------------------------------- /src/email/mui-email/_typography.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI Email Typography 3 | */ 4 | 5 | .mui--text-display4 { 6 | @include mui-text("display4"); 7 | } 8 | 9 | .mui--text-display3 { 10 | @include mui-text("display3"); 11 | } 12 | 13 | .mui--text-display2 { 14 | @include mui-text("display2"); 15 | } 16 | 17 | .mui--text-display1 { 18 | @include mui-text("display1"); 19 | } 20 | 21 | .mui--text-headline { 22 | @include mui-text("headline"); 23 | } 24 | 25 | .mui--text-title { 26 | @include mui-text("title"); 27 | } 28 | 29 | .mui--text-subhead { 30 | @include mui-text("subhead"); 31 | } 32 | 33 | .mui--text-body2 { 34 | @include mui-text("body2"); 35 | } 36 | 37 | .mui--text-body1 { 38 | @include mui-text("body1"); 39 | } 40 | 41 | .mui--text-caption { 42 | @include mui-text("caption"); 43 | } 44 | 45 | .mui--text-menu { 46 | @include mui-text("menu"); 47 | } 48 | 49 | .mui--text-button { 50 | @include mui-text("button"); 51 | } 52 | -------------------------------------------------------------------------------- /src/js/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI config module 3 | * @module config 4 | */ 5 | 6 | /** Define module API */ 7 | module.exports = { 8 | /** Use debug mode */ 9 | debug: true 10 | }; 11 | -------------------------------------------------------------------------------- /src/js/lib/forms.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI CSS/JS form helpers module 3 | * @module lib/forms.py 4 | */ 5 | 6 | 'use strict'; 7 | 8 | var jqLite = require('./jqLite'); 9 | 10 | 11 | /** 12 | * Menu position/size/scroll helper 13 | * @returns {Object} Object with keys 'height', 'top', 'scrollTop' 14 | */ 15 | function getMenuPositionalCSSFn(wrapperEl, menuEl, selectedRow) { 16 | var viewHeight = document.documentElement.clientHeight, 17 | numRows = menuEl.children.length; 18 | 19 | // determine menu height 20 | var h = parseInt(menuEl.offsetHeight), 21 | height = Math.min(h, viewHeight); 22 | 23 | // determine row height 24 | var p = parseInt(jqLite.css(menuEl, 'padding-top')), 25 | rowHeight = (h - 2 * p) / numRows; 26 | 27 | // determine 'top' 28 | var top, initTop, minTop, maxTop; 29 | 30 | initTop = -1 * selectedRow * rowHeight; 31 | minTop = -1 * wrapperEl.getBoundingClientRect().top; 32 | maxTop = (viewHeight - height) + minTop; 33 | 34 | top = Math.min(Math.max(initTop, minTop), maxTop); 35 | 36 | // determine 'scrollTop' 37 | var scrollTop = 0, 38 | scrollIdeal, 39 | scrollMax; 40 | 41 | if (h > viewHeight) { 42 | scrollIdeal = top + p + selectedRow * rowHeight; 43 | scrollMax = numRows * rowHeight + 2 * p - height; 44 | scrollTop = Math.min(scrollIdeal, scrollMax); 45 | } 46 | 47 | return { 48 | 'height': height + 'px', 49 | 'top': top + 'px', 50 | 'scrollTop': scrollTop 51 | }; 52 | } 53 | 54 | 55 | /** Define module API */ 56 | module.exports = { 57 | getMenuPositionalCSS: getMenuPositionalCSSFn 58 | }; 59 | -------------------------------------------------------------------------------- /src/react/_helpers.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React helpers 3 | * @module react/_helpers 4 | */ 5 | 6 | 'use strict'; 7 | 8 | 9 | const controlledMessage = 'You provided a `value` prop to a form field ' + 10 | 'without an `OnChange` handler. Please see React documentation on ' + 11 | 'controlled components'; 12 | 13 | 14 | 15 | /** Module export */ 16 | module.exports = { controlledMessage }; 17 | -------------------------------------------------------------------------------- /src/react/appbar.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React Appbar Module 3 | * @module react/appbar 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | 11 | /** 12 | * Appbar constructor 13 | * @class 14 | */ 15 | class Appbar extends React.Component { 16 | static defaultProps = { 17 | className: '' 18 | }; 19 | 20 | render() { 21 | const { children, ...reactProps } = this.props; 22 | 23 | return ( 24 |
    28 | {children} 29 |
    30 | ); 31 | } 32 | } 33 | 34 | 35 | /** Define module API */ 36 | export default Appbar; 37 | -------------------------------------------------------------------------------- /src/react/caret.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React Caret Module 3 | * @module react/caret 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | 11 | const caretClass = 'mui-caret'; 12 | 13 | 14 | /** 15 | * Caret constructor 16 | * @class 17 | */ 18 | class Caret extends React.Component { 19 | static defaultProps = { 20 | className: '' 21 | }; 22 | 23 | render() { 24 | let cls = caretClass; 25 | 26 | const { children, direction, ...reactProps } = this.props; 27 | 28 | // add direction class 29 | if (direction) cls += ' ' + caretClass + '--' + direction; 30 | 31 | return ( 32 | 36 | 37 | ); 38 | } 39 | } 40 | 41 | 42 | /** Define module API */ 43 | export default Caret; 44 | -------------------------------------------------------------------------------- /src/react/checkbox.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React checkbox module 3 | * @module react/checkbox 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | import * as util from '../js/lib/util'; 11 | import { controlledMessage } from './_helpers'; 12 | import { getReactProps } from './_helpers'; 13 | 14 | 15 | /** 16 | * Checkbox constructor 17 | * @class 18 | */ 19 | class Checkbox extends React.Component { 20 | static defaultProps = { 21 | className: '', 22 | label: null 23 | }; 24 | 25 | render() { 26 | const { children, className, label, autoFocus, checked, defaultChecked, 27 | defaultValue, disabled, form, name, required, value, onChange, 28 | ...reactProps } = this.props; 29 | 30 | return ( 31 |
    35 | 52 |
    53 | ); 54 | } 55 | } 56 | 57 | 58 | /** Define module API */ 59 | export default Checkbox; 60 | -------------------------------------------------------------------------------- /src/react/col.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React Col Component 3 | * @module react/col 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | import * as util from '../js/lib/util'; 11 | 12 | 13 | const breakpoints = ['xs', 'sm', 'md', 'lg', 'xl']; 14 | 15 | 16 | /** 17 | * Col constructor 18 | * @class 19 | */ 20 | class Col extends React.Component { 21 | static defaultProps = { 22 | className: '', 23 | xs: null, 24 | sm: null, 25 | md: null, 26 | lg: null, 27 | xl: null, 28 | 'xs-offset': null, 29 | 'sm-offset': null, 30 | 'md-offset': null, 31 | 'lg-offset': null, 32 | 'xl-offset': null 33 | } 34 | 35 | render() { 36 | let cls = {}, 37 | i, 38 | bk, 39 | val, 40 | baseCls; 41 | 42 | let { children, className, ...reactProps } = this.props; 43 | 44 | // add mui-col classes 45 | for (i=breakpoints.length - 1; i > -1; i--) { 46 | bk = breakpoints[i]; 47 | baseCls = 'mui-col-' + bk; 48 | 49 | // add mui-col-{bk}-{val} 50 | val = this.props[bk]; 51 | if (val) cls[baseCls + '-' + val] = true; 52 | 53 | // add mui-col-{bk}-offset-{val} 54 | val = this.props[bk + '-offset']; 55 | if (val) cls[baseCls + '-offset-' + val] = true; 56 | 57 | // remove from reactProps 58 | delete reactProps[bk]; 59 | delete reactProps[bk + '-offset']; 60 | } 61 | 62 | cls = util.classNames(cls); 63 | 64 | return ( 65 |
    69 | {children} 70 |
    71 | ); 72 | } 73 | } 74 | 75 | 76 | /** Define module API */ 77 | export default Col; 78 | -------------------------------------------------------------------------------- /src/react/container.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React container module 3 | * @module react/container 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | 11 | /** 12 | * Container constructor 13 | * @class 14 | */ 15 | class Container extends React.Component { 16 | static defaultProps = { 17 | className: '', 18 | fluid: false 19 | }; 20 | 21 | render() { 22 | const { children, className, fluid, ...reactProps } = this.props; 23 | 24 | let cls = 'mui-container'; 25 | 26 | // fluid containers 27 | if (fluid) cls += '-fluid'; 28 | 29 | return ( 30 |
    34 | {children} 35 |
    36 | ); 37 | } 38 | } 39 | 40 | 41 | /** Define module API */ 42 | export default Container; 43 | -------------------------------------------------------------------------------- /src/react/divider.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React divider module 3 | * @module react/divider 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | 11 | /** 12 | * Divider constructor 13 | * @class 14 | */ 15 | class Divider extends React.Component { 16 | static defaultProps = { 17 | className: '' 18 | }; 19 | 20 | render() { 21 | const { children, className, ...reactProps } = this.props; 22 | 23 | return ( 24 |
    28 |
    29 | ); 30 | } 31 | } 32 | 33 | 34 | /** Define module API */ 35 | export default Divider; 36 | -------------------------------------------------------------------------------- /src/react/dropdown-item.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React dropdowns module 3 | * @module react/dropdowns 4 | */ 5 | /* jshint quotmark:false */ 6 | // jscs:disable validateQuoteMarks 7 | 8 | 'use strict'; 9 | 10 | import React from 'react'; 11 | 12 | import * as util from '../js/lib/util'; 13 | 14 | 15 | /** 16 | * DropdownItem constructor 17 | * @class 18 | */ 19 | class DropdownItem extends React.Component { 20 | render() { 21 | const { children, link, target, value, onClick, 22 | ...reactProps } = this.props; 23 | 24 | return ( 25 |
  • 26 | 32 | {children} 33 | 34 |
    • 35 | ); 36 | } 37 | } 38 | 39 | 40 | /** Define module API */ 41 | export default DropdownItem; 42 | -------------------------------------------------------------------------------- /src/react/form.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React form module 3 | * @module react/form 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | 11 | /** 12 | * Form constructor 13 | * @class 14 | */ 15 | class Form extends React.Component { 16 | static defaultProps = { 17 | className: '', 18 | inline: false 19 | }; 20 | 21 | render() { 22 | const { children, className, inline, ...reactProps } = this.props; 23 | let cls = 'mui-form'; 24 | 25 | // inline form 26 | if (inline) cls += ' mui-form--inline'; 27 | 28 | return ( 29 |
    33 | {children} 34 |
    35 | ); 36 | } 37 | } 38 | 39 | 40 | /** Define module API */ 41 | export default Form; 42 | -------------------------------------------------------------------------------- /src/react/input.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React Input Component 3 | * @module react/input 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | import { textfieldWrapper } from './_textfieldHelpers'; 11 | 12 | /** 13 | * Input constructor 14 | * @class 15 | */ 16 | const Input = textfieldWrapper(props => { 17 | const { inputRef, ...rest } = props; 18 | return ; 19 | }); 20 | 21 | 22 | /** Module API */ 23 | export default Input; 24 | -------------------------------------------------------------------------------- /src/react/option.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React options module 3 | * @module react/option 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | import * as formlib from '../js/lib/forms'; 11 | import * as jqLite from '../js/lib/jqLite'; 12 | import * as util from '../js/lib/util'; 13 | import { getReactProps } from './_helpers'; 14 | 15 | 16 | /** 17 | * Option constructor 18 | * @class 19 | */ 20 | class Option extends React.Component { 21 | static defaultProps = { 22 | className: '', 23 | label: null 24 | }; 25 | 26 | render() { 27 | const { children, label, ...reactProps } = this.props; 28 | 29 | return ; 30 | } 31 | } 32 | 33 | 34 | /** Define module API */ 35 | export default Option; 36 | -------------------------------------------------------------------------------- /src/react/panel.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React layout module 3 | * @module react/layout 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | 11 | /** 12 | * Panel constructor 13 | * @class 14 | */ 15 | class Panel extends React.Component { 16 | static defaultProps = { 17 | className: '' 18 | }; 19 | 20 | render() { 21 | const { children, className, ...reactProps } = this.props; 22 | 23 | return ( 24 |
    28 | {children} 29 |
    30 | ); 31 | } 32 | } 33 | 34 | 35 | /** Define module API */ 36 | export default Panel; 37 | -------------------------------------------------------------------------------- /src/react/radio.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React radio module 3 | * @module react/radio 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | 11 | /** 12 | * Radio constructor 13 | * @class 14 | */ 15 | class Radio extends React.Component { 16 | static defaultProps = { 17 | className: '', 18 | label: null 19 | }; 20 | 21 | render() { 22 | 23 | const { children, className, label, autoFocus, checked, defaultChecked, 24 | defaultValue, disabled, form, name, required, value, onChange, 25 | ...reactProps } = this.props; 26 | 27 | return ( 28 |
    32 | 49 |
    50 | ); 51 | } 52 | } 53 | 54 | 55 | /** Define module API */ 56 | export default Radio; 57 | -------------------------------------------------------------------------------- /src/react/row.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React Row Component 3 | * @module react/row 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | import * as util from '../js/lib/util'; 11 | 12 | 13 | const breakpoints = ['xs', 'sm', 'md', 'lg']; 14 | 15 | 16 | /** 17 | * Row constructor 18 | * @class 19 | */ 20 | class Row extends React.Component { 21 | static defaultProps = { 22 | className: '' 23 | }; 24 | 25 | render() { 26 | const { children, className, ...reactProps } = this.props; 27 | 28 | return ( 29 |
    33 | {children} 34 |
    35 | ); 36 | } 37 | } 38 | 39 | 40 | /** Define module API */ 41 | export default Row; 42 | -------------------------------------------------------------------------------- /src/react/tab.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React tabs module 3 | * @module react/tabs 4 | */ 5 | /* jshint quotmark:false */ 6 | // jscs:disable validateQuoteMarks 7 | 8 | 'use strict'; 9 | 10 | import React from 'react'; 11 | 12 | 13 | /** 14 | * Tab constructor 15 | * @class 16 | */ 17 | class Tab extends React.Component { 18 | static defaultProps = { 19 | value: null, 20 | label: '', 21 | onActive: null 22 | }; 23 | 24 | render() { 25 | return null; 26 | }; 27 | } 28 | 29 | 30 | /** Define module API */ 31 | export default Tab; 32 | -------------------------------------------------------------------------------- /src/react/textarea.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI React Textarea Component 3 | * @module react/textarea 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | 10 | import { textfieldWrapper } from './_textfieldHelpers'; 11 | 12 | 13 | /** 14 | * Textarea constructor 15 | * @class 16 | */ 17 | const Textarea = textfieldWrapper(props => { 18 | const { inputRef, ...rest } = props; 19 | 20 | // default number of rows 21 | if (!'rows' in rest) rest.rows = 2; 22 | 23 | return