@10play/phoenix-button - npm Package Compare versions

Comparing version 2.0.20 to 2.0.25

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [2.0.25](https://github.com/davixyz/phoenix/compare/v2.0.24...v2.0.25) (2021-04-22)
+
+**Note:** Version bump only for package @10play/phoenix-button
+
+
+
+
+
 ## [2.0.20](https://github.com/davixyz/phoenix/compare/v2.0.19...v2.0.20) (2021-04-18)
@@ -8,0 +16,0 @@

dist/phoenix-button.cjs.js

@@ -206,3 +206,6 @@ 'use strict';
 
-var Primary = styled__default['default'](ButtonContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n  .button-content{\n    z-index: 3;\n  }\n  height: 32px;\n  padding-left: 28px;\n  padding-right: 28px;\n  box-shadow: 0 5px 15px 0 rgba(49, 49, 51, 0.15);\n  cursor: pointer;\n  border-radius: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n\n  font-family: Kanit;\n  font-weight: 300;\n  color:#fff;\n  font-size: 13px;\n  letter-spacing: 0.4px;\n\n  &-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n  }\nbackground: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\nposition: relative;\n\n&:after {\n  content: '';\n  width: 100%;\n  height: 100%;\n  border-radius: 18px;\n  transition: opacity 0.3s ease-out;\n  z-index: 2;\n  opacity: 0;\n  position: absolute;\n}\n\n&:hover:after {\n  opacity: 1;\n  background: linear-gradient(to left, #1b96e3, #4872db);\n}\n&:active:after {\n  opacity: 1;\n  background: linear-gradient(to left, #1887cc, #4166c4);\n}"])));
+var Primary = styled__default['default'](ButtonContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n  .button-content{\n    z-index: 3;\n  }\n  height: 32px;\n  padding-left: 28px;\n  padding-right: 28px;\n  box-shadow: 0 5px 15px 0 rgba(49, 49, 51, 0.15);\n  cursor: pointer;\n  border-radius: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n\n  font-family: Kanit;\n  font-weight: 300;\n  color:#fff;\n  font-size: 13px;\n  letter-spacing: 0.4px;\n\n  &-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n  }\nbackground: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\nposition: relative;\n\n&:after {\n  content: '';\n  width: 100%;\n  height: 100%;\n  border-radius: 18px;\n  transition: opacity 0.3s ease-out;\n  z-index: 2;\n  opacity: 0;\n  position: absolute;\n}\n\n&:hover:after {\n  opacity: 1;\n  background: linear-gradient(to left, #1b96e3, #4872db);\n}\n&:active:after {\n  opacity: 1;\n  background: linear-gradient(to left, #1887cc, #4166c4);\n}\n\n", "\n"])), function (_ref2) {
+  var disabled = _ref2.disabled;
+  return !disabled ? '' : "\nbackground: none !important;\nbackground-color: #87878f !important;\n&:hover:after, &:active:after, &:hover {\n  background: none !important;\n  background-color: #87878f !important;\n}\ncolor: #bbbbc5;\ncursor: not-allowed;\n\nsvg {\n  g {\n    fill: #87878f;\n  }\n  path {\n    fill: #b1b1bd;\n  }\n}\n";
+});
 
@@ -209,0 +212,0 @@ var Button = function Button(_ref) {

dist/phoenix-button.esm.js

@@ -197,3 +197,6 @@ import React from 'react';
 
-var Primary = styled(ButtonContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n  .button-content{\n    z-index: 3;\n  }\n  height: 32px;\n  padding-left: 28px;\n  padding-right: 28px;\n  box-shadow: 0 5px 15px 0 rgba(49, 49, 51, 0.15);\n  cursor: pointer;\n  border-radius: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n\n  font-family: Kanit;\n  font-weight: 300;\n  color:#fff;\n  font-size: 13px;\n  letter-spacing: 0.4px;\n\n  &-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n  }\nbackground: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\nposition: relative;\n\n&:after {\n  content: '';\n  width: 100%;\n  height: 100%;\n  border-radius: 18px;\n  transition: opacity 0.3s ease-out;\n  z-index: 2;\n  opacity: 0;\n  position: absolute;\n}\n\n&:hover:after {\n  opacity: 1;\n  background: linear-gradient(to left, #1b96e3, #4872db);\n}\n&:active:after {\n  opacity: 1;\n  background: linear-gradient(to left, #1887cc, #4166c4);\n}"])));
+var Primary = styled(ButtonContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n  .button-content{\n    z-index: 3;\n  }\n  height: 32px;\n  padding-left: 28px;\n  padding-right: 28px;\n  box-shadow: 0 5px 15px 0 rgba(49, 49, 51, 0.15);\n  cursor: pointer;\n  border-radius: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n\n  font-family: Kanit;\n  font-weight: 300;\n  color:#fff;\n  font-size: 13px;\n  letter-spacing: 0.4px;\n\n  &-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 3;\n  }\nbackground: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\nposition: relative;\n\n&:after {\n  content: '';\n  width: 100%;\n  height: 100%;\n  border-radius: 18px;\n  transition: opacity 0.3s ease-out;\n  z-index: 2;\n  opacity: 0;\n  position: absolute;\n}\n\n&:hover:after {\n  opacity: 1;\n  background: linear-gradient(to left, #1b96e3, #4872db);\n}\n&:active:after {\n  opacity: 1;\n  background: linear-gradient(to left, #1887cc, #4166c4);\n}\n\n", "\n"])), function (_ref2) {
+  var disabled = _ref2.disabled;
+  return !disabled ? '' : "\nbackground: none !important;\nbackground-color: #87878f !important;\n&:hover:after, &:active:after, &:hover {\n  background: none !important;\n  background-color: #87878f !important;\n}\ncolor: #bbbbc5;\ncursor: not-allowed;\n\nsvg {\n  g {\n    fill: #87878f;\n  }\n  path {\n    fill: #b1b1bd;\n  }\n}\n";
+});
 
@@ -200,0 +203,0 @@ var Button = function Button(_ref) {

lib/buttons/index.js

@@ -63,4 +63,25 @@ import React from 'react';
   background: linear-gradient(to left, #1887cc, #4166c4);
-}`;
+}
 
+${({disabled}) => !disabled ? '' : `
+background: none !important;
+background-color: #87878f !important;
+&:hover:after, &:active:after, &:hover {
+  background: none !important;
+  background-color: #87878f !important;
+}
+color: #bbbbc5;
+cursor: not-allowed;
+
+svg {
+  g {
+    fill: #87878f;
+  }
+  path {
+    fill: #b1b1bd;
+  }
+}
+`}
+`;
+
 export { Primary };

package.json

 {
   "name": "@10play/phoenix-button",
-  "version": "2.0.20",
+  "version": "2.0.25",
   "description": "> TODO: description",
@@ -43,3 +43,3 @@ "author": "ZBejavu <[e-mail]>",
   },
-  "gitHead": "7bbe987934a7d9e11c9f42d9ca045f500af5272b"
+  "gitHead": "494b9dc6798a117b0b5f606d6c4bb7aa5742e9c5"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21969

increased by6.24%

Lines of code

492

increased by5.81%

No dependency changes