pallote-react 0.2.25

package/dist/components/Text.js

@@ -0,0 +1,63 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Text = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+const _excluded = ["variant", "align", "weight", "transform", "underline", "italic", "code", "color", "component", "className", "children"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+const Text = _ref => {
+  let {
+      variant,
+      align,
+      weight,
+      transform,
+      underline,
+      italic,
+      code,
+      color,
+      component,
+      className,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const Component = component;
+  return /*#__PURE__*/_react.default.createElement(Component, _extends({
+    className: (0, _classnames.default)(['text', {
+      ["".concat(variant)]: variant,
+      ["text--".concat(align)]: align,
+      ["text--".concat(weight)]: weight,
+      ["text--".concat(transform)]: transform,
+      ["text--".concat(color)]: color,
+      'text--underline': underline,
+      'text--italic': italic,
+      'text--code': code
+    }, className])
+  }, props), children);
+};
+exports.Text = Text;
+Text.propTypes = {
+  variant: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle', 'body', 'caption', 'overline']),
+  align: _propTypes.default.oneOf(['left', 'center', 'right', 'justify']),
+  weight: _propTypes.default.oneOf(['light', 'regular', 'bold']),
+  transform: _propTypes.default.oneOf(['none', 'capitalize', 'uppercase', 'lowercase', 'initial', 'inherit']),
+  underline: _propTypes.default.bool,
+  italic: _propTypes.default.bool,
+  code: _propTypes.default.bool,
+  color: _propTypes.default.oneOf(['default', 'alt', 'disabled', 'contrast', 'contrastAlt', 'contrastDisabled', 'primary', 'secondary', 'highlight', 'success', 'info', 'warning', 'error']),
+  component: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'legend']),
+  className: _propTypes.default.node,
+  children: _propTypes.default.any
+};
+Text.defaultProps = {
+  underline: false,
+  italic: false,
+  component: 'p'
+};

package/dist/components/Textarea.js

@@ -0,0 +1,82 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Textarea = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+const _excluded = ["onChange", "id", "placeholder", "label", "notice", "error", "disabled", "required", "onFocus", "onBlur", "className"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+const Textarea = _ref => {
+  let {
+      onChange,
+      id,
+      placeholder,
+      label,
+      notice,
+      error,
+      disabled,
+      required,
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [isFocused, setFocused] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(['input', {
+      'input--focused': isFocused,
+      'js--error': error,
+      'input--disabled': disabled,
+      'input--required': required
+    }, className]),
+    onChange: onChange,
+    onFocus: event => {
+      setFocused(true);
+      _onFocus && _onFocus(event);
+    },
+    onBlur: event => {
+      setFocused(false);
+      _onBlur && _onBlur(event);
+    }
+  }, label && /*#__PURE__*/_react.default.createElement("label", {
+    className: 'input__label',
+    htmlFor: id
+  }, label), notice && /*#__PURE__*/_react.default.createElement("p", {
+    className: 'input__notice'
+  }, notice), /*#__PURE__*/_react.default.createElement("textarea", _extends({
+    className: 'input__control',
+    name: id,
+    id: id,
+    placeholder: placeholder,
+    disabled: disabled,
+    rows: 4
+  }, props)));
+};
+exports.Textarea = Textarea;
+Textarea.propTypes = {
+  onChange: _propTypes.default.func,
+  id: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  label: _propTypes.default.string,
+  notice: _propTypes.default.string,
+  error: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  required: _propTypes.default.bool,
+  onFocus: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  className: _propTypes.default.node
+};
+Textarea.defaultProps = {
+  label: 'Text input'
+};

package/dist/components/Tooltip.js

@@ -0,0 +1,52 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tooltip = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react2 = require("@phosphor-icons/react");
+const _excluded = ["infoIcon", "infoIconSize", "content", "bold", "dense", "className", "children"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
+const Tooltip = _ref => {
+  let {
+      infoIcon,
+      infoIconSize,
+      content,
+      bold,
+      dense,
+      className,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("span", _extends({
+    className: (0, _classnames.default)(['tooltip', {
+      'tooltip--info': infoIcon,
+      'tooltip--bold': bold
+    }, className])
+  }, props), infoIcon ? /*#__PURE__*/_react.default.createElement(_react2.Info, {
+    className: (0, _classnames.default)('tooltip__icon'),
+    size: infoIconSize ? infoIconSize : 12
+  }) : children, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(['tooltip__content', {
+      'tooltip__content--dense': dense
+    }])
+  }, content));
+};
+exports.Tooltip = Tooltip;
+Tooltip.propTypes = {
+  infoIcon: _propTypes.default.bool,
+  infoIconSize: _propTypes.default.number,
+  content: _propTypes.default.string,
+  bold: _propTypes.default.bool,
+  dense: _propTypes.default.bool,
+  className: _propTypes.default.node,
+  children: _propTypes.default.any
+};
+Tooltip.defaultProps = {};

package/dist/index.js

@@ -0,0 +1,376 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function get() {
+    return _Accordion.Accordion;
+  }
+});
+Object.defineProperty(exports, "AccordionItem", {
+  enumerable: true,
+  get: function get() {
+    return _AccordionItem.AccordionItem;
+  }
+});
+Object.defineProperty(exports, "Alert", {
+  enumerable: true,
+  get: function get() {
+    return _Alert.Alert;
+  }
+});
+Object.defineProperty(exports, "Breadcrumbs", {
+  enumerable: true,
+  get: function get() {
+    return _Breadcrumbs.Breadcrumbs;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function get() {
+    return _Button.Button;
+  }
+});
+Object.defineProperty(exports, "Buttons", {
+  enumerable: true,
+  get: function get() {
+    return _Buttons.Buttons;
+  }
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function get() {
+    return _Card.Card;
+  }
+});
+Object.defineProperty(exports, "CardActions", {
+  enumerable: true,
+  get: function get() {
+    return _CardActions.CardActions;
+  }
+});
+Object.defineProperty(exports, "CardContent", {
+  enumerable: true,
+  get: function get() {
+    return _CardContent.CardContent;
+  }
+});
+Object.defineProperty(exports, "CardHeader", {
+  enumerable: true,
+  get: function get() {
+    return _CardHeader.CardHeader;
+  }
+});
+Object.defineProperty(exports, "CardMedia", {
+  enumerable: true,
+  get: function get() {
+    return _CardMedia.CardMedia;
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox.Checkbox;
+  }
+});
+Object.defineProperty(exports, "Checkboxes", {
+  enumerable: true,
+  get: function get() {
+    return _Checkboxes.Checkboxes;
+  }
+});
+Object.defineProperty(exports, "Chip", {
+  enumerable: true,
+  get: function get() {
+    return _Chip.Chip;
+  }
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function get() {
+    return _Divider.Divider;
+  }
+});
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function get() {
+    return _Grid.Grid;
+  }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _Input.Input;
+  }
+});
+Object.defineProperty(exports, "Layer", {
+  enumerable: true,
+  get: function get() {
+    return _Layer.Layer;
+  }
+});
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function get() {
+    return _Link.Link;
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function get() {
+    return _List.List;
+  }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function get() {
+    return _ListItem.ListItem;
+  }
+});
+Object.defineProperty(exports, "Loader", {
+  enumerable: true,
+  get: function get() {
+    return _Loader.Loader;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.Modal;
+  }
+});
+Object.defineProperty(exports, "ModalActions", {
+  enumerable: true,
+  get: function get() {
+    return _ModalActions.ModalActions;
+  }
+});
+Object.defineProperty(exports, "ModalContent", {
+  enumerable: true,
+  get: function get() {
+    return _ModalContent.ModalContent;
+  }
+});
+Object.defineProperty(exports, "ModalHeader", {
+  enumerable: true,
+  get: function get() {
+    return _ModalHeader.ModalHeader;
+  }
+});
+Object.defineProperty(exports, "Nav", {
+  enumerable: true,
+  get: function get() {
+    return _Nav.Nav;
+  }
+});
+Object.defineProperty(exports, "NavBar", {
+  enumerable: true,
+  get: function get() {
+    return _NavBar.NavBar;
+  }
+});
+Object.defineProperty(exports, "NavGroup", {
+  enumerable: true,
+  get: function get() {
+    return _NavGroup.NavGroup;
+  }
+});
+Object.defineProperty(exports, "NavItem", {
+  enumerable: true,
+  get: function get() {
+    return _NavItem.NavItem;
+  }
+});
+Object.defineProperty(exports, "Page", {
+  enumerable: true,
+  get: function get() {
+    return _Page.Page;
+  }
+});
+Object.defineProperty(exports, "PageHeader", {
+  enumerable: true,
+  get: function get() {
+    return _PageHeader.PageHeader;
+  }
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function get() {
+    return _Radio.Radio;
+  }
+});
+Object.defineProperty(exports, "RadioButtons", {
+  enumerable: true,
+  get: function get() {
+    return _RadioButtons.RadioButtons;
+  }
+});
+Object.defineProperty(exports, "Section", {
+  enumerable: true,
+  get: function get() {
+    return _Section.Section;
+  }
+});
+Object.defineProperty(exports, "SectionHeader", {
+  enumerable: true,
+  get: function get() {
+    return _SectionHeader.SectionHeader;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _Select.Select;
+  }
+});
+Object.defineProperty(exports, "Snippet", {
+  enumerable: true,
+  get: function get() {
+    return _Snippet.Snippet;
+  }
+});
+Object.defineProperty(exports, "Status", {
+  enumerable: true,
+  get: function get() {
+    return _Status.Status;
+  }
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function get() {
+    return _Switch.Switch;
+  }
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function get() {
+    return _Table.Table;
+  }
+});
+Object.defineProperty(exports, "TableBody", {
+  enumerable: true,
+  get: function get() {
+    return _TableBody.TableBody;
+  }
+});
+Object.defineProperty(exports, "TableCell", {
+  enumerable: true,
+  get: function get() {
+    return _TableCell.TableCell;
+  }
+});
+Object.defineProperty(exports, "TableFooter", {
+  enumerable: true,
+  get: function get() {
+    return _TableFooter.TableFooter;
+  }
+});
+Object.defineProperty(exports, "TableHead", {
+  enumerable: true,
+  get: function get() {
+    return _TableHead.TableHead;
+  }
+});
+Object.defineProperty(exports, "TableRow", {
+  enumerable: true,
+  get: function get() {
+    return _TableRow.TableRow;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _Tabs.Tabs;
+  }
+});
+Object.defineProperty(exports, "TabsContent", {
+  enumerable: true,
+  get: function get() {
+    return _TabsContent.TabsContent;
+  }
+});
+Object.defineProperty(exports, "TabsControl", {
+  enumerable: true,
+  get: function get() {
+    return _TabsControl.TabsControl;
+  }
+});
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _Tag.Tag;
+  }
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function get() {
+    return _Text.Text;
+  }
+});
+Object.defineProperty(exports, "Textarea", {
+  enumerable: true,
+  get: function get() {
+    return _Textarea.Textarea;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function get() {
+    return _Tooltip.Tooltip;
+  }
+});
+var _Accordion = require("./components/Accordion");
+var _AccordionItem = require("./components/AccordionItem");
+var _Alert = require("./components/Alert");
+var _Grid = require("./components/Grid");
+var _Breadcrumbs = require("./components/Breadcrumbs");
+var _Button = require("./components/Button");
+var _Buttons = require("./components/Buttons");
+var _Card = require("./components/Card");
+var _CardActions = require("./components/CardActions");
+var _CardContent = require("./components/CardContent");
+var _CardHeader = require("./components/CardHeader");
+var _CardMedia = require("./components/CardMedia");
+var _Checkbox = require("./components/Checkbox");
+var _Checkboxes = require("./components/Checkboxes");
+var _Chip = require("./components/Chip");
+var _Divider = require("./components/Divider");
+var _Input = require("./components/Input");
+var _Layer = require("./components/Layer");
+var _Link = require("./components/Link");
+var _List = require("./components/List");
+var _ListItem = require("./components/ListItem");
+var _Loader = require("./components/Loader");
+var _Modal = require("./components/Modal");
+var _ModalActions = require("./components/ModalActions");
+var _ModalContent = require("./components/ModalContent");
+var _ModalHeader = require("./components/ModalHeader");
+var _Nav = require("./components/Nav");
+var _NavBar = require("./components/NavBar");
+var _NavGroup = require("./components/NavGroup");
+var _NavItem = require("./components/NavItem");
+var _Page = require("./components/Page");
+var _PageHeader = require("./components/PageHeader");
+var _Radio = require("./components/Radio");
+var _RadioButtons = require("./components/RadioButtons");
+var _Section = require("./components/Section");
+var _SectionHeader = require("./components/SectionHeader");
+var _Select = require("./components/Select");
+var _Snippet = require("./components/Snippet");
+var _Status = require("./components/Status");
+var _Switch = require("./components/Switch");
+var _Table = require("./components/Table");
+var _TableBody = require("./components/TableBody");
+var _TableCell = require("./components/TableCell");
+var _TableFooter = require("./components/TableFooter");
+var _TableHead = require("./components/TableHead");
+var _TableRow = require("./components/TableRow");
+var _Tabs = require("./components/Tabs");
+var _TabsContent = require("./components/TabsContent");
+var _TabsControl = require("./components/TabsControl");
+var _Tag = require("./components/Tag");
+var _Text = require("./components/Text");
+var _Textarea = require("./components/Textarea");
+var _Tooltip = require("./components/Tooltip");

package/dist/styles/common/_global.scss

@@ -0,0 +1,98 @@
+// —————————————————————————————————————————————————————————————————
+// padding & margin
+// —————————————————————————————————————————————————————————————————
+
+.m-05 { margin: $spacing*0.5 !important; }
+.mt-05 { margin-top: $spacing*0.5 !important; }
+.mr-05 { margin-right: $spacing*0.5 !important; }
+.mb-05 { margin-bottom: $spacing*0.5 !important; }
+.ml-05 { margin-left: $spacing*0.5 !important; }
+
+.p-05 { padding: $spacing*0.5 !important; }
+.pt-05 { padding-top: $spacing*0.5 !important; }
+.pr-05 { padding-right: $spacing*0.5 !important; }
+.pb-05 { padding-bottom: $spacing*0.5 !important; }
+.pl-05 { padding-left: $spacing*0.5 !important; }
+
+@for $i from 0 through 20 {
+
+  .zi-#{$i} { z-index: $i !important; }
+
+  .m-#{$i} { margin: $i*$spacing !important; }
+  .mt-#{$i} { margin-top: $i*$spacing !important; }
+  .mr-#{$i} { margin-right: $i*$spacing !important; }
+  .mb-#{$i} { margin-bottom: $i*$spacing !important; }
+  .ml-#{$i} { margin-left: $i*$spacing !important; }
+
+  .p-#{$i} { padding: $i*$spacing !important; }
+  .pt-#{$i} { padding-top: $i*$spacing !important; }
+  .pr-#{$i} { padding-right: $i*$spacing !important; }
+  .pb-#{$i} { padding-bottom: $i*$spacing !important; }
+  .pl-#{$i} { padding-left: $i*$spacing !important; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// width
+// —————————————————————————————————————————————————————————————————
+
+$max: 100;
+$step: 5;
+
+@for $i from 1 through (calc($max/$step)) {
+  $value: $i * $step;
+
+  .w-#{$value} {
+    width: $value + 0% !important;
+  }
+}
+
+.w {
+
+  &-mobile-sm { width: $mobile-sm-up !important; }
+  &-mobile { width: $mobile-up !important; }
+  &-tablet { width: $tablet-up !important; }
+  &-laptop { width: $laptop-up !important; }
+  &-desktop { width: $desktop-up !important; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// misc
+// —————————————————————————————————————————————————————————————————
+
+.dp {
+
+  &-inline { display: inline !important; }
+  &-block { display: block !important; }
+  &-flex { display: flex !important; }
+  &-grid { display: grid !important; }
+  &-inline-block { display: inline-block !important; }
+  &-inline-flex { display: inline-flex !important; }
+  &-inline-grid { display: inline-grid !important; }
+  &-none { display: none !important; }
+  &-initial { display: initial !important; }
+  &-inheri { display: inheri !important; }
+}
+
+.of {
+
+  &-visible { overflow: visible !important; }
+  &-hidden { overflow: hidden !important; }
+  &-scroll { overflow: scroll !important; }
+  &-auto { overflow: auto !important; }
+
+  &X {
+
+    &-visible { overflow-x: visible !important; }
+    &-hidden { overflow-x: hidden !important; }
+    &-scroll { overflow-x: scroll !important; }
+    &-auto { overflow-x: auto !important; }
+  }
+
+  &Y {
+
+    &-visible { overflow-y: visible !important; }
+    &-hidden { overflow-y: hidden !important; }
+    &-scroll { overflow-y: scroll !important; }
+    &-auto { overflow-y: auto !important; }
+  }
+}