buoy-close-icon - npm Package Compare versions

Comparing version 4.0.6 to 4.0.7

dist/index.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: 1;\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      ", ";\n      top: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      z-index: -1;\n    }\n  }\n"], ["\n  display: block;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: 1;\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      ", ";\n      top: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      z-index: -1;\n    }\n  }\n"]),
+var _templateObject = _taggedTemplateLiteral(["\n  display: ", ";\n\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: 1;\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: ", ";\n      top: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      z-index: -1;\n    }\n  }\n"], ["\n  display: ", ";\n\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  position: ", ";\n  top: ", ";\n  right: ", ";\n  z-index: 1;\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: ", ";\n      top: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      z-index: -1;\n    }\n  }\n"]),
     _templateObject2 = _taggedTemplateLiteral(["opacity: 0.1;"], ["opacity: 0.1;"]);
@@ -20,4 +20,2 @@
 
-var _buoyTheme = require("buoy-theme");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,2 +29,4 @@
 })(_templateObject, function (props) {
+  return props.topBanner ? "flex" : "block";
+}, function (props) {
   return props.size ? props.size : "35px";
@@ -62,3 +62,3 @@ }, function (props) {
 }, function (props) {
-  return props.topBanner ? (0, _buoyTheme.responsive)("left", "95%", "95%", "94.5%", "94.5%", "94.5%") : "left: 50%";
+  return props.topBanner ? "25%" : "50%";
 });
@@ -65,0 +65,0 @@

package.json

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

src/index.js

 import React from "react"
 import styled, { css } from "styled-components"
-import { responsive } from "buoy-theme"
 
 const CloseIconWrapper = styled.button`
-  display: block;
+  display: ${props => props.topBanner ? "flex" : "block"};
+
   width: ${props => props.size ? props.size : "35px"};
@@ -40,3 +40,3 @@ height: ${props => props.size ? props.size : "35px"};
       position: absolute;
-      ${props => props.topBanner ? responsive("left", "95%", "95%", "94.5%", "94.5%", "94.5%") : `left: 50%`};
+      left: ${props => props.topBanner ? "25%" : "50%"};
       top: 50%;
@@ -43,0 +43,0 @@ transform: translateX(-50%) translateY(-50%);

No alert changes

Worsened metrics

Total package byte prevSize

7821

decreased by-1.11%

No dependency changes