iglooform 2.5.52 → 3.0.0-alpha

package/es/button/style/index.less

@@ -1,187 +1,236 @@
-@btn-focus-color: @purple-dark;
-@btn-focus-bg: @purple-dark;
-@btn-hover-color: @purple-medium;
-@btn-hover-bg: @purple-medium;
-
 @btn-green-color: #108043;
 @btn-red-color: #de3618;
 @btn-yellow-color: #cf8909;
+@btn-padding: 0 16px;
+@btn-disabled-opacity: @disabled-opacity;
+
+@btn-default-color: @primary-color;
+@btn-default-backgroud-color: transparent;
+@btn-default-border-color: @primary-color;
+@btn-default-border-radius: @border-radius;
+@btn-default-padding: @btn-padding;
+@btn-default-disabled-color: @primary-color;
+@btn-default-disabled-backgroud-color: transparent;
+@btn-default-disabled-border-color: @primary-color;
+@btn-default-disabled-opacity: @btn-disabled-opacity;
+@btn-default-hover-color: @primary-light;
+@btn-default-hover-backgroud-color: transparent;
+@btn-default-hover-border-color: @primary-light;
+@btn-default-focus-color: @primary-dark;
+@btn-default-focus-backgroud-color: transparent;
+@btn-default-focus-border-color: @primary-dark;
+
+@btn-primary-color: @white;
+@btn-primary-backgroud-color: @primary-color;
+@btn-primary-border-color: @primary-color;
+@btn-primary-border-radius: @border-radius;
+@btn-primary-padding: @btn-padding;
+@btn-primary-disabled-color: @white;
+@btn-primary-disabled-backgroud-color: @primary-color;
+@btn-primary-disabled-border-color: @primary-color;
+@btn-primary-disabled-opacity: @btn-disabled-opacity;
+@btn-primary-hover-color: @white;
+@btn-primary-hover-backgroud-color: @primary-light;
+@btn-primary-hover-border-color: @primary-light;
+@btn-primary-focus-color: @white;
+@btn-primary-focus-backgroud-color: @primary-dark;
+@btn-primary-focus-border-color: @primary-dark;
+
+@btn-link-color: @primary-color;
+@btn-link-hover-color: @primary-light;
+@btn-link-focus-color: @primary-dark;
 
-.ant-btn {
-  padding: 0 16px;
+@btn-text-color: @black;
+@btn-text-hover-color: @primary-color;
+@btn-text-focus-color: @primary-dark;
+
+.igloo-btn {
+  padding: @btn-default-padding;
   text-shadow: none;
   box-shadow: none;
-  background-color: transparent;
+  background-color: @btn-default-backgroud-color;
+  border-radius: @btn-default-border-radius;
+  color: @btn-default-color;
+  border-color: @btn-default-border-color;
 
   &[disabled] {
-    opacity: 0.3;
-    color: @primary-color;
-    border: 1px solid @primary-color;
-    background-color: transparent;
+    opacity: @btn-default-disabled-opacity;
+    color: @btn-default-disabled-color;
+    border-color: @btn-default-disabled-border-color;
+    background-color: @btn-default-disabled-backgroud-color;
 
-    &:hover {
-      color: @primary-color;
-      border-color: @primary-color;
-      background-color: transparent;
-    }
+    &:hover,
     &:active,
     &:focus {
-      color: @primary-color;
-      border-color: @primary-color;
-      background-color: transparent;
+      color: @btn-default-disabled-color;
+      border-color: @btn-default-disabled-border-color;
+      background-color: @btn-default-disabled-backgroud-color;
     }
   }
 
   &:hover {
-    color: @btn-hover-color;
-    border-color: @btn-hover-color;
-    background-color: transparent;
+    color: @btn-default-hover-color;
+    border-color: @btn-default-hover-border-color;
+    background-color: @btn-default-hover-backgroud-color;
   }
   &:active,
   &:focus {
-    color: @btn-focus-color;
-    border-color: @btn-focus-color;
-    background-color: transparent;
+    color: @btn-default-focus-color;
+    border-color: @btn-default-focus-border-color;
+    background-color: @btn-default-focus-backgroud-color;
   }
 }
 
-.ant-btn-primary {
-  color: white;
-  background-color: @primary-color;
-  border-width: 0px;
+.igloo-btn-primary {
+  padding: @btn-primary-padding;
+  text-shadow: none;
+  box-shadow: none;
+  background-color: @btn-primary-backgroud-color;
+  border-radius: @btn-primary-border-radius;
+  color: @btn-primary-color;
+  border-color: @btn-primary-border-color;
+
+  &[disabled] {
+    opacity: @btn-primary-disabled-opacity;
+    color: @btn-primary-disabled-color;
+    border-color: @btn-primary-disabled-border-color;
+    background-color: @btn-primary-disabled-backgroud-color;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: @btn-primary-disabled-color;
+      border-color: @btn-primary-disabled-border-color;
+      background-color: @btn-primary-disabled-backgroud-color;
+    }
+  }
+
   &:hover {
-    border-color: @btn-hover-color;
-    background-color: @btn-hover-bg;
-    color: white;
+    color: @btn-primary-hover-color;
+    border-color: @btn-primary-hover-border-color;
+    background-color: @btn-primary-hover-backgroud-color;
   }
   &:active,
   &:focus {
-    border-color: @btn-focus-color;
-    background-color: @btn-focus-bg;
-    color: white;
+    color: @btn-primary-focus-color;
+    border-color: @btn-primary-focus-border-color;
+    background-color: @btn-primary-focus-backgroud-color;
   }
-  &[disabled] {
-    color: white;
-    background-color: @primary-color;
+}
 
-    &:focus,
-    &:hover {
-      color: white;
-      background-color: @primary-color;
-    }
+.green {
+  background-color: @btn-green-color;
+  border-color: @btn-green-color;
+  --antd-wave-shadow-color: @btn-green-color;
+
+  &:not(:disabled):not(.ant-btn-disabled):hover,
+  &:not(:disabled):not(.ant-btn-disabled):active,
+  &:not(:disabled):not(.ant-btn-disabled):focus {
+    background-color: @btn-green-color;
+    border-color: @btn-green-color;
+    opacity: 0.9;
   }
 
-  &.green {
-    background: @btn-green-color;
+  &[disabled] {
+    background-color: @btn-green-color;
     border-color: @btn-green-color;
-    --antd-wave-shadow-color: @btn-green-color;
 
     &:hover,
     &:active,
     &:focus {
-      background: @btn-green-color;
-      opacity: 0.9;
+      border-color: @btn-green-color;
+      background-color: @btn-green-color;
     }
+  }
+}
 
-    &[disabled] {
-      background: @btn-green-color;
-      opacity: 0.3;
+.yellow {
+  background-color: @btn-yellow-color;
+  border-color: @btn-yellow-color;
+  --antd-wave-shadow-color: @btn-yellow-color;
 
-      &:hover,
-      &:active,
-      &:focus {
-        border-color: @btn-green-color;
-        background: @btn-green-color;
-      }
-    }
+  &:not(:disabled):not(.ant-btn-disabled):hover,
+  &:not(:disabled):not(.ant-btn-disabled):active,
+  &:not(:disabled):not(.ant-btn-disabled):focus {
+    background-color: @btn-yellow-color;
+    border-color: @btn-yellow-color;
+    opacity: 0.9;
   }
 
-  &.yellow {
-    background: @btn-yellow-color;
+  &[disabled] {
     border-color: @btn-yellow-color;
-    --antd-wave-shadow-color: @btn-yellow-color;
+    background-color: @btn-yellow-color;
 
     &:hover,
     &:active,
     &:focus {
-      background: @btn-yellow-color;
-      opacity: 0.9;
+      border-color: @btn-yellow-color;
+      background-color: @btn-yellow-color;
     }
+  }
+}
 
-    &[disabled] {
-      background: @btn-yellow-color;
-      opacity: 0.3;
+.red {
+  background-color: @btn-red-color;
+  border-color: @btn-red-color;
+  --antd-wave-shadow-color: @btn-red-color;
 
-      &:hover,
-      &:active,
-      &:focus {
-        border-color: @btn-yellow-color;
-        background: @btn-yellow-color;
-      }
-    }
+  &:not(:disabled):not(.ant-btn-disabled):hover,
+  &:not(:disabled):not(.ant-btn-disabled):active,
+  &:not(:disabled):not(.ant-btn-disabled):focus {
+    background-color: @btn-red-color;
+    border-color: @btn-red-color;
+    opacity: 0.9;
   }
 
-  &.red {
-    background: @btn-red-color;
+  &[disabled] {
+    background-color: @btn-red-color;
     border-color: @btn-red-color;
-    --antd-wave-shadow-color: @btn-red-color;
 
     &:hover,
     &:active,
     &:focus {
-      background: @btn-red-color;
-      opacity: 0.9;
-    }
-
-    &[disabled] {
-      background: @btn-red-color;
-      opacity: 0.3;
-
-      &:hover,
-      &:active,
-      &:focus {
-        border-color: @btn-red-color;
-        background: @btn-red-color;
-      }
+      border-color: @btn-red-color;
+      background-color: @btn-red-color;
     }
   }
 }
 
-.ant-btn-link {
+.igloo-btn-link {
   padding: 0;
   height: unset;
-  color: @primary-color;
+  color: @btn-link-color;
   border: none;
 
-  &:hover {
-    color: @hover-color;
+  &:not(:disabled):not(.ant-btn-disabled):hover {
+    color: @btn-link-hover-color;
   }
-  &:active,
-  &:focus {
-    color: @btn-focus-color;
+  &:not(:disabled):not(.ant-btn-disabled):active,
+  &:not(:disabled):not(.ant-btn-disabled):focus {
+    color: @btn-link-focus-color;
   }
 
   &[disabled] {
     border: none;
-    color: @primary-color;
+    color: @btn-link-color;
     &:hover {
-      color: @primary-color;
+      color: @btn-link-color;
     }
   }
 }
 
-.ant-btn-text {
+.igloo-btn-text {
   padding: 0;
   height: unset;
   color: @black;
   border: none;
 
-  &:hover {
+  &:not(:disabled):not(.ant-btn-disabled):hover {
     color: @primary-color;
     background-color: transparent;
   }
-  &:active,
-  &:focus {
+  &:not(:disabled):not(.ant-btn-disabled):active,
+  &:not(:disabled):not(.ant-btn-disabled):focus {
     color: @active-color;
   }
 
@@ -206,15 +255,16 @@
   }
 }
 
-.ant-btn > .igloo-icon + span,
-.ant-btn > span + .igloo-icon {
+.igloo-btn > .igloo-icon + span,
+.igloo-btn > span + .igloo-icon {
   margin-left: 8px;
 }
 
-.ant-btn > .igloo-icon {
-  font-size: 24px;
+.igloo-btn .igloo-icon {
+  font-size: calc(@height-base / 2);
 }
 
-.ant-btn-icon-only {
+.igloo-btn.igloo-btn-icon-only {
   width: auto;
+  font-size: calc(@height-base / 2);
 }

package/es/card-detail/card-group.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import './style/index';
 interface ICardGroupProps {
     className?: string;
@@ -8,5 +8,5 @@ interface ICardGroupProps {
     subHeading?: string | any;
     subStatus?: any;
 }
-declare const IglooCardGroup: FC<ICardGroupProps>;
+declare const IglooCardGroup: FC<PropsWithChildren<ICardGroupProps>>;
 export default IglooCardGroup;

package/es/card-detail/card-group.js

@@ -1,52 +1,44 @@
-import "antd/es/col/style";
-import _Col from "antd/es/col";
-import "antd/es/row/style";
-import _Row from "antd/es/row";
-import "antd/es/space/style";
-import _Space from "antd/es/space";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row, Col, Space } from 'antd';
 import classnames from 'classnames';
-import Typography from '../typography';
-import './style/index';
-
+import Typography from "../typography";
+import "./style/index";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var IglooCardGroup = function IglooCardGroup(props) {
   var children = props.children,
-      subHeading = props.subHeading,
-      subStatus = props.subStatus;
+    subHeading = props.subHeading,
+    subStatus = props.subStatus;
   var className = props.className,
-      style = props.style;
-
-  var subTitle = _jsxs(_Space, {
+    style = props.style;
+  var subTitle = /*#__PURE__*/_jsxs(Space, {
     size: 8,
     style: {
       marginBottom: 16
     },
-    children: [_jsx(Typography, {
+    children: [/*#__PURE__*/_jsx(Typography, {
       level: "h4",
       children: subHeading
     }), subStatus]
   });
-
-  return subHeading || subStatus ? _jsxs(_Row, {
+  return subHeading || subStatus ? /*#__PURE__*/_jsxs(Row, {
     style: style,
     className: classnames('igloo-form-card-container-group-with-header', className),
-    children: [_jsx(_Col, {
+    children: [/*#__PURE__*/_jsx(Col, {
       span: 24,
       children: (subHeading || subStatus) && subTitle
-    }), _jsx(_Row, {
+    }), /*#__PURE__*/_jsx(Row, {
       gutter: [32, 16],
       style: {
         width: '100%'
       },
       children: children
     })]
-  }) : _jsx(_Row, {
+  }) : /*#__PURE__*/_jsx(Row, {
     gutter: [32, 16],
     style: style,
     className: classnames('igloo-form-card-container-group', className),
     children: children
   });
 };
-
 IglooCardGroup.displayName = 'IglooCardGroup';
 export default IglooCardGroup;

package/es/card-detail/card-item.d.ts

@@ -1,9 +1,9 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, PropsWithChildren } from 'react';
 import './style/index';
 interface ICardItemProps {
     span?: number;
     title?: ReactNode;
     className?: string;
 }
-declare const IglooCardItem: FC<ICardItemProps>;
+declare const IglooCardItem: FC<PropsWithChildren<ICardItemProps>>;
 export default IglooCardItem;

package/es/card-detail/card-item.js

@@ -1,58 +1,47 @@
-import "antd/es/col/style";
-import _Col from "antd/es/col";
-
 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); }
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Col } from 'antd';
 import classnames from 'classnames';
-import './style/index';
-import Typography from '../typography/index';
-
+import "./style/index";
+import Typography from "../typography/index";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var IglooCardItem = function IglooCardItem(props) {
   var span = props.span,
-      title = props.title,
-      children = props.children;
+    title = props.title,
+    children = props.children;
   var className = props.className;
-
   function renderContent(children) {
     var type = _typeof(children);
-
     switch (type) {
       case 'boolean':
         return null;
-
       case 'string':
-        return _jsx(Typography, {
+        return /*#__PURE__*/_jsx(Typography, {
           level: "body1",
           children: children
         });
-
       case 'number':
-        return _jsx(Typography, {
+        return /*#__PURE__*/_jsx(Typography, {
           level: "body1",
           children: children
         });
-
       case 'object':
         return children;
-
       default:
         break;
     }
   }
-
-  return _jsxs(_Col, {
+  return /*#__PURE__*/_jsxs(Col, {
     span: span || 4,
     className: classnames('igloofrom-card-detail-item', className),
-    children: [_jsx("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       className: "card-item-title",
-      children: _jsx(Typography, {
+      children: /*#__PURE__*/_jsx(Typography, {
         level: "body1",
         children: title
       })
     }), renderContent(children)]
   });
 };
-
 IglooCardItem.displayName = 'IglooCardItem';
 export default IglooCardItem;

package/es/card-detail/card-page.js

@@ -1,48 +1,42 @@
-import "antd/es/card/style";
-import _Card from "antd/es/card";
-import "antd/es/space/style";
-import _Space from "antd/es/space";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Space } from 'antd';
 import classnames from 'classnames';
-import { DealWithCardItem } from './utils';
-import Typography from '../typography';
-import './style/index';
-
+import { DealWithCardItem } from "./utils";
+import Typography from "../typography";
+import "./style/index";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var IglooCardPage = function IglooCardPage(props) {
   var children = props.children,
-      className = props.className,
-      style = props.style;
+    className = props.className,
+    style = props.style;
   var title = props.title,
-      _props$extraButtons = props.extraButtons,
-      extraButtons = _props$extraButtons === void 0 ? [] : _props$extraButtons,
-      pageTitleIcon = props.pageTitleIcon,
-      pageStatusIcon = props.pageStatusIcon;
+    _props$extraButtons = props.extraButtons,
+    extraButtons = _props$extraButtons === void 0 ? [] : _props$extraButtons,
+    pageTitleIcon = props.pageTitleIcon,
+    pageStatusIcon = props.pageStatusIcon;
   var extraButtonsWithKey = extraButtons.map(function (button, index) {
-    return _jsx("div", {
+    return /*#__PURE__*/_jsx("div", {
       children: button
     }, index);
   });
-
-  var titleContent = _jsxs(_Space, {
+  var titleContent = /*#__PURE__*/_jsxs(Space, {
     size: 8,
-    children: [_jsx("span", {
+    children: [/*#__PURE__*/_jsx("span", {
       children: pageTitleIcon
-    }), _jsx(Typography, {
+    }), /*#__PURE__*/_jsx(Typography, {
       level: "h3a",
       children: title
     }), pageStatusIcon]
   });
-
-  return _jsx(_Card, {
+  return /*#__PURE__*/_jsx(Card, {
     style: style,
     className: classnames('igloo-card-page', className),
     title: titleContent,
-    extra: _jsx(_Space, {
+    extra: /*#__PURE__*/_jsx(Space, {
       size: 18,
       children: extraButtonsWithKey
     }),
     children: DealWithCardItem(children, true)
   });
 };
-
 export default IglooCardPage;