@operato/popup - npm Package Compare versions

Comparing version 0.2.38 to 0.2.41

CHANGELOG.md

@@ -6,2 +6,12 @@ # Change Log
 
+### [0.2.41](https://github.com/hatiolab/operato/compare/v0.2.40...v0.2.41) (2021-12-07)
+
+
+### :bug: Bug Fix
+
+* popup and input style ([11c5b3e](https://github.com/hatiolab/operato/commit/11c5b3e4bf3f08d18673ada585e50a69b9c88b5b))
+* popup style ([43ee008](https://github.com/hatiolab/operato/commit/43ee008afbbd817bb002d2e3c420044f939c9415))
+
+
+
 ### [0.2.38](https://github.com/hatiolab/operato/compare/v0.2.37...v0.2.38) (2021-12-07)
@@ -8,0 +18,0 @@

dist/src/ox-popup-list.js

 import { __decorate } from "tslib";
 import { css, html } from 'lit';
+import { render } from 'lit-html';
 import { customElement, property, state } from 'lit/decorators.js';
 import { OxPopup } from './ox-popup';
-import { render } from 'lit-html';
 function guaranteeFocus(element) {
@@ -169,4 +169,3 @@ // 1. 옵션 엘리먼트의 하위 첫번째 focusible 엘리먼트에 focus 기회를 준다.
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
-        padding: 5px;
-
+        padding: 4px 0;
         color: var(--theme-primary-text-color, #3c3938);
@@ -186,7 +185,9 @@ font: normal 14px 'Roboto', sans-serif;
         white-space: nowrap;
+        border-left: 3px solid transparent;
       }
 
       ::slotted(*) {
-        margin: 1px 0;
-        padding: 4px 2px 3px 2px;
+        padding: 5px 10px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        cursor: pointer;
       }
@@ -198,14 +199,10 @@
 
-      ::slotted([option]) {
-        border-radius: 5px;
+      ::slotted([option][active]),
+      ::slotted([option]:hover) {
+        background-color: #f6f6f6;
       }
 
-      ::slotted([option][active]) {
-        background-color: rgba(20, 154, 155, 0.1);
-        cursor: pointer;
-      }
-
       ::slotted([option][selected]) {
-        background-color: red;
-        cursor: pointer;
+        border-left: 3px solid var(--primary-color, #38a25b);
+        font-weight: bold;
       }
@@ -212,0 +209,0 @@

dist/src/ox-popup-menu.js

 import { __decorate } from "tslib";
 import { css, html } from 'lit';
+import { render } from 'lit-html';
 import { customElement, property } from 'lit/decorators.js';
 import { OxPopup } from './ox-popup';
-import { render } from 'lit-html';
 function focusClosest(element) {
@@ -134,3 +134,3 @@ /* Find the closest focusable element. */
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
-        padding: 5px;
+        padding: 4px 0;
 
@@ -150,4 +150,4 @@ color: var(--theme-primary-text-color, #3c3938);
       ::slotted(*) {
-        margin: 1px 0;
-        padding: 4px 2px 3px 2px;
+        padding: 5px 10px;
+        cursor: pointer;
       }
@@ -159,11 +159,15 @@
 
+      ::slotted([menu][active]),
+      ::slotted([menu]:hover) {
+        background-color: #f6f6f6;
+      }
+
       ::slotted([menu]),
       ::slotted(ox-popup-menuitem) {
-        border-radius: 5px;
+        border-left: 3px solid transparent;
       }
 
-      ::slotted([menu][active]),
       ::slotted(ox-popup-menuitem[active]) {
-        background-color: rgba(20, 154, 155, 0.1);
-        cursor: pointer;
+        border-left: 3px solid var(--primary-color, #38a25b);
+        font-weight: bold;
       }
@@ -170,0 +174,0 @@

dist/src/ox-popup-menuitem.js

 import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -81,3 +81,3 @@ let OxPopupMenuItem = class OxPopupMenuItem extends LitElement {
         const top = 0;
-        const left = this.offsetWidth + 8;
+        const left = this.clientWidth;
         this._submenu.open({ top, left, silent });
@@ -84,0 +84,0 @@ }

package.json

@@ -6,3 +6,3 @@ {
   "author": "heartyoh",
-  "version": "0.2.38",
+  "version": "0.2.41",
   "main": "dist/src/index.js",
@@ -36,3 +36,3 @@ "module": "dist/src/index.js",
     "@material/mwc-icon": "^0.25.3",
-    "@operato/styles": "^0.2.38",
+    "@operato/styles": "^0.2.41",
     "lit": "^2.0.2"
@@ -72,3 +72,3 @@ },
   },
-  "gitHead": "c219a952d0edcc93be47ebea73dfc26a40681244"
+  "gitHead": "d7b5c5deef5ea6df80ee57070151a22296c424cc"
 }

src/ox-popup-list.ts

@@ -1,6 +0,6 @@
-import { PropertyValues, css, html } from 'lit'
+import { css, html, PropertyValues } from 'lit'
+import { render } from 'lit-html'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { OxPopup } from './ox-popup'
-import { render } from 'lit-html'
 
@@ -36,4 +36,3 @@ function guaranteeFocus(element: HTMLElement) {
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
-        padding: 5px;
-
+        padding: 4px 0;
         color: var(--theme-primary-text-color, #3c3938);
@@ -53,7 +52,9 @@ font: normal 14px 'Roboto', sans-serif;
         white-space: nowrap;
+        border-left: 3px solid transparent;
       }
 
       ::slotted(*) {
-        margin: 1px 0;
-        padding: 4px 2px 3px 2px;
+        padding: 5px 10px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        cursor: pointer;
       }
@@ -65,14 +66,10 @@
 
-      ::slotted([option]) {
-        border-radius: 5px;
+      ::slotted([option][active]),
+      ::slotted([option]:hover) {
+        background-color: #f6f6f6;
       }
 
-      ::slotted([option][active]) {
-        background-color: rgba(20, 154, 155, 0.1);
-        cursor: pointer;
-      }
-
       ::slotted([option][selected]) {
-        background-color: red;
-        cursor: pointer;
+        border-left: 3px solid var(--primary-color, #38a25b);
+        font-weight: bold;
       }
@@ -79,0 +76,0 @@

src/ox-popup-menu.ts

@@ -1,6 +0,6 @@
-import { PropertyValues, css, html } from 'lit'
+import { css, html, PropertyValues } from 'lit'
+import { render } from 'lit-html'
 import { customElement, property } from 'lit/decorators.js'
 
 import { OxPopup } from './ox-popup'
-import { render } from 'lit-html'
 
@@ -30,3 +30,3 @@ function focusClosest(element: HTMLElement) {
         box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
-        padding: 5px;
+        padding: 4px 0;
 
@@ -46,4 +46,4 @@ color: var(--theme-primary-text-color, #3c3938);
       ::slotted(*) {
-        margin: 1px 0;
-        padding: 4px 2px 3px 2px;
+        padding: 5px 10px;
+        cursor: pointer;
       }
@@ -55,11 +55,15 @@
 
+      ::slotted([menu][active]),
+      ::slotted([menu]:hover) {
+        background-color: #f6f6f6;
+      }
+
       ::slotted([menu]),
       ::slotted(ox-popup-menuitem) {
-        border-radius: 5px;
+        border-left: 3px solid transparent;
       }
 
-      ::slotted([menu][active]),
       ::slotted(ox-popup-menuitem[active]) {
-        background-color: rgba(20, 154, 155, 0.1);
-        cursor: pointer;
+        border-left: 3px solid var(--primary-color, #38a25b);
+        font-weight: bold;
       }
@@ -66,0 +70,0 @@

src/ox-popup-menuitem.ts

@@ -1,2 +0,2 @@
-import { LitElement, PropertyValues, css, html } from 'lit'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -142,3 +142,3 @@
     const top = 0
-    const left = this.offsetWidth + 8
+    const left = this.clientWidth
     this._submenu.open({ top, left, silent })
@@ -145,0 +145,0 @@ }

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

Improved metrics

Total package byte prevSize

190030

increased by0.68%

Lines of code

1798

increased by0.22%

Dependency changes

• Updated@operato/styles@^0.2.41