Handle visibility of push drawer

ArthurClemens · Jul 14, 2023 · 726ed27 · 726ed27
1 parent 9b8cf74
commit 726ed27
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 19 deletions.
diff --git a/assets/css/prompt.css b/assets/css/prompt.css
@@ -27,7 +27,8 @@ GENERAL
 ----------------------------------------------------- */
 
 /* Hide inner elements as long as prompt is not open. */
-[data-prompt] [data-prompt-content] {
+/* -- Push drawers should be visible, because the pushed content should be visible at all times. */
+[data-prompt]:not([data-ispush]) [data-prompt-content] {
   visibility: hidden;
 }
 
@@ -38,11 +39,6 @@ GENERAL
   transition-duration: 0ms;
 }
 
-/* -- Push drawers should be visible, because the pushed content should be visible at all times. */
-[data-prompt][data-ispush]>input[type=checkbox][data-ismounted]+[data-prompt-content] {
-  visibility: visible;
-}
-
 [data-prompt]>input[type=checkbox]:checked+[data-prompt-content] {
   visibility: visible;
 }
@@ -114,9 +110,11 @@ GENERAL
 [data-prompt]:not([data-isdrawer]) [data-content]:not([aria-role="menu"]) {
   z-index: var(--prompt-z-index-dialog-content);
 }
+
 [data-prompt][data-isdrawer] [data-content]:not([aria-role="menu"]) {
   z-index: var(--prompt-z-index-drawer-content);
 }
+
 [data-prompt] [data-content][aria-role="menu"] {
   z-index: var(--prompt-z-index-menu-content);
 }
@@ -154,12 +152,12 @@ TOUCH AND BACKDROP
 }
 
 /* Backdrop regular fade */
-[data-prompt]:not([data-isfast]) > input[type=checkbox][data-ismounted] + [data-prompt-content] [data-backdrop] {
+[data-prompt]:not([data-isfast])>input[type=checkbox][data-ismounted]+[data-prompt-content] [data-backdrop] {
   transition-duration: var(--prompt-transition-duration-backdrop);
 }
 
 /* Backdrop fast fade */
-[data-prompt][data-isfast] > input[type=checkbox][data-ismounted] + [data-prompt-content] [data-backdrop] {
+[data-prompt][data-isfast]>input[type=checkbox][data-ismounted]+[data-prompt-content] [data-backdrop] {
   transition-duration: var(--prompt-fast-transition-duration-backdrop);
 }
 
@@ -199,12 +197,12 @@ DIALOG
 }
 
 /* Transition: regular */
-[data-prompt]:not([data-isfast]) > input[type=checkbox][data-ismounted] + [data-prompt-content] [data-content] {
+[data-prompt]:not([data-isfast])>input[type=checkbox][data-ismounted]+[data-prompt-content] [data-content] {
   transition-duration: var(--prompt-transition-duration-content);
 }
 
 /* Transition: fast */
-[data-prompt][data-isfast] > input[type=checkbox][data-ismounted] + [data-prompt-content] [data-content] {
+[data-prompt][data-isfast]>input[type=checkbox][data-ismounted]+[data-prompt-content] [data-content] {
   transition-duration: var(--prompt-fast-transition-duration-content);
 }
 
@@ -235,13 +233,13 @@ DRAWER
   transition-timing-function: var(--prompt-transition-timing-function-content);
 }
 
-[data-prompt][data-isdrawer]:not([data-isfast]) > input[type=checkbox][data-ismounted] + [data-prompt-content] [data-content],
-[data-prompt][data-isdrawer]:not([data-isfast]) > input[type=checkbox][data-ismounted] + [data-prompt-content] [data-drawer-content] {
+[data-prompt][data-isdrawer]:not([data-isfast])>input[type=checkbox][data-ismounted]+[data-prompt-content] [data-content],
+[data-prompt][data-isdrawer]:not([data-isfast])>input[type=checkbox][data-ismounted]+[data-prompt-content] [data-drawer-content] {
   transition-duration: var(--prompt-transition-duration-content);
 }
 
-[data-prompt][data-isdrawer][data-isfast] > input[type=checkbox][data-ismounted] + [data-prompt-content] [data-content],
-[data-prompt][data-isdrawer][data-isfast] > input[type=checkbox][data-ismounted] + [data-prompt-content] [data-drawer-content] {
+[data-prompt][data-isdrawer][data-isfast]>input[type=checkbox][data-ismounted]+[data-prompt-content] [data-content],
+[data-prompt][data-isdrawer][data-isfast]>input[type=checkbox][data-ismounted]+[data-prompt-content] [data-drawer-content] {
   transition-duration: var(--prompt-fast-transition-duration-content);
 }
 

diff --git a/priv/static/primer-live.css b/priv/static/primer-live.css
@@ -26942,17 +26942,14 @@ a.branch-name .octicon {
   --prompt-z-index-drawer-content: 200;
   --prompt-z-index-dialog-content: 300;
 }
-[data-prompt] [data-prompt-content] {
+[data-prompt]:not([data-ispush]) [data-prompt-content] {
   visibility: hidden;
 }
 [data-prompt] [data-backdrop],
 [data-prompt] [data-content],
 [data-prompt] [data-drawer-content] {
   transition-duration: 0ms;
 }
-[data-prompt][data-ispush] > input[type=checkbox][data-ismounted] + [data-prompt-content] {
-  visibility: visible;
-}
 [data-prompt] > input[type=checkbox]:checked + [data-prompt-content] {
   visibility: visible;
 }

diff --git a/priv/static/primer-live.min.css b/priv/static/primer-live.min.css