Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@10play/popups
Advanced tools
@10play/popups - npm Package Compare versions
Comparing version 2.0.37 to 2.0.39
@@ -6,2 +6,10 @@ # Change Log | ||
| ## [2.0.39](https://github.com/QualiNext/client-common/compare/v2.0.38...v2.0.39) (2021-08-18) | ||
| **Note:** Version bump only for package @10play/popups | ||
| ## [2.0.37](https://github.com/QualiNext/client-common/compare/v2.0.36...v2.0.37) (2021-08-03) | ||
@@ -8,0 +16,0 @@ |
@@ -604,3 +604,3 @@ 'use strict'; | ||
| var ButtonStyled = styled__default['default'].button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n .button-content {\n z-index: 3;\n }\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 }\n\n background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n position: 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"], ["\n ", ";\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n .button-content {\n z-index: 3;\n }\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 }\n\n background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n position: 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 (_a) { | ||
| var ButtonStyled = styled__default['default'].button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n .button-content {\n z-index: 3;\n }\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 }\n\n background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n position: 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\n ", "\n\n ", "\n"], ["\n ", ";\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n .button-content {\n z-index: 3;\n }\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 }\n\n background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n position: 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\n ", "\n\n ", "\n"])), function (_a) { | ||
| var width = _a.width; | ||
@@ -613,5 +613,21 @@ return (width ? "width: " + width : ''); | ||
| : "\n background: none !important;\n background-color: #87878f !important;\n &:hover:after, &:active:after, &:hover {\n background: none !important;\n background-color: #87878f !important;\n }\n color: #bbbbc5;\n cursor: not-allowed;\n\n svg {\n g {\n fill: #87878f;\n }\n path {\n fill: #b1b1bd;\n }\n }\n "; | ||
| }, function (_a) { | ||
| var size = _a.size; | ||
| return size === 'small' | ||
| ? "\n height: 26px;\n padding-left: 15px;\n padding-right: 15px;\n font-size: 11px;\n box-shadow: none;\n " | ||
| : ''; | ||
| }, function (_a) { | ||
| var size = _a.size; | ||
| return size === 'large' | ||
| ? "\n font-size: 1em;\n height: 50px;\n " | ||
| : ''; | ||
| }); | ||
| var templateObject_1; | ||
| var Size; | ||
| (function (Size) { | ||
| Size["small"] = "small"; | ||
| Size["default"] = "default"; | ||
| Size["large"] = "large"; | ||
| })(Size || (Size = {})); | ||
| /** | ||
@@ -621,4 +637,4 @@ * UI component for user interaction | ||
| var Primary = function (_a) { | ||
| var children = _a.children, isBusy = _a.isBusy, className = _a.className, props = __rest(_a, ["children", "isBusy", "className"]); | ||
| return (React__default['default'].createElement(ButtonStyled, __assign({}, props, { className: className }), | ||
| var children = _a.children, isBusy = _a.isBusy, className = _a.className, size = _a.size, props = __rest(_a, ["children", "isBusy", "className", "size"]); | ||
| return (React__default['default'].createElement(ButtonStyled, __assign({}, props, { className: className, size: size }), | ||
| React__default['default'].createElement("div", { className: "button-content" }, isBusy ? React__default['default'].createElement(Spinner$1, null) : children))); | ||
@@ -625,0 +641,0 @@ }; |
@@ -595,3 +595,3 @@ import React, { useState, useEffect } from 'react'; | ||
| var ButtonStyled = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n .button-content {\n z-index: 3;\n }\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 }\n\n background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n position: 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"], ["\n ", ";\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n .button-content {\n z-index: 3;\n }\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 }\n\n background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n position: 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 (_a) { | ||
| var ButtonStyled = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n .button-content {\n z-index: 3;\n }\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 }\n\n background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n position: 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\n ", "\n\n ", "\n"], ["\n ", ";\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n\n .button-content {\n z-index: 3;\n }\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 }\n\n background: linear-gradient(180deg, #1ea3f7 0%, #507df0 100%);\n position: 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\n ", "\n\n ", "\n"])), function (_a) { | ||
| var width = _a.width; | ||
@@ -604,5 +604,21 @@ return (width ? "width: " + width : ''); | ||
| : "\n background: none !important;\n background-color: #87878f !important;\n &:hover:after, &:active:after, &:hover {\n background: none !important;\n background-color: #87878f !important;\n }\n color: #bbbbc5;\n cursor: not-allowed;\n\n svg {\n g {\n fill: #87878f;\n }\n path {\n fill: #b1b1bd;\n }\n }\n "; | ||
| }, function (_a) { | ||
| var size = _a.size; | ||
| return size === 'small' | ||
| ? "\n height: 26px;\n padding-left: 15px;\n padding-right: 15px;\n font-size: 11px;\n box-shadow: none;\n " | ||
| : ''; | ||
| }, function (_a) { | ||
| var size = _a.size; | ||
| return size === 'large' | ||
| ? "\n font-size: 1em;\n height: 50px;\n " | ||
| : ''; | ||
| }); | ||
| var templateObject_1; | ||
| var Size; | ||
| (function (Size) { | ||
| Size["small"] = "small"; | ||
| Size["default"] = "default"; | ||
| Size["large"] = "large"; | ||
| })(Size || (Size = {})); | ||
| /** | ||
@@ -612,4 +628,4 @@ * UI component for user interaction | ||
| var Primary = function (_a) { | ||
| var children = _a.children, isBusy = _a.isBusy, className = _a.className, props = __rest(_a, ["children", "isBusy", "className"]); | ||
| return (React.createElement(ButtonStyled, __assign({}, props, { className: className }), | ||
| var children = _a.children, isBusy = _a.isBusy, className = _a.className, size = _a.size, props = __rest(_a, ["children", "isBusy", "className", "size"]); | ||
| return (React.createElement(ButtonStyled, __assign({}, props, { className: className, size: size }), | ||
| React.createElement("div", { className: "button-content" }, isBusy ? React.createElement(Spinner$1, null) : children))); | ||
@@ -616,0 +632,0 @@ }; |
| { | ||
| "name": "@10play/popups", | ||
| "version": "2.0.37", | ||
| "version": "2.0.39", | ||
| "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM", | ||
@@ -41,3 +41,3 @@ "keywords": [], | ||
| "@10play/icons": "^2.0.37", | ||
| "@10play/phoenix-button": "^2.0.37" | ||
| "@10play/phoenix-button": "^2.0.39" | ||
| }, | ||
@@ -48,3 +48,3 @@ "peerDependencies": { | ||
| }, | ||
| "gitHead": "46d571f59bd6180009c0174e8b77161a4995c8cc" | ||
| "gitHead": "f1265fb257c8641c2e1eb1d7f95afc7ba46b64e0" | ||
| } |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by1.2%
119551
- Lines of code
- increased by1.27%
2555