@semcore/spin - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [3.0.3] - 2020-10-29
+
+### Fixed
+
+- Added the placeholder for ID style tag to improve collision protection.
+
 ## [3.0.2] - 2020-09-08
@@ -7,0 +13,0 @@

lib/cjs/Spin.js

@@ -43,21 +43,21 @@ "use strict";
 /*__inner_css_start__*/
-"@-webkit-keyframes _spin-rotate_1hfeq_gg_ {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes _spin-rotate_1hfeq_gg_ {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.___SSpin_1hfeq_gg_ {\n  display: block;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  -webkit-animation: _spin-rotate_1hfeq_gg_ 0.75s infinite linear;\n          animation: _spin-rotate_1hfeq_gg_ 0.75s infinite linear;\n  border-radius: 50%;\n  border-style: solid;\n  border-bottom-color: transparent;\n  border-left-color: transparent;\n}\n\n.___SSpin_1hfeq_gg_.__theme_1hfeq_gg_.__theme_dark_1hfeq_gg_ {\n  color: rgba(0, 0, 0, 0.3);\n}\n\n.___SSpin_1hfeq_gg_.__theme_1hfeq_gg_.__theme_invert_1hfeq_gg_ {\n  color: #fff;\n}\n\n.___SSpin_1hfeq_gg_.__centered_1hfeq_gg_ {\n  margin: auto;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xxs_1hfeq_gg_ {\n  width: 10px;\n  height: 10px;\n  border-width: 1px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xs_1hfeq_gg_ {\n  width: 16px;\n  height: 16px;\n  border-width: 2px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_s_1hfeq_gg_ {\n  width: 20px;\n  height: 20px;\n  border-width: 3px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_m_1hfeq_gg_ {\n  width: 24px;\n  height: 24px;\n  border-width: 4px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_l_1hfeq_gg_ {\n  width: 32px;\n  height: 32px;\n  border-width: 6px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xl_1hfeq_gg_ {\n  width: 48px;\n  height: 48px;\n  border-width: 8px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xxl_1hfeq_gg_ {\n  width: 72px;\n  height: 72px;\n  border-width: 10px;\n}\n"
+"@-webkit-keyframes _spin-rotate_1425w_gg_{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _spin-rotate_1425w_gg_{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.___SSpin_1425w_gg_{display:block;flex-shrink:0;box-sizing:border-box;-webkit-animation:_spin-rotate_1425w_gg_ .75s linear infinite;animation:_spin-rotate_1425w_gg_ .75s linear infinite;border-radius:50%;border-style:solid;border-bottom-color:transparent;border-left-color:transparent}.___SSpin_1425w_gg_.__theme_1425w_gg_.__theme_dark_1425w_gg_{color:rgba(0,0,0,.3)}.___SSpin_1425w_gg_.__theme_1425w_gg_.__theme_invert_1425w_gg_{color:#fff}.___SSpin_1425w_gg_.__centered_1425w_gg_{margin:auto}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xxs_1425w_gg_{width:10px;height:10px;border-width:1px}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xs_1425w_gg_{width:16px;height:16px;border-width:2px}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_s_1425w_gg_{width:20px;height:20px;border-width:3px}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_m_1425w_gg_{width:24px;height:24px;border-width:4px}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_l_1425w_gg_{width:32px;height:32px;border-width:6px}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xl_1425w_gg_{width:48px;height:48px;border-width:8px}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xxl_1425w_gg_{width:72px;height:72px;border-width:10px}"
 /*__inner_css_end__*/
-, "ots6uo")
+, "48b1e9_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSpin": "___SSpin_1hfeq_gg_",
-  "spin-rotate": "_spin-rotate_1hfeq_gg_",
-  "_theme": "__theme_1hfeq_gg_",
-  "_theme_dark": "__theme_dark_1hfeq_gg_",
-  "_theme_invert": "__theme_invert_1hfeq_gg_",
-  "_centered": "__centered_1hfeq_gg_",
-  "_size": "__size_1hfeq_gg_",
-  "_size_xxs": "__size_xxs_1hfeq_gg_",
-  "_size_xs": "__size_xs_1hfeq_gg_",
-  "_size_s": "__size_s_1hfeq_gg_",
-  "_size_m": "__size_m_1hfeq_gg_",
-  "_size_l": "__size_l_1hfeq_gg_",
-  "_size_xl": "__size_xl_1hfeq_gg_",
-  "_size_xxl": "__size_xxl_1hfeq_gg_"
+  "__SSpin": "___SSpin_1425w_gg_",
+  "spin-rotate": "_spin-rotate_1425w_gg_",
+  "_theme": "__theme_1425w_gg_",
+  "_theme_dark": "__theme_dark_1425w_gg_",
+  "_theme_invert": "__theme_invert_1425w_gg_",
+  "_centered": "__centered_1425w_gg_",
+  "_size": "__size_1425w_gg_",
+  "_size_xxs": "__size_xxs_1425w_gg_",
+  "_size_xs": "__size_xs_1425w_gg_",
+  "_size_s": "__size_s_1425w_gg_",
+  "_size_m": "__size_m_1425w_gg_",
+  "_size_l": "__size_l_1425w_gg_",
+  "_size_xl": "__size_xl_1425w_gg_",
+  "_size_xxl": "__size_xxl_1425w_gg_"
 }),
@@ -70,5 +70,5 @@ style = (0, _extends2["default"])({}, _ref);
   /*__inner_css_start__*/
-  "@media (max-width: 768px) {\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xxs_1hfeq_gg_ {\n  width: 13px;\n  height: 13px;\n  border-width: 1.3px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xs_1hfeq_gg_ {\n  width: 20.8px;\n  height: 20.8px;\n  border-width: 2.6px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_s_1hfeq_gg_ {\n  width: 26px;\n  height: 26px;\n  border-width: 3.9px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_m_1hfeq_gg_ {\n  width: 31.2px;\n  height: 31.2px;\n  border-width: 5.2px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_l_1hfeq_gg_ {\n  width: 41.6px;\n  height: 41.6px;\n  border-width: 7.8px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xl_1hfeq_gg_ {\n  width: 62.4px;\n  height: 62.4px;\n  border-width: 10.4px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xxl_1hfeq_gg_ {\n  width: 93.6px;\n  height: 93.6px;\n  border-width: 13px;\n}}"
+  "@media (max-width: 768px) {\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xxs_1425w_gg_ {\n  width: 13px;\n  height: 13px;\n  border-width: 1.3px;\n}\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xs_1425w_gg_ {\n  width: 20.8px;\n  height: 20.8px;\n  border-width: 2.6px;\n}\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_s_1425w_gg_ {\n  width: 26px;\n  height: 26px;\n  border-width: 3.9px;\n}\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_m_1425w_gg_ {\n  width: 31.2px;\n  height: 31.2px;\n  border-width: 5.2px;\n}\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_l_1425w_gg_ {\n  width: 41.6px;\n  height: 41.6px;\n  border-width: 7.8px;\n}\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xl_1425w_gg_ {\n  width: 62.4px;\n  height: 62.4px;\n  border-width: 10.4px;\n}\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xxl_1425w_gg_ {\n  width: 93.6px;\n  height: 93.6px;\n  border-width: 13px;\n}}"
   /*__inner_css_end__*/
-  , "1lv1rn3")
+  , "1kxjw1d_gg_")
   /*__reshadow_css_end__*/
@@ -93,8 +93,8 @@ ;
 /*__inner_css_start__*/
-".___SSpin_1mrv8_gg_ {\n  color: var(--18595ct_0);\n}"
+".___SSpin_1x4k9_gg_{color:var(--18595ct_0)}"
 /*__inner_css_end__*/
-, "xzusq")
+, "jng9um_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSpin": "___SSpin_1mrv8_gg_"
+  "__SSpin": "___SSpin_1x4k9_gg_"
 })]);
@@ -101,0 +101,0 @@

lib/es6/Spin.js

@@ -23,21 +23,21 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 /*__inner_css_start__*/
-"@-webkit-keyframes _spin-rotate_1hfeq_gg_ {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes _spin-rotate_1hfeq_gg_ {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.___SSpin_1hfeq_gg_ {\n  display: block;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  -webkit-animation: _spin-rotate_1hfeq_gg_ 0.75s infinite linear;\n          animation: _spin-rotate_1hfeq_gg_ 0.75s infinite linear;\n  border-radius: 50%;\n  border-style: solid;\n  border-bottom-color: transparent;\n  border-left-color: transparent;\n}\n\n.___SSpin_1hfeq_gg_.__theme_1hfeq_gg_.__theme_dark_1hfeq_gg_ {\n  color: rgba(0, 0, 0, 0.3);\n}\n\n.___SSpin_1hfeq_gg_.__theme_1hfeq_gg_.__theme_invert_1hfeq_gg_ {\n  color: #fff;\n}\n\n.___SSpin_1hfeq_gg_.__centered_1hfeq_gg_ {\n  margin: auto;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xxs_1hfeq_gg_ {\n  width: 10px;\n  height: 10px;\n  border-width: 1px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xs_1hfeq_gg_ {\n  width: 16px;\n  height: 16px;\n  border-width: 2px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_s_1hfeq_gg_ {\n  width: 20px;\n  height: 20px;\n  border-width: 3px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_m_1hfeq_gg_ {\n  width: 24px;\n  height: 24px;\n  border-width: 4px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_l_1hfeq_gg_ {\n  width: 32px;\n  height: 32px;\n  border-width: 6px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xl_1hfeq_gg_ {\n  width: 48px;\n  height: 48px;\n  border-width: 8px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xxl_1hfeq_gg_ {\n  width: 72px;\n  height: 72px;\n  border-width: 10px;\n}\n"
+"@-webkit-keyframes _spin-rotate_1425w_gg_{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _spin-rotate_1425w_gg_{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.___SSpin_1425w_gg_{display:block;flex-shrink:0;box-sizing:border-box;-webkit-animation:_spin-rotate_1425w_gg_ .75s linear infinite;animation:_spin-rotate_1425w_gg_ .75s linear infinite;border-radius:50%;border-style:solid;border-bottom-color:transparent;border-left-color:transparent}.___SSpin_1425w_gg_.__theme_1425w_gg_.__theme_dark_1425w_gg_{color:rgba(0,0,0,.3)}.___SSpin_1425w_gg_.__theme_1425w_gg_.__theme_invert_1425w_gg_{color:#fff}.___SSpin_1425w_gg_.__centered_1425w_gg_{margin:auto}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xxs_1425w_gg_{width:10px;height:10px;border-width:1px}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xs_1425w_gg_{width:16px;height:16px;border-width:2px}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_s_1425w_gg_{width:20px;height:20px;border-width:3px}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_m_1425w_gg_{width:24px;height:24px;border-width:4px}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_l_1425w_gg_{width:32px;height:32px;border-width:6px}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xl_1425w_gg_{width:48px;height:48px;border-width:8px}.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xxl_1425w_gg_{width:72px;height:72px;border-width:10px}"
 /*__inner_css_end__*/
-, "ots6uo")
+, "48b1e9_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSpin": "___SSpin_1hfeq_gg_",
-  "spin-rotate": "_spin-rotate_1hfeq_gg_",
-  "_theme": "__theme_1hfeq_gg_",
-  "_theme_dark": "__theme_dark_1hfeq_gg_",
-  "_theme_invert": "__theme_invert_1hfeq_gg_",
-  "_centered": "__centered_1hfeq_gg_",
-  "_size": "__size_1hfeq_gg_",
-  "_size_xxs": "__size_xxs_1hfeq_gg_",
-  "_size_xs": "__size_xs_1hfeq_gg_",
-  "_size_s": "__size_s_1hfeq_gg_",
-  "_size_m": "__size_m_1hfeq_gg_",
-  "_size_l": "__size_l_1hfeq_gg_",
-  "_size_xl": "__size_xl_1hfeq_gg_",
-  "_size_xxl": "__size_xxl_1hfeq_gg_"
+  "__SSpin": "___SSpin_1425w_gg_",
+  "spin-rotate": "_spin-rotate_1425w_gg_",
+  "_theme": "__theme_1425w_gg_",
+  "_theme_dark": "__theme_dark_1425w_gg_",
+  "_theme_invert": "__theme_invert_1425w_gg_",
+  "_centered": "__centered_1425w_gg_",
+  "_size": "__size_1425w_gg_",
+  "_size_xxs": "__size_xxs_1425w_gg_",
+  "_size_xs": "__size_xs_1425w_gg_",
+  "_size_s": "__size_s_1425w_gg_",
+  "_size_m": "__size_m_1425w_gg_",
+  "_size_l": "__size_l_1425w_gg_",
+  "_size_xl": "__size_xl_1425w_gg_",
+  "_size_xxl": "__size_xxl_1425w_gg_"
 }),
@@ -50,5 +50,5 @@ style = _extends({}, _ref);
   /*__inner_css_start__*/
-  "@media (max-width: 768px) {\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xxs_1hfeq_gg_ {\n  width: 13px;\n  height: 13px;\n  border-width: 1.3px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xs_1hfeq_gg_ {\n  width: 20.8px;\n  height: 20.8px;\n  border-width: 2.6px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_s_1hfeq_gg_ {\n  width: 26px;\n  height: 26px;\n  border-width: 3.9px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_m_1hfeq_gg_ {\n  width: 31.2px;\n  height: 31.2px;\n  border-width: 5.2px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_l_1hfeq_gg_ {\n  width: 41.6px;\n  height: 41.6px;\n  border-width: 7.8px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xl_1hfeq_gg_ {\n  width: 62.4px;\n  height: 62.4px;\n  border-width: 10.4px;\n}\n\n.___SSpin_1hfeq_gg_.__size_1hfeq_gg_.__size_xxl_1hfeq_gg_ {\n  width: 93.6px;\n  height: 93.6px;\n  border-width: 13px;\n}}"
+  "@media (max-width: 768px) {\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xxs_1425w_gg_ {\n  width: 13px;\n  height: 13px;\n  border-width: 1.3px;\n}\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xs_1425w_gg_ {\n  width: 20.8px;\n  height: 20.8px;\n  border-width: 2.6px;\n}\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_s_1425w_gg_ {\n  width: 26px;\n  height: 26px;\n  border-width: 3.9px;\n}\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_m_1425w_gg_ {\n  width: 31.2px;\n  height: 31.2px;\n  border-width: 5.2px;\n}\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_l_1425w_gg_ {\n  width: 41.6px;\n  height: 41.6px;\n  border-width: 7.8px;\n}\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xl_1425w_gg_ {\n  width: 62.4px;\n  height: 62.4px;\n  border-width: 10.4px;\n}\n\n.___SSpin_1425w_gg_.__size_1425w_gg_.__size_xxl_1425w_gg_ {\n  width: 93.6px;\n  height: 93.6px;\n  border-width: 13px;\n}}"
   /*__inner_css_end__*/
-  , "1lv1rn3")
+  , "1kxjw1d_gg_")
   /*__reshadow_css_end__*/
@@ -73,8 +73,8 @@ ;
 /*__inner_css_start__*/
-".___SSpin_1mrv8_gg_ {\n  color: var(--18595ct_0);\n}"
+".___SSpin_1x4k9_gg_{color:var(--18595ct_0)}"
 /*__inner_css_end__*/
-, "xzusq")
+, "jng9um_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SSpin": "___SSpin_1mrv8_gg_"
+  "__SSpin": "___SSpin_1x4k9_gg_"
 })]);
@@ -81,0 +81,0 @@

lib/types/Spin.d.ts

@@ -5,13 +5,13 @@ import React from 'react';
 export interface ISpinProps extends IBoxProps {
-    /** Размер спиннера
+    /** Spinner size
      * @default m
      **/
     size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
-    /** Тема спиннера, есть несколько дефолтных тем или можно передать свой цвет
+    /** Spinner theme. There are several default themes or you can use your own color
      * @default dark
      **/
     theme?: 'dark' | 'invert' | string;
-    /** Должен ли спиннер стать по центру родителя.
-     * Хорошо работает для вложенного спиннера во `flex`,
-     * иначе выравнивание произойдет только по горизонтали.
+    /** Whether the spinner should be in the center of the parent.
+     * This works for a nested spinner in flex,
+     * otherwise only horizontal alignment will occur.
      * */
@@ -18,0 +18,0 @@ centered?: boolean;

package.json

 {
   "name": "@semcore/spin",
   "description": "SEMRush Spin Component",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "main": "lib/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "lib/es6/index.js",

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

Worsened metrics

Total package byte prevSize

28529

decreased by-4.53%

Lines of code

525

decreased by-0.38%

No dependency changes