@aloudata/aloudata-design 0.1.0-beta1

package/lib/Dropdown/demo/button/index.js

@@ -0,0 +1,182 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Icon = _interopRequireDefault(require("../../../Icon"));
+
+var _radio = _interopRequireDefault(require("antd/lib/radio"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var DropdownButton = _aloudataDesign.Dropdown.Button;
+
+var _default = function _default() {
+  var _useState = (0, _react.useState)('default'),
+      _useState2 = _slicedToArray(_useState, 2),
+      size = _useState2[0],
+      setSize = _useState2[1];
+
+  var _useState3 = (0, _react.useState)('primary'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      type = _useState4[0],
+      setType = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      disabled = _useState6[0],
+      setDisabled = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isIcon = _useState8[0],
+      setIsIcon = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      loading = _useState10[0],
+      setLoading = _useState10[1];
+
+  var _useState11 = (0, _react.useState)('bottomLeft'),
+      _useState12 = _slicedToArray(_useState11, 2),
+      placement = _useState12[0],
+      setPlacement = _useState12[1];
+
+  var menu = /*#__PURE__*/_react.default.createElement(_aloudataDesign.Menu, null, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Menu.Item, {
+    key: "1"
+  }, "1st menu item"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Menu.Item, {
+    key: "2"
+  }, "2nd menu item"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Menu.Item, {
+    key: "3"
+  }, "3rd menu item, long long content"));
+
+  function onChangeValue(setCallback) {
+    return function (e) {
+      return setCallback(e.target.value);
+    };
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "demo-dropdown-button"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "title"
+  }, "type:"), /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+    value: type,
+    onChange: onChangeValue(setType)
+  }, /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "primary"
+  }, "primary"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "secondary"
+  }, "secondary"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "danger"
+  }, "danger"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "text"
+  }, "text"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "link"
+  }, "link"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "title"
+  }, "size:"), /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+    value: size,
+    onChange: onChangeValue(setSize)
+  }, /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "large"
+  }, "large"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "default"
+  }, "default"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "small"
+  }, "small"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "title"
+  }, "disabled:"), /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+    value: disabled,
+    onChange: onChangeValue(setDisabled)
+  }, /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: true
+  }, "true"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: false
+  }, "false"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "title"
+  }, "icon button:"), /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+    value: isIcon,
+    onChange: onChangeValue(setIsIcon)
+  }, /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: true
+  }, "icon button"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: false
+  }, "not icon button"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "title"
+  }, "loading:"), /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+    value: loading,
+    onChange: onChangeValue(setLoading)
+  }, /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: true
+  }, "loading"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: false
+  }, "not loading"))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "title"
+  }, "placement:"), /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+    value: placement,
+    onChange: onChangeValue(setPlacement)
+  }, /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "bottomLeft"
+  }, "bottomLeft"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "bottomCenter"
+  }, "bottomCenter"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "bottomRight"
+  }, "bottomRight"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "topLeft"
+  }, "topLeft"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "topCenter"
+  }, "topCenter"), /*#__PURE__*/_react.default.createElement(_radio.default, {
+    value: "topRight"
+  }, "topRight")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DropdownButton, {
+    overlay: menu,
+    icon: isIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "Positioning"
+    }),
+    loading: loading,
+    disabled: disabled,
+    size: size,
+    type: type,
+    placement: placement
+  }, isIcon ? null : 'Button Content')));
+};
+
+exports.default = _default;

package/lib/Dropdown/demo/button/index.less

@@ -0,0 +1,9 @@
+.demo-dropdown-button {
+  .row {
+    margin-bottom: 8px;
+  }
+
+  .title {
+    padding-right: 8px;
+  }
+}

package/lib/Dropdown/demo/placement/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Dropdown/demo/placement/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _button = _interopRequireDefault(require("antd/lib/button"));
+
+var _space = _interopRequireDefault(require("antd/lib/space"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var menu = /*#__PURE__*/_react.default.createElement(_aloudataDesign.Menu, null, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Menu.Item, {
+  key: 1
+}, "1st menu item"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Menu.Item, {
+  key: 2
+}, "2nd menu item"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Menu.Item, {
+  key: 3
+}, "3rd menu item"));
+
+var _default = function _default() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "demo-dropdown-placement"
+  }, /*#__PURE__*/_react.default.createElement(_space.default, {
+    direction: "vertical"
+  }, /*#__PURE__*/_react.default.createElement(_space.default, {
+    wrap: true
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Dropdown, {
+    overlay: menu,
+    placement: "bottomLeft"
+  }, /*#__PURE__*/_react.default.createElement(_button.default, null, "bottomLeft")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Dropdown, {
+    overlay: menu,
+    placement: "bottomCenter"
+  }, /*#__PURE__*/_react.default.createElement(_button.default, null, "bottomCenter")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Dropdown, {
+    overlay: menu,
+    placement: "bottomRight"
+  }, /*#__PURE__*/_react.default.createElement(_button.default, null, "bottomRight"))), /*#__PURE__*/_react.default.createElement(_space.default, {
+    wrap: true
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Dropdown, {
+    overlay: menu,
+    placement: "topLeft"
+  }, /*#__PURE__*/_react.default.createElement(_button.default, null, "topLeft")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Dropdown, {
+    overlay: menu,
+    placement: "topCenter"
+  }, /*#__PURE__*/_react.default.createElement(_button.default, null, "topCenter")), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Dropdown, {
+    overlay: menu,
+    placement: "topRight"
+  }, /*#__PURE__*/_react.default.createElement(_button.default, null, "topRight")))));
+};
+
+exports.default = _default;

package/lib/Dropdown/demo/subMenu/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Dropdown/demo/subMenu/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/message/style");
+
+var _message2 = _interopRequireDefault(require("antd/es/message"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var MenuItem = _aloudataDesign.Menu.Item;
+var SubMenu = _aloudataDesign.Menu.SubMenu;
+var MenuDivider = _aloudataDesign.Menu.Divider;
+
+var _default = function _default() {
+  var menu = /*#__PURE__*/_react.default.createElement(_aloudataDesign.Menu, {
+    onClick: function onClick(info) {
+      _message2.default.info("Click on menu item ".concat(info.key));
+    }
+  }, /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 1
+  }, "1st menu item"), /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 2,
+    disabled: true
+  }, "2nd menu item"), /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 3
+  }, "3nd menu item"), /*#__PURE__*/_react.default.createElement(MenuDivider, null), /*#__PURE__*/_react.default.createElement(SubMenu, {
+    key: 4,
+    title: "sub menu"
+  }, /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 5
+  }, "Sub menu item5"), /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 6
+  }, "Sub menu item6Sub menu item6Sub menu item6Sub menu item6"), /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 7
+  }, "Sub menu item7"), /*#__PURE__*/_react.default.createElement(SubMenu, {
+    key: 8,
+    title: "sub menu"
+  }, /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 9
+  }, "Sub menu item9"), /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 10
+  }, "Sub menu item10"), /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 11
+  }, "Sub menu item11"))));
+
+  return /*#__PURE__*/_react.default.createElement(_aloudataDesign.Dropdown, {
+    overlay: menu
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Hover me"));
+};
+
+exports.default = _default;

package/lib/Dropdown/demo/trigger/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Dropdown/demo/trigger/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var MenuItem = _aloudataDesign.Menu.Item;
+
+var _default = function _default() {
+  var menu = /*#__PURE__*/_react.default.createElement(_aloudataDesign.Menu, null, /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 1
+  }, "1st menu item"), /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 2,
+    disabled: true
+  }, "2nd menu item"), /*#__PURE__*/_react.default.createElement(MenuItem, {
+    key: 3
+  }, "3nd menu item"));
+
+  return /*#__PURE__*/_react.default.createElement(_aloudataDesign.Dropdown, {
+    overlay: menu,
+    trigger: ['click']
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Click me"));
+};
+
+exports.default = _default;

package/lib/Dropdown/index.d.ts

@@ -0,0 +1,59 @@
+import React, { ReactElement } from 'react';
+import DropdownButton from './Button';
+import './style';
+export declare type ActionType = 'hover' | 'click' | 'contextMenu';
+export interface IDropdownProps {
+    /**
+     * @description 关闭后是否销毁Dropdown
+     * @default false
+     */
+    destroyPopupOnHide?: boolean;
+    /**
+     * @description 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位
+     * @default () => document.body
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    /**
+     * @description 菜单
+     * @type Menu | () => Menu
+     * @default -
+     */
+    overlay: ReactElement | (() => ReactElement);
+    /**
+     * @description 下拉根元素的类名称
+     * @default -
+     */
+    overlayClassName?: string;
+    /**
+     * @description 菜单弹出位置
+     * @default bottomLeft
+     */
+    placement?: 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
+    /**
+     * @description 触发下拉的行为
+     * @type ActionType[], 其中 ActionType 为 'hover' | 'click' | 'contextMenu';
+     * @default [hover]
+     */
+    trigger?: ActionType[];
+    /**
+     * @description 菜单是否显示
+     * @default -
+     */
+    visible?: boolean;
+    /**
+     * @description 菜单显示状态改变时调用，参数为 visible，点击菜单按钮导致的消失不会触发
+     * @default -
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    children?: React.ReactNode;
+    /**
+     * @description 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+}
+declare function Dropdown(props: IDropdownProps): JSX.Element;
+declare namespace Dropdown {
+    var Button: typeof DropdownButton;
+}
+export default Dropdown;

package/lib/Dropdown/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Dropdown;
+
+require("antd/es/dropdown/style");
+
+var _dropdown = _interopRequireDefault(require("antd/es/dropdown"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("./Button"));
+
+require("./style");
+
+var _excluded = ["children", "visible"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function Dropdown(props) {
+  var children = props.children,
+      visible = props.visible,
+      otherProps = _objectWithoutProperties(props, _excluded); // antd根据visible字段是否存在来判断visible是否是可控模式
+
+
+  var antdDropdownProps = otherProps;
+
+  if (visible !== undefined) {
+    antdDropdownProps.visible = visible;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_dropdown.default, _objectSpread({}, antdDropdownProps), children);
+}
+
+Dropdown.Button = _Button.default;

package/lib/Dropdown/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.less';

package/lib/Dropdown/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style");
+
+require("./index.less");

package/lib/Dropdown/style/index.less

@@ -0,0 +1,40 @@
+@import '../../style/index.less';
+
+.ant-dropdown-menu > .ant-dropdown-menu {
+  padding: 0;
+  box-shadow: none;
+}
+
+.ald-menu,
+.ald-submenu {
+  .ant-dropdown-menu-item-active {
+    background-color: @NL97;
+  }
+
+  .ant-dropdown-menu-item-disabled {
+    color: @NL80;
+  }
+
+  .ant-dropdown-menu-submenu-title {
+    padding: 5px 24px 5px 12px;
+
+    .ant-dropdown-menu-submenu-expand-icon {
+      right: 12px;
+    }
+  }
+
+  .ant-dropdown-menu-item {
+    padding: 5px 12px;
+  }
+
+  .ant-dropdown-menu-item,
+  .ant-dropdown-menu-submenu-title {
+    &:hover {
+      background-color: @NL97;
+    }
+  }
+}
+
+.ald-submenu.ant-dropdown-menu-submenu-popup ul {
+  margin: 0;
+}