├── .babelrc
├── .gitignore
├── README.md
├── dist
├── main.css
└── react-filteredlist.js
├── doc_images
├── filteredlist_display.png
└── filteredlist_text.png
├── example.filteredlistconfig.zip
├── example
├── readme.md
└── src
│ ├── .gitignore
│ ├── demo-hosting-info.txt
│ ├── example.js
│ ├── example.scss
│ ├── exampleConfigSimple.js
│ ├── index.html
│ ├── market
│ ├── .gitignore
│ ├── .npmignore
│ ├── _utils
│ │ └── index.js
│ ├── components
│ │ ├── CustomViewIconTemplate.zip
│ │ ├── DisplayItem
│ │ │ ├── actions.js
│ │ │ ├── constants.js
│ │ │ ├── index.js
│ │ │ ├── messages.js
│ │ │ ├── readme.md
│ │ │ ├── reducer.js
│ │ │ ├── sagas.js
│ │ │ ├── styles.scss
│ │ │ └── tests
│ │ │ │ └── index.test.js
│ │ ├── ExportIcon
│ │ │ ├── index.js
│ │ │ ├── readme.md
│ │ │ └── styles.scss
│ │ └── imports.scss
│ ├── config.example.js
│ ├── dataList.js
│ ├── filterGroups
│ │ ├── catalog-contracts.js
│ │ ├── version-dates.js
│ │ ├── version-metadata.js
│ │ └── version-networks.js
│ ├── filters
│ │ ├── artwork.js
│ │ ├── autocomplete.js
│ │ ├── dateCreatedRange.js
│ │ ├── dateEditedRange.js
│ │ ├── genres.js
│ │ ├── language.js
│ │ ├── networks.js
│ │ ├── search.js
│ │ ├── state.js
│ │ ├── still.js
│ │ └── video.js
│ ├── graphql
│ │ ├── catalog.js
│ │ └── index.js
│ ├── hooks
│ │ ├── beforeXHR.js
│ │ ├── index.js
│ │ ├── onCheck.js
│ │ ├── onInit.js
│ │ ├── onStateUpdate.js
│ │ ├── onUnCheck.js
│ │ ├── onXHRFail.js
│ │ └── onXHRSuccess.js
│ ├── index.js
│ ├── maps
│ │ ├── catalog.js
│ │ ├── entityProp.js
│ │ └── index.js
│ ├── readme.md
│ └── views
│ │ ├── buyer.js
│ │ └── index.js
│ ├── xcomponent-bootstrap.js
│ └── xcomponent.js
├── package-lock.json
├── package.json
├── src
├── App.js
├── components
│ ├── AutoCompleteSelect
│ │ ├── index.js
│ │ └── theme.js
│ ├── Checkbox
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── ColumnSelector
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── CustomItem
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── readme.md
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── DatePicker
│ │ ├── index.js
│ │ └── styles.scss
│ ├── Dimensions
│ │ ├── index.js
│ │ ├── styles.css
│ │ └── styles.scss
│ ├── DisplayItem
│ │ ├── _flags.scss
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── readme.md
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── Exports
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ └── styles.scss
│ ├── FilterGroup
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── FilterItem
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── ListFooter
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── ListHeader
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── ListRow
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── Modal
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ └── styles.scss
│ ├── Pagination
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── PropertySearch
│ │ ├── index.js
│ │ ├── styles.scss
│ │ └── theme.js
│ ├── SaveFilterset
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── Search
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── SortItem
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── TextItem
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── View
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ └── styles.scss
│ ├── ViewInfo
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ └── imports.scss
├── containers
│ ├── App
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── DataList
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── Filters
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── Footer
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── Header
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── messages.js
│ │ ├── reducer.js
│ │ ├── sagas.js
│ │ ├── styles.scss
│ │ └── tests
│ │ │ └── index.test.js
│ ├── LanguageProvider
│ │ ├── actions.js
│ │ ├── constants.js
│ │ ├── index.js
│ │ ├── reducer.js
│ │ └── tests
│ │ │ ├── actions.test.js
│ │ │ ├── index.test.js
│ │ │ ├── reducer.test.js
│ │ │ └── selectors.test.js
│ └── imports.scss
├── dataListConfig.example.zip
├── favicon.ico
├── global-styles.js
├── i18n.js
├── index.js
├── reducers.js
├── store.js
├── style
│ ├── base
│ │ ├── _base-rules.scss
│ │ ├── _color.scss
│ │ ├── _imports.scss
│ │ ├── _reset.scss
│ │ └── _typebase.scss
│ ├── components
│ │ ├── _autocomplete.scss
│ │ ├── _buttons.scss
│ │ ├── _checkbox.scss
│ │ ├── _datatable.scss
│ │ ├── _imports.scss
│ │ ├── _material.scss
│ │ ├── _select.scss
│ │ └── customDisplayItem
│ │ │ ├── _flags.scss
│ │ │ ├── _imports.scss
│ │ │ └── styles.scss
│ ├── layout
│ │ ├── _grid.scss
│ │ ├── _imports.scss
│ │ └── _media-queries.scss
│ ├── main.scss
│ ├── pages
│ │ ├── _all.scss
│ │ └── _imports.scss
│ ├── utils
│ │ ├── _animations.scss
│ │ ├── _clearfix.scss
│ │ ├── _gradients.scss
│ │ ├── _imports.scss
│ │ ├── _placeholders.scss
│ │ └── _util.scss
│ ├── vendor
│ │ ├── _flexbox.scss
│ │ ├── _hint.scss
│ │ ├── _imports.scss
│ │ ├── _noty.scss
│ │ ├── _react-datepicker.scss
│ │ ├── _react-select.scss
│ │ ├── _react-super-select.scss
│ │ ├── animate-css
│ │ │ └── _animate.scss
│ │ ├── bootstrap
│ │ │ ├── _bootstrap.scss
│ │ │ └── bootstrap
│ │ │ │ ├── _alerts.scss
│ │ │ │ ├── _badges.scss
│ │ │ │ ├── _breadcrumbs.scss
│ │ │ │ ├── _button-groups.scss
│ │ │ │ ├── _buttons.scss
│ │ │ │ ├── _carousel.scss
│ │ │ │ ├── _close.scss
│ │ │ │ ├── _code.scss
│ │ │ │ ├── _component-animations.scss
│ │ │ │ ├── _dropdowns.scss
│ │ │ │ ├── _forms.scss
│ │ │ │ ├── _glyphicons.scss
│ │ │ │ ├── _grid.scss
│ │ │ │ ├── _input-groups.scss
│ │ │ │ ├── _jumbotron.scss
│ │ │ │ ├── _labels.scss
│ │ │ │ ├── _list-group.scss
│ │ │ │ ├── _media.scss
│ │ │ │ ├── _mixins.scss
│ │ │ │ ├── _modals.scss
│ │ │ │ ├── _navbar.scss
│ │ │ │ ├── _navs.scss
│ │ │ │ ├── _normalize.scss
│ │ │ │ ├── _pager.scss
│ │ │ │ ├── _pagination.scss
│ │ │ │ ├── _panels.scss
│ │ │ │ ├── _popovers.scss
│ │ │ │ ├── _print.scss
│ │ │ │ ├── _progress-bars.scss
│ │ │ │ ├── _responsive-embed.scss
│ │ │ │ ├── _responsive-utilities.scss
│ │ │ │ ├── _scaffolding.scss
│ │ │ │ ├── _tables.scss
│ │ │ │ ├── _theme.scss
│ │ │ │ ├── _thumbnails.scss
│ │ │ │ ├── _tooltip.scss
│ │ │ │ ├── _type.scss
│ │ │ │ ├── _utilities.scss
│ │ │ │ ├── _variables.scss
│ │ │ │ ├── _wells.scss
│ │ │ │ └── mixins
│ │ │ │ ├── _alerts.scss
│ │ │ │ ├── _background-variant.scss
│ │ │ │ ├── _border-radius.scss
│ │ │ │ ├── _buttons.scss
│ │ │ │ ├── _center-block.scss
│ │ │ │ ├── _clearfix.scss
│ │ │ │ ├── _forms.scss
│ │ │ │ ├── _gradients.scss
│ │ │ │ ├── _grid-framework.scss
│ │ │ │ ├── _grid.scss
│ │ │ │ ├── _hide-text.scss
│ │ │ │ ├── _image.scss
│ │ │ │ ├── _labels.scss
│ │ │ │ ├── _list-group.scss
│ │ │ │ ├── _nav-divider.scss
│ │ │ │ ├── _nav-vertical-align.scss
│ │ │ │ ├── _opacity.scss
│ │ │ │ ├── _pagination.scss
│ │ │ │ ├── _panels.scss
│ │ │ │ ├── _progress-bar.scss
│ │ │ │ ├── _reset-filter.scss
│ │ │ │ ├── _reset-text.scss
│ │ │ │ ├── _resize.scss
│ │ │ │ ├── _responsive-visibility.scss
│ │ │ │ ├── _size.scss
│ │ │ │ ├── _tab-focus.scss
│ │ │ │ ├── _table-row.scss
│ │ │ │ ├── _text-emphasis.scss
│ │ │ │ ├── _text-overflow.scss
│ │ │ │ └── _vendor-prefixes.scss
│ │ ├── flatpickr.scss
│ │ ├── font-awesome
│ │ │ ├── _animated.scss
│ │ │ ├── _bordered-pulled.scss
│ │ │ ├── _core.scss
│ │ │ ├── _fixed-width.scss
│ │ │ ├── _font-awesome.scss
│ │ │ ├── _icons.scss
│ │ │ ├── _larger.scss
│ │ │ ├── _list.scss
│ │ │ ├── _mixins.scss
│ │ │ ├── _path.scss
│ │ │ ├── _rotated-flipped.scss
│ │ │ ├── _screen-reader.scss
│ │ │ ├── _shims.scss
│ │ │ ├── _spinning.scss
│ │ │ ├── _stacked.scss
│ │ │ ├── _variables.scss
│ │ │ ├── brands.scss
│ │ │ ├── fontawesome.scss
│ │ │ ├── regular.scss
│ │ │ ├── solid.scss
│ │ │ └── v4-shims.scss
│ │ ├── fonts
│ │ │ ├── fa-brands-400.eot
│ │ │ ├── fa-brands-400.svg
│ │ │ ├── fa-brands-400.ttf
│ │ │ ├── fa-brands-400.woff
│ │ │ ├── fa-brands-400.woff2
│ │ │ ├── fa-regular-400.eot
│ │ │ ├── fa-regular-400.svg
│ │ │ ├── fa-regular-400.ttf
│ │ │ ├── fa-regular-400.woff
│ │ │ ├── fa-regular-400.woff2
│ │ │ ├── fa-solid-900.eot
│ │ │ ├── fa-solid-900.svg
│ │ │ ├── fa-solid-900.ttf
│ │ │ ├── fa-solid-900.woff
│ │ │ └── fa-solid-900.woff2
│ │ ├── hover-css
│ │ │ ├── _hacks.scss
│ │ │ ├── _hover.scss
│ │ │ ├── _mixins.scss
│ │ │ ├── _options.scss
│ │ │ └── effects
│ │ │ │ ├── 2d-transitions
│ │ │ │ ├── _bob.scss
│ │ │ │ ├── _bounce-in.scss
│ │ │ │ ├── _bounce-out.scss
│ │ │ │ ├── _buzz-out.scss
│ │ │ │ ├── _buzz.scss
│ │ │ │ ├── _float.scss
│ │ │ │ ├── _grow-rotate.scss
│ │ │ │ ├── _grow.scss
│ │ │ │ ├── _hang.scss
│ │ │ │ ├── _pop.scss
│ │ │ │ ├── _pulse-grow.scss
│ │ │ │ ├── _pulse-shrink.scss
│ │ │ │ ├── _pulse.scss
│ │ │ │ ├── _push.scss
│ │ │ │ ├── _rotate.scss
│ │ │ │ ├── _shrink.scss
│ │ │ │ ├── _sink.scss
│ │ │ │ ├── _skew-backward.scss
│ │ │ │ ├── _skew-forward.scss
│ │ │ │ ├── _skew.scss
│ │ │ │ ├── _wobble-bottom.scss
│ │ │ │ ├── _wobble-horizontal.scss
│ │ │ │ ├── _wobble-skew.scss
│ │ │ │ ├── _wobble-to-bottom-right.scss
│ │ │ │ ├── _wobble-to-top-right.scss
│ │ │ │ ├── _wobble-top.scss
│ │ │ │ └── _wobble-vertical.scss
│ │ │ │ ├── background-transitions
│ │ │ │ ├── _back-pulse.scss
│ │ │ │ ├── _bounce-to-bottom.scss
│ │ │ │ ├── _bounce-to-left.scss
│ │ │ │ ├── _bounce-to-right.scss
│ │ │ │ ├── _bounce-to-top.scss
│ │ │ │ ├── _fade.scss
│ │ │ │ ├── _radial-in.scss
│ │ │ │ ├── _radial-out.scss
│ │ │ │ ├── _rectangle-in.scss
│ │ │ │ ├── _rectangle-out.scss
│ │ │ │ ├── _shutter-in-horizontal.scss
│ │ │ │ ├── _shutter-in-vertical.scss
│ │ │ │ ├── _shutter-out-horizontal.scss
│ │ │ │ ├── _shutter-out-vertical.scss
│ │ │ │ ├── _sweep-to-bottom.scss
│ │ │ │ ├── _sweep-to-left.scss
│ │ │ │ ├── _sweep-to-right.scss
│ │ │ │ └── _sweep-to-top.scss
│ │ │ │ ├── border-transitions
│ │ │ │ ├── _border-fade.scss
│ │ │ │ ├── _hollow.scss
│ │ │ │ ├── _outline-in.scss
│ │ │ │ ├── _outline-out.scss
│ │ │ │ ├── _overline-from-center.scss
│ │ │ │ ├── _overline-from-left.scss
│ │ │ │ ├── _overline-from-right.scss
│ │ │ │ ├── _overline-reveal.scss
│ │ │ │ ├── _reveal.scss
│ │ │ │ ├── _ripple-in.scss
│ │ │ │ ├── _ripple-out.scss
│ │ │ │ ├── _round-corners.scss
│ │ │ │ ├── _trim.scss
│ │ │ │ ├── _underline-from-center.scss
│ │ │ │ ├── _underline-from-left.scss
│ │ │ │ ├── _underline-from-right.scss
│ │ │ │ └── _underline-reveal.scss
│ │ │ │ ├── curls
│ │ │ │ ├── _curl-bottom-left.scss
│ │ │ │ ├── _curl-bottom-right.scss
│ │ │ │ ├── _curl-top-left.scss
│ │ │ │ └── _curl-top-right.scss
│ │ │ │ ├── icons
│ │ │ │ ├── _icon-back.scss
│ │ │ │ ├── _icon-bob.scss
│ │ │ │ ├── _icon-bounce-out.scss
│ │ │ │ ├── _icon-bounce.scss
│ │ │ │ ├── _icon-buzz-out.scss
│ │ │ │ ├── _icon-buzz.scss
│ │ │ │ ├── _icon-down.scss
│ │ │ │ ├── _icon-drop.scss
│ │ │ │ ├── _icon-fade.scss
│ │ │ │ ├── _icon-float-away.scss
│ │ │ │ ├── _icon-float.scss
│ │ │ │ ├── _icon-forward.scss
│ │ │ │ ├── _icon-grow-rotate.scss
│ │ │ │ ├── _icon-grow.scss
│ │ │ │ ├── _icon-hang.scss
│ │ │ │ ├── _icon-pop.scss
│ │ │ │ ├── _icon-pulse-grow.scss
│ │ │ │ ├── _icon-pulse-shrink.scss
│ │ │ │ ├── _icon-pulse.scss
│ │ │ │ ├── _icon-push.scss
│ │ │ │ ├── _icon-rotate.scss
│ │ │ │ ├── _icon-shrink.scss
│ │ │ │ ├── _icon-sink-away.scss
│ │ │ │ ├── _icon-sink.scss
│ │ │ │ ├── _icon-spin.scss
│ │ │ │ ├── _icon-up.scss
│ │ │ │ ├── _icon-wobble-horizontal.scss
│ │ │ │ └── _icon-wobble-vertical.scss
│ │ │ │ ├── shadow-and-glow-transitions
│ │ │ │ ├── _box-shadow-inset.scss
│ │ │ │ ├── _box-shadow-outset.scss
│ │ │ │ ├── _float-shadow.scss
│ │ │ │ ├── _glow.scss
│ │ │ │ ├── _grow-shadow.scss
│ │ │ │ ├── _shadow-radial.scss
│ │ │ │ └── _shadow.scss
│ │ │ │ └── speech-bubbles
│ │ │ │ ├── _bubble-bottom.scss
│ │ │ │ ├── _bubble-float-bottom.scss
│ │ │ │ ├── _bubble-float-left.scss
│ │ │ │ ├── _bubble-float-right.scss
│ │ │ │ ├── _bubble-float-top.scss
│ │ │ │ ├── _bubble-left.scss
│ │ │ │ ├── _bubble-right.scss
│ │ │ │ └── _bubble-top.scss
│ │ ├── owl-carousel
│ │ │ ├── _owlcarousel.scss
│ │ │ └── _owlthemedefault.scss
│ │ └── typeplate-sk
│ │ │ ├── _typeplate-extends.scss
│ │ │ ├── _typeplate-fonts.scss
│ │ │ ├── _typeplate-functions.scss
│ │ │ ├── _typeplate-helpers.scss
│ │ │ ├── _typeplate-mixins.scss
│ │ │ ├── _typeplate-styles.scss
│ │ │ ├── _typeplate-vars.scss
│ │ │ └── _typeplate.scss
│ └── webfonts
│ │ ├── fa-brands-400.eot
│ │ ├── fa-brands-400.svg
│ │ ├── fa-brands-400.ttf
│ │ ├── fa-brands-400.woff
│ │ ├── fa-brands-400.woff2
│ │ ├── fa-regular-400.eot
│ │ ├── fa-regular-400.svg
│ │ ├── fa-regular-400.ttf
│ │ ├── fa-regular-400.woff
│ │ ├── fa-regular-400.woff2
│ │ ├── fa-solid-900.eot
│ │ ├── fa-solid-900.svg
│ │ ├── fa-solid-900.ttf
│ │ ├── fa-solid-900.woff
│ │ └── fa-solid-900.woff2
├── tests
│ ├── i18n.test.js
│ └── store.test.js
├── translations
│ └── en.json
└── utils
│ ├── collections.js
│ ├── dummy.js
│ ├── filters.js
│ ├── helpers.js
│ ├── index.js
│ └── queries.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env","react"],
3 | "plugins": ["transform-object-rest-spread"]
4 | }
--------------------------------------------------------------------------------
/doc_images/filteredlist_display.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/doc_images/filteredlist_display.png
--------------------------------------------------------------------------------
/doc_images/filteredlist_text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/doc_images/filteredlist_text.png
--------------------------------------------------------------------------------
/example.filteredlistconfig.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/example.filteredlistconfig.zip
--------------------------------------------------------------------------------
/example/readme.md:
--------------------------------------------------------------------------------
1 | To run the example locally, cd to the root directory of the project, then npm run watch.
2 | Open another terminal tab and run npm run examples.
--------------------------------------------------------------------------------
/example/src/.gitignore:
--------------------------------------------------------------------------------
1 | ## This file is here to ensure it is included in the gh-pages branch,
2 | ## when `gulp deploy` is used to push updates to the demo site.
3 |
4 | # Dependency directory
5 | node_modules
6 | dataListConfig/config.js
7 | config.js
8 |
--------------------------------------------------------------------------------
/example/src/demo-hosting-info.txt:
--------------------------------------------------------------------------------
1 | http://react.filteredlist.demo.s3-website-us-east-1.amazonaws.com
--------------------------------------------------------------------------------
/example/src/example.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var ReactDOM = require('react-dom');
3 | var FilteredList = require('react-filteredlist').default;
4 |
5 | // import config from './market';
6 | import config from './exampleConfigSimple.js';
7 |
8 | class App extends React.Component{
9 | render () {
10 | console.log(FilteredList);
11 | return (
12 |
13 |
14 |
15 | );
16 | }
17 | }
18 |
19 | ReactDOM.render(, document.getElementById('app'));
20 |
--------------------------------------------------------------------------------
/example/src/example.scss:
--------------------------------------------------------------------------------
1 | @import '../../lib/main.css';
--------------------------------------------------------------------------------
/example/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | FilteredList
4 |
5 |
6 |
7 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/example/src/market/.gitignore:
--------------------------------------------------------------------------------
1 | config.js
--------------------------------------------------------------------------------
/example/src/market/.npmignore:
--------------------------------------------------------------------------------
1 | config.js
--------------------------------------------------------------------------------
/example/src/market/components/CustomViewIconTemplate.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/example/src/market/components/CustomViewIconTemplate.zip
--------------------------------------------------------------------------------
/example/src/market/components/DisplayItem/actions.js:
--------------------------------------------------------------------------------
1 | import {UPDATE_WORKSPACE} from './constants';
2 |
3 | export function updateWorkspace(data) {
4 | return {
5 | type: UPDATE_WORKSPACE,
6 | data
7 | };
8 | }
--------------------------------------------------------------------------------
/example/src/market/components/DisplayItem/constants.js:
--------------------------------------------------------------------------------
1 | export const UPDATE_WORKSPACE = 'dl/UPDATE_WORKSPACE';
--------------------------------------------------------------------------------
/example/src/market/components/DisplayItem/readme.md:
--------------------------------------------------------------------------------
1 | Deps:
2 | https://www.flag-sprites.com/
3 |
4 |
--------------------------------------------------------------------------------
/example/src/market/components/DisplayItem/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function displayItemReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default displayItemReducer;
22 |
--------------------------------------------------------------------------------
/example/src/market/components/DisplayItem/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * displayItem request/response handler
7 | */
8 | export function* fetchDisplayItem(args) {
9 | yield* sagaRequest(
10 | displayItemsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getDisplayItem() {
23 | yield* sagaRequestSetup(fetchDisplayItem, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getDisplayItem
29 | ];
30 |
--------------------------------------------------------------------------------
/example/src/market/components/DisplayItem/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import DisplayItem from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/example/src/market/components/ExportIcon/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import FontAwesome from 'react-fontawesome';
3 |
4 | class ExportIcon extends Component {
5 | constructor(props) {
6 | super(props)
7 | }
8 |
9 | iconClick(){
10 | alert('on export icon click');
11 | }
12 |
13 | render() {
14 |
15 | return (
16 |
17 |
18 |
);
19 | }
20 | }
21 |
22 | export default ExportIcon;
--------------------------------------------------------------------------------
/example/src/market/components/ExportIcon/readme.md:
--------------------------------------------------------------------------------
1 | Uses: react-fontawesome
2 | `npm install --save react-fontawesome`
--------------------------------------------------------------------------------
/example/src/market/components/ExportIcon/styles.scss:
--------------------------------------------------------------------------------
1 | .exportIcon{
2 | width: 37px;
3 | height: 37px;
4 | vertical-align: middle;
5 | float: right;
6 | text-align: center;
7 | font-size: 14px;
8 | padding-top: 10px;
9 | border: 1px solid #efefef;
10 | border-top: none;
11 | border-bottom: none;
12 |
13 | &:hover{
14 | background: #efefef;
15 | cursor: pointer;
16 | }
17 | }
--------------------------------------------------------------------------------
/example/src/market/components/imports.scss:
--------------------------------------------------------------------------------
1 | @import "./DisplayItem/styles";
2 | @import "./ExportIcon/styles";
--------------------------------------------------------------------------------
/example/src/market/config.example.js:
--------------------------------------------------------------------------------
1 | export default{
2 | buyerApiUrl : '',
3 | sellerApiUrl : '',
4 | defaultsApiUrl:'',
5 | assetsApiUrl:'',
6 | tokenLocalStorageKey : '',
7 | itemLinkBaseUrl : ''
8 | };
--------------------------------------------------------------------------------
/example/src/market/dataList.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This is the main configuration for the list portion of the DataList component.
3 |
4 | */
5 | export default {
6 | height:'95vh',
7 | paginationBottomPosition: '-9px'
8 | }
--------------------------------------------------------------------------------
/example/src/market/filterGroups/catalog-contracts.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Filter groups are sections in the filter objects that have group configuration properties and a collection of filters
3 | */
4 | export default {
5 | label : 'Contracts',
6 | defaultOpen: true,
7 | accordian:{
8 | color:{
9 | background: '#105caa',
10 | text:'#fff'
11 | }
12 | },
13 | filters:[
14 |
15 | ]
16 | };
--------------------------------------------------------------------------------
/example/src/market/filterGroups/version-dates.js:
--------------------------------------------------------------------------------
1 | import dateCreatedRange from '../filters/dateCreatedRange';
2 | import dateEditedRange from '../filters/dateEditedRange';
3 |
4 | /**
5 | * Filter groups are objects that have group configuration properties and a collection of filters
6 | */
7 | export default {
8 | label : 'Dates',
9 | defaultOpen: false,
10 | accordian:{
11 | color:{
12 | background: '#4db3d7',
13 | text:'#fff'
14 | }
15 | },
16 | filters:[
17 | dateCreatedRange,
18 | dateEditedRange
19 | ]
20 | };
--------------------------------------------------------------------------------
/example/src/market/filterGroups/version-metadata.js:
--------------------------------------------------------------------------------
1 | import genres from '../filters/genres';
2 | import language from '../filters/language';
3 | import state from '../filters/state';
4 | import hasStills from '../filters/still';
5 | import hasVideos from '../filters/video';
6 | import hasArtwork from '../filters/artwork';
7 |
8 | /**
9 | * Filter groups are objects that have group configuration properties and a collection of filters
10 | */
11 | export default {
12 | label : 'Metadata',
13 | defaultOpen: false,
14 | accordian:{
15 | color:{
16 | background: '#4db3d7',
17 | text:'#fff'
18 | }
19 | },
20 | filters:[
21 | genres,
22 | language,
23 | //state,
24 | hasStills,
25 | hasVideos,
26 | hasArtwork
27 | ]
28 | };
--------------------------------------------------------------------------------
/example/src/market/filterGroups/version-networks.js:
--------------------------------------------------------------------------------
1 | import networks from '../filters/networks';
2 |
3 | /**
4 | * Filter groups are objects that have group configuration properties and a collection of filters
5 | */
6 | export default {
7 | label : 'Networks',
8 | defaultOpen: true,
9 | accordian:{
10 | color:{
11 | background: '#105caa',
12 | text:'#fff'
13 | }
14 | },
15 | filters:[
16 | networks
17 | ]
18 | };
--------------------------------------------------------------------------------
/example/src/market/filters/artwork.js:
--------------------------------------------------------------------------------
1 | import Promise from 'bluebird';
2 | import _utils from '../_utils';
3 |
4 | const filterKey = 'hasArtworkAssets';
5 |
6 | export default {
7 | id: filterKey,
8 | type:'select',
9 | prop: filterKey,
10 | label: 'Has Artwork',
11 | value:null,//used this to set a default value. Value must be null or undefined to be excluded. Filters recognize boolean true/false
12 | multiple : true,
13 | options : {
14 | key : 'entityUUID',
15 | value : 'entityValue',
16 |
17 | // Must return a collection
18 | getOptions : ()=>new Promise((resolve,reject)=>{
19 | resolve(_utils.defaults.appendToCollection(filterKey,[
20 | {entityUUID:'yes',entityValue:'True'},
21 | {entityUUID:'no',entityValue:'False'}
22 | ])[filterKey]);
23 | })
24 | }
25 | };
--------------------------------------------------------------------------------
/example/src/market/filters/autocomplete.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/example/src/market/filters/autocomplete.js
--------------------------------------------------------------------------------
/example/src/market/filters/dateCreatedRange.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | export default {
4 | id: 'dateCreated',
5 | type:'range',
6 | prop: 'dateCreated',
7 | label: 'Date Created',
8 | range:{
9 | start:null,//used this to set a default value. Value must be null or undefined to be excluded. Filters recognize boolean true/false
10 | end:null,//used this to set a default value. Value must be null or undefined to be excluded. Filters recognize boolean true/false
11 | }
12 | };
--------------------------------------------------------------------------------
/example/src/market/filters/dateEditedRange.js:
--------------------------------------------------------------------------------
1 |
2 | export default {
3 | id: 'dateEdited',
4 | type:'range',
5 | prop: 'dateEdited',
6 | label: 'Date Edited',
7 | range:{
8 | start:null,//used this to set a default value. Value must be null or undefined to be excluded. Filters recognize boolean true/false
9 | end:null,//used this to set a default value. Value must be null or undefined to be excluded. Filters recognize boolean true/false
10 | }
11 |
12 | };
--------------------------------------------------------------------------------
/example/src/market/filters/genres.js:
--------------------------------------------------------------------------------
1 | import Promise from 'bluebird';
2 | import _utils from '../_utils';
3 |
4 | export default {
5 | id: 'genres',
6 | type:'select',
7 | prop: 'genres',
8 | label: 'Genres',
9 | value:null,//used this to set a default value. Value must be null or undefined to be excluded. Filters recognize boolean true/false
10 | multiple : true,
11 | options : {
12 | key : 'entityUUID',
13 | value : 'entityValue',
14 |
15 | // Must return a promise containing a collection
16 | getOptions : _utils.getDefaults.bind(_utils.getDefaults,'genres')
17 | }
18 | };
--------------------------------------------------------------------------------
/example/src/market/filters/language.js:
--------------------------------------------------------------------------------
1 | import Promise from 'bluebird';
2 | import _utils from '../_utils';
3 |
4 | export default {
5 | id: 'languages',
6 | type:'select',
7 | prop: 'languages',
8 | label: 'Languages',
9 | value:null,//used this to set a default value. Value must be null or undefined to be excluded. Filters recognize boolean true/false
10 | multiple : true,
11 | options : {
12 | key : 'entityUUID',
13 | value : 'entityValue',
14 |
15 | // Must return a collection
16 | getOptions : ()=>new Promise((resolve,reject)=>{
17 | return _utils.getDefaults('languages')
18 | .then(resolve)
19 | })
20 | }
21 | };
--------------------------------------------------------------------------------
/example/src/market/filters/networks.js:
--------------------------------------------------------------------------------
1 | import Promise from 'bluebird';
2 | import _utils from '../_utils';
3 |
4 | export default {
5 | id: 'primaryNetwork',
6 | type:'select',
7 | prop: 'primaryNetwork',
8 | label: 'Primary Network',
9 | value:null,//used this to set a default value. Value must be null or undefined to be excluded. Filters recognize boolean true/false
10 | multiple : true,
11 | options : {
12 | key : 'entityUUID',
13 | value : 'entityValue',
14 |
15 | // Must return a collection
16 | getOptions : ()=>new Promise((resolve,reject)=>{
17 | return _utils.getDefaults('networks')
18 | .then(resolve)
19 | })
20 | }
21 | };
--------------------------------------------------------------------------------
/example/src/market/filters/search.js:
--------------------------------------------------------------------------------
1 | export default {
2 | id: 'search',
3 | type:'search',
4 | prop: 'search',
5 | label: 'Search',
6 | value:null,//used this to set a default value. Value must be null or undefined to be excluded. Filters recognize boolean true/false
7 | };
--------------------------------------------------------------------------------
/example/src/market/filters/state.js:
--------------------------------------------------------------------------------
1 | import Promise from 'bluebird';
2 | import _utils from '../_utils';
3 |
4 | export default {
5 | id: 'state',
6 | type:'select',
7 | prop: 'state',
8 | label: 'States',
9 | value:null,//used this to set a default value. Value must be null or undefined to be excluded. Filters recognize boolean true/false
10 | multiple : true,
11 | options : {
12 | key : 'entityUUID',
13 | value : 'entityValue',
14 |
15 | // Must return a collection
16 | getOptions : ()=>new Promise((resolve,reject)=>{
17 | return _utils.getDefaults('states')
18 | .then(resolve)
19 | })
20 | }
21 | };
--------------------------------------------------------------------------------
/example/src/market/filters/still.js:
--------------------------------------------------------------------------------
1 | import Promise from 'bluebird';
2 | import _utils from '../_utils';
3 |
4 | const filterKey = 'hasStillAssets';
5 |
6 | export default {
7 | id: filterKey,
8 | type:'select',
9 | prop: filterKey,
10 | label: 'Has Stills',
11 | value:null,//used this to set a default value. Value must be null or undefined to be excluded. Filters recognize boolean true/false
12 | multiple : true,
13 | options : {
14 | key : 'entityUUID',
15 | value : 'entityValue',
16 |
17 | // Must return a collection
18 | getOptions : ()=>new Promise((resolve,reject)=>{
19 | resolve(_utils.defaults.appendToCollection(filterKey,[
20 | {entityUUID:'yes',entityValue:'True'},
21 | {entityUUID:'no',entityValue:'False'}
22 | ])[filterKey]);
23 | })
24 | }
25 | };
--------------------------------------------------------------------------------
/example/src/market/filters/video.js:
--------------------------------------------------------------------------------
1 | import Promise from 'bluebird';
2 | import _utils from '../_utils';
3 |
4 | const filterKey = 'hasVideoAssets';
5 |
6 | export default {
7 | id: filterKey,
8 | type:'select',
9 | prop: filterKey,
10 | label: 'Has Videos',
11 | value:null,//used this to set a default value. Value must be null or undefined to be excluded. Filters recognize boolean true/false
12 | multiple : true,
13 | options : {
14 | key : 'entityUUID',
15 | value : 'entityValue',
16 |
17 | // Must return a collection
18 | getOptions : ()=>new Promise((resolve,reject)=>{
19 | resolve(_utils.defaults.appendToCollection(filterKey,[
20 | {entityUUID:'yes',entityValue:'True'},
21 | {entityUUID:'no',entityValue:'False'}
22 | ])[filterKey]);
23 | })
24 | }
25 | };
--------------------------------------------------------------------------------
/example/src/market/graphql/catalog.js:
--------------------------------------------------------------------------------
1 | export default{
2 |
3 | }
--------------------------------------------------------------------------------
/example/src/market/graphql/index.js:
--------------------------------------------------------------------------------
1 | import catalog from './catalog';
2 |
3 | export default{
4 | catalog
5 | }
--------------------------------------------------------------------------------
/example/src/market/hooks/index.js:
--------------------------------------------------------------------------------
1 | import beforeXHR from './beforeXHR';
2 | import onXHRSuccess from './onXHRSuccess';
3 | import onXHRFail from './onXHRFail';
4 | import onCheck from './onCheck';
5 | import onUnCheck from './onUnCheck';
6 | import onStateUpdate from './onStateUpdate';
7 | import onInit from './onInit';
8 |
9 | export default {
10 | beforeXHR,
11 | onXHRSuccess,
12 | onXHRFail,
13 | onCheck,
14 | onUnCheck,
15 | onStateUpdate,
16 | onInit
17 | };
--------------------------------------------------------------------------------
/example/src/market/hooks/onCheck.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Hook for picking up check events
3 | * Note: You have access to all items currently in the workspace, but you must only return the item being mutated
4 | * Warning: a select all command will run this hook once for each item as it builds the workspaceItems list
5 | */
6 | export default ({item,workspaceItems})=>item
--------------------------------------------------------------------------------
/example/src/market/hooks/onInit.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Hook used to know when the app is initialized
3 | */
4 | import _utils from '../_utils';
5 |
6 | export default app=>{
7 | _utils.getDefaults('genres');// Request defaults to ensure they're set on app load
8 | }
--------------------------------------------------------------------------------
/example/src/market/hooks/onStateUpdate.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Hook gets called whenever the main application state gets updated.
4 | * Useful for getting the filters' current queryObject or queryString.
5 | * Pagination can also be read here as well as the current Selected View
6 | * @returns {*}
7 | */
8 | export default state=>{
9 | //console.log('CURRENT STATE HOOK',state)
10 | }
--------------------------------------------------------------------------------
/example/src/market/hooks/onUnCheck.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Hook for picking up check events
3 | * Note: You have access to all items currently in the workspace, but you must only return the item being mutated
4 | * Warning: a select all command will run this hook once for each item as it empties the workspaceItems list
5 | */
6 | export default ({item,workspaceItems})=>item
--------------------------------------------------------------------------------
/example/src/market/hooks/onXHRFail.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Hook gets called when the xhr request kicks back an error
3 | * @param args
4 | * @returns {*}
5 | */
6 | export default (err,body)=>{
7 | return body;
8 | }
--------------------------------------------------------------------------------
/example/src/market/maps/catalog.js:
--------------------------------------------------------------------------------
1 | export default {
2 | "olyplat-entity-movie": 'movie',
3 | "olyplat-entity-series": 'series',
4 | "olyplat-entity-episode": 'episode',
5 | "olyplat-entity-season": 'season',
6 | "olyplat-entity-version": 'version',
7 | };
8 |
--------------------------------------------------------------------------------
/example/src/market/maps/entityProp.js:
--------------------------------------------------------------------------------
1 | export default {
2 | genres: 'primaryGenre',
3 | languages: "language",
4 | dateCreated:'entityCreated'
5 | };
--------------------------------------------------------------------------------
/example/src/market/views/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Views are a collection of filter group objects
3 | */
4 | import buyer from './buyer';
5 |
6 | export default [
7 | buyer
8 | ];
--------------------------------------------------------------------------------
/example/src/xcomponent-bootstrap.js:
--------------------------------------------------------------------------------
1 | /**
2 | * http://krakenjs.com/xcomponent/docs/example.html
3 | */
4 | var xcomponent = require('./xcomponent.js');
5 | var FilteredListComponent = xcomponent.create({
6 | tag: 'react-filteredlist',
7 | url:'http://react.filteredlist.demo.s3-website-us-east-1.amazonaws.com',
8 | dimensions: {
9 | width: '100%',
10 | height: "600px"
11 | },
12 | props: {
13 | config: {
14 | type: 'object',
15 | required: true
16 | }
17 | }
18 | });
--------------------------------------------------------------------------------
/src/components/Checkbox/styles.scss:
--------------------------------------------------------------------------------
1 | .dl__checkbox{
2 | display: flex;
3 | flex: 1;
4 | justify-content: center;
5 | min-height: 100%;
6 | align-items: center;
7 |
8 | input {
9 | font-size: 16px;
10 | }
11 | }
--------------------------------------------------------------------------------
/src/components/Checkbox/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import Checkbox from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/ColumnSelector/actions.js:
--------------------------------------------------------------------------------
1 | import {UPDATE_VIEW_PROPS} from './constants';
2 |
3 | /**
4 | * Load the repositories, this action starts the request saga
5 | */
6 | export function updateViewProps(data) {
7 | return {
8 | type: UPDATE_VIEW_PROPS,
9 | data
10 | };
11 | }
--------------------------------------------------------------------------------
/src/components/ColumnSelector/constants.js:
--------------------------------------------------------------------------------
1 | /*
2 | * ColumnSelectorConstants
3 | * Each action has a corresponding type, which the reducer knows and picks up on.
4 | * To avoid weird typos between the reducer and the actions, we save them as
5 | * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
6 | * reducers accidentally picking up actions they shouldn't.
7 | *
8 | * Follow this format:
9 | * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
10 | */
11 | export const DEFAULT_LOCALE = 'en';
12 | export const UPDATE_VIEW_PROPS = 'dl/UPDATE_VIEW_PROPS';
13 |
--------------------------------------------------------------------------------
/src/components/ColumnSelector/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function columnSelectorReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default columnSelectorReducer;
22 |
--------------------------------------------------------------------------------
/src/components/ColumnSelector/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * columnSelector request/response handler
7 | */
8 | export function* fetchColumnSelector(args) {
9 | yield* sagaRequest(
10 | columnSelectorsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getColumnSelector() {
23 | yield* sagaRequestSetup(fetchColumnSelector, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getColumnSelector
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/ColumnSelector/styles.scss:
--------------------------------------------------------------------------------
1 | .dl__columnSelector{
2 | $bg : #fff;
3 | $border : #efefef;
4 | $shadow : #888;
5 |
6 | border: 1px solid #efefef;
7 | width: auto;
8 | position: absolute;
9 | right: 36px;
10 | top :21px;
11 | z-index: 101;
12 | padding: 18px 9px 18px 9px;
13 | border-radius: 3px;
14 | background: $bg;
15 | box-shadow: 0 0 6px $shadow;
16 |
17 | h4{
18 | margin: 0;
19 | padding: 0 90px 0 0;
20 | font-weight: 700;
21 | font-size: 14px;
22 | border-bottom: 1px solid $border;
23 | margin-bottom: 9px;
24 | }
25 |
26 | span{
27 | display: block;
28 | line-height: 18px;
29 | font-size: 12px;
30 |
31 | .dl__checkbox{
32 | display: inline-block;
33 | }
34 |
35 | input{
36 | margin-right: 6px;
37 | width: 12px;
38 | height: 12px;
39 | }
40 | }
41 | }
--------------------------------------------------------------------------------
/src/components/ColumnSelector/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import ColumnSelector from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/CustomItem/actions.js:
--------------------------------------------------------------------------------
1 | import {UPDATE_WORKSPACE} from './constants';
2 |
3 | export function updateWorkspace(data) {
4 | return {
5 | type: UPDATE_WORKSPACE,
6 | data
7 | };
8 | }
--------------------------------------------------------------------------------
/src/components/CustomItem/constants.js:
--------------------------------------------------------------------------------
1 | export const UPDATE_WORKSPACE = 'dl/UPDATE_WORKSPACE';
--------------------------------------------------------------------------------
/src/components/CustomItem/readme.md:
--------------------------------------------------------------------------------
1 | Deps:
2 | https://www.flag-sprites.com/
3 |
4 |
--------------------------------------------------------------------------------
/src/components/CustomItem/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function customItemReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default customItemReducer;
22 |
--------------------------------------------------------------------------------
/src/components/CustomItem/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * customItem request/response handler
7 | */
8 | export function* fetchCustomItem(args) {
9 | yield* sagaRequest(
10 | customItemsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getCustomItem() {
23 | yield* sagaRequestSetup(fetchCustomItem, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getCustomItem
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/CustomItem/styles.scss:
--------------------------------------------------------------------------------
1 |
2 | .dl__customItem{
3 | $this : &;
4 | position: relative;
5 | z-index: 0;
6 | @extend .cf;
7 |
8 | a{
9 | color: $color-link;
10 | //position: relative;
11 | }
12 |
13 | &Check{
14 | display: inline-block;
15 | float: left;
16 | margin-top: 16px;
17 |
18 | // Commented out because we need to handle displaying for the checked state
19 | //input[type="checkbox"]{
20 | // appearance: none;
21 | // -webkit-appearance: none;
22 | // background: none;
23 | // border: none;
24 | // border:1px solid $color-link;
25 | // color: $color-link;
26 | // width: 12px;
27 | // height: 12px;
28 | // border-radius: 2px;
29 | //}
30 | }
31 | }
--------------------------------------------------------------------------------
/src/components/CustomItem/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import CustomItem from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/DatePicker/index.js:
--------------------------------------------------------------------------------
1 | import React, {PureComponent} from 'react';
2 | import ReactDatePicker from "react-datepicker";
3 |
4 | class DatePicker extends PureComponent {
5 | constructor(props) {
6 | super(props);
7 | }
8 |
9 | render() {
10 | const {id, placeholderText, className, selected, onChange} = this.props;
11 | return ();
12 | }
13 | }
14 |
15 | export default DatePicker;
16 |
--------------------------------------------------------------------------------
/src/components/DatePicker/styles.scss:
--------------------------------------------------------------------------------
1 | .dr__wrapper {
2 | display: flex;
3 | width: 100%;
4 | max-width: 100%;
5 | justify-content: space-between;
6 | align-items: center;
7 | background: none;
8 | padding: 3px 0px;
9 | position: relative;
10 | z-index: 10;
11 |
12 |
13 | .dr__datePicker {
14 | width: 100%;
15 | position: relative;
16 | line-height: 30px;
17 | padding: .25rem 50px .25rem .25rem;
18 | border: 1px solid rgba(51, 51, 51, 0.45);
19 | text-decoration: none;
20 | color: #666;
21 | border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
22 | background-clip: padding-box;
23 | cursor: pointer;
24 | outline: none;
25 | word-wrap: break-word;
26 | &:focus {
27 | background: none;
28 | }
29 | }
30 |
31 | .dr__divider svg {
32 | vertical-align: middle !important;
33 | fill: #565a5c !important;
34 | height: 24px !important;
35 | width: 18px !important;
36 | margin: 0 3px;
37 | }
38 | }
--------------------------------------------------------------------------------
/src/components/DisplayItem/actions.js:
--------------------------------------------------------------------------------
1 | import {UPDATE_WORKSPACE} from './constants';
2 |
3 | export function updateWorkspace(data) {
4 | return {
5 | type: UPDATE_WORKSPACE,
6 | data
7 | };
8 | }
--------------------------------------------------------------------------------
/src/components/DisplayItem/constants.js:
--------------------------------------------------------------------------------
1 | export const UPDATE_WORKSPACE = 'dl/UPDATE_WORKSPACE';
--------------------------------------------------------------------------------
/src/components/DisplayItem/readme.md:
--------------------------------------------------------------------------------
1 | Deps:
2 | https://www.flag-sprites.com/
3 |
4 |
--------------------------------------------------------------------------------
/src/components/DisplayItem/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function displayItemReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default displayItemReducer;
22 |
--------------------------------------------------------------------------------
/src/components/DisplayItem/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * displayItem request/response handler
7 | */
8 | export function* fetchDisplayItem(args) {
9 | yield* sagaRequest(
10 | displayItemsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getDisplayItem() {
23 | yield* sagaRequestSetup(fetchDisplayItem, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getDisplayItem
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/DisplayItem/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import DisplayItem from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/Exports/actions.js:
--------------------------------------------------------------------------------
1 | import {
2 | CONTROL_MODAL
3 | } from './constants';
4 |
5 | export function controlModal(data) {
6 | return {
7 | type: CONTROL_MODAL,
8 | data
9 | };
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/Exports/constants.js:
--------------------------------------------------------------------------------
1 | export const CONTROL_MODAL = 'dl/CONTROL_MODAL';
--------------------------------------------------------------------------------
/src/components/FilterGroup/actions.js:
--------------------------------------------------------------------------------
1 | import {} from './constants';
2 |
3 | /**
4 | * Load the repositories, this action starts the request saga
5 | */
6 | //export function notify(data) {
7 | // return {
8 | // type: NOTIFY,
9 | // data
10 | // };
11 | //}
--------------------------------------------------------------------------------
/src/components/FilterGroup/constants.js:
--------------------------------------------------------------------------------
1 | /*
2 | * FilterGroupConstants
3 | * Each action has a corresponding type, which the reducer knows and picks up on.
4 | * To avoid weird typos between the reducer and the actions, we save them as
5 | * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
6 | * reducers accidentally picking up actions they shouldn't.
7 | *
8 | * Follow this format:
9 | * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
10 | */
11 | export const DEFAULT_LOCALE = 'en';
12 | //export const DEFAULT_LOCALE = 'dataList/filterGroup/en';
--------------------------------------------------------------------------------
/src/components/FilterGroup/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function filterGroupReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default filterGroupReducer;
22 |
--------------------------------------------------------------------------------
/src/components/FilterGroup/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * filterGroup request/response handler
7 | */
8 | export function* fetchFilterGroup(args) {
9 | yield* sagaRequest(
10 | filterGroupsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getFilterGroup() {
23 | yield* sagaRequestSetup(fetchFilterGroup, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getFilterGroup
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/FilterGroup/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import FilterGroup from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/FilterItem/actions.js:
--------------------------------------------------------------------------------
1 | import {FILTER_CHANGE} from './constants';
2 |
3 | export function filterChange(data) {
4 | return {
5 | type: FILTER_CHANGE,
6 | data
7 | };
8 | }
--------------------------------------------------------------------------------
/src/components/FilterItem/constants.js:
--------------------------------------------------------------------------------
1 | /*
2 | * FilterItemConstants
3 | * Each action has a corresponding type, which the reducer knows and picks up on.
4 | * To avoid weird typos between the reducer and the actions, we save them as
5 | * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
6 | * reducers accidentally picking up actions they shouldn't.
7 | *
8 | * Follow this format:
9 | * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
10 | */
11 | export const FILTER_CHANGE = 'dl/FILTER_CHANGE';
--------------------------------------------------------------------------------
/src/components/FilterItem/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function filterItemReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default filterItemReducer;
22 |
--------------------------------------------------------------------------------
/src/components/FilterItem/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * filterItem request/response handler
7 | */
8 | export function* fetchFilterItem(args) {
9 | yield* sagaRequest(
10 | filterItemsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getFilterItem() {
23 | yield* sagaRequestSetup(fetchFilterItem, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getFilterItem
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/FilterItem/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import FilterItem from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/ListFooter/actions.js:
--------------------------------------------------------------------------------
1 | import {} from './constants';
2 |
3 | /**
4 | * Load the repositories, this action starts the request saga
5 | */
6 | //export function notify(data) {
7 | // return {
8 | // type: NOTIFY,
9 | // data
10 | // };
11 | //}
--------------------------------------------------------------------------------
/src/components/ListFooter/constants.js:
--------------------------------------------------------------------------------
1 | /*
2 | * ListFooterConstants
3 | * Each action has a corresponding type, which the reducer knows and picks up on.
4 | * To avoid weird typos between the reducer and the actions, we save them as
5 | * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
6 | * reducers accidentally picking up actions they shouldn't.
7 | *
8 | * Follow this format:
9 | * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
10 | */
11 | export const DEFAULT_LOCALE = 'en';
12 | //export const DEFAULT_LOCALE = 'dataList/listFooter/en';
--------------------------------------------------------------------------------
/src/components/ListFooter/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function listFooterReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default listFooterReducer;
22 |
--------------------------------------------------------------------------------
/src/components/ListFooter/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * listFooter request/response handler
7 | */
8 | export function* fetchListFooter(args) {
9 | yield* sagaRequest(
10 | listFootersModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getListFooter() {
23 | yield* sagaRequestSetup(fetchListFooter, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getListFooter
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/ListFooter/styles.scss:
--------------------------------------------------------------------------------
1 | .dl__listFooter{
2 |
3 | }
--------------------------------------------------------------------------------
/src/components/ListFooter/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import ListFooter from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/ListHeader/actions.js:
--------------------------------------------------------------------------------
1 | import {UPDATE_WORKSPACE,FILTER_CHANGE} from './constants';
2 |
3 | export function updateWorkspace(data) {
4 | return {
5 | type: UPDATE_WORKSPACE,
6 | data
7 | };
8 | }
9 |
10 |
11 | export function filterChange(data) {
12 | return {
13 | type: FILTER_CHANGE,
14 | data
15 | };
16 | }
--------------------------------------------------------------------------------
/src/components/ListHeader/constants.js:
--------------------------------------------------------------------------------
1 | export const UPDATE_WORKSPACE = 'dl/UPDATE_WORKSPACE';
2 | export const FILTER_CHANGE = 'dl/FILTER_CHANGE';
--------------------------------------------------------------------------------
/src/components/ListHeader/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function listHeaderReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default listHeaderReducer;
22 |
--------------------------------------------------------------------------------
/src/components/ListHeader/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * listHeader request/response handler
7 | */
8 | export function* fetchListHeader(args) {
9 | yield* sagaRequest(
10 | listHeadersModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getListHeader() {
23 | yield* sagaRequestSetup(fetchListHeader, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getListHeader
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/ListHeader/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import ListHeader from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/ListRow/actions.js:
--------------------------------------------------------------------------------
1 | import {} from './constants';
2 |
3 | /**
4 | * Load the repositories, this action starts the request saga
5 | */
6 | //export function notify(data) {
7 | // return {
8 | // type: NOTIFY,
9 | // data
10 | // };
11 | //}
--------------------------------------------------------------------------------
/src/components/ListRow/constants.js:
--------------------------------------------------------------------------------
1 | /*
2 | * ListRowConstants
3 | * Each action has a corresponding type, which the reducer knows and picks up on.
4 | * To avoid weird typos between the reducer and the actions, we save them as
5 | * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
6 | * reducers accidentally picking up actions they shouldn't.
7 | *
8 | * Follow this format:
9 | * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
10 | */
11 | export const DEFAULT_LOCALE = 'en';
12 | //export const DEFAULT_LOCALE = 'dataList/listRow/en';
--------------------------------------------------------------------------------
/src/components/ListRow/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function listRowReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default listRowReducer;
22 |
--------------------------------------------------------------------------------
/src/components/ListRow/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * listRow request/response handler
7 | */
8 | export function* fetchListRow(args) {
9 | yield* sagaRequest(
10 | listRowsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getListRow() {
23 | yield* sagaRequestSetup(fetchListRow, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getListRow
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/ListRow/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import ListRow from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/Modal/actions.js:
--------------------------------------------------------------------------------
1 | import {
2 | CONTROL_MODAL
3 | } from './constants';
4 |
5 | export function controlModal(data) {
6 | return {
7 | type: CONTROL_MODAL,
8 | data
9 | };
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/Modal/constants.js:
--------------------------------------------------------------------------------
1 | export const CONTROL_MODAL = 'dl/CONTROL_MODAL';
--------------------------------------------------------------------------------
/src/components/Pagination/actions.js:
--------------------------------------------------------------------------------
1 | import {UPDATE_PAGINATION} from './constants';
2 |
3 | export function updatePagination(data) {
4 | return {
5 | type: UPDATE_PAGINATION,
6 | data
7 | };
8 | }
--------------------------------------------------------------------------------
/src/components/Pagination/constants.js:
--------------------------------------------------------------------------------
1 | export const UPDATE_PAGINATION = 'dl/UPDATE_PAGINATION';
--------------------------------------------------------------------------------
/src/components/Pagination/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function paginationReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default paginationReducer;
22 |
--------------------------------------------------------------------------------
/src/components/Pagination/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * pagination request/response handler
7 | */
8 | export function* fetchPagination(args) {
9 | yield* sagaRequest(
10 | paginationsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getPagination() {
23 | yield* sagaRequestSetup(fetchPagination, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getPagination
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/Pagination/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import Pagination from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/SaveFilterset/actions.js:
--------------------------------------------------------------------------------
1 | // import {FILTER_CHANGE} from './constants';
2 |
3 | // export function filterChange(data) {
4 | // return {
5 | // type: FILTER_CHANGE,
6 | // data
7 | // };
8 | // }
--------------------------------------------------------------------------------
/src/components/SaveFilterset/constants.js:
--------------------------------------------------------------------------------
1 | /*
2 | * FilterItemConstants
3 | * Each action has a corresponding type, which the reducer knows and picks up on.
4 | * To avoid weird typos between the reducer and the actions, we save them as
5 | * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
6 | * reducers accidentally picking up actions they shouldn't.
7 | *
8 | * Follow this format:
9 | * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
10 | */
11 | // export const FILTER_CHANGE = 'dl/FILTER_CHANGE';
--------------------------------------------------------------------------------
/src/components/SaveFilterset/messages.js:
--------------------------------------------------------------------------------
1 | /*
2 | * saveFilterset Messages
3 | *
4 | * This contains all the text for the saveFilterset component.
5 | */
6 | import { defineMessages } from 'react-intl';
7 |
8 | export default defineMessages({
9 | inputLabel: {
10 | id: 'containers.saveFilterset.inputLabel',
11 | defaultMessage: 'Save Current Filterset',
12 | },
13 | inputPlaceholder: {
14 | id: 'containers.saveFilterset.inputPlaceholder',
15 | defaultMessage: 'Name your new filterset',
16 | },
17 | selectLabel: {
18 | id: 'containers.saveFilterset.selectLabel',
19 | defaultMessage: 'Run previously saved filtersets',
20 | },
21 | formSubmitValue: {
22 | id: 'containers.saveFilterset.formSubmitValue',
23 | defaultMessage: 'Save',
24 | },
25 | deleteFilterset: {
26 | id: 'containers.saveFilterset.deleteFilterset',
27 | defaultMessage: 'Delete saved filterset',
28 | },
29 |
30 | });
31 |
--------------------------------------------------------------------------------
/src/components/SaveFilterset/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | // //@todo find a better place to inject this
4 | // import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | // config
8 | };
9 |
10 | function saveFiltersetReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default saveFiltersetReducer;
22 |
--------------------------------------------------------------------------------
/src/components/SaveFilterset/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * filterItem request/response handler
7 | */
8 | // export function* fetchFilterItem(args) {
9 | // yield* sagaRequest(
10 | // filterItemsModel.getById,
11 | // {entityUUID: args.data.entityUUID},
12 | // GET_APP_SUCCEEDED,
13 | // GET_APP_FAILED,
14 | // {...effects},
15 | // false
16 | // );
17 | // }
18 |
19 | // /**
20 | // * Root saga manages watcher lifecycle
21 | // */
22 | // export function* getFilterItem() {
23 | // yield* sagaRequestSetup(fetchFilterItem, GET_APP, {...effects})
24 | // }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | // getFilterItem
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/SaveFilterset/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import FilterItem from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/Search/actions.js:
--------------------------------------------------------------------------------
1 | import {FILTER_CHANGE,UPDATE_SEARCH_INPUT} from './constants';
2 |
3 | export function filterChange(data) {
4 | return {
5 | type: FILTER_CHANGE,
6 | data
7 | };
8 | }
9 |
10 | export function updateSearch(data) {
11 | return {
12 | type: UPDATE_SEARCH_INPUT,
13 | data
14 | };
15 | }
--------------------------------------------------------------------------------
/src/components/Search/constants.js:
--------------------------------------------------------------------------------
1 | export const FILTER_CHANGE = 'dl/FILTER_CHANGE';
2 | export const UPDATE_SEARCH_INPUT = 'dl/UPDATE_SEARCH_INPUT';
--------------------------------------------------------------------------------
/src/components/Search/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function searchReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default searchReducer;
22 |
--------------------------------------------------------------------------------
/src/components/Search/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * search request/response handler
7 | */
8 | export function* fetchSearch(args) {
9 | yield* sagaRequest(
10 | searchsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getSearch() {
23 | yield* sagaRequestSetup(fetchSearch, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getSearch
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/Search/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import Search from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/SortItem/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import ListRow from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/TextItem/actions.js:
--------------------------------------------------------------------------------
1 | import {UPDATE_WORKSPACE} from './constants';
2 |
3 | export function updateWorkspace(data) {
4 | return {
5 | type: UPDATE_WORKSPACE,
6 | data
7 | };
8 | }
--------------------------------------------------------------------------------
/src/components/TextItem/constants.js:
--------------------------------------------------------------------------------
1 | export const UPDATE_WORKSPACE = 'dl/UPDATE_WORKSPACE';
--------------------------------------------------------------------------------
/src/components/TextItem/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function textItemReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default textItemReducer;
22 |
--------------------------------------------------------------------------------
/src/components/TextItem/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * textItem request/response handler
7 | */
8 | export function* fetchTextItem(args) {
9 | yield* sagaRequest(
10 | textItemsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getTextItem() {
23 | yield* sagaRequestSetup(fetchTextItem, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getTextItem
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/TextItem/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import TextItem from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/View/actions.js:
--------------------------------------------------------------------------------
1 | import {RESET_FILTERS} from './constants';
2 |
3 |
4 | export function resetFilters(data) {
5 | return {
6 | type: RESET_FILTERS,
7 | data
8 | };
9 | }
--------------------------------------------------------------------------------
/src/components/View/constants.js:
--------------------------------------------------------------------------------
1 | export const RESET_FILTERS = 'dl/RESET_FILTERS';
--------------------------------------------------------------------------------
/src/components/View/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function viewReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default viewReducer;
22 |
--------------------------------------------------------------------------------
/src/components/View/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * view request/response handler
7 | */
8 | export function* fetchView(args) {
9 | yield* sagaRequest(
10 | viewsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getView() {
23 | yield* sagaRequestSetup(fetchView, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getView
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/View/styles.scss:
--------------------------------------------------------------------------------
1 | .dl__view{
2 |
3 | &[data-active="true"]{
4 | // border-top: 1px solid #efefef;
5 | }
6 | }
--------------------------------------------------------------------------------
/src/components/ViewInfo/actions.js:
--------------------------------------------------------------------------------
1 | import {FILTER_CHANGE,UPDATE_SEARCH_INPUT, CONTROL_MODAL} from './constants';
2 |
3 | export function filterChange(data) {
4 | return {
5 | type: FILTER_CHANGE,
6 | data
7 | };
8 | }
9 |
10 | export function updateSearch(data) {
11 | return {
12 | type: UPDATE_SEARCH_INPUT,
13 | data
14 | };
15 | }
16 |
17 | export function controlModal(data) {
18 | return {
19 | type: CONTROL_MODAL,
20 | data
21 | };
22 | }
--------------------------------------------------------------------------------
/src/components/ViewInfo/constants.js:
--------------------------------------------------------------------------------
1 | export const FILTER_CHANGE = 'dl/FILTER_CHANGE';
2 | export const UPDATE_SEARCH_INPUT = 'dl/UPDATE_SEARCH_INPUT';
3 | export const CONTROL_MODAL = 'dl/CONTROL_MODAL';
--------------------------------------------------------------------------------
/src/components/ViewInfo/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function searchReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default searchReducer;
22 |
--------------------------------------------------------------------------------
/src/components/ViewInfo/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * search request/response handler
7 | */
8 | export function* fetchSearch(args) {
9 | yield* sagaRequest(
10 | searchsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getSearch() {
23 | yield* sagaRequestSetup(fetchSearch, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getSearch
29 | ];
30 |
--------------------------------------------------------------------------------
/src/components/ViewInfo/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import Search from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/imports.scss:
--------------------------------------------------------------------------------
1 | @import "./Checkbox/styles";
2 | @import "./CustomItem/styles";
3 | @import "./DisplayItem/styles";
4 | @import "./FilterGroup/styles";
5 | @import "./FilterItem/styles";
6 | @import "./ListRow/styles";
7 | @import "./TextItem/styles";
8 | @import "./View/styles";
9 | @import "./Search/styles";
10 | @import "./PropertySearch/styles";
11 | @import "./Pagination/styles";
12 | @import "./ListHeader/styles";
13 | @import "./ListFooter/styles";
14 | @import "./ColumnSelector/styles";
15 | @import "./ViewInfo/styles";
16 | @import "./SaveFilterset/styles";
17 | @import "./SortItem/styles";
18 | @import "./Modal/styles";
19 | @import "./Exports/styles";
20 | @import "DatePicker/styles";
21 | @import "Dimensions/styles";
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/containers/App/actions.js:
--------------------------------------------------------------------------------
1 | import {
2 | UPDATE_ITEMS,
3 | ON_APP_INIT,
4 | FILTER_CHANGE,
5 | UPDATE_PAGINATION
6 | } from './constants';
7 |
8 | export function updateItems(data) {
9 | return {
10 | type: UPDATE_ITEMS,
11 | data
12 | };
13 | }
14 |
15 | export function appInit(data) {
16 | return {
17 | type: ON_APP_INIT,
18 | data
19 | };
20 | }
21 |
22 | export function updatePagination(data) {
23 | return {
24 | type: UPDATE_PAGINATION,
25 | data
26 | };
27 | }
28 |
29 | export function filterChange(data) {
30 | return {
31 | type: FILTER_CHANGE,
32 | data
33 | };
34 | }
35 |
--------------------------------------------------------------------------------
/src/containers/App/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * app request/response handler
7 | */
8 | export function* fetchApp(args) {
9 | yield* sagaRequest(
10 | appsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getApp() {
23 | yield* sagaRequestSetup(fetchApp, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getApp
29 | ];
30 |
--------------------------------------------------------------------------------
/src/containers/App/styles.scss:
--------------------------------------------------------------------------------
1 | .dl{
2 | position: relative;
3 |
4 | &__container{
5 | @extend .cf;
6 | position: relative;
7 | // overflow-x: hidden;
8 | padding-bottom: 57px;
9 | width: 102%;
10 | }
11 | }
--------------------------------------------------------------------------------
/src/containers/App/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import App from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/containers/DataList/actions.js:
--------------------------------------------------------------------------------
1 | import {} from './constants';
2 |
3 | /**
4 | * Load the repositories, this action starts the request saga
5 | */
6 | //export function notify(data) {
7 | // return {
8 | // type: NOTIFY,
9 | // data
10 | // };
11 | //}
--------------------------------------------------------------------------------
/src/containers/DataList/constants.js:
--------------------------------------------------------------------------------
1 | /*
2 | * DataListConstants
3 | * Each action has a corresponding type, which the reducer knows and picks up on.
4 | * To avoid weird typos between the reducer and the actions, we save them as
5 | * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
6 | * reducers accidentally picking up actions they shouldn't.
7 | *
8 | * Follow this format:
9 | * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
10 | */
11 | export const DEFAULT_LOCALE = 'en';
12 | //export const DEFAULT_LOCALE = 'dataList/dataList/en';
--------------------------------------------------------------------------------
/src/containers/DataList/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function dataListReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default dataListReducer;
22 |
--------------------------------------------------------------------------------
/src/containers/DataList/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * dataList request/response handler
7 | */
8 | export function* fetchDataList(args) {
9 | yield* sagaRequest(
10 | dataListsModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getDataList() {
23 | yield* sagaRequestSetup(fetchDataList, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getDataList
29 | ];
30 |
--------------------------------------------------------------------------------
/src/containers/DataList/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import DataList from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/containers/Filters/actions.js:
--------------------------------------------------------------------------------
1 | import {UPDATE_CURRENT_TAB} from './constants';
2 |
3 | /**
4 | * Load the repositories, this action starts the request saga
5 | */
6 | export function updateCurrentTab(data) {
7 | return {
8 | type: UPDATE_CURRENT_TAB,
9 | data
10 | };
11 | }
--------------------------------------------------------------------------------
/src/containers/Filters/constants.js:
--------------------------------------------------------------------------------
1 | /*
2 | * FiltersConstants
3 | * Each action has a corresponding type, which the reducer knows and picks up on.
4 | * To avoid weird typos between the reducer and the actions, we save them as
5 | * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
6 | * reducers accidentally picking up actions they shouldn't.
7 | *
8 | * Follow this format:
9 | * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
10 | */
11 | export const UPDATE_CURRENT_TAB = 'dl/UPDATE_CURRENT_TAB';
--------------------------------------------------------------------------------
/src/containers/Filters/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function filtersReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default filtersReducer;
22 |
--------------------------------------------------------------------------------
/src/containers/Filters/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * filters request/response handler
7 | */
8 | export function* fetchFilters(args) {
9 | yield* sagaRequest(
10 | filterssModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getFilters() {
23 | yield* sagaRequestSetup(fetchFilters, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getFilters
29 | ];
30 |
--------------------------------------------------------------------------------
/src/containers/Filters/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import Filters from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
11 | {children}
12 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/containers/Footer/actions.js:
--------------------------------------------------------------------------------
1 | import {} from './constants';
2 |
3 | /**
4 | * Load the repositories, this action starts the request saga
5 | */
6 | //export function notify(data) {
7 | // return {
8 | // type: NOTIFY,
9 | // data
10 | // };
11 | //}
--------------------------------------------------------------------------------
/src/containers/Footer/constants.js:
--------------------------------------------------------------------------------
1 | /*
2 | * FooterConstants
3 | * Each action has a corresponding type, which the reducer knows and picks up on.
4 | * To avoid weird typos between the reducer and the actions, we save them as
5 | * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
6 | * reducers accidentally picking up actions they shouldn't.
7 | *
8 | * Follow this format:
9 | * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
10 | */
11 | export const DEFAULT_LOCALE = 'en';
12 | //export const DEFAULT_LOCALE = 'dataList/footer/en';
--------------------------------------------------------------------------------
/src/containers/Footer/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { bindActionCreators } from 'redux';
3 | import { connect } from 'react-redux';
4 | import * as FooterActions from './actions';
5 |
6 | class Footer extends Component { // eslint-disable-line react/prefer-stateless-function
7 | constructor(props) {
8 | super(props)
9 | }
10 |
11 | render() {
12 | return (
13 |
15 | );
16 | }
17 | }
18 |
19 | //Which part of the Redux global state does our component want to receive as props?
20 | function mapStateToProps(state,ownProps) {
21 | return {
22 | config:state.app.config,
23 | footer : state.footer
24 | };
25 | }
26 |
27 | function mapDispatchToProps(dispatch) {
28 | return bindActionCreators(FooterActions, dispatch);
29 | }
30 |
31 | export default connect(
32 | mapStateToProps,
33 | mapDispatchToProps
34 | )(Footer);
--------------------------------------------------------------------------------
/src/containers/Footer/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function footerReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default footerReducer;
22 |
--------------------------------------------------------------------------------
/src/containers/Footer/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * footer request/response handler
7 | */
8 | export function* fetchFooter(args) {
9 | yield* sagaRequest(
10 | footersModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getFooter() {
23 | yield* sagaRequestSetup(fetchFooter, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getFooter
29 | ];
30 |
--------------------------------------------------------------------------------
/src/containers/Footer/styles.scss:
--------------------------------------------------------------------------------
1 | .dl__footer{
2 | clear: both;
3 | }
--------------------------------------------------------------------------------
/src/containers/Footer/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import Footer from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/containers/Header/actions.js:
--------------------------------------------------------------------------------
1 | import {} from './constants';
2 |
3 | /**
4 | * Load the repositories, this action starts the request saga
5 | */
6 | //export function notify(data) {
7 | // return {
8 | // type: NOTIFY,
9 | // data
10 | // };
11 | //}
--------------------------------------------------------------------------------
/src/containers/Header/constants.js:
--------------------------------------------------------------------------------
1 | /*
2 | * HeaderConstants
3 | * Each action has a corresponding type, which the reducer knows and picks up on.
4 | * To avoid weird typos between the reducer and the actions, we save them as
5 | * constants here. We prefix them with 'yourproject/YourComponent' so we avoid
6 | * reducers accidentally picking up actions they shouldn't.
7 | *
8 | * Follow this format:
9 | * export const YOUR_ACTION_CONSTANT = 'yourproject/YourContainer/YOUR_ACTION_CONSTANT';
10 | */
11 | export const DEFAULT_LOCALE = 'en';
12 | //export const DEFAULT_LOCALE = 'dataList/header/en';
--------------------------------------------------------------------------------
/src/containers/Header/reducer.js:
--------------------------------------------------------------------------------
1 | import { } from './constants';
2 |
3 | //@todo find a better place to inject this
4 | import config from '../../../dataListConfig';
5 |
6 | const initialState = {
7 | config
8 | };
9 |
10 | function headerReducer(state = initialState, action) {
11 | let _state = Object.assign({},state),
12 | _data = action.data;
13 |
14 | switch (action.type) {
15 |
16 | default:
17 | return _state;
18 | }
19 | }
20 |
21 | export default headerReducer;
22 |
--------------------------------------------------------------------------------
/src/containers/Header/sagas.js:
--------------------------------------------------------------------------------
1 | import * as effects from 'redux-saga/effects';
2 | import {} from './constants';
3 | import utils,{l,sagaRequest,sagaRequestSetup} from '../../utils';
4 |
5 | /**
6 | * header request/response handler
7 | */
8 | export function* fetchHeader(args) {
9 | yield* sagaRequest(
10 | headersModel.getById,
11 | {entityUUID: args.data.entityUUID},
12 | GET_APP_SUCCEEDED,
13 | GET_APP_FAILED,
14 | {...effects},
15 | false
16 | );
17 | }
18 |
19 | /**
20 | * Root saga manages watcher lifecycle
21 | */
22 | export function* getHeader() {
23 | yield* sagaRequestSetup(fetchHeader, GET_APP, {...effects})
24 | }
25 |
26 | // Bootstrap sagas
27 | export default [
28 | getHeader
29 | ];
30 |
--------------------------------------------------------------------------------
/src/containers/Header/styles.scss:
--------------------------------------------------------------------------------
1 | .dl__header{
2 | clear: both;
3 | }
--------------------------------------------------------------------------------
/src/containers/Header/tests/index.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 |
4 | import Header from '../index';
5 |
6 | describe('', () => {
7 | it('should render its children', () => {
8 | const children = (Test
);
9 | const renderedComponent = shallow(
10 |
13 | );
14 | expect(renderedComponent.contains(children)).toBe(true);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/containers/LanguageProvider/actions.js:
--------------------------------------------------------------------------------
1 | /*
2 | *
3 | * LanguageProvider actions
4 | *
5 | */
6 |
7 | import {
8 | CHANGE_LOCALE,
9 | } from './constants';
10 |
11 | export function changeLocale(languageLocale) {
12 | return {
13 | type: CHANGE_LOCALE,
14 | locale: languageLocale,
15 | };
16 | }
17 |
--------------------------------------------------------------------------------
/src/containers/LanguageProvider/constants.js:
--------------------------------------------------------------------------------
1 | /*
2 | *
3 | * LanguageProvider constants
4 | *
5 | */
6 |
7 | export const CHANGE_LOCALE = 'app/LanguageToggle/CHANGE_LOCALE';
8 | export const DEFAULT_LOCALE = 'en';
9 |
--------------------------------------------------------------------------------
/src/containers/LanguageProvider/reducer.js:
--------------------------------------------------------------------------------
1 | /*
2 | *
3 | * LanguageProvider reducer
4 | *
5 | */
6 | import {
7 | CHANGE_LOCALE,
8 | } from './constants';
9 | import {
10 | DEFAULT_LOCALE,
11 | } from '../App/constants'; // eslint-disable-line
12 |
13 | const initialState = {
14 | locale: DEFAULT_LOCALE,
15 | };
16 |
17 | function languageProviderReducer(state = initialState, action) {
18 | switch (action.type) {
19 | case CHANGE_LOCALE:
20 | return state
21 | .set('locale', action.locale);
22 | default:
23 | return state;
24 | }
25 | }
26 |
27 | export default languageProviderReducer;
28 |
--------------------------------------------------------------------------------
/src/containers/LanguageProvider/tests/actions.test.js:
--------------------------------------------------------------------------------
1 | import {
2 | changeLocale,
3 | } from '../actions';
4 |
5 | import {
6 | CHANGE_LOCALE,
7 | } from '../constants';
8 |
9 | describe('LanguageProvider actions', () => {
10 | describe('Change Local Action', () => {
11 | it('has a type of CHANGE_LOCALE', () => {
12 | const expected = {
13 | type: CHANGE_LOCALE,
14 | locale: 'de',
15 | };
16 | expect(changeLocale('de')).toEqual(expected);
17 | });
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/src/containers/LanguageProvider/tests/reducer.test.js:
--------------------------------------------------------------------------------
1 | import languageProviderReducer from '../reducer';
2 | import {
3 | CHANGE_LOCALE,
4 | } from '../constants';
5 |
6 | describe('languageProviderReducer', () => {
7 | it('returns the initial state', () => {
8 | expect(languageProviderReducer(undefined, {})).toEqual({
9 | locale: 'en',
10 | });
11 | });
12 |
13 | it('changes the locale', () => {
14 | expect(languageProviderReducer(undefined, { type: CHANGE_LOCALE, locale: 'de' }).toJS()).toEqual({
15 | locale: 'de',
16 | });
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/src/containers/LanguageProvider/tests/selectors.test.js:
--------------------------------------------------------------------------------
1 | import {
2 | selectLanguage,
3 | } from '../selectors';
4 |
5 | describe('selectLanguage', () => {
6 | it('should select the global state', () => {
7 | const globalState = {};
8 | const mockedState = {
9 | language: globalState,
10 | };
11 | expect(selectLanguage(mockedState)).toEqual(globalState);
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/src/containers/imports.scss:
--------------------------------------------------------------------------------
1 | @import "./App/styles";
2 | @import "./DataList/styles";
3 | @import "./Filters/styles";
4 | @import "./Footer/styles";
5 | @import "./Header/styles";
6 |
--------------------------------------------------------------------------------
/src/dataListConfig.example.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/dataListConfig.example.zip
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/favicon.ico
--------------------------------------------------------------------------------
/src/global-styles.js:
--------------------------------------------------------------------------------
1 | import { injectGlobal } from 'styled-components';
2 |
3 | /* eslint no-unused-expressions: 0 */
4 | injectGlobal`
5 | html,
6 | body {
7 | height: 100%;
8 | width: 100%;
9 | }
10 |
11 | body {
12 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
13 | }
14 |
15 | body.fontLoaded {
16 | font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
17 | }
18 |
19 | #app {
20 | min-height: 100%;
21 | min-width: 100%;
22 | }
23 |
24 | p,
25 | label {
26 | line-height: 1.5em;
27 | }
28 | `;
29 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | import App from './App';
3 | var pjson = require('../package.json');
4 |
5 | /** Style loading */
6 | import './style/main.scss';
7 |
8 | // if(window.Oly && window.Oly.debugMode) {
9 | console.log(`react-filteredlist | version ${pjson.version}`);
10 | // }
11 |
12 | // Create the global
13 | if (!window.ReactFilteredlist) { window['ReactFilteredlist'] = {}; }
14 |
15 | export default class FilteredList extends React.Component{
16 | render () {
17 | return ();
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/reducers.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Combine all reducers in this file and export the combined reducers.
3 | * If we were to do this in store.js, reducers wouldn't be hot reloadable.
4 | */
5 | import { compose, combineReducers } from 'redux';
6 | import appReducer from './containers/App/reducer';
7 | import languageProviderReducer from './containers/LanguageProvider/reducer';
8 |
9 | /**
10 | * Creates the main reducer with the asynchronously loaded ones
11 | */
12 | export default function createReducer(asyncReducers) {
13 | return combineReducers({
14 | language: languageProviderReducer,
15 | app:appReducer,
16 | ...asyncReducers,
17 | });
18 | }
19 |
--------------------------------------------------------------------------------
/src/style/base/_base-rules.scss:
--------------------------------------------------------------------------------
1 | html {
2 |
3 | }
4 |
5 | body{
6 | overflow-x: hidden;
7 | }
--------------------------------------------------------------------------------
/src/style/base/_imports.scss:
--------------------------------------------------------------------------------
1 | @import "./base-rules";
2 | // @import "./reset";
3 | @import "./color";
4 | @import "./typebase";
5 |
6 |
--------------------------------------------------------------------------------
/src/style/base/_reset.scss:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 | html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, cite, code, del, em, img, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
6 | time, mark, audio, video {
7 | margin: 0;
8 | padding: 0;
9 | border: 0;
10 | font-size: 100%;
11 | font: inherit;
12 | vertical-align: baseline;
13 | }
14 |
15 | /* HTML5 display-group reset for older browsers */
16 | article, aside, details, figcaption, figure,
17 | footer, header, hgroup, menu, nav, section {
18 | display: block;
19 | }
20 |
21 | ul {
22 | list-style: none;
23 | }
--------------------------------------------------------------------------------
/src/style/components/_autocomplete.scss:
--------------------------------------------------------------------------------
1 | /** Hack to fix element UI's select input leaving complete values in the shadow DOM of the inner input**/
2 | .dl__filterItem {
3 | .el-select{
4 | .el-input__inner:not(:focus){
5 | color: white;
6 | }
7 | }
8 | }
--------------------------------------------------------------------------------
/src/style/components/_checkbox.scss:
--------------------------------------------------------------------------------
1 | /* Checkbox styler */
2 | .checkbox{
3 | background: none;
4 | outline: none;
5 | border-radius: 3px;
6 | border: 1px solid rgba(0,0,0,0.5);
7 | appearance: none;
8 | width: 14px;
9 | height: 14px;
10 | line-height: 14px;
11 | position: relative;
12 | margin: 0 3px;
13 |
14 | &:after{
15 | content: '';
16 | font-family: FontAwesome;
17 | position: absolute;
18 | width: 14px;
19 | height: 14px;
20 | font-size: 10px;
21 | left: 1px;
22 | }
23 |
24 | &:checked{
25 | &:after{
26 | color: $color-go;
27 | }
28 | }
29 | }
--------------------------------------------------------------------------------
/src/style/components/_datatable.scss:
--------------------------------------------------------------------------------
1 | .datatable{
2 | &__rowHeader{
3 | height: 33px;
4 | line-height: 33px;
5 | font-weight: 700;
6 | font-size: 14px;
7 | font-family: 'Roboto',sans-serif;
8 | margin-top: 36px;
9 | }
10 |
11 | &__a{
12 | padding: 0;
13 | color: $color-text;
14 | display: block;
15 | height: 33px;
16 | line-height: 33px;
17 | font-size: 12px;
18 | vertical-align: middle;
19 | border-bottom: 1px solid $color-border;
20 | @extend .truncate;
21 |
22 | &:hover{
23 | //background: rgba(0,0,0,0.02);
24 | //box-shadow: 0 2px 2px 0 rgba(0,0,0,.16), 0 0 2px 0 rgba(0,0,0,.12);
25 | //margin-top: -1px;
26 | background: #fafafa;
27 | }
28 | }
29 |
30 | &__gravatar{
31 | height: 27px;
32 | width: 27px;
33 | overflow: hidden;
34 | border-radius: 50%;
35 | margin: 3px auto;
36 |
37 | img{
38 | height: 30px;
39 | width: auto;
40 | text-align: center;
41 | }
42 | }
43 | }
--------------------------------------------------------------------------------
/src/style/components/_imports.scss:
--------------------------------------------------------------------------------
1 | @import "./checkbox";
2 | @import "./select";
3 | @import "./datatable";
4 | @import "./material";
5 | @import "./buttons";
6 | @import "./autocomplete";
7 | @import "./customDisplayItem/imports";
--------------------------------------------------------------------------------
/src/style/components/_material.scss:
--------------------------------------------------------------------------------
1 | .material{
2 | &__spacer{
3 | height: 39px;
4 | width: 100%;
5 | }
6 |
7 | &__container{
8 | padding-left: 7%;
9 | padding-right: 7%;
10 | margin-top: 39px;
11 | padding-bottom: 99px;
12 |
13 | @include break(md){
14 | padding-left: 15px;
15 | padding-right: 15px;
16 | }
17 | }
18 |
19 | &__bottom{
20 | &Right{
21 | position: fixed;
22 | bottom: 36px;
23 | right: 36px;
24 | }
25 | }
26 | }
--------------------------------------------------------------------------------
/src/style/components/_select.scss:
--------------------------------------------------------------------------------
1 | .select-style{
2 | border-radius: 3px;
3 | overflow: hidden;
4 | width: 100%;
5 | position: relative;
6 |
7 | select{
8 | appearance: none;
9 | -webkit-appearance: none;
10 | width: 100%;
11 | }
12 |
13 | &:after {
14 | content: "▼";
15 | position: absolute;
16 | top: 10px;
17 | right: 1px;
18 | bottom: 1px;
19 | font-size: 60%;
20 | padding: 0 7px;
21 | line-height: 33px;
22 | background: rgba(0, 0, 0, 0.4);
23 | color: rgba(255,255,255,0.7);
24 | pointer-events: none;
25 | border-radius: 0 3px 3px 0;
26 | }
27 |
28 | &:hover{
29 | opacity: 0.7;
30 | cursor: pointer;
31 | }
32 | }
--------------------------------------------------------------------------------
/src/style/components/customDisplayItem/_imports.scss:
--------------------------------------------------------------------------------
1 | @import './styles';
--------------------------------------------------------------------------------
/src/style/layout/_imports.scss:
--------------------------------------------------------------------------------
1 | @import "./media-queries";
2 | @import "./grid";
3 |
--------------------------------------------------------------------------------
/src/style/main.scss:
--------------------------------------------------------------------------------
1 | @import "./base/imports";
2 | @import "./layout/imports";
3 | @import "./utils/imports";
4 | @import "./pages/imports";
5 | @import "./vendor/imports";
6 | @import "./components/imports";
7 |
8 | /* Application Component Styles*/
9 | @import "../components/imports";
10 | @import "../containers/imports";
--------------------------------------------------------------------------------
/src/style/pages/_all.scss:
--------------------------------------------------------------------------------
1 | .dl{
2 | overflow: hidden;
3 |
4 | *{
5 | box-sizing: border-box;
6 | outline: none;
7 | }
8 |
9 | h1,h2,h3,h4,ul,{
10 | margin: 0;
11 | }
12 | }
--------------------------------------------------------------------------------
/src/style/pages/_imports.scss:
--------------------------------------------------------------------------------
1 | @import './all';
--------------------------------------------------------------------------------
/src/style/utils/_animations.scss:
--------------------------------------------------------------------------------
1 | /* Mixins for CSS animations */
2 |
3 | // General duration shortcut
4 | @mixin duration($time: .7s){
5 | -webkit-transition-duration: $time;
6 | -moz-transition-duration: $time;
7 | -o-transition-duration: $time;
8 | -ms-transition-duration: $time;
9 | transition-duration: $time;
10 | }
11 |
12 |
13 | // Google Material Design inspired shadow
14 | @mixin materialZ($opacity:0.75){
15 | // Material Z shadow
16 | -webkit-box-shadow: 1px 0px 25px 2px rgba(26,26,26,$opacity);
17 | -moz-box-shadow: 1px 0px 25px 2px rgba(26,26,26,$opacity);
18 | box-shadow: 1px 0px 25px 2px rgba(26,26,26,$opacity);
19 | }
20 |
21 | // Transition shortcut
22 | @mixin transition($transition...) {
23 | -moz-transition: $transition;
24 | -o-transition: $transition;
25 | -webkit-transition: $transition;
26 | transition: $transition;
27 | }
28 |
29 |
--------------------------------------------------------------------------------
/src/style/utils/_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 | %clearfix {
12 | *zoom: 1;
13 | &:before, &:after {
14 | content: " ";
15 | display: table;
16 | }
17 | &:after {
18 | clear: both;
19 | }
20 | }
21 | /**
22 | * For IE 6/7 only
23 | * Include this rule to trigger hasLayout and contain floats.
24 | */
25 | %clearfix {
26 | *zoom: 1;
27 | }
28 |
29 | .cf,
30 | .clearfix{
31 | @extend %clearfix;
32 | }
33 |
34 |
--------------------------------------------------------------------------------
/src/style/utils/_gradients.scss:
--------------------------------------------------------------------------------
1 | /* Mixins for CSS Gradients */
2 |
3 | @mixin bg_gradient($start,$end){
4 | background: $start; /* Old browsers */
5 | background: -moz-linear-gradient(top, $start 0%, $end 100%); /* FF3.6+ */
6 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start), color-stop(100%,$end)); /* Chrome,Safari4+ */
7 | background: -webkit-linear-gradient(top, $start 0%,$end 100%); /* Chrome10+,Safari5.1+ */
8 | background: -o-linear-gradient(top, $start 0%,$end 100%); /* Opera 11.10+ */
9 | background: -ms-linear-gradient(top, $start 0%,$end 100%); /* IE10+ */
10 | background: linear-gradient(to bottom, $start 0%,$end 100%); /* W3C */
11 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start', endColorstr='$end',GradientType=0 ); /* IE6-9 */
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/utils/_imports.scss:
--------------------------------------------------------------------------------
1 | @import "./gradients";
2 | @import "./placeholders";
3 | @import "./animations";
4 | @import "./util";
5 | @import "./clearfix";
--------------------------------------------------------------------------------
/src/style/utils/_placeholders.scss:
--------------------------------------------------------------------------------
1 | /* Placeholders */
2 |
3 | // @extend %btn;
4 | %btn {
5 | padding: 10px;
6 | color:#fff;
7 | curser: pointer;
8 | border: none;
9 | shadow: none;
10 | font-size: 14px;
11 | width: 150px;
12 | margin: 5px 0;
13 | text-align: center;
14 | display: block;
15 | }
16 |
17 |
--------------------------------------------------------------------------------
/src/style/vendor/_imports.scss:
--------------------------------------------------------------------------------
1 | @import "./flexbox";
2 | // @import "./animate-css/animate";
3 | @import "./font-awesome/font-awesome"; // Large - use only if necessary
4 |
5 | // @import "./hint";
6 | // @import "./noty";
7 | // @import "./bootstrap/bootstrap";
8 | // @import "./hover-css/hover";
9 | // @import "./owl-carousel/owlcarousel";
10 | // @import "./typeplate-sk/typeplate";
11 | // @import "./react-select";
12 | @import "./react-super-select";
13 | @import './react-datepicker.scss';
14 | @import './flatpickr';
15 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/_breadcrumbs.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Breadcrumbs
3 | // --------------------------------------------------
4 |
5 |
6 | .breadcrumb {
7 | padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
8 | margin-bottom: $line-height-computed;
9 | list-style: none;
10 | background-color: $breadcrumb-bg;
11 | border-radius: $border-radius-base;
12 |
13 | > li {
14 | display: inline-block;
15 |
16 | + li:before {
17 | // [converter] Workaround for https://github.com/sass/libsass/issues/1115
18 | $nbsp: "\00a0";
19 | content: "#{$breadcrumb-separator}#{$nbsp}"; // Unicode space added since inline-block means non-collapsing white-space
20 | padding: 0 5px;
21 | color: $breadcrumb-color;
22 | }
23 | }
24 |
25 | > .active {
26 | color: $breadcrumb-active-color;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/_responsive-embed.scss:
--------------------------------------------------------------------------------
1 | // Embeds responsive
2 | //
3 | // Credit: Nicolas Gallagher and SUIT CSS.
4 |
5 | .embed-responsive {
6 | position: relative;
7 | display: block;
8 | height: 0;
9 | padding: 0;
10 | overflow: hidden;
11 |
12 | .embed-responsive-item,
13 | iframe,
14 | embed,
15 | object,
16 | video {
17 | position: absolute;
18 | top: 0;
19 | left: 0;
20 | bottom: 0;
21 | height: 100%;
22 | width: 100%;
23 | border: 0;
24 | }
25 | }
26 |
27 | // Modifier class for 16:9 aspect ratio
28 | .embed-responsive-16by9 {
29 | padding-bottom: 56.25%;
30 | }
31 |
32 | // Modifier class for 4:3 aspect ratio
33 | .embed-responsive-4by3 {
34 | padding-bottom: 75%;
35 | }
36 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/_wells.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Wells
3 | // --------------------------------------------------
4 |
5 |
6 | // Base class
7 | .well {
8 | min-height: 20px;
9 | padding: 19px;
10 | margin-bottom: 20px;
11 | background-color: $well-bg;
12 | border: 1px solid $well-border;
13 | border-radius: $border-radius-base;
14 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
15 | blockquote {
16 | border-color: #ddd;
17 | border-color: rgba(0,0,0,.15);
18 | }
19 | }
20 |
21 | // Sizes
22 | .well-lg {
23 | padding: 24px;
24 | border-radius: $border-radius-large;
25 | }
26 | .well-sm {
27 | padding: 9px;
28 | border-radius: $border-radius-small;
29 | }
30 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_alerts.scss:
--------------------------------------------------------------------------------
1 | // Alerts
2 |
3 | @mixin alert-variant($background, $border, $text-color) {
4 | background-color: $background;
5 | border-color: $border;
6 | color: $text-color;
7 |
8 | hr {
9 | border-top-color: darken($border, 5%);
10 | }
11 | .alert-link {
12 | color: darken($text-color, 10%);
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_background-variant.scss:
--------------------------------------------------------------------------------
1 | // Contextual backgrounds
2 |
3 | // [converter] $parent hack
4 | @mixin bg-variant($parent, $color) {
5 | #{$parent} {
6 | background-color: $color;
7 | }
8 | a#{$parent}:hover,
9 | a#{$parent}:focus {
10 | background-color: darken($color, 10%);
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_border-radius.scss:
--------------------------------------------------------------------------------
1 | // Single side border-radius
2 |
3 | @mixin border-top-radius($radius) {
4 | border-top-right-radius: $radius;
5 | border-top-left-radius: $radius;
6 | }
7 | @mixin border-right-radius($radius) {
8 | border-bottom-right-radius: $radius;
9 | border-top-right-radius: $radius;
10 | }
11 | @mixin border-bottom-radius($radius) {
12 | border-bottom-right-radius: $radius;
13 | border-bottom-left-radius: $radius;
14 | }
15 | @mixin border-left-radius($radius) {
16 | border-bottom-left-radius: $radius;
17 | border-top-left-radius: $radius;
18 | }
19 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_center-block.scss:
--------------------------------------------------------------------------------
1 | // Center-align a block level element
2 |
3 | @mixin center-block() {
4 | display: block;
5 | margin-left: auto;
6 | margin-right: auto;
7 | }
8 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_clearfix.scss:
--------------------------------------------------------------------------------
1 | // Clearfix
2 | //
3 | // For modern browsers
4 | // 1. The space content is one way to avoid an Opera bug when the
5 | // contenteditable attribute is included anywhere else in the document.
6 | // Otherwise it causes space to appear at the top and bottom of elements
7 | // that are clearfixed.
8 | // 2. The use of `table` rather than `block` is only necessary if using
9 | // `:before` to contain the top-margins of child elements.
10 | //
11 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/
12 |
13 | @mixin clearfix() {
14 | &:before,
15 | &:after {
16 | content: " "; // 1
17 | display: table; // 2
18 | }
19 | &:after {
20 | clear: both;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_hide-text.scss:
--------------------------------------------------------------------------------
1 | // CSS image replacement
2 | //
3 | // Heads up! v3 launched with only `.hide-text()`, but per our pattern for
4 | // mixins being reused as classes with the same name, this doesn't hold up. As
5 | // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
6 | //
7 | // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
8 |
9 | // Deprecated as of v3.0.1 (has been removed in v4)
10 | @mixin hide-text() {
11 | font: 0/0 a;
12 | color: transparent;
13 | text-shadow: none;
14 | background-color: transparent;
15 | border: 0;
16 | }
17 |
18 | // New mixin to use as of v3.0.1
19 | @mixin text-hide() {
20 | @include hide-text;
21 | }
22 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_labels.scss:
--------------------------------------------------------------------------------
1 | // Labels
2 |
3 | @mixin label-variant($color) {
4 | background-color: $color;
5 |
6 | &[href] {
7 | &:hover,
8 | &:focus {
9 | background-color: darken($color, 10%);
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_list-group.scss:
--------------------------------------------------------------------------------
1 | // List Groups
2 |
3 | @mixin list-group-item-variant($state, $background, $color) {
4 | .list-group-item-#{$state} {
5 | color: $color;
6 | background-color: $background;
7 |
8 | // [converter] extracted a&, button& to a.list-group-item-#{$state}, button.list-group-item-#{$state}
9 | }
10 |
11 | a.list-group-item-#{$state},
12 | button.list-group-item-#{$state} {
13 | color: $color;
14 |
15 | .list-group-item-heading {
16 | color: inherit;
17 | }
18 |
19 | &:hover,
20 | &:focus {
21 | color: $color;
22 | background-color: darken($background, 5%);
23 | }
24 | &.active,
25 | &.active:hover,
26 | &.active:focus {
27 | color: #fff;
28 | background-color: $color;
29 | border-color: $color;
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_nav-divider.scss:
--------------------------------------------------------------------------------
1 | // Horizontal dividers
2 | //
3 | // Dividers (basically an hr) within dropdowns and nav lists
4 |
5 | @mixin nav-divider($color: #e5e5e5) {
6 | height: 1px;
7 | margin: (($line-height-computed / 2) - 1) 0;
8 | overflow: hidden;
9 | background-color: $color;
10 | }
11 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_nav-vertical-align.scss:
--------------------------------------------------------------------------------
1 | // Navbar vertical align
2 | //
3 | // Vertically center elements in the navbar.
4 | // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
5 |
6 | @mixin navbar-vertical-align($element-height) {
7 | margin-top: (($navbar-height - $element-height) / 2);
8 | margin-bottom: (($navbar-height - $element-height) / 2);
9 | }
10 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_opacity.scss:
--------------------------------------------------------------------------------
1 | // Opacity
2 |
3 | @mixin opacity($opacity) {
4 | opacity: $opacity;
5 | // IE8 filter
6 | $opacity-ie: ($opacity * 100);
7 | filter: alpha(opacity=$opacity-ie);
8 | }
9 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_pagination.scss:
--------------------------------------------------------------------------------
1 | // Pagination
2 |
3 | @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
4 | > li {
5 | > a,
6 | > span {
7 | padding: $padding-vertical $padding-horizontal;
8 | font-size: $font-size;
9 | line-height: $line-height;
10 | }
11 | &:first-child {
12 | > a,
13 | > span {
14 | @include border-left-radius($border-radius);
15 | }
16 | }
17 | &:last-child {
18 | > a,
19 | > span {
20 | @include border-right-radius($border-radius);
21 | }
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_panels.scss:
--------------------------------------------------------------------------------
1 | // Panels
2 |
3 | @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
4 | border-color: $border;
5 |
6 | & > .panel-heading {
7 | color: $heading-text-color;
8 | background-color: $heading-bg-color;
9 | border-color: $heading-border;
10 |
11 | + .panel-collapse > .panel-body {
12 | border-top-color: $border;
13 | }
14 | .badge {
15 | color: $heading-bg-color;
16 | background-color: $heading-text-color;
17 | }
18 | }
19 | & > .panel-footer {
20 | + .panel-collapse > .panel-body {
21 | border-bottom-color: $border;
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_progress-bar.scss:
--------------------------------------------------------------------------------
1 | // Progress bars
2 |
3 | @mixin progress-bar-variant($color) {
4 | background-color: $color;
5 |
6 | // Deprecated parent class requirement as of v3.2.0
7 | .progress-striped & {
8 | @include gradient-striped;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_reset-filter.scss:
--------------------------------------------------------------------------------
1 | // Reset filters for IE
2 | //
3 | // When you need to remove a gradient background, do not forget to use this to reset
4 | // the IE filter for IE9 and below.
5 |
6 | @mixin reset-filter() {
7 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
8 | }
9 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_reset-text.scss:
--------------------------------------------------------------------------------
1 | @mixin reset-text() {
2 | font-family: $font-family-base;
3 | // We deliberately do NOT reset font-size.
4 | font-style: normal;
5 | font-weight: normal;
6 | letter-spacing: normal;
7 | line-break: auto;
8 | line-height: $line-height-base;
9 | text-align: left; // Fallback for where `start` is not supported
10 | text-align: start;
11 | text-decoration: none;
12 | text-shadow: none;
13 | text-transform: none;
14 | white-space: normal;
15 | word-break: normal;
16 | word-spacing: normal;
17 | word-wrap: normal;
18 | }
19 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_resize.scss:
--------------------------------------------------------------------------------
1 | // Resize anything
2 |
3 | @mixin resizable($direction) {
4 | resize: $direction; // Options: horizontal, vertical, both
5 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
6 | }
7 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_responsive-visibility.scss:
--------------------------------------------------------------------------------
1 | // Responsive utilities
2 |
3 | //
4 | // More easily include all the states for responsive-utilities.less.
5 | // [converter] $parent hack
6 | @mixin responsive-visibility($parent) {
7 | #{$parent} {
8 | display: block !important;
9 | }
10 | table#{$parent} { display: table !important; }
11 | tr#{$parent} { display: table-row !important; }
12 | th#{$parent},
13 | td#{$parent} { display: table-cell !important; }
14 | }
15 |
16 | // [converter] $parent hack
17 | @mixin responsive-invisibility($parent) {
18 | #{$parent} {
19 | display: none !important;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_size.scss:
--------------------------------------------------------------------------------
1 | // Sizing shortcuts
2 |
3 | @mixin size($width, $height) {
4 | width: $width;
5 | height: $height;
6 | }
7 |
8 | @mixin square($size) {
9 | @include size($size, $size);
10 | }
11 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_tab-focus.scss:
--------------------------------------------------------------------------------
1 | // WebKit-style focus
2 |
3 | @mixin tab-focus() {
4 | // Default
5 | outline: thin dotted;
6 | // WebKit
7 | outline: 5px auto -webkit-focus-ring-color;
8 | outline-offset: -2px;
9 | }
10 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_table-row.scss:
--------------------------------------------------------------------------------
1 | // Tables
2 |
3 | @mixin table-row-variant($state, $background) {
4 | // Exact selectors below required to override `.table-striped` and prevent
5 | // inheritance to nested tables.
6 | .table > thead > tr,
7 | .table > tbody > tr,
8 | .table > tfoot > tr {
9 | > td.#{$state},
10 | > th.#{$state},
11 | &.#{$state} > td,
12 | &.#{$state} > th {
13 | background-color: $background;
14 | }
15 | }
16 |
17 | // Hover states for `.table-hover`
18 | // Note: this is not available for cells or rows within `thead` or `tfoot`.
19 | .table-hover > tbody > tr {
20 | > td.#{$state}:hover,
21 | > th.#{$state}:hover,
22 | &.#{$state}:hover > td,
23 | &:hover > .#{$state},
24 | &.#{$state}:hover > th {
25 | background-color: darken($background, 5%);
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_text-emphasis.scss:
--------------------------------------------------------------------------------
1 | // Typography
2 |
3 | // [converter] $parent hack
4 | @mixin text-emphasis-variant($parent, $color) {
5 | #{$parent} {
6 | color: $color;
7 | }
8 | a#{$parent}:hover,
9 | a#{$parent}:focus {
10 | color: darken($color, 10%);
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/bootstrap/bootstrap/mixins/_text-overflow.scss:
--------------------------------------------------------------------------------
1 | // Text overflow
2 | // Requires inline-block or block for proper styling
3 |
4 | @mixin text-overflow() {
5 | overflow: hidden;
6 | text-overflow: ellipsis;
7 | white-space: nowrap;
8 | }
9 |
--------------------------------------------------------------------------------
/src/style/vendor/font-awesome/_animated.scss:
--------------------------------------------------------------------------------
1 | // Animated Icons
2 | // --------------------------
3 |
4 | .#{$fa-css-prefix}-spin {
5 | animation: fa-spin 2s infinite linear;
6 | }
7 |
8 | .#{$fa-css-prefix}-pulse {
9 | animation: fa-spin 1s infinite steps(8);
10 | }
11 |
12 | @keyframes fa-spin {
13 | 0% {
14 | transform: rotate(0deg);
15 | }
16 |
17 | 100% {
18 | transform: rotate(360deg);
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/style/vendor/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 | .pull-right { float: right; }
11 | .pull-left { float: left; }
12 |
13 | .#{$fa-css-prefix} {
14 | &.pull-left { margin-right: .3em; }
15 | &.pull-right { margin-left: .3em; }
16 | }
17 |
--------------------------------------------------------------------------------
/src/style/vendor/font-awesome/_core.scss:
--------------------------------------------------------------------------------
1 | // Base Class Definition
2 | // -------------------------
3 |
4 | .#{$fa-css-prefix} {
5 | display: inline-block;
6 | font: normal normal normal 14px/1 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/style/vendor/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/style/vendor/font-awesome/_font-awesome.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome 4.2.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 "spinning";
15 | @import "rotated-flipped";
16 | @import "stacked";
17 | @import "icons";
18 |
--------------------------------------------------------------------------------
/src/style/vendor/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/style/vendor/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/style/vendor/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.woff?v=#{$fa-version}') format('woff'),
9 | url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
10 | url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
11 | //src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
12 | font-weight: normal;
13 | font-style: normal;
14 | }
15 |
--------------------------------------------------------------------------------
/src/style/vendor/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/style/vendor/font-awesome/_screen-reader.scss:
--------------------------------------------------------------------------------
1 | // Screen Readers
2 | // -------------------------
3 |
4 | .sr-only { @include sr-only; }
5 | .sr-only-focusable { @include sr-only-focusable; }
6 |
--------------------------------------------------------------------------------
/src/style/vendor/font-awesome/_spinning.scss:
--------------------------------------------------------------------------------
1 | // Spinning Icons
2 | // --------------------------
3 |
4 | .#{$fa-css-prefix}-spin {
5 | -webkit-animation: fa-spin 2s infinite linear;
6 | animation: fa-spin 2s infinite linear;
7 | }
8 |
9 | @-webkit-keyframes fa-spin {
10 | 0% {
11 | -webkit-transform: rotate(0deg);
12 | transform: rotate(0deg);
13 | }
14 | 100% {
15 | -webkit-transform: rotate(359deg);
16 | transform: rotate(359deg);
17 | }
18 | }
19 |
20 | @keyframes fa-spin {
21 | 0% {
22 | -webkit-transform: rotate(0deg);
23 | transform: rotate(0deg);
24 | }
25 | 100% {
26 | -webkit-transform: rotate(359deg);
27 | transform: rotate(359deg);
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/style/vendor/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/style/vendor/font-awesome/brands.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 5.3.1 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | @import 'variables';
6 |
7 | @font-face {
8 | font-family: 'Font Awesome 5 Brands';
9 | font-style: normal;
10 | font-weight: normal;
11 | src: url('#{$fa-font-path}/fa-brands-400.eot');
12 | src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
13 | url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
14 | url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
15 | url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
16 | url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
17 | }
18 |
19 | .fab {
20 | font-family: 'Font Awesome 5 Brands';
21 | }
22 |
--------------------------------------------------------------------------------
/src/style/vendor/font-awesome/fontawesome.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 5.3.1 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | @import 'variables';
6 | @import 'mixins';
7 | @import 'core';
8 | @import 'larger';
9 | @import 'fixed-width';
10 | @import 'list';
11 | @import 'bordered-pulled';
12 | @import 'animated';
13 | @import 'rotated-flipped';
14 | @import 'stacked';
15 | @import 'icons';
16 | @import 'screen-reader';
17 |
--------------------------------------------------------------------------------
/src/style/vendor/font-awesome/regular.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 5.3.1 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | @import 'variables';
6 |
7 | @font-face {
8 | font-family: 'Font Awesome 5 Free';
9 | font-style: normal;
10 | font-weight: 400;
11 | src: url('#{$fa-font-path}/fa-regular-400.eot');
12 | src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
13 | url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
14 | url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
15 | url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
16 | url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
17 | }
18 |
19 | .far {
20 | font-family: 'Font Awesome 5 Free';
21 | font-weight: 400;
22 | }
23 |
--------------------------------------------------------------------------------
/src/style/vendor/font-awesome/solid.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 5.3.1 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | @import 'variables';
6 |
7 | @font-face {
8 | font-family: 'Font Awesome 5 Free';
9 | font-style: normal;
10 | font-weight: 900;
11 | src: url('#{$fa-font-path}/fa-solid-900.eot');
12 | src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
13 | url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
14 | url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
15 | url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
16 | url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
17 | }
18 |
19 | .fa,
20 | .fas {
21 | font-family: 'Font Awesome 5 Free';
22 | font-weight: 900;
23 | }
24 |
--------------------------------------------------------------------------------
/src/style/vendor/font-awesome/v4-shims.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome Free 5.3.1 by @fontawesome - https://fontawesome.com
3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 | */
5 | @import 'variables';
6 | @import 'shims';
7 |
--------------------------------------------------------------------------------
/src/style/vendor/fonts/fa-brands-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/vendor/fonts/fa-brands-400.eot
--------------------------------------------------------------------------------
/src/style/vendor/fonts/fa-brands-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/vendor/fonts/fa-brands-400.ttf
--------------------------------------------------------------------------------
/src/style/vendor/fonts/fa-brands-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/vendor/fonts/fa-brands-400.woff
--------------------------------------------------------------------------------
/src/style/vendor/fonts/fa-brands-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/vendor/fonts/fa-brands-400.woff2
--------------------------------------------------------------------------------
/src/style/vendor/fonts/fa-regular-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/vendor/fonts/fa-regular-400.eot
--------------------------------------------------------------------------------
/src/style/vendor/fonts/fa-regular-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/vendor/fonts/fa-regular-400.ttf
--------------------------------------------------------------------------------
/src/style/vendor/fonts/fa-regular-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/vendor/fonts/fa-regular-400.woff
--------------------------------------------------------------------------------
/src/style/vendor/fonts/fa-regular-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/vendor/fonts/fa-regular-400.woff2
--------------------------------------------------------------------------------
/src/style/vendor/fonts/fa-solid-900.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/vendor/fonts/fa-solid-900.eot
--------------------------------------------------------------------------------
/src/style/vendor/fonts/fa-solid-900.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/vendor/fonts/fa-solid-900.ttf
--------------------------------------------------------------------------------
/src/style/vendor/fonts/fa-solid-900.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/vendor/fonts/fa-solid-900.woff
--------------------------------------------------------------------------------
/src/style/vendor/fonts/fa-solid-900.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/vendor/fonts/fa-solid-900.woff2
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/_mixins.scss:
--------------------------------------------------------------------------------
1 | // prefix declarations
2 | @mixin prefixed($property, $value) {
3 | @if $webkit == true {
4 | -webkit-#{$property}: #{$value};
5 | }
6 |
7 | @if $moz == true {
8 | -moz-#{$property}: #{$value};
9 | }
10 |
11 | @if $ms == true {
12 | -ms-#{$property}: #{$value};
13 | }
14 |
15 | @if $o == true {
16 | -o-#{$property}: #{$value};
17 | }
18 |
19 | #{$property}: #{$value};
20 | }
21 |
22 | // prefix keyframes
23 | @mixin keyframes($name) {
24 | @if $webkit == true {
25 | @-webkit-keyframes #{$name} {
26 | @content;
27 | }
28 | }
29 |
30 | @if $moz == true {
31 | @-moz-keyframes #{$name} {
32 | @content;
33 | }
34 | }
35 |
36 | @if $ms == true {
37 | @-ms-keyframes #{$name} {
38 | @content;
39 | }
40 | }
41 |
42 | @if $o == true {
43 | @-o-keyframes #{$name} {
44 | @content;
45 | }
46 | }
47 |
48 | @keyframes #{$name} {
49 | @content;
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_bounce-in.scss:
--------------------------------------------------------------------------------
1 | /* Bounce In */
2 | @mixin bounce-in {
3 | @include hacks();
4 | @include prefixed(transition-duration, $slowDuration);
5 |
6 | &:hover,
7 | &:focus,
8 | &:active {
9 | @include prefixed(transform, scale(1.2));
10 | @include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_bounce-out.scss:
--------------------------------------------------------------------------------
1 | /* Bounce Out */
2 | @mixin bounce-out {
3 | @include hacks();
4 | @include prefixed(transition-duration, $slowDuration);
5 |
6 | &:hover,
7 | &:focus,
8 | &:active {
9 | @include prefixed(transform, scale(.8));
10 | @include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_buzz.scss:
--------------------------------------------------------------------------------
1 | /* Buzz */
2 | @include keyframes(#{$nameSpace}-buzz) {
3 | 50% {
4 | @include prefixed(transform, translateX(3px) rotate(2deg));
5 | }
6 |
7 | 100% {
8 | @include prefixed(transform, translateX(-3px) rotate(-2deg));
9 | }
10 | }
11 |
12 | @mixin buzz {
13 | @include hacks();
14 |
15 | &:hover,
16 | &:focus,
17 | &:active {
18 | @include prefixed(animation-name, #{$nameSpace}-buzz);
19 | @include prefixed(animation-duration, .15s);
20 | @include prefixed(animation-timing-function, linear);
21 | @include prefixed(animation-iteration-count, infinite);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_float.scss:
--------------------------------------------------------------------------------
1 | /* Float */
2 | @mixin float {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, transform);
6 | @include prefixed(transition-timing-function, ease-out);
7 |
8 | &:hover,
9 | &:focus,
10 | &:active {
11 | @include prefixed(transform, translateY(-8px));
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_grow-rotate.scss:
--------------------------------------------------------------------------------
1 | /* Grow Rotate */
2 | @mixin grow-rotate {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, transform);
6 |
7 | &:hover,
8 | &:focus,
9 | &:active {
10 | @include prefixed(transform, scale(1.1) rotate(4deg));
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_grow.scss:
--------------------------------------------------------------------------------
1 | /* Grow */
2 | @mixin grow {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, transform);
6 |
7 | &:hover,
8 | &:focus,
9 | &:active {
10 | @include prefixed(transform, scale(1.1));
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_pop.scss:
--------------------------------------------------------------------------------
1 | /* Pop */
2 | @include keyframes(#{$nameSpace}-pop) {
3 | 50% {
4 | @include prefixed(transform, scale(1.2));
5 | }
6 | }
7 |
8 | @mixin pop {
9 | @include hacks();
10 |
11 | &:hover,
12 | &:focus,
13 | &:active {
14 | @include prefixed(animation-name, #{$nameSpace}-pop);
15 | @include prefixed(animation-duration, $mediumDuration);
16 | @include prefixed(animation-timing-function, linear);
17 | @include prefixed(animation-iteration-count, 1);
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_pulse-grow.scss:
--------------------------------------------------------------------------------
1 | /* Pulse Grow */
2 | @include keyframes(#{$nameSpace}-pulse-grow) {
3 | to {
4 | @include prefixed(transform, scale(1.1));
5 | }
6 | }
7 |
8 | @mixin pulse-grow {
9 | @include hacks();
10 |
11 | &:hover,
12 | &:focus,
13 | &:active {
14 | @include prefixed(animation-name, #{$nameSpace}-pulse-grow);
15 | @include prefixed(animation-duration, $mediumDuration);
16 | @include prefixed(animation-timing-function, linear);
17 | @include prefixed(animation-iteration-count, infinite);
18 | @include prefixed(animation-direction, alternate);
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_pulse-shrink.scss:
--------------------------------------------------------------------------------
1 | /* Pulse Shrink */
2 | @include keyframes(#{$nameSpace}-pulse-shrink) {
3 | to {
4 | @include prefixed(transform, scale(.9));
5 | }
6 | }
7 |
8 | @mixin pulse-shrink {
9 | @include hacks();
10 |
11 | &:hover,
12 | &:focus,
13 | &:active {
14 | @include prefixed(animation-name, #{$nameSpace}-pulse-shrink);
15 | @include prefixed(animation-duration, $mediumDuration);
16 | @include prefixed(animation-timing-function, linear);
17 | @include prefixed(animation-iteration-count, infinite);
18 | @include prefixed(animation-direction, alternate);
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_pulse.scss:
--------------------------------------------------------------------------------
1 | /* Pulse */
2 | @include keyframes(#{$nameSpace}-pulse) {
3 | 25% {
4 | @include prefixed(transform, scale(1.1));
5 | }
6 |
7 | 75% {
8 | @include prefixed(transform, scale(.9));
9 | }
10 | }
11 |
12 | @mixin pulse {
13 | @include hacks();
14 |
15 | &:hover,
16 | &:focus,
17 | &:active {
18 | @include prefixed(animation-name, #{$nameSpace}-pulse);
19 | @include prefixed(animation-duration, 1s);
20 | @include prefixed(animation-timing-function, linear);
21 | @include prefixed(animation-iteration-count, infinite);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_push.scss:
--------------------------------------------------------------------------------
1 | /* Push */
2 | @include keyframes(#{$nameSpace}-push) {
3 | 50% {
4 | @include prefixed(transform, scale(.8));
5 | }
6 |
7 | 100% {
8 | @include prefixed(transform, scale(1));
9 | }
10 | }
11 |
12 | @mixin push {
13 | @include hacks();
14 |
15 | &:hover,
16 | &:focus,
17 | &:active {
18 | @include prefixed(animation-name, #{$nameSpace}-push);
19 | @include prefixed(animation-duration, .3s);
20 | @include prefixed(animation-timing-function, linear);
21 | @include prefixed(animation-iteration-count, 1);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_rotate.scss:
--------------------------------------------------------------------------------
1 | /* Rotate */
2 | @mixin rotate {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, transform);
6 |
7 | &:hover,
8 | &:focus,
9 | &:active {
10 | @include prefixed(transform, rotate(4deg));
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_shrink.scss:
--------------------------------------------------------------------------------
1 | /* Shrink */
2 | @mixin shrink {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, transform);
6 |
7 | &:hover,
8 | &:focus,
9 | &:active {
10 | @include prefixed(transform, scale(.9));
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_sink.scss:
--------------------------------------------------------------------------------
1 | /* Sink */
2 | @mixin sink {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, transform);
6 | @include prefixed(transition-timing-function, ease-out);
7 |
8 | &:hover,
9 | &:focus,
10 | &:active {
11 | @include prefixed(transform, translateY(8px));
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_skew-backward.scss:
--------------------------------------------------------------------------------
1 | /* Skew Backward */
2 | @mixin skew-backward {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, transform);
6 | @include prefixed(transform-origin, 0 100%);
7 |
8 | &:hover,
9 | &:focus,
10 | &:active {
11 | @include prefixed(transform, skew(10deg));
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_skew-forward.scss:
--------------------------------------------------------------------------------
1 | /* Skew Forward */
2 | @mixin skew-forward {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, transform);
6 | @include prefixed(transform-origin, 0 100%);
7 |
8 | &:hover,
9 | &:focus,
10 | &:active {
11 | @include prefixed(transform, skew(-10deg));
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_skew.scss:
--------------------------------------------------------------------------------
1 | /* Skew */
2 | @mixin skew {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, transform);
6 |
7 | &:hover,
8 | &:focus,
9 | &:active {
10 | @include prefixed(transform, skew(-10deg));
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_wobble-bottom.scss:
--------------------------------------------------------------------------------
1 | /* Wobble Bottom */
2 | @include keyframes(#{$nameSpace}-wobble-bottom) {
3 | 16.65% {
4 | @include prefixed(transform, skew(-12deg));
5 | }
6 |
7 | 33.3% {
8 | @include prefixed(transform, skew(10deg));
9 | }
10 |
11 | 49.95% {
12 | @include prefixed(transform, skew(-6deg));
13 | }
14 |
15 | 66.6% {
16 | @include prefixed(transform, skew(4deg));
17 | }
18 |
19 | 83.25% {
20 | @include prefixed(transform, skew(-2deg));
21 | }
22 |
23 | 100% {
24 | @include prefixed(transform, skew(0));
25 | }
26 | }
27 |
28 | @mixin wobble-bottom {
29 | @include hacks();
30 | @include prefixed(transform-origin, 100% 0);
31 |
32 | &:hover,
33 | &:focus,
34 | &:active {
35 | @include prefixed(animation-name, #{$nameSpace}-wobble-bottom);
36 | @include prefixed(animation-duration, 1s);
37 | @include prefixed(animation-timing-function, ease-in-out);
38 | @include prefixed(animation-iteration-count, 1);
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_wobble-horizontal.scss:
--------------------------------------------------------------------------------
1 | /* Wobble Horizontal */
2 | @include keyframes(#{$nameSpace}-wobble-horizontal) {
3 | 16.65% {
4 | @include prefixed(transform, translateX(8px));
5 | }
6 |
7 | 33.3% {
8 | @include prefixed(transform, translateX(-6px));
9 | }
10 |
11 | 49.95% {
12 | @include prefixed(transform, translateX(4px));
13 | }
14 |
15 | 66.6% {
16 | @include prefixed(transform, translateX(-2px));
17 | }
18 |
19 | 83.25% {
20 | @include prefixed(transform, translateX(1px));
21 | }
22 |
23 | 100% {
24 | @include prefixed(transform, translateX(0));
25 | }
26 | }
27 |
28 | @mixin wobble-horizontal {
29 | @include hacks();
30 |
31 | &:hover,
32 | &:focus,
33 | &:active {
34 | @include prefixed(animation-name, #{$nameSpace}-wobble-horizontal);
35 | @include prefixed(animation-duration, 1s);
36 | @include prefixed(animation-timing-function, ease-in-out);
37 | @include prefixed(animation-iteration-count, 1);
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_wobble-skew.scss:
--------------------------------------------------------------------------------
1 | /* Wobble Skew */
2 | @include keyframes(#{$nameSpace}-wobble-skew) {
3 | 16.65% {
4 | @include prefixed(transform, skew(-12deg));
5 | }
6 |
7 | 33.3% {
8 | @include prefixed(transform, skew(10deg));
9 | }
10 |
11 | 49.95% {
12 | @include prefixed(transform, skew(-6deg));
13 | }
14 |
15 | 66.6% {
16 | @include prefixed(transform, skew(4deg));
17 | }
18 |
19 | 83.25% {
20 | @include prefixed(transform, skew(-2deg));
21 | }
22 |
23 | 100% {
24 | @include prefixed(transform, skew(0));
25 | }
26 | }
27 |
28 | @mixin wobble-skew {
29 | @include hacks();
30 |
31 | &:hover,
32 | &:focus,
33 | &:active {
34 | @include prefixed(animation-name, #{$nameSpace}-wobble-skew);
35 | @include prefixed(animation-duration, 1s);
36 | @include prefixed(animation-timing-function, ease-in-out);
37 | @include prefixed(animation-iteration-count, 1);
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_wobble-top.scss:
--------------------------------------------------------------------------------
1 | /* Wobble Top */
2 | @include keyframes(#{$nameSpace}-wobble-top) {
3 | 16.65% {
4 | @include prefixed(transform, skew(-12deg));
5 | }
6 |
7 | 33.3% {
8 | @include prefixed(transform, skew(10deg));
9 | }
10 |
11 | 49.95% {
12 | @include prefixed(transform, skew(-6deg));
13 | }
14 |
15 | 66.6% {
16 | @include prefixed(transform, skew(4deg));
17 | }
18 |
19 | 83.25% {
20 | @include prefixed(transform, skew(-2deg));
21 | }
22 |
23 | 100% {
24 | @include prefixed(transform, skew(0));
25 | }
26 | }
27 |
28 | @mixin wobble-top {
29 | @include hacks();
30 | @include prefixed(transform-origin, 0 100%);
31 |
32 | &:hover,
33 | &:focus,
34 | &:active {
35 | @include prefixed(animation-name, #{$nameSpace}-wobble-top);
36 | @include prefixed(animation-duration, 1s);
37 | @include prefixed(animation-timing-function, ease-in-out);
38 | @include prefixed(animation-iteration-count, 1);
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/2d-transitions/_wobble-vertical.scss:
--------------------------------------------------------------------------------
1 | /* Wobble Vertical */
2 | @include keyframes(#{$nameSpace}-wobble-vertical) {
3 | 16.65% {
4 | @include prefixed(transform, translateY(8px));
5 | }
6 |
7 | 33.3% {
8 | @include prefixed(transform, translateY(-6px));
9 | }
10 |
11 | 49.95% {
12 | @include prefixed(transform, translateY(4px));
13 | }
14 |
15 | 66.6% {
16 | @include prefixed(transform, translateY(-2px));
17 | }
18 |
19 | 83.25% {
20 | @include prefixed(transform, translateY(1px));
21 | }
22 |
23 | 100% {
24 | @include prefixed(transform, translateY(0));
25 | }
26 | }
27 |
28 | @mixin wobble-vertical {
29 | @include hacks();
30 |
31 | &:hover,
32 | &:focus,
33 | &:active {
34 | @include prefixed(animation-name, #{$nameSpace}-wobble-vertical);
35 | @include prefixed(animation-duration, 1s);
36 | @include prefixed(animation-timing-function, ease-in-out);
37 | @include prefixed(animation-iteration-count, 1);
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_back-pulse.scss:
--------------------------------------------------------------------------------
1 | /* Back Pulse */
2 | @include keyframes(#{$nameSpace}-back-pulse) {
3 | 50% {
4 | background-color: rgba(32, 152, 209, .75);
5 | }
6 | }
7 |
8 | @mixin back-pulse {
9 | @include hacks();
10 | overflow: hidden;
11 | @include prefixed(transition-duration, $slowDuration);
12 | @include prefixed(transition-property, "color, background-color");
13 |
14 | &:hover,
15 | &:focus,
16 | &:active {
17 | @include prefixed(animation-name, #{$nameSpace}-back-pulse);
18 | @include prefixed(animation-duration, 1s);
19 | @include prefixed(animation-delay, $slowDuration);
20 | @include prefixed(animation-timing-function, linear);
21 | @include prefixed(animation-iteration-count, infinite);
22 | background-color: $activeColor;
23 | background-color: rgba(32, 152, 209, 1);
24 | color: white;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_bounce-to-bottom.scss:
--------------------------------------------------------------------------------
1 | /* Bounce To Bottom */
2 | @mixin bounce-to-bottom {
3 | @include hacks();
4 | position: relative;
5 | @include prefixed(transition-property, color);
6 | @include prefixed(transition-duration, $slowDuration);
7 |
8 | &:before {
9 | content: "";
10 | position: absolute;
11 | z-index: -1;
12 | top: 0;
13 | left: 0;
14 | right: 0;
15 | bottom: 0;
16 | background: $activeColor;
17 | @include prefixed(transform, scaleY(0));
18 | @include prefixed(transform-origin, 50% 0);
19 | @include prefixed(transition-property, transform);
20 | @include prefixed(transition-duration, $slowDuration);
21 | @include prefixed(transition-timing-function, ease-out);
22 | }
23 |
24 | &:hover,
25 | &:focus,
26 | &:active {
27 | color: white;
28 |
29 | &:before {
30 | @include prefixed(transform, scaleY(1));
31 | @include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_bounce-to-left.scss:
--------------------------------------------------------------------------------
1 | /* Bounce To Left */
2 | @mixin bounce-to-left {
3 | @include hacks();
4 | position: relative;
5 | @include prefixed(transition-property, color);
6 | @include prefixed(transition-duration, $slowDuration);
7 |
8 | &:before {
9 | content: "";
10 | position: absolute;
11 | z-index: -1;
12 | top: 0;
13 | left: 0;
14 | right: 0;
15 | bottom: 0;
16 | background: $activeColor;
17 | @include prefixed(transform, scaleX(0));
18 | @include prefixed(transform-origin, 100% 50%);
19 | @include prefixed(transition-property, transform);
20 | @include prefixed(transition-duration, $slowDuration);
21 | @include prefixed(transition-timing-function, ease-out);
22 | }
23 |
24 | &:hover,
25 | &:focus,
26 | &:active {
27 | color: white;
28 |
29 | &:before {
30 | @include prefixed(transform, scaleX(1));
31 | @include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_bounce-to-right.scss:
--------------------------------------------------------------------------------
1 | /* Bounce To Right */
2 | @mixin bounce-to-right {
3 | @include hacks();
4 | position: relative;
5 | @include prefixed(transition-property, color);
6 | @include prefixed(transition-duration, $slowDuration);
7 |
8 | &:before {
9 | content: "";
10 | position: absolute;
11 | z-index: -1;
12 | top: 0;
13 | left: 0;
14 | right: 0;
15 | bottom: 0;
16 | background: $activeColor;
17 | @include prefixed(transform, scaleX(0));
18 | @include prefixed(transform-origin, 0 50%);
19 | @include prefixed(transition-property, transform);
20 | @include prefixed(transition-duration, $slowDuration);
21 | @include prefixed(transition-timing-function, ease-out);
22 | }
23 |
24 | &:hover,
25 | &:focus,
26 | &:active {
27 | color: white;
28 |
29 | &:before {
30 | @include prefixed(transform, scaleX(1));
31 | @include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_bounce-to-top.scss:
--------------------------------------------------------------------------------
1 | /* Bounce To Top */
2 | @mixin bounce-to-top {
3 | @include hacks();
4 | position: relative;
5 | @include prefixed(transition-property, color);
6 | @include prefixed(transition-duration, $slowDuration);
7 |
8 | &:before {
9 | content: "";
10 | position: absolute;
11 | z-index: -1;
12 | top: 0;
13 | left: 0;
14 | right: 0;
15 | bottom: 0;
16 | background: $activeColor;
17 | @include prefixed(transform, scaleY(0));
18 | @include prefixed(transform-origin, 50% 100%);
19 | @include prefixed(transition-property, transform);
20 | @include prefixed(transition-duration, $slowDuration);
21 | @include prefixed(transition-timing-function, ease-out);
22 | }
23 |
24 | &:hover,
25 | &:focus,
26 | &:active {
27 | color: white;
28 |
29 | &:before {
30 | @include prefixed(transform, scaleY(1));
31 | @include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_fade.scss:
--------------------------------------------------------------------------------
1 | /* Fade */
2 | @mixin fade {
3 | @include hacks();
4 | overflow: hidden;
5 | @include prefixed(transition-duration, $mediumDuration);
6 | @include prefixed(transition-property, "color, background-color");
7 |
8 | &:hover,
9 | &:focus,
10 | &:active {
11 | background-color: $activeColor;
12 | color: white;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_radial-in.scss:
--------------------------------------------------------------------------------
1 | /* Radial In */
2 | @mixin radial-in {
3 | @include hacks();
4 | position: relative;
5 | overflow: hidden;
6 | background: $activeColor;
7 | @include prefixed(transition-property, color);
8 | @include prefixed(transition-duration, $mediumDuration);
9 |
10 | &:before {
11 | content: "";
12 | position: absolute;
13 | z-index: -1;
14 | top: 0;
15 | left: 0;
16 | right: 0;
17 | bottom: 0;
18 | background: $primaryColor;
19 | border-radius: 100%;
20 | @include prefixed(transform, scale(2));
21 | @include prefixed(transition-property, transform);
22 | @include prefixed(transition-duration, $mediumDuration);
23 | @include prefixed(transition-timing-function, ease-out);
24 | }
25 |
26 | &:hover,
27 | &:focus,
28 | &:active {
29 | color: white;
30 |
31 | &:before {
32 | @include prefixed(transform, scale(0));
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_radial-out.scss:
--------------------------------------------------------------------------------
1 | /* Radial Out */
2 | @mixin radial-out {
3 | @include hacks();
4 | position: relative;
5 | overflow: hidden;
6 | background: $primaryColor;
7 | @include prefixed(transition-property, color);
8 | @include prefixed(transition-duration, $mediumDuration);
9 |
10 | &:before {
11 | content: "";
12 | position: absolute;
13 | z-index: -1;
14 | top: 0;
15 | left: 0;
16 | right: 0;
17 | bottom: 0;
18 | background: $activeColor;
19 | border-radius: 100%;
20 | @include prefixed(transform, scale(0));
21 | @include prefixed(transition-property, transform);
22 | @include prefixed(transition-duration, $mediumDuration);
23 | @include prefixed(transition-timing-function, ease-out);
24 | }
25 |
26 | &:hover,
27 | &:focus,
28 | &:active {
29 | color: white;
30 |
31 | &:before {
32 | @include prefixed(transform, scale(2));
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_rectangle-in.scss:
--------------------------------------------------------------------------------
1 | /* Rectangle In */
2 | @mixin rectangle-in {
3 | @include hacks();
4 | position: relative;
5 | background: $activeColor;
6 | @include prefixed(transition-property, color);
7 | @include prefixed(transition-duration, $mediumDuration);
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | top: 0;
14 | left: 0;
15 | right: 0;
16 | bottom: 0;
17 | background: $primaryColor;
18 | @include prefixed(transform, scale(1));
19 | @include prefixed(transition-property, transform);
20 | @include prefixed(transition-duration, $mediumDuration);
21 | @include prefixed(transition-timing-function, ease-out);
22 | }
23 |
24 | &:hover,
25 | &:focus,
26 | &:active {
27 | color: white;
28 |
29 | &:before {
30 | @include prefixed(transform, scale(0));
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_rectangle-out.scss:
--------------------------------------------------------------------------------
1 | /* Rectangle Out */
2 | @mixin rectangle-out {
3 | @include hacks();
4 | position: relative;
5 | background: $primaryColor;
6 | @include prefixed(transition-property, color);
7 | @include prefixed(transition-duration, $mediumDuration);
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | top: 0;
14 | left: 0;
15 | right: 0;
16 | bottom: 0;
17 | background: $activeColor;
18 | @include prefixed(transform, scale(0));
19 | @include prefixed(transition-property, transform);
20 | @include prefixed(transition-duration, $mediumDuration);
21 | @include prefixed(transition-timing-function, ease-out);
22 | }
23 |
24 | &:hover,
25 | &:focus,
26 | &:active {
27 | color: white;
28 |
29 | &:before {
30 | @include prefixed(transform, scale(1));
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_shutter-in-horizontal.scss:
--------------------------------------------------------------------------------
1 | /* Shutter In Horizontal */
2 | @mixin shutter-in-horizontal {
3 | @include hacks();
4 | position: relative;
5 | background: $activeColor;
6 | @include prefixed(transition-property, color);
7 | @include prefixed(transition-duration, $mediumDuration);
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | top: 0;
14 | bottom: 0;
15 | left: 0;
16 | right: 0;
17 | background: $primaryColor;
18 | @include prefixed(transform, scaleX(1));
19 | @include prefixed(transform-origin, 50%);
20 | @include prefixed(transition-property, transform);
21 | @include prefixed(transition-duration, $mediumDuration);
22 | @include prefixed(transition-timing-function, ease-out);
23 | }
24 |
25 | &:hover,
26 | &:focus,
27 | &:active {
28 | color: white;
29 |
30 | &:before {
31 | @include prefixed(transform, scaleX(0));
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_shutter-in-vertical.scss:
--------------------------------------------------------------------------------
1 | /* Shutter In Vertical */
2 | @mixin shutter-in-vertical {
3 | @include hacks();
4 | position: relative;
5 | background: $activeColor;
6 | @include prefixed(transition-property, color);
7 | @include prefixed(transition-duration, $mediumDuration);
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | top: 0;
14 | bottom: 0;
15 | left: 0;
16 | right: 0;
17 | background: $primaryColor;
18 | @include prefixed(transform, scaleY(1));
19 | @include prefixed(transform-origin, 50%);
20 | @include prefixed(transition-property, transform);
21 | @include prefixed(transition-duration, $mediumDuration);
22 | @include prefixed(transition-timing-function, ease-out);
23 | }
24 |
25 | &:hover,
26 | &:focus,
27 | &:active {
28 | color: white;
29 |
30 | &:before {
31 | @include prefixed(transform, scaleY(0));
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_shutter-out-horizontal.scss:
--------------------------------------------------------------------------------
1 | /* Shutter Out Horizontal */
2 | @mixin shutter-out-horizontal {
3 | @include hacks();
4 | position: relative;
5 | background: $primaryColor;
6 | @include prefixed(transition-property, color);
7 | @include prefixed(transition-duration, $mediumDuration);
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | top: 0;
14 | bottom: 0;
15 | left: 0;
16 | right: 0;
17 | background: $activeColor;
18 | @include prefixed(transform, scaleX(0));
19 | @include prefixed(transform-origin, 50%);
20 | @include prefixed(transition-property, transform);
21 | @include prefixed(transition-duration, $mediumDuration);
22 | @include prefixed(transition-timing-function, ease-out);
23 | }
24 |
25 | &:hover,
26 | &:focus,
27 | &:active {
28 | color: white;
29 |
30 | &:before {
31 | @include prefixed(transform, scaleX(1));
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_shutter-out-vertical.scss:
--------------------------------------------------------------------------------
1 | /* Shutter Out Vertical */
2 | @mixin shutter-out-vertical {
3 | @include hacks();
4 | position: relative;
5 | background: $primaryColor;
6 | @include prefixed(transition-property, color);
7 | @include prefixed(transition-duration, $mediumDuration);
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | top: 0;
14 | bottom: 0;
15 | left: 0;
16 | right: 0;
17 | background: $activeColor;
18 | @include prefixed(transform, scaleY(0));
19 | @include prefixed(transform-origin, 50%);
20 | @include prefixed(transition-property, transform);
21 | @include prefixed(transition-duration, $mediumDuration);
22 | @include prefixed(transition-timing-function, ease-out);
23 | }
24 |
25 | &:hover,
26 | &:focus,
27 | &:active {
28 | color: white;
29 |
30 | &:before {
31 | @include prefixed(transform, scaleY(1));
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_sweep-to-bottom.scss:
--------------------------------------------------------------------------------
1 | /* Sweep To Bottom */
2 | @mixin sweep-to-bottom {
3 | @include hacks();
4 | position: relative;
5 | @include prefixed(transition-property, color);
6 | @include prefixed(transition-duration, $mediumDuration);
7 |
8 | &:before {
9 | content: "";
10 | position: absolute;
11 | z-index: -1;
12 | top: 0;
13 | left: 0;
14 | right: 0;
15 | bottom: 0;
16 | background: $activeColor;
17 | @include prefixed(transform, scaleY(0));
18 | @include prefixed(transform-origin, 50% 0);
19 | @include prefixed(transition-property, transform);
20 | @include prefixed(transition-duration, $mediumDuration);
21 | @include prefixed(transition-timing-function, ease-out);
22 | }
23 |
24 | &:hover,
25 | &:focus,
26 | &:active {
27 | color: white;
28 |
29 | &:before {
30 | @include prefixed(transform, scaleY(1));
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_sweep-to-left.scss:
--------------------------------------------------------------------------------
1 | /* Sweep To Left */
2 | @mixin sweep-to-left {
3 | @include hacks();
4 | position: relative;
5 | @include prefixed(transition-property, color);
6 | @include prefixed(transition-duration, $mediumDuration);
7 |
8 | &:before {
9 | content: "";
10 | position: absolute;
11 | z-index: -1;
12 | top: 0;
13 | left: 0;
14 | right: 0;
15 | bottom: 0;
16 | background: $activeColor;
17 | @include prefixed(transform, scaleX(0));
18 | @include prefixed(transform-origin, 100% 50%);
19 | @include prefixed(transition-property, transform);
20 | @include prefixed(transition-duration, $mediumDuration);
21 | @include prefixed(transition-timing-function, ease-out);
22 | }
23 |
24 | &:hover,
25 | &:focus,
26 | &:active {
27 | color: white;
28 |
29 | &:before {
30 | @include prefixed(transform, scaleX(1));
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_sweep-to-right.scss:
--------------------------------------------------------------------------------
1 | /* Sweep To Right */
2 | @mixin sweep-to-right {
3 | @include hacks();
4 | position: relative;
5 | @include prefixed(transition-property, color);
6 | @include prefixed(transition-duration, $mediumDuration);
7 |
8 | &:before {
9 | content: "";
10 | position: absolute;
11 | z-index: -1;
12 | top: 0;
13 | left: 0;
14 | right: 0;
15 | bottom: 0;
16 | background: $activeColor;
17 | @include prefixed(transform, scaleX(0));
18 | @include prefixed(transform-origin, 0 50%);
19 | @include prefixed(transition-property, transform);
20 | @include prefixed(transition-duration, $mediumDuration);
21 | @include prefixed(transition-timing-function, ease-out);
22 | }
23 |
24 | &:hover,
25 | &:focus,
26 | &:active {
27 | color: white;
28 |
29 | &:before {
30 | @include prefixed(transform, scaleX(1));
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/background-transitions/_sweep-to-top.scss:
--------------------------------------------------------------------------------
1 | /* Sweep To Top */
2 | @mixin sweep-to-top {
3 | @include hacks();
4 | position: relative;
5 | @include prefixed(transition-property, color);
6 | @include prefixed(transition-duration, $mediumDuration);
7 |
8 | &:before {
9 | content: "";
10 | position: absolute;
11 | z-index: -1;
12 | top: 0;
13 | left: 0;
14 | right: 0;
15 | bottom: 0;
16 | background: $activeColor;
17 | @include prefixed(transform, scaleY(0));
18 | @include prefixed(transform-origin, 50% 100%);
19 | @include prefixed(transition-property, transform);
20 | @include prefixed(transition-duration, $mediumDuration);
21 | @include prefixed(transition-timing-function, ease-out);
22 | }
23 |
24 | &:hover,
25 | &:focus,
26 | &:active {
27 | color: white;
28 |
29 | &:before {
30 | @include prefixed(transform, scaleY(1));
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_border-fade.scss:
--------------------------------------------------------------------------------
1 | /* Border Fade */
2 | @mixin border-fade {
3 | $borderWidth: 4px;
4 |
5 | @include hacks();
6 | @include prefixed(transition-duration, $mediumDuration);
7 | @include prefixed(transition-property, box-shadow);
8 | box-shadow:
9 | inset 0 0 0 $borderWidth $primaryColor,
10 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
11 |
12 | &:hover,
13 | &:focus,
14 | &:active {
15 | box-shadow:
16 | inset 0 0 0 $borderWidth $activeColor,
17 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_hollow.scss:
--------------------------------------------------------------------------------
1 | /* Hollow */
2 | @mixin hollow {
3 | $borderWidth: 4px;
4 |
5 | @include hacks();
6 | @include prefixed(transition-duration, $mediumDuration);
7 | @include prefixed(transition-property, background);
8 | box-shadow:
9 | inset 0 0 0 $borderWidth $primaryColor,
10 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
11 |
12 | &:hover,
13 | &:focus,
14 | &:active {
15 | background: none;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_outline-out.scss:
--------------------------------------------------------------------------------
1 | /* Outline Out */
2 | @mixin outline-out {
3 | $outerBorderWidth: 4px;
4 | $innerBorderWidth: 4px;
5 |
6 | @include hacks();
7 | position: relative;
8 |
9 | &:before {
10 | content: '';
11 | position: absolute;
12 | border: $primaryColor solid $outerBorderWidth;
13 | top: 0;
14 | right: 0;
15 | bottom: 0;
16 | left: 0;
17 | @include prefixed(transition-duration, .3s);
18 | @include prefixed(transition-property, "top, right, bottom, left");
19 | }
20 |
21 | &:hover:before,
22 | &:focus:before,
23 | &:active:before {
24 | top: -($outerBorderWidth + $innerBorderWidth);
25 | right: -($outerBorderWidth + $innerBorderWidth);
26 | bottom: -($outerBorderWidth + $innerBorderWidth);
27 | left: -($outerBorderWidth + $innerBorderWidth);
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_overline-from-center.scss:
--------------------------------------------------------------------------------
1 | /* Overline From Center */
2 | @mixin overline-from-center {
3 | $duration: $mediumDuration;
4 |
5 | @include hacks();
6 | position: relative;
7 | overflow: hidden;
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | left: 50%;
14 | right: 50%;
15 | top: 0;
16 | background: $activeColor;
17 | height: 4px;
18 | @include prefixed(transition-property, "left, right");
19 | @include prefixed(transition-duration, $duration);
20 | @include prefixed(transition-timing-function, ease-out);
21 | }
22 |
23 | &:hover,
24 | &:focus,
25 | &:active {
26 |
27 | &:before {
28 | left: 0;
29 | right: 0;
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_overline-from-left.scss:
--------------------------------------------------------------------------------
1 | /* Overline From Left */
2 | @mixin overline-from-left {
3 | $duration: $mediumDuration;
4 |
5 | @include hacks();
6 | position: relative;
7 | overflow: hidden;
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | left: 0;
14 | right: 100%;
15 | top: 0;
16 | background: $activeColor;
17 | height: 4px;
18 | @include prefixed(transition-property, "right");
19 | @include prefixed(transition-duration, $duration);
20 | @include prefixed(transition-timing-function, ease-out);
21 | }
22 |
23 | &:hover,
24 | &:focus,
25 | &:active {
26 |
27 | &:before {
28 | right: 0;
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_overline-from-right.scss:
--------------------------------------------------------------------------------
1 | /* Overline From Right */
2 | @mixin overline-from-right {
3 | $duration: $mediumDuration;
4 |
5 | @include hacks();
6 | position: relative;
7 | overflow: hidden;
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | left: 100%;
14 | right: 0;
15 | top: 0;
16 | background: $activeColor;
17 | height: 4px;
18 | @include prefixed(transition-property, "left");
19 | @include prefixed(transition-duration, $duration);
20 | @include prefixed(transition-timing-function, ease-out);
21 | }
22 |
23 | &:hover,
24 | &:focus,
25 | &:active {
26 |
27 | &:before {
28 | left: 0;
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_overline-reveal.scss:
--------------------------------------------------------------------------------
1 | /* Overline Reveal */
2 | @mixin overline-reveal {
3 | $duration: $mediumDuration;
4 |
5 | @include hacks();
6 | position: relative;
7 | overflow: hidden;
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | left: 0;
14 | right: 0;
15 | top: 0;
16 | background: $activeColor;
17 | height: 4px;
18 | @include prefixed(transform, translateY(-4px));
19 | @include prefixed(transition-property, transform);
20 | @include prefixed(transition-duration, $duration);
21 | @include prefixed(transition-timing-function, ease-out);
22 | }
23 |
24 | &:hover,
25 | &:focus,
26 | &:active {
27 |
28 | &:before {
29 | @include prefixed(transform, translateY(0));
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_reveal.scss:
--------------------------------------------------------------------------------
1 | /* Reveal */
2 | @mixin reveal {
3 | $duration: #{$fastDuration};
4 |
5 | @include hacks();
6 | position: relative;
7 | overflow: hidden;
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | left: 0;
14 | right: 0;
15 | top: 0;
16 | bottom: 0;
17 | border-color: #{$activeColor};
18 | border-style: solid;
19 | border-width: 0;
20 | @include prefixed(transition-property, border-width);
21 | @include prefixed(transition-duration, #{$duration});
22 | @include prefixed(transition-timing-function, ease-out);
23 | }
24 |
25 | &:hover,
26 | &:focus,
27 | &:active {
28 |
29 | &:before {
30 | @include prefixed(transform, translateY(0));
31 | border-width: 4px;
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_ripple-in.scss:
--------------------------------------------------------------------------------
1 | /* Ripple In */
2 | @include keyframes(#{$nameSpace}-ripple-in) {
3 | 100% {
4 | top: 0;
5 | right: 0;
6 | bottom: 0;
7 | left: 0;
8 | opacity: 1;
9 | }
10 | }
11 |
12 | @mixin ripple-in {
13 | $outerBorderWidth: 4px;
14 | $innerBorderWidth: 4px;
15 |
16 | @include hacks();
17 | position: relative;
18 |
19 | &:before {
20 | content: '';
21 | position: absolute;
22 | border: $primaryColor solid $outerBorderWidth;
23 | top: -(6px + 6px);
24 | right: -(6px + 6px);
25 | bottom: -(6px + 6px);
26 | left: -(6px + 6px);
27 | opacity: 0;
28 | @include prefixed(animation-duration, 1s);
29 | }
30 |
31 | &:hover:before,
32 | &:focus:before,
33 | &:active:before {
34 | @include prefixed(animation-name, #{$nameSpace}-ripple-in);
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_ripple-out.scss:
--------------------------------------------------------------------------------
1 | /* Ripple Out */
2 | @include keyframes(#{$nameSpace}-ripple-out) {
3 | 100% {
4 | top: -(6px + 6px);
5 | right: -(6px + 6px);
6 | bottom: -(6px + 6px);
7 | left: -(6px + 6px);
8 | opacity: 0;
9 | }
10 | }
11 |
12 | @mixin ripple-out {
13 | $outerBorderWidth: 6px;
14 | $innerBorderWidth: 6px;
15 |
16 | @include hacks();
17 | position: relative;
18 |
19 | &:before {
20 | content: '';
21 | position: absolute;
22 | border: $primaryColor solid $outerBorderWidth;
23 | top: 0;
24 | right: 0;
25 | bottom: 0;
26 | left: 0;
27 | @include prefixed(animation-duration, 1s);
28 | }
29 |
30 | &:hover:before,
31 | &:focus:before,
32 | &:active:before {
33 | @include prefixed(animation-name, #{$nameSpace}-ripple-out);
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_round-corners.scss:
--------------------------------------------------------------------------------
1 | /* Round Corners */
2 | @mixin round-corners {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, border-radius);
6 |
7 | &:hover,
8 | &:focus,
9 | &:active {
10 | border-radius: 1em;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_trim.scss:
--------------------------------------------------------------------------------
1 | /* Trim */
2 | @mixin trim {
3 | $outerBorderWidth: 4px;
4 | $innerBorderWidth: 4px;
5 |
6 | @include hacks();
7 | position: relative;
8 |
9 | &:before {
10 | content: '';
11 | position: absolute;
12 | border: white solid $innerBorderWidth;
13 | top: $outerBorderWidth;
14 | left: $outerBorderWidth;
15 | right: $outerBorderWidth;
16 | bottom: $outerBorderWidth;
17 | opacity: 0;
18 | @include prefixed(transition-duration, $mediumDuration);
19 | @include prefixed(transition-property, opacity);
20 | }
21 |
22 | &:hover:before,
23 | &:focus:before,
24 | &:active:before {
25 | opacity: 1;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_underline-from-center.scss:
--------------------------------------------------------------------------------
1 | /* Underline From Center */
2 | @mixin underline-from-center {
3 | $duration: $mediumDuration;
4 |
5 | @include hacks();
6 | position: relative;
7 | overflow: hidden;
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | left: 50%;
14 | right: 50%;
15 | bottom: 0;
16 | background: $activeColor;
17 | height: 4px;
18 | @include prefixed(transition-property, "left, right");
19 | @include prefixed(transition-duration, $duration);
20 | @include prefixed(transition-timing-function, ease-out);
21 | }
22 |
23 | &:hover,
24 | &:focus,
25 | &:active {
26 |
27 | &:before {
28 | left: 0;
29 | right: 0;
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_underline-from-left.scss:
--------------------------------------------------------------------------------
1 | /* Underline From Left */
2 | @mixin underline-from-left {
3 | $duration: $mediumDuration;
4 |
5 | @include hacks();
6 | position: relative;
7 | overflow: hidden;
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | left: 0;
14 | right: 100%;
15 | bottom: 0;
16 | background: $activeColor;
17 | height: 4px;
18 | @include prefixed(transition-property, "right");
19 | @include prefixed(transition-duration, $duration);
20 | @include prefixed(transition-timing-function, ease-out);
21 | }
22 |
23 | &:hover,
24 | &:focus,
25 | &:active {
26 |
27 | &:before {
28 | right: 0;
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_underline-from-right.scss:
--------------------------------------------------------------------------------
1 | /* Underline From Right */
2 | @mixin underline-from-right {
3 | $duration: $mediumDuration;
4 |
5 | @include hacks();
6 | position: relative;
7 | overflow: hidden;
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | left: 100%;
14 | right: 0;
15 | bottom: 0;
16 | background: $activeColor;
17 | height: 4px;
18 | @include prefixed(transition-property, "left");
19 | @include prefixed(transition-duration, $duration);
20 | @include prefixed(transition-timing-function, ease-out);
21 | }
22 |
23 | &:hover,
24 | &:focus,
25 | &:active {
26 |
27 | &:before {
28 | left: 0;
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/border-transitions/_underline-reveal.scss:
--------------------------------------------------------------------------------
1 | /* Underline Reveal */
2 | @mixin underline-reveal {
3 | $duration: $mediumDuration;
4 |
5 | @include hacks();
6 | position: relative;
7 | overflow: hidden;
8 |
9 | &:before {
10 | content: "";
11 | position: absolute;
12 | z-index: -1;
13 | left: 0;
14 | right: 0;
15 | bottom: 0;
16 | background: $activeColor;
17 | height: 4px;
18 | @include prefixed(transform, translateY(4px));
19 | @include prefixed(transition-property, transform);
20 | @include prefixed(transition-duration, $duration);
21 | @include prefixed(transition-timing-function, ease-out);
22 | }
23 |
24 | &:hover,
25 | &:focus,
26 | &:active {
27 |
28 | &:before {
29 | @include prefixed(transform, translateY(0));
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/curls/_curl-bottom-left.scss:
--------------------------------------------------------------------------------
1 | /* Curl Bottom Left */
2 | @mixin curl-bottom-left {
3 | @include hacks();
4 | position: relative;
5 |
6 | &:before {
7 | pointer-events: none;
8 | position: absolute;
9 | content: '';
10 | height: 0;
11 | width: 0;
12 | bottom: 0;
13 | left: 0;
14 | background: $revealAreaColor; /* IE9 */
15 | background: linear-gradient(
16 | 45deg,
17 | $revealAreaColor 45%,
18 | $curlLineColor 50%,
19 | $curlTransitionColor 56%,
20 | $curlLastColor 80%
21 | );
22 | box-shadow: 1px -1px 1px rgba(0, 0, 0, .4);
23 | @include prefixed(transition-duration, $mediumDuration);
24 | @include prefixed(transition-property, "width, height");
25 | }
26 |
27 | &:hover:before,
28 | &:focus:before,
29 | &:active:before {
30 | width: $curlWidth;
31 | height: $curlHeight;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/curls/_curl-bottom-right.scss:
--------------------------------------------------------------------------------
1 | /* Curl Bottom Right */
2 | @mixin curl-bottom-right {
3 | @include hacks();
4 | position: relative;
5 |
6 | &:before {
7 | pointer-events: none;
8 | position: absolute;
9 | content: '';
10 | height: 0;
11 | width: 0;
12 | bottom: 0;
13 | right: 0;
14 | background: $revealAreaColor; /* IE9 */
15 | background: linear-gradient(
16 | 315deg,
17 | $revealAreaColor 45%,
18 | $curlLineColor 50%,
19 | $curlTransitionColor 56%,
20 | $curlLastColor 80%
21 | );
22 | box-shadow: -1px -1px 1px rgba(0, 0, 0, .4);
23 | @include prefixed(transition-duration, $mediumDuration);
24 | @include prefixed(transition-property, "width, height");
25 | }
26 |
27 | &:hover:before,
28 | &:focus:before,
29 | &:active:before {
30 | width: $curlWidth;
31 | height: $curlHeight;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/curls/_curl-top-right.scss:
--------------------------------------------------------------------------------
1 | /* Curl Top Right */
2 | @mixin curl-top-right {
3 | @include hacks();
4 | position: relative;
5 |
6 | &:before {
7 | pointer-events: none;
8 | position: absolute;
9 | content: '';
10 | height: 0;
11 | width: 0;
12 | top: 0;
13 | right: 0;
14 | background: $revealAreaColor; /* IE9 */
15 | background: linear-gradient(
16 | 225deg,
17 | $revealAreaColor 45%,
18 | $curlLineColor 50%,
19 | $curlTransitionColor 56%,
20 | $curlLastColor 80%
21 | );
22 | box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
23 | @include prefixed(transition-duration, $mediumDuration);
24 | @include prefixed(transition-property, "width, height");
25 | }
26 |
27 | &:hover:before,
28 | &:focus:before,
29 | &:active:before {
30 | width: $curlWidth;
31 | height: $curlHeight;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-back.scss:
--------------------------------------------------------------------------------
1 | /* Icon Back */
2 | @mixin icon-back {
3 | @include hacks();
4 | position: relative;
5 | padding-left: 2.2em;
6 | @include prefixed(transition-duration, $fastDuration);
7 |
8 | &:before {
9 | content: "\f137";
10 | position: absolute;
11 | left: 1em;
12 | padding: 0 1px;
13 | font-family: FontAwesome;
14 | @include prefixed(transform, translateZ(0));
15 | @include prefixed(transition-duration, $fastDuration);
16 | @include prefixed(transition-property, transform);
17 | @include prefixed(transition-timing-function, ease-out);
18 | }
19 |
20 | &:hover,
21 | &:focus,
22 | &:active {
23 |
24 | &:before {
25 | @include prefixed(transform, translateX(-4px));
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-bounce.scss:
--------------------------------------------------------------------------------
1 | /* Icon Bounce */
2 |
3 | @mixin icon-bounce {
4 | @include hacks();
5 | position: relative;
6 | padding-right: #{$spaceBetweenTextAndArrows};
7 | @include prefixed(transition-duration, $mediumDuration);
8 |
9 | &:before {
10 | content: "\f087";
11 | position: absolute;
12 | right: 1em;
13 | padding: 0 1px;
14 | font-family: FontAwesome;
15 | @include prefixed(transform, translateZ(0));
16 | @include prefixed(transition-duration, $mediumDuration);
17 | @include prefixed(transition-property, transform);
18 | @include prefixed(transition-timing-function, ease-out);
19 | }
20 |
21 | &:hover,
22 | &:focus,
23 | &:active {
24 |
25 | &:before {
26 | @include prefixed(transform, scale(1.5));
27 | @include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-down.scss:
--------------------------------------------------------------------------------
1 | /* Icon Down */
2 | @include keyframes(#{$nameSpace}-icon-down) {
3 | 0%,
4 | 50%,
5 | 100% {
6 | @include prefixed(transform, translateY(0));
7 | }
8 | 25%,
9 | 75% {
10 | @include prefixed(transform, translateY(6px));
11 | }
12 | }
13 |
14 | /* Icon Down */
15 | @mixin icon-down {
16 | @include hacks();
17 | position: relative;
18 | padding-right: #{$spaceBetweenTextAndArrows};
19 |
20 | &:before {
21 | content: "\f01a";
22 | position: absolute;
23 | right: 1em;
24 | padding: 0 1px;
25 | font-family: FontAwesome;
26 | @include prefixed(transform, translateZ(0));
27 | }
28 |
29 | &:hover,
30 | &:focus,
31 | &:active {
32 |
33 | &:before {
34 | @include prefixed(animation-name, #{$nameSpace}-icon-down);
35 | @include prefixed(animation-duration, .75s);
36 | @include prefixed(animation-timing-function, ease-out);
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-fade.scss:
--------------------------------------------------------------------------------
1 | /* Icon Fade */
2 | @mixin icon-fade {
3 | @include hacks();
4 | position: relative;
5 | padding-right: #{$spaceBetweenTextAndArrows};
6 |
7 | &:before {
8 | content: "\f00c";
9 | position: absolute;
10 | right: 1em;
11 | padding: 0 1px;
12 | font-family: FontAwesome;
13 | @include prefixed(transform, translateZ(0));
14 | @include prefixed(transition-duration, .5s);
15 | @include prefixed(transition-property, color);
16 | }
17 |
18 | &:hover,
19 | &:focus,
20 | &:active {
21 |
22 | &:before {
23 | color: #0F9E5E;
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-float.scss:
--------------------------------------------------------------------------------
1 | /* Icon Float */
2 | @mixin icon-float {
3 | @include hacks();
4 | position: relative;
5 | padding-right: 2.2em;
6 | @include prefixed(transition-duration, $mediumDuration);
7 |
8 | &:before {
9 | content: "\f01b";
10 | position: absolute;
11 | right: 1em;
12 | padding: 0 1px;
13 | font-family: FontAwesome;
14 | @include prefixed(transform, translateZ(0));
15 | @include prefixed(transition-duration, $mediumDuration);
16 | @include prefixed(transition-property, transform);
17 | @include prefixed(transition-timing-function, ease-out);
18 | }
19 |
20 | &:hover,
21 | &:focus,
22 | &:active {
23 |
24 | &:before {
25 | @include prefixed(transform, translateY(-4px));
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-forward.scss:
--------------------------------------------------------------------------------
1 | /* Icon Forward */
2 | @mixin icon-forward {
3 | @include hacks();
4 | position: relative;
5 | padding-right: 2.2em;
6 | @include prefixed(transition-duration, $fastDuration);
7 |
8 | &:before {
9 | content: "\f138";
10 | position: absolute;
11 | right: 1em;
12 | padding: 0 1px;
13 | font-family: FontAwesome;
14 | @include prefixed(transform, translateZ(0));
15 | @include prefixed(transition-duration, $fastDuration);
16 | @include prefixed(transition-property, transform);
17 | @include prefixed(transition-timing-function, ease-out);
18 | }
19 |
20 | &:hover,
21 | &:focus,
22 | &:active {
23 |
24 | &:before {
25 | @include prefixed(transform, translateX(4px));
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-grow-rotate.scss:
--------------------------------------------------------------------------------
1 | /* Icon Grow Rotate */
2 | @mixin icon-grow-rotate {
3 | $duration: $mediumDuration;
4 |
5 | @include hacks();
6 | position: relative;
7 | padding-right: #{$spaceBetweenTextAndArrows};
8 | @include prefixed(transition-duration, $duration);
9 |
10 | &:before {
11 | content: "\f095";
12 | position: absolute;
13 | right: 1em;
14 | padding: 0 1px;
15 | font-family: FontAwesome;
16 | @include prefixed(transform, translateZ(0));
17 | @include prefixed(transition-duration, $duration);
18 | @include prefixed(transition-property, transform);
19 | @include prefixed(transition-timing-function, ease-out);
20 | }
21 |
22 | &:hover,
23 | &:focus,
24 | &:active {
25 |
26 | &:before {
27 | @include prefixed(transform, scale(1.5) rotate(12deg));
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-grow.scss:
--------------------------------------------------------------------------------
1 | /* Icon Grow */
2 | @mixin icon-grow {
3 | @include hacks();
4 | position: relative;
5 | padding-right: #{$spaceBetweenTextAndArrows};
6 | @include prefixed(transition-duration, $mediumDuration);
7 |
8 | &:before {
9 | content: "\f118";
10 | position: absolute;
11 | right: 1em;
12 | padding: 0 1px;
13 | font-family: FontAwesome;
14 | @include prefixed(transform, translateZ(0));
15 | @include prefixed(transition-duration, $mediumDuration);
16 | @include prefixed(transition-property, transform);
17 | @include prefixed(transition-timing-function, ease-out);
18 | }
19 |
20 | &:hover,
21 | &:focus,
22 | &:active {
23 |
24 | &:before {
25 | @include prefixed(transform, scale(1.3) translateZ(0));
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-pulse.scss:
--------------------------------------------------------------------------------
1 | /* Icon Pulse */
2 | @include keyframes(#{$nameSpace}-icon-pulse) {
3 | 25% {
4 | @include prefixed(transform, scale(1.3));
5 | }
6 |
7 | 75% {
8 | @include prefixed(transform, scale(.8));
9 | }
10 | }
11 |
12 | @mixin icon-pulse {
13 | @include hacks();
14 | position: relative;
15 | padding-right: #{$spaceBetweenTextAndArrows};
16 |
17 | &:before {
18 | content: "\f015";
19 | position: absolute;
20 | right: 1em;
21 | padding: 0 1px;
22 | font-family: FontAwesome;
23 | @include prefixed(transform, translateZ(0));
24 | @include prefixed(transition-timing-function, ease-out);
25 | }
26 |
27 | &:hover,
28 | &:focus,
29 | &:active {
30 |
31 | &:before {
32 | @include prefixed(animation-name, #{$nameSpace}-icon-pulse);
33 | @include prefixed(animation-duration, 1s);
34 | @include prefixed(animation-timing-function, linear);
35 | @include prefixed(animation-iteration-count, infinite);
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-rotate.scss:
--------------------------------------------------------------------------------
1 | /* Icon Rotate */
2 | @mixin icon-rotate {
3 | $duration: $mediumDuration;
4 |
5 | @include hacks();
6 | position: relative;
7 | padding-right: #{$spaceBetweenTextAndArrows};
8 | @include prefixed(transition-duration, $duration);
9 |
10 | &:before {
11 | content: "\f0c6";
12 | position: absolute;
13 | right: 1em;
14 | padding: 0 1px;
15 | font-family: FontAwesome;
16 | @include prefixed(transform, translateZ(0));
17 | @include prefixed(transition-duration, $duration);
18 | @include prefixed(transition-property, transform);
19 | @include prefixed(transition-timing-function, ease-out);
20 | }
21 |
22 | &:hover,
23 | &:focus,
24 | &:active {
25 |
26 | &:before {
27 | @include prefixed(transform, rotate(20deg));
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-shrink.scss:
--------------------------------------------------------------------------------
1 | /* Icon Shrink */
2 | @mixin icon-shrink {
3 | @include hacks();
4 | position: relative;
5 | padding-right: #{$spaceBetweenTextAndArrows};
6 | @include prefixed(transition-duration, $mediumDuration);
7 |
8 | &:before {
9 | content: "\f119";
10 | position: absolute;
11 | right: 1em;
12 | padding: 0 1px;
13 | font-family: FontAwesome;
14 | @include prefixed(transform, translateZ(0));
15 | @include prefixed(transition-duration, $mediumDuration);
16 | @include prefixed(transition-property, transform);
17 | @include prefixed(transition-timing-function, ease-out);
18 | }
19 |
20 | &:hover,
21 | &:focus,
22 | &:active {
23 |
24 | &:before {
25 | @include prefixed(transform, scale(.8));
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-sink.scss:
--------------------------------------------------------------------------------
1 | /* Icon Sink */
2 | @mixin icon-sink {
3 | @include hacks();
4 | position: relative;
5 | padding-right: 2.2em;
6 | @include prefixed(transition-duration, $mediumDuration);
7 |
8 | &:before {
9 | content: "\f01a";
10 | position: absolute;
11 | right: 1em;
12 | padding: 0 1px;
13 | font-family: FontAwesome;
14 | @include prefixed(transform, translateZ(0));
15 | @include prefixed(transition-duration, $mediumDuration);
16 | @include prefixed(transition-property, transform);
17 | @include prefixed(transition-timing-function, ease-out);
18 | }
19 |
20 | &:hover,
21 | &:focus,
22 | &:active {
23 |
24 | &:before {
25 | @include prefixed(transform, translateY(4px));
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-spin.scss:
--------------------------------------------------------------------------------
1 | /* Icon Spin */
2 | @mixin icon-spin {
3 | @include hacks();
4 | position: relative;
5 | padding-right: 2.2em;
6 |
7 | &:before {
8 | content: "\f021";
9 | position: absolute;
10 | right: 1em;
11 | padding: 0 1px;
12 | font-family: FontAwesome;
13 | @include prefixed(transition-duration, 1s);
14 | @include prefixed(transition-property, transform);
15 | @include prefixed(transition-timing-function, ease-in-out);
16 | }
17 |
18 | &:hover,
19 | &:focus,
20 | &:active {
21 |
22 | &:before {
23 | @include prefixed(transform, rotate(360deg));
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/icons/_icon-up.scss:
--------------------------------------------------------------------------------
1 | /* Icon Up */
2 | @include keyframes(#{$nameSpace}-icon-up) {
3 | 0%,
4 | 50%,
5 | 100% {
6 | @include prefixed(transform, translateY(0));
7 | }
8 | 25%,
9 | 75% {
10 | @include prefixed(transform, translateY(-6px));
11 | }
12 | }
13 |
14 | /* Icon Up */
15 | @mixin icon-up {
16 | @include hacks();
17 | position: relative;
18 | padding-right: 2.2em;
19 |
20 | &:before {
21 | content: "\f01b";
22 | position: absolute;
23 | right: 1em;
24 | padding: 0 1px;
25 | font-family: FontAwesome;
26 | @include prefixed(transform, translateZ(0));
27 | }
28 |
29 | &:hover,
30 | &:focus,
31 | &:active {
32 |
33 | &:before {
34 | @include prefixed(animation-name, #{$nameSpace}-icon-up);
35 | @include prefixed(animation-duration, .75s);
36 | @include prefixed(animation-timing-function, ease-out);
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/shadow-and-glow-transitions/_box-shadow-inset.scss:
--------------------------------------------------------------------------------
1 | /* Box Shadow Inset */
2 | @mixin box-shadow-inset {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, box-shadow);
6 |
7 | box-shadow: inset 0 0 0 $shadowColor,
8 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
9 |
10 | &:hover,
11 | &:focus,
12 | &:active {
13 | box-shadow: inset 2px 2px 2px $shadowColor,
14 | 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/shadow-and-glow-transitions/_box-shadow-outset.scss:
--------------------------------------------------------------------------------
1 | /* Box Shadow Outset */
2 | @mixin box-shadow-outset {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, box-shadow);
6 |
7 | &:hover,
8 | &:focus,
9 | &:active {
10 | box-shadow: 2px 2px 2px $shadowColor;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/shadow-and-glow-transitions/_glow.scss:
--------------------------------------------------------------------------------
1 | /* Glow */
2 | @mixin glow {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, box-shadow);
6 |
7 | &:hover,
8 | &:focus,
9 | &:active {
10 | box-shadow: 0 0 8px $shadowColor;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/shadow-and-glow-transitions/_grow-shadow.scss:
--------------------------------------------------------------------------------
1 | /* Grow Shadow */
2 | @mixin grow-shadow {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, "box-shadow, transform");
6 |
7 | &:hover,
8 | &:focus,
9 | &:active {
10 | box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
11 | @include prefixed(transform, scale(1.1));
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/shadow-and-glow-transitions/_shadow.scss:
--------------------------------------------------------------------------------
1 | /* Shadow */
2 | @mixin shadow {
3 | @include hacks();
4 | @include prefixed(transition-duration, $mediumDuration);
5 | @include prefixed(transition-property, box-shadow);
6 |
7 | &:hover,
8 | &:focus,
9 | &:active {
10 | box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/speech-bubbles/_bubble-bottom.scss:
--------------------------------------------------------------------------------
1 | /* Bubble Bottom */
2 | @mixin bubble-bottom {
3 | @include hacks();
4 | position: relative;
5 |
6 | &:before {
7 | pointer-events: none;
8 | position: absolute;
9 | z-index: -1;
10 | content: '';
11 | border-style: solid;
12 | @include prefixed(transition-duration, $mediumDuration);
13 | @include prefixed(transition-property, transform);
14 | left: calc(50% - #{$tipWidth});
15 | bottom: 0;
16 | border-width: $tipHeight $tipWidth 0 $tipWidth;
17 | border-color: $tipColor transparent transparent transparent;
18 | }
19 |
20 | &:hover:before,
21 | &:focus:before,
22 | &:active:before {
23 | @include prefixed(transform, translateY($tipHeight));
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/speech-bubbles/_bubble-float-bottom.scss:
--------------------------------------------------------------------------------
1 | /* Bubble Float Bottom */
2 | @mixin bubble-float-bottom {
3 | @include hacks();
4 | position: relative;
5 | @include prefixed(transition-duration, $mediumDuration);
6 | @include prefixed(transition-property, transform);
7 |
8 | &:before {
9 | position: absolute;
10 | z-index: -1;
11 | content: '';
12 | left: calc(50% - #{$tipWidth});
13 | bottom: 0;
14 | border-style: solid;
15 | border-width: $tipHeight $tipWidth 0 $tipWidth;
16 | border-color: $tipColor transparent transparent transparent;
17 | @include prefixed(transition-duration, $mediumDuration);
18 | @include prefixed(transition-property, transform);
19 | }
20 |
21 | &:hover,
22 | &:focus,
23 | &:active {
24 | @include prefixed(transform, translateY(-($tipHeight)));
25 |
26 | &:before {
27 | @include prefixed(transform, translateY($tipHeight));
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/speech-bubbles/_bubble-float-left.scss:
--------------------------------------------------------------------------------
1 | /* Bubble Float Left */
2 | @mixin bubble-float-left {
3 | @include hacks();
4 | position: relative;
5 | @include prefixed(transition-duration, $mediumDuration);
6 | @include prefixed(transition-property, transform);
7 |
8 | &:before {
9 | position: absolute;
10 | z-index: -1;
11 | content: '';
12 | top: calc(50% - #{$tipHeight});
13 | left: 0;
14 | border-style: solid;
15 | border-width: $tipHeight $tipWidth $tipHeight 0;
16 | border-color: transparent $tipColor transparent transparent;
17 | @include prefixed(transition-duration, $mediumDuration);
18 | @include prefixed(transition-property, transform);
19 | }
20 |
21 | &:hover,
22 | &:focus,
23 | &:active {
24 | @include prefixed(transform, translateX($tipWidth));
25 |
26 | &:before {
27 | @include prefixed(transform, translateX(-($tipWidth)));
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/speech-bubbles/_bubble-float-right.scss:
--------------------------------------------------------------------------------
1 | /* Bubble Float Right */
2 | @mixin bubble-float-right {
3 | @include hacks();
4 | position: relative;
5 | @include prefixed(transition-duration, $mediumDuration);
6 | @include prefixed(transition-property, transform);
7 |
8 | &:before {
9 | position: absolute;
10 | z-index: -1;
11 | top: calc(50% - #{$tipHeight});
12 | right: 0;
13 | content: '';
14 | border-style: solid;
15 | border-width: $tipHeight 0 $tipHeight $tipWidth;
16 | border-color: transparent transparent transparent $tipColor;
17 | @include prefixed(transition-duration, $mediumDuration);
18 | @include prefixed(transition-property, transform);
19 | }
20 |
21 | &:hover,
22 | &:focus,
23 | &:active {
24 | @include prefixed(transform, translateX(-($tipWidth)));
25 |
26 | &:before {
27 | @include prefixed(transform, translateX($tipWidth));
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/speech-bubbles/_bubble-float-top.scss:
--------------------------------------------------------------------------------
1 | /* Bubble Float Top */
2 | @mixin bubble-float-top {
3 | @include hacks();
4 | position: relative;
5 | @include prefixed(transition-duration, $mediumDuration);
6 | @include prefixed(transition-property, transform);
7 |
8 | &:before {
9 | position: absolute;
10 | z-index: -1;
11 | content: '';
12 | left: calc(50% - #{$tipWidth});
13 | top: 0;
14 | border-style: solid;
15 | border-width: 0 $tipWidth $tipHeight $tipWidth;
16 | border-color: transparent transparent $tipColor transparent;
17 | @include prefixed(transition-duration, $mediumDuration);
18 | @include prefixed(transition-property, transform);
19 | }
20 |
21 | &:hover,
22 | &:focus,
23 | &:active {
24 | @include prefixed(transform, translateY($tipHeight));
25 |
26 | &:before {
27 | @include prefixed(transform, translateY(-($tipHeight)));
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/speech-bubbles/_bubble-left.scss:
--------------------------------------------------------------------------------
1 | /* Bubble Left */
2 | @mixin bubble-left {
3 | @include hacks();
4 | position: relative;
5 |
6 | &:before {
7 | pointer-events: none;
8 | position: absolute;
9 | z-index: -1;
10 | content: '';
11 | border-style: solid;
12 | @include prefixed(transition-duration, $mediumDuration);
13 | @include prefixed(transition-property, transform);
14 | top: calc(50% - #{$tipHeight});
15 | left: 0;
16 | border-width: $tipHeight $tipWidth $tipHeight 0;
17 | border-color: transparent $tipColor transparent transparent;
18 | }
19 |
20 | &:hover:before,
21 | &:focus:before,
22 | &:active:before {
23 | @include prefixed(transform, translateX(-($tipWidth)));
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/speech-bubbles/_bubble-right.scss:
--------------------------------------------------------------------------------
1 | /* Bubble Right */
2 | @mixin bubble-right {
3 | @include hacks();
4 | position: relative;
5 |
6 | &:before {
7 | pointer-events: none;
8 | position: absolute;
9 | z-index: -1;
10 | content: '';
11 | border-style: solid;
12 | @include prefixed(transition-duration, $mediumDuration);
13 | @include prefixed(transition-property, transform);
14 | top: calc(50% - #{$tipHeight});
15 | right: 0;
16 | border-width: $tipHeight 0 $tipHeight $tipWidth;
17 | border-color: transparent transparent transparent $tipColor;
18 | }
19 |
20 | &:hover:before,
21 | &:focus:before,
22 | &:active:before {
23 | @include prefixed(transform, translateX($tipWidth));
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/style/vendor/hover-css/effects/speech-bubbles/_bubble-top.scss:
--------------------------------------------------------------------------------
1 | /* Bubble Top */
2 | @mixin bubble-top {
3 | @include hacks();
4 | position: relative;
5 |
6 | &:before {
7 | pointer-events: none;
8 | position: absolute;
9 | z-index: -1;
10 | content: '';
11 | border-style: solid;
12 | @include prefixed(transition-duration, $mediumDuration);
13 | @include prefixed(transition-property, transform);
14 | left: calc(50% - #{$tipWidth});
15 | top: 0;
16 | border-width: 0 $tipWidth $tipHeight $tipWidth;
17 | border-color: transparent transparent $tipColor transparent;
18 | }
19 |
20 | &:hover:before,
21 | &:focus:before,
22 | &:active:before {
23 | @include prefixed(transform, translateY(-($tipHeight)));
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/style/vendor/typeplate-sk/_typeplate-functions.scss:
--------------------------------------------------------------------------------
1 | // $Context Calculator
2 | // -------------------------------------//
3 | // target / context = result
4 | //
5 | // @example p { font-size: typl8-context-calc(24, 16, px, 18 * 1.65); }
6 |
7 | @function typl8-context-calc($scale, $base, $value) {
8 | @return ($scale/$base) + $value;
9 | }
10 |
11 |
12 | // $Measure-Margin
13 | // -------------------------------------//
14 | // divide 1 unit of measure by given font-size & return relative value
15 |
16 | @function typl8-measure-margin($scale, $measure, $value) {
17 | $pixelValue: $scale/$measure; // ($measure/$scale) issue#40 https://github.com/typeplate/starter-kit/issues/40
18 | $remValue: $pixelValue * $typl8-font-base;
19 |
20 | @if $value == rem {
21 | @return $pixelValue + $value;
22 | } @else if $value == em {
23 | @return ($remValue/$scale) + $value;
24 | } @else {
25 | @return $remValue * 1px;
26 | }
27 | }
--------------------------------------------------------------------------------
/src/style/vendor/typeplate-sk/_typeplate.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | Typeplate : Starter Kit
3 | URL ........... http://typeplate.com
4 | Version ....... 2.1.0
5 | Github ........ https://github.com/typeplate/starter-kit
6 | Authors ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
7 | License ....... Creative Commmons Attribution 3.0
8 | License URL ... https://github.com/typeplate/starter-kit/blob/master/license.txt
9 | */
10 |
11 | @import "typeplate-vars";
12 | @import "typeplate-fonts";
13 | @import "typeplate-functions";
14 | @import "typeplate-mixins";
15 | @import "typeplate-extends";
16 | @import "typeplate-styles";
17 | @import "typeplate-helpers";
--------------------------------------------------------------------------------
/src/style/webfonts/fa-brands-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/webfonts/fa-brands-400.eot
--------------------------------------------------------------------------------
/src/style/webfonts/fa-brands-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/webfonts/fa-brands-400.ttf
--------------------------------------------------------------------------------
/src/style/webfonts/fa-brands-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/webfonts/fa-brands-400.woff
--------------------------------------------------------------------------------
/src/style/webfonts/fa-brands-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/webfonts/fa-brands-400.woff2
--------------------------------------------------------------------------------
/src/style/webfonts/fa-regular-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/webfonts/fa-regular-400.eot
--------------------------------------------------------------------------------
/src/style/webfonts/fa-regular-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/webfonts/fa-regular-400.ttf
--------------------------------------------------------------------------------
/src/style/webfonts/fa-regular-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/webfonts/fa-regular-400.woff
--------------------------------------------------------------------------------
/src/style/webfonts/fa-regular-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/webfonts/fa-regular-400.woff2
--------------------------------------------------------------------------------
/src/style/webfonts/fa-solid-900.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/webfonts/fa-solid-900.eot
--------------------------------------------------------------------------------
/src/style/webfonts/fa-solid-900.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/webfonts/fa-solid-900.ttf
--------------------------------------------------------------------------------
/src/style/webfonts/fa-solid-900.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/webfonts/fa-solid-900.woff
--------------------------------------------------------------------------------
/src/style/webfonts/fa-solid-900.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OlympusatDevelopment/react-filteredlist/d1353092bc3c8739687d7a47ab6dccd24a0c78a6/src/style/webfonts/fa-solid-900.woff2
--------------------------------------------------------------------------------
/src/tests/i18n.test.js:
--------------------------------------------------------------------------------
1 | import { DEFAULT_LOCALE } from '../containers/App/constants';
2 | import { formatTranslationMessages } from '../i18n';
3 |
4 | jest.mock('../translations/en.json', () => (
5 | {
6 | message1: 'default message',
7 | message2: 'default message 2',
8 | }
9 | ));
10 |
11 | const esTranslationMessages = {
12 | message1: 'mensaje predeterminado',
13 | message2: '',
14 | };
15 |
16 | describe('formatTranslationMessages', () => {
17 | it('should build only defaults when DEFAULT_LOCALE', () => {
18 | const result = formatTranslationMessages(DEFAULT_LOCALE, { a: 'a' });
19 |
20 | expect(result).toEqual({ a: 'a' });
21 | });
22 |
23 |
24 | it('should combine default locale and current locale when not DEFAULT_LOCALE', () => {
25 | const result = formatTranslationMessages('', esTranslationMessages);
26 |
27 | expect(result).toEqual({
28 | message1: 'mensaje predeterminado',
29 | message2: 'default message 2',
30 | });
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/src/tests/store.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Test store addons
3 | */
4 |
5 | import { browserHistory } from 'react-router';
6 | import configureStore from '../store';
7 |
8 | describe('configureStore', () => {
9 | let store;
10 |
11 | beforeAll(() => {
12 | store = configureStore({}, browserHistory);
13 | });
14 |
15 | describe('asyncReducers', () => {
16 | it('should contain an object for async reducers', () => {
17 | expect(typeof store.asyncReducers).toBe('object');
18 | });
19 | });
20 |
21 | describe('runSaga', () => {
22 | it('should contain a hook for `sagaMiddleware.run`', () => {
23 | expect(typeof store.runSaga).toBe('function');
24 | });
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/src/translations/en.json:
--------------------------------------------------------------------------------
1 | []
2 |
--------------------------------------------------------------------------------