fix: updated spacing for tourtip and drawer-dialog (#1906)

eBay · Oct 20, 2022 · 0231956 · 0231956
1 parent d273e51
commit 0231956
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 20 deletions.
diff --git a/dist/drawer-dialog/drawer-dialog.css b/dist/drawer-dialog/drawer-dialog.css
@@ -20,7 +20,7 @@
 .drawer-dialog__header {
   display: flex;
   flex-shrink: 0;
-  margin: 16px 16px 0;
+  margin: 20px 16px 0;
   position: relative;
 }
 .drawer-dialog__header h1,

diff --git a/dist/tourtip/tourtip.css b/dist/tourtip/tourtip.css
@@ -8,7 +8,7 @@ span.tourtip {
   display: inline-block;
 }
 .tourtip__overlay {
-  border-radius: var(--bubble-border-radius, var(--border-radius-50));
+  border-radius: var(--bubble-border-radius, var(--border-radius-100));
   filter: var(--bubble-filter);
   font-size: 14px;
   max-width: 344px;
@@ -20,7 +20,7 @@ span.tourtip {
   position: absolute;
 }
 .tourtip__mask {
-  border-radius: var(--bubble-border-radius, var(--border-radius-50));
+  border-radius: var(--bubble-border-radius, var(--border-radius-100));
   position: relative;
   z-index: 1;
   background-color: var(--tourtip-background-color, var(--color-background-primary));
@@ -31,7 +31,7 @@ span.tourtip__mask {
 }
 .tourtip__cell {
   display: flex;
-  padding: 8px 16px;
+  padding: 16px;
   word-break: break-word;
   flex-wrap: wrap;
 }
@@ -136,9 +136,9 @@ button.tourtip__close > svg {
   top: 12px;
 }
 .tourtip__heading {
-  font-size: 1em;
+  font-size: 1.25rem;
   font-weight: bold;
-  margin: 0 0 4px;
+  margin: 0 0 8px;
 }
 span.tourtip__heading {
   display: block;

diff --git a/dist/variables/variables.less b/dist/variables/variables.less
@@ -35,6 +35,7 @@
 @spacing-100: 8px;
 @spacing-150: @spacing-100 * 1.5;
 @spacing-200: @spacing-100 * 2;
+@spacing-250: @spacing-100 * 2.5;
 @spacing-300: @spacing-100 * 3;
 @spacing-400: @spacing-100 * 4;
 @spacing-600: @spacing-100 * 6;

diff --git a/src/less/drawer-dialog/drawer-dialog.less b/src/less/drawer-dialog/drawer-dialog.less
@@ -13,7 +13,7 @@
 }
 
 .drawer-dialog__header {
-    .dialog-header-content();
+    .dialog-header-content(@top-margin: @spacing-250);
 }
 
 .drawer-dialog__header .fake-link {

diff --git a/src/less/mixins/private/bubble-mixins.less b/src/less/mixins/private/bubble-mixins.less
@@ -5,8 +5,8 @@
         drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
 }
 
-.bubble() {
-    .border-radius-token(bubble-border-radius, border-radius-50);
+.bubble(@border-radius-value: border-radius-50) {
+    .border-radius-token(bubble-border-radius, @border-radius-value);
 
     filter: var(--bubble-filter);
     font-size: 14px;
@@ -17,8 +17,8 @@
     z-index: 1;
 }
 
-.bubble-mask() {
-    .border-radius-token(bubble-border-radius, border-radius-50);
+.bubble-mask(@border-radius-value: border-radius-50) {
+    .border-radius-token(bubble-border-radius, @border-radius-value);
     position: relative;
     z-index: 1;
 }
@@ -28,9 +28,9 @@
 }
 
 // creates basic layout
-.bubble-cell() {
+.bubble-cell(@tourtip-spacing: @spacing-100 @spacing-200) {
     display: flex;
-    padding: @spacing-100 @spacing-200;
+    padding: @tourtip-spacing;
     word-break: break-word;
 }
 

diff --git a/src/less/mixins/private/dialog-mixins.less b/src/less/mixins/private/dialog-mixins.less
@@ -46,11 +46,11 @@
     max-width: calc(100% - 32px);
 }
 
-.dialog-header-content() {
+.dialog-header-content(@top-margin: @spacing-200) {
     display: flex;
     // Fix for Safari not honoring min-height
     flex-shrink: 0;
-    margin: @spacing-200 @spacing-200 0;
+    margin: @top-margin @spacing-200 0;
     position: relative;
 
     h1,

diff --git a/src/less/tourtip/tourtip.less b/src/less/tourtip/tourtip.less
@@ -11,14 +11,14 @@ span.tourtip {
 }
 
 .tourtip__overlay {
-    .bubble();
+    .bubble(@border-radius-value: border-radius-100);
 
     display: none;
     position: absolute;
 }
 
 .tourtip__mask {
-    .bubble-mask();
+    .bubble-mask(@border-radius-value: border-radius-100);
     .background-color-token(tourtip-background-color, color-background-primary);
     .color-token(tourtip-foreground-color, color-foreground-primary);
 }
@@ -28,7 +28,7 @@ span.tourtip__mask {
 }
 
 .tourtip__cell {
-    .bubble-cell();
+    .bubble-cell(@tourtip-spacing: @spacing-200);
 
     flex-wrap: wrap;
 
@@ -114,9 +114,9 @@ button.tourtip__close > svg {
 }
 
 .tourtip__heading {
-    font-size: 1em;
+    font-size: @font-size-20;
     font-weight: bold;
-    margin: 0 0 @spacing-50;
+    margin: 0 0 @spacing-100;
 }
 
 span.tourtip__heading {

diff --git a/src/less/variables/variables.less b/src/less/variables/variables.less
@@ -35,6 +35,7 @@
 @spacing-100: 8px;
 @spacing-150: @spacing-100 * 1.5;
 @spacing-200: @spacing-100 * 2;
+@spacing-250: @spacing-100 * 2.5;
 @spacing-300: @spacing-100 * 3;
 @spacing-400: @spacing-100 * 4;
 @spacing-600: @spacing-100 * 6;