モバイルボタンのレイアウトシフト対応

xserver-inc · Apr 12, 2024 · cdb363a · cdb363a
1 parent 915e874
commit cdb363a
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 28 deletions.
diff --git a/amp.css b/amp.css
@@ -7775,7 +7775,7 @@ div.fb-like-mobile {
 }
 .mobile-menu-buttons .menu-button {
   position: relative;
-  width: 100%;
+  width: 70px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -10226,15 +10226,18 @@ pre {
   .mobile-header-menu-buttons {
     top: 0;
     bottom: auto;
-    justify-content: space-around;
+    justify-content: space-between;
     min-width: 46px;
     box-shadow: 0 0 5px darkgrey;
   }
-  .has-logo-button .menu-button {
-    width: 70px;
+  .logo-menu-button {
+    flex-grow: 1;
   }
-  .has-logo-button .logo-menu-button {
-    flex-grow: 99;
+  .mobile-footer-menu-buttons {
+    justify-content: space-around;
+  }
+  .mobile-footer-menu-buttons .menu-button {
+    width: 100%;
   }
   .no-mobile-sidebar .sidebar,
   .mobile-button-fmb .go-to-top-button,

diff --git a/css/admin.css b/css/admin.css
@@ -7334,7 +7334,7 @@ body.wp-admin {
 }
 .admin-settings .demo .mobile-menu-buttons .menu-button {
   position: relative;
-  width: 100%;
+  width: 70px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -15809,7 +15809,7 @@ body.wp-admin {
 }
 .admin-settings .demo .mobile-menu-buttons .menu-button {
   position: relative;
-  width: 100%;
+  width: 70px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -18813,15 +18813,18 @@ body.wp-admin {
   .admin-settings .demo .mobile-header-menu-buttons {
     top: 0;
     bottom: auto;
-    justify-content: space-around;
+    justify-content: space-between;
     min-width: 46px;
     box-shadow: 0 0 5px darkgrey;
   }
-  .admin-settings .demo .has-logo-button .menu-button {
-    width: 70px;
+  .admin-settings .demo .logo-menu-button {
+    flex-grow: 1;
+  }
+  .admin-settings .demo .mobile-footer-menu-buttons {
+    justify-content: space-around;
   }
-  .admin-settings .demo .has-logo-button .logo-menu-button {
-    flex-grow: 99;
+  .admin-settings .demo .mobile-footer-menu-buttons .menu-button {
+    width: 100%;
   }
   .admin-settings .demo .no-mobile-sidebar .sidebar,
   .admin-settings .demo .mobile-button-fmb .go-to-top-button,

diff --git a/scss/_mobile-menu-buttons.scss b/scss/_mobile-menu-buttons.scss
@@ -35,7 +35,7 @@
 
   .menu-button {
     position: relative;
-    width: 100%;
+    width: 70px;
     cursor: pointer;
     display: flex;
     align-items: center;

diff --git a/scss/breakpoints/_max-width-1023.scss b/scss/breakpoints/_max-width-1023.scss
@@ -94,20 +94,32 @@ div.sidebar {
 .mobile-header-menu-buttons {
   top: 0;
   bottom: auto;
-  justify-content: space-around;
+  justify-content: space-between;
   min-width: 46px;
   // z-index: 3;
   box-shadow: 0 0 5px darkgrey;
 }
 
-.has-logo-button {
-  .menu-button {
-    width: 70px;
-  }
+.logo-menu-button{
+  // flex: 1;
+  flex-grow: 1;
+}
+// .has-logo-button {
+//   .menu-button {
+//     width: 70px;
+//   }
+
+//   .logo-menu-button {
+//     flex-grow: 99;
+//     // flex-shrink: 0;
+//   }
+// }
+
+.mobile-footer-menu-buttons{
+  justify-content: space-around;
 
-  .logo-menu-button {
-    flex-grow: 99;
-    // flex-shrink: 0;
+  .menu-button{
+    width: 100%;
   }
 }
 

diff --git a/style.css b/style.css
@@ -7800,7 +7800,7 @@ div.fb-like-mobile {
 }
 .mobile-menu-buttons .menu-button {
   position: relative;
-  width: 100%;
+  width: 70px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -11354,15 +11354,18 @@ _:-ms-lang(x), .mc-circle {
   .mobile-header-menu-buttons {
     top: 0;
     bottom: auto;
-    justify-content: space-around;
+    justify-content: space-between;
     min-width: 46px;
     box-shadow: 0 0 5px darkgrey;
   }
-  .has-logo-button .menu-button {
-    width: 70px;
+  .logo-menu-button {
+    flex-grow: 1;
   }
-  .has-logo-button .logo-menu-button {
-    flex-grow: 99;
+  .mobile-footer-menu-buttons {
+    justify-content: space-around;
+  }
+  .mobile-footer-menu-buttons .menu-button {
+    width: 100%;
   }
   .no-mobile-sidebar .sidebar,
   .mobile-button-fmb .go-to-top-button,