├── .babelrc ├── .bowerrc ├── .eslintrc.js ├── .gitignore ├── Dockerfile ├── Jenkinsfile ├── LICENSE ├── README.md ├── demo ├── .babelrc ├── CodeBlock.jsx ├── CodeExample.jsx ├── ComponentDoc.jsx ├── ComponentInfo.jsx ├── app │ ├── home.jsx │ ├── main.js │ └── test.scss ├── controls │ ├── AppBar │ │ └── AppBarFixedDemo.jsx │ ├── AppBarDemo.jsx │ ├── AutoCompleteDemo.jsx │ ├── ButtonDemo.Jsx │ ├── CheckboxDemo.jsx │ ├── DatePickerDemo.jsx │ ├── DialogDemo.jsx │ ├── DrawerDemo.jsx │ ├── EditorDemo.jsx │ ├── Grouping │ │ └── GroupingDemo.jsx │ ├── IconsDemo.jsx │ ├── InputDemo.jsx │ ├── List │ │ ├── ListDemo.jsx │ │ ├── ListItemCheckboxDemo.jsx │ │ └── ListItemSelectDemo.jsx │ ├── MenuDemo.jsx │ ├── Picker │ │ ├── RadioDemo.jsx │ │ └── SelectButtonDemo.jsx │ ├── PickerDemo.jsx │ ├── ProgressDemo.jsx │ ├── RadioDemo.jsx │ ├── SnackbarDemo.jsx │ ├── TabsDemo.jsx │ ├── Toggle │ │ ├── CheckboxDemo.jsx │ │ └── SwitchDemo.jsx │ ├── ToggleDemo.jsx │ ├── Toolbar │ │ ├── PrimaryToolBarDemo.jsx │ │ └── SecondaryToolbarDemo.jsx │ ├── ToolbarDemo.jsx │ ├── drawer │ │ └── DrawerLeftTemporary.jsx │ └── popover │ │ ├── ExampleSimple.jsx │ │ └── PopoverDemo.jsx ├── index.html └── webpack.config.js ├── dist ├── css │ ├── chamel-base.cmp.css │ ├── chamel-base.css │ ├── chamel-human.cmp.css │ ├── chamel-human.css │ ├── chamel-material.cmp.css │ ├── chamel-material.css │ ├── chamel-modern.cmp.css │ └── chamel-modern.css ├── fonts │ ├── FontAwesome.otf │ ├── Material-Design-Iconic-Font.eot │ ├── Material-Design-Iconic-Font.svg │ ├── Material-Design-Iconic-Font.ttf │ ├── Material-Design-Iconic-Font.woff │ ├── Material-Design-Iconic-Font.woff2 │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 └── js │ └── chamel.js ├── docker-compose.yml ├── fonts ├── FontAwesome.otf ├── MaterialIcons-Regular.eot ├── MaterialIcons-Regular.ttf ├── MaterialIcons-Regular.woff ├── MaterialIcons-Regular.woff2 ├── fontawesome-webfont.eot ├── fontawesome-webfont.svg ├── fontawesome-webfont.ttf ├── fontawesome-webfont.woff └── fontawesome-webfont.woff2 ├── index.html ├── package-lock.json ├── package.json ├── prettier.config.js ├── src ├── AppBar │ ├── AppBar.js │ ├── AppBarRightToolbar.js │ ├── IconButton.js │ ├── SelectButton.js │ ├── index.js │ ├── theme-human.scss │ ├── theme-material.scss │ └── theme.scss ├── AutoComplete │ ├── AutoComplete.js │ └── index.js ├── Button │ ├── Button.js │ ├── FlatButton.js │ ├── FloatingButton.js │ ├── IconButton.js │ ├── RaisedButton.js │ ├── index.js │ ├── theme-human.scss │ ├── theme-material.scss │ └── theme.scss ├── ColorPicker │ ├── ColorPicker.jsx │ └── index.js ├── DatePicker │ ├── Calendar.jsx │ ├── CalendarMonth.jsx │ ├── CalendarToolbar.jsx │ ├── DateDisplay.jsx │ ├── DatePicker.jsx │ ├── DatePickerDialog.jsx │ ├── DayButton.jsx │ └── index.js ├── Dialog │ ├── Dialog.js │ ├── Page.js │ ├── index.js │ └── theme.scss ├── Drawer │ ├── Drawer.js │ ├── index.js │ ├── theme-material.scss │ └── theme.scss ├── DropDownIcon.jsx ├── Editor │ ├── ContentHtml.js │ ├── ContentRte.jsx │ ├── ContentSource.js │ ├── ContentSrc.jsx │ ├── Editor.js │ ├── EditorToolbar.js │ ├── index.js │ ├── theme-material.scss │ └── theme.scss ├── EnhancedTextarea │ ├── EnhancedTextarea.jsx │ └── index.js ├── FontIcon │ ├── FontIcon.js │ └── index.js ├── Grid │ ├── Column.js │ ├── Container.js │ ├── Row.js │ ├── index.js │ └── theme.scss ├── Grouping │ ├── Chip.js │ └── theme-material.scss ├── Input │ ├── RichText.js │ ├── TextField.js │ ├── index.js │ └── theme.scss ├── List │ ├── List.js │ ├── ListDivider.js │ ├── ListItem.js │ ├── ListItemCheckbox.js │ ├── index.js │ └── theme.scss ├── Menu │ ├── LinkMenuItem.jsx │ ├── Menu.jsx │ ├── MenuItem.jsx │ ├── NestedMenuItem.jsx │ ├── SubheaderMenuItem.jsx │ ├── index.js │ ├── theme-material.scss │ └── theme.scss ├── Overlay │ ├── Overlay.js │ ├── index.js │ └── theme.scss ├── Paper │ ├── Paper.js │ ├── index.js │ └── theme.scss ├── Picker │ ├── ColorPicker.js │ ├── DatePicker.js │ ├── RadioButton.js │ ├── RadioPicker.js │ ├── SelectButton.js │ ├── SelectField.js │ ├── TimePicker.js │ ├── index.js │ └── theme.scss ├── Popover │ ├── Popover.jsx │ ├── index.js │ └── theme.scss ├── Progress │ ├── CircularProgress.jsx │ ├── LinearProgress.jsx │ ├── Progress.js │ ├── index.js │ └── theme.scss ├── RadioButton │ ├── RadioButton.jsx │ └── index.js ├── RadioButtonGroup │ ├── RadioButtonGroup.jsx │ └── index.js ├── Snackbar │ ├── Snackbar.jsx │ ├── index.js │ └── theme.scss ├── Table │ ├── TableHeader.jsx │ ├── TableRows.jsx │ └── TableRowsItem.jsx ├── Tabs │ ├── Tab.js │ ├── Tabs.js │ ├── index.js │ └── theme.scss ├── TextFieldRich │ ├── TextFieldRich.jsx │ └── index.js ├── Toggle │ ├── Checkbox.js │ ├── Switch.js │ └── theme.scss ├── Toolbar │ ├── Toolbar.jsx │ ├── ToolbarGroup.jsx │ ├── index.js │ └── theme.scss ├── Tooltip │ ├── Tooltip.jsx │ └── index.js ├── icons │ ├── font │ │ ├── AccessTimeIcon.js │ │ ├── AccessibilityIcon.js │ │ ├── AccountIcon.js │ │ ├── AddCircleIcon.js │ │ ├── AddIcon.js │ │ ├── AnnouncementIcon.js │ │ ├── AppsIcon.js │ │ ├── ArrowBackIcon.js │ │ ├── ArrowDownIcon.js │ │ ├── ArrowDropDownCircleIcon.js │ │ ├── ArrowDropDownIcon.js │ │ ├── ArrowDropUpIcon.js │ │ ├── ArrowForwardIcon.js │ │ ├── ArrowRightIcon.js │ │ ├── ArrowUpIcon.js │ │ ├── AttachFileIcon.js │ │ ├── AttachmentIcon.js │ │ ├── BoldIcon.js │ │ ├── BorderColorIcon.js │ │ ├── BuildIcon.js │ │ ├── CancelIcon.js │ │ ├── CheckCircleIcon.js │ │ ├── CheckIcon.js │ │ ├── ChevronLeftIcon.js │ │ ├── ChevronRightIcon.js │ │ ├── CloseIcon.js │ │ ├── CodeIcon.js │ │ ├── CommentIcon.js │ │ ├── ContactsIcon.js │ │ ├── ContentPaste.js │ │ ├── CreateIcon.js │ │ ├── DashboardIcon.js │ │ ├── DateRangeIcon.js │ │ ├── DeleteIcon.js │ │ ├── EditIcon.js │ │ ├── EmailIcon.js │ │ ├── ExpandLessIcon.js │ │ ├── ExpandMoreIcon.js │ │ ├── FilterListIcon.js │ │ ├── FindPageIcon.js │ │ ├── FirstPageIcon.js │ │ ├── FlagIcon.js │ │ ├── FullScreenExitIcon.js │ │ ├── FullScreenIcon.js │ │ ├── GroupIcon.js │ │ ├── InboxIcon.js │ │ ├── ItalicIcon.js │ │ ├── LabelIcon.js │ │ ├── LastPageIcon.js │ │ ├── LibraryBooksIcon.js │ │ ├── LinkIcon.js │ │ ├── ListBulletedIcon.js │ │ ├── ListNumberedIcon.js │ │ ├── LocalOfferIcon.js │ │ ├── MenuIcon.js │ │ ├── MergeIcon.js │ │ ├── MoreHorizIcon.js │ │ ├── MoreVertIcon.js │ │ ├── NoteIcon.js │ │ ├── PersonAddIcon.js │ │ ├── PhotoCameraIcon.js │ │ ├── PhotoIcon.js │ │ ├── PrintIcon.js │ │ ├── RefreshIcon.js │ │ ├── SaveIcon.js │ │ ├── SearchIcon.js │ │ ├── SendIcon.js │ │ ├── SettingsApplication.js │ │ ├── SettingsIcon.js │ │ ├── ShuffleIcon.js │ │ ├── StreetViewIcon.js │ │ ├── StyleIcon.js │ │ ├── SubArrowLeftIcon.js │ │ ├── SubArrowRightIcon.js │ │ ├── SwapHorizIcon.js │ │ ├── TitleIcon.js │ │ ├── TransformIcon.js │ │ ├── UnderlinedIcon.js │ │ ├── ViewListIcon.js │ │ ├── WebIcon.js │ │ ├── WorkIcon.js │ │ ├── font-awesome │ │ │ ├── _animated.scss │ │ │ ├── _bordered-pulled.scss │ │ │ ├── _core.scss │ │ │ ├── _fixed-width.scss │ │ │ ├── _icons.scss │ │ │ ├── _larger.scss │ │ │ ├── _list.scss │ │ │ ├── _mixins.scss │ │ │ ├── _path.scss │ │ │ ├── _rotated-flipped.scss │ │ │ ├── _stacked.scss │ │ │ ├── _variables.scss │ │ │ └── font-awesome.scss │ │ ├── font-material │ │ │ ├── MaterialIcons-Regular.eot │ │ │ ├── MaterialIcons-Regular.ijmap │ │ │ ├── MaterialIcons-Regular.svg │ │ │ ├── MaterialIcons-Regular.ttf │ │ │ ├── MaterialIcons-Regular.woff │ │ │ ├── MaterialIcons-Regular.woff2 │ │ │ └── codepoints │ │ ├── index.js │ │ ├── theme-material.scss │ │ └── theme.scss │ └── svg │ │ ├── base.js │ │ ├── human.js │ │ ├── material.js │ │ └── modern.js ├── index.js ├── main.js ├── mixins │ ├── ClickAwayable.jsx │ ├── CustomEventTrigger.jsx │ ├── WindowListenable.jsx │ └── classable.jsx ├── ripples │ ├── CircleRipple.jsx │ ├── FocusRipple.jsx │ ├── TouchRipple.jsx │ ├── theme-material.scss │ └── theme.scss ├── styles │ ├── ChamelThemeProvider.js │ ├── ChamelThemeService.js │ ├── components │ │ ├── _card.scss │ │ ├── _checkbox.scss │ │ ├── _colorpicker.scss │ │ ├── _components.scss │ │ ├── _dialog-window.scss │ │ ├── _dialog.scss │ │ ├── _drop-down-icon.scss │ │ ├── _drop-down-menu.scss │ │ ├── _editor.scss │ │ ├── _enhanced-button.scss │ │ ├── _enhanced-switch.scss │ │ ├── _enhanced-textarea.scss │ │ ├── _flat-button.scss │ │ ├── _floating-action-button.scss │ │ ├── _font-icon.scss │ │ ├── _icon-button.scss │ │ ├── _icon.scss │ │ ├── _ink-bar.scss │ │ ├── _input.scss │ │ ├── _left-nav.scss │ │ ├── _menu-item.scss │ │ ├── _menu.scss │ │ ├── _overlay.scss │ │ ├── _paper.scss │ │ ├── _popover.scss │ │ ├── _progress.scss │ │ ├── _radio-button.scss │ │ ├── _raised-button.scss │ │ ├── _slider.scss │ │ ├── _snackbar.scss │ │ ├── _svg-icon.scss │ │ ├── _table.scss │ │ ├── _tabs.scss │ │ ├── _text-field-rich.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 │ │ ├── editor │ │ │ └── vendor │ │ │ │ ├── _codemirror.scss │ │ │ │ └── _colorpickr.scss │ │ ├── ripples │ │ │ ├── _circle.scss │ │ │ ├── _focus-ripple.scss │ │ │ └── _touch-ripple.scss │ │ ├── toolbar │ │ │ └── _toolbar.scss │ │ └── transition-groups │ │ │ ├── _fon-icon.scss │ │ │ └── _slide-in.scss │ ├── core │ │ ├── _base.scss │ │ ├── _core.scss │ │ ├── _keylines.scss │ │ └── _typography.scss │ ├── icons │ │ ├── _icons.scss │ │ └── font-awesome │ │ │ ├── _animated.scss │ │ │ ├── _bordered-pulled.scss │ │ │ ├── _core.scss │ │ │ ├── _fixed-width.scss │ │ │ ├── _icons.scss │ │ │ ├── _larger.scss │ │ │ ├── _list.scss │ │ │ ├── _mixins.scss │ │ │ ├── _path.scss │ │ │ ├── _rotated-flipped.scss │ │ │ ├── _stacked.scss │ │ │ ├── _variables.scss │ │ │ └── font-awesome.scss │ ├── mixins │ │ ├── _clearfix.scss │ │ ├── _mixins.scss │ │ ├── _no-wrap.scss │ │ ├── _ripple.scss │ │ └── _transitions.scss │ ├── resets │ │ └── _normalize.scss │ ├── theme │ │ ├── base.js │ │ ├── base │ │ │ └── base.scss │ │ ├── human.js │ │ ├── human │ │ │ ├── controls │ │ │ │ ├── _app-bar.scss │ │ │ │ ├── _controls.scss │ │ │ │ └── _paper.scss │ │ │ ├── core │ │ │ │ ├── _base.scss │ │ │ │ ├── _core.scss │ │ │ │ ├── _keylines.scss │ │ │ │ └── _typography.scss │ │ │ ├── human.scss │ │ │ └── variables │ │ │ │ ├── _spacing.scss │ │ │ │ └── _theme-variables.scss │ │ ├── material.js │ │ ├── material │ │ │ ├── controls │ │ │ │ └── _controls.scss │ │ │ ├── core │ │ │ │ ├── _base.scss │ │ │ │ ├── _core.scss │ │ │ │ ├── _keylines.scss │ │ │ │ └── _typography.scss │ │ │ ├── icons │ │ │ │ ├── _icons.scss │ │ │ │ └── material-fonts │ │ │ │ │ ├── _aliases.scss │ │ │ │ │ ├── _border.scss │ │ │ │ │ ├── _core.scss │ │ │ │ │ ├── _fixed-width.scss │ │ │ │ │ ├── _icons.scss │ │ │ │ │ ├── _list.scss │ │ │ │ │ ├── _path.scss │ │ │ │ │ ├── _pulled.scss │ │ │ │ │ ├── _rotated.scss │ │ │ │ │ ├── _sizes.scss │ │ │ │ │ ├── _spinned.scss │ │ │ │ │ ├── _stacked.scss │ │ │ │ │ ├── _variables.scss │ │ │ │ │ └── material-design-iconic-font.scss │ │ │ ├── material.scss │ │ │ └── variables │ │ │ │ └── _theme-variables.scss │ │ ├── modern.js │ │ └── modern │ │ │ ├── controls │ │ │ └── _controls.scss │ │ │ ├── core │ │ │ ├── _base.scss │ │ │ ├── _core.scss │ │ │ ├── _keylines.scss │ │ │ └── _typography.scss │ │ │ ├── modern.scss │ │ │ └── variables │ │ │ └── _theme-variables.scss │ └── variables │ │ ├── _colors.scss │ │ ├── _media-queries.scss │ │ ├── _spacing.scss │ │ └── _theme-variables.scss ├── svg-icons │ ├── drop-down-arrow.jsx │ ├── navigation-chevron-left.jsx │ ├── navigation-chevron-right.jsx │ ├── navigation-menu.jsx │ ├── svg-icon.jsx │ ├── toggle-check-box-checked.jsx │ ├── toggle-check-box-outline-blank.jsx │ ├── toggle-radio-button-off.jsx │ └── toggle-radio-button-on.jsx ├── transition-groups │ ├── SlideIn.jsx │ └── SlideInChild.jsx └── utils │ ├── CssEvent.jsx │ ├── DateTime.jsx │ ├── Dom.jsx │ ├── Events.jsx │ ├── KeyCode.jsx │ ├── KeyLine.jsx │ ├── UniqueId.jsx │ ├── device.js │ ├── modernizr.custom-old.js │ ├── modernizr.custom.js │ └── prefixer.js └── test ├── protractor-conf.js └── unit ├── AppBar ├── AppBar.test.js ├── AppBarRightToolbar.test.js └── appBar.test.js ├── AutoComplete └── AutoComplete.test.js ├── Button ├── Button.test.js ├── FlatButton.test.js ├── FloatingButton.test.js ├── IconButton.test.js └── RaisedButton.test.js ├── ColorPicker └── ColorPicker.test.js ├── DatePicker ├── Calendar.test.js ├── CalendarMonth.test.js ├── CalendarToolbar.test.js ├── DateDisplay.test.js ├── DatePicker.test.js ├── DatePickerDialog.test.js └── DayButton.test.js ├── Dialog └── Dialog.test.js ├── Drawer └── Drawer.test.js ├── DropDownIcon.test.js ├── Editor ├── ContentHtml.test.js ├── ContentSource.test.js └── EditorToolbar.test.js ├── EnhancedTextarea └── EnhancedTextarea.test.js ├── FontIcon └── FontIcon.test.js ├── Grid ├── Column.test.js ├── Container.test.js └── Row.test.js ├── Grouping └── Chip.test.js ├── Input ├── RichText.test.js └── TextField.test.js ├── List ├── List.test.js ├── ListDivider.test.js ├── ListItem.test.js └── ListItemCheckbox.test.js ├── Menu ├── LinkMenuItem.test.js ├── Menu.test.js ├── MenuItem.test.js ├── NestedMenuItem.test.js └── SubheaderMenuItem.test.js ├── Overlay └── Overlay.test.js ├── Paper └── Paper.test.js ├── Picker ├── DatePicker.test.js ├── RadioButton.test.js ├── RadioPicker.test.js ├── SelectButton.test.js └── SelectField.test.js ├── Popover └── Popover.test.js ├── Progress ├── CircularProgress.test.js ├── LinearProgress.test.js └── Progress.test.js ├── Snackbar └── Snackbar.test.js ├── Tabs ├── Tab.test.js └── Tabs.test.js ├── TextFieldRich └── TextFieldRich.test.js ├── Toggle ├── Checkbox.test.js └── Switch.test.js ├── Toolbar └── Toolbar.test.js ├── Tooltip ├── ToolbarGroup.test.js └── Tooltip.test.js ├── icons └── font │ ├── AccessTimeIcon.test.js │ ├── AccessibilityIcon.test.js │ ├── AccountIcon.test.js │ ├── AddCircleIcon.test.js │ ├── AddIcon.test.js │ ├── AnnouncementIcon.test.js │ ├── AppsIcon.test.js │ ├── ArrowBackIcon.test.js │ ├── ArrowDownIcon.test.js │ ├── ArrowDropDownCircleIcon.test.js │ ├── ArrowDropDownIcon.test.js │ ├── ArrowDropUpIcon.test.js │ ├── ArrowForwardIcon.test.js │ ├── ArrowRightIcon.test.js │ ├── ArrowUpIcon.test.js │ ├── AttachFileIcon.test.js │ ├── AttachmentIcon.test.js │ ├── BoldIcon.test.js │ ├── BorderColorIcon.test.js │ ├── BuildIcon.test.js │ ├── CancelIcon.test.js │ ├── CheckCircleIcon.test.js │ ├── CheckIcon.test.js │ ├── ChevronLeftIcon.test.js │ ├── ChevronRightIcon.test.js │ ├── CloseIcon.test.js │ ├── CodeIcon.test.js │ ├── CommentIcon.test.js │ ├── ContactsIcon.test.js │ ├── ContentPasteIcon.test.js │ ├── CreateIcon.test.js │ ├── DashboardIcon.test.js │ ├── DateRangeIcon.test.js │ ├── DeleteIcon.test.js │ ├── EditIcon.test.js │ ├── EmailIcon.test.js │ ├── ExpandLessIcon.test.js │ ├── ExpandMoreIcon.test.js │ ├── FilterListIcon.test.js │ ├── FindPageIcon.test.js │ ├── FirstPageIcon.test.js │ ├── FlagIcon.test.js │ ├── FullScreenExitIcon.test.js │ ├── FullScreenIcon.test.js │ ├── GroupIcon.test.js │ ├── InboxIcon.test.js │ ├── ItalicIcon.test.js │ ├── LabelIcon.test.js │ ├── LastPageIcon.test.js │ ├── LibraryBooksIcon.test.js │ ├── LinkIcon.test.js │ ├── ListBulletedIcon.test.js │ ├── ListNumberedIcon.test.js │ ├── LocalOfferIcon.test.js │ ├── MenuIcon.test.js │ ├── MergeIcon.test.js │ ├── MoreHorizIcon.test.js │ ├── MoreVertIcon.test.js │ ├── NoteIcon.test.js │ ├── PersonAddIcon.test.js │ ├── PhotoCameraIcon.test.js │ ├── PhotoIcon.test.js │ ├── PrintIcon.test.js │ ├── RefreshIcon.test.js │ ├── SaveIcon.test.js │ ├── SearchIcon.test.js │ ├── SendIcon.test.js │ ├── SettingsApplicationIcon.test.js │ ├── SettingsIcon.test.js │ ├── ShuffleIcon.test.js │ ├── StreetViewIcon.test.js │ ├── StyleIcon.test.js │ ├── SubArrowLeftIcon.test.js │ ├── SubArrowLefticon.test.js │ ├── SubArrowRightIcon.test.js │ ├── SwapHorizIcon.test.js │ ├── TitleIcon.test.js │ ├── TransformIcon.test.js │ ├── UnderlinedIcon.test.js │ ├── ViewListIcon.test.js │ ├── WebIcon.test.js │ └── WorkIcon.test.js ├── ripples ├── CircleRipple.test.js ├── FocusRipple.test.js └── TouchRipple.test.js └── transition-groups ├── SlideIn.test.js └── SlideInChild.test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", 4 | "stage-1", 5 | "react" 6 | ], 7 | "plugins": [ 8 | ["transform-replace-object-assign", "simple-assign"], 9 | "transform-dev-warning", 10 | "add-module-exports", 11 | ["module-resolver", { 12 | "root": ["./src"], 13 | "alias": { 14 | "chamel": "./src" 15 | } 16 | }] 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory" : "vendor" 3 | } -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true, 5 | }, 6 | extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'], 7 | parser: 'babel-eslint', 8 | plugins: ['prettier', 'react'], 9 | rules: { 10 | 'prettier/prettier': 'error', 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:6 2 | 3 | WORKDIR /app 4 | 5 | # Copy over source 6 | COPY ./ . 7 | 8 | # Clean out node_modules in case this is beng run on a dev box 9 | RUN rm -rf node_modules/* 10 | RUN rm -rf build/* 11 | 12 | # Expose ports needed to server http and handle hot reloads in webpack 13 | EXPOSE 8081 14 | EXPOSE 885 15 | EXPOSE 3001 16 | 17 | # Run the server 18 | CMD rm -rf node_modules/* && npm start -------------------------------------------------------------------------------- /demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", 4 | "stage-1", 5 | "react" 6 | ], 7 | "plugins": [ 8 | ["transform-replace-object-assign", "simple-assign"], 9 | "transform-dev-warning", 10 | "add-module-exports", 11 | ["module-resolver", { 12 | "root": ["../src"], 13 | "alias": { 14 | "chamel": "../src", 15 | } 16 | }] 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /demo/CodeBlock.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class CodeBlock extends Component { 4 | 5 | componentDidMount() { 6 | //hljs.highlightBlock(React.findDOMNode(this)); 7 | } 8 | 9 | componentDidUpdate(prevProps, prevState) { 10 | //hljs.highlightBlock(React.findDOMNode(this)); 11 | } 12 | 13 | render() { 14 | return ( 15 | 
16 |                 {this.props.children}
17 |
18 | ); 19 | } 20 | 21 | } 22 | 23 | module.exports = CodeBlock; 24 | -------------------------------------------------------------------------------- /demo/CodeExample.jsx: -------------------------------------------------------------------------------- 1 | var CodeBlock = require('./CodeBlock'), 2 | Paper = require("../src/Paper"); 3 | import React, { Component } from 'react'; 4 | import PropTypes from 'prop-types'; 5 | 6 | class CodeExample extends Component { 7 | 8 | static propTypes = { 9 | code: PropTypes.string.isRequired 10 | } 11 | 12 | render() { 13 | return ( 14 |
15 |
Example
16 |
17 | {this.props.children} 18 |
19 | {this.props.code} 20 |
21 | ); 22 | } 23 | 24 | } 25 | 26 | module.exports = CodeExample; -------------------------------------------------------------------------------- /demo/app/home.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Home extends Component { 4 | render() { 5 | return ( 6 |
7 |

Welcome to Chameleon (aka chamel)!

8 |

This demo application exists to demonstrate the capabilites of each chamel component.

9 |

Simply select a componenet to the left to see it in action...

10 |
11 | ); 12 | } 13 | } 14 | 15 | export default Home; -------------------------------------------------------------------------------- /demo/app/test.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #00A000; 3 | } -------------------------------------------------------------------------------- /demo/controls/AppBarDemo.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Row from 'chamel/Grid/Row'; 3 | import Column from 'chamel/Grid/Column'; 4 | 5 | import AppBarFixedDemo from './AppBar/AppBarFixedDemo'; 6 | 7 | var CodeExample = require('../CodeExample'); 8 | 9 | class AppBarDemo extends Component { 10 | render() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | 21 | module.exports = AppBarDemo; 22 | -------------------------------------------------------------------------------- /demo/controls/DrawerDemo.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | import DrawerLeftTemporary from './drawer/DrawerLeftTemporary'; 3 | import Button from 'chamel/Button'; 4 | import IconButton from 'chamel/Button/IconButton'; 5 | import FontIcon from 'chamel/FontIcon'; 6 | import CloseIcon from 'chamel/icons/font/CloseIcon'; 7 | 8 | class DrawerDemo extends React.Component { 9 | render() { 10 | return ( 11 |
12 |

{'Drawer'}

13 |
14 | 15 |
16 |
17 | ); 18 | } 19 | 20 | _handleClick = e => { 21 | console.log('Clicked', e); 22 | return false; 23 | }; 24 | } 25 | 26 | module.exports = DrawerDemo; 27 | -------------------------------------------------------------------------------- /demo/controls/Grouping/GroupingDemo.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import GroupingChip from '../../../src/Grouping/Chip'; 3 | 4 | 5 | class GroupingDemo extends React.Component { 6 | render() { 7 | return ( 8 |
9 | {"Basic Chip"} 10 | {"Deletable Chip"} 11 |
12 | ); 13 | } 14 | } 15 | 16 | export default GroupingDemo; 17 | -------------------------------------------------------------------------------- /demo/controls/Toggle/CheckboxDemo.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | import Checkbox from 'chamel/Toggle/Checkbox'; 4 | 5 | class CheckboxDemo extends React.Component { 6 | /** 7 | * Class constructor 8 | * 9 | * @param {Object} props Properties to send to the render function 10 | */ 11 | constructor(props) { 12 | // Call paprent constructor 13 | super(props); 14 | 15 | this.state = { 16 | checked: false, 17 | }; 18 | } 19 | 20 | render() { 21 | return ( 22 |
23 | 28 |
29 | ); 30 | } 31 | 32 | _handleChange = (e, checked) => { 33 | this.setState({ checked: checked }); 34 | }; 35 | } 36 | 37 | export default CheckboxDemo; 38 | -------------------------------------------------------------------------------- /demo/controls/Toggle/SwitchDemo.jsx: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | import Switch from 'chamel/Toggle/Switch'; 4 | 5 | class SwitchDemo extends React.Component { 6 | /** 7 | * Class constructor 8 | * 9 | * @param {Object} props Properties to send to the render function 10 | */ 11 | constructor(props) { 12 | // Call paprent constructor 13 | super(props); 14 | 15 | this.state = { 16 | checked: false, 17 | }; 18 | } 19 | 20 | render() { 21 | return ( 22 |
23 | 28 |
29 | ); 30 | } 31 | 32 | _handleChange = (e, checked) => { 33 | this.setState({ checked: checked }); 34 | }; 35 | } 36 | 37 | export default SwitchDemo; 38 | -------------------------------------------------------------------------------- /demo/controls/ToggleDemo.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CheckboxDemo from './Toggle/CheckboxDemo'; 3 | import SwitchDemo from './Toggle/SwitchDemo'; 4 | 5 | class ToggleDemo extends React.Component { 6 | render() { 7 | return ( 8 |
9 |
10 |

{"Toggle Components"}

11 |

{"Checkbox"}

12 | 13 |

{"Switch"}

14 | 15 |
16 |
17 | ); 18 | } 19 | } 20 | 21 | export default ToggleDemo; 22 | -------------------------------------------------------------------------------- /demo/controls/ToolbarDemo.jsx: -------------------------------------------------------------------------------- 1 | var CodeExample = require("../CodeExample"); 2 | import React, { Component } from 'react'; 3 | import PrimaryToolbarDemo from './Toolbar/PrimaryToolBarDemo'; 4 | import SecondaryToolbarDemo from './Toolbar/SecondaryToolbarDemo'; 5 | //var ComponentDoc = require('../../component-doc.jsx'); 6 | 7 | class ToolbarPage extends Component { 8 | 9 | render() { 10 | return ( 11 |
12 |

{"Toolbar"}

13 |

Toolbars are used to present actions and menus that are not in the 14 | main AppBar. 15 |

16 |

{"Primary Toolbar"}

17 | 18 |

{"Secondary Toolbar"}

19 | 20 |
21 | ); 22 | } 23 | 24 | } 25 | 26 | module.exports = ToolbarPage; 27 | -------------------------------------------------------------------------------- /demo/controls/popover/PopoverDemo.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import AppBar from 'chamel/AppBar'; 3 | import { HashRouter, Match, Miss, Link } from 'react-router'; 4 | 5 | var CodeExample = require('../../CodeExample'); 6 | import ExampleSimple from './ExampleSimple'; 7 | 8 | class PopoverDemo extends Component { 9 | render() { 10 | let pathname = this.props.pathname; 11 | 12 | return ( 13 |
14 |
15 | 16 |
17 |
18 | ); 19 | } 20 | } 21 | 22 | module.exports = PopoverDemo; 23 | -------------------------------------------------------------------------------- /dist/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/dist/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /dist/fonts/Material-Design-Iconic-Font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/dist/fonts/Material-Design-Iconic-Font.eot -------------------------------------------------------------------------------- /dist/fonts/Material-Design-Iconic-Font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/dist/fonts/Material-Design-Iconic-Font.ttf -------------------------------------------------------------------------------- /dist/fonts/Material-Design-Iconic-Font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/dist/fonts/Material-Design-Iconic-Font.woff -------------------------------------------------------------------------------- /dist/fonts/Material-Design-Iconic-Font.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/dist/fonts/Material-Design-Iconic-Font.woff2 -------------------------------------------------------------------------------- /dist/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/dist/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/dist/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/dist/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/dist/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3' 2 | 3 | services: 4 | chamel: 5 | build: . 6 | container_name: chamel 7 | ports: 8 | - 8081:8081 9 | volumes: 10 | - .:/var/www/app 11 | -------------------------------------------------------------------------------- /fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /fonts/MaterialIcons-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/fonts/MaterialIcons-Regular.eot -------------------------------------------------------------------------------- /fonts/MaterialIcons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/fonts/MaterialIcons-Regular.ttf -------------------------------------------------------------------------------- /fonts/MaterialIcons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/fonts/MaterialIcons-Regular.woff -------------------------------------------------------------------------------- /fonts/MaterialIcons-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/fonts/MaterialIcons-Regular.woff2 -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 100, 3 | singleQuote: true, 4 | trailingComma: 'all', 5 | bracketSpacing: true, 6 | jsxBracketSameLine: false, 7 | parser: 'babylon', 8 | semi: true, 9 | }; 10 | -------------------------------------------------------------------------------- /src/AppBar/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './AppBar'; 2 | -------------------------------------------------------------------------------- /src/AppBar/theme-human.scss: -------------------------------------------------------------------------------- 1 | .chamel-app-bar { 2 | 3 | .chamel-app-bar-title { 4 | float: none; 5 | text-align: center; 6 | margin-left: 100px; 7 | margin-right: 100px; 8 | } 9 | } -------------------------------------------------------------------------------- /src/AutoComplete/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './AutoComplete'; -------------------------------------------------------------------------------- /src/Button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './Button'; 2 | 3 | export default Button; 4 | export { Button }; 5 | export { IconButton } from './IconButton'; 6 | export { RaisedButton } from './RaisedButton'; 7 | export { FlatButton } from './FlatButton'; 8 | export { FloatingButton } from './FloatingButton'; 9 | -------------------------------------------------------------------------------- /src/Button/theme-human.scss: -------------------------------------------------------------------------------- 1 | @import "../styles/variables/colors"; 2 | @import "../styles/variables/theme-variables"; 3 | 4 | .button { 5 | &:hover { 6 | } 7 | .flat { 8 | } 9 | } -------------------------------------------------------------------------------- /src/ColorPicker/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './ColorPicker'; 2 | -------------------------------------------------------------------------------- /src/DatePicker/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './DatePicker'; 2 | -------------------------------------------------------------------------------- /src/Dialog/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Dialog'; 2 | -------------------------------------------------------------------------------- /src/Drawer/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Drawer'; 2 | -------------------------------------------------------------------------------- /src/Drawer/theme-material.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/src/Drawer/theme-material.scss -------------------------------------------------------------------------------- /src/Drawer/theme.scss: -------------------------------------------------------------------------------- 1 | @import "../styles/variables/colors"; 2 | @import "../styles/variables/spacing"; 3 | @import "../styles/variables/theme-variables"; 4 | @import "../styles/mixins/transitions"; 5 | 6 | .drawer { 7 | overflow: auto; 8 | height: 100%; 9 | width: $left-nav-width; 10 | background-color: $left-nav-color; 11 | 12 | } 13 | 14 | .drawerClipped { 15 | position: fixed; 16 | z-index: 200; 17 | } 18 | 19 | .drawerFloating { 20 | left: 0; 21 | top: 0; 22 | position: fixed; 23 | z-index: 200; 24 | @include ease-out(); 25 | } 26 | 27 | .drawerPermanent { 28 | 29 | } 30 | 31 | .drawerTransparent { 32 | background-color: transparent; 33 | } 34 | 35 | .drawerClosed { 36 | @include transform(translate3d((-1 * $left-nav-width) - 10px, 0, 0)); 37 | } -------------------------------------------------------------------------------- /src/Editor/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Editor'; 2 | -------------------------------------------------------------------------------- /src/Editor/theme-material.scss: -------------------------------------------------------------------------------- 1 | @import "./theme"; 2 | 3 | -------------------------------------------------------------------------------- /src/Editor/theme.scss: -------------------------------------------------------------------------------- 1 | /* Main container for the editor */ 2 | .richTextContainer { 3 | background: transparent; 4 | border: 0; 5 | padding: 0; 6 | } 7 | -------------------------------------------------------------------------------- /src/EnhancedTextarea/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './EnhancedTextarea'; 2 | -------------------------------------------------------------------------------- /src/FontIcon/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './FontIcon'; 2 | -------------------------------------------------------------------------------- /src/Grid/Row.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import ThemeService from '../styles/ChamelThemeService'; 4 | 5 | /** 6 | * Grid row 7 | * 8 | * @param props 9 | * @param context 10 | * @returns {ReactDOM} 11 | * @constructor 12 | */ 13 | const Row = (props, context) => { 14 | let theme = 15 | context.chamelTheme && context.chamelTheme.grid 16 | ? context.chamelTheme.grid 17 | : ThemeService.defaultTheme.grid; 18 | 19 | return
{props.children}
; 20 | }; 21 | 22 | /** 23 | * Set accepted properties 24 | */ 25 | Row.propTypes = { 26 | children: PropTypes.node, 27 | }; 28 | 29 | /** 30 | * An alternate theme may be passed down by a provider 31 | */ 32 | Row.contextTypes = { 33 | chamelTheme: PropTypes.object, 34 | }; 35 | 36 | export default Row; 37 | -------------------------------------------------------------------------------- /src/Grid/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/src/Grid/index.js -------------------------------------------------------------------------------- /src/Grouping/theme-material.scss: -------------------------------------------------------------------------------- 1 | @import "../styles/variables/colors"; 2 | @import "../styles/variables/spacing"; 3 | @import "../styles/variables/media-queries"; 4 | @import "../styles/variables/theme-variables"; 5 | @import "../styles/core/typography"; 6 | 7 | .chip { 8 | background-color: $chip-background-color; 9 | border-radius: 5px; 10 | margin: 5px; 11 | overflow: hidden; 12 | position: relative; 13 | min-height: 25px; 14 | display: inline-block; 15 | 16 | .chipChildren { 17 | font-size: $chip-font-size; 18 | color: $chip-text-color; 19 | vertical-align: middle; 20 | text-overflow: ellipsis; 21 | white-space: nowrap; 22 | padding: 5px; 23 | display: inline-block; 24 | } 25 | 26 | .deletable { 27 | margin-left: 5px; 28 | cursor: pointer; 29 | padding-right: 5px; 30 | } 31 | } -------------------------------------------------------------------------------- /src/Input/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './TextField'; 2 | -------------------------------------------------------------------------------- /src/List/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './List'; 2 | -------------------------------------------------------------------------------- /src/Menu/SubheaderMenuItem.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import ThemeService from '../styles/ChamelThemeService'; 4 | 5 | const SubheaderMenuItem = (props, context) => { 6 | const theme = 7 | context.chamelTheme && context.chamelTheme.menu 8 | ? context.chamelTheme.menu 9 | : ThemeService.defaultTheme.menu; 10 | 11 | return ( 12 |
13 | {props.text} 14 |
15 | ); 16 | }; 17 | 18 | SubheaderMenuItem.propTypes = { 19 | index: PropTypes.number.isRequired, 20 | text: PropTypes.string.isRequired, 21 | }; 22 | 23 | export default SubheaderMenuItem; 24 | -------------------------------------------------------------------------------- /src/Menu/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Menu'; 2 | -------------------------------------------------------------------------------- /src/Overlay/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Overlay'; 2 | -------------------------------------------------------------------------------- /src/Overlay/theme.scss: -------------------------------------------------------------------------------- 1 | @import "../styles/mixins/transitions"; 2 | @import "../styles/variables/colors"; 3 | 4 | .overlay { 5 | position: fixed; 6 | height: 100%; 7 | width: 100%; 8 | z-index: 9; 9 | top: 0px; 10 | 11 | left: -100%; 12 | background-color: rgba(0, 0, 0, 0); 13 | @include transform(transition(left 0ms $ease-out-function 400ms, background-color 400ms $ease-out-function 0ms)); 14 | } 15 | 16 | .overlayVisible { 17 | left: 0px; 18 | background-color: $light-black; 19 | @include transform(transition(left 0ms $ease-out-function 0ms, background-color 400ms $ease-out-function 0ms)); 20 | } -------------------------------------------------------------------------------- /src/Paper/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Paper'; 2 | -------------------------------------------------------------------------------- /src/Picker/ColorPicker.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/src/Picker/ColorPicker.js -------------------------------------------------------------------------------- /src/Picker/index.js: -------------------------------------------------------------------------------- 1 | export { DatePicker } from './DatePicker'; 2 | export { RadioButton } from './RadioButton'; 3 | export { RadioPicker } from './RadioPicker'; 4 | export { SelectButton } from './SelectButton'; 5 | export { SelectField } from './SelectField'; 6 | -------------------------------------------------------------------------------- /src/Popover/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Popover'; 2 | -------------------------------------------------------------------------------- /src/Popover/theme.scss: -------------------------------------------------------------------------------- 1 | @import "../styles/variables/colors"; 2 | @import "../styles/variables/spacing"; 3 | @import "../styles/variables/theme-variables"; 4 | @import "../styles/mixins/transitions"; 5 | 6 | /** 7 | * Base thee for popover handles hidden or not 8 | */ 9 | .popover { 10 | 11 | * {@include ease-out(); } 12 | 13 | min-width: 10px; 14 | opacity: 0; 15 | display: none; 16 | 17 | &.popoverVisible { 18 | opacity: 1; 19 | z-index: 99; 20 | display: block; 21 | } 22 | &.pushToLeft{ 23 | left: -160px !important; 24 | top: -13px !important; 25 | } 26 | &.addScrollBar { 27 | overflow: auto; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/Progress/CircularProgress.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import ThemeService from '../styles/ChamelThemeService'; 4 | import prefixer from '../utils/prefixer.js'; 5 | import classnames from 'classnames'; 6 | import Progress from './Progress'; 7 | 8 | const CircularProgress = (props, context) => { 9 | return ; 10 | }; 11 | 12 | CircularProgress.PropTypes = { 13 | buffer: PropTypes.number, 14 | className: PropTypes.string, 15 | disabled: PropTypes.bool, 16 | max: PropTypes.number, 17 | min: PropTypes.number, 18 | mode: PropTypes.oneOf(['determinate', 'indeterminate']), 19 | multicolor: PropTypes.bool, 20 | value: PropTypes.number, 21 | }; 22 | 23 | export default CircularProgress; 24 | -------------------------------------------------------------------------------- /src/Progress/LinearProgress.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import ThemeService from '../styles/ChamelThemeService'; 4 | import prefixer from '../utils/prefixer.js'; 5 | import Progress from './Progress'; 6 | 7 | const LinearProgress = (props, context) => { 8 | return ; 9 | }; 10 | 11 | LinearProgress.PropTypes = { 12 | buffer: PropTypes.number, 13 | className: PropTypes.string, 14 | disabled: PropTypes.bool, 15 | max: PropTypes.number, 16 | min: PropTypes.number, 17 | mode: PropTypes.oneOf(['determinate', 'indeterminate']), 18 | multicolor: PropTypes.bool, 19 | value: PropTypes.number, 20 | }; 21 | 22 | export default LinearProgress; 23 | -------------------------------------------------------------------------------- /src/Progress/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './LinearProgress'; 2 | -------------------------------------------------------------------------------- /src/RadioButton/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './RadioButton'; 2 | -------------------------------------------------------------------------------- /src/RadioButtonGroup/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './RadioButtonGroup'; 2 | -------------------------------------------------------------------------------- /src/Snackbar/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Snackbar'; 2 | -------------------------------------------------------------------------------- /src/Table/TableHeader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const TableHeader = props => { 5 | let children = [], 6 | headerItem, 7 | itemComponent; 8 | 9 | for (let i = 0; i < props.headerItems.length; i++) { 10 | headerItem = props.headerItems[i]; 11 | 12 | itemComponent = ( 13 |
14 | {headerItem.text} 15 |
16 | ); 17 | 18 | children.push(itemComponent); 19 | } 20 | 21 | return ( 22 |
23 | {children} 24 |
(Pagify)
25 |
26 | ); 27 | }; 28 | 29 | TableHeader.propTypes = { 30 | headerItems: PropTypes.array.isRequired, 31 | }; 32 | 33 | export default TableHeader; 34 | -------------------------------------------------------------------------------- /src/Table/TableRows.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import TableRowsItem from './TableRowsItem'; 4 | 5 | const TableRow = props => { 6 | let children = [], 7 | rowItem, 8 | itemComponent; 9 | 10 | for (let i = 0; i < props.rowItems.length; i++) { 11 | rowItem = props.rowItems[i]; 12 | 13 | itemComponent = ; 14 | 15 | children.push(itemComponent); 16 | } 17 | 18 | return
{children}
; 19 | }; 20 | 21 | TableRow.propTypes = { 22 | rowItems: PropTypes.array.isRequired, 23 | }; 24 | 25 | export default TableRow; 26 | -------------------------------------------------------------------------------- /src/Table/TableRowsItem.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const TableRowItem = props => { 4 | return ( 5 |
6 | (TableRowItem) 7 |
(Actions)
8 |
9 | ); 10 | }; 11 | 12 | export default TableRowItem; 13 | -------------------------------------------------------------------------------- /src/Tabs/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Tabs'; 2 | -------------------------------------------------------------------------------- /src/TextFieldRich/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './TextFieldRich'; 2 | -------------------------------------------------------------------------------- /src/Toolbar/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Toolbar'; 2 | -------------------------------------------------------------------------------- /src/Tooltip/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Tooltip'; 2 | -------------------------------------------------------------------------------- /src/icons/font/AddIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | /** 7 | * Add button 8 | * 9 | * @param props 10 | * @param context 11 | * @returns {ReactDOM} 12 | * @constructor 13 | */ 14 | const AddIcon = (props, context) => { 15 | let theme = 16 | context.chamelTheme && context.chamelTheme.fontIcon 17 | ? context.chamelTheme.fontIcon 18 | : ThemeService.defaultTheme.fontIcon; 19 | 20 | return ( 21 | 22 | {'add'} 23 | 24 | ); 25 | }; 26 | 27 | /** 28 | * An alternate theme may be passed down by a provider 29 | */ 30 | AddIcon.contextTypes = { 31 | chamelTheme: PropTypes.object, 32 | }; 33 | 34 | export default AddIcon; 35 | -------------------------------------------------------------------------------- /src/icons/font/AppsIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const AppsIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'apps'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | AppsIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default AppsIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/ArrowBackIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const ArrowBackIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'arrow_back'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | ArrowBackIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default ArrowBackIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/ArrowDownIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const ArrowDownIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'arrow_downward'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | ArrowDownIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default ArrowDownIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/ArrowDropDownCircleIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const ArrowDropDownCircleIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'arrow_drop_down_circle'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | ArrowDropDownCircleIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default ArrowDropDownCircleIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/ArrowDropDownIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const ArrowDropDownIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'arrow_drop_down'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | ArrowDropDownIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default ArrowDropDownIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/ArrowDropUpIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const ArrowDropUpIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'arrow_drop_up'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | ArrowDropUpIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default ArrowDropUpIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/ArrowForwardIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const ArrowForwardIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'arrow_forward'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | ArrowForwardIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default ArrowForwardIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/ArrowRightIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const ArrowRightIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'keyboard_arrow_right'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | ArrowRightIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default ArrowRightIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/ArrowUpIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const ArrowUpIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'arrow_upward'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | ArrowUpIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default ArrowUpIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/CancelIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const CancelIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'cancel'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | CancelIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default CancelIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/CheckIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const CheckIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'check'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | CheckIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default CheckIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/ChevronLeftIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const ChevronLeftIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'chevron_left'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | ChevronLeftIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default ChevronLeftIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/ChevronRightIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const ChevronRightIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'chevron_right'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | ChevronRightIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default ChevronRightIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/ExpandLessIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const ExpandLessIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'expand_less'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | ExpandLessIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default ExpandLessIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/ExpandMoreIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const ExpandMoreIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'expand_more'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | ExpandMoreIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default ExpandMoreIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/FirstPageIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const FirstPageIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'first_page'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | FirstPageIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default FirstPageIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/FullScreenExitIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const FullScreenExitIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'fullscreen_exit'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | FullScreenExitIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default FullScreenExitIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/FullScreenIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const FullScreenIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'fullscreen'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | FullScreenIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default FullScreenIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/LastPageIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const LastPageIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'last_page'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | LastPageIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default LastPageIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/MenuIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const MenuIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'menu'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | MenuIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default MenuIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/MoreHorizIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const MoreHorizIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'more_horiz'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | MoreHorizIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default MoreHorizIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/MoreVertIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const MoreVertIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'more_vert'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | MoreVertIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default MoreVertIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/RefreshIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const RefreshIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'refresh'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | RefreshIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default RefreshIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/SubArrowLeftIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const SubArrowLeftIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'subdirectory_arrow_left'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | SubArrowLeftIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default SubArrowLeftIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/SubArrowRightIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | const SubArrowRightIcon = (props, context) => { 7 | let theme = 8 | context.chamelTheme && context.chamelTheme.fontIcon 9 | ? context.chamelTheme.fontIcon 10 | : ThemeService.defaultTheme.fontIcon; 11 | 12 | return ( 13 | 14 | {'subdirectory_arrow_right'} 15 | 16 | ); 17 | }; 18 | 19 | /** 20 | * An alternate theme may be passed down by a provider 21 | */ 22 | SubArrowRightIcon.contextTypes = { 23 | chamelTheme: PropTypes.object, 24 | }; 25 | 26 | export default SubArrowRightIcon; 27 | -------------------------------------------------------------------------------- /src/icons/font/WebIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import FontIcon from '../../FontIcon'; 4 | import ThemeService from '../../styles/ChamelThemeService'; 5 | 6 | /** 7 | * Web Icon button 8 | * 9 | * @param props 10 | * @param context 11 | * @returns {ReactDOM} 12 | * @constructor 13 | */ 14 | const WebIcon = (props, context) => { 15 | let theme = 16 | context.chamelTheme && context.chamelTheme.fontIcon 17 | ? context.chamelTheme.fontIcon 18 | : ThemeService.defaultTheme.fontIcon; 19 | 20 | return ( 21 | 22 | {'web'} 23 | 24 | ); 25 | }; 26 | 27 | /** 28 | * An alternate theme may be passed down by a provider 29 | */ 30 | WebIcon.contextTypes = { 31 | chamelTheme: PropTypes.object, 32 | }; 33 | 34 | export default WebIcon; 35 | -------------------------------------------------------------------------------- /src/icons/font/font-awesome/_bordered-pulled.scss: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em $fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .#{$fa-css-prefix}-pull-left { float: left; } 11 | .#{$fa-css-prefix}-pull-right { float: right; } 12 | 13 | .#{$fa-css-prefix} { 14 | &.#{$fa-css-prefix}-pull-left { margin-right: .3em; } 15 | &.#{$fa-css-prefix}-pull-right { margin-left: .3em; } 16 | } 17 | 18 | /* Deprecated as of 4.4.0 */ 19 | .pull-right { float: right; } 20 | .pull-left { float: left; } 21 | 22 | .#{$fa-css-prefix} { 23 | &.pull-left { margin-right: .3em; } 24 | &.pull-right { margin-left: .3em; } 25 | } 26 | -------------------------------------------------------------------------------- /src/icons/font/font-awesome/_core.scss: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/icons/font/font-awesome/_fixed-width.scss: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .#{$fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /src/icons/font/font-awesome/_larger.scss: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .#{$fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .#{$fa-css-prefix}-2x { font-size: 2em; } 11 | .#{$fa-css-prefix}-3x { font-size: 3em; } 12 | .#{$fa-css-prefix}-4x { font-size: 4em; } 13 | .#{$fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /src/icons/font/font-awesome/_list.scss: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: $fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .#{$fa-css-prefix}-li { 11 | position: absolute; 12 | left: -$fa-li-width; 13 | width: $fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.#{$fa-css-prefix}-lg { 17 | left: -$fa-li-width + (4em / 14); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/icons/font/font-awesome/_path.scss: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); 7 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), 8 | url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), 9 | url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), 10 | url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), 11 | url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); 12 | // src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | -------------------------------------------------------------------------------- /src/icons/font/font-awesome/_rotated-flipped.scss: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } 5 | .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } 6 | .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } 7 | 8 | .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } 9 | .#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .#{$fa-css-prefix}-rotate-90, 15 | :root .#{$fa-css-prefix}-rotate-180, 16 | :root .#{$fa-css-prefix}-rotate-270, 17 | :root .#{$fa-css-prefix}-flip-horizontal, 18 | :root .#{$fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /src/icons/font/font-awesome/_stacked.scss: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .#{$fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .#{$fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .#{$fa-css-prefix}-inverse { color: $fa-inverse; } 21 | -------------------------------------------------------------------------------- /src/icons/font/font-awesome/font-awesome.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables"; 7 | @import "mixins"; 8 | @import "path"; 9 | @import "core"; 10 | @import "larger"; 11 | @import "fixed-width"; 12 | @import "list"; 13 | @import "bordered-pulled"; 14 | @import "animated"; 15 | @import "rotated-flipped"; 16 | @import "stacked"; 17 | @import "icons"; 18 | -------------------------------------------------------------------------------- /src/icons/font/font-material/MaterialIcons-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/src/icons/font/font-material/MaterialIcons-Regular.eot -------------------------------------------------------------------------------- /src/icons/font/font-material/MaterialIcons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/src/icons/font/font-material/MaterialIcons-Regular.ttf -------------------------------------------------------------------------------- /src/icons/font/font-material/MaterialIcons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/src/icons/font/font-material/MaterialIcons-Regular.woff -------------------------------------------------------------------------------- /src/icons/font/font-material/MaterialIcons-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/src/icons/font/font-material/MaterialIcons-Regular.woff2 -------------------------------------------------------------------------------- /src/icons/svg/human.js: -------------------------------------------------------------------------------- 1 | import base from './base'; 2 | 3 | // This is where we will override any base icons here - ideally all of them! 4 | export default { 5 | ...base 6 | } -------------------------------------------------------------------------------- /src/icons/svg/material.js: -------------------------------------------------------------------------------- 1 | import base from './base'; 2 | 3 | // This is where we will override any base icons here - ideally all of them! 4 | export default { 5 | ...base 6 | } -------------------------------------------------------------------------------- /src/icons/svg/modern.js: -------------------------------------------------------------------------------- 1 | import base from './base'; 2 | 3 | // This is where we will override any base icons here - ideally all of them! 4 | export default { 5 | ...base 6 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import chamel from './main'; 2 | 3 | export default chamel; 4 | -------------------------------------------------------------------------------- /src/mixins/CustomEventTrigger.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Handle triggering custom events and bubbling them up 3 | * 4 | */ 5 | 6 | /** 7 | * Handle triggering custom events 8 | */ 9 | const CustomEventTrigger = { 10 | /** 11 | * Trigger a custom event 12 | * 13 | * @param {string} type The name of the event type 14 | * @param {Object} opt_data Optional data to send to the event 15 | * @param {bool} bubble If true (default) then bubble up to parent 16 | */ 17 | triggerCustomEvent: function(type, opt_data, bubble) { 18 | const evtData = opt_data || {}; 19 | if (this.props.eventsObj) { 20 | alib.events.triggerEvent(this.props.eventsObj, type, evtData); 21 | } else { 22 | throw 'An eventsObj has not been passed by the parent of this componenet.'; 23 | } 24 | }, 25 | }; 26 | 27 | export default CustomEventTrigger; 28 | -------------------------------------------------------------------------------- /src/mixins/WindowListenable.jsx: -------------------------------------------------------------------------------- 1 | import Events from '../utils/Events'; 2 | 3 | module.exports = { 4 | componentDidMount: function() { 5 | const listeners = this.windowListeners; 6 | 7 | for (let eventName in listeners) { 8 | const callbackName = listeners[eventName]; 9 | Events.on(window, eventName, this[callbackName]); 10 | } 11 | }, 12 | 13 | componentWillUnmount: function() { 14 | const listeners = this.windowListeners; 15 | 16 | for (let eventName in listeners) { 17 | const callbackName = listeners[eventName]; 18 | Events.off(window, eventName, this[callbackName]); 19 | } 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /src/ripples/theme.scss: -------------------------------------------------------------------------------- 1 | .rippleFocus { 2 | } 3 | 4 | .rippleFocusInner { 5 | } 6 | 7 | .rippleShown { 8 | } 9 | 10 | .rippleTouch { 11 | } -------------------------------------------------------------------------------- /src/styles/ChamelThemeProvider.js: -------------------------------------------------------------------------------- 1 | import {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | class ChamelThemeProvider extends Component { 5 | 6 | static propTypes = { 7 | children: PropTypes.element, 8 | chamelTheme: PropTypes.object.isRequired, 9 | }; 10 | 11 | static childContextTypes = { 12 | chamelTheme: PropTypes.object, 13 | }; 14 | 15 | getChildContext() { 16 | return { 17 | chamelTheme: this.props.chamelTheme, 18 | }; 19 | } 20 | 21 | render() { 22 | return this.props.children; 23 | } 24 | } 25 | 26 | export default ChamelThemeProvider; -------------------------------------------------------------------------------- /src/styles/ChamelThemeService.js: -------------------------------------------------------------------------------- 1 | import baseTheme from './theme/base'; 2 | 3 | /** 4 | * Global object for setting and getting a default theme 5 | */ 6 | const ChamelThemeService = { 7 | defaultTheme: baseTheme 8 | } 9 | 10 | export default ChamelThemeService; -------------------------------------------------------------------------------- /src/styles/components/_card.scss: -------------------------------------------------------------------------------- 1 | .chamel-card { 2 | $card-padding: 24px; 3 | 4 | background-color: $white; 5 | padding: $card-padding; 6 | 7 | .chamel-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 %cml-font-style-menu; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/styles/components/_colorpicker.scss: -------------------------------------------------------------------------------- 1 | .chamel-color-picker { 2 | position: absolute; 3 | margin-top: 55px; 4 | display: none; 5 | background-color: #f0f0f0; 6 | 7 | .chamel-color-picker-close { 8 | float: right; 9 | margin-top: -25px; 10 | } 11 | 12 | .chamel-color-picker-label { 13 | font-size: 20px; 14 | } 15 | } -------------------------------------------------------------------------------- /src/styles/components/_dialog-window.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/src/styles/components/_dialog-window.scss -------------------------------------------------------------------------------- /src/styles/components/_editor.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skystebnicki/chamel/e5981d7f714752bd76f715dea6d0428028ffbe5e/src/styles/components/_editor.scss -------------------------------------------------------------------------------- /src/styles/components/_enhanced-button.scss: -------------------------------------------------------------------------------- 1 | .chamel-enhanced-button { 2 | 3 | border: 0; 4 | background: none; 5 | 6 | &:focus { 7 | outline: none; 8 | } 9 | 10 | &.chamel-is-link-button { 11 | display: inline-block; 12 | cursor: pointer; 13 | text-decoration: none; 14 | 15 | &:hover { 16 | text-decoration: none; 17 | } 18 | 19 | &.chamel-is-disabled { 20 | cursor: default; 21 | } 22 | } 23 | 24 | } -------------------------------------------------------------------------------- /src/styles/components/_enhanced-textarea.scss: -------------------------------------------------------------------------------- 1 | .chamel-enhanced-textarea { 2 | .chamel-enhanced-textarea-shadow, 3 | .chamel-enhanced-textarea-input { 4 | width: 100%; 5 | resize: none; 6 | } 7 | 8 | .chamel-enhanced-textarea-input { 9 | overflow: hidden; 10 | } 11 | 12 | .chamel-enhanced-textarea-shadow { 13 | @include transform(scale(0)); 14 | position: absolute; 15 | } 16 | } -------------------------------------------------------------------------------- /src/styles/components/_font-icon.scss: -------------------------------------------------------------------------------- 1 | .chamel-font-icon { 2 | position: relative; 3 | font-size: $icon-size; 4 | width: $icon-size; 5 | display: inline-block; 6 | user-select: none; 7 | } -------------------------------------------------------------------------------- /src/styles/components/_icon.scss: -------------------------------------------------------------------------------- 1 | .chamel-icon { 2 | 3 | position: relative; 4 | font-size: $icon-size; 5 | display: inline-block; 6 | 7 | //To fix text selection on double click 8 | user-select: none; 9 | } -------------------------------------------------------------------------------- /src/styles/components/_ink-bar.scss: -------------------------------------------------------------------------------- 1 | .chamel-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 | } -------------------------------------------------------------------------------- /src/styles/components/_overlay.scss: -------------------------------------------------------------------------------- 1 | .chamel-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 | @include transform(transition(left 0ms $ease-out-function 400ms, background-color 400ms $ease-out-function 0ms)); 11 | 12 | &.chamel-is-shown { 13 | left: 0px; 14 | background-color: $light-black; 15 | @include transform(transition(left 0ms $ease-out-function 0ms, background-color 400ms $ease-out-function 0ms)); 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/components/_popover.scss: -------------------------------------------------------------------------------- 1 | .chamel-popover { 2 | 3 | * {@include ease-out(); } 4 | 5 | position: absolute; 6 | min-width: 10px; 7 | opacity: 0; 8 | display: none; 9 | 10 | &.chamel-popover-visible { 11 | opacity: 1; 12 | z-index: 99; 13 | display: block; 14 | } 15 | 16 | .autocomplete-menu { 17 | margin-top: 40px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/styles/components/_svg-icon.scss: -------------------------------------------------------------------------------- 1 | .chamel-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 | } -------------------------------------------------------------------------------- /src/styles/components/_table.scss: -------------------------------------------------------------------------------- 1 | $column-width: 200px; 2 | 3 | .chamel-table { 4 | padding: 0 $desktop-gutter; 5 | 6 | .chamel-table-header { 7 | 8 | .chamel-table-header-column { 9 | display: inline-block; 10 | height: 48px; 11 | line-height: 48px; 12 | width: $column-width; 13 | } 14 | 15 | .chamel-table-header-pagify { 16 | display: inline-block; 17 | height: 48px; 18 | line-height: 48px; 19 | float: right; 20 | } 21 | } 22 | 23 | .chamel-table-rows { 24 | 25 | .chamel-table-rows-item { 26 | height: 48px; 27 | line-height: 48px; 28 | display: block; 29 | width: 100%; 30 | } 31 | 32 | .chamel-table-rows-actions { 33 | height: 48px; 34 | line-height: 48px; 35 | display: inline-block; 36 | float: right; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/styles/components/_text-field-rich.scss: -------------------------------------------------------------------------------- 1 | .chamel-text-field-rich { 2 | iframe { 3 | border: 0; 4 | } 5 | } -------------------------------------------------------------------------------- /src/styles/components/date-picker/_calendar-month.scss: -------------------------------------------------------------------------------- 1 | .chamel-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 | .chamel-date-picker-calendar-month-week { 9 | @include clearfix(); 10 | } 11 | } -------------------------------------------------------------------------------- /src/styles/components/date-picker/_calendar-toolbar.scss: -------------------------------------------------------------------------------- 1 | .chamel-date-picker-calendar-toolbar { 2 | height: 48px; 3 | position: relative; 4 | 5 | .chamel-date-picker-calendar-toolbar-title { 6 | line-height: 48px; 7 | font-size: 14px; 8 | text-align: center; 9 | @extend %cml-font-weight-medium; 10 | } 11 | 12 | .chamel-date-picker-calendar-toolbar-button-left { 13 | position: absolute; 14 | left: 0; 15 | top: 0; 16 | } 17 | 18 | .chamel-date-picker-calendar-toolbar-button-right { 19 | position: absolute; 20 | right: 0; 21 | top: 0; 22 | } 23 | } -------------------------------------------------------------------------------- /src/styles/components/date-picker/_date-picker-dialog.scss: -------------------------------------------------------------------------------- 1 | .chamel-date-picker-dialog { 2 | font-size: 14px; 3 | color: $date-picker-calendar-text-color; 4 | 5 | .chamel-dialog-window { 6 | width: 280px !important; 7 | .chamel-dialog-window-body { 8 | margin: 0 !important; 9 | } 10 | } 11 | } 12 | 13 | .chamel-is-landscape { 14 | .chamel-dialog-window { 15 | width: 560px !important; 16 | } 17 | } -------------------------------------------------------------------------------- /src/styles/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 | .chamel-date-picker { 9 | } -------------------------------------------------------------------------------- /src/styles/components/ripples/_circle.scss: -------------------------------------------------------------------------------- 1 | .chamel-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 | .chamel-ripple-circle-inner { 11 | height: 100%; 12 | width: 100%; 13 | border-radius: 50%; 14 | @include transform(scale(0)); 15 | background-color: rgba(0,0,0,0.2); 16 | @include ease-out($property: transform, $duration: 1s); 17 | } 18 | 19 | &.chamel-is-started { 20 | opacity: 1; 21 | 22 | .chamel-ripple-circle-inner { 23 | @include transform(scale(1)); 24 | } 25 | } 26 | 27 | &.chamel-is-ending { 28 | opacity: 0; 29 | } 30 | 31 | } -------------------------------------------------------------------------------- /src/styles/components/ripples/_focus-ripple.scss: -------------------------------------------------------------------------------- 1 | .chamel-focus-ripple { 2 | position: absolute; 3 | height: 100%; 4 | width: 100%; 5 | top: 0; 6 | left: 0; 7 | 8 | @include ease-out(); 9 | @include transform(scale(0)); 10 | opacity: 0; 11 | 12 | .chamel-focus-ripple-inner { 13 | position: absolute; 14 | height: 100%; 15 | width: 100%; 16 | border-radius: 50%; 17 | background-color: rgba(0,0,0,0.1); 18 | 19 | @include pulsate( 20 | $animation-name: "focus-ripple-pulsate", 21 | $start-size: 0.75, 22 | $end-size: 0.85 23 | ); 24 | 25 | } 26 | 27 | &.chamel-is-shown { 28 | @include transform(scale(1)); 29 | opacity: 1; 30 | } 31 | } -------------------------------------------------------------------------------- /src/styles/components/ripples/_touch-ripple.scss: -------------------------------------------------------------------------------- 1 | @import "circle"; 2 | 3 | .chamel-touch-ripple { 4 | height: 100%; 5 | width: 100%; 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | } -------------------------------------------------------------------------------- /src/styles/components/transition-groups/_fon-icon.scss: -------------------------------------------------------------------------------- 1 | .chamel-font-icon { 2 | position: relative; 3 | font-size: $icon-size; 4 | display: inline-block; 5 | user-select: none; 6 | } -------------------------------------------------------------------------------- /src/styles/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 | html { 18 | -webkit-font-smoothing: antialiased; 19 | color: $body-text-color; 20 | font-family: $contentFontFamily; 21 | background-color: $canvas-color; 22 | } 23 | 24 | .chamel-clear { 25 | clear: both; 26 | } 27 | -------------------------------------------------------------------------------- /src/styles/core/_core.scss: -------------------------------------------------------------------------------- 1 | @import "base"; 2 | @import "typography"; 3 | -------------------------------------------------------------------------------- /src/styles/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 | -------------------------------------------------------------------------------- /src/styles/icons/font-awesome/_bordered-pulled.scss: -------------------------------------------------------------------------------- 1 | // Bordered & Pulled 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-border { 5 | padding: .2em .25em .15em; 6 | border: solid .08em $fa-border-color; 7 | border-radius: .1em; 8 | } 9 | 10 | .#{$fa-css-prefix}-pull-left { float: left; } 11 | .#{$fa-css-prefix}-pull-right { float: right; } 12 | 13 | .#{$fa-css-prefix} { 14 | &.#{$fa-css-prefix}-pull-left { margin-right: .3em; } 15 | &.#{$fa-css-prefix}-pull-right { margin-left: .3em; } 16 | } 17 | 18 | /* Deprecated as of 4.4.0 */ 19 | .pull-right { float: right; } 20 | .pull-left { float: left; } 21 | 22 | .#{$fa-css-prefix} { 23 | &.pull-left { margin-right: .3em; } 24 | &.pull-right { margin-left: .3em; } 25 | } 26 | -------------------------------------------------------------------------------- /src/styles/icons/font-awesome/_core.scss: -------------------------------------------------------------------------------- 1 | // Base Class Definition 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix} { 5 | display: inline-block; 6 | font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration 7 | font-size: inherit; // can't have font-size inherit on line above, so need to override 8 | text-rendering: auto; // optimizelegibility throws things off #1094 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | -------------------------------------------------------------------------------- /src/styles/icons/font-awesome/_fixed-width.scss: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | .#{$fa-css-prefix}-fw { 4 | width: (18em / 14); 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /src/styles/icons/font-awesome/_larger.scss: -------------------------------------------------------------------------------- 1 | // Icon Sizes 2 | // ------------------------- 3 | 4 | /* makes the font 33% larger relative to the icon container */ 5 | .#{$fa-css-prefix}-lg { 6 | font-size: (4em / 3); 7 | line-height: (3em / 4); 8 | vertical-align: -15%; 9 | } 10 | .#{$fa-css-prefix}-2x { font-size: 2em; } 11 | .#{$fa-css-prefix}-3x { font-size: 3em; } 12 | .#{$fa-css-prefix}-4x { font-size: 4em; } 13 | .#{$fa-css-prefix}-5x { font-size: 5em; } 14 | -------------------------------------------------------------------------------- /src/styles/icons/font-awesome/_list.scss: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: $fa-li-width; 7 | list-style-type: none; 8 | > li { position: relative; } 9 | } 10 | .#{$fa-css-prefix}-li { 11 | position: absolute; 12 | left: -$fa-li-width; 13 | width: $fa-li-width; 14 | top: (2em / 14); 15 | text-align: center; 16 | &.#{$fa-css-prefix}-lg { 17 | left: -$fa-li-width + (4em / 14); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/styles/icons/font-awesome/_path.scss: -------------------------------------------------------------------------------- 1 | /* FONT PATH 2 | * -------------------------- */ 3 | 4 | @font-face { 5 | font-family: 'FontAwesome'; 6 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); 7 | src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), 8 | url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), 9 | url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), 10 | url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), 11 | url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); 12 | // src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | -------------------------------------------------------------------------------- /src/styles/icons/font-awesome/_rotated-flipped.scss: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } 5 | .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } 6 | .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } 7 | 8 | .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } 9 | .#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } 10 | 11 | // Hook for IE8-9 12 | // ------------------------- 13 | 14 | :root .#{$fa-css-prefix}-rotate-90, 15 | :root .#{$fa-css-prefix}-rotate-180, 16 | :root .#{$fa-css-prefix}-rotate-270, 17 | :root .#{$fa-css-prefix}-flip-horizontal, 18 | :root .#{$fa-css-prefix}-flip-vertical { 19 | filter: none; 20 | } 21 | -------------------------------------------------------------------------------- /src/styles/icons/font-awesome/_stacked.scss: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .#{$fa-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .#{$fa-css-prefix}-stack-1x { line-height: inherit; } 19 | .#{$fa-css-prefix}-stack-2x { font-size: 2em; } 20 | .#{$fa-css-prefix}-inverse { color: $fa-inverse; } 21 | -------------------------------------------------------------------------------- /src/styles/icons/font-awesome/font-awesome.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import "variables"; 7 | @import "mixins"; 8 | @import "path"; 9 | @import "core"; 10 | @import "larger"; 11 | @import "fixed-width"; 12 | @import "list"; 13 | @import "bordered-pulled"; 14 | @import "animated"; 15 | @import "rotated-flipped"; 16 | @import "stacked"; 17 | @import "icons"; 18 | -------------------------------------------------------------------------------- /src/styles/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 | } -------------------------------------------------------------------------------- /src/styles/mixins/_no-wrap.scss: -------------------------------------------------------------------------------- 1 | @mixin no-wrap() { 2 | white-space: nowrap; 3 | } -------------------------------------------------------------------------------- /src/styles/theme/base/base.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * This is the base theme with no styles beyond the default base styles 3 | */ 4 | 5 | // Font icons 6 | @import "../../icons/icons"; 7 | 8 | // Theme specific variables 9 | @import "../../variables/colors"; 10 | @import "../../variables/spacing"; 11 | @import "../../variables/theme-variables"; 12 | 13 | /** 14 | * Include global variables 15 | */ 16 | @import "../../variables/media-queries"; 17 | 18 | // Reset and dependencies 19 | @import "../../resets/normalize"; 20 | 21 | // Global variables and mixins 22 | 23 | @import "../../variables/theme-variables"; 24 | 25 | // Common mixins 26 | @import "../../mixins/mixins"; 27 | 28 | // Theme core CSS 29 | @import "../../core/core"; 30 | 31 | // Components 32 | @import "../../components/components"; -------------------------------------------------------------------------------- /src/styles/theme/human.js: -------------------------------------------------------------------------------- 1 | import base from './base'; 2 | 3 | // This is where we would import every single component as a key here 4 | export default { 5 | name: 'human', 6 | appBar: require('../../AppBar/theme-human.scss'), 7 | button: require('../../Button/theme-human.scss'), 8 | ...base 9 | } 10 | -------------------------------------------------------------------------------- /src/styles/theme/human/controls/_app-bar.scss: -------------------------------------------------------------------------------- 1 | .chamel-app-bar { 2 | 3 | .chamel-app-bar-title { 4 | float: none; 5 | text-align: center; 6 | margin-left: 100px; 7 | margin-right: 100px; 8 | } 9 | } -------------------------------------------------------------------------------- /src/styles/theme/human/controls/_controls.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Main include file for theme controls 3 | */ 4 | @import "paper"; 5 | @import "app-bar"; -------------------------------------------------------------------------------- /src/styles/theme/human/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 | html { 18 | -webkit-font-smoothing: antialiased; 19 | color: $body-text-color; 20 | font-family: $contentFontFamily; 21 | background-color: $canvas-color; 22 | } -------------------------------------------------------------------------------- /src/styles/theme/human/core/_core.scss: -------------------------------------------------------------------------------- 1 | @import "base"; 2 | @import "typography"; 3 | -------------------------------------------------------------------------------- /src/styles/theme/human/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 | -------------------------------------------------------------------------------- /src/styles/theme/human/variables/_spacing.scss: -------------------------------------------------------------------------------- 1 | $icon-size : 24px; 2 | $thumb-size : 32px; 3 | $desktop-keyline-increment : 64px; 4 | $desktop-drop-down-menu-item-height: 32px; 5 | $desktop-drop-down-menu-font-size : 15px; 6 | $desktop-left-nav-menu-item-height : 48px; 7 | $desktop-subheader-height : 48px; 8 | $desktop-toolbar-height : 56px; 9 | 10 | /** 11 | * Gutters 12 | */ 13 | $gutter : 24px; 14 | $gutter-more : 32px; 15 | $gutter-less : 8px; 16 | $gutter-mini : 8px; 17 | 18 | /** 19 | * AppBar 20 | */ 21 | $app-bar-height-small : 44px; 22 | $app-bar-height-medium : 44px; 23 | $app-bar-height-large : 44px; -------------------------------------------------------------------------------- /src/styles/theme/material.js: -------------------------------------------------------------------------------- 1 | // Only use this when not using identified modules - otherwise comment out 2 | import base from './base'; 3 | 4 | // This is where we would import every single component as a key here 5 | let themeStyles = Object.assign({}, base); 6 | 7 | // Override here 8 | themeStyles.name = 'material'; 9 | themeStyles.button = require('../../Button/theme-material.scss'); 10 | themeStyles.appBar = require('../../AppBar/theme-material.scss'); 11 | themeStyles.ripple = require('../../ripples/theme-material.scss'); 12 | themeStyles.fontIcon = require('../../icons/font/theme-material.scss'), 13 | themeStyles.menu = require('../../Menu/theme-material.scss'); 14 | themeStyles.grouping = require('../../Grouping/theme-material.scss'); 15 | 16 | export default themeStyles; 17 | -------------------------------------------------------------------------------- /src/styles/theme/material/controls/_controls.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Main include file for theme controls 3 | */ 4 | -------------------------------------------------------------------------------- /src/styles/theme/material/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 | html { 18 | -webkit-font-smoothing: antialiased; 19 | color: $body-text-color; 20 | font-family: $contentFontFamily; 21 | background-color: $canvas-color; 22 | } -------------------------------------------------------------------------------- /src/styles/theme/material/core/_core.scss: -------------------------------------------------------------------------------- 1 | @import "base"; 2 | @import "typography"; 3 | -------------------------------------------------------------------------------- /src/styles/theme/material/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 | -------------------------------------------------------------------------------- /src/styles/theme/material/icons/material-fonts/_border.scss: -------------------------------------------------------------------------------- 1 | // Bordered icons 2 | // ------------------------- 3 | 4 | .#{$zmdi-css-prefix}-border { 5 | padding: .1em .25em; 6 | border: solid .1em $md-border-color; 7 | border-radius: 2px; 8 | } 9 | 10 | .#{$zmdi-css-prefix}-border-circle { 11 | padding: .1em .25em; 12 | border: solid .1em $md-border-color; 13 | border-radius: 50%; 14 | } 15 | -------------------------------------------------------------------------------- /src/styles/theme/material/icons/material-fonts/_core.scss: -------------------------------------------------------------------------------- 1 | // Core Class Definition 2 | // ------------------------- 3 | 4 | .#{$zmdi-icon-prefix} { 5 | display: inline-block; 6 | font: normal normal normal 14px/1 '#{$zmdi-font-name}'; 7 | font-size: inherit; 8 | text-rendering: auto; 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | -------------------------------------------------------------------------------- /src/styles/theme/material/icons/material-fonts/_fixed-width.scss: -------------------------------------------------------------------------------- 1 | // Fixed Width Icons 2 | // ------------------------- 3 | 4 | .#{$zmdi-css-prefix}-fw { 5 | width: (18em / 14); 6 | text-align: center; 7 | } -------------------------------------------------------------------------------- /src/styles/theme/material/icons/material-fonts/_list.scss: -------------------------------------------------------------------------------- 1 | // List Icons 2 | // ------------------------- 3 | 4 | .#{$zmdi-css-prefix}-ul { 5 | padding-left: 0; 6 | margin-left: $zmdi-li-width; 7 | list-style-type: none; 8 | > li { 9 | position: relative; 10 | } 11 | } 12 | .#{$zmdi-css-prefix}-li { 13 | position: absolute; 14 | left: -$zmdi-li-width; 15 | width: $zmdi-li-width; 16 | top: (2em / 14); 17 | text-align: center; 18 | &.#{$zmdi-css-prefix}-lg { 19 | left: (-$zmdi-li-width + (4em / 14)); 20 | } 21 | } -------------------------------------------------------------------------------- /src/styles/theme/material/icons/material-fonts/_path.scss: -------------------------------------------------------------------------------- 1 | // Font path 2 | // -------------------------- 3 | 4 | @font-face { 5 | font-family: '#{$zmdi-font-name}'; 6 | src: 7 | url('#{$zmdi-font-path}/Material-Design-Iconic-Font.woff2?v=#{$zmdi-version}') format('woff2'), 8 | url('#{$zmdi-font-path}/Material-Design-Iconic-Font.woff?v=#{$zmdi-version}') format('woff'), 9 | url('#{$zmdi-font-path}/Material-Design-Iconic-Font.ttf?v=#{$zmdi-version}') format('truetype'); 10 | font-weight: normal; 11 | font-style: normal; 12 | } -------------------------------------------------------------------------------- /src/styles/theme/material/icons/material-fonts/_pulled.scss: -------------------------------------------------------------------------------- 1 | // Pulled icons 2 | // ------------------------- 3 | 4 | .#{$zmdi-icon-prefix} { 5 | &.pull-left { 6 | float: left; 7 | margin-right: .15em; 8 | } 9 | &.pull-right { 10 | float: right; 11 | margin-left: .15em; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/styles/theme/material/icons/material-fonts/_rotated.scss: -------------------------------------------------------------------------------- 1 | // Rotated & Flipped icons 2 | // ------------------------- 3 | 4 | .#{$zmdi-css-prefix}-rotate-90 { 5 | transform: rotate(90deg); 6 | } 7 | .#{$zmdi-css-prefix}-rotate-180 { 8 | transform: rotate(180deg); 9 | } 10 | .#{$zmdi-css-prefix}-rotate-270 { 11 | transform: rotate(270deg); 12 | } 13 | 14 | .#{$zmdi-css-prefix}-flip-horizontal { 15 | transform: scale(-1, 1); 16 | } 17 | .#{$zmdi-css-prefix}-flip-vertical { 18 | transform: scale(1, -1); 19 | } -------------------------------------------------------------------------------- /src/styles/theme/material/icons/material-fonts/_sizes.scss: -------------------------------------------------------------------------------- 1 | // Icon sizes 2 | // ------------------------- 3 | 4 | .#{$zmdi-css-prefix}-lg { 5 | font-size: (4em / 3); 6 | line-height: (3em / 4); 7 | vertical-align: -15%; 8 | } 9 | .#{$zmdi-css-prefix}-2x { 10 | font-size: 2em; 11 | } 12 | .#{$zmdi-css-prefix}-3x { 13 | font-size: 3em; 14 | } 15 | .#{$zmdi-css-prefix}-4x { 16 | font-size: 4em; 17 | } 18 | .#{$zmdi-css-prefix}-5x { 19 | font-size: 5em; 20 | } -------------------------------------------------------------------------------- /src/styles/theme/material/icons/material-fonts/_spinned.scss: -------------------------------------------------------------------------------- 1 | // Spinning Icons 2 | // -------------------------- 3 | 4 | .#{$zmdi-css-prefix}-spin { 5 | animation: zmdi-spin 1.5s infinite linear; 6 | } 7 | 8 | .#{$zmdi-css-prefix}-spin-reverse { 9 | animation: zmdi-spin-reverse 1.5s infinite linear; 10 | } 11 | 12 | // Spin 13 | @keyframes zmdi-spin { 14 | 0% { 15 | transform: rotate(0deg); 16 | } 17 | 100% { 18 | transform: rotate(359deg); 19 | } 20 | } 21 | 22 | // Spin Reverse 23 | @keyframes zmdi-spin-reverse { 24 | 0% { 25 | transform: rotate(0deg); 26 | } 27 | 100% { 28 | transform: rotate(-359deg); 29 | } 30 | } 31 | 32 | -------------------------------------------------------------------------------- /src/styles/theme/material/icons/material-fonts/_stacked.scss: -------------------------------------------------------------------------------- 1 | // Stacked Icons 2 | // ------------------------- 3 | 4 | .#{$zmdi-css-prefix}-stack { 5 | position: relative; 6 | display: inline-block; 7 | width: 2em; 8 | height: 2em; 9 | line-height: 2em; 10 | vertical-align: middle; 11 | } 12 | .#{$zmdi-css-prefix}-stack-1x, .#{$zmdi-css-prefix}-stack-2x { 13 | position: absolute; 14 | left: 0; 15 | width: 100%; 16 | text-align: center; 17 | } 18 | .#{$zmdi-css-prefix}-stack-1x { 19 | line-height: inherit; 20 | } 21 | .#{$zmdi-css-prefix}-stack-2x { 22 | font-size: 2em; 23 | } 24 | .#{$zmdi-css-prefix}-inverse { 25 | color: $zmdi-inverse; 26 | } -------------------------------------------------------------------------------- /src/styles/theme/material/icons/material-fonts/material-design-iconic-font.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Material Design Iconic Font by Sergey Kupletsky ($zavoloklom) - http://zavoloklom.github.io/material-design-iconic-font/ 3 | * License - http://zavoloklom.github.io/material-design-iconic-font/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */ 5 | 6 | @import 'variables'; 7 | @import 'path'; 8 | @import 'core'; 9 | @import 'sizes'; 10 | @import 'fixed-width'; 11 | @import 'list'; 12 | @import 'border'; 13 | @import 'pulled'; 14 | @import 'spinned'; 15 | @import 'rotated'; 16 | @import 'stacked'; 17 | @import 'icons'; 18 | @import 'aliases'; -------------------------------------------------------------------------------- /src/styles/theme/material/variables/_theme-variables.scss: -------------------------------------------------------------------------------- 1 | // Use these variables (and this file) to easily customize themes 2 | @import '../../../variables/spacing'; 3 | @import '../../../variables/theme-variables'; -------------------------------------------------------------------------------- /src/styles/theme/modern.js: -------------------------------------------------------------------------------- 1 | // Only use this when not using identified modules - otherwise comment out 2 | import base from './base'; 3 | 4 | // This is where we would import every single component as a key here 5 | let themeStyles = Object.assign({}, base); 6 | 7 | // Override here 8 | themeStyles.name = 'modern'; 9 | themeStyles.button = require('../../Button/theme-modern.scss'); 10 | 11 | export default themeStyles; 12 | -------------------------------------------------------------------------------- /src/styles/theme/modern/controls/_controls.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Main include file for theme controls 3 | */ 4 | -------------------------------------------------------------------------------- /src/styles/theme/modern/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 | html { 18 | -webkit-font-smoothing: antialiased; 19 | color: $body-text-color; 20 | font-family: $contentFontFamily; 21 | background-color: $canvas-color; 22 | } -------------------------------------------------------------------------------- /src/styles/theme/modern/core/_core.scss: -------------------------------------------------------------------------------- 1 | @import "base"; 2 | @import "typography"; 3 | -------------------------------------------------------------------------------- /src/styles/theme/modern/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 | -------------------------------------------------------------------------------- /src/styles/theme/modern/modern.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * This is the theme to make chameleon look like Windows Modern UI 3 | */ 4 | 5 | // Font icons 6 | @import "../../icons/icons"; 7 | 8 | // Theme specific variables 9 | @import "../../variables/colors"; 10 | @import "../../variables/spacing"; 11 | @import "../../variables/theme-variables"; 12 | 13 | /** 14 | * Include global variables 15 | */ 16 | @import "../../variables/media-queries"; 17 | 18 | // Reset and dependencies 19 | @import "../../resets/normalize"; 20 | 21 | // Global variables and mixins 22 | 23 | @import "../../variables/theme-variables"; 24 | 25 | // Common mixins 26 | @import "../../mixins/mixins"; 27 | 28 | // Theme core CSS 29 | @import "core/core"; 30 | 31 | // Components 32 | @import "../../components/components"; -------------------------------------------------------------------------------- /src/styles/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; 5 | $media-device-small: 375px; -------------------------------------------------------------------------------- /src/svg-icons/drop-down-arrow.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import SvgIcon from './svg-icon'; 4 | 5 | const DropDownArrow = (props) => { 6 | 7 | return ( 8 | 9 | 10 | 11 | ); 12 | 13 | } 14 | 15 | export default DropDownArrow; 16 | -------------------------------------------------------------------------------- /src/svg-icons/navigation-chevron-left.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SvgIcon from './svg-icon'; 3 | 4 | const NavigationChevronLeft = (props) => { 5 | 6 | return ( 7 | 8 | 9 | 10 | ); 11 | 12 | } 13 | 14 | export default NavigationChevronLeft; 15 | -------------------------------------------------------------------------------- /src/svg-icons/navigation-chevron-right.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SvgIcon from './svg-icon'; 3 | 4 | const NavigationChevronLeft = (props) => { 5 | 6 | return ( 7 | 8 | 9 | 10 | ); 11 | 12 | } 13 | 14 | export default NavigationChevronLeft; 15 | -------------------------------------------------------------------------------- /src/svg-icons/navigation-menu.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SvgIcon from './svg-icon'; 3 | 4 | const NavigationMenu = (props) => { 5 | 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | 13 | export default NavigationMenu; 14 | -------------------------------------------------------------------------------- /src/svg-icons/toggle-check-box-checked.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SvgIcon from './svg-icon'; 3 | 4 | const ToggleCheckBoxChecked = (props) => { 5 | 6 | return ( 7 | 8 | 9 | 10 | ); 11 | 12 | } 13 | 14 | export default ToggleCheckBoxChecked; 15 | -------------------------------------------------------------------------------- /src/svg-icons/toggle-check-box-outline-blank.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SvgIcon from './svg-icon'; 3 | 4 | const ToggleCheckBoxOutlineBlank = (props) => { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | 11 | }; 12 | 13 | export default ToggleCheckBoxOutlineBlank; 14 | -------------------------------------------------------------------------------- /src/svg-icons/toggle-radio-button-off.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SvgIcon from './svg-icon'; 3 | 4 | const RadioButtonOff = (props) => { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default RadioButtonOff; 13 | -------------------------------------------------------------------------------- /src/svg-icons/toggle-radio-button-on.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import SvgIcon from './svg-icon'; 3 | 4 | const RadioButtonOn = (props) => { 5 | 6 | return ( 7 | 8 | 9 | 10 | ); 11 | 12 | }; 13 | 14 | export default RadioButtonOn; 15 | -------------------------------------------------------------------------------- /src/transition-groups/SlideInChild.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | const SlideInChild = props => { 5 | let { children, className, ...other } = props; 6 | 7 | let classes = 'chamel-transition-slide-in-child'; 8 | if (props.className) classes += ' ' + props.className; 9 | 10 | return
{children}
; 11 | }; 12 | 13 | export default SlideInChild; 14 | -------------------------------------------------------------------------------- /src/utils/KeyCode.jsx: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | SHIFT: 16, 3 | TWO: 50, // @ 4 | DOWN: 40, 5 | ESC: 27, 6 | ENTER: 13, 7 | LEFT: 37, 8 | RIGHT: 39, 9 | SPACE: 32, 10 | TAB: 9, 11 | UP: 38, 12 | DELETE: 8, 13 | BACKSPACE: 46, 14 | }; 15 | -------------------------------------------------------------------------------- /src/utils/KeyLine.jsx: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | Desktop: { 3 | GUTTER: 24, 4 | GUTTER_LESS: 16, 5 | INCREMENT: 64, 6 | MENU_ITEM_HEIGHT: 32, 7 | }, 8 | 9 | getIncrementalDim: function(dim) { 10 | return Math.ceil(dim / this.Desktop.INCREMENT) * this.Desktop.INCREMENT; 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /src/utils/UniqueId.jsx: -------------------------------------------------------------------------------- 1 | var index = 0; 2 | 3 | module.exports = { 4 | generate: function() { 5 | return 'ui-id-' + index++; 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /src/utils/device.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Device is an object that is used to represent a physical device and browser 3 | */ 4 | import modernizr from './modernizr.custom'; 5 | 6 | var device = {}; 7 | 8 | /** 9 | * Setup device tests 10 | */ 11 | if (modernizr) { 12 | device.test = modernizr; 13 | } else { 14 | // Modernizr can't load so make empty props or set defaults here 15 | device.test = { 16 | inputtypes: {}, 17 | }; 18 | } 19 | 20 | module.exports = device; 21 | -------------------------------------------------------------------------------- /test/protractor-conf.js: -------------------------------------------------------------------------------- 1 | xports.config = { 2 | allScriptsTimeout: 11000, 3 | 4 | specs: [ 5 | 'e2e/*.js' 6 | ], 7 | 8 | capabilities: { 9 | 'browserName': 'chrome' 10 | }, 11 | 12 | chromeOnly: true, 13 | 14 | baseUrl: 'http://localhost:8000/', 15 | 16 | framework: 'jasmine', 17 | 18 | jasmineNodeOpts: { 19 | defaultTimeoutInterval: 30000 20 | } 21 | }; -------------------------------------------------------------------------------- /test/unit/AppBar/AppBar.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactShallowRenderer from 'react-test-renderer/shallow'; 3 | import AppBar from 'chamel/AppBar'; 4 | 5 | /** 6 | * Test rendering the AppBar 7 | */ 8 | describe('AppBar Component', () => { 9 | // Basic validation that render works in edit mode and returns children 10 | it('Should render', () => { 11 | const renderer = new ReactShallowRenderer(); 12 | const renderedDocument = renderer.render( 13 | , 14 | ); 15 | 16 | expect(renderedDocument.type).toBe('div'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /test/unit/AppBar/AppBarRightToolbar.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactShallowRenderer from 'react-test-renderer/shallow'; 3 | import AppBarRightToolbar from 'chamel/AppBar/AppBarRightToolbar'; 4 | 5 | /** 6 | * Test rendering the AppBarRightToolbar 7 | */ 8 | describe('AppBarRightToolbar Component', () => { 9 | // Basic validation that render works in edit mode and returns children 10 | it('Should render', () => { 11 | const renderer = new ReactShallowRenderer(); 12 | const renderedDocument = renderer.render(); 13 | 14 | expect(renderedDocument.type).toBe('div'); 15 | expect(renderedDocument.props.className).toContain('test-class-name'); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /test/unit/AppBar/appBar.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactShallowRenderer from 'react-test-renderer/shallow'; 3 | import AppBar from 'chamel/AppBar'; 4 | 5 | /** 6 | * Test rendering the AppBar 7 | */ 8 | describe('AppBar Component', () => { 9 | // Basic validation that render works in edit mode and returns children 10 | it('Should render', () => { 11 | const renderer = new ReactShallowRenderer(); 12 | const renderedDocument = renderer.render( 13 | , 14 | ); 15 | 16 | expect(renderedDocument.type).toBe('div'); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /test/unit/AutoComplete/AutoComplete.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactShallowRenderer from 'react-test-renderer/shallow'; 3 | import AutoComplete from 'chamel/AutoComplete'; 4 | 5 | /** 6 | * Test rendering the AutoComplete 7 | */ 8 | describe("AutoComplete Component", () => { 9 | 10 | // Basic validation that render works in edit mode and returns children 11 | it("Should render", () => { 12 | 13 | const renderer = new ReactShallowRenderer(); 14 | const renderedDocument = renderer.render( 15 | 18 | ); 19 | 20 | expect(typeof renderedDocument.props).toBe('object'); 21 | expect(renderedDocument.type).toBe('div'); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /test/unit/Button/Button.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactShallowRenderer from 'react-test-renderer/shallow'; 3 | import Button from 'chamel/Button'; 4 | 5 | /** 6 | * Test rendering the Button 7 | */ 8 | describe("Button Component", () => { 9 | 10 | // Basic validation that render works in edit mode and returns children 11 | it("Should render", () => { 12 | 13 | const renderer = new ReactShallowRenderer(); 14 | const renderedDocument = renderer.render( 15 |