@builder.io/react - npm Package Compare versions

Comparing version 0.1.55 to 0.1.56

dist/lib/components/custom/Hero.js

@@ -100,3 +100,3 @@ "use strict";
         return (react_1.default.createElement(Fragment, null,
-            react_1.default.createElement("style", { className: "builder-style builder-hero-style" }, "\n          .builder-content-hero {\n            position: relative;\n            display: block;\n            min-height: 300px;\n            padding: 10px;\n            background-color: white;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero {\n              padding: 20px 0;\n            }\n          }\n          .builder-content-hero .cta-button {\n            display: inline-block;\n            min-width: 85px;\n            padding: 0 10px;\n            margin-top: 15px;\n            overflow: hidden;\n            font-size: 12px;\n            line-height: 35px;\n            text-align: center;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            border: 1.5px solid black;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .light .cta-button {\n              border-color: white;\n            }\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .cta-button {\n              margin-top: 10px;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .cta-button {\n              max-width: 100%;\n              min-width: 230px;\n              margin-top: 20px;\n              font-size: 18px;\n              line-height: 50px;\n              border-width: 3px;\n            }\n          }\n          .builder-content-hero,\n          .builder-content-hero .content-container {\n            height: 350px;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero,\n            .builder-content-hero .content-container {\n              height: 300px;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero,\n            .builder-content-hero .content-container {\n              height: 500px;\n            }\n          }\n          .builder-content-hero .content-container {\n            position: relative;\n            display: flex;\n            height: 100%;\n            max-width: 1600px;\n            margin: auto;\n            color: black;\n            border: 1px solid #e4e4e4;\n            flex-direction: column-reverse;\n          }\n          .builder-content-hero .content-container.light {\n            color: white;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .content-container {\n              border: none;\n              flex-direction: row;\n            }\n          }\n          .builder-content-hero .video {\n            position: absolute;\n            z-index: 2;\n            height: 100%;\n            min-width: 100%;\n            opacity: 0;\n            transition: opacity 0.2s;\n            object-position: center;\n            object-fit: cover;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .video {\n              width: 1600px;\n              margin-left: calc(50% - 800px);\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .video {\n              width: 1600px;\n              margin-left: calc(50% - 800px);\n            }\n          }\n          .builder-content-hero .video.loaded {\n            opacity: 1;\n          }\n          .builder-content-hero .inner-content {\n            display: flex;\n            width: 100%;\n            text-align: center;\n            background-position: center;\n            background-size: cover;\n          }\n          .builder-content-hero .inner-content.text-side {\n            height: 180px;\n            color: black;\n            background-color: white;\n          }\n          .builder-content-hero .inner-content.image-side {\n            position: relative;\n            height: 220px;\n            overflow: hidden;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .inner-content {\n              width: 50%;\n              background-position: center left;\n            }\n            .builder-content-hero .inner-content.text-side {\n              height: auto;\n              color: inherit;\n              text-align: left;\n              background-color: transparent;\n              background-position: center right;\n            }\n            .builder-content-hero .inner-content.image-side {\n              height: auto;\n            }\n          }\n          @media (max-width: 700px) {\n            .builder-content-hero .inner-content.text-side {\n              background-image: none !important;\n            }\n          }\n          .builder-content-hero .subhead {\n            display: none;\n            color: #444;\n            text-transform: uppercase;\n          }\n          .builder-content-hero .light .subhead {\n            color: white;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .subhead {\n              display: block;\n              margin-bottom: 10px;\n              font-size: 9px;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .subhead {\n              margin-bottom: 15px;\n              font-size: 11px;\n            }\n          }\n          .builder-content-hero .text-content {\n            position: relative;\n            z-index: 3;\n            width: 100%;\n            max-width: 580px;\n            max-height: 100%;\n            padding: 0 20px;\n            margin-left: auto;\n            overflow: hidden;\n            align-self: center;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .text-content {\n              padding: 0 20px;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .text-content {\n              padding: 20px 50px;\n            }\n          }\n          .builder-content-hero .heading {\n            font-size: 18px;\n            line-height: normal;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .heading {\n              font-size: 28px;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .heading {\n              font-size: 54px;\n            }\n          }\n          .builder-content-hero .subtext {\n            display: none;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .subtext {\n              display: block;\n              margin-top: 10px;\n              font-size: 12px;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .subtext {\n              margin-top: 20px;\n              font-size: 14px;\n            }\n          }\n          .builder-content-hero .bar {\n            display: none;\n            vertical-align: middle;\n            background-color: black;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .bar {\n              display: inline-block;\n              width: 70px;\n              height: 3px;\n            }\n            .builder-content-hero .light .bar {\n              background-color: white;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .bar {\n              width: 150px;\n              height: 5px;\n            }\n          }\n          .builder-content-hero .secondary-link {\n            display: block;\n            padding: 10px;\n            text-align: center;\n            text-decoration: underline;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .secondary-link {\n              padding: 0;\n              margin-top: 10px;\n              text-align: left;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .secondary-link {\n              margin-top: 20px;\n            }\n          }\n          .builder-content-hero .credit-text {\n            position: static;\n            display: none;\n            font-size: 10px;\n            color: #444;\n            text-align: center;\n          }\n          .builder-content-hero .credit-text.outer {\n            display: block;\n            margin-top: 10px;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .credit-text {\n              position: absolute;\n              bottom: -15px;\n              left: 20px;\n              display: block;\n              text-align: left;\n            }\n            .builder-content-hero .credit-text.outer {\n              display: none;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .credit-text {\n              left: 5px;\n            }\n          }\n          "),
+            react_1.default.createElement("style", { className: "builder-style builder-hero-style" }, "\n          .builder-content-hero {\n            position: relative;\n            display: block;\n            min-height: 300px;\n            padding: 10px;\n            background-color: white;\n            width: 100vw;\n            margin-left: calc(50% - 50vw);\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero {\n              padding: 20px 0;\n            }\n          }\n          .builder-content-hero .cta-button {\n            display: inline-block;\n            min-width: 85px;\n            padding: 0 10px;\n            margin-top: 15px;\n            overflow: hidden;\n            font-size: 12px;\n            line-height: 35px;\n            text-align: center;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            border: 1.5px solid black;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .light .cta-button {\n              border-color: white;\n            }\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .cta-button {\n              margin-top: 10px;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .cta-button {\n              max-width: 100%;\n              min-width: 230px;\n              margin-top: 20px;\n              font-size: 18px;\n              line-height: 50px;\n              border-width: 3px;\n            }\n          }\n          .builder-content-hero,\n          .builder-content-hero .content-container {\n            height: 350px;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero,\n            .builder-content-hero .content-container {\n              height: 300px;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero,\n            .builder-content-hero .content-container {\n              height: 500px;\n            }\n          }\n          .builder-content-hero .content-container {\n            position: relative;\n            display: flex;\n            height: 100%;\n            max-width: 1600px;\n            margin: auto;\n            color: black;\n            border: 1px solid #e4e4e4;\n            flex-direction: column-reverse;\n          }\n          .builder-content-hero .content-container.light {\n            color: white;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .content-container {\n              border: none;\n              flex-direction: row;\n            }\n          }\n          .builder-content-hero .video {\n            position: absolute;\n            z-index: 2;\n            height: 100%;\n            min-width: 100%;\n            opacity: 0;\n            transition: opacity 0.2s;\n            object-position: center;\n            object-fit: cover;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .video {\n              width: 1600px;\n              margin-left: calc(50% - 800px);\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .video {\n              width: 1600px;\n              margin-left: calc(50% - 800px);\n            }\n          }\n          .builder-content-hero .video.loaded {\n            opacity: 1;\n          }\n          .builder-content-hero .inner-content {\n            display: flex;\n            width: 100%;\n            text-align: center;\n            background-position: center;\n            background-size: cover;\n          }\n          .builder-content-hero .inner-content.text-side {\n            height: 180px;\n            color: black;\n            background-color: white;\n          }\n          .builder-content-hero .inner-content.image-side {\n            position: relative;\n            height: 220px;\n            overflow: hidden;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .inner-content {\n              width: 50%;\n              background-position: center left;\n            }\n            .builder-content-hero .inner-content.text-side {\n              height: auto;\n              color: inherit;\n              text-align: left;\n              background-color: transparent;\n              background-position: center right;\n            }\n            .builder-content-hero .inner-content.image-side {\n              height: auto;\n            }\n          }\n          @media (max-width: 700px) {\n            .builder-content-hero .inner-content.text-side {\n              background-image: none !important;\n            }\n          }\n          .builder-content-hero .subhead {\n            display: none;\n            color: #444;\n            text-transform: uppercase;\n          }\n          .builder-content-hero .light .subhead {\n            color: white;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .subhead {\n              display: block;\n              margin-bottom: 10px;\n              font-size: 9px;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .subhead {\n              margin-bottom: 15px;\n              font-size: 11px;\n            }\n          }\n          .builder-content-hero .text-content {\n            position: relative;\n            z-index: 3;\n            width: 100%;\n            max-width: 580px;\n            max-height: 100%;\n            padding: 0 20px;\n            margin-left: auto;\n            overflow: hidden;\n            align-self: center;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .text-content {\n              padding: 0 20px;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .text-content {\n              padding: 20px 50px;\n            }\n          }\n          .builder-content-hero .heading {\n            font-size: 18px;\n            line-height: normal;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .heading {\n              font-size: 28px;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .heading {\n              font-size: 54px;\n            }\n          }\n          .builder-content-hero .subtext {\n            display: none;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .subtext {\n              display: block;\n              margin-top: 10px;\n              font-size: 12px;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .subtext {\n              margin-top: 20px;\n              font-size: 14px;\n            }\n          }\n          .builder-content-hero .bar {\n            display: none;\n            vertical-align: middle;\n            background-color: black;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .bar {\n              display: inline-block;\n              width: 70px;\n              height: 3px;\n            }\n            .builder-content-hero .light .bar {\n              background-color: white;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .bar {\n              width: 150px;\n              height: 5px;\n            }\n          }\n          .builder-content-hero .secondary-link {\n            display: block;\n            padding: 10px;\n            text-align: center;\n            text-decoration: underline;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .secondary-link {\n              padding: 0;\n              margin-top: 10px;\n              text-align: left;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .secondary-link {\n              margin-top: 20px;\n            }\n          }\n          .builder-content-hero .credit-text {\n            position: static;\n            display: none;\n            font-size: 10px;\n            color: #444;\n            text-align: center;\n          }\n          .builder-content-hero .credit-text.outer {\n            display: block;\n            margin-top: 10px;\n          }\n          @media (min-width: 700px) {\n            .builder-content-hero .credit-text {\n              position: absolute;\n              bottom: -15px;\n              left: 20px;\n              display: block;\n              text-align: left;\n            }\n            .builder-content-hero .credit-text.outer {\n              display: none;\n            }\n          }\n          @media (min-width: 1600px) {\n            .builder-content-hero .credit-text {\n              left: 5px;\n            }\n          }\n          "),
             react_1.default.createElement("div", { className: "builder-content-hero hero-content" },
@@ -103,0 +103,0 @@ react_1.default.createElement("a", { href: this.props.buttonLink },

package.json

 {
   "name": "@builder.io/react",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "description": "",
@@ -5,0 +5,0 @@ "keywords": [],

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5246574

increased by0.01%

No dependency changes