input-floating-label-react - npm Package Compare versions

Comparing version 0.0.2-0.0.2-alpha.1.0 to 0.0.2

dist/components/InputFloatingLabel.js

@@ -7,18 +7,13 @@ "use strict";
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _inputStyles = _interopRequireDefault(require("./inputStyles"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var InputFloatingLabel = function InputFloatingLabel(_ref) {
-  var props = _extends({}, _ref);
-
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   var _props$label = props.label,
-      label = _props$label === void 0 ? "Label" : _props$label,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? "standerd" : _props$variant;
+    label = _props$label === void 0 ? "Label" : _props$label,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? "standerd" : _props$variant;
   return _react["default"].createElement(_inputStyles["default"], {
@@ -33,4 +28,3 @@ variant: variant
 };
-
 var _default = InputFloatingLabel;
 exports["default"] = _default;

dist/components/inputStyles.js

@@ -7,22 +7,8 @@ "use strict";
 exports["default"] = void 0;
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
+var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n.floating-form {\n    width:320px;\n  }\n  \n  /****  floating-Lable style start ****/\n  .floating-label { \n    position:relative; \n    margin-bottom:20px; \n  }\n  .floating-input , .floating-select {\n    font-size:14px;\n    padding:4px 4px;\n    display:block;\n    width:100%;\n    height:30px;\n    background-color: transparent;\n    border:none;\n    border-bottom:1px solid ", ";\n    ", "\n  }\n  \n  .floating-input:focus , .floating-select:focus {\n       outline:none;\n       border-bottom:2px solid #5264AE; \n       ", "\n  }\n  \n  label {\n    color:#999; \n    font-size:14px;\n    font-weight:normal;\n    position:absolute;\n    pointer-events:none;\n    left:5px;\n    top:5px;\n    transition:0.2s ease all; \n    -moz-transition:0.2s ease all; \n    -webkit-transition:0.2s ease all;\n    ", "\n    \n  }\n  \n  .floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {\n    top:-18px;\n    font-size:14px;\n    color:#5264AE;\n    ", "\n  }\n  \n  .floating-select:focus ~ label , .floating-select:not([value=\"\"]):valid ~ label {\n    top:-18px;\n    font-size:14px;\n    color:#5264AE;\n  }\n  \n  /* active state */\n  .floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {\n    width:50%;\n  }\n  \n  *, *:before, *:after {\n      -webkit-box-sizing: border-box;\n      -moz-box-sizing: border-box;\n      box-sizing: border-box;\n  }\n  \n  .floating-textarea {\n     min-height: 30px;\n     max-height: 260px; \n     overflow:hidden;\n    overflow-x: hidden; \n  }\n  \n  /* highlighter \n  .highlight {\n    position:absolute;\n    height:50%; \n    width:100%; \n    top:15%; \n    left:0;\n    pointer-events:none;\n    opacity:0.5;\n  }*/\n  \n  /* active state */\n  .floating-input:focus ~ .highlight , .floating-select:focus ~ .highlight {\n    -webkit-animation:inputHighlighter 0.3s ease;\n    -moz-animation:inputHighlighter 0.3s ease;\n    animation:inputHighlighter 0.3s ease;\n  }\n  \n  /* animation */\n  @-webkit-keyframes inputHighlighter {\n      from { background:#5264AE; }\n    to \t{ width:0; background:transparent; }\n  }\n  @-moz-keyframes inputHighlighter {\n      from { background:#5264AE; }\n    to \t{ width:0; background:transparent; }\n  }\n  @keyframes inputHighlighter {\n      from { background:#5264AE; }\n    to \t{ width:0; background:transparent; }\n  }\n  \n  /****  floating-Lable style end ****/\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  /***   Body style start  ***/\n  \n  html {\n      font-family: \"Helvetica Neue\", Helvetica, \"Noto Sans\", sans-serif, Arial, sans-serif;\n      font-size: 12px;\n      line-height: 1.42857143;\n      color: #949494;\n      background-color: #ffffff;\n  }\n  /***   Body style end  ***/\n  \n  \n  /***   daniel - Fork me friend - style   ***/\n  .floating-credit { position:fixed; bottom:10px;right:10px; color:#aaa; font-size:13px;font-family:arial,sans-serif; }\n  .floating-credit a { text-decoration:none; color:#000000; font-weight:bold; }\n  .floating-credit a:hover { border-bottom:1px dotted #f8f8f8; }\n  .floating-heading { position:fixed; color:#aaa; font-size:20px; font-family:arial,sans-serif; }\n  /***  daniel - Fork me friend - style  ***/\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var inputBorderColor = "rgba(0, 0, 0, 0.23)";
-
-var InputWrapper = _styledComponents["default"].div(_templateObject(), inputBorderColor, function (props) {
+var InputWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.floating-form {\n    width:320px;\n  }\n  \n  /****  floating-Lable style start ****/\n  .floating-label { \n    position:relative; \n    margin-bottom:20px; \n  }\n  .floating-input , .floating-select {\n    font-size:14px;\n    padding:4px 4px;\n    display:block;\n    width:100%;\n    height:30px;\n    background-color: transparent;\n    border:none;\n    border-bottom:1px solid ", ";\n    ", "\n  }\n  \n  .floating-input:focus , .floating-select:focus {\n       outline:none;\n       border-bottom:2px solid #5264AE; \n       ", "\n  }\n  \n  label {\n    color:#999; \n    font-size:14px;\n    font-weight:normal;\n    position:absolute;\n    pointer-events:none;\n    left:5px;\n    top:5px;\n    transition:0.2s ease all; \n    -moz-transition:0.2s ease all; \n    -webkit-transition:0.2s ease all;\n    ", "\n    \n  }\n  \n  .floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {\n    top:-18px;\n    font-size:14px;\n    color:#5264AE;\n    ", "\n  }\n  \n  .floating-select:focus ~ label , .floating-select:not([value=\"\"]):valid ~ label {\n    top:-18px;\n    font-size:14px;\n    color:#5264AE;\n  }\n  \n  /* active state */\n  .floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {\n    width:50%;\n  }\n  \n  *, *:before, *:after {\n      -webkit-box-sizing: border-box;\n      -moz-box-sizing: border-box;\n      box-sizing: border-box;\n  }\n  \n  .floating-textarea {\n     min-height: 30px;\n     max-height: 260px; \n     overflow:hidden;\n    overflow-x: hidden; \n  }\n  \n  /* highlighter \n  .highlight {\n    position:absolute;\n    height:50%; \n    width:100%; \n    top:15%; \n    left:0;\n    pointer-events:none;\n    opacity:0.5;\n  }*/\n  \n  /* active state */\n  .floating-input:focus ~ .highlight , .floating-select:focus ~ .highlight {\n    -webkit-animation:inputHighlighter 0.3s ease;\n    -moz-animation:inputHighlighter 0.3s ease;\n    animation:inputHighlighter 0.3s ease;\n  }\n  \n  /* animation */\n  @-webkit-keyframes inputHighlighter {\n      from { background:#5264AE; }\n    to \t{ width:0; background:transparent; }\n  }\n  @-moz-keyframes inputHighlighter {\n      from { background:#5264AE; }\n    to \t{ width:0; background:transparent; }\n  }\n  @keyframes inputHighlighter {\n      from { background:#5264AE; }\n    to \t{ width:0; background:transparent; }\n  }\n  \n  /****  floating-Lable style end ****/\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  /***   Body style start  ***/\n  \n  html {\n      font-family: \"Helvetica Neue\", Helvetica, \"Noto Sans\", sans-serif, Arial, sans-serif;\n      font-size: 12px;\n      line-height: 1.42857143;\n      color: #949494;\n      background-color: #ffffff;\n  }\n  /***   Body style end  ***/\n  \n  \n  /***   daniel - Fork me friend - style   ***/\n  .floating-credit { position:fixed; bottom:10px;right:10px; color:#aaa; font-size:13px;font-family:arial,sans-serif; }\n  .floating-credit a { text-decoration:none; color:#000000; font-weight:bold; }\n  .floating-credit a:hover { border-bottom:1px dotted #f8f8f8; }\n  .floating-heading { position:fixed; color:#aaa; font-size:20px; font-family:arial,sans-serif; }\n  /***  daniel - Fork me friend - style  ***/\n"])), inputBorderColor, function (props) {
   return props.variant === 'outlined' && "\n        border:1px solid ".concat(inputBorderColor, ";\n        border-radius: 4px;\n        height: 40px;\n    ");
@@ -36,4 +22,3 @@ }, function (props) {
 });
-
 var _default = InputWrapper;
 exports["default"] = _default;

dist/index.js

@@ -7,8 +7,5 @@ "use strict";
 exports["default"] = void 0;
-
 var _InputFloatingLabel = _interopRequireDefault(require("./components/InputFloatingLabel"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var _default = _InputFloatingLabel["default"];
 exports["default"] = _default;

package.json

 {
   "name": "input-floating-label-react",
-  "version": "0.0.2-0.0.2-alpha.1.0",
+  "version": "0.0.2",
   "description": "Example Button Component",
@@ -16,3 +16,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "ebbef56c522fc8bc626906e19669e981b65da9e1"
+  "gitHead": "49c2ee941c5bad9b8ae8b895d1fdc79522caacb9"
 }

No alert changes

Improved metrics

Total package byte prevSize

13879

increased by0.27%

Worsened metrics

Lines of code

213

decreased by-1.84%

No dependency changes