buoy-close-icon - npm Package Compare versions

Comparing version 4.0.12 to 4.0.13

dist/index.js

@@ -8,8 +8,4 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  // adjust close icon positioning for alert banner depending on height\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  z-index: ", ";\n  background: none;\n  border: none;\n  padding: ", ";\n  margin: 0;\n\n  svg {\n    position: absolute;\n    top: ", ";\n    left: ", ";\n    width: ", ";\n    height: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover:before {\n      content: \"\";\n      background: ", ";\n      ", ";\n      height: ", ";\n      width: ", ";\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      z-index: -1;\n    }\n  }\n  :focus {\n    outline: 3px solid #fff;\n    background-color: #0042cb;\n    box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.3);\n  }\n"], ["\n  display: block;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  // adjust close icon positioning for alert banner depending on height\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  z-index: ", ";\n  background: none;\n  border: none;\n  padding: ", ";\n  margin: 0;\n\n  svg {\n    position: absolute;\n    top: ", ";\n    left: ", ";\n    width: ", ";\n    height: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover:before {\n      content: \"\";\n      background: ", ";\n      ", ";\n      height: ", ";\n      width: ", ";\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      z-index: -1;\n    }\n  }\n  :focus {\n    outline: 3px solid #fff;\n    background-color: #0042cb;\n    box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.3);\n  }\n"]),
-    _templateObject2 = _taggedTemplateLiteral(["\n      top: 5px;\n      right: 10px;\n    "], ["\n      top: 5px;\n      right: 10px;\n    "]),
-    _templateObject3 = _taggedTemplateLiteral(["\n      top: 5px;\n      right: 12px;\n    "], ["\n      top: 5px;\n      right: 12px;\n    "]),
-    _templateObject4 = _taggedTemplateLiteral(["\n      top: 14px;\n      right: 10px;\n    "], ["\n      top: 14px;\n      right: 10px;\n    "]),
-    _templateObject5 = _taggedTemplateLiteral(["\n      top: 22px;\n      right: 8px;\n    "], ["\n      top: 22px;\n      right: 8px;\n    "]),
-    _templateObject6 = _taggedTemplateLiteral(["\n          opacity: 0.1;\n        "], ["\n          opacity: 0.1;\n        "]);
+var _templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  z-index: ", ";\n  background: none;\n  border: none;\n  padding: ", ";\n  margin: 0;\n\n  svg {\n    position: absolute;\n    top: ", ";\n    left: ", ";\n    width: ", ";\n    height: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover:before {\n      content: \"\";\n      background: ", ";\n      ", ";\n      height: ", ";\n      width: ", ";\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      z-index: -1;\n    }\n  }\n  :focus {\n    outline: 3px solid #fff;\n    background-color: #0042cb;\n    box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.3);\n  }\n"], ["\n  display: block;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  z-index: ", ";\n  background: none;\n  border: none;\n  padding: ", ";\n  margin: 0;\n\n  svg {\n    position: absolute;\n    top: ", ";\n    left: ", ";\n    width: ", ";\n    height: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover:before {\n      content: \"\";\n      background: ", ";\n      ", ";\n      height: ", ";\n      width: ", ";\n      border-radius: 50%;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      z-index: -1;\n    }\n  }\n  :focus {\n    outline: 3px solid #fff;\n    background-color: #0042cb;\n    box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 0.3);\n  }\n"]),
+    _templateObject2 = _taggedTemplateLiteral(["\n          opacity: 0.1;\n        "], ["\n          opacity: 0.1;\n        "]);
 
@@ -40,10 +36,2 @@ var _react = require("react");
 }, function (props) {
-  return props.alertHeight < 50 && (0, _styledComponents.css)(_templateObject2);
-}, function (props) {
-  return props.alertHeight < 60 && props.alertHeight > 50 && (0, _styledComponents.css)(_templateObject3);
-}, function (props) {
-  return props.alertHeight > 60 && (0, _styledComponents.css)(_templateObject4);
-}, function (props) {
-  return props.alertHeight > 75 && (0, _styledComponents.css)(_templateObject5);
-}, function (props) {
   return props.topBanner ? 999 : 1;
@@ -65,3 +53,3 @@ }, function (props) {
 }, function (props) {
-  return props.hoverColor && (0, _styledComponents.css)(_templateObject6);
+  return props.hoverColor && (0, _styledComponents.css)(_templateObject2);
 }, function (props) {
@@ -68,0 +56,0 @@ return props.backgroundSize ? props.backgroundSize : "37.5px";

package.json

 {
   "name": "buoy-close-icon",
-  "version": "4.0.12",
+  "version": "4.0.13",
   "description": "Buoy Close Icon Component",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/index.js

@@ -12,29 +12,2 @@ import React from "react"
   right: ${props => (props.right ? props.right : "0px")};
-  // adjust close icon positioning for alert banner depending on height
-  ${props =>
-    props.alertHeight < 50 &&
-    css`
-      top: 5px;
-      right: 10px;
-    `};
-  ${props =>
-    props.alertHeight < 60 &&
-    props.alertHeight > 50 &&
-    css`
-      top: 5px;
-      right: 12px;
-    `};
-  ${props =>
-    props.alertHeight > 60 &&
-    css`
-      top: 14px;
-      right: 10px;
-    `};
-  ${props =>
-    props.alertHeight > 75 &&
-    css`
-      top: 22px;
-      right: 8px;
-    `};
-
   z-index: ${props => (props.topBanner ? 999 : 1)};
@@ -41,0 +14,0 @@ background: none;

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

8317

decreased by-17.19%

Lines of code

187

decreased by-17.26%

No dependency changes