├── .gitignore ├── .gitmodules ├── .jshintrc ├── .npmignore ├── LICENSE.md ├── README.md ├── docs ├── _color-palette.scss ├── _component-info.scss ├── _footer.scss ├── _github.scss ├── _monokai_sublime.scss ├── font-icons │ ├── Read Me.txt │ ├── demo-files │ │ ├── demo.css │ │ └── demo.js │ ├── demo.html │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ ├── icomoon.woff │ │ ├── material-ui-icons.eot │ │ ├── material-ui-icons.svg │ │ ├── material-ui-icons.ttf │ │ └── material-ui-icons.woff │ ├── selection.json │ └── style.css ├── layout │ └── _full-width-section.scss ├── main.scss └── pages │ ├── _get-started-page.scss │ ├── _home-contribute.scss │ ├── _home-features.scss │ ├── _home-page-hero.scss │ ├── _home-purpose.scss │ ├── _page-with-nav.scss │ └── components │ ├── _buttons.scss │ ├── _component-doc.scss │ ├── _icon.scss │ ├── _paper.scss │ ├── _switches.scss │ ├── _tabs.scss │ └── _text-fields.scss ├── gulp ├── config.js ├── tasks │ ├── default.js │ ├── gulp-docs.js │ ├── sass.js │ └── watch.js └── utils │ └── handleErrors.js ├── gulpfile.js ├── material-ui.scss ├── material-ui ├── _components.scss ├── _html.scss ├── _icons.scss ├── _main.scss ├── _scaffolding.scss ├── components │ ├── _app-bar.scss │ ├── _card.scss │ ├── _checkbox.scss │ ├── _components.scss │ ├── _dialog-window.scss │ ├── _dialog.scss │ ├── _drop-down-icon.scss │ ├── _drop-down-menu.scss │ ├── _enhanced-button.scss │ ├── _enhanced-switch.scss │ ├── _enhanced-textarea.scss │ ├── _flat-button.scss │ ├── _floating-action-button.scss │ ├── _font-icon.scss │ ├── _icon-button.scss │ ├── _ink-bar.scss │ ├── _input.scss │ ├── _left-nav.scss │ ├── _menu-item.scss │ ├── _menu.scss │ ├── _overlay.scss │ ├── _paper.scss │ ├── _radio-button.scss │ ├── _raised-button.scss │ ├── _slider.scss │ ├── _snackbar.scss │ ├── _subheader.scss │ ├── _svg-icon.scss │ ├── _table.scss │ ├── _tabs.scss │ ├── _text-field.scss │ ├── _toggle.scss │ ├── _toolbar.scss │ ├── _tooltip.scss │ ├── date-picker │ │ ├── _calendar-month.scss │ │ ├── _calendar-toolbar.scss │ │ ├── _calendar.scss │ │ ├── _date-display.scss │ │ ├── _date-picker-dialog.scss │ │ ├── _date-picker.scss │ │ └── _day-button.scss │ ├── ripples │ │ ├── _circle.scss │ │ ├── _focus-ripple.scss │ │ └── _touch-ripple.scss │ └── transition-groups │ │ └── _slide-in.scss ├── core │ ├── _base.scss │ ├── _core.scss │ ├── _keylines.scss │ ├── _layouts.scss │ └── _typography.scss ├── mixins │ ├── _clearfix.scss │ ├── _mixins.scss │ ├── _no-wrap.scss │ └── _transitions.scss ├── resets │ ├── _normalize.scss │ └── _typography-resets.scss ├── variables │ ├── _colors.scss │ ├── _custom-variables.scss │ ├── _icons.scss │ ├── _media-queries.scss │ └── _spacing.scss └── vendor │ └── _react-draggable2.scss └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .sass-cache 3 | material-ui-sass.sublime-workspace -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "less"] 2 | path = less 3 | url = https://github.com/callemall/material-ui.git 4 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "strict" : true, // Requires all functions to run in ECMAScript 5's strict mode 3 | "undef" : true, // Require non-global variables to be declared (prevents global leaks) 4 | "node" : true // Environment Node.js 5 | } -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs 2 | gulp 3 | .jshintrc 4 | .gulpfile -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Giampaolo Bellavite 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | 21 | ------------------------------------------------------------------------------- 22 | _Regarding code from [Material-UI](https://github.com/callemall/material-ui):_ 23 | 24 | Copyright (c) 2014 Call-Em-All 25 | 26 | Permission is hereby granted, free of charge, to any person obtaining a copy 27 | of this software and associated documentation files (the "Software"), to deal 28 | in the Software without restriction, including without limitation the rights 29 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 30 | copies of the Software, and to permit persons to whom the Software is 31 | furnished to do so, subject to the following conditions: 32 | 33 | The above copyright notice and this permission notice shall be included in all 34 | copies or substantial portions of the Software. 35 | 36 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 37 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 38 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 39 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 40 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 41 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 42 | SOFTWARE. 43 | 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | material-ui-sass (discontinued) 2 | ============================== 3 | 4 | # As material-ui 0.8 [moved to inline styles](https://github.com/callemall/material-ui/blob/master/CHANGELOG.md#080), this project has been discontinued. 5 | ### If you still want to use material-ui, but don't want to use inline-styles, check out [material-ui-with-sass](https://github.com/sarink/material-ui-with-sass) 6 | 7 |

8 | 9 | This is the [Sass](http://www.sass-lang.com) counterpart of the [material-ui](https://github.com/callemall/material-ui) React/CSS framework, which originally uses [Less](https://github.com/callemall/material-ui) for the styles. 10 | 11 | Working with material-ui **v0.7.5**. 12 | 13 | [![Join the chat at https://gitter.im/gpbl/material-ui-sass](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/gpbl/material-ui-sass?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 14 | [![npm version](https://badge.fury.io/js/material-ui-sass.svg)](http://badge.fury.io/js/material-ui-sass) 15 | 16 | ## Installation and first setup 17 | 18 | ### Using npm 19 | 20 | ``` 21 | npm install material-ui-sass 22 | ``` 23 | 24 | In your SCSS file you need to import directly from `node_modules`: 25 | 26 | ```sass 27 | // when style.scss is in your project's root 28 | @import "./node_modules/material-ui-sass/material-ui"; 29 | 30 | /* Your style here */ 31 | h1 { text-decoration: blink; } 32 | 33 | ``` 34 | 35 | ### Manual download 36 | 37 | If you don't want to dig into `node_modules` in your .scss files, you can download the sources: 38 | 39 | * [Download 0.7.5 version](https://github.com/gpbl/material-ui-sass/archive/v0.7.5.zip) - working with material-ui v0.7.2 40 | * Unzip and copy the **material-ui** directory into your project, usually where you put your styles. 41 | * Import `material-ui/main` into your main `.scss` file: 42 | 43 | ```scss 44 | @import "material-ui/main"; 45 | 46 | /* Your style here */ 47 | h1 { text-decoration: blink; } 48 | 49 | ``` 50 | 51 | ## Usage 52 | 53 | The Sass files work with the original [material-ui](https://github.com/callemall/material-ui) React components. 54 | 55 | You can customize the default values overriding those in [_custom-variables.scss](material-ui/variables/_custom-variables.scss). Include them before importing material-ui: 56 | 57 | ```scss 58 | 59 | @import "my-custom-variables"; 60 | @import "material-ui/main"; 61 | 62 | /* Your style here */ 63 | ``` 64 | 65 | ### Compiling 66 | 67 | You **must** use [autoprefixer](https://github.com/postcss/autoprefixer) when compiling your own CSS. The [gulp sass task](gulp/tasks/sass.js) is an example on how to do it. 68 | 69 | ### Extending typography classes 70 | 71 | Material-ui includes [a set of typography classes](material-ui/core/_typography.scss) that you can use with SASS `@extend` in your own CSS: 72 | 73 | ```sass 74 | .my-custom-headline { 75 | @extend %mui-font-style-headline; 76 | } 77 | ``` 78 | 79 | ## Differences from the original version 80 | 81 | ### The framework does not change HTML tags 82 | 83 | The original version included a set of HTML tags: `h1`, `h2`... `h6`, `p` and `hr`. Those definitions are moved in [_html.scss](material-ui/_html.scss), which is not imported by default. You need to import that file manually if you still need them. 84 | 85 | ## Contribute 86 | 87 | I will try to keep the two frameworks in sync, but you can also help :-) 88 | If you find bugs or idea for improvements, feel free to [add a new issue](https://github.com/gpbl/material-ui-sass/issues/new). 89 | 90 | If you'd like to send pull requests, please try to adopt the current styles and conventions. For now, they need to be close to the [original less code](https://github.com/callemall/material-ui/blob/master/src/less). 91 | 92 | ### Development 93 | 94 | When converting to Sass, I've found the material-ui [docs site](https://github.com/callemall/material-ui/tree/master/docs) useful to preview my changes. After starting the doc site server, a watching gulp task overwrites the site's `main.css` with the Sass-compiled version. (This means you may need to sassify also the documentation site) 95 | 96 | #### Clone with submodules 97 | 98 | ``` 99 | git clone --recursive https://github.com/gpbl/material-ui-sass.git 100 | cd material-ui-sass 101 | ``` 102 | 103 | #### Start the dev environment 104 | 105 | ```bash 106 | npm install # will install material-ui-sass dep 107 | npm run setup # will install material-ui docs and deps 108 | npm run dev # run the dev environment 109 | ``` 110 | 111 | `npm run dev` should open automatically the documentation site. While editing the `.scss` files, you will see a live preview of the changes. 112 | 113 | PS. You need to make a change in a `.scss` file to overwrite the original css. 114 | 115 | #### Start migrating the .less files 116 | 117 | I start from the [github's compare view](https://github.com/callemall/material-ui/compare) showing the diff from the previous version (e.g. the v0.4.0 tag) to the current release (e.g. the v0.5.0 tag – not master!). This view shows which `.less` files have been changed. 118 | 119 | Then I keep opened 2 browser's windows: one displaying the the Sass version I'm working on (that running with `npm run dev`) and the other one showing http://www.material-ui.com, to help spotting the differences between the two versions. 120 | -------------------------------------------------------------------------------- /docs/_color-palette.scss: -------------------------------------------------------------------------------- 1 | .color-palette { 2 | @include clearfix(); 3 | 4 | li { 5 | list-style: none; 6 | } 7 | 8 | .color { 9 | padding: 15px; 10 | 11 | .name { 12 | display: block; 13 | margin-bottom: 60px; 14 | } 15 | 16 | .hex { 17 | float: right; 18 | } 19 | } 20 | 21 | .color-group { 22 | padding-top: 16px; 23 | padding-bottom: 16px; 24 | display: block; 25 | } 26 | 27 | 28 | @media #{$device-small} { 29 | .color-group { 30 | float: left; 31 | width: 50%; 32 | } 33 | } 34 | 35 | @media #{$device-medium} { 36 | .color-group { 37 | width: 33%; 38 | } 39 | 40 | .neutral { 41 | .color-group { 42 | padding-bottom: 216px; 43 | 44 | &:last-child { 45 | padding-bottom: 16px; 46 | } 47 | } 48 | } 49 | } 50 | 51 | @media #{$device-large} { 52 | .color-group { 53 | width: 25%; 54 | } 55 | 56 | .neutral { 57 | .color-group { 58 | padding-bottom: 16px; 59 | } 60 | } 61 | } 62 | 63 | .red-50 { background-color: $red-50; } 64 | .red-100 { background-color: $red-100; } 65 | .red-200 { background-color: $red-200; } 66 | .red-300 { background-color: $red-300; } 67 | .red-400 { background-color: $red-400; } 68 | .red-500 { background-color: $red-500; } 69 | .red-600 { background-color: $red-600; } 70 | .red-700 { background-color: $red-700; } 71 | .red-800 { background-color: $red-800; } 72 | .red-900 { background-color: $red-900; } 73 | .red-A100 { background-color: $red-A100; } 74 | .red-A200 { background-color: $red-A200; } 75 | .red-A400 { background-color: $red-A400; } 76 | .red-A700 { background-color: $red-A700; } 77 | 78 | .pink-50 { background-color: $pink-50; } 79 | .pink-100 { background-color: $pink-100; } 80 | .pink-200 { background-color: $pink-200; } 81 | .pink-300 { background-color: $pink-300; } 82 | .pink-400 { background-color: $pink-400; } 83 | .pink-500 { background-color: $pink-500; } 84 | .pink-600 { background-color: $pink-600; } 85 | .pink-700 { background-color: $pink-700; } 86 | .pink-800 { background-color: $pink-800; } 87 | .pink-900 { background-color: $pink-900; } 88 | .pink-A100 { background-color: $pink-A100; } 89 | .pink-A200 { background-color: $pink-A200; } 90 | .pink-A400 { background-color: $pink-A400; } 91 | .pink-A700 { background-color: $pink-A700; } 92 | 93 | .purple-50 { background-color: $purple-50; } 94 | .purple-100 { background-color: $purple-100; } 95 | .purple-200 { background-color: $purple-200; } 96 | .purple-300 { background-color: $purple-300; } 97 | .purple-400 { background-color: $purple-400; } 98 | .purple-500 { background-color: $purple-500; } 99 | .purple-600 { background-color: $purple-600; } 100 | .purple-700 { background-color: $purple-700; } 101 | .purple-800 { background-color: $purple-800; } 102 | .purple-900 { background-color: $purple-900; } 103 | .purple-A100 { background-color: $purple-A100; } 104 | .purple-A200 { background-color: $purple-A200; } 105 | .purple-A400 { background-color: $purple-A400; } 106 | .purple-A700 { background-color: $purple-A700; } 107 | 108 | .deep-purple-50 { background-color: $deep-purple-50; } 109 | .deep-purple-100 { background-color: $deep-purple-100; } 110 | .deep-purple-200 { background-color: $deep-purple-200; } 111 | .deep-purple-300 { background-color: $deep-purple-300; } 112 | .deep-purple-400 { background-color: $deep-purple-400; } 113 | .deep-purple-500 { background-color: $deep-purple-500; } 114 | .deep-purple-600 { background-color: $deep-purple-600; } 115 | .deep-purple-700 { background-color: $deep-purple-700; } 116 | .deep-purple-800 { background-color: $deep-purple-800; } 117 | .deep-purple-900 { background-color: $deep-purple-900; } 118 | .deep-purple-A100 { background-color: $deep-purple-A100; } 119 | .deep-purple-A200 { background-color: $deep-purple-A200; } 120 | .deep-purple-A400 { background-color: $deep-purple-A400; } 121 | .deep-purple-A700 { background-color: $deep-purple-A700; } 122 | 123 | .indigo-50 { background-color: $indigo-50; } 124 | .indigo-100 { background-color: $indigo-100; } 125 | .indigo-200 { background-color: $indigo-200; } 126 | .indigo-300 { background-color: $indigo-300; } 127 | .indigo-400 { background-color: $indigo-400; } 128 | .indigo-500 { background-color: $indigo-500; } 129 | .indigo-600 { background-color: $indigo-600; } 130 | .indigo-700 { background-color: $indigo-700; } 131 | .indigo-800 { background-color: $indigo-800; } 132 | .indigo-900 { background-color: $indigo-900; } 133 | .indigo-A100 { background-color: $indigo-A100; } 134 | .indigo-A200 { background-color: $indigo-A200; } 135 | .indigo-A400 { background-color: $indigo-A400; } 136 | .indigo-A700 { background-color: $indigo-A700; } 137 | 138 | .blue-50 { background-color: $blue-50; } 139 | .blue-100 { background-color: $blue-100; } 140 | .blue-200 { background-color: $blue-200; } 141 | .blue-300 { background-color: $blue-300; } 142 | .blue-400 { background-color: $blue-400; } 143 | .blue-500 { background-color: $blue-500; } 144 | .blue-600 { background-color: $blue-600; } 145 | .blue-700 { background-color: $blue-700; } 146 | .blue-800 { background-color: $blue-800; } 147 | .blue-900 { background-color: $blue-900; } 148 | .blue-A100 { background-color: $blue-A100; } 149 | .blue-A200 { background-color: $blue-A200; } 150 | .blue-A400 { background-color: $blue-A400; } 151 | .blue-A700 { background-color: $blue-A700; } 152 | 153 | .light-blue-50 { background-color: $light-blue-50; } 154 | .light-blue-100 { background-color: $light-blue-100; } 155 | .light-blue-200 { background-color: $light-blue-200; } 156 | .light-blue-300 { background-color: $light-blue-300; } 157 | .light-blue-400 { background-color: $light-blue-400; } 158 | .light-blue-500 { background-color: $light-blue-500; } 159 | .light-blue-600 { background-color: $light-blue-600; } 160 | .light-blue-700 { background-color: $light-blue-700; } 161 | .light-blue-800 { background-color: $light-blue-800; } 162 | .light-blue-900 { background-color: $light-blue-900; } 163 | .light-blue-A100 { background-color: $light-blue-A100; } 164 | .light-blue-A200 { background-color: $light-blue-A200; } 165 | .light-blue-A400 { background-color: $light-blue-A400; } 166 | .light-blue-A700 { background-color: $light-blue-A700; } 167 | 168 | .cyan-50 { background-color: $cyan-50; } 169 | .cyan-100 { background-color: $cyan-100; } 170 | .cyan-200 { background-color: $cyan-200; } 171 | .cyan-300 { background-color: $cyan-300; } 172 | .cyan-400 { background-color: $cyan-400; } 173 | .cyan-500 { background-color: $cyan-500; } 174 | .cyan-600 { background-color: $cyan-600; } 175 | .cyan-700 { background-color: $cyan-700; } 176 | .cyan-800 { background-color: $cyan-800; } 177 | .cyan-900 { background-color: $cyan-900; } 178 | .cyan-A100 { background-color: $cyan-A100; } 179 | .cyan-A200 { background-color: $cyan-A200; } 180 | .cyan-A400 { background-color: $cyan-A400; } 181 | .cyan-A700 { background-color: $cyan-A700; } 182 | 183 | .teal-50 { background-color: $teal-50; } 184 | .teal-100 { background-color: $teal-100; } 185 | .teal-200 { background-color: $teal-200; } 186 | .teal-300 { background-color: $teal-300; } 187 | .teal-400 { background-color: $teal-400; } 188 | .teal-500 { background-color: $teal-500; } 189 | .teal-600 { background-color: $teal-600; } 190 | .teal-700 { background-color: $teal-700; } 191 | .teal-800 { background-color: $teal-800; } 192 | .teal-900 { background-color: $teal-900; } 193 | .teal-A100 { background-color: $teal-A100; } 194 | .teal-A200 { background-color: $teal-A200; } 195 | .teal-A400 { background-color: $teal-A400; } 196 | .teal-A700 { background-color: $teal-A700; } 197 | 198 | .green-50 { background-color: $green-50; } 199 | .green-100 { background-color: $green-100; } 200 | .green-200 { background-color: $green-200; } 201 | .green-300 { background-color: $green-300; } 202 | .green-400 { background-color: $green-400; } 203 | .green-500 { background-color: $green-500; } 204 | .green-600 { background-color: $green-600; } 205 | .green-700 { background-color: $green-700; } 206 | .green-800 { background-color: $green-800; } 207 | .green-900 { background-color: $green-900; } 208 | .green-A100 { background-color: $green-A100; } 209 | .green-A200 { background-color: $green-A200; } 210 | .green-A400 { background-color: $green-A400; } 211 | .green-A700 { background-color: $green-A700; } 212 | 213 | .light-green-50 { background-color: $light-green-50; } 214 | .light-green-100 { background-color: $light-green-100; } 215 | .light-green-200 { background-color: $light-green-200; } 216 | .light-green-300 { background-color: $light-green-300; } 217 | .light-green-400 { background-color: $light-green-400; } 218 | .light-green-500 { background-color: $light-green-500; } 219 | .light-green-600 { background-color: $light-green-600; } 220 | .light-green-700 { background-color: $light-green-700; } 221 | .light-green-800 { background-color: $light-green-800; } 222 | .light-green-900 { background-color: $light-green-900; } 223 | .light-green-A100 { background-color: $light-green-A100; } 224 | .light-green-A200 { background-color: $light-green-A200; } 225 | .light-green-A400 { background-color: $light-green-A400; } 226 | .light-green-A700 { background-color: $light-green-A700; } 227 | 228 | .lime-50 { background-color: $lime-50; } 229 | .lime-100 { background-color: $lime-100; } 230 | .lime-200 { background-color: $lime-200; } 231 | .lime-300 { background-color: $lime-300; } 232 | .lime-400 { background-color: $lime-400; } 233 | .lime-500 { background-color: $lime-500; } 234 | .lime-600 { background-color: $lime-600; } 235 | .lime-700 { background-color: $lime-700; } 236 | .lime-800 { background-color: $lime-800; } 237 | .lime-900 { background-color: $lime-900; } 238 | .lime-A100 { background-color: $lime-A100; } 239 | .lime-A200 { background-color: $lime-A200; } 240 | .lime-A400 { background-color: $lime-A400; } 241 | .lime-A700 { background-color: $lime-A700; } 242 | 243 | .yellow-50 { background-color: $yellow-50; } 244 | .yellow-100 { background-color: $yellow-100; } 245 | .yellow-200 { background-color: $yellow-200; } 246 | .yellow-300 { background-color: $yellow-300; } 247 | .yellow-400 { background-color: $yellow-400; } 248 | .yellow-500 { background-color: $yellow-500; } 249 | .yellow-600 { background-color: $yellow-600; } 250 | .yellow-700 { background-color: $yellow-700; } 251 | .yellow-800 { background-color: $yellow-800; } 252 | .yellow-900 { background-color: $yellow-900; } 253 | .yellow-A100 { background-color: $yellow-A100; } 254 | .yellow-A200 { background-color: $yellow-A200; } 255 | .yellow-A400 { background-color: $yellow-A400; } 256 | .yellow-A700 { background-color: $yellow-A700; } 257 | 258 | .amber-50 { background-color: $amber-50; } 259 | .amber-100 { background-color: $amber-100; } 260 | .amber-200 { background-color: $amber-200; } 261 | .amber-300 { background-color: $amber-300; } 262 | .amber-400 { background-color: $amber-400; } 263 | .amber-500 { background-color: $amber-500; } 264 | .amber-600 { background-color: $amber-600; } 265 | .amber-700 { background-color: $amber-700; } 266 | .amber-800 { background-color: $amber-800; } 267 | .amber-900 { background-color: $amber-900; } 268 | .amber-A100 { background-color: $amber-A100; } 269 | .amber-A200 { background-color: $amber-A200; } 270 | .amber-A400 { background-color: $amber-A400; } 271 | .amber-A700 { background-color: $amber-A700; } 272 | 273 | .orange-50 { background-color: $orange-50; } 274 | .orange-100 { background-color: $orange-100; } 275 | .orange-200 { background-color: $orange-200; } 276 | .orange-300 { background-color: $orange-300; } 277 | .orange-400 { background-color: $orange-400; } 278 | .orange-500 { background-color: $orange-500; } 279 | .orange-600 { background-color: $orange-600; } 280 | .orange-700 { background-color: $orange-700; } 281 | .orange-800 { background-color: $orange-800; } 282 | .orange-900 { background-color: $orange-900; } 283 | .orange-A100 { background-color: $orange-A100; } 284 | .orange-A200 { background-color: $orange-A200; } 285 | .orange-A400 { background-color: $orange-A400; } 286 | .orange-A700 { background-color: $orange-A700; } 287 | 288 | .deep-orange-50 { background-color: $deep-orange-50; } 289 | .deep-orange-100 { background-color: $deep-orange-100; } 290 | .deep-orange-200 { background-color: $deep-orange-200; } 291 | .deep-orange-300 { background-color: $deep-orange-300; } 292 | .deep-orange-400 { background-color: $deep-orange-400; } 293 | .deep-orange-500 { background-color: $deep-orange-500; } 294 | .deep-orange-600 { background-color: $deep-orange-600; } 295 | .deep-orange-700 { background-color: $deep-orange-700; } 296 | .deep-orange-800 { background-color: $deep-orange-800; } 297 | .deep-orange-900 { background-color: $deep-orange-900; } 298 | .deep-orange-A100 { background-color: $deep-orange-A100; } 299 | .deep-orange-A200 { background-color: $deep-orange-A200; } 300 | .deep-orange-A400 { background-color: $deep-orange-A400; } 301 | .deep-orange-A700 { background-color: $deep-orange-A700; } 302 | 303 | .brown-50 { background-color: $brown-50; } 304 | .brown-100 { background-color: $brown-100; } 305 | .brown-200 { background-color: $brown-200; } 306 | .brown-300 { background-color: $brown-300; } 307 | .brown-400 { background-color: $brown-400; } 308 | .brown-500 { background-color: $brown-500; } 309 | .brown-600 { background-color: $brown-600; } 310 | .brown-700 { background-color: $brown-700; } 311 | .brown-800 { background-color: $brown-800; } 312 | .brown-900 { background-color: $brown-900; } 313 | 314 | .blue-grey-50 { background-color: $blue-grey-50; } 315 | .blue-grey-100 { background-color: $blue-grey-100; } 316 | .blue-grey-200 { background-color: $blue-grey-200; } 317 | .blue-grey-300 { background-color: $blue-grey-300; } 318 | .blue-grey-400 { background-color: $blue-grey-400; } 319 | .blue-grey-500 { background-color: $blue-grey-500; } 320 | .blue-grey-600 { background-color: $blue-grey-600; } 321 | .blue-grey-700 { background-color: $blue-grey-700; } 322 | .blue-grey-800 { background-color: $blue-grey-800; } 323 | .blue-grey-900 { background-color: $blue-grey-900; } 324 | 325 | .grey-50 { background-color: $grey-50; } 326 | .grey-100 { background-color: $grey-100; } 327 | .grey-200 { background-color: $grey-200; } 328 | .grey-300 { background-color: $grey-300; } 329 | .grey-400 { background-color: $grey-400; } 330 | .grey-500 { background-color: $grey-500; } 331 | .grey-600 { background-color: $grey-600; } 332 | .grey-700 { background-color: $grey-700; } 333 | .grey-800 { background-color: $grey-800; } 334 | .grey-900 { background-color: $grey-900; } 335 | 336 | .red-500, .red-600, .red-700, .red-A200, .red-A400, .red-A700, 337 | .pink-500, .pink-600, .pink-A200, .pink-A400, .pink-A700, 338 | .purple-300, .purple-400, .purple-A200, .purple-A400, .purple-A700, 339 | .deep-purple-300, .deep-purple-400, .deep-purple-A200, 340 | .indigo-300, .indigo-400, .indigo-A200, .indigo-A400, 341 | .blue-500, .blue-600, .blue-700, .blue-A200, .blue-A400, .blue-A700, 342 | .light-blue-500, .light-blue-600, .light-blue-700, .light-blue-800, .light-blue-A700, 343 | .cyan-500, .cyan-600, .cyan-700, .cyan-800, 344 | .teal-500, .teal-600, .teal-700, 345 | .green-500, .green-600, .green-700, 346 | .light-green-800, .light-green-900, 347 | .lime-900, 348 | .orange-800, .orange-900, 349 | .deep-orange-500, .deep-orange-600, .deep-orange-700, .deep-orange-800, .deep-orange-900, .deep-orange-A400, .deep-orange-A700, 350 | .brown-300, .brown-400, 351 | .blue-grey-400, .blue-grey-500 { 352 | @extend %mui-text-full-white; 353 | } 354 | 355 | .red-800, .red-900, 356 | .pink-700, .pink-800, .pink-900, 357 | .purple-500, .purple-600, .purple-700, .purple-800, .purple-900, 358 | .deep-purple-500, .deep-purple-600, .deep-purple-700, .deep-purple-800, .deep-purple-900, .deep-purple-A400, .deep-purple-A700, 359 | .indigo-500, .indigo-600, .indigo-700, .indigo-800, .indigo-900, .indigo-A700, 360 | .blue-800, .blue-900, 361 | .light-blue-900, 362 | .cyan-900, 363 | .teal-800, .teal-900, 364 | .green-800, .green-900, 365 | .brown-500, .brown-600, .brown-700, .brown-800, .brown-900, 366 | .blue-grey-600, .blue-grey-700, .blue-grey-800, .blue-grey-900, 367 | .grey-600, .grey-700, .grey-800, .grey-900 { 368 | @extend %mui-text-dark-white; 369 | } 370 | 371 | .orange-A700 { 372 | @extend %mui-text-full-black; 373 | } 374 | } 375 | -------------------------------------------------------------------------------- /docs/_component-info.scss: -------------------------------------------------------------------------------- 1 | .component-info { 2 | 3 | @extend %mui-font-style-subhead-1; 4 | width: 100%; 5 | 6 | td { 7 | padding: 16px 0; 8 | vertical-align: top; 9 | } 10 | 11 | .component-info-name { 12 | position: absolute; 13 | 14 | @extend %mui-font-weight-medium; 15 | } 16 | 17 | .component-info-type { 18 | @extend %mui-text-light-black; 19 | padding-right: $desktop-gutter; 20 | } 21 | 22 | .component-info-header { 23 | @extend %mui-font-style-subhead-1; 24 | padding-top: 0; 25 | } 26 | 27 | .component-info-desc { 28 | width: 100%; 29 | padding-top: 48px; 30 | border-bottom: solid 1px $border-color; 31 | 32 | p { 33 | margin: 0; 34 | } 35 | } 36 | 37 | tr:last-child { 38 | .component-info-desc { 39 | border-bottom: none; 40 | } 41 | } 42 | 43 | @media #{$device-medium} { 44 | .component-info-name { 45 | position: inherit; 46 | padding-right: $desktop-gutter; 47 | } 48 | .component-info-desc { 49 | padding-top: 16px; 50 | } 51 | } 52 | 53 | @media #{$device-large} { 54 | td { 55 | padding: 32px 0; 56 | } 57 | 58 | .component-info-name { 59 | min-width: 128px; 60 | } 61 | 62 | .component-info-desc { 63 | padding-top: 32px; 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /docs/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | 3 | background-color: $grey-900; 4 | text-align: center; 5 | 6 | a { 7 | @extend %mui-text-dark-white; 8 | } 9 | 10 | p { 11 | margin: 0 auto; 12 | padding: 0; 13 | @extend %mui-text-light-white; 14 | max-width: 335px; 15 | } 16 | 17 | .mui-icon-button { 18 | color: $dark-white; 19 | } 20 | } -------------------------------------------------------------------------------- /docs/_github.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | github.com style (c) Vasily Polovnyov 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | color: #333; 12 | background: #f8f8f8; 13 | -webkit-text-size-adjust: none; 14 | } 15 | 16 | .hljs-comment, 17 | .hljs-template_comment, 18 | .diff .hljs-header, 19 | .hljs-javadoc { 20 | color: #998; 21 | font-style: italic; 22 | } 23 | 24 | .hljs-keyword, 25 | .css .rule .hljs-keyword, 26 | .hljs-winutils, 27 | .nginx .hljs-title, 28 | .hljs-subst, 29 | .hljs-request, 30 | .hljs-status { 31 | color: #333; 32 | font-weight: bold; 33 | } 34 | 35 | .hljs-number, 36 | .hljs-hexcolor, 37 | .ruby .hljs-constant { 38 | color: #008080; 39 | } 40 | 41 | .hljs-string, 42 | .hljs-tag .hljs-value, 43 | .hljs-phpdoc, 44 | .hljs-dartdoc, 45 | .tex .hljs-formula { 46 | color: #d14; 47 | } 48 | 49 | .hljs-title, 50 | .hljs-id, 51 | .scss .hljs-preprocessor { 52 | color: #900; 53 | font-weight: bold; 54 | } 55 | 56 | .hljs-list .hljs-keyword, 57 | .hljs-subst { 58 | font-weight: normal; 59 | } 60 | 61 | .hljs-class .hljs-title, 62 | .hljs-type, 63 | .vhdl .hljs-literal, 64 | .tex .hljs-command { 65 | color: #458; 66 | font-weight: bold; 67 | } 68 | 69 | .hljs-tag, 70 | .hljs-tag .hljs-title, 71 | .hljs-rules .hljs-property, 72 | .django .hljs-tag .hljs-keyword { 73 | color: #000080; 74 | font-weight: normal; 75 | } 76 | 77 | .hljs-attribute, 78 | .hljs-variable, 79 | .lisp .hljs-body { 80 | color: #008080; 81 | } 82 | 83 | .hljs-regexp { 84 | color: #009926; 85 | } 86 | 87 | .hljs-symbol, 88 | .ruby .hljs-symbol .hljs-string, 89 | .lisp .hljs-keyword, 90 | .clojure .hljs-keyword, 91 | .scheme .hljs-keyword, 92 | .tex .hljs-special, 93 | .hljs-prompt { 94 | color: #990073; 95 | } 96 | 97 | .hljs-built_in { 98 | color: #0086b3; 99 | } 100 | 101 | .hljs-preprocessor, 102 | .hljs-pragma, 103 | .hljs-pi, 104 | .hljs-doctype, 105 | .hljs-shebang, 106 | .hljs-cdata { 107 | color: #999; 108 | font-weight: bold; 109 | } 110 | 111 | .hljs-deletion { 112 | background: #fdd; 113 | } 114 | 115 | .hljs-addition { 116 | background: #dfd; 117 | } 118 | 119 | .diff .hljs-change { 120 | background: #0086b3; 121 | } 122 | 123 | .hljs-chunk { 124 | color: #aaa; 125 | } 126 | -------------------------------------------------------------------------------- /docs/_monokai_sublime.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/ 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | background: #23241f; 12 | -webkit-text-size-adjust: none; 13 | } 14 | 15 | .hljs, 16 | .hljs-tag, 17 | .css .hljs-rules, 18 | .css .hljs-value, 19 | .css .hljs-function 20 | .hljs-preprocessor, 21 | .hljs-pragma { 22 | color: #f8f8f2; 23 | } 24 | 25 | .hljs-strongemphasis, 26 | .hljs-strong, 27 | .hljs-emphasis { 28 | color: #a8a8a2; 29 | } 30 | 31 | .hljs-bullet, 32 | .hljs-blockquote, 33 | .hljs-horizontal_rule, 34 | .hljs-number, 35 | .hljs-regexp, 36 | .alias .hljs-keyword, 37 | .hljs-literal, 38 | .hljs-hexcolor { 39 | color: #ae81ff; 40 | } 41 | 42 | .hljs-tag .hljs-value, 43 | .hljs-code, 44 | .hljs-title, 45 | .css .hljs-class, 46 | .hljs-class .hljs-title:last-child { 47 | color: #a6e22e; 48 | } 49 | 50 | .hljs-link_url { 51 | font-size: 80%; 52 | } 53 | 54 | .hljs-strong, 55 | .hljs-strongemphasis { 56 | font-weight: bold; 57 | } 58 | 59 | .hljs-emphasis, 60 | .hljs-strongemphasis, 61 | .hljs-class .hljs-title:last-child { 62 | font-style: italic; 63 | } 64 | 65 | .hljs-keyword, 66 | .hljs-function, 67 | .hljs-change, 68 | .hljs-winutils, 69 | .hljs-flow, 70 | .lisp .hljs-title, 71 | .clojure .hljs-built_in, 72 | .nginx .hljs-title, 73 | .tex .hljs-special, 74 | .hljs-header, 75 | .hljs-attribute, 76 | .hljs-symbol, 77 | .hljs-symbol .hljs-string, 78 | .hljs-tag .hljs-title, 79 | .hljs-value, 80 | .alias .hljs-keyword:first-child, 81 | .css .hljs-tag, 82 | .css .unit, 83 | .css .hljs-important { 84 | color: #f92672; 85 | } 86 | 87 | .hljs-function .hljs-keyword, 88 | .hljs-class .hljs-keyword:first-child, 89 | .hljs-constant, 90 | .css .hljs-attribute { 91 | color: #66d9ef; 92 | } 93 | 94 | .hljs-variable, 95 | .hljs-params, 96 | .hljs-class .hljs-title { 97 | color: #f8f8f2; 98 | } 99 | 100 | .hljs-string, 101 | .css .hljs-id, 102 | .hljs-subst, 103 | .hljs-type, 104 | .ruby .hljs-class .hljs-parent, 105 | .hljs-built_in, 106 | .django .hljs-template_tag, 107 | .django .hljs-variable, 108 | .smalltalk .hljs-class, 109 | .django .hljs-filter .hljs-argument, 110 | .smalltalk .hljs-localvars, 111 | .smalltalk .hljs-array, 112 | .hljs-attr_selector, 113 | .hljs-pseudo, 114 | .hljs-addition, 115 | .hljs-stream, 116 | .hljs-envvar, 117 | .apache .hljs-tag, 118 | .apache .hljs-cbracket, 119 | .tex .hljs-command, 120 | .hljs-prompt, 121 | .hljs-link_label, 122 | .hljs-link_url { 123 | color: #e6db74; 124 | } 125 | 126 | .hljs-comment, 127 | .hljs-javadoc, 128 | .hljs-annotation, 129 | .hljs-decorator, 130 | .hljs-template_comment, 131 | .hljs-pi, 132 | .hljs-doctype, 133 | .hljs-deletion, 134 | .hljs-shebang, 135 | .apache .hljs-sqbracket, 136 | .tex .hljs-formula { 137 | color: #75715e; 138 | } 139 | 140 | .coffeescript .javascript, 141 | .javascript .xml, 142 | .tex .hljs-formula, 143 | .xml .javascript, 144 | .xml .vbscript, 145 | .xml .css, 146 | .xml .hljs-cdata, 147 | .xml .php, 148 | .php .xml { 149 | opacity: 0.5; 150 | } 151 | -------------------------------------------------------------------------------- /docs/font-icons/Read Me.txt: -------------------------------------------------------------------------------- 1 | Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. 2 | 3 | You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. 4 | 5 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu > Manage Projects) to retrieve your icon selection. 6 | -------------------------------------------------------------------------------- /docs/font-icons/demo-files/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: sans-serif; 5 | font-size: 1em; 6 | line-height: 1.5; 7 | color: #555; 8 | background: #fff; 9 | } 10 | h1 { 11 | font-size: 1.5em; 12 | font-weight: normal; 13 | } 14 | small { 15 | font-size: .66666667em; 16 | } 17 | a { 18 | color: #e74c3c; 19 | text-decoration: none; 20 | } 21 | a:hover, a:focus { 22 | box-shadow: 0 1px #e74c3c; 23 | } 24 | .bshadow0, input { 25 | box-shadow: inset 0 -2px #e7e7e7; 26 | } 27 | input:hover { 28 | box-shadow: inset 0 -2px #ccc; 29 | } 30 | input, fieldset { 31 | font-size: 1em; 32 | margin: 0; 33 | padding: 0; 34 | border: 0; 35 | } 36 | input { 37 | color: inherit; 38 | line-height: 1.5; 39 | height: 1.5em; 40 | padding: .25em 0; 41 | } 42 | input:focus { 43 | outline: none; 44 | box-shadow: inset 0 -2px #449fdb; 45 | } 46 | .glyph { 47 | font-size: 16px; 48 | width: 15em; 49 | padding-bottom: 1em; 50 | margin-right: 4em; 51 | margin-bottom: 1em; 52 | float: left; 53 | overflow: hidden; 54 | } 55 | .liga { 56 | width: 80%; 57 | width: calc(100% - 2.5em); 58 | } 59 | .talign-right { 60 | text-align: right; 61 | } 62 | .talign-center { 63 | text-align: center; 64 | } 65 | .bgc1 { 66 | background: #f1f1f1; 67 | } 68 | .fgc1 { 69 | color: #999; 70 | } 71 | .fgc0 { 72 | color: #000; 73 | } 74 | p { 75 | margin-top: 1em; 76 | margin-bottom: 1em; 77 | } 78 | .mvm { 79 | margin-top: .75em; 80 | margin-bottom: .75em; 81 | } 82 | .mtn { 83 | margin-top: 0; 84 | } 85 | .mtl, .mal { 86 | margin-top: 1.5em; 87 | } 88 | .mbl, .mal { 89 | margin-bottom: 1.5em; 90 | } 91 | .mal, .mhl { 92 | margin-left: 1.5em; 93 | margin-right: 1.5em; 94 | } 95 | .mhmm { 96 | margin-left: 1em; 97 | margin-right: 1em; 98 | } 99 | .mls { 100 | margin-left: .25em; 101 | } 102 | .ptl { 103 | padding-top: 1.5em; 104 | } 105 | .pbs, .pvs { 106 | padding-bottom: .25em; 107 | } 108 | .pvs, .pts { 109 | padding-top: .25em; 110 | } 111 | .unit { 112 | float: left; 113 | } 114 | .unitRight { 115 | float: right; 116 | } 117 | .size1of2 { 118 | width: 50%; 119 | } 120 | .size1of1 { 121 | width: 100%; 122 | } 123 | .clearfix:before, .clearfix:after { 124 | content: " "; 125 | display: table; 126 | } 127 | .clearfix:after { 128 | clear: both; 129 | } 130 | .hidden-true { 131 | display: none; 132 | } 133 | .textbox0 { 134 | width: 3em; 135 | background: #f1f1f1; 136 | padding: .25em .5em; 137 | line-height: 1.5; 138 | height: 1.5em; 139 | } 140 | #testDrive { 141 | display: block; 142 | padding-top: 24px; 143 | line-height: 1.5; 144 | } 145 | .fs0 { 146 | font-size: 16px; 147 | } 148 | .fs1 { 149 | font-size: 24px; 150 | } 151 | -------------------------------------------------------------------------------- /docs/font-icons/demo-files/demo.js: -------------------------------------------------------------------------------- 1 | if (!('boxShadow' in document.body.style)) { 2 | document.body.setAttribute('class', 'noBoxShadow'); 3 | } 4 | 5 | document.body.addEventListener("click", function(e) { 6 | var target = e.target; 7 | if (target.tagName === "INPUT" && 8 | target.getAttribute('class').indexOf('liga') === -1) { 9 | target.select(); 10 | } 11 | }); 12 | 13 | (function() { 14 | var fontSize = document.getElementById('fontSize'), 15 | testDrive = document.getElementById('testDrive'), 16 | testText = document.getElementById('testText'); 17 | function updateTest() { 18 | testDrive.innerHTML = testText.value || String.fromCharCode(160); 19 | if (window.icomoonLiga) { 20 | window.icomoonLiga(testDrive); 21 | } 22 | } 23 | function updateSize() { 24 | testDrive.style.fontSize = fontSize.value + 'px'; 25 | } 26 | fontSize.addEventListener('change', updateSize, false); 27 | testText.addEventListener('input', updateTest, false); 28 | testText.addEventListener('change', updateTest, false); 29 | updateSize(); 30 | }()); 31 | -------------------------------------------------------------------------------- /docs/font-icons/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IcoMoon Demo 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Font Name: material-ui-icons (Glyphs: 11)

13 |
14 |
15 |

Grid Size: 24

16 |
17 |
18 | 19 | 20 | 21 | mui-icon-icon-communication-phone 22 |
23 |
24 | 25 | 26 |
27 |
28 | liga: 29 | 30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | mui-icon-icon-communication-voicemail 38 |
39 |
40 | 41 | 42 |
43 |
44 | liga: 45 | 46 |
47 |
48 |
49 |
50 | 51 | 52 | 53 | mui-icon-icon-navigation-expand-more 54 |
55 |
56 | 57 | 58 |
59 |
60 | liga: 61 | 62 |
63 |
64 |
65 |
66 | 67 | 68 | 69 | mui-icon-icon-action-grade 70 |
71 |
72 | 73 | 74 |
75 |
76 | liga: 77 | 78 |
79 |
80 |
81 |
82 | 83 | 84 | 85 | mui-icon-icon-action-home 86 |
87 |
88 | 89 | 90 |
91 |
92 | liga: 93 | 94 |
95 |
96 |
97 |
98 | 99 | 100 | 101 | mui-icon-icon-action-stars 102 |
103 |
104 | 105 | 106 |
107 |
108 | liga: 109 | 110 |
111 |
112 |
113 |
114 | 115 | 116 | 117 | mui-icon-icon-action-thumb-up 118 |
119 |
120 | 121 | 122 |
123 |
124 | liga: 125 | 126 |
127 |
128 |
129 |
130 | 131 | 132 | 133 | mui-icon-icon-custom-sort 134 |
135 |
136 | 137 | 138 |
139 |
140 | liga: 141 | 142 |
143 |
144 |
145 |
146 | 147 | 148 | 149 | mui-icon-icon-custom-github 150 |
151 |
152 | 153 | 154 |
155 |
156 | liga: 157 | 158 |
159 |
160 |
161 |
162 | 163 | 164 | 165 | mui-icon-icon-custom-arrow-drop-right 166 |
167 |
168 | 169 | 170 |
171 |
172 | liga: 173 | 174 |
175 |
176 |
177 |
178 | 179 | 180 | 181 | mui-icon-icon-custom-pie 182 |
183 |
184 | 185 | 186 |
187 |
188 | liga: 189 | 190 |
191 |
192 |
193 | 194 | 195 |
196 |

Font Test Drive

197 | 202 | 204 | 205 |
  206 |
207 |
208 | 209 |
210 |

Generated by IcoMoon

211 |
212 | 213 | 214 | 215 | -------------------------------------------------------------------------------- /docs/font-icons/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpbl/material-ui-sass/00afc34e43f604a6fb0ee76399fdb66e2271e9a2/docs/font-icons/fonts/icomoon.eot -------------------------------------------------------------------------------- /docs/font-icons/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/font-icons/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpbl/material-ui-sass/00afc34e43f604a6fb0ee76399fdb66e2271e9a2/docs/font-icons/fonts/icomoon.ttf -------------------------------------------------------------------------------- /docs/font-icons/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpbl/material-ui-sass/00afc34e43f604a6fb0ee76399fdb66e2271e9a2/docs/font-icons/fonts/icomoon.woff -------------------------------------------------------------------------------- /docs/font-icons/fonts/material-ui-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpbl/material-ui-sass/00afc34e43f604a6fb0ee76399fdb66e2271e9a2/docs/font-icons/fonts/material-ui-icons.eot -------------------------------------------------------------------------------- /docs/font-icons/fonts/material-ui-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/font-icons/fonts/material-ui-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpbl/material-ui-sass/00afc34e43f604a6fb0ee76399fdb66e2271e9a2/docs/font-icons/fonts/material-ui-icons.ttf -------------------------------------------------------------------------------- /docs/font-icons/fonts/material-ui-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gpbl/material-ui-sass/00afc34e43f604a6fb0ee76399fdb66e2271e9a2/docs/font-icons/fonts/material-ui-icons.woff -------------------------------------------------------------------------------- /docs/font-icons/selection.json: -------------------------------------------------------------------------------- 1 | { 2 | "IcoMoonType": "selection", 3 | "icons": [ 4 | { 5 | "icon": { 6 | "paths": [ 7 | "M282.453 460.373c61.44 120.747 160.427 219.307 281.173 281.173l93.867-93.867c11.52-11.52 28.587-15.36 43.52-10.24 47.787 15.787 99.413 24.32 152.32 24.32 23.467 0 42.667 19.2 42.667 42.667v148.907c0 23.467-19.2 42.667-42.667 42.667-400.64 0-725.333-324.693-725.333-725.333 0-23.467 19.2-42.667 42.667-42.667h149.333c23.467 0 42.667 19.2 42.667 42.667 0 53.333 8.533 104.533 24.32 152.32 4.693 14.933 1.28 31.573-10.667 43.52l-93.867 93.867z" 8 | ], 9 | "attrs": [ 10 | { 11 | "fill": "rgb(68, 68, 68)" 12 | } 13 | ], 14 | "isMulticolor": false, 15 | "grid": 24, 16 | "tags": [ 17 | "ic_phone_24px" 18 | ], 19 | "colorPermutations": { 20 | "6868681": [ 21 | 0 22 | ] 23 | } 24 | }, 25 | "attrs": [ 26 | { 27 | "fill": "rgb(68, 68, 68)" 28 | } 29 | ], 30 | "properties": { 31 | "order": 5, 32 | "id": 54, 33 | "prevSize": 24, 34 | "code": 58881, 35 | "name": "icon-communication-phone" 36 | }, 37 | "setIdx": 0, 38 | "iconIdx": 0 39 | }, 40 | { 41 | "icon": { 42 | "paths": [ 43 | "M789.333 256c-129.707 0-234.667 104.96-234.667 234.667 0 56.747 20.053 108.8 53.76 149.333h-192.853c33.707-40.533 53.76-92.587 53.76-149.333 0-129.707-104.96-234.667-234.667-234.667s-234.667 104.96-234.667 234.667 104.96 234.667 234.667 234.667h554.667c129.707 0 234.667-104.96 234.667-234.667s-104.96-234.667-234.667-234.667zM234.667 640c-82.347 0-149.333-66.987-149.333-149.333s66.987-149.333 149.333-149.333 149.333 66.987 149.333 149.333-66.987 149.333-149.333 149.333zM789.333 640c-82.347 0-149.333-66.987-149.333-149.333s66.987-149.333 149.333-149.333 149.333 66.987 149.333 149.333-66.987 149.333-149.333 149.333z" 44 | ], 45 | "attrs": [ 46 | { 47 | "fill": "rgb(68, 68, 68)" 48 | } 49 | ], 50 | "isMulticolor": false, 51 | "grid": 24, 52 | "tags": [ 53 | "ic_voicemail_24px" 54 | ], 55 | "colorPermutations": { 56 | "6868681": [ 57 | 0 58 | ] 59 | } 60 | }, 61 | "attrs": [ 62 | { 63 | "fill": "rgb(68, 68, 68)" 64 | } 65 | ], 66 | "properties": { 67 | "order": 6, 68 | "id": 53, 69 | "prevSize": 24, 70 | "code": 58882, 71 | "name": "icon-communication-voicemail" 72 | }, 73 | "setIdx": 0, 74 | "iconIdx": 1 75 | }, 76 | { 77 | "icon": { 78 | "paths": [ 79 | "M707.84 366.507l-195.84 195.413-195.84-195.413-60.16 60.16 256 256 256-256z" 80 | ], 81 | "attrs": [ 82 | { 83 | "fill": "rgb(68, 68, 68)" 84 | } 85 | ], 86 | "isMulticolor": false, 87 | "grid": 24, 88 | "tags": [ 89 | "ic_expand_more_24px" 90 | ], 91 | "colorPermutations": { 92 | "6868681": [ 93 | 0 94 | ] 95 | } 96 | }, 97 | "attrs": [ 98 | { 99 | "fill": "rgb(68, 68, 68)" 100 | } 101 | ], 102 | "properties": { 103 | "order": 7, 104 | "id": 52, 105 | "prevSize": 24, 106 | "code": 58883, 107 | "name": "icon-navigation-expand-more" 108 | }, 109 | "setIdx": 0, 110 | "iconIdx": 2 111 | }, 112 | { 113 | "icon": { 114 | "paths": [ 115 | "M512 736.853l263.68 159.147-69.973-299.947 232.96-201.813-306.773-26.027-119.893-282.88-119.893 282.88-306.773 26.027 232.96 201.813-69.973 299.947z" 116 | ], 117 | "attrs": [ 118 | { 119 | "fill": "rgb(68, 68, 68)" 120 | } 121 | ], 122 | "isMulticolor": false, 123 | "grid": 24, 124 | "tags": [ 125 | "ic_grade_24px" 126 | ], 127 | "colorPermutations": { 128 | "6868681": [ 129 | 0 130 | ] 131 | } 132 | }, 133 | "attrs": [ 134 | { 135 | "fill": "rgb(68, 68, 68)" 136 | } 137 | ], 138 | "properties": { 139 | "order": 8, 140 | "id": 51, 141 | "prevSize": 24, 142 | "code": 58884, 143 | "name": "icon-action-grade" 144 | }, 145 | "setIdx": 0, 146 | "iconIdx": 3 147 | }, 148 | { 149 | "icon": { 150 | "paths": [ 151 | "M426.667 853.333v-256h170.667v256h213.333v-341.333h128l-426.667-384-426.667 384h128v341.333z" 152 | ], 153 | "attrs": [ 154 | { 155 | "fill": "rgb(68, 68, 68)" 156 | } 157 | ], 158 | "isMulticolor": false, 159 | "grid": 24, 160 | "tags": [ 161 | "ic_home_24px" 162 | ], 163 | "colorPermutations": { 164 | "6868681": [ 165 | 0 166 | ] 167 | } 168 | }, 169 | "attrs": [ 170 | { 171 | "fill": "rgb(68, 68, 68)" 172 | } 173 | ], 174 | "properties": { 175 | "order": 9, 176 | "id": 50, 177 | "prevSize": 24, 178 | "code": 58885, 179 | "name": "icon-action-home" 180 | }, 181 | "setIdx": 0, 182 | "iconIdx": 4 183 | }, 184 | { 185 | "icon": { 186 | "paths": [ 187 | "M511.573 85.333c-235.52 0-426.24 191.147-426.24 426.667s190.72 426.667 426.24 426.667c235.947 0 427.093-191.147 427.093-426.667s-191.147-426.667-427.093-426.667zM692.48 768l-180.48-108.8-180.48 108.8 47.787-205.227-159.147-137.813 209.92-17.92 81.92-193.707 81.92 193.28 209.92 17.92-159.147 137.813 47.787 205.653z" 188 | ], 189 | "attrs": [ 190 | { 191 | "fill": "rgb(68, 68, 68)" 192 | } 193 | ], 194 | "isMulticolor": false, 195 | "grid": 24, 196 | "tags": [ 197 | "ic_stars_24px" 198 | ], 199 | "colorPermutations": { 200 | "6868681": [ 201 | 0 202 | ] 203 | } 204 | }, 205 | "attrs": [ 206 | { 207 | "fill": "rgb(68, 68, 68)" 208 | } 209 | ], 210 | "properties": { 211 | "order": 10, 212 | "id": 49, 213 | "prevSize": 24, 214 | "code": 58886, 215 | "name": "icon-action-stars" 216 | }, 217 | "setIdx": 0, 218 | "iconIdx": 5 219 | }, 220 | { 221 | "icon": { 222 | "paths": [ 223 | "M42.667 896h170.667v-512h-170.667v512zM981.333 426.667c0-46.933-38.4-85.333-85.333-85.333h-269.227l40.533-194.987 1.28-13.653c0-17.493-7.253-33.707-18.773-45.227l-45.227-44.8-280.747 281.173c-15.787 15.36-25.173 36.693-25.173 60.16v426.667c0 46.933 38.4 85.333 85.333 85.333h384c35.413 0 65.707-21.333 78.507-52.053l128.853-300.8c3.84-9.813 5.973-20.053 5.973-31.147v-81.493l-0.427-0.427 0.427-3.413z" 224 | ], 225 | "attrs": [ 226 | { 227 | "fill": "rgb(68, 68, 68)" 228 | } 229 | ], 230 | "isMulticolor": false, 231 | "grid": 24, 232 | "tags": [ 233 | "ic_thumb_up_24px" 234 | ], 235 | "colorPermutations": { 236 | "6868681": [ 237 | 0 238 | ] 239 | } 240 | }, 241 | "attrs": [ 242 | { 243 | "fill": "rgb(68, 68, 68)" 244 | } 245 | ], 246 | "properties": { 247 | "order": 11, 248 | "id": 48, 249 | "prevSize": 24, 250 | "code": 58887, 251 | "name": "icon-action-thumb-up" 252 | }, 253 | "setIdx": 0, 254 | "iconIdx": 6 255 | }, 256 | { 257 | "icon": { 258 | "paths": [ 259 | "M341.333 298.667h128l-170.667-170.667-170.667 170.667h128v426.667h-128l170.667 170.667 170.667-170.667h-128z", 260 | "M426.667 554.667h469.333v85.333h-469.333v-85.333z", 261 | "M426.667 384h469.333v85.333h-469.333v-85.333z", 262 | "M503.467 213.333l85.333 85.333h307.2v-85.333z", 263 | "M503.467 810.667l85.333-85.333h307.2v85.333z" 264 | ], 265 | "attrs": [ 266 | { 267 | "opacity": 1, 268 | "visibility": false, 269 | "fill": "rgb(68, 68, 68)" 270 | }, 271 | { 272 | "opacity": 1, 273 | "visibility": false, 274 | "fill": "rgb(68, 68, 68)" 275 | }, 276 | { 277 | "opacity": 1, 278 | "visibility": false, 279 | "fill": "rgb(68, 68, 68)" 280 | }, 281 | { 282 | "opacity": 1, 283 | "visibility": false, 284 | "fill": "rgb(68, 68, 68)" 285 | }, 286 | { 287 | "opacity": 1, 288 | "visibility": false, 289 | "fill": "rgb(68, 68, 68)" 290 | } 291 | ], 292 | "grid": 24, 293 | "tags": [ 294 | "sort" 295 | ], 296 | "colorPermutations": { 297 | "6868681": [ 298 | 0, 299 | 0, 300 | 0, 301 | 0, 302 | 0 303 | ] 304 | } 305 | }, 306 | "attrs": [ 307 | { 308 | "opacity": 1, 309 | "visibility": false, 310 | "fill": "rgb(68, 68, 68)" 311 | }, 312 | { 313 | "opacity": 1, 314 | "visibility": false, 315 | "fill": "rgb(68, 68, 68)" 316 | }, 317 | { 318 | "opacity": 1, 319 | "visibility": false, 320 | "fill": "rgb(68, 68, 68)" 321 | }, 322 | { 323 | "opacity": 1, 324 | "visibility": false, 325 | "fill": "rgb(68, 68, 68)" 326 | }, 327 | { 328 | "opacity": 1, 329 | "visibility": false, 330 | "fill": "rgb(68, 68, 68)" 331 | } 332 | ], 333 | "properties": { 334 | "order": 12, 335 | "id": 47, 336 | "prevSize": 24, 337 | "code": 58880, 338 | "name": "icon-custom-sort" 339 | }, 340 | "setIdx": 0, 341 | "iconIdx": 7 342 | }, 343 | { 344 | "icon": { 345 | "paths": [ 346 | "M512 97.877c-234.453 0-424.576 190.123-424.576 424.576 0 187.605 121.643 346.709 290.347 402.859 21.205 3.883 28.971-9.216 28.971-20.437 0-10.112-0.384-43.605-0.597-79.019-118.059 25.643-143.019-50.048-143.019-50.048-19.328-49.024-47.147-62.080-47.147-62.080-38.571-26.325 2.944-25.813 2.944-25.813 42.624 2.944 65.067 43.733 65.067 43.733 37.888 64.896 99.413 46.123 123.563 35.243 3.84-27.349 14.848-46.123 26.965-56.704-94.251-10.709-193.408-47.147-193.408-209.835 0-46.379 16.555-84.224 43.648-113.963-4.309-10.795-18.901-53.973 4.224-112.427 0 0 35.627-11.392 116.779 43.52 33.835-9.429 70.144-14.080 106.24-14.251 36.053 0.171 72.405 4.864 106.283 14.336 81.024-54.997 116.651-43.52 116.651-43.52 23.211 58.496 8.619 101.632 4.267 112.341 27.221 29.739 43.648 67.541 43.648 113.963 0 163.115-99.285 198.997-193.877 209.536 15.275 13.184 28.8 38.955 28.8 78.549 0 56.747-0.555 102.528-0.555 116.523 0 11.307 7.723 24.533 29.227 20.352 168.576-56.235 290.133-215.339 290.133-402.859-0-234.453-190.123-424.576-424.576-424.576z" 347 | ], 348 | "attrs": [ 349 | { 350 | "opacity": 1, 351 | "visibility": false, 352 | "fill": "rgb(68, 68, 68)" 353 | } 354 | ], 355 | "grid": 24, 356 | "tags": [ 357 | "github" 358 | ], 359 | "colorPermutations": { 360 | "6868681": [ 361 | 0 362 | ] 363 | } 364 | }, 365 | "attrs": [ 366 | { 367 | "opacity": 1, 368 | "visibility": false, 369 | "fill": "rgb(68, 68, 68)" 370 | } 371 | ], 372 | "properties": { 373 | "order": 13, 374 | "id": 46, 375 | "prevSize": 24, 376 | "name": "icon-custom-github", 377 | "code": 58917 378 | }, 379 | "setIdx": 0, 380 | "iconIdx": 8 381 | }, 382 | { 383 | "icon": { 384 | "paths": [ 385 | "M405.333 725.333l213.333-213.333-213.333-213.333z" 386 | ], 387 | "attrs": [ 388 | { 389 | "fill": "rgb(68, 68, 68)" 390 | } 391 | ], 392 | "grid": 24, 393 | "tags": [ 394 | "arrow-drop-right" 395 | ], 396 | "colorPermutations": { 397 | "6868681": [ 398 | 0 399 | ] 400 | } 401 | }, 402 | "attrs": [ 403 | { 404 | "fill": "rgb(68, 68, 68)" 405 | } 406 | ], 407 | "properties": { 408 | "order": 14, 409 | "id": 9, 410 | "prevSize": 24, 411 | "code": 58891, 412 | "name": "icon-custom-arrow-drop-right", 413 | "ligatures": "" 414 | }, 415 | "setIdx": 0, 416 | "iconIdx": 9 417 | }, 418 | { 419 | "icon": { 420 | "paths": [ 421 | "M512 87.467v424.533h424.491c-22.272-213.333-211.157-402.261-424.491-424.533z", 422 | "M426.667 183.211c-213.333 23.381-336.64 182.656-336.64 376.107 0 209.536 167.509 374.656 377.003 374.656 193.408 0 350.379-123.307 373.76-336.64h-414.123v-414.123z" 423 | ], 424 | "attrs": [ 425 | { 426 | "fill": "rgb(68, 68, 68)" 427 | }, 428 | { 429 | "fill": "rgb(68, 68, 68)" 430 | } 431 | ], 432 | "grid": 24, 433 | "tags": [ 434 | "pie" 435 | ], 436 | "colorPermutations": { 437 | "6868681": [ 438 | 0, 439 | 0 440 | ] 441 | } 442 | }, 443 | "attrs": [ 444 | { 445 | "fill": "rgb(68, 68, 68)" 446 | }, 447 | { 448 | "fill": "rgb(68, 68, 68)" 449 | } 450 | ], 451 | "properties": { 452 | "order": 15, 453 | "id": 3, 454 | "prevSize": 24, 455 | "code": 58896, 456 | "name": "icon-custom-pie", 457 | "ligatures": "" 458 | }, 459 | "setIdx": 0, 460 | "iconIdx": 10 461 | } 462 | ], 463 | "height": 1024, 464 | "metadata": { 465 | "name": "material-ui-icons" 466 | }, 467 | "preferences": { 468 | "fontPref": { 469 | "prefix": "mui-icon-", 470 | "metadata": { 471 | "fontFamily": "material-ui-icons", 472 | "majorVersion": 1, 473 | "minorVersion": 0 474 | }, 475 | "showGlyphs": true, 476 | "metrics": { 477 | "emSize": 512, 478 | "baseline": 6.25, 479 | "whitespace": 50 480 | }, 481 | "resetPoint": 58880, 482 | "showQuickUse": true, 483 | "quickUsageToken": false, 484 | "showMetrics": true, 485 | "showMetadata": false, 486 | "showVersion": false, 487 | "embed": true 488 | }, 489 | "imagePref": { 490 | "color": 0, 491 | "height": 32, 492 | "columns": 16, 493 | "margin": 16, 494 | "png": false, 495 | "sprites": true, 496 | "prefix": "icon-" 497 | }, 498 | "historySize": 100, 499 | "showCodes": true, 500 | "gridSize": 16, 501 | "showLiga": false, 502 | "showGrid": true, 503 | "showGlyphs": true, 504 | "showQuickUse": true, 505 | "search": "", 506 | "showSVGs": true, 507 | "showQuickUse2": true 508 | } 509 | } -------------------------------------------------------------------------------- /docs/font-icons/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'material-ui-icons'; 3 | src: url('fonts/material-ui-icons.eot'); 4 | } 5 | @font-face { 6 | font-family: 'material-ui-icons'; 7 | src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMghi/NsAAAC8AAAAYGNtYXDMfszDAAABHAAAAGRnYXNwAAAAEAAAAYAAAAAIZ2x5Zp6RlyoAAAGIAAAELGhlYWQDHAqpAAAFtAAAADZoaGVhA+IB8AAABewAAAAkaG10eBcAAroAAAYQAAAAPGxvY2EFugcGAAAGTAAAACBtYXhwABUAUgAABmwAAAAgbmFtZT0DC0MAAAaMAAABn3Bvc3QAAwAAAAAILAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmJQHg/+AAIAHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAFAAAAAQABAAAwAAAAEAIOYH5gvmEOYl//3//wAAAAAAIOYA5gvmEOYl//3//wAB/+MaBBoBGf0Z6QADAAEAAAAAAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQBAABUBwAGVAAkADgATABcAGwAAEzMnBzMVIxc3IzczFSM1NTMVIzU3FzM1AzczFatAVlVAQFVWQCrr6+vrJyqaxCqaAUBVVdVWVlUrK1UqKlYrK/7VKysAAAABAEAAFQHAAZUAJAAANx4BFzc+ARceATMyFh0BFAYjIi4CNTQ2OwEyFhUUFhcWBg8BjRdJLS8EDAYRJxQIDQ0IS4ViOQ0ISwkMBwUCAgUv7y1IFy4FAwIGBwwJSgkNOWOESwkMDAkUJhIGCwUvAAAAAwAAAGsCAAFVABoAJwA0AAABIgYVFBYXIz4BNTQmIyIGFRQWMyEyNjU0JiMFIiY1NDYzMhYVFAYjISImNTQ2MzIWFRQGIwGLMUUPDGAMD0UxMEVFMAEWMEVFMP7qHysrHx8sLB8BFh8sLB8fKysfAVVEMRUmEBAmFTFERDExREQxMUTALB8fLCwfHywsHx8sLB8fLAAAAAABAIAAgAGAAR4ABQAAAQcnBxc3AWJiYh6AgAEeYmIegIAAAAABACsAFQHVAasACQAAJRcnNy8BDwEXBwEAhCN0mTw8mXQjZVCWZQ2Ojg1llgAAAAABACsAKwHVAZUACgAANzUzFTM1MycHMxXVVmpA1dVAK4CAqsDAqgAAAgArAAAB1QGrABQAHwAAASIOAhUUHgIzMj4CNTQuAiMTJwc3Jz8BHwEHFwEALE46ISE6TiwsTjohITpOLFpaWhhQaSkpaVAYAasiOk4sLE45IiI5TiwsTjoi/qo3N2dFCWFhCUVnAAACABUAFQHrAcAABAAiAAA3MxEjESU0JisBNzU0Ji8BBw4BHQEUFjsBMjY/AT4BPQEjNxVWVgHWGRKHFQUEF4wGBxkSwA0VBUEBAgEBFQEA/wDrEhlhBwcLBRaNBRAJ1RIZDwuXAwgEKQIAAAABAMsAawE1AUAAAgAAPwEny2pqa2prAAACAC0AAgHUAaoABwATAAABFTMuAycHDgEVFBYzMjY3IzUBANQEJTpJKCtQWG5PSGoIzwGq1ShKOSUFMAlrSE9tWVDPAAEALAAHAdQBpABPAAABIg4CFRQWFxY2NTwBNQYmMS4BMSY2MR4BMRY2Nz4BNy4BNTQ2Ny4BNzAWFz4BMzIWFz4BMRYGBx4BFRQGBx4BFRwBFRQWNz4BNTQuAiMBACxNOiFSPwgGLBsIEA4PEBEOJwkBCAQjPQsKAQUIHB8NGg4OGg0fGwkFAQoLPSQGCQYIP1IhOk0sAaQhOk0sRm4VAggEBBYNCSITDAoDARQZAwQKDgQEKD0SHAsEHhYBFAMEBAMUARYeBAscEj0oBAUTDxUgBQQIAhVuRixNOiEAAAAAAQAAAAEAAJWo+pJfDzz1AAsCAAAAAADQ/uT2AAAAAND+5PYAAAAAAgABwAAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAADwAAAAAAAAAAAAAAAAEAAAACAABAAgAAQAIAAAACAACAAgAAKwIAACsCAAArAgAAFQIAAMsCAAAtAgAALAAAAAAACgAUAB4ATACEANAA4gD6AQ4BQgF4AYQBpgIWAAEAAAAPAFAABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAiAAAAAQAAAAAAAgAOAI0AAQAAAAAAAwAiADgAAQAAAAAABAAiAJsAAQAAAAAABQAWACIAAQAAAAAABgARAFoAAQAAAAAACgA0AL0AAwABBAkAAQAiAAAAAwABBAkAAgAOAI0AAwABBAkAAwAiADgAAwABBAkABAAiAJsAAwABBAkABQAWACIAAwABBAkABgAiAGsAAwABBAkACgA0AL0AbQBhAHQAZQByAGkAYQBsAC0AdQBpAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABtAGEAdABlAHIAaQBhAGwALQB1AGkALQBpAGMAbwBuAHNtYXRlcmlhbC11aS1pY29ucwBtAGEAdABlAHIAaQBhAGwALQB1AGkALQBpAGMAbwBuAHMAUgBlAGcAdQBsAGEAcgBtAGEAdABlAHIAaQBhAGwALQB1AGkALQBpAGMAbwBuAHMARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), 8 | url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAiYAAsAAAAACEwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgCGL822NtYXAAAAFoAAAAZAAAAGTMfszDZ2FzcAAAAcwAAAAIAAAACAAAABBnbHlmAAAB1AAABCwAAAQsnpGXKmhlYWQAAAYAAAAANgAAADYDHAqpaGhlYQAABjgAAAAkAAAAJAPiAfBobXR4AAAGXAAAADwAAAA8FwACumxvY2EAAAaYAAAAIAAAACAFugcGbWF4cAAABrgAAAAgAAAAIAAVAFJuYW1lAAAG2AAAAZ8AAAGfPQMLQ3Bvc3QAAAh4AAAAIAAAACAAAwAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5iUB4P/gACAB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABQAAAAEAAQAAMAAAABACDmB+YL5hDmJf/9//8AAAAAACDmAOYL5hDmJf/9//8AAf/jGgQaARn9GekAAwABAAAAAAAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAQAAVAcABlQAJAA4AEwAXABsAABMzJwczFSMXNyM3MxUjNTUzFSM1NxczNQM3MxWrQFZVQEBVVkAq6+vr6ycqmsQqmgFAVVXVVlZVKytVKipWKyv+1SsrAAAAAQBAABUBwAGVACQAADceARc3PgEXHgEzMhYdARQGIyIuAjU0NjsBMhYVFBYXFgYPAY0XSS0vBAwGEScUCA0NCEuFYjkNCEsJDAcFAgIFL+8tSBcuBQMCBgcMCUoJDTljhEsJDAwJFCYSBgsFLwAAAAMAAABrAgABVQAaACcANAAAASIGFRQWFyM+ATU0JiMiBhUUFjMhMjY1NCYjBSImNTQ2MzIWFRQGIyEiJjU0NjMyFhUUBiMBizFFDwxgDA9FMTBFRTABFjBFRTD+6h8rKx8fLCwfARYfLCwfHysrHwFVRDEVJhAQJhUxREQxMUREMTFEwCwfHywsHx8sLB8fLCwfHywAAAAAAQCAAIABgAEeAAUAAAEHJwcXNwFiYmIegIABHmJiHoCAAAAAAQArABUB1QGrAAkAACUXJzcvAQ8BFwcBAIQjdJk8PJl0I2VQlmUNjo4NZZYAAAAAAQArACsB1QGVAAoAADc1MxUzNTMnBzMV1VZqQNXVQCuAgKrAwKoAAAIAKwAAAdUBqwAUAB8AAAEiDgIVFB4CMzI+AjU0LgIjEycHNyc/AR8BBxcBACxOOiEhOk4sLE46ISE6TixaWloYUGkpKWlQGAGrIjpOLCxOOSIiOU4sLE46Iv6qNzdnRQlhYQlFZwAAAgAVABUB6wHAAAQAIgAANzMRIxElNCYrATc1NCYvAQcOAR0BFBY7ATI2PwE+AT0BIzcVVlYB1hkShxUFBBeMBgcZEsANFQVBAQIBARUBAP8A6xIZYQcHCwUWjQUQCdUSGQ8LlwMIBCkCAAAAAQDLAGsBNQFAAAIAAD8BJ8tqamtqawAAAgAtAAIB1AGqAAcAEwAAARUzLgMnBw4BFRQWMzI2NyM1AQDUBCU6SSgrUFhuT0hqCM8BqtUoSjklBTAJa0hPbVlQzwABACwABwHUAaQATwAAASIOAhUUFhcWNjU8ATUGJjEuATEmNjEeATEWNjc+ATcuATU0NjcuATcwFhc+ATMyFhc+ATEWBgceARUUBgceARUcARUUFjc+ATU0LgIjAQAsTTohUj8IBiwbCBAODxARDicJAQgEIz0LCgEFCBwfDRoODhoNHxsJBQEKCz0kBgkGCD9SITpNLAGkITpNLEZuFQIIBAQWDQkiEwwKAwEUGQMECg4EBCg9EhwLBB4WARQDBAQDFAEWHgQLHBI9KAQFEw8VIAUECAIVbkYsTTohAAAAAAEAAAABAACVqPqSXw889QALAgAAAAAA0P7k9gAAAADQ/uT2AAAAAAIAAcAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAgAAAQAAAAAAAAAAAAAAAAAAAA8AAAAAAAAAAAAAAAABAAAAAgAAQAIAAEACAAAAAgAAgAIAACsCAAArAgAAKwIAABUCAADLAgAALQIAACwAAAAAAAoAFAAeAEwAhADQAOIA+gEOAUIBeAGEAaYCFgABAAAADwBQAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEAIgAAAAEAAAAAAAIADgCNAAEAAAAAAAMAIgA4AAEAAAAAAAQAIgCbAAEAAAAAAAUAFgAiAAEAAAAAAAYAEQBaAAEAAAAAAAoANAC9AAMAAQQJAAEAIgAAAAMAAQQJAAIADgCNAAMAAQQJAAMAIgA4AAMAAQQJAAQAIgCbAAMAAQQJAAUAFgAiAAMAAQQJAAYAIgBrAAMAAQQJAAoANAC9AG0AYQB0AGUAcgBpAGEAbAAtAHUAaQAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAbQBhAHQAZQByAGkAYQBsAC0AdQBpAC0AaQBjAG8AbgBzbWF0ZXJpYWwtdWktaWNvbnMAbQBhAHQAZQByAGkAYQBsAC0AdQBpAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAbQBhAHQAZQByAGkAYQBsAC0AdQBpAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | [class^="muidocs-icon-"], [class*=" muidocs-icon-"] { 14 | font-family: 'material-ui-icons'; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .muidocs-icon-communication-phone:before { 28 | content: "\e601"; 29 | } 30 | 31 | .muidocs-icon-communication-voicemail:before { 32 | content: "\e602"; 33 | } 34 | 35 | .muidocs-icon-navigation-expand-more:before { 36 | content: "\e603"; 37 | } 38 | 39 | .muidocs-icon-action-grade:before { 40 | content: "\e604"; 41 | } 42 | 43 | .muidocs-icon-action-home:before { 44 | content: "\e605"; 45 | } 46 | 47 | .muidocs-icon-action-stars:before { 48 | content: "\e606"; 49 | } 50 | 51 | .muidocs-icon-action-thumb-up:before { 52 | content: "\e607"; 53 | } 54 | 55 | .muidocs-icon-custom-sort:before { 56 | content: "\e600"; 57 | } 58 | 59 | .muidocs-icon-custom-github:before { 60 | content: "\e625"; 61 | } 62 | 63 | .muidocs-icon-custom-arrow-drop-right:before { 64 | content: "\e60b"; 65 | } 66 | 67 | .muidocs-icon-custom-pie:before { 68 | content: "\e610"; 69 | } 70 | 71 | -------------------------------------------------------------------------------- /docs/layout/_full-width-section.scss: -------------------------------------------------------------------------------- 1 | .full-width-section { 2 | padding: $desktop-gutter; 3 | @include clearfix(); 4 | 5 | .full-width-section-content { 6 | max-width: 1200px; 7 | margin: 0 auto; 8 | } 9 | 10 | @media #{$device-small} { 11 | padding-top: ($desktop-gutter * 2); 12 | padding-bottom: ($desktop-gutter * 2); 13 | } 14 | 15 | @media #{$device-large} { 16 | padding-top: ($desktop-gutter * 3); 17 | padding-bottom: ($desktop-gutter * 3); 18 | } 19 | } -------------------------------------------------------------------------------- /docs/main.scss: -------------------------------------------------------------------------------- 1 | /* material-ui */ 2 | @import url("http://fonts.googleapis.com/css?family=Roboto:300,400,500"); 3 | 4 | @import "../material-ui/main"; 5 | @import "../material-ui/html"; 6 | 7 | /* custom font icons */ 8 | @import "font-icons/style.css"; 9 | 10 | /* hightlight.js for syntax highlighting */ 11 | //@import "monokai_sublime"; 12 | @import "github"; 13 | 14 | @import "color-palette"; 15 | @import "component-info"; 16 | @import "footer"; 17 | @import "layout/full-width-section"; 18 | 19 | @import "pages/get-started-page"; 20 | @import "pages/home-contribute"; 21 | @import "pages/home-features"; 22 | @import "pages/home-page-hero"; 23 | @import "pages/home-purpose"; 24 | @import "pages/page-with-nav"; 25 | 26 | @import "pages/components/component-doc"; 27 | @import "pages/components/buttons"; 28 | @import "pages/components/switches"; 29 | @import "pages/components/text-fields"; 30 | @import "pages/components/icon"; 31 | @import "pages/components/paper"; 32 | 33 | a { 34 | color: $accent-1-color; 35 | text-decoration: none; 36 | 37 | &:hover { 38 | text-decoration: underline; 39 | } 40 | } 41 | 42 | /* App Specific Styles */ 43 | .mui-app-canvas { 44 | 45 | height: 100%; 46 | 47 | .mui-app-bar { 48 | .github-icon-button { 49 | float: right; 50 | margin-right: -16px; 51 | } 52 | } 53 | } 54 | 55 | .logo { 56 | cursor: pointer; 57 | @extend %mui-font-style-headline; 58 | @extend %mui-text-full-white; 59 | line-height: $app-bar-height; 60 | @extend %mui-font-weight-light; 61 | background-color: $primary-1-color; 62 | padding-left: $desktop-gutter; 63 | padding-top: 0; 64 | margin-bottom: $desktop-gutter-mini; 65 | } 66 | 67 | .baseline-grid { 68 | background-image: url('images/baseline-20px-grid.gif'); 69 | } 70 | 71 | .code-example { 72 | background-color: $white; 73 | margin-bottom: 32px; 74 | 75 | .example-label { 76 | @extend %mui-font-style-menu; 77 | display: inline-block; 78 | text-transform: uppercase; 79 | color: $min-black; 80 | padding: $desktop-gutter-mini; 81 | border-right: solid 1px $border-color; 82 | border-bottom: solid 1px $border-color; 83 | margin-bottom: 0; 84 | // TOCHECK: .lh-border-radius(0 0 2px 0); 85 | border-radius: 0 0 2px 0; 86 | } 87 | 88 | .example-block, 89 | .code-block { 90 | padding: $desktop-gutter; 91 | } 92 | 93 | .code-block { 94 | border-top: solid 1px $border-color; 95 | // TOCHECK: .lh-border-radius(0 0 2px 2px); 96 | border-radius: 0 0 2px 0; 97 | } 98 | } 99 | 100 | .example-menu { 101 | width: (64px * 4); 102 | } 103 | 104 | .example-menu-nested { 105 | width: (64px * 3); 106 | } 107 | -------------------------------------------------------------------------------- /docs/pages/_get-started-page.scss: -------------------------------------------------------------------------------- 1 | .get-started-page { 2 | .full-width-section { 3 | max-width: 650px; 4 | margin: 0 auto; 5 | } 6 | } -------------------------------------------------------------------------------- /docs/pages/_home-contribute.scss: -------------------------------------------------------------------------------- 1 | .home-contribute { 2 | 3 | background-color: $grey-200; 4 | text-align: center; 5 | 6 | h3 { 7 | margin: 0; 8 | padding: 0; 9 | @extend %mui-font-weight-light; 10 | } 11 | 12 | .mui-raised-button { 13 | margin-top: 32px; 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /docs/pages/_home-features.scss: -------------------------------------------------------------------------------- 1 | .home-features { 2 | 3 | * { @include ease-out(); } 4 | 5 | .home-feature-heading { 6 | @extend %mui-font-style-title; 7 | background-color: $grey-200; 8 | text-align: center; 9 | margin: 0; 10 | padding: 0; 11 | line-height: $desktop-keyline-increment; 12 | } 13 | 14 | .home-feature { 15 | max-width: 300px; 16 | margin: 0 auto $desktop-gutter auto; 17 | 18 | &:last-child { 19 | margin-bottom: 0; 20 | } 21 | } 22 | 23 | .home-feature-image { 24 | //Not sure why this is needed but it fixes a display 25 | //issue in chrome 26 | margin-bottom: -6px; 27 | } 28 | 29 | @media #{$device-medium} { 30 | 31 | .feature-container { 32 | @include clearfix(); 33 | max-width: 906px; 34 | } 35 | 36 | .home-feature { 37 | float: left; 38 | width: 33%; 39 | margin-right: 4px; 40 | margin-bottom: 0; 41 | 42 | &:first-child { 43 | margin-left: -2px; 44 | } 45 | 46 | &:last-child { 47 | margin-right: 0; 48 | } 49 | } 50 | 51 | } 52 | } -------------------------------------------------------------------------------- /docs/pages/_home-page-hero.scss: -------------------------------------------------------------------------------- 1 | .home-page-hero { 2 | background-color: $primary-1-color; 3 | overflow: hidden; 4 | 5 | .svg-logo { 6 | margin-left: calc(50% - 97px); 7 | width: 420px; 8 | } 9 | 10 | .tagline { 11 | margin: 16px auto 0 auto; 12 | text-align: center; 13 | max-width: 575px; 14 | 15 | h2 { 16 | @extend %mui-font-style-title; 17 | } 18 | 19 | h1, h2 { 20 | color: $dark-white; 21 | @extend %mui-font-weight-light; 22 | } 23 | 24 | .demo-button, .github-button { 25 | margin-right: 32px; 26 | margin-top: 16px; 27 | 28 | .mui-raised-button-label { 29 | color: $primary-1-color; 30 | } 31 | } 32 | 33 | .github-button { 34 | margin-right: 0; 35 | } 36 | 37 | @media #{$device-large} { 38 | margin-top: 32px; 39 | 40 | h1 { 41 | font-size: 56px; 42 | } 43 | 44 | h2 { 45 | // FIXME: see http://thesassway.com/intermediate/understanding-placeholder-selectors 46 | // @extend %mui-font-style-headline; 47 | color: $dark-white; 48 | // @extend %mui-font-weight-light; 49 | } 50 | } 51 | 52 | 53 | } 54 | } -------------------------------------------------------------------------------- /docs/pages/_home-purpose.scss: -------------------------------------------------------------------------------- 1 | .home-purpose { 2 | background-color: $grey-200; 3 | 4 | .full-width-section-content { 5 | max-width: 700px; 6 | } 7 | 8 | p { 9 | @extend %mui-font-style-title; 10 | @extend %mui-font-weight-light; 11 | padding: 0; 12 | margin: 0; 13 | } 14 | } -------------------------------------------------------------------------------- /docs/pages/_page-with-nav.scss: -------------------------------------------------------------------------------- 1 | .page-with-nav { 2 | 3 | .page-with-nav-secondary-nav { 4 | border-top: solid 1px $grey-300; 5 | overflow: hidden; 6 | } 7 | 8 | .page-with-nav-content { 9 | padding: $desktop-gutter; 10 | max-width: ($desktop-keyline-increment * 14); 11 | } 12 | 13 | @media #{$device-medium} { 14 | $subNavWidth: ($desktop-keyline-increment * 3); 15 | 16 | position: relative; 17 | 18 | .page-with-nav-secondary-nav { 19 | border-top: none; 20 | position: absolute; 21 | top: 64px; 22 | width: $subNavWidth; 23 | } 24 | 25 | .page-with-nav-content { 26 | margin-left: $subNavWidth; 27 | border-left: solid 1px $grey-300; 28 | min-height: 800px; 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /docs/pages/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | .button-examples { 2 | @include clearfix(); 3 | 4 | .button-example-container { 5 | text-align: center; 6 | margin-bottom: 16px; 7 | } 8 | 9 | .button-example-group { 10 | float: left; 11 | width: 50%; 12 | } 13 | 14 | @media #{$device-medium} { 15 | .button-example-group { 16 | width: 25%; 17 | } 18 | } 19 | 20 | .example-icon-button-label { 21 | padding-left: 8px; 22 | } 23 | } 24 | 25 | 26 | .example-image-button { 27 | white-space: pre; 28 | cursor: pointer; 29 | position: relative; 30 | text-align: center; 31 | line-height: 24px; 32 | width: 50%; 33 | top: 0px; 34 | left: 0px; 35 | margin-top: 24px; 36 | margin-right: auto; 37 | margin-left: auto; 38 | } 39 | 40 | .example-image-input { 41 | cursor: pointer; 42 | position: absolute; 43 | top: 0; 44 | bottom: 0; 45 | right: 0; 46 | left: 0; 47 | width: 100%; 48 | opacity: 0; 49 | } 50 | 51 | .example-button-icon { 52 | @extend .mui-text-full-white; 53 | height: 100%; 54 | display: inline-block; 55 | vertical-align: middle; 56 | float: left; 57 | padding-left: 12px; 58 | line-height: 36px; 59 | } 60 | 61 | .example-flat-button-icon { 62 | display: inline-block; 63 | float: left; 64 | line-height: 36px; 65 | padding-left: 12px; 66 | } 67 | -------------------------------------------------------------------------------- /docs/pages/components/_component-doc.scss: -------------------------------------------------------------------------------- 1 | .component-doc { 2 | 3 | .component-doc-desc { 4 | border-bottom: solid 1px $border-color; 5 | padding-top: 8px; 6 | padding-bottom: 40px; 7 | margin-bottom: 24px; 8 | 9 | ol { 10 | font-size: 13px; 11 | padding-left: 48px; 12 | } 13 | } 14 | 15 | .component-info { 16 | border-top: solid 1px $border-color; 17 | padding-top: 24px; 18 | margin-top: 24px; 19 | 20 | &:first-child { 21 | border-top: none; 22 | margin-top: 0; 23 | padding-top: 0; 24 | } 25 | } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /docs/pages/components/_icon.scss: -------------------------------------------------------------------------------- 1 | .icon-group { 2 | @include clearfix(); 3 | 4 | .icon-example { 5 | width: 141px; 6 | padding: 16px 8px; 7 | float: left; 8 | text-align: center; 9 | 10 | .icon-name { 11 | display: block; 12 | padding-top: 8px; 13 | height: 48px; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /docs/pages/components/_paper.scss: -------------------------------------------------------------------------------- 1 | .paper-examples { 2 | 3 | .mui-paper { 4 | height: 100px; 5 | width: 100px; 6 | margin: 0 auto; 7 | margin-bottom: 64px; 8 | } 9 | .mui-paper-container { 10 | text-align: center; 11 | p { 12 | line-height: 80px; 13 | height: 100%; 14 | } 15 | } 16 | 17 | @media #{$device-medium} { 18 | @include clearfix(); 19 | 20 | .paper-examples-group { 21 | float: left; 22 | width: 33%; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /docs/pages/components/_switches.scss: -------------------------------------------------------------------------------- 1 | // .switches-examples { 2 | // @include clearfix(); 3 | 4 | // .switches-example-container { 5 | // text-align: left; 6 | // margin-bottom: 16px; 7 | // min-height: 24px; 8 | // } 9 | 10 | // .switches-example-group { 11 | // float: left; 12 | // width: 100%; 13 | // padding: 0 50px; 14 | // } 15 | 16 | // @media #{$device-medium} { 17 | // .switches-example-group { 18 | // width: 50%; 19 | // } 20 | // } 21 | 22 | // @media #{$device-large} { 23 | // .switches-example-group { 24 | // width: 33%; 25 | // } 26 | // } 27 | // } 28 | -------------------------------------------------------------------------------- /docs/pages/components/_tabs.scss: -------------------------------------------------------------------------------- 1 | .tab-template-container { 2 | display: block; 3 | height: 100%; 4 | position: relative; 5 | } 6 | -------------------------------------------------------------------------------- /docs/pages/components/_text-fields.scss: -------------------------------------------------------------------------------- 1 | .text-field-example { 2 | 3 | @include clearfix(); 4 | 5 | .text-field-example-group { 6 | width: 100%; 7 | float: left; 8 | margin-bottom: 32px; 9 | 10 | @media #{$device-large} { 11 | width: 50%; 12 | } 13 | } 14 | 15 | .text-field-example-single-line { 16 | @extend .mui-text-field; 17 | margin-top: 24px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /gulp/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | watch: ['material-ui/**/*.scss', 'docs/**/*.scss'], 3 | sass: { 4 | src: './docs/*.scss', 5 | dest: './less/docs/build' 6 | } 7 | }; 8 | -------------------------------------------------------------------------------- /gulp/tasks/default.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | gulp.task('default', ['sass', 'watch', 'gulp-docs']); 3 | -------------------------------------------------------------------------------- /gulp/tasks/gulp-docs.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var gulp = require('gulp'); 3 | var run = require('gulp-run'); 4 | // Run gulp for the docs site 5 | gulp.task('gulp-docs', function () { 6 | var cmd = new run.Command('gulp', { 7 | cwd: './less/docs' 8 | }); 9 | cmd.exec(); 10 | }); 11 | -------------------------------------------------------------------------------- /gulp/tasks/sass.js: -------------------------------------------------------------------------------- 1 | // "use strict"; 2 | 3 | var gulp = require('gulp'); 4 | var gutil = require('gulp-util'); 5 | var filter = require('gulp-filter'); 6 | var autoprefixer = require('gulp-autoprefixer'); 7 | var sourcemaps = require('gulp-sourcemaps'); 8 | var sass = require('gulp-sass'); 9 | 10 | var handleErrors = require('../utils/handleErrors'); 11 | var config = require('../config').sass; 12 | 13 | gulp.task('sass', function () { 14 | gulp.src(config.src) 15 | .pipe(sourcemaps.init()) 16 | .pipe(sass()) 17 | .on('error', handleErrors) 18 | .pipe(autoprefixer({ cascade: false, browsers: ['last 2 versions']})) 19 | .pipe(sourcemaps.write()) 20 | .pipe(gulp.dest(config.dest)); 21 | }); -------------------------------------------------------------------------------- /gulp/tasks/watch.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var gutil = require('gulp-util'); 5 | var src = require('../config').watch; 6 | gulp.task('watch', function () { 7 | gutil.log(gutil.colors.grey('Watching ' + src + '...')); 8 | gulp.watch(src, ['sass']); 9 | }); -------------------------------------------------------------------------------- /gulp/utils/handleErrors.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014 Call-Em-All 3 | * https://github.com/callemall/material-ui/blob/master/LICENSE 4 | */ 5 | 6 | 'use strict'; 7 | var notify = require("gulp-notify"); 8 | 9 | module.exports = function () { 10 | var args = Array.prototype.slice.call(arguments); 11 | 12 | // Send error to notification center with gulp-notify 13 | notify.onError({ 14 | title: "Compile Error", 15 | message: "<%= error.message %>" 16 | }).apply(this, args); 17 | 18 | console.log(arguments); 19 | 20 | // Keep gulp from hanging on this task 21 | this.emit('end'); 22 | }; 23 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var requireDir = require('require-dir'); 2 | requireDir('./gulp/tasks', { 3 | recurse: true 4 | }); 5 | -------------------------------------------------------------------------------- /material-ui.scss: -------------------------------------------------------------------------------- 1 | @import "material-ui/main"; -------------------------------------------------------------------------------- /material-ui/_components.scss: -------------------------------------------------------------------------------- 1 | // Core CSS 2 | @import "core/core"; 3 | 4 | // Vendor's external CSS 5 | @import "vendor/react-draggable2"; 6 | 7 | // Components 8 | @import "components/components"; 9 | 10 | -------------------------------------------------------------------------------- /material-ui/_html.scss: -------------------------------------------------------------------------------- 1 | // @import this file to make your UI adhere better to the Material UI guidelines 2 | // This will intentionally overwrite the behaviour of plain HTML tags 3 | 4 | html { 5 | -webkit-font-smoothing: antialiased; 6 | color: $body-text-color; 7 | font-family: $contentFontFamily; 8 | background-color: $canvas-color; 9 | } 10 | 11 | body { 12 | font-size: 13px; 13 | line-height: 20px; 14 | } 15 | 16 | hr { 17 | border: none; 18 | border-bottom: solid 1px $border-color; 19 | } 20 | 21 | h1 { @extend %mui-font-style-display-2; } 22 | h2 { @extend %mui-font-style-display-1; } 23 | h3 { @extend %mui-font-style-headline; } 24 | h4 { @extend %mui-font-style-title; } 25 | h5 { @extend %mui-font-style-subhead-1; } 26 | h6 { @extend %mui-font-style-body-2; } 27 | p { @extend %mui-font-style-body-1; } 28 | hr { 29 | margin-top: 0; 30 | margin-bottom: 18px; 31 | } -------------------------------------------------------------------------------- /material-ui/_icons.scss: -------------------------------------------------------------------------------- 1 | @import "material-design-fonticons/mdfi"; 2 | @import "material-ui-icons/style"; 3 | -------------------------------------------------------------------------------- /material-ui/_main.scss: -------------------------------------------------------------------------------- 1 | @import "scaffolding"; 2 | @import "components"; 3 | -------------------------------------------------------------------------------- /material-ui/_scaffolding.scss: -------------------------------------------------------------------------------- 1 | // Reset and dependencies 2 | @import "resets/normalize"; 3 | @import "resets/typography-resets"; 4 | 5 | // Core variables and mixins 6 | @import "variables/colors"; 7 | @import "variables/media-queries"; 8 | @import "variables/spacing"; 9 | @import "variables/custom-variables"; 10 | 11 | @import "mixins/mixins"; 12 | -------------------------------------------------------------------------------- /material-ui/components/_app-bar.scss: -------------------------------------------------------------------------------- 1 | // NOTE: Variable originally declared at _icon-button.scss file, but it's also being used here 2 | // and it causes compilations errors, duplicated to solve for now. @janmyler 3 | $icon-button-size: ($icon-size * 2); 4 | 5 | .mui-app-bar { 6 | width: 100%; 7 | min-height: $desktop-keyline-increment; 8 | 9 | background-color: $app-bar-color; 10 | z-index: 5; 11 | 12 | .mui-paper-container { 13 | padding-left: $desktop-gutter; 14 | padding-right: $desktop-gutter; 15 | } 16 | 17 | .mui-icon-button { 18 | margin-top: (($app-bar-height - $icon-button-size) / 2); 19 | * { 20 | fill: $app-bar-text-color; 21 | color: $app-bar-text-color; 22 | } 23 | } 24 | 25 | .mui-app-bar-title { 26 | @extend %mui-font-style-headline; 27 | color: $app-bar-text-color; 28 | padding-top: 0; 29 | line-height: $desktop-keyline-increment; 30 | float: left; 31 | } 32 | 33 | .mui-app-bar-navigation-icon-button { 34 | float: left; 35 | margin-right: 8px; 36 | margin-left: -16px; 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /material-ui/components/_card.scss: -------------------------------------------------------------------------------- 1 | .mui-card { 2 | $card-padding: 24px; 3 | 4 | background-color: $white; 5 | padding: $card-padding; 6 | 7 | .mui-card-toolbar { 8 | margin: ($card-padding * -1) ($card-padding * -1) ($card-padding * -1) $card-padding; 9 | line-height: 56px; 10 | height: 56px; 11 | padding-left: 0 $card-padding; 12 | @extend %mui-font-style-menu; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /material-ui/components/_checkbox.scss: -------------------------------------------------------------------------------- 1 | .mui-checkbox { 2 | .mui-checkbox-icon { 3 | $checkbox-size: 24px; 4 | 5 | height: $checkbox-size; 6 | width: $checkbox-size; 7 | margin-right: $desktop-gutter-less; 8 | 9 | .mui-checkbox-check { 10 | position: absolute; 11 | opacity: 0; 12 | transform: scale(0); 13 | transform-origin: 50% 50%; 14 | 15 | transition: 16 | opacity 450ms $ease-out-function 0ms, 17 | transform 0ms $ease-out-function 450ms; 18 | 19 | * { fill: $checkbox-checked-color; } 20 | } 21 | 22 | .mui-checkbox-box { 23 | position: absolute; 24 | * { 25 | fill: $checkbox-box-color; 26 | @include ease-out($duration: 2s, $delay: 200ms); 27 | } 28 | } 29 | } 30 | 31 | &.mui-is-switched { 32 | .mui-checkbox-icon { 33 | .mui-checkbox-check { 34 | @include ease-out($duration: .45s, $delay: 0s); 35 | opacity: 1; 36 | transform: scale(1); 37 | transform-origin: 50% 50%; 38 | 39 | transition: 40 | opacity 0ms $ease-out-function 0ms, 41 | transform 800ms $ease-out-function 0ms; 42 | } 43 | .mui-checkbox-box { 44 | @include ease-out($duration: 100s, $delay: 0ms); 45 | * { fill: $checkbox-checked-color; } 46 | } 47 | } 48 | } 49 | 50 | &.mui-is-disabled { 51 | .mui-checkbox-icon { 52 | .mui-checkbox-check, 53 | .mui-checkbox-box { 54 | * { fill: $checkbox-disabled-color; } 55 | } 56 | } 57 | } 58 | 59 | &.mui-is-required { 60 | .mui-checkbox-icon { 61 | .mui-checkbox-box { 62 | * { fill: $checkbox-required-color; } 63 | } 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /material-ui/components/_components.scss: -------------------------------------------------------------------------------- 1 | @import "app-bar"; 2 | @import "card"; 3 | @import "checkbox"; 4 | @import "date-picker/date-picker"; 5 | @import "dialog-window"; 6 | @import "dialog"; 7 | @import "drop-down-icon"; 8 | @import "drop-down-menu"; 9 | @import "enhanced-button"; 10 | @import "enhanced-switch"; 11 | @import "enhanced-textarea"; 12 | @import "flat-button"; 13 | @import "floating-action-button"; 14 | @import "font-icon"; 15 | @import "icon-button"; 16 | @import "ink-bar"; 17 | @import "input"; 18 | @import "left-nav"; 19 | @import "menu"; 20 | @import "menu-item"; 21 | @import "overlay"; 22 | @import "paper"; 23 | @import "radio-button"; 24 | @import "raised-button"; 25 | @import "ripples/focus-ripple"; 26 | @import "ripples/touch-ripple"; 27 | @import "slider"; 28 | @import "snackbar"; 29 | @import "subheader"; 30 | @import "svg-icon"; 31 | @import "table"; 32 | @import "tabs"; 33 | @import "text-field"; 34 | @import "toggle"; 35 | @import "toolbar"; 36 | @import "tooltip"; 37 | @import "transition-groups/slide-in"; 38 | -------------------------------------------------------------------------------- /material-ui/components/_dialog-window.scss: -------------------------------------------------------------------------------- 1 | .mui-dialog-window { 2 | position: fixed; 3 | z-index: 10; 4 | top: 0px; 5 | left: -10000px; 6 | width: 100%; 7 | height: 100%; 8 | transition: left 0ms $ease-out-function 450ms; 9 | 10 | .mui-dialog-window-contents { 11 | @include ease-out(); 12 | position: relative; 13 | width: 75%; 14 | max-width: ($desktop-keyline-increment * 12); 15 | margin: 0 auto; 16 | z-index: 10; 17 | background: $canvas-color; 18 | opacity: 0; 19 | } 20 | 21 | .mui-dialog-window-actions { 22 | padding: 8px; 23 | margin-bottom: 8px; 24 | width: 100%; 25 | text-align: right; 26 | 27 | .mui-dialog-window-action { 28 | margin-right: 8px; 29 | } 30 | } 31 | 32 | &.mui-is-shown { 33 | left: 0px; 34 | transition: left 0ms $ease-out-function 0ms; 35 | 36 | .mui-dialog-window-contents { 37 | opacity: 1; 38 | top: 0px; 39 | transform: translate3d(0, $desktop-keyline-increment, 0); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /material-ui/components/_dialog.scss: -------------------------------------------------------------------------------- 1 | .mui-dialog { 2 | .mui-dialog-title { 3 | padding: $desktop-gutter $desktop-gutter 0 $desktop-gutter; 4 | margin-bottom: 0; 5 | } 6 | 7 | .mui-dialog-content { 8 | padding: $desktop-gutter; 9 | } 10 | } -------------------------------------------------------------------------------- /material-ui/components/_drop-down-icon.scss: -------------------------------------------------------------------------------- 1 | $icon-width: 48px; 2 | 3 | .mui-drop-down-icon { 4 | display: inline-block; 5 | width: $icon-width !important; 6 | position: relative; 7 | height: $desktop-toolbar-height; 8 | font-size: $desktop-drop-down-menu-font-size; 9 | cursor: pointer; 10 | 11 | &.mui-open { 12 | .mui-icon-highlight { 13 | background-color: rgba(0, 0, 0, .1); 14 | } 15 | 16 | .mui-menu-control, 17 | .mui-menu-control:hover { 18 | .mui-menu-control-bg { 19 | opacity: 0; 20 | } 21 | .mui-menu-label { 22 | top: ($desktop-toolbar-height / 2); 23 | opacity: 0; 24 | } 25 | } 26 | 27 | .mui-menu { 28 | opacity: 1; 29 | } 30 | } 31 | 32 | .mui-menu { 33 | @include ease-out(); 34 | right: -14px !important; 35 | top: 9px !important; 36 | 37 | .mui-menu-item { 38 | padding-right: ($icon-size + ($desktop-gutter-less*2)); 39 | height: $desktop-drop-down-menu-item-height; 40 | line-height: $desktop-drop-down-menu-item-height; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /material-ui/components/_drop-down-menu.scss: -------------------------------------------------------------------------------- 1 | .mui-drop-down-menu { 2 | 3 | * { @include ease-out(); } 4 | 5 | position: relative; 6 | display: inline-block; 7 | height: $desktop-toolbar-height; 8 | font-size: $desktop-drop-down-menu-font-size; 9 | 10 | &.mui-open { 11 | .mui-menu-control { 12 | &, 13 | &:hover, 14 | &:focus { 15 | 16 | .mui-menu-control-bg { 17 | opacity: 0; 18 | } 19 | 20 | .mui-menu-label { 21 | top: ($desktop-toolbar-height / 2); 22 | opacity: 0; 23 | } 24 | } 25 | } 26 | 27 | .mui-menu { 28 | opacity: 1; 29 | } 30 | } 31 | 32 | .mui-menu-control { 33 | cursor: pointer; 34 | @include clearfix(); 35 | height: 100%; 36 | 37 | .mui-menu-control-bg { 38 | background-color: $menu-background-color; 39 | height: 100%; 40 | width: 100%; 41 | opacity: 0; 42 | } 43 | 44 | &:hover, 45 | &:focus { 46 | .mui-menu-control-bg { 47 | opacity: 1; 48 | } 49 | } 50 | 51 | .mui-menu-label { 52 | line-height: $desktop-toolbar-height; 53 | position: absolute; 54 | padding-left: $desktop-gutter; 55 | top: 0; 56 | opacity: 1; 57 | } 58 | 59 | .mui-menu-drop-down-icon { 60 | position: absolute; 61 | top: (($desktop-toolbar-height - 24px) / 2); 62 | right: $desktop-gutter-less; 63 | * { 64 | fill: $drop-down-menu-icon-color; 65 | } 66 | } 67 | 68 | .mui-menu-control-underline { 69 | border-top: solid 1px $border-color; 70 | margin: 0 $desktop-gutter; 71 | } 72 | } 73 | 74 | .mui-menu { 75 | .mui-menu-item { 76 | padding-right: ($icon-size + $desktop-gutter-less + $desktop-gutter-mini); 77 | height: $desktop-drop-down-menu-item-height; 78 | line-height: $desktop-drop-down-menu-item-height; 79 | white-space: nowrap; 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /material-ui/components/_enhanced-button.scss: -------------------------------------------------------------------------------- 1 | .mui-enhanced-button { 2 | 3 | border: 0; 4 | background: none; 5 | 6 | &:focus { 7 | outline: none; 8 | } 9 | 10 | &.mui-is-link-button { 11 | display: inline-block; 12 | cursor: pointer; 13 | text-decoration: none; 14 | 15 | &:hover { 16 | text-decoration: none; 17 | } 18 | 19 | &.mui-is-disabled { 20 | cursor: default; 21 | } 22 | } 23 | 24 | } -------------------------------------------------------------------------------- /material-ui/components/_enhanced-switch.scss: -------------------------------------------------------------------------------- 1 | .mui-enhanced-switch { 2 | $mui-switch-width: 60px; 3 | 4 | position: relative; 5 | cursor: pointer; 6 | overflow: visible; 7 | display: table; 8 | height: auto; 9 | width: 100%; 10 | 11 | .mui-enhanced-switch-input { 12 | position: absolute; 13 | cursor: pointer; 14 | pointer-events: all; 15 | opacity: 0; 16 | width: 100%; 17 | height: 100%; 18 | z-index: 2; 19 | left: 0; 20 | } 21 | 22 | .mui-enhanced-switch-wrap { 23 | @include ease-out(); 24 | float: left; 25 | position: relative; 26 | display: table-column; 27 | 28 | 29 | .mui-touch-ripple, 30 | .mui-focus-ripple-inner { 31 | width: 200%; 32 | height: 200%; 33 | top: -12px; 34 | left: -12px; 35 | } 36 | } 37 | 38 | .mui-switch-label { 39 | float: left; 40 | position: relative; 41 | display: table-column; 42 | width: calc(100% - #{$mui-switch-width}); 43 | line-height: 24px; 44 | } 45 | 46 | &.mui-is-switched { 47 | .mui-focus-ripple-inner, 48 | .mui-ripple-circle-inner { 49 | background-color: $switches-ripple-color; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /material-ui/components/_enhanced-textarea.scss: -------------------------------------------------------------------------------- 1 | .mui-enhanced-textarea { 2 | .mui-enhanced-textarea-shadow, 3 | .mui-enhanced-textarea-input { 4 | width: 100%; 5 | resize: none; 6 | } 7 | 8 | .mui-enhanced-textarea-input { 9 | overflow: hidden; 10 | } 11 | 12 | .mui-enhanced-textarea-shadow { 13 | transform: scale(0); 14 | position: absolute; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /material-ui/components/_flat-button.scss: -------------------------------------------------------------------------------- 1 | .mui-flat-button { 2 | 3 | @include ease-out(); 4 | @extend %mui-font-style-button; 5 | border-radius: 2px; 6 | user-select: none; 7 | 8 | position: relative; 9 | overflow: hidden; 10 | background-color: $flat-button-color; 11 | color: $flat-button-text-color; 12 | line-height: $button-height; 13 | min-width: $button-min-width; 14 | padding: 0; 15 | margin: 0; 16 | 17 | //This is need so that ripples do not bleed 18 | //past border radius. 19 | //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil 20 | transform: translate3d(0, 0, 0); 21 | 22 | .mui-touch-ripple { 23 | .mui-ripple-circle-inner { 24 | background-color: $flat-button-ripple-color; 25 | } 26 | } 27 | 28 | .mui-focus-ripple { 29 | .mui-focus-ripple-inner { 30 | background-color: $flat-button-focus-ripple-color; 31 | } 32 | } 33 | 34 | .mui-flat-button-label { 35 | position: relative; 36 | padding: 0 $desktop-gutter-less; 37 | } 38 | 39 | &:hover, 40 | &.mui-is-keyboard-focused { 41 | background-color: $flat-button-hover-color; 42 | } 43 | 44 | &.mui-is-disabled { 45 | color: $flat-button-disabled-text-color; 46 | 47 | &:hover { 48 | background-color: inherit; 49 | } 50 | } 51 | 52 | &.mui-is-primary { 53 | color: $flat-button-primary-text-color; 54 | 55 | &:hover, 56 | &.mui-is-keyboard-focused { 57 | background-color: $flat-button-primary-hover-color; 58 | } 59 | 60 | .mui-touch-ripple { 61 | .mui-ripple-circle-inner { 62 | background-color: $flat-button-primary-ripple-color; 63 | } 64 | } 65 | 66 | .mui-focus-ripple { 67 | .mui-focus-ripple-inner { 68 | background-color: $flat-button-primary-focus-ripple-color; 69 | } 70 | } 71 | } 72 | 73 | &.mui-is-secondary { 74 | color: $flat-button-secondary-text-color; 75 | 76 | &:hover, 77 | &.mui-is-keyboard-focused { 78 | background-color: $flat-button-secondary-hover-color; 79 | } 80 | 81 | .mui-touch-ripple { 82 | .mui-ripple-circle-inner { 83 | background-color: $flat-button-secondary-ripple-color; 84 | } 85 | } 86 | 87 | .mui-focus-ripple { 88 | .mui-focus-ripple-inner { 89 | background-color: $flat-button-secondary-focus-ripple-color; 90 | } 91 | } 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /material-ui/components/_floating-action-button.scss: -------------------------------------------------------------------------------- 1 | .mui-floating-action-button { 2 | 3 | display: inline-block; 4 | 5 | &, * { @include ease-out(); } 6 | 7 | .mui-floating-action-button-container { 8 | position: relative; 9 | height: $floating-action-button-size; 10 | width: $floating-action-button-size; 11 | padding: 0; 12 | overflow: hidden; 13 | background-color: $floating-action-button-color; 14 | border-radius: 50%; 15 | text-align: center; 16 | vertical-align: bottom; 17 | 18 | //This is need so that ripples do not bleed 19 | //past border radius. 20 | //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil 21 | transform: translate3d(0, 0, 0); 22 | 23 | &.mui-is-disabled { 24 | background-color: $floating-action-button-disabled-color; 25 | 26 | .mui-floating-action-button-icon { 27 | color: $floating-action-button-disabled-text-color; 28 | } 29 | 30 | &:hover { 31 | background-color: $floating-action-button-disabled-color; 32 | } 33 | } 34 | 35 | &:hover, 36 | &.mui-is-keyboard-focused { 37 | background-color: $floating-action-button-hover-color; 38 | } 39 | } 40 | 41 | .mui-floating-action-button-icon { 42 | line-height: $floating-action-button-size; 43 | color: $floating-action-button-icon-color; 44 | fill: $floating-action-button-icon-color; 45 | } 46 | 47 | .mui-touch-ripple { 48 | .mui-ripple-circle-inner { 49 | background-color: $floating-action-button-ripple-color; 50 | } 51 | } 52 | 53 | .mui-focus-ripple { 54 | .mui-focus-ripple-inner { 55 | background-color: $floating-action-button-focus-ripple-color 56 | } 57 | } 58 | 59 | &.mui-is-mini { 60 | .mui-floating-action-button-container { 61 | height: $floating-action-button-mini-size; 62 | width: $floating-action-button-mini-size; 63 | } 64 | 65 | .mui-floating-action-button-icon { 66 | line-height: $floating-action-button-mini-size; 67 | } 68 | } 69 | 70 | &.mui-is-secondary { 71 | 72 | .mui-floating-action-button-container { 73 | background-color: $floating-action-button-secondary-color; 74 | 75 | &:hover, 76 | &.mui-is-keyboard-focused { 77 | background-color: $floating-action-button-secondary-hover-color; 78 | } 79 | } 80 | 81 | .mui-floating-action-button-icon { 82 | color: $floating-action-button-secondary-icon-color; 83 | } 84 | 85 | .mui-touch-ripple { 86 | .mui-ripple-circle-inner { 87 | background-color: $floating-action-button-secondary-ripple-color; 88 | } 89 | } 90 | 91 | .mui-focus-ripple { 92 | .mui-focus-ripple-inner { 93 | background-color: $floating-action-button-secondary-focus-ripple-color; 94 | } 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /material-ui/components/_font-icon.scss: -------------------------------------------------------------------------------- 1 | .mui-font-icon { 2 | position: relative; 3 | font-size: $icon-size; 4 | display: inline-block; 5 | user-select: none; 6 | } 7 | -------------------------------------------------------------------------------- /material-ui/components/_icon-button.scss: -------------------------------------------------------------------------------- 1 | $icon-button-size: ($icon-size * 2); 2 | @include pulsate("icon-button-focus-ripple-pulsate"); 3 | 4 | .mui-icon-button { 5 | 6 | * { @include ease-out(); } 7 | position: relative; 8 | padding: ($icon-size / 2); 9 | width: $icon-size * 2; 10 | height: $icon-size * 2; 11 | 12 | .mui-focus-ripple { 13 | .mui-focus-ripple-inner { 14 | background-color: rgba(0,0,0,0.1); 15 | box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1); 16 | border: solid 6px $transparent; 17 | background-clip: padding-box; 18 | @include pulsate-animation("icon-button-focus-ripple-pulsate"); 19 | } 20 | } 21 | 22 | .mui-icon-button-tooltip { 23 | margin-top: ($icon-button-size + 4); 24 | } 25 | 26 | &.mui-is-disabled { 27 | * { 28 | color: lighten($body-text-color, 75%); 29 | fill: lighten($body-text-color, 75%); 30 | } 31 | } 32 | } 33 | 34 | .mui-dark-theme { 35 | .mui-touch-ripple { 36 | .mui-ripple-circle-inner { 37 | background-color: rgba(255,255,255,0.3); 38 | } 39 | } 40 | 41 | .mui-focus-ripple { 42 | .mui-focus-ripple-inner { 43 | background-color: rgba(255,255,255,0.3); 44 | box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3); 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /material-ui/components/_ink-bar.scss: -------------------------------------------------------------------------------- 1 | .mui-ink-bar { 2 | bottom: 0; 3 | display: block; 4 | background-color: yellow; 5 | height: 2px; 6 | margin-top: -2px; 7 | position: relative; 8 | @include ease-out(1s, left); 9 | } 10 | -------------------------------------------------------------------------------- /material-ui/components/_input.scss: -------------------------------------------------------------------------------- 1 | .mui-input { 2 | position: relative; 3 | margin-top: 24px; 4 | margin-bottom: 48px; 5 | 6 | input, textarea { 7 | background-color: transparent; 8 | font-size: $input-font-size; 9 | border: 0; 10 | outline: none; 11 | border-bottom: 1px solid lightgray; 12 | padding: 0; 13 | box-sizing: border-box; 14 | padding-bottom: 14px; 15 | 16 | &[type="text"], &[type="password"], &[type="email"] { 17 | display: block; 18 | width: $input-width; 19 | } 20 | 21 | &:focus, &.mui-is-not-empty, &:disabled[value]:not([value=""]) { 22 | outline: none; 23 | box-shadow: none; 24 | &~.mui-input-placeholder { 25 | color: blue; 26 | font-size: $input-placeholder-size !important; 27 | font-weight: 300; 28 | top: -32px; 29 | @include ease-out(); 30 | } 31 | &~.mui-input-highlight { 32 | width: 0; 33 | background-color: blue; 34 | @include ease-out(); 35 | } 36 | &~.mui-input-bar { 37 | &::before, &::after { 38 | background-color: blue; 39 | width: 50%; 40 | } 41 | } 42 | &~.mui-input-description { 43 | display: block; 44 | } 45 | } 46 | 47 | &:not(:focus).mui-is-not-empty, &:disabled[value]:not([value=""]) { 48 | &+.mui-input-placeholder { 49 | color: gray; 50 | 51 | &+.mui-input-highlight { 52 | &+.mui-input-bar { 53 | &::before, &::after { 54 | width: 0; 55 | } 56 | 57 | &+.mui-input-description { 58 | display: none; 59 | } 60 | } 61 | } 62 | } 63 | } 64 | 65 | &+.mui-input-placeholder { 66 | font-size: $input-font-size; 67 | color: gray; 68 | position: absolute; 69 | top: -4px; 70 | //z-index: -1; 71 | @include ease-out(); 72 | } 73 | } 74 | 75 | .mui-input-highlight { 76 | content: ''; 77 | position: absolute; 78 | background-color: transparent; 79 | opacity: 0.25; 80 | height: 19px; 81 | top: -3px; 82 | width: ($input-width/2); 83 | z-index: -1; 84 | } 85 | 86 | .mui-input-bar { 87 | position: relative; 88 | display: block; 89 | width: $input-width; 90 | 91 | &::before, &::after { 92 | content: ''; 93 | height: $input-bar-height; 94 | top: (-1 * $input-bar-height); 95 | width: 0; 96 | position: absolute; 97 | @include ease-out(); 98 | } 99 | 100 | &::before { 101 | left: 50%; 102 | } 103 | 104 | &::after { 105 | right: 50%; 106 | } 107 | } 108 | 109 | .mui-input-description { 110 | display: none; 111 | color: blue; 112 | position: absolute; 113 | } 114 | 115 | .mui-input-error { 116 | display: none; 117 | color: $input-error-color; 118 | position: absolute; 119 | } 120 | 121 | &.mui-error { 122 | input, textarea { 123 | &:focus, &.mui-is-not-empty { 124 | &+.mui-input-placeholder { 125 | color: $input-error-color; 126 | 127 | &+.mui-input-highlight { 128 | width: 0; 129 | background-color: red; 130 | 131 | &+.mui-input-bar { 132 | 133 | &::before, &::after { 134 | background-color: $input-error-color; 135 | } 136 | 137 | &+.mui-input-description { 138 | display: none; 139 | } 140 | } 141 | } 142 | } 143 | } 144 | 145 | } 146 | 147 | .mui-input-error { 148 | display: block; 149 | } 150 | } 151 | 152 | &.mui-floating { 153 | margin-top: $desktop-gutter; 154 | input, textarea { 155 | &:focus { 156 | &+.mui-input-placeholder { 157 | display: block; 158 | color: gray; 159 | font-size: 16px !important; 160 | font-weight: 400; 161 | top: -4px; 162 | } 163 | 164 | &.mui-is-not-empty { 165 | &+.mui-input-placeholder { 166 | display: none; 167 | } 168 | } 169 | } 170 | 171 | &.mui-is-not-empty { 172 | &+.mui-input-placeholder { 173 | display: none; 174 | } 175 | } 176 | } 177 | } 178 | 179 | &.mui-disabled { opacity: 0.4 } 180 | } 181 | 182 | ::-webkit-input-placeholder { 183 | position: absolute !important; 184 | top: -20px !important; 185 | } 186 | -------------------------------------------------------------------------------- /material-ui/components/_left-nav.scss: -------------------------------------------------------------------------------- 1 | .mui-left-nav { 2 | 3 | .mui-left-nav-menu { 4 | height: 100%; 5 | position: fixed; 6 | width: $left-nav-width; 7 | background-color: $left-nav-color; 8 | z-index: 10; 9 | left: 0px; 10 | top: 0px; 11 | @include ease-out(); 12 | 13 | .mui-menu { 14 | .mui-menu-item { 15 | height: $desktop-left-nav-menu-item-height; 16 | line-height: $desktop-left-nav-menu-item-height; 17 | } 18 | a.mui-menu-item { 19 | display: block; 20 | text-decoration: none; 21 | color: $body-text-color; 22 | } 23 | } 24 | } 25 | 26 | &.mui-closed { 27 | .mui-left-nav-menu { 28 | transform: translate3d((-1 * $left-nav-width) - 10px, 0, 0); 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /material-ui/components/_menu-item.scss: -------------------------------------------------------------------------------- 1 | .mui-menu-item { 2 | 3 | * { user-select: none } 4 | 5 | cursor: pointer; 6 | line-height: $menu-item-height; 7 | padding-left: $menu-item-padding; 8 | padding-right: $menu-item-padding; 9 | background-color: rgba($menu-item-hover-color, 0); 10 | 11 | &:hover { 12 | &:not(.mui-is-disabled) { 13 | background-color: $menu-item-hover-color; 14 | } 15 | } 16 | 17 | .mui-menu-item-number { 18 | float: right; 19 | width: 24px; 20 | text-align: center; 21 | } 22 | 23 | .mui-menu-item-attribute { 24 | float: right; 25 | } 26 | 27 | .mui-menu-item-icon-right { 28 | line-height: $menu-item-height; 29 | float: right; 30 | } 31 | 32 | .mui-menu-item-icon { 33 | float: left; 34 | line-height: $menu-item-height; 35 | margin-right: $desktop-gutter; 36 | } 37 | 38 | .mui-menu-item-data { 39 | display: block; 40 | padding-left: ($desktop-gutter * 2); 41 | line-height: $menu-item-data-height; 42 | height: $menu-item-data-height; 43 | vertical-align: top; 44 | top: -12px; 45 | position: relative; 46 | @extend %mui-font-weight-light; 47 | } 48 | 49 | .muidocs-icon-custom-arrow-drop-right { 50 | margin-right: ($desktop-gutter-mini * -1); 51 | color: $drop-down-menu-icon-color; 52 | } 53 | 54 | .mui-toggle { 55 | margin-top: (($menu-item-height - $radio-button-size) / 2); 56 | float: right; 57 | width: 42px; 58 | } 59 | 60 | &.mui-is-selected { 61 | color: $menu-item-selected-text-color; 62 | } 63 | 64 | &.mui-is-disabled { 65 | color: $disabled-color !important; 66 | cursor: default; 67 | } 68 | 69 | } 70 | -------------------------------------------------------------------------------- /material-ui/components/_menu.scss: -------------------------------------------------------------------------------- 1 | .mui-menu { 2 | 3 | * {@include ease-out(); } 4 | 5 | background-color: $menu-background-color; 6 | 7 | &.mui-menu-hideable { 8 | opacity: 0; 9 | position: absolute; 10 | top: 0; 11 | z-index: 1; 12 | 13 | .mui-paper-container { 14 | overflow: hidden; 15 | padding: 0; 16 | } 17 | 18 | &.mui-visible { 19 | & > .mui-paper-container { 20 | padding-top: $desktop-gutter-mini; 21 | padding-bottom: $desktop-gutter-mini; 22 | } 23 | } 24 | } 25 | 26 | .mui-paper-container { 27 | padding-top: $desktop-gutter-mini; 28 | padding-bottom: $desktop-gutter-mini; 29 | } 30 | 31 | .mui-subheader { 32 | padding-left: $menu-subheader-padding; 33 | padding-right: $menu-subheader-padding; 34 | } 35 | 36 | .mui-nested-menu-item { 37 | position: relative; 38 | 39 | &.mui-is-disabled { 40 | color: $disabled-color; 41 | cursor: default; 42 | } 43 | 44 | &.mui-open { 45 | & > .mui-menu { 46 | opacity: 1; 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /material-ui/components/_overlay.scss: -------------------------------------------------------------------------------- 1 | .mui-overlay { 2 | position: fixed; 3 | height: 100%; 4 | width: 100%; 5 | z-index: 9; 6 | top: 0px; 7 | 8 | left: -100%; 9 | background-color: rgba(0, 0, 0, 0); 10 | transform: transition(left 0ms $ease-out-function 400ms, background-color 400ms $ease-out-function 0ms); 11 | 12 | &.mui-is-shown { 13 | left: 0px; 14 | background-color: $light-black; 15 | transform: transition(left 0ms $ease-out-function 0ms, background-color 400ms $ease-out-function 0ms); 16 | } 17 | } -------------------------------------------------------------------------------- /material-ui/components/_paper.scss: -------------------------------------------------------------------------------- 1 | .mui-paper { 2 | 3 | &.mui-rounded { 4 | border-radius: 2px; 5 | 6 | & > .mui-paper-container { 7 | border-radius: 2px; 8 | } 9 | } 10 | 11 | &.mui-circle { 12 | border-radius: 50%; 13 | 14 | & > .mui-paper-container { 15 | border-radius: 50%; 16 | } 17 | } 18 | 19 | & > .mui-paper-container { 20 | height: 100%; 21 | width: 100%; 22 | } 23 | 24 | &.mui-z-depth-1 { 25 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); 26 | & > .mui-z-depth-bottom { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); } 27 | } 28 | 29 | &.mui-z-depth-2 { 30 | box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23); 31 | & > .mui-z-depth-bottom { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16); } 32 | } 33 | 34 | &.mui-z-depth-3 { 35 | box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23); 36 | & > .mui-z-depth-bottom { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.19); } 37 | } 38 | 39 | &.mui-z-depth-4 { 40 | box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22); 41 | & > .mui-z-depth-bottom { box-shadow: 0 14px 45px rgba(0, 0, 0, 0.25); } 42 | } 43 | 44 | &.mui-z-depth-5 { 45 | box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22); 46 | & > .mui-z-depth-bottom { box-shadow: 0 19px 60px rgba(0, 0, 0, 0.30); } 47 | } 48 | 49 | } 50 | -------------------------------------------------------------------------------- /material-ui/components/_radio-button.scss: -------------------------------------------------------------------------------- 1 | .mui-radio-button { 2 | .mui-radio-button-icon { 3 | $radio-button-size: 24px; 4 | 5 | height: $radio-button-size; 6 | width: $radio-button-size; 7 | margin-right: $desktop-gutter-less; 8 | 9 | 10 | .mui-radio-button-fill { 11 | position: absolute; 12 | opacity: 0; 13 | transform: scale(0); 14 | transform-origin: 50% 50%; 15 | @include ease-out(); 16 | * { fill: $radio-button-checked-color; } 17 | } 18 | 19 | .mui-radio-button-target { 20 | @include ease-out(); 21 | position: absolute; 22 | opacity: 1; 23 | transform: scale(1); 24 | * { 25 | fill: $radio-button-border-color; 26 | @include ease-out($duration: 2s, $delay: 200ms); 27 | } 28 | } 29 | } 30 | 31 | &.mui-is-switched { 32 | .mui-radio-button-icon { 33 | .mui-radio-button-fill { 34 | opacity: 1; 35 | transform: scale(1); 36 | } 37 | 38 | .mui-radio-button-target { 39 | opacity: 0; 40 | transform: scale(0); 41 | * { 42 | fill: $radio-button-checked-color; 43 | @include ease-out($duration: 100s, $delay: 0ms); 44 | } 45 | } 46 | } 47 | } 48 | 49 | &.mui-is-disabled { 50 | .mui-radio-button-icon { 51 | .mui-radio-button-fill, 52 | .mui-radio-button-target { 53 | * { fill: $radio-button-disabled-color; } 54 | } 55 | } 56 | } 57 | 58 | &.mui-is-required { 59 | .mui-radio-button-icon { 60 | .mui-radio-button-target { 61 | * { fill: $radio-button-required-color; } 62 | } 63 | } 64 | } 65 | } 66 | 67 | 68 | -------------------------------------------------------------------------------- /material-ui/components/_raised-button.scss: -------------------------------------------------------------------------------- 1 | .mui-raised-button { 2 | 3 | display: inline-block; 4 | min-width: $button-min-width; 5 | height: $button-height; 6 | 7 | &, * { @include ease-out(); } 8 | 9 | .mui-raised-button-container { 10 | position: relative; 11 | width: 100%; 12 | padding: 0; 13 | overflow: hidden; 14 | border-radius: 2px; 15 | background-color: $raised-button-color; 16 | 17 | //This is need so that ripples do not bleed 18 | //past border radius. 19 | //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil 20 | transform: translate3d(0, 0, 0); 21 | 22 | &.mui-is-keyboard-focused { 23 | background-color: $raised-button-hover-color; 24 | } 25 | 26 | &.mui-is-disabled { 27 | background-color: $raised-button-disabled-color; 28 | 29 | .mui-raised-button-label { 30 | color: $raised-button-disabled-text-color; 31 | } 32 | 33 | &:hover { 34 | background-color: $raised-button-disabled-color; 35 | } 36 | } 37 | } 38 | 39 | .mui-touch-ripple { 40 | .mui-ripple-circle-inner { 41 | background-color: $raised-button-ripple-color; 42 | } 43 | } 44 | 45 | .mui-focus-ripple { 46 | .mui-focus-ripple-inner { 47 | background-color: $raised-button-focus-ripple-color; 48 | } 49 | } 50 | 51 | .mui-raised-button-label { 52 | position: relative; 53 | @extend %mui-font-style-button; 54 | margin: 0; 55 | padding: 0 $desktop-gutter-less; 56 | user-select: none; 57 | line-height: $button-height; 58 | color: $raised-button-text-color; 59 | } 60 | 61 | &:hover { 62 | .mui-raised-button-container { 63 | background-color: $raised-button-hover-color; 64 | } 65 | } 66 | 67 | &.mui-is-primary { 68 | 69 | .mui-raised-button-container { 70 | background-color: $raised-button-primary-color; 71 | 72 | &.mui-is-keyboard-focused { 73 | background-color: $raised-button-primary-hover-color; 74 | } 75 | } 76 | 77 | .mui-touch-ripple { 78 | .mui-ripple-circle-inner { 79 | background-color: $raised-button-primary-ripple-color; 80 | } 81 | } 82 | 83 | .mui-focus-ripple { 84 | .mui-focus-ripple-inner { 85 | background-color: $raised-button-primary-focus-ripple-color; 86 | } 87 | } 88 | 89 | .mui-raised-button-label { 90 | color: $raised-button-primary-text-color; 91 | } 92 | 93 | &:hover { 94 | .mui-raised-button-container { 95 | background-color: $raised-button-primary-hover-color; 96 | } 97 | } 98 | } 99 | 100 | &.mui-is-secondary { 101 | 102 | .mui-raised-button-container { 103 | background-color: $raised-button-secondary-color; 104 | 105 | &.mui-is-keyboard-focused { 106 | background-color: $raised-button-secondary-hover-color; 107 | } 108 | } 109 | 110 | .mui-touch-ripple { 111 | .mui-ripple-circle-inner { 112 | background-color: $raised-button-secondary-ripple-color; 113 | } 114 | } 115 | 116 | .mui-focus-ripple { 117 | .mui-focus-ripple-inner { 118 | background-color: $raised-button-secondary-focus-ripple-color; 119 | } 120 | } 121 | 122 | .mui-raised-button-label { 123 | color: $raised-button-secondary-text-color; 124 | } 125 | 126 | &:hover { 127 | .mui-raised-button-container { 128 | background-color: $raised-button-secondary-hover-color; 129 | } 130 | } 131 | } 132 | } -------------------------------------------------------------------------------- /material-ui/components/_slider.scss: -------------------------------------------------------------------------------- 1 | .react-draggable-dragging { 2 | user-select: none; 3 | } 4 | 5 | .mui-slider { 6 | $fill-gutter: $slider-handle-size-disabled - $slider-track-size; 7 | 8 | @mixin handle-size($size) { 9 | width: $size; 10 | height: $size; 11 | } 12 | 13 | -webkit-touch-callout: none; 14 | cursor: default; 15 | height: $slider-handle-size-active; 16 | position: relative; 17 | 18 | .mui-slider-track { 19 | position: absolute; 20 | top: ($slider-handle-size-active - $slider-track-size) / 2; 21 | left: 0; 22 | width: 100%; 23 | height: $slider-track-size; 24 | } 25 | 26 | .mui-slider-selection { 27 | position: absolute; 28 | top: 0; 29 | height: 100%; 30 | 31 | .mui-slider-selection-fill { 32 | height: 100%; 33 | @include ease-out($property: margin); 34 | } 35 | } 36 | 37 | .mui-slider-selection-low { 38 | left: 0; 39 | 40 | .mui-slider-selection-fill { 41 | background-color: $slider-selection-color; 42 | margin-right: $fill-gutter; 43 | } 44 | } 45 | 46 | .mui-slider-selection-high { 47 | right: 0; 48 | 49 | .mui-slider-selection-fill { 50 | background-color: $slider-track-color; 51 | margin-left: $fill-gutter; 52 | } 53 | } 54 | 55 | .mui-slider-handle { 56 | cursor: pointer; 57 | position: absolute; 58 | top: 0; 59 | left: 0%; 60 | z-index: 1; 61 | margin: ($slider-track-size / 2) 0 0 0; 62 | 63 | background-clip: padding-box; 64 | border-radius: 50%; 65 | transform: translate(-50%, -50%); 66 | transition: 67 | border 450ms $ease-out-function, 68 | width 450ms $ease-out-function, 69 | height 450ms $ease-out-function; 70 | 71 | @include handle-size($slider-handle-size); 72 | 73 | &:focus { 74 | outline: none; 75 | } 76 | } 77 | 78 | &:not(.mui-disabled) { 79 | .mui-slider-handle { 80 | border: 0px solid transparent; 81 | background-color: $slider-selection-color; 82 | &:active { 83 | @include handle-size($slider-handle-size-active); 84 | } 85 | } 86 | 87 | &:hover, &:focus { 88 | .mui-slider-selection-high { 89 | .mui-slider-selection-fill { 90 | background: $slider-track-color-selected; 91 | } 92 | } 93 | 94 | &:not(.mui-slider-zero) { 95 | .mui-slider-handle:not(:active) { 96 | border: $slider-handle-size solid rgba($slider-selection-color, 0.2); 97 | @include handle-size($slider-handle-size-active + $slider-handle-size); 98 | } 99 | } 100 | } 101 | 102 | &.mui-slider-zero { 103 | .mui-slider-handle { 104 | border: $slider-track-size solid $slider-track-color; 105 | background-color: transparent; 106 | box-shadow: none; 107 | 108 | &:active { 109 | border-color: $slider-track-color-selected; 110 | width: $slider-handle-size-active !important; 111 | height: $slider-handle-size-active !important; 112 | transition: 113 | background-color 450ms $ease-out-function, 114 | width 450ms $ease-out-function, 115 | height 450ms $ease-out-function; 116 | 117 | & ~ .mui-slider-selection-high .mui-slider-selection-fill { 118 | margin-left: $slider-handle-size !important; 119 | @include ease-out($property: margin); 120 | } 121 | } 122 | } 123 | 124 | &:hover, &:focus { 125 | .mui-slider-handle { 126 | $size: $slider-handle-size + $slider-track-size; 127 | border: $slider-track-size solid $slider-handle-color-zero; 128 | width: $size; 129 | height: $size; 130 | } 131 | } 132 | } 133 | } 134 | 135 | &.mui-disabled { 136 | $gutter: ($slider-handle-size-disabled + $slider-track-size) / 2; 137 | 138 | cursor: not-allowed; 139 | 140 | .mui-slider-selection-fill { 141 | background-color: $slider-track-color; 142 | } 143 | 144 | .mui-slider-handle { 145 | cursor: not-allowed; 146 | background-color: $slider-track-color; 147 | @include handle-size($slider-handle-size-disabled); 148 | } 149 | 150 | &.mui-slider-zero { 151 | .mui-slider-selection-low .mui-slider-selection-fill { 152 | margin-right: $gutter; 153 | } 154 | .mui-slider-selection-high .mui-slider-selection-fill { 155 | margin-left: $gutter; 156 | } 157 | .mui-slider-handle { 158 | border: $slider-track-size solid $slider-track-color; 159 | background-color: transparent; 160 | } 161 | } 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /material-ui/components/_snackbar.scss: -------------------------------------------------------------------------------- 1 | .mui-snackbar { 2 | 3 | color: $mui-snackbar-text-color; 4 | background-color: $mui-snackbar-background-color; 5 | border-radius: 2px; 6 | padding: 0 $desktop-gutter; 7 | height: $desktop-subheader-height; 8 | line-height: $desktop-subheader-height; 9 | min-width: 288px; 10 | max-width: 568px; 11 | 12 | position: fixed; 13 | z-index: 10; 14 | bottom: $desktop-gutter; 15 | margin-left: $desktop-gutter; 16 | 17 | left: -10000px; 18 | opacity: 0; 19 | transform: translate3d(0, 20px, 0); 20 | transition: 21 | left 0ms $ease-out-function 400ms, 22 | opacity 400ms $ease-out-function 0ms, 23 | transform 400ms $ease-out-function 0ms; 24 | 25 | .mui-snackbar-action { 26 | color: $mui-snackbar-action-color; 27 | float: right; 28 | margin-top: 6px; 29 | margin-right: -16px; 30 | margin-left: $desktop-gutter; 31 | background-color: transparent; 32 | } 33 | 34 | &.mui-is-open { 35 | left: 0; 36 | opacity: 1; 37 | transform: translate3d(0, 0, 0); 38 | transition: 39 | left 0ms $ease-out-function 0ms, 40 | opacity 400ms $ease-out-function 0ms, 41 | transform 400ms $ease-out-function 0ms; 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /material-ui/components/_subheader.scss: -------------------------------------------------------------------------------- 1 | .mui-subheader { 2 | @extend %mui-font-style-body-2; 3 | margin: 0; 4 | height: $desktop-subheader-height + $desktop-gutter-mini; 5 | line-height: $desktop-subheader-height; 6 | color: $subheader-text-color; 7 | border-top: solid 1px $subheader-border-color; 8 | padding-top: $desktop-gutter-mini; 9 | margin-top: $desktop-gutter-mini; 10 | 11 | &:first-child { 12 | height: $desktop-subheader-height; 13 | border-top: none; 14 | padding-top: 0; 15 | margin-top: 0; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /material-ui/components/_svg-icon.scss: -------------------------------------------------------------------------------- 1 | .mui-svg-icon { 2 | position: relative; 3 | height: $icon-size; 4 | width: $icon-size; 5 | display: inline-block; 6 | user-select: none; 7 | 8 | * { 9 | fill: $body-text-color; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /material-ui/components/_table.scss: -------------------------------------------------------------------------------- 1 | $column-width: 200px; 2 | 3 | .mui-table { 4 | padding: 0 $desktop-gutter; 5 | 6 | .mui-table-header { 7 | 8 | .mui-table-header-column { 9 | display: inline-block; 10 | height: 48px; 11 | line-height: 48px; 12 | width: $column-width; 13 | } 14 | 15 | .mui-table-header-pagify { 16 | display: inline-block; 17 | height: 48px; 18 | line-height: 48px; 19 | float: right; 20 | } 21 | } 22 | 23 | .mui-table-rows { 24 | 25 | .mui-table-rows-item { 26 | height: 48px; 27 | line-height: 48px; 28 | display: block; 29 | width: 100%; 30 | } 31 | 32 | .mui-table-rows-actions { 33 | height: 48px; 34 | line-height: 48px; 35 | display: inline-block; 36 | float: right; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /material-ui/components/_tabs.scss: -------------------------------------------------------------------------------- 1 | .mui-tabs-container { 2 | position: relative; 3 | 4 | .mui-tab-item-container { 5 | margin: 0; 6 | padding: 0; 7 | width: 100%; 8 | height: 48px; 9 | background-color: #00bcd4; 10 | white-space: nowrap; 11 | display: block; 12 | 13 | 14 | .mui-tab-item { 15 | display: inline-block; 16 | height: 100%; 17 | cursor: pointer; 18 | text-align: center; 19 | line-height: 48px; 20 | color: #fff; 21 | opacity: .6; 22 | font-size: 14sp; 23 | font-weight: 500; 24 | font: $headingFontFamily; 25 | 26 | 27 | &.mui-tab-is-active { 28 | color: #fff; 29 | opacity: 1; 30 | font: $headingFontFamily; 31 | } 32 | 33 | .mui-tab-template { 34 | display: block; 35 | width: 100%; 36 | position: relative; 37 | text-align: initial; 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /material-ui/components/_text-field.scss: -------------------------------------------------------------------------------- 1 | .mui-text-field { 2 | $disabled-text-color: rgba($body-text-color, 0.3); 3 | $error-color: $red-500; 4 | 5 | font-size: 16px; 6 | line-height: 24px; 7 | 8 | width: (64px * 4); 9 | height: 48px; 10 | display: inline-block; 11 | position: relative; 12 | @include ease-out($property: height, $duration: 200ms); 13 | 14 | //Normal Text Field Styles 15 | //------------------------ 16 | .mui-text-field-hint, 17 | .mui-text-field-floating-label { 18 | position: absolute; 19 | line-height: 48px; 20 | color: $disabled-text-color; 21 | opacity: 1; 22 | @include ease-out(); 23 | } 24 | 25 | .mui-text-field-error { 26 | position: absolute; 27 | bottom: -10px; 28 | font-size: 12px; 29 | line-height: 12px; 30 | color: $error-color; 31 | @include ease-out(); 32 | } 33 | 34 | .mui-text-field-input, 35 | .mui-text-field-textarea { 36 | position: relative; 37 | width: 100%; 38 | height: 100%; 39 | border: none; 40 | outline: none; 41 | background-color: $transparent; 42 | color: $body-text-color; 43 | } 44 | 45 | .mui-text-field-textarea { 46 | margin-top: 12px; 47 | } 48 | 49 | .mui-text-field-underline, 50 | .mui-text-field-focus-underline { 51 | position: absolute; 52 | width: 100%; 53 | bottom: 8px; 54 | margin: 0; 55 | } 56 | 57 | .mui-text-field-focus-underline { 58 | border-color: $primary-1-color; 59 | border-bottom-width: 2px; 60 | transform: scaleX(0); 61 | @include ease-out(); 62 | } 63 | 64 | &.mui-has-error { 65 | .mui-text-field-focus-underline { 66 | border-color: $error-color; 67 | transform: scaleX(1); 68 | } 69 | } 70 | 71 | &.mui-has-value { 72 | .mui-text-field-hint { 73 | opacity: 0; 74 | } 75 | } 76 | 77 | &.mui-is-disabled { 78 | 79 | .mui-text-field-input { 80 | color: $disabled-text-color; 81 | } 82 | 83 | .mui-text-field-underline { 84 | border: none; 85 | height: 40px; 86 | overflow: hidden; 87 | 88 | //hack because border style dotted just doesn't look right 89 | //border-bottom-style: dotted; 90 | &:after { 91 | content: '..............................................................................................................................................................................................................................................................................................................................................................'; 92 | position: absolute; 93 | top: 23px; 94 | color: $disabled-text-color; 95 | } 96 | } 97 | } 98 | 99 | &.mui-is-focused { 100 | .mui-text-field-focus-underline { 101 | transform: scaleX(1); 102 | } 103 | } 104 | 105 | //Floating Label Text Field Styles 106 | //-------------------------------- 107 | &.mui-has-floating-labels { 108 | height: 72px; 109 | 110 | .mui-text-field-floating-label { 111 | top: 24px; 112 | transform: scale(1) translate3d(0, 0, 0); 113 | transform-origin: left top; 114 | } 115 | 116 | .mui-text-field-hint { 117 | top: 24px; 118 | opacity: 0; 119 | } 120 | 121 | .mui-text-field-input { 122 | padding-top: 24px; 123 | } 124 | 125 | &.mui-has-value, 126 | &.mui-is-focused { 127 | .mui-text-field-floating-label { 128 | transform: scale(0.75) translate3d(0, -18px, 0); 129 | } 130 | } 131 | 132 | &.mui-has-value { 133 | .mui-text-field-floating-label { 134 | color: rgba($body-text-color, 0.5); 135 | } 136 | } 137 | 138 | &.mui-is-disabled { 139 | .mui-text-field-hint { 140 | color: $disabled-text-color; 141 | } 142 | } 143 | 144 | &.mui-is-focused { 145 | 146 | .mui-text-field-hint { 147 | opacity: 1; 148 | } 149 | 150 | .mui-text-field-floating-label { 151 | transform: scale(0.75) translate3d(0, -18px, 0); 152 | color: $primary-1-color; 153 | } 154 | 155 | &.mui-has-error { 156 | .mui-text-field-floating-label { 157 | color: $error-color; 158 | } 159 | } 160 | 161 | &.mui-has-value { 162 | .mui-text-field-hint { 163 | opacity: 0; 164 | } 165 | } 166 | } 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /material-ui/components/_toggle.scss: -------------------------------------------------------------------------------- 1 | .mui-toggle { 2 | $mui-switch-width: 60px; 3 | 4 | .mui-toggle-icon { 5 | $toggle-track-width: 36px; 6 | // $toggle-padding-right: calc($mui-switch-width - $toggle-track-width); 7 | 8 | padding: 4px 0px 6px 2px; 9 | margin-right: $desktop-gutter-mini; 10 | 11 | .mui-toggle-track { 12 | @include ease-out(); 13 | width: $toggle-track-width; 14 | height: 14px; 15 | border-radius: 30px; 16 | background-color: $toggle-track-off-color; 17 | } 18 | 19 | .mui-toggle-thumb { 20 | @include ease-out(); 21 | position: absolute; 22 | top: 1px; 23 | left: 2px; 24 | width: $toggle-size; 25 | height: $toggle-size; 26 | line-height: 24px; 27 | border-radius: 50%; 28 | background-color: $toggle-thumb-off-color; 29 | 30 | .mui-paper-container { 31 | border-radius: 50%; 32 | } 33 | 34 | .mui-touch-ripple, 35 | .mui-focus-ripple-inner { 36 | width: 200%; 37 | height: 200%; 38 | top: -10px; 39 | left: -10px; 40 | } 41 | } 42 | } 43 | 44 | &.mui-is-switched { 45 | .mui-toggle-icon { 46 | .mui-toggle-track { 47 | background-color: $toggle-track-on-color; 48 | } 49 | .mui-toggle-thumb { 50 | left: 18px; 51 | background-color: $toggle-thumb-on-color; 52 | } 53 | } 54 | } 55 | 56 | &.mui-is-disabled { 57 | .mui-toggle-icon { 58 | cursor: default; 59 | .mui-toggle-track { 60 | background-color: $toggle-track-disabled-color; 61 | } 62 | .mui-toggle-thumb { 63 | background-color: $toggle-thumb-disabled-color; 64 | } 65 | } 66 | } 67 | 68 | &.mui-is-required { 69 | .mui-toggle-icon { 70 | .mui-toggle-track { 71 | background-color: $toggle-track-required-color; 72 | } 73 | 74 | .mui-toggle-thumb { 75 | background-color: $toggle-thumb-required-color; 76 | } 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /material-ui/components/_toolbar.scss: -------------------------------------------------------------------------------- 1 | .mui-toolbar { 2 | background-color: $toolbar-background-color; 3 | height: $toolbar-height; 4 | width: 100%; 5 | padding: 0 $desktop-gutter; 6 | 7 | .mui-toolbar-group { 8 | position: relative; 9 | 10 | .mui-toolbar-title { 11 | padding-right: $desktop-gutter-less; 12 | line-height: $toolbar-height; 13 | } 14 | 15 | .mui-toolbar-separator { 16 | background-color: $toolbar-separator-color; 17 | display: inline-block; 18 | height: $desktop-gutter-more; 19 | margin-left: $desktop-gutter; 20 | position: relative; 21 | top: (($toolbar-height - $desktop-gutter-more) / 2); 22 | width: 1px; 23 | } 24 | 25 | .mui-raised-button, 26 | .mui-flat-button { 27 | margin: 0 $desktop-gutter; 28 | margin-top: (($toolbar-height - $button-height) / 2); 29 | position: relative; 30 | } 31 | 32 | .mui-drop-down-menu { 33 | color: $light-black; 34 | display: inline-block; 35 | margin-right: $desktop-gutter; 36 | 37 | .mui-menu-control-bg { 38 | background-color: $toolbar-menu-hover-color; 39 | border-radius: 0; 40 | } 41 | 42 | .mui-menu-control { 43 | .mui-menu-control-underline { 44 | display: none; 45 | } 46 | } 47 | 48 | .mui-font-icon { 49 | &:hover { 50 | color: $toolbar-icon-color; 51 | } 52 | } 53 | } 54 | 55 | .mui-font-icon { 56 | color: $toolbar-icon-color; 57 | cursor: pointer; 58 | line-height: $toolbar-height; 59 | padding-left: $desktop-gutter; 60 | 61 | &:hover { 62 | color: $dark-black; 63 | z-index: 1; 64 | } 65 | } 66 | 67 | &.mui-left { 68 | float: left; 69 | 70 | .mui-drop-down-menu, .mui-font-icon, .mui-toolbar-separator, .mui-drop-down-icon { 71 | float: left; 72 | } 73 | 74 | &:first-child { 75 | margin-left: -24px; 76 | 77 | .mui-toolbar-title { 78 | margin-left: 24px; 79 | } 80 | } 81 | } 82 | 83 | &.mui-right { 84 | float: right; 85 | 86 | * { 87 | vertical-align: top; 88 | } 89 | 90 | &:last-child { 91 | margin-right: -24px; 92 | } 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /material-ui/components/_tooltip.scss: -------------------------------------------------------------------------------- 1 | .mui-tooltip { 2 | position: absolute; 3 | 4 | font-family: $contentFontFamily; 5 | font-size: 10px; 6 | line-height: 22px; 7 | padding: 0 8px; 8 | color: $white; 9 | overflow: hidden; 10 | top: -10000px; 11 | 12 | border-radius: 2px; 13 | user-select: none; 14 | opacity: 0; 15 | 16 | transition: top 0ms $ease-out-function 450ms, 17 | transform 450ms $ease-out-function 0ms, 18 | opacity 450ms $ease-out-function 0ms; 19 | 20 | .mui-tooltip-label { 21 | position: relative; 22 | white-space: nowrap; 23 | } 24 | 25 | .mui-tooltip-ripple { 26 | position: absolute; 27 | left: 50%; 28 | top: 0px; 29 | 30 | transform: translate(-50%, -50%); 31 | border-radius: 50%; 32 | background-color: transparent; 33 | 34 | transition: 35 | width 0ms $ease-out-function 450ms, 36 | height 0ms $ease-out-function 450ms, 37 | background-color 450ms $ease-out-function 0ms; 38 | } 39 | 40 | &.mui-is-shown { 41 | top: -16px; 42 | opacity: 1; 43 | transform: translate3d(0, 16px, 0); 44 | 45 | transition: 46 | top 0ms $ease-out-function 0ms, 47 | transform 450ms $ease-out-function 0ms, 48 | opacity 450ms $ease-out-function 0ms; 49 | 50 | .mui-tooltip-ripple { 51 | background-color: $grey-600; 52 | transition: 53 | width 450ms $ease-out-function 0ms, 54 | height 450ms $ease-out-function 0ms, 55 | background-color 450ms $ease-out-function 0ms; 56 | } 57 | 58 | } 59 | 60 | &.mui-is-touch { 61 | font-size: 14px; 62 | line-height: 44px; 63 | padding: 0 16px; 64 | 65 | &.mui-is-shown { 66 | .mui-tooltip-ripple { 67 | height: 105px; 68 | width: 105px; 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /material-ui/components/date-picker/_calendar-month.scss: -------------------------------------------------------------------------------- 1 | .mui-date-picker-calendar-month { 2 | 3 | line-height: 32px; 4 | text-align: center; 5 | padding: 8px 14px 0 14px; 6 | background-color: $white; 7 | 8 | .mui-date-picker-calendar-month-week { 9 | @include clearfix(); 10 | } 11 | } -------------------------------------------------------------------------------- /material-ui/components/date-picker/_calendar-toolbar.scss: -------------------------------------------------------------------------------- 1 | .mui-date-picker-calendar-toolbar { 2 | height: 48px; 3 | position: relative; 4 | 5 | .mui-date-picker-calendar-toolbar-title { 6 | line-height: 48px; 7 | font-size: 14px; 8 | text-align: center; 9 | @extend %mui-font-weight-medium; 10 | } 11 | 12 | .mui-date-picker-calendar-toolbar-button-left { 13 | position: absolute; 14 | left: 0; 15 | top: 0; 16 | } 17 | 18 | .mui-date-picker-calendar-toolbar-button-right { 19 | position: absolute; 20 | right: 0; 21 | top: 0; 22 | } 23 | } -------------------------------------------------------------------------------- /material-ui/components/date-picker/_calendar.scss: -------------------------------------------------------------------------------- 1 | .mui-date-picker-calendar { 2 | font-size: 12px; 3 | 4 | .mui-date-picker-calendar-week-title { 5 | @include clearfix(); 6 | @extend %mui-font-weight-medium; 7 | color: lighten($date-picker-calendar-text-color, 50%); 8 | 9 | line-height: 12px; 10 | padding: 0 14px; 11 | } 12 | 13 | .mui-date-picker-calendar-week-title-day { 14 | list-style: none; 15 | float: left; 16 | width: 32px; 17 | text-align: center; 18 | margin: 0 2px; 19 | } 20 | 21 | .mui-date-picker-calendar-container { 22 | @include ease-out($property: "height", $duration: 150ms); 23 | } 24 | 25 | &.mui-is-4week { 26 | .mui-date-picker-calendar-container { 27 | height: 228px; 28 | } 29 | } 30 | 31 | &.mui-is-5week { 32 | .mui-date-picker-calendar-container { 33 | height: 268px; 34 | } 35 | } 36 | 37 | &.mui-is-6week { 38 | .mui-date-picker-calendar-container { 39 | height: 308px; 40 | } 41 | } 42 | } 43 | 44 | .mui-is-landscape { 45 | .mui-date-picker-calendar { 46 | @include clearfix(); 47 | } 48 | 49 | .mui-date-picker-calendar-date-display { 50 | width: 280px; 51 | height: 100%; 52 | float: left; 53 | } 54 | 55 | .mui-date-picker-calendar-container { 56 | width: 280px; 57 | float: right; 58 | } 59 | } -------------------------------------------------------------------------------- /material-ui/components/date-picker/_date-display.scss: -------------------------------------------------------------------------------- 1 | .mui-date-picker-date-display { 2 | text-align: center; 3 | position: relative; 4 | 5 | .mui-date-picker-date-display-dow { 6 | font-size: 13px; 7 | height: 32px; 8 | line-height: 32px; 9 | background-color: $date-picker-select-color; 10 | color: $date-picker-select-text-color; 11 | border-radius: 2px 2px 0 0; 12 | } 13 | 14 | .mui-date-picker-date-display-date { 15 | padding: 16px 0; 16 | background-color: $date-picker-color; 17 | color: $date-picker-text-color; 18 | } 19 | 20 | .mui-date-picker-date-display-month, 21 | .mui-date-picker-date-display-year { 22 | font-size: 22px; 23 | line-height: 24px; 24 | height: 24px; 25 | text-transform: uppercase; 26 | } 27 | 28 | .mui-date-picker-date-display-day { 29 | margin: 6px 0; 30 | line-height: 58px; 31 | height: 58px; 32 | font-size: 58px; 33 | } 34 | 35 | .mui-date-picker-date-display-year { 36 | color: lighten($date-picker-text-color, 70%); 37 | } 38 | } 39 | 40 | .mui-is-landscape { 41 | 42 | .mui-date-picker-date-display { 43 | * { @include ease-out(); } 44 | } 45 | 46 | .mui-date-picker-date-display-dow { 47 | border-radius: 2px 0 0 0; 48 | } 49 | 50 | .mui-date-picker-date-display-date { 51 | padding: 24px 0; 52 | } 53 | 54 | .mui-date-picker-date-display-day { 55 | font-size: 76px; 56 | line-height: 76px; 57 | height: 76px; 58 | } 59 | 60 | .mui-date-picker-date-display-month, 61 | .mui-date-picker-date-display-year { 62 | font-size: 26px; 63 | line-height: 26px; 64 | height: 26px; 65 | } 66 | 67 | .mui-is-5week { 68 | .mui-date-picker-date-display-date { 69 | padding: 30px 0; 70 | } 71 | .mui-date-picker-date-display-day { 72 | margin: 24px 0; 73 | } 74 | } 75 | 76 | .mui-is-6week { 77 | .mui-date-picker-date-display-date { 78 | padding: 50px 0; 79 | } 80 | .mui-date-picker-date-display-day { 81 | margin: 24px 0; 82 | } 83 | } 84 | } -------------------------------------------------------------------------------- /material-ui/components/date-picker/_date-picker-dialog.scss: -------------------------------------------------------------------------------- 1 | .mui-date-picker-dialog { 2 | font-size: 14px; 3 | color: $date-picker-calendar-text-color; 4 | 5 | .mui-date-picker-dialog-window { 6 | &.mui-dialog-window-contents { 7 | width: 280px; 8 | } 9 | } 10 | } 11 | 12 | .mui-is-landscape { 13 | .mui-date-picker-dialog-window { 14 | &.mui-dialog-window-contents { 15 | width: 560px; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /material-ui/components/date-picker/_date-picker.scss: -------------------------------------------------------------------------------- 1 | @import "calendar"; 2 | @import "calendar-month"; 3 | @import "calendar-toolbar"; 4 | @import "date-display"; 5 | @import "date-picker-dialog"; 6 | @import "day-button"; 7 | 8 | .mui-date-picker { 9 | } -------------------------------------------------------------------------------- /material-ui/components/date-picker/_day-button.scss: -------------------------------------------------------------------------------- 1 | .mui-date-picker-day-button { 2 | position: relative; 3 | float: left; 4 | width: 36px; 5 | padding: 4px 2px; 6 | 7 | .mui-date-picker-day-button-select { 8 | position: absolute; 9 | background-color: $date-picker-select-color; 10 | height: 32px; 11 | width: 32px; 12 | @include ease-out(); 13 | opacity: 0; 14 | border-radius: 50%; 15 | transform: scale(0); 16 | } 17 | 18 | .mui-date-picker-day-button-label { 19 | position: relative; 20 | } 21 | 22 | &.mui-is-selected { 23 | .mui-date-picker-day-button-label { 24 | color: $date-picker-select-text-color; 25 | } 26 | .mui-date-picker-day-button-select { 27 | opacity: 1; 28 | transform: scale(1); 29 | } 30 | } 31 | 32 | &.mui-is-disabled { 33 | color: $disabled-color; 34 | } 35 | 36 | &.mui-is-current-date { 37 | color: $date-picker-color; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /material-ui/components/ripples/_circle.scss: -------------------------------------------------------------------------------- 1 | .mui-ripple-circle { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | height: 100%; 6 | width: 100%; 7 | opacity: 0.7; 8 | @include ease-out($property: opacity, $duration: 2s); 9 | 10 | .mui-ripple-circle-inner { 11 | height: 100%; 12 | width: 100%; 13 | border-radius: 50%; 14 | transform: scale(0); 15 | background-color: rgba(0,0,0,0.2); 16 | @include ease-out($property: transform, $duration: 1s); 17 | } 18 | 19 | &.mui-is-started { 20 | opacity: 1; 21 | 22 | .mui-ripple-circle-inner { 23 | transform: scale(1); 24 | } 25 | } 26 | 27 | &.mui-is-ending { 28 | opacity: 0; 29 | } 30 | 31 | } -------------------------------------------------------------------------------- /material-ui/components/ripples/_focus-ripple.scss: -------------------------------------------------------------------------------- 1 | @include pulsate( 2 | $animation-name: "focus-ripple-pulsate", 3 | $start-size: 0.75, 4 | $end-size: 0.85 5 | ); 6 | 7 | .mui-focus-ripple { 8 | position: absolute; 9 | height: 100%; 10 | width: 100%; 11 | top: 0; 12 | left: 0; 13 | 14 | @include ease-out(); 15 | transform: scale(0); 16 | opacity: 0; 17 | 18 | .mui-focus-ripple-inner { 19 | @include pulsate-animation("focus-ripple-pulsate"); 20 | position: absolute; 21 | height: 100%; 22 | width: 100%; 23 | border-radius: 50%; 24 | background-color: rgba(0,0,0,0.1); 25 | } 26 | 27 | &.mui-is-shown { 28 | transform: scale(1); 29 | opacity: 1; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /material-ui/components/ripples/_touch-ripple.scss: -------------------------------------------------------------------------------- 1 | @import "circle"; 2 | 3 | .mui-touch-ripple { 4 | height: 100%; 5 | width: 100%; 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | } -------------------------------------------------------------------------------- /material-ui/components/transition-groups/_slide-in.scss: -------------------------------------------------------------------------------- 1 | .mui-transition-slide-in { 2 | position: relative; 3 | overflow: hidden; 4 | height: 100%; 5 | 6 | .mui-transition-slide-in-child { 7 | position: absolute; 8 | height: 100%; 9 | width: 100%; 10 | top: 0px; 11 | left: 0px; 12 | @include ease-out(); 13 | } 14 | 15 | .mui-transition-slide-in-enter { 16 | opacity: 0; 17 | } 18 | 19 | .mui-transition-slide-in-enter-active { 20 | opacity: 1; 21 | } 22 | 23 | .mui-transition-slide-in-leave { 24 | opacity: 1; 25 | } 26 | 27 | .mui-transition-slide-in-leave-active { 28 | opacity: 0; 29 | } 30 | 31 | &.mui-is-left { 32 | .mui-transition-slide-in-enter { 33 | transform: translate3d(100%,0,0); 34 | } 35 | .mui-transition-slide-in-enter-active { 36 | transform: translate3d(0,0,0); 37 | } 38 | .mui-transition-slide-in-leave { 39 | transform: translate3d(0,0,0); 40 | } 41 | .mui-transition-slide-in-leave-active { 42 | transform: translate3d(-100%,0,0); 43 | } 44 | 45 | } 46 | 47 | &.mui-is-right { 48 | .mui-transition-slide-in-enter { 49 | transform: translate3d(-100%,0,0); 50 | } 51 | .mui-transition-slide-in-enter-active { 52 | transform: translate3d(0,0,0); 53 | } 54 | .mui-transition-slide-in-leave { 55 | transform: translate3d(0,0,0); 56 | } 57 | .mui-transition-slide-in-leave-active { 58 | transform: translate3d(100%,0,0); 59 | } 60 | } 61 | 62 | &.mui-is-up { 63 | .mui-transition-slide-in-enter { 64 | transform: translate3d(0,100%,0); 65 | } 66 | .mui-transition-slide-in-enter-active { 67 | transform: translate3d(0,0,0); 68 | } 69 | .mui-transition-slide-in-leave { 70 | transform: translate3d(0,0,0); 71 | } 72 | .mui-transition-slide-in-leave-active { 73 | transform: translate3d(0,-100%,0); 74 | } 75 | } 76 | 77 | &.mui-is-down { 78 | .mui-transition-slide-in-enter { 79 | transform: translate3d(0,-100%,0); 80 | } 81 | .mui-transition-slide-in-enter-active { 82 | transform: translate3d(0,0,0); 83 | } 84 | .mui-transition-slide-in-leave { 85 | transform: translate3d(0,0,0); 86 | } 87 | .mui-transition-slide-in-leave-active { 88 | transform: translate3d(0,100%,0); 89 | } 90 | } 91 | 92 | } -------------------------------------------------------------------------------- /material-ui/core/_base.scss: -------------------------------------------------------------------------------- 1 | // Reset the box-sizing 2 | * { 3 | box-sizing: border-box; 4 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 5 | } 6 | *:before, 7 | *:after { 8 | box-sizing: border-box; 9 | } 10 | 11 | html, 12 | body { 13 | height: 100%; 14 | width: 100%; 15 | } 16 | 17 | -------------------------------------------------------------------------------- /material-ui/core/_core.scss: -------------------------------------------------------------------------------- 1 | @import "base"; 2 | @import "typography"; 3 | @import "layouts"; 4 | -------------------------------------------------------------------------------- /material-ui/core/_keylines.scss: -------------------------------------------------------------------------------- 1 | // generates: 2 | // .mui-key-width-1 { @include mui-keywidth(1); } 3 | // .mui-key-height-1 { @include mui-keyheight(1); } 4 | // for 10 classes 5 | @mixin mui-generate($num) { 6 | @for $i from 1 to $num { 7 | .mui-key-height-#{$i} { 8 | height: ($i * $desktop-keyline-increment); 9 | } 10 | 11 | .mui-key-width-#{$i} { 12 | width: ($i * $desktop-keyline-increment); 13 | } 14 | } 15 | } 16 | 17 | @include mui-generate(10); 18 | -------------------------------------------------------------------------------- /material-ui/core/_layouts.scss: -------------------------------------------------------------------------------- 1 | .mui-predefined-layout-1 { 2 | 3 | .mui-app-content-canvas { 4 | padding-top: ($app-bar-height); 5 | } 6 | 7 | .mui-app-bar { 8 | position: fixed; 9 | height: $app-bar-height; 10 | } 11 | 12 | } 13 | -------------------------------------------------------------------------------- /material-ui/core/_typography.scss: -------------------------------------------------------------------------------- 1 | %mui-text-full-black, 2 | .mui-text-full-black { 3 | color: $full-black; 4 | } 5 | 6 | %mui-text-dark-black, 7 | .mui-text-dark-black { 8 | color: $dark-black; 9 | } 10 | %mui-text-light-black, 11 | .mui-text-light-black { 12 | color: $light-black; 13 | } 14 | %mui-text-min-black, 15 | .mui-text-min-black { 16 | color: $min-black; 17 | } 18 | %mui-text-full-white, 19 | .mui-text-full-white { 20 | color: $full-white; 21 | } 22 | %mui-text-dark-white, 23 | .mui-text-dark-white { 24 | color: $dark-white; 25 | } 26 | %mui-text-light-white, 27 | .mui-text-light-white { 28 | color: $light-white; 29 | } 30 | 31 | %mui-font-weight-light, 32 | .mui-font-weight-light { 33 | font-weight: 300; 34 | } 35 | %mui-font-weight-normal, 36 | .mui-font-weight-normal { 37 | font-weight: 400; 38 | } 39 | 40 | %mui-font-weight-medium, 41 | .mui-font-weight-medium { 42 | font-weight: 500; 43 | } 44 | 45 | /* Type Styles */ 46 | %mui-font-style-display-4, 47 | .mui-font-style-display-4 { 48 | font-size: 112px; 49 | line-height: 128px; 50 | letter-spacing: -7px; 51 | padding-top: 17px; 52 | margin-bottom: 15px; 53 | @extend %mui-font-weight-light; 54 | @extend %mui-text-light-black; 55 | } 56 | 57 | %mui-font-style-display-3, 58 | .mui-font-style-display-3 { 59 | font-size: 56px; 60 | line-height: 64px; 61 | letter-spacing: -2px; 62 | padding-top: 8px; 63 | margin-bottom: 28px; 64 | @extend %mui-font-weight-normal; 65 | @extend %mui-text-light-black; 66 | } 67 | 68 | %mui-font-style-display-2, 69 | .mui-font-style-display-2 { 70 | font-size: 45px; 71 | line-height: 48px; 72 | margin-bottom: 11px; 73 | letter-spacing: -1px; 74 | @extend %mui-font-weight-normal; 75 | @extend %mui-text-light-black; 76 | } 77 | 78 | %mui-font-style-display-1, 79 | .mui-font-style-display-1 { 80 | font-size: 34px; 81 | line-height: 40px; 82 | padding-top: 8px; 83 | margin-bottom: 12px; 84 | letter-spacing: -1px; 85 | @extend %mui-font-weight-normal; 86 | @extend %mui-text-light-black; 87 | } 88 | 89 | %mui-font-style-headline, 90 | .mui-font-style-headline { 91 | font-size: 24px; 92 | line-height: 32px; 93 | padding-top: 16px; 94 | margin-bottom: 12px; 95 | letter-spacing: 0; 96 | @extend %mui-font-weight-normal; 97 | @extend %mui-text-dark-black; 98 | } 99 | 100 | %mui-font-style-title, 101 | .mui-font-style-title { 102 | font-size: 20px; 103 | line-height: 28px; 104 | padding-top: 19px; 105 | margin-bottom: 13px; 106 | letter-spacing: 0; 107 | @extend %mui-font-weight-medium; 108 | @extend %mui-text-dark-black; 109 | } 110 | 111 | %mui-font-style-subhead-2, 112 | .mui-font-style-subhead-2 { 113 | font-size: 15px; 114 | line-height: 28px; 115 | padding-top: 2px; 116 | margin-bottom: 10px; 117 | letter-spacing: 0; 118 | @extend %mui-font-weight-normal; 119 | @extend %mui-text-dark-black; 120 | } 121 | 122 | %mui-font-style-subhead-1, 123 | .mui-font-style-subhead-1 { 124 | @extend %mui-font-style-subhead-2; 125 | line-height: 24px; 126 | padding-top: 3px; 127 | margin-bottom: 13px; 128 | @extend %mui-text-dark-black; 129 | } 130 | 131 | %mui-font-style-body-2, 132 | .mui-font-style-body-2 { 133 | font-size: 13px; 134 | line-height: 24px; 135 | padding-top: 4px; 136 | margin-bottom: 12px; 137 | letter-spacing: 0; 138 | @extend %mui-font-weight-medium; 139 | @extend %mui-text-dark-black; 140 | } 141 | 142 | %mui-font-style-body-1, 143 | .mui-font-style-body-1 { 144 | font-size: 13px; 145 | line-height: 20px; 146 | padding-top: 6px; 147 | margin-bottom: 14px; 148 | letter-spacing: 0; 149 | @extend %mui-font-weight-normal; 150 | @extend %mui-text-dark-black; 151 | } 152 | 153 | %mui-font-style-caption, 154 | .mui-font-style-caption { 155 | font-size: 12px; 156 | line-height: 20px; 157 | padding-top: 6px; 158 | margin-bottom: 14px; 159 | letter-spacing: 0; 160 | @extend %mui-font-weight-normal; 161 | @extend %mui-text-light-black; 162 | } 163 | 164 | %mui-font-style-menu, 165 | .mui-font-style-menu { 166 | font-size: 13px; 167 | line-height: 20px; 168 | padding-top: 6px; 169 | margin-bottom: 14px; 170 | letter-spacing: 0; 171 | @extend %mui-font-weight-medium; 172 | @extend %mui-text-dark-black; 173 | } 174 | 175 | %mui-font-style-button, 176 | .mui-font-style-button { 177 | font-size: 14px; 178 | line-height: 20px; 179 | padding-top: 5px; 180 | margin-bottom: 15px; 181 | letter-spacing: 0; 182 | text-transform: uppercase; 183 | @extend %mui-font-weight-medium; 184 | @extend %mui-text-dark-black; 185 | } 186 | -------------------------------------------------------------------------------- /material-ui/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Clearfix 2 | // 3 | // For modern browsers 4 | // 1. The space content is one way to avoid an Opera bug when the 5 | // contenteditable attribute is included anywhere else in the document. 6 | // Otherwise it causes space to appear at the top and bottom of elements 7 | // that are clearfixed. 8 | // 2. The use of `table` rather than `block` is only necessary if using 9 | // `:before` to contain the top-margins of child elements. 10 | // 11 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 12 | 13 | @mixin clearfix() { 14 | &:before, 15 | &:after { 16 | content: " "; // 1 17 | display: table; // 2 18 | } 19 | &:after { 20 | clear: both; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /material-ui/mixins/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "clearfix"; 2 | @import "no-wrap"; 3 | @import "transitions"; 4 | -------------------------------------------------------------------------------- /material-ui/mixins/_no-wrap.scss: -------------------------------------------------------------------------------- 1 | @mixin no-wrap() { 2 | white-space: nowrap; 3 | } -------------------------------------------------------------------------------- /material-ui/mixins/_transitions.scss: -------------------------------------------------------------------------------- 1 | $ease-out-function: cubic-bezier(0.23, 1, 0.32, 1); 2 | 3 | @mixin ease-out($duration: 450ms, $property: all, $delay: 0ms) { 4 | transition: $property $duration $ease-out-function $delay; 5 | } 6 | 7 | @mixin pulsate($animation-name, $start-size: 0.75, $end-size: 1) { 8 | @keyframes #{$animation-name} { 9 | 0% { transform: scale($start-size); } 10 | 50% { transform: scale($end-size); } 11 | 100% { transform: scale($start-size); } 12 | } 13 | } 14 | 15 | @mixin pulsate-animation($animation-name, $duration: 1.5s) { 16 | animation: $animation-name $duration infinite; 17 | } 18 | -------------------------------------------------------------------------------- /material-ui/resets/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default !important; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } 428 | -------------------------------------------------------------------------------- /material-ui/resets/_typography-resets.scss: -------------------------------------------------------------------------------- 1 | /*------------------------------------* 2 | RESET 3 | *------------------------------------*/ 4 | body, div, dl, dt, dd, ul, ol, li, 5 | h1, h2, h3, h4, h5, h6, 6 | pre, form, fieldset, input, textarea, 7 | p, blockquote, th, td { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | table { 12 | border-collapse: collapse; 13 | border-spacing: 0; 14 | } 15 | fieldset, img { 16 | border: 0; 17 | } 18 | address, caption, cite, dfn, th, var { 19 | font-style: normal; 20 | font-weight: normal; 21 | } 22 | caption, th { 23 | text-align: left; 24 | } 25 | h1, h2, h3, h4, h5, h6 { 26 | font-size: 100%; 27 | font-weight: normal; 28 | } 29 | q:before, q:after { 30 | content: ''; 31 | } 32 | abbr, acronym { 33 | border: 0; 34 | } -------------------------------------------------------------------------------- /material-ui/variables/_colors.scss: -------------------------------------------------------------------------------- 1 | $red-50: #ffebee; 2 | $red-100: #ffcdd2; 3 | $red-200: #ef9a9a; 4 | $red-300: #e57373; 5 | $red-400: #ef5350; 6 | $red-500: #f44336; 7 | $red-600: #e53935; 8 | $red-700: #d32f2f; 9 | $red-800: #c62828; 10 | $red-900: #b71c1c; 11 | $red-A100: #ff8a80; 12 | $red-A200: #ff5252; 13 | $red-A400: #ff1744; 14 | $red-A700: #d50000; 15 | 16 | $pink-50: #fce4ec; 17 | $pink-100: #f8bbd0; 18 | $pink-200: #f48fb1; 19 | $pink-300: #f06292; 20 | $pink-400: #ec407a; 21 | $pink-500: #e91e63; 22 | $pink-600: #d81b60; 23 | $pink-700: #c2185b; 24 | $pink-800: #ad1457; 25 | $pink-900: #880e4f; 26 | $pink-A100: #ff80ab; 27 | $pink-A200: #ff4081; 28 | $pink-A400: #f50057; 29 | $pink-A700: #c51162; 30 | 31 | $purple-50: #f3e5f5; 32 | $purple-100: #e1bee7; 33 | $purple-200: #ce93d8; 34 | $purple-300: #ba68c8; 35 | $purple-400: #ab47bc; 36 | $purple-500: #9c27b0; 37 | $purple-600: #8e24aa; 38 | $purple-700: #7b1fa2; 39 | $purple-800: #6a1b9a; 40 | $purple-900: #4a148c; 41 | $purple-A100: #ea80fc; 42 | $purple-A200: #e040fb; 43 | $purple-A400: #d500f9; 44 | $purple-A700: #aa00ff; 45 | 46 | $deep-purple-50: #ede7f6; 47 | $deep-purple-100: #d1c4e9; 48 | $deep-purple-200: #b39ddb; 49 | $deep-purple-300: #9575cd; 50 | $deep-purple-400: #7e57c2; 51 | $deep-purple-500: #673ab7; 52 | $deep-purple-600: #5e35b1; 53 | $deep-purple-700: #512da8; 54 | $deep-purple-800: #4527a0; 55 | $deep-purple-900: #311b92; 56 | $deep-purple-A100: #b388ff; 57 | $deep-purple-A200: #7c4dff; 58 | $deep-purple-A400: #651fff; 59 | $deep-purple-A700: #6200ea; 60 | 61 | $indigo-50: #e8eaf6; 62 | $indigo-100: #c5cae9; 63 | $indigo-200: #9fa8da; 64 | $indigo-300: #7986cb; 65 | $indigo-400: #5c6bc0; 66 | $indigo-500: #3f51b5; 67 | $indigo-600: #3949ab; 68 | $indigo-700: #303f9f; 69 | $indigo-800: #283593; 70 | $indigo-900: #1a237e; 71 | $indigo-A100: #8c9eff; 72 | $indigo-A200: #536dfe; 73 | $indigo-A400: #3d5afe; 74 | $indigo-A700: #304ffe; 75 | 76 | $blue-50: #e3f2fd; 77 | $blue-100: #bbdefb; 78 | $blue-200: #90caf9; 79 | $blue-300: #64b5f6; 80 | $blue-400: #42a5f5; 81 | $blue-500: #2196f3; 82 | $blue-600: #1e88e5; 83 | $blue-700: #1976d2; 84 | $blue-800: #1565c0; 85 | $blue-900: #0d47a1; 86 | $blue-A100: #82b1ff; 87 | $blue-A200: #448aff; 88 | $blue-A400: #2979ff; 89 | $blue-A700: #2962ff; 90 | 91 | $light-blue-50: #e1f5fe; 92 | $light-blue-100: #b3e5fc; 93 | $light-blue-200: #81d4fa; 94 | $light-blue-300: #4fc3f7; 95 | $light-blue-400: #29b6f6; 96 | $light-blue-500: #03a9f4; 97 | $light-blue-600: #039be5; 98 | $light-blue-700: #0288d1; 99 | $light-blue-800: #0277bd; 100 | $light-blue-900: #01579b; 101 | $light-blue-A100: #80d8ff; 102 | $light-blue-A200: #40c4ff; 103 | $light-blue-A400: #00b0ff; 104 | $light-blue-A700: #0091ea; 105 | 106 | $cyan-50: #e0f7fa; 107 | $cyan-100: #b2ebf2; 108 | $cyan-200: #80deea; 109 | $cyan-300: #4dd0e1; 110 | $cyan-400: #26c6da; 111 | $cyan-500: #00bcd4; 112 | $cyan-600: #00acc1; 113 | $cyan-700: #0097a7; 114 | $cyan-800: #00838f; 115 | $cyan-900: #006064; 116 | $cyan-A100: #84ffff; 117 | $cyan-A200: #18ffff; 118 | $cyan-A400: #00e5ff; 119 | $cyan-A700: #00b8d4; 120 | 121 | $teal-50: #e0f2f1; 122 | $teal-100: #b2dfdb; 123 | $teal-200: #80cbc4; 124 | $teal-300: #4db6ac; 125 | $teal-400: #26a69a; 126 | $teal-500: #009688; 127 | $teal-600: #00897b; 128 | $teal-700: #00796b; 129 | $teal-800: #00695c; 130 | $teal-900: #004d40; 131 | $teal-A100: #a7ffeb; 132 | $teal-A200: #64ffda; 133 | $teal-A400: #1de9b6; 134 | $teal-A700: #00bfa5; 135 | 136 | $green-50: #e8f5e9; 137 | $green-100: #c8e6c9; 138 | $green-200: #a5d6a7; 139 | $green-300: #81c784; 140 | $green-400: #66bb6a; 141 | $green-500: #4caf50; 142 | $green-600: #43a047; 143 | $green-700: #388e3c; 144 | $green-800: #2e7d32; 145 | $green-900: #1b5e20; 146 | $green-A100: #b9f6ca; 147 | $green-A200: #69f0ae; 148 | $green-A400: #00e676; 149 | $green-A700: #00c853; 150 | 151 | $light-green-50: #f1f8e9; 152 | $light-green-100: #dcedc8; 153 | $light-green-200: #c5e1a5; 154 | $light-green-300: #aed581; 155 | $light-green-400: #9ccc65; 156 | $light-green-500: #8bc34a; 157 | $light-green-600: #7cb342; 158 | $light-green-700: #689f38; 159 | $light-green-800: #558b2f; 160 | $light-green-900: #33691e; 161 | $light-green-A100: #ccff90; 162 | $light-green-A200: #b2ff59; 163 | $light-green-A400: #76ff03; 164 | $light-green-A700: #64dd17; 165 | 166 | $lime-50: #f9fbe7; 167 | $lime-100: #f0f4c3; 168 | $lime-200: #e6ee9c; 169 | $lime-300: #dce775; 170 | $lime-400: #d4e157; 171 | $lime-500: #cddc39; 172 | $lime-600: #c0ca33; 173 | $lime-700: #afb42b; 174 | $lime-800: #9e9d24; 175 | $lime-900: #827717; 176 | $lime-A100: #f4ff81; 177 | $lime-A200: #eeff41; 178 | $lime-A400: #c6ff00; 179 | $lime-A700: #aeea00; 180 | 181 | $yellow-50: #fffde7; 182 | $yellow-100: #fff9c4; 183 | $yellow-200: #fff59d; 184 | $yellow-300: #fff176; 185 | $yellow-400: #ffee58; 186 | $yellow-500: #ffeb3b; 187 | $yellow-600: #fdd835; 188 | $yellow-700: #fbc02d; 189 | $yellow-800: #f9a825; 190 | $yellow-900: #f57f17; 191 | $yellow-A100: #ffff8d; 192 | $yellow-A200: #ffff00; 193 | $yellow-A400: #ffea00; 194 | $yellow-A700: #ffd600; 195 | 196 | $amber-50: #fff8e1; 197 | $amber-100: #ffecb3; 198 | $amber-200: #ffe082; 199 | $amber-300: #ffd54f; 200 | $amber-400: #ffca28; 201 | $amber-500: #ffc107; 202 | $amber-600: #ffb300; 203 | $amber-700: #ffa000; 204 | $amber-800: #ff8f00; 205 | $amber-900: #ff6f00; 206 | $amber-A100: #ffe57f; 207 | $amber-A200: #ffd740; 208 | $amber-A400: #ffc400; 209 | $amber-A700: #ffab00; 210 | 211 | $orange-50: #fff3e0; 212 | $orange-100: #ffe0b2; 213 | $orange-200: #ffcc80; 214 | $orange-300: #ffb74d; 215 | $orange-400: #ffa726; 216 | $orange-500: #ff9800; 217 | $orange-600: #fb8c00; 218 | $orange-700: #f57c00; 219 | $orange-800: #ef6c00; 220 | $orange-900: #e65100; 221 | $orange-A100: #ffd180; 222 | $orange-A200: #ffab40; 223 | $orange-A400: #ff9100; 224 | $orange-A700: #ff6d00; 225 | 226 | $deep-orange-50: #fbe9e7; 227 | $deep-orange-100: #ffccbc; 228 | $deep-orange-200: #ffab91; 229 | $deep-orange-300: #ff8a65; 230 | $deep-orange-400: #ff7043; 231 | $deep-orange-500: #ff5722; 232 | $deep-orange-600: #f4511e; 233 | $deep-orange-700: #e64a19; 234 | $deep-orange-800: #d84315; 235 | $deep-orange-900: #bf360c; 236 | $deep-orange-A100: #ff9e80; 237 | $deep-orange-A200: #ff6e40; 238 | $deep-orange-A400: #ff3d00; 239 | $deep-orange-A700: #dd2c00; 240 | 241 | $brown-50: #efebe9; 242 | $brown-100: #d7ccc8; 243 | $brown-200: #bcaaa4; 244 | $brown-300: #a1887f; 245 | $brown-400: #8d6e63; 246 | $brown-500: #795548; 247 | $brown-600: #6d4c41; 248 | $brown-700: #5d4037; 249 | $brown-800: #4e342e; 250 | $brown-900: #3e2723; 251 | 252 | $blue-grey-50: #eceff1; 253 | $blue-grey-100: #cfd8dc; 254 | $blue-grey-200: #b0bec5; 255 | $blue-grey-300: #90a4ae; 256 | $blue-grey-400: #78909c; 257 | $blue-grey-500: #607d8b; 258 | $blue-grey-600: #546e7a; 259 | $blue-grey-700: #455a64; 260 | $blue-grey-800: #37474f; 261 | $blue-grey-900: #263238; 262 | 263 | $grey-50: #fafafa; 264 | $grey-100: #f5f5f5; 265 | $grey-200: #eeeeee; 266 | $grey-300: #e0e0e0; 267 | $grey-400: #bdbdbd; 268 | $grey-500: #9e9e9e; 269 | $grey-600: #757575; 270 | $grey-700: #616161; 271 | $grey-800: #424242; 272 | $grey-900: #212121; 273 | 274 | $black: #000000; 275 | $white: #ffffff; 276 | 277 | $transparent: rgba(0, 0, 0, 0); 278 | $full-black: rgba(0, 0, 0, 1); 279 | $dark-black: rgba(0, 0, 0, 0.87); 280 | $light-black: rgba(0, 0, 0, 0.54); 281 | $min-black: rgba(0, 0, 0, 0.26); 282 | $faint-black: rgba(0, 0, 0, 0.12); 283 | $full-white: rgba(255, 255, 255, 1); 284 | $dark-white: rgba(255, 255, 255, 0.87); 285 | $light-white: rgba(255, 255, 255, 0.54); -------------------------------------------------------------------------------- /material-ui/variables/_custom-variables.scss: -------------------------------------------------------------------------------- 1 | // Feel free to change this file to customize your app. 2 | // This is place to put any variable overrides as well. 3 | 4 | //Typography 5 | $headingFontFamily: "Roboto", sans-serif !default; 6 | $contentFontFamily: "Roboto", sans-serif !default; 7 | 8 | //App Colors 9 | $primary-1-color: $cyan-500 !default; 10 | $primary-2-color: $cyan-700 !default; 11 | $primary-3-color: $cyan-100 !default; 12 | $accent-1-color: $pink-A200 !default; 13 | $accent-2-color: $pink-A400 !default; 14 | $accent-3-color: $pink-A100 !default; 15 | 16 | //Text Colors 17 | $body-text-color: $dark-black !default; 18 | 19 | //Border Colors 20 | $border-color: $grey-300 !default; 21 | 22 | //Component Colors 23 | $app-bar-color: $primary-1-color !default; 24 | $app-bar-text-color: $dark-white !default; 25 | $canvas-color: $white !default; 26 | $drop-down-menu-icon-color: $min-black !default; 27 | $left-nav-color: $white !default; 28 | $subheader-border-color: $border-color !default; 29 | $subheader-text-color: $primary-1-color !default; 30 | 31 | //Disabled Colors 32 | $disabled-color: rgba($body-text-color, 0.3); 33 | 34 | //Date Picker 35 | $date-picker-color: $primary-1-color !default; 36 | $date-picker-text-color: $white !default; 37 | $date-picker-calendar-text-color: $body-text-color !default; 38 | $date-picker-select-color: $primary-2-color !default; 39 | $date-picker-select-text-color: $white !default; 40 | 41 | // menu 42 | $menu-background-color: $white !default; 43 | $menu-item-data-height: 32px !default; 44 | $menu-item-height: 48px !default; 45 | $menu-item-hover-color: rgba(0, 0, 0, .035) !default; 46 | $menu-item-padding: $desktop-gutter !default; 47 | $menu-item-selected-text-color: $accent-1-color !default; 48 | $menu-container-background-color: white !default; 49 | $menu-subheader-padding: $desktop-gutter !default; 50 | 51 | // buttons 52 | $button-height: 36px !default; 53 | $button-min-width: 88px !default; 54 | 55 | $flat-button-color: $white !default; 56 | $flat-button-hover-color: darken($flat-button-color, 10%) !default; 57 | $flat-button-text-color: $body-text-color !default; 58 | $flat-button-ripple-color: rgba(0,0,0,0.1) !default; 59 | $flat-button-focus-ripple-color: rgba($flat-button-ripple-color, 0.07) !default; 60 | $flat-button-primary-hover-color: lighten($accent-1-color, 32%) !default; 61 | $flat-button-primary-text-color: $accent-1-color !default; 62 | $flat-button-primary-ripple-color: rgba($flat-button-primary-text-color, 0.2) !default; 63 | $flat-button-primary-focus-ripple-color: rgba($flat-button-primary-ripple-color, 0.2) !default; 64 | $flat-button-secondary-hover-color: lighten($primary-1-color, 52%) !default; 65 | $flat-button-secondary-text-color: $primary-1-color !default; 66 | $flat-button-secondary-ripple-color: rgba($flat-button-secondary-text-color, 0.2) !default; 67 | $flat-button-secondary-focus-ripple-color: rgba($flat-button-secondary-ripple-color, 0.2) !default; 68 | $flat-button-disabled-text-color: rgba($flat-button-text-color, 0.3) !default; 69 | 70 | $raised-button-color: $white !default; 71 | $raised-button-hover-color: darken($raised-button-color, 10%) !default; 72 | $raised-button-text-color: $body-text-color !default; 73 | $raised-button-ripple-color: rgba(0,0,0,0.1) !default; 74 | $raised-button-focus-ripple-color: rgba($raised-button-ripple-color, 0.7) !default; 75 | $raised-button-primary-color: $accent-1-color !default; 76 | $raised-button-primary-hover-color: darken($accent-1-color, 15%) !default; 77 | $raised-button-primary-text-color: $white !default; 78 | $raised-button-primary-ripple-color: rgba($white, 0.50) !default; 79 | $raised-button-primary-focus-ripple-color: $raised-button-primary-ripple-color !default; 80 | $raised-button-secondary-color: $primary-1-color !default; 81 | $raised-button-secondary-hover-color: darken($primary-1-color, 4%) !default; 82 | $raised-button-secondary-text-color: $white !default; 83 | $raised-button-secondary-ripple-color: rgba($white, 0.50) !default; 84 | $raised-button-secondary-focus-ripple-color: $raised-button-secondary-ripple-color !default; 85 | $raised-button-disabled-color: $raised-button-hover-color !default; 86 | $raised-button-disabled-text-color: rgba($raised-button-text-color, 0.3) !default; 87 | 88 | $floating-action-button-size: 56px !default; 89 | $floating-action-button-mini-size: 40px !default; 90 | $floating-action-button-color: $accent-1-color !default; 91 | $floating-action-button-icon-color: $white !default; 92 | $floating-action-button-hover-color: $raised-button-primary-hover-color !default; 93 | $floating-action-button-ripple-color: $raised-button-primary-ripple-color !default; 94 | $floating-action-button-focus-ripple-color: $raised-button-primary-ripple-color !default; 95 | $floating-action-button-secondary-color: $primary-1-color !default; 96 | $floating-action-button-secondary-icon-color: $white !default; 97 | $floating-action-button-secondary-hover-color: $raised-button-secondary-hover-color !default; 98 | $floating-action-button-secondary-ripple-color: $raised-button-secondary-ripple-color !default; 99 | $floating-action-button-secondary-focus-ripple-color: $raised-button-secondary-ripple-color !default; 100 | $floating-action-button-disabled-color: $raised-button-disabled-color !default; 101 | $floating-action-button-disabled-text-color: $raised-button-disabled-text-color !default; 102 | 103 | // input 104 | $input-width: 320px !default; 105 | $input-font-size: 16px !default; 106 | $input-placeholder-size: 13px !default; 107 | $input-error-color: red !default; 108 | $input-bar-height: 2px !default; 109 | 110 | // switches 111 | $switches-ripple-color: rgba($primary-1-color, 0.2) !default; 112 | 113 | // radio button 114 | $radio-button-size: 24px !default; 115 | $radio-button-border-color: $body-text-color !default; 116 | $radio-button-background-color: white !default; 117 | $radio-button-checked-color: $primary-1-color !default; 118 | $radio-button-required-color: $primary-1-color !default; 119 | $radio-button-disabled-color: $disabled-color !default; 120 | 121 | // checkbox 122 | $checkbox-box-color: $body-text-color !default; 123 | $checkbox-checked-color: $primary-1-color !default; 124 | $checkbox-required-color: $primary-1-color !default; 125 | $checkbox-disabled-color: $disabled-color !default; 126 | 127 | // snackbar 128 | $mui-snackbar-text-color: white !default; 129 | $mui-snackbar-background-color: #323232 !default; 130 | $mui-snackbar-action-color: $accent-1-color !default; 131 | 132 | // toggle 133 | $toggle-size: 20px !default; 134 | $toggle-thumb-on-color: $primary-1-color !default; 135 | $toggle-thumb-off-color: $grey-50 !default; 136 | $toggle-thumb-disabled-color: $grey-400 !default; 137 | $toggle-thumb-required-color: $primary-1-color !default; 138 | $toggle-track-on-color: fade-out($toggle-thumb-on-color, 0.5) !default; 139 | $toggle-track-off-color: $min-black !default; 140 | $toggle-track-disabled-color: $faint-black !default; 141 | $toggle-track-required-color: fade-out($toggle-thumb-required-color, 0.5) !default; 142 | 143 | // toolbar 144 | $toolbar-background-color: darken(#eeeeee, 5%) !default; 145 | $toolbar-height: 56px !default; 146 | $toolbar-icon-color: rgba(0, 0, 0, .40) !default; 147 | $toolbar-separator-color: rgba(0, 0, 0, .175) !default; 148 | $toolbar-menu-hover-color: rgba(0, 0, 0, .10) !default; 149 | $toolbar-menu-hover-color: $white !default; 150 | 151 | // slider 152 | $slider-track-size: 2px !default; 153 | $slider-track-color: $min-black !default; 154 | $slider-track-color-selected: $grey-500 !default; 155 | $slider-handle-size: 12px !default; 156 | $slider-handle-size-active: $slider-handle-size * 2 !default; 157 | $slider-handle-size-disabled: 8px !default; 158 | $slider-handle-color-zero: $grey-400 !default; 159 | $slider-selection-color: $primary-3-color !default; 160 | 161 | // layout 162 | $app-bar-height: $desktop-keyline-increment !default; 163 | $left-nav-width: ($desktop-keyline-increment * 4) !default; 164 | -------------------------------------------------------------------------------- /material-ui/variables/_icons.scss: -------------------------------------------------------------------------------- 1 | // The font paths are set here. In case they live elsewhere, a different 2 | // path must be specified. 3 | $mui-fonts-path: './' !default; 4 | 5 | // Assuming './material-design-fonticons' as base dir. 6 | $mdfi-font-path: $mui-fonts-path !default; 7 | 8 | // Assuming './material-ui-icons' as base dir. 9 | $mui-icons-font-path: $mui-fonts-path !default; 10 | -------------------------------------------------------------------------------- /material-ui/variables/_media-queries.scss: -------------------------------------------------------------------------------- 1 | $device-x-large: "only screen and (min-width: 1200px)" !default; 2 | $device-large: "only screen and (min-width: 992px)" !default; 3 | $device-medium: "only screen and (min-width: 768px)" !default; 4 | $device-small: "only screen and (min-width: 375px)" !default; -------------------------------------------------------------------------------- /material-ui/variables/_spacing.scss: -------------------------------------------------------------------------------- 1 | $icon-size : 24px !default; 2 | $desktop-gutter : 24px !default; 3 | $desktop-gutter-more : 32px !default; 4 | $desktop-gutter-less : 16px !default; 5 | $desktop-gutter-mini : 8px !default; 6 | $desktop-keyline-increment : 64px !default; 7 | $desktop-drop-down-menu-item-height: 32px !default; 8 | $desktop-drop-down-menu-font-size : 15px !default; 9 | $desktop-left-nav-menu-item-height : 48px !default; 10 | $desktop-subheader-height : 48px !default; 11 | $desktop-toolbar-height : 56px !default; -------------------------------------------------------------------------------- /material-ui/vendor/_react-draggable2.scss: -------------------------------------------------------------------------------- 1 | 2 | .react-draggable, .react-draggable-dragging { 3 | user-select: none; 4 | } 5 | 6 | .react-draggable { 7 | position: relative; 8 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-ui-sass", 3 | "version": "0.7.5", 4 | "description": "SASS version for the material-ui CSS framework", 5 | "main": "material-ui.scss", 6 | "scripts": { 7 | "setup": "git submodule update && cd less && npm install && cd docs && npm install", 8 | "dev": "gulp" 9 | }, 10 | "homepage": "https://github.com/gpbl/material-ui-sass", 11 | "devDependencies": { 12 | "gulp": "^3.8.11", 13 | "gulp-autoprefixer": "^2.3.0", 14 | "gulp-filter": "^2.0.2", 15 | "gulp-notify": "^2.2.0", 16 | "gulp-run": "^1.6.8", 17 | "gulp-sass": "^2.0.1", 18 | "gulp-sourcemaps": "^1.5.2", 19 | "gulp-util": "^3.0.4", 20 | "require-dir": "^0.3.0" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/gpbl/material-ui-sass.git" 25 | }, 26 | "keywords": [ 27 | "material-ui", 28 | "sass", 29 | "reactjs", 30 | "react" 31 | ], 32 | "author": "Giampaolo Bellavite", 33 | "bugs": { 34 | "url": "https://github.com/gpbl/material-ui-sass/issues" 35 | } 36 | } 37 | --------------------------------------------------------------------------------