Added dialog, menu/listbox dropdowns, and toast rounded corners (#1266)

eBay · Oct 16, 2020 · f532eec · f532eec
1 parent ce2aad5
commit f532eec
Show file tree

Hide file tree

Showing 85 changed files with 532 additions and 139 deletions.
diff --git a/.stylelintrc-css b/.stylelintrc-css
@@ -7,6 +7,7 @@
     "indentation": null,
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
+    "declaration-block-no-duplicate-properties": null,
     "rule-empty-line-before": null,
     "function-calc-no-invalid": null
   }

diff --git a/dist/button/ds6/button.css b/dist/button/ds6/button.css
@@ -43,11 +43,11 @@ a.fake-btn {
 }
 .skin-experiment-rounded button.btn,
 .skin-experiment-rounded a.fake-btn {
-  --button-border-radius: 20px;
+  --button-border-radius: 48px;
 }
 .skin-experiment-rounded button.btn--large,
 .skin-experiment-rounded a.fake-btn--large {
-  --button-border-radius: 24px;
+  --button-border-radius: 48px;
 }
 .skin-experiment-rounded a.fake-btn--icon-only,
 .skin-experiment-rounded button.btn--icon-only {

diff --git a/dist/combobox/ds4/combobox.css b/dist/combobox/ds4/combobox.css
@@ -37,6 +37,12 @@ span.combobox {
   background-color: var(--dropdown-items-background-color, #fff);
   border-color: #ccc;
   border-color: var(--dropdown-items-border-color, #ccc);
+  border-radius: 0;
+  border-radius: var(--dropdown-items-border-radius, 0);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+  -webkit-box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
+          box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
   border-style: solid;
   border-width: 1px;
   -webkit-box-sizing: border-box;
@@ -46,8 +52,6 @@ span.combobox {
   max-height: 400px;
   overflow-y: auto;
   z-index: 2;
-  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
-          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
   display: none;
   position: absolute;
   top: calc(100% - 1px);

diff --git a/dist/combobox/ds6/combobox.css b/dist/combobox/ds6/combobox.css
@@ -49,6 +49,12 @@ span.combobox {
   background-color: var(--dropdown-items-background-color, #fff);
   border-color: #c7c7c7;
   border-color: var(--dropdown-items-border-color, #c7c7c7);
+  border-radius: 0;
+  border-radius: var(--dropdown-items-border-radius, 0);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+  -webkit-box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
+          box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
   border-style: solid;
   border-width: 1px;
   -webkit-box-sizing: border-box;
@@ -58,8 +64,6 @@ span.combobox {
   max-height: 400px;
   overflow-y: auto;
   z-index: 2;
-  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
-          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
   display: none;
   position: absolute;
   top: calc(100% - 1px);
@@ -265,3 +269,8 @@ span.combobox {
 [dir="rtl"] .combobox__control > button {
   left: 0;
 }
+.skin-experiment-rounded .combobox__listbox {
+  --dropdown-items-border-radius: 8px;
+  --dropdown-items-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
+  --dropdown-items-border-color: #f5f5f5;
+}
diff --git a/dist/cta-button/ds6/cta-button.css b/dist/cta-button/ds6/cta-button.css
@@ -20,10 +20,10 @@ a.cta-btn {
   }
 }
 .skin-experiment-rounded a.cta-btn {
-  --button-border-radius: 20px;
+  --button-border-radius: 48px;
 }
 .skin-experiment-rounded a.cta-button--large {
-  --button-border-radius: 24px;
+  --button-border-radius: 48px;
 }
 a.cta-btn {
   border: 1px solid;

diff --git a/dist/infotip/ds4/infotip.css b/dist/infotip/ds4/infotip.css
@@ -9,8 +9,12 @@ span.infotip {
   display: inline-block;
 }
 .infotip__overlay {
+  border-radius: 0;
+  border-radius: var(--bubble-border-radius, 0);
   -webkit-box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.15), 2px 0 2px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.15), -2px 0 2px rgba(0, 0, 0, 0.15);
           box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.15), 2px 0 2px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.15), -2px 0 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-base-box-shadow, 0 -2px 2px rgba(0, 0, 0, 0.15), 2px 0 2px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.15), -2px 0 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-base-box-shadow, 0 -2px 2px rgba(0, 0, 0, 0.15), 2px 0 2px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.15), -2px 0 2px rgba(0, 0, 0, 0.15));
   font-size: 14px;
   max-width: 344px;
   min-width: 320px;
@@ -19,22 +23,20 @@ span.infotip {
   background-color: var(--infotip-background-color, #fff);
   color: #333;
   color: var(--infotip-foreground-color, #333);
-  border-radius: 0;
-  border-radius: var(--infotip-border-radius, 0);
   display: none;
   left: -10px;
   margin-top: 16px;
   position: absolute;
 }
 .infotip__mask {
+  border-radius: 0;
+  border-radius: var(--bubble-border-radius, 0);
   position: relative;
   z-index: 1;
   background-color: #fff;
   background-color: var(--infotip-background-color, #fff);
   color: #333;
   color: var(--infotip-foreground-color, #333);
-  border-radius: 0;
-  border-radius: var(--infotip-border-radius, 0);
 }
 span.infotip__mask {
   display: block;
@@ -66,46 +68,60 @@ span.infotip__mask {
   z-index: 0;
   -webkit-box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.15);
           box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-top-box-shadow, -2px -2px 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-top-box-shadow, -2px -2px 2px rgba(0, 0, 0, 0.15));
   top: -7px;
   left: calc(50% - 8px);
 }
 .infotip__pointer--top-left {
   -webkit-box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.15);
           box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-top-box-shadow, -2px -2px 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-top-box-shadow, -2px -2px 2px rgba(0, 0, 0, 0.15));
   top: -7px;
   left: 12px;
 }
 .infotip__pointer--top {
   -webkit-box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.15);
           box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-top-box-shadow, -2px -2px 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-top-box-shadow, -2px -2px 2px rgba(0, 0, 0, 0.15));
   top: -7px;
   left: calc(50% - 8px);
 }
 .infotip__pointer--top-right {
   -webkit-box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.15);
           box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-top-box-shadow, -2px -2px 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-top-box-shadow, -2px -2px 2px rgba(0, 0, 0, 0.15));
   top: -7px;
   left: auto;
   right: 12px;
 }
 .infotip__pointer--bottom-left {
-  bottom: -7px;
   -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
           box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-bottom-box-shadow, 2px 2px 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-bottom-box-shadow, 2px 2px 2px rgba(0, 0, 0, 0.15));
+  bottom: -7px;
   top: auto;
   left: 12px;
 }
 .infotip__pointer--bottom {
-  bottom: -7px;
   -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
           box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-bottom-box-shadow, 2px 2px 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-bottom-box-shadow, 2px 2px 2px rgba(0, 0, 0, 0.15));
+  bottom: -7px;
   top: auto;
   left: calc(50% - 8px);
 }
 .infotip__pointer--bottom-right {
-  bottom: -7px;
   -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
           box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-bottom-box-shadow, 2px 2px 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-bottom-box-shadow, 2px 2px 2px rgba(0, 0, 0, 0.15));
+  bottom: -7px;
   top: auto;
   left: auto;
   right: 12px;
@@ -115,36 +131,46 @@ span.infotip__mask {
   left: -7px;
 }
 .infotip__pointer--left-bottom {
-  bottom: 12px;
   -webkit-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15);
           box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-left-box-shadow, -2px 2px 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-left-box-shadow, -2px 2px 2px rgba(0, 0, 0, 0.15));
+  bottom: 12px;
   left: -7px;
   top: auto;
 }
 .infotip__pointer--left-top {
   -webkit-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15);
           box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-left-box-shadow, -2px 2px 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-left-box-shadow, -2px 2px 2px rgba(0, 0, 0, 0.15));
   left: -7px;
   top: 12px;
 }
 .infotip__pointer--right {
   top: calc(50% - 8px);
   -webkit-box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.15);
           box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-right-box-shadow, 2px -2px 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-right-box-shadow, 2px -2px 2px rgba(0, 0, 0, 0.15));
   left: auto;
   right: -7px;
 }
 .infotip__pointer--right-bottom {
-  bottom: 12px;
   -webkit-box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.15);
           box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-right-box-shadow, 2px -2px 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-right-box-shadow, 2px -2px 2px rgba(0, 0, 0, 0.15));
+  bottom: 12px;
   left: auto;
   right: -7px;
   top: auto;
 }
 .infotip__pointer--right-top {
   -webkit-box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.15);
           box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: var(--bubble-right-box-shadow, 2px -2px 2px rgba(0, 0, 0, 0.15));
+          box-shadow: var(--bubble-right-box-shadow, 2px -2px 2px rgba(0, 0, 0, 0.15));
   left: auto;
   right: -7px;
   top: 12px;