sling-web-component-button - npm Package Compare versions

Comparing version 1.11.2 to 1.11.3

package.json

 {
   "name": "sling-web-component-button",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "description": "Sling Button",
@@ -10,5 +10,5 @@ "module": "src/index.js",
   "dependencies": {
-    "sling-framework": "^1.11.2",
-    "sling-helpers": "^1.11.2"
+    "sling-framework": "^1.11.3",
+    "sling-helpers": "^1.11.3"
   }
 }

src/component/Button.js

@@ -40,3 +40,340 @@ import { SlingElement, html } from 'sling-framework';
       <style>
-        @import url('sling-web-component-button/src/index.css');
+        .emd-btn {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  padding: calc(16px - var(--sling-button-border-width, 1px)) calc(24px - var(--sling-button-border-width, 1px));
+  width: 100%;
+  height: 100%;
+  outline: none;
+  border-width: var(--sling-button-border-width, 1px);
+  border-style: solid;
+  border-radius: var(--sling-button-border-radius, 2px);
+  background-color: transparent;
+  color: #fff;
+  fill: #fff;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.emd-btn_layout_text {
+  padding: calc(8px - var(--sling-button-border-width, 1px));
+}
+
+.emd-btn_slim {
+  padding-top: calc(8px - var(--sling-button-border-width, 1px));
+  padding-bottom: calc(8px - var(--sling-button-border-width, 1px));
+}
+
+.emd-btn_disabled {
+  cursor: not-allowed;
+}
+
+.emd-btn_size_small {
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.emd-btn_size_big {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+/* default */
+
+.emd-btn {
+  border-color: #2d3844;
+  background-color: #2d3844;
+  color: #fff;
+  fill: #fff;
+}
+
+.emd-btn:hover,
+.emd-btn:focus,
+.emd-btn:active {
+  border-color: #0c1219;
+}
+
+.emd-btn:active {
+  background-color: #0c1219;
+}
+
+.emd-btn.emd-btn_layout_outline,
+.emd-btn.emd-btn_layout_text {
+  color: #2d3844;
+  fill: #2d3844;
+}
+
+.emd-btn.emd-btn_layout_outline:hover,
+.emd-btn.emd-btn_layout_outline:focus,
+.emd-btn.emd-btn_layout_outline:active,
+.emd-btn.emd-btn_layout_text:hover,
+.emd-btn.emd-btn_layout_text:focus,
+.emd-btn.emd-btn_layout_text:active {
+  color: #0c1219;
+  fill: #0c1219;
+}
+
+.emd-btn.emd-btn_layout_outline:active {
+  background-color: rgba(150, 160, 175, 0.2);
+}
+
+/* primary */
+
+.emd-btn_color_primary {
+  border-color: var(--sling-button-primary-color, #95c93d);
+  background-color: var(--sling-button-primary-color, #95c93d);
+  color: #fff;
+  fill: #fff;
+}
+
+.emd-btn_color_primary:hover,
+.emd-btn_color_primary:focus,
+.emd-btn_color_primary:active {
+  border-color: var(--sling-button-primary-highlight-color, #7aa436);
+}
+
+.emd-btn_color_primary:active {
+  background-color: var(--sling-button-primary-highlight-color, #7aa436);
+}
+
+.emd-btn_color_primary.emd-btn_layout_outline,
+.emd-btn_color_primary.emd-btn_layout_text {
+  color: var(--sling-button-primary-color, #95c93d);
+  fill: var(--sling-button-primary-color, #95c93d);
+}
+
+.emd-btn_color_primary.emd-btn_layout_outline:hover,
+.emd-btn_color_primary.emd-btn_layout_outline:focus,
+.emd-btn_color_primary.emd-btn_layout_outline:active,
+.emd-btn_color_primary.emd-btn_layout_text:hover,
+.emd-btn_color_primary.emd-btn_layout_text:focus,
+.emd-btn_color_primary.emd-btn_layout_text:active {
+  color: var(--sling-button-primary-highlight-color, #7aa436);
+  fill: var(--sling-button-primary-highlight-color, #7aa436);
+}
+
+.emd-btn_color_primary.emd-btn_layout_outline:active {
+  background-color: var(--sling-button-primary-active-color, rgba(149, 201, 61, 0.2));
+}
+
+/* success */
+
+.emd-btn_color_success {
+  border-color: #2ecc71;
+  background-color: #2ecc71;
+  color: #fff;
+  fill: #fff;
+}
+
+.emd-btn_color_success:hover,
+.emd-btn_color_success:focus,
+.emd-btn_color_success:active {
+  border-color: #27a75f;
+}
+
+.emd-btn_color_success:active {
+  background-color: #27a75f;
+}
+
+.emd-btn_color_success.emd-btn_layout_outline,
+.emd-btn_color_success.emd-btn_layout_text {
+  color: #2ecc71;
+  fill: #2ecc71;
+}
+
+.emd-btn_color_success.emd-btn_layout_outline:hover,
+.emd-btn_color_success.emd-btn_layout_outline:focus,
+.emd-btn_color_success.emd-btn_layout_outline:active,
+.emd-btn_color_success.emd-btn_layout_text:hover,
+.emd-btn_color_success.emd-btn_layout_text:focus,
+.emd-btn_color_success.emd-btn_layout_text:active {
+  color: #27a75f;
+  fill: #27a75f;
+}
+
+.emd-btn_color_success.emd-btn_layout_outline:active {
+  background-color: rgba(46, 204, 113, 0.2);
+}
+
+/* danger */
+
+.emd-btn_color_danger {
+  border-color: #e74c3c;
+  background-color: #e74c3c;
+  color: #fff;
+  fill: #fff;
+}
+
+.emd-btn_color_danger:hover,
+.emd-btn_color_danger:focus,
+.emd-btn_color_danger:active {
+  border-color: #bb4035;
+}
+
+.emd-btn_color_danger:active {
+  background-color: #bb4035;
+}
+
+.emd-btn_color_danger.emd-btn_layout_outline,
+.emd-btn_color_danger.emd-btn_layout_text {
+  color: #e74c3c;
+  fill: #e74c3c;
+}
+
+.emd-btn_color_danger.emd-btn_layout_outline:hover,
+.emd-btn_color_danger.emd-btn_layout_outline:focus,
+.emd-btn_color_danger.emd-btn_layout_outline:active,
+.emd-btn_color_danger.emd-btn_layout_text:hover,
+.emd-btn_color_danger.emd-btn_layout_text:focus,
+.emd-btn_color_danger.emd-btn_layout_text:active {
+  color: #bb4035;
+  fill: #bb4035;
+}
+
+.emd-btn_color_danger.emd-btn_layout_outline:active {
+  background-color: rgba(231, 76, 60, 0.2);
+}
+
+/* light */
+
+.emd-btn_color_light {
+  border-color: #ebebf0;
+  background-color: #ebebf0;
+  color: #2d3844;
+  fill: #ebebf0;
+}
+
+.emd-btn_color_light:hover,
+.emd-btn_color_light:focus,
+.emd-btn_color_light:active {
+  border-color: #fff;
+}
+
+.emd-btn_color_light:active {
+  background-color: #fff;
+}
+
+.emd-btn_color_light.emd-btn_layout_outline,
+.emd-btn_color_light.emd-btn_layout_text {
+  color: #ebebf0;
+  fill: #ebebf0;
+}
+
+.emd-btn_color_light.emd-btn_layout_outline:hover,
+.emd-btn_color_light.emd-btn_layout_outline:focus,
+.emd-btn_color_light.emd-btn_layout_outline:active,
+.emd-btn_color_light.emd-btn_layout_text:hover,
+.emd-btn_color_light.emd-btn_layout_text:focus,
+.emd-btn_color_light.emd-btn_layout_text:active {
+  color: #fff;
+  fill: #fff;
+}
+
+.emd-btn_color_light.emd-btn_layout_outline:active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* disabled */
+
+.emd-btn_disabled,
+.emd-btn_disabled:hover,
+.emd-btn_disabled:focus,
+.emd-btn_disabled:active {
+  border-color: #ebebf0;
+  background-color: #ebebf0;
+  color: #c3c8d1;
+  fill: #c3c8d1;
+}
+
+.emd-btn_disabled.emd-btn_layout_outline,
+.emd-btn_disabled.emd-btn_layout_text {
+  color: #c3c8d1;
+  fill: #c3c8d1;
+}
+
+.emd-btn_disabled.emd-btn_layout_outline:hover,
+.emd-btn_disabled.emd-btn_layout_outline:focus,
+.emd-btn_disabled.emd-btn_layout_outline:active,
+.emd-btn_disabled.emd-btn_layout_text:hover,
+.emd-btn_disabled.emd-btn_layout_text:focus,
+.emd-btn_disabled.emd-btn_layout_text:active {
+  color: #c3c8d1;
+  fill: #c3c8d1;
+  background-color: transparent;
+}
+
+.emd-btn_disabled.emd-btn_layout_text:hover,
+.emd-btn_disabled.emd-btn_layout_text:focus,
+.emd-btn_disabled.emd-btn_layout_text:active {
+  border-color: transparent;
+}
+
+/* outline and text */
+
+.emd-btn_layout_outline,
+.emd-btn_layout_text {
+  background-color: transparent;
+}
+
+.emd-btn_layout_text,
+.emd-btn_layout_text:hover,
+.emd-btn_layout_text:focus,
+.emd-btn_layout_text:active {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+:host {
+  display: inline-block;
+  background: transparent !important;
+  border: none !important;
+  outline: none !important;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+:host > .emd-btn {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+:host slot {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+/* for compatibility */
+
+sling-button {
+  display: inline-block;
+  background: transparent !important;
+  border: none !important;
+  outline: none !important;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+sling-button > .emd-btn {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+sling-button slot {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
       </style>
@@ -43,0 +380,0 @@ <button type="${type}" className="${className}" disabled=${disabled}>

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

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

544711

increased by1.39%

Lines of code

13236

increased by2.17%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updatedsling-framework@^1.11.3

• Updatedsling-helpers@^1.11.3